/* ============================================================
JETTASET DESIGN SYSTEM v2.0
Modular, accessible, premium B2B feel
Brand: Jettaset (tekstiilitalo 1992)
============================================================ */
:root {
/* Brand colors (livesivulta) */
--jet-primary: #2359a2;
--jet-primary-dark: #1a3f78;
--jet-primary-50: #f0f5fc;
--jet-primary-100: #d9e6f5;
--jet-secondary: #0170b9;
/* Neutral palette */
--jet-ink: #0a0e15;
--jet-text: #3b4250;
--jet-muted: #6b7280;
--jet-line: #e5e8ed;
--jet-soft: #f6f8fb;
--jet-bg: #ffffff;
/* Type scale (modular, 1.20 ratio) */
--jet-fs-12: 12px;
--jet-fs-14: 14px;
--jet-fs-15: 15px;
--jet-fs-16: 16px;
--jet-fs-18: 18px;
--jet-fs-20: 20px;
--jet-fs-22: 22px;
--jet-fs-26: 26px;
--jet-fs-32: 32px;
--jet-fs-40: 40px;
--jet-fs-52: 52px;
/* Spacing scale (8-pt) */
--jet-s-4: 4px;
--jet-s-8: 8px;
--jet-s-12: 12px;
--jet-s-16: 16px;
--jet-s-20: 20px;
--jet-s-24: 24px;
--jet-s-32: 32px;
--jet-s-40: 40px;
--jet-s-48: 48px;
--jet-s-64: 64px;
--jet-s-80: 80px;
--jet-s-96: 96px;
--jet-s-120: 120px;
/* Radius */
--jet-r-sm: 6px;
--jet-r-md: 10px;
--jet-r-lg: 16px;
--jet-r-xl: 22px;
--jet-r-pill: 999px;
/* Shadow */
--jet-sh-sm: 0 1px 2px rgba(10,14,21,0.06);
--jet-sh-md: 0 4px 14px rgba(10,14,21,0.08);
--jet-sh-lg: 0 14px 40px rgba(35,89,162,0.14);
--jet-sh-xl: 0 24px 60px rgba(35,89,162,0.20);
/* Layout */
--jet-wide: 1200px;
--jet-narrow: 880px;
--jet-bleed: 24px;
/* Transitions */
--jet-ease: cubic-bezier(.2,.6,.2,1);
--jet-dur: .22s;
}
/* ============================================================
ASTRA-FRAME BREAKOUT — full-bleed for hero & footer-CTA
Astra wraps content in .ast-container ~1180px max. Break out.
============================================================ */
.jet-main { width: 100%; max-width: none; }
.jet-main > * { width: 100%; }
/* Full-bleed utility for sections that need edge-to-edge bg */
.jet-bleed {
position: relative;
left: 50%; right: 50%;
margin-left: -50vw; margin-right: -50vw;
width: 100vw;
box-sizing: border-box;
}
/* Inner container — keep content readable width */
.jet-container {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
box-sizing: border-box;
}
/* ============================================================
BUTTONS — premium feel, brand consistent
============================================================ */
.jet-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
border-radius: var(--jet-r-pill);
font-weight: 700; font-size: var(--jet-fs-15);
letter-spacing: 0.01em;
text-decoration: none !important;
border: 1.5px solid transparent;
cursor: pointer;
transition: transform var(--jet-dur) var(--jet-ease),
box-shadow var(--jet-dur) var(--jet-ease),
background var(--jet-dur) var(--jet-ease),
color var(--jet-dur) var(--jet-ease),
border-color var(--jet-dur) var(--jet-ease);
white-space: nowrap;
font-family: inherit;
}
.jet-btn--primary {
background: var(--jet-primary);
color: #fff !important;
box-shadow: 0 4px 14px rgba(35,89,162,0.30);
}
.jet-btn--primary:hover {
background: var(--jet-primary-dark);
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(35,89,162,0.42);
}
.jet-btn--primary:active { transform: translateY(0); }
.jet-btn--ghost {
background: transparent;
color: #fff !important;
border-color: rgba(255,255,255,0.45);
}
.jet-btn--ghost:hover { background: rgba(255,255,255,0.10); border-color: #fff; }
.jet-btn--xl { padding: 17px 32px; font-size: var(--jet-fs-16); }
.jet-btn--block { width: 100%; justify-content: center; }
.jet-btn svg { transition: transform var(--jet-dur) var(--jet-ease); }
.jet-btn:hover svg { transform: translateX(3px); }
/* ============================================================
HERO — full-bleed, scrim, eyebrow, cta-row
============================================================ */
.jet-hero {
position: relative;
left: 50%; right: 50%;
margin-left: -50vw; margin-right: -50vw;
width: 100vw;
min-height: 560px;
display: flex; align-items: center;
overflow: hidden;
background: linear-gradient(135deg, var(--jet-primary-dark) 0%, var(--jet-primary) 55%, var(--jet-secondary) 100%);
color: #fff;
padding: var(--jet-s-120) 0 var(--jet-s-96);
margin-top: 0;
isolation: isolate;
}
/* Astra leaves a 75px gap above main content; compensate so hero starts at viewport top */
.jet-main > .jet-hero:first-child {
margin-top: -75px;
padding-top: calc(var(--jet-s-120) + 75px);
}
.jet-hero__bg {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 0.55;
pointer-events: none;
}
.jet-hero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(100deg, rgba(10,14,21,0.78) 0%, rgba(26,63,120,0.74) 38%, rgba(35,89,162,0.62) 65%, rgba(1,112,185,0.45) 100%);
}
.jet-hero__pattern {
position: absolute; inset: 0; z-index: -1; opacity: 0.10;
background-image:
linear-gradient(45deg, rgba(255,255,255,0.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 75%, transparent 75%, transparent);
background-size: 18px 18px;
mix-blend-mode: overlay;
}
.jet-hero__inner {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
width: 100%;
box-sizing: border-box;
position: relative;
}
.jet-hero__eyebrow {
display: inline-block;
padding: 6px 14px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.24);
border-radius: var(--jet-r-pill);
color: #fff;
font-size: var(--jet-fs-12);
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
margin-bottom: var(--jet-s-20);
}
.jet-hero__title {
font-size: clamp(32px, 4.6vw, var(--jet-fs-52));
font-weight: 800;
color: #fff;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 var(--jet-s-20);
max-width: 880px;
text-wrap: balance;
}
.jet-hero__lead {
font-size: clamp(16px, 1.3vw, var(--jet-fs-18));
line-height: 1.6;
color: rgba(255,255,255,0.90);
margin: 0 0 var(--jet-s-32);
max-width: 640px;
}
.jet-hero__cta-row {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--jet-s-20);
}
.jet-hero__cta-secondary {
color: rgba(255,255,255,0.88) !important;
font-weight: 600; font-size: var(--jet-fs-15);
text-decoration: none !important;
border-bottom: 1px solid rgba(255,255,255,0.32);
padding-bottom: 2px;
transition: color var(--jet-dur), border-color var(--jet-dur);
}
.jet-hero__cta-secondary:hover {
color: #fff !important;
border-color: #fff;
}
@media (max-width: 768px) {
.jet-hero { min-height: 480px; padding: var(--jet-s-80) 0 var(--jet-s-64); }
.jet-main > .jet-hero:first-child { padding-top: calc(var(--jet-s-80) + 75px); }
.jet-hero__title { font-size: clamp(28px, 8vw, 38px); }
.jet-hero__lead { font-size: var(--jet-fs-16); }
.jet-hero__cta-row { gap: var(--jet-s-16); }
.jet-hero__cta-row .jet-btn--xl { padding: 14px 24px; font-size: var(--jet-fs-15); }
}
.jet-page--home .jet-hero { min-height: 600px; }
/* Enemmän ilmaa eyebrown ja ylävalikon väliin etusivun herossa (asiakaspalaute) */
.jet-main > .jet-hero--home:first-child { padding-top: calc(var(--jet-s-120) + 120px); }
/* ============================================================
PROMISE — overlap hero edge, premium feeling
============================================================ */
.jet-promise {
position: relative;
max-width: calc(var(--jet-wide) - 48px);
margin: -56px auto 0;
padding: 0 var(--jet-bleed);
z-index: 2;
}
.jet-promise__inner {
background: #fff;
border-radius: var(--jet-r-lg);
box-shadow: var(--jet-sh-lg);
border: 1px solid var(--jet-line);
padding: var(--jet-s-32) var(--jet-s-40);
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: var(--jet-s-24);
align-items: center;
}
.jet-promise__item {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 6px;
}
.jet-promise__num {
font-size: clamp(19px, 2.1vw, 26px);
font-weight: 800;
color: var(--jet-primary);
line-height: 1.1;
letter-spacing: -0.01em;
}
.jet-promise__label {
font-size: var(--jet-fs-14);
color: var(--jet-muted);
font-weight: 500;
line-height: 1.4;
}
.jet-promise__divider {
width: 1px; height: 56px;
background: var(--jet-line);
}
@media (max-width: 768px) {
.jet-promise { margin-top: -32px; padding: 0 var(--jet-s-16); }
.jet-promise__inner {
grid-template-columns: 1fr;
padding: var(--jet-s-24);
gap: var(--jet-s-16);
}
.jet-promise__divider {
width: 100%; height: 1px;
}
}
/* ============================================================
TRUST (4-up below promise on home)
============================================================ */
.jet-trust {
max-width: var(--jet-wide);
margin: var(--jet-s-48) auto 0;
padding: 0 var(--jet-bleed);
}
.jet-trust__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--jet-s-32);
padding: var(--jet-s-32) 0;
border-top: 1px solid var(--jet-line);
border-bottom: 1px solid var(--jet-line);
}
.jet-trust__item {
display: flex; flex-direction: column;
gap: 4px;
}
.jet-trust__num {
font-size: var(--jet-fs-22);
font-weight: 800;
color: var(--jet-ink);
line-height: 1.1;
}
.jet-trust__label {
font-size: var(--jet-fs-14);
color: var(--jet-muted);
line-height: 1.4;
}
@media (max-width: 880px) {
.jet-trust__inner { grid-template-columns: 1fr 1fr; gap: var(--jet-s-20); }
}
@media (max-width: 480px) {
.jet-trust__inner { grid-template-columns: 1fr; }
}
/* ============================================================
SECTIONS — uniform vertical rhythm
============================================================ */
.jet-page { background: var(--jet-bg); color: var(--jet-text); }
.jet-section { padding: var(--jet-s-96) 0; }
.jet-section__inner {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
box-sizing: border-box;
}
.jet-section__head {
text-align: center;
max-width: 760px;
margin: 0 auto var(--jet-s-64);
}
.jet-section__eyebrow {
display: inline-block;
padding: 4px 12px;
background: var(--jet-primary-50);
color: var(--jet-primary);
font-size: var(--jet-fs-12);
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
border-radius: var(--jet-r-pill);
margin-bottom: var(--jet-s-16);
}
.jet-section__heading {
font-size: clamp(26px, 2.8vw, var(--jet-fs-40));
font-weight: 800;
color: var(--jet-ink);
line-height: 1.15;
margin: 0 0 var(--jet-s-16);
letter-spacing: -0.015em;
text-wrap: balance;
}
.jet-section__heading--center { text-align: center; }
.jet-section__lead {
font-size: var(--jet-fs-18);
color: var(--jet-text);
line-height: 1.6;
margin: 0;
text-wrap: pretty;
}
@media (max-width: 768px) {
.jet-section { padding: var(--jet-s-64) 0; }
.jet-section__head { margin-bottom: var(--jet-s-40); }
}
/* ============================================================
SERVICES GRID — auto-fit, icons, premium hover
============================================================ */
.jet-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--jet-s-20);
}
/* Adapt grid to actual card count for clean rows */
.jet-services-grid:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
.jet-services-grid:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr);
}
.jet-services-grid:has(> :nth-child(5):last-child) {
grid-template-columns: repeat(5, 1fr);
}
.jet-services-grid:has(> :nth-child(6):last-child) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.jet-services-grid,
.jet-services-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.jet-services-grid,
.jet-services-grid:has(> :nth-child(3):last-child),
.jet-services-grid:has(> :nth-child(5):last-child),
.jet-services-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.jet-services-grid,
.jet-services-grid:has(> :nth-child(2):last-child),
.jet-services-grid:has(> :nth-child(3):last-child),
.jet-services-grid:has(> :nth-child(5):last-child),
.jet-services-grid:has(> :nth-child(6):last-child) { grid-template-columns: 1fr; }
}
.jet-service-card {
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-32) var(--jet-s-24) var(--jet-s-24);
text-decoration: none !important;
color: var(--jet-ink) !important;
display: flex; flex-direction: column;
gap: var(--jet-s-12);
position: relative;
overflow: hidden;
transition: transform var(--jet-dur) var(--jet-ease),
border-color var(--jet-dur) var(--jet-ease),
box-shadow var(--jet-dur) var(--jet-ease);
}
.jet-service-card::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--jet-primary), var(--jet-secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--jet-dur) var(--jet-ease);
}
.jet-service-card:hover {
border-color: var(--jet-primary);
transform: translateY(-4px);
box-shadow: var(--jet-sh-lg);
}
.jet-service-card:hover::before { transform: scaleX(1); }
.jet-service-card__title {
font-size: var(--jet-fs-18);
font-weight: 800;
color: var(--jet-ink);
margin: 0;
line-height: 1.25;
}
.jet-service-card__desc {
font-size: var(--jet-fs-15);
color: var(--jet-muted);
line-height: 1.55;
margin: 0;
flex: 1;
}
.jet-service-card__arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: var(--jet-r-pill);
background: var(--jet-primary-50);
color: var(--jet-primary);
font-size: var(--jet-fs-18);
font-weight: 700;
align-self: flex-end;
margin-top: var(--jet-s-8);
transition: background var(--jet-dur) var(--jet-ease),
color var(--jet-dur) var(--jet-ease),
transform var(--jet-dur) var(--jet-ease);
}
.jet-service-card:hover .jet-service-card__arrow {
background: var(--jet-primary);
color: #fff;
transform: translateX(4px);
}
/* ============================================================
SERVICES VISUAL — image-led service cards with color accents
============================================================ */
.jet-svc-visual-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--jet-s-24);
}
.jet-svc-visual-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.jet-svc-visual-grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.jet-svc-visual-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
.jet-svc-visual-grid,
.jet-svc-visual-grid[data-count="3"],
.jet-svc-visual-grid[data-count="5"],
.jet-svc-visual-grid[data-count="6"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.jet-svc-visual-grid,
.jet-svc-visual-grid[data-count="3"],
.jet-svc-visual-grid[data-count="5"],
.jet-svc-visual-grid[data-count="6"] { grid-template-columns: 1fr; }
}
.jet-svc-visual {
position: relative;
display: flex; flex-direction: column;
background: #fff;
border-radius: var(--jet-r-lg);
overflow: hidden;
text-decoration: none !important;
color: var(--jet-ink) !important;
box-shadow: var(--jet-sh-sm);
transition: transform var(--jet-dur) var(--jet-ease),
box-shadow var(--jet-dur) var(--jet-ease);
isolation: isolate;
}
.jet-svc-visual:hover {
transform: translateY(-6px);
box-shadow: var(--jet-sh-xl);
}
.jet-svc-visual__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--jet-primary-50);
}
.jet-svc-visual__media::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,14,21,0.35) 100%);
pointer-events: none;
}
.jet-svc-visual__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .45s var(--jet-ease);
}
.jet-svc-visual:hover .jet-svc-visual__media img { transform: scale(1.07); }
.jet-svc-visual__body {
padding: var(--jet-s-24) var(--jet-s-24) var(--jet-s-24);
display: flex; flex-direction: column;
gap: 8px; flex: 1;
}
.jet-svc-visual__title {
font-size: var(--jet-fs-20);
font-weight: 800;
color: var(--jet-ink);
margin: 0;
line-height: 1.2;
letter-spacing: -0.01em;
}
.jet-svc-visual__desc {
font-size: var(--jet-fs-14);
color: var(--jet-muted);
line-height: 1.55;
margin: 0;
flex: 1;
}
.jet-svc-visual__cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--jet-fs-14);
font-weight: 700;
color: var(--jet-primary);
margin-top: var(--jet-s-12);
letter-spacing: 0.01em;
}
.jet-svc-visual__cta svg { transition: transform var(--jet-dur) var(--jet-ease); }
.jet-svc-visual:hover .jet-svc-visual__cta svg { transform: translateX(4px); }
/* Color accents — overlay over media */
.jet-svc-visual--primary .jet-svc-visual__media::after {
background:
linear-gradient(180deg, transparent 40%, rgba(35,89,162,0.78) 100%),
linear-gradient(135deg, rgba(35,89,162,0.18) 0%, transparent 60%);
}
.jet-svc-visual--secondary .jet-svc-visual__media::after {
background:
linear-gradient(180deg, transparent 40%, rgba(1,112,185,0.78) 100%),
linear-gradient(135deg, rgba(1,112,185,0.18) 0%, transparent 60%);
}
.jet-svc-visual--deep .jet-svc-visual__media::after {
background:
linear-gradient(180deg, transparent 40%, rgba(26,63,120,0.86) 100%),
linear-gradient(135deg, rgba(26,63,120,0.20) 0%, transparent 60%);
}
.jet-svc-visual--accent .jet-svc-visual__media::after {
background:
linear-gradient(180deg, transparent 40%, rgba(10,14,21,0.80) 100%),
linear-gradient(135deg, rgba(35,89,162,0.18) 0%, transparent 60%);
}
.jet-svc-visual--primary { border-top: 3px solid var(--jet-primary); }
.jet-svc-visual--secondary { border-top: 3px solid var(--jet-secondary); }
.jet-svc-visual--deep { border-top: 3px solid var(--jet-primary-dark); }
.jet-svc-visual--accent { border-top: 3px solid var(--jet-ink); }
/* ============================================================
TESTIMONIAL GRID — 3-up quote cards with imagery
============================================================ */
.jet-section--testimonial-grid {
background: linear-gradient(180deg, var(--jet-primary-50) 0%, #fff 100%);
}
.jet-quotes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--jet-s-24);
}
.jet-quote-card {
margin: 0;
background: #fff;
border-radius: var(--jet-r-lg);
overflow: hidden;
box-shadow: var(--jet-sh-md);
border: 1px solid var(--jet-line);
display: flex; flex-direction: column;
transition: transform var(--jet-dur) var(--jet-ease),
box-shadow var(--jet-dur) var(--jet-ease);
}
.jet-quote-card:hover {
transform: translateY(-4px);
box-shadow: var(--jet-sh-lg);
}
.jet-quote-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--jet-primary-50);
}
.jet-quote-card__media img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .4s var(--jet-ease);
}
.jet-quote-card:hover .jet-quote-card__media img { transform: scale(1.04); }
.jet-quote-card__body {
padding: var(--jet-s-24) var(--jet-s-24) var(--jet-s-24);
flex: 1;
display: flex; flex-direction: column;
position: relative;
}
.jet-quote-card__mark {
color: var(--jet-primary);
font-family: Georgia, serif;
font-size: 56px;
line-height: .5;
font-weight: 800;
display: block;
margin: 6px 0 var(--jet-s-12);
}
.jet-quote-card__quote {
font-size: var(--jet-fs-16);
font-weight: 600;
color: var(--jet-ink);
line-height: 1.5;
margin: 0 0 var(--jet-s-20);
font-style: italic;
flex: 1;
}
.jet-quote-card__attr {
display: flex; flex-direction: column;
gap: 2px;
border-top: 1px solid var(--jet-line);
padding-top: var(--jet-s-16);
}
.jet-quote-card__attr strong {
color: var(--jet-ink);
font-weight: 800;
font-size: var(--jet-fs-15);
}
.jet-quote-card__attr span {
color: var(--jet-muted);
font-size: var(--jet-fs-13);
}
@media (max-width: 1024px) {
.jet-quotes-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
.jet-quotes-grid { grid-template-columns: 1fr; }
}
/* ============================================================
TRUSTED-BY STRIP — visual customer mini-grid
============================================================ */
.jet-section--trusted { background: #fff; }
.jet-trusted-cta {
text-align: center;
margin-top: var(--jet-s-40);
}
/* Ghost-dark button on light bg */
.jet-btn--ghost-dark {
background: transparent;
color: var(--jet-primary) !important;
border-color: var(--jet-primary);
}
.jet-btn--ghost-dark:hover {
background: var(--jet-primary);
color: #fff !important;
}
/* ============================================================
TWO-COL IMAGE — text + customer photo split
============================================================ */
.jet-tc-image {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--jet-s-64);
align-items: center;
}
.jet-tc-image--left { grid-template-columns: 1fr 1.05fr; direction: rtl; }
.jet-tc-image--left > * { direction: ltr; }
.jet-tc-image__copy { display: flex; flex-direction: column; gap: var(--jet-s-16); }
.jet-tc-image__copy .jet-section__eyebrow { margin-bottom: 4px; align-self: flex-start; }
.jet-tc-image__lead {
font-size: var(--jet-fs-18);
color: var(--jet-text);
line-height: 1.6;
margin: 0;
}
.jet-tc-image__bullets {
list-style: none;
padding: 0; margin: var(--jet-s-12) 0;
display: grid;
gap: var(--jet-s-16);
}
.jet-tc-image__bullets li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0 14px;
padding-left: 30px;
position: relative;
}
.jet-tc-image__bullets li::before {
content: '';
position: absolute;
left: 0; top: 4px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--jet-primary);
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.jet-tc-image__bullets li strong {
grid-column: 1 / -1;
color: var(--jet-ink);
font-weight: 800;
font-size: var(--jet-fs-16);
line-height: 1.3;
}
.jet-tc-image__bullets li span {
grid-column: 1 / -1;
color: var(--jet-muted);
font-size: var(--jet-fs-14);
line-height: 1.5;
}
.jet-tc-image__copy .jet-btn { align-self: flex-start; margin-top: var(--jet-s-8); }
.jet-tc-image__media {
position: relative;
border-radius: var(--jet-r-xl);
overflow: hidden;
box-shadow: var(--jet-sh-lg);
aspect-ratio: 4 / 5;
background: var(--jet-primary-50);
}
.jet-tc-image__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.jet-tc-image__media::after {
content: '';
position: absolute;
inset: -20px -20px auto auto;
width: 140px; height: 140px;
border-radius: 50%;
background: var(--jet-primary);
opacity: 0.15;
z-index: -1;
}
@media (max-width: 880px) {
.jet-tc-image,
.jet-tc-image--left { grid-template-columns: 1fr; direction: ltr; gap: var(--jet-s-32); }
.jet-tc-image__media { aspect-ratio: 3 / 2; }
}
/* ============================================================
PROCESS STEPS — premium numbered cards
============================================================ */
.jet-process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--jet-s-24);
list-style: none; padding: 0; margin: 0;
}
.jet-process-step {
background: var(--jet-soft);
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-32) var(--jet-s-32) var(--jet-s-32);
position: relative;
transition: transform var(--jet-dur) var(--jet-ease),
border-color var(--jet-dur) var(--jet-ease),
box-shadow var(--jet-dur) var(--jet-ease);
}
.jet-process-step:hover {
transform: translateY(-2px);
border-color: var(--jet-primary-100);
box-shadow: var(--jet-sh-md);
}
.jet-process-step__num {
display: inline-block;
background: linear-gradient(135deg, var(--jet-primary), var(--jet-secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: var(--jet-fs-52);
font-weight: 900;
line-height: 1;
margin-bottom: var(--jet-s-16);
letter-spacing: -0.03em;
}
.jet-process-step__title {
font-size: var(--jet-fs-20);
font-weight: 800;
color: var(--jet-ink);
margin: 0 0 var(--jet-s-8);
line-height: 1.25;
}
.jet-process-step__desc {
font-size: var(--jet-fs-15);
color: var(--jet-text);
line-height: 1.6;
margin: 0;
}
/* ============================================================
TESTIMONIAL — premium quote section
============================================================ */
.jet-section--testimonial {
background: var(--jet-soft);
position: relative;
left: 50%; right: 50%;
margin-left: -50vw; margin-right: -50vw;
width: 100vw;
}
.jet-testimonial {
max-width: 820px; margin: 0 auto;
text-align: center;
padding: 0 var(--jet-bleed);
}
.jet-testimonial__mark {
display: block;
color: var(--jet-primary);
font-size: 80px;
font-weight: 800;
line-height: 0.6;
margin-bottom: var(--jet-s-16);
font-family: Georgia, serif;
}
.jet-testimonial__quote {
font-size: clamp(20px, 2.2vw, var(--jet-fs-26));
font-weight: 600;
color: var(--jet-ink);
line-height: 1.4;
font-style: italic;
margin: 0 0 var(--jet-s-24);
text-wrap: balance;
}
.jet-testimonial__attr {
display: inline-flex; flex-direction: column; align-items: center;
gap: 2px;
color: var(--jet-text);
font-style: normal;
font-size: var(--jet-fs-14);
}
.jet-testimonial__attr strong {
color: var(--jet-ink);
font-weight: 700;
font-size: var(--jet-fs-15);
}
.jet-testimonial__attr span {
color: var(--jet-muted);
font-size: var(--jet-fs-13);
}
/* ============================================================
CUSTOMER GALLERY — image grid of real customer prints
============================================================ */
.jet-section--gallery { background: #fff; }
.jet-customer-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--jet-s-20);
}
.jet-customer-gallery__item {
position: relative;
margin: 0;
border-radius: var(--jet-r-lg);
overflow: hidden;
background: var(--jet-soft);
border: 1px solid var(--jet-line);
aspect-ratio: 1 / 1;
transition: transform var(--jet-dur) var(--jet-ease),
box-shadow var(--jet-dur) var(--jet-ease);
cursor: zoom-in;
}
.jet-customer-gallery__item img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .35s var(--jet-ease);
}
.jet-customer-gallery__item:hover {
transform: translateY(-3px);
box-shadow: var(--jet-sh-lg);
}
.jet-customer-gallery__item:hover img {
transform: scale(1.05);
}
.jet-customer-gallery__item figcaption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--jet-s-16) var(--jet-s-16) var(--jet-s-12);
color: #fff;
font-size: var(--jet-fs-14);
font-weight: 600;
letter-spacing: 0.01em;
background: linear-gradient(to top, rgba(10,14,21,0.88) 0%, rgba(10,14,21,0.55) 60%, transparent 100%);
}
@media (max-width: 1024px) { .jet-customer-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .jet-customer-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* ============================================================
CUSTOMER LOGOS — minimalistic monogram badges
============================================================ */
.jet-section--logos { background: #fff; }
.jet-logos-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--jet-s-16);
}
@media (max-width: 880px) {
.jet-logos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.jet-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.jet-logo-cell {
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-md);
padding: var(--jet-s-24) var(--jet-s-16);
display: flex; align-items: center; justify-content: center;
min-height: 88px;
transition: border-color var(--jet-dur) var(--jet-ease),
background var(--jet-dur) var(--jet-ease),
transform var(--jet-dur) var(--jet-ease),
box-shadow var(--jet-dur) var(--jet-ease);
}
.jet-logo-cell:hover {
border-color: var(--jet-primary);
background: var(--jet-primary-50);
transform: translateY(-2px);
box-shadow: var(--jet-sh-md);
}
.jet-logo-cell__text {
font-size: var(--jet-fs-15);
font-weight: 700;
color: var(--jet-text);
letter-spacing: 0.04em;
text-align: center;
line-height: 1.2;
transition: color var(--jet-dur);
}
.jet-logo-cell:hover .jet-logo-cell__text { color: var(--jet-primary); }
/* ============================================================
CTA BANNER — gradient, sharp typography
============================================================ */
.jet-section--cta-banner { padding: var(--jet-s-48) 0; }
.jet-cta-banner {
background: linear-gradient(135deg, var(--jet-primary-dark) 0%, var(--jet-primary) 50%, var(--jet-secondary) 100%);
color: #fff;
border-radius: var(--jet-r-xl);
padding: var(--jet-s-48) var(--jet-s-48);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--jet-s-32);
align-items: center;
box-shadow: var(--jet-sh-lg);
position: relative;
overflow: hidden;
}
.jet-cta-banner::after {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.jet-cta-banner__title {
font-size: clamp(22px, 2.4vw, var(--jet-fs-32));
font-weight: 800;
color: #fff !important;
margin: 0 0 8px;
line-height: 1.2;
letter-spacing: -0.015em;
}
.jet-cta-banner__lead {
color: rgba(255,255,255,0.92);
font-size: var(--jet-fs-16);
line-height: 1.55;
margin: 0;
max-width: 560px;
}
.jet-cta-banner .jet-btn--primary {
background: #fff !important;
color: var(--jet-primary) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.jet-cta-banner .jet-btn--primary:hover {
background: var(--jet-soft) !important;
color: var(--jet-primary-dark) !important;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0,0,0,0.20);
}
@media (max-width: 768px) {
.jet-cta-banner {
grid-template-columns: 1fr;
text-align: center;
padding: var(--jet-s-32) var(--jet-s-24);
}
.jet-cta-banner__lead { margin: 0 auto; }
.jet-cta-banner .jet-btn { width: 100%; justify-content: center; }
}
/* ============================================================
TWO-COL — editorial split
============================================================ */
.jet-section--two-col { background: var(--jet-soft); }
.jet-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--jet-s-32);
align-items: stretch;
}
.jet-two-col__left,
.jet-two-col__right {
display: flex; flex-direction: column;
min-width: 0;
font-size: var(--jet-fs-16);
color: var(--jet-text);
line-height: 1.7;
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-32);
box-shadow: var(--jet-sh-md);
}
.jet-two-col h3 {
font-size: var(--jet-fs-20);
font-weight: 800;
color: var(--jet-ink);
margin: 0 0 var(--jet-s-12);
line-height: 1.3;
}
.jet-two-col h3:first-child { margin-top: 0; }
.jet-two-col h3::after {
content: '';
display: block;
width: 44px; height: 3px;
margin-top: var(--jet-s-12);
background: linear-gradient(90deg, var(--jet-primary), var(--jet-secondary));
border-radius: 3px;
}
.jet-two-col h3:not(:first-child) { margin-top: var(--jet-s-24); }
.jet-two-col p { margin: 0 0 var(--jet-s-16); }
.jet-two-col p:last-child { margin-bottom: 0; }
.jet-two-col a {
color: var(--jet-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.jet-two-col a:hover { color: var(--jet-primary-dark); }
.jet-two-col .jet-cmp-table { display: table; width: 100%; min-width: 420px; }
.jet-two-col__left > .jet-cmp-table,
.jet-two-col__right > .jet-cmp-table { margin-bottom: 0; }
.jet-two-col__left, .jet-two-col__right { overflow-x: auto; }
@media (max-width: 768px) {
.jet-two-col { grid-template-columns: 1fr; gap: var(--jet-s-24); }
.jet-two-col__left,
.jet-two-col__right { padding: var(--jet-s-24); }
}
/* ============================================================
RAW CONTENT — gravity-form / elementor passthrough
============================================================ */
.jet-section--raw { background: var(--jet-soft); }
.jet-raw-content {
max-width: 760px;
margin: 0 auto;
}
.jet-raw-content .gform_wrapper {
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-32);
box-shadow: var(--jet-sh-sm);
}
/* ============================================================
GRAVITY FORM — premium card-style on contact page
============================================================ */
.jet-section--gform { background: var(--jet-soft); }
.jet-gform-wrap {
max-width: 760px;
margin: 0 auto;
}
.jet-gform-wrap .gform_wrapper {
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-40) var(--jet-s-32);
box-shadow: var(--jet-sh-md);
}
.jet-gform-wrap .gform_wrapper form { margin: 0; }
.jet-gform-wrap .gform_fields,
.jet-gform-wrap .gform_body ul,
.jet-gform-wrap .gform_body ol {
list-style: none;
padding: 0; margin: 0;
display: grid; gap: var(--jet-s-16);
}
.jet-gform-wrap .gfield label,
.jet-gform-wrap .gform_wrapper label {
display: block;
font-size: var(--jet-fs-13);
font-weight: 600;
color: var(--jet-ink);
margin: 0 0 6px;
letter-spacing: 0.01em;
}
.jet-gform-wrap input[type="text"],
.jet-gform-wrap input[type="email"],
.jet-gform-wrap input[type="tel"],
.jet-gform-wrap input[type="url"],
.jet-gform-wrap select,
.jet-gform-wrap textarea {
width: 100%;
background: #fff;
border: 1.5px solid var(--jet-line);
border-radius: var(--jet-r-md);
padding: 11px 14px;
font-size: var(--jet-fs-15);
color: var(--jet-ink);
font-family: inherit;
box-sizing: border-box;
transition: border-color var(--jet-dur), box-shadow var(--jet-dur);
}
.jet-gform-wrap input:focus,
.jet-gform-wrap textarea:focus,
.jet-gform-wrap select:focus {
border-color: var(--jet-primary);
outline: none;
box-shadow: 0 0 0 4px var(--jet-primary-50);
}
.jet-gform-wrap textarea { min-height: 120px; resize: vertical; }
.jet-gform-wrap .gform_footer { padding: var(--jet-s-16) 0 0; margin: var(--jet-s-8) 0 0; }
.jet-gform-wrap .gform_button,
.jet-gform-wrap .gform_wrapper input[type="submit"] {
background: var(--jet-primary);
color: #fff;
border: none;
border-radius: var(--jet-r-pill);
padding: 14px 28px;
font-weight: 700;
font-size: var(--jet-fs-15);
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 4px 14px rgba(35,89,162,0.30);
transition: background var(--jet-dur), transform var(--jet-dur), box-shadow var(--jet-dur);
min-width: 240px;
}
.jet-gform-wrap .gform_button:hover,
.jet-gform-wrap .gform_wrapper input[type="submit"]:hover {
background: var(--jet-primary-dark);
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(35,89,162,0.42);
}
.jet-gform-wrap .gfield_required { color: var(--jet-primary); margin-left: 2px; }
.jet-gform-wrap .gform_validation_errors,
.jet-gform-wrap .validation_message {
background: #fff3f3;
border-left: 4px solid #c83232;
color: #8a1f1f;
padding: 12px 16px;
border-radius: var(--jet-r-md);
font-size: var(--jet-fs-14);
margin-bottom: var(--jet-s-16);
}
.jet-gform-wrap .gfield_description {
font-size: var(--jet-fs-12);
color: var(--jet-muted);
margin-top: 4px;
}
.jet-gform-wrap .ginput_container_fileupload { padding: 0; }
@media (max-width: 560px) {
.jet-gform-wrap .gform_wrapper { padding: var(--jet-s-24) var(--jet-s-20); }
}
/* ============================================================
FOOTER CTA — premium signature section
============================================================ */
.jet-footer-cta {
position: relative;
left: 50%; right: 50%;
margin-left: -50vw; margin-right: -50vw;
width: 100vw;
background: linear-gradient(135deg, var(--jet-primary-dark) 0%, var(--jet-primary) 60%, var(--jet-secondary) 100%);
color: #fff;
padding: var(--jet-s-96) 0;
overflow: hidden;
isolation: isolate;
}
.jet-footer-cta::before {
content: '';
position: absolute;
inset: 0; z-index: -1;
background-image:
radial-gradient(circle at 20% 10%, rgba(255,255,255,0.08) 0%, transparent 35%),
radial-gradient(circle at 80% 90%, rgba(255,255,255,0.06) 0%, transparent 35%);
}
.jet-footer-cta__inner {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
display: grid;
grid-template-columns: 0.9fr 1.3fr;
gap: var(--jet-s-64);
align-items: start;
}
.jet-footer-cta__copy h2 {
font-size: clamp(28px, 3vw, var(--jet-fs-40));
font-weight: 800;
color: #fff !important;
margin: 0 0 var(--jet-s-16);
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
}
.jet-footer-cta__copy p {
font-size: var(--jet-fs-18);
color: rgba(255,255,255,0.90);
line-height: 1.6;
margin: 0 0 var(--jet-s-24);
max-width: 540px;
}
.jet-footer-cta__bullets {
list-style: none; padding: 0; margin: 0 0 var(--jet-s-32);
display: grid; gap: 10px;
}
.jet-footer-cta__bullets li {
display: flex; align-items: flex-start; gap: 10px;
color: rgba(255,255,255,0.94);
font-size: var(--jet-fs-15);
line-height: 1.5;
}
.jet-footer-cta__bullets li::before {
content: '';
display: inline-block;
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px; background-position: center; background-repeat: no-repeat;
flex: 0 0 18px;
margin-top: 3px;
}
.jet-footer-cta__form {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-32);
}
.jet-footer-cta__form h3 {
font-size: var(--jet-fs-20);
font-weight: 800;
color: #fff !important;
margin: 0 0 var(--jet-s-20);
}
.jet-footer-cta__field { display: block; margin-bottom: var(--jet-s-16); }
.jet-footer-cta__label {
display: block;
font-size: var(--jet-fs-13);
font-weight: 600;
color: rgba(255,255,255,0.88);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.jet-footer-cta__input,
.jet-footer-cta__textarea {
width: 100%;
background: rgba(255,255,255,0.96);
border: 1.5px solid transparent;
border-radius: var(--jet-r-md);
padding: 12px 14px;
font-size: var(--jet-fs-15);
color: var(--jet-ink);
font-family: inherit;
box-sizing: border-box;
transition: border-color var(--jet-dur), background var(--jet-dur);
}
.jet-footer-cta__input:focus,
.jet-footer-cta__textarea:focus {
background: #fff;
border-color: rgba(255,255,255,0.5);
outline: none;
}
.jet-footer-cta__textarea { min-height: 110px; resize: vertical; }
.jet-footer-cta__form .jet-btn--primary {
background: #fff !important;
color: var(--jet-primary) !important;
width: 100%;
justify-content: center;
margin-top: 6px;
}
.jet-footer-cta__form .jet-btn--primary:hover {
background: var(--jet-soft) !important;
color: var(--jet-primary-dark) !important;
}
.jet-footer-cta__legal {
font-size: var(--jet-fs-12);
color: rgba(255,255,255,0.65);
margin: var(--jet-s-12) 0 0;
line-height: 1.5;
}
@media (max-width: 880px) {
.jet-footer-cta { padding: var(--jet-s-64) 0; }
.jet-footer-cta__inner {
grid-template-columns: 1fr;
gap: var(--jet-s-40);
}
}
@media (max-width: 480px) {
.jet-footer-cta__form { padding: var(--jet-s-24); }
}
/* ============================================================
STICKY MOBILE BAR — bottom CTA on mobile (template uses .jet-mobile-bar)
Default: hidden on all sizes; shown via media query on mobile.
============================================================ */
.jet-mobile-bar,
.jet-sticky-mobile {
display: none;
}
@media (max-width: 880px) {
.jet-mobile-bar {
position: fixed;
left: 72px; right: 72px; bottom: max(10px, env(safe-area-inset-bottom));
z-index: 999;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.jet-mobile-bar__btn--primary {
width: 220px;
max-width: 100%;
box-sizing: border-box;
pointer-events: auto;
}
body { padding-bottom: 76px; }
}
.jet-mobile-bar__btn {
display: inline-flex;
align-items: center; justify-content: center;
gap: 8px;
padding: 13px 18px;
border-radius: var(--jet-r-pill);
font-size: var(--jet-fs-15);
font-weight: 700;
text-decoration: none !important;
white-space: nowrap;
min-height: 48px;
transition: transform var(--jet-dur), box-shadow var(--jet-dur);
}
.jet-mobile-bar__btn--phone {
color: var(--jet-primary) !important;
background: var(--jet-primary-50);
border: 1.5px solid var(--jet-primary-100);
}
.jet-mobile-bar__btn--phone:hover { background: var(--jet-primary-100); }
.jet-mobile-bar__btn--primary {
background: var(--jet-primary);
color: #fff !important;
box-shadow: 0 4px 14px rgba(35,89,162,0.32);
}
.jet-mobile-bar__btn--primary:hover { background: var(--jet-primary-dark); }
/* ============================================================
FOOTER-CTA aliases — template uses __text / __form-wrap / __list
============================================================ */
.jet-footer-cta__text { /* alias of __copy */ }
.jet-footer-cta__eyebrow {
display: inline-block;
padding: 4px 12px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.30);
border-radius: var(--jet-r-pill);
color: #fff;
font-size: var(--jet-fs-12);
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
margin-bottom: var(--jet-s-16);
}
.jet-footer-cta__title {
font-size: clamp(28px, 3vw, var(--jet-fs-40));
font-weight: 800;
color: #fff !important;
margin: 0 0 var(--jet-s-16);
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
}
.jet-footer-cta__lead {
font-size: var(--jet-fs-18);
color: rgba(255,255,255,0.90);
line-height: 1.6;
margin: 0 0 var(--jet-s-24);
max-width: 540px;
}
.jet-footer-cta__list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 8px;
}
.jet-footer-cta__list li {
color: rgba(255,255,255,0.94);
font-size: var(--jet-fs-15);
line-height: 1.5;
}
.jet-footer-cta__form-wrap {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-32);
}
/* Gravity Form embedded inside the blue footer-CTA box */
/* GF piilottaa wrapperin inline display:none (JS paljastaa sen; LiteSpeed voi
deferrata skriptin) -> pakotetaan näkyviin, tyylit tulevat alta. */
.jet-footer-cta__form-wrap .gform_wrapper { margin: 0; display: block !important; }
.jet-footer-cta__form-wrap .gform_wrapper > form,
.jet-footer-cta__form-wrap .gform_body,
.jet-footer-cta__form-wrap .gform-body { display: block !important; }
.jet-footer-cta__form-wrap .gform_heading { display: none; }
.jet-footer-cta__form-wrap .gform_fields {
display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--jet-s-16) !important;
}
/* GF:n oma 12-col span-järjestelmä ohitetaan -> kentät virtaavat omaan gridiin */
.jet-footer-cta__form-wrap .gfield { margin: 0; min-width: 0; grid-column: auto !important; }
.jet-footer-cta__form-wrap .gfield.gfield--type-textarea,
.jet-footer-cta__form-wrap .gfield.gfield--type-section,
.jet-footer-cta__form-wrap .gfield.gfield--type-html,
.jet-footer-cta__form-wrap .gfield.gfield--type-checkbox,
.jet-footer-cta__form-wrap .gfield.gfield--width-full { grid-column: 1 / -1 !important; }
.jet-footer-cta__form-wrap .gfield_label,
.jet-footer-cta__form-wrap .gform_required_legend {
color: #fff !important; font-size: var(--jet-fs-13); font-weight: 600; margin-bottom: 6px;
}
.jet-footer-cta__form-wrap .gfield_required { color: #fff; }
.jet-footer-cta__form-wrap .ginput_container input,
.jet-footer-cta__form-wrap .ginput_container textarea,
.jet-footer-cta__form-wrap .ginput_container select {
width: 100%; background: #fff; border: 1.5px solid transparent; border-radius: var(--jet-r-md);
padding: 11px 13px; font-size: var(--jet-fs-15); color: var(--jet-ink); font-family: inherit; box-sizing: border-box;
}
.jet-footer-cta__form-wrap .ginput_container input:focus,
.jet-footer-cta__form-wrap .ginput_container textarea:focus {
outline: none; box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.jet-footer-cta__form-wrap .ginput_container textarea { min-height: 96px; resize: vertical; }
.jet-footer-cta__form-wrap .gfield_description,
.jet-footer-cta__form-wrap .gform_fileupload_rules { color: rgba(255,255,255,0.75); }
.jet-footer-cta__form-wrap .gform_footer { grid-column: 1 / -1; margin: var(--jet-s-8) 0 0; padding: 0; }
.jet-footer-cta__form-wrap .gform_footer input[type="submit"],
.jet-footer-cta__form-wrap .gform_footer button {
background: #fff !important; color: var(--jet-primary) !important; border: none !important;
border-radius: var(--jet-r-pill); padding: 14px 28px; font-weight: 700; font-size: var(--jet-fs-16);
width: 100%; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.15); transition: background var(--jet-dur);
}
.jet-footer-cta__form-wrap .gform_footer input[type="submit"]:hover { background: var(--jet-soft) !important; }
.jet-footer-cta__form-wrap .gform_validation_errors,
.jet-footer-cta__form-wrap .validation_message {
color: #fff; background: rgba(0,0,0,0.20); border: none; border-radius: var(--jet-r-sm); padding: 8px 12px;
}
.jet-footer-cta__form-wrap .gform_confirmation_message { color: #fff; font-size: var(--jet-fs-18); line-height: 1.5; }
@media (max-width: 560px) {
.jet-footer-cta__form-wrap .gform_fields { grid-template-columns: 1fr !important; }
}
/* QUOTE FORM (used in footer-cta) */
.jet-quote-form { display: block; }
.jet-quote-form__field { display: block; margin-bottom: var(--jet-s-16); }
.jet-quote-form__field label {
display: block;
font-size: var(--jet-fs-13);
font-weight: 600;
color: rgba(255,255,255,0.92);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.jet-quote-form__field input[type="text"],
.jet-quote-form__field input[type="email"],
.jet-quote-form__field input[type="tel"],
.jet-quote-form__field textarea {
display: block;
width: 100%;
background: #fff;
border: 1.5px solid transparent;
border-radius: var(--jet-r-md);
padding: 12px 14px;
font-size: var(--jet-fs-15);
color: var(--jet-ink);
font-family: inherit;
box-sizing: border-box;
transition: border-color var(--jet-dur), box-shadow var(--jet-dur);
}
.jet-quote-form__field input:focus,
.jet-quote-form__field textarea:focus {
border-color: rgba(255,255,255,0.7);
outline: none;
box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.jet-quote-form__field textarea { min-height: 110px; resize: vertical; }
.jet-quote-form__submit {
background: #fff !important;
color: var(--jet-primary) !important;
width: 100%;
justify-content: center;
margin-top: 6px;
}
.jet-quote-form__submit:hover {
background: var(--jet-soft) !important;
color: var(--jet-primary-dark) !important;
}
.jet-quote-form__privacy {
font-size: var(--jet-fs-12);
color: rgba(255,255,255,0.68);
margin: var(--jet-s-12) 0 0;
text-align: center;
}
/* jet-btn--accent same as primary white-on-blue (used in form submit) */
.jet-btn--accent {
background: #fff;
color: var(--jet-primary) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.jet-btn--accent:hover {
background: var(--jet-soft);
color: var(--jet-primary-dark) !important;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(0,0,0,0.20);
}
/* ============================================================
BLOG SINGLE-POST — kept from prior version but tightened
============================================================ */
.jet-blog-shell {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
}
.jet-blog-shell__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--jet-s-48);
align-items: start;
}
@media (max-width: 1024px) {
.jet-blog-shell__grid { grid-template-columns: 1fr; gap: var(--jet-s-32); }
}
.jet-article-body {
font-size: var(--jet-fs-18);
line-height: 1.7;
color: var(--jet-text);
}
.jet-article-body p { margin: 0 0 var(--jet-s-20); }
.jet-article-body h2 {
font-size: var(--jet-fs-26);
font-weight: 800;
color: var(--jet-ink);
margin: var(--jet-s-48) 0 var(--jet-s-16);
letter-spacing: -0.015em;
line-height: 1.25;
}
.jet-article-body h3 {
font-size: var(--jet-fs-20);
font-weight: 800;
color: var(--jet-ink);
margin: var(--jet-s-32) 0 var(--jet-s-12);
line-height: 1.3;
}
.jet-article-body ul,
.jet-article-body ol { margin: 0 0 var(--jet-s-20); padding-left: 22px; }
.jet-article-body li { margin: 0 0 8px; line-height: 1.65; }
.jet-article-body a { color: var(--jet-primary); text-decoration: underline; text-underline-offset: 3px; }
.jet-article-body a:hover { color: var(--jet-primary-dark); }
.jet-article-body img { max-width: 100%; height: auto; border-radius: var(--jet-r-md); margin: var(--jet-s-24) 0; }
/* TL;DR */
.jet-tldr {
background: var(--jet-primary-50);
border-left: 4px solid var(--jet-primary);
border-radius: var(--jet-r-md);
padding: var(--jet-s-24) var(--jet-s-32);
margin: 0 0 var(--jet-s-40);
}
.jet-tldr__label {
display: inline-block;
font-size: var(--jet-fs-12);
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--jet-primary);
margin-bottom: var(--jet-s-8);
}
.jet-tldr ul { margin: 0; padding-left: 20px; }
.jet-tldr li {
font-size: var(--jet-fs-16);
color: var(--jet-ink);
font-weight: 600;
line-height: 1.55;
margin-bottom: 6px;
}
/* Sticky CTA (sidebar) */
.jet-sticky-cta {
background: linear-gradient(135deg, var(--jet-primary-dark) 0%, var(--jet-primary) 100%);
color: #fff;
border-radius: var(--jet-r-lg);
padding: var(--jet-s-32) var(--jet-s-24);
position: sticky;
top: 100px;
box-shadow: var(--jet-sh-lg);
}
.jet-sticky-cta h3 {
font-size: var(--jet-fs-18);
font-weight: 800;
color: #fff !important;
margin: 0 0 var(--jet-s-12);
line-height: 1.25;
}
.jet-sticky-cta p {
font-size: var(--jet-fs-14);
color: rgba(255,255,255,0.88);
line-height: 1.55;
margin: 0 0 var(--jet-s-20);
}
.jet-sticky-cta .jet-btn--primary {
background: #fff !important;
color: var(--jet-primary) !important;
width: 100%;
justify-content: center;
}
/* Pullquote */
.jet-pullquote {
border-left: 4px solid var(--jet-primary);
padding: var(--jet-s-16) 0 var(--jet-s-16) var(--jet-s-24);
margin: var(--jet-s-32) 0;
font-size: var(--jet-fs-22);
font-weight: 600;
color: var(--jet-ink);
font-style: italic;
line-height: 1.4;
}
/* Author card */
.jet-author {
background: var(--jet-soft);
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-24);
margin: var(--jet-s-48) 0 0;
}
.jet-author__inner { display: flex; gap: var(--jet-s-20); align-items: center; }
.jet-author__logo {
width: 56px; height: 56px;
background: var(--jet-primary);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: var(--jet-fs-15);
letter-spacing: 0.04em;
flex-shrink: 0;
}
.jet-author__name { font-size: var(--jet-fs-16); font-weight: 800; color: var(--jet-ink); margin: 0; }
.jet-author__role { font-size: var(--jet-fs-14); color: var(--jet-muted); margin: 2px 0 0; }
/* Related posts */
.jet-related { margin-top: var(--jet-s-64); padding-top: var(--jet-s-48); border-top: 1px solid var(--jet-line); }
.jet-related h3 {
font-size: var(--jet-fs-22);
font-weight: 800;
color: var(--jet-ink);
margin: 0 0 var(--jet-s-24);
}
.jet-related__grid {
display: grid; gap: var(--jet-s-20);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.jet-related__item {
display: block;
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-md);
padding: var(--jet-s-20);
text-decoration: none !important;
color: var(--jet-ink) !important;
transition: transform var(--jet-dur), border-color var(--jet-dur), box-shadow var(--jet-dur);
}
.jet-related__item:hover {
transform: translateY(-2px);
border-color: var(--jet-primary);
box-shadow: var(--jet-sh-md);
}
/* ============================================================
PAGE-PROMISE-WRAP (Astra-injected fallback for non-mapped pages)
============================================================ */
.jet-page-promise-wrap {
margin: 0 0 var(--jet-s-48);
}
/* ============================================================
SINGLE-POST v2.0 — Reading progress, hero, shell, TOC, side-CTA
============================================================ */
/* Reading progress bar (fixed at top) */
.jet-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: transparent;
z-index: 9998;
pointer-events: none;
}
.jet-progress__bar {
height: 100%;
background: linear-gradient(90deg, var(--jet-primary) 0%, var(--jet-secondary) 100%);
width: 0%;
transition: width .1s linear;
}
/* Hero specifically for single-post */
.jet-hero--single { min-height: 480px; }
.jet-hero--single .jet-hero__inner { max-width: var(--jet-wide); }
/* Breadcrumbs */
.jet-crumbs {
display: flex; align-items: center; flex-wrap: wrap;
gap: 8px;
font-size: var(--jet-fs-13);
margin-bottom: var(--jet-s-20);
}
.jet-crumbs__link {
color: rgba(255,255,255,0.78) !important;
text-decoration: none !important;
font-weight: 500;
transition: color var(--jet-dur);
}
.jet-crumbs__link:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
.jet-crumbs__sep { color: rgba(255,255,255,0.40); }
.jet-crumbs__current {
color: rgba(255,255,255,0.95);
font-weight: 600;
max-width: 360px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hero meta-row (date · read · author) */
.jet-hero__meta-row {
display: flex; align-items: center; flex-wrap: wrap;
gap: 12px;
color: rgba(255,255,255,0.85);
font-size: var(--jet-fs-13);
margin: 0 0 var(--jet-s-32);
}
.jet-hero__meta {
display: inline-flex; align-items: center;
gap: 6px;
}
.jet-hero__meta-icon {
color: rgba(255,255,255,0.65);
}
.jet-hero__meta-sep { opacity: 0.45; }
/* ============================================================
ARTICLE SHELL — 2-col layout (main + sticky sidebar)
============================================================ */
.jet-article-shell {
padding: var(--jet-s-64) 0 var(--jet-s-48);
background: #fff;
}
.jet-article-shell__inner {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
display: grid;
grid-template-columns: minmax(0, 1fr) 348px;
gap: var(--jet-s-48);
/* stretch: sivupalkkisarake venyy artikkelin mittaiseksi,
jotta sticky side-CTA voi kulkea koko matkan */
align-items: stretch;
}
.jet-article-shell__main { min-width: 0; }
/* Sivupalkki EI ole enää sticky yhtenä pakettina (TOC+CTA ~830px ei
mahtunut viewporttiin -> CTA:n alaosa jäi piiloon). TOC vierii
sisällön mukana, vain kompakti side-CTA on sticky. Block-virtaus
(ei grid), jotta sticky-lapsi liikkuu koko sarakkeen korkeudella. */
.jet-article-shell__side {
position: static;
display: block;
max-width: 348px;
}
.jet-article-shell__side > * + * { margin-top: var(--jet-s-20); }
.jet-article-shell__side .jet-side-cta {
position: sticky;
/* --jet-header-h mitataan JS:llä site-footerissa (fixed eHF-header),
fallback 120px jos skripti ei aja */
top: calc(var(--jet-header-h, 120px) + 24px);
}
/* Pitkä sisällysluettelo ei saa työntää CTA:ta ensinäkymän alle */
.jet-article-shell__side .jet-toc__list {
max-height: min(46vh, 430px);
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: var(--jet-primary-100) transparent;
}
@media (max-width: 1024px) {
.jet-article-shell__inner {
grid-template-columns: 1fr;
gap: var(--jet-s-32);
align-items: start;
}
.jet-article-shell__side {
position: static;
max-width: none;
}
.jet-article-shell__side .jet-side-cta { position: static; }
.jet-article-shell__side .jet-toc__list { max-height: none; overflow: visible; }
}
/* ============================================================
TOC (Table of Contents) — sticky sidebar
============================================================ */
.jet-toc {
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-20) var(--jet-s-20) var(--jet-s-16);
box-shadow: var(--jet-sh-sm);
}
.jet-toc__title {
display: flex; align-items: center;
gap: 8px;
font-size: var(--jet-fs-12);
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--jet-primary);
margin: 0 0 var(--jet-s-12);
padding-bottom: var(--jet-s-12);
border-bottom: 1px solid var(--jet-line);
}
.jet-toc__list {
list-style: none; padding: 0; margin: 0;
counter-reset: jet-toc;
display: grid; gap: 4px;
}
.jet-toc__list li { counter-increment: jet-toc; }
.jet-toc__list a {
display: flex; align-items: baseline; gap: 10px;
padding: 8px 10px;
border-radius: var(--jet-r-sm);
text-decoration: none !important;
color: var(--jet-text) !important;
font-size: var(--jet-fs-14);
line-height: 1.4;
transition: background var(--jet-dur), color var(--jet-dur);
}
.jet-toc__num::before {
content: counter(jet-toc, decimal-leading-zero);
font-size: var(--jet-fs-12);
font-weight: 800;
color: var(--jet-primary);
letter-spacing: 0.02em;
min-width: 22px;
display: inline-block;
}
.jet-toc__text { flex: 1; }
.jet-toc__list a:hover {
background: var(--jet-primary-50);
color: var(--jet-primary) !important;
}
.jet-toc__list a.is-active {
background: var(--jet-primary-50);
color: var(--jet-primary) !important;
font-weight: 700;
}
/* ============================================================
SIDE-CTA — compact sticky CTA-card
============================================================ */
.jet-side-cta {
background: linear-gradient(135deg, var(--jet-primary-dark) 0%, var(--jet-primary) 60%, var(--jet-secondary) 100%);
color: #fff;
border-radius: var(--jet-r-lg);
padding: var(--jet-s-24) var(--jet-s-24) var(--jet-s-20);
box-shadow: var(--jet-sh-lg);
position: relative;
overflow: hidden;
}
.jet-side-cta::before {
content: '';
position: absolute;
top: -40%; right: -30%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.jet-side-cta__inner { position: relative; }
.jet-side-cta__rating {
display: inline-flex; align-items: center;
gap: 4px;
color: #FFD24D;
margin-bottom: var(--jet-s-12);
font-size: var(--jet-fs-12);
}
.jet-side-cta__rating span {
color: rgba(255,255,255,0.85);
margin-left: 6px;
font-weight: 600;
letter-spacing: 0.02em;
}
.jet-side-cta__heading {
font-size: var(--jet-fs-20);
font-weight: 800;
color: #fff !important;
margin: 0 0 var(--jet-s-8);
line-height: 1.2;
letter-spacing: -0.01em;
}
.jet-side-cta__lead {
color: rgba(255,255,255,0.88);
font-size: var(--jet-fs-14);
line-height: 1.5;
margin: 0 0 var(--jet-s-16);
}
.jet-side-cta__points {
list-style: none; padding: 0; margin: 0 0 var(--jet-s-20);
display: grid; gap: 8px;
}
.jet-side-cta__points li {
display: flex; align-items: flex-start;
gap: 8px;
color: rgba(255,255,255,0.94);
font-size: var(--jet-fs-14);
line-height: 1.4;
}
.jet-side-cta__points li svg {
flex-shrink: 0;
margin-top: 4px;
color: #fff;
}
.jet-side-cta .jet-btn--primary {
background: #fff !important;
color: var(--jet-primary) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}
.jet-side-cta .jet-btn--primary:hover {
background: var(--jet-soft) !important;
color: var(--jet-primary-dark) !important;
}
.jet-side-cta__phone {
display: flex; align-items: center; justify-content: center;
gap: 6px;
margin-top: var(--jet-s-12);
color: rgba(255,255,255,0.92) !important;
text-decoration: none !important;
font-size: var(--jet-fs-13);
font-weight: 600;
padding: 8px;
border-top: 1px solid rgba(255,255,255,0.20);
transition: color var(--jet-dur);
}
.jet-side-cta__phone:hover { color: #fff !important; }
/* ============================================================
AUTHOR MINI (sidebar)
============================================================ */
.jet-author-mini {
display: flex; align-items: center;
gap: var(--jet-s-12);
background: var(--jet-soft);
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-16);
}
.jet-author-mini__avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--jet-primary), var(--jet-secondary));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: var(--jet-fs-12);
letter-spacing: 0.04em;
flex-shrink: 0;
}
.jet-author-mini__body { display: flex; flex-direction: column; gap: 0; }
.jet-author-mini__label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--jet-primary);
}
.jet-author-mini__name {
font-size: var(--jet-fs-14);
color: var(--jet-ink);
line-height: 1.2;
}
.jet-author-mini__role {
font-size: var(--jet-fs-12);
color: var(--jet-muted);
}
/* ============================================================
ARTICLE BODY typography (single-post)
============================================================ */
.jet-article-body {
font-size: var(--jet-fs-18);
line-height: 1.75;
color: var(--jet-text);
}
.jet-article-body > * { max-width: 760px; }
.jet-article-body > .jet-mid-cta,
.jet-article-body > .alignwide,
.jet-article-body > .alignfull,
.jet-article-body > figure { max-width: none; }
.jet-article-body p { margin: 0 0 var(--jet-s-24); }
.jet-article-body h2 {
font-size: clamp(24px, 2.4vw, 30px);
font-weight: 800;
color: var(--jet-ink);
margin: var(--jet-s-48) 0 var(--jet-s-16);
letter-spacing: -0.015em;
line-height: 1.25;
scroll-margin-top: 96px;
}
.jet-article-body h2::before {
content: '';
display: block;
width: 48px; height: 3px;
background: var(--jet-primary);
border-radius: 2px;
margin-bottom: var(--jet-s-16);
}
.jet-article-body h3 {
font-size: var(--jet-fs-22);
font-weight: 800;
color: var(--jet-ink);
margin: var(--jet-s-32) 0 var(--jet-s-12);
line-height: 1.3;
scroll-margin-top: 96px;
}
.jet-article-body ul,
.jet-article-body ol { margin: 0 0 var(--jet-s-24); padding-left: 22px; }
.jet-article-body li { margin: 0 0 10px; line-height: 1.7; }
.jet-article-body ul li::marker { color: var(--jet-primary); }
.jet-article-body a {
color: var(--jet-primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.jet-article-body a:hover { color: var(--jet-primary-dark); text-decoration-thickness: 2px; }
.jet-article-body strong { color: var(--jet-ink); font-weight: 700; }
.jet-article-body img,
.jet-article-body figure {
max-width: 100%; height: auto;
border-radius: var(--jet-r-lg);
margin: var(--jet-s-32) auto;
}
.jet-article-body figure img { border-radius: var(--jet-r-lg); }
.jet-article-body figcaption {
text-align: center;
font-size: var(--jet-fs-13);
color: var(--jet-muted);
margin-top: 8px;
}
/* Tables (comparison-style): square corners; the figure scrolls on mobile. */
.jet-article-body .wp-block-table {
margin: var(--jet-s-32) 0;
border: 1px solid var(--jet-line);
border-radius: 0;
overflow-x: auto;
background: #fff;
box-shadow: var(--jet-sh-sm);
-webkit-overflow-scrolling: touch;
}
.jet-article-body table {
width: 100%;
border-collapse: collapse;
margin: var(--jet-s-32) 0;
font-size: var(--jet-fs-15);
background: #fff;
border: 1px solid var(--jet-line);
border-radius: 0;
overflow: hidden;
}
.jet-article-body .wp-block-table table {
margin: 0;
border: none;
border-radius: 0;
min-width: 640px;
}
/* Gutenbergin tasapalstat (fixed layout) rikkovat vertailutaulukon:
1. sarake yhtä leveä kuin sisältösarakkeet -> annetaan sisällön mitoittaa */
.jet-article-body table.has-fixed-layout { table-layout: auto; }
.jet-article-body table th:first-child,
.jet-article-body table td:first-child { width: 22%; min-width: 165px; }
.jet-article-body table thead {
background: linear-gradient(135deg, var(--jet-primary), var(--jet-secondary));
}
.jet-article-body table th {
color: #fff;
font-weight: 700;
padding: 14px 16px;
text-align: left;
font-size: var(--jet-fs-14);
letter-spacing: 0.01em;
vertical-align: bottom;
line-height: 1.35;
}
.jet-article-body table td {
padding: 14px 16px;
border-top: 1px solid var(--jet-line);
color: var(--jet-text);
line-height: 1.5;
vertical-align: top;
}
.jet-article-body table td p { margin: 0; }
.jet-article-body table thead th,
.jet-article-body table thead td,
.jet-article-body table thead th *,
.jet-article-body table thead td * { color: #fff !important; }
.jet-article-body table tbody tr:nth-child(even) { background: var(--jet-soft); }
.jet-article-body table tbody tr:hover { background: var(--jet-primary-50); }
.jet-article-body table td:first-child { font-weight: 700; color: var(--jet-ink); }
.jet-article-body .wp-block-table figcaption {
padding: 10px 16px 12px;
font-size: var(--jet-fs-13);
color: var(--jet-muted);
border-top: 1px solid var(--jet-line);
}
/* FAQ (Yoast schema) — accordion-like style */
.jet-article-body .schema-faq,
.jet-article-body .wp-block-yoast-faq-block {
margin: var(--jet-s-32) 0;
}
.jet-article-body .schema-faq-section,
.jet-article-body .wp-block-yoast-faq-block > div {
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-20) var(--jet-s-24);
margin: 0 0 var(--jet-s-12);
transition: border-color var(--jet-dur), box-shadow var(--jet-dur);
}
.jet-article-body .schema-faq-section:hover,
.jet-article-body .wp-block-yoast-faq-block > div:hover {
border-color: var(--jet-primary-100);
box-shadow: var(--jet-sh-sm);
}
.jet-article-body .schema-faq-question {
font-size: var(--jet-fs-18);
font-weight: 800;
color: var(--jet-ink);
margin: 0 0 var(--jet-s-12);
padding-left: 36px;
position: relative;
line-height: 1.35;
}
.jet-article-body .schema-faq-question::before {
content: '?';
position: absolute;
left: 0; top: 0;
width: 26px; height: 26px;
background: var(--jet-primary);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: var(--jet-fs-13);
font-weight: 800;
}
.jet-article-body .schema-faq-answer {
color: var(--jet-text);
line-height: 1.65;
padding-left: 36px;
margin: 0;
}
/* ============================================================
MID-CTA (injected) — premium gradient row
============================================================ */
.jet-mid-cta {
margin: var(--jet-s-40) 0;
background: linear-gradient(135deg, var(--jet-primary-dark) 0%, var(--jet-primary) 55%, var(--jet-secondary) 100%);
color: #fff;
border-radius: var(--jet-r-lg);
overflow: hidden;
position: relative;
box-shadow: var(--jet-sh-md);
}
.jet-mid-cta::after {
content: '';
position: absolute;
top: -40%; right: -10%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.jet-mid-cta__inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--jet-s-20);
align-items: center;
padding: var(--jet-s-24) var(--jet-s-32);
position: relative;
z-index: 1;
}
.jet-mid-cta__icon {
width: 56px; height: 56px;
border-radius: var(--jet-r-md);
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.22);
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
}
.jet-mid-cta__title {
font-size: var(--jet-fs-20);
font-weight: 800;
color: #fff !important;
margin: 0 0 4px;
line-height: 1.2;
letter-spacing: -0.01em;
}
.jet-mid-cta__title::before { display: none; }
.jet-mid-cta__lead {
color: rgba(255,255,255,0.92);
font-size: var(--jet-fs-14);
line-height: 1.5;
margin: 0 !important;
max-width: 540px;
}
.jet-mid-cta .jet-btn--primary {
background: #fff !important;
color: var(--jet-primary) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.jet-mid-cta .jet-btn--primary:hover {
background: var(--jet-soft) !important;
color: var(--jet-primary-dark) !important;
}
@media (max-width: 768px) {
.jet-mid-cta__inner {
grid-template-columns: 1fr;
text-align: center;
padding: var(--jet-s-24);
}
.jet-mid-cta__icon { margin: 0 auto; }
.jet-mid-cta__lead { margin: 0 auto !important; }
.jet-mid-cta .jet-btn { width: 100%; justify-content: center; }
}
/* ============================================================
PULLQUOTE — premium design accent
============================================================ */
.jet-pq {
margin: var(--jet-s-48) 0;
padding: var(--jet-s-40) var(--jet-s-32);
background: linear-gradient(135deg, var(--jet-primary-50) 0%, #fff 100%);
border-left: 4px solid var(--jet-primary);
border-radius: 0 var(--jet-r-lg) var(--jet-r-lg) 0;
position: relative;
}
.jet-pq__mark {
display: block;
color: var(--jet-primary);
font-family: Georgia, serif;
font-size: 80px;
line-height: 0.5;
font-weight: 800;
margin-bottom: var(--jet-s-16);
}
.jet-pq .jet-pq__text {
border: 0;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
font-size: var(--jet-fs-22);
font-weight: 600;
color: var(--jet-ink);
line-height: 1.45;
margin: 0 0 var(--jet-s-16);
font-style: italic;
}
.jet-pq__attr {
font-size: var(--jet-fs-14);
color: var(--jet-muted);
font-style: normal;
font-weight: 600;
}
/* ============================================================
TL;DR — premium card under hero
============================================================ */
.jet-tldr {
background: linear-gradient(135deg, var(--jet-primary-50) 0%, #fff 100%);
border: 1px solid var(--jet-primary-100);
border-radius: var(--jet-r-lg);
padding: var(--jet-s-24) var(--jet-s-32);
margin: 0 0 var(--jet-s-40);
position: relative;
}
.jet-tldr__inner { position: relative; }
.jet-tldr__label {
display: inline-flex; align-items: center;
gap: 6px;
padding: 4px 12px;
background: var(--jet-primary);
color: #fff;
font-size: var(--jet-fs-12);
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
border-radius: var(--jet-r-pill);
margin-bottom: var(--jet-s-16);
}
.jet-tldr__bullets {
list-style: none; padding: 0; margin: 0;
display: grid; gap: var(--jet-s-12);
}
.jet-tldr__bullets li {
font-size: var(--jet-fs-16);
color: var(--jet-ink);
line-height: 1.5;
padding-left: 28px;
position: relative;
}
.jet-tldr__bullets li::before {
content: '';
position: absolute;
left: 0; top: 6px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--jet-primary);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.jet-tldr__bullets li strong { color: var(--jet-ink); font-weight: 700; }
/* ============================================================
SHARE ROW
============================================================ */
.jet-share-row {
display: flex; align-items: center; flex-wrap: wrap;
gap: var(--jet-s-12);
margin: var(--jet-s-40) 0 0;
padding: var(--jet-s-20) 0;
border-top: 1px solid var(--jet-line);
border-bottom: 1px solid var(--jet-line);
}
.jet-share-row__label {
font-size: var(--jet-fs-13);
font-weight: 700;
color: var(--jet-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-right: 4px;
}
.jet-share-row__btn {
display: inline-flex; align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-pill);
color: var(--jet-text) !important;
font-size: var(--jet-fs-13);
font-weight: 600;
text-decoration: none !important;
cursor: pointer;
transition: all var(--jet-dur);
}
.jet-share-row__btn:hover {
background: var(--jet-primary-50);
border-color: var(--jet-primary);
color: var(--jet-primary) !important;
transform: translateY(-1px);
}
/* ============================================================
AUTHOR full card (below article)
============================================================ */
.jet-author {
max-width: var(--jet-wide);
margin: var(--jet-s-64) auto;
padding: 0 var(--jet-bleed);
}
.jet-author__inner {
background: linear-gradient(135deg, var(--jet-primary-dark) 0%, var(--jet-primary) 100%);
color: #fff;
border-radius: var(--jet-r-xl);
padding: var(--jet-s-40) var(--jet-s-48);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--jet-s-32);
align-items: center;
box-shadow: var(--jet-sh-lg);
position: relative;
overflow: hidden;
}
.jet-author__inner::after {
content: '';
position: absolute;
top: -60%; right: -10%;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.jet-author__logo {
width: 96px; height: 96px;
border-radius: 50%;
background: rgba(255,255,255,0.14);
border: 2px solid rgba(255,255,255,0.30);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.jet-author__logo-text {
font-weight: 800;
font-size: var(--jet-fs-22);
letter-spacing: 0.06em;
color: #fff;
}
.jet-author__text { position: relative; z-index: 1; }
.jet-author__eyebrow {
display: inline-block;
font-size: var(--jet-fs-12);
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
margin-bottom: 6px;
}
.jet-author__title {
font-size: var(--jet-fs-26);
font-weight: 800;
color: #fff !important;
margin: 0 0 var(--jet-s-12);
line-height: 1.2;
}
.jet-author__bio {
color: rgba(255,255,255,0.92);
font-size: var(--jet-fs-15);
line-height: 1.6;
margin: 0 0 var(--jet-s-20);
max-width: 640px;
}
.jet-author__actions {
display: flex; gap: var(--jet-s-12); flex-wrap: wrap;
}
.jet-author__actions .jet-btn--ghost {
background: transparent;
color: #fff !important;
border-color: rgba(255,255,255,0.40);
border-width: 1.5px;
}
.jet-author__actions .jet-btn--ghost:hover {
background: rgba(255,255,255,0.12);
border-color: #fff;
}
@media (max-width: 680px) {
.jet-author__inner {
grid-template-columns: 1fr;
text-align: center;
padding: var(--jet-s-32) var(--jet-s-24);
}
.jet-author__logo { margin: 0 auto; }
.jet-author__actions { justify-content: center; }
}
/* ============================================================
RELATED — visual cards (single-post)
============================================================ */
.jet-related {
background: var(--jet-soft);
padding: var(--jet-s-64) 0;
}
.jet-related__inner {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
}
.jet-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--jet-s-24);
}
.jet-related__card {
display: flex; flex-direction: column;
background: #fff;
border-radius: var(--jet-r-lg);
overflow: hidden;
text-decoration: none !important;
color: var(--jet-ink) !important;
border: 1px solid var(--jet-line);
box-shadow: var(--jet-sh-sm);
transition: transform var(--jet-dur), box-shadow var(--jet-dur), border-color var(--jet-dur);
}
.jet-related__card:hover {
transform: translateY(-4px);
box-shadow: var(--jet-sh-lg);
border-color: var(--jet-primary);
}
.jet-related__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--jet-primary-50);
}
.jet-related__media img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .4s var(--jet-ease);
}
.jet-related__card:hover .jet-related__media img { transform: scale(1.06); }
.jet-related__body {
padding: var(--jet-s-20) var(--jet-s-24) var(--jet-s-24);
flex: 1;
display: flex; flex-direction: column;
gap: 6px;
}
.jet-related__eyebrow {
font-size: var(--jet-fs-12);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--jet-primary);
}
.jet-related__title {
font-size: var(--jet-fs-18);
font-weight: 800;
color: var(--jet-ink);
margin: 0;
line-height: 1.3;
}
.jet-related__cta {
display: inline-flex; align-items: center;
gap: 6px;
font-size: var(--jet-fs-13);
font-weight: 700;
color: var(--jet-primary);
margin-top: var(--jet-s-12);
}
.jet-related__cta svg { transition: transform var(--jet-dur); }
.jet-related__card:hover .jet-related__cta svg { transform: translateX(3px); }
@media (max-width: 1024px) { .jet-related__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .jet-related__grid { grid-template-columns: 1fr; } }
/* ============================================================
COMPARISON TABLE — semanttinen vertailu painotekniikoille
============================================================ */
.jet-cmp-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
overflow: hidden;
font-size: var(--jet-fs-14);
margin: 0 0 var(--jet-s-16);
}
.jet-cmp-table thead {
background: linear-gradient(135deg, var(--jet-primary), var(--jet-secondary));
}
.jet-cmp-table th {
color: #fff;
font-weight: 700;
padding: 12px 14px;
text-align: left;
font-size: var(--jet-fs-13);
letter-spacing: 0.02em;
}
.jet-cmp-table td {
padding: 12px 14px;
border-top: 1px solid var(--jet-line);
color: var(--jet-text);
line-height: 1.5;
}
.jet-cmp-table tbody tr:nth-child(even) { background: var(--jet-soft); }
.jet-cmp-table tbody tr:hover { background: var(--jet-primary-50); }
.jet-cmp-table td:first-child {
font-weight: 700;
color: var(--jet-ink);
}
/* ============================================================
FAQ SECTION — accordion details/summary (page-content)
============================================================ */
.jet-section--faq { background: var(--jet-soft); }
.jet-faq {
max-width: 860px;
margin: 0 auto;
display: grid;
gap: var(--jet-s-12);
}
.jet-faq__item {
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
overflow: hidden;
transition: border-color var(--jet-dur), box-shadow var(--jet-dur);
}
.jet-faq__item[open],
.jet-faq__item:hover {
border-color: var(--jet-primary-100);
box-shadow: var(--jet-sh-sm);
}
.jet-faq__q {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--jet-s-16);
align-items: center;
padding: var(--jet-s-20) var(--jet-s-24);
cursor: pointer;
list-style: none;
user-select: none;
}
.jet-faq__q::-webkit-details-marker { display: none; }
.jet-faq__q-text {
font-size: var(--jet-fs-18);
font-weight: 800;
color: var(--jet-ink);
line-height: 1.35;
letter-spacing: -0.005em;
}
.jet-faq__q-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--jet-primary-50);
color: var(--jet-primary);
transition: transform var(--jet-dur), background var(--jet-dur);
flex-shrink: 0;
}
.jet-faq__item[open] .jet-faq__q-icon {
background: var(--jet-primary);
color: #fff;
transform: rotate(180deg);
}
.jet-faq__a {
padding: 0 var(--jet-s-24) var(--jet-s-24);
color: var(--jet-text);
font-size: var(--jet-fs-16);
line-height: 1.7;
}
.jet-faq__a p { margin: 0 0 var(--jet-s-12); }
.jet-faq__a p:last-child { margin-bottom: 0; }
.jet-faq__a a { color: var(--jet-primary); text-decoration: underline; text-underline-offset: 3px; }
.jet-faq__a strong { color: var(--jet-ink); font-weight: 700; }
/* ============================================================
SITE FOOTER — premium 4-col Jettaset footer
============================================================ */
.jet-site-footer {
background: linear-gradient(180deg, #0a0e15 0%, #0e1825 100%);
color: #cfd6e2;
font-size: var(--jet-fs-14);
}
.jet-site-footer__main { padding: var(--jet-s-80) 0 var(--jet-s-64); position: relative; }
.jet-site-footer__main::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--jet-primary) 0%, var(--jet-secondary) 100%);
}
.jet-site-footer__inner {
max-width: var(--jet-wide);
margin: 0 auto;
padding: 0 var(--jet-bleed);
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--jet-s-48);
}
.jet-site-footer__col { display: flex; flex-direction: column; gap: var(--jet-s-16); }
.jet-site-footer__logo {
display: inline-flex; flex-direction: column;
gap: 2px;
text-decoration: none !important;
color: #fff !important;
font-family: 'Arial Black', Arial, sans-serif;
letter-spacing: 0.05em;
}
.jet-site-footer__logo-text {
font-size: 28px;
font-weight: 900;
color: #fff;
letter-spacing: 0.12em;
}
.jet-site-footer__logo-tag {
font-size: var(--jet-fs-12);
font-weight: 700;
color: rgba(255,255,255,0.55);
letter-spacing: 0.22em;
}
.jet-site-footer__about {
color: rgba(255,255,255,0.72);
font-size: var(--jet-fs-14);
line-height: 1.65;
margin: var(--jet-s-8) 0 var(--jet-s-16);
max-width: 380px;
}
.jet-site-footer__badges {
list-style: none; padding: 0; margin: 0;
display: flex; gap: var(--jet-s-16);
flex-wrap: wrap;
}
.jet-site-footer__badges li {
display: flex; flex-direction: column;
gap: 2px;
padding: 10px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--jet-r-md);
font-size: var(--jet-fs-12);
color: rgba(255,255,255,0.7);
letter-spacing: 0.04em;
}
.jet-site-footer__badges li strong {
display: block;
font-size: var(--jet-fs-16);
font-weight: 800;
color: var(--jet-secondary);
letter-spacing: 0.01em;
}
.jet-site-footer__heading {
font-size: var(--jet-fs-13);
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff !important;
margin: 0 0 var(--jet-s-12);
}
.jet-site-footer__links {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 10px;
}
.jet-site-footer__links a {
color: rgba(255,255,255,0.72) !important;
text-decoration: none !important;
font-size: var(--jet-fs-14);
transition: color var(--jet-dur), padding var(--jet-dur);
display: inline-block;
}
.jet-site-footer__links a:hover {
color: #fff !important;
padding-left: 4px;
}
.jet-site-footer__address {
font-style: normal;
display: flex; flex-direction: column;
gap: var(--jet-s-12);
margin: 0 0 var(--jet-s-16);
}
.jet-site-footer__address-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
}
.jet-site-footer__address-row > svg {
color: var(--jet-secondary);
margin-top: 3px;
}
.jet-site-footer__address-row strong {
display: block;
color: #fff;
font-weight: 600;
font-size: var(--jet-fs-14);
}
.jet-site-footer__address-row span {
display: block;
color: rgba(255,255,255,0.65);
font-size: var(--jet-fs-13);
}
.jet-site-footer__address-row a {
color: var(--jet-secondary) !important;
text-decoration: none !important;
font-size: var(--jet-fs-14);
font-weight: 600;
}
.jet-site-footer__address-row a:hover { color: #fff !important; text-decoration: underline !important; }
.jet-site-footer__cta {
background: var(--jet-primary) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(35,89,162,0.35);
}
.jet-site-footer__cta:hover {
background: var(--jet-secondary) !important;
color: #fff !important;
}
.jet-site-footer__bottom {
background: rgba(0,0,0,0.35);
border-top: 1px solid rgba(255,255,255,0.07);
padding: var(--jet-s-20) 0;
}
.jet-site-footer__bottom-inner {
display: grid;
grid-template-columns: 1fr auto auto;
gap: var(--jet-s-24);
align-items: center;
}
.jet-site-footer__copyright {
color: rgba(255,255,255,0.55);
font-size: var(--jet-fs-13);
letter-spacing: 0.01em;
}
.jet-site-footer__bottom-links {
list-style: none; padding: 0; margin: 0;
display: flex; gap: var(--jet-s-20);
}
.jet-site-footer__bottom-links a {
color: rgba(255,255,255,0.65) !important;
text-decoration: none !important;
font-size: var(--jet-fs-13);
transition: color var(--jet-dur);
}
.jet-site-footer__bottom-links a:hover { color: #fff !important; }
.jet-site-footer__social {
display: flex; gap: 8px;
}
.jet-site-footer__social a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.72) !important;
transition: background var(--jet-dur), color var(--jet-dur);
}
.jet-site-footer__social a:hover {
background: var(--jet-primary);
color: #fff !important;
}
@media (max-width: 1024px) {
.jet-site-footer__inner {
grid-template-columns: 1fr 1fr;
gap: var(--jet-s-32);
}
.jet-site-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.jet-site-footer__inner { grid-template-columns: 1fr; }
.jet-site-footer__bottom-inner {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
gap: var(--jet-s-12);
}
}
/* Hide Astra default footer when our jet-site-footer is rendered */
body:has(.jet-site-footer) #colophon,
body:has(.jet-site-footer) .site-footer {
display: none !important;
}
/* ============================================================
STICKY HEADER FIX — Elementor eHF sticky-header on fixed +
transparent oletuksena. Solid white bg + shadow + dark nav-text
jotta sisältö ei näy läpi headerin.
============================================================ */
section.elementor-section.header_sticky,
section.elementor-top-section.header_sticky {
background: #fff !important;
box-shadow: 0 2px 14px rgba(10,14,21,0.06) !important;
transition: box-shadow .2s ease;
}
/* Force nav-link colors dark on white header */
section.elementor-section.header_sticky .elementor-nav-menu a,
section.elementor-section.header_sticky .elementor-icon-list-text,
section.elementor-section.header_sticky .elementor-heading-title,
section.elementor-section.header_sticky a:not(.elementor-button) {
color: var(--jet-ink, #0a0e15) !important;
}
section.elementor-section.header_sticky .elementor-nav-menu a:hover,
section.elementor-section.header_sticky .elementor-nav-menu li.current-menu-item > a {
color: var(--jet-primary, #2359a2) !important;
}
/* Logo Jettaset white-on-transparent: invert blue on white sticky header */
section.elementor-section.header_sticky img[src*="valkoinen"] {
filter: invert(33%) sepia(56%) saturate(1100%) hue-rotate(195deg) brightness(85%) contrast(92%);
}
/* ============================================================
ELEMENTOR FOOTER-TEMPLATE DUPE — hide on jet-rendered pages
eHF builder injects .ekit-template-content-footer which is a
duplicate "Ota yhteyttä" CTA. Our jet-footer-cta replaces it.
============================================================ */
body:has(.jet-footer-cta) .ekit-template-content-footer { display: none !important; }
/* Vanha eHF-footer piiloon MYÖS ei-jet-sivuilla (esim. tietosuojaseloste):
oma jet-site-footer renderöityy wp_footer-hookilla kaikilla sivuilla. */
body:has(.jet-site-footer) .ekit-template-content-footer { display: none !important; }
/* Fallback for browsers without :has — when jet-main exists, hide it */
.jet-main ~ .ekit-template-content-footer,
.hfeed.site > .ekit-template-content-footer:not(:only-child) {
/* keep for explicit body:has fallback above */
}
/* ============================================================
ASTRA SITE-CONTENT — ensure no extra padding box for jet-pages
============================================================ */
body:has(.jet-main) .ast-container { padding: 0; }
body:has(.jet-main.jet-page) #content { padding-top: 0; }
/* ============================================================
HEADER FIXES (asiakaspalaute 30.6)
1) Ylätilan logo oli valkoinen valkoisella taustalla -> tumma logo.
2) Menun "Ota yhteyttä" -painike matchaa jet-btn-tyyliin.
============================================================ */
/* Tumma logo myös ylätilassa (valkoinen #1554 -> Jettaset-Oy-logo #1626).
Teema värjää logon filterillä lavenderiksi -> nollataan filter. */
header img.wp-image-1554 {
content: url("https://jettaset.fi/wp-content/uploads/2023/04/Jettaset-Oy-logo.png") !important;
filter: none !important;
}
/* Header-CTA nappi samannäköiseksi kuin jet-btn--primary (pill + nuoli) */
header .elementor-button.elementor-button-link {
background: var(--jet-primary) !important;
color: #fff !important;
border-radius: var(--jet-r-pill) !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
padding: 13px 26px !important;
box-shadow: 0 4px 14px rgba(35,89,162,0.30);
transition: transform var(--jet-dur), box-shadow var(--jet-dur), background var(--jet-dur);
border: none !important;
}
header .elementor-button.elementor-button-link:hover {
background: var(--jet-primary-dark) !important;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(35,89,162,0.42);
}
header .elementor-button.elementor-button-link .elementor-button-content-wrapper {
display: inline-flex; align-items: center; gap: 8px;
}
header .elementor-button.elementor-button-link .elementor-button-text::after {
content: "\2192"; /* → */
font-weight: 700;
font-size: 1.05em;
line-height: 1;
margin-left: 9px;
}
/* ============================================================
PRODUCT CARDS — verkkokauppatyyliset tuotekortit (6/sivu)
============================================================ */
.jet-pc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--jet-s-24);
}
.jet-pc {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--jet-line);
border-radius: var(--jet-r-lg);
overflow: hidden;
box-shadow: var(--jet-sh-sm);
transition: transform var(--jet-dur) var(--jet-ease), box-shadow var(--jet-dur) var(--jet-ease);
}
.jet-pc:hover {
transform: translateY(-3px);
box-shadow: var(--jet-sh-lg);
}
.jet-pc__media {
position: relative;
aspect-ratio: 4 / 3;
background: var(--jet-soft);
overflow: hidden;
}
.jet-pc__media img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.4s var(--jet-ease);
}
.jet-pc:hover .jet-pc__media img { transform: scale(1.04); }
.jet-pc__badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: var(--jet-primary);
color: #fff;
font-size: var(--jet-fs-12);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--jet-r-pill);
box-shadow: 0 2px 8px rgba(10,14,21,0.18);
}
.jet-pc__body {
display: flex; flex-direction: column;
padding: var(--jet-s-20) var(--jet-s-20) 0;
flex: 1 1 auto;
}
.jet-pc__title {
font-size: var(--jet-fs-18);
font-weight: 800;
color: var(--jet-ink);
margin: 0 0 6px;
line-height: 1.3;
}
.jet-pc__desc {
font-size: var(--jet-fs-14);
color: var(--jet-muted);
line-height: 1.5;
margin: 0 0 var(--jet-s-12);
}
.jet-pc__specs {
list-style: none;
padding: var(--jet-s-12) 0 0;
margin: auto 0 0;
border-top: 1px solid var(--jet-line);
display: grid; gap: 6px;
}
.jet-pc__specs li {
position: relative;
padding-left: 22px;
font-size: var(--jet-fs-13);
color: var(--jet-text);
line-height: 1.4;
}
.jet-pc__specs li::before {
content: '';
position: absolute; left: 0; top: 2px;
width: 15px; height: 15px;
border-radius: 50%;
background: var(--jet-primary-50);
background-image: url("data:image/svg+xml;utf8,");
background-size: 9px; background-position: center; background-repeat: no-repeat;
}
.jet-pc__footer { padding: var(--jet-s-16) var(--jet-s-20) var(--jet-s-20); }
.jet-pc__cta {
width: 100%;
justify-content: center;
padding: 12px 18px;
font-size: var(--jet-fs-14);
}
@media (max-width: 1024px) {
.jet-pc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.jet-pc-grid { grid-template-columns: 1fr; gap: var(--jet-s-16); }
}
/* ============================================================
PERÄKKÄISET SECTIONIT — poista tupla-padding (esim. tuotteet-
hubin kaksi services_visual-gridiä jättivät ~200px aukon)
============================================================ */
.jet-section--services-visual + .jet-section--services-visual,
.jet-section--services + .jet-section--services,
.jet-section--two-col + .jet-section--two-col { padding-top: 0; }
/* ============================================================
Ari-palaute 2026-07-08 — single-post-hienosäädöt
============================================================ */
/* Tekijät-boksi: tummansininen boksi koko leveydelle, ei vaaleansinistä taustaa */
.jet-author { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* Sitaattiboksi kompaktimmaksi */
.jet-pq { padding: var(--jet-s-24) var(--jet-s-32); margin: var(--jet-s-32) 0; }
.jet-pq__mark { font-size: 44px; margin-bottom: var(--jet-s-8); }
.jet-pq .jet-pq__text { font-size: var(--jet-fs-18); line-height: 1.4; margin-bottom: var(--jet-s-12); }
@media (max-width: 680px) {
.jet-pq { padding: var(--jet-s-24) var(--jet-s-20); }
.jet-article-body blockquote {
margin: var(--jet-s-24) 0;
padding: 0 0 0 var(--jet-s-16);
width: auto;
max-width: 100%;
font-size: var(--jet-fs-18);
}
.jet-article-body blockquote > :last-child { margin-bottom: 0; }
}
/* Väli-CTA (mid-CTA) käyttää etusivun jet-cta-banner-tyyliä (ei ikonia) */
.jet-mid-cta { margin: var(--jet-s-40) 0; background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; }
.jet-mid-cta::after { display: none !important; }
.jet-article-body .jet-cta-banner__title { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 8px; }
.jet-article-body .jet-cta-banner__title::before { display: none; }
.jet-article-body .jet-cta-banner__lead { margin: 0; max-width: 560px; }
.jet-article-body .jet-cta-banner__text { max-width: none; }
.jet-article-body .jet-cta-banner .jet-btn { text-decoration: none !important; }
/* Inline-TOC bodyssä (näkyy vain stack-näkymässä) */
.jet-toc-inline { display: none; margin: 0 0 var(--jet-s-32); background: #fff; border: 1px solid var(--jet-line); border-radius: var(--jet-r-lg); box-shadow: var(--jet-sh-sm); overflow: hidden; }
.jet-toc-inline > summary { display: flex; align-items: center; gap: 8px; padding: var(--jet-s-16) var(--jet-s-20); cursor: pointer; list-style: none; font-size: var(--jet-fs-12); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--jet-primary); }
.jet-toc-inline > summary::-webkit-details-marker { display: none; }
.jet-toc-inline__chev { margin-left: auto; transition: transform var(--jet-dur); }
.jet-toc-inline[open] .jet-toc-inline__chev { transform: rotate(180deg); }
.jet-toc-inline .jet-toc__list { padding: 0 var(--jet-s-16) var(--jet-s-16); }
/* Stack-näkymä (mobiili/tabletti, max-width 1024px): sticky side-CTA piiloon,
sidebar-TOC piiloon, inline-TOC bodyyn näkyviin */
@media (max-width: 1024px) {
.jet-side-cta { display: none !important; }
.jet-article-shell__side .jet-toc { display: none !important; }
.jet-toc-inline { display: block; }
}
/* ============================================================
FOOTER-LOMAKKEEN KONTRASTI (asiakaspalaute 21.7):
GF-lomakkeen aputekstit, valintalabelit, linkit, pakollisuus-
merkit ja tiedostonappulat eivät erottuneet sinisestä taustasta.
============================================================ */
.jet-footer-cta__form-wrap .gfield_label,
.jet-footer-cta__form-wrap .gform-field-label,
.jet-footer-cta__form-wrap .gfield_checkbox label,
.jet-footer-cta__form-wrap .gfield_radio label,
.jet-footer-cta__form-wrap .ginput_container_consent label,
.jet-footer-cta__form-wrap .gfield_consent_description,
.jet-footer-cta__form-wrap .gfield_description,
.jet-footer-cta__form-wrap .gform_fileupload_rules,
.jet-footer-cta__form-wrap .ginput_container_fileupload label,
.jet-footer-cta__form-wrap legend {
color: #fff !important;
}
.jet-footer-cta__form-wrap .gfield_description,
.jet-footer-cta__form-wrap .gfield_consent_description,
.jet-footer-cta__form-wrap .gform_fileupload_rules {
color: rgba(255,255,255,0.85) !important;
font-size: var(--jet-fs-13);
}
.jet-footer-cta__form-wrap a {
color: #fff !important;
text-decoration: underline !important;
text-underline-offset: 2px;
font-weight: 600;
}
.jet-footer-cta__form-wrap .gfield_required,
.jet-footer-cta__form-wrap .gfield_required_asterisk {
color: #FFD24D !important;
}
.jet-footer-cta__form-wrap input[type="checkbox"],
.jet-footer-cta__form-wrap input[type="radio"] {
accent-color: #fff;
width: 17px; height: 17px;
flex: 0 0 17px;
}
.jet-footer-cta__form-wrap input[type="file"] {
color: rgba(255,255,255,0.95);
font-size: var(--jet-fs-13);
width: 100%;
}
.jet-footer-cta__form-wrap input[type="file"]::file-selector-button {
background: #fff;
color: var(--jet-primary);
border: 0;
border-radius: var(--jet-r-pill);
padding: 9px 16px;
font-weight: 700;
font-family: inherit;
font-size: var(--jet-fs-13);
margin-right: 12px;
cursor: pointer;
}
.jet-footer-cta__form-wrap input[type="file"]::file-selector-button:hover {
background: var(--jet-soft);
}
.jet-footer-cta__form-wrap .gfield_validation_message,
.jet-footer-cta__form-wrap .validation_message {
color: #fff !important;
background: rgba(0,0,0,0.22);
border: none;
border-radius: var(--jet-r-sm);
padding: 8px 12px;
}
/* Lähetä-nappi täysleveäksi pilleriksi (GF Orbital-teema ohitti width:100%) */
.jet-footer-cta__form-wrap .gform_footer input.gform_button,
.jet-footer-cta__form-wrap .gform_footer input[type="submit"],
.jet-footer-cta__form-wrap .gform_footer button[type="submit"] {
width: 100% !important;
display: block !important;
background: #fff !important;
color: var(--jet-primary) !important;
border: 0 !important;
border-radius: var(--jet-r-pill) !important;
padding: 15px 28px !important;
font-weight: 700 !important;
font-size: var(--jet-fs-16) !important;
font-family: inherit !important;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
transition: background var(--jet-dur);
}
.jet-footer-cta__form-wrap .gform_footer { margin-top: var(--jet-s-8) !important; }
/* ============================================================
ASIAKASPALAUTE 21.7
1) Referenssit case-tyyliin: ei sitaattimerkkejä eikä kursiivia
(oikeita asiakassitaatteja ei ole, tekstit ovat Jettasetin
omia toimituskuvauksia).
2) Asiakkaat-gallerian hover-zoom pois: kuvat eivät ole
klikattavia, joten zoom-vihje oli harhaanjohtava.
3) Pudotusvalikot leveiksi 2-palstaisiksi laatikoiksi.
============================================================ */
.jet-quote-card__mark,
.jet-testimonial__mark { display: none !important; }
.jet-quote-card__quote,
.jet-testimonial__quote { font-style: normal; }
.jet-quote-card__quote::before,
.jet-quote-card__quote::after,
.jet-testimonial__quote::before,
.jet-testimonial__quote::after { content: none !important; }
.jet-customer-gallery__item { cursor: default; }
.jet-customer-gallery__item:hover {
transform: none;
box-shadow: var(--jet-sh-sm);
}
.jet-customer-gallery__item:hover img { transform: none; }
@media (min-width: 1025px) {
.elementskit-navbar-nav > li > ul.elementskit-dropdown,
.elementskit-navbar-nav > li > .elementskit-dropdown.elementskit-submenu-panel {
min-width: 540px !important;
width: 540px !important;
padding: 12px;
border-radius: 12px;
box-shadow: 0 14px 44px rgba(10,14,21,0.16);
border: 1px solid var(--jet-line, #e5e8ed);
}
.elementskit-navbar-nav > li:hover > ul.elementskit-dropdown,
.elementskit-navbar-nav > li > ul.elementskit-dropdown:hover {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 2px 12px;
}
.elementskit-navbar-nav > li > ul.elementskit-dropdown > li > a {
border-radius: 8px;
padding-top: 9px;
padding-bottom: 9px;
}
}
/* Footerin osoitelohkon linkit (esim. tilaukset@jettaset.fi) olivat
teeman sinisellä tummalla pohjalla -> vaaleiksi. */
.jet-site-footer__address a,
.jet-site-footer .jet-site-footer__address-row a {
color: rgba(255,255,255,0.92) !important;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255,255,255,0.35);
}
.jet-site-footer__address a:hover,
.jet-site-footer .jet-site-footer__address-row a:hover {
color: #ffffff !important;
text-decoration-color: #ffffff;
}
/* ============================================================
SERVICE CARD — staattinen variantti (ei linkkia, 16.9.2026)
============================================================ */
.jet-service-card--static { cursor: default; }
.jet-service-card--static:hover {
border-color: var(--jet-line);
transform: none;
box-shadow: none;
}
.jet-service-card--static:hover::before { transform: scaleX(0); }
/* Mobiilivalikon näkyvät ja näppäimistöllä hahmotettavat ohjaimet. */
@media (max-width: 1024px) {
.elementskit-menu-hamburger.elementskit-menu-toggler {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
border: 1px solid #244f87 !important;
border-radius: 8px !important;
background: #fff !important;
color: #244f87 !important;
}
.elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
display: block !important;
width: 22px !important;
height: 2px !important;
margin: 0 !important;
border: 0 !important;
background: #244f87 !important;
}
.elementskit-menu-container .elementskit-menu-close {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px !important;
min-height: 44px !important;
border: 1px solid #244f87 !important;
border-radius: 8px !important;
background: #fff !important;
color: #244f87 !important;
font-size: 24px !important;
line-height: 1 !important;
}
.elementskit-menu-hamburger:focus-visible,
.elementskit-menu-container .elementskit-menu-close:focus-visible,
.elementskit-menu-container .elementskit-submenu-indicator:focus-visible {
outline: 3px solid #244f87 !important;
outline-offset: 3px !important;
}
}
/* Gutenberg realization of the measured production Elementor layout. */
.jet-gb-page { background: #fff; color: #040303; font-family: Inter, sans-serif; font-size: 16px; }
.jet-gb-page *, .jet-gb-page *::before, .jet-gb-page *::after { box-sizing: border-box; }
.jet-gb-page .wp-block-group > * { max-width: none; }
.jet-gb-page .wp-block-group, .jet-gb-page .wp-block-image, .jet-gb-page .wp-block-buttons { margin-block-start: 0; margin-block-end: 0; }
.jet-gb-page h1, .jet-gb-page h2, .jet-gb-page h3, .jet-gb-page h4 { font-family: 'Fjalla One', sans-serif; font-weight: 400; color: #040303; line-height: 1.25; margin: 0 0 22px; }
.jet-gb-page h1 { font-size: clamp(38px, 3.35vw, 48px); }
.jet-gb-page h2 { font-size: clamp(30px, 2.5vw, 38px); }
.jet-gb-page h3 { font-size: clamp(22px, 1.75vw, 27px); }
.jet-gb-page p, .jet-gb-page li { font-family: Inter, sans-serif; font-size: 16px; line-height: 1.72; color: #040303; }
.jet-gb-page p { margin: 0 0 18px; max-width: 710px; }
.jet-gb-page a { color: #2359a2; }
.jet-gb-page .wp-block-button__link { display: inline-block; min-height: 46px; padding: 13px 24px; background: #2359a2; color: #fff; border: 0; border-radius: 0; font: 500 15px/1.35 Inter, sans-serif; text-decoration: none; text-align: center; }
.jet-gb-page .wp-block-button__link:hover, .jet-gb-page .wp-block-button__link:focus-visible { background: #1b457d; color: #fff; }
.jet-gb-page .wp-block-button__link:focus-visible, .jet-gb-page summary:focus-visible { outline: 3px solid #2359a2; outline-offset: 3px; }
.jet-gb-page .wp-block-buttons { margin-top: 22px; }
.jet-gb-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 600px; width: 100%; overflow: hidden; text-align: center; }
.jet-gb-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.jet-gb-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jet-gb-hero::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.62); pointer-events: none; }
.jet-gb-hero-content { position: relative; z-index: 1; width: min(860px, calc(100% - 40px)); margin: 0 auto; padding: 80px 0; }
.jet-gb-hero-content h1 { margin-bottom: 18px; }
.jet-gb-hero-content p { max-width: 780px; margin: 0 auto 18px; }
.jet-gb-hero-content .wp-block-buttons { justify-content: center; }
.jet-gb-home .jet-gb-hero { min-height: 900px; }
.jet-gb-home .jet-gb-hero::after { background: rgba(35,89,162,.55); }
.jet-gb-home .jet-gb-hero-content h1 { color: #fff; font-size: clamp(48px, 6vw, 86px); max-width: 950px; margin: auto; }
.jet-gb-section { max-width: 1280px; margin: 0 auto; padding: 60px 24px; }
.jet-gb-centered { text-align: center; }
.jet-gb-centered > p, .jet-gb-centered > .jet-gb-row { margin-left: auto; margin-right: auto; }
.jet-gb-centered .wp-block-buttons { justify-content: center; }
.jet-gb-section-1 { min-height: 490px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.jet-gb-section-2 { min-height: 524px; }
.jet-gb-section-2 h2 { text-align: left; }
.jet-gb-row { display: grid; align-items: center; gap: 34px; width: 100%; }
.jet-gb-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jet-gb-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jet-gb-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jet-gb-row > .jet-gb-col { min-width: 0; }
.jet-gb-col > .wp-block-image { margin: 0; }
.jet-gb-col > .wp-block-image img { width: 100%; height: auto; object-fit: cover; display: block; }
.jet-gb-section-2 .jet-gb-row-3 { align-items: stretch; margin-top: 38px; }
.jet-gb-section-2 .jet-gb-row-3 > .jet-gb-col { background: #f7f9fc; padding: 32px; }
.jet-gb-step-number { color: #2359a2 !important; font-size: 44px !important; margin-bottom: 8px !important; }
.jet-gb-section-2 .jet-gb-row-3 h3:not(.jet-gb-step-number) { color: #2359a2; }
.jet-gb-section-3, .jet-gb-section-5, .jet-gb-section-6, .jet-gb-section-8 { min-height: 600px; display: flex; flex-direction: column; justify-content: center; }
.jet-gb-section-3 > .jet-gb-row, .jet-gb-section-5 > .jet-gb-row, .jet-gb-section-6 > .jet-gb-row, .jet-gb-section-8 > .jet-gb-row { align-items: center; }
.jet-gb-section-3 .jet-gb-col > .wp-block-image img, .jet-gb-section-5 .jet-gb-col > .wp-block-image img, .jet-gb-section-6 .jet-gb-col > .wp-block-image img, .jet-gb-section-8 .jet-gb-col > .wp-block-image img { max-height: 560px; }
.jet-gb-section-5 .jet-gb-row > .jet-gb-col:first-child { order: 0; }
.jet-gb-section-5 .jet-gb-row > .jet-gb-col:last-child { order: 1; }
.jet-gb-section-9 .jet-gb-row-4 > .jet-gb-col, .jet-gb-section-10 .jet-gb-row-4 > .jet-gb-col { background: #f7f9fc; padding: 28px; align-self: stretch; }
.jet-gb-section-9 .jet-gb-row-4 h3, .jet-gb-section-10 .jet-gb-row-4 h3 { color: #2359a2; font-size: 22px; }
.jet-gb-blue-cta { max-width: none; width: 100%; background: #2359a2; color: #fff; text-align: center; padding: 75px max(24px, calc((100vw - 1280px)/2)); min-height: 359px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.jet-gb-blue-cta h2, .jet-gb-blue-cta p { color: #fff; }
.jet-gb-blue-cta p { text-align: center; }
.jet-gb-blue-cta .wp-block-buttons { justify-content: center; }
.jet-gb-blue-cta .wp-block-button__link { background: #fff; color: #2359a2; }
.jet-gb-blue-cta .wp-block-button__link:hover, .jet-gb-blue-cta .wp-block-button__link:focus-visible { background: #e8f0f9; color: #2359a2; }
.jet-gb-photo-band { max-width: none; width: 100%; height: 600px; overflow: hidden; }
.jet-gb-photo-band .wp-block-image, .jet-gb-photo-band img { width: 100%; height: 100%; margin: 0; object-fit: cover; display: block; }
.jet-gb-image-box { background: #f7f9fc; min-height: 290px; display: flex; flex-direction: column; justify-content: flex-end; }
.jet-gb-image-box .wp-block-image { height: 220px; width: 100%; overflow: hidden; }
.jet-gb-image-box img { width: 100%; height: 100%; object-fit: cover; }
.jet-gb-image-box h3 { font-size: 20px; margin: 14px 16px; }
.jet-gb-faq > .jet-gb-row-2 { align-items: start; }
.jet-gb-faq .wp-block-details { padding: 15px 0; border-bottom: 1px solid #d9dfe7; }
.jet-gb-faq summary { cursor: pointer; font-weight: 500; color: #040303; list-style: none; padding-right: 26px; position: relative; }
.jet-gb-faq summary::after { content: '+'; position: absolute; right: 0; top: 0; font-size: 22px; line-height: 1; }
.jet-gb-faq details[open] summary::after { content: '−'; }
.jet-gb-faq .wp-block-details p { margin-top: 14px; }
.jet-gb-products { padding-top: 75px; padding-bottom: 75px; }
.jet-gb-products > h2 { margin-bottom: 12px; }
.jet-gb-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.jet-gb-product-card { background: #f7f9fc; padding: 0 0 24px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.jet-gb-product-card .wp-block-image { width: 100%; height: 300px; background: #f2f5f9; overflow: hidden; }
.jet-gb-product-card .wp-block-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jet-gb-product-card h3, .jet-gb-product-card p, .jet-gb-product-card .wp-block-list, .jet-gb-product-card .wp-block-buttons { margin-left: 24px; margin-right: 24px; }
.jet-gb-product-card h3 { margin-top: 24px; font-size: 25px; }
.jet-gb-product-card p { line-height: 1.55; }
.jet-gb-product-card .wp-block-list { padding-left: 20px; margin-bottom: 20px; }
.jet-gb-product-card .wp-block-buttons { margin-top: auto; }
.jet-gb-product-guide { margin-top: 65px; align-items: start; }
.jet-gb-product-guide .jet-gb-col { padding: 30px; background: #f7f9fc; height: 100%; }
@media (max-width: 900px) {
.jet-gb-home .jet-gb-hero { min-height: 680px; }
.jet-gb-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jet-gb-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.jet-gb-page { font-size: 15px; }
.jet-gb-page h1 { font-size: 36px; }
.jet-gb-page h2 { font-size: 29px; }
.jet-gb-page p, .jet-gb-page li { font-size: 15px; }
.jet-gb-hero { min-height: 440px; }
.jet-gb-home .jet-gb-hero { min-height: 660px; }
.jet-gb-hero-content { padding: 70px 0 45px; }
.jet-gb-section { padding: 54px 20px; min-height: 0; }
.jet-gb-row-2, .jet-gb-row-3, .jet-gb-row-4, .jet-gb-product-grid { grid-template-columns: 1fr; gap: 18px; }
.jet-gb-section-2 .jet-gb-row-3 { margin-top: 26px; }
.jet-gb-section-2 .jet-gb-row-3 > .jet-gb-col { padding: 25px; }
.jet-gb-col > .wp-block-image img { max-height: 330px; }
.jet-gb-photo-band { height: 360px; }
.jet-gb-product-card .wp-block-image { height: 260px; }
.jet-gb-blue-cta { min-height: 300px; padding: 55px 20px; }
}
/* T-shirt and hoodie product introductions use the plain, centered text style. */
.elementor.elementor-2321 .jettaset-product-selection .jettaset-product-selection__lead,
.elementor.elementor-2400 .jettaset-product-selection .jettaset-product-selection__lead {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}