@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Syne:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"); .thelis-products {
--thelis-ff-display: 'Syne', sans-serif;
--thelis-ff-mono:    'JetBrains Mono', monospace;
--thelis-ff-title:   'Cormorant Garamond', Georgia, serif;
--thelis-red:    #E8294A;
--thelis-red-dark: #c91e38;
--thelis-black:  #111118;
--thelis-white:  #ffffff;
--thelis-light:  #f7f5f1;
--thelis-gray:   rgba(17, 17, 24, 0.50);
--thelis-border: rgba(17, 17, 24, 0.08);
--thelis-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
--thelis-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
overflow-x: hidden;
max-width: none !important;
padding: 0 !important;
margin-top: 0 !important;
font-family: var(--thelis-ff-display);
}
#primary.thelis-products .pr-hero,
#primary.thelis-products .pr-cta,
#primary .pr-hero,
#primary .pr-cta { background: #111118 !important; }
#primary.thelis-products .pr-grid-section,
#primary .pr-grid-section { background: #f7f5f1 !important; } @keyframes prBlurUp {
from { opacity: 0; transform: translateY(48px); filter: blur(14px); }
to   { opacity: 1; transform: translateY(0);    filter: blur(0);    }
}
@keyframes prDotDrift {
0%, 100% { background-position: 0 0; }
50%      { background-position: 10px -8px; }
}
@keyframes prShimmer { from { left: -100%; } to { left: 200%; } } .pr-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--thelis-red);
margin-bottom: 22px;
}
.pr-label::before {
content: '';
width: 36px; height: 1px;
background: var(--thelis-red);
opacity: 0.6;
}
.pr-label--dim { color: #E8294A; } .pr-hero {
background: var(--thelis-black);
position: relative;
padding: 150px 0 100px;
overflow: hidden;
}
.pr-hero::before {
content: '';
position: absolute;
inset: -5%;
background-image: radial-gradient(circle, rgba(232, 41, 74, 0.07) 1.2px, transparent 1.2px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
animation: prDotDrift 22s ease-in-out infinite;
}
.pr-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--thelis-red) 40%, transparent);
opacity: 0.35;
}
.pr-hero .container { position: relative; z-index: 2; } .pr-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.pr-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
transform: scale(1.04);
animation: prHeroZoom 18s ease-out forwards;
}
@keyframes prHeroZoom { to { transform: scale(1); } }
.pr-hero__veil {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(17,17,24,0.94) 0%, rgba(17,17,24,0.78) 42%, rgba(17,17,24,0.42) 100%),
linear-gradient(0deg, rgba(17,17,24,0.85) 0%, rgba(17,17,24,0.20) 50%, rgba(17,17,24,0.45) 100%);
} .pr-hero--has-img::before { opacity: 0.35; }
.pr-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 56px;
animation: prBlurUp 0.7s var(--thelis-ease-out) 0.05s both;
}
.pr-breadcrumb a { color: rgba(255, 255, 255, 0.65) !important; text-decoration: none !important; transition: color 0.2s; }
.pr-breadcrumb a:hover  { color: #fff !important; }
.pr-breadcrumb__sep     { color: rgba(255, 255, 255, 0.32) !important; }
.pr-breadcrumb__current { color: var(--thelis-red) !important; }
.pr-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--thelis-red) !important;
margin-bottom: 22px;
animation: prBlurUp 0.8s var(--thelis-ease-out) 0.12s both;
}
.pr-hero__eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--thelis-red); opacity: 0.6; }
.pr-hero__title {
font-family: var(--thelis-ff-display) !important;
font-size: clamp(48px, 7vw, 96px);
font-weight: 700;
letter-spacing: -3px;
line-height: 1.0;
color: #fff !important;
margin: 0 0 24px;
max-width: 14ch;
animation: prBlurUp 1.2s var(--thelis-ease-out) 0.22s both;
}
.pr-hero__subtitle {
font-family: var(--thelis-ff-display);
font-size: clamp(16px, 1.8vw, 21px);
font-weight: 300;
color: rgba(255, 255, 255, 0.74) !important;
line-height: 1.7;
max-width: 600px;
margin: 0;
animation: prBlurUp 0.9s var(--thelis-ease-out) 0.42s both;
} .pr-grid-section {
position: relative;
padding: 110px 0;
}
.pr-grid-section::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--thelis-red), transparent);
}
.pr-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 56px;
flex-wrap: wrap;
}
.pr-section-head h2 {
font-family: var(--thelis-ff-display);
font-size: clamp(26px, 3.4vw, 44px);
font-weight: 700;
letter-spacing: -1.5px;
line-height: 1.1;
color: var(--thelis-black);
margin: 0;
max-width: 18ch;
}
.pr-section-head p {
font-family: var(--thelis-ff-display);
font-size: 15px;
font-weight: 300;
line-height: 1.7;
color: var(--thelis-gray);
margin: 0;
max-width: 360px;
}
.pr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
} .pr-card {
--pr-accent: #E8294A;
display: flex;
flex-direction: column;
background: var(--thelis-white);
border: 1px solid var(--thelis-border);
border-top: 3px solid transparent;
border-radius: 6px;
overflow: hidden;
text-decoration: none !important;
transition: transform 0.45s var(--thelis-spring), box-shadow 0.3s ease, border-top-color 0.3s ease;
}
.pr-card:hover {
transform: translateY(-8px);
border-top-color: var(--pr-accent);
box-shadow: 0 28px 64px rgba(17, 17, 24, 0.12);
} .pr-card__visual {
position: relative;
aspect-ratio: 16 / 10;
background: #111118;
overflow: hidden;
}
.pr-card__visual img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s var(--thelis-ease-out);
}
.pr-card:hover .pr-card__visual img { transform: scale(1.05); } .pr-card__visual--gradient {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--pr-accent) 55%, transparent), transparent 60%),
linear-gradient(135deg, #1d0f3d 0%, #111118 100%);
}
.pr-card__glyph {
font-family: var(--thelis-ff-display);
font-size: 96px;
font-weight: 800;
letter-spacing: -4px;
color: rgba(255, 255, 255, 0.92);
line-height: 1;
} .pr-card__visual--logo {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pr-accent) 22%, transparent), transparent 65%),
#13082b;
}
.pr-card__logo {
position: relative;
z-index: 1;
width: auto !important;
height: auto !important;
max-width: 62%;
max-height: 58%;
object-fit: contain !important;
}
.pr-card:hover .pr-card__visual .pr-card__logo { transform: none; }
.pr-card__visual::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 26px 26px;
pointer-events: none;
opacity: 0.5;
} .pr-card__cat {
position: absolute;
top: 16px; left: 16px;
z-index: 2;
font-family: var(--thelis-ff-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
padding: 6px 12px;
border-radius: 100px;
background: color-mix(in srgb, var(--pr-accent) 88%, black 12%);
} .pr-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 32px;
}
.pr-card__name {
font-family: var(--thelis-ff-display);
font-size: 26px;
font-weight: 700;
letter-spacing: -1px;
color: var(--thelis-black);
margin: 0 0 6px;
}
.pr-card__tagline {
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--pr-accent);
margin: 0 0 16px;
}
.pr-card__desc {
font-family: var(--thelis-ff-display);
font-size: 15px;
font-weight: 300;
line-height: 1.65;
color: var(--thelis-gray);
margin: 0 0 22px;
}
.pr-card__tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 26px;
}
.pr-card__tags span {
font-family: var(--thelis-ff-mono);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 2px;
border: 1px solid var(--thelis-border);
color: var(--thelis-gray);
}
.pr-card__link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--pr-accent) !important;
}
.pr-card__link svg { transition: transform 0.3s var(--thelis-ease-out); }
.pr-card:hover .pr-card__link svg { transform: translateX(5px); } .pr-card--soon {
align-items: center;
justify-content: center;
text-align: center;
background: transparent;
border: 1px dashed rgba(17, 17, 24, 0.18);
border-top: 3px solid transparent;
padding: 48px 32px;
min-height: 280px;
cursor: default;
}
.pr-card--soon:hover { transform: none; box-shadow: none; border-top-color: transparent; }
.pr-card--soon span {
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--thelis-gray);
}
.pr-card--soon strong {
display: block;
font-family: var(--thelis-ff-title);
font-style: italic;
font-size: 24px;
font-weight: 600;
color: rgba(17, 17, 24, 0.34);
margin-top: 10px;
letter-spacing: 0;
} .pr-cta {
position: relative;
padding: 120px 0;
overflow: hidden;
}
.pr-cta::before {
content: '';
position: absolute;
inset: -5%;
background-image: radial-gradient(circle, rgba(232, 41, 74, 0.07) 1.2px, transparent 1.2px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
animation: prDotDrift 22s ease-in-out infinite;
}
.pr-cta::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--thelis-red), transparent);
}
.pr-cta .container { position: relative; z-index: 2; text-align: center; }
.pr-cta__title {
font-family: var(--thelis-ff-title) !important;
font-size: clamp(32px, 4.5vw, 58px);
font-weight: 600;
letter-spacing: -1px;
line-height: 1.08;
color: #fff !important;
margin: 16px 0 20px;
}
.pr-cta__title em { font-style: italic; color: var(--thelis-red) !important; }
.pr-cta__desc {
font-family: var(--thelis-ff-display);
font-size: 16px;
font-weight: 300;
line-height: 1.7;
color: rgba(255, 255, 255, 0.72) !important;
margin: 0 auto 36px;
max-width: 520px;
}
.pr-cta__btn {
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none !important;
color: #fff !important;
background: var(--thelis-red);
padding: 16px 40px;
border-radius: 2px;
display: inline-block;
position: relative;
overflow: hidden;
transition: background 0.22s ease, transform 0.3s var(--thelis-spring), box-shadow 0.25s ease;
}
.pr-cta__btn::after {
content: '';
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
transform: skewX(-15deg);
}
.pr-cta__btn:hover { background: var(--thelis-red-dark); transform: translateY(-3px); box-shadow: 0 10px 36px rgba(232, 41, 74, 0.38); color: #fff !important; }
.pr-cta__btn:hover::after { animation: prShimmer 0.55s ease forwards; } @media (max-width: 768px) {
.pr-hero { padding: 120px 0 80px; }
.pr-grid-section, .pr-cta { padding: 80px 0; }
.pr-grid { grid-template-columns: 1fr; }
.pr-section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}