.loop-block-item { border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-content-bg); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .loop-block-item.has-thumbnail { align-items: center; } .loop-block-item .featured-image img { width: 100%; height: auto; display: block; transition: transform 0.25s ease; } .loop-block-item .loop-content { display: flex; flex-direction: column; gap: 0.625rem; } .loop-block-item .loop-content h2 a { text-decoration: none; color: var(--color-headline-links); } .loop-block-item:hover { border-color: color-mix(in srgb, var(--color-primary), var(--color-border) 45%); box-shadow: 0 0.625rem 1.8125rem rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .loop-block-item:hover .featured-image img { transform: scale(1.02); } .loop-block-item .loop-content h2 a:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary), #fff 15%); outline-offset: 2px; border-radius: 2px; } #content > article + article { border-top: 1px solid var(--color-border); margin-block-start: 1.8125rem; padding-block-start: 1.8125rem; } .loop-cards { gap: 1.8125rem; } .loop-cards .card-item { margin-block-end: 1.8125rem; } .loop-cards .card-inner { border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-content-bg); height: 100%; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .loop-cards .card-inner:hover { border-color: color-mix(in srgb, var(--color-primary), var(--color-border) 40%); transform: translateY(-3px); box-shadow: 0 0.625rem 1.8125rem rgba(0, 0, 0, 0.1); } .loop-cards .card-image img { width: 100%; height: auto; display: block; } .loop-cards .card-inner > .block-single { flex: 1; display: flex; flex-direction: column; } .loop-cards .card-title a { text-decoration: none; color: var(--color-headline-links); } .loop-cards .card-title a:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary), #fff 15%); outline-offset: 2px; border-radius: 2px; } .loop-cards .card-excerpt { line-height: 1.6; flex: 1; } .loop-cards .card-inner .byline:first-child { margin-block-end: 0.625rem; } .loop-cards .card-inner .byline:first-child .byline-item a { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); border-bottom: none; } .loop-cards .card-inner .byline:last-child { margin-block-start: auto; padding-block-start: 0.625rem; border-top: 1px solid var(--color-border); } .loop-cards .card-inner .byline:last-child .byline-item { font-size: 0.85em; } .loop-cards .card-inner .byline-author .avatar { border-radius: 50%; vertical-align: middle; } .search .loop-cards { gap: var(--space-single); } .search .loop-cards .card-inner { border-radius: var(--radius-l); box-shadow: var(--shadow-sm); } .search .loop-cards .card-inner > .block-single { gap: var(--space-xs); padding: var(--space-single); } .search .loop-cards .card-inner .byline:first-child { margin-block-end: 0; } .search .loop-cards .card-inner .byline:first-child .byline-item a { background: color-mix(in srgb, var(--color-primary), transparent 90%); border-radius: var(--radius-full); display: inline-flex; padding: 0.25rem 0.625rem; } .search .loop-cards .card-excerpt { margin-block-end: 0; } .search .loop-cards .card-inner .byline:last-child { border-top: 0; color: var(--color-text-sec); padding-block-start: 0; } .loop-list .list-item { padding-block-end: 0.9375rem; border-bottom: 1px solid var(--color-border); transition: background-color 0.2s ease; } .loop-list .list-item:last-child { border-bottom: none; } .loop-list .list-inner { align-items: center; } .loop-list .list-item:hover { background: color-mix(in srgb, var(--color-content-bg), var(--color-bg) 22%); } .loop-list .list-title a { text-decoration: none; } .loop-list .list-title a:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary), #fff 15%); outline-offset: 2px; border-radius: 2px; } .loop-list .list-image img { border-radius: 4px; max-width: 140px; height: auto; } @media (max-width: 640px) { .loop-list .list-inner { flex-direction: column-reverse; } .loop-list .list-image { margin-block-end: 0.9375rem; } .loop-list .list-image img { max-width: 100%; } } .loop-teasers .teaser-item { transition: transform 0.2s ease; } .loop-teasers .teaser-item:hover { transform: translateY(-2px); } .loop-teasers .teaser-image img { width: 100%; height: auto; display: block; border-radius: var(--radius-s); } .loop-teasers .teaser-title a { text-decoration: none; color: var(--color-headline-links); } .loop-teasers .teaser-title a:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary), #fff 15%); outline-offset: 2px; border-radius: 2px; } .loop-teasers .teaser-excerpt { line-height: 1.6; } .loop-docs .docs-item { padding-block-end: 0.9375rem; border-bottom: 1px solid var(--color-border); } .loop-docs .docs-item:last-child { border-bottom: none; } .loop-docs .docs-item .list-inner { align-items: flex-start; } .loop-docs .docs-item .list-title a { text-decoration: none; color: var(--color-headline-links); } .loop-docs .docs-item .list-title a:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary), #fff 15%); outline-offset: 2px; border-radius: 2px; } .loop-docs .docs-item .list-image img { border-radius: var(--radius-s); } .deals-archive-header { padding-block-end: 0.9375rem; border-bottom: 1px solid var(--color-border); } .deal-filter-nav { padding: 0.9375rem; border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-content-bg); background: color-mix(in srgb, var(--color-content-bg), var(--color-bg) 20%); } .deal-filter-list { display: flex; flex-wrap: wrap; gap: 0.625rem; } .deal-filter-link { display: inline-block; padding: 0.3125rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius-s); text-decoration: none; color: var(--color-links); background: var(--color-content-bg); transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .deal-filter-link:hover, .deal-filter-link:focus-visible { border-color: color-mix(in srgb, var(--color-primary), var(--color-border) 45%); transform: translateY(-1px); } .deal-filter-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary), #fff 15%); outline-offset: 2px; } .deal-filter-link.is-active { color: var(--color-button-text); background: var(--color-button); border-color: var(--color-button); } .loop-deals { gap: 1.8125rem; } .loop-deals .deal-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-content-bg); padding: 0.9375rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .loop-deals .deal-card:hover { border-color: color-mix(in srgb, var(--color-primary), var(--color-border) 45%); box-shadow: 0 0.625rem 1.8125rem rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .loop-deals .deal-card-image img { width: 100%; height: auto; display: block; border-radius: calc(var(--radius-s) - 2px); transition: transform 0.25s ease; } .loop-deals .deal-card:hover .deal-card-image img { transform: scale(1.02); } .loop-deals .deal-card-title a { text-decoration: none; color: var(--color-headline-links); } .loop-deals .deal-card-title a:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary), #fff 15%); outline-offset: 2px; border-radius: 2px; } .loop-deals .deal-card .text-sec { margin-block-start: auto; } [data-theme="dark"] .deal-filter-nav { background: var(--color-content-bg); background: color-mix(in srgb, var(--color-content-bg), var(--color-bg) 55%); } [data-theme="dark"] .loop-cards .card-inner { border-color: color-mix(in srgb, var(--color-border), var(--color-bg) 40%); background: color-mix(in srgb, var(--color-content-bg), var(--color-bg) 45%); } [data-theme="dark"] .loop-cards .card-inner:hover { box-shadow: 0 0.625rem 1.8125rem rgba(0, 0, 0, 0.35); } [data-theme="dark"] .loop-cards .card-inner .byline:last-child { border-top-color: color-mix(in srgb, var(--color-border), var(--color-bg) 40%); } [data-theme="dark"] .loop-block-item:hover { box-shadow: 0 0.625rem 1.8125rem rgba(0, 0, 0, 0.35); } [data-theme="dark"] .loop-list .list-item:hover { background: color-mix(in srgb, var(--color-content-bg), var(--color-bg) 55%); } [data-theme="dark"] .loop-deals .deal-card:hover { box-shadow: 0 0.625rem 1.8125rem rgba(0, 0, 0, 0.35); } [data-theme="dark"] .loop-deals .deal-card { background: color-mix(in srgb, var(--color-content-bg), var(--color-bg) 45%); } [data-theme="dark"] .deal-filter-link.is-active { background: color-mix(in srgb, var(--color-button), #000 35%); border-color: color-mix(in srgb, var(--color-button), #fff 20%); } @media (max-width: 960px) { .loop-deals { gap: 0.9375rem; } .loop-deals .deal-card { padding: 0.625rem; } } @media (max-width: 640px) { .loop-block-item:hover, .loop-teasers .teaser-item:hover { transform: none; } .deal-filter-nav { padding: 0.625rem; } .deal-filter-list { gap: 0.3125rem; } .deal-filter-link { width: 100%; text-align: center; } }