/*!
|-----------------------------------------------------------------------------------------
| New Futures — Net-new component styles (Phase 4)
|
| Styles for the brent11 net-new components ported into this site. Kept in a
| separate file so the original skin.css is untouched. Uses the design tokens in
| root.css (brand values already ported). NOTE: this site's brand ramps run
| dark->light (1=dark), the reverse of the brent11 starter, so where a ported
| style used a ramp shade for a "darker/lighter" effect it is re-mapped here.
|-----------------------------------------------------------------------------------------
*/
/* =========================================================================
Anchor Menu - Style 1 (templates/anchor_menu.style_1.php)
========================================================================= */
.anchor-menu-style-1 {
z-index: 1;
position: relative;
}
.anchor-menu-style-1 .anchor-menu-wrap {
width: 100%;
}
.anchor-menu-style-1 nav {
text-align: center;
}
.anchor-menu-style-1 nav ul {
position: relative;
display: flex;
flex-wrap: wrap;
row-gap: 10px;
list-style: none;
margin: 0;
padding-left: 0;
}
.anchor-menu-style-1 nav ul li {
list-style: none;
}
.anchor-menu-style-1 nav ul li:before {
content: none;
}
@media (min-width: 1200px) {
.anchor-menu-style-1 nav ul {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px;
border-radius: 100px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.16);
background-color: var(--white);
}
}
@media (max-width: 575px) {
.anchor-menu-style-1 nav ul {
row-gap: 5px;
}
}
@media (min-width: 1200px) {
.anchor-menu-style-1 nav ul li:not(:nth-last-of-type(-n+2)) {
border-right: 1px solid var(--border-color-dark);
}
}
@media (max-width: 1199px) {
.anchor-menu-style-1 nav ul li {
padding: 0 5px;
flex: 0 0 33.333333%;
width: 100%;
max-width: 33.333333%;
}
}
@media (max-width: 767px) {
.anchor-menu-style-1 nav ul li {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 575px) {
.anchor-menu-style-1 nav ul li {
padding: 0;
flex: 0 0 auto;
max-width: none;
}
}
.anchor-menu-style-1 nav ul li a {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-color);
text-decoration: none;
font-weight: var(--font-weight-semi-bold);
}
@media (min-width: 1200px) {
.anchor-menu-style-1 nav ul li a {
padding: 0 20px;
}
}
@media (max-width: 1199px) {
.anchor-menu-style-1 nav ul li a {
height: 100%;
padding: 10px 20px;
text-align: left;
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color-dark);
}
}
.anchor-menu-style-1 nav ul li a img {
width: auto;
height: 30px;
filter: brightness(0);
transition: inherit;
}
.anchor-menu-style-1 nav ul li a:hover,
.anchor-menu-style-1 nav ul li a.active {
color: var(--primary);
}
.anchor-menu-style-1 nav ul li a:hover img,
.anchor-menu-style-1 nav ul li a.active img {
filter: brightness(1);
}
.anchor-menu-style-1 .back-to-top {
opacity: 0;
position: absolute;
top: 50%;
left: calc(100% + 10px);
transform: translate(-15px, -50%);
transition: var(--transition-200);
}
@media (max-width: 1199px) {
.anchor-menu-style-1 .back-to-top {
display: none;
}
}
.anchor-menu-style-1 .back-to-top button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--white);
background-color: var(--primary);
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.16);
}
.anchor-menu-style-1 .back-to-top button:hover {
background-color: var(--primary-6);
}
.anchor-menu-style-1.is-stuck .anchor-menu-wrap {
position: fixed;
left: 0;
/* Fallback offset (90px) — this site does not set --header-main-wrap-height. */
top: var(--anchor-sticky-top, calc(var(--header-main-wrap-height, 90px) + 5px));
}
.anchor-menu-style-1.is-stuck .back-to-top {
opacity: 1;
transform: translate(0, -50%);
}
/* =========================================================================
Timeline - Style 1 (templates/timeline.style_1.php)
========================================================================= */
.timeline-style-1 {
--timeline-dot-size: 15px;
--timeline-dot-offset: 12px;
}
@media (max-width: 991px) {
.timeline-style-1 {
--timeline-dot-size: 10px;
--timeline-dot-offset: 12px;
}
}
.timeline-style-1 {
position: relative;
margin-bottom: 30px;
}
@media (max-width: 767px) {
.timeline-style-1 {
padding-left: 15px;
}
}
.timeline-style-1 h1, .timeline-style-1 h2, .timeline-style-1 h3,
.timeline-style-1 h4, .timeline-style-1 h5, .timeline-style-1 h6 {
margin-bottom: 15px;
line-height: 1;
}
.timeline-style-1 .timeline-line {
position: absolute;
top: var(--timeline-dot-offset);
left: 50%;
width: 1px;
height: calc(100% + 30px);
background-color: var(--border-color-dark);
transform: translateX(-50%);
}
@media (max-width: 767px) {
.timeline-style-1 .timeline-line {
left: 0;
}
}
.timeline-style-1 .timeline-dot {
position: absolute;
top: var(--timeline-dot-offset);
left: 50%;
width: var(--timeline-dot-size);
height: var(--timeline-dot-size);
border-radius: 50%;
background-color: var(--primary);
transform: translateX(-50%);
}
@media (max-width: 767px) {
.timeline-style-1 .timeline-dot {
left: 0;
}
}
.timeline-style-1 .timeline-dot:after {
opacity: 0.2;
position: absolute;
content: "";
left: 50%;
top: 50%;
width: calc(var(--timeline-dot-size) * 2);
height: calc(var(--timeline-dot-size) * 2);
border-radius: 50%;
background-color: var(--primary);
transform: translate(-50%, -50%);
}
.timeline-style-1.is-left {
text-align: right;
}
@media (max-width: 767px) {
.timeline-style-1.is-left {
text-align: left;
}
}
@media (max-width: 767px) {
.timeline-style-1.is-right .timeline-inner-left {
order: 2;
}
.timeline-style-1.is-right .timeline-inner-right {
order: 1;
}
}
.timeline-style-1.is-last .timeline-line {
background-color: transparent;
background-image: linear-gradient(to bottom, var(--border-color-dark) 60%, rgba(0, 0, 0, 0) 100%);
}
.timeline-style-1 .mwPageBlock.File .mwFileEmbed.Image {
margin-bottom: 30px;
}
/* =========================================================================
PDF Viewer - Style 1 (templates/pdf_viewer.style_1.php)
========================================================================= */
.pdf-viewer-style-1 .pdf-viewer-wrap {
position: relative;
width: 100%;
aspect-ratio: 1/1.41;
margin-bottom: 30px;
}
.pdf-viewer-style-1 .pdf-viewer-wrap embed,
.pdf-viewer-style-1 .pdf-viewer-wrap object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* =========================================================================
Scrolling Banner - Style 1 (templates/scrolling_banner.style_1.php)
Logo/photo marquee — vertical columns on desktop, horizontal rows on
mobile. Marquee images are intentionally eager-loaded (duplicated for a
seamless loop, so lazy-loading would leave gaps).
========================================================================= */
.scrolling-banner-style-1 {
--h1-font-size: 62px;
--h1-font-size-mobile: calc(var(--h1-font-size) * 0.85);
--scrolling-banner-1-gap: 30px;
--scrolling-banner-1-speed: 50s;
--scrolling-banner-1-height: 750px;
overflow: hidden;
}
@media (max-width: 575px) {
.scrolling-banner-style-1 {
--scrolling-banner-1-gap: 15px;
}
}
.scrolling-banner-style-1 .scrolling-banner-img {
overflow: hidden;
position: relative;
border-radius: var(--border-radius-md);
}
.scrolling-banner-style-1 .scrolling-banner-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.scrolling-banner-style-1 .scrolling-banner-imgs-wrap {
animation: none !important;
}
}
@media (min-width: 1200px) {
.scrolling-banner-style-1 {
font-size: 20px;
}
.scrolling-banner-style-1 .scrolling-banner-imgs {
display: flex;
gap: var(--scrolling-banner-1-gap);
height: var(--scrolling-banner-1-height);
}
.scrolling-banner-style-1 .scrolling-banner-imgs-wrap {
flex: 1;
display: flex;
gap: var(--scrolling-banner-1-gap);
height: fit-content;
}
.scrolling-banner-style-1 .scrolling-banner-imgs-wrap:nth-child(2n+1) {
flex-direction: column;
animation: scrollingBannerStyle1Up var(--scrolling-banner-1-speed) infinite linear;
}
.scrolling-banner-style-1 .scrolling-banner-imgs-wrap:nth-child(2n) {
align-self: flex-end;
flex-direction: column-reverse;
animation: scrollingBannerStyle1Down var(--scrolling-banner-1-speed) infinite linear;
}
.scrolling-banner-style-1 .scrolling-banner-img {
aspect-ratio: 3/4;
}
}
@media (max-width: 1199px) {
.scrolling-banner-style-1 .scrolling-banner-wrap {
padding-top: 80px;
padding-bottom: var(--scrolling-banner-1-gap);
}
.scrolling-banner-style-1 .scrolling-banner-imgs {
display: flex;
flex-direction: column;
gap: var(--scrolling-banner-1-gap);
}
.scrolling-banner-style-1 .scrolling-banner-imgs-wrap {
display: flex;
gap: var(--scrolling-banner-1-gap);
width: fit-content;
}
.scrolling-banner-style-1 .scrolling-banner-imgs-wrap:nth-child(2n+1) {
animation: scrollingBannerStyle1Left var(--scrolling-banner-1-speed) infinite linear;
}
.scrolling-banner-style-1 .scrolling-banner-imgs-wrap:nth-child(2n) {
align-self: flex-end;
animation: scrollingBannerStyle1Right var(--scrolling-banner-1-speed) infinite linear;
}
.scrolling-banner-style-1 .scrolling-banner-img {
width: 300px;
aspect-ratio: 16/9;
}
}
@media (max-width: 575px) {
.scrolling-banner-style-1 .scrolling-banner-img {
width: 250px;
}
}
@keyframes scrollingBannerStyle1Up {
0% { transform: translateY(0%); }
100% { transform: translateY(-50%); }
}
@keyframes scrollingBannerStyle1Down {
0% { transform: translateY(0%); }
100% { transform: translateY(50%); }
}
@keyframes scrollingBannerStyle1Left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes scrollingBannerStyle1Right {
0% { transform: translateX(0); }
100% { transform: translateX(50%); }
}
/* =========================================================================
Team Card - Style 1 (templates/team_card.style_1.php)
Staff / board card with an accessible popup dialog (focus-trapped).
========================================================================= */
.team-card-style-1 .team-card-img {
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
margin-bottom: 15px;
border-radius: var(--border-radius);
background-color: var(--gray-1);
}
.team-card-style-1 .team-card-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: var(--transition-200);
}
.team-card-style-1 .team-card-name {
margin-bottom: 5px;
font-size: 20px;
}
.team-card-style-1 .team-card-open-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.team-card-style-1 .team-card-open-btn:hover {
color: var(--primary);
}
.team-card-style-1 .team-card-title {
font-size: 16px;
white-space: pre-line;
}
.team-card-style-1 .team-card-dialog {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 510;
background-color: var(--gray-2);
}
@media (max-width: 767px) {
.team-card-style-1 .team-card-dialog {
overflow-x: hidden;
overflow-y: auto;
padding: 70px 30px 10px;
}
}
.team-card-style-1 .team-card-dialog-img {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
@media (max-width: 767px) {
.team-card-style-1 .team-card-dialog-img {
position: relative;
top: unset;
left: unset;
width: unset;
height: unset;
padding-bottom: 125%;
margin-bottom: 30px;
}
}
.team-card-style-1 .team-card-dialog-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: var(--transition-200);
}
.team-card-style-1 .team-card-dialog-right {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
padding: 80px 80px 30px;
overflow-x: hidden;
overflow-y: auto;
}
@media (max-width: 991px) {
.team-card-style-1 .team-card-dialog-right {
padding: 40px 40px 10px;
}
}
@media (max-width: 767px) {
.team-card-style-1 .team-card-dialog-right {
position: unset;
top: unset;
right: unset;
width: unset;
height: unset;
padding: unset;
overflow-x: unset;
overflow-y: unset;
}
}
.team-card-style-1 .team-card-dialog-right-inner {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
@media (max-width: 767px) {
.team-card-style-1 .team-card-dialog-right-inner {
display: unset;
flex-direction: unset;
justify-content: unset;
min-height: unset;
}
}
.team-card-style-1 .team-card-dialog-close-btn {
z-index: 1;
position: absolute;
top: 15px;
right: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--dark);
font-size: 18px;
border-radius: 50%;
background-color: var(--white);
}
.team-card-style-1 .team-card-dialog-close-btn:hover {
color: var(--white);
background-color: var(--primary);
}
.team-card-style-1 .team-card-dialog-name {
margin-bottom: 5px;
}
.team-card-style-1 .team-card-dialog-contact {
margin-bottom: 30px;
}
.team-card-style-1 .team-card-wrap:hover .team-card-img img {
transform: scale(1.05);
}
/* =========================================================================
Magnific Image - Style 1 (templates/magnific_image.style_1.php)
Zoomable image with an accessible fullscreen lightbox dialog.
========================================================================= */
.magnific-img-style-1 {
margin-bottom: 30px;
}
.magnific-img-style-1 .magnific-img-container {
z-index: 510;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 60px 15px;
background-color: rgba(0, 0, 0, 0.5);
}
.magnific-img-style-1 .magnific-img-dialog {
position: relative;
width: 100%;
min-height: 100px;
margin: 0 auto;
}
.magnific-img-style-1 .magnific-img-inner {
overflow: hidden;
border-radius: var(--border-radius);
background-color: var(--white);
box-shadow: var(--shadow-2);
}
.magnific-img-style-1 .magnific-img-thumb {
position: relative;
}
.magnific-img-style-1 .magnific-img-thumb._ratio-34,
.magnific-img-style-1 .magnific-img-thumb._ratio-169,
.magnific-img-style-1 .magnific-img-thumb._ratio-43 {
overflow: hidden;
}
.magnific-img-style-1 .magnific-img-thumb._ratio-34 img,
.magnific-img-style-1 .magnific-img-thumb._ratio-169 img,
.magnific-img-style-1 .magnific-img-thumb._ratio-43 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.magnific-img-style-1 .magnific-img-open-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.magnific-img-style-1 .magnific-img-thumb-overlay {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
color: var(--white);
font-size: 20px;
border-radius: 0 0 0 10px;
background-color: rgba(0, 0, 0, 0.8);
transition: var(--transition-200);
}
@media (min-width: 992px) {
.magnific-img-style-1.active .magnific-img-thumb-overlay,
.magnific-img-style-1 .magnific-img-thumb:hover .magnific-img-thumb-overlay {
width: 100%;
height: 100%;
font-size: 50px;
border-radius: 0;
background-color: rgba(0, 0, 0, 0.3);
}
}
.magnific-img-style-1 .magnific-img-close-btn {
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -12px;
right: -12px;
width: 30px;
height: 30px;
color: var(--white);
border-radius: 50%;
background: var(--dark);
box-shadow: var(--shadow-2);
}
.magnific-img-style-1 .magnific-img-close-btn:hover {
background: var(--primary);
}
.magnific-img-style-1.is-sm .magnific-img-dialog {
max-width: 570px;
}
.magnific-img-style-1.is-md .magnific-img-dialog {
max-width: 770px;
}
.magnific-img-style-1.is-lg .magnific-img-dialog {
max-width: 970px;
}
/* =========================================================================
Icon Card - Style 1 (templates/icon_card.style_1.php)
RAMP-ADAPTED: NF ramps run dark->light, so the icon tint follows the
text color — dark text (teal/gold) => dark icon; white text (red/rose)
=> white icon. Colored-card hover keeps only the lift + shadow (changing
the bg to a -6 shade would LIGHTEN it here and break text contrast).
========================================================================= */
.icon-card-style-1 {
font-size: 16px;
margin-bottom: 30px;
}
.icon-card-style-1 .icon-card-wrap {
display: flex;
flex-direction: column;
width: 100%;
padding: 40px 40px 30px;
border-radius: var(--border-radius);
transition: var(--transition-200);
box-shadow: var(--shadow-6);
background-image: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
@media (max-width: 1365px) {
.icon-card-style-1 .icon-card-wrap { padding: 40px 40px 10px; }
}
@media (max-width: 575px) {
.icon-card-style-1 .icon-card-wrap { padding: 30px 30px 1px; }
}
.icon-card-style-1 .icon-card-icon {
margin-bottom: 30px;
}
.icon-card-style-1 .icon-card-icon img {
width: auto;
height: 80px;
transition: var(--transition-200);
}
.icon-card-style-1 .icon-card-title {
margin-bottom: 15px;
transition: var(--transition-200);
}
.icon-card-style-1 .icon-card-btn {
margin-top: auto;
margin-bottom: 30px;
}
.icon-card-style-1 .icon-card-btn i {
margin-left: 10px;
transition: transform var(--transition-200);
}
.icon-card-style-1 .icon-card-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon-card-style-1:hover .icon-card-wrap {
box-shadow: var(--shadow-6-hover);
transform: translateY(-15px);
}
.icon-card-style-1:hover .icon-card-btn i {
transform: translateX(10px);
}
/* Teal / gold — light brand colors: dark text + dark icon */
.icon-card-style-1.is-primary .icon-card-wrap,
.icon-card-style-1.is-primary .icon-card-title {
color: var(--text-color-on-primary);
}
.icon-card-style-1.is-primary .icon-card-wrap {
background-color: var(--primary);
}
.icon-card-style-1.is-primary .icon-card-icon img {
filter: brightness(0);
}
.icon-card-style-1.is-third .icon-card-wrap,
.icon-card-style-1.is-third .icon-card-title {
color: var(--text-color-on-third);
}
.icon-card-style-1.is-third .icon-card-wrap {
background-color: var(--third);
}
.icon-card-style-1.is-third .icon-card-icon img {
filter: brightness(0);
}
/* Red / rose — darker brand colors: white text + white icon */
.icon-card-style-1.is-secondary .icon-card-wrap,
.icon-card-style-1.is-secondary .icon-card-title {
color: var(--text-color-on-secondary);
}
.icon-card-style-1.is-secondary .icon-card-wrap {
background-color: var(--secondary);
}
.icon-card-style-1.is-secondary .icon-card-icon img {
filter: brightness(0) invert(1);
}
.icon-card-style-1.is-fourth .icon-card-wrap,
.icon-card-style-1.is-fourth .icon-card-title {
color: var(--text-color-on-fourth);
}
.icon-card-style-1.is-fourth .icon-card-wrap {
background-color: var(--fourth);
}
.icon-card-style-1.is-fourth .icon-card-icon img {
filter: brightness(0) invert(1);
}
/* White / dark */
.icon-card-style-1.is-white .icon-card-wrap {
color: var(--text-color);
background-color: var(--white);
}
.icon-card-style-1.is-white .icon-card-title {
color: var(--heading-color);
}
.icon-card-style-1.is-white .icon-card-btn {
color: var(--primary);
}
.icon-card-style-1.is-white:hover .icon-card-wrap {
background-color: var(--light);
}
.icon-card-style-1.is-dark .icon-card-wrap,
.icon-card-style-1.is-dark .icon-card-title {
color: var(--white);
}
.icon-card-style-1.is-dark .icon-card-wrap {
background-color: var(--dark);
}
.icon-card-style-1.is-dark .icon-card-icon img {
filter: brightness(0) invert(1);
}
.icon-card-style-1.is-dark:hover .icon-card-wrap {
/* NF primary-1 is the DARK teal (ramp inverted) — keeps white text readable */
background-color: var(--primary-1);
}
/* =========================================================================
Icon Blocks - Style 1 (templates/icon_blocks.style_1.php)
4-up grid; description hidden on desktop until hover/focus (JS offsets
the content so it re-centers). Tokens are NF-compatible.
========================================================================= */
.icon-blocks-style-1 .icon-blocks-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) {
.icon-blocks-style-1 .icon-blocks-wrap {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 575px) {
.icon-blocks-style-1 .icon-blocks-wrap {
grid-template-columns: 1fr;
}
}
.icon-blocks-style-1 .icon-blocks-item:nth-of-type(even) .icon-blocks-item-wrap {
background-color: var(--light);
}
@media (max-width: 992px) and (min-width: 576px) {
.icon-blocks-style-1 .icon-blocks-item:nth-of-type(3) .icon-blocks-item-wrap {
background-color: var(--light);
}
.icon-blocks-style-1 .icon-blocks-item:nth-of-type(4) .icon-blocks-item-wrap {
background-color: var(--white);
}
}
.icon-blocks-style-1 .icon-blocks-item-wrap {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
height: 100%;
padding: 30px 30px 1px;
color: inherit;
text-align: center;
text-decoration: none;
background-color: var(--white);
}
.icon-blocks-style-1 .icon-blocks-item-img {
width: auto;
height: 65px;
margin-bottom: 20px;
transition: var(--transition-200);
}
.icon-blocks-style-1 .icon-blocks-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 52px;
color: var(--primary);
}
.icon-blocks-style-1 .icon-blocks-item-title {
margin-bottom: 10px;
font-size: 22px;
color: var(--heading-color);
word-break: break-word;
transition: var(--transition-200);
}
.icon-blocks-style-1 .icon-blocks-item-des {
font-size: 16px;
color: var(--text-color);
transition: var(--transition-200);
}
@media (min-width: 992px) {
.icon-blocks-style-1 .icon-blocks-item-des {
opacity: 0;
}
}
.icon-blocks-style-1 .icon-blocks-item-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon-blocks-style-1 .icon-blocks-item-wrap:hover .icon-blocks-item-img,
.icon-blocks-style-1 .icon-blocks-item-wrap:hover .icon-blocks-item-title,
.icon-blocks-style-1 .icon-blocks-item-wrap:hover .icon-blocks-item-des,
.icon-blocks-style-1 .icon-blocks-item-wrap:focus-within .icon-blocks-item-img,
.icon-blocks-style-1 .icon-blocks-item-wrap:focus-within .icon-blocks-item-title,
.icon-blocks-style-1 .icon-blocks-item-wrap:focus-within .icon-blocks-item-des {
opacity: 1;
transform: translateY(0) !important;
}
/* =========================================================================
Icon and Text - Style 1 (templates/icon_and_text.style_1.php)
========================================================================= */
.icon-text-style-1 .icon-text-wrap {
display: flex;
flex-wrap: wrap;
column-gap: 30px;
}
.icon-text-style-1 .icon-text-icon {
flex: 0 0 auto;
margin-bottom: 30px;
}
.icon-text-style-1 .icon-text-text {
flex: 1;
}
/* =========================================================================
Scrolling Gallery - Style 1 (templates/scrolling_gallery.style_1.php)
Two horizontal photo rows scrolling in opposite directions.
========================================================================= */
.scrolling-gallery-style-1 {
--scrolling-gallery-1-gap: 30px;
--scrolling-gallery-1-speed: 50s;
--scrolling-gallery-1-size: 360px;
overflow: hidden;
}
@media (max-width: 575px) {
.scrolling-gallery-style-1 {
--scrolling-gallery-1-gap: 15px;
}
}
.scrolling-gallery-style-1 .scrolling-gallery-wrap {
display: flex;
flex-direction: column;
gap: var(--scrolling-gallery-1-gap);
}
.scrolling-gallery-style-1 .scrolling-gallery-imgs {
display: flex;
gap: var(--scrolling-gallery-1-gap);
width: fit-content;
}
.scrolling-gallery-style-1 .scrolling-gallery-imgs:nth-child(2n+1) {
animation: scrollingGalleryStyle1Left var(--scrolling-gallery-1-speed) infinite linear;
}
.scrolling-gallery-style-1 .scrolling-gallery-imgs:nth-child(2n) {
align-self: flex-end;
animation: scrollingGalleryStyle1Right var(--scrolling-gallery-1-speed) infinite linear;
}
@media (prefers-reduced-motion: reduce) {
.scrolling-gallery-style-1 .scrolling-gallery-imgs {
animation: none !important;
}
}
.scrolling-gallery-style-1 .scrolling-gallery-img {
overflow: hidden;
position: relative;
width: var(--scrolling-gallery-1-size);
aspect-ratio: 16/9;
border-radius: var(--border-radius-md);
}
.scrolling-gallery-style-1 .scrolling-gallery-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes scrollingGalleryStyle1Left {
0% { transform: translateX(0); }
100% { transform: translateX(-33.3333%); }
}
@keyframes scrollingGalleryStyle1Right {
0% { transform: translateX(0); }
100% { transform: translateX(33.3333%); }
}
/* =========================================================================
Image Comparison - Style 1 (templates/image_comparison.style_1.php)
Before/after drag slider (OLD -> NEW). NF-compatible tokens.
========================================================================= */
.img-comp-style-1 {
margin-bottom: 30px;
}
.img-comp-style-1 .img-comp-wrap {
overflow: hidden;
position: relative;
}
.img-comp-style-1 .img-comp-img {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.img-comp-style-1 .img-comp-img img {
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
object-fit: cover;
}
.img-comp-style-1 .img-comp-img.img-comp-overlay img {
left: auto;
right: 0;
}
.img-comp-style-1 .img-comp-slider {
position: absolute;
top: 0;
width: 2px;
height: 100%;
cursor: ew-resize;
background-color: var(--white);
}
.img-comp-style-1 .img-comp-slider-wrap {
color: var(--text-color);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--white);
transform: translate(-50%, -50%);
transition: gap var(--transition-200);
}
.img-comp-style-1 .img-comp-slider-wrap svg {
height: 18px;
width: auto;
}
.img-comp-style-1 .img-comp-slider-wrap svg path {
stroke: var(--text-color);
stroke-width: 10;
}
.img-comp-style-1 .img-comp-slider-left,
.img-comp-style-1 .img-comp-slider-right {
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
font-size: 16px;
color: var(--white);
font-weight: var(--font-weight-semi-bold);
transform: translateY(-50%);
transition: var(--transition-200);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.img-comp-style-1 .img-comp-slider-left {
right: calc(100% + 2px);
}
.img-comp-style-1 .img-comp-slider-right {
left: calc(100% + 2px);
}
.img-comp-style-1 .img-comp-slider:hover .img-comp-slider-wrap {
gap: 12px;
}
.img-comp-style-1 .img-comp-slider:hover .img-comp-slider-left {
opacity: 1;
right: calc(100% + 10px);
}
.img-comp-style-1 .img-comp-slider:hover .img-comp-slider-right {
opacity: 1;
left: calc(100% + 10px);
}
/* =========================================================================
Categories List (templates/blogs/posts/posts_filters.categories.php)
RAMP NOTE: hover color remapped --primary-5 -> --primary (NF primary-5
is a LIGHT teal that reads poorly on white).
========================================================================= */
.categories-list-style-1 {
list-style-type: none;
padding: 5px 0;
border-radius: var(--border-radius);
background-color: var(--white);
box-shadow: var(--shadow-1);
}
.categories-list-style-1 li {
position: relative;
padding: 0 25px;
margin: 0;
}
.categories-list-style-1 li:after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 30px;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
background-color: transparent;
transform: translateY(-50%);
transition: background-color var(--transition-200);
}
.categories-list-style-1 li a,
.categories-list-style-1 li button {
display: flex;
align-items: center;
width: 100%;
padding: 15px 0;
color: var(--text-color);
font-size: 14px;
font-weight: var(--font-weight-bold);
text-transform: capitalize;
text-decoration: none;
}
.categories-list-style-1 li a i,
.categories-list-style-1 li button i {
font-size: 12px;
margin-right: 10px;
}
.categories-list-style-1 li a:hover,
.categories-list-style-1 li button:hover {
color: var(--primary);
}
.categories-list-style-1 li + li a,
.categories-list-style-1 li + li button {
border-top: 1px solid var(--border-color-dark);
}
.categories-list-style-1 li:hover:after {
background-color: var(--primary);
}
.categories-list-style-1 li.active,
.categories-list-style-1 li.selected {
background-color: var(--gray-2);
}
.categories-list-style-1 li.active:after,
.categories-list-style-1 li.selected:after {
background-color: var(--primary);
}
/* =========================================================================
Posts Carousel - Style 1 (templates/blogs/posts/posts_carousel.style_1.php)
"Latest news" slick carousel. NF-compatible tokens.
========================================================================= */
.posts-carousel .row > div[style]:not([class]),
.posts-carousel .row > .blogs_posts_list_ajax_position,
.posts-carousel .row > .blogs-show-more {
display: none !important;
}
.posts-carousel .posts-no-result {
max-width: 300px;
padding: 30px 50px;
margin: 0 auto;
font-size: 22px;
text-align: center;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
.posts-carousel .blogs-post-crop-icon {
display: none !important;
}
.posts-carousel-style-1 .slick-track {
display: flex;
}
.posts-carousel-style-1 .posts-carousel-wrap {
opacity: 0;
transition: opacity var(--transition-500);
}
.posts-carousel-style-1 .posts-carousel-wrap.slick-initialized {
opacity: 1;
}
.posts-carousel-style-1 .posts-carousel-item {
height: auto;
margin: 15px;
}
.posts-carousel-style-1 .posts-carousel-item-wrap {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
border-radius: var(--border-radius);
background-color: var(--white);
box-shadow: var(--shadow-1);
transition: var(--transition-200);
}
.posts-carousel-style-1 .posts-carousel-item-img {
display: block;
overflow: hidden;
position: relative;
aspect-ratio: 5/4;
background-color: var(--gray-2);
}
.posts-carousel-style-1 .posts-carousel-item-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-200);
}
.posts-carousel-style-1 .posts-carousel-item-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 30px 30px 1px;
}
.posts-carousel-style-1 .posts-carousel-item-title {
margin-bottom: 15px;
font-size: 20px;
}
.posts-carousel-style-1 .posts-carousel-item-date {
display: none;
margin-bottom: 15px;
font-size: 14px;
}
.posts-carousel-style-1 .posts-carousel-item-date i {
margin-right: 5px;
}
.posts-carousel-style-1 .posts-carousel-item-des {
font-size: 16px;
}
.posts-carousel-style-1 .posts-carousel-item-btn {
display: none;
margin-top: auto;
}
.posts-carousel-style-1.show-date .posts-carousel-item-date {
display: block;
}
.posts-carousel-style-1.show-btn .posts-carousel-item-btn {
display: block;
}
.posts-carousel-style-1 .posts-carousel-item-wrap:hover {
box-shadow: 0 7px 8px rgba(0, 0, 0, 0.15);
}
.posts-carousel-style-1 .posts-carousel-item-wrap:hover .posts-carousel-item-img img {
transform: scale(1.05);
}
/* =========================================================================
Social Media - Style 1 (templates/social_media.style_1.php)
Token bridge: this component (from brent11) uses --sns-gap-* / -circle-gap-*
/ -square-gap-*, but this site's root.css names them --sns-*-margin-*.
Bridge them here so the ported CSS works unchanged.
RAMP ADAPTED: teal/gold circle/square fills get DARK icons (white on the
light teal/gold fails contrast); red/rose/dark get white.
========================================================================= */
:root {
--sns-gap-sm: var(--sns-margin-sm);
--sns-gap-md: var(--sns-margin-md);
--sns-gap-lg: var(--sns-margin-lg);
--sns-circle-gap-sm: var(--sns-circle-margin-sm);
--sns-circle-gap-md: var(--sns-circle-margin-md);
--sns-circle-gap-lg: var(--sns-circle-margin-lg);
--sns-square-gap-sm: var(--sns-square-margin-sm);
--sns-square-gap-md: var(--sns-square-margin-md);
--sns-square-gap-lg: var(--sns-square-margin-lg);
}
.sns-style-1 ul {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 5px;
column-gap: var(--sns-gap-md);
}
.sns-style-1 ul li:before { content: none; }
.sns-style-1 a {
display: block;
overflow: hidden;
position: relative;
text-decoration: none;
color: var(--sns-color);
font-size: var(--sns-font-size-md);
}
.sns-style-1 a > i {
display: block;
transition: var(--transition-200);
}
.sns-style-1 a > i:first-of-type {
transform: translateY(0%);
}
.sns-style-1 a > i:last-of-type {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transform: translate(-50%, 100%);
}
.sns-style-1 a:hover {
color: var(--sns-color-hover);
}
.sns-style-1 a:hover > i:first-of-type {
opacity: 0;
transform: translateY(-100%);
}
.sns-style-1 a:hover > i:last-of-type {
opacity: 1;
transform: translate(-50%, -50%);
}
/* Circle (default icon color = dark, since the default fill is light teal) */
.sns-style-1.is-circle ul { column-gap: var(--sns-circle-gap-md); }
.sns-style-1.is-circle a {
display: flex;
align-items: center;
justify-content: center;
width: var(--sns-circle-size-md);
height: var(--sns-circle-size-md);
font-size: var(--sns-circle-font-size-md);
color: var(--text-color-on-primary);
line-height: 1;
border-radius: 50%;
background-color: var(--sns-circle-bg);
}
.sns-style-1.is-circle a:hover {
color: var(--text-color-on-primary);
background-color: var(--sns-circle-bg-hover);
}
/* Square */
.sns-style-1.is-square ul { column-gap: var(--sns-square-gap-md); }
.sns-style-1.is-square a {
display: flex;
align-items: center;
justify-content: center;
width: var(--sns-square-size-md);
height: var(--sns-square-size-md);
font-size: var(--sns-square-font-size-md);
color: var(--text-color-on-primary);
line-height: 1;
background-color: var(--sns-square-bg);
}
.sns-style-1.is-square a:hover {
color: var(--text-color-on-primary);
background-color: var(--sns-square-bg-hover);
}
.sns-style-1.is-square.is-rounded a {
border-radius: var(--sns-rounded-square-radius);
}
/* Sizes */
.sns-style-1.is-sm ul { column-gap: var(--sns-gap-sm); }
.sns-style-1.is-sm a { font-size: var(--sns-font-size-sm); }
.sns-style-1.is-sm.is-circle ul { column-gap: var(--sns-circle-gap-sm); }
.sns-style-1.is-sm.is-circle a { width: var(--sns-circle-size-sm); height: var(--sns-circle-size-sm); font-size: var(--sns-circle-font-size-sm); }
.sns-style-1.is-sm.is-square ul { column-gap: var(--sns-square-gap-sm); }
.sns-style-1.is-sm.is-square a { width: var(--sns-square-size-sm); height: var(--sns-square-size-sm); font-size: var(--sns-square-font-size-sm); }
.sns-style-1.is-md ul { column-gap: var(--sns-gap-md); }
.sns-style-1.is-md a { font-size: var(--sns-font-size-md); }
.sns-style-1.is-md.is-circle ul { column-gap: var(--sns-circle-gap-md); }
.sns-style-1.is-md.is-circle a { width: var(--sns-circle-size-md); height: var(--sns-circle-size-md); font-size: var(--sns-circle-font-size-md); }
.sns-style-1.is-md.is-square ul { column-gap: var(--sns-square-gap-md); }
.sns-style-1.is-md.is-square a { width: var(--sns-square-size-md); height: var(--sns-square-size-md); font-size: var(--sns-square-font-size-md); }
.sns-style-1.is-lg ul { column-gap: var(--sns-gap-lg); }
.sns-style-1.is-lg a { font-size: var(--sns-font-size-lg); }
.sns-style-1.is-lg.is-circle ul { column-gap: var(--sns-circle-gap-lg); }
.sns-style-1.is-lg.is-circle a { width: var(--sns-circle-size-lg); height: var(--sns-circle-size-lg); font-size: var(--sns-circle-font-size-lg); }
.sns-style-1.is-lg.is-square ul { column-gap: var(--sns-square-gap-lg); }
.sns-style-1.is-lg.is-square a { width: var(--sns-square-size-lg); height: var(--sns-square-size-lg); font-size: var(--sns-square-font-size-lg); }
/* Alignment */
.sns-style-1.is-left ul { justify-content: flex-start; }
.sns-style-1.is-center ul { justify-content: center; }
.sns-style-1.is-right ul { justify-content: flex-end; }
.sns-style-1.is-stretch ul { justify-content: space-between; }
/* Color variants — icons on filled shapes follow contrast, not brent11's white default */
.sns-style-1.is-primary a { color: var(--primary); }
.sns-style-1.is-primary a:hover { color: var(--primary-3); }
.sns-style-1.is-primary.is-circle a, .sns-style-1.is-primary.is-square a { color: var(--text-color-on-primary); background-color: var(--primary); }
.sns-style-1.is-primary.is-circle a:hover, .sns-style-1.is-primary.is-square a:hover { color: var(--text-color-on-primary); background-color: var(--primary-6); }
.sns-style-1.is-secondary a { color: var(--secondary); }
.sns-style-1.is-secondary a:hover { color: var(--secondary-3); }
.sns-style-1.is-secondary.is-circle a, .sns-style-1.is-secondary.is-square a { color: var(--text-color-on-secondary); background-color: var(--secondary); }
.sns-style-1.is-secondary.is-circle a:hover, .sns-style-1.is-secondary.is-square a:hover { color: var(--text-color-on-secondary); background-color: var(--secondary-3); }
.sns-style-1.is-third a { color: var(--third-2); }
.sns-style-1.is-third a:hover { color: var(--third-3); }
.sns-style-1.is-third.is-circle a, .sns-style-1.is-third.is-square a { color: var(--text-color-on-third); background-color: var(--third); }
.sns-style-1.is-third.is-circle a:hover, .sns-style-1.is-third.is-square a:hover { color: var(--text-color-on-third); background-color: var(--third-6); }
.sns-style-1.is-fourth a { color: var(--fourth); }
.sns-style-1.is-fourth a:hover { color: var(--fourth-3); }
.sns-style-1.is-fourth.is-circle a, .sns-style-1.is-fourth.is-square a { color: var(--text-color-on-fourth); background-color: var(--fourth); }
.sns-style-1.is-fourth.is-circle a:hover, .sns-style-1.is-fourth.is-square a:hover { color: var(--text-color-on-fourth); background-color: var(--fourth-3); }
.sns-style-1.is-white a { color: var(--white); }
.sns-style-1.is-white a:hover { color: var(--primary-3); }
.sns-style-1.is-white.is-circle a, .sns-style-1.is-white.is-square a { color: var(--text-color); background-color: var(--white); }
.sns-style-1.is-white.is-circle a:hover, .sns-style-1.is-white.is-square a:hover { color: var(--text-color); background-color: var(--gray-2); }
.sns-style-1.is-light a { color: var(--gray-6); }
.sns-style-1.is-light a:hover { color: var(--primary-3); }
.sns-style-1.is-light.is-circle a, .sns-style-1.is-light.is-square a { color: var(--text-color); background-color: var(--light); }
.sns-style-1.is-light.is-circle a:hover, .sns-style-1.is-light.is-square a:hover { color: var(--text-color); background-color: var(--gray-3); }
.sns-style-1.is-dark a { color: var(--dark); }
.sns-style-1.is-dark a:hover { color: var(--primary-3); }
.sns-style-1.is-dark.is-circle a, .sns-style-1.is-dark.is-square a { color: var(--white); background-color: var(--dark); }
.sns-style-1.is-dark.is-circle a:hover, .sns-style-1.is-dark.is-square a:hover { color: var(--white); background-color: var(--primary-1); }
/* =========================================================================
Cookie Banner - Style 1 (templates/cookie_banner.style_1.php)
Notice-only banner. NF-compatible tokens. (The decline-button repaint
rules from the source are omitted — notice-only has one button.)
========================================================================= */
.cookie-banner { position: relative; }
.cookie-banner-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1050;
visibility: hidden;
opacity: 0;
transform: translateY(100%);
pointer-events: none;
transition: transform var(--transition-400), opacity var(--transition-400), visibility 0s linear var(--transition-400);
}
.cookie-banner.top .cookie-banner-container {
top: 0;
bottom: auto;
transform: translateY(-100%);
}
.cookie-banner.active .cookie-banner-container {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: transform var(--transition-400), opacity var(--transition-400), visibility 0s;
}
.cookie-banner-dialog {
position: relative;
background: linear-gradient(135deg, var(--gray-9) 0%, var(--gray-8) 100%);
color: var(--white);
border-top: 3px solid var(--primary);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
}
.cookie-banner.light .cookie-banner-dialog {
background: var(--white);
color: var(--dark);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
}
.cookie-banner.top .cookie-banner-dialog {
border-top: none;
border-bottom: 3px solid var(--primary);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.cookie-banner.top.light .cookie-banner-dialog {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.cookie-banner-inner {
position: relative;
display: flex;
align-items: center;
gap: 24px;
max-width: 1200px;
margin: 0 auto;
padding: 18px 56px 18px 24px;
font-family: var(--font-family-sans-serif);
}
.cookie-banner-inner p { margin: 0; }
.cookie-icon {
flex: 0 0 auto;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
font-size: 24px;
color: currentColor;
}
.cookie-banner.light .cookie-icon {
/* NF primary-1 is dark; use the light teal (primary-7) for the badge bg */
background: var(--primary-7);
color: var(--primary);
}
.cookie-content {
flex: 1 1 auto;
min-width: 0;
max-width: 720px;
}
.cookie-message {
line-height: 1.55;
font-size: 0.9375rem;
opacity: 0.92;
}
.cookie-policy-link {
display: inline-block;
margin-top: 6px;
font-size: 0.875rem;
font-weight: 500;
color: inherit;
opacity: 0.85;
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity var(--transition-200);
}
.cookie-policy-link:hover,
.cookie-policy-link:focus-visible {
opacity: 1;
color: inherit;
outline: none;
}
.cookie-banner.light .cookie-policy-link:hover,
.cookie-banner.light .cookie-policy-link:focus-visible {
color: var(--primary);
}
.cookie-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex-shrink: 0;
align-items: center;
}
.cookie-actions .btn { margin: 0; }
.cookie-close-btn {
position: absolute;
top: 10px;
right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: currentColor;
cursor: pointer;
border-radius: 50%;
opacity: 0.6;
font-size: 14px;
transition: opacity var(--transition-200), background-color var(--transition-200);
}
.cookie-close-btn:hover,
.cookie-close-btn:focus-visible {
opacity: 1;
background: rgba(255, 255, 255, 0.12);
outline: none;
}
.cookie-banner.light .cookie-close-btn:hover,
.cookie-banner.light .cookie-close-btn:focus-visible {
background: rgba(0, 0, 0, 0.06);
}
@media (max-width: 768px) {
.cookie-banner-inner {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "icon content" "actions actions";
column-gap: 14px;
row-gap: 14px;
padding: 16px 48px 16px 16px;
}
.cookie-icon { grid-area: icon; align-self: start; width: 40px; height: 40px; font-size: 18px; }
.cookie-content { grid-area: content; max-width: none; }
.cookie-actions { grid-area: actions; width: 100%; }
.cookie-message { font-size: 0.9rem; }
}
/* =========================================================================
Resources List - Style 1 (templates/blogs/posts/resources_list.style_1.php)
Ported from thememembercommons skin.css (the component's CSS was NOT inline).
Includes .items-list-style-1 (cards/grid/list) + .res-list-style-1 (banner,
toolbar, filters, sticky bar, file-type badges, button-label visibility).
style-2-only rules dropped; ramp fix: list-row hover --primary-1 -> --primary-7.
========================================================================= */
/*
|-----------------------------------------------------------------------------------------
|
|
| Image Card - Style 3 - End
|
|
|-----------------------------------------------------------------------------------------
*/
/*!
|-----------------------------------------------------------------------------------------
|
|
| Items List - Style 1 - Start
|
|
|-----------------------------------------------------------------------------------------
*/
.items-list-style-1 a {
text-decoration: none;
}
.items-list-style-1 .item-wrap {
display: none;
}
.items-list-style-1 .badge-type {
text-transform: capitalize;
}
.items-list-style-1.grid-view p {
margin-bottom: 15px;
}
.items-list-style-1.grid-view .item {
margin-bottom: 30px;
}
.items-list-style-1.grid-view .item-wrap.is-grid {
display: block;
position: relative;
height: 100%;
overflow: hidden;
border-radius: 0 0 var(--border-radius) var(--border-radius);
border-top: 3px solid var(--secondary);
background-color: var(--white);
box-shadow: var(--shadow-1);
transition: box-shadow var(--transition-200);
}
.items-list-style-1.grid-view .item-wrap.is-grid:hover {
box-shadow: var(--shadow-1-hover);
}
/* Featured Resource star (native "Featured Resources" category) — grid view only */
.items-list-style-1 .rl-featured-star {
display: none;
}
.items-list-style-1.grid-view .item.is-cat-featured .rl-featured-star {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--warning);
color: var(--gray-9);
font-size: 14px;
line-height: 1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.items-list-style-1.grid-view .item-img {
overflow: hidden;
position: relative;
height: 100%;
padding-bottom: 56%;
/* Due to side-by-side layout, use padding instead of aspect-ratio */
background-color: var(--light);
}
.items-list-style-1.grid-view .item-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.items-list-style-1.grid-view .item-top-right {
padding: 25px 25px 5px;
}
.items-list-style-1.grid-view .item-bottom {
padding: 10px 25px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
background-color: var(--light);
}
.items-list-style-1.grid-view .item-title {
margin-bottom: 10px;
word-break: break-word;
font-size: 20px;
}
.items-list-style-1.grid-view .item-date {
font-size: 12px;
margin-bottom: 10px;
color: var(--text-color-light);
}
.items-list-style-1.grid-view .item-metas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.items-list-style-1.grid-view .item-des {
font-size: 14px;
}
.items-list-style-1.grid-view .item-btn {
font-size: 14px;
font-weight: var(--font-weight-bold);
line-height: 1;
}
.items-list-style-1.grid-view .item-btn i {
font-size: 12px;
margin-left: 5px;
}
@media (min-width: 576px) {
.items-list-style-1.grid-view .item-wrap.is-grid {
display: flex;
flex-direction: column;
}
.items-list-style-1.grid-view .item-top {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.items-list-style-1.grid-view .item-top-left {
width: 100%;
max-width: 36%;
flex: 0 0 36%;
}
.items-list-style-1.grid-view .item-top-right {
flex: 1;
}
}
.items-list-style-1.grid-view .item[data-type=doc] .item-top-left,
.items-list-style-1.grid-view .item[data-type=document] .item-top-left,
.items-list-style-1.grid-view .item[data-type=video] .item-top-left,
.items-list-style-1.grid-view .item[data-type=unknown] .item-top-left,
.items-list-style-1.grid-view .item[data-type=other] .item-top-left {
display: none;
}
.items-list-style-1.list-view {
font-size: 14px;
}
.items-list-style-1.list-view p {
margin-bottom: 0;
}
.items-list-style-1.list-view .items-list-wrap {
overflow: hidden;
border-radius: var(--border-radius);
background-color: var(--white);
box-shadow: var(--shadow-1);
}
.items-list-style-1.list-view .item-title {
font-size: 16px;
margin-bottom: 0;
}
.items-list-style-1.list-view .item-btn i {
font-size: 16px;
}
.items-list-style-1.list-view .items-list-wrap {
display: table;
table-layout: auto;
border-collapse: collapse;
vertical-align: middle;
width: 100%;
}
.items-list-style-1.list-view .item {
display: table-row-group;
vertical-align: inherit;
transition: background-color linear 100ms;
}
.items-list-style-1.list-view .item:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05);
}
.items-list-style-1.list-view .item:hover {
background-color: var(--primary-7);/* ramp: NF primary-1 is dark */
}
.items-list-style-1.list-view .item-wrap.is-list {
display: table-row;
vertical-align: inherit;
}
.items-list-style-1.list-view .item-title,
.items-list-style-1.list-view .item-date,
.items-list-style-1.list-view .item-metas,
.items-list-style-1.list-view .item-des,
.items-list-style-1.list-view .item-btn {
display: table-cell;
width: auto;
padding: 12px 10px;
vertical-align: inherit;
}
.items-list-style-1.list-view .item-date,
.items-list-style-1.list-view .item-metas,
.items-list-style-1.list-view .item-btn {
width: 0;
white-space: nowrap;
}
.items-list-style-1.list-view .item-title {
padding-left: 20px;
}
@media (max-width: 767px) {
.items-list-style-1.list-view .item-date {
display: none;
}
}
@media (max-width: 575px) {
.items-list-style-1.list-view .item-metas {
display: none;
}
}
.items-list-style-1.list-view .item-des {
max-width: 300px;
}
@media (max-width: 991px) {
.items-list-style-1.list-view .item-des {
display: none;
}
}
.items-list-style-1.list-view .item-btn {
padding-right: 20px;
}
/*
|-----------------------------------------------------------------------------------------
|
|
| Posts List - Style 3 (Featured + Grid) - End
|
|
|-----------------------------------------------------------------------------------------
*/
/*!
|-----------------------------------------------------------------------------------------
|
|
| Resources List - Style 1 - Start
|
|
|-----------------------------------------------------------------------------------------
*/
.res-list-style-1 {
--form-subcontrol-color: var(--text-color);
--form-subcontrol-color-hover: var(--text-color);
--form-subcontrol-bg: trasparent;
--form-subcontrol-bg-hover: trasparent;
}
.res-list-style-1 .res-list-banner-wrap {
position: relative;
}
.res-list-style-1 .banner-img {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.res-list-style-1 .banner-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.res-list-style-1 .banner-img:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.res-list-style-1 .banner-inner {
position: relative;
padding: 180px 0 80px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.4);
}
@media (max-width: 575px) {
.res-list-style-1 .banner-inner {
padding: 80px 0 30px;
}
}
.res-list-style-1 .banner-title {
color: var(--white);
font-size: 60px;
text-align: center;
}
@media (max-width: 991px) {
.res-list-style-1 .banner-title {
font-size: calc(60px * 0.85);
}
}
.res-list-style-1 .banner-des {
color: var(--white);
font-size: 18px;
text-align: center;
max-width: 500px;
margin: 0 auto 60px;
}
.res-list-style-1 .banner-des:empty {
display: none;
}
.res-list-style-1 .res-list-banner.is-img-center .banner-img img {
-o-object-position: center;
object-position: center;
}
.res-list-style-1 .res-list-banner.is-img-top .banner-img img {
-o-object-position: center top;
object-position: center top;
}
.res-list-style-1 .res-list-banner.is-img-bottom .banner-img img {
-o-object-position: center bottom;
object-position: center bottom;
}
.res-list-style-1 .filters-list {
text-shadow: none;
}
.res-list-style-1 .toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 20px 0;
margin-bottom: 30px;
border-bottom: 1px solid var(--border-color-dark);
}
.res-list-style-1 .toolbar-left,
.res-list-style-1 .toolbar-right {
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 991px) {
.res-list-style-1 .toolbar-right {
width: 100%;
}
}
.res-list-style-1 .toolbar-divider {
height: 27px;
width: 1px;
background-color: var(--border-color-dark);
}
.res-list-style-1 .toolbar-count {
font-size: 18px;
margin-bottom: 0;
}
.res-list-style-1 .toolbar-view {
display: flex;
align-items: center;
gap: 5px;
}
.res-list-style-1 .toolbar-view button {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
width: 36px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.07);
}
.res-list-style-1 .toolbar-view svg {
width: 16px;
height: auto;
}
.res-list-style-1 .toolbar-view svg path {
fill: var(--text-color);
transition: fill var(--transition-200);
}
.res-list-style-1 .toolbar-view button:hover,
.res-list-style-1 .toolbar-view button.active {
background-color: rgba(0, 0, 0, 0.8);
}
.res-list-style-1 .toolbar-view button:hover svg path,
.res-list-style-1 .toolbar-view button.active svg path {
fill: var(--white);
}
.res-list-style-1 .toolbar-sort {
--form-font-size: 14px;
--form-input-height: 36px;
--form-border-radius: 3px;
--form-bg: rgba(0,0,0,0.07);
--form-bg-hover: rgba(0,0,0,0.8);
--form-text-color-hover: var(--white);
--form-subcontrol-color-hover: var(--white);
--form-shadow: none;
--form-shadow-focus: none;
flex: 1;
font-size: 14px;
}
.res-list-style-1 .toolbar-sort .mwInput {
min-width: 150px;
}
.is-focus-keyboard .res-list-style-1 .toolbar-sort .mwInput.focus {
outline: var(--outline);
}
.res-list-style-1 .items-list {
margin-bottom: 30px;
}
.res-list-style-1 .items-list.grid-view .items-list-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (max-width: 1199px) {
.res-list-style-1 .items-list.grid-view .items-list-wrap {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.res-list-style-1 .items-list.grid-view .items-list-wrap {
grid-template-columns: 1fr;
}
}
.res-list-style-1 .items-list.grid-view .items-list-wrap .item {
margin-bottom: 0;
}
/*
plus a "Clear all" button. */
.res-list-style-1 .rl-active-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
padding: 10px 14px;
background: var(--gray-1);
border: 1px solid var(--gray-2);
border-radius: 10px;
}
.res-list-style-1 .rl-active-filters[hidden] { display: none; }
.res-list-style-1 .rl-active-filters-label {
flex: 0 0 auto;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gray-6);
}
.res-list-style-1 .rl-active-filters-chips {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.res-list-style-1 .rl-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 4px 4px 12px;
font-size: 13px;
background: var(--white);
border: 1px solid var(--gray-3);
border-radius: 999px;
color: var(--primary-7);
white-space: nowrap;
}
.res-list-style-1 .rl-filter-chip-featured {
background: var(--warning-1);
border-color: var(--warning-3);
color: var(--warning-7);
}
.res-list-style-1 .rl-filter-chip-featured i {
color: var(--type-image);
}
.res-list-style-1 .rl-chip-label {
color: var(--gray-6);
font-weight: 500;
}
.res-list-style-1 .rl-filter-chip strong {
font-weight: 700;
}
.res-list-style-1 .rl-chip-close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0;
padding: 0;
font-size: 18px;
font-weight: 400;
line-height: 1;
color: var(--gray-6);
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.res-list-style-1 .rl-chip-close:hover {
background: var(--gray-2);
color: var(--primary-7);
}
.res-list-style-1 .rl-active-filters-clear {
flex: 0 0 auto;
margin-left: auto;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
color: var(--primary-4);
background: transparent;
border: 0;
cursor: pointer;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.res-list-style-1 .rl-active-filters-clear:hover {
color: var(--primary-5);
}
/* Resources List - Style 1 — inline action row (Featured-only + Reset).
Replaces the previous split between the featured row and a separate
footer row containing the Reset button. */
.res-list-style-1 .rl-filter-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 14px;
}
.res-list-style-1 .rl-filter-actions .btn {
margin-left: auto;
}
.res-list-style-1 .rl-filter-actions .checkbox-toggle {
margin-bottom: 0;
}
/* Toolbar sort dropdown — small select alongside view toggle */
.res-list-style-1 .toolbar-sort select {
padding: 4px 8px;
font-size: 13px;
border: 1px solid var(--gray-3);
border-radius: 0; /* square — match the site's standard inputs (QA) */
background: var(--white);
}
/* "No results" message */
.res-list-style-1 .rl-no-results {
margin: 30px 0;
padding: 24px;
text-align: center;
font-size: 15px;
color: var(--gray-6);
background: var(--gray-1);
border: 1px dashed var(--gray-3);
border-radius: 8px;
}
/* Resources List - Style 1 — Video modal (opens when a Video item is clicked) */
.rl-video-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.rl-video-modal[aria-hidden="false"] {
display: flex;
}
.rl-video-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .85);
cursor: pointer;
}
.rl-video-modal-dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 960px;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.rl-video-modal-close {
position: absolute;
top: -44px;
right: -4px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 300;
line-height: 1;
color: var(--white);
background: transparent;
border: 0;
cursor: pointer;
border-radius: 50%;
transition: background-color .15s ease;
}
.rl-video-modal-close:hover {
background: rgba(255, 255, 255, .15);
}
.rl-video-modal .rl-video-modal-title {
margin: 0 0 8px;
padding: 0 0 0 2px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var(--white);
letter-spacing: .02em;
}
.rl-video-modal .rl-video-modal-title:empty {
display: none;
}
.rl-video-modal-frame {
position: relative;
background: var(--black);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
/* Hide all three media elements by default; the active mode controls
which one shows. */
.rl-video-modal-video,
.rl-video-modal-iframe,
.rl-video-modal-image { display: none; }
/* Mode: video file */
.rl-video-modal[data-mode="video"] .rl-video-modal-video {
display: block;
width: 100%;
height: auto;
max-height: 80vh;
background: var(--black);
outline: none;
}
/* Mode: iframe (YouTube / Vimeo / etc.) — 16:9 aspect-ratio */
.rl-video-modal[data-mode="iframe"] .rl-video-modal-iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
/* fallback if browser doesn't support aspect-ratio */
height: 56.25vw;
max-height: 80vh;
background: var(--black);
border: 0;
}
@supports (aspect-ratio: 16 / 9) {
.rl-video-modal[data-mode="iframe"] .rl-video-modal-iframe {
height: auto;
}
}
/* Mode: image — fit-contain inside dialog */
.rl-video-modal[data-mode="image"] .rl-video-modal-frame {
background: transparent;
box-shadow: none;
text-align: center;
}
.rl-video-modal[data-mode="image"] .rl-video-modal-image {
display: block;
max-width: 100%;
max-height: calc(100vh - 120px);
width: auto;
height: auto;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
object-fit: contain;
}
/* Lock body scroll when modal is open */
body.rl-modal-open {
overflow: hidden;
}
/*
)
Video → "Watch Video" + play icon
Audio → "Listen" + headphones icon
Image → "View" + eye icon
Link / has external link → "Open Link" + outbound arrow
Anything else → "Download" + download icon (default)
Source order matters — later rules override earlier ones for ties. */
/* 1. Default state: only "Download" label + icon are visible */
.res-list-style-1 .item-btn-label-read,
.res-list-style-1 .item-btn-label-watch,
.res-list-style-1 .item-btn-label-listen,
.res-list-style-1 .item-btn-label-view,
.res-list-style-1 .item-btn-label-link,
.res-list-style-1 .item-btn-icon-read,
.res-list-style-1 .item-btn-icon-watch,
.res-list-style-1 .item-btn-icon-listen,
.res-list-style-1 .item-btn-icon-view,
.res-list-style-1 .item-btn-icon-link { display: none; }
/* 2. Article → Read Article */
.res-list-style-1 .item[data-file-type="Article"] .item-btn-label-download,
.res-list-style-1 .item[data-file-type="Article"] .item-btn-icon-download { display: none; }
.res-list-style-1 .item[data-file-type="Article"] .item-btn-label-read,
.res-list-style-1 .item[data-file-type="Article"] .item-btn-icon-read { display: inline-block; }
/* 3. Video → Watch Video */
.res-list-style-1 .item[data-file-type="Video"] .item-btn-label-download,
.res-list-style-1 .item[data-file-type="Video"] .item-btn-icon-download { display: none; }
.res-list-style-1 .item[data-file-type="Video"] .item-btn-label-watch,
.res-list-style-1 .item[data-file-type="Video"] .item-btn-icon-watch { display: inline-block; }
/* 4. Audio → Listen */
.res-list-style-1 .item[data-file-type="Audio"] .item-btn-label-download,
.res-list-style-1 .item[data-file-type="Audio"] .item-btn-icon-download { display: none; }
.res-list-style-1 .item[data-file-type="Audio"] .item-btn-label-listen,
.res-list-style-1 .item[data-file-type="Audio"] .item-btn-icon-listen { display: inline-block; }
/* 5. Image → View */
.res-list-style-1 .item[data-file-type="Image"] .item-btn-label-download,
.res-list-style-1 .item[data-file-type="Image"] .item-btn-icon-download { display: none; }
.res-list-style-1 .item[data-file-type="Image"] .item-btn-label-view,
.res-list-style-1 .item[data-file-type="Image"] .item-btn-icon-view { display: inline-block; }
/* 6. Link OR has external link → "Open Link" wins over everything above */
.res-list-style-1 .item[data-file-type="Link"] .item-btn-label-download,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-label-read,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-label-watch,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-label-listen,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-label-view,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-icon-download,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-icon-read,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-icon-watch,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-icon-listen,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-icon-view,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-label-download,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-label-read,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-label-watch,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-label-listen,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-label-view,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-icon-download,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-icon-read,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-icon-watch,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-icon-listen,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-icon-view { display: none; }
.res-list-style-1 .item[data-file-type="Link"] .item-btn-label-link,
.res-list-style-1 .item[data-file-type="Link"] .item-btn-icon-link,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-label-link,
.res-list-style-1 .item[data-external-link]:not([data-external-link=""]) .item-btn-icon-link { display: inline-block; }
/*
only revealed when data-featured="1". */
.res-list-style-1 .item-img { position: relative; }
.res-list-style-1 .item-featured-flag,
.res-list-style-1 .item-meta-featured { display: none; }
.res-list-style-1 .item[data-featured="1"] .item-featured-flag {
position: absolute;
top: 8px;
left: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--white);
background: var(--type-image);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
line-height: 1.4;
pointer-events: none;
z-index: 2;
}
.res-list-style-1 .item[data-featured="1"] .item-featured-flag i { font-size: 10px; }
/* Featured meta badge (gold) — shows in the meta row alongside other badges */
.res-list-style-1 .item[data-featured="1"] .item-meta-featured {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--type-image);
color: var(--white);
}
/* Featured items get the corner star only (see .rl-featured-star) — no gold
outline/glow and no corner override, so featured cards match the others
(square red top, rounded bottom). */
/* Resources List - Style 1 — meta badges (Resource Type / File Type / Topic) */
.res-list-style-1 .item-meta-resource-type {
background: var(--primary-1);
color: var(--white);
}
.res-list-style-1 .item-meta-file-type {
/* base color provided by .mp-recent-file-type-* modifier */
color: var(--white);
}
.res-list-style-1 .item-meta-topic {
background: transparent;
color: var(--gray-6);
box-shadow: inset 0 0 0 1px var(--gray-3);
}
/* Auto-hide any meta badge that wasn't filled in for a given post */
.res-list-style-1 .item-meta-resource-type:empty,
.res-list-style-1 .item-meta-topic:empty,
.res-list-style-1 .item-meta-file-type:empty { display: none; }
/* Hide the file-type badge when the placeholder value didn't get replaced */
.res-list-style-1 .mp-recent-file-type:not([class*="mp-recent-file-type-"]) { display: none; }
/* Resources List - Simple — fields from custom_tab_resources.php */
.res-list-style-simple .mp-recent-list li {
flex-wrap: wrap;
row-gap: 4px;
font-size: 15px;
padding: 14px 0;
}
.res-list-style-simple .mp-recent-type {
font-size: 12px;
}
.res-list-style-simple .mp-recent-date {
font-size: 13px;
}
.res-list-style-simple .mp-card-badge {
font-size: 11px;
padding: 3px 10px;
}
.res-list-style-simple .mp-recent-action-icon {
font-size: 13px;
}
.res-list-style-simple .mp-recent-link {
flex: 1 1 auto;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-7);
font-weight: 600;
text-decoration: none;
}
.res-list-style-simple .mp-recent-link:hover {
color: var(--primary-5);
text-decoration: underline;
}
.res-list-style-simple .mp-recent-title-text {
overflow: hidden;
text-overflow: ellipsis;
}
.res-list-style-simple .mp-recent-download-icon {
flex: 0 0 auto;
font-size: 11px;
color: var(--gray-5);
}
/* File Type badge — color-coded by custom_post_file_type. All colors
resolve to root.css palette tokens so site-wide theme changes flow
through automatically. Mappings chosen for closest hue/value match
to the previous tailwind-derived palette. */
.mp-recent-file-type {
background: var(--gray-6);
color: var(--white);
}
.mp-recent-file-type-Document { background: var(--primary-4); color: var(--white); }
.mp-recent-file-type-PDF { background: var(--danger); color: var(--white); }
.mp-recent-file-type-Spreadsheet { background: var(--success); color: var(--white); }
.mp-recent-file-type-Presentation { background: var(--third-4); color: var(--white); }
.mp-recent-file-type-Image { background: var(--teal); color: var(--white); }
.mp-recent-file-type-Video { background: var(--purple); color: var(--white); }
.mp-recent-file-type-Audio { background: var(--pink); color: var(--white); }
.mp-recent-file-type-Archive { background: var(--warning-7); color: var(--white); }
.mp-recent-file-type-Link { background: var(--info-3); color: var(--white); }
.mp-recent-file-type-Other { background: var(--gray-6); color: var(--white); }
/* Featured star (Resources List - Simple) — CSS-driven via data-featured */
.res-list-style-simple .mp-recent-featured { display: none; }
.res-list-style-simple .mp-recent-item[data-featured="1"] .mp-recent-featured {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 11px;
color: var(--white);
background: var(--type-image);
border-radius: 50%;
/* RGB matches --type-image (#E5AF36); inlined for the alpha layer. */
box-shadow: 0 0 0 3px rgba(229, 175, 54, .15);
}
/* Action icon next to the title — swaps based on file format */
.res-list-style-simple .mp-recent-action-icon {
flex: 0 0 auto;
font-size: 11px;
color: var(--gray-5);
}
/* 1. Default: only the download icon is visible */
.res-list-style-simple .mp-recent-action-icon-read,
.res-list-style-simple .mp-recent-action-icon-watch,
.res-list-style-simple .mp-recent-action-icon-listen,
.res-list-style-simple .mp-recent-action-icon-view,
.res-list-style-simple .mp-recent-action-icon-link { display: none; }
/* 2. Article → read */
.res-list-style-simple .mp-recent-item[data-file-type="Article"] .mp-recent-action-icon-download { display: none; }
.res-list-style-simple .mp-recent-item[data-file-type="Article"] .mp-recent-action-icon-read { display: inline-block; }
/* 3. Video → watch */
.res-list-style-simple .mp-recent-item[data-file-type="Video"] .mp-recent-action-icon-download { display: none; }
.res-list-style-simple .mp-recent-item[data-file-type="Video"] .mp-recent-action-icon-watch { display: inline-block; }
/* 4. Audio → listen */
.res-list-style-simple .mp-recent-item[data-file-type="Audio"] .mp-recent-action-icon-download { display: none; }
.res-list-style-simple .mp-recent-item[data-file-type="Audio"] .mp-recent-action-icon-listen { display: inline-block; }
/* 5. Image → view */
.res-list-style-simple .mp-recent-item[data-file-type="Image"] .mp-recent-action-icon-download { display: none; }
.res-list-style-simple .mp-recent-item[data-file-type="Image"] .mp-recent-action-icon-view { display: inline-block; }
/* 6. Link OR has external link → link icon overrides everything above */
.res-list-style-simple .mp-recent-item[data-file-type="Link"] .mp-recent-action-icon-download,
.res-list-style-simple .mp-recent-item[data-file-type="Link"] .mp-recent-action-icon-read,
.res-list-style-simple .mp-recent-item[data-file-type="Link"] .mp-recent-action-icon-watch,
.res-list-style-simple .mp-recent-item[data-file-type="Link"] .mp-recent-action-icon-listen,
.res-list-style-simple .mp-recent-item[data-file-type="Link"] .mp-recent-action-icon-view,
.res-list-style-simple .mp-recent-item[data-external-link]:not([data-external-link=""]) .mp-recent-action-icon-download,
.res-list-style-simple .mp-recent-item[data-external-link]:not([data-external-link=""]) .mp-recent-action-icon-read,
.res-list-style-simple .mp-recent-item[data-external-link]:not([data-external-link=""]) .mp-recent-action-icon-watch,
.res-list-style-simple .mp-recent-item[data-external-link]:not([data-external-link=""]) .mp-recent-action-icon-listen,
.res-list-style-simple .mp-recent-item[data-external-link]:not([data-external-link=""]) .mp-recent-action-icon-view { display: none; }
.res-list-style-simple .mp-recent-item[data-file-type="Link"] .mp-recent-action-icon-link,
.res-list-style-simple .mp-recent-item[data-external-link]:not([data-external-link=""]) .mp-recent-action-icon-link { display: inline-block; }
/* Field-level visibility toggles — apply in BOTH list and grid views.
!important guarantees these win over any view-specific layout rules
that may set display elsewhere. */
.res-list-style-simple.hide-resource-type .mp-recent-type { display: none !important; }
.res-list-style-simple.hide-file-type .mp-recent-file-type { display: none !important; }
.res-list-style-simple.hide-topic .mp-recent-topic { display: none !important; }
.res-list-style-simple.hide-featured .mp-recent-featured { display: none !important; }
.res-list-style-simple.hide-date .mp-recent-date { display: none !important; }
.res-list-style-simple.hide-images .mp-recent-cover { display: none !important; }
/* Resources List - Style 1 — admin-toggleable image visibility.
Hiding .item-top-left collapses the entire image column so the
text side fills the card width in grid view. Also hides
.item-img directly (defense in depth — any media-type-specific
override from earlier in this file can't outweigh !important). */
.res-list-style-1.hide-images .item-top-left,
.res-list-style-1.hide-images .item-img { display: none !important; }
.res-list-style-1.hide-images .item-top-right { flex: 1 1 100% !important; max-width: 100% !important; }
/*
Firefox 121+). Older browsers fall back to the
default behavior (placeholder shown). */
.res-list-style-1 .item-top-left:has(.item-img._img-placeholder) { display: none !important; }
.res-list-style-1 .item-top:has(.item-img._img-placeholder) .item-top-right { flex: 1 1 100% !important; max-width: 100% !important; }
/*
shown at the top of each grid card */
.res-list-style-simple .mp-recent-cover { display: none; }
/*
1 on mobile) */
.res-list-style-simple.view-grid .mp-recent-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 991px) {
.res-list-style-simple.view-grid .mp-recent-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
.res-list-style-simple.view-grid .mp-recent-list { grid-template-columns: 1fr; }
}
/* Each item becomes a vertical card */
.res-list-style-simple.view-grid .mp-recent-list li.mp-recent-item {
position: relative;
flex-direction: column;
align-items: flex-start;
flex-wrap: nowrap;
justify-content: flex-start;
row-gap: 6px;
padding: 14px 16px;
background: var(--white);
border: 1px solid #f3f4f6;
border-top: 1px solid #f3f4f6;
border-radius: 12px;
overflow: hidden;
}
.res-list-style-simple.view-grid .mp-recent-list li.mp-recent-item:first-child {
padding-top: 14px;
}
/* Lock direct children to their natural height — prevents the
list-view's `flex: 1` rule on .mp-recent-link from making the
link absorb leftover vertical space and creating phantom gaps. */
.res-list-style-simple.view-grid .mp-recent-list li.mp-recent-item > * {
flex: 0 0 auto;
}
/* Cover image at top of grid card — extends to card edges */
.res-list-style-simple.view-grid .mp-recent-cover {
display: block;
width: calc(100% + 32px);
height: 130px;
margin: -14px -16px 6px;
background-color: #f3f4f6;
overflow: hidden;
}
.res-list-style-simple.view-grid .mp-recent-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/*
the onerror hides the broken ![]()
and adds ._img-placeholder to the parent. The framework's global
._img-placeholder rule (utilities.css) then shows the site logo
centered on a gray background — same behavior as resources_list.style_1. */
/* Title link spans full width with vertical wrapping */
.res-list-style-simple.view-grid .mp-recent-link {
width: 100%;
display: flex;
align-items: flex-start;
gap: 8px;
margin: 2px 0 4px;
}
.res-list-style-simple.view-grid .mp-recent-title-text {
flex: 1 1 auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 15px;
line-height: 1.4;
}
.res-list-style-simple.view-grid .mp-recent-action-icon {
flex: 0 0 auto;
margin-top: 3px;
font-size: 13px;
}
/*
over the cover image */
.res-list-style-simple.view-grid .mp-recent-item[data-featured="1"] .mp-recent-featured {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
box-shadow: 0 0 0 3px rgba(212, 160, 23, .15), 0 2px 6px rgba(0, 0, 0, .25);
}
/* Resource Type sits under the title in a small muted style */
.res-list-style-simple.view-grid .mp-recent-type {
width: auto;
font-size: 12px;
}
/* File Type badge sits at the top of the card */
.res-list-style-simple.view-grid .mp-recent-file-type {
align-self: flex-start;
}
/* Topic badge — separate row */
.res-list-style-simple.view-grid .mp-recent-topic {
align-self: flex-start;
}
/* Date pinned to the bottom of the card */
.res-list-style-simple.view-grid .mp-recent-date {
margin-top: auto;
padding-top: 6px;
font-size: 13px;
align-self: flex-end;
}
.mp-recent-file-type:empty { display: none; }
/* Resources List banner: labels sit on the dark banner overlay — make them
light for contrast (the filter pills themselves are white with dark text). */
.res-list-style-1 .res-list-banner .filters-list-item label {
color: var(--white);
}
.res-list-style-1 .res-list-banner .filters-list-item label .sr-only,
.res-list-style-1 .res-list-banner .rl-filter-actions { color: var(--white); }
/* ==========================================================================
Accessibility Tool — Visually Hidden Heading (ported from brent11 skin.css)
Visible as a dashed warning box in the Morweb live editor (.liveEdBlock);
sr-only on the public front-end. NF has --warning-1/--warning-3 tokens.
========================================================================== */
.mwPageBlock .a11y-visually-hidden-heading { margin-bottom: 30px; }
.mwPageBlock .a11y-visually-hidden-heading .a11y-visually-hidden-heading-wrap {
position: relative;
padding: 30px 20px 6px;
background-color: var(--warning-1);
border-radius: 4px;
border: 2px dashed var(--warning-3);
}
.mwPageBlock .a11y-visually-hidden-heading .a11y-visually-hidden-heading-wrap:before {
content: attr(data-tpl-tooltip);
position: absolute;
top: 0;
left: 50%;
font-size: 12px;
padding: 3px 10px;
border-radius: 4px 4px 0 0;
background-color: var(--warning-3);
transform: translateX(-50%);
}
.mwPageBlock .a11y-visually-hidden-heading .heading-text { margin-bottom: 0; }
.mwPageBlock:not(.liveEdBlock) .a11y-visually-hidden-heading {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Search results page (.sr-*) + .search-form-style-1 — ported from brent11
skin.css. Ramp-inverted for NF (primary-7->1, secondary 1->7/2->6/3->5).
========================================================================== */
.search-form-style-1 form {
position: relative;
max-width: 540px;
}
.search-form-style-1 .Dialog {
margin: 0;
}
/* The visible pill (Morweb wraps the inputs in .input-inline > .mwInput) */
.search-form-style-1 .input-inline {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px 6px 6px 24px;
background-color: var(--white);
border: 1px solid #d8dde3;
border-radius: 999px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
transition: border-color .15s ease, box-shadow .15s ease;
}
.search-form-style-1 .input-inline:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}
.search-form-style-1 .mwInput.text {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.search-form-style-1 input[type="text"] {
width: 100%;
height: 44px;
padding: 0;
margin: 0;
border: 0;
background: transparent;
outline: none;
box-shadow: none;
font-size: 14px;
font-weight: 500;
color: var(--primary-1);
letter-spacing: .04em;
}
.search-form-style-1 input[type="text"]::placeholder {
color: #9ca3af;
letter-spacing: .08em;
text-transform: uppercase;
opacity: 1;
}
/* Submit — circular brand button with a magnifier icon (a real