/* Homepage Blog section * Scoped to section.blog — WordPress adds class "blog" to on the posts * index / front page, so a bare .blog rule would pad and paint the whole page. */ section.blog { padding-block: var(--space-2xl); background-color: var(--color-bg-gray); background-image: radial-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px); background-size: 18px 18px; } .blog__inner { display: grid; gap: var(--space-xl); } .blog__content { display: flex; flex-direction: column; gap: var(--space-xl); } .blog__intro { display: flex; flex-direction: column; align-items: flex-start; } .blog__label { display: inline-flex; align-items: center; min-height: 1.75rem; margin-bottom: var(--space-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); background-color: var(--color-bg-light); color: var(--color-text-dark); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1; } .blog__heading { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.04em; line-height: 1.1; } .blog__subheading { max-width: 27rem; margin-top: var(--space-md); color: var(--color-text-muted); font-size: var(--fs-body); line-height: 1.6; } .blog__quote { max-width: 31rem; margin: 0; } .blog__quote-mark { display: block; height: 2.5rem; color: #b9c2d1; font-size: 5rem; font-weight: var(--fw-bold); line-height: 0.9; } .blog__quote p { margin-top: var(--space-sm); font-size: clamp(1.25rem, 2.2vw, 1.8rem); font-weight: var(--fw-medium); letter-spacing: -0.025em; line-height: 1.3; } .blog__list { display: flex; flex-direction: column; padding: var(--space-sm) var(--space-md); border-radius: 1.25rem; background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 1rem 2.5rem rgba(17, 17, 17, 0.06); } .blog__list-item + .blog__list-item { border-top: 1px solid rgba(17, 17, 17, 0.08); } .blog__list-link { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 1.25rem; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-sm); border-radius: var(--radius-md); color: var(--color-text-dark); transition: background-color var(--transition-fast); } .blog__list-link:hover, .blog__list-link:focus-visible { background-color: rgba(17, 17, 17, 0.035); } .blog__list-thumb { width: 4.5rem; aspect-ratio: 4 / 3; border-radius: var(--radius-md); object-fit: cover; background-color: var(--color-bg-light); transition: transform var(--transition-medium); } .blog__list-link:hover .blog__list-thumb, .blog__list-link:focus-visible .blog__list-thumb { transform: scale(1.04); } .blog__list-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .blog__list-arrow { display: inline-flex; justify-content: flex-end; color: var(--color-text-muted); transition: transform var(--transition-fast), color var(--transition-fast); } .blog__list-link:hover .blog__list-arrow, .blog__list-link:focus-visible .blog__list-arrow { transform: translateX(0.2rem); color: var(--color-text-dark); } .blog__list-date { color: var(--color-text-muted); font-size: var(--fs-small); line-height: 1.3; } .blog__list-title { font-size: clamp(1rem, 1.7vw, 1.2rem); font-weight: var(--fw-medium); letter-spacing: -0.02em; line-height: 1.25; } .blog__cta-wrap { display: flex; justify-content: start; } .blog__cta { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.6rem 0.6rem 1.35rem; border-radius: var(--radius-full); background-color: var(--color-bg-dark); color: var(--color-text-light); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.2; transition: opacity var(--transition-fast); } .blog__cta:hover, .blog__cta:focus-visible { opacity: 0.85; } .blog__cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background-color: var(--color-bg-light); color: var(--color-text-dark); } @media (min-width: 768px) { section.blog { padding-block: clamp(3.5rem, 6vw, 4.5rem); } .blog__list { padding: var(--space-sm) var(--space-lg); } .blog__list-link { grid-template-columns: 5.5rem minmax(0, 1fr) 1.25rem; gap: var(--space-lg); } .blog__list-thumb { width: 5.5rem; } } @media (min-width: 1024px) { /* * The CTA shares the left column with the intro so the copy side does not * leave a tall empty gap next to the article list. */ .blog__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "intro list" "cta list"; column-gap: clamp(var(--space-2xl), 5vw, 4.5rem); row-gap: var(--space-xl); align-items: start; } .blog__content { grid-area: intro; min-height: 0; } .blog__list { grid-area: list; } .blog__cta-wrap { grid-area: cta; align-self: start; } }