/* ===== Local Font Definition ===== */ @font-face { font-family: "Outfit"; src: url("/gtv/Font/Outfit/Outfit-VariableFont_wght.ttf") format("truetype-variations"), url("/gtv/Font/Outfit/Outfit-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --cassiopeia-color-primary: #2a2a2e; --cassiopeia-color-hover: rgba(0, 0, 0, 1); --color-primary: #c41e3a; --color-primary-dark: #9a1830; --color-primary-light: #e63950; --color-secondary: #ffd700; --color-secondary-dark: #cc9a00; --color-secondary-light: #ffe44d; --bg-dark: #2a2a2e; --bg-darker: #202024; --bg-card: #35353a; --bg-card-hover: #3f3f45; --bg-overlay: rgba(0, 0, 0, 0.4); --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #888888; --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); --gradient-gold: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); --gradient-dark: linear-gradient(180deg, var(--bg-dark), var(--bg-darker)); --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2)); --glass-bg: rgba(20, 20, 20, 0.8); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: blur(20px); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 30px rgba(196, 30, 58, 0.3); --font-primary: 'Outfit', 'Segoe UI', Tahoma, sans-serif; --font-kurdish: 'Outfit', 'Noto Sans Arabic', sans-serif; --text-xs: 0.75rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.5rem; --text-5xl: 3rem; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --radius-sm: 4px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 50%; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-tooltip: 500; --text-sm: 0.875rem; --space-md: 1rem; --radius-md: 8px; --transition-fast: 0.15s ease; --primary-glow: rgba(178, 7, 16, 0.4); --footer_a_hover: rgb(255, 255, 255); --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --telegram-gradient: linear-gradient(135deg, #0088cc 0%, #00c6ff 100%); --email-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --box-shadows: 0 40px 70px -15px rgba(196, 30, 58, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; --base-1: #071426; --base-1a: #081d30; --base-2: #040911; --base-2a: #050d16; --base-3: #000308; --base-3a: #000205; --veil-a: rgba(8, 22, 42, 0.88); --veil-b: rgba(33, 58, 88, 0.32); --veil-c: rgba(3, 7, 13, 0.54); --veil-d: rgba(15, 35, 60, 0.26); --glow-1: rgba(76, 111, 151, 0.18); --glow-2: rgba(117, 151, 190, 0.14); --glow-3: rgba(45, 85, 130, 0.12); --line: rgba(192, 207, 224, 0.10); --grain: rgba(215, 225, 238, 0.12); --button-bg: rgba(8, 18, 32, 0.62); --button-border: rgba(188, 204, 224, 0.18); --button-fg: #e7edf7; --shadow: 0 20px 70px rgba(0, 0, 0, 0.36); --panel-bg: rgba(7, 18, 34, 0.38); --panel-edge: rgba(188, 204, 224, 0.14); --panel-glow: rgba(76, 111, 151, 0.24); --panel-sheen: rgba(117, 151, 190, 0.16); --panel-depth: rgba(0, 3, 8, 0.34); --panel-shadow: rgba(0, 0, 0, 0.38); --grid: rgba(255, 255, 255, 0.028); --yellow: #ffc400; --yellow-soft: #ffd34a; --yellow-glow: rgba(255, 196, 0, 0.34); --shadow_2: 0 34px 90px rgba(0, 0, 0, 0.4); --reflection-image: none; --header-height: 72px; --header-sheen: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 62%, transparent 100%); --primary-red: #8fa3b8; --primary-red-dark: #536779; --site-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --r-card: 16px; --r-pill: 999px; --bg: #1c2029; --panel: rgba(255, 255, 255, 0.05); --panel-strong: rgba(255, 255, 255, 0.11); --muted: rgba(241, 240, 234, 0.62); --card-bg: #262b35; --card-bd: rgba(255, 255, 255, 0.085); --card-sh: 0 14px 36px rgba(8, 10, 16, 0.42); --card-sh-hover: 0 26px 60px rgba(8, 10, 16, 0.5), 0 0 0 1px rgba(255, 200, 61, 0.28), 0 0 42px rgba(255, 200, 61, 0.13); --header-bg: linear-gradient(90deg, #20242e 0%, #262b36 24%, #2c323f 50%, #262b36 76%, #20242e 100%); --header-bg-scrolled: linear-gradient(90deg, #1b1f28 0%, #21252f 24%, #272c38 50%, #21252f 76%, #1b1f28 100%); --header-edge: linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.4), transparent); --bg: #0e0f13; --grid: rgba(255, 255, 255, 0.022); --panel: rgba(255, 255, 255, 0.065); --panel-strong: rgba(255, 255, 255, 0.13); --text: #f6f3ea; --muted: rgba(246, 243, 234, 0.66); --yellow: #ffc83d; --yellow-soft: #ffdf86; --yellow-glow: rgba(255, 200, 61, 0.32); --shadow: 0 30px 80px rgba(0, 0, 0, 0.46); --reflection-image: none; --header-height: 72px; --header-bg: linear-gradient(90deg, #101116 0%, #16171d 22%, #1e2027 50%, #16171d 78%, #101116 100%); --header-bg-scrolled: linear-gradient(90deg, #0c0d11 0%, #121319 22%, #1a1b22 50%, #121319 78%, #0c0d11 100%); --header-sheen: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 200, 61, 0.12) 50%, rgba(255, 255, 255, 0.04) 62%, transparent 100%); --header-edge: linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.34), transparent); --primary-red: #ef3a46; --primary-red-dark: #c4111d; --red: #ef3a46; --red-dark: #c4111d; --red-glow: rgba(239, 58, 70, 0.30); --bg_shr: #0e0f13; --panel_shr: rgba(31, 32, 38, 0.78); --text_shr: #ffffff; --muted_shr: #b8bbc3; --line_shr: rgba(255, 255, 255, 0.13); --red_shr: #ef3a46; --yellow_shr: #ffc83d; --shadow_shr: 0 28px 72px rgba(0, 0, 0, 0.34); --green: #4caf50; --green-glow: rgba(76, 175, 80, 0.28); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1); } [data-theme="light"] { --bg-dark: #f5f5f5; --bg-darker: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f8f8f8; --bg-overlay: rgba(255, 255, 255, 0.9); --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-muted: #666666; --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(0, 0, 0, 0.1); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.18); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.22); --shadow-glow: 0 0 20px rgba(196, 30, 58, 0.2); --card-border: 1px solid rgba(0, 0, 0, 0.1); --gradient-dark: linear-gradient(180deg, var(--bg-dark), var(--bg-darker)); --gradient-card: linear-gradient(145deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.05)); --input-bg: rgba(0, 0, 0, 0.05); --color-secondary: #830f0f; --footer_a_hover: rgb(46, 45, 45); --box-shadows: 0 40px 70px -15px rgba(251, 223, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; --base-1: #ffffff; --base-1a: #fefdfb; --base-2: #f8f4ec; --base-2a: #f0e8d8; --base-3: #e8dcc8; --base-3a: #ddc8b0; --veil-a: rgba(255, 255, 255, 0.86); --veil-b: rgba(218, 202, 174, 0.22); --veil-c: rgba(244, 239, 229, 0.28); --veil-d: rgba(230, 218, 202, 0.18); --glow-1: rgba(218, 202, 174, 0.15); --glow-2: rgba(244, 239, 229, 0.18); --glow-3: rgba(255, 245, 230, 0.12); --line: rgba(116, 97, 65, 0.08); --grain: rgba(64, 52, 34, 0.07); --button-bg: rgba(255, 255, 255, 0.62); --button-border: rgba(116, 97, 65, 0.15); --button-fg: #3f3422; --shadow: 0 18px 55px rgba(96, 76, 44, 0.11); --panel-bg: rgba(255, 255, 255, 0.24); --panel-edge: rgba(118, 96, 63, 0.12); --panel-glow: rgba(255, 255, 255, 0.56); --panel-sheen: rgba(255, 255, 255, 0.42); --panel-depth: rgba(204, 188, 160, 0.16); --panel-shadow: rgba(96, 76, 44, 0.13); --panel-gap: clamp(18px, 1cm, 38px); --grid: rgba(0, 0, 0, 0.022); --header-bg: linear-gradient(90deg, #373333 0%, #444040 22%, #504c4c 50%, #444040 78%, #373333 100%); --header-bg-scrolled: linear-gradient(90deg, #302d2d 0%, #3c3838 22%, #464242 50%, #3c3838 78%, #302d2d 100%); --header-sheen: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0.54) 50%, rgba(255, 255, 255, 0.18) 62%, transparent 100%); --header-edge: linear-gradient(90deg, transparent, rgba(105, 122, 142, 0.34), transparent); --shadow_2: 0 30px 80px rgba(17, 24, 39, 0.18); --bg: #f3f4f7; --text: #2c2e37; --muted: rgba(21, 22, 28, 0.66); --panel: rgba(255, 255, 255, 0.74); --panel-strong: rgba(255, 255, 255, 0.92); --card-bg: #ffffff; --card-bd: rgba(20, 24, 40, 0.1); --card-sh: 0 12px 30px rgba(20, 28, 44, 0.1); --card-sh-hover: 0 22px 52px rgba(20, 28, 44, 0.16), 0 0 0 1px rgba(232, 164, 0, 0.3); --bg_shr: #edf0f4; --panel_shr: rgba(248, 250, 252, 0.82); --text_shr: #171717; --muted_shr: #5e6673; --line_shr: rgba(72, 84, 98, 0.16); --shadow_shr: 0 24px 62px rgba(33, 43, 54, 0.16); } * { box-sizing: border-box; } html { margin: 0; background: repeating-linear-gradient(135deg, var(--grid) 0 1px, transparent 1px 42px), radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.055), transparent 32%), radial-gradient(circle at 82% 64%, rgba(255, 255, 255, 0.045), transparent 30%), var(--bg); } [data-theme="light"] html { background: radial-gradient(1100px 620px at 8% -8%, rgba(232, 164, 0, 0.08), transparent 56%), radial-gradient(1000px 720px at 102% 4%, rgba(96, 142, 224, 0.1), transparent 54%), radial-gradient(1200px 900px at 50% 120%, rgba(138, 110, 224, 0.07), transparent 60%), linear-gradient(180deg, #f6f7fb 0%, #eef1f6 60%, #e9edf3 100%) !important; } body { font-family: var(--font-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: margin 300ms ease, padding 300ms ease, background 480ms ease; padding: calc(var(--header-height) + clamp(6px, 1.2vw, 14px)) clamp(18px, 4vw, 56px) clamp(18px, 4vw, 56px); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: repeating-linear-gradient(135deg, var(--grid) 0 1px, transparent 1px 42px), radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.055), transparent 32%), radial-gradient(circle at 82% 64%, rgba(255, 255, 255, 0.045), transparent 30%), var(--bg); background-size: auto, auto, auto, auto; animation: none !important; background: radial-gradient(1100px 620px at 8% -8%, rgba(255, 200, 61, 0.10), transparent 58%), radial-gradient(1000px 720px at 102% 4%, rgba(96, 142, 224, 0.16), transparent 56%), radial-gradient(1200px 900px at 50% 118%, rgba(138, 110, 224, 0.12), transparent 60%), linear-gradient(180deg, #242936 0%, #1f2430 44%, #1b2028 100%) !important; background-attachment: scroll, scroll, scroll, scroll; background-attachment: fixed !important; min-height: 100vh; margin: 0; padding: calc(var(--header-height) + clamp(6px, 1.2vw, 14px)) clamp(18px, 4vw, 56px) clamp(18px, 4vw, 56px); font-family: var(--site-font); padding-right: unset; padding-left: unset; } html, body, button, input, select, textarea, optgroup, body * { font-family: var(--site-font) !important; } video { object-fit: contain; } body.shr { padding: unset !important; } [data-theme="light"] body { background: radial-gradient(1100px 620px at 8% -8%, rgba(232, 164, 0, 0.08), transparent 56%), radial-gradient(1000px 720px at 102% 4%, rgba(96, 142, 224, 0.1), transparent 54%), radial-gradient(1200px 900px at 50% 120%, rgba(138, 110, 224, 0.07), transparent 60%), linear-gradient(180deg, #f6f7fb 0%, #eef1f6 60%, #e9edf3 100%) !important; background-attachment: scroll, scroll, scroll, scroll; background-attachment: fixed !important; } .header.container-header { display: none; } .heri_dawi_home_2>ul { display: none; } #thumbs article.video-card { display: none; } @keyframes diagonalLinesDrift { from { background-position: 0 0, center, center, center; } to { background-position: 84px 84px, center, center, center; } } .pattern-panel { inset: var(--panel-gap); z-index: 1; overflow: hidden; background: linear-gradient(142deg, var(--panel-glow), transparent 34%), linear-gradient(318deg, transparent 42%, var(--panel-depth) 100%), linear-gradient(225deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%), var(--panel-bg); border: 1px solid var(--panel-edge); border-radius: clamp(34px, 5vw, 68px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -42px 78px var(--panel-depth), inset -80px -80px 120px rgba(255, 255, 255, 0.08), inset 80px 80px 120px rgba(0, 0, 0, 0.04), 0 32px 90px var(--panel-shadow); transition: background 480ms ease, border-color 480ms ease, box-shadow 480ms ease; backdrop-filter: blur(14px) saturate(1.12); -webkit-backdrop-filter: blur(14px) saturate(1.12); margin-left: 3em; margin-right: 3em; } .pattern-panel::before, .pattern-panel::after { position: absolute; inset: 0; content: ""; } .pattern-panel::before { background: repeating-linear-gradient(90deg, transparent 0 31px, var(--line) 31px 32px), repeating-linear-gradient(0deg, transparent 0 31px, var(--line) 31px 32px); background-position: var(--grid-shift-x, 0px) var(--grid-shift-y, 0px), var(--grid-shift-x, 0px) var(--grid-shift-y, 0px); opacity: 0.78; transition: background-position 120ms linear, opacity 480ms ease; } .pattern-panel::after { background: linear-gradient(90deg, var(--base-1), transparent 12%, transparent 88%, var(--base-3)), linear-gradient(180deg, var(--base-1), transparent 14%, transparent 86%, var(--base-3)), linear-gradient(145deg, var(--panel-sheen), transparent 36%, transparent 68%, var(--panel-depth)); opacity: 0.22; } @keyframes float-1 { 0%, 100% { transform: translate(0, 0); opacity: 0.12; } 25% { transform: translate(24px, -18px); opacity: 0.16; } 50% { transform: translate(12px, 32px); opacity: 0.14; } 75% { transform: translate(-28px, 14px); opacity: 0.15; } } @keyframes float-2 { 0%, 100% { transform: translate(0, 0); opacity: 0.14; } 25% { transform: translate(-32px, 24px); opacity: 0.18; } 50% { transform: translate(28px, -18px); opacity: 0.15; } 75% { transform: translate(18px, -32px); opacity: 0.17; } } @keyframes float-3 { 0%, 100% { transform: translate(0, 0); opacity: 0.13; } 25% { transform: translate(28px, 18px); opacity: 0.15; } 50% { transform: translate(-24px, -28px); opacity: 0.16; } 75% { transform: translate(-18px, 32px); opacity: 0.14; } } @keyframes shimmer { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.26; } } a { color: var(--text); } .home_page .container-header { width: 100%; /* margin-bottom: -180px; */ } .container-header { background-color: #454040; background-image: unset; } .header { position: sticky; top: 0; transition: transform .25s ease, background-color .2s; will-change: transform, opacity; box-shadow: 2px 1px 5px gray; } .header .container-nav { max-width: unset; margin-left: auto; margin-right: auto; width: fit-content; } .header.scrolled { background: rgba(0, 0, 0, .8); } @keyframes slideInFromLeft { from { transform: translateX(-20px); } to { transform: translateX(0); } } @keyframes fadeInSlide { to { opacity: 1; transform: translateX(0); } } #mod-menu1 li:not(:first-child) { opacity: 0; animation: fadeInSlide 0.1s ease forwards; transform: translateX(-10px); } #mod-menu1 li:hover::after, #mod-menu1 li.active::after { background: none; left: 0; right: 2px; } #mod-menu1 a, #mod-menu1 li, #mod-menu1 .mod-menu__toggle-sub { color: #ffffff; font-size: var(--text-sm); font-weight: 700; padding: 0.5em 0.75em; border-radius: var(--radius-md); transition: background-size 0.22s ease, color 0.18s ease; position: relative; text-transform: uppercase; white-space: nowrap; background-image: linear-gradient(#ffc506, #ffc506), linear-gradient(#ffc506, #ffc506); background-repeat: no-repeat; background-position: left bottom, left bottom; background-size: 0 0, 100% 0; margin: unset; display: flex; align-items: center; } .home_page #mod-menu1 .active { background-image: none; } /* #mod-menu1 li{ padding: .5em; } */ #mod-menu1 .nav-item.item-101 { max-width: 11rem; } #mod-menu1 .nav-item.item-101, #mod-menu1 .nav-item.item-101 a { padding-left: 0; } #mod-menu1 .nav-item.item-110 { padding-left: 1.15em; } #mod-menu1 .nav-item.item-111 button[type="submit"] { background: var(--gradient-primary); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: all 0.3s ease; flex-shrink: 0; margin-right: .7em; } #mod-menu1 a:hover, #mod-menu1 li.active a { color: #1e1e2b; background-size: 100% 2px, 100% 100%; transition-delay: 0.08s; } .home_page #mod-menu1 .active a, #mod-menu1 .nav-item.item-101 a:hover { background-image: none; } #mod-menu1 .icon-chevron-down { display: none; } #mod-menu1-submenu0 { display: none; position: absolute; background-color: #454040; min-width: 200px; box-shadow: var(--shadow-lg); border-radius: var(--radius-md); z-index: 1000; top: 100%; left: 0; border: 1px solid var(--glass-border); backdrop-filter: blur(10px); overflow: hidden; animation: fadeIn 0.2s ease-in-out; } #mod-menu1 .item-101, #mod-menu1 .item-101 a { animation: slideInFromLeft 1s ease forwards; background-image: unset; } #mod-menu1 { flex-wrap: nowrap; } #mod-menu1>* { flex: 0 1 auto; min-width: 0; } .mod_reber_apo, .mod_sehiden_me, .mod_hpg_sehit, .mod_calaki, .mod_gerila, .mod_film, .mod_container_bottom_b, .mod_cand_u_huner, .mod_taybet, .mod_reber_apo h3, .mod_sehiden_me h3, .mod_hpg_sehit h3, .mod_calaki h3, .mod_gerila h3, .mod_film h3, .mod_container_bottom_b h3, .mod_bernama { background-color: transparent; border: unset; } .mod_heri_dawi { background: unset; color: white; border: unset; } .mod_heri_dawi .card-header { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); position: relative; padding-bottom: 8px; border: unset; } .mod_heri_dawi .card-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: #c41e3a; border-radius: 2px; margin-left: var(--card-cap-padding-x); } .mod_heri_dawi .card-header a { text-decoration: none; color: var(--text); } .mod_taybet li { /* zoom: 2; */ } .home_page .card-body { padding: unset; } .home_page .no-card .newsflash-horiz { grid-gap: 1em; } .home_page .no-card .newsflash-horiz li { border: unset; padding: unset; border-radius: var(--radius-lg); margin-bottom: unset; } .home_page .no-card.heri_dawi_home li { margin: auto 18vw; } .home_page .no-card.heri_dawi_home li p { display: none; } .playng_video { width: 100%; height: 100%; /* object-fit: cover; border-radius: var(--radius-lg); */ } .video-card { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); transition: all var(--transition-normal); cursor: pointer; border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); opacity: 1 !important; visibility: visible !important; transform: none !important; } .video-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border: solid 1px darkred; } .video-thumbnail { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-card-hover); } .video-thumbnail::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); } .video-thumbnail[data-no-after="1"]::after { display: none !important; content: none !important; } .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 60px; height: 60px; background: var(--gradient-primary); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all var(--transition-normal); z-index: 2; } .video-play svg { width: 24px; height: 24px; fill: var(--text-primary); margin-left: 4px; } .video-card:hover .video-play { opacity: 1; transform: translate(-50%, -50%) scale(1); } .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); display: block; } .video-card:hover .video-thumbnail img { transform: scale(1.1); } .video-duration { position: absolute; bottom: 8px; right: 8px; background: var(--bg-dark); color: var(--text-primary); font-size: var(--text-xs); font-weight: 600; padding: 2px 6px; border-radius: var(--radius-sm); z-index: 2; } .video-info { padding: var(--space-md); } .video-title, .video-title a { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-xs); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; min-height: calc(2 * 1.2em); max-height: calc(2 * 1.2em); word-break: break-word; text-decoration: none; } .video-title, .video-title.shorts-title a { -webkit-line-clamp: unset; line-clamp: unset; -webkit-line-clamp: unset; text-overflow: unset; line-height: unset; min-height: unset; max-height: unset; word-break: unset; } .video-meta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-xs); color: var(--text-muted); } .video-views, .video-date { display: flex; align-items: center; gap: var(--space-xs); } .mod_reber_apo .section-title::before { background: var(--gradient-gold); } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2xl); /* background: linear-gradient(to right, yellow 20%, red 30%, red 66%, green 77%); */ border-radius: var(--radius-sm); } .section-title { /* position: relative; font-size: var(--text-3xl); font-weight: 700; display: flex; align-items: center; gap: var(--space-md); color: black; color: var(--text-secondary); margin-top: 1em; */ margin: unset; padding: .5em; } .section-title::before { content: ''; width: 4px; height: 100%; min-height: 40px; background: var(--gradient-primary); border-radius: var(--radius-sm); } /* */ .section-title a { position: relative; display: inline-block; padding: 2px 12px; margin: -2px -12px; z-index: 1; color: inherit; text-decoration: none; border-radius: var(--radius-sm); transition: color 0.3s ease; } .section-title a::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #ffc506; z-index: -1; transition: width 0.4s cubic-bezier(0.65, 0, 0.076, 1); border-radius: var(--radius-sm); } .section-title a:hover::before { width: 100%; } .section-title a:hover { color: #1e1e2b; text-shadow: none; } .section-title a:hover .highlight { color: #1e1e2b; } .view-all { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary); font-weight: 500; transition: transform 800ms cubic-bezier(.2, .8, .2, 1); } .view-all:hover { color: var(--color-secondary); transform: translateX(var(--space-md)); } .view-all svg { width: 20px; height: 20px; } .slider { overflow: hidden; margin-top: 0; position: relative; border-radius: 0 0 15px 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .slider--top { /* width: calc(100% - 240px); margin: 20px 120px 40px 120px; border-radius: 20px; */ overflow: hidden; box-shadow: var(--box-shadows); } .slider--top .slider-container { height: 600px; background: url('/images/01_frontpage/slider_top.png') center center / cover no-repeat; background-attachment: scroll; background-attachment: fixed; } .slider-container { width: 100%; overflow: hidden; position: relative; } .slider--bottom { width: 100%; margin: 0; } .slider--bottom .slider-container { /* height: 659px; */ aspect-ratio: 1320 / 659; width: 100%; height: auto; } .slider_bottom { width: 100%; } .slider-container img { width: 100%; height: auto; object-fit: cover; display: block; position: absolute; top: 0; left: 0; will-change: transform; } .slider-gtv { z-index: 2; width: 60% !important; height: auto !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); object-fit: contain !important; } .slider-overlay { z-index: 3; mix-blend-mode: normal; opacity: 1; bottom: -1px; top: unset !important; } .content-section { padding: var(--space-3xl) 0; position: relative; background: var(--bg-darker); } .external-links-section { padding-top: clamp(42px, 6vw, 86px); padding-bottom: clamp(38px, 5vw, 72px); } .external-links-icons { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: clamp(28px, 5vw, 60px); } .external-icon-link { display: flex; flex-direction: column; align-items: center; width: min(170px, 42vw); gap: 12px; color: var(--text); text-align: center; text-decoration: none; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms ease; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease; } .external-icon-link:hover { color: var(--yellow-soft); transform: translateY(-8px); } .external-icon-link:hover .external-icon { transform: scale(1.1); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); border-color: var(--color-primary); } .external-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #202024; border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.12); border-right-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.12); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="light"] .external-icon { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 246, 249, 0.76)), #ffffff; border-color: rgba(72, 84, 98, 0.14); box-shadow: 0 14px 36px rgba(33, 43, 54, 0.12); } .external-icon-link:hover .external-icon { border-color: rgba(255, 200, 61, 0.66); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 200, 61, 0.12); transform: scale(1.1); } .external-icon img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; } .external-icon-label { color: var(--yellow-soft); font-size: 18px; font-weight: 690; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } [data-theme="light"] .external-icon-label { color: #9f7b00; text-shadow: none; } [data-theme="light"] .external-icon-label { color: #8a6400 !important; } .external-icon-description { max-width: 150px; color: var(--muted); font-size: 13px; font-weight: 620; line-height: 1.45; } [data-theme="light"] .external-icon-description { color: rgba(18, 20, 28, 0.78) !important; } .calaki-featured-image { display: flex; align-items: flex-end; justify-content: center; position: relative; height: 100%; } .calaki-featured-image img { width: 140%; height: auto; max-height: 550px; object-fit: contain; margin-top: -60px; margin-bottom: -20px; z-index: 2; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3)); } .home_page .grid-child.container-bottom-a { grid-column: full-start/full-end !important; display: none; } .slider-container { width: 100%; overflow: hidden; position: relative; background-color: rgba(150, 150, 150, 0.5); } .logo_menu_image:hover { transform: scale(1.5); } .logo_menu_image { /* height: 100px; */ width: auto; object-fit: contain; transition: transform 0.3s ease; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); transform: scale(1.3); } a.logo { display: flex; align-items: center; text-decoration: none; color: var(--color-secondary); text-decoration: none; transition: color var(--transition-fast); } /* Featured Video - Premium Glass Design */ .mod_page_video_player { background: unset; border: unset; } .mod_page_video_player .card-body { padding: unset; } .featured-player { /* max-width: 900px; */ margin: 0 auto var(--space-2xl); /* border-radius: 24px; */ overflow: hidden; position: relative; background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-top: 2em; z-index: 1; } .featured-player:hover { transform: translateY(-8px) scale(1.01); /* box-shadow: 0 40px 70px -15px rgba(196, 30, 58, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; */ } .featured-player-wrapper { position: relative; aspect-ratio: 16 / 9; overflow: hidden; /* background-image: url("data:image/svg+xml;utf8,"); background-size: 64px 64px; background-repeat: no-repeat; background-position: center; */ } .featured-player-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .featured-player:hover .featured-player-wrapper img { transform: scale(1.05); } /* Gradient Overlay on Featured */ .featured-player-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%); pointer-events: none; } .featured-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; background: rgba(196, 30, 58, 0.9); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; box-shadow: 0 10px 40px rgba(196, 30, 58, 0.5), 0 0 0 0 rgba(196, 30, 58, 0.4); animation: pulse-ring 2s ease-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 10px 40px rgba(196, 30, 58, 0.5), 0 0 0 0 rgba(196, 30, 58, 0.4); } 70% { box-shadow: 0 10px 40px rgba(196, 30, 58, 0.5), 0 0 0 20px rgba(196, 30, 58, 0); } 100% { box-shadow: 0 10px 40px rgba(196, 30, 58, 0.5), 0 0 0 0 rgba(196, 30, 58, 0); } } .featured-play-btn:hover { transform: translate(-50%, -50%) scale(1.15); background: #c41e3a; } .featured-play-btn svg { width: 36px; height: 36px; fill: white; margin-left: 6px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .featured-video-controls { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: linear-gradient(180deg, rgba(26, 35, 50, 0.95) 0%, rgba(26, 35, 50, 1) 100%); backdrop-filter: blur(10px); } .control-btn { background: rgba(255, 255, 255, 0.1); border: none; color: white; cursor: pointer; padding: 8px; border-radius: 8px; display: flex; align-items: center; transition: all 0.2s ease; } .control-btn:hover { background: rgba(196, 30, 58, 0.8); transform: scale(1.1); } .progress-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 3px; position: relative; overflow: hidden; cursor: pointer; } .progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #c41e3a, #ff6b6b); border-radius: 3px; transition: width 0.1s ease; } .time-display { color: rgba(255, 255, 255, 0.8); font-size: 13px; font-family: 'Outfit', monospace; font-weight: 500; min-width: 95px; text-align: center; } .featured-video-title { text-align: center; color: var(--text-primary); font-size: 1.25rem; margin-top: var(--space-lg); font-weight: 600; opacity: 0.9; } .heri_dawi_home li { display: none; max-width: 80%; } .heri_dawi_home li h4 { display: none; } .heri_dawi_home li:first-child { display: list-item; } /* .heri_dawi_home, .heri_dawi_home_2 { position: relative; grid-template-columns: minmax(0, 4.2fr) minmax(240px, 1fr); align-items: stretch; width: min(1640px, 100%); margin: 0 auto; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)), rgba(5, 18, 30, 0.66); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 34px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16); backdrop-filter: blur(20px) saturate(1.18); -webkit-backdrop-filter: blur(20px) saturate(1.18); animation: stageDepth 9000ms ease-in-out infinite alternate; transition: border-color 420ms ease, box-shadow 420ms ease; } .heri_dawi_home_2::before, .heri_dawi_home_2::after { position: absolute; content: ""; pointer-events: none; } .heri_dawi_home::before, .heri_dawi_home_2::before { inset: -24px; z-index: 0; background: linear-gradient(135deg, rgba(6, 25, 40, 0.42), rgba(6, 25, 40, 0.82)), var(--reflection-image) center / cover no-repeat; border-radius: inherit; opacity: 0.46; filter: blur(20px) saturate(0.95) brightness(0.82); transform: scale(1.08); animation: reflectionDrift 9000ms ease-in-out infinite alternate; } .heri_dawi_home_2::after { inset: 0; z-index: 0; background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.13), transparent 20%), radial-gradient(circle at 92% 76%, rgba(255, 255, 255, 0.08), transparent 24%), linear-gradient(180deg, rgba(5, 18, 30, 0.34), rgba(5, 18, 30, 0.68)); transition: background 220ms ease; } [data-theme="light"] .heri_dawi_home_2 { background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(243, 246, 250, 0.72)), rgba(255, 255, 255, 0.7); border-color: rgba(72, 84, 98, 0.14); box-shadow: 0 28px 76px rgba(33, 43, 54, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); } [data-theme="light"] .heri_dawi_home_2::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(235, 240, 246, 0.88)), var(--reflection-image) center / cover no-repeat; opacity: 0.2; filter: blur(22px) saturate(0.82) brightness(1.18); } [data-theme="light"] .heri_dawi_home_2::after { background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.45), transparent 22%), radial-gradient(circle at 18% 18%, rgba(185, 198, 214, 0.18), transparent 26%), radial-gradient(circle at 92% 76%, rgba(255, 255, 255, 0.34), transparent 24%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(235, 240, 246, 0.2)); } */ #inner_h { box-shadow: 0 40px 70px -15px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(189, 197, 31, 0.1) inset; } #carouselIndicators_::before, #carouselIndicators_::after { z-index: -1; position: absolute; content: ""; bottom: 28px; left: 40px; width: 50%; top: 80%; max-width: 300px; background: transparent; -webkit-box-shadow: 0 35px 20px rgba(0, 0, 0, .9); -moz-box-shadow: 0 35px 20px rgba(0, 0, 0, .9); box-shadow: 0 35px 20px rgba(0, 0, 0, .9); -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } #carouselIndicators_::after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 40px; left: auto; z-index: -1; } .carousel-inner { border-radius: 20px; } .hero-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; background: rgba(0, 0, 0, 0.4); border: 3px solid rgba(255, 255, 255, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; z-index: 5; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); backdrop-filter: blur(4px); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); cursor: pointer; } .hero-play-btn svg { width: 45px; height: 45px; margin-left: 6px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } .carousel-item:hover .hero-play-btn { transform: translate(-50%, -50%) scale(1.15); background: rgba(196, 30, 58, 0.9); border-color: rgba(196, 30, 58, 0.9); box-shadow: 0 0 30px rgba(196, 30, 58, 0.5); } .heri_dawi_home .carousel-control-prev-icon, .heri_dawi_home .carousel-control-next-icon { color: white; background-color: rgba(0, 0, 0, 0.5); width: 50px; height: 50px; border-radius: var(--radius-full); transition: all var(--transition-fast); zoom: .9; background-size: 70%; } .heri_dawi_home .carousel-control-prev-icon:hover, .heri_dawi_home .carousel-control-next-icon:hover { background-color: var(--color-primary); } .carousel-control-prev, .carousel-control-next { width: 9%; height: 50%; top: 25%; } #ol_ind button { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.3); opacity: 1; border: unset; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); transform: scale(.66); } #ol_ind button.active { background: var(--color-primary); width: 32px; border-radius: var(--radius-full); transform: scale(1); } .playier_video-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px 0; line-height: 1.4; padding: 1em; padding-bottom: unset; margin-bottom: unset; } .video-actions-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; padding: 1em; padding-top: unset; } .video-views-date { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; } .video-actions { display: flex; gap: 8px; } .video-action-btn svg { width: 20px; height: 20px; } .video-action-btn { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); color: var(--text-primary); border: none; padding: 8px 16px; border-radius: 18px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .gtv-section-title { font-size: 1.25rem; margin-bottom: 16px; font-weight: 700; } #paketa { padding-top: clamp(34px, 4.4vw, 60px) !important; } .paketa-tabs { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: .5em; justify-content: flex-start; } .paketa-tab { flex: 0 0 calc(16.666% - var(--space-md)); max-width: calc(16.666% - var(--space-md)); padding: var(--space-sm) var(--space-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; text-align: center; } .paketa-tab:hover, .paketa-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-primary); text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px var(--primary-glow); } ul.pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-sm); padding: var(--space-2xl) 0; } ul.pagination li:hover a { background: rgba(196, 30, 58, 0.1); border-color: rgba(196, 30, 58, 0.3); color: #c41e3a; transform: translateY(-2px); } ul.pagination li.page-item, li.page-item a { min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .active.page-item .page-link { background: linear-gradient(135deg, #c41e3a, #ff6b6b); border-color: transparent; color: white; box-shadow: 0 8px 20px rgba(196, 30, 58, 0.35); } .disabled.page-item .page-link { opacity: 0.15; cursor: not-allowed; background: transparent; border-color: transparent; color: var(--text); box-shadow: 0 8px 20px rgba(196, 30, 58, 0.35); } .back-to-top-link { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--gradient-primary); border: none; border-radius: var(--radius-full); color: white; cursor: pointer; opacity: 0; visibility: hidden; transition: all var(--transition-normal); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: center; } .btn_dark_light { display: flex; font-size: 1.5em; cursor: pointer; width: 42px; height: auto; align-items: center; justify-content: center; position: relative; padding: 5px; box-sizing: border-box; overflow: hidden; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; cursor: pointer; color: var(--text-primary); transition: all 0.3s ease; border: 1px solid var(--button-border); } .btn_dark_light:hover { transform: translateY(-1px); } .btn_dark_light span { position: absolute; inset: 0; /* display: flex; */ align-items: center; justify-content: center; z-index: 3; display: grid; width: 44px; height: 44px; padding: 0; color: var(--button-fg); cursor: pointer; background: var(--button-bg); border: 1px solid var(--button-border); border-radius: 999px; box-shadow: var(--shadow); place-items: center; backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); transition: color 240ms ease, background 240ms ease, border-color 240ms ease, transform 180ms ease, box-shadow 240ms ease; } .btn_dark_light svg { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: opacity 220ms ease, transform 220ms ease; } #mod-menu1 li { max-height: 64px; } #mod-menu1-submenu1 { background: red; } #search-result-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; } #search-result-list .result__item { border-top: unset; margin-top: 1.5em; padding-top: 1.5em; } .bername_main_page .com-content-category-blog__item.blog-item { border-radius: var(--radius-lg); } .bername_main_page .com-content-category-blog__child { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; border-radius: .8em; transition: transform 600ms cubic-bezier(.2, .8, .2, 1), box-shadow 600ms cubic-bezier(.2, .8, .2, 1); } .bername_main_page .com-content-category-blog__child:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 40px 70px -15px rgba(196, 30, 58, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } .bername_main_page .com-content-category-blog__child .item-title { display: flex; align-items: center; height: calc(1.2em * 2); line-height: 1.2; overflow: hidden; font-size: var(--text-lg); font-weight: 700; padding: 0.5em 0.75em; border-radius: var(--radius-md); transition: background-size 0.22s ease, color 0.18s ease; position: relative; text-transform: uppercase; white-space: normal; background-image: linear-gradient(#ffc506, #ffc506), linear-gradient(#ffc506, #ffc506); background-repeat: no-repeat; background-position: left bottom, left top; background-size: 0 2px, 0 100%; transition: background-size 0.22s ease 0s, color 0.18s ease; margin: unset; } .bername_main_page .com-content-category-blog__child .item-title:hover, .bername_main_page .com-content-category-blog__child .item-title:hover a { color: #1e1e2b; background-size: 100% 2px, 100% 100%; transition-delay: 0s, 0.18s; } .bername_main_page .com-content-category-blog__child .item-title a { text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: ellipsis; width: 100%; color: var(--text); text-decoration: none; } [data-theme="light"] .bername_main_page .com-content-category-blog__child .item-title:hover { color: #1e1e2b; background-size: 100% 2px, 100% 100%; transition-delay: 0s, 0.18s; } .bername_main_page .video-duration { display: none; } #mobile_menu1 { display: none; } /* peywendi */ @keyframes gradientMove { 0%, 100% { transform: scale(1) translate(0, 0) rotate(0) } 33% { transform: scale(1.15) translate(-30px, 30px) rotate(5deg) } 66% { transform: scale(1.1) translate(20px, -20px) rotate(-5deg) } } @keyframes gradientMove2 { 0%, 100% { transform: scale(1) translate(0, 0) rotate(0) } 50% { transform: scale(1.2) translate(40px, -40px) rotate(-8deg) } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: .3 } 50% { transform: scale(1.1); opacity: .5 } } @keyframes fadeIn { from { opacity: 0; transform: translateY(40px) scale(.95) } to { opacity: 1; transform: translateY(0) scale(1) } } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) rotateX(10deg) } to { opacity: 1; transform: translateY(0) rotateX(0) } } .peywendi .container { max-width: 700px; width: 100%; text-align: center; position: relative; z-index: 1 } .peywendi .header { margin-bottom: clamp(30px, 8vw, 60px); box-shadow: unset } .peywendi .header h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: clamp(16px, 4vw, 24px); color: var(--text); } .peywendi .header p { font-size: clamp(.95rem, 3vw, 1.15rem); color: #64748b; line-height: 1.7; max-width: 550px; margin: 0 auto; font-weight: 500; animation: fadeInUp 1s ease-out .3s backwards } .peywendi .contact-cards { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 4vw, 24px) } @media(min-width:640px) { .contact-cards { grid-template-columns: 1fr } } .peywendi .contact-card { background: rgba(255, 255, 255, .95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .9); border-radius: clamp(16px, 4vw, 24px); padding: clamp(20px, 5vw, 32px); text-decoration: none; transition: all .5s cubic-bezier(.34, 1.56, .64, 1); display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 3vw, 20px); cursor: pointer; box-shadow: 0 4px 24px rgba(0, 0, 0, .08), 0 2px 12px rgba(0, 0, 0, .06); position: relative; overflow: hidden; transform-style: preserve-3d; perspective: 1000px; animation: slideUp .8s cubic-bezier(.34, 1.56, .64, 1) backwards } .peywendi .contact-card::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transition: left .7s ease } .peywendi .contact-card:hover::before { left: 100% } .peywendi .contact-card::after { content: ""; position: absolute; inset: 0; border-radius: clamp(16px, 4vw, 24px); padding: 2px; background: linear-gradient(135deg, rgba(102, 126, 234, .3), rgba(118, 75, 162, .1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s ease } .peywendi .contact-card:hover::after { opacity: 1 } .peywendi .contact-card:hover { transform: translateY(-12px) scale(1.03) rotateX(2deg); box-shadow: 0 30px 80px rgba(0, 0, 0, .15), 0 15px 40px rgba(0, 0, 0, .1) } .peywendi .contact-card.telegram:hover { border-color: rgba(0, 136, 204, .4); box-shadow: 0 30px 80px rgba(0, 136, 204, .25), 0 15px 40px rgba(0, 136, 204, .2) } .peywendi .contact-card.email:hover { border-color: rgba(102, 126, 234, .4); box-shadow: 0 30px 80px rgba(102, 126, 234, .25), 0 15px 40px rgba(102, 126, 234, .2) } .peywendi .card-content { display: flex; align-items: center; gap: clamp(12px, 3vw, 20px); flex: 1 } .peywendi .icon { width: clamp(48px, 12vw, 64px); height: clamp(48px, 12vw, 64px); display: flex; align-items: center; justify-content: center; border-radius: clamp(12px, 3vw, 18px); font-size: clamp(20px, 5vw, 28px); box-shadow: 0 8px 24px rgba(0, 0, 0, .15), 0 4px 12px rgba(0, 0, 0, .1); transition: all .5s cubic-bezier(.34, 1.56, .64, 1); flex-shrink: 0 } .peywendi .contact-card:hover .icon { transform: scale(1.2) rotate(-10deg) translateY(-8px); box-shadow: 0 16px 40px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .15) } .peywendi .telegram .icon, .peywendi .email .icon { color: #fff; position: relative } .peywendi .telegram .icon { background: var(--telegram-gradient) } .peywendi .telegram .icon::before, .peywendi .email .icon::before { content: ""; position: absolute; inset: -4px; border-radius: clamp(12px, 3vw, 18px); z-index: -1; opacity: 0; filter: blur(15px); transition: opacity .5s ease; animation: pulse 2s ease-in-out infinite } .peywendi .telegram .icon::before { background: var(--telegram-gradient) } .peywendi .contact-card:hover .telegram .icon::before { opacity: .7 } .peywendi .email .icon { background: var(--email-gradient) } .peywendi .email .icon::before { background: var(--email-gradient); animation-delay: .5s } .peywendi .contact-card:hover .email .icon::before { opacity: .7 } .peywendi .contact-info { text-align: left; flex: 1; min-width: 0 } .peywendi .contact-info h3 { font-size: clamp(1.1rem, 3.5vw, 1.4rem); color: #0f172a; margin-bottom: clamp(4px, 1vw, 6px); font-weight: 700; letter-spacing: -.02em } .peywendi .contact-info p { font-size: clamp(.85rem, 2.5vw, .95rem); color: #64748b; font-weight: 500; letter-spacing: -.01em; word-break: break-all } .peywendi .arrow { font-size: clamp(20px, 5vw, 28px); color: #94a3b8; transition: all .5s cubic-bezier(.34, 1.56, .64, 1); font-weight: 300; flex-shrink: 0 } .peywendi .contact-card:hover .arrow { transform: translateX(12px) scale(1.1); color: #667eea } .peywendi .telegram:hover .arrow { color: #0088cc } .peywendi .email:hover .arrow { color: #667eea } .peywendi .fade-in { animation: fadeIn 1.2s cubic-bezier(.34, 1.56, .64, 1) } .peywendi .contact-card:nth-child(1) { animation-delay: .15s } .peywendi .contact-card:nth-child(2) { animation-delay: .3s } .loader-container { display: flex; align-items: center; justify-content: center; gap: 0.68rem; width: max-content; direction: ltr; filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.34)); width: 100%; } .video-with-loader { width: 100%; height: 100%; } .loader-dot { display: block; height: 1.08rem; width: 0.56rem; margin: 0; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 36%), linear-gradient(180deg, #26c86f 0%, #ffd547 51%, #ff4d5d 100%); box-shadow: 0 8px 18px rgba(255, 84, 92, 0.26), 0 0 14px rgba(255, 213, 71, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.62); transform-origin: center bottom; animation: loaderwave 1.05s infinite cubic-bezier(0.37, 0, 0.2, 1); } .loader-dot:nth-child(1) { animation-delay: -0.36s; } .loader-dot:nth-child(2) { animation-delay: -0.24s; } .loader-dot:nth-child(3) { animation-delay: -0.12s; } .loader-dot:nth-child(4) { animation-delay: 0s; } @keyframes loaderwave { 0%, 100% { opacity: 0.58; transform: translateY(0.16rem) scaleY(0.72); filter: saturate(0.9) brightness(0.98); box-shadow: 0 6px 14px rgba(38, 200, 111, 0.1), 0 0 10px rgba(255, 213, 71, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5); } 35% { opacity: 1; transform: translateY(-0.34rem) scaleY(1.28); filter: saturate(1.24) brightness(1.08); box-shadow: 0 15px 30px rgba(255, 84, 92, 0.24), 0 0 20px rgba(255, 213, 71, 0.2), 0 0 0 0.28rem rgba(255, 213, 71, 0), inset 0 1px 0 rgba(255, 255, 255, 0.68); } 62% { opacity: 0.8; transform: translateY(0.02rem) scaleY(0.92); filter: saturate(1.04) brightness(1.03); } } video::cue { display: none; } video::-webkit-media-controls-spinner, video::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-start-playback-button { display: none !important; } video::-moz-loading-spinner { display: none !important; } @media(max-width:480px) { .peywendi .contact-card { padding: 18px } .peywendi .icon { width: 44px; height: 44px; font-size: 18px } .peywendi .contact-info h3 { font-size: 1rem } .peywendi .contact-info p { font-size: .8rem } .peywendi .arrow { font-size: 18px } } @media(max-width:360px) { .peywendi .contact-card { flex-direction: column; text-align: center; gap: 12px } .peywendi .card-content { flex-direction: column; gap: 12px } .peywendi .contact-info { text-align: center } } .heri_dawi_page .com-content-category-blog__children.cat-children { display: none; } @media (max-width: 1220px) { .logo_menu_image { zoom: .67; max-width: 95%; } #mod-menu1.hidden { display: none; } #mobile_menu1 { display: unset; } .nav-toggle, #btnMobileMenuX { cursor: pointer; width: 2em; height: 2em; position: absolute; bottom: .1em; right: 0.3em; color: whitesmoke; background-color: black; border-radius: 8px; box-shadow: 2px 1px 3px black; } #btnMobileMenuX { bottom: unset; right: 0.3em; top: 0.3em; color: darkred; } header>.container-nav:has(.mob_logo.hidden) { width: unset; margin-left: 1em; } .container-header .mod-menu { flex-direction: column; } .container-header { position: relative !important; } .heri_dawi_home, .heri_dawi_home_2 { min-height: unset; } .slider--top { width: 100%; margin: unset; } .slider--top .slider-container { height: 58vw; } .hero-play-btn { width: 45px; height: 45px; } .heri_dawi_home .carousel-control-prev-icon, .heri_dawi_home .carousel-control-next-icon { width: 25px; height: 25px; } .video-play { opacity: .6; transform: translate(-50%, -50%) scale(1); width: 30px; height: 30px; } .featured-play-btn { width: 45px; height: 45px; opacity: .5; } .view-all { position: absolute; right: 0; bottom: 1em; } .slider--middle { width: 100%; margin: 0; } .paketa-tab { flex: 0 0 calc(50% - var(--space-md)); max-width: calc(50% - var(--space-md)); } ul.pagination li.page-item, li.page-item a { min-width: 20px; height: 20px; font-size: smaller; } .disabled.page-item .page-link { background: transparent; } .playier_video-title { font-size: unset; } .mod_taybet li { zoom: unset; } } @media (min-width: 1400px) { .container { max-width: 1400px; } #carouselIndicators_ { margin: auto 18vw; padding: 0 var(--space-xl); } } /* ------------------------------------------------ */ .site-header { position: fixed; top: -1px; left: 0; right: 0; z-index: 300; isolation: isolate; min-height: var(--header-height); display: flex; align-items: center; padding: 7px 0; overflow: hidden; background: var(--header-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.78), 0 7px 14px -8px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.06) inset; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: min-height 260ms ease, padding 260ms ease, background 260ms ease, transform 260ms ease, border-color 260ms ease; } .site-header::before, .site-header::after { position: absolute; left: 0; right: 0; content: ""; pointer-events: none; } .site-header::before { top: 0; bottom: 0; z-index: -1; background: var(--header-sheen); opacity: 0.72; transform: translateX(-115%); animation: headerSheen 8200ms ease-in-out infinite; } .site-header::after { bottom: 0; height: 3px; z-index: 1; background: var(--header-edge), linear-gradient(90deg, rgba(170, 186, 204, 0.42), transparent 35%, rgba(255, 255, 255, 0.28), transparent 65%, rgba(130, 148, 168, 0.32)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 24px rgba(180, 195, 210, 0.22); } .site-header__container { position: relative; z-index: 2; } @keyframes headerSheen { 0%, 24% { transform: translateX(-115%); } 48%, 100% { transform: translateX(115%); } } .site-header.is-scrolled { min-height: 62px; padding: 5px 0; background: var(--header-bg-scrolled); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.84), 0 7px 14px -8px rgba(0, 0, 0, 0.68), 0 1px 0 rgba(255, 255, 255, 0.06) inset; } [data-theme="light"] .site-header { border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 18px 28px -12px rgba(22, 30, 40, 0.42), 0 8px 14px -9px rgba(22, 30, 40, 0.32), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } [data-theme="light"] .site-header.is-scrolled { box-shadow: 0 18px 28px -12px rgba(22, 30, 40, 0.48), 0 8px 14px -9px rgba(22, 30, 40, 0.38), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } .site-header__container { width: min(1640px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 56px); } .site-header__content { display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 1.4vw, 20px); min-height: 56px; padding: 3px 10px; } .site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; } .site-logo__image { width: auto; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); transition: transform 260ms ease, height 260ms ease; } .site-header.is-scrolled .site-logo__image { height: 46px; } .site-logo:hover .site-logo__image { transform: scale(1.04); } .site-nav { display: flex; align-items: center; justify-content: center; min-width: 0; flex: 1 1 auto; } .site-nav__list, .mobile-nav__list { display: flex; align-items: center; gap: clamp(2px, 0.35vw, 6px); margin: 0; padding: 0; list-style: none; } .site-nav__link { --nav-tilt-x: 0deg; --nav-tilt-y: 0deg; position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 7px 9px; color: #ffffff; border-radius: 7px; font-size: clamp(13px, 1vw, 16px); font-weight: 800; letter-spacing: 0; line-height: 1; text-decoration: none; text-transform: uppercase; white-space: nowrap; overflow: hidden; isolation: isolate; background-image: linear-gradient(#ffc506, #ffc506), linear-gradient(#ffc506, #ffc506); background-position: left bottom, left bottom; background-repeat: no-repeat; background-size: 0 0, 100% 0; transform: perspective(560px) rotateX(var(--nav-tilt-x)) rotateY(var(--nav-tilt-y)); transform-origin: center; transform-style: preserve-3d; will-change: transform; transition: background-size 220ms ease, color 180ms ease, box-shadow 220ms ease, transform 150ms cubic-bezier(0.2, 0.9, 0.2, 1); } .site-nav__link::before { position: absolute; inset: -35% -55%; z-index: 1; content: ""; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.58) 50%, transparent 65%); opacity: 0; transform: translateX(-72%) rotate(8deg); transition: opacity 180ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="light"] .site-nav__link { color: #ffffff; } .site-nav__link:hover, .site-nav__link.is-active { color: #1e1e2b; background-size: 100% 2px, 100% 100%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 197, 6, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34); transform: perspective(560px) rotateX(var(--nav-tilt-x)) rotateY(var(--nav-tilt-y)) translateY(-2px) scale(1.03); transition-delay: 0ms; } .site-nav__link:hover::before, .site-nav__link:focus-visible::before { opacity: 1; transform: translateX(72%) rotate(8deg); } .site-dropdown { position: relative; display: inline-flex; } .site-dropdown__content { position: absolute; top: 100%; left: 0; z-index: 320; display: none; min-width: 205px; padding: 6px 0; overflow: hidden; background: rgba(14, 18, 25, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-theme="light"] .site-dropdown__content { background: rgba(255, 255, 255, 0.96); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 18px 44px rgba(17, 24, 39, 0.14); } .site-dropdown:hover .site-dropdown__content, .site-dropdown.is-open .site-dropdown__content { display: block; } .site-dropdown__content a { display: block; padding: 11px 16px; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; font-weight: 700; text-decoration: none; transition: background 180ms ease, color 180ms ease, padding 180ms ease; } [data-theme="light"] .site-dropdown__content a { border-bottom-color: rgba(0, 0, 0, 0.06); } .site-dropdown__content a:last-child { border-bottom: 0; } .site-dropdown__content a:hover { padding-left: 20px; color: var(--primary-red); background: rgba(255, 255, 255, 0.07); } [data-theme="light"] .site-dropdown__content a:hover { background: rgba(0, 0, 0, 0.055); } .site-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; margin-right: clamp(8px, 1.2vw, 18px); } .theme-toggle, .menu-toggle, .search-form button { font: inherit; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--text); background: rgba(255, 255, 255, 0.1); border: 0; border-radius: 50%; cursor: pointer; transition: background 220ms ease, transform 220ms ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.08); } [data-theme="light"] .theme-toggle { color: #18181c; background: rgba(255, 255, 255, 0.9); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); } [data-theme="light"] .theme-toggle:hover { background: #ffffff; } .theme-toggle svg { width: 17px; height: 17px; pointer-events: none; } .sun-icon { display: none; } [data-theme="light"] .sun-icon { display: block; } [data-theme="light"] .moon-icon { display: none; } .search-form { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; overflow: hidden; background: transparent; border: 0; border-radius: 999px; box-shadow: none; transition: transform 220ms ease; } .search-form:hover { transform: scale(1.08); } .search-form:focus-within { width: 32px; box-shadow: none; } [data-theme="light"] .search-form { background: transparent; border-color: transparent; box-shadow: none; } .search-form__submit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex: 0 0 auto; color: #ffffff; background: linear-gradient(180deg, #ff0000, #cc0000); border: 0; border-radius: 50%; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; } .search-form__submit svg { width: 17px; height: 17px; } .search-form:hover .search-form__submit, .search-form__submit:hover { box-shadow: 0 10px 24px rgba(255, 0, 0, 0.34), 0 0 0 5px rgba(255, 0, 0, 0.14); } .menu-toggle { position: relative; z-index: 350; display: none; width: 34px; height: 34px; padding: 7px; flex-direction: column; justify-content: center; gap: 4px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; } .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 4px; transition: transform 220ms ease, opacity 220ms ease; } [data-theme="light"] .menu-toggle span { background: #ffffff; } .menu-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .menu-toggle.is-active span:nth-child(2) { opacity: 0; } .menu-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 280; display: none; width: min(50vw, 430px); min-width: 280px; padding: calc(var(--header-height) + 18px) clamp(18px, 6vw, 34px) 34px; background: rgba(8, 13, 20, 0.98); border-left: 1px solid rgba(255, 255, 255, 0.12); box-shadow: -18px 0 42px rgba(0, 0, 0, 0.34); transform: translateX(100%); transition: transform 260ms ease; } [data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.98); border-left-color: rgba(0, 0, 0, 0.1); box-shadow: -18px 0 42px rgba(33, 43, 54, 0.18); } .mobile-nav.is-active { transform: translateX(0); } .mobile-nav__list { align-items: stretch; flex-direction: column; gap: 8px; } .mobile-nav__logo { display: flex; justify-content: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav__logo img { width: min(150px, 70%); height: auto; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.34)); } [data-theme="light"] .mobile-nav__logo { border-top-color: rgba(0, 0, 0, 0.1); } .mobile-nav .site-nav__link { display: flex; width: 100%; min-height: 48px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 18px; } [data-theme="light"] .mobile-nav .site-nav__link { color: #18181c; border-bottom-color: rgba(0, 0, 0, 0.1); } .mobile-nav .site-dropdown { display: block; width: 100%; } .mobile-nav .site-dropdown__content { position: static; display: block; max-height: 0; min-width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: rgba(255, 255, 255, 0.04); transition: max-height 260ms ease, padding 260ms ease; } .mobile-nav .site-dropdown.is-open .site-dropdown__content { max-height: 520px; padding: 6px 0; } .mobile-nav .site-dropdown__content a { padding-left: 28px; } .latest-videos { --spot-x: 50%; --spot-y: 42%; position: relative; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(240px, 1fr); align-items: stretch; gap: clamp(12px, 1.4vw, 20px); width: min(1640px, 100%); margin: 0 auto; padding: clamp(12px, 1.5vw, 18px); overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)), rgba(5, 18, 30, 0.66); border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.12); border-right-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.12); border-radius: 34px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16); backdrop-filter: blur(20px) saturate(1.18); -webkit-backdrop-filter: blur(20px) saturate(1.18); animation: stageDepth 9000ms ease-in-out infinite alternate; transition: border-color 420ms ease, box-shadow 420ms ease; } .latest-videos:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 38px 108px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.18); } [data-theme="light"] .latest-videos { background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(243, 246, 250, 0.72)), rgba(255, 255, 255, 0.7); border-color: rgba(72, 84, 98, 0.14); box-shadow: 0 28px 76px rgba(33, 43, 54, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); } [data-theme="light"] .latest-videos:hover { border-color: rgba(72, 84, 98, 0.2); box-shadow: 0 32px 86px rgba(33, 43, 54, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95); } .latest-videos::before, .latest-videos::after { position: absolute; content: ""; pointer-events: none; } .latest-videos::before { inset: -24px; z-index: 0; background: linear-gradient(135deg, rgba(6, 25, 40, 0.42), rgba(6, 25, 40, 0.82)), var(--reflection-image) center / cover no-repeat; border-radius: inherit; opacity: 0.46; filter: blur(20px) saturate(0.95) brightness(0.82); transform: scale(1.08); animation: reflectionDrift 9000ms ease-in-out infinite alternate; } [data-theme="light"] .latest-videos::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(235, 240, 246, 0.88)), var(--reflection-image) center / cover no-repeat; opacity: 0.2; filter: blur(22px) saturate(0.82) brightness(1.18); } .latest-videos::after { inset: 0; z-index: 0; background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.13), transparent 20%), radial-gradient(circle at 92% 76%, rgba(255, 255, 255, 0.08), transparent 24%), linear-gradient(180deg, rgba(5, 18, 30, 0.34), rgba(5, 18, 30, 0.68)); transition: background 220ms ease; } [data-theme="light"] .latest-videos::after { background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.45), transparent 22%), radial-gradient(circle at 18% 18%, rgba(185, 198, 214, 0.18), transparent 26%), radial-gradient(circle at 92% 76%, rgba(255, 255, 255, 0.34), transparent 24%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(235, 240, 246, 0.2)); } .hero-video { align-self: start; aspect-ratio: 16 / 9; min-height: 0; border-radius: 28px; transition: border-color 480ms ease, box-shadow 480ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1); } .hero-video, .video-thumb { position: relative; isolation: isolate; overflow: hidden; background: #122236; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } [data-theme="light"] .hero-video, [data-theme="light"] .video-thumb { background: #eef2f6; border-color: rgba(72, 84, 98, 0.16); box-shadow: 0 12px 34px rgba(33, 43, 54, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86); } .hero-video.is-active { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .hero-video, .thumbs { z-index: 1; } .hero-video::before { display: none; } .poster-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .hero-video.is-changing .hero-title { animation: titleSwitch 520ms cubic-bezier(0.22, 1, 0.36, 1); } /* .hero-video::after, .video-thumb::after { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.74) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 52%); pointer-events: none; }*/ .video-thumb::after { background: linear-gradient(180deg, transparent 22%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.9) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 58%); } .hero-video:hover { transform: translateY(-2px); } .hero-video .poster-image { transform-origin: center; } .hero-video.zoom-in .poster-image { animation: heroZoomIn 3100ms ease-in-out forwards; } .hero-video.zoom-out .poster-image { animation: heroZoomOut 3100ms ease-in-out forwards; } .hero-content { position: absolute; right: auto; bottom: clamp(18px, 3vw, 34px); left: clamp(18px, 3vw, 34px); z-index: 5; display: grid; gap: 9px; width: min(100%, calc(100% - 68px)); padding: 7px 7px 7px clamp(12px, 1vw, 16px); overflow: visible; background: linear-gradient(to top right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.1) 100%); border: 0; border-left: 2px solid var(--yellow); border-radius: 0 14px 14px 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateZ(0); } .hero-content::before { display: none; } .hero-content>* { position: relative; z-index: 1; } .hero-title { position: relative; width: max-content; max-width: 100%; margin: 0; color: #fff7dc; font-size: clamp(16px, 1.55vw, 26px); font-weight: 950; line-height: 1.08; letter-spacing: 0; padding-bottom: 12px; background: none; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.54); display: block; overflow: hidden; overflow-wrap: normal; white-space: nowrap; text-overflow: ellipsis; } .hero-title.is-long { width: auto; max-width: 760px; white-space: normal; text-overflow: clip; } .hero-title::after { position: absolute; bottom: 0; left: 0; display: block; width: 68px; height: 2px; content: ""; background: linear-gradient(90deg, var(--yellow), rgba(255, 196, 0, 0)); border-radius: 999px; box-shadow: 0 0 18px rgba(255, 196, 0, 0.2); } .hero-meta { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 5px 9px 5px 5px; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .hero-meta span { font-size: 12px; font-weight: 850; white-space: nowrap; } .hero-meta strong { position: relative; isolation: isolate; padding: 4px 8px; color: #061928; overflow: visible; background: linear-gradient(180deg, #ffd34a, var(--yellow)); border-radius: inherit; font-size: 12px; font-weight: 900; text-transform: uppercase; box-shadow: 0 8px 24px rgba(255, 196, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.16) inset; animation: newBadgePulse 1500ms ease-in-out infinite; } .hero-meta strong::before { position: absolute; inset: -12px; z-index: -1; content: ""; background: radial-gradient(circle, rgba(255, 196, 0, 0.82), rgba(255, 196, 0, 0) 66%); border-radius: inherit; animation: newEmission 1500ms ease-out infinite; } .play-button { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; width: clamp(54px, 7vw, 86px); height: clamp(54px, 7vw, 86px); color: #ffffff; background: rgba(255, 255, 255, 0.08); border: 4px solid rgba(255, 255, 255, 0.92); border-radius: 50%; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.16); place-items: center; transform: translate(-50%, -50%); transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease, color 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1); isolation: isolate; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .play-button::before, .play-button::after { position: absolute; inset: -10px; content: ""; border-radius: inherit; pointer-events: none; } .play-button::before { z-index: -1; border: 1px solid rgba(255, 255, 255, 0.22); animation: playPulse 2400ms ease-in-out infinite; } .play-button::after { inset: 7px; z-index: 0; background: radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.2), transparent 44%); opacity: 0.7; transition: opacity 260ms ease; } .play-button:hover, .play-button:focus-visible { background: linear-gradient(180deg, #ff0000, #cc0000); border-color: #ff0000; box-shadow: 0 22px 58px rgba(255, 0, 0, 0.42), 0 0 0 9px rgba(255, 0, 0, 0.16); transform: translate(-50%, -50%) scale(1.04); } .play-button:hover::before, .play-button:focus-visible::before { border-color: rgba(255, 0, 0, 0.28); } .play-button:hover::after, .play-button:focus-visible::after { opacity: 0.28; } .play-button svg { position: relative; z-index: 1; width: 38%; height: 38%; margin-left: 0; fill: currentColor; } .thumbs { align-self: stretch; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 0.75vw, 10px); min-height: 0; max-height: 100%; overflow-y: auto; scrollbar-width: none; } .thumbs::-webkit-scrollbar { display: none; } .video-thumb { --thumb-tilt-x: 0deg; --thumb-tilt-y: 0deg; min-height: 0; padding: 0; aspect-ratio: 16 / 9; color: #fff7dc; cursor: pointer; border-radius: 16px; appearance: none; direction: ltr; text-align: left; transform: perspective(900px) rotateX(var(--thumb-tilt-x)) rotateY(var(--thumb-tilt-y)); transform-style: preserve-3d; transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease; } .video-thumb:hover, .video-thumb:focus-visible, .video-thumb.is-active { border-color: rgba(255, 196, 0, 0.42); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(255, 196, 0, 0.1); outline: none; transform: perspective(900px) rotateX(var(--thumb-tilt-x)) rotateY(var(--thumb-tilt-y)) translateY(-1px); } [data-theme="light"] .video-thumb:hover, [data-theme="light"] .video-thumb:focus-visible, [data-theme="light"] .video-thumb.is-active { border-color: rgba(72, 84, 98, 0.34); box-shadow: 0 16px 38px rgba(24, 32, 42, 0.26), 0 0 0 1px rgba(24, 32, 42, 0.14); } .video-thumb:hover .poster-image, .video-thumb:focus-visible .poster-image { transform: scale(1.055); } .video-thumb:not(.is-active) { filter: saturate(0.88) brightness(0.88); } .video-thumb:not(.is-active):hover { filter: saturate(1) brightness(1); } .video-thumb.is-active::before { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; height: 3px; content: ""; background: linear-gradient(90deg, var(--yellow), var(--yellow-soft)); border-radius: 999px; box-shadow: 0 0 18px var(--yellow-glow); animation: thumbProgress 3000ms linear forwards; transform-origin: left center; } .video-thumb.is-active .poster-image { transform: scale(1.045); } .thumb-caption { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 2; display: grid; gap: 5px; padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; direction: ltr; justify-items: start; text-align: left; transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } .video-thumb:hover .thumb-caption, .video-thumb:focus-visible .thumb-caption, .video-thumb.is-active .thumb-caption { transform: translateY(-2px); } .video-thumb.is-active .thumb-caption { animation: thumbTitleSwitch 520ms cubic-bezier(0.22, 1, 0.36, 1); } .thumb-meta { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; color: rgba(255, 211, 74, 0.92); font-size: 10px; font-weight: 900; line-height: 1; text-transform: uppercase; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.82); } .thumb-meta::before { display: block; width: 6px; height: 6px; content: ""; background: var(--yellow); border-radius: 999px; box-shadow: 0 0 16px var(--yellow-glow); } .thumb-title { margin: 0; color: #fff7dc; font-size: clamp(12px, 0.95vw, 15px); font-weight: 900; line-height: 1.25; letter-spacing: 0; text-align: left; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.65); display: -webkit-box; overflow: hidden; overflow-wrap: normal; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; } .thumb-state { position: absolute; top: 10px; right: 10px; z-index: 2; display: none; width: 12px; height: 12px; background: var(--yellow); border-radius: 999px; box-shadow: 0 0 0 7px rgba(255, 196, 0, 0.12), 0 8px 22px var(--yellow-glow); } .thumb-state::after { position: absolute; inset: -7px; content: ""; border: 1px solid rgba(255, 196, 0, 0.24); border-radius: inherit; animation: statePulse 1800ms ease-in-out infinite; } .video-thumb.is-active .thumb-state { display: block; } .carousel-indicators { display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; margin-top: 4px; direction: ltr; margin: unset; } .indicator { position: relative; display: block; z-index: 1; width: 12px; height: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.22); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease, box-shadow 320ms ease, opacity 320ms ease; } .indicator::before { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, var(--yellow), var(--yellow-soft)); border-radius: inherit; opacity: 0; transform: scaleX(0); transform-origin: left center; } .indicator.is-active { width: 58px; background: rgba(255, 196, 0, 0.18); box-shadow: 0 10px 28px var(--yellow-glow), 0 0 0 1px rgba(255, 196, 0, 0.16); } .indicator.is-active::before { opacity: 1; animation: fillIndicator 3000ms linear forwards; } @keyframes fillIndicator { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes stageDepth { from { box-shadow: var(--shadow_2), 0 0 0 1px rgba(255, 196, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.16); } to { box-shadow: 0 40px 104px rgba(0, 0, 0, 0.45), 0 0 60px rgba(255, 196, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.17); } } @keyframes premiumEdge { from { background-position: 0% 50%; } to { background-position: 220% 50%; } } @keyframes reflectionDrift { from { filter: blur(20px) saturate(0.95) brightness(0.82); transform: scale(1.08) translate3d(-0.4%, -0.3%, 0); } to { filter: blur(22px) saturate(1.08) brightness(0.9); transform: scale(1.12) translate3d(0.5%, 0.4%, 0); } } @keyframes heroZoomIn { from { transform: scale(1.02); } to { transform: scale(1.075); } } @keyframes heroZoomOut { from { transform: scale(1.075); } to { transform: scale(1.02); } } @keyframes playPulse { 0%, 100% { opacity: 0.34; transform: scale(0.94); } 50% { opacity: 0.78; transform: scale(1.08); } } @keyframes titleSwitch { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes thumbTitleSwitch { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes newEmission { 0% { opacity: 0; transform: scale(0.82); } 18% { opacity: 0.9; transform: scale(1); } 78% { opacity: 0; transform: scale(1.85); } 100% { opacity: 0; transform: scale(1.85); } } @keyframes newBadgePulse { 0%, 100% { box-shadow: 0 8px 24px rgba(255, 196, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.16) inset; } 45% { box-shadow: 0 10px 32px rgba(255, 196, 0, 0.58), 0 0 0 6px rgba(255, 196, 0, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; } } @keyframes thumbProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; } } @keyframes statePulse { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 50% { opacity: 0.9; transform: scale(1.12); } } @media (max-width: 980px) { :root { --header-height: 66px; } .site-header { min-height: var(--header-height); } .site-logo__image { height: 50px; } .site-nav { display: none; } .site-actions { gap: 5px; margin-right: 0; } .search-form { width: 32px; height: 32px; } .search-form:focus-within { width: 32px; } .menu-toggle { display: inline-flex; } .mobile-nav { display: block; } .latest-videos { grid-template-columns: 1fr; gap: 14px; } .thumbs { display: grid; grid-auto-columns: minmax(180px, 42vw); grid-auto-flow: column; grid-template-rows: none; grid-template-columns: none; gap: 10px; padding: 2px 2px 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; } .video-thumb { aspect-ratio: 16 / 9; min-width: 0; scroll-snap-align: start; } } @media (max-width: 620px) { .mobile-nav { width: min(72vw, 320px); min-width: 240px; padding-right: 18px; padding-left: 18px; } .site-header__container { padding: 0 10px; } .site-header__content { gap: 8px; } .site-logo__image { height: 48px; } .site-header.is-scrolled .site-logo__image { height: 42px; } .theme-toggle { width: 32px; height: 32px; } .search-form { display: flex; width: 32px; height: 32px; } .latest-videos { gap: 12px; padding: 10px; border-radius: 22px; } .latest-videos::after { background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.1), transparent 22%), linear-gradient(180deg, rgba(5, 18, 30, 0.34), rgba(5, 18, 30, 0.68)); } [data-theme="light"] .latest-videos::after { background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.44), transparent 22%), radial-gradient(circle at 18% 18%, rgba(185, 198, 214, 0.18), transparent 28%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(235, 240, 246, 0.2)); } .hero-video { aspect-ratio: 16 / 9; border-radius: 18px; } .hero-content { bottom: 10px; left: 10px; width: calc(100% - 20px); gap: 5px; padding: 1px 0 1px 9px; border-left-width: 2px; } .hero-title { max-width: 100%; padding-bottom: 8px; font-size: clamp(13px, 4.2vw, 17px); line-height: 1.12; white-space: normal; } .hero-title.is-long { max-width: 100%; } .hero-title::after { display: block; width: 54px; } .hero-meta { gap: 6px; width: max-content; max-width: 100%; padding: 5px 8px 5px 5px; } .hero-meta span, .hero-meta strong { font-size: 10px; } .play-button { width: 52px; height: 52px; border-width: 3px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.14); } .carousel-indicators { gap: 8px; margin-top: 2px; } .indicator { width: 9px; height: 9px; } .indicator.is-active { width: 42px; } .thumbs { grid-auto-columns: minmax(168px, 72vw); } .thumbs::-webkit-scrollbar { display: none; } .video-thumb { aspect-ratio: 16 / 9; min-width: 0; border-radius: 14px; scroll-snap-align: start; } .thumb-caption { right: 8px; bottom: 8px; left: 8px; gap: 5px; padding: 0; border-radius: 0; } .thumb-title { font-size: 11px; line-height: 1.22; } .thumb-meta { font-size: 9px; } .thumb-state { top: 8px; right: 8px; width: 10px; height: 10px; } } @media (hover: none) { .hero-video:hover, .video-thumb:hover, .video-thumb:focus-visible, .video-thumb.is-active { transform: none; } .video-thumb { --thumb-tilt-x: 0deg !important; --thumb-tilt-y: 0deg !important; } } @media (max-width: 390px) { .hero-content { bottom: 8px; left: 8px; width: calc(100% - 16px); gap: 4px; } .hero-title { font-size: 12.5px; line-height: 1.12; } .hero-meta span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; } .play-button { width: 46px; height: 46px; } } /* V2 --------------------------------------------------------------------------------------- */ .no-card.occasion-ticker__inner { height: 3em; } .occasion-ticker { position: relative; width: min(1640px, 100%); margin: 0 auto clamp(8px, 1vw, 12px); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 44%), linear-gradient(180deg, #a30b14 0%, #800810 52%, #5e040a 100%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; box-shadow: 0 18px 40px rgba(70, 3, 8, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 -1px 0 rgba(0, 0, 0, 0.28); } .occasion-ticker:not(:has(*)) { border: 0; box-shadow: none; background: none; } .occasion-ticker::before { position: absolute; inset: 0; z-index: 0; content: ""; background: radial-gradient(120% 130% at 0% -12%, rgba(255, 255, 255, 0.18), transparent 42%), radial-gradient(130% 150% at 100% 120%, rgba(0, 0, 0, 0.3), transparent 58%); pointer-events: none; } .occasion-ticker::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; height: 2px; content: ""; background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0) 30%, #ffffff 48%, #ffe3e5 52%, rgba(255, 255, 255, 0) 70%, transparent 100%); background-position-x: 0%, 0%; background-position-y: 0%, 0%; background-repeat: repeat, repeat; background-size: auto, auto; background-size: 100% 100%, 55% 100%; background-repeat: no-repeat; background-position: 0 0, -55% 0; box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); pointer-events: none; animation: occasionFlow 3000ms linear infinite; } .occasion-ticker__inner { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(13px, 1.5vw, 20px); min-height: 78px; padding: 10px clamp(15px, 1.8vw, 24px); } .occasion-ticker__live { background: transparent !important; box-shadow: none !important; } .occasion-ticker__viewport { position: relative; min-width: 0; min-height: 58px; padding-left: 4px; overflow: hidden; } .occasion-news { position: absolute; inset: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; opacity: 0; transform: translateX(26px) scale(0.985); transition: opacity 520ms ease, transform 640ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; will-change: opacity, transform; } .occasion-news__image { position: relative; width: 96px; height: 58px; overflow: hidden; background: #11131a; border-radius: 11px; /* box-shadow: 0 16px 30px rgba(54, 1, 5, 0.55), 0 5px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.12); */ } .occasion-news__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .occasion-news__image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 38%, rgba(0, 0, 0, 0.3)); pointer-events: none; } .occasion-news__text { min-width: 0; } .occasion-news__title { margin: 0; overflow: hidden; color: #ffffff; font-size: clamp(14.5px, 1.2vw, 17.5px); font-weight: 820; line-height: 1.22; letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(80, 4, 8, 0.4); text-overflow: ellipsis; white-space: nowrap; } .occasion-news__summary { margin: 5px 0 0; margin-top: 5px; overflow: hidden; color: rgba(255, 255, 255, 0.86); font-size: clamp(11.5px, 0.9vw, 13px); font-weight: 560; line-height: 1.32; text-shadow: 0 1px 2px rgba(80, 4, 8, 0.3); text-overflow: ellipsis; white-space: nowrap; } .occasion-ticker__controls { display: inline-flex; align-items: center; gap: 8px; padding-left: clamp(10px, 1.2vw, 16px); border-left: 1px solid rgba(255, 255, 255, 0.22); } /* .occasion-ticker__button[data-occasion-prev] { --arrow-shift: -2px; } .occasion-ticker__button { position: relative; display: inline-grid; width: 34px; height: 34px; place-items: center; overflow: hidden; color: #ffffff; cursor: pointer; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 16px rgba(80, 4, 8, 0.3); transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease, border-color 220ms ease, box-shadow 260ms ease; } */ .occasion-ticker__button svg { position: relative; z-index: 1; width: 17px; height: 17px; transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); } .occasion-ticker__count { min-width: 50px; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 780; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-align: center; white-space: nowrap; } .occasion-ticker__button[data-occasion-next] { --arrow-shift: 2px; } .occasion-ticker__button[data-occasion-prev] { --arrow-shift: -2px; } .occasion-ticker__button { position: relative; display: inline-grid; width: 34px; height: 34px; place-items: center; overflow: hidden; color: #ffffff; cursor: pointer; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 16px rgba(80, 4, 8, 0.3); transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease, border-color 220ms ease, box-shadow 260ms ease; } .occasion-ticker__button::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 50% 16%, #ffffff, #f1f3f6); opacity: 0; transition: opacity 220ms ease; } .occasion-news.is-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } @keyframes occasionFlow { from { background-position: 0 0, -55% 0; } to { background-position: 0 0, 155% 0; } } .gtv-pills { position: fixed; left: 18px; top: 50%; transform: translate(-12px, -50%); z-index: 850; display: flex; flex-direction: column; gap: 14px; pointer-events: auto; padding: 14px 8px; background: rgba(14, 15, 19, 0.34); border: 1px solid rgba(255, 200, 61, 0.08); border-radius: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); opacity: 0; transition: opacity 220ms ease, transform 220ms ease; } .gtv-pills.is-ready { pointer-events: none; } .gtv-pills.is-ready.in-range { opacity: 1; transform: translate(0, -50%); pointer-events: auto; } @media (max-width: 1100px) { .gtv-pills { display: none; } } .gtv-pills__item { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgba(246, 243, 234, 0.26); border: 1px solid rgba(246, 243, 234, 0.08); cursor: pointer; display: block; transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1), height 620ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 620ms cubic-bezier(0.22, 1, 0.36, 1), background-color 540ms ease, box-shadow 540ms ease, border-color 540ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1); text-decoration: none; } .gtv-pills__item.is-active { width: 8px; height: 26px; border-radius: 10px; background: linear-gradient(180deg, var(--yellow-soft, #ffdf86), var(--yellow, #ffc83d)); box-shadow: 0 0 14px rgba(255, 200, 61, 0.65), 0 0 26px rgba(255, 200, 61, 0.35); border-color: transparent; } .gtv-pills__label { position: absolute; left: 24px; top: 50%; transform: translate(-8px, -50%); font: 700 12px/1 var(--site-font); color: var(--yellow); background: rgba(14, 15, 19, 0.94); border: 1px solid rgba(255, 200, 61, 0.22); border-radius: 8px; padding: 6px 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 240ms, transform 240ms; letter-spacing: 0; text-transform: none; } .gtv-pills__item:hover .gtv-pills__label { opacity: 1; transform: translate(0, -50%); } .top-layered-slider { position: relative; /* width: min(1400px, calc(100% - clamp(28px, 8vw, 240px))); */ /* margin-top: clamp(18px, 3vw, 36px); */ overflow: hidden; background: url("/images/01_frontpage/slider_top.png") center center / 100% auto no-repeat; border-radius: 20px; box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28); } [data-theme="light"] .top-layered-slider { box-shadow: 0 24px 62px rgba(33, 43, 54, 0.14); } .top-layered-slider__stage { position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 1920 / 680; margin-top: -2px; margin-bottom: -2px; overflow: hidden; background: url("/images/01_frontpage/slider_top.png") center center / 100% auto no-repeat; background-position-x: center; background-position-y: center; background-repeat: no-repeat; background-size: 100% auto; isolation: isolate; } .top-layered-slider__overlay { position: absolute; left: 0; top: 0; bottom: auto; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform-origin: center center; will-change: transform; pointer-events: none; user-select: none; } .content-section { /* width: min(1400px, 100%); */ margin: 0 auto; padding: clamp(42px, 5vw, 72px) 0; padding-top: clamp(42px, 5vw, 72px); padding-bottom: clamp(42px, 5vw, 72px); position: relative; } .feature-video-section { margin-top: clamp(10px, 2vw, 28px); padding-top: clamp(26px, 3.4vw, 48px); padding-bottom: clamp(26px, 3.4vw, 48px); overflow: hidden; isolation: isolate; background: linear-gradient(315deg, rgba(255, 255, 255, 0.065), transparent 36%), linear-gradient(180deg, #2b2b31, #212126); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 28px; } .reveal-on-scroll { transition-timing-function: var(--ease-out-soft); } .feature-video-section.reveal-on-scroll { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1), transform 850ms cubic-bezier(0.22, 1, 0.36, 1), border-color 850ms ease, box-shadow 850ms ease; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } [data-theme="light"] .feature-video-section { background: linear-gradient(315deg, rgba(72, 84, 98, 0.08), transparent 36%), linear-gradient(180deg, #ffffff, #eef1f5); border-color: rgba(72, 84, 98, 0.14); } .sections-frame { position: relative; width: min(1400px, 100%); margin: 0 auto; overflow: hidden; isolation: isolate; /* background: linear-gradient(180deg, #2d2d34 0%, #25252b 52%, #202026 100%); background-color: #25252b;*/ /* border: 1px solid rgba(255, 255, 255, 0.13); border-top-color: rgba(255, 255, 255, 0.13); border-right-color: rgba(255, 255, 255, 0.13); border-bottom-color: rgba(255, 255, 255, 0.13); border-left-color: rgba(255, 255, 255, 0.13); border-radius: 30px; */ /* box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.08), 0 28px 74px rgba(0, 0, 0, 0.24); */ padding: 0 clamp(18px, 4vw, 56px); } .sections-frame .content-section { width: 100%; margin: 0; margin-top: 0px; background: transparent; border: 0; border-radius: 0; box-shadow: none; clip-path: none; } .feature-video-section.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0) scale(1); border-color: rgba(255, 200, 61, 0.22); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 200, 61, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); } [data-theme="light"] .sections-frame .content-section { background: transparent; border: 0; box-shadow: none; } [data-theme="light"] .feature-video-section.reveal-on-scroll.is-visible { box-shadow: 0 18px 48px rgba(33, 43, 54, 0.13), 0 0 0 1px rgba(255, 200, 61, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82); } .sections-frame .content-section.reveal-on-scroll.is-visible { border: 0; box-shadow: none; } #reber-apo { margin-top: clamp(10px, 2vw, 28px); padding-top: clamp(26px, 3.4vw, 48px); padding-bottom: clamp(26px, 3.4vw, 48px); overflow: hidden; isolation: isolate; background: linear-gradient(315deg, rgba(255, 255, 255, 0.065), transparent 36%), linear-gradient(180deg, #2b2b31, #212126); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 28px; overflow: unset; } #reber-apo, .feature-video-section, .shorts-section, .cand-huner-section, .external-links-section { margin-top: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); border-left: 1px solid rgba(255, 255, 255, 0.12); border-top: 0; border-bottom: 0; border-radius: 0; box-shadow: none; clip-path: none; } #reber-apo, .gerila-section, .cand-huner-section, .shorts-section, .calaki-section, .popular-section, .feature-video-section, .content-section { background: transparent !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; box-shadow: none !important; padding-top: clamp(34px, 4.4vw, 60px) !important; padding-bottom: clamp(34px, 4.4vw, 60px) !important; margin-top: 0 !important; } #reber-apo.reveal-on-scroll { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1), transform 850ms cubic-bezier(0.22, 1, 0.36, 1), border-color 850ms ease, box-shadow 850ms ease; box-shadow: 0 0 0 rgba(0, 0, 0, 0); } [data-theme="light"] #reber-apo { background: linear-gradient(315deg, rgba(72, 84, 98, 0.08), transparent 36%), linear-gradient(180deg, #ffffff, #eef1f5); border-color: rgba(72, 84, 98, 0.14); } [data-theme="light"] #reber-apo, [data-theme="light"] .feature-video-section, [data-theme="light"] .shorts-section, [data-theme="light"] .cand-huner-section, [data-theme="light"] .external-links-section { border-right-color: rgba(72, 84, 98, 0.12); border-left-color: rgba(72, 84, 98, 0.12); } .sections-frame #reber-apo { background: transparent; border: 0; border-radius: 0; box-shadow: none; clip-path: none; } #reber-apo.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0) scale(1); border-color: rgba(255, 200, 61, 0.26); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 30px 60px rgba(0, 0, 0, 0.34), 0 60px 120px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 200, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14); } #reber-apo.reveal-on-scroll.is-visible, .feature-video-section.reveal-on-scroll.is-visible, .shorts-section.reveal-on-scroll.is-visible, .cand-huner-section.reveal-on-scroll.is-visible { border-color: rgba(255, 255, 255, 0.12); box-shadow: none; } [data-theme="light"] .sections-frame #reber-apo { background: transparent; border: 0; box-shadow: none; } [data-theme="light"] #reber-apo.reveal-on-scroll.is-visible { box-shadow: 0 6px 18px rgba(33, 43, 54, 0.10), 0 22px 44px rgba(33, 43, 54, 0.14), 0 44px 90px rgba(33, 43, 54, 0.12), 0 0 0 1px rgba(232, 164, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85); } [data-theme="light"] #reber-apo.reveal-on-scroll.is-visible, [data-theme="light"] .feature-video-section.reveal-on-scroll.is-visible, [data-theme="light"] .shorts-section.reveal-on-scroll.is-visible, [data-theme="light"] .cand-huner-section.reveal-on-scroll.is-visible { border-color: rgba(72, 84, 98, 0.12); box-shadow: none; } .sections-frame #reber-apo.reveal-on-scroll.is-visible { border: 0; box-shadow: none; } .section-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: clamp(14px, 2vw, 24px); padding: 0 clamp(4px, 1vw, 10px); } .section-header.reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1); } .section-header.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } .section-title { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding-bottom: 0; color: var(--text); font-size: clamp(22px, 2.4vw, 34px); font-weight: 720; letter-spacing: 0; padding-top: unset; } .section-title { font-weight: 760; letter-spacing: -0.01em; text-transform: uppercase; } .section-title.reveal-on-scroll { opacity: 0; transform: translateX(-30px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .section-header.is-visible .section-title.reveal-on-scroll, .section-title.reveal-on-scroll.is-visible { opacity: 1; transform: translateX(0); } .section-title::before { display: block; content: ""; width: 4px; min-height: 34px; height: 100%; background: linear-gradient(180deg, var(--yellow-soft), var(--yellow)); border-radius: 4px; box-shadow: 0 0 18px var(--yellow-glow); } .section-title::before { width: 5px !important; border-radius: 999px !important; background: linear-gradient(180deg, var(--yellow-soft), var(--yellow)) !important; box-shadow: 0 0 22px var(--yellow-glow) !important; } .section-title a { position: relative; display: inline-block; margin: -2px -12px; padding: 2px 12px; color: inherit; text-decoration: none; border-radius: 6px; isolation: isolate; transition: color 240ms ease; } .section-title a::before { position: absolute; inset: 0; z-index: -1; width: 0; content: ""; background: var(--yellow); border-radius: inherit; transition: width 420ms cubic-bezier(0.65, 0, 0.076, 1); } .section-title .highlight { color: var(--text); } .view-all { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 680; text-decoration: none; border: 1px solid transparent; border-radius: 999px; padding: 8px 12px; background: rgba(255, 255, 255, 0.04); transition: gap 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease; } .feature-video-section .view-all { color: #ffffff; } [data-theme="light"] .feature-video-section .view-all { color: rgba(17, 17, 17, 0.86); } #reber-apo .view-all { color: #ffffff; } .view-all, #reber-apo .view-all { color: var(--muted); background: var(--panel) !important; border: 1px solid var(--card-bd) !important; box-shadow: none !important; } .view-all, #reber-apo .view-all, .feature-video-section .view-all { color: var(--text) !important; } [data-theme="light"] #reber-apo .view-all { color: rgba(17, 17, 17, 0.86); } [data-theme="light"] .view-all, [data-theme="light"] #reber-apo .view-all { color: var(--muted); } [data-theme="light"] .view-all, [data-theme="light"] #reber-apo .view-all, [data-theme="light"] .feature-video-section .view-all, [data-theme="light"] .bername-tab { color: #14151b !important; } .view-all:hover { gap: 12px; color: var(--yellow-soft); transform: translateY(-1px); } .feature-video-section .view-all:hover { color: var(--yellow-soft); background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)); border-color: rgba(255, 200, 61, 0.6); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 200, 61, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16); } [data-theme="light"] .feature-video-section .view-all:hover { color: #111111; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)); border-color: rgba(17, 17, 17, 0.72); box-shadow: 0 12px 26px rgba(17, 24, 39, 0.12), 0 0 0 1px rgba(17, 17, 17, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.95); } #reber-apo .view-all:hover { color: var(--yellow-soft); background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)); border-color: rgba(255, 200, 61, 0.6); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 200, 61, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .view-all:hover, #reber-apo .view-all:hover { color: var(--yellow-soft) !important; background: var(--panel-strong) !important; border-color: rgba(255, 200, 61, 0.5) !important; box-shadow: none !important; } .view-all:hover, #reber-apo .view-all:hover, .feature-video-section .view-all:hover { color: var(--text) !important; border-color: var(--text) !important; box-shadow: none !important; } [data-theme="light"] #reber-apo .view-all:hover { color: #111111; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)); border-color: rgba(17, 17, 17, 0.72); box-shadow: 0 12px 26px rgba(17, 24, 39, 0.12), 0 0 0 1px rgba(17, 17, 17, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.95); } [data-theme="light"] .view-all:hover, [data-theme="light"] #reber-apo .view-all:hover { color: #9a6f00 !important; border-color: rgba(232, 164, 0, 0.55) !important; } [data-theme="light"] .view-all:hover, [data-theme="light"] #reber-apo .view-all:hover, [data-theme="light"] .feature-video-section .view-all:hover { color: #14151b !important; border-color: #14151b !important; box-shadow: none !important; } .video-thumbnail { position: relative; min-height: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #202024; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 17px 17px 0 0; border-radius: var(--r-card) var(--r-card) 0 0 !important; } .video-grid { display: grid; gap: clamp(16px, 2vw, 24px); } .video-grid.grid-3 { position: relative; isolation: isolate; grid-template-columns: repeat(3, minmax(0, 1fr)); } .video-grid.grid-3 { clip-path: none !important; } .feature-video-section .video-grid.grid-3 { padding: clamp(12px, 1.8vw, 20px); } #reber-apo .video-grid.grid-3 { padding: clamp(12px, 1.8vw, 20px); } .gerila-showcase, .film-showcase { position: relative; z-index: 1; display: grid; /* grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.8fr); */ grid-template-columns: minmax(0, 2.3fr) minmax(260px, 0.86fr); gap: clamp(16px, 2.2vw, 28px); align-items: start; padding: clamp(12px, 1.8vw, 20px); background: linear-gradient(315deg, rgba(255, 255, 255, 0.065), transparent 36%), linear-gradient(180deg, #303037, #25252b); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 54px rgba(0, 0, 0, 0.2); } @media (max-width: 1000px) { .gerila-showcase, .film-showcase { grid-template-columns: 1fr; } } .gerila-showcase, .film-showcase, .cand-layout, #reber-apo .video-grid.grid-3, .feature-video-section .video-grid.grid-3, .featured-grid, .shorts-rail { box-shadow: none; } .gerila-showcase, .film-showcase { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } [data-theme="light"] .gerila-showcase, .film-showcase { background: linear-gradient(315deg, rgba(72, 84, 98, 0.08), transparent 36%), linear-gradient(180deg, #f8fafc, #e7ebf1); border-color: rgba(52, 58, 64, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 20px 48px rgba(33, 43, 54, 0.12); } .gerila-hero, .film-hero, .gerila-list-card, .film-list-card { --gerila-cut: 22px; position: relative; overflow: hidden; color: #ffffff; text-decoration: none; background: #18191f; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 24px 10px 24px 10px; clip-path: polygon(var(--gerila-cut) 0, 100% 0, 100% calc(100% - var(--gerila-cut)), calc(100% - var(--gerila-cut)) 100%, 0 100%, 0 var(--gerila-cut)); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .gerila-hero, .film-hero { display: block; /* aspect-ratio: 16 / 9; */ min-height: 0; } .gerila-hero .video-thumbnail, .film-hero .video-thumbnail { aspect-ratio: 16 / 9; } @media (max-width: 760px) { .gerila-hero, .film-hero { width: 100%; } } .gerila-hero, .film-hero { transform: perspective(1150px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .22s ease-out; transform-style: preserve-3d; will-change: transform; transform: perspective(1150px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) !important; } .gerila-list, .film-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; align-content: start; } @media (max-width: 1000px) { .gerila-list, .film-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .gerila-list, .film-list { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-right: 0; padding-right: 0; overflow: visible; overscroll-behavior-inline: auto; scroll-snap-type: none; } } .gerila-list-card, .film-list-card { --gerila-cut: 24px; display: block; /* aspect-ratio: 16 / 9; */ min-height: 0; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .gerila-list-card .video-thumbnail, .film-list-card .video-thumbnail { aspect-ratio: 16 / 9; } @media (max-width: 760px) { .gerila-list-card, .film-list-card { scroll-snap-align: none; } } #reber-apo .video-grid.grid-3 { padding: 0 !important; } #reber-apo .video-grid.grid-3 { overflow: visible; padding-bottom: clamp(28px, 3vw, 44px); } .video-shadow-wrapper { position: relative; display: block; width: 100%; } #reber-apo .video-shadow-wrapper--card { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } .video-card { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)), #202026; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1); cursor: pointer; transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease, background 260ms ease; } .video-card, .shorts-card, .popular-hero-card, .popular-list-card, .gerila-hero, .film-hero, .gerila-list-card, .film-list-card, .cand-card, .cand-stack .cand-card, .cand-feature { border-radius: var(--r-card) !important; clip-path: none !important; border: 1px solid var(--card-bd) !important; background: var(--card-bg) !important; box-shadow: var(--card-sh) !important; filter: none !important; } [data-theme="light"] .video-card { background: rgba(255, 255, 255, 0.86); border-color: rgba(72, 84, 98, 0.12); box-shadow: 0 12px 30px rgba(33, 43, 54, 0.12); } .feature-video-section .video-card { position: relative; border: 0 !important; background: linear-gradient(180deg, #20232c 0%, #15171e 100%) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important; overflow: hidden !important; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease !important; } .video-shadow-wrapper--card .video-card { position: relative; z-index: 3; } .feature-video-section.reveal-on-scroll .video-card { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease, background 260ms ease; } [data-theme="light"] .feature-video-section .video-card { background: #ffffff !important; box-shadow: 0 16px 38px rgba(20, 28, 44, 0.12) !important; } .feature-video-section.reveal-on-scroll.is-visible .video-card { opacity: 1; transform: translateY(0) scale(1); } .feature-video-section.reveal-on-scroll.is-visible .video-card:nth-child(1) { transition-delay: 120ms; } #reber-apo .video-card { transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s cubic-bezier(.16, 1, .3, 1) !important; will-change: transform; } #reber-apo.reveal-on-scroll .video-card { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease, background 260ms ease; } #reber-apo.reveal-on-scroll.is-visible .video-card { opacity: 1; transform: translateY(0) scale(1); } #reber-apo.reveal-on-scroll.is-visible .video-card:nth-child(1) { transition-delay: 120ms; } .video-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .feature-video-section .video-thumbnail img { transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .4s ease !important; } #reber-apo .video-thumbnail img { transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .5s ease !important; } .video-play { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; color: #ffffff; background: linear-gradient(180deg, var(--red), var(--red-dark)); border-radius: 999px; opacity: 0; transform: translate(-50%, -50%) scale(0.82); border: 2px solid rgba(255, 255, 255, 0.72); transition: opacity 260ms ease, transform 260ms ease, box-shadow 260ms ease; } .feature-video-section .video-play { width: 64px; height: 64px; background: radial-gradient(circle at 36% 30%, #ff6a72, var(--red) 46%, var(--red-dark)) !important; border: 2px solid rgba(255, 255, 255, .9) !important; box-shadow: 0 12px 30px rgba(239, 58, 70, .45) !important; } #reber-apo .video-play { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, box-shadow .3s ease !important; } .feature-video-section .video-play::before { content: ""; position: absolute; inset: -8px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; } .video-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 4px; } .feature-video-section.reveal-on-scroll.is-visible .video-card:hover, .feature-video-section.reveal-on-scroll.is-visible .video-card:hover * { transition-delay: 0ms; } #reber-apo.reveal-on-scroll.is-visible .video-card:hover, #reber-apo.reveal-on-scroll.is-visible .video-card:hover * { transition-delay: 0ms; } .video-card:hover .video-play { opacity: 1; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 14px 34px rgba(239, 58, 70, 0.32), 0 0 0 8px rgba(239, 58, 70, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .feature-video-section .video-card:hover .video-play { opacity: 1; transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 16px 40px rgba(239, 58, 70, .52), 0 0 0 12px rgba(239, 58, 70, .1) !important; } [data-theme="light"] .video-card:hover { box-shadow: 0 22px 46px rgba(33, 43, 54, 0.18), 0 0 0 1px rgba(255, 200, 61, 0.12); } .feature-video-section .video-card:hover { transform: translateY(-12px) !important; box-shadow: 0 40px 82px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 200, 61, 0.16) !important; } [data-theme="light"] .feature-video-section .video-card:hover { box-shadow: 0 34px 70px rgba(20, 28, 44, 0.2), 0 0 50px rgba(232, 164, 0, 0.18) !important; } .feature-video-section.reveal-on-scroll.is-visible .video-card:hover { transition-delay: 0ms; transform: translateY(-10px) scale(1.015); } #reber-apo .video-card:hover { transform: translateY(-8px) !important; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 200, 61, 0.22) !important; } [data-theme="light"] #reber-apo .video-card:hover { box-shadow: 0 24px 52px rgba(20, 28, 44, 0.16), 0 0 0 1px rgba(232, 164, 0, 0.24) !important; } #reber-apo.reveal-on-scroll.is-visible .video-card:hover { transition-delay: 0ms; transform: translateY(-10px) scale(1.015); } #reber-apo.reveal-on-scroll.is-visible .video-shadow-wrapper--card:hover .video-card { transform: scale(1.015); } #reber-apo .video-shadow-wrapper--card:hover { transform: translateY(-10px); } .video-card:hover, .video-card-large:hover, .video-card-horizontal:hover, .cand-card:hover, .taybet-card:hover, .gerila-hero:hover, .film-hero:hover, .gerila-list-card:hover, .film-list-card:hover, .popular-hero-card:hover, .popular-list-card:hover, .shorts-card:hover, .feature-video-section .video-card:hover, .feature-video-section.reveal-on-scroll.is-visible .video-card:hover, #reber-apo.reveal-on-scroll.is-visible .video-card:hover, #reber-apo .video-shadow-wrapper--card:hover, #sehid-me .video-card:hover, #hpg .video-card:hover, #heri-zede-temase .video-card:hover, .cand-huner-section.reveal-on-scroll.is-visible .cand-card:hover, .gerila-section.reveal-on-scroll.is-visible .gerila-hero:hover, .film-section.reveal-on-scroll.is-visible .film-hero:hover, .gerila-section.reveal-on-scroll.is-visible .gerila-list-card:hover, .film-section.reveal-on-scroll.is-visible .film-list-card:hover, .popular-section.reveal-on-scroll.is-visible .popular-hero-card:hover, .popular-section.reveal-on-scroll.is-visible .popular-list-card:hover { transform: none !important; } .feature-video-section .video-card:hover .video-play::before { animation: gtvPlayPulse 1.7s ease-out infinite; } @keyframes gtvPlayPulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } } .video-duration { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 7px; color: #ffffff; background: rgba(0, 0, 0, 0.78); border-radius: 4px; font-size: 12px; font-weight: 680; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .feature-video-section .video-duration { right: 10px; bottom: 10px; background: rgba(8, 10, 16, .55) !important; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px !important; font-weight: 690 !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* .video-thumbnail::after { position: absolute; right: 0; bottom: 0; left: 0; height: 46%; content: ""; background: linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent); transition: opacity 260ms ease; } */ .feature-video-section .video-thumbnail::after { height: 56%; } .video-card:hover .video-thumbnail::after { opacity: 0.72; } .video-info { padding: 14px 16px 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); border-top: 1px solid rgba(255, 255, 255, 0.07); } [data-theme="light"] .video-info { background: rgba(255, 255, 255, 0.62); } .feature-video-section .video-info, #heri-zede-temase .video-info { padding: 16px 18px 18px !important; } #heri-zede-temase .video-thumbnail, #heri-zede-temase .video-card-horizontal .video-thumbnail { border-radius: var(--r-card) var(--r-card) var(--r-card) var(--r-card) !important; clip-path: none; -webkit-clip-path: none; } .video-title { display: -webkit-box; margin: 0 0 8px; overflow: hidden; color: var(--text); font-size: 16px; font-weight: 690; line-height: 1.35; letter-spacing: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .feature-video-section .video-title, #heri-zede-temase .video-title { font-weight: 720 !important; letter-spacing: -.01em; transition: color .25s ease; } .video-meta { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 12px; font-weight: 620; } .feature-video-section .video-meta, #heri-zede-temase .video-meta { gap: 14px; font-weight: 660; } .feature-video-section .video-meta span, #heri-zede-temase .video-meta span { display: inline-flex; align-items: center; gap: 6px; } @supports ((-webkit-mask: url('')) or (mask: url(''))) { .feature-video-section .video-views::before, .feature-video-section .video-date::before, #heri-zede-temase .video-views::before, #heri-zede-temase .video-date::before { content: ""; width: 13px; height: 13px; flex: 0 0 auto; background: currentColor; opacity: .72; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } @supports ((-webkit-mask: url('')) or (mask: url(''))) { .feature-video-section .video-views::before, #heri-zede-temase .video-views::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%205C5%205%202%2012%202%2012s3%207%2010%207%2010-7%2010-7-3-7-10-7zm0%2011.5A4.5%204.5%200%201%201%2012%207a4.5%204.5%200%200%201%200%209.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%205C5%205%202%2012%202%2012s3%207%2010%207%2010-7%2010-7-3-7-10-7zm0%2011.5A4.5%204.5%200%201%201%2012%207a4.5%204.5%200%200%201%200%209.5z'/%3E%3C/svg%3E"); } } @supports ((-webkit-mask: url('')) or (mask: url(''))) { .feature-video-section .video-date::before, #heri-zede-temase .video-date::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2010V6h-2v8h6v-2h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2010V6h-2v8h6v-2h-4z'/%3E%3C/svg%3E"); } } .video-title a { text-decoration: none; } .feature-video-section .video-card:hover .video-title a, #heri-zede-temase .video-card:hover .video-title a { color: var(--yellow-soft) !important; text-decoration: none; } [data-theme="light"] .feature-video-section .video-card:hover .video-title a, [data-theme="light"] #heri-zede-temase .video-card:hover .video-title a { color: #b07d00 !important; text-decoration: none; } .sections-frame:has(#sehid-me) { background: radial-gradient(120% 90% at 50% -10%, rgba(120, 20, 28, 0.08), transparent 60%), linear-gradient(180deg, #2b2b31, #212126) !important; } [data-theme="light"] .sections-frame:has(#sehid-me) { background: linear-gradient(315deg, rgba(72, 84, 98, 0.08), transparent 36%), linear-gradient(180deg, #ffffff 0%, #eef1f5 100%) !important; border: 1px solid rgba(72, 84, 98, 0.14) !important; border-top-color: rgba(72, 84, 98, 0.14); border-right-color: rgba(72, 84, 98, 0.14); border-bottom-color: rgba(72, 84, 98, 0.14); border-left-color: rgba(72, 84, 98, 0.14); } #sehid-me { overflow: unset; } #sehid-me.reveal-on-scroll.is-visible { border-color: rgba(239, 58, 70, 0.30) !important; /* box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30), 0 34px 74px rgba(40, 0, 6, 0.40), 0 0 0 1px rgba(239, 58, 70, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; */ } #sehid-me.reveal-on-scroll.is-visible { border-color: rgba(255, 255, 255, 0.14) !important; /* box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; */ background: transparent !important; box-shadow: unset !important; } #sehid-me.content-section::before { content: ""; position: absolute; top: calc(clamp(34px, 4.4vw, 60px) * -1); left: clamp(18px, 4vw, 56px); right: clamp(18px, 4vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, var(--card-bd) 18%, var(--card-bd) 82%, transparent); } #sehid-me .section-title, #sehid-me .section-title a, #sehid-me .section-title .highlight { color: var(--text) !important; } #sehid-me .section-title a:hover, #sehid-me .section-title a:hover .highlight { color: #1e1e2b !important; } [data-theme="light"] #sehid-me .section-title, [data-theme="light"] #sehid-me .section-title a, [data-theme="light"] #sehid-me .section-title .highlight { color: #14151b !important; } #sehid-me .video-card { border-bottom-left-radius: unset !important; border-bottom-right-radius: unset !important; } #mod-custom133 { background: linear-gradient(180deg, #2d2d34 0%, #25252b 52%, #202026 100%); border-radius: 30px; background-color: #25252b; border: 1px solid rgba(255, 255, 255, 0.13) !important; } [data-theme="light"] #mod-custom133 { background: linear-gradient(180deg, #ffffff 0%, #f1f3f6 55%, #e7ebf1 100%); background-color: rgba(0, 0, 0, 0); background-color: #f1f3f6; border-color: rgba(72, 84, 98, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 20px 54px rgba(33, 43, 54, 0.12); } .sections-frame:has(#reber-apo) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .sections-frame:has(#sehid-me), .sections-frame:has(#hpg), .sections-frame:has(#calaki), .sections-frame:has(#gerila), .sections-frame:has(#cand-huner), .sections-frame:has(#taybet), .sections-frame:has(#paketa), .sections-frame:has(#film), .content-section.external-links-section { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-top: none !important; border-bottom: none !important; } .content-section.external-links-section { border-top-left-radius: 0; border-top-right-radius: 0; /* border: 1px solid rgba(255, 255, 255, 0.13) !important; */ border-top: unset !important; border-radius: 0 0 30px 30px !important; } section:has(.mod_slider_middle) { border: 1px solid rgba(255, 255, 255, 0.13); border-bottom: none; border-top: none; } .mod_slider_middle { padding-bottom: 2em; } .popular-section { margin-top: clamp(10px, 2vw, 28px); padding-top: clamp(28px, 3.8vw, 54px); padding-bottom: clamp(30px, 4vw, 58px); overflow: hidden; isolation: isolate; } .popular-section.reveal-on-scroll { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1), transform 850ms cubic-bezier(0.22, 1, 0.36, 1); } .popular-section.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0) scale(1); } #heri-zede-temase { background: linear-gradient(315deg, rgba(255, 255, 255, 0.065), transparent 36%), linear-gradient(180deg, #2b2b31, #212126) !important; /* border: 1px solid rgba(255, 255, 255, 0.14) !important; */ border-top: none !important; border-bottom: none !important; padding-right: unset !important; padding-left: unset !important; } [data-theme="light"] #heri-zede-temase { /* background: linear-gradient(315deg, rgba(72, 84, 98, 0.08), transparent 36%), linear-gradient(180deg, #ffffff, #eef1f5) !important; */ background: unset !important; border-color: rgba(72, 84, 98, 0.14); /* box-shadow: 0 18px 48px rgba(33, 43, 54, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.82); */ } html:not([data-theme="light"]) .sections-frame>#heri-zede-temase { background-image: radial-gradient(115% 62% at 50% -6%, rgba(167, 139, 250, 0.13), transparent 70%) !important; } .featured-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr); align-items: stretch; gap: clamp(16px, 2vw, 24px); isolation: isolate; padding: clamp(12px, 1.8vw, 20px); } #heri-zede-temase .featured-grid { grid-template-columns: minmax(0, 2.3fr) minmax(260px, 0.84fr); align-items: start; } #heri-zede-temase .popular-panel[data-popular-panel="alltime"] .featured-grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); align-items: start; } .featured-grid::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(180deg, #303037, #25252b); border: 1px solid rgba(255, 255, 255, 0.09); border-top-color: rgba(255, 255, 255, 0.09); border-right-color: rgba(255, 255, 255, 0.09); border-bottom-color: rgba(255, 255, 255, 0.09); border-left-color: rgba(255, 255, 255, 0.09); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 34px rgba(0, 0, 0, 0.16); } [data-theme="light"] .featured-grid::before { background: linear-gradient(180deg, #f8fafc, #e7ebf1); border-color: rgba(72, 84, 98, 0.12); } #heri-zede-temase .featured-grid::before { background: none; } #heri-zede-temase .featured-grid .video-info { background: none; } #heri-zede-temase .popular-panel[data-popular-panel="alltime"] .side-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.35vw, 18px); align-self: start; } .feature-video-section .video-card:hover .video-title, #heri-zede-temase .video-card:hover .video-title { color: var(--yellow-soft) !important; } [data-theme="light"] .feature-video-section .video-card:hover .video-title, [data-theme="light"] #heri-zede-temase .video-card:hover .video-title { color: #b07d00 !important; } .content-section .container { position: relative; z-index: 1; width: 100%; padding: 0 clamp(18px, 4vw, 56px); } .popular-header { align-items: center; gap: 16px; margin-bottom: clamp(16px, 2.4vw, 28px); } .section-title .highlight { color: var(--text); } .popular-tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; min-width: min(100%, 360px); padding: 5px; margin-left: auto; background: #1d1e24; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 32px rgba(0, 0, 0, 0.18); } [data-theme="light"] .popular-tabs { background: #e5e9ef; border-color: rgba(72, 84, 98, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px rgba(33, 43, 54, 0.1); } .popular-tab { min-height: 42px; padding: 0 18px; color: var(--muted); cursor: pointer; background: transparent; border: 0; border-radius: 999px; font: inherit; font-weight: inherit; font-size: inherit; font-family: inherit; font-size: 14px; font-weight: 760; letter-spacing: 0; transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .popular-tab:hover { color: var(--text); transform: translateY(-1px); } .shorts-filter, .popular-tab { border-radius: var(--r-pill) !important; } .popular-tab.is-active { color: #ffffff; background: linear-gradient(180deg, var(--red), var(--red-dark)); box-shadow: 0 12px 24px rgba(239, 58, 70, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .popular-shell { position: relative; padding: clamp(12px, 1.9vw, 22px); overflow: hidden; background: linear-gradient(180deg, #303037 0%, #282930 52%, #222329 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 54px rgba(0, 0, 0, 0.2); } [data-theme="light"] .popular-shell { background: linear-gradient(180deg, #ffffff 0%, #f2f4f7 56%, #e7ebf1 100%); border-color: rgba(72, 84, 98, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 20px 48px rgba(33, 43, 54, 0.12); } #heri-zede-temase .popular-shell { padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; } .popular-panel { display: none; } .popular-panel.is-active { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr); gap: clamp(14px, 2vw, 24px); align-items: stretch; animation: none; } #heri-zede-temase .popular-panel.is-active { display: block; grid-template-columns: none; } .video-card-large { display: flex; flex-direction: column; min-width: 0; } #heri-zede-temase .video-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; } #heri-zede-temase .video-card-large { align-self: start; } #heri-zede-temase .video-card, #heri-zede-temase .video-card:hover { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .video-card-horizontal { display: flex; align-items: stretch; gap: clamp(10px, 1.2vw, 16px); padding: clamp(8px, 1vw, 12px); min-height: 0; } #heri-zede-temase .video-card-horizontal { display: block; padding: 0; } .shorts-section { margin-top: clamp(10px, 2vw, 28px); padding-top: clamp(28px, 3.8vw, 54px); padding-bottom: clamp(30px, 4vw, 58px); overflow: hidden; isolation: isolate; background: linear-gradient(315deg, rgba(255, 255, 255, 0.06), transparent 36%), linear-gradient(180deg, #2b2b31, #202126); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); } [data-theme="light"] .shorts-section { background: linear-gradient(315deg, rgba(255, 255, 255, 0.78), transparent 42%), linear-gradient(180deg, #f7f8fb, #e9edf3); border-color: rgba(72, 84, 98, 0.14); box-shadow: 0 18px 48px rgba(33, 43, 54, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.84); } [data-theme="light"] .sections-frame>.content-section { background: transparent; border: 0; box-shadow: none; } .content-section+.content-section .container::before { content: ""; position: absolute; top: calc(clamp(34px, 4.4vw, 60px) * -1); left: clamp(18px, 4vw, 56px); right: clamp(18px, 4vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, var(--card-bd) 18%, var(--card-bd) 82%, transparent); } .shorts-header { margin-bottom: clamp(16px, 2.4vw, 28px); } .shorts-filters { display: flex; gap: 10px; padding: 10px 2px 8px; margin-bottom: clamp(14px, 2vw, 24px); overflow-x: auto; overflow-y: visible; scrollbar-width: none; } .shorts-filter { flex: 0 0 auto; min-width: 108px; padding: 10px 16px; color: var(--text); cursor: pointer; text-align: center; text-decoration: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)); border: 1px solid rgba(255, 255, 255, 0.13); border-top-color: rgba(255, 255, 255, 0.13); border-right-color: rgba(255, 255, 255, 0.13); border-bottom-color: rgba(255, 255, 255, 0.13); border-left-color: rgba(255, 255, 255, 0.13); border-radius: 12px; font: inherit; font-weight: inherit; font-size: inherit; font-family: inherit; font-size: 14px; font-weight: 690; letter-spacing: 0; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease; } .shorts-filter:hover, .shorts-filter.is-active { color: #ffffff; background: linear-gradient(180deg, var(--red), var(--red-dark)); border-color: rgba(239, 58, 70, 0.72); box-shadow: none; transform: translateY(-2px); } [data-theme="light"] .shorts-filter { color: #171717; background: rgba(255, 255, 255, 0.74); border-color: rgba(72, 84, 98, 0.16); } [data-theme="light"] .shorts-filter:hover, [data-theme="light"] .shorts-filter.is-active { color: #ffffff; background: linear-gradient(180deg, var(--red), var(--red-dark)); } .shorts-rail { display: grid; grid-auto-columns: calc((100% - 64px) / 5); grid-auto-flow: column; gap: 16px; padding: 20px 6px 60px; padding-right: 6px; overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: rgba(255, 200, 61, 0.5) transparent; scrollbar-width: thin; } .shorts-card { position: relative; min-width: 0; overflow: hidden; cursor: pointer; background: #18191d; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; scroll-snap-align: start; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.09); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .shorts-card:hover { border-color: rgba(255, 200, 61, 0.38); box-shadow: 0 28px 54px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 200, 61, 0.18); transform: translateY(-8px); } .video-card:hover, .shorts-card:hover, .popular-hero-card:hover, .popular-list-card:hover, .gerila-hero:hover, .film-hero:hover, .gerila-list-card:hover, .film-list-card:hover, .cand-card:hover { filter: none !important; border-color: rgba(255, 200, 61, 0.32) !important; box-shadow: var(--card-sh-hover) !important; transform: translateY(-6px) !important; /**/ } .bername_main_page .video-card:hover { transform: scale(1.01) !important; } .cand-huner-section { --cand-outer-cut: clamp(28px, 3vw, 52px); position: relative; overflow: hidden; margin-top: clamp(10px, 2vw, 28px); padding-top: clamp(26px, 3.4vw, 48px); padding-bottom: clamp(26px, 3.4vw, 48px); isolation: isolate; background: linear-gradient(315deg, rgba(255, 255, 255, 0.065), transparent 36%), linear-gradient(180deg, #2b2b31, #212126); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; clip-path: polygon(var(--cand-outer-cut) 0, 100% 0, 100% calc(100% - var(--cand-outer-cut)), calc(100% - var(--cand-outer-cut)) 100%, 0 100%, 0 var(--cand-outer-cut)); } .sections-frame:has(#cand-huner) { background-image: radial-gradient(115% 62% at 50% -6%, rgba(244, 114, 182, 0.13), transparent 70%) !important; } #cand-huner { overflow: unset; } .shorts-poster { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111216; } .shorts-duration { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; color: #ffffff; background: rgba(0, 0, 0, 0.72); border-radius: 5px; font-size: 12px; font-weight: 690; backdrop-filter: unset; -webkit-backdrop-filter: unset; right: unset; bottom: unset; } .shorts-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .video-card:hover .video-thumbnail img, #reber-apo .video-card:hover .video-thumbnail img, #sehid-me .video-card:hover .video-thumbnail img, #hpg .video-card:hover .video-thumbnail img, #heri-zede-temase .video-card:hover .video-thumbnail img, .cand-card:hover img, .cand-card:hover .cand-media img, .taybet-card:hover img, .taybet-card:hover .taybet-media img, .gerila-hero:hover img, .film-hero:hover img, .gerila-list-card:hover img, .film-list-card:hover img, .popular-hero-card:hover .popular-media img, .popular-list-card:hover .popular-media img, .shorts-card:hover img { transform: scale(1.06) !important; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1) !important; } .shorts-card:hover .shorts-poster img { transform: scale(1.035); } .shorts-play { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; width: 50px; height: 50px; color: #ffffff; place-items: center; background: linear-gradient(180deg, var(--red), var(--red-dark)); border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 999px; opacity: 0; transform: translate(-50%, -50%) scale(0.84); transition: opacity 220ms ease, transform 220ms ease; } .shorts-card:hover .shorts-play { opacity: 1; transform: translate(-50%, -50%) scale(1); } .shorts-play svg { width: 21px; height: 21px; fill: currentColor; margin-left: 3px; } .shorts-info { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 0 13px 14px; color: #ffffff; } .shorts-title { margin: 0 0 8px; font-size: clamp(14px, 1.05vw, 17px); font-weight: 720; line-height: 1.25; } .shorts-category { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.74); cursor: pointer; font-size: 12px; font-weight: 680; transition: color 180ms ease, transform 180ms ease; } .shorts-category:hover { color: #ffffff; transform: translateX(2px); } .shorts-category::before { width: 7px; height: 7px; content: ""; background: var(--red); border-radius: 999px; box-shadow: 0 0 12px rgba(239, 58, 70, 0.5); } .shorts-poster::after { position: absolute; right: 0; bottom: 0; left: 0; height: 48%; content: ""; background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent); } #vidyoyen-kurt { /* border: 1px solid rgba(255, 255, 255, 0.13) !important; */ border-top: none !important; border-bottom: none !important; padding-top: unset !important; } #vidyoyen-kurt>.container { padding-top: clamp(34px, 4.4vw, 60px) !important; } #vidyoyen-kurt section { display: none; } .shorts-card.is-hidden { display: none; } .side-videos { display: flex; flex-direction: column; gap: clamp(14px, 1.7vw, 22px); align-self: start; min-width: 0; } #hpg { overflow: unset; } .sections-frame:has(#hpg)::before, #vidyoyen-kurt::before, .sections-frame:has(#gerila)::before, .sections-frame:has(#taybet)::before, .sections-frame:has(#paketa)::before { content: ""; position: absolute; /* top: calc(clamp(34px, 4.4vw, 60px) * -1); */ left: clamp(18px, 4vw, 56px); right: clamp(18px, 4vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, var(--card-bd) 18%, var(--card-bd) 82%, transparent); } html:not([data-theme="light"]) .sections-frame:has(#hpg) { background-image: radial-gradient(115% 62% at 50% -6%, rgba(74, 222, 128, 0.12), transparent 70%) !important; } #hpg .video-card { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; } #hpg .video-card-large { align-self: start; } #hpg .side-videos { gap: clamp(12px, 1.35vw, 18px); } #hpg .video-card-horizontal { display: block; padding: 0; } .video-card-large .video-thumbnail { flex: 0 0 auto; aspect-ratio: 16 / 9; height: auto; min-height: 0; border-radius: 17px 17px 0 0; } #hpg .video-thumbnail { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.14); border-right-color: rgba(255, 255, 255, 0.14); border-bottom-color: rgba(255, 255, 255, 0.14); border-left-color: rgba(255, 255, 255, 0.14); border-radius: 18px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1); } [data-theme="light"] #hpg .video-thumbnail { border-color: rgba(72, 84, 98, 0.16); box-shadow: 0 12px 28px rgba(33, 43, 54, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86); } .video-card-horizontal .video-thumbnail { flex: 0 0 clamp(190px, 58%, 340px); align-self: center; aspect-ratio: 16 / 9; height: auto; min-height: 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; } #hpg .video-card-horizontal .video-thumbnail { flex: none; width: 100%; border-radius: 16px; } #hpg .video-info, [data-theme="light"] #hpg .video-info { padding: 10px 2px 0; background: transparent; border-top: 0; } #hpg .video-card-horizontal .video-info { display: block; padding: 8px 2px 0; } @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { .feature-video-section .video-card::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(135deg, #ffd86b, rgba(255, 150, 40, .3) 45%, #ffc83d); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: add, add; mask-composite: exclude; opacity: 0; transition: opacity .4s ease; } } #hpg .featured-grid { grid-template-columns: minmax(0, 2.3fr) minmax(260px, 0.86fr); align-items: start; } @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { .feature-video-section .video-card:hover::after { opacity: 1; } } html:not([data-theme="light"]) #vidyoyen-kurt { background-image: radial-gradient(115% 62% at 50% -6%, rgba(56, 189, 248, 0.12), transparent 70%) !important; } #calaki { overflow: unset; /* padding-top: unset !important; */ } #calaki ul { padding-bottom: 60px !important; } .sections-frame:has(#calaki) { overflow: hidden; } #calaki ul::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(180deg, #303037, #25252b); border: 1px solid rgba(255, 255, 255, 0.09); border-top-color: rgba(255, 255, 255, 0.09); border-right-color: rgba(255, 255, 255, 0.09); border-bottom-color: rgba(255, 255, 255, 0.09); border-left-color: rgba(255, 255, 255, 0.09); border-radius: 22px; opacity: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 34px rgba(0, 0, 0, 0.16); } [data-theme="light"] #calaki ul::before { background: linear-gradient(180deg, #f8fafc, #e7ebf1); border-color: rgba(72, 84, 98, 0.12); } #cand-huner .card-body ul, .mod_bernama ul { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); align-items: stretch; overflow: visible; padding: clamp(12px, 1.8vw, 20px); background: transparent; border: 0; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-radius: 0; box-shadow: none; isolation: isolate; padding: 0 !important; margin-top: 2em !important; } [data-theme="light"] #cand-huner .card-body ul { background: transparent; border-color: transparent; box-shadow: none; } #taybet { overflow: unset; } #taybet .card-body ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); } footer>.grid-child { padding: unset !important; margin: unset; width: 100%; max-width: unset; } footer>.grid-child>.footer { margin: unset; padding: unset; } footer.container-footer { margin: unset; padding: unset; } .gtv-footer { position: relative; overflow: hidden; isolation: isolate; width: calc(100% + clamp(36px, 8vw, 51px)); margin: clamp(18px, 4vw, 54px) calc(clamp(18px, 4vw, 54px) * -1) calc(clamp(18px, 4vw, 54px) * -1); padding: clamp(42px, 5vw, 72px) calc(clamp(42px, 5vw, 72px) * 2) clamp(24px, 3vw, 36px); background: linear-gradient(180deg, rgba(255, 200, 61, 0.04), rgba(255, 255, 255, 0.01)), #0c0d11; border-top: 1px solid rgba(255, 200, 61, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); background: linear-gradient(180deg, rgba(255, 200, 61, 0.05), transparent 40%), linear-gradient(180deg, #20242e, #1b2028) !important; border-top: 1px solid rgba(255, 200, 61, 0.16) !important; border-top-color: rgba(255, 200, 61, 0.16); position: relative; overflow: hidden; margin-top: unset; } [data-theme="light"] .gtv-footer { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(233, 237, 243, 0.8)) !important; border-top-color: rgba(20, 24, 40, 0.1) !important; } [data-theme="light"] .footer { background: none !important; } .gtv-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(900px, 80%); height: 1px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); box-shadow: 0 0 18px var(--yellow-glow); opacity: 0.7; } .gtv-footer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 85% 0%, rgba(255, 200, 61, 0.07), transparent 60%); z-index: 0; } .footer-emblem { display: none; } .footer-inner { width: min(1400px, 100%); margin: 0 auto; } .footer-inner { position: relative; z-index: 1; } .footer-content { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr); gap: clamp(28px, 5vw, 72px); margin-bottom: clamp(32px, 5vw, 58px); } .footer-brand { display: flex; flex-direction: column; max-width: 330px; } .footer-logo { display: inline-flex; align-items: center; margin-bottom: 20px; text-decoration: none; } .footer-logo img { display: block; width: 70px; height: auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.34)); transition: transform 460ms var(--ease-out-soft), filter 460ms ease; } .footer-logo:hover img { transform: scale(1.06) rotate(-1.5deg); filter: drop-shadow(0 16px 30px rgba(255, 200, 61, 0.3)); } .footer-brand p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 620; line-height: 1.75; } [data-theme="light"] .footer-brand p, [data-theme="light"] .footer-links a, [data-theme="light"] .footer-copyright { color: rgba(18, 20, 28, 0.82) !important; } .footer-figures { position: relative; flex: 1 1 auto; min-height: 78px; width: 100%; margin-top: 12px; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); } .footer-figure { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom left; opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 1.8s ease; } .footer-figure.is-active { opacity: 0.92; transform: scale(1); } .footer-title { margin: 0 0 18px; color: var(--text); font-size: 17px; font-weight: 690; position: relative; padding-left: 14px; } [data-theme="light"] .footer-title { color: #14151b !important; } .footer-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, var(--yellow), var(--red)); box-shadow: 0 0 10px var(--yellow-glow); } .footer-links { padding: 0; margin: 0; list-style: none; } .footer-links a { color: var(--muted); font-size: 14px; font-weight: 620; text-decoration: none; transition: color 180ms ease, transform 180ms ease; position: relative; display: inline-flex; align-items: center; gap: 8px; padding-left: 0; transition: color 240ms ease, transform 320ms var(--ease-out-soft), padding-left 320ms var(--ease-out-soft); } .footer-links a::before { content: ""; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--yellow), var(--red)); transition: width 320ms var(--ease-out-soft); } .footer-links a:hover { color: var(--yellow-soft); transform: translateX(2px); } .footer-links a:hover::before { width: 16px; } [data-theme="light"] .footer-links a:hover { color: #9a6f00 !important; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.1); position: relative; } [data-theme="light"] .footer-bottom { border-top-color: rgba(72, 84, 98, 0.14); } .footer-copyright { margin: 0; color: var(--muted); font-size: 13px; font-weight: 620; } .footer-social { display: flex; gap: 12px; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.1); border-right-color: rgba(255, 255, 255, 0.1); border-bottom-color: rgba(255, 255, 255, 0.1); border-left-color: rgba(255, 255, 255, 0.1); border-radius: 999px; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; width: 44px; height: 44px; transition: transform 360ms var(--ease-out-soft), border-color 280ms ease, background 280ms ease, box-shadow 280ms ease; } .footer-social a:hover { background: rgba(255, 200, 61, 0.16); border-color: rgba(255, 200, 61, 0.5); transform: translateY(-3px); transform: translateY(-5px) scale(1.06); box-shadow: 0 14px 30px rgba(255, 200, 61, 0.22); } [data-theme="light"] .footer-social a { background: rgba(255, 255, 255, 0.7); border-color: rgba(72, 84, 98, 0.14); } .footer-social img { display: block; width: 30px; height: 30px; object-fit: contain; border-radius: 50%; } .sections-frame:has(.mod_bernama) { overflow: unset; } .sections-frame:has(.mod_bernama) ul { margin: unset; } .watch-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; margin-bottom: 44px; } .watch-main { min-width: 0; } .watch-sidebar { position: relative; display: flex; flex-direction: column; min-height: 0; } .watch-sidebar__title { font-size: 1.05rem; font-weight: 900; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .watch-sidebar__list { display: flex; flex-direction: column; gap: 10px; border-radius: 14px; } .uplist-item { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 12px; padding: 6px; border-radius: 14px !important; cursor: pointer; background: transparent !important; border: 1px solid transparent !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; overflow: unset; } .uplist-item:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.08) !important; transform: translateY(-1px) !important; box-shadow: none !important; } [data-theme="light"] .uplist-item:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .uplist-item:hover .uplist-body { background: unset !important; } .uplist-thumb { position: relative; aspect-ratio: 16/9; border-radius: 10px !important; overflow: hidden; background: rgba(0, 0, 0, 0.4); border: unset; min-height: unset; } .uplist-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .uplist-thumb__duration { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; background: rgba(0, 0, 0, 0.82); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; line-height: 1.4; } .uplist-body { min-width: 0; padding-top: 2px; background: unset; border-top: unset; border-radius: 0 14px 14px 0; } .uplist-title { font-size: 0.88rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.3em); max-height: calc(2 * 1.35em); } .uplist-meta { font-size: 0.74rem; color: rgba(255, 255, 255, 0.62); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } [data-theme="light"] .uplist-meta { color: #5e6673; } .video-shadow-wrapper { position: relative; display: block; width: 100%; margin-bottom: 28px; } #video_shadow_wrapper::before, #video_shadow_wrapper::after { content: ""; position: absolute; z-index: 0; bottom: 28px; top: 80%; width: 50%; max-width: 300px; background: transparent; box-shadow: 0 35px 20px rgba(0, 0, 0, 0.6); pointer-events: none; } .video-shadow-wrapper::before { left: 10px; transform: rotate(-8deg); } [data-theme="light"] .video-shadow-wrapper::before, [data-theme="light"] .video-shadow-wrapper::after { box-shadow: 0 35px 20px rgba(0, 0, 0, 0.45); } .video-shadow-wrapper::after { right: 10px; transform: rotate(8deg); } [data-theme="light"] .video-shadow-wrapper::before, [data-theme="light"] .video-shadow-wrapper::after { box-shadow: 0 35px 20px rgba(0, 0, 0, 0.45); } .featured-video-title { text-align: center; color: var(--text-primary); font-size: 1.25rem; margin-top: var(--space-lg); font-weight: 600; opacity: 0.9; } .watch-main .featured-video-title { text-align: center; font-size: 1.2rem; font-weight: 700; margin: 18px 0 14px; margin-top: 18px; margin-bottom: 14px; opacity: 0.92; color: #ffffff; } .watch-main .featured-video-title { margin-top: var(--space-md); margin-bottom: var(--space-md); } [data-theme="light"] .watch-main .featured-video-title { color: #171717; } .featured-actions { display: flex; justify-content: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; } .featured-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 800; color: #ffffff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-top-color: rgba(255, 255, 255, 0.16); border-right-color: rgba(255, 255, 255, 0.16); border-bottom-color: rgba(255, 255, 255, 0.16); border-left-color: rgba(255, 255, 255, 0.16); border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } [data-theme="light"] .featured-action { color: #171717; background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); } .featured-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 800; color: #ffffff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-top-color: rgba(255, 255, 255, 0.16); border-right-color: rgba(255, 255, 255, 0.16); border-bottom-color: rgba(255, 255, 255, 0.16); border-left-color: rgba(255, 255, 255, 0.16); border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .featured-action svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-theme="light"] .featured-action { color: #171717; background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); } .featured-action:hover { background: linear-gradient(180deg, #ef3a46, #c4111d); border-color: rgba(239, 58, 70, 0.7); color: #ffffff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(239, 58, 70, 0.32); } .featured-player { max-width: 900px; margin: 0 auto var(--space-2xl); border-radius: 24px; overflow: hidden; position: relative; background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="light"] .featured-player { background: white; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); } .watch-main .featured-player { max-width: none; margin-inline: 0; margin-bottom: var(--space-md); } .featured-player-wrapper { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .featured-player-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .watch-sidebar__title { font-size: 1.05rem; font-weight: 900; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .watch-sidebar__title a { text-decoration: none; } .watch-sidebar__title::before { content: ''; width: 4px; height: 1.05em; background: linear-gradient(180deg, #ef3a46 0%, #c4111d 100%); border-radius: 3px; box-shadow: 0 6px 14px rgba(239, 58, 70, 0.34); } body.view-article #upNextList> :first-child { display: none; } .layout-blog .content-section.external-links-section, .com_finder .content-section.external-links-section, .itemid-128 .content-section.external-links-section { border: unset !important; } .com_content .slider.slider--bottom { border-radius: 26px; } #popular-panel-month .video-info { border-top: unset; } .slider--middle { width: min(1440px, calc(100% - clamp(28px, 8vw, 240px))); margin: clamp(22px, 3.2vw, 46px) auto; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 58px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.14); } @media (max-width: 1024px) { .slider--middle { width: 100%; margin: 18px 0; border-radius: 14px; } } @media (max-width: 768px) { .slider--middle { width: 100%; margin: 14px 0; margin-right: 0px; margin-left: 0px; border-radius: 10px; } } .mod_slider_middle .slider { width: 100%; margin-right: 0; margin-left: 0; } .slider--middle .slider-container { height: 250px; background: url("/images/01_frontpage/slider_middle.png") left center / cover no-repeat; background-attachment: fixed; } @media (max-width: 1024px) { .slider--middle .slider-container { height: auto; aspect-ratio: 21 / 7; background-attachment: scroll !important; background-size: cover !important; background-position: center var(--mid-parallax, 50%) !important; } } @media (max-width: 768px) { .slider--middle .slider-container { height: auto; aspect-ratio: 21 / 6; background-attachment: scroll !important; background-size: cover !important; background-position: center var(--mid-parallax, 50%) !important; } } /* #gerila .video-info{ position: absolute; bottom:0; } #gerila .video-title, #gerila .video-title{ margin: unset; line-height: unset; font-size: unset; } */ .featured-grid .video-thumbnail { overflow: hidden; } #calaki .card-body, #hpg .featured-grid-wrapper { overflow: unset; scrollbar-width: none; position: relative; } #b_slider.sections-frame { border-radius: unset; border-top: none; border-bottom: none; padding: unset; } .paketa-toggle-btn { width: calc(100% - var(--space-md)); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.2s ease; padding: var(--space-sm) var(--space-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; text-align: center; } .paketa-toggle-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-primary); text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px var(--primary-glow); } .paketa-toggle-btn:active { transform: translateY(0); } .paketa-toggle-btn .icon { font-size: 14px; line-height: 1; } .paketa-tab.is-hidden { display: none; } .js-finder-searchform { margin: 0 auto; padding: 1em; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-md); background: linear-gradient(180deg, #20232c 0%, #15171e 100%) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease !important; } [data-theme="light"] .js-finder-searchform { background: transparent !important; box-shadow: 0 16px 38px rgba(20, 28, 44, 0.12) !important; } .js-finder-searchform label { font-weight: 600; color: white; margin-bottom: 0.25rem; } [data-theme="light"] .js-finder-searchform label { color: #0f172a; } .js-finder-searchform .input-group { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: stretch; } .js-finder-searchform input[type="text"] { flex: 1 1 320px; height: 52px; padding: 0.75rem 1rem; border: 1px solid #cbd5e1; border-radius: var(--radius-md); background: #fff; color: #0f172a; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .js-finder-searchform input[type="text"]:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } .js-finder-searchform .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12); } .js-finder-searchform .btn-primary { flex: 0 0 calc(16.666% - var(--space-md)); /* max-width: calc(16.666% - var(--space-md)); */ padding: var(--space-sm) var(--space-lg); background: gray; border: 1px solid var(--glass-border); border-radius: var(--radius-md) !important; color: white; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; text-align: center; } .js-finder-searchform .btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: white; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px var(--primary-glow); } .js-finder-searchform .btn-secondary { background: #e2e8f0; color: #0f172a; border-radius: var(--radius-md) !important; } .js-finder-searchform #advancedSearch { margin-top: 1em; padding: 1rem; background: radial-gradient(1100px 620px at 8% -8%, rgba(255, 200, 61, 0.10), transparent 58%), radial-gradient(1000px 720px at 102% 4%, rgba(96, 142, 224, 0.16), transparent 56%), radial-gradient(1200px 900px at 50% 118%, rgba(138, 110, 224, 0.12), transparent 60%), linear-gradient(180deg, #242936 0%, #1f2430 44%, #1b2028 100%) !important; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-md); } [data-theme="light"] .js-finder-searchform #advancedSearch { background: radial-gradient(1100px 620px at 8% -8%, rgba(232, 164, 0, 0.08), transparent 56%), radial-gradient(1000px 720px at 102% 4%, rgba(96, 142, 224, 0.1), transparent 54%), radial-gradient(1200px 900px at 50% 120%, rgba(138, 110, 224, 0.07), transparent 60%), linear-gradient(180deg, #f6f7fb 0%, #eef1f6 60%, #e9edf3 100%) !important; } .js-finder-searchform .card { border: 0; border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06); } .js-finder-searchform .card-body { padding: 1rem 1.1rem; color: #475569; line-height: 1.7; } .js-finder-searchform .com-finder__filter { margin-top: 1rem; } .js-finder-searchform .control-group { display: grid; gap: 0.5rem; } .js-finder-searchform select.form-select { width: 100%; min-height: 52px; border-radius: var(--radius-md); border: 1px solid #cbd5e1; padding: 0.75rem 1rem; background-color: #fff; } .input-group { display: flex; width: 100%; gap: 0.75rem; align-items: stretch; } .input-group .awesomplete { flex: 1 1 auto; max-width: 100%; } .input-group .awesomplete input { width: 100%; } .input-group .btn { flex: 0 0 auto; white-space: nowrap; } .search-drop { position: fixed; top: calc(var(--header-height) + 10px); right: clamp(14px, 4vw, 56px); z-index: 280; width: min(340px, calc(100vw - 28px)); opacity: 0; visibility: hidden; display: none; transform: translateY(-16px) scale(0.97); transform-origin: top right; transition: opacity 240ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 380ms; transition-delay: 0s, 0s, 380ms; left: -200vw; } .search-drop.is-open { opacity: 1; display: unset; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; left: unset; } .search-drop__form { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(30, 32, 39, 0.98), rgba(18, 19, 25, 0.98)); border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.12); border-right-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.12); box-shadow: var(--shadow); backdrop-filter: blur(14px); } .search-drop__form { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(30, 32, 39, 0.98), rgba(18, 19, 25, 0.98)); border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.12); border-right-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.12); box-shadow: var(--shadow); backdrop-filter: blur(14px); } [data-theme="light"] .search-drop__form { background: linear-gradient(180deg, #ffffff, #f4f6f9); border-color: rgba(72, 84, 98, 0.14); box-shadow: var(--shadow); } .search-drop__icon { flex: none; color: var(--text); opacity: 0.75; display: grid; place-items: center; } .search-drop__input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 0.95rem; } .search-drop__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(180deg, var(--red), var(--red-dark)); transition: box-shadow 180ms ease, transform 180ms ease; } .search-drop__go svg { width: 16px; height: 16px; } .search-drop__adv-toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .search-drop__adv-toggle svg { width: 17px; height: 17px; } .search-drop__adv { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, margin-top 380ms ease; } .search-drop__adv.is-open { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; } .search-drop__adv-inner { overflow: hidden; min-height: 0; } .search-drop__adv>.search-drop__adv-inner { padding: 0; } .search-drop__adv.is-open .search-drop__adv-inner { overflow: visible; padding: 16px 18px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(30, 32, 39, 0.98), rgba(18, 19, 25, 0.98)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--shadow); backdrop-filter: blur(14px); } [data-theme="light"] .search-drop__adv.is-open .search-drop__adv-inner { background: unset; } .search-drop__adv-title { display: block; margin-bottom: 12px; color: var(--text); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .search-select { position: relative; } .search-select__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 14px; cursor: pointer; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.14); border-right-color: rgba(255, 255, 255, 0.14); border-bottom-color: rgba(255, 255, 255, 0.14); border-left-color: rgba(255, 255, 255, 0.14); font-size: 0.92rem; font-weight: 600; text-align: left; transition: border-color 200ms ease, background 200ms ease; } [data-theme="light"] .search-select__btn { background: rgba(20, 24, 40, 0.03); border-color: rgba(20, 24, 40, 0.14); } .search-select__btn svg { flex: none; width: 17px; height: 17px; color: var(--text); opacity: 0.7; transition: transform 260ms ease; } .search-select__list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: min(280px, 48vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: linear-gradient(180deg, rgba(34, 36, 44, 0.99), rgba(20, 21, 27, 0.99)); border: 1px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.12); border-right-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.12); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 200ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms; } [data-theme="light"] .search-select__list { background: linear-gradient(180deg, #ffffff, #f7f8fa); border-color: rgba(72, 84, 98, 0.14); box-shadow: var(--shadow); } .search-select.is-open .search-select__list { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .search-select__list li { cursor: pointer; } [data-theme="light"] .search-select__list li { cursor: pointer; color: var(--text); } .itemid-128 main, .itemid-144 main { max-width: 1020px; margin: 0 auto; padding: clamp(14px, 3vw, 34px) 0 clamp(34px, 5vw, 66px); padding-top: clamp(14px, 3vw, 34px); } .pw-head { display: flex; justify-content: center; padding: clamp(18px, 3.5vw, 36px) 0 clamp(6px, 1.5vw, 12px); } .pw-logo { width: clamp(150px, 24vw, 230px); height: auto; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.45)); } .pw-label { display: flex; align-items: center; gap: 14px; margin: clamp(30px, 5vw, 50px) 0 clamp(14px, 2.2vw, 20px); margin-top: clamp(30px, 5vw, 50px); color: var(--text); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; white-space: nowrap; } .pw-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 200, 61, 0.55), transparent); } .pw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(12px, 1.8vw, 18px); } .pw-grid a { color: var(--text); text-decoration: none; } .pw-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; text-decoration: none; color: inherit; overflow: hidden; background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.08); border-top-color: rgba(255, 255, 255, 0.08); border-right-color: rgba(255, 255, 255, 0.08); border-bottom-color: rgba(255, 255, 255, 0.08); border-left-color: rgba(255, 255, 255, 0.08); --rx: 0deg; --ry: 0deg; --lift: 18px; opacity: 0; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)); transform-style: preserve-3d; will-change: transform; transition: opacity 0.6s ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease, background 300ms ease, box-shadow 300ms ease, color 220ms ease; } @media (hover: none) { .pw-card { --rx: 0deg !important; --ry: 0deg !important; } } [data-theme="light"] .pw-card { border-color: rgba(20, 24, 40, 0.09); } .pw-card.is-visible { opacity: 1; --lift: 0px; } .pw-card:hover { border-color: rgba(255, 200, 61, 0.66); background: var(--panel-strong); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 200, 61, 0.12); --lift: -8px; } .pw-card__icon { flex: none; width: 54px; height: 54px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #202024; border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.12); border-right-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); border-left-color: rgba(255, 255, 255, 0.12); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="light"] .pw-card__icon { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 246, 249, 0.76)), #ffffff; border-color: rgba(72, 84, 98, 0.14); box-shadow: 0 14px 36px rgba(33, 43, 54, 0.12); } .pw-card:hover .pw-card__icon { border-color: rgba(255, 200, 61, 0.66); transform: scale(1.08); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 200, 61, 0.12); } .pw-card__text { flex: 1; min-width: 0; } .pw-card__text b { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; } .pw-card:hover .pw-card__text b { color: var(--yellow-soft); text-shadow: 0px 0px 1px black; } .pw-card__go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 200, 61, 0.35); color: var(--yellow); transition: transform 0.28s ease, background 0.28s ease; } .pw-card__go svg { width: 15px; height: 15px; } .pw-notice { display: flex; gap: 14px; align-items: flex-start; margin-top: clamp(26px, 4vw, 44px); padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(239, 58, 70, 0.32); background: rgba(239, 58, 70, 0.07); color: var(--muted); font-size: 0.94rem; line-height: 1.85; } .pw-notice__icon { flex: none; color: var(--red); margin-top: 2px; } .pw-notice__icon svg { width: 20px; height: 20px; display: block; } .pw-notice b { display: block; margin-bottom: 4px; color: var(--text); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .pw-slogan { display: flex; align-items: center; justify-content: center; gap: 16px; margin: clamp(32px, 5vw, 56px) 0 0; text-align: center; font-size: clamp(0.9rem, 1.9vw, 1.12rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 3em; } .pw-slogan::before, .pw-slogan::after { content: ""; flex: 1; max-width: 110px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.6)); } .pw-slogan::after { background: linear-gradient(90deg, rgba(255, 200, 61, 0.6), transparent); } .about-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(18px, 3.5vw, 34px) 0 0; } .about-logo { position: relative; width: clamp(160px, 26vw, 250px); height: auto; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.45)); } .about-mark { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 20px; } .about-mark::before, .about-mark::after { content: ""; width: clamp(28px, 8vw, 64px); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.7)); } .about-mark::after { background: linear-gradient(90deg, rgba(255, 200, 61, 0.7), transparent); } .about-mark span { color: var(--yellow); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; } .about-body { margin-top: clamp(26px, 4vw, 46px); padding: 0 clamp(0px, 2vw, 22px); } .about-lead { color: var(--text) !important; font-size: clamp(1.06rem, 1.9vw, 1.26rem) !important; font-weight: 500; line-height: 1.8 !important; padding-left: 20px; border-left: 3px solid var(--red); } .about-body p { position: relative; margin: 0 0 clamp(18px, 2.4vw, 26px); color: var(--muted); font-size: clamp(0.99rem, 1.5vw, 1.07rem); line-height: 2; } .about-body p { position: relative; margin: 0 0 clamp(18px, 2.4vw, 26px); color: var(--muted); font-size: clamp(0.99rem, 1.5vw, 1.07rem); line-height: 2; } .about-slogan { display: flex; align-items: center; justify-content: center; gap: 16px; margin: clamp(32px, 5vw, 56px) 0 0; text-align: center; font-size: clamp(0.92rem, 1.9vw, 1.15rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 3em; } .about-slogan::before, .about-slogan::after { content: ""; flex: 1; max-width: 110px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.6)); } .about-slogan::after { background: linear-gradient(90deg, rgba(255, 200, 61, 0.6), transparent); } .mod_bernama::before { display: none; } .com-finder__tips { display: none; } .ff-wrap { overflow: hidden; } .ff-overlay { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .18s ease; /* background: linear-gradient(to top, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); */ } .ff-overlay.ff-show { opacity: 1; pointer-events: auto; } .ff-btn { border: 0; border-radius: 50%; background: rgba(20, 20, 20, .52); backdrop-filter: blur(8px); padding: .5rem .5rem; color: #fff; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); transition: transform .15s ease, background .15s ease; position: absolute; opacity: .6; } .ff-btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; } .ff-btn.ff-forward { right: 0; } .ff-btn.ff-rewind { left: 0; } .ff-btn:hover { transform: scale(1.05); background: rgba(20, 20, 20, .88); } .ff-btn:active { transform: scale(.98); } .view-category .com-content-category-blog.blog .item-content { display: none; } #pt { position: absolute; right: -7px; top: 50%; width: 10px; height: 10px; background: #fff; border: 2px solid #00aaff; border-radius: 50%; transform: translateY(-50%); box-sizing: border-box; } .blog-item:has(.video-card) { overflow: unset; } .bername_main_page .video-card:hover .video-play { display: none; } @media (max-width: 1024px) { .top-layered-slider { width: 100%; margin-right: 0; margin-left: 0; /* margin-top: 18px; */ border-radius: 16px; } .top-layered-slider__stage { height: auto; min-height: 0; aspect-ratio: 1920 / 680; margin-top: -2px; margin-bottom: -2px; background-position: center center; background-size: 100% auto; background-repeat: no-repeat; } .top-layered-slider__overlay { left: 0; top: 0; bottom: auto; width: 100%; height: 100%; object-fit: cover; } #heri-zede-temase { background: transparent !important; background-image: none; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #heri-zede-temase .popular-shell { padding: 0 !important; background: transparent !important; background-image: none; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } #heri-zede-temase .popular-panel.is-active { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; scroll-snap-type: inline mandatory; scrollbar-width: none; } #heri-zede-temase .popular-panel.is-active .side-videos { display: contents !important; } #search-result-list { grid-template-columns: repeat(3, 1fr); gap: 12px; padding-left: .7em; padding-right: .7em; } #calaki { padding-top: 2em !important; } #calaki ul { padding-bottom: 1em !important; } .shorts-rail { padding: unset; } #mod-custom133 { border-radius: 16px; } } @media (max-width: 1100px) { .popular-panel.is-active { grid-template-columns: 1fr; } .shorts-rail { grid-auto-columns: calc((100% - 36px) / 3.4); gap: 12px; } .blog-items { grid-template-columns: 1fr 1fr; } .grid-child.container-component { display: grid; grid-template-areas: "watch" "main" "sidebar"; grid-template-columns: 100%; width: 100%; max-width: 100%; overflow-x: hidden; } #watch_layout { grid-area: watch; display: contents; } #watch_main, #watch_sidebar, main { min-width: 0; max-width: 100%; } #watch_sidebar { grid-area: sidebar; } main { grid-area: main; } #upNextList { grid-template-columns: 1fr 1fr; display: grid; } } @media (min-width: 1100px) { .watch-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } .watch-sidebar { max-height: var(--featured-h, 560px); overflow: hidden; } .watch-sidebar__list { overflow-y: auto; padding-right: 4px; scrollbar-width: thin; } } @media (min-width: 1400px) { .watch-layout { grid-template-columns: minmax(0, 1fr) 420px; } } @media (min-width: 1101px) { .popular-panel[data-popular-panel="month"].is-active { grid-template-columns: minmax(0, 2.05fr) minmax(260px, 0.82fr); align-items: start; } } @media (max-width: 900px) { .video-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .video-thumbnail { min-height: 0; } .video-play { width: 46px; height: 46px; } .video-duration { font-size: 10px; } .video-info { padding: 10px 10px 12px; } .video-title { font-size: 13px; } .video-meta { gap: 8px; font-size: 10px; } .site-grid { display: unset; } .sections-frame { padding: .5em; } .featured-grid { grid-template-columns: 1fr; } .side-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; } .video-card-horizontal { display: block; padding: 0; } .video-card-large .video-thumbnail { min-height: 0; height: auto; } .video-card-horizontal .video-thumbnail { height: auto; min-height: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 17px 17px 0 0; } .gtv-footer { width: 100% !important; margin: 18px 0 0 !important; padding: 28px clamp(14px, 4vw, 24px) 20px !important; box-sizing: border-box !important; } .footer-inner { width: 100% !important; max-width: 100% !important; } .footer-content { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 22px 16px !important; margin-bottom: 22px !important; text-align: left !important; } .footer-brand { grid-column: 1 / -1; max-width: 620px; } .footer-brand { grid-column: 1 / -1 !important; max-width: 100% !important; text-align: center !important; align-items: center !important; } .footer-title { margin-bottom: 12px !important; font-size: 14.5px !important; padding-left: 12px !important; } .footer-copyright { font-size: 11px !important; flex: 1 1 60%; min-width: 0; } } @media (max-width: 760px) { .occasion-ticker { border-radius: 14px; } .occasion-ticker__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; min-height: 66px; padding: 9px 12px; } .occasion-ticker__live { width: 9px; height: 9px; margin-right: 0; } .occasion-ticker__viewport { min-height: 48px; padding-left: 0; } .occasion-news { grid-template-columns: 56px minmax(0, 1fr); gap: 11px; } .occasion-news__image { width: 56px; height: 42px; border-radius: 9px; /* box-shadow: 0 10px 18px rgba(54, 1, 5, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3); */ } .occasion-news__title { font-size: 13.5px; } .occasion-news__summary { margin-top: 3px; font-size: 11px; } .occasion-ticker__controls { gap: 5px; padding-left: 9px; } .occasion-ticker__button { width: 30px; height: 30px; } .occasion-ticker__count { min-width: 40px; font-size: 11px; } #reber-apo, .feature-video-section, .shorts-section, .cand-huner-section, .external-links-section { border-radius: 0; } .sections-frame { border-radius: 22px; } .section-header { align-items: center; flex-direction: row; } .video-grid.grid-3 { display: grid; grid-auto-columns: calc((100vw - 104px) / 2); grid-auto-flow: column; grid-template-columns: none; gap: 12px; margin-right: -18px; padding-right: 18px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; } .feature-video-section .video-grid.grid-3 { padding: 8px; } #reber-apo .video-grid.grid-3 { padding: 8px; } #reber-apo .video-grid.grid-3, .feature-video-section .video-grid.grid-3, .mod_bernama ul { overflow-x: auto !important; overflow-y: visible !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: calc((100vw - 64px) / 2) !important; gap: 12px !important; scroll-snap-type: inline mandatory; scrollbar-width: none; border-radius: 14px; } #reber-apo .video-grid.grid-3>*, .feature-video-section .video-grid.grid-3>* { scroll-snap-align: start; min-width: 0; } .video-grid.grid-3 .video-card { min-width: 0; padding: 4px; scroll-snap-align: start; } .video-thumbnail { aspect-ratio: 16 / 9; min-height: 0; /* overflow: visible; */ border-radius: 10px; } .video-thumbnail img { border-radius: inherit; } .video-card:hover, #reber-apo.reveal-on-scroll.is-visible .video-card:hover { transform: scale(1.004); } .video-thumbnail::after { border-radius: inherit; } .video-info { padding: 8px 6px 7px; } .video-title { font-size: 11.5px; } .video-meta { gap: 6px; font-size: 9.5px; } .sections-frame { padding: .1em; } .popular-header { align-items: flex-start; flex-direction: column; } .popular-tabs { width: 100%; min-width: 0; margin-left: 0; } .popular-tab { min-height: 38px; padding: 0 12px; font-size: 12.5px; } .popular-shell { padding: 10px; border-radius: 22px; } #heri-zede-temase .popular-panel[data-popular-panel].is-active { margin: 0; padding: 0; overflow: visible; } .featured-grid { display: grid; grid-auto-columns: calc((100vw - 104px) / 2); grid-auto-flow: column; grid-template-columns: none; gap: 12px; margin-right: -18px; padding: 8px 18px 8px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; } #hpg .featured-grid { overflow: visible; } #calaki .card-body, #hpg .featured-grid-wrapper { overflow: auto; scrollbar-width: none; border-radius: 22px; } #heri-zede-temase .featured-grid { grid-template-columns: none; } #heri-zede-temase .featured-grid, #heri-zede-temase .popular-panel[data-popular-panel="alltime"] .featured-grid { display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: calc((100vw - 64px) / 2) !important; gap: 12px !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: inline mandatory; scrollbar-width: none; padding: 0 !important; margin: 0 !important; padding-top: 14px !important; } .side-videos { display: contents; } #heri-zede-temase .side-videos, #heri-zede-temase .popular-panel[data-popular-panel="alltime"] .side-videos { display: contents !important; } .popular-panel[data-popular-panel].is-active { grid-auto-columns: calc((100vw - 104px) / 2); grid-auto-flow: column; grid-template-columns: none; gap: 12px; margin-right: -18px; padding: 4px 18px 8px 4px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; } .featured-grid .video-card, .featured-grid .side-videos>.video-card { scroll-snap-align: start; } #hpg .featured-grid { grid-template-columns: none; } #heri-zede-temase .video-card, #heri-zede-temase .video-card-large, #heri-zede-temase .video-card-horizontal { scroll-snap-align: start; min-width: 0; display: flex !important; flex-direction: column !important; padding: 0 !important; } .shorts-section { border-radius: 22px; } .shorts-filter { min-width: auto; padding: 9px 13px; font-size: 13px; } .shorts-rail { grid-auto-columns: calc((100vw - 92px) / 2); margin-right: -18px; padding-right: 18px; } .video-info { padding: 8px 6px 7px; } .video-title, .video-title a { font-size: 11.5px; } .video-meta { gap: 6px; font-size: 9.5px; } .gtv-footer { width: 100% !important; margin: 18px 0 0 !important; padding: 26px 18px 20px !important; box-sizing: border-box; } .footer-inner { width: 100% !important; } .footer-content { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; margin-bottom: 22px !important; padding: 0 6px; /* text-align: right !important; */ } .footer-brand { grid-column: 1 / -1 !important; max-width: 100% !important; text-align: center !important; align-items: center; padding: 0 8px; } .footer-title { margin-bottom: 10px !important; font-size: 14px !important; } .footer-copyright { font-size: 11px !important; flex: 1 1 auto; min-width: 0; } .featured-grid::before, #calaki .card-body ul::before { right: auto; width: calc((3 * ((100vw - 62px) / 2)) + 50px); } .popular-shell .featured-grid::before { right: auto; width: calc((5 * ((100vw - 53px) / 2)) + 50px); display: none !important; } #hpg .featured-grid::before { width: calc((3 * ((100vw - 104px) / 2)) + 50px); } .external-links-icons { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 8px !important; padding: 0 4px; } .external-icon-link { width: auto !important; flex: 1 1 0 !important; min-width: 0; gap: 8px !important; } .external-icon-label { font-size: clamp(11px, 3.2vw, 14px) !important; text-align: center; } .external-icon-description { font-size: clamp(10px, 2.8vw, 12px) !important; max-width: 100% !important; text-align: center; } #upNextList { grid-template-columns: 1fr; display: grid; } .js-finder-searchform { padding: 1em; border-radius: 18px; } .js-finder-searchform .input-group { flex-direction: column; } .js-finder-searchform input[type="text"], .js-finder-searchform .btn, .js-finder-searchform select.form-select, .js-finder-searchform .awesomplete, .js-finder-searchform .awesomplete input { width: 100%; } .js-finder-searchform .awesomplete input { max-width: 100%; } #search-result-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ff-btn svg { width: 16px; height: 16px; } } @media (max-width: 620px) { #reber-apo, .gerila-section, .cand-huner-section, .shorts-section, .calaki-section, .popular-section, .feature-video-section, .content-section { padding-top: clamp(26px, 7vw, 38px) !important; padding-bottom: clamp(26px, 7vw, 38px) !important; } .footer-brand { max-width: 100%; } .footer-section { min-width: 0; } .search-drop__form { padding: 7px 7px 7px 13px; gap: 8px; } .itemid-128 main { padding-top: 6px; } .pw-logo { width: clamp(140px, 46vw, 200px); } .pw-label { margin-top: 26px; font-size: 0.78rem; letter-spacing: 0.2em; } .pw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pw-card { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 10px; border-radius: 14px; } .pw-card__icon { width: 52px; height: 52px; border-radius: 13px; } .pw-card__text b { font-size: 0.92rem; } .pw-card__go { display: none; } .pw-notice { padding: 15px 16px; font-size: 0.89rem; gap: 11px; } .pw-slogan { letter-spacing: 0.06em; font-size: 0.82rem; gap: 10px; } .pw-slogan::before, .pw-slogan::after { max-width: 48px; } .about-lead { padding-left: 14px; } .about-slogan { letter-spacing: 0.08em; } } @media (max-width: 540px) { .occasion-ticker__controls { gap: 0; } .occasion-ticker__count, .occasion-ticker__button[data-occasion-prev] { display: none; } .occasion-ticker__button { width: 30px; height: 30px; } } @media (max-width: 1024px) { #heri-zede-temase .popular-panel.is-active .featured-grid { background: linear-gradient(315deg, rgba(255, 255, 255, 0.05), transparent 40%), linear-gradient(180deg, #2b2b31, #212126) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 22px !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; /* padding: 14px !important; */ gap: 12px !important; display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: calc((100vw - 64px) / 2) !important; /* overflow: visible !important; width: max-content !important; */ min-width: calc(100% - 4px) !important; } [data-theme="light"] #heri-zede-temase .popular-panel.is-active .featured-grid { background: linear-gradient(315deg, rgba(72, 84, 98, 0.08), transparent 40%), linear-gradient(180deg, #ffffff, #eef1f5) !important; border: 1px solid rgba(72, 84, 98, 0.14) !important; box-shadow: 0 14px 32px rgba(33, 43, 54, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; } .featured-grid::before { .featured-grid::before { content: none; display: none; } } } #detach-button-host { visibility: hidden; display: none; } html:has(body.shr), body.shr { margin: 0; height: 100dvh; overflow: hidden; } body.shr { color: var(--text_shr); background: linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 74px), radial-gradient(circle at 18% 8%, rgba(255, 200, 61, 0.08), transparent 30%), linear-gradient(180deg, #16171d, var(--bg_shr)); font-family: Outfit, Inter, "Segoe UI", Arial, sans-serif; letter-spacing: 0; } body.shr a { color: inherit; } body.shr .topbar { position: fixed; top: 0; right: 0; left: 0; z-index: 30; padding: 14px clamp(14px, 4vw, 54px) 10px; background: transparent; pointer-events: none; } body.shr .topbar .top-actions, body.shr .topbar .filters { pointer-events: auto; } [data-theme="light"] body.shr .topbar { background: transparent; } body.shr .topbar-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1480px, 100%); margin: 0 auto; } body.shr .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; } body.shr .brand img { width: 54px; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34)); } body.shr .top-actions { display: flex; align-items: center; gap: 10px; } body.shr .icon-button, body.shr .back-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; color: var(--text_shr); text-decoration: none; cursor: pointer; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line_shr); border-radius: 999px; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } body.shr .back-link { gap: 8px; padding: 0 14px; font-size: 14px; font-weight: 850; color: #ffffff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.26); } /* Icon-only back button (no "Vegere" label) */ body.shr .back-link--icon { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; } body.shr .icon-button { width: 40px; padding: 0; } body.shr .icon-button:hover, body.shr .back-link:hover { border-color: rgba(255, 200, 61, 0.52); background: rgba(255, 200, 61, 0.12); transform: translateY(-2px); } body.shr .filters { display: none; gap: 9px; width: min(1480px, 100%); padding: 0 0 4px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; } body.shr .filters::-webkit-scrollbar { display: none; } body.shr .filter-chip { flex: 0 0 auto; min-width: 104px; padding: 9px 15px; color: var(--text_shr); text-align: center; text-decoration: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)), rgba(28, 29, 34, 0.82); border: 1px solid var(--line_shr); border-radius: 12px; font-size: 13px; font-weight: 850; white-space: nowrap; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease; } [data-theme="light"] body.shr .filter-chip { background: rgba(255, 255, 255, 0.76); } body.shr .filter-chip:hover, body.shr .filter-chip.is-active { color: #ffffff; background: linear-gradient(180deg, var(--red_shr), #c4111d); border-color: rgba(239, 58, 70, 0.72); box-shadow: 0 14px 30px rgba(239, 58, 70, 0.2); transform: translateY(-1px); } @media (min-width: 1024px) { body.shr .topbar { padding-bottom: 14px; } body.shr .topbar-main { margin-bottom: 0; } body.shr .filters { position: fixed; top: 50%; bottom: auto; left: max(clamp(18px, 3vw, 54px), calc(50vw - 535px)); z-index: 32; flex-direction: column; width: 150px; max-height: min(420px, calc(100svh - 150px)); padding: 10px; margin: 0; overflow: auto; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)), rgba(23, 24, 29, 0.72); border: 1px solid var(--line_shr); border-radius: 22px 12px 22px 12px; box-shadow: var(--yellow_shr); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); scrollbar-width: none; transform: translateY(-50%); } body.shr .filters::-webkit-scrollbar { display: none; } [data-theme="light"] body.shr .filters { background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58)), rgba(248, 250, 252, 0.76); } body.shr .filter-chip { width: 100%; min-width: 0; padding: 12px 12px; text-align: left; border-radius: 16px 9px 16px 9px; transform-origin: left center; } body.shr .filter-chip:hover { transform: translateX(5px) scale(1.03); } body.shr .filter-chip.is-active { border-radius: 22px 8px 22px 8px; box-shadow: 0 16px 34px rgba(239, 58, 70, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; transform: translateX(12px) scale(1.09); } body.shr .reel-screen { padding-top: 0; padding-bottom: 0; } } body.shr .reels-feed { min-height: 100lvh; /* overflow-y: auto; */ scrollbar-width: none; } body.shr .reels-feed::-webkit-scrollbar { display: none; } body.shr .reel-screen { position: relative; min-height: 100lvh; padding: 0 clamp(14px, 4vw, 54px); overflow: hidden; /* scroll-snap-type: y mandatory; scroll-snap-align: center; scroll-snap-stop: normal; */ display: grid; place-items: center; } @media(max-width: 720px) { body.shr .reel-screen { /* scroll-snap-align: start; scroll-snap-stop: always; */ } } body.shr .reel-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000000; } body.shr .reel-ambient img { display: none; } [data-theme="light"] body.shr .reel-ambient { background: #000000; } body.shr .reel-screen::after { position: absolute; inset: 0; z-index: 1; content: ""; background: radial-gradient(circle at 50% 48%, transparent 0 26%, rgba(0, 0, 0, 0.22) 58%, rgba(0, 0, 0, 0.58) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 24%, transparent 72%, rgba(0, 0, 0, 0.52)); pointer-events: none; } body.shr .reel-layout { display: grid; position: relative; z-index: 2; grid-template-columns: minmax(250px, min(46svh, 420px)) auto; align-items: end; justify-content: center; gap: clamp(14px, 2vw, 24px); width: min(720px, 100%); } body.shr .reel-phone { position: relative; aspect-ratio: 9 / 16; overflow: hidden; color: #ffffff; cursor: pointer; background: #101115; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 28px; box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12); isolation: isolate; } body.shr .reel-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); } body.shr .reel-screen.is-current .reel-phone img { transform: scale(1.035); } body.shr .reel-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); background: gray !important; } body.shr .reel-phone.is-playing img { filter: saturate(1.04) brightness(0.94); transform: scale(1.055); } body.shr .reel-phone::after { position: absolute; inset: auto 0 0; z-index: 1; height: 52%; content: ""; background: linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent); pointer-events: none; } /* The top-left duration badge is replaced by the combined timecode at bottom-left */ body.shr .duration { display: none; } body.shr .play { position: absolute; top: 50%; left: 50%; z-index: 4; display: grid; width: 64px; height: 64px; padding: 0; color: #ffffff; cursor: pointer; place-items: center; background: linear-gradient(180deg, var(--red_shr), #c4111d); border: 2px solid rgba(255, 255, 255, 0.76); border-radius: 999px; box-shadow: 0 16px 36px rgba(239, 58, 70, 0.28), 0 0 0 8px rgba(239, 58, 70, 0.11); transform: translate(-50%, -50%); transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease; } body.shr .reel-phone.is-playing .play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.88); } body.shr .reel-phone:hover .play, body.shr .reel-phone.is-paused .play { opacity: 1; pointer-events: auto; } body.shr .play:hover { box-shadow: 0 18px 44px rgba(239, 58, 70, 0.36), 0 0 0 10px rgba(239, 58, 70, 0.14); } body.shr .play svg { width: 26px; height: 26px; fill: currentColor; } body.shr .play svg[data-icon="play"] { margin-left: 4px; } body.shr .reel-tools { position: absolute; top: 14px; right: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; } body.shr .mute-button { display: inline-grid; min-height: 30px; color: #ffffff; place-items: center; background: rgba(0, 0, 0, 0.58); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Combined time-code pill inside the video — bottom-right (above progress bar), format "00:00 / 02:50" */ body.shr .reel-timecode { position: absolute; bottom: 14px; right: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; color: #ffffff; background: rgba(0, 0, 0, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: 'Outfit', monospace; font-size: 12px; font-weight: 850; letter-spacing: 0.5px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34); white-space: nowrap; } body.shr .reel-timecode__total { opacity: 0.78; } body.shr .mute-button { width: 38px; min-height: 38px; padding: 0; cursor: pointer; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } body.shr .mute-button:hover, body.shr .mute-button.is-active { background: linear-gradient(180deg, var(--red_shr), #c4111d); border-color: rgba(255, 255, 255, 0.32); transform: scale(1.08); box-shadow: 0 8px 18px rgba(239, 58, 70, 0.38); } body.shr .mute-button.is-muted { background: rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.2); } /* Quick pulse feedback when the user toggles mute */ @keyframes mutePulse { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } body.shr .mute-button.is-pulsing { animation: mutePulse 280ms ease-out; } body.shr .reel-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 6; height: 4px; overflow: hidden; cursor: pointer; background: rgba(255, 255, 255, 0.22); border-radius: 0; } body.shr .reel-progress__bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--red_shr), var(--yellow_shr)); border-radius: inherit; box-shadow: 0 0 16px rgba(239, 58, 70, 0.52); } body.shr .phone-copy { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; padding: 0 15px 18px; } body.shr .phone-title { margin: 0 0 8px; font-size: clamp(15px, 1.25vw, 18px); font-weight: 900; line-height: 1.24; } body.shr .category { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.78); font-size: 13px; font-weight: 850; } body.shr .category::before { width: 8px; height: 8px; content: ""; background: var(--red_shr); border-radius: 999px; box-shadow: 0 0 12px rgba(239, 58, 70, 0.58); } body.shr .reel-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 8px; } body.shr .action { display: grid; width: 52px; height: 52px; padding: 0; color: #ffffff; cursor: pointer; place-items: center; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32); transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } body.shr .action:hover, body.shr .action.is-done { background: linear-gradient(180deg, var(--red_shr), #c4111d); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 14px 28px rgba(239, 58, 70, 0.4); transform: translateY(-3px) scale(1.06); } body.shr .action svg { width: 22px; height: 22px; } body.shr .empty { min-height: 100svh; display: grid; place-items: center; padding: 140px 20px 40px; color: var(--muted_shr); font-size: 18px; font-weight: 850; text-align: center; } @media (max-width: 900px) { body.shr .reel-layout { grid-template-columns: minmax(230px, min(68vw, 44svh, 410px)) auto; width: min(560px, 100%); } } @media (max-width: 620px) { body { /* padding: calc(var(--header-height) + 10px) 10px 10px; */ } body.shr .topbar { padding: 10px 12px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent); backdrop-filter: none; -webkit-backdrop-filter: none; } body.shr .brand img { width: 44px; } body.shr .back-link { min-height: 38px; padding: 0 12px; font-size: 13px; } body.shr .icon-button { width: 38px; min-height: 38px; } body.shr .filter-chip { min-width: auto; padding: 8px 12px; font-size: 12px; } body.shr .filters { display: none; } body.shr .reel-screen { padding: 0; } body.shr .reel-layout { width: 100%; height: 100svh; grid-template-columns: 1fr; gap: 0; } body.shr .reel-phone { width: 100%; height: 100svh; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; } body.shr .play { width: 56px; height: 56px; } body.shr .phone-copy { padding: 0 76px 28px 16px; } body.shr .reel-tools { top: 12px; right: 12px; } body.shr .reel-progress { right: 0; bottom: 0; left: 0; } body.shr .phone-title { font-size: 15px; } body.shr .reel-actions { position: absolute; right: 13px; bottom: 96px; z-index: 6; gap: 11px; margin-bottom: 0; align-items: center; } body.shr .action { width: 44px; height: 44px; } body.shr .reel-actions .reel-time { font-size: 11px; padding: 5px 10px; min-width: 48px; } .search-drop__go { padding: 9px 12px; font-size: 0.76rem; } } .shorts-poster { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #111216; } .bername_main_page #watch_layout, .bername_main_page #featuredPlayer { display: none; } [class^="icon-"], [class*=" icon-"] { font-family: "Font Awesome 6 Free" !important; }