.pro-tf-patents.shop-redesign-container,
.pro-tf-patents.shop-redesign-container * {
box-sizing: border-box;
}
.pro-tf-patents-page {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #f4f7fb;
overflow: visible;
padding: 0 0 48px;
}
.pat-page-bg {
position: absolute;
top: 0;
left: max(0px, calc(50% - 700px));
right: max(0px, calc(50% - 700px));
width: auto;
height: min(420px, 55vh);
z-index: 0;
pointer-events: none;
background-color: #f4f7fb;
background-image: var(--pat-hero-bg);
background-repeat: no-repeat;
background-position: right top;
background-size: auto 100%;
}
.pat-page-bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
#f4f7fb 0%,
#f4f7fb 38%,
rgba(244, 247, 251, 0.92) 52%,
rgba(244, 247, 251, 0.55) 68%,
rgba(244, 247, 251, 0.15) 82%,
rgba(244, 247, 251, 0) 100%
);
}
.pat-page-bg::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 38%;
background: linear-gradient(
180deg,
rgba(244, 247, 251, 0) 0%,
rgba(244, 247, 251, 0.65) 50%,
#f4f7fb 100%
);
}
.pro-tf-patents {
--pat-blue: #11519b;
--pat-text: #1f1d1d;
position: relative;
z-index: 1;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 28px 15px 8px;
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--pat-text);
}
.pat-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 22px;
font-size: 13px;
line-height: 1.4;
color: #667085;
}
.pat-breadcrumbs a {
color: #667085;
text-decoration: none;
}
.pat-breadcrumbs a:hover {
color: var(--pat-blue);
}
.pat-bc-sep { opacity: 0.7; }
.pat-bc-current { color: #1f1d1d; }
.pat-hero {
max-width: 720px;
margin: 0 0 28px;
min-height: 120px;
}
.pat-title {
margin: 0 0 14px;
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
line-height: 1.15;
text-transform: none;
color: #08162d !important;
}
.pat-subtitle {
margin: 0;
max-width: 640px;
}
.pat-subtitle p {
margin: 0 0 12px;
font-size: 15px;
line-height: 1.55;
color: var(--pat-text);
}
.pat-subtitle p:last-child {
margin-bottom: 0;
}
.pat-filters {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0 0 24px;
}
.pat-filter {
appearance: none;
border: none;
background: #e8eef5;
color: #4b5565;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
padding: 10px 16px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.pat-filter:hover {
color: var(--pat-blue);
}
.pat-filter.is-active {
background: var(--pat-blue);
color: #fff;
}
.pat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 28px;
}
.pat-card {
display: flex;
align-items: stretch;
gap: 14px;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 14px;
padding: 14px;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
min-width: 0;
}
.pat-card.is-hidden {
display: none !important;
}
.pat-card-preview {
width: 160px;
flex: 0 0 160px;
border-radius: 10px;
overflow: hidden;
background: #eef2f6;
align-self: flex-start;
}
.pat-card-zoom {
appearance: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
line-height: 0;
}
.pat-card-preview img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.2s ease;
}
.pat-card-zoom:hover img {
transform: scale(1.03);
}
.pat-card-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.pat-card-title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 800;
line-height: 1.3;
color: #08162d !important;
}
.pat-card-date {
font-size: 12px;
line-height: 1.35;
color: #98a2b3;
margin: 0 0 8px;
}
.pat-card-desc {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.45;
color: var(--pat-text);
flex: 1 1 auto;
}
.pat-card-tag {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
padding: 6px 12px;
border-radius: 999px;
background: #dce9f8;
color: var(--pat-blue);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.pat-empty {
text-align: center;
color: #667085;
font-size: 15px;
margin: 8px 0 28px;
}
.pat-empty[hidden] {
display: none !important;
}
.pat-pager {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.pat-pager[hidden] {
display: none !important;
}
.pat-page-btn {
appearance: none;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1.5px solid transparent;
border-radius: 8px;
background: transparent;
color: #667085;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.pat-page-btn:hover {
color: var(--pat-blue);
}
.pat-page-btn.is-active {
border-color: var(--pat-blue);
color: var(--pat-blue);
}
.pat-page-btn:disabled {
opacity: 0.35;
cursor: default;
}
.pat-page-ellipsis {
color: #98a2b3;
padding: 0 4px;
}
body.pro-tf-patents-template,
body.pro-tf-patents-template #main,
body.pro-tf-patents-template #content,
body.pro-tf-patents-template .page-wrapper {
background: #f4f7fb !important;
}
.pro-tf-patents-template .page-title,
.pro-tf-patents-template .page-header {
display: none;
}
@media (max-width: 1100px) {
.pat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.pat-page-bg {
background-size: cover;
opacity: 0.55;
}
}
@media (max-width: 700px) {
.pat-grid {
grid-template-columns: 1fr;
gap: 12px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.pat-filters {
gap: 6px;
}
.pat-filter {
font-size: 13px;
padding: 8px 12px;
}
.pat-card-preview {
width: 132px;
flex-basis: 132px;
}
} .pat-lightbox {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(8, 22, 45, 0.78);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.pat-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.pat-lightbox-dialog {
position: relative;
max-width: min(920px, 100%);
max-height: 90vh;
margin: 0;
}
.pat-lightbox-img {
display: block;
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
background: #fff;
}
.pat-lightbox-close {
appearance: none;
-webkit-appearance: none;
position: absolute;
top: -14px;
right: -14px;
box-sizing: border-box;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
max-width: 40px !important;
max-height: 40px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
aspect-ratio: 1 / 1;
background: #fff !important;
color: #08162d !important;
font-size: 0 !important;
line-height: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 40px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.pat-lightbox-close svg {
display: block;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.pat-lightbox-close:hover {
color: #11519b;
}
body.pat-lightbox-open {
overflow: hidden;
} .shop-tags-section {
margin: 36px 0 0 !important;
padding: 0 0 48px !important;
}
.tf-page-faq {
margin: 0 0 40px !important;
}
.tf-page-faq .faq-main-title {
margin: 0 0 28px !important;
}