.cbw-front-page-body {
--cbw-ivory: #f8f5ef;
--cbw-paper: #fffdfa;
--cbw-bordeaux: #721b27;
--cbw-bordeaux-deep: #4e1019;
--cbw-green: #355b47;
--cbw-charcoal: #282522;
--cbw-bronze: #a47b40;
--cbw-line: #e6ddd1;
--cbw-muted: #6a625a;
--cbw-shadow: 0 16px 36px rgb(47 31 20 / 8%);
background: var(--cbw-ivory);
color: var(--cbw-charcoal);
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
line-height: 1.8;
}
.cbw-front-page-body *,
.cbw-front-page-body *::before,
.cbw-front-page-body *::after {
box-sizing: border-box;
}
.cbw-front-page-body .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.cbw-front-page-body a {
color: inherit;
text-decoration: none;
}
.cbw-front-page-body :focus-visible {
outline: 3px solid #286bb8;
outline-offset: 4px;
}
.cbw-shell {
width: min(calc(100% - 48px), 1200px);
margin-inline: auto;
}
.cbw-skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 100001;
padding: 10px 16px;
border-radius: 4px;
background: var(--cbw-paper);
color: var(--cbw-bordeaux);
box-shadow: var(--cbw-shadow);
transform: translateY(-180%);
}
.cbw-skip-link:focus {
transform: translateY(0);
}
.cbw-icon {
display: inline-block;
width: 1.15em;
height: 1.15em;
fill: none;
vertical-align: -0.15em;
}
.cbw-kicker {
margin: 0 0 10px;
color: var(--cbw-bordeaux);
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.4;
}
.cbw-front-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgb(230 221 209 / 82%);
background: rgb(255 253 250 / 95%);
box-shadow: 0 4px 20px rgb(57 36 24 / 4%);
backdrop-filter: blur(16px);
}
.admin-bar .cbw-front-header {
top: 32px;
}
.cbw-front-header__inner {
display: flex;
align-items: center;
min-height: 78px;
gap: 22px;
}
.cbw-brand {
display: inline-grid;
flex: 0 0 auto;
gap: 0;
color: var(--cbw-bordeaux);
}
.cbw-brand__name {
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: clamp(1.65rem, 2.5vw, 2.15rem);
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1;
}
.cbw-brand__tagline {
margin-top: 6px;
color: var(--cbw-muted);
font-size: 0.66rem;
letter-spacing: 0.055em;
line-height: 1.35;
}
.cbw-header-panel {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: flex-end;
gap: 18px;
min-width: 0;
}
.cbw-primary-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 3px 16px;
padding: 0;
margin: 0;
list-style: none;
}
.cbw-primary-menu a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 6px 2px;
border-bottom: 2px solid transparent;
color: var(--cbw-charcoal);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.4;
}
.cbw-primary-menu .current-menu-item > a,
.cbw-primary-menu a:hover {
border-color: var(--cbw-bordeaux);
color: var(--cbw-bordeaux);
}
.cbw-header-search {
flex: 0 0 auto;
color: var(--cbw-charcoal);
}
.cbw-header-search summary {
display: inline-flex;
align-items: center;
min-height: 44px;
gap: 7px;
padding: 6px 0;
cursor: pointer;
font-size: 0.82rem;
font-weight: 700;
list-style: none;
}
.cbw-header-search summary::-webkit-details-marker {
display: none;
}
.cbw-header-search summary .cbw-icon {
width: 1.25rem;
height: 1.25rem;
}
.cbw-search-form {
position: absolute;
top: calc(100% + 8px);
right: max(24px, calc((100vw - 1200px) / 2));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
width: min(100vw - 48px, 390px);
padding: 10px;
border: 1px solid var(--cbw-line);
border-radius: 6px;
background: var(--cbw-paper);
box-shadow: var(--cbw-shadow);
}
.cbw-search-form input,
.cbw-search-form button {
min-height: 44px;
border: 0;
font: inherit;
}
.cbw-search-form input {
width: 100%;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--cbw-line);
border-radius: 4px 0 0 4px;
background: #fff;
color: var(--cbw-charcoal);
}
.cbw-search-form button {
padding: 8px 14px;
border-radius: 0 4px 4px 0;
background: var(--cbw-bordeaux);
color: #fff;
cursor: pointer;
}
.cbw-menu-toggle {
flex: 0 0 44px;
width: 44px;
min-height: 44px;
padding: 0;
border: 1px solid var(--cbw-line);
border-radius: 50%;
background: var(--cbw-paper);
color: var(--cbw-bordeaux);
cursor: pointer;
}
.cbw-menu-toggle .cbw-icon {
width: 1.4rem;
height: 1.4rem;
}
.cbw-front-page {
overflow: clip;
}
.cbw-hero {
position: relative;
isolation: isolate;
overflow: clip;
background:
radial-gradient(circle at 0 0, rgb(255 255 255 / 92%) 0 20%, transparent 47%),
linear-gradient(110deg, #fbfaf6 0%, var(--cbw-ivory) 51%, #eee7dd 100%);
}
.cbw-hero::after {
position: absolute;
right: -8vw;
bottom: -12vw;
z-index: -1;
width: min(42vw, 610px);
aspect-ratio: 1;
border: 1px solid rgb(164 123 64 / 22%);
border-radius: 50%;
content: "";
}
.cbw-hero__grid {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1.14fr);
align-items: stretch;
min-height: 570px;
}
.cbw-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
max-width: 560px;
padding: clamp(56px, 8vw, 112px) clamp(0px, 4vw, 54px) clamp(56px, 7vw, 96px) 0;
}
.cbw-hero h1,
.cbw-section-heading h2,
.cbw-bt-lab__intro h2,
.cbw-profile h2 {
margin: 0;
color: var(--cbw-charcoal);
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.42;
text-wrap: balance;
}
.cbw-hero h1 {
font-size: clamp(2.35rem, 4.8vw, 4.45rem);
}
.cbw-hero__description {
max-width: 35rem;
margin: 28px 0 0;
color: #4d4742;
font-size: clamp(0.98rem, 1.3vw, 1.08rem);
}
.cbw-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px;
}
.cbw-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
gap: 20px;
padding: 11px 19px;
border: 1px solid transparent;
border-radius: 3px;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.4;
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.cbw-button .cbw-icon {
width: 1.05rem;
height: 1.05rem;
}
.cbw-button--primary {
background: var(--cbw-bordeaux);
color: #fff;
}
.cbw-button--primary:hover {
background: var(--cbw-bordeaux-deep);
color: #fff;
transform: translateY(-2px);
}
.cbw-button--secondary {
border-color: var(--cbw-bordeaux);
background: transparent;
color: var(--cbw-bordeaux);
}
.cbw-button--secondary:hover {
background: #fff8f7;
color: var(--cbw-bordeaux-deep);
transform: translateY(-2px);
}
.cbw-hero__media {
position: relative;
min-height: 570px;
margin-right: min(-6vw, -76px);
overflow: hidden;
background: linear-gradient(130deg, #d8c7b2, #8b5a42);
}
.cbw-hero__media::after {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgb(248 245 239 / 88%) 0%, rgb(248 245 239 / 16%) 39%, transparent 66%);
content: "";
pointer-events: none;
}
.cbw-hero__image,
.cbw-profile__image,
.cbw-post-card__image,
.cbw-featured-list__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cbw-hero__media-placeholder,
.cbw-profile__placeholder,
.cbw-post-card__fallback {
display: grid;
width: 100%;
height: 100%;
place-items: center;
background:
radial-gradient(circle at 76% 26%, rgb(255 255 255 / 46%) 0 2%, transparent 2.5%),
radial-gradient(circle at 82% 42%, rgb(255 255 255 / 28%) 0 1%, transparent 1.5%),
linear-gradient(135deg, #ded0bc, #8c624c);
color: #fffaf2;
}
.cbw-hero__media-placeholder .cbw-icon {
width: 34%;
height: 34%;
}
.cbw-section {
padding: clamp(58px, 8vw, 110px) 0;
}
.cbw-section-heading {
max-width: 680px;
margin-bottom: clamp(26px, 4vw, 42px);
}
.cbw-section-heading h2,
.cbw-bt-lab__intro h2,
.cbw-profile h2 {
font-size: clamp(1.8rem, 3vw, 2.65rem);
}
.cbw-section-heading--inline {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
max-width: none;
}
.cbw-section-heading__link,
.cbw-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
color: var(--cbw-green);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.cbw-section-heading__link:hover,
.cbw-text-link:hover {
color: var(--cbw-bordeaux);
}
.cbw-section-heading__link .cbw-icon,
.cbw-text-link .cbw-icon {
width: 1rem;
height: 1rem;
}
.cbw-text-link--bordeaux {
color: var(--cbw-bordeaux);
}
.cbw-pathways {
background: var(--cbw-paper);
}
.cbw-pathways__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.cbw-pathway-card {
display: flex;
min-height: 295px;
gap: 22px;
padding: clamp(22px, 3vw, 34px);
border: 1px solid var(--cbw-line);
border-radius: 8px;
background: #fff;
box-shadow: 0 8px 24px rgb(47 31 20 / 3%);
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.cbw-pathway-card:hover {
border-color: rgb(114 27 39 / 45%);
box-shadow: var(--cbw-shadow);
transform: translateY(-4px);
}
.cbw-pathway-card__icon {
flex: 0 0 52px;
color: var(--cbw-bordeaux);
}
.cbw-pathway-card:nth-child(2) .cbw-pathway-card__icon {
color: var(--cbw-green);
}
.cbw-pathway-card:nth-child(3) .cbw-pathway-card__icon {
color: var(--cbw-bronze);
}
.cbw-pathway-card__icon .cbw-icon {
width: 52px;
height: 52px;
}
.cbw-pathway-card__content {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
}
.cbw-pathway-card__eyebrow {
color: var(--cbw-muted);
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.13em;
}
.cbw-pathway-card__title {
margin-top: 13px;
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: clamp(1.18rem, 1.6vw, 1.42rem);
font-weight: 600;
line-height: 1.55;
}
.cbw-pathway-card__description {
margin-top: 12px;
color: #5f5852;
font-size: 0.88rem;
line-height: 1.85;
}
.cbw-pathway-card .cbw-text-link {
margin-top: auto;
padding-top: 18px;
}
.cbw-bt-lab {
background: linear-gradient(135deg, #f2eadb, #fcfaf5 60%, #e9dfd1);
}
.cbw-bt-lab__grid {
display: grid;
grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.45fr);
align-items: center;
gap: clamp(30px, 5vw, 72px);
}
.cbw-bt-lab__intro {
padding: clamp(8px, 2vw, 24px) 0;
}
.cbw-bt-lab__intro > p:not(.cbw-kicker) {
margin: 22px 0 28px;
color: #4d4742;
}
.cbw-bt-lab__tools {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.cbw-tool-card {
display: flex;
flex-direction: column;
min-height: 265px;
padding: 22px 18px 18px;
border: 1px solid rgb(230 221 209 / 92%);
border-radius: 7px;
background: rgb(255 253 250 / 92%);
transition: box-shadow 180ms ease, transform 180ms ease;
}
.cbw-tool-card:hover {
box-shadow: var(--cbw-shadow);
transform: translateY(-4px);
}
.cbw-tool-card__icon {
color: var(--cbw-green);
}
.cbw-tool-card__icon .cbw-icon {
width: 42px;
height: 42px;
}
.cbw-tool-card__title {
margin-top: 22px;
color: var(--cbw-charcoal);
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.5;
}
.cbw-tool-card__description {
margin-top: 10px;
color: #5f5852;
font-size: 0.79rem;
line-height: 1.7;
}
.cbw-tool-card .cbw-text-link {
margin-top: auto;
padding-top: 12px;
font-size: 0.76rem;
}
.cbw-latest-posts {
background: var(--cbw-paper);
}
.cbw-post-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.cbw-post-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--cbw-line);
border-radius: 7px;
background: #fff;
box-shadow: 0 8px 22px rgb(47 31 20 / 3%);
transition: box-shadow 180ms ease, transform 180ms ease;
}
.cbw-post-card:hover {
box-shadow: var(--cbw-shadow);
transform: translateY(-4px);
}
.cbw-post-card > a {
display: flex;
height: 100%;
flex-direction: column;
}
.cbw-post-card__media {
display: block;
aspect-ratio: 1.52 / 1;
overflow: hidden;
background: #ede5d8;
}
.cbw-post-card__image {
transition: transform 240ms ease;
}
.cbw-post-card:hover .cbw-post-card__image {
transform: scale(1.04);
}
.cbw-post-card__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
padding: 17px;
}
.cbw-post-card__meta {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--cbw-muted);
font-size: 0.68rem;
line-height: 1.4;
}
.cbw-post-card__meta > span {
max-width: 52%;
overflow: hidden;
color: var(--cbw-bronze);
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.cbw-post-card__title {
display: -webkit-box;
margin-top: 12px;
overflow: hidden;
color: var(--cbw-charcoal);
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.62;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.cbw-post-card__excerpt {
display: -webkit-box;
margin-top: 10px;
overflow: hidden;
color: #625b55;
font-size: 0.78rem;
line-height: 1.75;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.cbw-featured-posts {
padding-top: clamp(22px, 4vw, 48px);
background: var(--cbw-paper);
}
.cbw-featured-posts__grid {
display: grid;
grid-template-columns: minmax(200px, 0.5fr) minmax(0, 1fr);
gap: clamp(30px, 7vw, 90px);
padding-top: clamp(36px, 6vw, 72px);
border-top: 1px solid var(--cbw-line);
}
.cbw-featured-posts__intro p:not(.cbw-kicker) {
margin: 16px 0 0;
color: #625b55;
font-size: 0.9rem;
}
.cbw-featured-list {
display: grid;
gap: 1px;
padding: 0;
margin: 0;
list-style: none;
border-top: 1px solid var(--cbw-line);
}
.cbw-featured-list__item {
border-bottom: 1px solid var(--cbw-line);
}
.cbw-featured-list__item a {
display: grid;
grid-template-columns: 24px 72px minmax(0, 1fr);
align-items: center;
gap: 14px;
min-height: 90px;
padding: 9px 0;
}
.cbw-featured-list__item a:hover .cbw-featured-list__title {
color: var(--cbw-bordeaux);
}
.cbw-featured-list__number {
color: var(--cbw-bordeaux);
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-weight: 700;
}
.cbw-featured-list__media {
display: block;
width: 72px;
height: 56px;
overflow: hidden;
border-radius: 4px;
background: #ede5d8;
}
.cbw-featured-list__media .cbw-icon {
width: 70%;
height: 70%;
}
.cbw-featured-list__title {
display: -webkit-box;
overflow: hidden;
color: var(--cbw-charcoal);
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 0.97rem;
font-weight: 700;
line-height: 1.6;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.cbw-profile {
background: linear-gradient(110deg, #f0e7d8 0%, #fbfaf6 57%, #f2eadf 100%);
}
.cbw-profile__grid {
display: grid;
grid-template-columns: minmax(220px, 0.73fr) minmax(0, 1.27fr);
align-items: center;
gap: clamp(34px, 8vw, 114px);
}
.cbw-profile__media {
min-height: 330px;
overflow: hidden;
border-radius: 6px;
box-shadow: var(--cbw-shadow);
}
.cbw-profile__content {
max-width: 640px;
}
.cbw-profile__content > p:not(.cbw-kicker) {
margin: 22px 0;
color: #4d4742;
}
.cbw-front-footer {
background: var(--cbw-bordeaux-deep);
color: #fff8f3;
}
.cbw-front-footer__grid {
display: grid;
grid-template-columns: minmax(230px, 1.8fr) repeat(4, minmax(110px, 1fr));
gap: 32px;
padding: clamp(46px, 7vw, 80px) 0 42px;
}
.cbw-front-footer .cbw-brand {
color: #fff8f3;
}
.cbw-front-footer .cbw-brand__tagline,
.cbw-front-footer__brand p {
color: rgb(255 248 243 / 74%);
}
.cbw-front-footer__brand p {
max-width: 290px;
margin: 20px 0;
font-size: 0.82rem;
line-height: 1.7;
}
.cbw-social-link {
display: inline-grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgb(255 248 243 / 68%);
border-radius: 50%;
font-size: 0.9rem;
font-weight: 700;
}
.cbw-social-link:hover {
border-color: #fff;
background: rgb(255 255 255 / 12%);
}
.cbw-front-footer h2 {
margin: 6px 0 14px;
color: #fff;
font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: 0.96rem;
font-weight: 700;
}
.cbw-front-footer ul {
display: grid;
gap: 8px;
padding: 0;
margin: 0;
list-style: none;
}
.cbw-front-footer li,
.cbw-front-footer li a {
color: rgb(255 248 243 / 78%);
font-size: 0.8rem;
line-height: 1.55;
}
.cbw-front-footer li a:hover {
color: #fff;
text-decoration: underline;
text-underline-offset: 4px;
}
.cbw-front-footer__legal {
padding: 14px 0;
border-top: 1px solid rgb(255 248 243 / 18%);
color: rgb(255 248 243 / 65%);
font-size: 0.72rem;
text-align: center;
}
@media (max-width: 1180px) {
.cbw-primary-menu {
gap: 3px 11px;
}
.cbw-primary-menu a {
font-size: 0.77rem;
}
.cbw-hero__media {
margin-right: -24px;
}
.cbw-bt-lab__tools {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.cbw-front-header__inner {
position: relative;
min-height: 70px;
}
.cbw-front-header.is-enhanced .cbw-header-panel {
position: absolute;
top: calc(100% + 1px);
right: -24px;
left: -24px;
display: block;
padding: 14px 24px 20px;
border-bottom: 1px solid var(--cbw-line);
background: var(--cbw-paper);
box-shadow: 0 12px 26px rgb(47 31 20 / 12%);
}
.cbw-front-header.is-enhanced .cbw-header-panel[hidden] {
display: none;
}
.cbw-front-header.is-enhanced .cbw-primary-menu {
display: grid;
justify-content: stretch;
gap: 0;
}
.cbw-front-header.is-enhanced .cbw-primary-menu a {
width: 100%;
min-height: 48px;
border-bottom: 1px solid var(--cbw-line);
}
.cbw-front-header.is-enhanced .cbw-header-search {
display: block;
margin-top: 8px;
}
.cbw-front-header.is-enhanced .cbw-header-search summary {
display: none;
}
.cbw-front-header.is-enhanced .cbw-search-form {
position: static;
display: grid;
width: 100%;
padding: 0;
border: 0;
box-shadow: none;
}
.cbw-menu-toggle {
margin-left: auto;
}
.cbw-hero__grid,
.cbw-bt-lab__grid {
grid-template-columns: 1fr;
}
.cbw-hero__grid {
min-height: auto;
}
.cbw-hero__content {
max-width: 680px;
padding-right: 0;
}
.cbw-hero__media {
min-height: min(68vw, 520px);
margin: 0 -24px;
}
.cbw-hero__media::after {
background: linear-gradient(180deg, rgb(248 245 239 / 36%), transparent 52%);
}
.cbw-bt-lab__intro {
max-width: 650px;
}
.cbw-post-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.cbw-featured-posts__grid,
.cbw-profile__grid {
grid-template-columns: 1fr;
}
.cbw-profile__media {
max-width: 540px;
}
.cbw-front-footer__grid {
grid-template-columns: minmax(190px, 1.6fr) repeat(3, minmax(110px, 1fr));
}
.cbw-front-footer__brand {
grid-row: span 2;
}
}
@media (max-width: 767px) {
.admin-bar .cbw-front-header {
top: 46px;
}
.cbw-shell {
width: min(calc(100% - 32px), 1200px);
}
.cbw-front-header.is-enhanced .cbw-header-panel {
right: -16px;
left: -16px;
padding-right: 16px;
padding-left: 16px;
}
.cbw-brand__name {
font-size: 1.55rem;
}
.cbw-brand__tagline {
font-size: 0.59rem;
}
.cbw-hero__content {
padding: 56px 0 44px;
}
.cbw-hero h1 {
font-size: clamp(2.1rem, 11vw, 2.9rem);
}
.cbw-hero__description {
margin-top: 20px;
font-size: 0.95rem;
}
.cbw-hero__actions {
display: grid;
width: 100%;
margin-top: 26px;
}
.cbw-button {
width: 100%;
}
.cbw-hero__media {
min-height: 330px;
margin: 0 -16px;
}
.cbw-section {
padding: 58px 0;
}
.cbw-section-heading--inline {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.cbw-pathways__grid,
.cbw-bt-lab__tools,
.cbw-post-grid {
grid-template-columns: 1fr;
}
.cbw-pathway-card {
min-height: 0;
padding: 24px;
}
.cbw-tool-card {
min-height: 0;
}
.cbw-post-card__body {
padding: 18px;
}
.cbw-featured-posts {
padding-top: 4px;
}
.cbw-featured-posts__grid {
gap: 28px;
}
.cbw-featured-list__item a {
grid-template-columns: 20px 64px minmax(0, 1fr);
gap: 10px;
}
.cbw-featured-list__media {
width: 64px;
height: 52px;
}
.cbw-profile__media {
min-height: 260px;
}
.cbw-front-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 20px;
}
.cbw-front-footer__brand {
grid-column: 1 / -1;
grid-row: auto;
}
}
@media (max-width: 359px) {
.cbw-shell {
width: min(calc(100% - 24px), 1200px);
}
.cbw-hero__media {
margin-right: -12px;
margin-left: -12px;
}
.cbw-pathway-card {
gap: 15px;
padding: 20px;
}
.cbw-pathway-card__icon {
flex-basis: 42px;
}
.cbw-pathway-card__icon .cbw-icon {
width: 42px;
height: 42px;
}
}
@media (prefers-reduced-motion: no-preference) {
.cbw-hero__content > * {
opacity: 0;
animation: cbw-hero-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cbw-hero__content > :nth-child(2) {
animation-delay: 90ms;
}
.cbw-hero__content > :nth-child(3) {
animation-delay: 180ms;
}
.cbw-hero__content > :nth-child(4) {
animation-delay: 270ms;
}
.cbw-hero__media {
opacity: 0;
animation: cbw-hero-media-reveal 920ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}
.cbw-hero__image {
transform: scale(1.035);
animation: cbw-hero-image-settle 1400ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}
.cbw-motion-ready .cbw-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--cbw-reveal-delay, 0ms);
}
.cbw-motion-ready .cbw-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.cbw-button:hover .cbw-icon,
.cbw-text-link:hover .cbw-icon,
.cbw-section-heading__link:hover .cbw-icon {
transform: translateX(4px);
}
.cbw-button .cbw-icon,
.cbw-text-link .cbw-icon,
.cbw-section-heading__link .cbw-icon,
.cbw-tool-card__icon .cbw-icon,
.cbw-pathway-card__icon .cbw-icon {
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cbw-tool-card:hover .cbw-tool-card__icon .cbw-icon,
.cbw-pathway-card:hover .cbw-pathway-card__icon .cbw-icon {
transform: translateY(-3px) scale(1.04);
}
}
@keyframes cbw-hero-rise {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cbw-hero-media-reveal {
from {
opacity: 0;
transform: translateX(28px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes cbw-hero-image-settle {
from {
transform: scale(1.035);
}
to {
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.cbw-front-page-body *,
.cbw-front-page-body *::before,
.cbw-front-page-body *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}