/* ================================================================= EuroThrills Core — blog listing (The Field Guide) Masthead, filter bar, featured row, card grid, newsletter band, final CTA, footer (from blog.css 127–311, 457–530). Verbatim from the design; depends on eurothrills-base-shared for tokens/buttons. ================================================================= */ /* ================================================================= LISTING — masthead ================================================================= */ .bl-masthead { background: var(--et-deep-2); color: #fff; position: relative; overflow: hidden; } .bl-masthead::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 360px at 88% -10%, rgba(30,64,168,0.55), transparent 60%), radial-gradient(640px 300px at 6% 120%, rgba(225,37,27,0.22), transparent 60%); } .bl-masthead-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 76px 32px 64px; } .bl-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; } .bl-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--et-accent); } .bl-eyebrow .pill { background: var(--et-accent); color: #fff; padding: 3px 9px; border-radius: 9999px; font-size: 10px; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 5px; } .bl-eyebrow .pill .dot { width: 5px; height: 5px; border-radius: 9999px; background: #fff; } .bl-masthead-title { font-size: clamp(46px, 6.4vw, 92px); line-height: 0.92; letter-spacing: -0.04em; font-weight: 800; margin: 0 0 22px; max-width: 16ch; } .bl-masthead-title em { font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #fff; background: linear-gradient(100deg, #fff 0%, #ffd7d4 55%, var(--et-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bl-masthead-sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: rgba(255,255,255,0.74); max-width: 600px; margin: 0; } .bl-masthead-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 42px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.14); } .bl-stat { display: flex; flex-direction: column; gap: 4px; } .bl-stat .num { font-family: var(--display); font-style: italic; font-size: 38px; line-height: 1; letter-spacing: -0.02em; } .bl-stat .num em { color: var(--et-accent); font-style: italic; } .bl-stat .lab { font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); text-transform: uppercase; } /* ===== Filter bar (sticky) ===== */ .bl-filter { position: sticky; top: 73px; z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--et-line); } .bl-filter-inner { max-width: 1180px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 18px; } .bl-filter-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex: 1; } .bl-filter-track::-webkit-scrollbar { display: none; } .bl-chip { flex-shrink: 0; height: 36px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--et-line-2); background: #fff; color: var(--et-ink-3); font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 7px; transition: all .15s ease; white-space: nowrap; } .bl-chip:hover { border-color: var(--et-ink-3); color: var(--et-ink); } .bl-chip .ic { width: 14px; height: 14px; display: inline-flex; } .bl-chip .ic svg { width: 14px; height: 14px; } .bl-chip .ct { font-size: 11px; color: var(--et-mute); font-variant-numeric: tabular-nums; } .bl-chip.active { background: var(--et-brand); border-color: var(--et-brand); color: #fff; } .bl-chip.active .ct { color: rgba(255,255,255,0.7); } .bl-filter-search { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--et-line-2); background: var(--et-cream); color: var(--et-mute); font-size: 13px; } .bl-filter-search svg { width: 14px; height: 14px; } /* ===== Featured row ===== */ .bl-section { padding: 56px 0; } .bl-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .bl-section-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-brand); display: inline-flex; align-items: center; gap: 10px; } .bl-section-label::before { content: ""; width: 22px; height: 1px; background: var(--et-brand); } .bl-section-link { font-size: 13.5px; font-weight: 600; color: var(--et-ink-2); display: inline-flex; align-items: center; gap: 6px; transition: gap .15s ease, color .15s ease; } .bl-section-link:hover { color: var(--et-brand); gap: 10px; } .bl-section-link svg { width: 14px; height: 14px; } .bl-feature-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; } .bl-feature-side { display: flex; flex-direction: column; gap: 22px; } /* Big feature card */ .bl-feature { position: relative; border-radius: 18px; overflow: hidden; color: #fff; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; border: 1px solid var(--et-line); } .bl-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,40,0.05) 0%, rgba(8,16,40,0.12) 42%, rgba(8,16,40,0.86) 100%); } .bl-feature:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(8,16,40,0.5); } .bl-feature-body { position: relative; z-index: 1; padding: 34px 36px 36px; display: flex; flex-direction: column; gap: 14px; } .bl-feature-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.82); } .bl-feature-title { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; margin: 0; text-wrap: balance; max-width: 18ch; } .bl-feature-title em { font-family: var(--display); font-style: italic; font-weight: 400; color: #fff; } .bl-feature-desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0; max-width: 52ch; } .bl-feature-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; } /* Category tag */ .bl-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 11px; border-radius: 9999px; background: var(--et-brand); color: #fff; white-space: nowrap; } .bl-cat .dot { width: 5px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,0.85); } .bl-cat.safety { background: var(--et-accent); } .bl-cat.gear { background: var(--et-deep-2); } .bl-cat.skills { background: var(--et-ok); } .bl-cat.grades { background: var(--et-warn); } .bl-cat.field { background: var(--et-brand); } .bl-cat.on-photo { background: rgba(255,255,255,0.94); color: var(--et-ink); } .bl-cat.on-photo .dot { background: var(--et-accent); } .bl-readtime { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.86); } .bl-readtime svg { width: 13px; height: 13px; } .bl-byline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .bl-avatar { width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: 0; } .bl-avatar.a { background: linear-gradient(135deg, #1E40A8, #0E1F52); } .bl-avatar.b { background: linear-gradient(135deg, #E1251B, #8A1410); } .bl-avatar.c { background: linear-gradient(135deg, #2F5C3A, #16331F); } .bl-avatar.d { background: linear-gradient(135deg, #8A5B14, #4A3008); } .bl-avatar.e { background: linear-gradient(135deg, #1f3142, #0c1820); } /* Side feature (compact, horizontal) */ .bl-side-card { display: grid; grid-template-columns: 150px 1fr; gap: 0; background: var(--et-paper); border: 1px solid var(--et-line); border-radius: 14px; overflow: hidden; flex: 1; transition: transform .25s ease, box-shadow .25s ease; } .bl-side-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(8,16,40,0.28); } .bl-side-media { background-size: cover; background-position: center; background-color: var(--et-cream-2); position: relative; } .bl-side-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; justify-content: center; min-width: 0; } .bl-side-title { font-size: 17px; font-weight: 700; line-height: 1.22; letter-spacing: -0.015em; color: var(--et-ink); margin: 0; text-wrap: pretty; } .bl-side-title em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--et-accent); } .bl-side-foot { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--et-mute); } .bl-side-foot .bl-byline { font-size: 11.5px; color: var(--et-ink-2); } .bl-side-foot .bl-avatar { width: 20px; height: 20px; font-size: 8.5px; } .bl-side-foot .bl-readtime { color: var(--et-mute); font-weight: 500; } .bl-side-foot .bl-readtime svg { width: 11px; height: 11px; } .bl-dotsep { width: 2px; height: 2px; border-radius: 9999px; background: var(--et-mute-2); } /* ===== Card grid ===== */ .bl-grid-bg { background: var(--et-paper); border-top: 1px solid var(--et-line); border-bottom: 1px solid var(--et-line); } .bl-grid { display: grid; grid-template-columns: repeat(var(--bl-cols, 3), 1fr); gap: 24px; } .bl-card { background: var(--et-paper); border: 1px solid var(--et-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; color: inherit; } .bl-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(8,16,40,0.26); } .bl-card-media { height: 210px; position: relative; background-size: cover; background-position: center; background-color: var(--et-cream-2); overflow: hidden; } .bl-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 36%); } .bl-card-media .bl-cat { position: absolute; top: 13px; left: 13px; z-index: 1; } .bl-card-media .bl-card-save { position: absolute; top: 11px; right: 11px; z-index: 1; width: 32px; height: 32px; border-radius: 9999px; display: grid; place-items: center; background: rgba(255,255,255,0.92); color: var(--et-ink-2); backdrop-filter: blur(6px); transition: all .15s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.14); } .bl-card-save:hover { background: #fff; color: var(--et-accent); } .bl-card-save.is-saved { background: #fff; color: var(--et-accent); } .bl-card-save svg { width: 15px; height: 15px; } .bl-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .bl-card-title { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.018em; color: var(--et-ink); margin: 0; text-wrap: pretty; } .bl-card-title em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--et-accent); } .bl-card-desc { font-size: 13.5px; line-height: 1.5; color: var(--et-ink-3); margin: 0; } .bl-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--et-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .bl-card-foot .bl-byline { font-size: 12px; color: var(--et-ink-2); } .bl-card-foot .bl-avatar { width: 22px; height: 22px; font-size: 9px; } .bl-card-foot .bl-readtime { color: var(--et-mute); font-weight: 500; font-size: 12px; } .bl-card-foot .bl-readtime svg { width: 12px; height: 12px; } /* When 2 cols, make cards a touch larger media */ body[style*="--bl-cols: 2"] .bl-card-media, .bl-grid[data-cols="2"] .bl-card-media { height: 260px; } .bl-empty { display: none; padding: 48px 0; text-align: center; color: var(--et-mute); font-size: 14px; } .bl-empty.show { display: block; } .bl-more { display: flex; justify-content: center; margin-top: 44px; } /* ===== Newsletter band ===== */ .bl-news-bg { padding: 64px 0; } .bl-news { background: var(--et-deep-2); color: #fff; border-radius: 22px; padding: 48px 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } .bl-news::after { content: ""; position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at center, rgba(30,64,168,0.5), transparent 62%); pointer-events: none; } .bl-news-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--et-accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; } .bl-news-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--et-accent); } .bl-news h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; margin: 0 0 12px; } .bl-news h2 em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--et-accent); } .bl-news p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.74); margin: 0; max-width: 46ch; } .bl-news-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; } .bl-news-row { display: flex; gap: 10px; } .bl-news-input { flex: 1; height: 52px; padding: 0 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); color: #fff; font: inherit; font-size: 15px; outline: none; transition: border-color .15s ease, background .15s ease; } .bl-news-input::placeholder { color: rgba(255,255,255,0.5); } .bl-news-input:focus { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.12); } /* White submit button on the dark band; beats the `.et-scope button` reset. */ .bl-news-row .btn-primary { background: #fff; color: var(--et-brand); padding: 0 32px; } .bl-news-row .btn-primary:hover { background: rgba(255,255,255,0.9); } .bl-news-note { font-size: 12px; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 7px; } .bl-news-note svg { width: 13px; height: 13px; color: var(--et-accent); } /* Embedded Fluent Form inside the newsletter band. Fluent Forms injects its own scoped