/*! * Junk Bros Ottawa — main stylesheet (loaded non-render-blocking). * Author: Selman Selman @ Engineered Leads * * Tokens and above-the-fold rules live in critical.css, inlined in . * Everything here is below the fold or interaction state. */ /* ------------------------------------------------------------------ Layout */ .jb-main { display: block; } .jb-section { padding-block: var(--jb-section-y); scroll-margin-top: calc(var(--jb-header-h) + 12px); } .jb-section--alt { background: var(--jb-bg-alt); } .jb-sectionhead { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .jb-sectionhead__title { font-size: var(--jb-fs-h2); margin-bottom: 0.45em; text-wrap: balance; } .jb-sectionhead__intro { margin: 0; font-size: var(--jb-fs-lead); color: var(--jb-muted); } .jb-section__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: clamp(2rem, 4vw, 3rem); } .jb-section__actions--left { justify-content: flex-start; margin-top: 1.75rem; } .jb-grid { display: grid; gap: 1rem; } @media (min-width: 620px) { .jb-grid--2 { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------- Cards */ .jb-cards { display: grid; gap: clamp(0.85rem, 1.8vw, 1.35rem); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .jb-card { position: relative; padding: clamp(1.35rem, 2.4vw, 1.85rem); background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: var(--jb-radius-lg); box-shadow: var(--jb-shadow-sm); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .jb-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--jb-primary) 40%, var(--jb-border)); box-shadow: var(--jb-shadow); } .jb-card--flush { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; } .jb-card--flush:hover { transform: none; border-color: transparent; box-shadow: none; } .jb-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 1.05rem; border-radius: 14px; background: color-mix(in srgb, var(--jb-primary) 12%, transparent); color: var(--jb-primary); } .jb-card__icon--support { background: color-mix(in srgb, var(--jb-support) 13%, transparent); color: var(--jb-support); } .jb-card__title { font-size: var(--jb-fs-h3); margin-bottom: 0.4em; font-weight: 780; } .jb-card__text { margin: 0; color: var(--jb-muted); font-size: 0.96rem; } /* ------------------------------------------------------- How it works steps */ .jb-process__layout--split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; } @media (min-width: 900px) { .jb-process__layout--split { grid-template-columns: 1.15fr 0.85fr; } } .jb-steps { display: grid; gap: 0.9rem; } .jb-step { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 0.95rem; padding: 1.2rem 1.3rem; background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: var(--jb-radius-lg); } .jb-step__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--jb-secondary); color: var(--jb-secondary-ink); font-weight: 800; font-size: 0.92rem; flex: none; } .jb-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--jb-primary); flex: none; } .jb-step__title { font-size: 1.06rem; margin-bottom: 0.25em; font-weight: 780; } .jb-step__text { margin: 0; color: var(--jb-muted); font-size: 0.95rem; } .jb-process__figure, .jb-why__figure, .jb-areas__figure, .jb-quote__figure { margin: 0; border-radius: var(--jb-radius-lg); overflow: hidden; box-shadow: var(--jb-shadow); } .jb-process__img, .jb-why__img, .jb-areas__img, .jb-quote__img { width: 100%; object-fit: cover; } .jb-why__figure { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); max-height: 420px; } /* --------------------------------------------------------------- Chips list */ .jb-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; } .jb-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem; background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: var(--jb-radius-pill); font-size: 0.9rem; font-weight: 620; color: var(--jb-text); } .jb-chip__icon { color: var(--jb-primary); flex: none; } .jb-areas__layout--split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; } @media (min-width: 900px) { .jb-areas__layout--split { grid-template-columns: 1.1fr 0.9fr; } } .jb-areas__note { margin-top: 1.4rem; color: var(--jb-muted); font-size: 0.95rem; } /* ----------------------------------------------------------------- Reviews */ .jb-rating { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 2rem; padding: 0.7rem 1.15rem; border: 1px solid var(--jb-border); border-radius: var(--jb-radius-pill); background: var(--jb-surface); box-shadow: var(--jb-shadow-sm); text-decoration: none; } .jb-rating__stars { display: inline-flex; gap: 0.1rem; color: #f5a623; } .jb-rating__text { font-size: 0.93rem; color: var(--jb-muted); } .jb-rating__text strong { color: var(--jb-text); font-size: 1.05rem; margin-right: 0.15rem; } .jb-card--review { display: flex; flex-direction: column; gap: 0.85rem; } .jb-card__quote { margin: 0; font-size: 1rem; } .jb-card__quote p { margin: 0; } .jb-card__quote p::before { content: "\201C"; } .jb-card__quote p::after { content: "\201D"; } .jb-card__cite { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: auto 0 0; font-size: 0.9rem; color: var(--jb-muted); } .jb-card__cite strong { color: var(--jb-text); } /* --------------------------------------------------------------- Key facts */ .jb-facts__list { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin: 0; } .jb-facts__item { padding: 1.15rem 1.3rem; background: var(--jb-surface); border: 1px solid var(--jb-border); border-left: 3px solid var(--jb-primary); border-radius: var(--jb-radius); } .jb-facts__label { margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 780; letter-spacing: -0.012em; } .jb-facts__value { margin: 0; color: var(--jb-muted); font-size: 0.95rem; } /* --------------------------------------------------------------- Accordion */ .jb-accordion { display: grid; gap: 0.6rem; } .jb-accordion__item { background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: var(--jb-radius); overflow: hidden; } .jb-accordion__item[open] { border-color: color-mix(in srgb, var(--jb-primary) 42%, var(--jb-border)); } .jb-accordion__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; font-weight: 720; font-size: 1.02rem; cursor: pointer; list-style: none; } .jb-accordion__q::-webkit-details-marker { display: none; } /* The question is a real h3 for answer engines; it must not look like one. */ .jb-accordion__qtext { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } .jb-accordion__chev { color: var(--jb-primary); transition: transform 0.2s ease; flex: none; } .jb-accordion__item[open] .jb-accordion__chev { transform: rotate(180deg); } .jb-accordion__a { padding: 0 1.25rem 1.15rem; color: var(--jb-muted); } .jb-accordion__a p { margin: 0; } /* --------------------------------------------------------------- CTA band */ .jb-cta { position: relative; isolation: isolate; padding-block: clamp(3.25rem, 6vw, 5.5rem); background: var(--jb-secondary); color: #fff; overflow: hidden; text-align: center; } .jb-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--jb-primary) 24%, transparent) 0%, transparent 62%); } .jb-cta__media { position: absolute; inset: 0; z-index: -2; } .jb-cta__img { width: 100%; height: 100%; object-fit: cover; } .jb-cta--image .jb-cta__media::after { content: ""; position: absolute; inset: 0; background: rgba(6, 16, 11, 0.72); } .jb-cta__title { font-size: var(--jb-fs-h2); margin-bottom: 0.4em; } .jb-cta__sub { max-width: 42rem; margin: 0 auto 1.9rem; font-size: var(--jb-fs-lead); color: var(--jb-ink-dim); } .jb-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; } .jb-cta__note { margin: 1.4rem 0 0; font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); } /* ------------------------------------------------------------------ Footer */ .jb-footer { background: color-mix(in srgb, var(--jb-secondary) 92%, #000); color: rgba(255, 255, 255, 0.78); padding-top: clamp(2.75rem, 5vw, 4.25rem); font-size: 0.94rem; } .jb-footer__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); padding-bottom: 2.5rem; } .jb-footer__col--brand { min-width: 240px; } .jb-footer__logo { height: calc(var(--jb-logo-h) + 4px); width: auto; margin-bottom: 1rem; } .jb-brand--footer { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; color: #fff; font-weight: 850; font-size: 1.05rem; } .jb-footer__blurb { margin: 0 0 1.15rem; max-width: 32rem; } .jb-footer__title { margin: 0 0 0.9rem; font-size: 0.82rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; } .jb-footer__list { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; } .jb-footer__list a, .jb-footer__static { display: inline-flex; align-items: flex-start; gap: 0.55rem; text-decoration: none; color: inherit; } .jb-footer__list a:hover { color: #fff; } .jb-footer__list svg { color: var(--jb-primary); flex: none; margin-top: 2px; } .jb-footer__hours { display: grid; gap: 0.35rem; } .jb-footer__hours li { display: flex; justify-content: space-between; gap: 1rem; } .jb-footer__day { color: rgba(255, 255, 255, 0.62); } .jb-footer__note { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--jb-primary); } .jb-footer__areas { margin: 0; line-height: 1.9; color: rgba(255, 255, 255, 0.66); font-size: 0.88rem; } .jb-social { display: flex; flex-wrap: wrap; gap: 0.5rem; } .jb-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; transition: background-color 0.15s ease, border-color 0.15s ease; } .jb-social a:hover { background: var(--jb-primary); border-color: var(--jb-primary); color: var(--jb-primary-ink); } .jb-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 1.35rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.84rem; color: rgba(255, 255, 255, 0.55); } .jb-footer__bar p { margin: 0; } .jb-footer__menu { display: flex; flex-wrap: wrap; gap: 1rem; } .jb-footer__menu a, .jb-footer__credit a { color: inherit; text-decoration: none; } .jb-footer__menu a:hover, .jb-footer__credit a:hover { color: #fff; text-decoration: underline; } .jb-footer__cta { margin-top: 0.25rem; } /* -------------------------------------------------------- Mobile stickybar */ .jb-stickybar { position: fixed; inset: auto 0 0 0; z-index: 88; display: none; gap: 0.55rem; padding: 0.65rem var(--jb-gutter) calc(0.65rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--jb-border); box-shadow: 0 -6px 22px rgba(16, 33, 25, 0.1); transform: translateY(110%); transition: transform 0.24s ease; } .jb-stickybar.is-visible { transform: translateY(0); } @media (max-width: 767px) { .jb-stickybar { display: flex; } body { padding-bottom: 0; } .jb-footer { padding-bottom: 4.75rem; } } /* ------------------------------------------------------------- Quote page */ .jb-quote__head { background: var(--jb-secondary); color: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); background-image: radial-gradient(100% 120% at 85% 0%, color-mix(in srgb, var(--jb-primary) 22%, transparent) 0%, transparent 60%); } .jb-quote__title { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 24ch; margin-bottom: 0.4em; } .jb-quote__sub { max-width: 46rem; margin: 0; font-size: var(--jb-fs-lead); color: var(--jb-ink-dim); } .jb-quote__body { background: var(--jb-bg-alt); } .jb-quote__layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } @media (min-width: 940px) { .jb-quote__layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr); } } .jb-quote__intro { margin-bottom: 1.5rem; } .jb-quote__figure { margin-bottom: 1.25rem; } .jb-aside-card { padding: 1.4rem; margin-bottom: 1.25rem; background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: var(--jb-radius-lg); box-shadow: var(--jb-shadow-sm); } .jb-aside-card__title { font-size: 1.08rem; margin-bottom: 0.5em; } .jb-aside-card__text { color: var(--jb-muted); font-size: 0.94rem; } .jb-aside-card__note { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--jb-muted); text-align: center; } .jb-ticks { display: grid; gap: 0.6rem; } .jb-ticks li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.94rem; font-weight: 620; } .jb-ticks__icon { color: var(--jb-support); flex: none; margin-top: 3px; } /* -------------------------------------------------------------------- Form */ .jb-form { padding: clamp(1.35rem, 3vw, 2.25rem); background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: var(--jb-radius-lg); box-shadow: var(--jb-shadow); } .jb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .jb-alert { padding: 0.9rem 1.1rem; margin-bottom: 1.35rem; border-radius: var(--jb-radius); font-size: 0.94rem; font-weight: 620; } .jb-alert--error { background: #fdeceb; border: 1px solid #f3c2be; color: #8f2018; } .jb-alert[hidden] { display: none; } .jb-progress { display: flex; gap: 0.4rem; margin-bottom: 1.75rem; counter-reset: jbstep; overflow-x: auto; scrollbar-width: none; } .jb-progress::-webkit-scrollbar { display: none; } .jb-progress__item { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem 0.4rem 0.4rem; border-radius: var(--jb-radius-pill); font-size: 0.82rem; font-weight: 650; color: var(--jb-muted); background: var(--jb-bg-alt); white-space: nowrap; flex: none; } .jb-progress__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--jb-border); color: var(--jb-text); font-size: 0.78rem; font-weight: 800; flex: none; } .jb-progress__item.is-current { background: color-mix(in srgb, var(--jb-primary) 12%, transparent); color: var(--jb-text); } .jb-progress__item.is-current .jb-progress__num { background: var(--jb-primary); color: var(--jb-primary-ink); } .jb-progress__item.is-done .jb-progress__num { background: var(--jb-support); color: #fff; } @media (max-width: 619px) { .jb-progress__label { display: none; } .jb-progress__item { padding: 0.35rem; } } .jb-step-panel { border: 0; margin: 0; padding: 0; min-width: 0; } .jb-step-panel + .jb-step-panel { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--jb-border); } .jb-step-panel__legend { display: block; width: 100%; padding: 0; margin-bottom: 1.15rem; } .jb-step-panel__count { display: block; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--jb-primary); margin-bottom: 0.25rem; } .jb-step-panel__title { display: block; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; } .jb-step-panel__nav { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; } .jb-field { margin-bottom: 1.25rem; } .jb-field:last-of-type { margin-bottom: 0; } .jb-field[hidden] { display: none; } .jb-label { display: block; margin-bottom: 0.5rem; font-size: 0.94rem; font-weight: 700; } .jb-req { color: var(--jb-primary); } .jb-input { display: block; width: 100%; padding: 0.82rem 0.95rem; border: 1px solid var(--jb-border-strong); border-radius: var(--jb-radius); background: var(--jb-surface); color: var(--jb-text); font: inherit; font-size: 1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .jb-input:focus { outline: none; border-color: var(--jb-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jb-primary) 22%, transparent); } .jb-input--short { max-width: 15rem; } .jb-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } textarea.jb-input { resize: vertical; min-height: 6.5rem; } .jb-field.has-error .jb-input { border-color: #cf3b2c; background: #fffafa; } .jb-field__error { margin: 0.45rem 0 0; font-size: 0.87rem; font-weight: 650; color: #b3271b; } .jb-field__error[hidden] { display: none; } /* Selectable chips (radio) */ .jb-chips--select { gap: 0.6rem; } .jb-chip--select { position: relative; padding: 0.85rem 1.15rem; cursor: pointer; border-width: 2px; transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease; } .jb-chip--select input { position: absolute; opacity: 0; width: 1px; height: 1px; } .jb-chip--select:hover { border-color: color-mix(in srgb, var(--jb-primary) 55%, var(--jb-border)); } .jb-chip--select:has(input:checked) { border-color: var(--jb-primary); background: color-mix(in srgb, var(--jb-primary) 10%, transparent); } .jb-chip--select:has(input:focus-visible) { outline: 3px solid var(--jb-primary); outline-offset: 3px; } .jb-chips--compact .jb-chip--select { padding: 0.65rem 1rem; font-size: 0.92rem; } /* Checkboxes */ .jb-checks { display: grid; gap: 0.45rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .jb-check { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--jb-border); border-radius: var(--jb-radius); font-size: 0.92rem; cursor: pointer; transition: border-color 0.14s ease, background-color 0.14s ease; } .jb-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .jb-check__box { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--jb-border-strong); border-radius: 6px; color: transparent; flex: none; transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease; } .jb-check:has(input:checked) { border-color: var(--jb-primary); background: color-mix(in srgb, var(--jb-primary) 8%, transparent); } .jb-check:has(input:checked) .jb-check__box { background: var(--jb-primary); border-color: var(--jb-primary); color: var(--jb-primary-ink); } .jb-check:has(input:focus-visible) { outline: 3px solid var(--jb-primary); outline-offset: 2px; } /* Uploads */ .jb-upload { position: relative; } .jb-upload__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .jb-upload__drop { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.6rem 1rem; border: 2px dashed var(--jb-border-strong); border-radius: var(--jb-radius); background: var(--jb-bg-alt); color: var(--jb-muted); text-align: center; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .jb-upload__drop:hover, .jb-upload.is-dragging .jb-upload__drop { border-color: var(--jb-primary); background: color-mix(in srgb, var(--jb-primary) 6%, var(--jb-bg-alt)); } .jb-upload__drop svg { color: var(--jb-primary); } .jb-upload__label { font-weight: 700; color: var(--jb-text); } .jb-upload__hint { font-size: 0.84rem; } .jb-upload__list { display: grid; gap: 0.4rem; margin-top: 0.75rem; } .jb-upload__list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.7rem; background: var(--jb-bg-alt); border-radius: var(--jb-radius); font-size: 0.88rem; } .jb-upload__size { color: var(--jb-muted); font-variant-numeric: tabular-nums; } .jb-form__legal { margin: 1.35rem 0 0; font-size: 0.82rem; color: var(--jb-muted); } .jb-btn.is-busy { opacity: 0.72; pointer-events: none; } /* Stepped mode — only when JS is running. */ .jb-js .jb-step-panel { display: none; } .jb-js .jb-step-panel.is-active { display: block; animation: jb-fade 0.22s ease; } .jb-js .jb-step-panel + .jb-step-panel { margin-top: 0; padding-top: 0; border-top: 0; } @keyframes jb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } html:not(.jb-js) .jb-progress, html:not(.jb-js) [data-jb-next], html:not(.jb-js) [data-jb-prev] { display: none; } html:not(.jb-js) [data-jb-datewrap][hidden] { display: block; } /* ------------------------------------------------------------- Success page */ .jb-success { padding: clamp(1.75rem, 4vw, 3rem); background: var(--jb-surface); border: 1px solid var(--jb-border); border-radius: var(--jb-radius-lg); box-shadow: var(--jb-shadow); text-align: center; } .jb-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-bottom: 1.15rem; border-radius: 50%; background: color-mix(in srgb, var(--jb-support) 14%, transparent); color: var(--jb-support); } .jb-success__title { font-size: clamp(1.45rem, 3vw, 2.05rem); } .jb-success__text { max-width: 38rem; margin-inline: auto; color: var(--jb-muted); } .jb-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; } /* -------------------------------------------------------- Content templates */ .jb-main--page { padding-block: clamp(2.75rem, 6vw, 4.5rem); } .jb-prose { max-width: var(--jb-shell-narrow); } .jb-prose a { color: var(--jb-primary); } .jb-prose h2, .jb-prose h3 { margin-top: 1.6em; } .jb-prose img { border-radius: var(--jb-radius); } .jb-page-title { font-size: clamp(1.9rem, 4vw, 2.9rem); } .jb-entry { padding-block: 1.5rem; border-bottom: 1px solid var(--jb-border); } .jb-entry__title { font-size: 1.35rem; margin-bottom: 0.3em; } .jb-entry__title a { text-decoration: none; } .jb-entry__title a:hover { color: var(--jb-primary); } .jb-entry__meta { color: var(--jb-muted); font-size: 0.9rem; } .jb-entry__thumb { border-radius: var(--jb-radius-lg); margin-bottom: 1.5rem; } .jb-404__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; } .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: 0.65rem; border: 1px solid var(--jb-border); border-radius: var(--jb-radius); text-decoration: none; } .nav-links .page-numbers.current { background: var(--jb-primary); border-color: var(--jb-primary); color: var(--jb-primary-ink); } /* ------------------------------------------------------------- Reveal + a11y */ .jb-anim .jb-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .jb-anim .jb-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .jb-anim .jb-reveal { opacity: 1; transform: none; } } /* -------------------------------------------------------------------- Print */ @media print { .jb-header, .jb-stickybar, .jb-cta, .jb-nav, .jb-skip { display: none !important; } body { color: #000; background: #fff; } }