/* AMICO Tabbed Archive Widget Styles */
/* Event Card Wrapper */
.amico-tabbed-archive-widget .event-card-wrapper {
padding: 0; /* Spacing controlled by Elementor grid gap control */
display: block;
width: 100%;
height: 100%; /* Allow equal heights from grid */
}
/* Tablet and Mobile: Remove padding for full width utilization */
@media (max-width: 1024px) {
.amico-tabbed-archive-widget .event-card-wrapper {
padding: 0;
}
}
/* Event Card Styles */
.amico-tabbed-archive-widget .event-card {
position: relative;
width: 100%;
height: 100%;
/* Fill container height - Elementor control can override */
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: #000;
/* Neutral black fallback (only visible if no image) */
margin: 0 auto;
display: block;
/* aspect-ratio removed - let Elementor control height */
}
/* Tablet and Mobile: Height controlled by Elementor */
@media (max-width: 1024px) {
.amico-tabbed-archive-widget .event-card {
/* aspect-ratio removed - height controlled by Elementor */
}
}
/* Removed ratio box - using modern aspect-ratio property instead */
/* Cover image should fill (cover) */
.amico-video-modal .amico-cover {
object-fit: cover;
}
.amico-tabbed-archive-widget {
padding: 40px 0;
padding-top: 0;
}
/* Filter Container */
.amico-tabbed-archive-widget .filter-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
/* spacing controlled by Elementor control */
overflow: visible;
/* don't clip hover effects */
position: relative;
}
/* Filter Pills */
.amico-tabbed-archive-widget .filter-pills {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
height: 44px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 1200px;
/* Corresponds to main container width */
box-sizing: border-box;
padding: 0;
/* override site-level custom CSS padding-bottom */
}
@media (max-width: 1024px) {
.amico-tabbed-archive-widget .filter-pills {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding: 0;
box-sizing: border-box;
max-width: none;
left: 0;
top: auto;
transform: none;
position: relative;
}
/* Add internal spacing using pseudo-elements for proper horizontal scroll padding */
.amico-tabbed-archive-widget .filter-pills::before,
.amico-tabbed-archive-widget .filter-pills::after {
content: '';
flex: 0 0 20px;
height: 1px;
}
/* Add horizontal padding to period dropdown on tablet */
.amico-tabbed-archive-widget .period-dropdown {
margin-right: 20px !important;
}
}
/* Pill visual styles moved to shared rules in assets/css/news-events-style.css */
/* Period Dropdown */
.amico-tabbed-archive-widget .period-dropdown {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 12px;
gap: 0;
height: 44px;
border: 1px solid #BACECD;
border-radius: 100px;
margin: 0;
width: fit-content;
position: relative;
background: #fff;
z-index: 10000; /* ensure above cards; parent has transform creating stacking context */
}
.amico-tabbed-archive-widget .period-dropdown span {
font-family: 'Gotham Book', sans-serif;
font-size: 14px;
line-height: 20px;
color: #18191A;
font-weight: 400;
display: flex;
align-items: center;
margin-right: 0px; /* minimal spacing */
}
.amico-tabbed-archive-widget .period-select { display: none; }
/* Custom picker button */
.amico-tabbed-archive-widget .period-picker-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 20px 0 8px; /* tighter spacing */
height: 20px;
background: transparent;
border: 0;
cursor: pointer;
font-family: 'Gotham Book', sans-serif;
font-size: 14px;
line-height: 20px;
color: #18191A;
position: relative;
}
.amico-tabbed-archive-widget .period-picker-toggle .period-current-label {
position: relative;
}
/* underline hover animation like header */
.amico-tabbed-archive-widget .period-picker-toggle .period-current-label::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform .2s ease;
}
.amico-tabbed-archive-widget .period-picker-toggle:hover .period-current-label::after,
.amico-tabbed-archive-widget .period-picker-toggle[aria-expanded="true"] .period-current-label::after {
transform: scaleX(1);
}
/* chevron */
.amico-tabbed-archive-widget .period-picker-toggle .period-chevron {
position: absolute;
right: 6px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
pointer-events: none;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Mobile chevron size */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .period-picker-toggle .period-chevron {
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
}
/* menu */
.amico-tabbed-archive-widget .period-picker-menu {
position: absolute;
top: calc(100% + 8px);
right: 0; /* align to end of pill */
left: auto;
width: 201px;
background: #fff;
border: 1px solid #BACECD;
box-shadow: 0 8px 32px rgba(0,0,0,.08);
border-radius: 0;
padding: 0;
margin: 0;
list-style: none;
display: none;
z-index: 20;
}
.period-picker-menu {
z-index: 99999999;
}
.amico-tabbed-archive-widget .period-picker-menu.open { display: block; }
.amico-tabbed-archive-widget .period-picker-menu li {
min-height: 48px;
display: flex;
align-items: center;
padding: 12px 16px;
font-family: 'Gotham Book', sans-serif;
font-size: 14px;
line-height: 20px;
color: #18191A;
cursor: pointer;
position: relative; /* for underline */
margin: 0; /* ensure zero spacing between items */
}
.amico-tabbed-archive-widget .period-picker-menu li[aria-selected="true"] { font-weight: 700; }
@media (min-width: 769px) {
/* Desktop: underline only the text width on hover */
.amico-tabbed-archive-widget .period-picker-menu li .period-item-label {
position: relative;
display: inline-block;
}
.amico-tabbed-archive-widget .period-picker-menu li .period-item-label::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform .2s ease;
}
.amico-tabbed-archive-widget .period-picker-menu li:hover .period-item-label::after {
transform: scaleX(1);
}
}
/* Disable underline for "All" in pill */
.amico-tabbed-archive-widget .period-picker-toggle.no-underline .period-current-label::after { display: none; }
.amico-tabbed-archive-widget .period-picker-toggle.no-underline:hover .period-current-label::after { transform: scaleX(0); }
/* Mobile bottom sheet behavior */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .period-picker-menu.open {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
max-height: 70vh !important;
overflow: auto !important;
border: 0 !important;
border-radius: 16px 16px 0 0 !important;
box-shadow: 0 -8px 32px rgba(0,0,0,.12) !important;
padding-top: 56px !important; /* space for header */
z-index: 100000 !important; /* above backdrop */
display: block !important;
background: #fff !important;
opacity: 1 !important; /* Force visibility */
visibility: visible !important; /* Force visibility */
pointer-events: auto !important; /* Enable interactions */
}
.amico-tabbed-archive-widget .period-picker-menu::before {
content: 'Period';
position: absolute;
top: 16px;
left: 16px;
right: 16px;
font-family: 'Gotham Book', sans-serif;
font-size: 16px;
line-height: 24px;
color: #18191A;
}
.amico-tabbed-archive-widget .period-picker-menu::after {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 2px;
background: #BACECD;
}
}
/* Backdrop and scroll lock for mobile sheet */
.amico-period-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 99990;
display: none;
}
body.amico-period-open { overflow: hidden; }
.amico-tabbed-archive-widget .period-select:hover {
color: #18191A;
}
.amico-tabbed-archive-widget .period-select:focus {
outline: none;
border-color: transparent;
box-shadow: none;
}
/* Custom chevron for select */
/* chevron handled by .period-chevron inside button */
/* Tab Content Wrapper */
.amico-tabbed-archive-widget .tab-content-wrapper {
width: 100%;
/* spacing controlled by Elementor control */
}
/* Tab Sections */
.amico-tabbed-archive-widget .tab-section {
display: none;
}
.amico-tabbed-archive-widget .tab-section.active {
display: block !important;
}
/* Ensure grids are visible when parent is active */
.amico-tabbed-archive-widget .tab-section.active .events-grid-container,
.amico-tabbed-archive-widget .tab-section.active .news-grid-container {
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Events Grid Container */
.amico-tabbed-archive-widget .events-grid-container {
display: grid !important;
/* Columns will be set per-widget via inline CSS generated by PHP */
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr; /* Ensure equal row heights */
width: 100%;
padding: 0; /* Spacing controlled by pills_grid_spacing Elementor control on .tab-content-wrapper */
min-height: 100px;
}
/* Override gap with specific selector */
.amico-tabbed-archive-widget .events-grid-container.tabbed-grid {
/* Gap is controlled by Elementor control; do not override here */
/* Keep centering for rows that don't fill the line */
justify-content: center;
justify-items: center;
width: max-content;
max-width: 100%;
margin: 0 auto;
}
/* News Grid */
.amico-tabbed-archive-widget .news-grid-container {
display: grid !important;
/* Columns will be set per-widget via inline CSS generated by PHP */
grid-template-columns: repeat(3, 1fr);
width: 100%;
padding: 0; /* Spacing controlled by pills_grid_spacing Elementor control on .tab-content-wrapper */
min-height: 100px;
}
/* Override gap with specific selector */
.amico-tabbed-archive-widget .news-grid-container.tabbed-grid {
/* Gap is controlled by Elementor control; do not override here */
justify-content: center;
justify-items: center;
width: max-content;
max-width: 100%;
margin: 0 auto;
}
/* Mobile - Remove padding to allow full width stretch */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .media-library-brochure-card {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
.amico-tabbed-archive-widget .media-library-brochure-card img {
width: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
height: 240px !important;
border-radius: 0 !important;
}
.amico-tabbed-archive-widget .media-library-content-section {
padding: 0 16px 16px 16px !important;
}
.amico-tabbed-archive-widget .news-grid-container.tabbed-grid {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* No items message */
.amico-tabbed-archive-widget .no-items-message {
text-align: center;
color: #666;
font-size: 16px;
padding: 40px;
grid-column: 1 / -1;
}
.amico-tabbed-archive-widget .event-card img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
.amico-tabbed-archive-widget .event-card:hover img {
transform: scale(1.1);
}
}
.amico-tabbed-archive-widget .event-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.66) 61.78%);
z-index: 1;
pointer-events: none;
}
/* Overlay always visible, no hover state needed */
.amico-tabbed-archive-widget .events-grid-container .event-card .event-title {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 246px;
max-width: calc(100% - 40px);
color: white;
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
/* Mobile typography for event title */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .events-grid-container .event-card .event-title {
letter-spacing: 0px;
text-align: center !important;
vertical-align: bottom !important;
align-items: flex-end !important;
/* Ensures vertical alignment to bottom */
bottom: 20px !important;
/* 20px bottom spacing */
padding: 0 !important;
/* Override custom CSS padding: 40px 26px 30px */
left: 50% !important;
/* Reset to center positioning */
right: auto !important;
/* Reset right positioning */
transform: translateX(-50%) !important;
/* Center the element */
width: 246px !important;
/* Restore original width */
max-width: calc(100% - 40px) !important;
/* Restore max-width */
}
}
/* Ensure case studies/content listing titles are not affected by overlay rules (especially on mobile) */
.amico-case-studies-listing-widget .event-title {
position: static !important;
left: auto !important;
transform: none !important;
display: block !important;
align-items: normal !important;
}
/* Title always visible, no hover state needed */
/* Play Button */
.amico-tabbed-archive-widget .play-button,
.amico-video-modal .play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 1;
/* Visible by default */
pointer-events: auto;
/* Ensure clickable and hoverable */
}
.amico-tabbed-archive-widget .play-button .amico-icon,
.amico-video-modal .play-button .amico-icon {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.amico-tabbed-archive-widget .play-button .amico-icon::before,
.amico-video-modal .play-button .amico-icon::before,
.amico-tabbed-archive-widget .play-button .amico-icon::after,
.amico-video-modal .play-button .amico-icon::after {
content: none !important;
display: none !important;
}
.amico-tabbed-archive-widget .play-button .amico-icon.amico-icon-pause,
.amico-video-modal .play-button .amico-icon.amico-icon-pause {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.amico-tabbed-archive-widget .event-card:hover .play-button {
opacity: 1;
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
}
.amico-tabbed-archive-widget .play-button::before {
content: '';
width: 0;
height: 0;
border-left: 20px solid #18191A;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 4px;
}
/* Soft pulse ring on hover */
.amico-tabbed-archive-widget .play-button::after {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
opacity: 0;
transform: scale(0.9);
transition: transform 0.35s ease, opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
.amico-tabbed-archive-widget .event-card:hover .play-button::after,
.amico-video-modal .amico-aspect:hover .play-button::after {
opacity: 1;
transform: scale(1.05);
}
}
@media (hover: hover) and (pointer: fine) {
.amico-video-modal .amico-aspect:hover .amico-cover {
transform: scale(1.1);
}
}
/* Hover handled by parent card hover */
/* Replicate all card hover effects on the modal container */
@media (hover: hover) and (pointer: fine) {
.amico-video-modal .amico-aspect:hover .play-button {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
}
/* Mobile responsive play button sizing */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .play-button,
.amico-video-modal .play-button {
width: 48px;
height: 48px;
}
.amico-tabbed-archive-widget .play-button::before {
border-left-width: 16px;
border-top-width: 10px;
border-bottom-width: 10px;
margin-left: 3px;
}
.amico-video-modal.playing:not(.paused) .play-button::before {
width: 14px;
height: 14px;
}
.amico-video-modal.playing.paused .play-button::before {
border-left-width: 16px;
border-top-width: 10px;
border-bottom-width: 10px;
margin-left: 3px;
}
}
/* News Card container to prevent UI breaks */
.amico-tabbed-archive-widget .news-event-item {
width: 100%;
position: relative;
}
/* News Card Styles using shared styles from
assets/css/news-events-style.css via handle 'amico-news-events-style' */
/* Hover Animations for both events and news cards */
@media (hover: hover) and (pointer: fine) {
.amico-tabbed-archive-widget.card-hover-lift .event-card:hover {
/* Keep card in place by default; lift only when explicitly selected */
transform: translateY(-12px);
}
.amico-tabbed-archive-widget.card-hover-scale .event-card:hover {
transform: scale(1.05);
}
.amico-tabbed-archive-widget.card-hover-glow .event-card:hover {
box-shadow: 0 0 40px rgba(24, 25, 26, 0.2);
}
}
/* News card hover animations */
@media (hover: hover) and (pointer: fine) {
.amico-tabbed-archive-widget.news-card-hover-lift .news-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.amico-tabbed-archive-widget.news-card-hover-scale .news-card:hover {
transform: scale(1.05);
}
.amico-tabbed-archive-widget.news-card-hover-glow .news-card:hover {
box-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
}
}
/* News content section background - controlled by Elementor */
.amico-tabbed-archive-widget .news-event-item .news-content-section {
background: var(--news-bg-color, linear-gradient(0deg, #BACECD, #BACECD), linear-gradient(0deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))) !important;
}
@media (max-width: 1200px) {
.amico-tabbed-archive-widget .events-grid-container.tabbed-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1100px) {
.amico-tabbed-archive-widget .filter-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.amico-tabbed-archive-widget .events-grid-container.tabbed-grid {
grid-template-columns: repeat(2, 1fr);
width: 100% !important;
max-width: 100% !important;
/* gap controlled by Elementor */
padding: 0 15px; /* Only horizontal padding, vertical spacing controlled by pills_grid_spacing */
}
.amico-tabbed-archive-widget .news-grid-container.tabbed-grid {
padding: 0 15px; /* Only horizontal padding, vertical spacing controlled by pills_grid_spacing */
}
}
@media (max-width: 768px) {
.amico-tabbed-archive-widget .filter-container {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.amico-tabbed-archive-widget .filter-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-self: center;
grid-column: 1;
gap: 10px;
width: 100%;
}
.amico-tabbed-archive-widget .period-dropdown {
justify-self: end;
grid-column: 1;
}
.amico-tabbed-archive-widget .events-grid-container.tabbed-grid {
grid-template-columns: 1fr;
width: 100% !important;
max-width: 100% !important;
/* gap controlled by Elementor */
padding: 0 !important;
justify-items: stretch;
}
.amico-tabbed-archive-widget .news-grid-container.tabbed-grid {
grid-template-columns: 1fr !important;
/* gap controlled by Elementor */
justify-content: center;
justify-items: center;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 0px !important; /* Only horizontal padding, vertical spacing controlled by pills_grid_spacing */
}
/* Remove tab section padding on mobile for full stretch */
.amico-tabbed-archive-widget .tab-section {
padding-right: 16px !important;
padding-left: 16px !important;
}
.amico-tabbed-archive-widget .event-card-wrapper {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
.amico-tabbed-archive-widget .event-card {
width: 100%;
max-width: 100%;
/* aspect-ratio removed - height controlled by Elementor */
}
/* Ensure content section is visible */
.amico-tabbed-archive-widget .tab-section.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: visible !important;
}
}
@media (max-width: 480px) {
.amico-tabbed-archive-widget .events-grid-container.tabbed-grid {
grid-template-columns: 1fr;
width: 100% !important;
max-width: 100% !important;
/* gap controlled by Elementor */
padding: 0 !important; /* Spacing controlled by pills_grid_spacing */
justify-items: stretch !important;
}
.amico-tabbed-archive-widget .event-card-wrapper {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.amico-tabbed-archive-widget .event-card {
width: 100% !important;
max-width: 100% !important;
/* aspect-ratio removed - height controlled by Elementor */
}
/* Ensure content section is visible */
.amico-tabbed-archive-widget .tab-section.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: visible !important;
}
/* Pill font/padding responsive handled by shared rules */
}
/* Loading Animation */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.amico-tabbed-archive-widget .loading-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
border-radius: 8px;
}
/* Bootstrap Modal Overrides for Video (scoped to specific classes only to avoid global impact) */
.modal-content.bg-dark {
background-color: #000 !important;
}
.btn-close-white {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* AMICO custom video modal - custom backdrop to prevent stutter */
.amico-video-modal {
background: transparent !important;
}
/* Hide Bootstrap's backdrop only while our modal is open */
body.amico-modal-open .modal-backdrop {
display: none !important;
}
.amico-video-modal .modal-dialog {
margin: 0;
max-width: none;
height: 100vh;
width: 100vw;
}
.amico-video-modal-dialog {
margin: 0;
max-width: none;
}
/* Custom backdrop with consistent 72% opacity */
.amico-video-modal .amico-video-modal-content {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.72);
border: none;
border-radius: 0;
z-index: 1050;
/* Ensure smooth fade-in */
opacity: 0;
transition: opacity 0.3s ease;
}
.amico-video-modal.show .amico-video-modal-content {
opacity: 1;
}
/* Fade-in animation for modal content */
.amico-video-modal .amico-aspect {
opacity: 0;
transform: scale(0.9);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.amico-video-modal.show .amico-aspect {
opacity: 1;
transform: scale(1);
}
.amico-video-modal .amico-modal-close {
position: fixed !important;
top: calc(36px + env(safe-area-inset-top)) !important;
right: calc(36px + env(safe-area-inset-right)) !important;
left: auto !important;
bottom: auto !important;
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
z-index: 1057;
transition: opacity 0.2s ease;
margin: 0 !important;
padding: 0 !important;
/* Override any Bootstrap styles */
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
/* Account for WordPress admin bar */
body.admin-bar .amico-video-modal .amico-modal-close {
top: calc(36px + env(safe-area-inset-top) + 32px) !important;
}
@media (max-width: 782px) {
body.admin-bar .amico-video-modal .amico-modal-close {
top: calc(36px + env(safe-area-inset-top) + 46px) !important;
}
}
.amico-video-modal .amico-modal-close:hover {
opacity: 0.7;
}
.amico-video-modal .amico-modal-close::before,
.amico-video-modal .amico-modal-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background: #fff;
transform-origin: center;
}
.amico-video-modal .amico-modal-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.amico-video-modal .amico-modal-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.amico-video-modal .amico-aspect {
position: relative;
aspect-ratio: 2 / 1;
/* Maximize space within 20% margins, prefer width constraint for better expansion */
width: calc(100vw - (2 * var(--amico-modal-space, 00%)));
/* max-width: calc((100vh - (2 * var(--amico-modal-space, 10%))) * 2);
max-height: calc(100vh - (2 * var(--amico-modal-space, 5%))); */
background: #000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
pointer-events: auto;
/* Ensure hover events can reach this element */
}
/* Mobile responsive adjustments for video modal aspect */
@media (max-width: 768px) {
.amico-video-modal .amico-aspect {
/* Remove max-width constraints and let it stretch with minimal horizontal padding */
width: calc(100vw - 16px); /* 8px * 2 for both sides */
max-width: none !important;
margin: 0 8px; /* 8px horizontal padding */
border-radius: 8px; /* Slightly smaller border radius on mobile */
}
}
.amico-video-modal .amico-media-wrapper {
position: absolute;
inset: 0;
pointer-events: auto;
/* Allow hover events to pass through */
}
.amico-video-modal .amico-cover,
.amico-video-modal .amico-video,
.amico-video-modal .amico-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Changed from contain to cover for aspect fill */
object-position: center;
background: #000;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
/* Add transition for zoom */
}
.amico-video-modal .amico-video,
.amico-video-modal .amico-iframe {
opacity: 0;
transition: opacity 300ms ease;
}
.amico-video-modal.playing .amico-video,
.amico-video-modal.playing .amico-iframe {
opacity: 1;
}
.amico-video-modal.playing .amico-cover {
opacity: 0;
transition: opacity 300ms ease;
}
/* Pause icon when playing and not paused */
.amico-video-modal.playing:not(.paused) .play-button::before {
content: '';
width: 18px;
height: 18px;
border: none;
background: linear-gradient(90deg, #18191A 35%, transparent 35%, transparent 65%, #18191A 65%);
margin-left: 0;
}
/* Play icon when paused */
.amico-video-modal.playing.paused .play-button::before {
content: '';
width: 0;
height: 0;
border-left: 20px solid #18191A;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 4px;
background: none;
}
.amico-video-modal.playing:not(.paused) .play-button .amico-icon.amico-icon-play {
display: none;
}
.amico-video-modal.playing:not(.paused) .play-button .amico-icon.amico-icon-pause {
display: inline-flex;
}
.amico-video-modal.playing.paused .play-button .amico-icon.amico-icon-play {
display: inline-flex;
}
.amico-video-modal.playing.paused .play-button .amico-icon.amico-icon-pause {
display: none;
}
.amico-video-modal.playing:not(.ui-visible) .play-button {
opacity: 0;
pointer-events: none;
}
.amico-video-modal.ui-visible .play-button {
opacity: 1;
pointer-events: auto;
}
.amico-video-modal .amico-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 24px;
color: #fff;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
transition: opacity 400ms ease, transform 400ms ease;
z-index: 6;
}
.amico-video-modal.playing.title-fade .amico-title {
opacity: 0;
transform: translate(-50%, 16px);
}
/* Mobile responsive typography for video modal title */
@media (max-width: 768px) {
.amico-video-modal .amico-title {
bottom: 16px;
/* Move title up slightly on mobile for better visibility */
white-space: nowrap; /* Prevent text wrapping on mobile */
width: auto; /* Allow title to use available space */
min-width: fit-content; /* Ensure title doesn't get compressed */
}
}
/* Remove this - we now use the content background directly */
/* Entrance Animations (scoped to widget) */
.amico-tabbed-archive-widget [data-aos="fade-up"] {
transition: opacity 0.6s ease, transform 0.6s ease;
/* Default to visible unless AOS is enabled */
opacity: 1;
transform: translateY(0);
}
.amico-tabbed-archive-widget .aos-enabled [data-aos="fade-up"] {
opacity: 0;
transform: translateY(30px);
}
.amico-tabbed-archive-widget .aos-enabled [data-aos="fade-up"].aos-animate {
opacity: 1;
transform: translateY(0);
}
/* Scoped appear animations (JS-driven) */
.amico-tabbed-archive-widget .amico-appear-prep {
will-change: opacity, transform, filter;
}
.amico-tabbed-archive-widget .amico-appear-run {
transition-property: opacity, transform, filter;
transition-duration: 600ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Grid item animations (keep original) */
.amico-tabbed-archive-widget .event-card-wrapper.anim-fade.amico-appear-prep,
.amico-tabbed-archive-widget .news-event-item.anim-fade.amico-appear-prep {
opacity: 0;
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-fade.amico-appear-prep.amico-appear-in,
.amico-tabbed-archive-widget .news-event-item.anim-fade.amico-appear-prep.amico-appear-in {
opacity: 1;
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-fade-up.amico-appear-prep,
.amico-tabbed-archive-widget .news-event-item.anim-fade-up.amico-appear-prep {
opacity: 0;
transform: translateY(14px);
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-fade-up.amico-appear-prep.amico-appear-in,
.amico-tabbed-archive-widget .news-event-item.anim-fade-up.amico-appear-prep.amico-appear-in {
opacity: 1;
transform: translateY(0);
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-slide-up-soft.amico-appear-prep,
.amico-tabbed-archive-widget .news-event-item.anim-slide-up-soft.amico-appear-prep {
opacity: 0;
transform: translateY(10px);
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-slide-up-soft.amico-appear-prep.amico-appear-in,
.amico-tabbed-archive-widget .news-event-item.anim-slide-up-soft.amico-appear-prep.amico-appear-in {
opacity: 1;
transform: translateY(0);
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-scale-in.amico-appear-prep,
.amico-tabbed-archive-widget .news-event-item.anim-scale-in.amico-appear-prep {
opacity: 0;
transform: scale(0.98);
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-scale-in.amico-appear-prep.amico-appear-in,
.amico-tabbed-archive-widget .news-event-item.anim-scale-in.amico-appear-prep.amico-appear-in {
opacity: 1;
transform: scale(1);
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-blur-in.amico-appear-prep,
.amico-tabbed-archive-widget .news-event-item.anim-blur-in.amico-appear-prep {
opacity: 0;
filter: blur(6px);
transform: translateY(6px);
}
.amico-tabbed-archive-widget .event-card-wrapper.anim-blur-in.amico-appear-prep.amico-appear-in,
.amico-tabbed-archive-widget .news-event-item.anim-blur-in.amico-appear-prep.amico-appear-in {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
/* Pills-specific animations (higher specificity for pills only) */
.amico-tabbed-archive-widget .filter-pills.anim-fade.amico-appear-prep {
opacity: 0 !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-fade.amico-appear-prep.amico-appear-in {
opacity: 1 !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-fade-up.amico-appear-prep {
opacity: 0 !important;
transform: translateY(14px) !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-fade-up.amico-appear-prep.amico-appear-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-slide-up-soft.amico-appear-prep {
opacity: 0 !important;
transform: translateY(10px) !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-slide-up-soft.amico-appear-prep.amico-appear-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-scale-in.amico-appear-prep {
opacity: 0 !important;
transform: scale(0.98) !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-scale-in.amico-appear-prep.amico-appear-in {
opacity: 1 !important;
transform: scale(1) !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-blur-in.amico-appear-prep {
opacity: 0 !important;
filter: blur(6px) !important;
transform: translateY(6px) !important;
}
.amico-tabbed-archive-widget .filter-pills.anim-blur-in.amico-appear-prep.amico-appear-in {
opacity: 1 !important;
filter: blur(0) !important;
transform: translateY(0) !important;
}
/* Override play button styles to show only SVG */
.amico-tabbed-archive-widget .play-button,
.amico-video-modal .play-button {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
}
.amico-tabbed-archive-widget .play-button::before,
.amico-video-modal .play-button::before {
display: none !important;
}
.amico-tabbed-archive-widget .play-button::after,
.amico-video-modal .play-button::after {
display: none !important;
}
.amico-tabbed-archive-widget .play-button svg,
.amico-video-modal .play-button svg {
display: block !important;
width: 56px !important;
height: 56px !important;
}
/* Responsive adjustments for play button */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .play-button svg,
.amico-video-modal .play-button svg {
width: 48px !important;
height: 48px !important;
}
}
/* Mobile-only period pill styling */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .period-mobile-pill {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
background: #18191A;
color: #FFFFFF;
font-family: 'Gotham', 'Gotham Book', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 18px;
border-radius: 100px;
border: 0;
padding: 8px 16px;
min-height: 44px; /* match other pills height */
white-space: nowrap;
transition: all 0.2s ease;
cursor: pointer;
flex: 0 0 auto;
min-width: fit-content;
}
.amico-tabbed-archive-widget .period-mobile-pill:hover {
background: #18191A;
color: #FFFFFF;
}
.amico-tabbed-archive-widget .period-mobile-chevron {
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition: transform 0.2s ease;
}
.amico-tabbed-archive-widget .period-mobile-pill[aria-expanded="true"] .period-mobile-chevron {
transform: rotate(180deg);
}
}
/* Desktop-only: hide mobile pill and show desktop dropdown */
@media (min-width: 769px) {
.amico-tabbed-archive-widget .period-mobile-pill { display: none !important; }
}
/* Mobile: hide desktop dropdown triggers but keep menu for bottom sheet */
@media (max-width: 768px) {
.amico-tabbed-archive-widget .period-dropdown {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: visible !important; /* Allow fixed menu to render */
opacity: 0 !important;
pointer-events: none !important;
}
/* Hide desktop triggers but keep menu accessible */
.amico-tabbed-archive-widget .period-dropdown > span,
.amico-tabbed-archive-widget .period-picker-toggle {
display: none !important;
}
/* Ensure menu can still be positioned fixed and visible when open */
.amico-tabbed-archive-widget .period-picker-menu {
pointer-events: auto !important;
opacity: 1 !important;
}
/* Override parent opacity when menu is open to make bottom sheet visible */
.amico-tabbed-archive-widget .period-dropdown.menu-open {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Additional fallback: Force menu visibility when open, regardless of parent */
.amico-tabbed-archive-widget .period-picker-menu.open {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
}
@media (max-width: 768px) {
/* When portalized to body, ensure bottom sheet styles still apply */
.period-picker-menu.amico-period-sheet.open {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
max-height: 70vh !important;
overflow: auto !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 -8px 32px rgba(0,0,0,.12) !important;
/* Padding to accommodate header (24px height) + 20px gap below, starting 40px from top */
padding: 84px 16px 24px 16px !important;
margin: 0 !important; /* Remove default ul margins */
z-index: 100000 !important; /* above backdrop */
display: block !important;
background: #fff !important;
opacity: 1 !important; /* Force visibility */
visibility: visible !important; /* Force visibility */
pointer-events: auto !important; /* Enable interactions */
}
/* Header label per Figma ("Period") */
.amico-tabbed-archive-widget .period-picker-menu::before {
content: 'Period';
position: absolute;
top: 40px;
left: 16px;
right: 16px;
font-family: 'Gotham', sans-serif;
font-size: 18px;
line-height: 24px;
color: #18191A;
}
/* Drag handle per Figma */
.amico-tabbed-archive-widget .period-picker-menu::after {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 5px;
border-radius: 23px;
background: #BACECD;
}
/* Option rows per Figma spacing/typography */
.amico-tabbed-archive-widget .period-picker-menu li {
min-height: 46px;
display: flex;
align-items: center;
padding: 13px 16px;
font-family: 'Gotham', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #18191A;
border-bottom: 1px solid rgba(186, 206, 205, 0.3);
margin: 0;
}
.amico-tabbed-archive-widget .period-picker-menu li:last-child {
border-bottom: none;
}
/* When portalized to body, ensure bottom sheet styles still apply */
.period-picker-menu.amico-period-sheet.open {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
max-height: 70vh !important;
overflow: auto !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 -8px 32px rgba(0,0,0,.12) !important;
padding: 84px 16px 24px 16px !important;
margin: 0 !important; /* Remove default ul margins */
z-index: 100000 !important;
display: block !important;
background: #fff !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Portalized sheet header */
.period-picker-menu.amico-period-sheet::before {
content: 'Period';
position: absolute;
top: 40px;
left: 16px;
right: 16px;
font-family: 'Gotham', sans-serif;
font-size: 18px;
line-height: 24px;
color: #18191A;
}
/* Portalized sheet drag handle */
.period-picker-menu.amico-period-sheet::after {
content: '';
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 5px;
border-radius: 23px;
background: #BACECD;
}
/* Portalized sheet list items */
.period-picker-menu.amico-period-sheet li {
min-height: 46px;
display: flex;
align-items: center;
/* padding: 13px 16px; */
font-family: 'Gotham', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #18191A;
border-bottom: 1px solid rgba(186, 206, 205, 0.3);
margin: 0;
}
.period-picker-menu.amico-period-sheet li:last-child {
border-bottom: none;
}
}
.period-current-label {
margin-right: 24px !important;
font-family: 'Gotham Medium', 'Gotham Book', sans-serif !important;
font-weight: 500 !important;
}