/* ============================================================
Göta Dental — startsidans designsystem (JQ-modellen)
Alla mått/skalor tagna EXAKT ur JQ.Kliniks Startsida.tsx
(Tailwind-klasser → clamp()/px). Inga gissade värden.
Låst palett: beige / lavendel / blå / rosa — ingen orange.
============================================================ */
.gd-jq {
--jq-bg: #F0ECE2;
--jq-bg-lt: #F6F3EC;
--jq-lav: #E2E6F0;
--jq-ink: #15171B; /* coal */
--jq-deep: #100F0D; /* coal-deep */
--jq-cream: #F4F1EA;
--jq-line: #D5D9E2;
--jq-line-d: rgba(244,241,234,.16);
--jq-stone: #6C7079;
--jq-accent: #1E73BE;
/* Kursiv-accenter ärver rubrikfärgen — ingen färgklick (editorial, lugnt). */
--jq-rose: currentColor;
--jq-ease: cubic-bezier(.16,1,.3,1);
background: var(--jq-bg);
color: var(--jq-ink);
overflow-x: clip;
}
.gd-jq * { box-sizing: border-box; }
.gd-jq img { display: block; max-width: 100%; }
.gd-jq .jq-serif,
.gd-jq h1, .gd-jq h2, .gd-jq h3 {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400; margin: 0;
}
/* ─── Eyebrow — text-[10px] tracking-[0.34em], prickar ─── */
.jq-eyebrow {
display: flex; align-items: center; gap: 12px;
font-size: 10px; font-weight: 500; letter-spacing: .34em;
text-transform: uppercase; color: #8b6f47;
}
.jq-eyebrow.is-center { justify-content: flex-start; }
.jq-eyebrow.is-light { color: rgba(244,241,234,.88); }
.jq-eyebrow::before, .jq-eyebrow::after { content: "· · ·"; letter-spacing: 0; }
/* JQ.Klinik corduroy-texture — synliga vertikala rivlor (1px line var 5px).
Förstärkt opacity .08 så det syns även på vår ljusare beige. */
.gd-jq .jq-sec--bg,
.gd-jq .jq-sec--cream,
.gd-jq,
.jq-corduroy {
background-image: repeating-linear-gradient(90deg, rgba(94,74,46,.08) 0px, rgba(94,74,46,.08) 1px, transparent 1px, transparent 5px);
}
.gd-jq .jq-sec--lav {
background-image: repeating-linear-gradient(90deg, rgba(94,74,46,.06) 0px, rgba(94,74,46,.06) 1px, transparent 1px, transparent 5px), linear-gradient(180deg, var(--jq-lav) 0%, var(--jq-lav) 100%);
}
.gd-jq .jq-sec--ink {
background-color: var(--jq-ink);
background-image: repeating-linear-gradient(90deg, rgba(244,241,234,.05) 0px, rgba(244,241,234,.05) 1px, transparent 1px, transparent 5px);
}
/* StripReveal-kolumner kvar som VISUELL DETALJ även efter animation.
Vertikala lines som overlay på hero, scene-sticky, jq-card-bg-bilder.
Använder mix-blend-mode: overlay så det blir subtil tonal interferens. */
.gd-jq .jq-hero::after,
.gd-jq .jq-scene-sticky::after,
.gd-jq .gd-pg-vhero::after {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(90deg, rgba(244,241,234,.07) 0px, rgba(244,241,234,.07) 1px, transparent 1px, transparent 6px);
pointer-events: none;
z-index: 2;
mix-blend-mode: soft-light;
}
/* Premium typografi-features (kerning, ligatures, contextual alternates) */
.gd-jq {
font-feature-settings: "kern" on, "liga" on, "calt" on;
font-variant-ligatures: common-ligatures contextual;
}
.gd-jq h1, .gd-jq h2, .gd-jq h3,
.gd-jq .jq-head h2, .gd-jq .jq-prose h2 {
font-feature-settings: "kern" on, "liga" on, "dlig" on, "calt" on;
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}
/* Tabular + lining numerals för priser, datum, stats */
.gd-jq [data-count], .gd-jq [data-countup],
.gd-jq .jq-pricecard-amount,
.gd-jq .jq-prose-stats .n,
.gd-jq .gd-hubstat-n {
font-feature-settings: "tnum" on, "lnum" on;
font-variant-numeric: tabular-nums lining-nums;
}
/* Premium-länk-underline i prose — diagonal wipe vid hover */
.gd-jq .jq-prose a:not(.jq-btn) {
position: relative;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .4s cubic-bezier(.16,1,.3,1), color .2s ease;
}
.gd-jq .jq-prose a:not(.jq-btn):hover {
background-size: 0 1px;
background-position: 100% 100%;
}
/* ─── Reveal (data-reveal: autoAlpha0 y40 1.1s power3; stagger 0.95s/0.1)
Skopas till .gd-anim på så content är synligt by default. Animering
körs bara när reveal-JS faktiskt initialiserats; safety-timeout i
gd_anim_class() tar bort .gd-anim efter 1.5s om JS inte hunnit signalera. */
.gd-anim .gd-jq [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--jq-ease), transform 1.1s var(--jq-ease); }
.gd-anim .gd-jq [data-reveal].is-in { opacity: 1; transform: none; }
.gd-anim .gd-jq [data-reveal-stagger] > * { opacity: 0; transform: translateY(34px); transition: opacity .95s var(--jq-ease), transform .95s var(--jq-ease); }
.gd-anim .gd-jq [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.gd-anim .gd-jq [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .1s; }
.gd-anim .gd-jq [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .2s; }
.gd-anim .gd-jq [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .3s; }
.gd-anim .gd-jq [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .4s; }
.gd-anim .gd-jq [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
.gd-jq [data-reveal], .gd-jq [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}
.gd-strip { position: relative; }
.gd-strip canvas { position: absolute; inset: 0; }
/* ─── Layout — max-w-[1700px] px-[5vw], py-[clamp(5rem,12vw,10rem)] ─── */
.jq-wrap { max-width: 1700px; margin: 0 auto; padding: 0 5vw; }
.jq-sec { padding: clamp(5rem,12vw,10rem) 0; }
/* Sektioner växer med content (ingen forcerad 95svh som skapade tomrum
när texten var kort). 95svh behålls bara på hero, scenes och manifest —
där det är intentional cinemascope-rytm. */
.gd-jq .jq-hero,
.gd-jq .jq-scene { min-height: 95svh; }
.gd-jq > .jq-sec,
.gd-jq > .gd-section,
.gd-jq > .gd-section-full,
.gd-jq .jq-sec:not(.jq-hero):not(.jq-footer-statement) {
display: flex; flex-direction: column; justify-content: center;
padding-top: clamp(56px,6vw,112px);
padding-bottom: clamp(56px,6vw,112px);
}
.gd-jq > .gd-section-full > .gd-section { padding-top: 0; padding-bottom: 0; }
/* Karusellkort — kompaktare så behandlingssektionen ryms i 95vh. */
.jq-carousel-track .jq-card { flex: 0 0 clamp(238px,22vw,338px); }
/* Bettfel-kort — lägre så 6-kortsrutnätet kommer närmare 95vh. */
.gd-jq .jq-grid3 .jq-card { aspect-ratio: 3/2 !important; }
/* Recensionernas videokort — håll dem nere. */
.gd-jq .gd-testi-vid { aspect-ratio: 16/10; }
.jq-sec--bg { background: var(--jq-bg); }
.jq-sec--lav { background: var(--jq-lav); }
.jq-sec--ink { background: var(--jq-ink); color: var(--jq-cream); }
/* ════════ HEADER ════════ */
.jq-header { position: fixed; inset: 0 0 auto 0; z-index: 110; }
.jq-header-in { max-width: 1700px; margin: 0 auto; padding: 24px 5vw; display: flex; align-items: center; justify-content: space-between; }
.jq-header a, .jq-header button {
font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-cream); background: none; border: 0; cursor: pointer; text-decoration: none;
display: flex; align-items: center; gap: 10px; transition: color .3s ease;
}
.jq-header.is-dark a, .jq-header.is-dark button { color: var(--jq-ink); }
.jq-header-brand { font-weight: 600; letter-spacing: .34em; }
.jq-burger { display: flex; flex-direction: column; gap: 5px; }
.jq-burger span { width: 20px; height: 1px; background: currentColor; display: block; }
/* ════════ MENY-OVERLAY ════════ */
#gd-jq-menu {
position: fixed; inset: 0; z-index: 170; background: var(--jq-bg);
color: var(--jq-ink); display: flex; flex-direction: column;
opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease;
}
#gd-jq-menu.is-open { opacity: 1; visibility: visible; }
.jq-menu-top { display: flex; justify-content: space-between; align-items: center; max-width: 1700px; margin: 0 auto; width: 100%; padding: 24px 5vw; }
.jq-menu-top span { font-size: 12px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; }
.jq-menu-top button { background: none; border: 0; cursor: pointer; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--jq-ink); }
.jq-menu-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 1700px; margin: 0 auto; width: 100%; padding: 0 5vw; }
.jq-menu-nav a {
display: flex; align-items: baseline; gap: 24px;
border-top: 1px solid var(--jq-line); padding: 12px 0; text-decoration: none; color: var(--jq-ink);
}
.jq-menu-nav a:last-child { border-bottom: 1px solid var(--jq-line); }
.jq-menu-nav a span:first-child { font-size: 11px; letter-spacing: .12em; color: var(--jq-stone); }
.jq-menu-nav a span:last-child { font-family: var(--gd-serif); font-size: clamp(2.2rem,7vw,5rem); line-height: 1.15; }
.jq-menu-foot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; max-width: 1700px; margin: 0 auto; width: 100%; padding: 32px 5vw; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--jq-stone); }
/* ════════ HERO — min-h-[100svh]; h1 clamp(3rem,11vw,10rem)/0.98 ════════ */
.jq-hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start; background: var(--jq-ink); overflow: hidden; }
.jq-hero .gd-strip { position: absolute; inset: 0; }
.jq-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jq-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,29,24,.5) 0%, rgba(32,29,24,.2) 45%, rgba(32,29,24,.78) 100%); }
.jq-hero-in { position: relative; z-index: 2; text-align: left; max-width: 1700px; padding: 0 5vw; }
.jq-hero h1 {
font-family: var(--gd-serif); color: var(--jq-cream);
/* Återhållsam skala — "Specialisttandreglering" är ett långt ord och
får aldrig klippas. */
font-size: clamp(2.3rem,5.2vw,4.8rem); line-height: 1.03;
margin: 26px 0 0; max-width: 22ch;
}
.jq-hero h1 em { font-style: italic; color: var(--jq-rose); }
.jq-hero-facts {
margin: 40px 0 0; max-width: 48rem;
display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,241,234,.75);
}
.jq-hero-facts span:nth-child(2) { border-left: 1px solid rgba(244,241,234,.2); border-right: 1px solid rgba(244,241,234,.2); }
.jq-hero-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.jq-hero-cue span { font-size: 9px; letter-spacing: .34em; text-transform: uppercase; color: rgba(244,241,234,.65); }
.jq-hero-cue i { width: 1px; height: 40px; background: rgba(244,241,234,.25); overflow: hidden; display: block; position: relative; }
.jq-hero-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 50%; background: var(--jq-cream); animation: jqCue 1.9s ease-in-out infinite; }
@keyframes jqCue { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }
/* ════════ TRUST-STRIP — py-4 text-[10px] tracking-[0.22em] ════════ */
.jq-trust { background: var(--jq-ink); }
.jq-trust-in {
max-width: 1700px; margin: 0 auto; padding: 16px 5vw;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 4px 24px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
color: rgba(244,241,234,.65);
}
.jq-trust-in b { font-weight: 400; }
.jq-trust-in i { color: rgba(244,241,234,.25); font-style: normal; }
/* ════════ PROLOG — py-[clamp(6rem,15vw,12rem)]; p clamp(2rem,5.4vw,4.6rem)/1.22 ════════ */
.jq-prolog-sec { padding: clamp(6rem,15vw,12rem) 0; }
.jq-prolog { max-width: 1100px; }
.jq-prolog p {
font-family: var(--gd-serif); margin: 36px 0 0;
font-size: clamp(2rem,5.4vw,4.6rem); line-height: 1.22;
}
.jq-prolog p em { font-style: italic; color: var(--jq-rose); }
/* ════════ SPLIT / collage ════════ */
.jq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
/* Balansera split-höjder — bild och text ska matcha på höjd */
.jq-split > .jq-collage,
.jq-split > .jq-collage-main {
width: 100%; align-self: stretch;
}
.jq-split > .jq-collage-main img,
.jq-split > .jq-collage .jq-collage-main img,
.jq-split > figure.jq-collage-main img {
width: 100%; height: 100%; object-fit: cover;
}
.jq-collage { position: relative; }
.jq-collage-main { position: relative; aspect-ratio: 4/5; width: 88%; overflow: hidden; }
/* Parallax-bilder (data-px) ska aldrig glipa mot förälder vid scroll-translate. */
.gd-jq [data-px] { will-change: transform; }
.gd-jq .jq-collage-main img[data-px],
.gd-jq .jq-pg-collage .jq-collage-main img[data-px] { display: block; width: 100%; height: 100%; object-fit: cover; }
.jq-collage-sub { position: absolute; right: 0; bottom: -48px; width: 52%; aspect-ratio: 4/3; border: 6px solid var(--jq-bg); }
.jq-collage .gd-strip { position: absolute; inset: 0; }
.jq-cap { position: absolute; left: 16px; bottom: 16px; z-index: 3; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--jq-cream); }
.jq-plus { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 36px; height: 36px; border: 1px solid rgba(244,241,234,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--jq-cream); }
.jq-plus::before, .jq-plus::after { content: ""; position: absolute; background: currentColor; }
.jq-plus::before { width: 12px; height: 1px; }
.jq-plus::after { width: 1px; height: 12px; }
/* prose — h2 clamp(2.2rem,5vw,4.4rem)/1.08; p text-[15px] max-w-md */
.jq-prose h2 { font-size: clamp(2.2rem,5vw,4.4rem); line-height: 1.08; max-width: none; text-wrap: balance; margin-top: 24px; }
.jq-prose h2 em { font-style: italic; color: var(--jq-rose); }
.jq-prose p { font-size: 15px; line-height: 1.65; color: #544b3a; margin: 18px 0 0; max-width: 28rem; }
.jq-sec--ink .jq-prose p { color: rgba(244,241,234,.78); }
.jq-prose-stats { display: flex; gap: 40px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--jq-line); }
.jq-sec--ink .jq-prose-stats { border-color: var(--jq-line-d); }
.jq-prose-stats .n { font-family: var(--gd-serif); font-size: 1.875rem; line-height: 1; }
.jq-prose-stats .l { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--jq-stone); margin-top: 8px; }
/* ════════ SPÄN-SCEN — sticky 100svh, paneler scrollar över ════════ */
.jq-scene { position: relative; background: var(--jq-deep); }
.jq-scene-sticky { position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden; }
.jq-scene-sticky .gd-strip,
.jq-scene-media { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.jq-scene-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,15,13,.32) 0%, rgba(16,15,13,.08) 45%, rgba(16,15,13,.55) 100%); pointer-events: none; }
.jq-scene-panels { position: relative; z-index: 10; margin-top: -100svh; }
/* Mobile: scenes blir vanlig stacked layout (sticky-pin fungerar inte bra på 390px viewport
och blåser upp page-höjd när panels staplas under varandra ovanpå sticky-bild). */
@media (max-width: 860px) {
.gd-jq .jq-scene { min-height: auto; }
.jq-scene-sticky { position: relative; height: 65svh; }
.jq-scene-panels { margin-top: 0; }
.jq-scene-panels .jq-panel { min-height: auto; padding: clamp(40px, 8vw, 80px) 5vw; }
}
/* ScenePanel: min-h-[100svh] px-[6vw] py-[15vh] text-center */
.jq-panel { min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 15vh 6vw; }
.jq-panel h2 { font-family: var(--gd-serif); color: var(--jq-cream); font-size: clamp(2.8rem,9.5vw,9rem); line-height: 1.0; margin-top: 32px; }
.jq-panel h2 em { font-style: italic; color: var(--jq-rose); }
/* pull-quote: clamp(1.5rem,3.2vw,2.7rem) italic / 1.4 */
.jq-panel-quote {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.5rem,3.2vw,2.7rem); line-height: 1.4;
color: rgba(244,241,234,.85); max-width: 42rem; margin: 0;
}
.jq-panel-sub { margin-top: 20px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(244,241,234,.6); }
/* ════════ SEKTIONS-RUBRIK — h2 clamp(2.2rem,5vw,4.4rem)/1.08 ════════
Default: titel + ev. eyebrow/lead radas upp i en två-kolumns-grid som
spänner över hela sektionsbredden. När heading-blocket bara innehåller
en titel (ingen lead/meta) går titel-kolumnen ut till 1100px så
rubriken får luft utan att hamna i en smal vänsterkolumn med tomrum
till höger. */
.jq-head { max-width: none; margin-bottom: clamp(28px, 4vw, 56px); }
.jq-head h2 {
font-size: clamp(2.2rem, 5vw, 4.4rem);
line-height: 1.06; letter-spacing: -.012em;
margin-top: 8px;
max-width: none;
text-wrap: balance;
}
.jq-head h2 em { font-style: italic; color: var(--jq-rose); }
/* ════════ KARUSELL — kort aspect-[3/4] w-[clamp(300px,28vw,420px)] gap-5 ════════ */
.jq-carousel-track { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; cursor: grab; -ms-overflow-style: none; scrollbar-width: none; }
.jq-carousel-track::-webkit-scrollbar { display: none; }
.jq-carousel-track:active { cursor: grabbing; }
.jq-card {
position: relative; flex: 0 0 clamp(300px,28vw,420px); aspect-ratio: 3/4;
overflow: hidden; scroll-snap-align: start; text-decoration: none;
display: flex; flex-direction: column; justify-content: flex-end; background: var(--jq-ink);
}
.jq-card .gd-strip { position: absolute; inset: 0; }
.jq-card-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,29,24,0) 40%, rgba(32,29,24,.9) 100%); }
.jq-card-idx { position: absolute; left: 20px; top: 20px; z-index: 2; font-size: 11px; letter-spacing: .2em; color: rgba(244,241,234,.75); }
.jq-card-body { position: relative; z-index: 2; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.jq-card-cat { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(244,241,234,.65); }
.jq-card h3 { font-size: clamp(1.5rem,2.4vw,2.1rem); line-height: 1.15; color: var(--jq-cream); }
.jq-card p { font-size: 12.5px; line-height: 1.6; color: rgba(244,241,234,.75); margin: 0; max-width: 40ch; }
.jq-card-more { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--jq-cream); margin-top: 4px; }
.jq-card-more span { transition: transform .3s var(--jq-ease); }
.jq-card:hover .jq-card-more span { transform: translateX(4px); }
.jq-carousel-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.jq-carousel-count { font-size: 12px; letter-spacing: .24em; color: rgba(244,241,234,.6); }
.jq-carousel-count b { color: var(--jq-cream); font-weight: 400; }
.jq-sec--bg .jq-carousel-count, .jq-sec--lav .jq-carousel-count { color: rgba(21,23,27,.55); }
.jq-sec--bg .jq-carousel-count b, .jq-sec--lav .jq-carousel-count b { color: var(--jq-ink); }
.jq-carousel-btns { display: flex; gap: 10px; }
.jq-carousel-btns button {
width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
border: 1px solid currentColor; background: none; color: inherit; font-size: 15px;
transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.jq-carousel-btns button:hover { background: var(--jq-accent); color: #fff; border-color: var(--jq-accent); }
.jq-card-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
transition: transform .9s var(--jq-ease);
}
/* Strip-reveal fallback: img visas tills canvas renderar, sen göms img bakom canvas.
Canvas (.gd-strip > canvas) ligger position:absolute inset:0 ovanpå img. */
.gd-strip + img[data-strip-fallback],
.gd-strip + img.jq-card-bg[data-strip-fallback] {
z-index: 0;
}
.gd-strip canvas { z-index: 1; }
.jq-card:hover .jq-card-bg { transform: scale(1.04); }
.jq-card .jq-card-veil { z-index: 1; background: linear-gradient(180deg, rgba(21,23,27,.15) 0%, rgba(21,23,27,.45) 45%, rgba(21,23,27,.88) 80%, rgba(21,23,27,.96) 100%); }
/* Säkerställ att karusell-kort aldrig "fadas ut" — alla kort renderas fullt synliga.
(Bug-fix: tidigare tung gradient + ärvd data-reveal-opacity gjorde non-active kort disabled.) */
.jq-carousel-track .jq-card,
.jq-carousel-track [data-card] { opacity: 1 !important; }
/* Andra behandlingar — head med lead på sidan
Ärver default .jq-head-griden ovan. Den enda specialiseringen är att
lead/teasertext placeras i högerkolumnen och justeras mot h2:ans
baseline. */
.jq-head--row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
column-gap: clamp(32px, 5vw, 96px);
row-gap: 14px;
align-items: end;
}
.jq-head--row > div:first-child { grid-column: 1; display: flex; flex-direction: column; gap: 8px; }
.gd-pg-related-lead {
grid-column: 2;
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem,1.4vw,1.35rem); line-height: 1.5;
color: var(--jq-stone); margin: 0; max-width: 46ch;
align-self: end; justify-self: start;
}
@media (max-width: 860px) {
.jq-head--row { grid-template-columns: 1fr; column-gap: 0; }
.jq-head--row > div:first-child,
.gd-pg-related-lead,
.jq-head-lead { grid-column: 1; justify-self: start; }
}
/* Säkerhetsbälte mot horisontell overflow på mobile — jq-wrap får aldrig spilla över viewport */
.jq-wrap, .jq-sec-in { max-width: 100%; overflow-x: clip; }
.jq-sec { overflow-x: clip; }
/* Bok-aside-bild på bokningssidan får inte spilla över */
.gd-boka-aside, .gd-boka-app { max-width: 100%; }
/* Maps-iframe / Complianz-placeholder responsiv */
.gd-pg-map, .gd-pg-map iframe, .cmplz-placeholder-parent, .cmplz-placeholder-element { max-width: 100% !important; width: 100% !important; }
/* ════════════════════════════════════════════════════════════════════════
* MOBILE PREMIUM-POLISH (ui-ux-pro-max — typografi, andning, touch)
* ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Större hero-h1 för impact på mobile (var clamp ger för liten på 390px) */
.gd-jq .jq-hero h1 {
font-size: clamp(2.4rem, 9vw, 3.4rem);
line-height: 1.04;
letter-spacing: -.018em;
text-wrap: balance;
}
/* Sektion-h2 mer impact på mobile */
.gd-jq .jq-head h2,
.gd-jq .jq-prose h2,
.gd-jq .jq-sec-head h2,
.gd-jq .gd-section-head .gd-h2 {
font-size: clamp(1.9rem, 7.4vw, 2.6rem);
line-height: 1.08;
letter-spacing: -.012em;
}
/* Eyebrow större och tydligare läs på mobile */
.gd-jq .jq-eyebrow,
.gd-jq .gd-eyebrow {
font-size: 10.5px;
letter-spacing: .26em;
}
/* Body-text minst 16px på mobile för läsbarhet */
.gd-jq p,
.gd-jq .jq-prose p,
.gd-jq .gd-body-txt,
.gd-jq .jq-pg-text-body p {
font-size: 15.5px;
line-height: 1.7;
}
/* Andning mellan element i prose */
.gd-jq .jq-prose { gap: 16px; }
.gd-jq .jq-prose > * + * { margin-top: 4px; }
/* Touch-targets ≥ 44px för alla CTA — premium feel */
.gd-jq .jq-btn {
min-height: 48px;
padding: 14px 22px;
font-size: 13px;
letter-spacing: .14em;
}
/* Card-padding mer luftig på mobile */
.gd-jq .jq-pg-linkcard,
.gd-jq .jq-compare-card,
.gd-jq .jq-pricecard {
padding: clamp(24px, 6vw, 32px);
}
/* Mer side-padding på sektions-wraps så content aldrig klistras mot kant */
.gd-jq .jq-wrap { padding-left: 24px; padding-right: 24px; }
.gd-jq .jq-sec-in { padding-left: 24px; padding-right: 24px; }
/* Sektion-rytm — mindre tight på mobile */
.gd-jq .jq-sec:not(.jq-hero):not(.jq-footer-statement) {
padding-top: clamp(44px, 9vw, 72px);
padding-bottom: clamp(44px, 9vw, 72px);
}
/* jq-head margin-bottom tighter på mobile för bättre kontakt med content */
.gd-jq .jq-head { margin-bottom: clamp(20px, 5vw, 32px); }
/* Carousel-kort fyller mer av viewport på mobile */
.jq-carousel-track .jq-card { flex: 0 0 min(82vw, 320px); }
}
@media (max-width: 480px) {
/* Extra tight på små telefoner — undvika att stora rubriker blir för pressade */
.gd-jq .jq-hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); }
.gd-jq .jq-head h2,
.gd-jq .jq-prose h2 { font-size: clamp(1.75rem, 7vw, 2.3rem); }
}
.gd-pg-related-deck .jq-carousel-track { padding-bottom: 8px; }
/* ════════ RUTNÄT — gap-px border (recensioner / why) ════════ */
.jq-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--jq-line); border: 1px solid var(--jq-line); }
.jq-quote { background: var(--jq-bg); padding: 40px; display: flex; flex-direction: column; gap: 22px; }
.jq-spec-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 22%; margin: -40px -40px 4px; width: calc(100% + 80px); max-width: none; }
.jq-quote-stars { letter-spacing: .3em; color: var(--jq-rose); font-size: 12px; }
.jq-quote blockquote { font-family: var(--gd-serif); font-size: clamp(1.2rem,1.7vw,1.6rem); line-height: 1.4; margin: 0; }
.jq-quote figcaption { margin-top: auto; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--jq-stone); }
/* ════════ FAQ — grid [0.8fr_1.7fr] gap-24; summary py-7 ════════ */
.jq-faq { border-top: 1px solid var(--jq-line); }
.jq-faq details { border-bottom: 1px solid var(--jq-line); }
.jq-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; }
.jq-faq summary::-webkit-details-marker { display: none; }
.jq-faq summary span:first-child { font-family: var(--gd-serif); font-size: clamp(1.3rem,2.2vw,1.9rem); line-height: 1.32; max-width: 44ch; }
.jq-faq-ic { position: relative; width: 16px; height: 16px; flex: none; }
.jq-faq-ic::before, .jq-faq-ic::after { content: ""; position: absolute; background: var(--jq-stone); }
.jq-faq-ic::before { left: 0; top: 7.5px; width: 16px; height: 1px; }
.jq-faq-ic::after { left: 7.5px; top: 0; width: 1px; height: 16px; transition: transform .3s ease; }
.jq-faq details[open] .jq-faq-ic::after { transform: scaleY(0); }
.jq-faq p { margin: 0; padding: 0 0 32px; max-width: 42rem; font-size: 14px; line-height: 1.62; color: #544b3a; }
/* ════════ KNAPP — rounded-full px-9 py-4 text-[11px] tracking-[0.2em] ════════ */
.jq-btn {
display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 100px;
font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
text-decoration: none; cursor: pointer; border: 1px solid transparent;
transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.jq-btn--solid { background: var(--jq-accent); color: #fff; }
.jq-btn--solid:hover { background: #185c97; }
.jq-btn--ghost { border-color: rgba(244,241,234,.4); color: var(--jq-cream); }
.jq-btn--ghost:hover { border-color: var(--jq-cream); }
.jq-btn--dark { border-color: rgba(21,23,27,.3); color: var(--jq-ink); }
.jq-btn--dark:hover { background: var(--jq-ink); color: var(--jq-cream); }
.jq-btn span { transition: transform .3s var(--jq-ease); }
.jq-btn:hover span { transform: translateX(4px); }
/* ─── Map / info ─── */
.jq-map { aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--jq-line); }
.jq-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.3) brightness(.99); }
.jq-info-row { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--jq-line); padding: 9px 0; font-size: 14px; color: #544b3a; }
/* ─── Jämförelsetabell ─── */
.jq-cmp-wrap { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.jq-cmp-wrap::-webkit-scrollbar { display: none; }
.jq-cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.jq-cmp th, .jq-cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--jq-line); }
.jq-cmp thead th { font-family: var(--gd-serif); font-size: 17px; font-weight: 500; }
.jq-cmp thead th:first-child { color: var(--jq-stone); }
.jq-cmp td { font-size: 14px; color: #544b3a; }
.jq-cmp td.lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jq-stone); }
.jq-cmp tbody tr:last-child td { border-bottom: 0; }
/* ─── Why-rad: serif-rubrik ─── */
.jq-why-row .h h3 { font-family: var(--gd-serif); }
/* ════════════════════════════════════════════════════════════
PREMIUM v3 — taktil yta + koreografi
Källa: frontend-design (Anthropic) + ui-ux-pro-max + 2026-research.
Allt respekterar prefers-reduced-motion via @media-blocket sist.
════════════════════════════════════════════════════════════ */
/* Film-grain overlay — SVG noise, fixed, screen blend.
Tactile yta som höjer hela sajten ett snäpp utan att skrika. */
.gd-jq::before {
content: "";
position: fixed; inset: 0; z-index: 9000;
pointer-events: none;
mix-blend-mode: overlay; opacity: .045;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
/* Hero-vignette — cinematiskt djup vid kanterna. */
.jq-hero::after {
content: "";
position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 110%),
linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 25%);
}
/* Mask-reveal — texten "reser sig" under en osynlig linje.
Klassen .gd-mask aktiveras av JS när elementet syns. */
.gd-mask { display: inline-block; overflow: hidden; padding-bottom: .12em; line-height: 1.05; vertical-align: top; }
.gd-mask > span {
display: inline-block; transform: translateY(110%);
transition: transform 1.05s cubic-bezier(.2, .9, .2, 1);
}
.gd-mask.is-in > span { transform: translateY(0); }
.gd-mask-stagger > .gd-mask:nth-child(2) > span { transition-delay: .08s; }
.gd-mask-stagger > .gd-mask:nth-child(3) > span { transition-delay: .16s; }
.gd-mask-stagger > .gd-mask:nth-child(4) > span { transition-delay: .24s; }
.gd-mask-stagger > .gd-mask:nth-child(5) > span { transition-delay: .32s; }
/* Mask-spans i hero-H1 staplas som rader (ersätter
). */
.jq-hero h1 .gd-mask { display: block; }
/* Multi-lager skuggor på kort — djup som platt skugga inte ger. */
.gd-jq .jq-card,
.gd-jq .jq-quote,
.gd-jq .gd-post-card {
box-shadow:
0 1px 1px rgba(21,23,27,.04),
0 4px 8px rgba(21,23,27,.04),
0 16px 32px -8px rgba(21,23,27,.08);
}
.gd-jq .jq-card:hover,
.gd-jq .jq-quote:hover {
transform: translateY(-6px);
box-shadow:
0 2px 2px rgba(21,23,27,.05),
0 8px 16px rgba(21,23,27,.08),
0 32px 64px -12px rgba(21,23,27,.22);
}
/* Magnetisk CTA — drar texten lätt mot cursorn (sätts av JS). */
.gd-jq .jq-btn { transition: transform .35s cubic-bezier(.2,.9,.2,1), background .3s ease, color .3s ease, border-color .3s ease; }
.gd-jq .jq-btn > span,
.gd-jq .jq-btn-label { display: inline-block; transition: transform .35s cubic-bezier(.2,.9,.2,1); }
/* Räknare — diskret pulse vid första syn. */
@keyframes gdStatPulse { 0% { transform: scale(1); } 35% { transform: scale(1.04); } 100% { transform: scale(1); } }
.gd-jq .gd-stat.is-counted .gd-stat-n { animation: gdStatPulse .9s cubic-bezier(.2,.9,.2,1); }
@media (prefers-reduced-motion: reduce) {
.gd-jq::before { display: none; }
.gd-mask > span { transform: none !important; transition: none !important; }
.gd-jq .jq-btn > span { transform: none !important; }
}
/* ─── Tillgänglighet: synliga fokusringar (WCAG 2.4.7) ─── */
.gd-jq a:focus-visible,
.gd-jq button:focus-visible,
.gd-jq summary:focus-visible,
.gd-jq input:focus-visible,
.gd-jq textarea:focus-visible,
.jq-btn:focus-visible {
outline: 2px solid var(--jq-accent);
outline-offset: 3px;
border-radius: 4px;
}
.gd-jq .jq-hero a:focus-visible,
.gd-jq .jq-sec--ink a:focus-visible,
.gd-jq .jq-sec--ink button:focus-visible,
.gd-jq .jq-scene a:focus-visible {
outline-color: var(--jq-cream);
}
/* ─── Behandlings-video-yta (Så går det till) ─── */
.jq-proc-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--jq-deep); }
.jq-proc-media video,
.jq-proc-media .gd-strip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jq-proc-counter { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,241,234,.78); z-index: 2; }
.jq-proc-line { flex: 1; height: 1px; background: rgba(244,241,234,.3); }
/* ════════════════════════════════════════════════════════════
BRYGGA — standardsidor (sida.php) i JQ-design
Standardsidornas .gd-*-struktur kläs i JQ-uttryck: mörk hero,
95vh-sektioner (ärvs), editorial rytm.
════════════════════════════════════════════════════════════ */
.gd-jq .gd-ph {
background: var(--jq-ink); color: var(--jq-cream);
min-height: 78svh; display: flex; align-items: center;
padding: 14vh 0 10vh; text-align: left;
}
.gd-jq .gd-ph-inner { max-width: 1700px; margin: 0; padding: 0 5vw; width: 100%; text-align: left; }
.gd-jq .gd-ph .gd-hero-ctas { justify-content: flex-start; }
.gd-jq .gd-ph .gd-th-eyebrow,
.gd-jq .gd-ph .gd-th-eyebrow * { color: rgba(244,241,234,.72); }
.gd-jq .gd-ph-h1 { color: var(--jq-cream); font-family: var(--gd-serif); font-size: clamp(2.3rem,5.2vw,4.8rem); line-height: 1.03; letter-spacing: -.01em; }
.gd-jq .gd-ph-h1 em { font-style: italic; color: var(--jq-cream); }
.gd-jq .gd-ph-lead { color: rgba(244,241,234,.82); max-width: 56ch; }
.gd-jq .gd-ph .gd-btn-outline { border-color: rgba(244,241,234,.4); color: var(--jq-cream); }
.gd-jq .gd-ph .gd-btn-outline:hover { background: var(--jq-cream); color: var(--jq-ink); }
/* Mörkt stat-band på hubben passar redan; säkra läsbarhet. */
.gd-jq .gd-bg-ink { background: var(--jq-ink); }
/* ─── Sammanhang: gamla .gd-sec-num talar samma språk som JQ-eyebrow.
Detta läker den frankenstein-känsla där hälften av sektionerna hade
"TEXT" och hälften "· · · TEXT · · ·" — nu alla samma. ─── */
.gd-jq .gd-sec-num {
display: inline-flex; align-items: center; gap: 12px;
font-size: 10px; font-weight: 500; letter-spacing: .34em;
text-transform: uppercase; color: #8b6f47;
background: none; border: 0; opacity: 1;
}
.gd-jq .gd-sec-num::before, .gd-jq .gd-sec-num::after { content: "· · ·"; letter-spacing: 0; }
.gd-jq .gd-bg-ink .gd-sec-num,
.gd-jq .jq-sec--ink .gd-sec-num,
.gd-jq .gd-section-full.gd-bg-ink .gd-sec-num { color: rgba(244,241,234,.88); }
/* H2-rubriker i de gamla sektionerna får samma editorial-skala som JQ:s */
.gd-jq .gd-section .gd-h2,
.gd-jq .gd-section-full .gd-h2 {
font-family: var(--gd-serif) !important;
font-size: clamp(2rem,4.4vw,4.1rem); line-height: 1.08; font-weight: 400;
max-width: none; text-wrap: balance;
}
.gd-jq .gd-section .gd-h2 em,
.gd-jq .gd-section-full .gd-h2 em { font-style: italic; color: var(--jq-rose); /* currentColor */ }
/* Section-head 1-kolumn istället för 2-kolumn (matchar JQ:s editorial rytm) */
.gd-jq .gd-section .gd-section-head,
.gd-jq .gd-section-full .gd-section-head {
display: block; max-width: 1700px; margin: 0 0 clamp(34px,4vw,52px);
}
.gd-jq .gd-section .gd-section-head > p,
.gd-jq .gd-section-full .gd-section-head > p {
max-width: 52ch; margin-top: 18px; font-size: 15.5px; line-height: 1.75;
}
/* ════════════════════════════════════════════════════════════
INRE WIDGETS — JQ-redesign
Quiz, före/efter, priskort, kalkylator. Editorial / hairline.
════════════════════════════════════════════════════════════ */
/* QUIZ */
.gd-jq .gd-quiz-card {
border: 1px solid var(--jq-line); border-radius: 0;
box-shadow: 0 1px 1px rgba(21,23,27,.04), 0 4px 8px rgba(21,23,27,.04), 0 16px 32px -8px rgba(21,23,27,.08);
background: var(--jq-bg);
}
.gd-jq .gd-quiz-illu { background: var(--jq-bg-lt); min-height: 480px; }
.gd-jq .gd-quiz-panel { padding: 56px 48px; background: #FFF; }
.gd-jq .gd-quiz-dots { gap: 4px; margin-bottom: 32px; }
.gd-jq .gd-quiz-dot { width: 18px; height: 1px; border-radius: 0; background: rgba(21,23,27,.15); }
.gd-jq .gd-quiz-dot.done, .gd-jq .gd-quiz-dot.active { background: var(--jq-ink); }
.gd-jq .gd-quiz-count { font-size: 10px; font-weight: 500; letter-spacing: .34em; color: var(--jq-stone); }
.gd-jq .gd-quiz-q {
font-family: var(--gd-serif) !important;
font-size: clamp(1.6rem,2.6vw,2.2rem); font-weight: 400; letter-spacing: -.01em;
line-height: 1.15; margin: 14px 0 32px;
}
.gd-jq .gd-quiz-q em { font-style: italic; font-weight: 400; }
.gd-jq .gd-quiz-opts { gap: 0; border-top: 1px solid var(--jq-line); }
.gd-jq .gd-quiz-opt {
background: transparent !important; border: 0 !important;
border-bottom: 1px solid var(--jq-line) !important; border-radius: 0;
padding: 20px 4px !important;
transition: padding-left .4s var(--jq-ease), color .25s ease;
}
.gd-jq .gd-quiz-opt:hover { transform: none; padding-left: 14px !important; color: var(--jq-accent); }
.gd-jq .gd-quiz-opt.sel { background: transparent !important; padding-left: 14px !important; }
.gd-jq .gd-quiz-opt-t { font-family: var(--gd-serif); font-size: clamp(1rem,1.5vw,1.3rem); font-weight: 500; }
.gd-jq .gd-quiz-opt-d { font-size: 12px; opacity: .65; }
.gd-jq .gd-quiz-input { border-radius: 0; border: 0; border-bottom: 1px solid var(--jq-line); padding: 0 0 10px; background: transparent; }
.gd-jq .gd-quiz-result-price strong { font-family: var(--gd-serif); font-weight: 400; color: var(--jq-ink); font-size: clamp(2rem,4vw,3.2rem); }
/* FÖRE / EFTER */
.gd-jq .gd-ba-frame { border-radius: 0; border: 1px solid var(--jq-line); overflow: hidden; }
.gd-jq .gd-ba-handle { background: var(--jq-cream); width: 1px !important; }
.gd-jq .gd-ba-pill {
background: var(--jq-ink); color: var(--jq-cream);
border-radius: 0; width: 40px; height: 40px; box-shadow: 0 8px 24px -8px rgba(21,23,27,.4);
display: flex; align-items: center; justify-content: center;
font-size: 0;
}
.gd-jq .gd-ba-pill::before { content: "← →"; font-size: 13px; letter-spacing: .08em; font-family: inherit; }
.gd-jq .gd-ba-tag {
background: rgba(21,23,27,.85); color: var(--jq-cream);
font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
padding: 6px 12px; border-radius: 0;
}
.gd-jq .gd-ba-story { font-family: var(--gd-serif); font-size: clamp(1.05rem,1.5vw,1.25rem); margin-top: 14px; color: var(--jq-ink); }
.gd-jq .gd-ba-dur { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--jq-stone); margin-top: 6px; }
/* PRISKORT */
.gd-jq .gd-pricing { gap: 0 !important; border-top: 1px solid var(--jq-line); grid-template-columns: 1fr !important; }
.gd-jq .gd-plan {
background: var(--jq-bg) !important; border: 0 !important; border-bottom: 1px solid var(--jq-line) !important;
border-radius: 0 !important; padding: 36px 40px;
display: grid;
grid-template-columns: 220px 1fr 170px;
grid-template-areas:
"badge name btn"
"price desc btn";
column-gap: 40px; row-gap: 8px; align-items: center;
box-shadow: none !important; position: relative;
}
.gd-jq .gd-plan.gd-plan-pop { background: var(--jq-ink) !important; color: var(--jq-cream); }
.gd-jq .gd-plan-badge {
grid-area: badge; align-self: end;
background: none !important; color: var(--jq-stone) !important;
font-size: 9px; letter-spacing: .28em; text-transform: uppercase; padding: 0 !important;
border-radius: 0 !important; position: static !important;
font-weight: 600;
}
.gd-jq .gd-plan-pop .gd-plan-badge { color: rgba(244,241,234,.65) !important; }
.gd-jq .gd-plan-priceline { grid-area: price; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gd-jq .gd-plan-num { font-family: var(--gd-serif); font-weight: 400; font-size: clamp(2rem,3.6vw,3rem); line-height: 1; letter-spacing: -.015em; color: inherit; }
.gd-jq .gd-plan-unit { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--jq-stone); display: flex; gap: 6px; align-items: baseline; }
.gd-jq .gd-plan-pop .gd-plan-unit { color: rgba(244,241,234,.55); }
.gd-jq .gd-plan-unit small { font-size: 9px; }
.gd-jq .gd-plan-name { grid-area: name; font-family: var(--gd-serif); font-weight: 500; font-size: clamp(1.25rem,1.8vw,1.6rem); margin: 0; align-self: end; color: inherit; }
.gd-jq .gd-plan-desc { grid-area: desc; font-size: 13.5px; line-height: 1.5; color: var(--jq-stone); margin: 0; max-width: 50ch; align-self: start; }
.gd-jq .gd-plan-pop .gd-plan-desc { color: rgba(244,241,234,.65); }
.gd-jq .gd-plan-inc { display: none !important; }
.gd-jq .gd-plan .gd-btn { grid-area: btn; white-space: nowrap; min-width: 0; align-self: center; }
.gd-jq .gd-plan-pop .gd-btn-blue, .gd-jq .gd-plan-pop .gd-btn-outline {
background: var(--jq-cream) !important; color: var(--jq-ink) !important; border-color: var(--jq-cream) !important;
}
/* PRIS-TOGGLE */
.gd-jq .gd-price-toggle { background: none; padding: 0; gap: 24px; border: 0; }
.gd-jq .gd-pt-btn { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--jq-stone); border-radius: 0; }
.gd-jq .gd-pt-btn.is-active { color: var(--jq-ink); border-bottom-color: var(--jq-ink); }
.gd-jq .gd-pt-ind { display: none; }
/* KALKYLATOR */
.gd-jq .gd-calc { background: var(--jq-bg-lt); border: 1px solid var(--jq-line); padding: 48px; margin-top: 64px; border-radius: 0; }
.gd-jq .gd-calc-lbl { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--jq-stone); }
.gd-jq .gd-calc-h { font-family: var(--gd-serif) !important; font-weight: 400; font-size: clamp(1.6rem,2.8vw,2.4rem); margin: 14px 0 8px; }
.gd-jq .gd-cstepper { list-style: none; padding: 0; margin: 32px 0 0; }
.gd-jq .gd-cstep { border-top: 1px solid var(--jq-line); padding: 0; display: grid; grid-template-columns: 48px 1fr; }
.gd-jq .gd-cstep:last-child { border-bottom: 1px solid var(--jq-line); }
.gd-jq .gd-cstep-rail { display: flex; align-items: flex-start; padding-top: 24px; }
.gd-jq .gd-cstep-dot {
background: none !important; border: 0 !important; width: auto; height: auto;
font-family: var(--gd-serif); color: var(--jq-stone);
}
.gd-jq .gd-cstep-dot .gd-cstep-n { font-family: var(--gd-serif); font-size: 1.2rem; color: var(--jq-stone); font-weight: 400; font-style: italic; }
.gd-jq .gd-cstep-dot .gd-cstep-n::before { content: "0"; }
.gd-jq .gd-cstep.is-active .gd-cstep-dot .gd-cstep-n,
.gd-jq .gd-cstep.is-done .gd-cstep-dot .gd-cstep-n { color: var(--jq-ink); }
.gd-jq .gd-cstep-ok { width: 14px; height: 14px; }
.gd-jq .gd-cstep-head { background: none; border: 0; width: 100%; text-align: left; padding: 24px 0; display: flex; justify-content: space-between; gap: 18px; cursor: pointer; }
.gd-jq .gd-cstep-t { font-family: var(--gd-serif); font-size: clamp(1.2rem,1.8vw,1.5rem); font-weight: 400; color: var(--jq-ink); }
.gd-jq .gd-cstep-pick { font-size: 12px; color: var(--jq-stone); letter-spacing: .04em; }
.gd-jq .gd-cstep-panel { padding-bottom: 24px; }
.gd-jq .gd-copts { display: grid; gap: 0; border-top: 1px solid var(--jq-line); }
.gd-jq .gd-copts.gd-copts-grid { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 8px; }
.gd-jq .gd-copt {
background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--jq-line) !important;
border-radius: 0; padding: 16px 4px; cursor: pointer;
display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
font-family: inherit; transition: padding-left .35s var(--jq-ease), color .25s ease;
}
.gd-jq .gd-copts.gd-copts-grid .gd-copt {
border: 1px solid var(--jq-line) !important; padding: 18px;
justify-content: center;
}
.gd-jq .gd-copt:hover { padding-left: 12px; color: var(--jq-accent); }
.gd-jq .gd-copts.gd-copts-grid .gd-copt:hover { padding-left: 18px; }
.gd-jq .gd-copt span { font-family: var(--gd-serif); font-size: 1rem; }
.gd-jq .gd-copt strong { font-weight: 500; color: var(--jq-stone); font-size: 13px; letter-spacing: .04em; }
.gd-jq .gd-calc-result { text-align: left; }
.gd-jq .gd-calc-big {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(3rem,5.6vw,5rem); line-height: 1; color: var(--jq-ink);
}
.gd-jq .gd-calc-sub { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--jq-stone); margin: 14px 0 24px; }
.gd-jq .gd-calc-fine { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--jq-stone); margin-top: 14px; opacity: .7; }
@media (max-width: 760px) {
.gd-jq .gd-plan {
grid-template-columns: 1fr;
grid-template-areas: "badge" "name" "price" "desc" "btn";
row-gap: 8px; padding: 28px;
}
.gd-jq .gd-plan .gd-btn { justify-self: start; margin-top: 12px; }
.gd-jq .gd-calc { padding: 28px; }
.gd-jq .gd-copts.gd-copts-grid { grid-template-columns: 1fr 1fr; }
.gd-jq .gd-quiz-panel { padding: 32px 24px; }
}
/* ─── Editorial cities-lista (ersätter dekorativ globe) ─── */
.jq-cities { display: flex; flex-direction: column; border-top: 1px solid var(--jq-line); }
.jq-cities a {
display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline;
gap: 18px; padding: 20px 4px; border-bottom: 1px solid var(--jq-line);
text-decoration: none; color: var(--jq-ink);
transition: padding-left .4s var(--jq-ease), color .25s ease;
}
.jq-cities a:hover { padding-left: 18px; color: var(--jq-accent); }
.jq-cities a > span:first-child { font-size: 10px; letter-spacing: .22em; color: var(--jq-stone); font-weight: 500; }
.jq-cities a .city { font-family: var(--gd-serif); font-size: clamp(1.4rem,2vw,1.8rem); line-height: 1; }
.jq-cities a .km { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--jq-stone); white-space: nowrap; }
/* ════════════════════════════════════════════════════════════
BRYGGA — bloggsidor (archive + single)
════════════════════════════════════════════════════════════ */
.gd-jq.gd-archive { background: var(--jq-bg); }
.gd-jq .gd-page-hero {
background: var(--jq-ink); color: var(--jq-cream);
min-height: 60svh; display: flex; flex-direction: column; justify-content: center;
padding: clamp(96px,14vw,160px) 5vw clamp(56px,7vw,96px);
max-width: none !important;
}
.gd-jq .gd-page-hero > * { max-width: 1700px; width: 100%; margin-left: auto; margin-right: auto; }
.gd-jq .gd-page-hero h1 { color: var(--jq-cream); font-family: var(--gd-serif); font-size: clamp(2.3rem,5.2vw,4.8rem); line-height: 1.04; letter-spacing: -.01em; max-width: 22ch; }
.gd-jq .gd-page-hero .gd-eyebrow,
.gd-jq .gd-page-hero p.gd-eyebrow {
color: rgba(244,241,234,.72) !important; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; opacity: 1 !important; font-weight: 500;
}
/* Innehållskolumn (single post) */
.gd-jq .gd-content { max-width: 760px; margin: 0 auto; padding: clamp(48px,7vw,96px) 5vw; }
.gd-jq .gd-content h2 { font-family: var(--gd-serif); font-size: clamp(1.6rem,2.6vw,2.2rem); line-height: 1.18; margin: 2em 0 .55em; }
.gd-jq .gd-content h3 { font-family: var(--gd-serif); font-size: 1.4rem; margin: 1.7em 0 .45em; }
.gd-jq .gd-content p { font-size: 17px; line-height: 1.78; color: #2c2b25; }
.gd-jq .gd-content figure.wp-block-post-featured-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.gd-jq .gd-content .wp-block-buttons { margin-top: 26px; }
.gd-jq .gd-content .wp-block-button__link {
background: var(--jq-accent); color: #fff; border-radius: 100px;
padding: 16px 32px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
}
.gd-jq .gd-content .wp-block-button__link:hover { background: #185c97; }
.gd-jq .gd-content hr { border: 0; border-top: 1px solid var(--jq-line); margin: 36px 0; }
.gd-jq .gd-post-meta { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--jq-stone); }
/* Arkivlista */
.gd-jq .gd-archive .wp-block-query { max-width: 1700px; margin: 0 auto; padding: clamp(56px,8vw,110px) 5vw; }
.gd-jq .gd-post-grid { gap: 28px !important; }
.gd-jq .gd-post-card { background: #FFF; border: 1px solid var(--jq-line); border-radius: 0; overflow: hidden; transition: transform .4s var(--jq-ease), box-shadow .4s var(--jq-ease); display: flex; flex-direction: column; }
.gd-jq .gd-post-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -36px rgba(21,23,27,.25); }
.gd-jq .gd-post-card .gd-post-thumb,
.gd-jq .gd-post-card .wp-block-post-featured-image { aspect-ratio: 16/10; overflow: hidden; }
.gd-jq .gd-post-card .gd-post-thumb img,
.gd-jq .gd-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.gd-jq .gd-post-card .gd-post-body { padding: 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gd-jq .gd-post-card h3 { font-family: var(--gd-serif); font-size: clamp(1.2rem,1.7vw,1.45rem); line-height: 1.3; margin: 0; }
.gd-jq .gd-post-card h3 a { color: var(--jq-ink); text-decoration: none; }
.gd-jq .gd-post-card h3 a:hover { color: var(--jq-accent); }
.gd-jq .gd-post-card .wp-block-post-excerpt { font-size: 14px; line-height: 1.65; color: #544b3a; }
.gd-jq .gd-post-card .wp-block-post-excerpt__more-text { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--jq-accent); margin-top: 8px; display: inline-block; }
/* Paginering */
.gd-jq .wp-block-query-pagination { margin-top: clamp(40px,5vw,72px); gap: 8px; }
.gd-jq .wp-block-query-pagination a,
.gd-jq .wp-block-query-pagination .page-numbers { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--jq-ink); padding: 10px 14px; border: 1px solid var(--jq-line); border-radius: 100px; text-decoration: none; }
.gd-jq .wp-block-query-pagination .current { background: var(--jq-ink); color: var(--jq-cream); border-color: var(--jq-ink); }
/* ─── Responsivt ─── */
@media (max-width: 980px) {
.jq-split { grid-template-columns: 1fr; gap: 40px; }
.jq-collage-main { width: 100%; aspect-ratio: 4/3; }
.jq-collage-sub { position: relative; right: auto; bottom: auto; width: 64%; margin: -14% 0 0 auto; }
.jq-grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.jq-hero-facts { grid-template-columns: 1fr; gap: 8px; }
.jq-hero-facts span:nth-child(2) { border: 0; }
.jq-prose-stats { flex-wrap: wrap; gap: 24px; }
}
/* ════════════════════════════════════════════════════════════
GAP-FIXES 2026-05-20 (post-widget-deploy)
#1 mobile pricing #2 hero strip-resize #3 CookieYes
#5 jq-menu touch #6 roman chapters #7 footer JQ
#8 plan-pop badge separator
════════════════════════════════════════════════════════════ */
/* #8 — Plan-pop badge får en liten hairline-rule under, gör att den känns
som ett editorial-stämpel istället för en svävande etikett. */
.gd-jq .gd-plan-pop .gd-plan-badge {
position: relative; padding-bottom: 10px !important;
}
.gd-jq .gd-plan-pop .gd-plan-badge::after {
content: ""; display: block;
width: 22px; height: 1px;
background: rgba(244,241,234,.45);
margin-top: 8px;
}
/* #1 — Mobile-priser: ytterligare polish (>375px-vy). Mellanrum + alignment. */
@media (max-width: 480px) {
.gd-jq .gd-plan { padding: 22px 18px; }
.gd-jq .gd-plan-name { font-size: 1.15rem; }
.gd-jq .gd-plan-num { font-size: 2rem; }
.gd-jq .gd-plan-desc { font-size: 13px; }
.gd-jq .gd-pt-btn { font-size: 9px; padding: 6px 0; }
.gd-jq .gd-cstep { grid-template-columns: 36px 1fr; }
.gd-jq .gd-cstep-t { font-size: 1.1rem; }
.gd-jq .gd-calc-big { font-size: clamp(2.4rem, 11vw, 3rem); }
}
/* #6 — Romersk kapitelnumrering på huvudsektioner via [data-jq-chapter].
Lägg `data-jq-chapter="I"` (eller II/III/IV…) på `.jq-sec` / `.gd-section`
så får eyebrow:n den klassiska JQ-/Halo-prefixen. */
.gd-jq [data-jq-chapter] > .jq-sec-head .jq-eyebrow,
.gd-jq [data-jq-chapter] > .gd-section-head .gd-sec-num,
.gd-jq [data-jq-chapter] > .jq-eyebrow,
.gd-jq [data-jq-chapter] > .gd-sec-num {
display: flex; align-items: baseline; gap: 14px;
}
.gd-jq [data-jq-chapter] > .jq-sec-head .jq-eyebrow::before,
.gd-jq [data-jq-chapter] > .gd-section-head .gd-sec-num::before,
.gd-jq [data-jq-chapter] > .jq-eyebrow::before,
.gd-jq [data-jq-chapter] > .gd-sec-num::before {
content: attr(data-jq-chapter); /* not visible — selectors below render it */
}
/* Cleaner approach: render chapter via section's own ::before */
.gd-jq section[data-jq-chapter]::before {
content: attr(data-jq-chapter) ".";
position: absolute; top: clamp(40px, 5vw, 80px); left: clamp(20px, 4vw, 80px);
font-family: var(--gd-serif); font-style: italic; font-weight: 400;
font-size: clamp(.95rem, 1.3vw, 1.15rem); color: var(--jq-stone);
letter-spacing: .04em; pointer-events: none;
z-index: 1;
}
.gd-jq section[data-jq-chapter] { position: relative; }
/* #7 — Footer i JQ-språk (när jq-r1 laddas) */
.gd-jq + .gd-footer,
.gd-footer.gd-footer { /* hög specificitet utan att kräva markup-ändring */
background: var(--jq-deep, #100F0D);
color: rgba(244,241,234,.72);
padding-top: clamp(72px, 8vw, 120px);
padding-bottom: 36px;
border-top: 1px solid rgba(244,241,234,.08);
}
.gd-jq + .gd-footer .gd-footer-brand .gd-logo-img,
body .gd-footer .gd-footer-brand .gd-logo-img { filter: brightness(0) invert(1); opacity: .92; }
.gd-jq + .gd-footer .gd-footer-tag,
body .gd-footer .gd-footer-tag {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400; font-style: italic;
font-size: 15px; line-height: 1.55;
color: rgba(244,241,234,.55);
max-width: 32ch;
}
.gd-jq + .gd-footer .gd-footer-col h4,
body .gd-footer .gd-footer-col h4 {
font-size: 10px; font-weight: 600;
letter-spacing: .34em; text-transform: uppercase;
color: rgba(244,241,234,.45);
margin: 0 0 18px;
font-family: 'Montserrat', system-ui, sans-serif;
}
.gd-jq + .gd-footer .gd-footer-col li,
body .gd-footer .gd-footer-col li {
font-size: 14px; line-height: 1.8;
color: rgba(244,241,234,.78);
padding: 2px 0;
}
.gd-jq + .gd-footer .gd-footer-col li a,
body .gd-footer .gd-footer-col li a {
color: rgba(244,241,234,.78);
text-decoration: none;
transition: color .25s ease, padding-left .35s cubic-bezier(.16,1,.3,1);
display: inline-block;
min-height: 32px; line-height: 32px;
}
.gd-jq + .gd-footer .gd-footer-col li a:hover,
body .gd-footer .gd-footer-col li a:hover { color: var(--jq-cream, #F4F1EA); padding-left: 6px; }
.gd-jq + .gd-footer .gd-footer-cities-label,
body .gd-footer .gd-footer-cities-label {
font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
color: rgba(244,241,234,.4); font-weight: 600;
font-family: 'Montserrat', system-ui, sans-serif;
}
.gd-jq + .gd-footer .gd-footer-cities a,
body .gd-footer .gd-footer-cities a {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-size: 14px; font-weight: 400;
color: rgba(244,241,234,.7);
min-height: 36px; display: inline-flex; align-items: center;
padding: 0 4px;
}
.gd-jq + .gd-footer .gd-footer-cities a:hover,
body .gd-footer .gd-footer-cities a:hover { color: var(--jq-cream, #F4F1EA); font-style: italic; }
.gd-jq + .gd-footer .gd-footer-bottom,
body .gd-footer .gd-footer-bottom {
border-top: 1px solid rgba(244,241,234,.08);
margin-top: 48px;
padding-top: 28px;
font-size: 11px; letter-spacing: .14em;
color: rgba(244,241,234,.35);
}
.gd-jq + .gd-footer .gd-footer-bottom a,
body .gd-footer .gd-footer-bottom a { color: rgba(244,241,234,.5); }
/* #3 — Complianz cookie-banner i JQ-språk (sajten kör Complianz, inte CookieYes) */
.cmplz-cookiebanner {
font-family: 'Montserrat', system-ui, sans-serif !important;
border-radius: 0 !important;
border: 1px solid var(--jq-line, #D5D9E2) !important;
box-shadow: 0 1px 1px rgba(21,23,27,.04), 0 4px 8px rgba(21,23,27,.06), 0 24px 48px -12px rgba(21,23,27,.18) !important;
background: var(--jq-cream, #F4F1EA) !important;
color: var(--jq-ink, #15171B) !important;
max-width: 440px !important;
}
/* Positionering: bottom-right på desktop, full-bredd bar i botten på mobil.
Aldrig täcker hero-rubriken. */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner.cmplz-bottom-right,
.cmplz-cookiebanner.cmplz-bottom-left,
.cmplz-cookiebanner.cmplz-center,
.cmplz-cookiebanner.cmplz-top-left,
.cmplz-cookiebanner.cmplz-top-right,
.cmplz-cookiebanner.cmplz-bottom,
.cmplz-cookiebanner.cmplz-top {
position: fixed !important;
top: auto !important;
left: auto !important;
right: 24px !important;
bottom: 24px !important;
transform: none !important;
min-width: 0 !important;
width: min(420px, calc(100vw - 48px)) !important;
max-width: 420px !important;
max-height: calc(100vh - 48px) !important;
overflow-y: auto !important;
margin: 0 !important;
z-index: 9999 !important;
}
@media (max-width: 720px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner.cmplz-bottom-right,
.cmplz-cookiebanner.cmplz-bottom-left,
.cmplz-cookiebanner.cmplz-center,
.cmplz-cookiebanner.cmplz-top-left,
.cmplz-cookiebanner.cmplz-top-right,
.cmplz-cookiebanner.cmplz-bottom,
.cmplz-cookiebanner.cmplz-top {
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-left: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
}
}
.cmplz-cookiebanner .cmplz-title {
font-family: 'Spectral', Georgia, serif !important;
font-weight: 400 !important; letter-spacing: -.01em !important;
font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
color: var(--jq-ink, #15171B) !important;
margin-bottom: 12px !important;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-categories {
font-size: 13.5px !important; line-height: 1.55 !important;
color: var(--jq-stone, #6C7079) !important;
}
.cmplz-cookiebanner .cmplz-btn,
.cmplz-cookiebanner button {
border-radius: 0 !important;
font-family: 'Montserrat', system-ui, sans-serif !important;
font-size: 10px !important; letter-spacing: .26em !important;
text-transform: uppercase !important; font-weight: 600 !important;
padding: 12px 22px !important; min-height: 44px !important;
transition: background .25s ease, color .25s ease, border-color .25s ease !important;
cursor: pointer !important;
}
.cmplz-cookiebanner .cmplz-accept {
background: var(--jq-ink, #15171B) !important;
color: var(--jq-cream, #F4F1EA) !important;
border: 1px solid var(--jq-ink, #15171B) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover { background: var(--jq-deep, #100F0D) !important; }
.cmplz-cookiebanner .cmplz-deny,
.cmplz-cookiebanner .cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-accept-marketing {
background: transparent !important;
color: var(--jq-ink, #15171B) !important;
border: 1px solid var(--jq-line, #D5D9E2) !important;
}
.cmplz-cookiebanner .cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-view-preferences:hover {
border-color: var(--jq-ink, #15171B) !important;
}
.cmplz-cookiebanner a {
color: var(--jq-accent, #1E73BE) !important;
text-underline-offset: 3px !important;
}
.cmplz-cookiebanner .cmplz-logo { display: none !important; }
.cmplz-manage-consent-container .cmplz-manage-consent {
border-radius: 0 !important;
background: var(--jq-ink, #15171B) !important;
color: var(--jq-cream, #F4F1EA) !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 10px !important; letter-spacing: .22em !important;
text-transform: uppercase !important;
}
/* #5 — Mobilmeny: redan 44px; säkra .jq-menu (overlay-varianten) */
.jq-menu a, .jq-menu button {
min-height: 44px; display: flex; align-items: center;
}
/* ════════════════════════════════════════════════════════════
OM OSS — editorial sektioner (manifest, portrait, löften, quotes)
════════════════════════════════════════════════════════════ */
/* §02 + §05 — Manifest (ren typografi) */
.gd-jq .jq-manifest { min-height: 95svh; display: flex; align-items: center; }
.gd-jq .jq-manifest .jq-sec-in {
display: flex; flex-direction: column; gap: 36px;
width: 100%;
}
.gd-jq .jq-manifest-q {
margin: 0; padding: 0; border: 0;
max-width: min(1100px, 92vw);
}
.gd-jq .jq-manifest-q p {
font-family: var(--gd-serif);
font-weight: 400; font-style: italic;
font-size: clamp(2rem, 5.5vw, 5rem);
line-height: 1.05; letter-spacing: -.015em;
color: var(--jq-ink); margin: 0;
}
.gd-jq .jq-manifest-q p em { font-style: italic; }
.gd-jq .jq-manifest-q cite {
display: block; margin-top: 32px;
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 11px; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone); font-style: normal;
}
.gd-jq .jq-sec--ink .jq-manifest-q p,
.gd-jq .jq-manifest--big .jq-eyebrow.is-light { color: var(--jq-cream); }
.gd-jq .jq-sec--ink .jq-manifest-foot { color: rgba(244,241,234,.6); }
.gd-jq .jq-manifest--big { min-height: 95svh; background: var(--jq-ink); color: var(--jq-cream); display: flex; align-items: center; }
.gd-jq .jq-manifest-big {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw;
margin: 32px 0;
padding-top: 24px; border-top: 1px solid rgba(244,241,234,.18);
}
.gd-jq .jq-mb-figure { display: flex; flex-direction: column; gap: 8px; }
.gd-jq .jq-mb-figure strong {
font-family: var(--gd-serif); font-weight: 400; font-style: italic;
font-size: clamp(3.4rem, 8vw, 7.4rem); line-height: .95;
color: var(--jq-cream); letter-spacing: -.02em;
}
.gd-jq .jq-mb-figure span {
font-family: 'Montserrat', sans-serif;
font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
color: rgba(244,241,234,.55);
}
.gd-jq .jq-manifest-foot {
font-size: 13.5px; line-height: 1.55; max-width: 56ch;
font-style: italic; color: rgba(244,241,234,.6);
}
/* §03 — prose-stats (under split) */
.gd-jq .jq-prose-stats {
display: flex; flex-wrap: wrap; gap: 36px;
margin: 36px 0 0; padding-top: 28px;
border-top: 1px solid var(--jq-line);
}
.gd-jq .jq-prose-stats > div { display: flex; flex-direction: column; gap: 4px; }
.gd-jq .jq-prose-stats dt {
font-size: 10px; font-weight: 600;
letter-spacing: .28em; text-transform: uppercase;
color: var(--jq-stone); margin: 0;
}
.gd-jq .jq-prose-stats dd {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1;
color: var(--jq-ink); margin: 0; letter-spacing: -.01em;
}
/* §04 — Specialist-portraits */
.gd-jq .jq-portrait {
display: grid; grid-template-columns: 1.05fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
padding: clamp(40px, 6vw, 96px) 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq .jq-portrait:last-child { border-bottom: 1px solid var(--jq-line); }
.gd-jq .jq-portrait--rev .jq-portrait-media { order: 2; }
.gd-jq .jq-portrait-media {
position: relative; margin: 0;
aspect-ratio: 4/5;
overflow: hidden; background: var(--jq-bg-lt);
}
.gd-jq .jq-portrait-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.2s var(--jq-ease);
}
.gd-jq .jq-portrait:hover .jq-portrait-media img { transform: scale(1.03); }
.gd-jq .jq-portrait-media figcaption {
position: absolute; left: 0; bottom: 0;
background: var(--jq-ink); color: var(--jq-cream);
font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600;
padding: 10px 16px;
}
.gd-jq .jq-portrait-text { display: flex; flex-direction: column; gap: 18px; }
.gd-jq .jq-portrait-num {
font-family: var(--gd-serif); font-style: italic; font-weight: 400;
font-size: 1.3rem; color: var(--jq-stone);
}
.gd-jq .jq-portrait-text h3 {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(2.2rem, 4.4vw, 4rem);
line-height: 1; letter-spacing: -.015em;
color: var(--jq-ink); margin: 0;
}
.gd-jq .jq-portrait-text h3 em { font-style: italic; }
.gd-jq .jq-portrait-title {
font-size: 11px; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone); margin: 0;
}
.gd-jq .jq-portrait-bio {
font-size: 15.5px; line-height: 1.65; color: var(--jq-ink);
margin: 4px 0 0; max-width: 48ch;
}
.gd-jq .jq-portrait-creds {
list-style: none; padding: 0; margin: 8px 0 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq .jq-portrait-creds li {
font-size: 13px; line-height: 1.6;
color: var(--jq-stone);
padding: 10px 0;
border-bottom: 1px solid var(--jq-line);
position: relative; padding-left: 22px;
}
.gd-jq .jq-portrait-creds li::before {
content: ""; position: absolute; left: 0; top: 18px;
width: 12px; height: 1px; background: var(--jq-stone);
}
/* §06 — Löften (4 i 2×2 rutnät, hairlines) */
.gd-jq .jq-loften {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--jq-line);
border-left: 1px solid var(--jq-line);
}
.gd-jq .jq-loften li {
padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px);
border-right: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
display: flex; flex-direction: column; gap: 16px;
min-height: 280px;
}
.gd-jq .jq-loften-n {
font-family: var(--gd-serif); font-style: italic; font-weight: 400;
font-size: 1.3rem; color: var(--jq-stone);
}
.gd-jq .jq-loften h3 {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
line-height: 1.05; letter-spacing: -.01em;
color: var(--jq-ink); margin: 0;
}
.gd-jq .jq-loften h3 em { font-style: italic; }
.gd-jq .jq-loften p {
font-size: 14.5px; line-height: 1.6;
color: var(--jq-stone); margin: 0;
}
/* §08 — Patient pull-quotes */
.gd-jq .jq-quotes {
display: grid; grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq .jq-quote {
margin: 0; padding: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 56px);
border-bottom: 1px solid var(--jq-line);
display: grid; grid-template-columns: 1fr auto;
gap: clamp(28px, 4vw, 64px); align-items: end;
}
/* När .jq-quote ligger i grid3 (kort-läge, inte testimonial-rad), full padding alla sidor */
.gd-jq .jq-grid3 .jq-quote {
display: flex; flex-direction: column; gap: 18px;
padding: clamp(32px, 4vw, 48px);
border: none;
align-items: stretch;
}
.gd-jq .jq-quote p {
font-family: var(--gd-serif); font-weight: 400; font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 2rem);
line-height: 1.35; letter-spacing: -.005em;
color: var(--jq-ink); margin: 0;
max-width: 38ch;
}
.gd-jq .jq-quote::before {
display: none; /* JQ: ingen ikon, ren typografi */
}
.gd-jq .jq-quote cite {
display: flex; flex-direction: column; gap: 4px;
font-style: normal; text-align: right;
min-width: 200px;
}
.gd-jq .jq-quote-name {
font-family: var(--gd-serif); font-weight: 500;
font-size: 1.1rem; color: var(--jq-ink);
}
.gd-jq .jq-quote-meta {
font-size: 10px; font-weight: 600;
letter-spacing: .24em; text-transform: uppercase;
color: var(--jq-stone);
}
/* §05 jq-eyebrow på mörk + §07/09 panel-num */
.gd-jq .jq-eyebrow.is-light { color: rgba(244,241,234,.55); }
.gd-jq .jq-panel-num {
display: block; font-family: 'Montserrat', sans-serif;
font-size: 10px; font-weight: 600;
letter-spacing: .34em; text-transform: uppercase;
color: rgba(244,241,234,.5); margin-bottom: 18px;
}
.gd-jq .jq-panel-h {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(1.8rem, 3.6vw, 3rem);
line-height: 1.05; letter-spacing: -.012em;
color: var(--jq-cream); margin: 0;
}
.gd-jq .jq-panel-h em { font-style: italic; }
/* outline-light CTA (för mörka scener) */
.gd-jq .gd-btn-outline-light {
background: transparent; border: 1px solid rgba(244,241,234,.4); color: var(--jq-cream);
}
.gd-jq .gd-btn-outline-light:hover { background: rgba(244,241,234,.08); border-color: var(--jq-cream); }
/* ─── Responsivt om-oss ─── */
@media (max-width: 980px) {
.gd-jq .jq-portrait { grid-template-columns: 1fr; gap: 32px; }
.gd-jq .jq-portrait--rev .jq-portrait-media { order: 0; }
.gd-jq .jq-loften { grid-template-columns: 1fr; }
.gd-jq .jq-manifest-big { grid-template-columns: 1fr; gap: 28px; }
.gd-jq .jq-quote { grid-template-columns: 1fr; gap: 14px; }
.gd-jq .jq-quote cite { text-align: left; min-width: 0; }
}
@media (max-width: 640px) {
.gd-jq .jq-prose-stats { gap: 20px; }
.gd-jq .jq-loften li { min-height: 0; padding: 28px 22px; }
}
/* ════════════════════════════════════════════════════════════
OM OSS — saknade base-tokens (jq-sec-in, jq-sec-head, jq-hero-*)
════════════════════════════════════════════════════════════ */
.gd-jq .jq-sec-in {
max-width: 1700px; margin: 0 auto; padding: 0 5vw;
}
.gd-jq .jq-sec-head {
display: grid; grid-template-columns: 1.05fr 1fr;
gap: clamp(24px, 4vw, 64px);
margin-bottom: clamp(40px, 5vw, 72px);
align-items: end;
}
.gd-jq .jq-sec-head > .jq-eyebrow,
.gd-jq .jq-sec-head > h2 { grid-column: 1; }
.gd-jq .jq-sec-head > .jq-sec-lead { grid-column: 2; align-self: end; }
@media (max-width: 860px) {
.gd-jq .jq-sec-head { grid-template-columns: 1fr; }
.gd-jq .jq-sec-head > .jq-sec-lead { grid-column: 1; }
}
.gd-jq .jq-sec-head h2 {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.02;
letter-spacing: -.015em; color: var(--jq-ink); margin: 0;
}
.gd-jq .jq-sec-head h2 em { font-style: italic; }
.gd-jq .jq-sec--ink .jq-sec-head h2,
.gd-jq .jq-sec--ink .jq-sec-head { color: var(--jq-cream); }
.gd-jq .jq-sec-lead {
font-size: 15.5px; line-height: 1.65;
color: var(--jq-stone); margin: 0;
}
.gd-jq .jq-sec--ink .jq-sec-lead { color: rgba(244,241,234,.7); }
.gd-jq .jq-sec--cream { background: var(--jq-cream); }
.gd-jq .jq-hero-lead {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.55; color: rgba(244,241,234,.85);
margin: 28px 0 0; max-width: 52ch;
}
.gd-jq .jq-hero-cue-line {
display: inline-block; width: 1px; height: 36px;
background: rgba(244,241,234,.45);
animation: gd-cue-pulse 1.8s ease-in-out infinite;
}
@keyframes gd-cue-pulse { 0%,100% { opacity: .35; transform: scaleY(.65); } 50% { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .jq-hero-cue-line { animation: none; } }
@media (max-width: 980px) {
.gd-jq .jq-sec-head { grid-template-columns: 1fr; gap: 16px; }
}
/* ════════════════════════════════════════════════════════════════════════════
STANDARDSIDOR — kontakt / tandreglering-hub / övriga (gd-pg-*)
Video-hero + editorial sektioner. Ärver palette/typografi från .gd-jq.
════════════════════════════════════════════════════════════════════════════ */
/* Video-hero — full-bleed med poster + dark veil */
.gd-jq .gd-pg-vhero { position: relative; min-height: 100svh; display: flex; align-items: center; background: var(--jq-deep); overflow: hidden; }
.gd-jq .gd-pg-vhero-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
z-index: 0; opacity: .42;
}
.gd-jq .gd-pg-vhero-veil {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(16,15,13,.72) 0%, rgba(16,15,13,.45) 40%, rgba(16,15,13,.92) 100%),
linear-gradient(95deg, rgba(16,15,13,.55) 0%, transparent 55%),
radial-gradient(80% 60% at 20% 50%, rgba(30,115,190,.08), transparent 70%);
}
.gd-jq .gd-pg-vhero .jq-hero-in { position: relative; z-index: 2; width: 100%; }
.gd-jq .gd-pg-vhero h1 {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(2.6rem, 8vw, 6.2rem); line-height: 1.02;
letter-spacing: -.018em; color: var(--jq-cream);
margin: 22px 0 0; max-width: 22ch;
}
.gd-jq .gd-pg-vhero h1 em { font-style: italic; color: currentColor; }
.gd-jq .gd-pg-vhero-lead {
font-family: var(--gd-serif); font-weight: 400;
font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55;
color: rgba(244,241,234,.82); margin: 26px 0 0; max-width: 52ch;
}
.gd-jq .gd-pg-vhero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.gd-jq .jq-btn--ghost-light {
background: transparent; color: var(--jq-cream);
border: 1px solid rgba(244,241,234,.45);
}
.gd-jq .jq-btn--ghost-light:hover { background: rgba(244,241,234,.08); border-color: var(--jq-cream); }
/* Figcaption under collage */
.gd-jq .gd-pg-fig {
margin-top: 14px;
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone);
}
/* Definition list för meta (adress / öppettider) */
.gd-jq .gd-pg-meta {
display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px 32px; margin: 32px 0 22px;
padding-top: 26px; border-top: 1px solid var(--jq-line);
}
.gd-jq .gd-pg-meta > div { margin: 0; }
.gd-jq .gd-pg-meta dt {
font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone); margin-bottom: 8px;
}
.gd-jq .gd-pg-meta dd {
margin: 0; font-family: var(--gd-serif);
font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.35;
color: var(--jq-ink);
}
/* Channels (kontakt) — 3 stora rader/kort */
.gd-jq .gd-pg-channels {
display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(28px, 3vw, 44px);
}
.gd-jq .gd-pg-channel {
position: relative; display: flex; flex-direction: column;
gap: 10px; padding: clamp(28px, 3vw, 40px);
background: var(--jq-cream); border: 1px solid var(--jq-line);
color: var(--jq-ink); text-decoration: none;
transition: transform .5s var(--jq-ease), border-color .3s ease, background .3s ease;
overflow: hidden; min-height: clamp(280px, 32vw, 360px);
}
.gd-jq .gd-pg-channel:hover { transform: translateY(-4px); border-color: var(--jq-ink); }
.gd-jq .gd-pg-channel--feat { background: var(--jq-ink); color: var(--jq-cream); border-color: var(--jq-ink); }
.gd-jq .gd-pg-channel--feat:hover { background: var(--jq-deep); }
.gd-jq .gd-pg-channel-n {
font-size: 10px; letter-spacing: .3em; color: var(--jq-stone);
}
.gd-jq .gd-pg-channel--feat .gd-pg-channel-n { color: rgba(244,241,234,.55); }
.gd-jq .gd-pg-channel-h {
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-stone); margin-top: 4px;
}
.gd-jq .gd-pg-channel--feat .gd-pg-channel-h { color: rgba(244,241,234,.6); }
.gd-jq .gd-pg-channel-big {
font-family: var(--gd-serif); font-size: clamp(1.55rem, 2.6vw, 2.2rem);
line-height: 1.15; margin-top: 14px;
}
.gd-jq .gd-pg-channel-sub {
font-size: 14px; line-height: 1.6; color: var(--jq-stone); margin-top: 8px;
max-width: 32ch;
}
.gd-jq .gd-pg-channel--feat .gd-pg-channel-sub { color: rgba(244,241,234,.7); }
.gd-jq .gd-pg-channel-hours {
margin-top: auto; padding-top: 18px;
font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone); border-top: 1px solid var(--jq-line);
}
.gd-jq .gd-pg-channel--feat .gd-pg-channel-hours { color: rgba(244,241,234,.55); border-color: rgba(244,241,234,.18); }
.gd-jq .gd-pg-channel-more {
display: flex; align-items: center; gap: 8px; margin-top: 14px;
font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}
.gd-jq .gd-pg-channel-more svg { width: 16px; height: 16px; transition: transform .3s ease; }
.gd-jq .gd-pg-channel:hover .gd-pg-channel-more svg { transform: translateX(4px); }
@media (max-width: 980px) {
.gd-jq .gd-pg-channels { grid-template-columns: 1fr; }
}
/* Map (kontakt § 03) — full-bleed mörk variant */
.gd-jq .gd-pg-map-wrap {
display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3vw, 40px);
margin-top: clamp(28px, 3vw, 44px); align-items: stretch;
}
.gd-jq .gd-pg-map {
position: relative; aspect-ratio: 4/3; min-height: 420px;
border: 1px solid var(--jq-line-d); background: var(--jq-ink); overflow: hidden;
}
.gd-jq .gd-pg-map iframe {
width: 100%; height: 100%; border: 0; display: block;
filter: grayscale(.4) brightness(.85) contrast(1.05);
}
.gd-jq .gd-pg-travel {
margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
}
.gd-jq .gd-pg-travel li {
display: grid; grid-template-columns: 1fr auto; align-items: baseline;
padding: 22px 0; border-bottom: 1px solid var(--jq-line-d); gap: 8px 18px;
}
.gd-jq .gd-pg-travel li:first-child { border-top: 1px solid var(--jq-line-d); }
.gd-jq .gd-pg-travel-mode {
grid-row: 1; grid-column: 1;
font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
color: rgba(244,241,234,.55);
}
.gd-jq .gd-pg-travel-dest {
grid-row: 2; grid-column: 1;
font-family: var(--gd-serif); font-size: clamp(1.1rem, 1.6vw, 1.4rem);
line-height: 1.25; color: var(--jq-cream);
}
.gd-jq .gd-pg-travel-time {
grid-row: 1 / span 2; grid-column: 2; align-self: center;
font-family: var(--gd-serif); font-size: clamp(1rem, 1.3vw, 1.2rem);
color: rgba(244,241,234,.78);
}
@media (max-width: 980px) {
.gd-jq .gd-pg-map-wrap { grid-template-columns: 1fr; }
.gd-jq .gd-pg-map { min-height: 320px; }
}
/* Säkerställ att äldre standardsides-CSS (.gd-pg-*) inte krockar med jq-hero */
.gd-jq .gd-pg-vhero .jq-hero-cue { color: rgba(244,241,234,.65); }
/* ════════════════════════════════════════════════════════════════════════
* STANDARDSIDOR — JQ pg-sections (text / linkcards / cards)
* ════════════════════════════════════════════════════════════════════════ */
.jq-head-lead {
grid-column: 2;
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-style: italic; font-weight: 400;
font-size: clamp(1rem, 1.35vw, 1.3rem);
line-height: 1.55;
color: var(--jq-stone, #6C7079);
margin: 0; max-width: 48ch; align-self: end; justify-self: start;
}
@media (max-width: 860px) {
.jq-head-lead { grid-column: 1; justify-self: start; }
}
/* — Editorial split med bild — */
.jq-pg-split { gap: clamp(40px, 6vw, 100px); align-items: center; }
.jq-pg-split--rev { direction: rtl; }
.jq-pg-split--rev > * { direction: ltr; }
.jq-pg-collage { width: 100%; }
.jq-pg-img {
display: block; width: 100%; height: 100%;
object-fit: cover;
border-radius: 0;
}
@media (max-width: 860px) {
.jq-pg-split--rev { direction: ltr; }
}
/* — Text-only sektion (utan bild) — */
.jq-pg-text {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(32px, 5vw, 96px);
align-items: start;
}
.jq-pg-text-head { padding-top: 12px; }
.jq-pg-text-body {
display: flex; flex-direction: column; gap: 18px;
}
.jq-pg-text-body p {
font-size: clamp(1rem, 1.15vw, 1.1rem);
line-height: 1.7;
color: var(--jq-ink, #15171B);
margin: 0;
max-width: 62ch;
}
.jq-sec--ink .jq-pg-text-body p { color: rgba(244,241,234,.82); }
@media (max-width: 860px) {
.jq-pg-text { grid-template-columns: 1fr; gap: 28px; }
}
/* — Link-card grid (5 bettfel eller 4 behandlingar etc.) — */
.jq-pg-linkgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1px;
background: var(--jq-line, #D5D9E2);
border: 1px solid var(--jq-line, #D5D9E2);
margin-top: clamp(28px, 3vw, 44px);
}
.jq-pg-linkgrid--3 { grid-template-columns: repeat(3, 1fr); }
.jq-pg-linkgrid--4 { grid-template-columns: repeat(2, 1fr); }
.jq-pg-linkgrid--5,
.jq-pg-linkgrid--6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 980px) {
.jq-pg-linkgrid--4 { grid-template-columns: repeat(4, 1fr); }
.jq-pg-linkgrid--5 { grid-template-columns: repeat(5, 1fr); }
}
.jq-sec--lav .jq-pg-linkgrid { background: var(--jq-line, #D5D9E2); border-color: var(--jq-line, #D5D9E2); }
.jq-sec--bg .jq-pg-linkgrid { background: rgba(21,23,27,.10); border-color: rgba(21,23,27,.10); }
.jq-pg-linkcard {
background: var(--jq-bg, #F0ECE2);
padding: clamp(28px, 3.4vw, 44px) clamp(24px, 2.8vw, 36px);
display: flex; flex-direction: column;
gap: 16px; min-height: 280px;
color: var(--jq-ink, #15171B);
transition: background .35s ease, transform .4s var(--jq-ease);
position: relative;
text-decoration: none;
}
.jq-sec--lav .jq-pg-linkcard { background: var(--jq-lav, #E2E6F0); }
.jq-pg-linkcard:hover {
background: var(--jq-ink, #15171B);
color: var(--jq-cream, #F4F1EA);
}
.jq-pg-linkcard-idx {
font-size: 10.5px; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone, #6C7079);
transition: color .35s ease;
}
.jq-pg-linkcard:hover .jq-pg-linkcard-idx { color: rgba(244,241,234,.55); }
.jq-pg-linkcard-h {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400;
font-size: clamp(1.45rem, 2vw, 1.85rem);
line-height: 1.18; letter-spacing: -.01em;
margin: 0;
}
.jq-pg-linkcard-p {
font-size: 13.5px; line-height: 1.6;
color: var(--jq-stone, #6C7079);
margin: 0; flex: 1;
transition: color .35s ease;
}
.jq-pg-linkcard:hover .jq-pg-linkcard-p { color: rgba(244,241,234,.78); }
.jq-pg-linkcard-more {
font-size: 10.5px; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
margin-top: 4px;
display: inline-flex; align-items: center; gap: 8px;
}
.jq-pg-linkcard-more span {
transition: transform .35s var(--jq-ease);
display: inline-block;
}
.jq-pg-linkcard:hover .jq-pg-linkcard-more span { transform: translateX(6px); }
/* — Benefits (numrerade kort utan länk) — */
.jq-pg-benefits {
display: grid;
gap: clamp(24px, 3vw, 44px);
margin-top: clamp(28px, 3vw, 44px);
}
.jq-pg-benefits--2 { grid-template-columns: repeat(2, 1fr); }
.jq-pg-benefits--3 { grid-template-columns: repeat(3, 1fr); }
.jq-pg-benefits--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 980px) {
.jq-pg-benefits--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
.jq-pg-benefits--2,
.jq-pg-benefits--3,
.jq-pg-benefits--4 { grid-template-columns: 1fr; }
}
.jq-pg-benefit {
display: flex; flex-direction: column;
gap: 14px;
padding-top: 28px;
border-top: 1px solid var(--jq-line, #D5D9E2);
}
.jq-sec--ink .jq-pg-benefit { border-top-color: rgba(244,241,234,.18); }
.jq-pg-benefit-num {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-style: italic; font-weight: 400;
font-size: 1rem;
color: var(--jq-stone, #6C7079);
}
.jq-pg-benefit-h {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400;
font-size: clamp(1.3rem, 1.9vw, 1.75rem);
line-height: 1.2; letter-spacing: -.01em;
margin: 0;
color: var(--jq-ink, #15171B);
}
.jq-sec--ink .jq-pg-benefit-h { color: var(--jq-cream); }
.jq-pg-benefit-p {
font-size: 14.5px; line-height: 1.65;
color: var(--jq-stone, #6C7079);
margin: 0; max-width: 38ch;
}
.jq-sec--ink .jq-pg-benefit-p { color: rgba(244,241,234,.72); }
/* ════════════════════════════════════════════════════════════════════════
* PRIS-CARD på behandlingssidor
* ════════════════════════════════════════════════════════════════════════ */
.jq-pricecard {
background: var(--jq-bg, #F0ECE2);
padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
border-radius: clamp(20px, 2.4vw, 32px);
border: 1px solid rgba(21,23,27,.08);
display: flex; flex-direction: column;
gap: clamp(8px, 1vw, 14px);
max-width: 460px;
width: 100%;
margin: 0 auto;
}
.jq-pricecard-eb {
font-size: 10px; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone, #6C7079);
margin-bottom: 10px;
}
.jq-pricecard-amount {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400;
font-style: italic;
font-size: clamp(2.6rem, 4.8vw, 4rem);
line-height: 1;
letter-spacing: -.015em;
color: var(--jq-ink, #15171B);
}
.jq-pricecard-meta {
font-size: 13.5px; line-height: 1.5;
color: var(--jq-ink, #15171B);
margin-top: 4px;
}
.jq-pricecard-fineprint {
font-size: 12px; line-height: 1.55;
color: var(--jq-stone, #6C7079);
margin: 4px 0 14px;
max-width: 38ch;
}
.jq-pricecard-cta { align-self: flex-start; margin-top: 6px; }
/* ════════════════════════════════════════════════════════════════════════
* COMPARISON-CARDS (awwwards-inspirerad) — mörk bakgrund, stora rundade kort
* ════════════════════════════════════════════════════════════════════════ */
.jq-compare-sec { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.jq-head--center {
grid-template-columns: 1fr !important;
text-align: center;
align-items: center !important;
margin-bottom: clamp(40px, 5vw, 72px);
}
.jq-head--center .jq-eyebrow { color: rgba(244,241,234,.5); margin-bottom: 14px; }
.jq-compare-h2 {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400;
font-size: clamp(2.4rem, 5.4vw, 4.8rem);
line-height: 1.05;
letter-spacing: -.015em;
color: var(--jq-cream, #F4F1EA);
margin: 0 auto;
max-width: none; text-wrap: balance;
text-align: center;
}
.jq-compare-h2 em { font-style: italic; font-weight: 400; }
.jq-compare-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 980px) { .jq-compare-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .jq-compare-grid { grid-template-columns: 1fr; } }
.jq-compare-card {
position: relative;
display: flex; flex-direction: column;
gap: clamp(18px, 2vw, 28px);
padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
border-radius: clamp(20px, 2.2vw, 32px);
background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
border: 1px solid rgba(244,241,234,.10);
color: var(--jq-cream, #F4F1EA);
text-decoration: none;
transition: transform .45s var(--jq-ease), background .35s ease, border-color .35s ease;
overflow: hidden;
}
.jq-compare-card::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(244,241,234,.06) 0%, transparent 60%);
pointer-events: none; opacity: 0;
transition: opacity .45s ease;
}
.jq-compare-card:hover { transform: translateY(-4px); border-color: rgba(244,241,234,.22); background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%); }
.jq-compare-card:hover::after { opacity: 1; }
.jq-compare-card.is-hi {
background: linear-gradient(180deg, #1E73BE 0%, #15568f 100%);
border-color: rgba(244,241,234,.22);
}
.jq-compare-card.is-hi:hover { background: linear-gradient(180deg, #2680cf 0%, #1965a8 100%); }
.jq-compare-card-eyebrow {
font-size: 10px; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: rgba(244,241,234,.55);
}
.jq-compare-card.is-hi .jq-compare-card-eyebrow { color: rgba(244,241,234,.78); }
.jq-compare-card-name {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400;
font-size: clamp(1.7rem, 2.4vw, 2.4rem);
line-height: 1.05;
letter-spacing: -.01em;
color: var(--jq-cream, #F4F1EA);
margin: 0;
}
.jq-compare-card-attrs {
display: flex; flex-direction: column;
gap: 0;
margin: 0; padding: 0;
flex: 1;
}
.jq-compare-card-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(244,241,234,.12);
}
.jq-compare-card-row:last-child { border-bottom: none; }
.jq-compare-card-row dt {
font-size: 9.5px; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
color: rgba(244,241,234,.5);
margin: 0;
}
.jq-compare-card.is-hi .jq-compare-card-row dt { color: rgba(244,241,234,.7); }
.jq-compare-card-row dd {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-style: italic;
font-weight: 400;
font-size: clamp(.95rem, 1.15vw, 1.05rem);
line-height: 1.3;
color: var(--jq-cream, #F4F1EA);
margin: 0;
text-align: right;
}
.jq-compare-card-more {
font-size: 10px; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-cream, #F4F1EA);
display: inline-flex; align-items: center; gap: 8px;
margin-top: 4px;
}
.jq-compare-card-more span {
transition: transform .35s var(--jq-ease);
display: inline-block;
}
.jq-compare-card:hover .jq-compare-card-more span { transform: translateX(6px); }
/* Behåll gamla jq-compare-* selectors som no-op om markup råkar finnas kvar */
.jq-compare {
margin-top: clamp(28px, 3vw, 44px);
font-family: var(--gd-sans, 'Montserrat', sans-serif);
}
.jq-compare-row {
display: grid;
grid-template-columns: 1.1fr repeat(4, 1fr);
gap: clamp(16px, 2vw, 32px);
padding: clamp(18px, 1.8vw, 26px) 0;
border-bottom: 1px solid var(--jq-line, #D5D9E2);
align-items: center;
}
.jq-compare-row:last-child { border-bottom: none; }
.jq-compare-head {
border-top: 1px solid var(--jq-line, #D5D9E2);
border-bottom: 1px solid var(--jq-line, #D5D9E2);
padding: clamp(20px, 2vw, 28px) 0;
}
.jq-compare-head .jq-compare-cell {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
font-weight: 400;
color: var(--jq-ink, #15171B);
letter-spacing: -.005em;
}
.jq-compare-head .jq-compare-cell a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .25s ease, color .25s ease;
padding-bottom: 2px;
}
.jq-compare-head .jq-compare-cell a:hover {
color: var(--jq-accent, #1E73BE);
border-bottom-color: currentColor;
}
.jq-compare-label {
font-size: 10px;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--jq-stone, #6C7079);
}
.jq-compare-cell {
font-size: clamp(.92rem, 1.1vw, 1rem);
line-height: 1.4;
color: var(--jq-ink, #15171B);
}
.jq-compare-cell--hi {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-style: italic;
font-size: clamp(1rem, 1.2vw, 1.1rem);
color: var(--jq-accent, #1E73BE);
}
@media (max-width: 860px) {
.jq-compare-row {
grid-template-columns: 1fr 1fr;
gap: 8px 18px;
padding: 16px 0;
}
.jq-compare-label {
grid-column: 1 / -1;
padding-bottom: 4px;
border-bottom: 1px solid var(--jq-line);
margin-bottom: 4px;
}
.jq-compare-head .jq-compare-label { display: none; }
.jq-compare-head { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* ════════════════════════════════════════════════════════════════════════
* FOOTER — JQ editorial
* ════════════════════════════════════════════════════════════════════════ */
.jq-footer {
background: var(--jq-ink, #15171B);
color: var(--jq-cream, #F4F1EA);
padding: 0;
font-family: var(--gd-sans, 'Montserrat', -apple-system, system-ui, sans-serif);
}
.jq-footer a { color: inherit; text-decoration: none; transition: color .25s ease; }
.jq-footer a:hover { color: rgba(244,241,234,.62); text-decoration: none; }
/* — Editorial statement — */
.jq-footer-statement {
padding: clamp(64px, 9vw, 140px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 96px);
border-bottom: 1px solid rgba(244,241,234,.12);
max-width: 1480px; margin: 0 auto;
display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 36px);
align-items: flex-start;
}
.jq-footer-statement .jq-eyebrow.is-light { color: rgba(244,241,234,.55); }
.jq-footer-statement h2 {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400; font-style: normal;
font-size: clamp(2.6rem, 6vw, 5.6rem);
line-height: 1.04; letter-spacing: -.015em;
color: var(--jq-cream); margin: 0; max-width: none; text-wrap: balance;
}
.jq-footer-statement h2 em { font-style: italic; font-weight: 400; }
.jq-footer-statement-lead {
font-size: clamp(1rem, 1.3vw, 1.18rem);
line-height: 1.6; color: rgba(244,241,234,.7);
margin: 0; max-width: 56ch;
}
.jq-footer-statement-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
/* — Kolumner — */
.jq-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
gap: clamp(28px, 4vw, 64px);
padding: clamp(56px, 7vw, 110px) clamp(24px, 5vw, 80px) clamp(40px, 5vw, 72px);
border-bottom: 1px solid rgba(244,241,234,.12);
max-width: 1480px; margin: 0 auto;
}
.jq-footer-brand .gd-logo { display: inline-block; margin-bottom: 22px; }
.jq-footer-brand .gd-logo-img { max-width: 168px; height: auto; filter: brightness(0) invert(1); opacity: .94; }
.jq-footer-tag {
font-size: 13.5px; line-height: 1.7;
color: rgba(244,241,234,.66);
margin: 0 0 22px; max-width: 36ch;
}
.jq-footer-adr {
font-style: normal; font-size: 13.5px; line-height: 1.6;
color: rgba(244,241,234,.78);
}
.jq-footer-adr a { display: inline-block; }
.jq-footer-adr a:hover { color: var(--jq-cream); }
.jq-footer-col { display: flex; flex-direction: column; gap: 14px; }
.jq-footer-col-h {
display: block;
font-family: var(--gd-sans);
font-size: 10.5px; font-weight: 600;
letter-spacing: .26em; text-transform: uppercase;
color: rgba(244,241,234,.5);
margin-bottom: 4px;
}
.jq-footer-col ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 9px;
}
.jq-footer-col li {
font-size: 14px; line-height: 1.55;
color: rgba(244,241,234,.82);
}
.jq-footer-col a {
display: inline-block; padding: 1px 0;
border-bottom: 1px solid transparent;
transition: color .25s ease, border-color .25s ease;
}
.jq-footer-col a:hover {
color: var(--jq-cream);
border-bottom-color: rgba(244,241,234,.4);
}
.jq-footer-callout {
margin-top: 20px; padding-top: 18px;
border-top: 1px solid rgba(244,241,234,.12);
display: flex; flex-direction: column; gap: 6px;
}
.jq-footer-callout-eb {
font-size: 10px; font-weight: 600; letter-spacing: .26em;
text-transform: uppercase; color: rgba(244,241,234,.48);
margin-bottom: 4px;
}
.jq-footer-tel {
font-family: var(--gd-serif); font-size: 1.45rem;
color: var(--jq-cream); line-height: 1.1;
display: inline-block; padding: 8px 0; min-height: 44px;
}
.jq-footer-mail {
font-size: 13.5px; color: rgba(244,241,234,.74);
display: inline-block; padding: 10px 0; min-height: 44px; line-height: 1.6;
}
/* — Städer — */
.jq-footer-cities {
padding: clamp(28px, 3.5vw, 48px) clamp(24px, 5vw, 80px);
max-width: 1480px; margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: baseline;
gap: clamp(16px, 2vw, 32px);
border-bottom: 1px solid rgba(244,241,234,.12);
}
.jq-footer-cities-label {
font-size: 10.5px; font-weight: 600; letter-spacing: .26em;
text-transform: uppercase; color: rgba(244,241,234,.5);
}
.jq-footer-cities-list {
display: flex; flex-wrap: wrap; gap: 18px;
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
}
.jq-footer-cities-list a {
font-size: clamp(1rem, 1.2vw, 1.15rem);
font-style: italic; color: rgba(244,241,234,.78);
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: color .25s ease, border-color .25s ease;
}
.jq-footer-cities-list a:hover {
color: var(--jq-cream);
border-bottom-color: rgba(244,241,234,.45);
}
/* — Bottom — */
.jq-footer-bottom {
padding: clamp(22px, 2.4vw, 34px) clamp(24px, 5vw, 80px) clamp(26px, 2.8vw, 38px);
max-width: 1480px; margin: 0 auto;
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap;
font-size: 12.5px; color: rgba(244,241,234,.5);
}
.jq-footer-legal { display: flex; gap: 12px; align-items: center; }
.jq-footer-legal a:hover { color: var(--jq-cream); }
@media (max-width: 1024px) {
.jq-footer-grid { grid-template-columns: 1fr 1fr; }
.jq-footer-brand { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 640px) {
.jq-footer-grid { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 36px; }
.jq-footer-statement { padding-top: 48px; padding-bottom: 40px; }
.jq-footer-statement h2 { font-size: clamp(2.2rem, 8.6vw, 3.2rem); }
.jq-footer-cities { flex-direction: column; align-items: flex-start; }
.jq-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Tysta gamla .gd-footer-* om de råkar finnas kvar i markup */
.gd-footer { background: var(--jq-ink, #15171B); color: var(--jq-cream, #F4F1EA); }
/* ════════════════════════════════════════════════════════════════════════════
░░ LANDING V2 — "Den levande transformationen" ░░
Award-edition. Editorial display-typografi, cinematisk hero,
bettfel-index med hover-anatomi, prisblad utan kort, ink-scen som sluter.
Endast färgerna är låsta — fonts, motion, layout är ny.
════════════════════════════════════════════════════════════════════════════ */
/* Skopa V2 till .gd-jq--v2 så övriga sidor inte påverkas */
/* ─── Hero v2 — 200vh scrub-scen, video som centerpiece ─────────────────── */
.gd-jq--v2 .jq-hero2 {
position: relative;
background: var(--jq-ink);
min-height: 200svh;
color: var(--jq-cream);
}
.gd-jq--v2 .jq-hero2-sticky {
position: sticky; top: 0;
height: 100svh; width: 100%;
overflow: hidden;
background: var(--jq-deep);
}
.gd-jq--v2 .jq-hero2-media {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.04);
/* Subtil saturation-/contrast-shift för cinematisk look */
filter: contrast(1.05) saturate(.96);
}
.gd-jq--v2 .jq-hero2-veil {
position: absolute; inset: 0;
pointer-events: none; z-index: 2;
background:
radial-gradient(ellipse at 30% 35%, rgba(16,15,13,0) 0%, rgba(16,15,13,.18) 38%, rgba(16,15,13,.78) 100%),
linear-gradient(180deg, rgba(16,15,13,.62) 0%, rgba(16,15,13,.05) 28%, rgba(16,15,13,.55) 78%, rgba(16,15,13,.92) 100%);
}
/* Decorative grid — mycket diskret editorial-rasterlinje */
.gd-jq--v2 .jq-hero2-grid {
position: absolute; inset: 0;
pointer-events: none; z-index: 3;
background-image:
linear-gradient(to right, rgba(244,241,234,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(244,241,234,.04) 1px, transparent 1px);
background-size: 12.5vw 25svh;
mix-blend-mode: overlay; opacity: .55;
}
/* Hero-panels — open + close paneler scrollar över sticky-videon */
.gd-jq--v2 .jq-hero2-panels {
position: relative; z-index: 10;
margin-top: -100svh;
}
.gd-jq--v2 .jq-hero2-panel {
min-height: 100svh;
display: flex; align-items: flex-end;
padding: clamp(48px, 8svh, 120px) 5vw;
color: var(--jq-cream);
}
.gd-jq--v2 .jq-hero2-panel--open { align-items: flex-end; }
.gd-jq--v2 .jq-hero2-panel--close { align-items: center; }
.gd-jq--v2 .jq-hero2-open { max-width: 1400px; width: 100%; }
.gd-jq--v2 .jq-hero2-h1 {
font-family: var(--gd-serif);
font-weight: 400; font-style: normal;
font-size: clamp(2.6rem, 11vw, 11rem);
line-height: .92;
letter-spacing: -.025em;
margin: clamp(20px, 3vh, 36px) 0 0;
color: var(--jq-cream);
text-wrap: balance;
}
.gd-jq--v2 .jq-hero2-h1 em { font-style: italic; color: currentColor; }
.gd-jq--v2 .jq-hero2-h1 .gd-mask { display: block; line-height: .96; padding-bottom: .03em; }
.gd-jq--v2 .jq-hero2-h1 .gd-mask:nth-child(2) { padding-left: clamp(0px, 3vw, 56px); }
.gd-jq--v2 .jq-hero2-h1 .gd-mask:nth-child(3) { padding-left: clamp(0px, 6vw, 112px); }
.gd-jq--v2 .jq-hero2-kicker {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.55;
max-width: 56ch;
margin: clamp(24px, 3vh, 40px) 0 0;
color: rgba(244,241,234,.86);
}
.gd-jq--v2 .jq-hero2-meta {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: clamp(28px, 4vh, 56px);
max-width: 820px;
font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
color: rgba(244,241,234,.86);
background: rgba(16,15,13,.42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(244,241,234,.08);
}
.gd-jq--v2 .jq-hero2-meta span {
display: block;
padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px);
line-height: 1.55;
border-right: 1px solid rgba(244,241,234,.12);
}
.gd-jq--v2 .jq-hero2-meta span:last-child { border-right: 0; }
.gd-jq--v2 .jq-hero2-meta b {
display: block;
font-family: var(--gd-serif);
font-weight: 400; font-size: 13px; letter-spacing: 0;
color: rgba(244,241,234,.85);
margin-bottom: 4px;
}
.gd-jq--v2 .jq-hero2-close { max-width: 1100px; }
.gd-jq--v2 .jq-hero2-pull {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.6rem, 4.4vw, 4.2rem);
line-height: 1.16;
letter-spacing: -.012em;
color: var(--jq-cream);
margin: clamp(20px, 3vh, 36px) 0 0;
max-width: 22ch;
text-wrap: balance;
}
.gd-jq--v2 .jq-hero2-pull em { color: currentColor; }
.gd-jq--v2 .jq-hero2-cta {
display: flex; flex-wrap: wrap; gap: 14px;
margin-top: clamp(28px, 4vh, 44px);
}
.gd-jq--v2 .jq-hero2-fine {
margin-top: 22px;
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: rgba(244,241,234,.5);
}
.gd-jq--v2 .jq-hero2-cue {
position: absolute; left: 5vw; bottom: clamp(20px, 4svh, 40px);
z-index: 20;
display: flex; flex-direction: column; gap: 12px;
font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase;
color: rgba(244,241,234,.55);
}
.gd-jq--v2 .jq-hero2-cue i {
width: 1px; height: 56px;
background: rgba(244,241,234,.18);
overflow: hidden; position: relative; display: block;
}
.gd-jq--v2 .jq-hero2-cue i::after {
content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 50%;
background: var(--jq-cream);
animation: jqCue 2.4s ease-in-out infinite;
}
/* ─── Manifest — en stor mening + fyra siffror i editorial-rytm ─────────── */
.gd-jq--v2 .jq-mfx { background: var(--jq-bg); }
.gd-jq--v2 .jq-mfx .jq-wrap {
padding-top: clamp(80px, 14vw, 200px);
padding-bottom: clamp(64px, 10vw, 140px);
}
.gd-jq--v2 .jq-mfx-lede { max-width: 1400px; }
.gd-jq--v2 .jq-mfx-statement {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.8rem, 4.6vw, 4.5rem);
line-height: 1.16;
letter-spacing: -.014em;
color: var(--jq-ink);
margin: clamp(20px, 2.4vw, 36px) 0 0;
text-wrap: balance;
}
.gd-jq--v2 .jq-mfx-statement em {
font-style: italic;
color: currentColor;
}
.gd-jq--v2 .jq-mfx-facts {
margin-top: clamp(72px, 10vw, 140px);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--jq-line);
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-mfx-fact {
background: var(--jq-bg);
padding: clamp(28px, 3.4vw, 56px) clamp(20px, 2.4vw, 40px);
display: flex; flex-direction: column; gap: 16px;
}
.gd-jq--v2 .jq-mfx-n {
font-family: var(--gd-serif);
font-size: clamp(2.6rem, 5.5vw, 5.2rem);
line-height: 1;
color: var(--jq-ink);
letter-spacing: -.025em;
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-mfx-n b {
font-weight: 400;
font-size: .4em;
margin-left: .06em;
vertical-align: .2em;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-mfx-l {
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone);
}
/* ─── Behandlingar — vertikal editorial-stack ───────────────────────────── */
.gd-jq--v2 .jq-bx {
background: var(--jq-ink);
color: var(--jq-cream);
padding: clamp(80px, 12vw, 180px) 0 clamp(80px, 12vw, 180px);
}
.gd-jq--v2 .jq-bx-head {
max-width: 1400px;
margin: 0 auto clamp(56px, 8vw, 120px);
padding: 0 5vw;
}
.gd-jq--v2 .jq-bx-h2 {
font-family: var(--gd-serif);
font-size: clamp(2.4rem, 7.8vw, 8rem);
line-height: .96;
letter-spacing: -.022em;
color: var(--jq-cream);
margin: clamp(18px, 2vw, 28px) 0 0;
text-wrap: balance;
}
.gd-jq--v2 .jq-bx-h2 em { font-style: italic; color: currentColor; }
.gd-jq--v2 .jq-bx-lede {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.45vw, 1.4rem);
line-height: 1.55;
color: rgba(244,241,234,.7);
margin: clamp(20px, 2.4vw, 32px) 0 0;
max-width: 50ch;
}
.gd-jq--v2 .jq-bx-list {
display: flex; flex-direction: column;
border-top: 1px solid rgba(244,241,234,.12);
}
.gd-jq--v2 .jq-bx-row {
display: grid;
grid-template-columns: clamp(80px, 11vw, 160px) minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(24px, 3vw, 56px);
align-items: start;
padding: clamp(40px, 6vw, 96px) 5vw;
border-bottom: 1px solid rgba(244,241,234,.12);
max-width: 1700px; margin: 0 auto; width: 100%;
}
.gd-jq--v2 .jq-bx-num {
font-family: var(--gd-serif);
font-size: clamp(2.4rem, 6vw, 6.2rem);
line-height: .9;
letter-spacing: -.02em;
color: rgba(244,241,234,.32);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-bx-text { display: flex; flex-direction: column; gap: 18px; padding-top: clamp(8px, 1vw, 22px); }
.gd-jq--v2 .jq-bx-cat {
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: rgba(244,241,234,.55);
}
.gd-jq--v2 .jq-bx-name {
font-family: var(--gd-serif);
font-size: clamp(2rem, 4.6vw, 4.4rem);
line-height: 1.02;
letter-spacing: -.018em;
color: var(--jq-cream);
margin: 0;
}
.gd-jq--v2 .jq-bx-desc {
font-size: 15px; line-height: 1.7;
color: rgba(244,241,234,.76);
max-width: 44ch;
margin: 0;
}
.gd-jq--v2 .jq-bx-more {
margin-top: 4px;
display: inline-flex; align-items: center; gap: 12px;
font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-cream);
text-decoration: none;
width: max-content;
border-bottom: 1px solid rgba(244,241,234,.32);
padding-bottom: 8px;
transition: border-color .35s var(--jq-ease), color .25s ease;
}
.gd-jq--v2 .jq-bx-more span { transition: transform .35s var(--jq-ease); display: inline-block; }
.gd-jq--v2 .jq-bx-more:hover { border-color: var(--jq-cream); }
.gd-jq--v2 .jq-bx-more:hover span { transform: translateX(8px); }
.gd-jq--v2 .jq-bx-media {
position: relative;
display: block;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--jq-deep);
text-decoration: none;
}
.gd-jq--v2 .jq-bx-media video,
.gd-jq--v2 .jq-bx-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.1s var(--jq-ease), filter .6s ease;
filter: contrast(1.05) saturate(.95);
}
.gd-jq--v2 .jq-bx-row:hover .jq-bx-media video,
.gd-jq--v2 .jq-bx-row:hover .jq-bx-media img {
transform: scale(1.04);
}
.gd-jq--v2 .jq-bx-media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(16,15,13,0) 60%, rgba(16,15,13,.42) 100%);
pointer-events: none;
}
/* ─── Bettfel diagnostiskt index — typografi-tabell med hover-anatomi ─── */
.gd-jq--v2 .jq-dx { background: var(--jq-bg); }
.gd-jq--v2 .jq-dx-list {
list-style: none;
margin: clamp(40px, 6vw, 80px) 0 0;
padding: 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-dx-row {
position: relative;
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-dx-link {
display: grid;
grid-template-columns: clamp(48px, 5vw, 88px) minmax(0, 1.1fr) minmax(0, 2fr) auto;
gap: clamp(20px, 3vw, 56px);
align-items: center;
padding: clamp(20px, 2.6vw, 36px) 0;
color: var(--jq-ink);
text-decoration: none;
transition: padding .35s var(--jq-ease), color .25s ease;
}
.gd-jq--v2 .jq-dx-row:hover .jq-dx-link { padding-left: clamp(8px, 1.4vw, 24px); }
.gd-jq--v2 .jq-dx-num {
font-family: var(--gd-serif);
font-size: clamp(1.2rem, 1.8vw, 1.7rem);
line-height: 1;
color: var(--jq-stone);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-dx-name {
font-family: var(--gd-serif);
font-size: clamp(1.8rem, 4vw, 3.6rem);
line-height: 1.04;
letter-spacing: -.018em;
color: var(--jq-ink);
}
.gd-jq--v2 .jq-dx-def {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(.98rem, 1.2vw, 1.18rem);
line-height: 1.5;
color: var(--jq-stone);
max-width: 48ch;
}
.gd-jq--v2 .jq-dx-arrow {
font-family: var(--gd-serif);
font-size: clamp(1.4rem, 2vw, 1.9rem);
color: var(--jq-stone);
transition: transform .4s var(--jq-ease), color .25s ease;
transform-origin: left center;
}
.gd-jq--v2 .jq-dx-row:hover .jq-dx-arrow { transform: translateX(12px); color: var(--jq-accent); }
/* Hover-anatomi — floating preview till höger, fadar in vid hover */
.gd-jq--v2 .jq-dx-anatomy {
position: absolute;
right: clamp(20px, 4vw, 80px);
top: 50%;
width: clamp(180px, 22vw, 320px);
aspect-ratio: 4/3;
transform: translate(20px, -50%) scale(.96);
opacity: 0;
pointer-events: none;
overflow: hidden;
box-shadow:
0 1px 1px rgba(21,23,27,.06),
0 12px 24px rgba(21,23,27,.10),
0 36px 72px -12px rgba(21,23,27,.22);
transition: opacity .5s var(--jq-ease), transform .55s var(--jq-ease);
z-index: 4;
}
.gd-jq--v2 .jq-dx-anatomy img {
width: 100%; height: 100%; object-fit: cover;
filter: contrast(1.04) saturate(.92);
}
.gd-jq--v2 .jq-dx-row:hover .jq-dx-anatomy {
opacity: 1;
transform: translate(0, -50%) scale(1);
}
@media (hover: none) {
/* Touch-användare: anatomi-bilden visas inline vid expanderad rad (tap-to-expand) */
.gd-jq--v2 .jq-dx-row--touch .jq-dx-anatomy {
position: relative;
display: block;
right: auto;
top: auto;
transform: none;
width: 100%;
max-width: 320px;
margin: 0 auto;
aspect-ratio: 4/3;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity .4s var(--jq-ease), max-height .5s var(--jq-ease);
box-shadow: none;
}
.gd-jq--v2 .jq-dx-row.is-expanded .jq-dx-anatomy {
opacity: 1;
max-height: 280px;
margin-bottom: 16px;
}
/* Visuell hint att raden är expanderbar — pil pekar nedåt */
.gd-jq--v2 .jq-dx-row--touch .jq-dx-arrow::after {
content: "↓";
display: inline-block;
margin-left: 2px;
font-size: .7em;
opacity: .5;
}
.gd-jq--v2 .jq-dx-row.is-expanded .jq-dx-arrow::after { content: "↑"; }
}
/* ─── Specialister — porträtt-scene utan ramar ──────────────────────────── */
.gd-jq--v2 .jq-spx { background: var(--jq-bg); }
.gd-jq--v2 .jq-spx-head { max-width: 1400px; }
.gd-jq--v2 .jq-spx-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 80px);
margin-top: clamp(48px, 7vw, 96px);
}
.gd-jq--v2 .jq-spx-fig {
margin: 0;
display: flex; flex-direction: column;
gap: clamp(20px, 2.6vw, 36px);
}
.gd-jq--v2 .jq-spx-portrait-w {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--jq-deep);
}
.gd-jq--v2 .jq-spx-portrait {
width: 100%; height: 100%;
object-fit: cover; object-position: center 22%;
filter: contrast(1.05) saturate(.94);
transition: transform 1.1s var(--jq-ease), filter .6s ease;
}
.gd-jq--v2 .jq-spx-fig:hover .jq-spx-portrait { transform: scale(1.03); }
.gd-jq--v2 .jq-spx-tag {
position: absolute; left: clamp(16px, 1.6vw, 24px); top: clamp(16px, 1.6vw, 24px);
z-index: 2;
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-cream);
padding: 6px 12px;
background: rgba(21,23,27,.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.gd-jq--v2 .jq-spx-fig figcaption {
display: flex; flex-direction: column; gap: 14px;
}
.gd-jq--v2 .jq-spx-name {
font-family: var(--gd-serif);
font-size: clamp(1.7rem, 3vw, 2.8rem);
line-height: 1.04;
letter-spacing: -.012em;
color: var(--jq-ink);
}
.gd-jq--v2 .jq-spx-role {
font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-spx-bio {
font-size: 15px; line-height: 1.72;
color: #544b3a;
max-width: 44ch; margin: 4px 0 0;
}
.gd-jq--v2 .jq-spx-credo {
margin: clamp(72px, 10vw, 140px) auto 0;
max-width: 1100px;
border-top: 1px solid var(--jq-line);
padding-top: clamp(32px, 4vw, 56px);
display: flex; flex-direction: column; gap: 24px;
}
.gd-jq--v2 .jq-spx-credo p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.5rem, 3.4vw, 3.2rem);
line-height: 1.24;
letter-spacing: -.014em;
color: var(--jq-ink);
margin: 0;
text-wrap: balance;
}
.gd-jq--v2 .jq-spx-credo em { color: currentColor; }
.gd-jq--v2 .jq-spx-credo cite {
font-style: normal;
font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-stone);
}
/* ─── Process typografi-driven (ink, ingen video-bg) ────────────────────── */
.gd-jq--v2 .jq-pp {
background: var(--jq-ink); color: var(--jq-cream);
}
.gd-jq--v2 .jq-pp-head { max-width: 1400px; }
.gd-jq--v2 .jq-pp-head h2 {
font-family: var(--gd-serif);
font-size: clamp(2.4rem, 7vw, 7.4rem);
line-height: .96;
letter-spacing: -.02em;
margin: clamp(16px, 2vw, 28px) 0 0;
color: var(--jq-cream);
text-wrap: balance;
}
.gd-jq--v2 .jq-pp-head h2 em { font-style: italic; color: currentColor; }
.gd-jq--v2 .jq-pp-lede {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.45rem);
line-height: 1.55;
color: rgba(244,241,234,.7);
max-width: 52ch;
margin: clamp(20px, 2.4vw, 32px) 0 0;
}
/* Process — editorial vertical-track: stora siffror vänster, content
center, varaktighet höger. Verticla center-linje binder samman stegen. */
.gd-jq--v2 .jq-pp-track {
list-style: none;
margin: clamp(48px, 7vw, 96px) auto 0;
max-width: 1100px;
padding: 0;
position: relative;
}
.gd-jq--v2 .jq-pp-track::before {
content: "";
position: absolute;
left: clamp(60px, 7vw, 110px);
top: clamp(40px, 5vw, 64px);
bottom: clamp(40px, 5vw, 64px);
width: 1px;
background: linear-gradient(180deg,
rgba(244,241,234,.05) 0%,
rgba(244,241,234,.32) 12%,
rgba(244,241,234,.32) 88%,
rgba(244,241,234,.05) 100%);
}
.gd-jq--v2 .jq-pp-row {
position: relative;
display: grid;
grid-template-columns: clamp(120px, 14vw, 220px) minmax(0, 1fr) clamp(80px, 10vw, 140px);
gap: clamp(24px, 3vw, 56px);
align-items: baseline;
padding: clamp(28px, 3.4vw, 52px) 0;
border-bottom: 1px solid rgba(244,241,234,.10);
}
.gd-jq--v2 .jq-pp-row:last-child { border-bottom: 0; }
.gd-jq--v2 .jq-pp-n {
font-family: var(--gd-serif);
font-size: clamp(2rem, 3.6vw, 3.6rem);
line-height: 1;
letter-spacing: -.022em;
color: rgba(244,241,234,.32);
font-feature-settings: "tnum" on, "lnum" on;
position: relative;
z-index: 1;
transition: color .5s var(--jq-ease);
}
.gd-jq--v2 .jq-pp-row:hover .jq-pp-n { color: rgba(244,241,234,.78); }
.gd-jq--v2 .jq-pp-c { display: flex; flex-direction: column; gap: 10px; }
.gd-jq--v2 .jq-pp-h {
font-family: var(--gd-serif);
font-size: clamp(1.5rem, 2.4vw, 2.2rem);
line-height: 1.04;
letter-spacing: -.014em;
margin: 0;
color: var(--jq-cream);
}
.gd-jq--v2 .jq-pp-p {
font-size: 14.5px;
line-height: 1.68;
color: rgba(244,241,234,.72);
margin: 0;
max-width: 48ch;
}
.gd-jq--v2 .jq-pp-t {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(.95rem, 1.1vw, 1.05rem);
line-height: 1.3;
color: rgba(244,241,234,.45);
text-align: right;
letter-spacing: 0;
}
@media (max-width: 900px) {
.gd-jq--v2 .jq-pp-track::before {
left: 28px;
top: 28px;
bottom: 28px;
}
.gd-jq--v2 .jq-pp-row {
grid-template-columns: 60px 1fr;
gap: 16px;
padding: 24px 0;
}
.gd-jq--v2 .jq-pp-n {
font-size: clamp(1.5rem, 6vw, 2.4rem);
}
.gd-jq--v2 .jq-pp-t {
grid-column: 2;
text-align: left;
font-size: 12px;
color: rgba(244,241,234,.55);
margin-top: 4px;
}
.gd-jq--v2 .jq-pp-h { font-size: clamp(1.2rem, 5.4vw, 1.7rem); }
}
/* ─── Evidence — före/efter (stor) + två videocitat under ───────────────── */
.gd-jq--v2 .jq-ev { background: var(--jq-bg); }
.gd-jq--v2 .jq-ev-lede {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.45vw, 1.4rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 56ch;
margin: clamp(20px, 2.4vw, 32px) 0 0;
}
.gd-jq--v2 .jq-ev-stage {
margin-top: clamp(48px, 7vw, 96px);
}
.gd-jq--v2 .jq-ev-ba {
display: flex; flex-direction: column; gap: 20px;
}
/* Stor cinematisk before/after */
.gd-jq--v2 .jq-ev-ba .gd-ba-frame {
aspect-ratio: 16/9;
width: 100%;
overflow: hidden;
background: var(--jq-deep);
}
.gd-jq--v2 .jq-ev-cap {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--gd-serif); font-style: italic;
font-size: 14.5px;
color: var(--jq-stone);
border-top: 1px solid var(--jq-line);
padding-top: 16px;
}
.gd-jq--v2 .jq-ev-cap .dim {
font-style: normal;
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
}
.gd-jq--v2 .jq-ev-voices {
margin-top: clamp(64px, 9vw, 120px);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(32px, 4vw, 64px);
}
.gd-jq--v2 .jq-ev-voice {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin: 0;
}
.gd-jq--v2 .jq-ev-voice-vid {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--jq-deep);
cursor: pointer;
}
.gd-jq--v2 .jq-ev-voice-vid .gd-yt-thumb {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: contrast(1.05) saturate(.9);
transition: transform 1s var(--jq-ease);
}
.gd-jq--v2 .jq-ev-voice-vid:hover .gd-yt-thumb { transform: scale(1.04); }
.gd-jq--v2 .jq-ev-play {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 76px; height: 76px;
border-radius: 50%;
border: 1px solid rgba(244,241,234,.7);
background: rgba(21,23,27,.42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--jq-cream);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform .4s var(--jq-ease), background .3s ease, border-color .3s ease;
}
.gd-jq--v2 .jq-ev-voice-vid:hover .jq-ev-play {
transform: translate(-50%, -50%) scale(1.08);
background: var(--jq-accent);
border-color: var(--jq-accent);
}
.gd-jq--v2 .jq-ev-voice figcaption {
display: flex; flex-direction: column; gap: 12px;
}
.gd-jq--v2 .jq-ev-voice blockquote {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.15rem, 1.8vw, 1.7rem);
line-height: 1.4;
color: var(--jq-ink);
margin: 0;
}
.gd-jq--v2 .jq-ev-voice blockquote::before { content: "\201C"; margin-right: .12em; color: var(--jq-stone); }
.gd-jq--v2 .jq-ev-voice blockquote::after { content: "\201D"; margin-left: .08em; color: var(--jq-stone); }
.gd-jq--v2 .jq-ev-voice cite {
font-style: normal;
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-stone);
}
/* ─── Investering — editorial prisblad + minimal calc + närhetsmeny ────── */
.gd-jq--v2 .jq-ix { background: var(--jq-bg); }
.gd-jq--v2 .jq-ix .jq-head { display: flex; flex-direction: column; }
.gd-jq--v2 .jq-ix .jq-head h2 {
font-family: var(--gd-serif);
font-size: clamp(2.4rem, 7vw, 7.2rem);
line-height: .96;
letter-spacing: -.02em;
margin: clamp(16px, 2vw, 28px) 0 0;
}
.gd-jq--v2 .jq-ix-lede {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.45vw, 1.4rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 60ch;
margin: clamp(18px, 2.4vw, 32px) 0 0;
}
.gd-jq--v2 .jq-ix-toggle {
margin-top: clamp(28px, 3.4vw, 44px);
display: inline-flex; align-self: flex-start;
position: relative;
border: 1px solid var(--jq-line);
padding: 4px;
background: var(--jq-cream);
}
.gd-jq--v2 .jq-ix-toggle-btn {
position: relative; z-index: 2;
background: none; border: 0;
font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
padding: 12px 22px;
cursor: pointer;
color: var(--jq-stone);
transition: color .25s ease;
}
.gd-jq--v2 .jq-ix-toggle-btn.is-active { color: var(--jq-ink); }
.gd-jq--v2 .jq-ix-toggle-ind {
position: absolute; z-index: 1; top: 4px; left: 4px;
height: calc(100% - 8px); width: calc(50% - 4px);
background: var(--jq-ink);
transition: transform .35s var(--jq-ease);
}
.gd-jq--v2 .jq-ix-toggle.is-month .jq-ix-toggle-ind { transform: translateX(100%); }
.gd-jq--v2 .jq-ix-toggle-btn.is-active { color: var(--jq-cream); }
/* Prisblad — typografi-tabell, ingen kort-look */
.gd-jq--v2 .jq-ix-table {
margin-top: clamp(40px, 6vw, 80px);
border-top: 1px solid var(--jq-line);
box-shadow: none !important;
background: transparent;
}
.gd-jq--v2 .jq-ix-tr {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
gap: clamp(24px, 3vw, 56px);
align-items: center;
padding: clamp(28px, 3.4vw, 52px) 0;
border-bottom: 1px solid var(--jq-line);
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
transform: none !important;
}
.gd-jq--v2 .jq-ix-tr:hover { background: transparent !important; transform: none !important; }
.gd-jq--v2 .jq-ix-tr--head {
padding: 16px 0;
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-ix-tr--head .r { text-align: right; }
.gd-jq--v2 .jq-ix-tr--pop { position: relative; }
.gd-jq--v2 .jq-ix-tr--pop::before {
content: "";
position: absolute; left: -16px; top: clamp(28px, 3.4vw, 52px);
width: 6px; height: clamp(56px, 6vw, 84px);
background: var(--jq-accent);
}
.gd-jq--v2 .jq-ix-td-name {
display: flex; flex-direction: column; gap: 10px;
}
.gd-jq--v2 .jq-ix-badge {
display: inline-block;
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-accent);
background: none; padding: 0;
border-radius: 0;
margin: 0;
align-self: flex-start;
}
.gd-jq--v2 .jq-ix-name {
font-family: var(--gd-serif);
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
line-height: 1.05;
letter-spacing: -.014em;
margin: 0; font-weight: 400;
color: var(--jq-ink);
}
.gd-jq--v2 .jq-ix-desc {
font-family: var(--gd-serif); font-style: italic;
font-size: 14px; line-height: 1.5;
color: var(--jq-stone);
margin: 0;
}
.gd-jq--v2 .jq-ix-td-inc ul {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
font-size: 13.5px; line-height: 1.55;
color: #544b3a;
}
.gd-jq--v2 .jq-ix-td-inc li {
padding-left: 18px;
position: relative;
}
.gd-jq--v2 .jq-ix-td-inc li::before {
content: "—";
position: absolute; left: 0; top: 0;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-ix-td-price {
display: flex; flex-direction: column; gap: 12px;
text-align: right;
align-items: flex-end;
}
.gd-jq--v2 .jq-ix-td-price.r { align-items: flex-end; }
.gd-jq--v2 .jq-ix-num {
font-family: var(--gd-serif);
font-size: clamp(2.4rem, 5.2vw, 4.8rem);
line-height: 1;
letter-spacing: -.024em;
color: var(--jq-ink);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-ix-unit {
font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
color: var(--jq-stone);
display: flex; flex-direction: column; gap: 2px;
}
.gd-jq--v2 .jq-ix-unit small {
font-size: 9.5px; letter-spacing: .26em;
color: rgba(108,112,121,.7);
}
.gd-jq--v2 .jq-ix-td-price .jq-btn { margin-top: 8px; }
/* Minimerad calc — kvar i form men typografi-driven */
.gd-jq--v2 .jq-ix-calc {
margin-top: clamp(56px, 8vw, 112px);
padding: clamp(32px, 4vw, 64px) 0;
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-ix-calc-head { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.gd-jq--v2 .jq-ix-calc-h {
font-family: var(--gd-serif);
font-size: clamp(1.8rem, 3.8vw, 3.4rem);
line-height: 1.04;
letter-spacing: -.018em;
margin: 0; font-weight: 400;
color: var(--jq-ink);
}
.gd-jq--v2 .jq-ix-cstepper {
list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--jq-line);
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-ix-cstepper .gd-cstep {
background: var(--jq-bg);
padding: clamp(20px, 2.6vw, 36px);
display: flex; flex-direction: column; gap: 16px;
min-height: 280px;
}
.gd-jq--v2 .jq-ix-cstepper .gd-cstep-rail { display: none; }
.gd-jq--v2 .jq-ix-cstepper .gd-cstep-head {
background: none; border: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
align-items: flex-start;
cursor: default;
}
.gd-jq--v2 .jq-ix-cstepper .gd-cstep-t {
font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-ix-cstepper .gd-cstep-pick {
font-family: var(--gd-serif);
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
color: var(--jq-ink);
}
.gd-jq--v2 .jq-ix-cstepper .gd-cstep-panel {
display: block !important; height: auto !important; opacity: 1 !important;
}
.gd-jq--v2 .jq-ix-cstepper .gd-copts {
display: flex; flex-direction: column; gap: 6px;
}
.gd-jq--v2 .jq-ix-cstepper .gd-copts-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.gd-jq--v2 .jq-ix-cstepper .gd-copt {
background: var(--jq-cream); border: 1px solid var(--jq-line);
padding: 12px 16px;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; cursor: pointer;
color: var(--jq-ink);
transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.gd-jq--v2 .jq-ix-cstepper .gd-copt:hover { background: var(--jq-ink); color: var(--jq-cream); border-color: var(--jq-ink); }
.gd-jq--v2 .jq-ix-cstepper .gd-copt.is-active { background: var(--jq-ink); color: var(--jq-cream); border-color: var(--jq-ink); }
.gd-jq--v2 .jq-ix-cstepper .gd-copt strong { font-weight: 600; }
.gd-jq--v2 .jq-ix-cstepper .gd-calc-result {
display: flex; flex-direction: column; gap: 10px;
}
.gd-jq--v2 .jq-ix-cstepper .gd-calc-big {
font-family: var(--gd-serif);
font-size: clamp(2.2rem, 4.4vw, 4.2rem);
line-height: 1;
letter-spacing: -.022em;
color: var(--jq-ink);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-ix-cstepper .gd-calc-sub {
font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-ix-cstepper .gd-calc-fine {
font-size: 11px; color: var(--jq-stone); margin-top: 8px;
}
/* Närhetsmeny — diskret fot */
.gd-jq--v2 .jq-ix-cities {
margin-top: clamp(56px, 8vw, 112px);
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
gap: clamp(32px, 4vw, 80px);
border-top: 1px solid var(--jq-line);
padding-top: clamp(32px, 4vw, 56px);
}
.gd-jq--v2 .jq-ix-cities-head p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1rem, 1.3vw, 1.25rem);
line-height: 1.55;
color: var(--jq-stone);
margin: 12px 0 0;
max-width: 38ch;
}
.gd-jq--v2 .jq-ix-cities-list {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--jq-line);
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
align-self: start;
}
.gd-jq--v2 .jq-ix-cities-list a {
background: var(--jq-bg);
padding: clamp(16px, 1.6vw, 22px);
display: flex; flex-direction: column; gap: 6px;
text-decoration: none;
color: var(--jq-ink);
transition: background .25s ease, color .25s ease;
}
.gd-jq--v2 .jq-ix-cities-list a:hover { background: var(--jq-ink); color: var(--jq-cream); }
.gd-jq--v2 .jq-ix-cities-list a:hover .n,
.gd-jq--v2 .jq-ix-cities-list a:hover .d { color: rgba(244,241,234,.65); }
.gd-jq--v2 .jq-ix-cities-list .n {
font-family: var(--gd-serif);
font-size: 13px;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-ix-cities-list .c {
font-family: var(--gd-serif);
font-size: clamp(1.25rem, 1.7vw, 1.55rem);
line-height: 1.1;
}
.gd-jq--v2 .jq-ix-cities-list .d {
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone);
}
/* ─── Final CTA — scrubbed strip + två paneler ───────────────────────────── */
.gd-jq--v2 .jq-fc {
background: var(--jq-ink); color: var(--jq-cream);
}
.gd-jq--v2 .jq-fc-sticky { background: var(--jq-deep); }
.gd-jq--v2 .jq-fc-veil {
position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(16,15,13,.55) 0%, rgba(16,15,13,.18) 35%, rgba(16,15,13,.6) 80%, rgba(16,15,13,.95) 100%);
}
.gd-jq--v2 .jq-fc-panel { padding: clamp(48px, 9svh, 120px) 5vw; }
.gd-jq--v2 .jq-fc-close { max-width: 1100px; }
.gd-jq--v2 .jq-fc-h2 {
font-family: var(--gd-serif);
font-size: clamp(2.6rem, 9vw, 9rem);
line-height: .94;
letter-spacing: -.022em;
color: var(--jq-cream);
margin: clamp(16px, 2vw, 28px) 0 0;
text-wrap: balance;
}
.gd-jq--v2 .jq-fc-h2 em { font-style: italic; color: currentColor; }
.gd-jq--v2 .jq-fc-cta {
display: flex; gap: 14px; flex-wrap: wrap;
margin-top: clamp(28px, 4vh, 44px);
}
.gd-jq--v2 .jq-fc-fine {
margin-top: 22px;
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: rgba(244,241,234,.5);
}
/* ─── Mask-reveal v2 — långsammare, mer deliberate ──────────────────────── */
.gd-jq--v2 .gd-mask > span {
transition: transform 1.25s cubic-bezier(.18,.74,.18,1);
}
.gd-jq--v2 .gd-mask-stagger > .gd-mask:nth-child(2) > span { transition-delay: .12s; }
.gd-jq--v2 .gd-mask-stagger > .gd-mask:nth-child(3) > span { transition-delay: .24s; }
/* ─── Mobil-optimering V2 ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
/* Mobile hero: video som bakgrund, text overlay (klassisk hero-layout).
Sticky/scrub-arkitekturen passar inte små viewports — fall tillbaka
till en enda 100svh-sektion med video bakom och text på toppen. */
.gd-jq--v2 .jq-hero2 { min-height: 100svh; position: relative; }
.gd-jq--v2 .jq-hero2-sticky { position: absolute; inset: 0; height: 100%; }
.gd-jq--v2 .jq-hero2-panels { margin-top: 0; position: relative; z-index: 5; }
.gd-jq--v2 .jq-hero2-panel { min-height: 100svh; padding: clamp(80px, 14vh, 140px) 24px clamp(40px, 8vh, 80px); }
.gd-jq--v2 .jq-hero2-panel--open { align-items: flex-start; padding-top: clamp(100px, 16vh, 160px); }
.gd-jq--v2 .jq-hero2-panel--close { display: none; } /* Close-panel skippas på mobil för en kompakt hero */
.gd-jq--v2 .jq-hero2-h1 { font-size: clamp(2.4rem, 11vw, 4.4rem); }
.gd-jq--v2 .jq-hero2-h1 .gd-mask:nth-child(2) { padding-left: 24px; }
.gd-jq--v2 .jq-hero2-h1 .gd-mask:nth-child(3) { padding-left: 48px; }
.gd-jq--v2 .jq-hero2-meta { grid-template-columns: 1fr; gap: 12px; }
.gd-jq--v2 .jq-hero2-pull { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
.gd-jq--v2 .jq-hero2-cue { display: none; }
.gd-jq--v2 .jq-mfx-statement { font-size: clamp(1.45rem, 6vw, 2.4rem); }
.gd-jq--v2 .jq-mfx-facts { grid-template-columns: 1fr 1fr; }
.gd-jq--v2 .jq-mfx-n { font-size: clamp(2rem, 8vw, 3.2rem); }
.gd-jq--v2 .jq-bx-h2 { font-size: clamp(2rem, 9vw, 3.4rem); }
.gd-jq--v2 .jq-bx-row {
grid-template-columns: 1fr;
padding: clamp(32px, 8vw, 56px) 24px;
gap: 20px;
}
.gd-jq--v2 .jq-bx-num { font-size: clamp(2rem, 12vw, 3.4rem); }
.gd-jq--v2 .jq-bx-name { font-size: clamp(1.6rem, 7vw, 2.4rem); }
.gd-jq--v2 .jq-bx-media { aspect-ratio: 4/3; }
.gd-jq--v2 .jq-dx-link {
grid-template-columns: clamp(36px, 8vw, 56px) minmax(0, 1fr) auto;
gap: 16px;
padding: 18px 0;
}
.gd-jq--v2 .jq-dx-def { display: none; }
.gd-jq--v2 .jq-dx-name { font-size: clamp(1.4rem, 6vw, 2rem); }
.gd-jq--v2 .jq-dx-anatomy { display: none; }
.gd-jq--v2 .jq-spx-pair { grid-template-columns: 1fr; gap: 40px; }
.gd-jq--v2 .jq-spx-credo p { font-size: clamp(1.3rem, 5.4vw, 2rem); }
.gd-jq--v2 .jq-pp-head h2 { font-size: clamp(2rem, 9vw, 3.4rem); }
.gd-jq--v2 .jq-pp-list { grid-template-columns: 1fr; }
.gd-jq--v2 .jq-pp-step { min-height: auto; padding: clamp(28px, 6vw, 44px) 24px; }
.gd-jq--v2 .jq-ev-ba .gd-ba-frame { aspect-ratio: 4/5; }
.gd-jq--v2 .jq-ev-voices { grid-template-columns: 1fr; }
.gd-jq--v2 .jq-ix .jq-head h2 { font-size: clamp(2rem, 9vw, 3.4rem); }
.gd-jq--v2 .jq-ix-tr {
grid-template-columns: 1fr;
gap: 14px;
padding: clamp(24px, 6vw, 36px) 0;
}
.gd-jq--v2 .jq-ix-tr--head { display: none; }
.gd-jq--v2 .jq-ix-td-price { align-items: flex-start; text-align: left; }
.gd-jq--v2 .jq-ix-num { font-size: clamp(2rem, 9vw, 3.2rem); }
.gd-jq--v2 .jq-ix-tr--pop::before { left: -12px; }
.gd-jq--v2 .jq-ix-cstepper { grid-template-columns: 1fr; }
.gd-jq--v2 .jq-ix-cities { grid-template-columns: 1fr; gap: 24px; }
.gd-jq--v2 .jq-ix-cities-list { grid-template-columns: 1fr 1fr; }
.gd-jq--v2 .jq-fc { min-height: auto; }
.gd-jq--v2 .jq-fc-sticky { position: relative; height: 60svh; }
.gd-jq--v2 .jq-fc-h2 { font-size: clamp(2.4rem, 11vw, 4.8rem); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 .jq-hero2-media { transform: none; }
.gd-jq--v2 .jq-bx-media video,
.gd-jq--v2 .jq-bx-media img,
.gd-jq--v2 .jq-spx-portrait,
.gd-jq--v2 .jq-ev-voice-vid .gd-yt-thumb { transition: none; transform: none; }
.gd-jq--v2 .jq-dx-anatomy { transition: none; }
.gd-jq--v2 .jq-dx-row:hover .jq-dx-anatomy { opacity: 1; transform: translate(0, -50%); }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.1 — SCALE CALIBRATION ░░
Referens: everswap.com — kompakt, lyx-rumsligt, content andas i negativt rum.
Princip från design-taste-frontend: "Control hierarchy with weight and color,
not massive scale". Visual density 4 (Art Gallery Mode).
Skalning ~40-55% nedåt på all display-typografi. Content-bredder cappas.
════════════════════════════════════════════════════════════════════════════ */
/* ─── Hero — kompakt centre-line ──────────────────────────────────────────── */
.gd-jq--v2 .jq-hero2-open,
.gd-jq--v2 .jq-hero2-close { max-width: 880px; }
.gd-jq--v2 .jq-hero2-panel { padding: clamp(56px, 8svh, 96px) 6vw; }
.gd-jq--v2 .jq-hero2-h1 {
font-size: clamp(2.2rem, 4.6vw, 4.2rem);
line-height: .98;
letter-spacing: -.022em;
margin-top: clamp(20px, 2.6vh, 32px);
}
.gd-jq--v2 .jq-hero2-h1 .gd-mask:nth-child(2) { padding-left: clamp(0px, 2vw, 32px); }
.gd-jq--v2 .jq-hero2-h1 .gd-mask:nth-child(3) { padding-left: clamp(0px, 3.6vw, 64px); }
.gd-jq--v2 .jq-hero2-kicker {
font-size: clamp(.98rem, 1.15vw, 1.1rem);
max-width: 48ch;
line-height: 1.6;
margin-top: clamp(20px, 2.4vh, 28px);
}
.gd-jq--v2 .jq-hero2-meta {
margin-top: clamp(24px, 3vh, 36px);
max-width: 660px;
gap: clamp(14px, 1.6vw, 22px);
}
.gd-jq--v2 .jq-hero2-pull {
font-size: clamp(1.4rem, 2.6vw, 2.4rem);
line-height: 1.2;
max-width: 22ch;
}
.gd-jq--v2 .jq-hero2-cta { margin-top: clamp(22px, 3vh, 32px); }
.gd-jq--v2 .jq-hero2-cue {
left: 50%; transform: translateX(-50%);
flex-direction: column; align-items: center;
}
.gd-jq--v2 .jq-hero2-cue span { letter-spacing: .3em; }
.gd-jq--v2 .jq-hero2-cue i { height: 42px; }
/* ─── Manifest — meningen ska kännas läsbar, inte deklaratorisk ─────────── */
.gd-jq--v2 .jq-mfx .jq-wrap {
padding-top: clamp(64px, 9vw, 120px);
padding-bottom: clamp(56px, 8vw, 96px);
}
.gd-jq--v2 .jq-mfx-lede { max-width: 1100px; }
.gd-jq--v2 .jq-mfx-statement {
font-size: clamp(1.3rem, 2.1vw, 2.1rem);
line-height: 1.34;
letter-spacing: -.008em;
max-width: 56ch;
}
.gd-jq--v2 .jq-mfx-facts { margin-top: clamp(48px, 7vw, 88px); }
.gd-jq--v2 .jq-mfx-fact {
padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px);
gap: 10px;
}
.gd-jq--v2 .jq-mfx-n {
font-size: clamp(1.8rem, 2.6vw, 2.6rem);
letter-spacing: -.018em;
}
.gd-jq--v2 .jq-mfx-n b { font-size: .42em; }
/* ─── Behandlingar — siffror sitter EYE-LEVEL, namn måttliga ─────────────── */
.gd-jq--v2 .jq-bx { padding: clamp(72px, 10vw, 140px) 0; }
.gd-jq--v2 .jq-bx-head {
max-width: 1100px;
margin-bottom: clamp(40px, 5vw, 72px);
}
.gd-jq--v2 .jq-bx-h2 {
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1;
letter-spacing: -.018em;
}
.gd-jq--v2 .jq-bx-lede {
font-size: clamp(.98rem, 1.1vw, 1.1rem);
max-width: 46ch;
}
.gd-jq--v2 .jq-bx-row {
grid-template-columns: clamp(48px, 6vw, 80px) minmax(0, 1.2fr) minmax(0, 1.3fr);
gap: clamp(20px, 2.4vw, 40px);
padding: clamp(32px, 4vw, 64px) 5vw;
align-items: center;
}
.gd-jq--v2 .jq-bx-num {
font-size: clamp(1.4rem, 1.8vw, 1.9rem);
color: rgba(244,241,234,.42);
}
.gd-jq--v2 .jq-bx-text { gap: 14px; padding-top: 0; }
.gd-jq--v2 .jq-bx-name {
font-size: clamp(1.4rem, 2.1vw, 2.1rem);
line-height: 1.06;
letter-spacing: -.014em;
}
.gd-jq--v2 .jq-bx-desc {
font-size: 14.5px;
max-width: 42ch;
line-height: 1.65;
}
.gd-jq--v2 .jq-bx-more { font-size: 9.5px; padding-bottom: 6px; }
.gd-jq--v2 .jq-bx-media { aspect-ratio: 5/3; }
/* ─── Bettfel — diagnostiskt index, kompakt ────────────────────────────── */
.gd-jq--v2 .jq-dx-link {
grid-template-columns: clamp(40px, 4vw, 64px) minmax(0, .9fr) minmax(0, 1.6fr) auto;
gap: clamp(16px, 2.4vw, 40px);
padding: clamp(16px, 2vw, 26px) 0;
}
.gd-jq--v2 .jq-dx-num {
font-size: clamp(.98rem, 1.1vw, 1.1rem);
}
.gd-jq--v2 .jq-dx-name {
font-size: clamp(1.3rem, 1.9vw, 1.9rem);
line-height: 1.06;
letter-spacing: -.012em;
}
.gd-jq--v2 .jq-dx-def {
font-size: clamp(.92rem, 1.02vw, 1.02rem);
line-height: 1.48;
max-width: 44ch;
}
.gd-jq--v2 .jq-dx-arrow { font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
.gd-jq--v2 .jq-dx-anatomy {
width: clamp(160px, 18vw, 240px);
}
/* ─── Specialister — porträtt mindre, credo lugnare ───────────────────── */
.gd-jq--v2 .jq-spx-head { max-width: 1100px; }
.gd-jq--v2 .jq-spx .jq-head h2 {
font-size: clamp(1.8rem, 3.4vw, 3rem);
line-height: 1.02;
}
.gd-jq--v2 .jq-spx-pair {
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 56px);
margin-top: clamp(36px, 5vw, 64px);
max-width: 1280px;
}
.gd-jq--v2 .jq-spx-portrait-w { aspect-ratio: 5/6; }
.gd-jq--v2 .jq-spx-name {
font-size: clamp(1.4rem, 1.9vw, 1.9rem);
letter-spacing: -.012em;
}
.gd-jq--v2 .jq-spx-bio {
font-size: 14.5px;
max-width: 42ch;
line-height: 1.68;
}
.gd-jq--v2 .jq-spx-credo { margin-top: clamp(48px, 7vw, 88px); max-width: 900px; padding-top: clamp(24px, 3vw, 40px); }
.gd-jq--v2 .jq-spx-credo p {
font-size: clamp(1.2rem, 1.9vw, 1.85rem);
line-height: 1.36;
letter-spacing: -.008em;
}
/* ─── Process — kompakt på ink ─────────────────────────────────────────── */
.gd-jq--v2 .jq-pp-head { max-width: 1100px; }
.gd-jq--v2 .jq-pp-head h2 {
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1;
letter-spacing: -.018em;
}
.gd-jq--v2 .jq-pp-lede {
font-size: clamp(.98rem, 1.1vw, 1.1rem);
max-width: 48ch;
}
.gd-jq--v2 .jq-pp-list { margin-top: clamp(40px, 6vw, 72px); }
.gd-jq--v2 .jq-pp-step {
padding: clamp(24px, 2.8vw, 40px) clamp(18px, 2vw, 28px);
min-height: clamp(220px, 24vw, 320px);
gap: 14px;
}
.gd-jq--v2 .jq-pp-n {
font-size: clamp(1.4rem, 1.8vw, 1.8rem);
color: rgba(244,241,234,.4);
}
.gd-jq--v2 .jq-pp-step h3 {
font-size: clamp(1.1rem, 1.4vw, 1.35rem);
letter-spacing: -.008em;
}
.gd-jq--v2 .jq-pp-step p { font-size: 13.5px; line-height: 1.62; }
/* ─── Evidence — stora visuella objekt, små captions ───────────────────── */
.gd-jq--v2 .jq-ev .jq-head h2 {
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1;
letter-spacing: -.018em;
}
.gd-jq--v2 .jq-ev-lede {
font-size: clamp(.98rem, 1.1vw, 1.1rem);
max-width: 50ch;
}
.gd-jq--v2 .jq-ev-ba .gd-ba-frame { aspect-ratio: 16/9; max-width: 1280px; margin: 0 auto; }
.gd-jq--v2 .jq-ev-cap { font-size: 13px; }
.gd-jq--v2 .jq-ev-voices { margin-top: clamp(48px, 7vw, 88px); }
.gd-jq--v2 .jq-ev-voice blockquote {
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
line-height: 1.5;
}
.gd-jq--v2 .jq-ev-play { width: 60px; height: 60px; }
/* ─── Investering — prisblad-skala till matchbox-storlek ───────────────── */
.gd-jq--v2 .jq-ix .jq-head h2 {
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1;
letter-spacing: -.018em;
}
.gd-jq--v2 .jq-ix-lede {
font-size: clamp(.98rem, 1.1vw, 1.1rem);
max-width: 52ch;
}
.gd-jq--v2 .jq-ix-table { margin-top: clamp(28px, 4vw, 56px); }
.gd-jq--v2 .jq-ix-tr {
padding: clamp(22px, 2.6vw, 36px) 0;
gap: clamp(20px, 2.6vw, 44px);
}
.gd-jq--v2 .jq-ix-name {
font-size: clamp(1.2rem, 1.55vw, 1.5rem);
line-height: 1.05;
}
.gd-jq--v2 .jq-ix-desc { font-size: 13.5px; line-height: 1.55; }
.gd-jq--v2 .jq-ix-td-inc ul {
font-size: 13px;
gap: 5px;
}
.gd-jq--v2 .jq-ix-num {
font-size: clamp(1.8rem, 2.8vw, 2.6rem);
letter-spacing: -.02em;
}
.gd-jq--v2 .jq-ix-unit { font-size: 10.5px; }
.gd-jq--v2 .jq-ix-unit small { font-size: 9px; }
.gd-jq--v2 .jq-ix-td-price .jq-btn { padding: 12px 24px; font-size: 10px; }
.gd-jq--v2 .jq-ix-tr--pop::before { width: 4px; height: clamp(40px, 4vw, 56px); }
.gd-jq--v2 .jq-ix-calc { margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 3.4vw, 48px) 0; }
.gd-jq--v2 .jq-ix-calc-h {
font-size: clamp(1.4rem, 2vw, 1.9rem);
letter-spacing: -.012em;
}
.gd-jq--v2 .jq-ix-cstepper { margin-top: clamp(24px, 3vw, 36px); }
.gd-jq--v2 .jq-ix-cstepper .gd-cstep { padding: clamp(18px, 2vw, 28px); min-height: 220px; gap: 14px; }
.gd-jq--v2 .jq-ix-cstepper .gd-cstep-t { font-size: 9.5px; }
.gd-jq--v2 .jq-ix-cstepper .gd-cstep-pick {
font-size: clamp(.98rem, 1.2vw, 1.15rem);
}
.gd-jq--v2 .jq-ix-cstepper .gd-calc-big {
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
letter-spacing: -.018em;
}
.gd-jq--v2 .jq-ix-cities { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(24px, 3vw, 40px); }
.gd-jq--v2 .jq-ix-cities-list .c { font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
/* ─── Final CTA — slut-headline TUNG, mega-skala för avslutet ─────────── */
.gd-jq--v2 .jq-fc-close { max-width: 1100px; }
.gd-jq--v2 .jq-fc-panel { padding: clamp(48px, 8svh, 96px) 6vw; }
.gd-jq--v2 .jq-fc-h2 {
font-size: clamp(2.6rem, 6.4vw, 6.4rem);
line-height: .94;
letter-spacing: -.024em;
}
.gd-jq--v2 .jq-fc-cta {
display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
margin-top: clamp(28px, 4vh, 44px);
}
.gd-jq--v2 .jq-fc-cta .jq-btn--solid {
padding: 20px 48px;
font-size: 12px;
}
/* Telefonnumret blir text-link, inte konkurrerande knapp */
.gd-jq--v2 .jq-fc-cta .jq-btn--ghost {
border: 0;
padding: 0;
letter-spacing: .24em;
color: rgba(244,241,234,.6);
text-decoration: none;
font-size: 11px;
transition: color .35s var(--jq-ease), letter-spacing .35s var(--jq-ease);
}
.gd-jq--v2 .jq-fc-cta .jq-btn--ghost:hover {
color: var(--jq-cream);
background: transparent;
letter-spacing: .28em;
}
.gd-jq--v2 .jq-panel-quote {
font-size: clamp(1.2rem, 2vw, 1.95rem);
max-width: 38rem;
}
/* ─── Body / paragrafer cappas (taste-frontend rule) ──────────────────── */
.gd-jq--v2 .jq-hero2-kicker,
.gd-jq--v2 .jq-mfx-statement,
.gd-jq--v2 .jq-bx-desc,
.gd-jq--v2 .jq-dx-def,
.gd-jq--v2 .jq-spx-bio,
.gd-jq--v2 .jq-pp-step p,
.gd-jq--v2 .jq-ev-voice blockquote,
.gd-jq--v2 .jq-ix-desc,
.gd-jq--v2 .jq-ev-lede,
.gd-jq--v2 .jq-bx-lede,
.gd-jq--v2 .jq-pp-lede,
.gd-jq--v2 .jq-ix-lede { max-width: 65ch; }
/* ─── Mobil-justering ────────────────────────────────────────────────── */
@media (max-width: 900px) {
.gd-jq--v2 .jq-hero2-h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
.gd-jq--v2 .jq-hero2-pull { font-size: clamp(1.2rem, 5vw, 1.8rem); }
.gd-jq--v2 .jq-mfx-statement { font-size: clamp(1.2rem, 5vw, 1.8rem); }
.gd-jq--v2 .jq-bx-h2,
.gd-jq--v2 .jq-pp-head h2,
.gd-jq--v2 .jq-ev .jq-head h2,
.gd-jq--v2 .jq-ix .jq-head h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.gd-jq--v2 .jq-fc-h2 { font-size: clamp(2.2rem, 10vw, 3.6rem); }
.gd-jq--v2 .jq-spx-credo p { font-size: clamp(1.05rem, 4.6vw, 1.5rem); }
.gd-jq--v2 .jq-dx-name { font-size: clamp(1.15rem, 5.4vw, 1.6rem); }
.gd-jq--v2 .jq-ix-num { font-size: clamp(1.5rem, 7vw, 2.2rem); }
/* V2.1 desktop grid-template-columns hade overridit mobile-stack. Tvinga
tillbaka enkolumn på små viewports. */
.gd-jq--v2 .jq-bx-row {
grid-template-columns: 1fr !important;
padding: clamp(32px, 8vw, 56px) 24px !important;
gap: 20px !important;
}
.gd-jq--v2 .jq-bx-num {
font-size: clamp(2rem, 12vw, 3.4rem);
}
.gd-jq--v2 .jq-bx-name {
font-size: clamp(1.6rem, 7vw, 2.4rem);
}
.gd-jq--v2 .jq-bx-media {
aspect-ratio: 4/3;
width: 100%;
}
.gd-jq--v2 .jq-dx-link {
grid-template-columns: clamp(36px, 8vw, 56px) minmax(0, 1fr) auto !important;
gap: 16px !important;
}
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.2 — MOTION PAKET ░░
Chapter-rail, pin+horisontellt scrub, curtain-reveals, text-split,
tooth-anchor, magnetic CTA. Stöder jqfx-motion.js.
════════════════════════════════════════════════════════════════════════════ */
/* ─── CHAPTER RAIL ──────────────────────────────────────────────────────── */
.jq-rail {
position: fixed;
right: clamp(20px, 2.4vw, 36px);
top: 50%;
transform: translateY(-50%);
z-index: 95;
display: flex; flex-direction: column;
gap: clamp(10px, 1.2vw, 18px);
pointer-events: auto;
}
.jq-rail-item {
display: grid;
grid-template-columns: 22px 28px auto;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--jq-stone, #6C7079);
font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
transition: color .35s cubic-bezier(.16,1,.3,1);
opacity: .55;
}
.jq-rail-n {
font-family: var(--gd-serif, 'Spectral', serif);
font-size: 11px; letter-spacing: 0;
font-variant-numeric: tabular-nums;
color: inherit;
}
.jq-rail-d {
display: block; height: 1px; width: 28px;
background: currentColor;
opacity: .35;
transition: width .4s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.jq-rail-name {
opacity: 0;
transform: translateX(-6px);
transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
white-space: nowrap;
font-size: 9.5px;
}
.jq-rail-item:hover .jq-rail-name,
.jq-rail-item.is-active .jq-rail-name {
opacity: 1; transform: translateX(0);
}
.jq-rail-item.is-active { color: var(--jq-ink, #15171B); opacity: 1; }
.jq-rail-item.is-active .jq-rail-d { width: 48px; opacity: 1; }
.jq-rail-item.is-past { opacity: .35; }
/* När body är mörkt: rail blir cream */
html[style*="background-color: rgb(16, 15, 13)"] .jq-rail-item,
html[style*="background-color: rgb(21, 23, 27)"] .jq-rail-item {
color: rgba(244,241,234,.55);
}
html[style*="background-color: rgb(16, 15, 13)"] .jq-rail-item.is-active,
html[style*="background-color: rgb(21, 23, 27)"] .jq-rail-item.is-active {
color: var(--jq-cream, #F4F1EA);
}
@media (max-width: 1080px) {
.jq-rail { display: none; }
}
/* ─── TOOTH-ANCHOR (din resa-progress-ring) ────────────────────────────── */
.jq-anchor {
position: fixed;
right: clamp(20px, 2.4vw, 36px);
bottom: clamp(20px, 3vh, 36px);
z-index: 96;
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: var(--jq-ink, #15171B);
background: rgba(244,241,234,.62);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 12px 14px;
border: 1px solid rgba(21,23,27,.08);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), background .4s ease, border-color .4s ease;
}
.jq-anchor.is-visible {
opacity: 1;
transform: translateY(0);
}
.jq-anchor-eb {
font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase;
font-weight: 500;
}
.jq-anchor-ring { display: block; }
.jq-anchor-fg { transition: stroke-dashoffset .25s cubic-bezier(.16,1,.3,1); }
.jq-anchor-pct {
fill: currentColor;
font-variant-numeric: tabular-nums;
}
html[style*="background-color: rgb(16, 15, 13)"] .jq-anchor,
html[style*="background-color: rgb(21, 23, 27)"] .jq-anchor {
color: var(--jq-cream, #F4F1EA);
background: rgba(21,23,27,.55);
border-color: rgba(244,241,234,.12);
}
@media (max-width: 1080px) {
.jq-anchor { display: none; }
}
/* ─── PIN + HORIZONTAL SCRUB — BEHANDLINGAR ──────────────────────────── */
.gd-jq--v2 .jq-bx.jq-bx--pinned {
height: calc(var(--jq-bx-panels, 4) * 100vh);
padding: 0;
position: relative;
display: block !important;
}
.gd-jq--v2 .jq-bx.jq-bx--pinned .jq-wrap {
display: none; /* tom efter att vi lyft sticky + head ut */
}
.gd-jq--v2 .jq-bx-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex; flex-direction: column;
background: var(--jq-ink, #15171B);
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-head {
position: absolute;
top: clamp(80px, 9vh, 120px);
left: 5vw; right: 5vw;
z-index: 5;
max-width: 1100px;
margin: 0;
pointer-events: none;
}
.gd-jq--v2 .jq-bx-track {
display: flex;
width: calc(var(--jq-bx-panels, 4) * 100vw);
height: 100vh;
will-change: transform;
transition: transform .12s linear;
}
.gd-jq--v2 .jq-bx-list--horiz {
display: flex;
flex-direction: row;
border: 0;
margin: 0;
width: 100%;
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
width: 100vw;
flex: 0 0 100vw;
height: 100vh;
padding: clamp(170px, 22vh, 240px) 5vw clamp(60px, 8vh, 96px);
gap: clamp(28px, 4vw, 64px);
border-bottom: 0;
max-width: none;
align-items: center;
opacity: .35;
transform: scale(.96);
transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-row.is-active {
opacity: 1;
transform: scale(1);
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-num {
position: absolute;
left: 5vw;
bottom: 6vh;
font-size: clamp(7rem, 18vw, 22rem);
color: rgba(244,241,234,.06);
line-height: 1;
letter-spacing: -.03em;
pointer-events: none;
z-index: 1;
transition: opacity .55s cubic-bezier(.16,1,.3,1);
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-row:not(.is-active) .jq-bx-num { opacity: 0; }
.gd-jq--v2 .jq-bx--pinned .jq-bx-text {
position: relative;
z-index: 2;
max-width: 520px;
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-name {
font-size: clamp(2rem, 3.4vw, 3.4rem);
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-media {
aspect-ratio: 4/3;
max-height: 70vh;
}
/* Mobil: pin-off, native vertical stack */
@media (max-width: 900px), (hover: none) {
.gd-jq--v2 .jq-bx.jq-bx--pinned { height: auto; }
.gd-jq--v2 .jq-bx-sticky { position: relative; height: auto; }
.gd-jq--v2 .jq-bx-track {
flex-direction: column;
width: 100%;
height: auto;
transform: none !important;
}
.gd-jq--v2 .jq-bx-list--horiz { flex-direction: column; }
.gd-jq--v2 .jq-bx--pinned .jq-bx-row {
width: 100%; flex: 0 0 auto; height: auto;
grid-template-columns: 1fr;
padding: clamp(40px, 8vw, 64px) 24px;
opacity: 1; transform: none;
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-head {
position: relative; top: auto; left: auto; right: auto;
padding: clamp(64px, 10vw, 96px) 24px clamp(20px, 4vw, 32px);
}
.gd-jq--v2 .jq-bx--pinned .jq-bx-num { position: static; font-size: clamp(2rem, 12vw, 3.4rem); }
}
/* ─── CURTAIN SECTION-REVEALS ──────────────────────────────────────────── */
.gd-jq--v2 .jq-curtain {
clip-path: inset(14% 4% 0 4% round 0);
transform: translateY(40px);
opacity: .75;
transition:
clip-path 1.4s cubic-bezier(.18,.74,.18,1),
transform 1.4s cubic-bezier(.18,.74,.18,1),
opacity 1s cubic-bezier(.18,.74,.18,1);
}
.gd-jq--v2 .jq-curtain.is-revealed {
clip-path: inset(0 0 0 0 round 0);
transform: translateY(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 .jq-curtain {
clip-path: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ─── TEXT-SPLIT — hero h1 characters ──────────────────────────────────── */
/* När hero-h1 är splittad: neutralisera parent .gd-mask > span:s transform
så de individuella tecknen står för animationen istället. */
.gd-jq--v2 .jq-tspl .gd-mask {
overflow: visible;
padding-bottom: 0;
}
.gd-jq--v2 .jq-tspl .gd-mask > span {
transform: none !important;
transition: none !important;
}
.gd-jq--v2 .jq-tspl .jq-tspl-ch {
display: inline-block;
opacity: 0;
transform: translateY(.45em) rotateX(-30deg);
transition: opacity .9s cubic-bezier(.18,.74,.18,1), transform .9s cubic-bezier(.18,.74,.18,1);
transition-delay: calc(var(--i) * 22ms);
transform-origin: 50% 100%;
white-space: pre;
}
.gd-jq--v2 .jq-tspl.is-in .jq-tspl-ch,
.gd-jq--v2 [data-reveal].is-in .jq-tspl-ch,
.gd-jq--v2 [data-reveal].gd-mask.is-in .jq-tspl-ch,
.gd-jq--v2 .gd-mask.is-in .jq-tspl-ch {
opacity: 1;
transform: translateY(0) rotateX(0);
}
/* Säkerhetsnät: efter 2s synas alltid */
.gd-jq--v2 .jq-tspl-ch { animation: tsplShow 0s 2s forwards; }
@keyframes tsplShow { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 .jq-tspl-ch { opacity: 1 !important; transform: none !important; }
}
/* Final CTA word-split — words wipe up from below */
.gd-jq--v2 .jq-tspl-words .jq-tspl-word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: 1.1;
padding-top: .12em;
padding-bottom: .04em;
}
.gd-jq--v2 .jq-tspl-words .jq-tspl-word > span {
display: inline-block;
transform: translateY(110%);
transition: transform 1.1s cubic-bezier(.18,.74,.18,1);
}
.gd-jq--v2 .jq-tspl-words.is-in .jq-tspl-word > span,
.gd-jq--v2 [data-reveal].is-in .jq-tspl-words .jq-tspl-word > span,
.gd-jq--v2 .jq-fc-close.is-in .jq-tspl-words .jq-tspl-word > span {
transform: translateY(0);
}
/* ─── MAGNETIC CTA cleanup ─────────────────────────────────────────────── */
.gd-jq--v2 .jq-btn--solid {
transition: transform .35s cubic-bezier(.2,.9,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
will-change: transform;
}
/* ─── HTML root background-color drive support ─────────────────────────── */
html { transition: background-color .6s cubic-bezier(.16,1,.3,1); }
body { background: transparent; }
/* Säkerhet: chapter rail + anchor får inte ligga ovanpå header-meny på small */
@media (max-width: 1200px) {
.jq-rail-name { display: none; }
.jq-rail { gap: 6px; }
.jq-rail-d { width: 18px; }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.3 — EDITORIAL CROSS-PAGE ░░
Tonar ner kort-bilder på övriga V2-sidor (behandling/bettfel/sida/stadssida)
så de matchar startsidans editorial-skala. Inga markup-ändringar.
════════════════════════════════════════════════════════════════════════════ */
/* Soften ALLA kort-treatments inom V2 — typografi-först, lågmäld elevation */
.gd-jq--v2 .jq-compare-card,
.gd-jq--v2 .jq-pricecard,
.gd-jq--v2 .jq-hubcard,
.gd-jq--v2 .gd-pg-channel,
.gd-jq--v2 .gd-pg-channel-big {
box-shadow: none;
border-radius: 0;
background: transparent;
border: 1px solid var(--jq-line);
padding: clamp(28px, 3.4vw, 48px);
transition: border-color .35s var(--jq-ease);
}
.gd-jq--v2 .jq-compare-card:hover,
.gd-jq--v2 .jq-pricecard:hover,
.gd-jq--v2 .jq-hubcard:hover,
.gd-jq--v2 .gd-pg-channel:hover {
transform: none;
box-shadow: none;
border-color: var(--jq-ink);
}
/* Highlight-card (populärast / featured) i komplett ink — som prisbladet */
.gd-jq--v2 .jq-compare-card.is-pop,
.gd-jq--v2 .jq-compare-card[data-pop],
.gd-jq--v2 .jq-pricecard.is-pop,
.gd-jq--v2 .gd-pg-channel--feat {
background: var(--jq-ink);
color: var(--jq-cream);
border-color: var(--jq-ink);
}
.gd-jq--v2 .jq-compare-card.is-pop *,
.gd-jq--v2 .jq-pricecard.is-pop *,
.gd-jq--v2 .gd-pg-channel--feat * { color: inherit; }
/* Compare-card editorial-typografi */
.gd-jq--v2 .jq-compare-card-eyebrow,
.gd-jq--v2 .jq-pricecard-eb {
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-compare-card-name {
font-family: var(--gd-serif);
font-size: clamp(1.5rem, 2.4vw, 2.2rem);
line-height: 1.06; letter-spacing: -.014em;
font-weight: 400;
margin: 8px 0 0;
}
.gd-jq--v2 .jq-compare-card-row {
font-size: 13.5px; line-height: 1.55;
border-color: var(--jq-line) !important;
}
.gd-jq--v2 .jq-compare-card-more {
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
padding-bottom: 8px;
border-bottom: 1px solid currentColor;
width: max-content;
}
/* Pricecard editorial */
.gd-jq--v2 .jq-pricecard-amount {
font-family: var(--gd-serif);
font-size: clamp(2rem, 3.6vw, 3.4rem);
letter-spacing: -.022em;
line-height: 1;
margin: 12px 0;
font-weight: 400;
}
.gd-jq--v2 .jq-pricecard-meta {
font-size: 13px; line-height: 1.55;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-pricecard-fineprint {
font-size: 10.5px; letter-spacing: .2em;
color: var(--jq-stone);
text-transform: uppercase;
}
/* Hubcard — ska kännas editorial, inte SaaS-kort */
.gd-jq--v2 .jq-hubcard h3,
.gd-jq--v2 .jq-hubcard .jq-hubcard-name {
font-family: var(--gd-serif);
font-size: clamp(1.4rem, 2.1vw, 2rem);
line-height: 1.06;
letter-spacing: -.014em;
font-weight: 400;
margin: 0 0 10px;
}
.gd-jq--v2 .jq-hubcard p,
.gd-jq--v2 .jq-hubcard .jq-hubcard-desc {
font-size: 14px; line-height: 1.65;
color: var(--jq-stone);
max-width: 38ch;
}
/* Channel-card (kontakt-sidan) editorial-toning */
.gd-jq--v2 .gd-pg-channel-h {
font-family: var(--gd-serif);
font-size: clamp(1.4rem, 2.1vw, 2rem);
line-height: 1.06;
letter-spacing: -.014em;
font-weight: 400;
margin: 8px 0;
}
.gd-jq--v2 .gd-pg-channel-big {
font-family: var(--gd-serif);
font-size: clamp(1.8rem, 2.8vw, 2.6rem);
letter-spacing: -.012em;
}
.gd-jq--v2 .gd-pg-channel-sub,
.gd-jq--v2 .gd-pg-channel-n {
font-size: 13.5px;
color: var(--jq-stone);
}
/* Linkgrid editorial-toning — minimal kort, fokus typografi */
.gd-jq--v2 .gd-pg-linkgrid {
gap: 1px !important;
background: var(--jq-line) !important;
border: 1px solid var(--jq-line);
}
.gd-jq--v2 .gd-pg-linkgrid > * {
background: var(--jq-bg);
box-shadow: none !important;
border-radius: 0 !important;
transition: background .25s ease, color .25s ease;
}
.gd-jq--v2 .gd-pg-linkgrid > *:hover {
background: var(--jq-ink);
color: var(--jq-cream);
}
/* Hero på sub-pages — bevara men matcha V2-skala */
.gd-jq--v2 .jq-hero h1 {
font-size: clamp(2.2rem, 5.4vw, 5rem);
line-height: .98;
letter-spacing: -.022em;
max-width: 22ch;
}
.gd-jq--v2 .gd-pg-vhero-lead {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.35vw, 1.3rem);
max-width: 56ch; line-height: 1.55;
}
/* Section heading editorial-toning på sub-pages */
.gd-jq--v2 .jq-sec-head h2,
.gd-jq--v2 .gd-section-head h2,
.gd-jq--v2 .gd-section-head .gd-h2 {
font-size: clamp(2rem, 4vw, 3.6rem);
line-height: 1;
letter-spacing: -.02em;
}
.gd-jq--v2 .jq-sec-lead {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1rem, 1.25vw, 1.18rem);
max-width: 60ch;
color: var(--jq-stone);
}
/* Prose paragrafer cappas */
.gd-jq--v2 .jq-prose p {
font-size: 15px; line-height: 1.7;
max-width: 65ch;
}
.gd-jq--v2 .jq-prose h2 {
font-size: clamp(1.8rem, 3.6vw, 3.2rem);
line-height: 1.04; letter-spacing: -.018em;
}
/* FAQ editorial */
.gd-jq--v2 .jq-faq summary {
padding: clamp(20px, 2.4vw, 32px) 0;
}
.gd-jq--v2 .jq-faq summary span:first-child {
font-family: var(--gd-serif);
font-size: clamp(1.1rem, 1.65vw, 1.45rem);
line-height: 1.34;
font-weight: 400;
max-width: 50ch;
}
.gd-jq--v2 .jq-faq p {
font-size: 14.5px; line-height: 1.68;
max-width: 52ch;
}
/* Quote-block (om-oss patient-quotes) editorial */
.gd-jq--v2 .jq-quotes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--jq-line);
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-quote {
background: var(--jq-bg);
padding: clamp(28px, 3.4vw, 48px);
box-shadow: none;
border-radius: 0;
}
.gd-jq--v2 .jq-quote:hover {
transform: none;
box-shadow: none;
background: var(--jq-cream);
}
.gd-jq--v2 .jq-quote p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
line-height: 1.45;
color: var(--jq-ink);
margin: 0 0 24px;
}
.gd-jq--v2 .jq-quote cite {
font-style: normal;
display: flex; flex-direction: column; gap: 4px;
}
.gd-jq--v2 .jq-quote-name {
font-family: var(--gd-serif);
font-size: 14.5px;
color: var(--jq-ink);
}
.gd-jq--v2 .jq-quote-meta {
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone);
}
@media (max-width: 900px) {
.gd-jq--v2 .jq-quotes {
grid-template-columns: 1fr;
}
.gd-jq--v2 .jq-prose p { max-width: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.4 — RESEARCH-BASED TUNING ░░
Källor: Bringhurst, Butterick, Nielsen Norman, Baymard, WCAG 2.2,
Apple HIG, Material 3, Tim Brown Modular Scale.
════════════════════════════════════════════════════════════════════════════ */
/* A1 — Body ≥16px (WCAG/WebAIM/Butterick) */
.gd-jq--v2 .jq-prose p,
.gd-jq--v2 .jq-bx-desc,
.gd-jq--v2 .jq-pp-p,
.gd-jq--v2 .jq-ix-desc,
.gd-jq--v2 .gd-pg-vhero-lead {
font-size: clamp(1rem, 1.1vw, 1.06rem); /* 16-17px */
line-height: 1.65;
}
/* A1 — Fineprint inte under 12px (Apple HIG: minimum 11pt for legibility) */
.gd-jq--v2 .jq-pricecard-fineprint,
.gd-jq--v2 .gd-pg-fineprint {
font-size: 12px;
line-height: 1.55;
}
/* A2 — Italic leads kompenseras +1px (Bringhurst §5.2.2) */
.gd-jq--v2 .jq-hero2-kicker,
.gd-jq--v2 .jq-bx-lede,
.gd-jq--v2 .jq-pp-lede,
.gd-jq--v2 .jq-ev-lede,
.gd-jq--v2 .jq-ix-lede,
.gd-jq--v2 .jq-sec-lead {
font-size: clamp(1.1rem, 1.3vw, 1.22rem); /* 17.6-19.5px italic */
line-height: 1.55;
}
/* A3 — Hero h1 bumpas för modular-scale-ratio ≥1.25 mot section-h2 (Tim Brown) */
.gd-jq--v2 .jq-hero2-h1 {
font-size: clamp(2.4rem, 5.6vw, 5.2rem); /* max 83px på 1440px → ratio 1.53 vs 54px h2 */
letter-spacing: -.024em;
}
/* A4 — Tabular header ≥12px (NN/g: ≥body-size) */
.gd-jq--v2 .jq-ix-tr--head {
font-size: 12px !important;
letter-spacing: .22em;
}
/* A6 — Eyebrow tracking 0.34 → 0.24em (Butterick: ≤10% överdrev) */
.gd-jq--v2 .jq-eyebrow {
letter-spacing: .24em;
font-size: 10.5px;
}
/* C — Chapter-rail touch-target ≥44px (WCAG 2.5.5 / Apple HIG) */
.jq-rail-item {
min-height: 44px;
padding: 8px 0;
}
/* D2 — Chapter-rail active name alltid synlig (NN/g long-form best practices) */
.jq-rail-item.is-active .jq-rail-name {
opacity: 1;
transform: translateX(0);
}
/* Behåll hover-reveal för inaktiva som ljud-effekt */
/* D6 — Final-CTA cap sänkt så headline ej bryter i 4 rader på 1440px (Bringhurst 2-4 ord/rad) */
.gd-jq--v2 .jq-fc-h2 {
font-size: clamp(2.4rem, 4.6vw, 4.6rem); /* max 66px på 1440 — 2 rader natural */
line-height: 1.1; /* descender-room för "börja", "?" osv */
}
.gd-jq--v2 .jq-fc-close { max-width: 1400px; }
/* Word-split: minska clipping via mer padding och tydligare line-box */
.gd-jq--v2 .jq-fc-h2 .jq-tspl-word {
line-height: inherit;
padding-top: .18em;
padding-bottom: .12em;
}
/* E1 — Mobil hero h1 32 → 43px (Apple HIG large title 34pt, Material display-medium 45sp) */
@media (max-width: 900px) {
.gd-jq--v2 .jq-hero2-h1 {
font-size: clamp(2.4rem, 11vw, 3.6rem); /* 38-43px på 390-viewport */
line-height: .96;
}
/* E2 — Mobil eyebrow tracking sänks (Rutter Web Typography: pixel-density compression) */
.gd-jq--v2 .jq-eyebrow {
letter-spacing: .18em;
font-size: 10.5px;
}
/* Mobile section-h2 mer impact */
.gd-jq--v2 .jq-bx-h2,
.gd-jq--v2 .jq-pp-head h2,
.gd-jq--v2 .jq-ev .jq-head h2,
.gd-jq--v2 .jq-ix .jq-head h2 {
font-size: clamp(2rem, 8vw, 3rem); /* 31-32px på 390 */
}
/* Mobile final-CTA mega */
.gd-jq--v2 .jq-fc-h2 {
font-size: clamp(2.4rem, 11vw, 4rem);
}
}
/* D1 — Hero-1 inline secondary CTA (Baymard: primary visible above-fold) */
.gd-jq--v2 .jq-hero2-cta--inline {
margin-top: clamp(20px, 2.8vh, 32px);
display: flex; flex-wrap: wrap; align-items: center;
gap: 18px;
}
.gd-jq--v2 .jq-hero2-cta-secondary {
font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
color: rgba(244,241,234,.7);
text-decoration: none;
padding: 8px 0;
border-bottom: 1px solid rgba(244,241,234,.3);
transition: color .35s var(--jq-ease), border-color .35s var(--jq-ease);
}
.gd-jq--v2 .jq-hero2-cta-secondary:hover {
color: var(--jq-cream);
border-color: var(--jq-cream);
}
/* D4 — Process tidsstämpel inline med rubriken */
.gd-jq--v2 .jq-pp-track .jq-pp-row {
grid-template-columns: clamp(120px, 14vw, 220px) minmax(0, 1fr); /* tar bort höger-kolumn */
}
.gd-jq--v2 .jq-pp-t-inline {
font-style: italic;
font-weight: 400;
font-size: .56em;
color: rgba(244,241,234,.45);
letter-spacing: 0;
margin-left: .15em;
vertical-align: .12em;
}
/* Huashu-design polish — text-wrap:pretty på prosa (rendering: rivers + orphans) */
.gd-jq--v2 .jq-bx-desc,
.gd-jq--v2 .jq-pp-p,
.gd-jq--v2 .jq-ix-desc,
.gd-jq--v2 .jq-prose p,
.gd-jq--v2 .gd-pg-vhero-lead,
.gd-jq--v2 .jq-spx-bio { text-wrap: pretty; }
/* text-wrap:balance på display-rubriker — bättre rad-brytning */
.gd-jq--v2 .jq-hero2-h1,
.gd-jq--v2 .jq-bx-h2,
.gd-jq--v2 .jq-pp-head h2,
.gd-jq--v2 .jq-ix .jq-head h2,
.gd-jq--v2 .jq-ev .jq-head h2,
.gd-jq--v2 .jq-spx-credo p,
.gd-jq--v2 .jq-fc-h2 { text-wrap: balance; }
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.5 — HYBRID CENTRERING + HÖJD-TRIMNING ░░
- Hero, final-CTA, footer-statement: centrerat (dramatic moments)
- Section h2/body/manifest/prisblad: vänster (editorial reading)
- Sektion-padding sänks så icke-pin-sektioner håller sig nära 100vh
════════════════════════════════════════════════════════════════════════════ */
/* ─── A · HERO CENTRERAS (open + close panels) ─────────────────────────── */
.gd-jq--v2 .jq-hero2-panel { align-items: center; text-align: center; }
.gd-jq--v2 .jq-hero2-open,
.gd-jq--v2 .jq-hero2-close {
margin: 0 auto;
display: flex; flex-direction: column; align-items: center;
}
.gd-jq--v2 .jq-hero2-h1 .gd-mask {
display: block;
padding-left: 0 !important; /* vänsterställd indent borttagen */
text-align: center;
}
.gd-jq--v2 .jq-hero2-kicker {
margin-left: auto; margin-right: auto;
}
.gd-jq--v2 .jq-hero2-cta--inline,
.gd-jq--v2 .jq-hero2-cta {
justify-content: center;
}
.gd-jq--v2 .jq-hero2-meta {
margin-left: auto; margin-right: auto;
}
/* Meta-block interna text behåller vänster-läsning även om container är centrerad */
.gd-jq--v2 .jq-hero2-meta span { text-align: left; }
.gd-jq--v2 .jq-hero2-pull {
margin-left: auto; margin-right: auto;
text-align: center;
}
.gd-jq--v2 .jq-hero2-cue {
left: 50%; transform: translateX(-50%);
flex-direction: column; align-items: center;
}
/* Hero eyebrow: prick-före och prick-efter centreras */
.gd-jq--v2 .jq-hero2 .jq-eyebrow { justify-content: center; }
/* ─── B · FINAL-CTA CENTRERAS ──────────────────────────────────────────── */
.gd-jq--v2 .jq-fc-panel { align-items: center; text-align: center; }
.gd-jq--v2 .jq-fc-close { margin: 0 auto; align-items: center; display: flex; flex-direction: column; }
.gd-jq--v2 .jq-fc-h2 { text-align: center; }
.gd-jq--v2 .jq-fc-cta { justify-content: center; }
.gd-jq--v2 .jq-fc-fine { text-align: center; }
.gd-jq--v2 .jq-fc .jq-eyebrow { justify-content: center; }
.gd-jq--v2 .jq-fc .jq-panel-quote { margin-left: auto; margin-right: auto; text-align: center; }
/* ─── C · FOOTER-STATEMENT CENTRERAS ───────────────────────────────────── */
.gd-jq--v2 ~ .jq-footer .jq-footer-statement,
body .jq-footer .jq-footer-statement {
align-items: center;
text-align: center;
}
body .jq-footer .jq-footer-statement h2 { text-align: center; }
body .jq-footer .jq-footer-statement-lead { margin-left: auto; margin-right: auto; }
body .jq-footer .jq-footer-statement-ctas { justify-content: center; }
body .jq-footer .jq-footer-statement .jq-eyebrow { justify-content: center; }
/* ─── HÖJD-TRIMNING ──────────────────────────────────────────────────── */
/* 1 · .jq-sec padding tightare (86 → 64) */
.gd-jq--v2 > .jq-sec:not(.jq-hero2):not(.jq-footer-statement) {
padding-top: clamp(40px, 4.4vw, 72px) !important;
padding-bottom: clamp(40px, 4.4vw, 72px) !important;
}
.gd-jq--v2 .jq-sec:not(.jq-hero):not(.jq-hero2):not(.jq-footer-statement) {
padding-top: clamp(40px, 4.4vw, 72px);
padding-bottom: clamp(40px, 4.4vw, 72px);
}
/* 2 · Specialister: porträtt 4:5 → 5:6 (lägre + cinematic) + credo
komprimerad ihop med caption */
.gd-jq--v2 .jq-spx-portrait-w {
aspect-ratio: 5/6;
}
.gd-jq--v2 .jq-spx-credo {
margin-top: clamp(36px, 5vw, 56px);
padding-top: clamp(24px, 3vw, 36px);
}
.gd-jq--v2 .jq-spx-credo p {
font-size: clamp(1.1rem, 1.65vw, 1.6rem);
line-height: 1.32;
}
/* 3 · Resultat: BA + videocitat side-by-side (50/50) — minskar höjd ~700px */
.gd-jq--v2 .jq-ev .jq-wrap > .jq-ev-stage,
.gd-jq--v2 .jq-ev .jq-wrap > .jq-ev-voices {
margin-top: clamp(28px, 4vw, 48px);
}
.gd-jq--v2 .jq-ev-stage {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(24px, 3vw, 48px);
align-items: start;
}
.gd-jq--v2 .jq-ev-ba .gd-ba-frame {
aspect-ratio: 4/5; /* cinematic tall format för BA-foto */
max-height: 70vh;
}
/* Video-citaten kollapsar till vertikal stack i höger kolumn */
.gd-jq--v2 .jq-ev-voices {
margin-top: 0;
grid-template-columns: 1fr;
gap: clamp(20px, 2.6vw, 32px);
}
.gd-jq--v2 .jq-ev-voice-vid {
aspect-ratio: 4/3;
}
/* Wrappa stage + voices i grid (de är 2 sektioner i markup men ska sitta sida) */
.gd-jq--v2 .jq-ev .jq-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(28px, 4vw, 48px);
}
.gd-jq--v2 .jq-ev .jq-head { grid-column: 1; }
.gd-jq--v2 .jq-ev-stage { grid-column: 1; }
.gd-jq--v2 .jq-ev-voices { grid-column: 1; }
@media (min-width: 1080px) {
.gd-jq--v2 .jq-ev .jq-wrap {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
grid-template-rows: auto 1fr;
}
.gd-jq--v2 .jq-ev .jq-head { grid-column: 1 / -1; }
.gd-jq--v2 .jq-ev-stage { grid-column: 1; grid-row: 2; }
.gd-jq--v2 .jq-ev-voices {
grid-column: 2; grid-row: 2;
align-self: start;
}
}
/* 4 · Investering: kompakt calc + cities */
.gd-jq--v2 .jq-ix-calc { margin-top: clamp(36px, 5vw, 64px); padding: clamp(24px, 3vw, 40px) 0; }
.gd-jq--v2 .jq-ix-cstepper .gd-cstep { min-height: 160px; padding: clamp(16px, 2vw, 24px); }
.gd-jq--v2 .jq-ix-cities {
margin-top: clamp(36px, 5vw, 64px);
padding-top: clamp(24px, 3vw, 36px);
grid-template-columns: minmax(220px, .8fr) minmax(0, 2.2fr);
}
.gd-jq--v2 .jq-ix-cities-list a {
padding: clamp(12px, 1.4vw, 18px);
}
/* 5 · Process: rad-padding tightare */
.gd-jq--v2 .jq-pp-track { margin-top: clamp(32px, 4vw, 56px); }
.gd-jq--v2 .jq-pp-row {
padding: clamp(20px, 2.4vw, 32px) 0;
}
.gd-jq--v2 .jq-pp-h { font-size: clamp(1.4rem, 2.1vw, 2rem); }
.gd-jq--v2 .jq-pp-p { line-height: 1.6; }
/* 6 · Pricing-rader tightare padding */
.gd-jq--v2 .jq-ix-tr {
padding: clamp(16px, 2vw, 28px) 0;
}
/* 7 · Behandlings-stack (på sidor utan pin — mobil) tightare */
@media (max-width: 900px) {
.gd-jq--v2 .jq-bx-row { padding: clamp(28px, 6vw, 48px) 24px !important; }
.gd-jq--v2 .jq-spx-pair { gap: 32px; }
.gd-jq--v2 .jq-spx-portrait-w { aspect-ratio: 4/5; }
.gd-jq--v2 .jq-ev .jq-wrap { grid-template-columns: 1fr; }
.gd-jq--v2 .jq-ev-stage { grid-template-columns: 1fr; }
.gd-jq--v2 .jq-ix-cities { grid-template-columns: 1fr; gap: 24px; }
.gd-jq--v2 .jq-ix-cstepper { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.6 — SPECIALIST-TRIO + RAIL-DISKRET + BA-LABELS + FOOTER-TIGHT ░░
════════════════════════════════════════════════════════════════════════════ */
/* ─── Specialister 3-kol: porträtt | credo | porträtt ─────────────────── */
.gd-jq--v2 .jq-spx-trio {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr);
gap: clamp(24px, 3vw, 48px);
margin-top: clamp(36px, 5vw, 64px);
max-width: 1400px;
align-items: center;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-fig {
margin: 0;
display: flex; flex-direction: column;
gap: clamp(16px, 2vw, 24px);
}
.gd-jq--v2 .jq-spx-trio .jq-spx-portrait-w {
aspect-ratio: 5/6;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-credo {
background: var(--jq-cream);
border-left: 1px solid var(--jq-line);
border-right: 1px solid var(--jq-line);
padding: clamp(24px, 3vw, 48px) clamp(20px, 2.4vw, 32px);
margin: 0;
display: flex; flex-direction: column; gap: 18px;
min-height: 100%;
justify-content: center;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-credo p {
font-size: clamp(1.05rem, 1.45vw, 1.45rem);
line-height: 1.32;
text-wrap: balance;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-credo cite {
font-style: normal;
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--jq-stone);
}
@media (max-width: 900px) {
.gd-jq--v2 .jq-spx-trio {
grid-template-columns: 1fr;
gap: 28px;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-credo {
order: 3; /* placeras sist på mobil */
border-left: 0; border-right: 0;
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
}
/* ─── Rail discreet: smaller name + shorter divider + max-width ──────── */
.jq-rail-name {
font-size: 8.5px;
letter-spacing: .22em;
max-width: 90px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.jq-rail-item.is-active .jq-rail-d { width: 32px; } /* var 48px */
.jq-rail-item .jq-rail-d { width: 18px; } /* var 28px */
/* ─── BA-labels: Före/Efter ska inte stacka ────────────────────────── */
.gd-jq--v2 .gd-ba-tag {
font-size: 10.5px;
letter-spacing: .22em;
padding: 6px 10px;
white-space: nowrap;
background: rgba(21,23,27,.62);
color: var(--jq-cream);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ─── Footer-tight: trimma padding så footer ej blir 100vh+ ──────────── */
.jq-footer-statement {
padding-top: clamp(48px, 6vw, 96px);
padding-bottom: clamp(36px, 4vw, 64px);
}
.jq-footer-statement h2 {
font-size: clamp(2.2rem, 4.6vw, 4.4rem);
}
.jq-footer-grid {
padding-top: clamp(40px, 5vw, 72px);
padding-bottom: clamp(28px, 3vw, 48px);
}
.jq-footer-bottom {
padding-top: clamp(16px, 2vw, 24px);
padding-bottom: clamp(20px, 2.4vw, 30px);
}
/* ─── Delbetalning från 300 kr-badge — ink-bg så den POPPAR mot beige ─── */
.gd-jq--v2 .jq-ix-finprint {
margin-top: clamp(16px, 2vw, 24px);
display: inline-flex;
align-self: flex-start;
width: max-content;
align-items: center;
gap: 14px;
padding: 12px 20px;
background: var(--jq-ink);
color: var(--jq-cream);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
}
.gd-jq--v2 .jq-ix-finprint b {
font-family: var(--gd-serif);
font-weight: 400;
font-size: 18px;
letter-spacing: -.01em;
text-transform: none;
color: #fff;
}
/* ─── Kontakt-channels: telefonnummer + email får inte kapas, ─────────
öppettider får bättre kontrast ─────────────────────────────────── */
.gd-jq--v2 .gd-pg-channel-big {
font-size: clamp(1.3rem, 1.8vw, 1.7rem); /* sänkt från 1.8-2.6rem så "031-713 57 84" får plats */
letter-spacing: -.012em;
white-space: nowrap; /* förhindra wrap mitt i nummer */
overflow: hidden;
text-overflow: ellipsis;
}
.gd-jq--v2 .gd-pg-channel-hours {
font-size: 12px !important;
letter-spacing: .18em !important;
color: var(--jq-ink) !important;
font-weight: 500;
padding-top: 14px;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .gd-pg-channel--feat .gd-pg-channel-hours {
color: rgba(244,241,234,.85) !important;
border-top-color: rgba(244,241,234,.18);
}
.gd-jq--v2 .gd-pg-channel-sub {
font-size: 14.5px;
line-height: 1.6;
max-width: 36ch;
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.7 — DEPTH-PASS ░░
Atmospheric bg-modulation, tactile elevation, image-vignette, italic
text-shadow, Z-axis hovers, strip-canvas double-layer, color-depth.
════════════════════════════════════════════════════════════════════════════ */
/* 1 — Atmospheric bg-gradients per sektion */
.gd-jq--v2 .jq-mfx,
.gd-jq--v2 .jq-dx,
.gd-jq--v2 .jq-spx,
.gd-jq--v2 .jq-ev,
.gd-jq--v2 .jq-ix {
position: relative;
background-image:
radial-gradient(ellipse 80vw 60vh at 50% 0%, rgba(255, 250, 240, .35) 0%, transparent 70%),
repeating-linear-gradient(90deg, rgba(94,74,46,.06) 0px, rgba(94,74,46,.06) 1px, transparent 1px, transparent 5px),
linear-gradient(180deg, var(--jq-bg) 0%, var(--jq-bg) 100%);
}
.gd-jq--v2 .jq-bx,
.gd-jq--v2 .jq-pp,
.gd-jq--v2 .jq-fc {
position: relative;
background-image:
radial-gradient(ellipse 70vw 50vh at 50% 100%, rgba(30, 115, 190, .08) 0%, transparent 70%),
linear-gradient(180deg, var(--jq-ink) 0%, var(--jq-ink) 100%);
}
/* 2 — Tactile elevation på interaktiva element */
.gd-jq--v2 .jq-ix-tr {
transition: background .35s var(--jq-ease), transform .35s var(--jq-ease), box-shadow .35s var(--jq-ease);
}
.gd-jq--v2 .jq-ix-tr:hover {
background: rgba(244, 241, 234, .35) !important;
transform: translateX(2px);
box-shadow: -8px 0 0 -7px var(--jq-accent);
}
.gd-jq--v2 .gd-pg-channel {
transition: transform .4s var(--jq-ease), box-shadow .4s var(--jq-ease), border-color .35s ease;
}
.gd-jq--v2 .gd-pg-channel:hover {
transform: translateY(-4px);
box-shadow:
0 1px 1px rgba(21, 23, 27, .04),
0 12px 32px -8px rgba(21, 23, 27, .14);
}
.gd-jq--v2 .gd-pg-channel--feat:hover {
box-shadow:
0 1px 1px rgba(0, 0, 0, .12),
0 16px 36px -8px rgba(0, 0, 0, .32);
}
/* 3 — Image vignette + inner frame */
.gd-jq--v2 .jq-spx-portrait-w::after,
.gd-jq--v2 .jq-ev-ba .gd-ba-frame::after,
.gd-jq--v2 .jq-bx-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
background:
radial-gradient(ellipse at center, transparent 60%, rgba(21, 23, 27, .18) 100%),
linear-gradient(180deg, transparent 70%, rgba(21, 23, 27, .12) 100%);
box-shadow: inset 0 0 0 1px rgba(21, 23, 27, .04);
}
.gd-jq--v2 .jq-ev-voice-vid::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(ellipse at center, transparent 55%, rgba(21, 23, 27, .35) 100%);
}
/* 4 — Spectral italic em subtil text-shadow för depth */
.gd-jq--v2 .jq-bx-h2 em,
.gd-jq--v2 .jq-pp-head h2 em,
.gd-jq--v2 .jq-fc-h2 em,
.gd-jq--v2 .jq-hero2-h1 em,
.gd-jq--v2 .jq-hero2-pull em {
text-shadow: 0 1px 0 rgba(244, 241, 234, .08), 0 2px 12px rgba(244, 241, 234, .04);
}
.gd-jq--v2 .jq-head h2 em,
.gd-jq--v2 .jq-mfx-statement em,
.gd-jq--v2 .jq-spx-credo p em {
text-shadow: 0 1px 0 rgba(21, 23, 27, .04), 0 2px 8px rgba(21, 23, 27, .03);
}
/* 5 — Parallax GPU-acceleration */
.gd-jq--v2 [data-px] {
will-change: transform;
transform: translateZ(0);
}
/* 6 — Hover layer-shifts */
.gd-jq--v2 .jq-bx-row {
transition: background .4s var(--jq-ease), transform .5s var(--jq-ease);
}
.gd-jq--v2 .jq-bx-row:hover { background: rgba(244, 241, 234, .04); }
.gd-jq--v2 .jq-dx-row { transition: background .35s var(--jq-ease); }
.gd-jq--v2 .jq-dx-row:hover { background: rgba(21, 23, 27, .025); }
/* 7 — Strip-canvas dubbel-layer: subtle scanlines */
.gd-jq--v2 .jq-hero2-sticky::before,
.gd-jq--v2 .jq-fc-sticky::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
mix-blend-mode: overlay;
opacity: .22;
background-image:
repeating-linear-gradient(0deg, rgba(244, 241, 234, .025) 0px, rgba(244, 241, 234, .025) 1px, transparent 1px, transparent 3px);
}
/* 8 — Color-depth porträtt + behandling-media */
.gd-jq--v2 .jq-spx-portrait-w {
background: linear-gradient(135deg, #2a261f 0%, #15171b 100%);
}
.gd-jq--v2 .jq-bx-media {
background: linear-gradient(135deg, #1a1c20 0%, #100f0d 100%);
}
/* Boostad film-grain (.045 → .065) */
.gd-jq--v2::before { opacity: .065; }
/* Hero-video: inner radial-glow för CTA-area */
.gd-jq--v2 .jq-hero2-veil {
background:
radial-gradient(ellipse 70vw 60svh at 50% 50%, rgba(244, 241, 234, .06) 0%, transparent 50%),
radial-gradient(ellipse at 30% 35%, rgba(16, 15, 13, 0) 0%, rgba(16, 15, 13, .18) 38%, rgba(16, 15, 13, .78) 100%),
linear-gradient(180deg, rgba(16, 15, 13, .62) 0%, rgba(16, 15, 13, .05) 28%, rgba(16, 15, 13, .55) 78%, rgba(16, 15, 13, .92) 100%);
}
/* Tooth-anchor pulse */
@keyframes jqAnchorPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(30, 115, 190, 0); }
50% { box-shadow: 0 0 0 4px rgba(30, 115, 190, .12); }
}
.jq-anchor.is-visible {
animation: jqAnchorPulse 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 [data-px] { will-change: auto; transform: none; }
.jq-anchor.is-visible { animation: none; }
}
/* ════════════════════════════════════════════════
V2 — P0 BUNDLE (tandreglering · om-oss · priser)
Importeras manuellt in i jq-r1.css av jq-koordinator
════════════════════════════════════════════════ */
/* ─── Delade tokens (säkrar fallback om jq-r1 inte exponerar) ─────────── */
.gd-jq--v2 {
--jq-beige: #F0ECE2;
--jq-cream: #F4F1EA;
--jq-ink: #15171B;
--jq-stone: #6C7079;
--jq-line: #D5D9E2;
--jq-blue: #1E73BE;
}
/* ════════════════════════════════════════════════════════════════
01 · /tandreglering/ — editorial hub
════════════════════════════════════════════════════════════════ */
/* Översikt-split: prose ska andas, ej kort. Reduce padding bok-text. */
.gd-jq--v2 .gd-pg-tandreglering .jq-bx-head { max-width: 1400px; }
.gd-jq--v2 .gd-pg-tandreglering .jq-bx-head .jq-bx-lede {
margin-top: clamp(20px, 2.4vw, 32px);
}
/* Trygghet — editorial three-up (ersätter gd-tp-benefits) */
.gd-jq--v2 .jq-trust {
background: var(--jq-cream);
padding: clamp(96px, 12vw, 200px) 5vw;
}
.gd-jq--v2 .jq-trust-wrap {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
gap: clamp(48px, 7vw, 120px);
align-items: start;
}
.gd-jq--v2 .jq-trust-head h2 {
font-family: var(--gd-serif);
font-size: clamp(2.4rem, 6.4vw, 6.6rem);
line-height: .96;
letter-spacing: -.02em;
color: var(--jq-ink);
margin: clamp(18px, 2vw, 28px) 0 clamp(20px, 2vw, 32px);
text-wrap: balance;
}
.gd-jq--v2 .jq-trust-head h2 em { font-style: italic; color: currentColor; }
.gd-jq--v2 .jq-trust-head p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 44ch;
margin: 0;
}
.gd-jq--v2 .jq-trust-list {
list-style: none;
margin: 0; padding: 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-trust-row {
display: grid;
grid-template-columns: clamp(60px, 7vw, 100px) minmax(0, 1fr);
gap: clamp(20px, 3vw, 44px);
align-items: start;
padding: clamp(28px, 4vw, 56px) 0;
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-trust-n {
font-family: var(--gd-serif);
font-size: clamp(2rem, 4.4vw, 4.2rem);
line-height: .9;
letter-spacing: -.018em;
color: var(--jq-stone);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-trust-h {
font-family: var(--gd-serif);
font-size: clamp(1.4rem, 2.4vw, 2.2rem);
line-height: 1.1;
letter-spacing: -.012em;
color: var(--jq-ink);
margin: 0 0 12px;
}
.gd-jq--v2 .jq-trust-h em { font-style: italic; color: currentColor; }
.gd-jq--v2 .jq-trust-p {
font-size: 16px;
line-height: 1.7;
color: #4a4a4a;
max-width: 52ch;
margin: 0;
}
/* ════════════════════════════════════════════════════════════════
02 · /om-oss/ — porträtt-trio (jq-spx-trio)
════════════════════════════════════════════════════════════════ */
.gd-jq--v2 .jq-spx-trio {
display: grid;
grid-template-columns: 1fr 1.05fr 1fr;
gap: clamp(36px, 5vw, 80px);
align-items: start;
margin-top: clamp(48px, 7vw, 96px);
}
.gd-jq--v2 .jq-spx-trio .jq-spx-credo {
margin: 0;
padding-top: clamp(24px, 3vw, 40px);
border-top: none;
display: flex; flex-direction: column;
gap: clamp(20px, 2.6vw, 32px);
position: sticky;
top: 100px;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-credo p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 2.2rem);
line-height: 1.28;
letter-spacing: -.012em;
color: var(--jq-ink);
margin: 0;
text-wrap: balance;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-credo cite {
font-style: normal;
font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-stone);
}
/* Om-oss manifest — editorial-toning (lättare typografi) */
.gd-jq--v2 .gd-pg-om-oss .jq-manifest-q p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.8rem, 4vw, 3.6rem);
line-height: 1.18;
letter-spacing: -.014em;
color: var(--jq-ink);
margin: 0;
text-wrap: balance;
}
.gd-jq--v2 .gd-pg-om-oss .jq-manifest-q em { color: currentColor; }
.gd-jq--v2 .gd-pg-om-oss .jq-manifest-q cite {
font-style: normal;
font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-stone);
margin-top: clamp(22px, 2.4vw, 32px);
display: inline-block;
}
/* Editorial citat-band: använder existerande jq-quote utan ramar/skuggor */
.gd-jq--v2 .gd-pg-om-oss .jq-quotes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 3.4vw, 56px);
margin-top: clamp(48px, 7vw, 96px);
}
.gd-jq--v2 .gd-pg-om-oss .jq-quote {
background: transparent;
padding: clamp(28px, 3vw, 48px) 0 0;
border: none;
box-shadow: none;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .gd-pg-om-oss .jq-quote p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.55vw, 1.4rem);
line-height: 1.55;
color: var(--jq-ink);
margin: 0;
}
.gd-jq--v2 .gd-pg-om-oss .jq-quote cite {
display: flex; flex-direction: column; gap: 4px;
font-style: normal;
margin-top: clamp(20px, 2vw, 28px);
}
.gd-jq--v2 .gd-pg-om-oss .jq-quote-name {
font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
color: var(--jq-ink);
}
.gd-jq--v2 .gd-pg-om-oss .jq-quote-meta {
font-size: 13px; color: var(--jq-stone);
letter-spacing: 0; text-transform: none;
}
/* ════════════════════════════════════════════════════════════════
03 · /priser/ — editorial prisblad + finprint
════════════════════════════════════════════════════════════════ */
/* Toggle: total / per månad */
.gd-jq--v2 .jq-ix-toggle {
position: relative;
display: inline-flex;
margin: clamp(20px, 2.4vw, 32px) 0 0;
background: var(--jq-cream);
border: 1px solid var(--jq-line);
border-radius: 999px;
padding: 4px;
gap: 0;
}
.gd-jq--v2 .jq-ix-toggle-btn {
position: relative; z-index: 1;
font-family: var(--gd-sans, "Montserrat", system-ui, sans-serif);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--jq-stone);
background: transparent;
border: 0;
cursor: pointer;
padding: 12px 22px;
min-height: 44px;
border-radius: 999px;
transition: color .35s ease;
}
.gd-jq--v2 .jq-ix-toggle-btn.is-active { color: var(--jq-cream); }
.gd-jq--v2 .jq-ix-toggle-ind {
position: absolute;
z-index: 0;
top: 4px; bottom: 4px; left: 4px;
width: calc(50% - 4px);
background: var(--jq-ink);
border-radius: 999px;
transition: transform .4s var(--jq-ease, cubic-bezier(.2,.7,.1,1));
}
.gd-jq--v2 .jq-ix-toggle[data-mode="month"] .jq-ix-toggle-ind { transform: translateX(100%); }
/* Finprint badge */
.gd-jq--v2 .jq-ix-finprint {
display: inline-flex; align-items: center;
margin: clamp(20px, 2vw, 28px) 0 0;
font-size: 13px;
letter-spacing: .04em;
color: var(--jq-stone);
padding: 10px 18px;
background: var(--jq-cream);
border: 1px solid var(--jq-line);
border-radius: 999px;
}
.gd-jq--v2 .jq-ix-finprint b {
color: var(--jq-ink);
font-weight: 600;
}
/* Exempel-band (delbetalning förklaring) */
.gd-jq--v2 .jq-ix-explain {
background: var(--jq-cream);
padding: clamp(80px, 11vw, 180px) 5vw;
}
.gd-jq--v2 .jq-ix-explain-wrap {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: clamp(48px, 6vw, 100px);
align-items: start;
}
.gd-jq--v2 .jq-ix-explain-head h2 {
font-family: var(--gd-serif);
font-size: clamp(2.2rem, 5.4vw, 5.4rem);
line-height: .98;
letter-spacing: -.018em;
color: var(--jq-ink);
margin: clamp(16px, 2vw, 24px) 0 clamp(20px, 2vw, 28px);
text-wrap: balance;
}
.gd-jq--v2 .jq-ix-explain-head h2 em { font-style: italic; color: currentColor; }
.gd-jq--v2 .jq-ix-explain-head p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 44ch;
margin: 0 0 clamp(22px, 2.4vw, 32px);
}
.gd-jq--v2 .jq-ix-explain-points {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 14px;
}
.gd-jq--v2 .jq-ix-explain-points li {
font-size: 16px;
line-height: 1.6;
color: var(--jq-ink);
padding-left: 28px;
position: relative;
}
.gd-jq--v2 .jq-ix-explain-points li::before {
content: "→";
position: absolute;
left: 0; top: 0;
color: var(--jq-stone);
font-size: 18px;
}
/* ════════════════════════════════════════════════════════════════
Mobil: 1-kol kollaps + touch-friendly för alla tre uppdragen
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Trust-list — siffror över text */
.gd-jq--v2 .jq-trust-wrap { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
.gd-jq--v2 .jq-trust-row {
grid-template-columns: 1fr;
gap: 14px;
padding: clamp(28px, 5vw, 40px) 0;
}
/* Spx-trio — porträtt → credo → porträtt staplat */
.gd-jq--v2 .jq-spx-trio { grid-template-columns: 1fr; gap: clamp(40px, 7vw, 64px); }
.gd-jq--v2 .jq-spx-trio .jq-spx-credo {
position: static;
padding-top: clamp(28px, 5vw, 40px);
border-top: 1px solid var(--jq-line);
order: 2;
}
.gd-jq--v2 .jq-spx-trio .jq-spx-fig:first-child { order: 1; }
.gd-jq--v2 .jq-spx-trio .jq-spx-fig:last-child { order: 3; }
/* Om-oss citat-grid → 1 kol */
.gd-jq--v2 .gd-pg-om-oss .jq-quotes { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
/* Prisblad-explain stack */
.gd-jq--v2 .jq-ix-explain-wrap { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
/* Toggle ska kunna kläs hela bredden om plats saknas */
.gd-jq--v2 .jq-ix-toggle { width: 100%; }
.gd-jq--v2 .jq-ix-toggle-btn { flex: 1; padding: 12px 14px; }
.gd-jq--v2 .jq-ix-toggle-ind { width: calc(50% - 4px); }
}
@media (max-width: 640px) {
/* Säkerställ läsbar body-text och 44px touch-targets över hela bunten */
.gd-jq--v2 .jq-trust-p,
.gd-jq--v2 .jq-ix-explain-points li { font-size: 16px; }
.gd-jq--v2 .jq-ix-finprint { font-size: 14px; padding: 12px 18px; }
.gd-jq--v2 .jq-ix-toggle-btn { font-size: 11.5px; letter-spacing: .12em; }
}
/* ════════════════════════════════════════════════
V2 — PATTERN-MALLAR (behandling · bettfel · stadssida)
Editorial cinematic — låst palett, vänsterställt, lugnt.
Allt scopas med .gd-jq--v2 så stilen aldrig läcker.
════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────
1. ADV — Fördelar som editorial numrerad lista (behandling.php)
Använder befintliga .jq-dx-list-rader utan anatomy-preview.
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-adv {
padding: clamp(72px, 11vw, 160px) 0;
}
.gd-jq--v2 .jq-v2-adv-list {
list-style: none;
margin: clamp(36px, 5vw, 72px) 0 0;
padding: 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-v2-adv-row {
border-bottom: 1px solid var(--jq-line);
position: relative;
}
.gd-jq--v2 .jq-v2-adv-link {
display: grid;
grid-template-columns: clamp(48px, 5vw, 88px) minmax(0, 1.1fr) minmax(0, 2fr);
gap: clamp(20px, 3vw, 56px);
align-items: baseline;
padding: clamp(24px, 3vw, 44px) 0;
color: var(--jq-ink);
text-decoration: none;
transition: padding .35s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-adv-row:hover .jq-v2-adv-link {
padding-left: clamp(6px, 1.2vw, 18px);
}
.gd-jq--v2 .jq-v2-adv-row .jq-dx-num {
color: var(--jq-stone);
}
.gd-jq--v2 .jq-v2-adv-row .jq-dx-name {
font-family: var(--gd-serif);
font-size: clamp(1.6rem, 3.4vw, 3rem);
line-height: 1.04;
letter-spacing: -.016em;
color: var(--jq-ink);
}
.gd-jq--v2 .jq-v2-adv-row .jq-dx-def {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.02rem, 1.18vw, 1.18rem);
line-height: 1.55;
color: #544b3a;
max-width: 48ch;
}
/* ─────────────────────────────────────────────────
2. BA — Cinematic 2-kort före/efter (behandling + bettfel)
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-ba {
padding: clamp(72px, 11vw, 160px) 0;
}
.gd-jq--v2 .jq-v2-ba-lede {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 56ch;
margin: clamp(18px, 2.2vw, 30px) 0 0;
}
.gd-jq--v2 .jq-v2-ba-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.4vw, 36px);
margin-top: clamp(40px, 6vw, 80px);
}
.gd-jq--v2 .jq-v2-ba-fig {
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.gd-jq--v2 .jq-v2-ba-frame {
position: relative;
aspect-ratio: 5/4;
overflow: hidden;
background: var(--jq-deep);
}
.gd-jq--v2 .jq-v2-ba-frame img {
width: 100%;
height: 100%;
object-fit: cover;
filter: contrast(1.04) saturate(.94);
transition: transform 1.1s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-ba-fig:hover .jq-v2-ba-frame img {
transform: scale(1.025);
}
.gd-jq--v2 .jq-v2-ba-cap {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
border-top: 1px solid var(--jq-line);
padding-top: 14px;
}
.gd-jq--v2 .jq-v2-ba-cap > span:first-child {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.1rem, 1.4vw, 1.35rem);
color: var(--jq-ink);
}
.gd-jq--v2 .jq-v2-ba-cap .dim {
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--jq-stone);
}
/* ─────────────────────────────────────────────────
3. PRICE — editorial prisrad (behandling.php)
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-price {
padding: clamp(72px, 11vw, 160px) 0;
}
.gd-jq--v2 .jq-v2-price-table {
margin-top: clamp(40px, 5vw, 72px);
}
.gd-jq--v2 .jq-v2-price-row {
/* utöka standard ix-tr för en enskild premium-rad */
padding: clamp(36px, 4vw, 64px) 0;
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-v2-price-row .jq-ix-name {
font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}
.gd-jq--v2 .jq-v2-price-row .jq-ix-num {
font-size: clamp(2.2rem, 4.6vw, 4rem);
}
.gd-jq--v2 .jq-v2-price-row .jq-ix-desc {
font-size: 15px;
line-height: 1.55;
max-width: 38ch;
}
.gd-jq--v2 .jq-v2-price-foot {
margin-top: clamp(32px, 4vw, 56px);
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.gd-jq--v2 .jq-v2-price-fine {
font-family: var(--gd-serif);
font-style: italic;
font-size: 15px;
line-height: 1.55;
color: var(--jq-stone);
max-width: 48ch;
margin: 0;
}
/* ─────────────────────────────────────────────────
4. BX/SYM — Symptom som editorial 2-kol prose (bettfel.php)
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-bx {
padding: clamp(72px, 11vw, 160px) 0;
}
.gd-jq--v2 .jq-v2-bx-lede {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.08rem, 1.4vw, 1.35rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 56ch;
margin: clamp(18px, 2.2vw, 30px) 0 0;
}
.gd-jq--v2 .jq-v2-bx-lede em {
font-style: italic;
color: currentColor;
}
.gd-jq--v2 .jq-v2-bx-list {
list-style: none;
margin: clamp(36px, 5vw, 64px) 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--jq-line);
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-v2-bx-item {
background: var(--jq-bg);
padding: clamp(22px, 2.8vw, 38px);
display: grid;
grid-template-columns: clamp(40px, 4vw, 64px) 1fr;
gap: clamp(16px, 2vw, 28px);
align-items: baseline;
min-height: 44px;
}
.gd-jq--v2 .jq-v2-bx-n {
font-family: var(--gd-serif);
font-size: clamp(1.1rem, 1.4vw, 1.35rem);
line-height: 1;
color: var(--jq-stone);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-v2-bx-t {
font-family: var(--gd-serif);
font-size: clamp(1.15rem, 1.8vw, 1.55rem);
line-height: 1.32;
letter-spacing: -.008em;
color: var(--jq-ink);
margin: 0;
max-width: 42ch;
}
/* ─────────────────────────────────────────────────
5. CAU — Orsaker editorial numrerad (bettfel.php)
Återanvänder jq-dx-list (light bakgrund)
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-cau {
padding: clamp(72px, 11vw, 160px) 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-v2-cau-list {
list-style: none;
margin: clamp(36px, 5vw, 72px) 0 0;
padding: 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-v2-cau-row {
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-v2-cau-link {
display: grid;
grid-template-columns: clamp(48px, 5vw, 88px) minmax(0, 1fr);
gap: clamp(20px, 3vw, 56px);
align-items: baseline;
padding: clamp(22px, 2.6vw, 36px) 0;
color: var(--jq-ink);
text-decoration: none;
transition: padding .35s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-cau-row:hover .jq-v2-cau-link {
padding-left: clamp(6px, 1.2vw, 18px);
}
.gd-jq--v2 .jq-v2-cau-row .jq-dx-num {
color: var(--jq-stone);
}
.gd-jq--v2 .jq-v2-cau-row .jq-dx-name {
font-family: var(--gd-serif);
font-size: clamp(1.45rem, 2.6vw, 2.4rem);
line-height: 1.16;
letter-spacing: -.012em;
color: var(--jq-ink);
max-width: 56ch;
}
/* ─────────────────────────────────────────────────
6. RISK — Obehandlat editorial dark prose-lista (bettfel.php)
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-risk {
padding: clamp(80px, 12vw, 180px) 0;
}
.gd-jq--v2 .jq-v2-risk-h2 {
font-family: var(--gd-serif);
font-size: clamp(2.2rem, 6.2vw, 6rem);
line-height: .98;
letter-spacing: -.022em;
color: var(--jq-cream);
margin: clamp(16px, 2vw, 28px) 0 0;
text-wrap: balance;
}
.gd-jq--v2 .jq-v2-risk-h2 em {
font-style: italic;
color: currentColor;
}
.gd-jq--v2 .jq-v2-risk-list {
list-style: none;
margin: clamp(40px, 6vw, 80px) 0 0;
padding: 0;
border-top: 1px solid rgba(244, 241, 234, .12);
}
.gd-jq--v2 .jq-v2-risk-row {
display: grid;
grid-template-columns: clamp(48px, 5vw, 88px) minmax(0, 1fr);
gap: clamp(20px, 3vw, 56px);
align-items: baseline;
padding: clamp(22px, 2.6vw, 38px) 0;
border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.gd-jq--v2 .jq-v2-risk-n {
font-family: var(--gd-serif);
font-size: clamp(1.2rem, 1.6vw, 1.55rem);
line-height: 1;
color: rgba(244, 241, 234, .42);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-v2-risk-t {
font-family: var(--gd-serif);
font-size: clamp(1.2rem, 2vw, 1.85rem);
line-height: 1.32;
letter-spacing: -.01em;
color: var(--jq-cream);
margin: 0;
max-width: 56ch;
}
/* ─────────────────────────────────────────────────
7. TX — Behandling vertical-stack (bettfel.php, text-bias)
Återanvänder .jq-bx från jq-r1.css, lägger till meta-spalt
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-tx-row {
/* Override: tre kolumner men sista är text-meta, inte media */
grid-template-columns: clamp(80px, 11vw, 160px) minmax(0, 1.4fr) minmax(0, .8fr);
}
.gd-jq--v2 .jq-v2-tx-meta {
display: flex;
flex-direction: column;
gap: 6px;
align-self: center;
text-align: right;
padding-left: clamp(16px, 2vw, 32px);
border-left: 1px solid rgba(244, 241, 234, .12);
}
.gd-jq--v2 .jq-v2-tx-meta-label {
font-size: 10px;
letter-spacing: .3em;
text-transform: uppercase;
color: rgba(244, 241, 234, .55);
}
.gd-jq--v2 .jq-v2-tx-meta-value {
font-family: var(--gd-serif);
font-size: clamp(1.3rem, 2vw, 1.8rem);
line-height: 1.1;
letter-spacing: -.014em;
color: var(--jq-cream);
font-feature-settings: "tnum" on, "lnum" on;
}
/* ─────────────────────────────────────────────────
8. NEAR — Vägen hit närhetsblock (stadssida.php)
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-near {
padding: clamp(72px, 11vw, 160px) 0;
}
.gd-jq--v2 .jq-v2-near-body {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.02rem, 1.25vw, 1.22rem);
line-height: 1.6;
color: var(--jq-stone);
max-width: 60ch;
margin: clamp(14px, 1.8vw, 22px) 0 0;
}
.gd-jq--v2 .jq-v2-near-cities {
margin-top: clamp(40px, 6vw, 80px);
}
.gd-jq--v2 .jq-v2-near-stats {
margin-top: clamp(56px, 8vw, 112px);
border-top: 1px solid var(--jq-line);
padding-top: clamp(32px, 4vw, 56px);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 56px);
}
.gd-jq--v2 .jq-v2-near-stat {
display: flex;
flex-direction: column;
gap: 10px;
}
.gd-jq--v2 .jq-v2-near-stat .n {
font-family: var(--gd-serif);
font-size: clamp(2rem, 4.2vw, 3.6rem);
line-height: 1;
letter-spacing: -.022em;
color: var(--jq-ink);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-v2-near-stat .n b {
font-weight: 400;
color: var(--jq-accent);
font-size: .7em;
margin-left: 4px;
}
.gd-jq--v2 .jq-v2-near-stat .l {
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--jq-stone);
}
/* ─────────────────────────────────────────────────
9. STADSPX — Specialist-trio på stadssida (V2)
Återanvänder jq-spx, lägger pair-grid + credo i mitten
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-stadspx {
padding: clamp(80px, 12vw, 180px) 0;
}
.gd-jq--v2 .jq-v2-stadspx-trio {
margin-top: clamp(48px, 7vw, 96px);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.gd-jq--v2 .jq-v2-stadspx-credo {
margin: 0;
border-top: 0;
padding-top: 0;
align-self: center;
}
.gd-jq--v2 .jq-v2-stadspx-credo p {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.3rem, 2.2vw, 2rem);
line-height: 1.32;
color: var(--jq-ink);
margin: 0;
}
/* ─────────────────────────────────────────────────
10. STADEV — Editorial b/a-stage på stadssida
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-stadev {
padding: clamp(72px, 11vw, 160px) 0;
}
/* ─────────────────────────────────────────────────
11. FINAL — Editorial sluten CTA (alla 3 mallar)
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-final {
padding: clamp(96px, 14vw, 200px) 0;
}
.gd-jq--v2 .jq-v2-final-h2 {
margin-top: clamp(18px, 2.2vw, 30px);
max-width: 18ch;
font-size: clamp(2.4rem, 7.4vw, 7.6rem);
}
.gd-jq--v2 .jq-v2-final-lede {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.08rem, 1.4vw, 1.4rem);
line-height: 1.55;
color: rgba(244, 241, 234, .72);
max-width: 52ch;
margin: clamp(22px, 2.6vw, 34px) 0 0;
}
.gd-jq--v2 .jq-v2-final-cta {
margin-top: clamp(28px, 3.4vw, 44px);
}
.gd-jq--v2 .jq-v2-final .jq-fc-fine {
margin-top: 22px;
}
/* ─────────────────────────────────────────────────
12. CTA-CARD POPULÄR-MARK för jämförelse (behandling)
.is-pop kombineras med .is-hi för full-ink treatment
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-compare-card.is-pop {
position: relative;
}
.gd-jq--v2 .jq-compare-card.is-pop::before {
content: "Din behandling";
position: absolute;
top: clamp(14px, 1.6vw, 22px);
right: clamp(14px, 1.6vw, 22px);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--jq-cream);
padding: 6px 10px;
background: rgba(15, 15, 13, .35);
border: 1px solid rgba(244, 241, 234, .35);
border-radius: 100px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2;
}
/* ─────────────────────────────────────────────────
13. RESET av V1-arvel — neutralisera gd-section/gd-ba-grid
som ev. läcker från äldre stadssida-markup
───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-stadev .gd-ba-frame {
aspect-ratio: 16/9;
width: 100%;
overflow: hidden;
background: var(--jq-deep);
}
/* ─────────────────────────────────────────────────
14. MOBIL — kollaps under 900px (alla V2-mallar)
───────────────────────────────────────────────── */
@media (max-width: 900px) {
/* ADV / CAU — minska kolumnerna */
.gd-jq--v2 .jq-v2-adv-link {
grid-template-columns: clamp(40px, 11vw, 56px) 1fr;
gap: 14px;
padding: 22px 0;
}
.gd-jq--v2 .jq-v2-adv-row .jq-dx-def {
grid-column: 2;
font-size: 15px;
margin-top: 4px;
max-width: none;
}
.gd-jq--v2 .jq-v2-adv-row .jq-dx-name {
font-size: clamp(1.4rem, 6vw, 2rem);
}
.gd-jq--v2 .jq-v2-cau-link {
grid-template-columns: clamp(40px, 11vw, 56px) 1fr;
gap: 14px;
padding: 20px 0;
}
.gd-jq--v2 .jq-v2-cau-row .jq-dx-name {
font-size: clamp(1.2rem, 5.4vw, 1.7rem);
}
/* BA — staplas till 1-kol */
.gd-jq--v2 .jq-v2-ba-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.gd-jq--v2 .jq-v2-ba-frame {
aspect-ratio: 4/3;
}
/* PRICE — staplas, högre num */
.gd-jq--v2 .jq-v2-price-row {
grid-template-columns: 1fr;
gap: 20px;
padding: 28px 0;
}
.gd-jq--v2 .jq-v2-price-row .jq-ix-td-price {
align-items: flex-start;
text-align: left;
}
.gd-jq--v2 .jq-v2-price-row .jq-ix-num {
font-size: clamp(2rem, 10vw, 3.2rem);
}
.gd-jq--v2 .jq-v2-price-foot {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
/* BX — 2-kol → 1-kol */
.gd-jq--v2 .jq-v2-bx-list {
grid-template-columns: 1fr;
}
.gd-jq--v2 .jq-v2-bx-item {
grid-template-columns: 40px 1fr;
gap: 14px;
padding: 22px;
}
.gd-jq--v2 .jq-v2-bx-t {
font-size: clamp(1.05rem, 5vw, 1.3rem);
}
/* RISK — minska kolumner */
.gd-jq--v2 .jq-v2-risk-row {
grid-template-columns: 40px 1fr;
gap: 14px;
padding: 22px 0;
}
.gd-jq--v2 .jq-v2-risk-t {
font-size: clamp(1.1rem, 5.4vw, 1.4rem);
}
.gd-jq--v2 .jq-v2-risk-h2 {
font-size: clamp(2rem, 10vw, 3.2rem);
}
/* TX — meta under content (jq-bx-row mobile redan kollapsar via jq-r1.css) */
.gd-jq--v2 .jq-v2-tx-row {
grid-template-columns: 1fr;
}
.gd-jq--v2 .jq-v2-tx-meta {
border-left: 0;
border-top: 1px solid rgba(244, 241, 234, .12);
padding-left: 0;
padding-top: 18px;
text-align: left;
margin-top: 8px;
}
/* NEAR — staplas */
.gd-jq--v2 .jq-v2-near-stats {
grid-template-columns: 1fr;
gap: 22px;
}
.gd-jq--v2 .jq-v2-near-stat .n {
font-size: clamp(1.8rem, 9vw, 2.6rem);
}
/* STADSPX — staplas (porträtt → credo → porträtt) */
.gd-jq--v2 .jq-v2-stadspx-trio {
grid-template-columns: 1fr;
gap: 40px;
}
.gd-jq--v2 .jq-v2-stadspx-credo p {
font-size: clamp(1.3rem, 5.8vw, 1.8rem);
}
/* FINAL — krymp */
.gd-jq--v2 .jq-v2-final-h2 {
font-size: clamp(2.2rem, 11vw, 4.8rem);
}
.gd-jq--v2 .jq-v2-final-cta {
flex-direction: column;
align-items: stretch;
}
.gd-jq--v2 .jq-v2-final-cta .jq-btn {
justify-content: center;
}
/* POP-badge — flytta in från hörnet på mobil */
.gd-jq--v2 .jq-compare-card.is-pop::before {
top: 12px;
right: 12px;
font-size: 8.5px;
}
}
/* ─────────────────────────────────────────────────
15. Reduce-motion respektering
───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 .jq-v2-adv-row:hover .jq-v2-adv-link,
.gd-jq--v2 .jq-v2-cau-row:hover .jq-v2-cau-link {
padding-left: 0;
}
.gd-jq--v2 .jq-v2-ba-fig:hover .jq-v2-ba-frame img {
transform: none;
}
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.8 — KOMPLETT KORRIGERING (A–G) ░░
════════════════════════════════════════════════════════════════════════════ */
/* A · Kill corduroy/scanline-texturen på V2 ink-sektioner */
.gd-jq--v2 .jq-sec--ink,
.gd-jq--v2.gd-jq .jq-sec--ink {
background-image:
radial-gradient(ellipse 70vw 50vh at 50% 100%, rgba(30, 115, 190, .08) 0%, transparent 70%),
linear-gradient(180deg, var(--jq-ink) 0%, var(--jq-ink) 100%) !important;
}
/* Och kill korduroy även på beige sektioner med .jq-sec--bg om de har V2 — men
behåll subtle warm-light från top */
.gd-jq--v2 .jq-sec--bg,
.gd-jq--v2.gd-jq .jq-sec--bg,
.gd-jq--v2,
.gd-jq--v2 .jq-corduroy {
background-image:
radial-gradient(ellipse 80vw 60vh at 50% 0%, rgba(255, 250, 240, .35) 0%, transparent 70%),
linear-gradient(180deg, var(--jq-bg) 0%, var(--jq-bg) 100%) !important;
}
.gd-jq--v2 .jq-sec--lav {
background-image: linear-gradient(180deg, var(--jq-lav) 0%, var(--jq-lav) 100%) !important;
}
/* B · Recensioner i om-oss — 3-kol grid med klippad text → 2-kol med plats att andas */
.gd-jq--v2 .jq-quotes {
grid-template-columns: 1fr 1fr;
max-width: 1280px;
margin-left: auto; margin-right: auto;
}
.gd-jq--v2 .jq-quote {
padding: clamp(24px, 3vw, 40px);
min-height: auto;
}
.gd-jq--v2 .jq-quote p {
font-size: clamp(1rem, 1.25vw, 1.18rem);
line-height: 1.55;
margin-bottom: 20px;
}
/* Tredje citatet får full bredd under */
.gd-jq--v2 .jq-quotes > .jq-quote:nth-child(3) {
grid-column: 1 / -1;
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 900px) {
.gd-jq--v2 .jq-quotes { grid-template-columns: 1fr; }
.gd-jq--v2 .jq-quotes > .jq-quote:nth-child(3) { grid-column: auto; }
}
/* C · Priser-calc 3-kol → 1-kol kompakt */
.gd-jq--v2 .jq-ix-cstepper,
.gd-jq--v2 #gd-cstepper {
grid-template-columns: 1fr !important;
max-width: 880px;
margin-left: auto !important;
margin-right: auto !important;
}
.gd-jq--v2 .jq-ix-cstepper .gd-cstep,
.gd-jq--v2 #gd-cstepper .gd-cstep {
min-height: auto !important;
padding: clamp(20px, 2.4vw, 32px) !important;
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-ix-cstepper .gd-cstep:last-child,
.gd-jq--v2 #gd-cstepper .gd-cstep:last-child { border-bottom: 0; }
.gd-jq--v2 .jq-ix-cstepper .gd-copts,
.gd-jq--v2 #gd-cstepper .gd-copts {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.gd-jq--v2 .jq-ix-cstepper .gd-copts-grid,
.gd-jq--v2 #gd-cstepper .gd-copts-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 720px) {
.gd-jq--v2 .jq-ix-cstepper .gd-copts,
.gd-jq--v2 #gd-cstepper .gd-copts {
grid-template-columns: 1fr 1fr !important;
}
}
/* D · Höjd-trim — komprimera content-tunga sektioner */
/* D1 · Resultat — BA stage VÄNSTER, video-citaten 1-kol HÖGER (side-by-side total) */
@media (min-width: 1080px) {
.gd-jq--v2 .jq-ev .jq-wrap {
display: grid !important;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
grid-template-rows: auto 1fr !important;
gap: clamp(28px, 4vw, 56px);
}
.gd-jq--v2 .jq-ev .jq-head { grid-column: 1 / -1 !important; grid-row: 1 !important; }
.gd-jq--v2 .jq-ev-stage { grid-column: 1 !important; grid-row: 2 !important; }
.gd-jq--v2 .jq-ev-voices {
grid-column: 2 !important; grid-row: 2 !important;
grid-template-columns: 1fr !important;
gap: 20px;
align-self: start;
}
.gd-jq--v2 .jq-ev-stage .gd-ba-frame { aspect-ratio: 4/5; max-height: 60vh; }
.gd-jq--v2 .jq-ev-voice-vid { aspect-ratio: 16/10; }
}
/* D2 · Startsida Investering — kompakt calc + cities-band */
.gd-jq--v2 .jq-ix-cities {
grid-template-columns: 1fr !important;
gap: 20px;
margin-top: clamp(28px, 4vw, 48px);
}
.gd-jq--v2 .jq-ix-cities-list {
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
@media (max-width: 1080px) {
.gd-jq--v2 .jq-ix-cities-list { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 600px) {
.gd-jq--v2 .jq-ix-cities-list { grid-template-columns: repeat(2, 1fr) !important; }
}
/* D3 · Behandlings-stack på sub-sidor — 2-kol grid istället för 4 stacked rader.
Förvandlar 250vh till ~140vh för same content. */
@media (min-width: 1080px) {
.gd-jq--v2 #tr-metoder .jq-bx-list,
.gd-jq--v2 #behandling .jq-bx-list,
.gd-jq--v2 #stad-behandlingar .jq-bx-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0;
flex-direction: row;
flex-wrap: wrap;
}
.gd-jq--v2 #tr-metoder .jq-bx-row,
.gd-jq--v2 #behandling .jq-bx-row,
.gd-jq--v2 #stad-behandlingar .jq-bx-row {
grid-template-columns: clamp(48px, 5vw, 70px) minmax(0, 1fr) !important;
padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px) !important;
border-bottom: 1px solid var(--jq-line);
border-right: 1px solid var(--jq-line);
min-height: 0;
gap: clamp(16px, 2vw, 28px) !important;
}
.gd-jq--v2 #tr-metoder .jq-bx-row:nth-child(2n),
.gd-jq--v2 #behandling .jq-bx-row:nth-child(2n),
.gd-jq--v2 #stad-behandlingar .jq-bx-row:nth-child(2n) {
border-right: 0;
}
/* Media-kolumnen tas bort/göms i 2-kol-layout — kompakt typografi-stack */
.gd-jq--v2 #tr-metoder .jq-bx-media,
.gd-jq--v2 #behandling .jq-bx-media,
.gd-jq--v2 #stad-behandlingar .jq-bx-media {
display: none !important;
}
.gd-jq--v2 #tr-metoder .jq-bx-name,
.gd-jq--v2 #behandling .jq-bx-name,
.gd-jq--v2 #stad-behandlingar .jq-bx-name {
font-size: clamp(1.4rem, 1.9vw, 1.9rem);
}
.gd-jq--v2 #tr-metoder .jq-bx-desc,
.gd-jq--v2 #behandling .jq-bx-desc,
.gd-jq--v2 #stad-behandlingar .jq-bx-desc {
font-size: 14.5px;
}
}
/* D4 · Om-oss specialister — porträtt aspect 4/5 → 1/1.1 för lägre framing */
.gd-jq--v2 #oo-specialister .jq-spx-portrait-w {
aspect-ratio: 4/5;
max-height: 56vh;
}
/* E · Hero på sub-sidor — V2-treatment */
.gd-jq--v2 .jq-hero h1,
.gd-jq--v2 .gd-pg-vhero h1 {
font-size: clamp(2.4rem, 5.6vw, 5.2rem) !important;
line-height: .98;
letter-spacing: -.024em;
max-width: 22ch;
}
.gd-jq--v2 .gd-pg-vhero-lead {
font-size: clamp(1.1rem, 1.3vw, 1.22rem) !important;
line-height: 1.55;
}
/* F · Hero-facts (sub-sidor) — ink-tonad block som startsidans hero-meta */
.gd-jq--v2 .jq-hero-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0;
background: rgba(16, 15, 13, .42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(244, 241, 234, .08);
max-width: 820px;
margin-top: clamp(28px, 4vh, 56px);
}
.gd-jq--v2 .jq-hero-facts > span {
padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px);
border-right: 1px solid rgba(244, 241, 234, .12);
border-left: 0;
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(244, 241, 234, .86);
line-height: 1.55;
text-align: left;
}
.gd-jq--v2 .jq-hero-facts > span:last-child { border-right: 0; }
@media (max-width: 900px) {
.gd-jq--v2 .jq-hero-facts { grid-template-columns: 1fr !important; }
.gd-jq--v2 .jq-hero-facts > span { border-right: 0; border-bottom: 1px solid rgba(244,241,234,.12); }
}
/* G · Säkerhets-cap: ingen sektion ska överstiga 200vh utom pin/scene */
.gd-jq--v2 .jq-sec:not(.jq-hero2):not(.jq-bx--pinned):not(.jq-scene):not(.jq-fc) {
overflow: visible;
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.9 — SLUTPOLERING (smart-audit issues) ░░
════════════════════════════════════════════════════════════════════════════ */
/* 1 · Priser delbetalning-section: 2-kol blev klumpig, gör vertikal stack */
.gd-jq--v2 #gd-delbetalning .jq-ix-explain-wrap,
.gd-jq--v2 .jq-ix-explain .jq-ix-explain-wrap {
display: block !important;
max-width: 880px;
margin: 0 auto;
}
.gd-jq--v2 #gd-delbetalning .jq-ix-explain-head,
.gd-jq--v2 .jq-ix-explain-head {
margin-bottom: clamp(28px, 4vw, 48px);
max-width: none;
}
.gd-jq--v2 #gd-delbetalning .jq-ix-explain-points,
.gd-jq--v2 .jq-ix-explain-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.6vw, 40px);
margin-bottom: clamp(40px, 5vw, 64px);
}
.gd-jq--v2 #gd-delbetalning #gd-cstepper {
margin: 0 auto !important;
max-width: 100% !important;
}
@media (max-width: 900px) {
.gd-jq--v2 .jq-ix-explain-points { grid-template-columns: 1fr; }
}
/* 2 · Pris-cell på sub-page behandling-rader: text-overflow fix
Agent B använde .jq-v2-tx-meta-value för pris-värdet. */
.gd-jq--v2 .jq-v2-tx-meta-value,
.gd-jq--v2 .jq-v2-tx-meta-label,
.gd-jq--v2 .jq-bx-row .jq-bx-meta,
.gd-jq--v2 .jq-bx-row .jq-bx-price,
.gd-jq--v2 .jq-bx-row .jq-bx-pris {
white-space: nowrap;
}
.gd-jq--v2 .jq-v2-tx-meta {
white-space: nowrap;
font-size: 12.5px;
}
.gd-jq--v2 .jq-v2-tx-meta-value {
font-family: var(--gd-serif);
font-size: clamp(.95rem, 1.1vw, 1.05rem);
letter-spacing: -.01em;
}
.gd-jq--v2 .jq-v2-tx-meta-label {
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(244,241,234,.55);
}
/* Ge meta-cellen explicit kolumn i 2-kol-grid */
@media (min-width: 1080px) {
.gd-jq--v2 #tr-metoder .jq-bx-row,
.gd-jq--v2 #behandling .jq-bx-row,
.gd-jq--v2 #stad-behandlingar .jq-bx-row {
grid-template-columns: clamp(40px, 4vw, 60px) minmax(0, 1fr) minmax(0, auto) !important;
}
}
/* 3 · Startsida investering — kompakt cities + tightare calc */
.gd-jq--v2 #gd-investering .jq-ix-cities {
margin-top: clamp(32px, 4vw, 56px);
padding-top: clamp(24px, 3vw, 40px);
}
.gd-jq--v2 #gd-investering .jq-ix-cities-head p {
font-size: 14px;
max-width: none;
}
.gd-jq--v2 #gd-investering .jq-ix-cities-list a {
padding: 12px 14px;
}
.gd-jq--v2 #gd-investering .jq-ix-cities-list .c {
font-size: clamp(.98rem, 1.15vw, 1.1rem);
}
.gd-jq--v2 #gd-investering .jq-ix-cities-list .d {
font-size: 9px;
}
/* 4 · Klassisk/behandling compare-card: highlight "Din behandling" på .is-pop */
.gd-jq--v2 .jq-compare-card.is-pop,
.gd-jq--v2 .jq-compare-card.is-hi {
background: var(--jq-ink) !important;
color: var(--jq-cream) !important;
border-color: var(--jq-ink) !important;
position: relative;
}
.gd-jq--v2 .jq-compare-card.is-pop *,
.gd-jq--v2 .jq-compare-card.is-hi * { color: inherit; }
.gd-jq--v2 .jq-compare-card.is-pop::before,
.gd-jq--v2 .jq-compare-card.is-hi::before {
content: "Din behandling";
position: absolute;
top: 16px; left: 16px;
font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
color: var(--jq-accent);
font-weight: 500;
}
/* 5 · Specialister bio cappas till 3 rader */
.gd-jq--v2 .jq-spx-bio {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 4.8em;
}
/* 6 · Process på sub-sidor tightare radhöjd */
.gd-jq--v2 #processteg .jq-pp-row {
padding: clamp(18px, 2vw, 28px) 0;
}
/* 7 · Om-oss testimonials — citaten ska andas mer */
.gd-jq--v2 #oo-testimonials .jq-quotes {
max-width: 1200px;
}
.gd-jq--v2 #oo-testimonials .jq-quote p {
font-size: clamp(1rem, 1.18vw, 1.12rem);
line-height: 1.55;
}
/* 8 · Säkerhets-clearing: jq-prose p font-size respekterar inte alltid V2 */
.gd-jq--v2 .jq-prose p:not([style]) {
font-size: 16px;
line-height: 1.65;
}
/* 9 · Final-CTA panel-quote på sub-sidor (boka-cta-sektioner) — matcha startsidans tyngd */
.gd-jq--v2 .jq-fc-h2,
.gd-jq--v2 section[id*="boka"] h2 {
font-size: clamp(2.4rem, 5vw, 5rem);
line-height: 1;
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.11 — PER-SIDA 20K FINALPASS ░░
Konsoliderar alla observationer från 168-shot audit.
════════════════════════════════════════════════════════════════════════════ */
/* A1 · Startsida: separera cities från investering till egen sliver-band */
.gd-jq--v2 #gd-investering .jq-ix-cities {
margin-top: clamp(48px, 6vw, 88px);
padding-top: clamp(40px, 5vw, 64px);
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 #gd-investering .jq-ix-cities-head {
max-width: 1100px;
margin: 0 auto clamp(28px, 4vw, 48px);
text-align: center;
}
.gd-jq--v2 #gd-investering .jq-ix-cities-head p {
font-family: var(--gd-serif); font-style: italic;
font-size: clamp(.98rem, 1.15vw, 1.12rem);
max-width: 56ch;
margin: 12px auto 0;
}
.gd-jq--v2 #gd-investering .jq-ix-cities-head .jq-eyebrow {
justify-content: center;
}
/* A2 · Resultat: tighter video-citat */
.gd-jq--v2 .jq-ev-voice figcaption blockquote {
font-size: clamp(1rem, 1.15vw, 1.12rem);
line-height: 1.4;
}
/* B1-B2 · Tandreglering trust-rad polish */
.gd-jq--v2 #tr-trygghet .jq-trust-h,
.gd-jq--v2 .jq-trust-row h3 {
font-family: var(--gd-serif);
font-size: clamp(1.3rem, 1.8vw, 1.7rem);
font-weight: 400;
letter-spacing: -.012em;
}
/* C1 · Om-oss stats: säkerställ contrast */
.gd-jq--v2 #oo-specialister .jq-stats,
.gd-jq--v2 .jq-prose-stats {
background: rgba(244, 241, 234, .45);
padding: clamp(20px, 2.4vw, 32px);
border: 1px solid var(--jq-line);
margin-top: clamp(24px, 3vw, 40px);
}
/* D1-D3 · Priser kompakt cities */
.gd-jq--v2 #gd-investering .jq-ix-cities-list,
.gd-jq--v2 .jq-ix-cities-list {
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
gap: 1px;
}
@media (max-width: 1080px) {
.gd-jq--v2 .jq-ix-cities-list { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 640px) {
.gd-jq--v2 .jq-ix-cities-list { grid-template-columns: repeat(2, 1fr) !important; }
}
/* G1 · Villkor cards tinted bg fixed to cream */
.gd-jq--v2 .v2-doc-art,
.gd-jq--v2 #gd-sida.gd-pg-villkor section .gd-card,
.gd-jq--v2 [class*="villkor"] .v2-stack-row {
background: var(--jq-cream) !important;
border: 1px solid var(--jq-line);
}
/* K1 · FAQ-mobile accordion tightare på sub-sidor (alla 13 behandling+bettfel) */
@media (max-width: 900px) {
.gd-jq--v2 .jq-faq summary {
padding: 16px 0 !important;
}
.gd-jq--v2 .jq-faq summary span:first-child {
font-size: clamp(1rem, 4.4vw, 1.2rem) !important;
line-height: 1.32 !important;
}
.gd-jq--v2 .jq-faq p {
padding: 0 0 18px !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
.gd-jq--v2 .jq-faq summary,
.gd-jq--v2 .jq-faq details[open] summary { border-top: 1px solid var(--jq-line); }
}
/* K2 · Processteg-mobile tightare */
@media (max-width: 900px) {
.gd-jq--v2 .jq-pp-track::before { display: none; }
.gd-jq--v2 .jq-pp-row {
padding: clamp(16px, 4vw, 24px) 0 !important;
gap: 12px !important;
}
.gd-jq--v2 .jq-pp-h { font-size: clamp(1.1rem, 5vw, 1.4rem) !important; }
.gd-jq--v2 .jq-pp-p { font-size: 14px !important; line-height: 1.55 !important; }
}
/* K3 · Pris-meta nowrap (universal) */
.gd-jq--v2 .jq-v2-tx-meta,
.gd-jq--v2 .jq-v2-tx-meta-value,
.gd-jq--v2 .jq-v2-tx-meta-label,
.gd-jq--v2 .jq-bx-meta,
.gd-jq--v2 .jq-bx-price {
white-space: nowrap !important;
min-width: max-content;
}
/* L1 · Bettfel behandling-stack tightare mobil */
@media (max-width: 900px) {
.gd-jq--v2 #behandling .jq-bx-row,
.gd-jq--v2 #stad-behandlingar .jq-bx-row,
.gd-jq--v2 #tr-metoder .jq-bx-row {
padding: clamp(20px, 5vw, 32px) 24px !important;
gap: 14px !important;
}
.gd-jq--v2 #behandling .jq-bx-name,
.gd-jq--v2 #stad-behandlingar .jq-bx-name,
.gd-jq--v2 #tr-metoder .jq-bx-name {
font-size: clamp(1.3rem, 5.4vw, 1.7rem) !important;
}
.gd-jq--v2 #behandling .jq-bx-desc,
.gd-jq--v2 #stad-behandlingar .jq-bx-desc,
.gd-jq--v2 #tr-metoder .jq-bx-desc {
font-size: 14px !important;
line-height: 1.55 !important;
}
}
/* M · Stadssidor hero mobil-trim */
@media (max-width: 900px) {
.gd-jq--v2 #gd-stadssida .jq-hero,
.gd-jq--v2 #gd-stadssida .gd-pg-vhero {
min-height: 90svh;
}
.gd-jq--v2 #gd-stadssida .jq-hero-facts {
grid-template-columns: 1fr !important;
gap: 0;
}
}
/* N2 · Universal jq-quiz (smile-quiz) mobil-trim */
@media (max-width: 900px) {
.gd-jq--v2 #gd-quiz .gd-quiz-card { padding: 24px !important; }
.gd-jq--v2 #gd-quiz .gd-quiz-illu { aspect-ratio: 16/10 !important; max-height: 280px; }
}
/* Universal hero-h1 polish på sub-sidor (italic em måste få text-shadow för depth) */
.gd-jq--v2 .jq-hero h1 em,
.gd-jq--v2 .gd-pg-vhero h1 em {
text-shadow: 0 1px 0 rgba(244,241,234,.1), 0 2px 16px rgba(244,241,234,.06);
}
/* Universal hero-facts på sub-sidor matchar startsidans meta-block */
.gd-jq--v2 .jq-hero-facts {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
background: rgba(16, 15, 13, .42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(244, 241, 234, .08);
max-width: 820px;
margin-top: clamp(28px, 4vh, 56px) !important;
}
.gd-jq--v2 .jq-hero-facts > span {
padding: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px) !important;
border-right: 1px solid rgba(244, 241, 234, .12);
border-left: 0 !important;
font-size: 10.5px !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: rgba(244, 241, 234, .86) !important;
line-height: 1.55 !important;
text-align: left;
}
.gd-jq--v2 .jq-hero-facts > span:last-child { border-right: 0 !important; }
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.12 — MIKRO-POLISH ░░
Detaljer från 168-screenshot audit.
════════════════════════════════════════════════════════════════════════════ */
/* BA-tag standardisering (universal — alla sidor med jq-v2-ba/gd-ba) */
.gd-jq--v2 .gd-ba-tag,
.gd-jq--v2 .jq-v2-ba-tag {
background: rgba(21, 23, 27, .68);
color: var(--jq-cream);
font-size: 10.5px;
letter-spacing: .26em;
text-transform: uppercase;
padding: 7px 12px;
white-space: nowrap;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(244, 241, 234, .12);
position: absolute;
z-index: 4;
}
/* Stats-rad på ink: ge bättre kontrast */
.gd-jq--v2 .jq-sec--ink .jq-prose-stats,
.gd-jq--v2 .jq-sec--ink .jq-stats,
.gd-jq--v2 .jq-sec--ink [data-counter-grid] {
background: rgba(244, 241, 234, .04);
border-color: rgba(244, 241, 234, .14);
}
.gd-jq--v2 .jq-sec--ink .jq-prose-stats .n,
.gd-jq--v2 .jq-sec--ink [data-count] {
color: var(--jq-cream);
}
.gd-jq--v2 .jq-sec--ink .jq-prose-stats .l,
.gd-jq--v2 .jq-sec--ink [data-counter-label] {
color: rgba(244, 241, 234, .65);
}
/* Universal carousel-nav-button focus + hover */
.gd-jq--v2 .jq-carousel-btns button {
background: transparent;
color: var(--jq-stone);
border: 1px solid currentColor;
}
.gd-jq--v2 .jq-carousel-btns button:hover {
background: var(--jq-ink);
color: var(--jq-cream);
border-color: var(--jq-ink);
}
.gd-jq--v2 .jq-carousel-btns button:focus-visible {
outline: 2px solid var(--jq-accent);
outline-offset: 3px;
}
/* Footer-cities link hover-state polish */
.jq-footer-cities-list a {
transition: color .25s var(--jq-ease), border-color .25s var(--jq-ease), letter-spacing .25s var(--jq-ease);
}
.jq-footer-cities-list a:hover {
letter-spacing: .01em;
}
/* Universal eyebrow letter-spacing standardisering (.24em för konsistens) */
.gd-jq--v2 .jq-eyebrow:not(.is-light),
.gd-jq--v2 .jq-eyebrow.is-light {
letter-spacing: .24em;
}
@media (max-width: 640px) {
.gd-jq--v2 .jq-eyebrow { letter-spacing: .18em; }
}
/* Final-CTA på sub-sidor (booking-cta sektioner) — säkerställ samma vibe */
.gd-jq--v2 section[id*="boka"] .jq-fc-h2,
.gd-jq--v2 section.jq-v2-final h2,
.gd-jq--v2 section.jq-v2-finalcta h2 {
font-size: clamp(2.4rem, 5.2vw, 5rem);
line-height: 1;
letter-spacing: -.022em;
text-align: center;
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.gd-jq--v2 section[id*="boka"] .jq-fc-h2 em,
.gd-jq--v2 section.jq-v2-final h2 em,
.gd-jq--v2 section.jq-v2-finalcta h2 em {
font-style: italic;
color: currentColor;
text-shadow: 0 1px 0 rgba(244, 241, 234, .1), 0 2px 16px rgba(244, 241, 234, .06);
}
/* Specialister stats-rad (om-oss) — säkerställ V2-typografi */
.gd-jq--v2 #oo-specialister .gd-stat-n,
.gd-jq--v2 #oo-specialister .jq-prose-stats .n {
font-family: var(--gd-serif);
font-size: clamp(2rem, 3.6vw, 3.2rem);
letter-spacing: -.022em;
line-height: 1;
color: var(--jq-cream);
font-feature-settings: "tnum" on, "lnum" on;
font-weight: 400;
}
/* Skip-link tillgänglighet (WCAG 2.4.1) */
.skip-link:not(:focus) {
position: absolute;
left: -9999px;
}
.skip-link:focus {
position: absolute; left: 12px; top: 12px;
background: var(--jq-ink); color: var(--jq-cream);
padding: 12px 20px;
font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
z-index: 999;
}
/* Universal hover på .jq-card och .jq-quote — subtle Z-lift */
.gd-jq--v2 .jq-card {
transition: transform .5s var(--jq-ease), box-shadow .5s var(--jq-ease);
}
.gd-jq--v2 .jq-card:hover {
transform: translateY(-4px);
}
/* Mobile chapter-rail: dölj namnet för mer space, behåll nummer */
@media (max-width: 1280px) and (min-width: 1080px) {
.jq-rail-item.is-active .jq-rail-name { max-width: 70px; font-size: 8px; }
}
/* Reduced motion respect på V2.12 */
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 .jq-card { transition: none; transform: none; }
.gd-jq--v2 .jq-carousel-btns button { transition: none; }
.jq-footer-cities-list a { transition: color .15s ease; }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.13 — ULTRA-MIKROPOLISH ░░
Pixel-perfect typografi, optisk justering, hover-decay-asymmetri.
Inspirerad av: Bringhurst §2-3, Butterick Practical Typography,
Lupton Thinking with Type, Apple SF Pro spec.
════════════════════════════════════════════════════════════════════════════ */
/* T1 · Hängande citationstecken (optisk margin alignment på blockquotes)
Quote-glyph hänger UT vänster så att första bokstaven i texten alignar
med övrig kropp-vänsterkant. (Bringhurst §3.2.4) */
.gd-jq--v2 .jq-quote p,
.gd-jq--v2 .jq-quotes blockquote p,
.gd-jq--v2 .jq-ev-voice blockquote {
hanging-punctuation: first last;
text-indent: 0;
}
.gd-jq--v2 .jq-ev-voice blockquote::before {
margin-left: -.36em;
margin-right: .08em;
}
/* T2 · Optisk margin alignment på rubriker som börjar med tunna bokstäver
Pull "T", "V", "W", "Y" subtle vänster så optisk vänsterkant matchar
resterande text. (Bringhurst §2.1.5) */
.gd-jq--v2 h1, .gd-jq--v2 h2, .gd-jq--v2 h3 {
text-rendering: optimizeLegibility;
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1, "onum" 0, "lnum" 1;
}
/* Spectral har "onum" som default — vi vill ha lining-nums i rubriker för
modern look. */
/* T3 · Tabular numerals universellt på pris/datum/stats */
.gd-jq--v2 .jq-ix-num,
.gd-jq--v2 .jq-mfx-n,
.gd-jq--v2 [data-count],
.gd-jq--v2 .gd-stat-n,
.gd-jq--v2 .jq-pricecard-amount,
.gd-jq--v2 .gd-calc-big,
.gd-jq--v2 .jq-prose-stats .n,
.gd-jq--v2 .gd-plan-num,
.gd-jq--v2 .jq-ix-finprint b,
.gd-jq--v2 .jq-anchor-pct,
.gd-jq--v2 .jq-v2-tx-meta-value {
font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
font-variant-numeric: tabular-nums lining-nums;
}
/* T4 · Hover-decay-asymmetri — buttons/links får snabbt "in" (250ms) och
långsammare "out" (450ms) så det känns responsivt men inte ryckigt. */
.gd-jq--v2 .jq-btn,
.gd-jq--v2 .jq-bx-more,
.gd-jq--v2 .jq-rail-item,
.gd-jq--v2 .gd-pg-channel,
.gd-jq--v2 .jq-ix-tr,
.gd-jq--v2 .jq-quote {
transition-duration: 450ms;
}
.gd-jq--v2 .jq-btn:hover,
.gd-jq--v2 .jq-bx-more:hover,
.gd-jq--v2 .jq-rail-item:hover,
.gd-jq--v2 .gd-pg-channel:hover,
.gd-jq--v2 .jq-ix-tr:hover,
.gd-jq--v2 .jq-quote:hover {
transition-duration: 250ms;
}
/* T5 · Anchor scroll-behavior med custom curve */
html { scroll-behavior: smooth; scroll-padding-top: clamp(60px, 8vh, 100px); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* T6 · Image aspect-locking — förhindra layout-shift när bild laddar */
.gd-jq--v2 .jq-bx-media img,
.gd-jq--v2 .jq-spx-portrait,
.gd-jq--v2 .jq-card-bg,
.gd-jq--v2 .gd-ba-frame img,
.gd-jq--v2 .jq-ev-voice-vid img {
content-visibility: auto;
}
/* T7 · Pixel-perfect 1px lines blir 0.5px på retina-skärmar */
@media (min-resolution: 2dppx) {
.gd-jq--v2 .jq-dx-list,
.gd-jq--v2 .jq-dx-row,
.gd-jq--v2 .jq-ix-tr,
.gd-jq--v2 .jq-ix-cities-list,
.gd-jq--v2 .jq-pp-list,
.gd-jq--v2 .jq-mfx-facts {
--hairline: 0.5px;
}
}
/* T8 · Subtil warm-tint på italic i Spectral display (depth-on-depth) */
.gd-jq--v2 .jq-hero2-h1 em,
.gd-jq--v2 .jq-fc-h2 em,
.gd-jq--v2 .jq-bx-h2 em,
.gd-jq--v2 .jq-pp-head h2 em,
.gd-jq--v2 .jq-mfx-statement em,
.gd-jq--v2 .jq-head h2 em {
font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1, "onum" 1;
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}
/* T9 · Em-dash konsistens — använd `—` (em) som syntaktisk avgränsare, ej `--` */
/* (CSS kan inte injicera — detta är en konvention för innehållskribent.) */
/* T10 · Optisk centrering på centrerade rubriker — kompenserar för
typografisk "vikt"-asymmetri (Spectral italic em får mindre vikt höger) */
.gd-jq--v2 .jq-hero2-h1,
.gd-jq--v2 .jq-fc-h2 {
transform: translateX(-.02em); /* subtle kerning shift mot vänster */
}
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 .jq-hero2-h1,
.gd-jq--v2 .jq-fc-h2 { transform: none; }
}
/* T11 · Hängande punctuation på listor */
.gd-jq--v2 .jq-prose ul,
.gd-jq--v2 .jq-prose ol,
.gd-jq--v2 .jq-ix-td-inc ul {
hanging-punctuation: first;
}
/* T12 · Forced color-scheme respect (printed/dark-mode) */
@media print {
.gd-jq--v2::before,
.gd-jq--v2 .jq-hero2-sticky video,
.jq-rail, .jq-anchor { display: none !important; }
}
/* T13 · Subtle warm-tint på linjer (mer Bringhurst hairline-quality) */
.gd-jq--v2 .jq-ix-tr,
.gd-jq--v2 .jq-pp-row,
.gd-jq--v2 .jq-dx-row {
border-color: color-mix(in oklch, var(--jq-line) 90%, var(--jq-stone) 10%);
}
/* T14 · Anchor-pct värdets transition ska vara snabb (under 100ms) annars
ser det laggigt ut vid snabb scroll */
.jq-anchor-pct { transition: none; }
/* T15 · Eyebrow ::before/::after dots: konsistent space-mellan-dots */
.gd-jq--v2 .jq-eyebrow::before,
.gd-jq--v2 .jq-eyebrow::after {
letter-spacing: .2em;
opacity: .6;
}
/* T16 · Focus-ring konsistens för WCAG 2.1 SC 2.4.7 */
.gd-jq--v2 *:focus-visible {
outline: 2px solid var(--jq-accent);
outline-offset: 3px;
border-radius: 0;
}
.gd-jq--v2 .jq-btn:focus-visible {
outline-offset: 4px;
}
/* T17 · Selection-färg (när man markerar text) */
.gd-jq--v2 ::selection {
background: var(--jq-accent);
color: #fff;
}
/* T18 · BORTTAGEN — orsakade osynliga videos pga JS-hook saknades.
Säkerställ video alltid synlig: */
.gd-jq--v2 video,
.gd-jq--v2 .jq-hero2-media,
.gd-jq--v2 .gd-pg-vhero-bg,
.gd-jq--v2 .jq-bx-media video {
opacity: 1 !important;
}
/* T19 · Better placeholder för image-loading (avoid white-flash) */
.gd-jq--v2 img:not([src]),
.gd-jq--v2 img[src=""],
.gd-jq--v2 img[loading="lazy"]:not([data-loaded]) {
background: linear-gradient(135deg, var(--jq-bg) 0%, var(--jq-cream) 100%);
}
/* T20 · Mobile-tap-highlight färg (iOS Safari default = blå rektangel) */
.gd-jq--v2 a, .gd-jq--v2 button {
-webkit-tap-highlight-color: rgba(30, 115, 190, .15);
}
/* ════════════════════════════════════════════════
V2 — 404-SIDA + CALLBACK-FORMULÄR
════════════════════════════════════════════════
Scope: .gd-jq--v2 (404-template) + pattern callback-form.
Återanvänder V2-tokens (--jq-ink/cream/line/stone/accent,
--gd-serif/--gd-sans). Inga emojis. Inga lila accenter.
Mobilfirst: touch-targets ≥44px, full-bredd inputs.
════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────
404 — editorial-stack med dx-list återanvändning
─────────────────────────────────────────────── */
.gd-jq--v2 .jq-404 {
padding: clamp(96px, 14vw, 180px) 0 clamp(80px, 12vw, 140px);
position: relative;
overflow: hidden;
}
.gd-jq--v2 .jq-404::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 50% 0%, rgba(30,115,190,.06) 0%, rgba(30,115,190,0) 60%),
radial-gradient(70% 50% at 50% 100%, rgba(21,23,27,.05) 0%, rgba(21,23,27,0) 60%);
pointer-events: none;
z-index: 0;
}
.gd-jq--v2 .jq-404 > .jq-wrap {
position: relative;
z-index: 1;
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 56px);
}
.gd-jq--v2 .jq-404-head {
text-align: center;
max-width: 920px;
margin: 0 auto clamp(56px, 9vw, 96px);
}
.gd-jq--v2 .jq-404-head .jq-eyebrow {
justify-content: center;
margin-bottom: 20px;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-404-h1 {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400;
font-size: clamp(3rem, 11vw, 7.5rem);
line-height: .98;
letter-spacing: -.02em;
color: var(--jq-ink);
margin: 0;
}
.gd-jq--v2 .jq-404-h1 em {
font-style: italic;
color: currentColor;
text-shadow: 0 1px 0 rgba(21,23,27,.04);
}
.gd-jq--v2 .jq-404-kicker {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
line-height: 1.45;
color: var(--jq-stone);
margin: 28px auto 0;
max-width: 640px;
}
.gd-jq--v2 .jq-404-kicker em {
font-style: italic;
color: var(--jq-ink);
}
/* dx-list anpassning för 404 — håller editorial-känslan */
.gd-jq--v2 .jq-404-nav {
max-width: 960px;
margin: 0 auto clamp(48px, 8vw, 80px);
}
.gd-jq--v2 .jq-404-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-404-list .jq-dx-row {
border-bottom: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-404-list .jq-dx-link {
display: grid;
grid-template-columns: 56px 1fr auto;
column-gap: clamp(16px, 3vw, 32px);
align-items: baseline;
padding: clamp(18px, 2.6vw, 28px) 4px;
min-height: 56px;
text-decoration: none;
color: var(--jq-ink);
transition: color .35s cubic-bezier(.16,1,.3,1), padding-left .35s cubic-bezier(.16,1,.3,1);
}
.gd-jq--v2 .jq-404-list .jq-dx-link:hover,
.gd-jq--v2 .jq-404-list .jq-dx-link:focus-visible {
color: var(--jq-accent);
padding-left: 10px;
}
.gd-jq--v2 .jq-404-list .jq-dx-link:focus-visible {
outline: 2px solid var(--jq-accent);
outline-offset: 4px;
border-radius: 2px;
}
.gd-jq--v2 .jq-404-list .jq-dx-num {
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: 11px;
letter-spacing: .22em;
color: var(--jq-stone);
grid-row: 1 / span 2;
}
.gd-jq--v2 .jq-404-list .jq-dx-name {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-size: clamp(1.6rem, 4vw, 2.4rem);
line-height: 1.1;
letter-spacing: -.01em;
}
.gd-jq--v2 .jq-404-list .jq-dx-def {
grid-column: 2;
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: clamp(.85rem, 1.4vw, .98rem);
color: var(--jq-stone);
margin-top: 6px;
}
.gd-jq--v2 .jq-404-list .jq-dx-arrow {
font-size: 1.4rem;
color: var(--jq-stone);
grid-row: 1 / span 2;
align-self: center;
transition: transform .35s cubic-bezier(.16,1,.3,1), color .35s ease;
}
.gd-jq--v2 .jq-404-list .jq-dx-link:hover .jq-dx-arrow,
.gd-jq--v2 .jq-404-list .jq-dx-link:focus-visible .jq-dx-arrow {
transform: translateX(8px);
color: var(--jq-accent);
}
.gd-jq--v2 .jq-404-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
align-items: center;
}
.gd-jq--v2 .jq-404-cta .jq-btn {
min-height: 56px;
padding: 18px 32px;
font-size: 14px;
}
.gd-jq--v2 .jq-404-cta .jq-btn--ghost-dark {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 28px;
border: 1px solid var(--jq-ink);
color: var(--jq-ink);
background: transparent;
border-radius: 999px;
text-decoration: none;
font: 600 13px/1 var(--gd-sans, 'Montserrat', sans-serif);
letter-spacing: .12em;
text-transform: uppercase;
transition: background .3s ease, color .3s ease;
}
.gd-jq--v2 .jq-404-cta .jq-btn--ghost-dark:hover,
.gd-jq--v2 .jq-404-cta .jq-btn--ghost-dark:focus-visible {
background: var(--jq-ink);
color: var(--jq-cream);
}
@media (max-width: 640px) {
.gd-jq--v2 .jq-404-list .jq-dx-link {
grid-template-columns: 40px 1fr;
column-gap: 16px;
}
.gd-jq--v2 .jq-404-list .jq-dx-arrow { display: none; }
.gd-jq--v2 .jq-404-cta { flex-direction: column; align-items: stretch; }
.gd-jq--v2 .jq-404-cta .jq-btn,
.gd-jq--v2 .jq-404-cta .jq-btn--ghost-dark { width: 100%; justify-content: center; }
}
/* ───────────────────────────────────────────────
CALLBACK-FORMULÄR — editorial V2-form
─────────────────────────────────────────────── */
.gd-jq--v2 .jq-cb {
padding: clamp(80px, 12vw, 140px) 0;
background: var(--jq-cream, #F4F1EA);
position: relative;
}
.gd-jq--v2 .jq-cb > .jq-wrap {
max-width: 1080px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 56px);
}
.gd-jq--v2 .jq-cb-head {
text-align: center;
max-width: 760px;
margin: 0 auto clamp(48px, 7vw, 72px);
}
.gd-jq--v2 .jq-cb-head .jq-eyebrow {
justify-content: center;
margin-bottom: 18px;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-cb-h2 {
font-family: var(--gd-serif, 'Spectral', Georgia, serif);
font-weight: 400;
font-size: clamp(2.2rem, 6.5vw, 4.4rem);
line-height: 1.02;
letter-spacing: -.02em;
color: var(--jq-ink);
margin: 0;
}
.gd-jq--v2 .jq-cb-h2 em {
font-style: italic;
color: currentColor;
text-shadow: 0 1px 0 rgba(21,23,27,.04);
}
.gd-jq--v2 .jq-cb-kicker {
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: clamp(.95rem, 1.6vw, 1.05rem);
line-height: 1.6;
color: var(--jq-stone);
margin: 22px auto 0;
max-width: 560px;
}
/* Form-grid */
.gd-jq--v2 .jq-cb-form {
max-width: 880px;
margin: 0 auto;
background: #FFFEFB;
border: 1px solid var(--jq-line);
border-radius: 4px;
padding: clamp(28px, 5vw, 56px);
box-shadow:
0 1px 0 rgba(21,23,27,.04),
0 18px 40px -16px rgba(21,23,27,.18),
0 40px 90px -40px rgba(21,23,27,.22);
}
.gd-jq--v2 .jq-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
}
.gd-jq--v2 .jq-form-row { display: flex; flex-direction: column; gap: 10px; }
.gd-jq--v2 .jq-form-row--half { grid-column: span 1; }
.gd-jq--v2 .jq-form-row--full { grid-column: 1 / -1; }
.gd-jq--v2 .jq-form-row--meta {
background: var(--jq-cream, #F4F1EA);
padding: 20px 22px;
border-radius: 3px;
gap: 8px;
justify-content: center;
}
.gd-jq--v2 .jq-form-label {
display: flex;
align-items: baseline;
gap: 12px;
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--jq-ink);
font-weight: 600;
}
.gd-jq--v2 .jq-form-num {
font-variant-numeric: tabular-nums;
color: var(--jq-stone);
}
.gd-jq--v2 .jq-form-text abbr {
color: var(--jq-accent);
text-decoration: none;
font-weight: 700;
margin-left: 2px;
}
.gd-jq--v2 .jq-form-hint {
font-weight: 400;
letter-spacing: .1em;
text-transform: none;
color: var(--jq-stone);
margin-left: 6px;
}
.gd-jq--v2 .jq-form-input,
.gd-jq--v2 .jq-form-select {
width: 100%;
min-height: 52px;
padding: 14px 16px;
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: 16px; /* förhindrar iOS-zoom */
line-height: 1.4;
color: var(--jq-ink);
background: #FFFEFB;
border: 1px solid var(--jq-line);
border-radius: 3px;
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
-webkit-appearance: none;
appearance: none;
}
.gd-jq--v2 .jq-form-input::placeholder { color: var(--jq-stone); opacity: .7; }
.gd-jq--v2 .jq-form-input:hover,
.gd-jq--v2 .jq-form-select:hover { border-color: rgba(21,23,27,.32); }
.gd-jq--v2 .jq-form-input:focus,
.gd-jq--v2 .jq-form-input:focus-visible,
.gd-jq--v2 .jq-form-select:focus,
.gd-jq--v2 .jq-form-select:focus-visible {
outline: none;
border-color: var(--jq-accent);
box-shadow: 0 0 0 3px rgba(30,115,190,.18);
background: #fff;
}
.gd-jq--v2 .jq-form-input:user-invalid,
.gd-jq--v2 .jq-form-input:invalid:not(:placeholder-shown) {
border-color: #B23A48;
}
.gd-jq--v2 .jq-form-textarea {
min-height: 130px;
resize: vertical;
padding-top: 14px;
}
.gd-jq--v2 .jq-form-select-wrap { position: relative; }
.gd-jq--v2 .jq-form-select { padding-right: 44px; cursor: pointer; }
.gd-jq--v2 .jq-form-select-arrow {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--jq-stone);
pointer-events: none;
font-size: 14px;
}
.gd-jq--v2 .jq-form-meta-eyebrow {
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: 10px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--jq-stone);
font-weight: 600;
}
.gd-jq--v2 .jq-form-meta-text {
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: 13px;
line-height: 1.55;
color: var(--jq-stone);
margin: 0;
}
/* Honeypot — visuellt dolt, ej tabbar, ej skärmläsare */
.gd-jq--v2 .jq-form-hp {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Foot + submit */
.gd-jq--v2 .jq-form-foot {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
justify-content: space-between;
margin-top: clamp(28px, 4vw, 40px);
padding-top: clamp(24px, 3vw, 32px);
border-top: 1px solid var(--jq-line);
}
.gd-jq--v2 .jq-form-submit {
min-height: 56px;
padding: 18px 36px;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.gd-jq--v2 .jq-form-submit.is-loading { opacity: .65; pointer-events: none; }
.gd-jq--v2 .jq-form-submit:disabled { opacity: .55; cursor: not-allowed; }
.gd-jq--v2 .jq-form-fine {
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: 12px;
letter-spacing: .04em;
color: var(--jq-stone);
margin: 0;
}
/* Status-meddelande */
.gd-jq--v2 .jq-form-status {
margin-top: 18px;
min-height: 24px;
font-family: var(--gd-sans, 'Montserrat', sans-serif);
font-size: 14px;
line-height: 1.5;
padding: 0 2px;
}
.gd-jq--v2 .jq-form-status.is-success {
color: #2E6E4E;
padding: 14px 18px;
background: rgba(46,110,78,.08);
border-left: 3px solid #2E6E4E;
border-radius: 2px;
}
.gd-jq--v2 .jq-form-status.is-error {
color: #8C2A36;
padding: 14px 18px;
background: rgba(178,58,72,.08);
border-left: 3px solid #B23A48;
border-radius: 2px;
}
.gd-jq--v2 .jq-form-status.is-loading { color: var(--jq-stone); }
@media (max-width: 720px) {
.gd-jq--v2 .jq-form-grid { grid-template-columns: 1fr; }
.gd-jq--v2 .jq-form-row--half { grid-column: 1 / -1; }
.gd-jq--v2 .jq-form-foot { flex-direction: column; align-items: stretch; gap: 14px; }
.gd-jq--v2 .jq-form-submit { width: 100%; justify-content: center; }
.gd-jq--v2 .jq-form-fine { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.gd-jq--v2 .jq-404-list .jq-dx-link,
.gd-jq--v2 .jq-404-list .jq-dx-arrow,
.gd-jq--v2 .jq-form-input,
.gd-jq--v2 .jq-form-select { transition: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.14 — KRITISKA FIXAR ░░
1) Mörk yta mellan top och hero (24px margin-top på main)
2) Hero-video autoplay-fallback (när scrub-rigg inte engage)
════════════════════════════════════════════════════════════════════════════ */
/* Fix 1: kill margin-top på main + wp-site-blocks så hero börjar direkt vid top */
body main.gd-jq,
body main.gd-jq--v2,
.wp-site-blocks main,
body > .wp-site-blocks {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.wp-site-blocks > main,
.wp-site-blocks > .gd-jq {
margin-top: 0 !important;
}
/* Default WP block gap mellan blocks som skapar 24px-gap */
.wp-site-blocks {
--wp--style--block-gap: 0 !important;
}
/* V2.15 · Kill body padding-top:60px på mobile (WP block-theme default på wp-singular) */
@media (max-width: 900px) {
body.wp-singular,
body.page-template,
body { padding-top: 0 !important; padding-bottom: 0 !important; }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.16 — SITE-TOUR WIDGET ░░
"Hemsidan uppdaterad — klicka för rundtur" notifikation + tour-overlay
════════════════════════════════════════════════════════════════════════════ */
/* Notifikation — editorial premium HIGH-CONTRAST (top-center, ovanpå cookie) */
.gd-tour-notif {
position: fixed; top: clamp(80px, 11vh, 110px); left: 50%;
transform: translateX(-50%) translateY(-24px);
z-index: 2147483647; /* topp av z-stack — över Complianz */
max-width: 540px;
width: calc(100vw - 32px);
background: #100F0D; /* var(--jq-deep) ren */
color: #F4F1EA;
border: 1px solid rgba(244,241,234,.22);
box-shadow:
0 1px 0 rgba(244,241,234,.1) inset,
0 0 0 6px rgba(16,15,13,.6), /* outer halo så det poppar ur bakgrunden */
0 8px 24px rgba(0,0,0,.45),
0 48px 96px -16px rgba(0,0,0,.75);
opacity: 0;
transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
font-family: var(--gd-serif, Spectral, Georgia, serif);
}
.gd-tour-notif.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Underline accent — markerar premium-status */
.gd-tour-notif::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--jq-accent) 30%, var(--jq-accent) 70%, transparent 100%);
opacity: .9;
}
.gd-tour-notif-inner {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 18px;
align-items: center;
padding: 20px 24px;
position: relative;
}
.gd-tour-notif-inner::before {
content: "";
position: absolute; top: 0; left: 24px; right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30,115,190,.45), transparent);
}
.gd-tour-notif-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--jq-accent);
box-shadow: 0 0 0 0 rgba(30,115,190,.6);
animation: gdTourPulse 2s ease-in-out infinite;
}
@keyframes gdTourPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(30,115,190,.55); }
50% { box-shadow: 0 0 0 10px rgba(30,115,190,0); }
}
.gd-tour-notif-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gd-tour-notif-body strong {
font-family: var(--gd-serif);
font-size: 19px;
font-weight: 400;
font-style: italic;
color: #FFFFFF; /* PURE WHITE — max contrast */
letter-spacing: -.008em;
line-height: 1.2;
}
.gd-tour-notif-body span {
font-family: var(--gd-sans, Montserrat, system-ui, sans-serif);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(244,241,234,.85); /* boosted från .62 */
font-weight: 500;
}
.gd-tour-notif-start {
background: transparent;
color: var(--jq-cream);
border: 1px solid rgba(244,241,234,.32);
padding: 14px 20px;
min-height: 44px;
font-family: var(--gd-sans, Montserrat);
font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
cursor: pointer;
transition: background .35s var(--jq-ease), border-color .35s var(--jq-ease), color .35s var(--jq-ease);
display: inline-flex; align-items: center; gap: 10px;
white-space: nowrap;
}
.gd-tour-notif-start:hover {
background: var(--jq-cream); color: var(--jq-ink);
border-color: var(--jq-cream);
}
.gd-tour-notif-start span { display: inline-block; transition: transform .35s var(--jq-ease); font-size: 14px; line-height: 1; }
.gd-tour-notif-start:hover span { transform: translateX(4px); }
.gd-tour-notif-close {
background: transparent; color: rgba(244,241,234,.45);
border: 0; cursor: pointer;
font-size: 26px; line-height: 1; padding: 8px 14px;
min-width: 44px; min-height: 44px;
font-weight: 200;
transition: color .25s ease, transform .25s ease;
}
.gd-tour-notif-close:hover { color: var(--jq-cream); transform: rotate(90deg); }
@media (max-width: 640px) {
.gd-tour-notif { left: 16px; right: 16px; max-width: none; transform: translateY(-20px); }
.gd-tour-notif.is-visible { transform: translateY(0); }
.gd-tour-notif-inner { grid-template-columns: auto 1fr auto; }
.gd-tour-notif-start { grid-column: 1 / -1; text-align: center; padding: 12px; }
}
/* Tour-frame overlay */
.gd-tour-frame {
position: fixed; inset: 0;
z-index: 2147483646;
opacity: 0; pointer-events: none;
transition: opacity .4s cubic-bezier(.16,1,.3,1);
}
.gd-tour-frame.is-visible { opacity: 1; }
.gd-tour-frame.is-visible .gd-tour-sheet { pointer-events: auto; }
.gd-tour-frame.is-visible .gd-tour-spot { pointer-events: none; }
/* INGEN dark mask — sidan ska synas klart */
.gd-tour-spot {
position: absolute;
border: 2px solid var(--jq-accent);
box-shadow:
0 0 0 1px rgba(244,241,234,.6) inset,
0 0 24px rgba(30,115,190,.55),
0 0 80px rgba(30,115,190,.28),
0 0 0 4px rgba(30,115,190,.12);
pointer-events: none;
transition: top .6s cubic-bezier(.18,.74,.18,1), left .6s cubic-bezier(.18,.74,.18,1), width .6s cubic-bezier(.18,.74,.18,1), height .6s cubic-bezier(.18,.74,.18,1);
border-radius: 2px;
}
/* Pulse-ring runt spot för att dra uppmärksamhet */
.gd-tour-spot::before {
content: ""; position: absolute; inset: -8px;
border: 1px solid var(--jq-accent);
border-radius: 2px;
opacity: .5;
animation: gdSpotPulse 2.4s ease-in-out infinite;
}
@keyframes gdSpotPulse {
0%, 100% { opacity: .55; transform: scale(1); }
50% { opacity: .15; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.gd-tour-spot::before { animation: none; }
}
/* Bottom-sheet — fixed bottom, ger plats för target ovanför */
.gd-tour-sheet {
position: fixed; left: 50%; bottom: clamp(16px, 2.5vh, 32px);
transform: translateX(-50%);
max-width: 720px;
width: calc(100vw - 32px);
background: #100F0D; /* ink — pop mot beige sida */
color: #F4F1EA;
padding: 0;
border: 1px solid rgba(244,241,234,.18);
box-shadow:
0 1px 0 rgba(244,241,234,.08) inset,
0 8px 24px rgba(0,0,0,.35),
0 48px 96px -16px rgba(0,0,0,.55);
pointer-events: auto;
z-index: 2;
}
.gd-tour-sheet-progress {
display: flex; gap: 0;
height: 2px;
background: rgba(244,241,234,.08);
overflow: hidden;
}
.gd-tour-sheet-progress .gd-tour-progress-dot {
flex: 1;
background: transparent;
transition: background .4s cubic-bezier(.16,1,.3,1);
border-right: 1px solid rgba(244,241,234,.06);
}
.gd-tour-sheet-progress .gd-tour-progress-dot:last-child { border-right: 0; }
.gd-tour-sheet-progress .gd-tour-progress-dot.is-active { background: var(--jq-accent); }
.gd-tour-sheet-progress .gd-tour-progress-dot.is-past { background: rgba(244,241,234,.42); }
.gd-tour-sheet-body {
padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3vw, 40px);
transition: opacity .25s cubic-bezier(.18,.74,.18,1);
}
.gd-tour-card-meta {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
font-family: var(--gd-sans, Montserrat);
font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
color: rgba(244,241,234,.55);
}
.gd-tour-step b {
font-family: var(--gd-serif);
font-weight: 400; font-size: 15px;
color: #FFFFFF;
letter-spacing: 0;
text-transform: none;
font-variant-numeric: tabular-nums lining-nums;
}
.gd-tour-close {
background: transparent; border: 0; cursor: pointer;
font-family: var(--gd-sans, Montserrat);
font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: rgba(244,241,234,.55);
padding: 6px 10px;
transition: color .25s ease;
}
.gd-tour-close:hover { color: #FFFFFF; }
.gd-tour-title {
font-family: var(--gd-serif);
font-style: italic;
font-size: clamp(1.3rem, 2vw, 1.7rem);
line-height: 1.16;
letter-spacing: -.012em;
font-weight: 400;
margin: 0 0 10px;
color: #FFFFFF;
text-wrap: balance;
}
.gd-tour-text {
font-family: var(--gd-serif);
font-size: clamp(.98rem, 1.15vw, 1.08rem);
line-height: 1.55;
color: rgba(244,241,234,.82);
margin: 0 0 22px;
max-width: 62ch;
text-wrap: pretty;
}
/* Tour-nav på ink bottom-sheet */
.gd-tour-nav {
display: flex; justify-content: space-between; gap: 12px;
align-items: center;
}
.gd-tour-prev, .gd-tour-next {
font-family: var(--gd-sans, Montserrat);
font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
cursor: pointer;
padding: 12px 22px;
border: 1px solid;
transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.gd-tour-prev {
background: transparent; color: rgba(244,241,234,.65);
border-color: rgba(244,241,234,.25);
}
.gd-tour-prev:hover { color: #FFFFFF; border-color: rgba(244,241,234,.6); }
.gd-tour-prev:disabled { opacity: .25; cursor: not-allowed; }
.gd-tour-next {
background: var(--jq-accent); color: #FFFFFF;
border-color: var(--jq-accent);
}
.gd-tour-next:hover { background: #FFFFFF; color: var(--jq-ink); border-color: #FFFFFF; }
@media (max-width: 640px) {
.gd-tour-sheet { width: calc(100vw - 16px); bottom: 8px; }
.gd-tour-sheet-body { padding: 18px 20px; }
.gd-tour-title { font-size: 1.2rem; }
.gd-tour-text { font-size: .98rem; }
.gd-tour-nav { flex-direction: column-reverse; gap: 8px; }
.gd-tour-prev, .gd-tour-next { width: 100%; text-align: center; padding: 14px; }
}
/* Reduced motion: ingen animation, instant transitions */
@media (prefers-reduced-motion: reduce) {
.gd-tour-notif, .gd-tour-frame, .gd-tour-spot, .gd-tour-card { transition: none; }
.gd-tour-notif-dot { animation: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
░░ V2.17 — COMPLIANZ COOKIE-BANNER V2-STIL ░░
════════════════════════════════════════════════════════════════════════════ */
/* Banner container — editorial card med subtle shadow + cream bg */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
background: #F4F1EA !important;
color: #15171B !important;
border: 1px solid rgba(21,23,27,.1) !important;
border-radius: 0 !important;
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 8px 24px rgba(0,0,0,.16),
0 24px 64px -16px rgba(0,0,0,.32) !important;
font-family: var(--gd-sans, Montserrat, system-ui, sans-serif) !important;
max-width: 540px !important;
padding: clamp(20px, 2.4vw, 32px) !important;
}
/* Top accent-band */
#cmplz-cookiebanner-container .cmplz-cookiebanner::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--jq-accent) 30%, var(--jq-accent) 70%, transparent 100%);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.banner-a {
bottom: clamp(16px, 2.4vh, 28px) !important;
right: clamp(16px, 2.4vw, 28px) !important;
left: auto !important;
}
/* Title — Spectral italic */
.cmplz-cookiebanner .cmplz-title {
font-family: var(--gd-serif, Spectral, Georgia, serif) !important;
font-style: italic !important;
font-size: 1.4rem !important;
font-weight: 400 !important;
letter-spacing: -.012em !important;
color: #15171B !important;
margin: 0 0 12px !important;
}
/* Body text — Montserrat 14px */
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-body {
font-size: 13.5px !important;
line-height: 1.55 !important;
color: #3D3528 !important;
margin: 0 0 16px !important;
}
/* Buttons — V2 jq-btn-stil */
.cmplz-cookiebanner .cmplz-buttons,
.cmplz-cookiebanner .cmplz-categories + .cmplz-buttons {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 16px 0 0 !important;
}
.cmplz-cookiebanner .cmplz-btn {
padding: 14px 22px !important;
font-family: var(--gd-sans, Montserrat) !important;
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
border: 1px solid var(--jq-ink) !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background .3s ease, color .3s ease !important;
width: 100% !important;
text-align: center !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept-all {
background: var(--jq-ink) !important;
color: var(--jq-cream) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
background: var(--jq-accent) !important;
border-color: var(--jq-accent) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
background: transparent !important;
color: var(--jq-ink) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover {
background: var(--jq-ink) !important;
color: var(--jq-cream) !important;
}
/* Links — discreet underline */
.cmplz-cookiebanner .cmplz-links {
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(21,23,27,.08) !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-links a:visited {
font-size: 11px !important;
letter-spacing: .04em !important;
color: #15171B !important;
text-decoration: underline !important;
text-decoration-color: rgba(21,23,27,.3) !important;
text-underline-offset: 3px !important;
min-height: auto !important;
padding: 0 !important;
}
.cmplz-cookiebanner .cmplz-links a:hover {
color: var(--jq-accent) !important;
text-decoration-color: var(--jq-accent) !important;
}
/* Hide broken vendor-count placeholder om finns */
.cmplz-cookiebanner [data-key="manage_consent_options"]:empty,
.cmplz-cookiebanner .vendor_count:empty,
.cmplz-cookiebanner [class*="vendor_count"]:empty { display: none !important; }
/* Hide "vendor_count"-text om literal renderar utan substitution */
.cmplz-cookiebanner a[href*="vendor"]:not([href*="vendors"]) { display: none !important; }
/* Mobil */
@media (max-width: 640px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner {
max-width: none !important;
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
padding: 20px !important;
}
.cmplz-cookiebanner .cmplz-title { font-size: 1.2rem !important; }
}
/* Manage consent floating button — minimalist */
.cmplz-manage-consent.cmplz-show {
background: var(--jq-ink) !important;
color: var(--jq-cream) !important;
border-radius: 0 !important;
padding: 10px 16px !important;
font-family: var(--gd-sans, Montserrat) !important;
font-size: 10.5px !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
border: 1px solid var(--jq-ink) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
bottom: 16px !important; right: 16px !important;
}
.cmplz-manage-consent.cmplz-show:hover {
background: var(--jq-accent) !important;
border-color: var(--jq-accent) !important;
}
/* Categories-section editorial */
.cmplz-cookiebanner .cmplz-categories {
margin: 18px 0 0 !important;
padding: 18px 0 0 !important;
border-top: 1px solid rgba(21,23,27,.08) !important;
}
.cmplz-cookiebanner .cmplz-category {
font-size: 13px !important;
color: #3D3528 !important;
padding: 8px 0 !important;
}
.cmplz-cookiebanner .cmplz-category summary {
font-family: var(--gd-serif, Spectral) !important;
font-style: italic !important;
font-size: 14.5px !important;
color: #15171B !important;
}
/* ════════════════════════════════════════════════════════════════
░░ V2.18 — MOBIL POLERING: OVERFLOW + TOUCH-TARGETS ░░
Fixar:
- Hero-videor som överskrider viewport (398px och 417px höger-kant)
- .gd-quiz-illu, .is-on (pin-behandling), .jq-ix-finprint som bleeds
- Tel/footer/CTA touch-targets <44px
- Bruten chatbot-placeholder
════════════════════════════════════════════════════════════════ */
/* Hide broken 3rd-party chatbot placeholder */
img.qcwpbotmodal-content[src=""],
img.qcwpbotmodal-content:not([src]) { display: none !important; }
@media (max-width: 768px) {
/* Video overflow — videor får aldrig vara bredare än viewport */
.gd-jq--v2 video,
.gd-jq--v2 .jq-hero2-media,
.gd-jq--v2 .jq-scene-media,
.gd-jq--v2 .gd-pg-vhero-bg,
.gd-jq--v2 .gd-pg-vhero video {
max-width: 100vw !important;
width: 100% !important;
object-fit: cover;
object-position: center center;
}
/* Quiz-illustration som overflowar */
.gd-jq--v2 .gd-quiz-illu,
.gd-jq--v2 .gd-quiz-illu img,
.gd-jq--v2 .gd-quiz-illu svg {
max-width: 100vw !important;
width: 100% !important;
height: auto !important;
}
/* Pinnad behandling-carousel — håll inom viewport på mobil */
.gd-jq--v2 .jq-pp-track,
.gd-jq--v2 .jq-pp-track > .is-on,
.gd-jq--v2 .jq-pp-card.is-on {
max-width: 100vw !important;
width: 100% !important;
overflow-x: hidden;
}
.gd-jq--v2 .jq-pp-card.is-on img {
max-width: 100% !important;
width: 100% !important;
}
/* Priser fintext + chapter rail items */
.gd-jq--v2 .jq-ix-finprint {
max-width: calc(100vw - 24px) !important;
overflow-wrap: break-word;
}
.gd-jq--v2 .gd-cstep,
.gd-jq--v2 .jq-rail li,
.gd-jq--v2 .jq-rail-item {
max-width: calc(100vw - 16px) !important;
}
/* Touch-targets ≥44px */
/* Telefon-länkar */
.gd-jq--v2 a[href^="tel:"] {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
padding: 10px 4px !important;
}
/* CTA-knappar */
.gd-jq--v2 .gd-cta,
.gd-jq--v2 .gd-btn,
.gd-jq--v2 .jq-cta,
.gd-jq--v2 .jq-btn,
.gd-jq--v2 a.jq-mfx-cta,
.gd-jq--v2 .gd-pricing-btn {
min-height: 48px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* Footer-länkar */
.gd-jq--v2 footer a,
.gd-jq--v2 .gd-footer a,
.gd-jq--v2 .jq-footer a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
padding: 6px 2px !important;
}
/* Nav-länkar */
.gd-jq--v2 .gd-nav-item > a,
.gd-jq--v2 .gd-submenu a {
min-height: 44px !important;
display: flex !important;
align-items: center;
}
/* Inline "läs mer →" länkar */
.gd-jq--v2 a.jq-arrow,
.gd-jq--v2 .jq-mfx-cta {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
}
/* Privacy Policy small text — bump */
.gd-jq--v2 .cmplz-cookiebanner a,
.gd-jq--v2 footer .privacy-policy a {
min-height: 36px !important;
padding: 8px 4px !important;
display: inline-flex !important;
align-items: center;
}
}
/* Skip-link — visuellt dolt men funktionellt synligt på focus */
.gd-jq--v2 a.skip-link:not(:focus):not(:active),
.gd-jq--v2 a[href="#content"]:not(:focus):not(:active) {
width: 1px !important;
height: 1px !important;
overflow: hidden;
position: absolute !important;
clip: rect(1px,1px,1px,1px);
white-space: nowrap;
}
/* ════════════════════════════════════════════════════════════════
░░ V2.19 — MOBIL FIX-PASS 2 (efter V2.18 audit) ░░
- Parent-section gd-pg-vhero får aldrig vara bredare än 100vw
- Pin-behandling .jq-card på mobil
- Nav/footer/cookies utan .gd-jq--v2-prefix (de är utanför main)
- Generic touch-target på CTAer
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ---- OVERFLOW: parent-sections också ---- */
.gd-pg-vhero,
.jq-hero,
.jq-hero2,
main, main > * {
max-width: 100vw !important;
overflow-x: clip;
}
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Direkta video-element */
video.gd-pg-vhero-bg,
video.jq-hero2-media,
video.jq-scene-media,
.gd-pg-vhero video,
.jq-hero2 video {
max-width: 100vw !important;
width: 100vw !important;
left: 0 !important;
right: 0 !important;
}
/* Pin-behandling kort på mobil */
.jq-pp-card,
.jq-pp-card .jq-card,
a.jq-card,
.jq-card-bg,
.jq-card-veil,
.jq-card-in {
max-width: 100vw !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
.jq-pp-track {
max-width: 100vw !important;
overflow: hidden !important;
}
/* ---- TOUCH TARGETS — utan .gd-jq--v2 prefix (nav/footer är utanför main) ---- */
/* Mailto/Tel-länkar globalt */
a[href^="mailto:"],
a[href^="tel:"] {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
padding: 10px 4px !important;
}
/* Submeny-länkar */
.gd-submenu a,
.gd-submenu .gd-sub-item,
.gd-mega a,
.gd-mega-col a {
min-height: 44px !important;
display: flex !important;
align-items: center !important;
padding: 12px 8px !important;
}
/* Nav-länkar generellt */
header a,
.gd-nav a,
.gd-nav-item > a,
.gd-nav-links a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
}
/* Footer-länkar generellt */
footer a,
.gd-footer a,
.gd-footer-inner a,
.site-footer a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
padding: 6px 4px !important;
}
/* CTA-länkar "LÄS MER · ..." och ".jq-arrow" */
a.jq-arrow,
a[class*="LÄS-MER"],
.jq-mfx-cta,
a.gd-cta,
a.gd-btn,
a.gd-pricing-btn,
.jq-bx-cta,
.jq-bx-row a,
.jq-dx-list a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Cookie-banner knappar */
.cmplz-cookiebanner button,
.cmplz-cookiebanner .cmplz-btn,
#cmplz-cookiebanner-container button {
min-height: 44px !important;
padding: 10px 16px !important;
}
.cmplz-cookiebanner a,
.cmplz-cookiebanner .cmplz-links a {
min-height: 36px !important;
padding: 8px 4px !important;
display: inline-flex !important;
align-items: center;
}
/* "Översikt" och liknande inline submenu — bump till 44 */
.gd-mega-col a,
.gd-mega-col .gd-sub-title {
min-height: 44px !important;
padding: 10px 8px !important;
}
/* Adress-rutor i footer (43→44) */
.gd-footer-addr,
.gd-footer address,
footer address {
min-height: 44px !important;
padding: 4px 0 !important;
}
/* Quiz-illustration (igen, stronger) */
.gd-quiz-illu,
.gd-quiz,
[class*="quiz"] {
max-width: 100vw !important;
overflow: hidden;
}
}
/* ════════════════════════════════════════════════════════════════
░░ V2.20 — MOBIL POLERING SLUTSPURT ░░
- Hide nav-rating + boka-tid btn på mobil (lämna burger)
- jq-hero2-cta-secondary till 48px
- 01/02-footer-länkar till 44+ width
- Complianz-buttons stronger
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Nav-right: visa BARA burger, dölj rating + boka-tid på mobil */
.gd-nav-right .gd-nav-rating,
.gd-nav-right > .gd-btn,
.gd-nav-right a.gd-btn-blue {
display: none !important;
}
.gd-nav-right {
max-width: 60px !important;
justify-content: flex-end !important;
}
}
@media (max-width: 768px) {
/* "Se din behandling" + jq-btn-ghost touch */
.jq-hero2-cta-secondary,
.jq-btn,
.jq-btn--ghost,
a.jq-btn,
.jq-bx-cta {
min-height: 48px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
display: inline-flex !important;
align-items: center;
}
/* Cookie-banner buttons stronger override (Complianz har inline styles) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn,
#cmplz-cookiebanner-container .cmplz-cookiebanner button.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner button.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner button.cmplz-view-preferences,
#cmplz-cookiebanner-container button[class*="cmplz"] {
min-height: 44px !important;
padding: 12px 18px !important;
font-size: 14px !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner a {
min-height: 36px !important;
padding: 10px 4px !important;
display: inline-flex !important;
align-items: center;
}
/* Footer 01/02-områden — gör hela boxen klickbar och 44+ wide */
.gd-footer a[href*="goteborg"],
.gd-footer a[href*="molndal"],
.gd-footer .gd-foot-cell,
footer .gd-foot-area {
min-width: 44px !important;
padding: 8px 6px !important;
}
/* Email-länk inline */
a[href^="mailto:info@gotadental"] {
min-height: 44px !important;
padding: 10px 4px !important;
}
}
/* V2.21 — Cities-list mobile fix (#gd-investering specificity override) */
@media (max-width: 640px) {
.gd-jq--v2 #gd-investering .jq-ix-cities-list,
.gd-jq--v2 .jq-ix-cities-list {
grid-template-columns: repeat(2, 1fr) !important;
}
.gd-jq--v2 #gd-investering .jq-ix-cities-list a,
.gd-jq--v2 .jq-ix-cities-list a {
min-height: 60px !important;
padding: 14px 12px !important;
}
}
@media (max-width: 480px) {
.gd-jq--v2 #gd-investering .jq-ix-cities-list,
.gd-jq--v2 .jq-ix-cities-list {
grid-template-columns: 1fr !important;
}
}
/* ════════════════════════════════════════════════════════════════
░░ V2.23 — BLOG: ARCHIVE + SINGLE LONG-READ ░░
Editorial $20k-känsla med V2-tokens (--jq-ink, --jq-cream,
--jq-beige, --jq-line, --jq-accent, --gd-serif, --gd-sans).
Inga emojis, inga lila accenter, inga left-stripes.
════════════════════════════════════════════════════════════════ */
/* ───── BASE: blog body bakgrund ───── */
.gd-blog,
.gd-blog-single { background: var(--jq-bg); color: var(--jq-ink); }
/* ───── HERO (text-only editorial) ───── */
.gd-blog .jq-blog-hero { padding: clamp(80px, 12vh, 160px) 0 clamp(48px, 6vw, 80px); }
.gd-blog .jq-blog-hero-h {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(2.8rem, 7vw, 6.4rem);
line-height: 1.02;
letter-spacing: -.028em;
color: var(--jq-ink);
margin: 18px 0 clamp(28px, 3.4vw, 44px);
max-width: 16ch;
}
.gd-blog .jq-blog-hero-h em {
font-style: italic;
color: currentColor;
}
.gd-blog .jq-blog-hero-lede {
font-family: var(--gd-serif);
font-size: clamp(1.05rem, 1.5vw, 1.35rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 56ch;
margin: 0 0 clamp(24px, 3vw, 36px);
}
.gd-blog .jq-blog-hero-meta {
display: flex; gap: 14px; align-items: center;
font-family: var(--gd-sans);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--jq-stone);
}
.gd-blog .jq-blog-hero-meta b { color: var(--jq-ink); font-weight: 600; }
.gd-blog .jq-blog-hero-dot { color: var(--jq-line); }
/* ───── FILTER PILLS ───── */
.gd-blog .jq-blog-filter-sec { padding: 0 0 clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--jq-line); }
.gd-blog .jq-blog-filter {
display: flex; flex-wrap: wrap; gap: 8px;
}
.gd-blog .jq-blog-pill {
background: transparent;
border: 1px solid var(--jq-line);
color: var(--jq-stone);
padding: 10px 16px;
font-family: var(--gd-sans);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
cursor: pointer;
transition: background .25s var(--jq-ease, ease), color .25s var(--jq-ease, ease), border-color .25s var(--jq-ease, ease);
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px;
}
.gd-blog .jq-blog-pill:hover { border-color: var(--jq-ink); color: var(--jq-ink); }
.gd-blog .jq-blog-pill.is-active {
background: var(--jq-ink); color: var(--jq-cream); border-color: var(--jq-ink);
}
.gd-blog .jq-blog-pill-n {
font-feature-settings: "tnum" on, "lnum" on;
font-size: 10px;
opacity: .7;
}
/* ───── FEATURED 3-CARDS ───── */
.gd-blog .jq-blog-featured { padding: clamp(48px, 6vw, 96px) 0 clamp(36px, 5vw, 72px); }
.gd-blog .jq-blog-featured-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 48px);
}
.gd-blog .jq-blog-fcard--big { grid-column: 1 / -1; }
.gd-blog .jq-blog-fcard--big .jq-blog-fcard-link { grid-template-columns: 1.4fr 1fr; }
.gd-blog .jq-blog-fcard-link {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 2.5vw, 36px);
text-decoration: none;
color: var(--jq-ink);
padding-bottom: clamp(32px, 4vw, 56px);
border-bottom: 1px solid var(--jq-line);
transition: opacity .35s var(--jq-ease, ease);
}
.gd-blog .jq-blog-fcard-link:hover { opacity: .85; }
.gd-blog .jq-blog-fcard-img {
overflow: hidden;
background: var(--jq-cream);
aspect-ratio: 16/10;
}
.gd-blog .jq-blog-fcard--big .jq-blog-fcard-img { aspect-ratio: 4/3; }
.gd-blog .jq-blog-fcard-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s var(--jq-ease, cubic-bezier(.16,1,.3,1));
}
.gd-blog .jq-blog-fcard-link:hover .jq-blog-fcard-img img { transform: scale(1.03); }
.gd-blog .jq-blog-fcard-body { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.gd-blog .jq-blog-fcard-meta {
font-family: var(--gd-sans);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--jq-stone);
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.gd-blog .jq-blog-fcard-h {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.5rem, 2.6vw, 2.4rem);
line-height: 1.08;
letter-spacing: -.018em;
color: var(--jq-ink);
margin: 0;
}
.gd-blog .jq-blog-fcard--big .jq-blog-fcard-h {
font-size: clamp(1.9rem, 3.8vw, 3.4rem);
letter-spacing: -.022em;
}
.gd-blog .jq-blog-fcard-lead {
font-family: var(--gd-serif);
font-size: 1rem;
line-height: 1.55;
color: var(--jq-stone);
margin: 0;
max-width: 56ch;
}
.gd-blog .jq-blog-fcard-more {
font-family: var(--gd-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--jq-ink);
margin-top: 6px;
}
.gd-blog .jq-blog-fcard-more span { display: inline-block; transition: transform .35s var(--jq-ease, ease); }
.gd-blog .jq-blog-fcard-link:hover .jq-blog-fcard-more span { transform: translateX(6px); }
/* ───── ARKIV-LISTA (text-tabell) ───── */
.gd-blog .jq-blog-list-sec { padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 96px); border-top: 1px solid var(--jq-line); }
.gd-blog .jq-blog-list-head { margin-bottom: clamp(24px, 3vw, 40px); }
.gd-blog .jq-blog-list-h {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.5rem, 2.2vw, 2rem);
letter-spacing: -.018em;
color: var(--jq-ink);
margin: 8px 0 0;
}
.gd-blog .jq-blog-list { list-style: none; margin: 0; padding: 0; }
.gd-blog .jq-blog-row { border-top: 1px solid var(--jq-line); }
.gd-blog .jq-blog-row:last-child { border-bottom: 1px solid var(--jq-line); }
.gd-blog .jq-blog-row-link {
display: grid;
grid-template-columns: 96px minmax(0,1fr) auto;
gap: clamp(20px, 2.5vw, 36px);
padding: clamp(20px, 2.4vw, 28px) 0;
text-decoration: none;
color: var(--jq-ink);
align-items: baseline;
transition: background .25s var(--jq-ease, ease);
}
.gd-blog .jq-blog-row-link:hover { background: rgba(213,217,226,.18); }
.gd-blog .jq-blog-row-link:hover .jq-blog-row-arrow { transform: translateX(6px); }
.gd-blog .jq-blog-row-date {
display: flex; flex-direction: column;
font-family: var(--gd-sans);
color: var(--jq-stone);
letter-spacing: .04em;
line-height: 1.1;
}
.gd-blog .jq-blog-row-d {
font-family: var(--gd-serif);
font-style: italic;
font-size: 22px;
color: var(--jq-ink);
font-feature-settings: "tnum" on, "lnum" on;
}
.gd-blog .jq-blog-row-m {
font-size: 10px;
letter-spacing: .26em;
margin-top: 4px;
}
.gd-blog .jq-blog-row-y {
font-size: 10px;
letter-spacing: .22em;
color: var(--jq-line);
}
.gd-blog .jq-blog-row-main { display: flex; flex-direction: column; gap: 6px; }
.gd-blog .jq-blog-row-cat {
font-family: var(--gd-sans);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--jq-stone);
}
.gd-blog .jq-blog-row-h {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.15rem, 1.8vw, 1.55rem);
line-height: 1.18;
letter-spacing: -.014em;
color: var(--jq-ink);
margin: 0;
}
.gd-blog .jq-blog-row-lead {
font-family: var(--gd-serif);
font-size: 14.5px;
line-height: 1.5;
color: var(--jq-stone);
margin: 0;
max-width: 64ch;
}
.gd-blog .jq-blog-row-meta {
display: flex; gap: 18px; align-items: center;
font-family: var(--gd-sans);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--jq-stone);
white-space: nowrap;
}
.gd-blog .jq-blog-row-arrow {
display: inline-block;
transition: transform .35s var(--jq-ease, ease);
color: var(--jq-ink);
}
.gd-blog .jq-blog-empty { padding: 48px 0; text-align: center; color: var(--jq-stone); font-family: var(--gd-serif); font-style: italic; }
/* ───── CTA-SECTION (delas av archive + single) ───── */
.gd-blog .jq-blog-cta-sec,
.gd-blog-single .jq-blog-cta-sec {
padding: clamp(64px, 8vw, 120px) 0;
background: var(--jq-ink);
color: var(--jq-cream);
}
.gd-blog .jq-blog-cta-sec .jq-eyebrow,
.gd-blog-single .jq-blog-cta-sec .jq-eyebrow { color: rgba(244,241,234,.55); }
.gd-blog .jq-blog-cta,
.gd-blog-single .jq-blog-cta { max-width: 720px; }
.gd-blog .jq-blog-cta-h,
.gd-blog-single .jq-blog-cta-h {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(2rem, 4vw, 3.6rem);
letter-spacing: -.022em;
line-height: 1.05;
color: var(--jq-cream);
margin: 14px 0 18px;
}
.gd-blog .jq-blog-cta-h em,
.gd-blog-single .jq-blog-cta-h em { font-style: italic; color: currentColor; }
.gd-blog .jq-blog-cta-lede,
.gd-blog-single .jq-blog-cta-lede {
font-family: var(--gd-serif);
font-size: 17px;
line-height: 1.55;
color: rgba(244,241,234,.78);
max-width: 58ch;
margin: 0 0 28px;
}
.gd-blog-single .jq-blog-cta-btns { display: flex; gap: 16px; flex-wrap: wrap; }
/* ════════════════════════════════════════════
░░ SINGLE BLOG POST — LONG-READ ░░
════════════════════════════════════════════ */
/* Scroll progress hairline */
.gd-blog-single .jq-blog-progress {
position: fixed; top: 0; left: 0; right: 0; height: 2px;
background: rgba(21,23,27,.05);
z-index: 999;
}
.gd-blog-single .jq-blog-progress-fill {
height: 100%; width: 100%;
background: var(--jq-accent);
transform-origin: left center;
transform: scaleX(0);
transition: transform .12s linear;
}
/* Tillbaka-länk */
.gd-blog-single .jq-blog-back-sec { padding: clamp(40px, 6vh, 80px) 0 0; }
.gd-blog-single .jq-blog-back {
font-family: var(--gd-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--jq-stone);
text-decoration: none;
display: inline-flex; gap: 10px; align-items: center;
transition: color .25s ease;
min-height: 44px;
}
.gd-blog-single .jq-blog-back:hover { color: var(--jq-ink); }
.gd-blog-single .jq-blog-back span { transition: transform .35s ease; }
.gd-blog-single .jq-blog-back:hover span { transform: translateX(-4px); }
/* Header */
.gd-blog-single .jq-blog-header { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 64px); }
.gd-blog-single .jq-blog-h-meta {
font-family: var(--gd-sans);
font-size: 10.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--jq-stone);
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
margin-bottom: clamp(20px, 3vw, 36px);
}
.gd-blog-single .jq-blog-h-cat { color: var(--jq-accent); }
.gd-blog-single .jq-blog-h-title {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(2.4rem, 5.5vw, 5rem);
line-height: 1.04;
letter-spacing: -.026em;
color: var(--jq-ink);
margin: 0 0 clamp(20px, 3vw, 32px);
max-width: 22ch;
}
.gd-blog-single .jq-blog-h-title em { font-style: italic; color: currentColor; }
.gd-blog-single .jq-blog-h-lede {
font-family: var(--gd-serif);
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
font-style: italic;
line-height: 1.5;
color: var(--jq-stone);
max-width: 58ch;
margin: 0 0 clamp(28px, 3.4vw, 44px);
}
.gd-blog-single .jq-blog-h-author {
border-top: 1px solid var(--jq-line);
padding-top: clamp(18px, 2vw, 24px);
display: flex; flex-direction: column; gap: 4px;
}
.gd-blog-single .jq-blog-h-author-name {
font-family: var(--gd-sans);
font-weight: 600;
font-size: 13px;
letter-spacing: .04em;
color: var(--jq-ink);
}
.gd-blog-single .jq-blog-h-author-role {
font-family: var(--gd-serif);
font-style: italic;
font-size: 14px;
color: var(--jq-stone);
}
/* Featured image */
.gd-blog-single .jq-blog-hero-img { padding: 0 0 clamp(40px, 5vw, 72px); }
.gd-blog-single .jq-blog-fig { margin: 0; overflow: hidden; background: var(--jq-cream); }
.gd-blog-single .jq-blog-fig img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
/* Body grid: rail + content */
.gd-blog-single .jq-blog-body-sec { padding: 0 0 clamp(64px, 8vw, 120px); }
.gd-blog-single .jq-blog-body-grid {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: clamp(48px, 6vw, 96px);
align-items: start;
}
.gd-blog-single .jq-blog-rail {
position: sticky; top: 100px;
font-family: var(--gd-sans);
}
.gd-blog-single .jq-blog-rail-list { list-style: none; margin: 18px 0 0; padding: 0; }
.gd-blog-single .jq-blog-rail-list li { margin: 0; }
.gd-blog-single .jq-blog-rail-list a {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
padding: 10px 0;
text-decoration: none;
color: var(--jq-stone);
font-size: 13px;
line-height: 1.4;
transition: color .25s ease;
border-top: 1px solid var(--jq-line);
}
.gd-blog-single .jq-blog-rail-list a:hover,
.gd-blog-single .jq-blog-rail-list .is-active a {
color: var(--jq-ink);
}
.gd-blog-single .jq-blog-rail-list .is-active a .jq-blog-rail-n {
color: var(--jq-accent);
}
.gd-blog-single .jq-blog-rail-n {
font-feature-settings: "tnum" on, "lnum" on;
font-size: 11px;
color: var(--jq-line);
letter-spacing: .12em;
}
/* Body content — editorial typography */
.gd-blog-single .jq-blog-body {
max-width: 65ch;
font-family: var(--gd-serif);
font-size: 19px;
line-height: 1.72;
color: var(--jq-ink);
}
.gd-blog-single .jq-blog-body > * + * { margin-top: 1.4em; }
.gd-blog-single .jq-blog-body p { margin: 1.4em 0 0; }
.gd-blog-single .jq-blog-body p:first-child { margin-top: 0; }
.gd-blog-single .jq-blog-body em { font-style: italic; color: currentColor; }
.gd-blog-single .jq-blog-body strong { font-weight: 600; }
.gd-blog-single .jq-blog-body a {
color: var(--jq-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .2s ease;
}
.gd-blog-single .jq-blog-body a:hover { color: var(--jq-ink); }
.gd-blog-single .jq-blog-body h2 {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.55rem, 2.8vw, 2.4rem);
line-height: 1.1;
letter-spacing: -.018em;
color: var(--jq-ink);
margin: 2em 0 .6em;
scroll-margin-top: 100px;
}
.gd-blog-single .jq-blog-body h2 em { font-style: italic; }
.gd-blog-single .jq-blog-body h3 {
font-family: var(--gd-serif);
font-weight: 500;
font-size: clamp(1.2rem, 2vw, 1.5rem);
line-height: 1.2;
color: var(--jq-ink);
margin: 1.8em 0 .5em;
}
.gd-blog-single .jq-blog-body ul,
.gd-blog-single .jq-blog-body ol {
margin: 1.2em 0;
padding-left: 1.4em;
}
.gd-blog-single .jq-blog-body li { margin: .5em 0; }
.gd-blog-single .jq-blog-body blockquote {
border-left: 0;
padding: 1em 0 1em 1.6em;
margin: 2em 0;
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
font-style: italic;
color: var(--jq-stone);
}
.gd-blog-single .jq-blog-body img,
.gd-blog-single .jq-blog-body figure {
max-width: 100%;
height: auto;
margin: 2em 0;
}
.gd-blog-single .jq-blog-body figcaption {
font-family: var(--gd-sans);
font-size: 12px;
color: var(--jq-stone);
margin-top: 8px;
font-style: italic;
}
.gd-blog-single .jq-blog-body code {
background: var(--jq-cream);
padding: 2px 6px;
border-radius: 2px;
font-size: .9em;
}
/* ───── RELATED POSTS ───── */
.gd-blog-single .jq-blog-related-sec { padding: clamp(64px, 8vw, 120px) 0; border-top: 1px solid var(--jq-line); }
.gd-blog-single .jq-blog-related-head { margin-bottom: clamp(32px, 4vw, 56px); }
.gd-blog-single .jq-blog-related-h {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.6rem);
letter-spacing: -.02em;
color: var(--jq-ink);
margin: 8px 0 0;
}
.gd-blog-single .jq-blog-related-h em { font-style: italic; color: currentColor; }
.gd-blog-single .jq-blog-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 48px);
}
.gd-blog-single .jq-blog-related-link {
display: flex; flex-direction: column; gap: 14px;
text-decoration: none;
color: var(--jq-ink);
}
.gd-blog-single .jq-blog-related-img {
overflow: hidden;
background: var(--jq-cream);
aspect-ratio: 4/3;
}
.gd-blog-single .jq-blog-related-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s var(--jq-ease, cubic-bezier(.16,1,.3,1));
}
.gd-blog-single .jq-blog-related-link:hover .jq-blog-related-img img { transform: scale(1.03); }
.gd-blog-single .jq-blog-related-cat {
font-family: var(--gd-sans);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--jq-stone);
}
.gd-blog-single .jq-blog-related-t {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
line-height: 1.2;
letter-spacing: -.014em;
color: var(--jq-ink);
margin: 0;
}
/* ───── MOBIL — blog-archive + single ───── */
@media (max-width: 900px) {
.gd-blog .jq-blog-featured-grid { grid-template-columns: 1fr; }
.gd-blog .jq-blog-fcard--big .jq-blog-fcard-link,
.gd-blog .jq-blog-fcard-link { grid-template-columns: 1fr; }
.gd-blog .jq-blog-row-link {
grid-template-columns: 70px minmax(0,1fr);
gap: 16px;
}
.gd-blog .jq-blog-row-meta { display: none; }
.gd-blog-single .jq-blog-body-grid { grid-template-columns: 1fr; gap: 32px; }
.gd-blog-single .jq-blog-rail { display: none; }
.gd-blog-single .jq-blog-related-grid { grid-template-columns: 1fr; gap: 32px; }
.gd-blog-single .jq-blog-body { font-size: 17px; }
}
@media (max-width: 600px) {
.gd-blog .jq-blog-pill { font-size: 10px; padding: 8px 12px; }
.gd-blog .jq-blog-row-link { grid-template-columns: 60px 1fr; gap: 12px; }
.gd-blog .jq-blog-row-d { font-size: 18px; }
.gd-blog .jq-blog-row-lead { display: none; }
}
/* ════════════════════════════════════════════════════════════════
░░ V2.24 — "VARFÖR OSS" på BLOG (editorial värdeproposition) ░░
3 pelare med stora siffror, italic em-headlines, hairline divides.
Plats: före final-CTA på både archive och single. Beige bg.
════════════════════════════════════════════════════════════════ */
.gd-blog .jq-blog-why,
.gd-blog-single .jq-blog-why {
padding: clamp(80px, 10vw, 140px) 0;
background: var(--jq-beige);
color: var(--jq-ink);
border-top: 1px solid var(--jq-line);
border-bottom: 1px solid var(--jq-line);
}
.gd-blog .jq-blog-why-head,
.gd-blog-single .jq-blog-why-head {
max-width: 760px;
margin: 0 0 clamp(48px, 6vw, 80px);
}
.gd-blog .jq-blog-why-h,
.gd-blog-single .jq-blog-why-h {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(2.2rem, 4.4vw, 4.2rem);
line-height: 1.04;
letter-spacing: -.024em;
color: var(--jq-ink);
margin: 14px 0 18px;
}
.gd-blog .jq-blog-why-h em,
.gd-blog-single .jq-blog-why-h em {
font-style: italic;
color: currentColor;
}
.gd-blog .jq-blog-why-lede,
.gd-blog-single .jq-blog-why-lede {
font-family: var(--gd-serif);
font-size: clamp(1.05rem, 1.45vw, 1.3rem);
line-height: 1.55;
color: var(--jq-stone);
max-width: 58ch;
margin: 0;
}
.gd-blog .jq-blog-why-grid,
.gd-blog-single .jq-blog-why-grid {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--jq-line);
}
.gd-blog .jq-blog-why-card,
.gd-blog-single .jq-blog-why-card {
padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px) 0;
border-right: 1px solid var(--jq-line);
display: flex; flex-direction: column; gap: 14px;
}
.gd-blog .jq-blog-why-card:last-child,
.gd-blog-single .jq-blog-why-card:last-child {
border-right: 0;
padding-right: 0;
}
.gd-blog .jq-blog-why-card:not(:first-child),
.gd-blog-single .jq-blog-why-card:not(:first-child) {
padding-left: clamp(24px, 3vw, 40px);
}
.gd-blog .jq-blog-why-n,
.gd-blog-single .jq-blog-why-n {
font-family: var(--gd-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(2.4rem, 4vw, 3.6rem);
line-height: 1;
color: var(--jq-line);
font-feature-settings: "tnum" on, "lnum" on;
letter-spacing: -.02em;
margin-bottom: 6px;
}
.gd-blog .jq-blog-why-cat,
.gd-blog-single .jq-blog-why-cat {
font-family: var(--gd-sans);
font-size: 10.5px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--jq-accent);
}
.gd-blog .jq-blog-why-t,
.gd-blog-single .jq-blog-why-t {
font-family: var(--gd-serif);
font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
line-height: 1.1;
letter-spacing: -.018em;
color: var(--jq-ink);
margin: 4px 0 6px;
}
.gd-blog .jq-blog-why-t em,
.gd-blog-single .jq-blog-why-t em {
font-style: italic;
color: currentColor;
}
.gd-blog .jq-blog-why-p,
.gd-blog-single .jq-blog-why-p {
font-family: var(--gd-serif);
font-size: 16px;
line-height: 1.62;
color: var(--jq-stone);
margin: 0;
max-width: 36ch;
}
.gd-blog .jq-blog-why-foot,
.gd-blog-single .jq-blog-why-foot {
border-top: 1px solid var(--jq-line);
padding-top: clamp(32px, 4vw, 56px);
margin-top: 0;
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
/* "ink"-knapp variant om saknas i baseline */
.jq-btn.jq-btn--ink {
background: var(--jq-ink);
color: var(--jq-cream);
border: 1px solid var(--jq-ink);
padding: 14px 24px;
font-family: var(--gd-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
transition: background .25s ease, color .25s ease;
}
.jq-btn.jq-btn--ink:hover { background: var(--jq-accent); border-color: var(--jq-accent); }
.jq-btn.jq-btn--ink span { display: inline-block; transition: transform .35s ease; }
.jq-btn.jq-btn--ink:hover span { transform: translateX(4px); }
/* Mobil */
@media (max-width: 900px) {
.gd-blog .jq-blog-why-grid,
.gd-blog-single .jq-blog-why-grid {
grid-template-columns: 1fr;
border-top: 0;
}
.gd-blog .jq-blog-why-card,
.gd-blog-single .jq-blog-why-card {
border-right: 0;
border-top: 1px solid var(--jq-line);
padding: clamp(28px, 5vw, 40px) 0 !important;
}
}
/* ════════════════════════════════════════════════════════════════
░░ V2.25 — BLOG POLISH (efter användartest) ░░
- Krympt gap mellan featured och arkiv-lista
- Externa länkar i body = ren text (ingen färg/underline)
- Subtil parallax-känsla på featured-bilder
- Chapter-rail tar inget utrymme när tom
════════════════════════════════════════════════════════════════ */
/* 1. Gap-krympning featured → list (V2.28 — eliminera tomma ytan helt) */
.gd-blog .jq-blog-featured { padding: clamp(40px, 5vw, 80px) 0 0 !important; }
.gd-blog .jq-blog-list-sec { padding: 0 0 clamp(48px, 6vw, 96px) !important; border-top: 0 !important; }
.gd-blog .jq-blog-list-head { margin: clamp(20px, 2.4vw, 32px) 0 clamp(10px, 1.4vw, 16px) !important; }
.gd-blog .jq-blog-fcard-link { padding-bottom: clamp(14px, 1.8vw, 22px) !important; margin-bottom: 0 !important; }
/* 2. Externa länkar i body = ren text. Interna behåller accent. */
.gd-blog-single .jq-blog-body a[href^="http"]:not([href*="gotadental.se"]),
.gd-blog-single .jq-blog-body a[href^="//"]:not([href*="gotadental.se"]) {
color: inherit !important;
text-decoration: none !important;
}
.gd-blog-single .jq-blog-body a[href^="http"]:not([href*="gotadental.se"]):hover,
.gd-blog-single .jq-blog-body a[href^="//"]:not([href*="gotadental.se"]):hover {
color: var(--jq-stone) !important;
cursor: pointer;
}
/* 3. Parallax på featured-cards (subtilt, hardware-accelererat) */
.gd-blog .jq-blog-fcard-img img {
transform: translateZ(0) scale(1.02);
transition: transform 1.6s cubic-bezier(.16,1,.3,1);
will-change: transform;
}
.gd-blog .jq-blog-fcard-link:hover .jq-blog-fcard-img img {
transform: translateZ(0) scale(1.06);
}
/* 4. Chapter-rail tar inget utrymme när tom — sätt grid om body, rail hidden via JS */
.gd-blog-single .jq-blog-body-grid.jq-no-rail {
grid-template-columns: minmax(0, 720px);
justify-content: center;
}
.gd-blog-single .jq-blog-body-grid.jq-no-rail .jq-blog-rail { display: none; }
/* V2.26 — Faktagranskning anonym (generisk specialist, ingen personnamn) */
.gd-blog-single .jq-blog-h-author {
border-top: 1px solid var(--jq-line);
padding-top: clamp(18px, 2vw, 24px);
display: inline-flex;
gap: 12px;
align-items: center;
}
.gd-blog-single .jq-blog-h-author-ic {
width: 16px; height: 16px;
color: var(--jq-accent);
flex-shrink: 0;
}
.gd-blog-single .jq-blog-h-author-text {
font-family: var(--gd-serif);
font-style: italic;
font-size: 14.5px;
color: var(--jq-stone);
letter-spacing: -.002em;
}
/* ════════════════════════════════════════════════════════════════
░░ V2.27 — BLOG SINGLE: KRYMP HERO (mindre vertikal plats) ░░
- Tillbaka-section: tightare padding
- Header padding: reducerad
- H1: max 3.8rem (var 5rem)
- Lede: max 1.2rem (var 1.4rem)
- Featured image: 21:9 aspect (mer landscape, mindre höjd)
- Författare-rad: kompaktare
════════════════════════════════════════════════════════════════ */
.gd-blog-single .jq-blog-back-sec {
padding: clamp(28px, 4vh, 56px) 0 0;
}
.gd-blog-single .jq-blog-back {
font-size: 10.5px;
letter-spacing: .22em;
}
.gd-blog-single .jq-blog-header {
padding: clamp(20px, 2.5vw, 32px) 0 clamp(28px, 3vw, 44px);
}
.gd-blog-single .jq-blog-h-meta {
font-size: 10px;
letter-spacing: .2em;
margin-bottom: clamp(16px, 2vw, 24px);
}
.gd-blog-single .jq-blog-h-title {
font-size: clamp(1.9rem, 4.2vw, 3.6rem) !important;
line-height: 1.06 !important;
letter-spacing: -.024em;
margin: 0 0 clamp(16px, 2vw, 22px) !important;
max-width: 26ch;
}
.gd-blog-single .jq-blog-h-lede {
font-size: clamp(1rem, 1.35vw, 1.2rem) !important;
line-height: 1.5 !important;
margin: 0 0 clamp(20px, 2.4vw, 30px) !important;
}
.gd-blog-single .jq-blog-h-author {
padding-top: clamp(14px, 1.6vw, 18px);
gap: 10px;
}
.gd-blog-single .jq-blog-h-author-text {
font-size: 13px;
}
.gd-blog-single .jq-blog-h-author-ic {
width: 14px; height: 14px;
}
.gd-blog-single .jq-blog-hero-img {
padding: 0 0 clamp(28px, 3.6vw, 56px);
}
.gd-blog-single .jq-blog-fig img {
aspect-ratio: 21/9;
}
/* Mobil: hero ännu mindre */
@media (max-width: 768px) {
.gd-blog-single .jq-blog-h-title {
font-size: clamp(1.65rem, 7vw, 2.4rem) !important;
max-width: 100%;
}
.gd-blog-single .jq-blog-h-lede {
font-size: 0.98rem !important;
}
.gd-blog-single .jq-blog-fig img {
aspect-ratio: 16/9;
}
}