/* ============================================================ CASTEC-JUSTCLICK-EVENT-GAROT-V2 NORMAL JUSTCLICK EVENT TAB SMALLER BORDERLESS NETFLIX-STYLE VIDEO PLAYER ============================================================ */ :root { --jc-event-bg: #080b10; --jc-event-text: #ffffff; --jc-event-muted: #9ba6b1; --jc-event-red: #e50914; --jc-event-green: #16875a; --jc-event-gold: #d4a252; } /* ============================================================ EVENT TAB ============================================================ */ .castec-event-nav { position: relative; } .castec-event-nav.active::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: -5px; height: 2px; background: #e50914; } /* IMPORTANT: Event is now normal page content. NO fixed overlay. NO inset:0. Therefore the normal JustClick header/ad can remain above it. */ #castecEventPage { width: 100%; color: #fff; background: transparent; padding: 0 0 60px; } .castec-event-hero { position: relative; min-height: 310px; display: flex; align-items: flex-end; margin: 0 0 22px; padding: 38px 42px 40px; overflow: hidden; background: linear-gradient( 90deg, rgba(0,0,0,.92) 0%, rgba(12,12,16,.78) 42%, rgba(80,17,22,.48) 100% ), radial-gradient( circle at 78% 35%, #852229 0, #35161c 34%, #080b10 74% ); } .castec-event-kicker { color: var(--jc-event-gold); text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .15em; margin-bottom: 10px; } .castec-event-title { margin: 0; font-size: clamp(38px, 5vw, 72px); line-height: .95; font-weight: 900; letter-spacing: -.035em; } .castec-event-description { margin-top: 15px; max-width: 650px; color: #e9edf0; font-size: 16px; line-height: 1.5; } .castec-event-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .castec-event-btn { border: 0; border-radius: 4px; padding: 11px 18px; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none; } .castec-event-btn.primary { background: #fff; color: #050505; } .castec-event-btn.dark { background: rgba(100,108,116,.55); color: #fff; } .castec-event-btn.green { background: var(--jc-event-green); color: #fff; } .castec-event-body { padding: 0 40px 40px; } .castec-event-brandbar { display: flex; justify-content: space-between; gap: 20px; padding: 16px 20px; margin-bottom: 25px; border-radius: 6px; background: linear-gradient( 100deg, #6d171d, #31171b 55%, #11171d ); } .castec-event-brandbar strong { font-size: 17px; } .castec-event-brandbar span { color: #cdd4da; font-size: 12px; } .castec-event-row { margin-bottom: 31px; } .castec-event-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; } .castec-event-row-title { margin: 0; color: #fff; font-size: 21px; font-weight: 850; } .castec-event-row-note { color: #7f8a95; font-size: 11px; } .castec-event-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(215px, 20vw); gap: 11px; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 12px; scrollbar-width: none; } .castec-event-strip::-webkit-scrollbar { display: none; } .castec-event-card { position: relative; border: 0; border-radius: 5px; overflow: hidden; cursor: pointer; min-height: 135px; aspect-ratio: 16 / 9; background: #171c22; color: #fff; transition: transform .15s ease, box-shadow .15s ease; } .castec-event-card:hover { transform: scale(1.035); box-shadow: 0 16px 38px rgba(0,0,0,.5); z-index: 3; } .castec-event-card-art { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 13px; background: linear-gradient( 180deg, transparent 25%, rgba(0,0,0,.92) 100% ), radial-gradient( circle at 73% 23%, #a54335, #4a2525 35%, #10161d 72% ); } .castec-event-card[data-tone="gold"] .castec-event-card-art { background: linear-gradient( 180deg, transparent 25%, rgba(0,0,0,.92) 100% ), radial-gradient( circle at 73% 23%, #d1a14e, #6a4c29 35%, #10161d 72% ); } .castec-event-card[data-tone="blue"] .castec-event-card-art { background: linear-gradient( 180deg, transparent 25%, rgba(0,0,0,.92) 100% ), radial-gradient( circle at 73% 23%, #3578a5, #213a50 35%, #10161d 72% ); } .castec-event-card[data-tone="green"] .castec-event-card-art { background: linear-gradient( 180deg, transparent 25%, rgba(0,0,0,.92) 100% ), radial-gradient( circle at 73% 23%, #398d67, #234839 35%, #10161d 72% ); } .castec-event-card-title { display: block; font-size: 14px; font-weight: 850; line-height: 1.15; } .castec-event-card-meta { display: block; margin-top: 4px; font-size: 9px; color: #c9d0d6; } /* ============================================================ EVENT DETAIL POPUP ============================================================ */ #castecEventDetail { position: fixed; inset: 0; z-index: 15000; display: flex; align-items: center; justify-content: center; padding: 30px; background: rgba(0,0,0,.80); backdrop-filter: blur(8px); } #castecEventDetail.hidden { display: none !important; } .castec-event-detail-card { position: relative; width: min(760px, 92vw); padding: 36px; border: 0; border-radius: 7px; background: #11171d; box-shadow: 0 28px 80px rgba(0,0,0,.65); } .castec-event-detail-card h2 { margin: 0 0 10px; font-size: 31px; } .castec-event-detail-card p { color: #c7d0d8; line-height: 1.6; } .castec-event-detail-close { position: absolute; right: 13px; top: 13px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #242a31; color: #fff; font-size: 22px; cursor: pointer; } /* ============================================================ PLAYER V2 SMALLER / BORDERLESS / FLOATING RADIO EXCLUDED ============================================================ */ /* V1 made this 1180px. V2 deliberately reduces the normal video player. */ #mxpRoot:not(.floating) { /* CASTEC V9 floating player: Keep the JustClick catalogue visible and sharp behind player. */ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Normal VIDEO / LIVE panel only */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) { width: min(840px, calc(100vw - 38px)) !important; max-width: 840px !important; max-height: 90vh !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* Remove the big surrounding player bars */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpHeader, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpAudioCard { display: none !important; } /* Main media itself */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) video, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) iframe { display: block !important; width: 100% !important; max-width: 840px !important; aspect-ratio: 16 / 9; height: auto !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: #000 !important; box-shadow: 0 18px 55px rgba(0,0,0,.52) !important; } /* Remove outer boxes around media */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoWrap, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpMediaWrap, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpViewport { width: 100% !important; max-width: 840px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Keep playback controls/info but remove panel borders */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpFooter, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpMeta { border: 0 !important; background: transparent !important; box-shadow: none !important; } /* RADIO — DO NOT TOUCH */ #mxpRoot.floating #mxpPanel, #mxpPanel.radioMode { /* Existing JustClick radio styling remains authoritative. */ } @media(max-width:700px) { .castec-event-hero { padding: 28px 20px 30px; min-height: 280px; } .castec-event-body { padding-left: 18px; padding-right: 18px; } .castec-event-strip { grid-auto-columns: 72vw; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; } } /* CASTEC-COMPACT-VIDEO-PLAYER-V2-1-START */ /* Working JustClick player remains unchanged internally. This patch ONLY reduces its visual footprint. */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) { width: min(620px, calc(100vw - 32px)) !important; max-width: 620px !important; max-height: 84vh !important; border: 0 !important; border-radius: 6px !important; background: rgba(18,18,18,.96) !important; box-shadow: 0 12px 38px rgba(0,0,0,.40) !important; } /* Header smaller */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpHead { padding: 7px 10px !important; min-height: 38px !important; } /* Title smaller */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpTitle { font-size: 13px !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpMeta { font-size: 10px !important; margin-top: 1px !important; } /* Body compact */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpBody { padding: 8px !important; } /* Remove the large duplicate video information card. The top header already contains title/meta. */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoMeta { display: none !important; } /* Actual picture */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoBox { width: 100% !important; max-width: 604px !important; margin: 0 auto !important; border: 0 !important; border-radius: 4px !important; overflow: hidden !important; background: #000 !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoBox video, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoBox iframe { display: block !important; width: 100% !important; max-width: 604px !important; aspect-ratio: 16 / 9 !important; height: auto !important; border: 0 !important; background: #000 !important; } /* Status strip smaller */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpStatus { margin-top: 5px !important; padding: 5px 7px !important; font-size: 10px !important; } /* Prev / Next / Shuffle / Repeat compact */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpControlBar { gap: 5px !important; margin-top: 5px !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpCtlBtn { padding: 5px 8px !important; font-size: 10px !important; } /* Up-next and queue compact */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpUpNext { margin-top: 5px !important; padding: 5px 7px !important; font-size: 10px !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpQueue { margin-top: 6px !important; gap: 4px !important; } /* Tablet */ @media(max-width:900px) { #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) { width: min(560px, calc(100vw - 24px)) !important; max-width: 560px !important; } } /* Phone */ @media(max-width:650px) { #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpBody { padding: 4px !important; } } /* CASTEC-COMPACT-VIDEO-PLAYER-V2-1-END */ /* CASTEC-NETFLIX-PICTURE-FIRST-V2-6-START */ /* ============================================================ CASTEC JUSTCLICK NETFLIX-STYLE PICTURE-FIRST VIDEO PLAYER IDLE: picture only HOVER: title minimize fullscreen close prev next shuffle repeat RADIO EXCLUDED ============================================================ */ /* ------------------------------------------------------------ ENTIRE PLAYER PANEL REMOVE WINDOW APPEARANCE ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) { width: min(620px, calc(100vw - 24px)) !important; max-width: 620px !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: 0 12px 36px rgba(0,0,0,.32) !important; } /* ------------------------------------------------------------ BODY NO BLACK BORDER / NO PADDING ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpBody { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; } /* ------------------------------------------------------------ VIDEO IS THE PLAYER SURFACE ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoBox { position: relative !important; width: 100% !important; max-width: 620px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; overflow: hidden !important; background: #000 !important; box-shadow: none !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoBox video, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoBox iframe { display: block !important; width: 100% !important; max-width: 620px !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: #000 !important; box-shadow: none !important; } /* ------------------------------------------------------------ REMOVE DUPLICATE INFO / STATUS / QUEUE ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpVideoMeta, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpStatus, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpUpNext, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpQueue { display: none !important; } /* ------------------------------------------------------------ TOP NETFLIX OVERLAY ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpHead { position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important; z-index: 60 !important; display: flex !important; align-items: flex-start !important; padding: 12px 13px 54px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient( 180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.52) 40%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100% ) !important; box-shadow: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .20s ease, visibility .20s ease !important; cursor: grab !important; } /* ------------------------------------------------------------ HOVER REVEALS TOP OVERLAY ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode):hover #mxpHead, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode):focus-within #mxpHead { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ------------------------------------------------------------ TITLE ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpTitleWrap { min-width: 0 !important; flex: 1 !important; padding: 2px 8px 0 0 !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpTitle { color: #fff !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.2 !important; text-shadow: 0 2px 8px rgba(0,0,0,.95) !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpMeta { margin-top: 3px !important; color: rgba(255,255,255,.78) !important; font-size: 10px !important; text-shadow: 0 2px 8px rgba(0,0,0,.95) !important; } /* ------------------------------------------------------------ TOP RIGHT BUTTON GROUP ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpHeadBtns { display: flex !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpHeadBtn { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 50% !important; background: rgba(12,14,17,.62) !important; color: #fff !important; font-size: 13px !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; box-shadow: none !important; cursor: pointer !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpHeadBtn:hover { background: rgba(38,41,46,.92) !important; border-color: rgba(255,255,255,.45) !important; } /* ------------------------------------------------------------ LOWER CONTROL BAR OVERLAY ON PICTURE ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpControlBar { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 55 !important; display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 48px 12px 12px !important; border: 0 !important; background: linear-gradient( 0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.50) 40%, rgba(0,0,0,.16) 72%, rgba(0,0,0,0) 100% ) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .20s ease, visibility .20s ease !important; } /* ------------------------------------------------------------ HOVER REVEALS LOWER CONTROLS ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode):hover .mxpControlBar, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode):focus-within .mxpControlBar { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ------------------------------------------------------------ LOWER BUTTONS ------------------------------------------------------------ */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpCtlBtn { min-height: 31px !important; padding: 5px 9px !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 5px !important; background: rgba(12,14,17,.64) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; box-shadow: none !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpCtlBtn:hover { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.38) !important; } /* ------------------------------------------------------------ DRAGGED PLAYER KEEP ITS POSITION ------------------------------------------------------------ */ #mxpPanel.jcDirectMoved:not(.radioMode) { position: fixed !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; } /* ------------------------------------------------------------ RADIO — ABSOLUTELY UNCHANGED ------------------------------------------------------------ */ #mxpRoot.floating #mxpPanel, #mxpPanel.radioMode { /* No V2.6 styling applied. Existing radio styling owns radio. */ } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media(max-width:650px) { #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) #mxpHead { padding: 9px 9px 44px !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode) .mxpControlBar { padding: 38px 8px 8px !important; gap: 4px !important; } } /* CASTEC-NETFLIX-PICTURE-FIRST-V2-6-END */ /* CASTEC-GAROT-OFFICIAL-BRAND-V3-2-START */ /* ============================================================ GAROT TRADING & INSTALLATION OFFICIAL JUSTCLICK EVENT IDENTITY Primary: MAROON #691516 LICORICE #1B1414 Supporting: DUSTY BLUSH #D8B4A0 PEWTER GREY #7D7D7D GOLD #FFD365 CHAMPAGNE PEARL #FBE8D3 EVENT ONLY. ============================================================ */ #castecEventPage { --garot-maroon: #691516; --garot-licorice: #1B1414; --garot-blush: #D8B4A0; --garot-grey: #7D7D7D; --garot-gold: #FFD365; --garot-pearl: #FBE8D3; font-family: Avenir, "Avenir Next", "Segoe UI", Arial, sans-serif; color: #fff; background: linear-gradient( 180deg, #080809 0%, #0c0a0b 44%, #151011 100% ); padding-bottom: 72px; } /* ============================================================ PREMIUM HERO ============================================================ */ #castecEventPage .castec-event-hero { position: relative; min-height: 410px; padding: 38px clamp(28px,5vw,70px) 48px; overflow: hidden; border-radius: 18px; border: 1px solid rgba(251,232,211,.17); background: linear-gradient( 100deg, rgba(27,20,20,.99) 0%, rgba(27,20,20,.96) 38%, rgba(105,21,22,.91) 72%, rgba(105,21,22,.76) 100% ); box-shadow: 0 28px 72px rgba(0,0,0,.40); } #castecEventPage .castec-event-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 85% 16%, rgba(255,211,101,.19), transparent 23% ), linear-gradient( 128deg, transparent 55%, rgba(251,232,211,.075) 55.5%, transparent 56.4% ), linear-gradient( 146deg, transparent 67%, rgba(216,180,160,.085) 67.5%, transparent 68.4% ); } #castecEventPage .castec-event-hero > * { position: relative; z-index: 2; } /* ============================================================ APPROVED LOGO ============================================================ */ #castecEventPage .castec-garot-brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-bottom: 25px; padding: 18px 22px; background: rgba(251,232,211,.98); border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,.28); } #castecEventPage .castec-garot-logo { display: block; width: clamp(190px,21vw,300px); height: auto; max-width: 100%; object-fit: contain; object-position: left center; border: 0; border-radius: 0; box-shadow: none; filter: none; transform: none; } #castecEventPage .castec-garot-tagline { color: var(--garot-maroon); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } /* ============================================================ HERO TYPOGRAPHY ============================================================ */ #castecEventPage .castec-event-kicker { color: var(--garot-gold); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } #castecEventPage .castec-event-title { color: #fff; font-size: clamp(36px,5vw,64px); line-height: 1; letter-spacing: -.035em; max-width: 820px; } #castecEventPage .castec-event-description { color: var(--garot-pearl); max-width: 720px; font-size: clamp(15px,1.45vw,19px); line-height: 1.55; } /* ============================================================ ACTIONS ============================================================ */ #castecEventPage .castec-event-btn { border: 1px solid rgba(251,232,211,.27); border-radius: 999px; background: var(--garot-licorice); color: #fff; font-weight: 800; transition: transform .16s ease, background .16s ease, border-color .16s ease; } #castecEventPage .castec-event-btn:hover { transform: translateY(-1px); background: var(--garot-maroon); border-color: var(--garot-gold); } #castecEventPage .castec-event-btn-primary { background: var(--garot-maroon); border-color: rgba(255,211,101,.70); } /* ============================================================ EVENT ROWS ============================================================ */ #castecEventPage .castec-event-row { margin-bottom: 34px; } #castecEventPage .castec-event-row-title { color: #fff; font-weight: 800; letter-spacing: -.02em; } #castecEventPage .castec-event-row-note { color: var(--garot-blush); font-weight: 700; } /* ============================================================ EVENT CARDS ============================================================ */ #castecEventPage .castec-event-card { border: 1px solid rgba(251,232,211,.12); border-radius: 12px; background: var(--garot-licorice); box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } #castecEventPage .castec-event-card:hover { transform: translateY(-3px) scale(1.018); border-color: rgba(255,211,101,.55); box-shadow: 0 20px 48px rgba(0,0,0,.40); z-index: 3; } #castecEventPage .castec-event-card-art { background: linear-gradient( 180deg, transparent 18%, rgba(27,20,20,.95) 100% ), radial-gradient( circle at 75% 21%, #8d3031, #691516 34%, #1B1414 76% ); } #castecEventPage .castec-event-card[data-tone="gold"] .castec-event-card-art { background: linear-gradient( 180deg, transparent 18%, rgba(27,20,20,.95) 100% ), radial-gradient( circle at 75% 21%, #FFD365, #8c622a 34%, #1B1414 76% ); } #castecEventPage .castec-event-card[data-tone="blue"] .castec-event-card-art { background: linear-gradient( 180deg, transparent 18%, rgba(27,20,20,.95) 100% ), radial-gradient( circle at 75% 21%, #D8B4A0, #75534c 34%, #1B1414 76% ); } #castecEventPage .castec-event-card[data-tone="green"] .castec-event-card-art { background: linear-gradient( 180deg, transparent 18%, rgba(27,20,20,.95) 100% ), radial-gradient( circle at 75% 21%, #FBE8D3, #7D7D7D 35%, #1B1414 76% ); } #castecEventPage .castec-event-card-meta { color: var(--garot-gold); } /* ============================================================ DETAIL WINDOW ============================================================ */ #castecEventDetail .castec-event-detail-card { background: linear-gradient( 145deg, #1B1414, #100d0e ); border: 1px solid rgba(251,232,211,.18); box-shadow: 0 32px 100px rgba(0,0,0,.62); } #castecEventDetail #castecEventDetailMeta { color: #FFD365; } /* ============================================================ MOBILE ============================================================ */ @media (max-width:700px) { #castecEventPage .castec-event-hero { min-height: 355px; padding: 26px 20px 30px; border-radius: 13px; } #castecEventPage .castec-garot-brand-lockup { padding: 13px 15px; margin-bottom: 19px; } #castecEventPage .castec-garot-logo { width: 190px; max-width: 210px; } #castecEventPage .castec-garot-tagline { font-size: 9px; } #castecEventPage .castec-event-title { font-size: clamp(32px,10vw,46px); } } /* CASTEC-GAROT-OFFICIAL-BRAND-V3-2-END */ /* CASTEC-GAROT-CLICKABLE-PLACEHOLDER-CSS-V1-1-START */ /* ============================================================ EVENT TILE = IMAGE + FOOTER UNDER IMAGE ============================================================ */ #castecEventPage .castec-event-card[data-garot-placeholder-v11="1"] { aspect-ratio: auto !important; min-height: 215px !important; display: flex !important; flex-direction: column !important; background: #1B1414 !important; } #castecEventPage .castec-event-card[data-garot-placeholder-v11="1"] .castec-event-card-art { position: relative !important; inset: auto !important; width: 100% !important; min-height: 175px !important; flex: 1 0 175px !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; } #castecEventPage .castec-event-placeholder-footer { position: relative; z-index: 5; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid rgba(251,232,211,.13); background: #1B1414; color: #FBE8D3; } #castecEventPage .castec-event-placeholder-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .03em; } #castecEventPage .castec-event-placeholder-open { flex: 0 0 auto; color: #FFD365; font-size: 10px; font-weight: 900; text-transform: uppercase; } /* ============================================================ CLICK DETAIL ============================================================ */ #castecEventDetail .castec-event-detail-image { display: block; width: 100%; max-height: 360px; object-fit: cover; object-position: center; margin: 0 0 18px; border-radius: 12px; border: 1px solid rgba(251,232,211,.14); } #castecEventDetail .castec-event-detail-copy { color: #FBE8D3; font-size: 15px; line-height: 1.6; } #castecEventDetail .castec-event-detail-placeholder-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(251,232,211,.12); color: #D8B4A0; font-size: 11px; line-height: 1.5; } @media (max-width:700px) { #castecEventPage .castec-event-card[data-garot-placeholder-v11="1"] { min-height: 190px !important; } #castecEventPage .castec-event-card[data-garot-placeholder-v11="1"] .castec-event-card-art { min-height: 150px !important; flex-basis: 150px !important; } #castecEventDetail .castec-event-detail-image { max-height: 235px; } } /* CASTEC-GAROT-CLICKABLE-PLACEHOLDER-CSS-V1-1-END */ /* CASTEC-GAROT-MOBILE-HEADLINE-FIX-V1-START */ /* ============================================================ GAROT EVENT — MOBILE HEADLINE SAFETY MOBILE ONLY ============================================================ */ @media (max-width: 700px) { #castecEventPage { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } #castecEventPage .castec-event-hero { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important; overflow: hidden !important; } #castecEventPage .castec-event-title { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; word-break: normal !important; hyphens: auto !important; font-size: clamp(28px, 8.4vw, 40px) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; margin-left: 0 !important; margin-right: 0 !important; } #castecEventPage .castec-event-description { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 14px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; } #castecEventPage .castec-garot-brand-lockup { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #castecEventPage .castec-garot-logo { width: min(190px, 72vw) !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; } #castecEventPage .castec-event-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; max-width: 100% !important; } } /* Extra-small phones */ @media (max-width: 420px) { #castecEventPage .castec-event-title { font-size: clamp(26px, 8.8vw, 34px) !important; line-height: 1.08 !important; } #castecEventPage .castec-event-hero { padding-left: 13px !important; padding-right: 13px !important; } } /* CASTEC-GAROT-MOBILE-HEADLINE-FIX-V1-END */ /* CASTEC-V9-SQUEEZE-PRESENTATION-FIX-V1 NORMAL FLOATING PLAYER SQUEEZE ONLY. Program contracts from RIGHT and BOTTOM. Advertising canvas remains underneath inside mxpBody. */ #mxpRoot:not(.floating) #mxpPanel:not(.radioMode).jcSmoothSqueeze .mxpVideoBox { position:absolute !important; left:0 !important; top:0 !important; /* CASTEC-SQUEEZE-DV7-1620X800-V1 */ width:84.375% !important; height:74.074074% !important; max-width:84.375% !important; max-height:74.074074% !important; margin:0 !important; padding:0 !important; z-index:10 !important; overflow:hidden !important; border-radius:0 !important; } #mxpRoot:not(.floating) #mxpPanel:not(.radioMode).jcSmoothSqueeze .mxpVideoBox video, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode).jcSmoothSqueeze .mxpVideoBox iframe, #mxpRoot:not(.floating) #mxpPanel:not(.radioMode).jcSmoothSqueeze .mxpVideoBox img { display:block !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; aspect-ratio:auto !important; margin:0 !important; padding:0 !important; /* CASTEC-GAROT-SQUEEZE-PROGRAM-CONTAIN-V1 */ /* CASTEC-SQUEEZE-FINAL-HANDOFF-FILL-V1 */ object-fit:fill !important; } /* CASTEC-V9-SQUEEZE-VIEWER-CONTROL-CSS-V1 Squeeze lifecycle is operator-controlled. Viewer cannot dismiss the squeeze creative. */ #jcSmoothSqueezeClose { display:none !important; visibility:hidden !important; pointer-events:none !important; } /* CASTEC-V9-GAROT-FULLSCREEN-620PX-RELEASE-V1 The compact 620px presentation belongs to windowed mode only. V9 fullscreen owns viewport geometry. Squeeze-specific geometry remains owned by squeeze-ads.js. */ #mxpRoot:fullscreen #mxpPanel:not(.radioMode), #mxpRoot:-webkit-full-screen #mxpPanel:not(.radioMode), #mxpRoot.jcFullscreen #mxpPanel:not(.radioMode) { width:100% !important; max-width:none !important; height:100% !important; max-height:none !important; } #mxpRoot:fullscreen #mxpPanel:not(.radioMode) #mxpBody, #mxpRoot:-webkit-full-screen #mxpPanel:not(.radioMode) #mxpBody, #mxpRoot.jcFullscreen #mxpPanel:not(.radioMode) #mxpBody { width:100% !important; max-width:none !important; height:100% !important; max-height:none !important; } #mxpRoot:fullscreen #mxpPanel:not(.radioMode) .mxpVideoBox, #mxpRoot:-webkit-full-screen #mxpPanel:not(.radioMode) .mxpVideoBox, #mxpRoot.jcFullscreen #mxpPanel:not(.radioMode) .mxpVideoBox { width:100% !important; max-width:none !important; height:100% !important; max-height:none !important; aspect-ratio:auto !important; } #mxpRoot:fullscreen #mxpPanel:not(.radioMode) .mxpVideoBox video, #mxpRoot:fullscreen #mxpPanel:not(.radioMode) .mxpVideoBox iframe, #mxpRoot:fullscreen #mxpPanel:not(.radioMode) .mxpVideoBox img, #mxpRoot:-webkit-full-screen #mxpPanel:not(.radioMode) .mxpVideoBox video, #mxpRoot:-webkit-full-screen #mxpPanel:not(.radioMode) .mxpVideoBox iframe, #mxpRoot:-webkit-full-screen #mxpPanel:not(.radioMode) .mxpVideoBox img, #mxpRoot.jcFullscreen #mxpPanel:not(.radioMode) .mxpVideoBox video, #mxpRoot.jcFullscreen #mxpPanel:not(.radioMode) .mxpVideoBox iframe, #mxpRoot.jcFullscreen #mxpPanel:not(.radioMode) .mxpVideoBox img { width:100% !important; max-width:none !important; height:100% !important; max-height:none !important; aspect-ratio:auto !important; /* CASTEC-SQUEEZE-FINAL-HANDOFF-FILL-V1 */ object-fit:fill !important; }