.tf-lm {
--tf-lm-logo-height: 96px;
--tf-lm-mobile-height: 70px;
--tf-lm-gap: 42px;
--tf-lm-pad-x: 28px;
--tf-lm-pad-y: 18px;
--tf-lm-radius: 16px;
--tf-lm-duration: 28s;
--tf-lm-section-pad: 26px;
--tf-lm-bg: #f5f7fa;
--tf-lm-card: #fff;
--tf-lm-border: #e4e9f0;
--tf-lm-accent: #ff9f43;
--tf-lm-max-width: 100%;
position: relative;
width: 100%;
padding: var(--tf-lm-section-pad) 0;
background: var(--tf-lm-bg);
isolation: isolate;
}
.tf-lm,
.tf-lm * {
box-sizing: border-box;
}
.tf-lm-shell {
width: min(100%, var(--tf-lm-max-width));
margin-inline: auto;
}
.tf-lm-viewport {
position: relative;
width: 100%;
overflow: hidden;
outline: none;
}
.tf-lm-viewport:focus-visible {
outline: 3px solid color-mix(in srgb, var(--tf-lm-accent) 65%, white);
outline-offset: 4px;
}
.tf-lm-track {
display: flex;
width: max-content;
gap: var(--tf-lm-gap);
will-change: transform;
}
.tf-lm-group {
display: flex;
align-items: stretch;
flex: none;
gap: var(--tf-lm-gap);
}
.tf-lm-item {
display: flex;
align-items: stretch;
flex: none;
}
.tf-lm-card {
position: relative;
display: grid;
place-items: center;
min-height: calc(var(--tf-lm-logo-height) + (2 * var(--tf-lm-pad-y)));
padding: var(--tf-lm-pad-y) var(--tf-lm-pad-x);
border: 1px solid var(--tf-lm-border);
border-radius: var(--tf-lm-radius);
background: var(--tf-lm-card);
text-decoration: none;
overflow: hidden;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, opacity .28s ease, filter .28s ease;
}
.tf-lm-equal-cards .tf-lm-card {
width: clamp(180px, calc(var(--tf-lm-logo-height) * 2.45), 360px);
}
.tf-lm-natural-cards .tf-lm-card {
min-width: calc(var(--tf-lm-logo-height) * 1.5);
}
.tf-lm-card img {
display: block;
width: auto;
max-width: 100%;
height: var(--tf-lm-logo-height);
max-height: var(--tf-lm-logo-height);
object-fit: contain;
object-position: center;
transition: transform .28s ease, filter .28s ease, opacity .28s ease;
}
.tf-lm-shadow .tf-lm-card {
box-shadow: 0 9px 24px rgba(18, 34, 56, 0.08);
} .tf-lm-theme-unified-light .tf-lm-card {
background: var(--tf-lm-card);
}
.tf-lm-theme-clean-strip {
background: transparent;
}
.tf-lm-theme-clean-strip .tf-lm-card {
min-height: auto;
padding-block: calc(var(--tf-lm-pad-y) * .5);
border-color: transparent;
background: transparent;
box-shadow: none;
}
.tf-lm-theme-soft-panel {
background:
radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--tf-lm-accent) 12%, transparent), transparent 34%),
var(--tf-lm-bg);
}
.tf-lm-theme-soft-panel .tf-lm-card {
border-color: color-mix(in srgb, var(--tf-lm-border) 75%, transparent);
background: color-mix(in srgb, var(--tf-lm-card) 88%, transparent);
backdrop-filter: blur(8px);
}
.tf-lm-theme-dark-premium {
background: #101521;
}
.tf-lm-theme-dark-premium .tf-lm-card {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.07);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}
.tf-lm-theme-dark-premium .tf-lm-card img {
filter: brightness(1.08);
}
.tf-lm-theme-accent-line::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, transparent, var(--tf-lm-accent), transparent);
}
.tf-lm-theme-accent-line .tf-lm-card {
border-top: 3px solid color-mix(in srgb, var(--tf-lm-accent) 72%, white);
} .tf-lm-edge-fade .tf-lm-viewport {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
} .tf-lm-effect-grayscale-color .tf-lm-card img {
filter: grayscale(1) saturate(.2);
opacity: .76;
}
.tf-lm-effect-grayscale-color .tf-lm-card:hover img,
.tf-lm-effect-grayscale-color .tf-lm-card:focus-visible img {
filter: none;
opacity: 1;
}
.tf-lm-effect-color-grayscale .tf-lm-card:hover img,
.tf-lm-effect-color-grayscale .tf-lm-card:focus-visible img {
filter: grayscale(1);
opacity: .72;
}
.tf-lm-effect-soft-opacity .tf-lm-card img {
opacity: .58;
}
.tf-lm-effect-soft-opacity .tf-lm-card:hover img,
.tf-lm-effect-soft-opacity .tf-lm-card:focus-visible img {
opacity: 1;
}
.tf-lm-effect-zoom .tf-lm-card:hover img,
.tf-lm-effect-zoom .tf-lm-card:focus-visible img {
transform: scale(1.07);
}
.tf-lm-effect-lift .tf-lm-card:hover,
.tf-lm-effect-lift .tf-lm-card:focus-visible {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--tf-lm-accent) 55%, var(--tf-lm-border));
box-shadow: 0 15px 34px rgba(18, 34, 56, .14);
}
.tf-lm-effect-glow .tf-lm-card:hover,
.tf-lm-effect-glow .tf-lm-card:focus-visible {
border-color: var(--tf-lm-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tf-lm-accent) 18%, transparent), 0 14px 34px color-mix(in srgb, var(--tf-lm-accent) 22%, transparent);
}
.tf-lm-effect-monochrome .tf-lm-card img {
filter: grayscale(1) contrast(1.08);
opacity: .82;
}
.tf-lm-card:focus-visible {
outline: 3px solid color-mix(in srgb, var(--tf-lm-accent) 62%, white);
outline-offset: 3px;
}
.tf-lm-notice {
padding: 12px 16px;
border-left: 4px solid #dba617;
background: #fff8e5;
}
@media (max-width: 767px) {
.tf-lm-track,
.tf-lm-group {
gap: max(18px, calc(var(--tf-lm-gap) * .66));
}
.tf-lm-card {
padding: max(10px, calc(var(--tf-lm-pad-y) * .72)) max(14px, calc(var(--tf-lm-pad-x) * .7));
}
.tf-lm-card img {
height: var(--tf-lm-mobile-height);
max-height: var(--tf-lm-mobile-height);
}
.tf-lm-card {
min-height: calc(var(--tf-lm-mobile-height) + (2 * var(--tf-lm-pad-y)));
}
.tf-lm-equal-cards .tf-lm-card {
width: clamp(145px, calc(var(--tf-lm-mobile-height) * 2.4), 260px);
}
.tf-lm-edge-fade .tf-lm-viewport {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
}
@media (prefers-reduced-motion: reduce) {
.tf-lm-viewport {
overflow-x: auto;
scrollbar-width: thin;
}
.tf-lm-track,
.tf-lm-card,
.tf-lm-card img {
animation: none !important;
transition-duration: .01ms !important;
}
}