.staff-blog-archive {
--staff-blog-navy: #102a43;
--staff-blog-navy-deep: #081b2c;
--staff-blog-lime: #c7d92c;
--staff-blog-surface: #ffffff;
--staff-blog-background: #f4f7f9;
--staff-blog-text: #1c2b38;
--staff-blog-muted: #647282;
background: var(--staff-blog-background);
color: var(--staff-blog-text);
} body.post-type-archive-staff_blog .staff-blog-breadcrumbs-nav {
display: none !important;
}
@media screen and (max-width: 767px) {
body.post-type-archive-staff_blog .staff-blog-archive__section {
padding-top: 24px !important;
}
}
.staff-blog-archive .staff-blog-archive__section {
padding: clamp(56px, 7vw, 96px) 0;
overflow: visible;
}
.staff-blog-archive .staff-blog-archive__inner {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
.staff-blog-archive .staff-blog-archive__header {
max-width: 760px;
margin: 0 auto 20px;
text-align: center;
}
.staff-blog-archive .staff-blog-archive__eyebrow {
margin: 0 0 12px;
color: var(--staff-blog-navy);
font-size: clamp(13px, 1.25vw, 16px);
font-weight: 800;
line-height: 1.25;
letter-spacing: 0.14em;
}
.staff-blog-archive .staff-blog-archive__header h1 {
margin: 0;
color: var(--staff-blog-navy);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 800;
line-height: 1.35;
letter-spacing: 0.03em;
}
.staff-blog-archive .staff-blog-archive__intro {
margin: 0 auto clamp(32px, 4vw, 48px);
color: var(--staff-blog-muted);
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.8;
text-align: center;
}
.staff-blog-archive .staff-blog-archive__grid-wrap {
margin: 0;
}
.staff-blog-archive .staff-blog-archive__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 24px;
width: 100%;
}
.staff-blog-archive .staff-blog-card {
display: flex;
min-width: 0;
margin: 0;
overflow: hidden;
border: 1px solid rgba(16, 42, 67, 0.12);
border-radius: 16px;
background: var(--staff-blog-surface);
box-shadow: 0 8px 24px rgba(8, 27, 44, 0.08);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.staff-blog-archive .staff-blog-card__link {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
color: inherit;
text-decoration: none;
}
.staff-blog-archive .staff-blog-card__image {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--staff-blog-navy);
}
.staff-blog-archive .staff-blog-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 220ms ease;
}
.staff-blog-archive .staff-blog-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--staff-blog-navy), var(--staff-blog-navy-deep));
}
.staff-blog-archive .staff-blog-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px 22px 24px;
}
.staff-blog-archive .staff-blog-card__date {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
color: var(--staff-blog-navy);
font-size: 13px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
}
.staff-blog-archive .staff-blog-card__date::before {
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--staff-blog-lime);
content: "";
}
.staff-blog-archive .staff-blog-card__title {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--staff-blog-navy);
font-size: 20px;
font-weight: 700;
line-height: 1.55;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.staff-blog-archive .staff-blog-card__excerpt {
display: -webkit-box;
margin: 14px 0 0;
overflow: hidden;
color: var(--staff-blog-muted);
font-size: 15px;
line-height: 1.8;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.staff-blog-archive .staff-blog-card:hover {
border-color: rgba(16, 42, 67, 0.24);
box-shadow: 0 14px 34px rgba(8, 27, 44, 0.14);
transform: translateY(-4px);
}
.staff-blog-archive .staff-blog-card__link:hover .staff-blog-card__image img {
transform: scale(1.035);
}
.staff-blog-archive .staff-blog-card__link:focus-visible {
border-radius: 16px;
outline: 3px solid var(--staff-blog-lime);
outline-offset: -3px;
}
.staff-blog-archive .staff-blog-archive__pagination {
margin-top: clamp(40px, 6vw, 64px);
}
.staff-blog-archive .staff-blog-archive__pagination .navigation.pagination {
margin: 0;
}
.staff-blog-archive .staff-blog-archive__pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
width: 100%;
height: auto;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 8px 12px;
border: 1px solid rgba(16, 42, 67, 0.2);
border-radius: 10px;
background: var(--staff-blog-surface);
color: var(--staff-blog-navy);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.current {
border-color: var(--staff-blog-navy);
background: var(--staff-blog-navy);
color: var(--staff-blog-surface);
}
.staff-blog-archive .staff-blog-archive__pagination a.page-numbers:hover,
.staff-blog-archive .staff-blog-archive__pagination a.page-numbers:focus-visible {
border-color: var(--staff-blog-lime);
background: var(--staff-blog-lime);
color: var(--staff-blog-navy-deep);
outline: none;
}
@media (max-width: 1023px) {
.staff-blog-archive .staff-blog-archive__inner {
width: min(100% - 40px, 960px);
}
.staff-blog-archive .staff-blog-archive__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 20px;
}
}
@media (max-width: 767px) {
.staff-blog-archive .staff-blog-archive__section {
padding: 48px 0 64px;
}
.staff-blog-archive .staff-blog-archive__inner {
width: calc(100% - 32px);
}
.staff-blog-archive .staff-blog-archive__header {
margin-bottom: 16px;
}
.staff-blog-archive .staff-blog-archive__intro {
margin-bottom: 28px;
}
.staff-blog-archive .staff-blog-archive__grid {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.staff-blog-archive .staff-blog-card__body {
padding: 18px 18px 22px;
}
.staff-blog-archive .staff-blog-card__title {
font-size: 18px;
}
.staff-blog-archive .staff-blog-archive__pagination .nav-links {
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.staff-blog-archive .staff-blog-card,
.staff-blog-archive .staff-blog-card__image img,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers {
transition-duration: 0.01ms;
}
.staff-blog-archive .staff-blog-card:hover,
.staff-blog-archive .staff-blog-card__link:hover .staff-blog-card__image img {
transform: none;
}
} @media (max-width: 767px) {
body#page_index.home .staff-blog .slider .slide .img {
aspect-ratio: 16 / 9;
height: auto;
overflow: hidden;
background: #102a43;
}
body#page_index.home .staff-blog .slider .slide .img img {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center;
}
} @media (max-width: 767px) {
.staff-blog-archive .staff-blog-archive__pagination .nav-links {
flex-wrap: nowrap;
gap: 5px;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next {
width: 44px;
min-width: 44px;
padding: 0;
font-size: 0;
white-space: nowrap;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev::before,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next::before {
position: static;
display: inline-block;
width: auto;
height: auto;
background: none;
font-size: 28px;
line-height: 1;
transform: none;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev::before {
content: "‹";
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next::before {
content: "›";
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev::after,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next::after {
display: none;
content: none;
}
}
@media (max-width: 359px) {
.staff-blog-archive .staff-blog-archive__pagination .nav-links {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 4px;
}
} .staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next {
width: auto;
min-width: 72px;
padding: 8px 14px;
font-size: 14px;
white-space: nowrap;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev::before,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next::before,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev::after,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next::after {
display: none;
content: none;
}
@media (max-width: 767px) {
.staff-blog-archive .staff-blog-archive__pagination .nav-links {
flex-wrap: nowrap;
gap: 5px;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next {
width: 44px;
min-width: 44px;
padding: 0;
font-size: 0;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev::before,
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next::before {
position: static;
display: inline-block;
width: auto;
height: auto;
background: none;
font-size: 28px;
line-height: 1;
transform: none;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev::before {
content: "‹";
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.next::before {
content: "›";
}
} .staff-blog-archive .staff-blog-archive__inner {
width: calc(100% - 40px);
max-width: 1320px;
margin-right: auto;
margin-left: auto;
}
.staff-blog-archive .staff-blog-archive__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px 20px;
}
.staff-blog-archive .staff-blog-card {
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.staff-blog-archive .staff-blog-card:hover {
transform: none;
box-shadow: none;
}
.staff-blog-archive .staff-blog-card__link {
display: block;
width: 100%;
height: 100%;
color: #0a0a0a;
}
.staff-blog-archive .staff-blog-card__image {
width: 100%;
height: 177px;
aspect-ratio: auto;
overflow: hidden;
border-radius: 0;
}
.staff-blog-archive .staff-blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.staff-blog-archive .staff-blog-card__body {
padding: 0;
}
.staff-blog-archive .staff-blog-card__date {
display: block;
margin: 10px 0 0;
color: #c20064;
font-size: 16px;
font-weight: 400;
line-height: 1;
}
.staff-blog-archive .staff-blog-card__date::before {
display: none;
content: none;
}
.staff-blog-archive .staff-blog-card__title {
display: block;
margin: 5px 0 0;
overflow: visible;
color: #0a0a0a;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
-webkit-box-orient: unset;
-webkit-line-clamp: unset;
}
.staff-blog-archive .staff-blog-card__excerpt {
display: none;
}
.staff-blog-archive .staff-blog-archive__pagination .page-numbers.current,
.staff-blog-archive .staff-blog-archive__pagination a.page-numbers:hover {
color: #fff;
background: #c20064;
border-color: #c20064;
}
@media (max-width: 1023px) {
.staff-blog-archive .staff-blog-archive__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.staff-blog-archive .staff-blog-archive__inner {
width: 100%;
padding-right: 20px;
padding-left: 20px;
}
.staff-blog-archive .staff-blog-archive__grid {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.staff-blog-archive .staff-blog-card__image {
height: 177px;
}
} .single-staff_blog .contents .staff-blog-single-layout {
display: grid !important;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr) !important;
grid-template-areas: "sidebar main";
gap: 40px;
align-items: start;
}
.single-staff_blog .staff-blog-single-main {
grid-area: main;
min-width: 0;
display: grid;
gap: 20px;
}
.single-staff_blog .staff-blog-single-sidebar {
grid-area: sidebar;
min-width: 0;
position: sticky;
top: 120px;
}
.single-staff_blog .staff-blog-single-sidebar .related-posts {
width: 100%;
margin: 0;
padding: 0;
}
.single-staff_blog .staff-blog-single-sidebar .related-posts > h2 {
width: 100%;
margin: 0 0 20px;
padding: 0 0 12px;
border-bottom: 3px solid #c20064;
color: #c20064;
font-size: 22px;
line-height: 1.4;
text-align: left;
}
.single-staff_blog .staff-blog-single-sidebar .slider-area,
.single-staff_blog .staff-blog-single-sidebar .slider {
width: 100%;
}
.single-staff_blog .staff-blog-single-sidebar .slider {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
height: auto;
transform: none !important;
}
.single-staff_blog .staff-blog-single-sidebar .slide {
width: 100% !important;
height: auto;
margin: 0 !important;
}
.single-staff_blog .staff-blog-single-sidebar .slide a {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
grid-template-areas:
"image date"
"image title";
column-gap: 12px;
align-items: start;
}
.single-staff_blog .staff-blog-single-sidebar .slide .img {
grid-area: image;
width: 110px !important;
height: 74px !important;
overflow: hidden;
}
.single-staff_blog .staff-blog-single-sidebar .slide .img img,
.single-staff_blog .staff-blog-single-sidebar .slide .no-image {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.single-staff_blog .staff-blog-single-sidebar .slide .date {
grid-area: date;
margin: 0;
color: #c20064;
font-size: 13px;
line-height: 1;
}
.single-staff_blog .staff-blog-single-sidebar .slide .title {
grid-area: title;
display: -webkit-box;
margin: 6px 0 0;
overflow: hidden;
color: #0a0a0a;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.single-staff_blog .staff-blog-single-sidebar .search-btn {
width: 100%;
margin: 24px 0 0;
}
.single-staff_blog .staff-blog-single-sidebar .search-btn a {
display: flex;
min-height: 52px;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 5px;
color: #fff;
background: #c20064;
font-size: 15px;
font-weight: 700;
text-align: center;
}
@media (max-width: 1023px) {
.single-staff_blog .contents .staff-blog-single-layout {
display: block !important;
}
.single-staff_blog .staff-blog-single-sidebar {
position: static;
margin-top: 60px;
}
.single-staff_blog .staff-blog-single-sidebar .slider {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.single-staff_blog .staff-blog-single-sidebar .slider {
grid-template-columns: minmax(0, 1fr);
}
} .staff-blog-archive .staff-blog-archive__pagination .page-numbers.prev {
transform: none;
} .single-staff_blog .contents .inner .staff-blog-single-sidebar .slide .title {
display: -webkit-box;
width: auto;
margin: 6px 0 0 !important;
padding: 0;
overflow: hidden;
background: transparent;
color: #0a0a0a;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: left;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
} .staff-blog-archive.contents {
padding-top: 0;
} .staff-blog-archive-link-wrap {
display: flex;
justify-content: center;
align-items: center;
clear: both;
width: 100%;
margin: 28px auto -72px;
padding: 0 16px;
box-sizing: border-box;
}
.staff-blog-archive-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
max-width: 100%;
padding: 12px 24px;
border-radius: 5px;
box-sizing: border-box;
background: #c20064;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
text-align: center;
text-decoration: none;
transition: background-color 160ms ease, color 160ms ease;
}
.staff-blog-archive-link:focus-visible {
outline: 3px solid #102a43;
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.staff-blog-archive-link:hover {
background: #9f0052;
color: #fff;
}
}
@media screen and (max-width: 768px) {
.staff-blog-archive-link-wrap {
margin: 28px auto 0;
padding: 0 20px;
}
.staff-blog-archive-link {
padding: 12px 20px;
font-size: 15px;
}
} @media screen and (max-width: 1023px) {
.staff-blog-archive .staff-blog-archive__grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.single-staff_blog .staff-blog-single-sidebar .slider {
grid-template-columns: minmax(0, 1fr) !important;
}
} @media screen and (max-width: 1023px) {
body.single-staff_blog .contents {
display: block !important;
}
body.single-staff_blog .contents .inner.staff-blog-single-layout {
display: block !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas: none !important;
}
body.single-staff_blog .contents .inner.staff-blog-single-layout > .staff-blog-single-main,
body.single-staff_blog .contents .inner.staff-blog-single-layout > .staff-blog-single-sidebar {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
grid-area: auto !important;
box-sizing: border-box;
}
body.single-staff_blog .contents .inner.staff-blog-single-layout > .staff-blog-single-sidebar {
margin-top: 48px;
}
} @media screen and (max-width: 767px) {
body.single-staff_blog .contents {
margin-top: 0 !important;
}
} .single-staff_blog .staff-blog-article-date {
display: none !important;
} @media screen and (max-width: 767px) {
body.single-staff_blog .staff-blog-breadcrumbs-container {
margin-top: -30px !important;
}
body.post-type-archive-staff_blog .staff-blog-breadcrumbs-nav,
body.single-staff_blog .staff-blog-breadcrumbs-nav {
margin-bottom: 10px !important;
}
body.post-type-archive-staff_blog .staff-blog-breadcrumbs li,
body.single-staff_blog .staff-blog-breadcrumbs li {
font-size: 10px !important;
line-height: 1.45;
}
body.post-type-archive-staff_blog .staff-blog-breadcrumbs li:not(:last-child)::after,
body.single-staff_blog .staff-blog-breadcrumbs li:not(:last-child)::after {
margin-right: 4px !important;
margin-left: 4px !important;
}
}