/* ========================================================================== SLAY HARBOR — editorial design layer Loaded last, on top of the Bosa Logistics theme. Overrides only; the theme's own CSS and JS (slick, masonry) stay untouched. ========================================================================== */ :root { /* Ground */ --sh-ink: #17181a; --sh-ink-soft: rgba(23, 24, 26, 0.58); --sh-ink-faint: rgba(23, 24, 26, 0.34); --sh-paper: #fbf8f4; --sh-sand: #f2ebe3; --sh-line: #e2d9ce; /* One accent, two values: shell is the tint, clay the shade. */ --sh-shell: #e8c4b4; --sh-clay: #b85c3e; --sh-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --sh-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Optical scale — display sizes clamp between mobile and 1600px. */ --sh-display: clamp(2.5rem, 1.3rem + 4.4vw, 5.4rem); --sh-h1: clamp(2.4rem, 1.2rem + 4.6vw, 5rem); --sh-h2: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem); --sh-h3: clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem); --sh-gutter: clamp(1.25rem, 4vw, 5rem); --sh-band: clamp(4.5rem, 9vw, 10rem); /* vertical section rhythm */ --sh-max: 1560px; --sh-ease: cubic-bezier(0.22, 1, 0.36, 1); --sh-shadow: 0 24px 60px -28px rgba(74, 52, 40, 0.42); --sh-z-header: 400; --sh-z-grain: 900; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body, body.site-layout-default { background: var(--sh-paper); color: var(--sh-ink); font-family: var(--sh-sans); font-size: 17px; line-height: 1.62; font-weight: 400; letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* No overflow-x:hidden here — it computes to `hidden auto`, which turns into its own scroll container and breaks fixed positioning and painting on long pages. `.site` uses overflow-x:clip instead, which contains horizontal overflow without creating a scroller. */ } .site { background: var(--sh-paper); overflow-x: clip; } ::selection { background: var(--sh-shell); color: var(--sh-ink); } a { color: inherit; text-decoration: none; transition: color .35s var(--sh-ease), opacity .35s var(--sh-ease); } a:hover, a:focus { color: var(--sh-clay); } :focus-visible { outline: 2px solid var(--sh-clay); outline-offset: 3px; border-radius: 2px; } img { display: block; } /* Warm, consistent grade over a mixed-provenance photo set. Without it the clinical white-background product shots read as a different brand from the editorial location work. */ .feature-posts-image, .featured-image img, .feature-image img, .banner-img, .highlight-post-slider img { filter: saturate(0.9) contrast(1.03) sepia(0.06); } /* Fixed grain — breaks the flatness of large paper-coloured fields. */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--sh-z-grain); pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .entry-title, .site-title, .page-title, .feature-posts-title, .widget-title { font-family: var(--sh-serif); font-weight: 400; letter-spacing: -0.028em; line-height: 1.02; text-wrap: balance; color: var(--sh-ink); } p { text-wrap: pretty; } .sh-eyebrow, .cat-links a, .sh-marquee span, .navigation.pagination .nav-links, .sh-footer__label { font-family: var(--sh-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; } /* Category chips: hairline rule, not a pill. */ .cat-links a { color: var(--sh-clay); border-bottom: 1px solid currentColor; padding-bottom: 3px; } .cat-links a:hover { color: var(--sh-ink); } .entry-meta, .entry-meta a { font-family: var(--sh-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.05em; color: var(--sh-ink-soft); text-transform: none; } .entry-meta a:hover { color: var(--sh-clay); } /* Theme prints separators through :before on each meta span. */ .entry-meta > span:not(:first-child)::before { content: "·"; margin: 0 .6em; color: var(--sh-ink-faint); } .entry-meta span.comments-link, .entry-meta .comments-link { display: none !important; } /* comments are disabled on this export */ /* -------------------------------------------------------------------------- Buttons / links -------------------------------------------------------------------------- */ .sh-btn, .button-container a, .read-more, .more-link { display: inline-flex; align-items: center; gap: .7em; font-family: var(--sh-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sh-ink); background: none; border: 0; border-bottom: 1px solid var(--sh-ink); padding: 0 0 8px; border-radius: 0; transition: color .4s var(--sh-ease), border-color .4s var(--sh-ease), gap .4s var(--sh-ease); } .sh-btn::after, .button-container a::after, .read-more::after { content: "→"; font-size: 13px; letter-spacing: 0; transition: transform .4s var(--sh-ease); } .sh-btn:hover, .button-container a:hover, .read-more:hover { color: var(--sh-clay); border-color: var(--sh-clay); gap: 1.1em; } .sh-btn:hover::after, .button-container a:hover::after { transform: translateX(3px); } /* Filled variant, used on the hero and in the footer. */ .sh-btn--solid { background: var(--sh-ink); color: var(--sh-paper); border: 0; padding: 17px 34px; border-radius: 999px; } .sh-btn--solid:hover { background: var(--sh-clay); color: var(--sh-paper); } .sh-btn--solid:active { transform: scale(.98); } /* -------------------------------------------------------------------------- Announcement marquee -------------------------------------------------------------------------- */ .sh-marquee { position: relative; z-index: calc(var(--sh-z-header) + 1); background: var(--sh-ink); color: var(--sh-paper); overflow: hidden; padding: 11px 0; display: flex; } .sh-marquee__track { display: flex; flex-shrink: 0; gap: 3.5rem; padding-right: 3.5rem; white-space: nowrap; animation: sh-scroll 46s linear infinite; } .sh-marquee span { opacity: .82; } .sh-marquee span::before { content: "◦"; margin-right: 3.5rem; opacity: .5; } @keyframes sh-scroll { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .sh-marquee__track { animation: none; } .sh-marquee { justify-content: center; } } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header.header-one { background: transparent; box-shadow: none; border: 0; } .top-header { display: none; } /* theme's date/social strip — replaced by the marquee */ .bottom-header, .bottom-header.fixed-header { position: sticky; top: 0; z-index: var(--sh-z-header); background: var(--sh-paper); border-bottom: 1px solid var(--sh-line); padding: 0; box-shadow: none; transition: background .5s var(--sh-ease), border-color .5s var(--sh-ease), backdrop-filter .5s var(--sh-ease); } .bottom-header > .container { max-width: var(--sh-max); padding-inline: var(--sh-gutter); } .bottom-header .row { min-height: 84px; } /* Over a hero image the header floats, inverted, until the page scrolls. */ .sh-has-hero .bottom-header { position: fixed; inset-inline: 0; background: transparent; border-bottom-color: transparent; } .sh-has-hero .bottom-header .site-title a, .sh-has-hero .bottom-header .nav-menu > li > a, .sh-has-hero .bottom-header .search-icon, .sh-has-hero .bottom-header .offcanvas-menu-toggler { color: #fff; } /* Guarantee legibility of the inverted header over any hero photograph, including pale, high-key ones. */ .sh-has-hero .bottom-header::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 220%; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(12, 9, 8, .62) 0%, rgba(12, 9, 8, .28) 55%, rgba(12, 9, 8, 0) 100%); transition: opacity .5s var(--sh-ease); } .sh-has-hero .bottom-header.sh-stuck::before { opacity: 0; } .sh-has-hero .bottom-header.sh-stuck { background: rgba(251, 248, 244, 0.86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--sh-line); } .sh-has-hero .bottom-header.sh-stuck .site-title a, .sh-has-hero .bottom-header.sh-stuck .nav-menu > li > a, .sh-has-hero .bottom-header.sh-stuck .search-icon, .sh-has-hero .bottom-header.sh-stuck .offcanvas-menu-toggler { color: var(--sh-ink); text-shadow: none; } /* Wordmark ------------------------------------------------------------- */ .site-branding { padding: 0; } .site-branding .site-title { margin: 0; font-family: var(--sh-serif); line-height: .86; } .site-header .site-branding > a, .site-branding .site-title a { max-width: none; display: inline-block; } .site-branding .site-title a { transition: opacity .4s var(--sh-ease); } .site-branding .site-title a:hover { opacity: .62; color: inherit; } /* Stacked serif mark, same construction as the footer wordmark. */ .sh-wordmark--sm { display: inline-block; font-family: var(--sh-serif); font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem); line-height: .86; letter-spacing: -0.025em; text-transform: none; } .sh-wordmark--sm em { font-style: italic; } .site-branding .site-description { display: none; } /* Navigation ----------------------------------------------------------- */ .main-navigation .menu-wrap > .nav-menu, #primary-menu.nav-menu { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.4rem, 2.4vw, 3rem); margin: 0; padding: 0; list-style: none; } .nav-menu > li { position: relative; } .nav-menu > li > a { font-family: var(--sh-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sh-ink); padding: 8px 0; display: inline-block; position: relative; } /* Underline wipes in from the left rather than fading. */ .nav-menu > li > a::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--sh-ease); } .nav-menu > li > a:hover::after, .nav-menu > li.current-menu-item > a::after, .nav-menu > li.current_page_item > a::after { transform: scaleX(1); transform-origin: left; } .nav-menu > li.current-menu-item > a, .nav-menu > li.current_page_item > a { color: var(--sh-clay); } .menu-toggle { display: none; } .header-search .search-icon, .search-icon { color: inherit; font-size: 14px; } .offcanvas-menu-toggler, .alt-menu-icon { color: var(--sh-ink); } /* Search overlay ------------------------------------------------------- */ .header-search-wrap, .header-search { background: var(--sh-paper); border-bottom: 1px solid var(--sh-line); } .search-form { position: relative; } .search-field { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--sh-line); border-radius: 0; font-family: var(--sh-serif); font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--sh-ink); padding: 18px 48px 18px 0; } .search-field::placeholder { color: var(--sh-ink-faint); } .search-field:focus { outline: none; border-bottom-color: var(--sh-clay); } .search-submit, .search-button { background: none; border: 0; color: var(--sh-ink); font-size: 13px; } /* Off-canvas ----------------------------------------------------------- */ .offcanvas-menu-wrap { background: var(--sh-paper); } .offcanvas-menu-inner { padding: 2rem var(--sh-gutter); } .offcanvas-menu-content .nav-menu, .mobile-menu-container .nav-menu { display: block; } .offcanvas-menu-content .nav-menu > li > a, .mobile-menu-container .nav-menu > li > a { font-family: var(--sh-serif); font-size: 1.9rem; letter-spacing: -0.02em; text-transform: none; padding: 14px 0; display: block; border-bottom: 1px solid var(--sh-line); } .offcanvas-menu-content .nav-menu > li > a::after, .mobile-menu-container .nav-menu > li > a::after { display: none; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .section-banner { position: relative; margin: 0; background: var(--sh-ink); } .section-banner .main-slider-wrap { margin: 0; } /* Slick owns .slide-item — it sets float and an inline pixel width, so the only thing changed there is the theme's fixed height. The flex context lives one level in, on .banner-img, which must fill the slide. */ .section-banner .slide-item { height: auto; } .section-banner .banner-img { width: 100%; height: auto; min-height: 100vh; min-height: 100svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; background-size: cover; background-position: center; } @media (max-width: 767px) { .section-banner .banner-img { min-height: 88svh; } } /* Slow drift on the active slide — the image should never look static. */ .section-banner .slick-current .banner-img { animation: sh-drift 16s ease-out forwards; } @keyframes sh-drift { from { transform: scale(1.06); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .section-banner .slick-current .banner-img { animation: none; } } /* Warm scrim, weighted to the bottom where the type sits. */ .section-banner .banner-img .overlay, .section-banner .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 14, 12, .86) 0%, rgba(18, 14, 12, .40) 40%, rgba(18, 14, 12, .10) 66%, rgba(18, 14, 12, .48) 100%) !important; } .section-banner .slide-inner { position: relative; z-index: 2; flex: 1 1 100%; width: 100%; max-width: var(--sh-max); margin: 0 auto; padding: 0 var(--sh-gutter) clamp(5rem, 11vh, 9rem); } /* Theme centres banner copy; an editorial hero reads better set left. */ /* Theme puts Bootstrap's .text-center (which is !important) on this element. */ .section-banner .slide-inner .banner-content { max-width: min(46rem, 100%); text-align: left !important; } .section-banner .slide-inner .banner-content .entry-meta, .section-banner .slide-inner .banner-content .cat-links { text-align: left !important; } @media (max-width: 900px) { .section-banner .slide-inner .banner-content { max-width: 100%; } } .section-banner .banner-content .cat-links { display: block; margin-bottom: 1.6rem; } .section-banner .banner-content .cat-links a { color: var(--sh-shell); border-color: rgba(232, 196, 180, .55); } .section-banner .banner-content .cat-links a:hover { color: #fff; border-color: #fff; } .section-banner .banner-content .entry-title { font-size: var(--sh-display); line-height: 0.94; letter-spacing: -0.035em; color: #fff; margin: 0 0 1.4rem; } .section-banner .banner-content .entry-title a { color: #fff; } .section-banner .banner-content .entry-title a:hover { color: var(--sh-shell); } .section-banner .banner-content .entry-text { color: rgba(255, 255, 255, .78); font-size: 15px; max-width: 46ch; margin-bottom: 1.8rem; } .section-banner .banner-content .entry-meta, .section-banner .banner-content .entry-meta a { color: rgba(255, 255, 255, .7); } .section-banner .banner-content .entry-meta a:hover { color: #fff; } /* Slick controls ------------------------------------------------------- */ .section-banner .main-slider-dots, .section-banner .slick-dots { position: absolute; bottom: clamp(2rem, 4vh, 3.2rem); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; list-style: none; padding: 0; } .section-banner .slick-dots li { margin: 0; } .section-banner .slick-dots li button { width: 30px; height: 2px; padding: 0; border: 0; border-radius: 0; font-size: 0; background: rgba(255, 255, 255, .35); transition: background .45s var(--sh-ease); } .section-banner .slick-dots li button::before { display: none; } .section-banner .slick-dots li.slick-active button { background: var(--sh-shell); } .section-banner .slick-control, .slick-control { list-style: none; padding: 0; } .slick-arrow, .slick-prev, .slick-next { width: 46px; height: 46px; border-radius: 999px; background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .3) !important; color: #fff !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .4s var(--sh-ease), border-color .4s var(--sh-ease); z-index: 3; } .slick-arrow:hover, .slick-prev:hover, .slick-next:hover { background: var(--sh-shell) !important; border-color: var(--sh-shell) !important; color: var(--sh-ink) !important; } /* Scroll cue ----------------------------------------------------------- */ .sh-scrollcue { position: absolute; left: 50%; bottom: clamp(2rem, 4vh, 3.2rem); transform: translateX(-50%); z-index: 3; color: rgba(255, 255, 255, .6); font-size: 9.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; display: none; /* enabled at ≥1200px where there is room beside the dots */ } @media (min-width: 1200px) { .sh-scrollcue { display: block; left: var(--sh-gutter); transform: none; } .sh-scrollcue::after { content: ""; display: block; width: 1px; height: 46px; margin: 12px auto 0; background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent); animation: sh-cue 2.4s ease-in-out infinite; } } @keyframes sh-cue { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } } /* -------------------------------------------------------------------------- Section shell + headings -------------------------------------------------------------------------- */ .site-content { padding: 0; } .site-content > .container, .section-post-area > .container { max-width: var(--sh-max); padding-inline: var(--sh-gutter); width: 100%; } .section-feature-posts-area, .section-post-area, .section-highlight-post { padding-block: var(--sh-band) calc(var(--sh-band) * 1.1); } .sh-sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.4rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--sh-line); } .sh-sectionhead h2 { font-size: var(--sh-h2); margin: 0; line-height: 1.1; } .sh-sectionhead .sh-eyebrow { color: var(--sh-clay); display: block; margin-bottom: 1.1rem; } .sh-sectionhead p { margin: 0; max-width: 42ch; color: var(--sh-ink-soft); font-size: 14px; } /* -------------------------------------------------------------------------- Feature grid — deliberately asymmetric; the lead story earns two columns. -------------------------------------------------------------------------- */ /* Grid is defined mobile-first so later additions cannot leak downward: one column, then two, then the six-column editorial layout on desktop. */ .section-feature-posts-area .content-wrap > .row { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 1.6vw, 1.75rem); margin: 0; } .section-feature-posts-area .content-wrap > .row > [class*="col-"] { grid-column: auto; max-width: none; flex: none; width: auto; padding: 0; } @media (min-width: 601px) { .section-feature-posts-area .content-wrap > .row { grid-template-columns: repeat(2, 1fr); } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(1) { grid-column: span 2; } } @media (min-width: 992px) { /* Six cards over three rows of six columns: 4+2, 2+4, 3+3. Asymmetric and mirrored down the page, but every row fills the grid exactly. */ .section-feature-posts-area .content-wrap > .row { grid-template-columns: repeat(6, 1fr); } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(1) { grid-column: span 4; } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(2) { grid-column: span 2; } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(3) { grid-column: span 2; } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(4) { grid-column: span 4; } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(5) { grid-column: span 3; } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(6) { grid-column: span 3; } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(1) .feature-posts-image, .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(4) .feature-posts-image { min-height: clamp(380px, 34vw, 520px); } .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(5) .feature-posts-image, .section-feature-posts-area .content-wrap > .row > [class*="col-"]:nth-child(6) .feature-posts-image { min-height: clamp(320px, 26vw, 400px); } } .feature-posts-content-wrap { margin: 0; height: 100%; } .feature-posts-image { position: relative; height: 100%; min-height: 0; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; overflow: hidden; background-size: cover; background-position: center; isolation: isolate; } .feature-posts-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(18, 14, 12, .74) 0%, rgba(18, 14, 12, .20) 48%, rgba(18, 14, 12, 0) 80%); transition: opacity .6s var(--sh-ease); } /* Scale the painted background, not the box — no layout work on hover. */ .feature-posts-image { transition: background-size .9s var(--sh-ease); background-size: 100% auto; background-size: cover; } .feature-posts-content-wrap:hover .feature-posts-image { transform: none; } .feature-posts-image > * { position: relative; z-index: 2; } .feature-posts-content { padding: clamp(1.5rem, 2.4vw, 2.6rem); width: 100%; } .feature-posts-content .cat-links { display: block; margin-bottom: 1rem; } .feature-posts-content .cat-links a { color: var(--sh-shell); border-color: rgba(232, 196, 180, .5); } .feature-posts-title { font-size: var(--sh-h3); margin: 0 0 .9rem; color: #fff; } .feature-posts-title a { color: #fff; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--sh-ease); } .feature-posts-content-wrap:hover .feature-posts-title a { background-size: 100% 1px; } .feature-posts-content .entry-meta, .feature-posts-content .entry-meta a { color: rgba(255, 255, 255, .72); } /* Hover: lift the card and brighten the image. */ .feature-posts-content-wrap { transition: transform .6s var(--sh-ease), box-shadow .6s var(--sh-ease); will-change: transform; } .feature-posts-content-wrap:hover { transform: translateY(-6px); box-shadow: var(--sh-shadow); } .feature-posts-content-wrap:hover .feature-posts-image::before { opacity: .82; } } } /* -------------------------------------------------------------------------- Post list — full-width alternating editorial rows, not a centred column. -------------------------------------------------------------------------- */ .section-post-area > .row { margin: 0; } .section-post-area #primary.content-area { flex: 0 0 100%; max-width: 100%; margin-left: 0; padding: 0; } .section-post-area #primary > .row { margin: 0; display: block; } .section-post-area #primary > .row > .col-12 { padding: 0; } .site-content article.list-post { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: clamp(2rem, 5vw, 6rem); padding-block: clamp(2.5rem, 5vw, 5rem); border-bottom: 1px solid var(--sh-line); margin: 0; } .site-content article.list-post:first-child { padding-top: 0; } .site-content article.list-post > .featured-image { margin: 0; overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: var(--sh-sand); } .site-content .site-content article.list-post > .featured-image a { display: block; height: 100%; } .site-content .site-content article.list-post > .featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sh-ease), filter .8s var(--sh-ease); } .site-content article.list-post:hover > .featured-image img { transform: scale(1.045); } /* Flip every second row. Grid order keeps the DOM order intact for readers. */ .site-content article.list-post:nth-child(even) > .featured-image { order: 2; } .site-content article.list-post > .entry-content { padding: 0; } .site-content article.list-post .cat-links { display: block; margin-bottom: 1.3rem; } .site-content article.list-post .entry-title { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.85rem); margin: 0 0 1.1rem; line-height: 1.12; } .site-content .site-content article.list-post .entry-title a { background-image: linear-gradient(var(--sh-clay), var(--sh-clay)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--sh-ease), color .35s var(--sh-ease); } .site-content article.list-post:hover .entry-title a { background-size: 100% 1px; color: var(--sh-clay); } .site-content article.list-post .entry-text { color: var(--sh-ink-soft); font-size: 15px; max-width: 54ch; margin: 1.2rem 0 1.8rem; } .site-content article.list-post .entry-meta { margin-bottom: 0; } @media (max-width: 860px) { .site-content article.list-post { grid-template-columns: 1fr; gap: 1.6rem; } .site-content article.list-post:nth-child(even) > .featured-image { order: 0; } .site-content article.list-post > .featured-image { aspect-ratio: 16 / 10; } } /* Pagination ----------------------------------------------------------- */ .navigation.pagination { margin-top: clamp(3rem, 6vw, 5rem); display: flex; justify-content: center; } .navigation.pagination .nav-links { display: flex; align-items: center; gap: 6px; } .navigation.pagination .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; font-size: 12px; letter-spacing: .08em; color: var(--sh-ink-soft); background: none; transition: all .35s var(--sh-ease); } .navigation.pagination .page-numbers:hover { border-color: var(--sh-line); color: var(--sh-ink); } .navigation.pagination .page-numbers.current { background: var(--sh-ink); border-color: var(--sh-ink); color: var(--sh-paper); } /* -------------------------------------------------------------------------- Highlight strip — full-bleed band on sand -------------------------------------------------------------------------- */ .section-highlight-post { background: var(--sh-sand); margin-inline: calc(50% - 50vw); padding-inline: max(var(--sh-gutter), calc(50vw - var(--sh-max) / 2)); } .section-highlight-post .section-highlight-inner { max-width: var(--sh-max); margin: 0 auto; } /* The theme bleeds .slick-list out by -15px and pays it back with 15px of padding on each slide. Overriding the slide padding alone broke that pair, pushing card content past the slider's own overflow:hidden edge and clipping the captions. Zero the bleed instead and gutter the slides on one side, so the first card sits flush with the section edge. */ .section-highlight-post .slick-list { margin-left: 0; margin-right: 0; } .section-highlight-post .slide-item { padding-left: 0; padding-right: 16px; } .section-highlight-post .slide-item img, .highlight-post-slider img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--sh-ease); } .section-highlight-post .slide-item:hover img { transform: scale(1.04); } .section-highlight-post .entry-title { font-size: 1.15rem; margin-top: 1rem; line-height: 1.2; } .section-highlight-post .wrap-arrow { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1.6rem; } .section-highlight-post .wrap-arrow .slick-arrow, .section-highlight-post .slick-control li { background: transparent !important; border-color: var(--sh-line) !important; color: var(--sh-ink) !important; backdrop-filter: none; } .section-highlight-post .wrap-arrow .slick-arrow:hover { background: var(--sh-ink) !important; border-color: var(--sh-ink) !important; color: var(--sh-paper) !important; } /* -------------------------------------------------------------------------- Single post -------------------------------------------------------------------------- */ .wrap-detail-page { padding-block: clamp(7rem, 12vh, 11rem) var(--sh-band); } .sh-has-hero .wrap-detail-page { padding-top: clamp(7rem, 12vh, 11rem); } .wrap-detail-page > .page-title, .wrap-detail-page .entry-title.page-title { font-size: var(--sh-h1); line-height: 1.1; max-width: 20ch; margin: 0 0 2rem; } .wrap-detail-page .sh-postmeta { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; padding-bottom: 2.2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--sh-line); } figure.feature-image.single-feature-image { margin: 0 0 clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; background: var(--sh-sand); } figure.feature-image.single-feature-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* Reading column. The theme puts the article at col-12; constrain the prose itself so the measure stays around 68 characters. */ .wrap-detail-page .entry-container > .entry-content, .wrap-detail-page article > .entry-content { max-width: 68ch; margin-inline: auto; font-size: 18px; line-height: 1.78; color: rgba(23, 24, 26, .86); } .wrap-detail-page .entry-content > p { margin: 0 0 1.6em; } /* Opening paragraph carries a raised cap and slightly larger measure. */ .wrap-detail-page .entry-content > p:first-of-type { font-size: 21px; line-height: 1.62; color: var(--sh-ink); } .wrap-detail-page .entry-content > p:first-of-type::first-letter { font-family: var(--sh-serif); font-size: 4.1em; line-height: .78; float: left; margin: .06em .12em 0 0; color: var(--sh-clay); } .wrap-detail-page .entry-content h2, .wrap-detail-page .entry-content h3 { font-size: var(--sh-h3); margin: 2.4em 0 .7em; } .wrap-detail-page .entry-content blockquote { margin: 2.4em 0; padding: 0 0 0 1.6rem; border-left: 2px solid var(--sh-shell); font-family: var(--sh-serif); font-size: 1.6rem; line-height: 1.34; color: var(--sh-ink); } .wrap-detail-page .entry-content a { color: var(--sh-clay); border-bottom: 1px solid rgba(184, 92, 62, .34); } .wrap-detail-page .entry-content a:hover { border-bottom-color: var(--sh-clay); } .wrap-detail-page .entry-content img { width: 100%; height: auto; margin: 2.2em 0; } /* Page templates (privacy, terms, cookies) share the prose treatment but get no drop cap — they are documents, not features. */ .wrap-detail-page .entry-content > p:first-of-type:where(.sh-nocap)::first-letter { all: unset; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer.site-footer-primary { background: var(--sh-shell); color: var(--sh-ink); margin: 0; } .site-footer .site-footer-inner { background-image: none !important; background-color: transparent; padding: 0; } .sh-footer { max-width: var(--sh-max); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) var(--sh-gutter) 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .sh-footer__brand .sh-wordmark { font-family: var(--sh-serif); font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); line-height: .95; letter-spacing: -0.03em; display: block; margin-bottom: 1.4rem; } .sh-footer__brand .sh-wordmark em { font-style: italic; } .sh-footer__brand p { max-width: 34ch; color: rgba(23, 24, 26, .72); font-size: 14.5px; margin: 0 0 2rem; } .sh-footer__label { display: block; margin-bottom: 1.4rem; color: rgba(23, 24, 26, .55); } .sh-footer ul { list-style: none; margin: 0; padding: 0; } .sh-footer li + li { margin-top: .75rem; } .sh-footer li a { font-size: 14.5px; opacity: .8; } .sh-footer li a:hover { opacity: 1; color: var(--sh-ink); } .sh-signup { display: flex; gap: 10px; max-width: 400px; flex-wrap: wrap; } .sh-signup input[type="email"] { flex: 1 1 200px; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid rgba(23, 24, 26, .35); padding: 10px 0; font-family: var(--sh-sans); font-size: 14px; color: var(--sh-ink); border-radius: 0; } .sh-signup input::placeholder { color: rgba(23, 24, 26, .45); } .sh-signup input:focus { outline: none; border-bottom-color: var(--sh-ink); } .sh-signup__note { font-size: 12px; color: rgba(23, 24, 26, .6); margin: .7rem 0 0; flex: 1 0 100%; } .sh-signup__note[data-state="error"] { color: #8c2f16; } .bottom-footer { border-top: 1px solid rgba(23, 24, 26, .18); margin-top: clamp(3rem, 6vw, 5rem); } .bottom-footer > .container { max-width: var(--sh-max); padding-inline: var(--sh-gutter); } .site-info { padding: 1.6rem 0; font-size: 12px; letter-spacing: .04em; color: rgba(23, 24, 26, .62); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; text-align: left; } .site-info a { border-bottom: 1px solid rgba(23, 24, 26, .3); } @media (max-width: 860px) { .sh-footer { grid-template-columns: 1fr 1fr; } .sh-footer__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .sh-footer { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Preloader -------------------------------------------------------------------------- */ #preloader, .preloader-content { background: var(--sh-paper) !important; } .preloader-content img { display: none; } .preloader-content::after { content: "SLAY HARBOR"; font-family: var(--sh-sans); font-size: 10px; font-weight: 500; letter-spacing: .4em; color: var(--sh-ink-faint); animation: sh-pulse 1.6s ease-in-out infinite; } @keyframes sh-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } } /* -------------------------------------------------------------------------- Scroll reveal Initial states are gated on html.sh-js so the page is fully readable if the animation script never runs. sh-reveal-all is a timed failsafe. -------------------------------------------------------------------------- */ html.sh-js [data-sh-reveal] { opacity: 0; transform: translateY(26px); } html.sh-reveal-all [data-sh-reveal] { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html.sh-js [data-sh-reveal] { opacity: 1; transform: none; } html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- Skip link -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--sh-ink); color: var(--sh-paper); padding: 12px 20px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .skip-link:focus { left: 12px; top: 12px; color: var(--sh-paper); } /* Back-to-top button the theme renders as #scroll-to-top / .back-to-top */ #scroll-to-top, .back-to-top, .scroll-to-top { background: var(--sh-ink) !important; color: var(--sh-paper) !important; border: 0 !important; border-radius: 999px !important; width: 44px; height: 44px; display: inline-flex !important; align-items: center; justify-content: center; transition: background .35s var(--sh-ease), transform .35s var(--sh-ease); } #scroll-to-top:hover, .back-to-top:hover { background: var(--sh-clay) !important; transform: translateY(-3px); } /* -------------------------------------------------------------------------- Theme accent overrides The Bosa customizer writes #FF7236 into an inline