/** Shopify CDN: Minification failed
Line 1115:0 Unexpected "}"
**/
/* ============================================================================
QLEER V2 — "Water, made visible"
----------------------------------------------------------------------------
Redesign 27/7-2026. Bygger paa brandbogen (qleer-designidentitet.png), ikke
ved siden af den.
Brandbogens regel: "En sekvens af fuldbredde-farvefelter med hvide pusterum
imellem. Hver blok har én farve, én overskrift, ét produkt, én knap."
V2 aendrer én ting: feltet er ikke malet, det er VAND. En WebGL-overflade
med kaustik og boelger. Produktet svaever over det med en aegte skygge.
Alt andet — farverytmen, typografien, punktummet i overskrifterne — staar.
Filen er additiv. Den overskriver qleer.css hvor v2 gaelder, og lader
resten vaere. Slettes denne fil, er temaet tilbage som foer.
============================================================================ */
/* ------------------------------------------------------------- 0. GRUNDLAG */
/* Denne blok stod foer kun i qleer.css. Uden den regner min-height paa
content-box i stedet for border-box, og feltets 160px padding laegges
OVEN I 100svh — heroen blev 1060px paa en 900px skaerm, med 450px dødt
luft over overskriften. V2 skal kunne staa alene, ogsaa naar den bruges
uden for temaet. */
*,*::before,*::after{box-sizing:border-box}
/* ---------------------------------------------------------------- 1. TOKENS */
:root{
/* ⛔ SITET FINDES KUN I LYS TILSTAND — og det skal siges HOEJT.
`only light` er den staerke form: uden `only` maa Chrome stadig laegge
sin «Auto Dark Theme» oven paa, og iOS moerkner ogsaa et site, der tier.
Maalt 10/8 paa Christians iPhone i moerk tilstand: koralfeltet blev
blegt, overskrifterne naesten usynlige, og Solo/Duo-kortene skiftede til
moerkegroen og moerkeroed.
Det er ikke smag. **Hver eneste kontrastberegning i DESIGN-V2 §3 er
regnet paa de rigtige farver** — Coral #F99470 med ink #5A2213 = 5,72:1
og saa videre. Regner browseren farverne om, gaelder ingen af tallene,
og lov 2 er sat ud af kraft uden at nogen kan se det.
Meta-taggene staar med i `layout/theme.liquid`; begge dele skal til. */
color-scheme: only light;
/* Brandpaletten — uaendret fra qleer.css, gentaget her saa filen kan laeses alene */
--coral:#F99470; --bubblegum:#F5A9C7; --mint:#AAE1C5; --waterblue:#88D1F0;
/* Koral PAA INK. Ren coral paa ink maaler 3,61:1 — under kravet, og det
er praecis dér maerkefarven bruges som eyebrow paa de moerke felter.
Coralen loeftes 40% mod Crisp White: samme kuloer, 4,81:1. Det er samme
greb som resten af siden, bare den anden vej — her er FLADEN moerk, saa
teksten skal lysnes, ikke moerknes. */
--coral-paa-ink:#FABCA4;
/* ═══ ACCENTEN. Maerkets accent har TO udgaver, og de er ikke ombyttelige:
--accent FLADEN (CTA'ens baggrund). Baerer moerk tekst: 5,72:1.
--accent-ink FORMEN (CTA'ens tekst OG logoet). Som form skal accenten
kunne ses mod den laaste plade — koral maaler 1,44–1,98:1
dér, accent-inken 8,20–11,25:1.
qleer-motion.js har de samme to tal og saetter dem direkte paa elementerne
ved hvert feltskift. Aendres accenten, aendres BEGGE steder. */
--accent:#F99470;
--accent-ink:#5A2213;
--ink:#3C5461; --qwhite:#FAFCFD; --surface:#F3FAFB; --hairline:#DCE9ED;
/* De seks produktfarver — ANDRE hex end brandpaletten. Produktet er malet
metal, ikke skaermfarve. Blandes de sammen, ser produktet forkert ud. */
--p-coral:#F99470; --p-mint:#AAE1C5; --p-waterblue:#88D1F0;
--p-bubblegum:#F5A9C7; --p-deepgrey:#5A7A89; --p-white:#F5F0E6;
/* Dybde. Et 3D-site har brug for en hoejdeskala, ikke tilfaeldige shadows.
Hvert trin = produktet loeftes laengere op over vandet. Skyggen bliver
stoerre, blødere og svagere — som en rigtig skygge paa en flade. */
--lift-1:0 2px 8px rgba(60,84,97,.06), 0 1px 2px rgba(60,84,97,.04);
--lift-2:0 8px 24px rgba(60,84,97,.08), 0 2px 6px rgba(60,84,97,.05);
--lift-3:0 20px 50px rgba(60,84,97,.10), 0 6px 14px rgba(60,84,97,.06);
--lift-4:0 40px 90px rgba(60,84,97,.13), 0 12px 28px rgba(60,84,97,.07);
--lift-float:0 60px 120px rgba(60,84,97,.16), 0 20px 40px rgba(60,84,97,.08);
/* Glas. Bruges KUN over vand — aldrig paa hvid bund, hvor det bare bliver graat. */
/* .58 var for lidt: paa ink-feltet blev glasknappen en mudret graa pille
frem for en lys. Glas skal laese som lys, uanset hvad der er bag. */
--glass-bg:rgba(255,255,255,.76);
--glass-brd:rgba(255,255,255,.85);
--glass-blur:blur(18px) saturate(1.35);
/* Bevaegelse. Fra ui-ux-pro-max: 150–300ms for mikro, 300–500ms for rumlig.
Alt over 600ms foeles som ventetid, ikke som design. */
--t-micro:170ms;
--t-ui:280ms;
--t-spatial:460ms;
--t-scene:900ms;
--e-out:cubic-bezier(.22,1,.36,1); /* expo.out — det rolige */
--e-inout:cubic-bezier(.65,0,.35,1);
--e-spring:cubic-bezier(.34,1.56,.64,1); /* et lille overshoot */
/* Rytme. Density 4/10 = luftigt. Et premium-site aander. */
--sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem;
--sp-5:4rem; --sp-6:6rem; --sp-7:9rem; --sp-8:13rem;
--radius-s:14px; --radius-m:22px; --radius-l:34px; --radius-pill:999px;
}
/* ------------------------------------------------------- 2. SCENE / CANVAS */
/* Vandet ligger i ét enkelt fastgjort canvas bag hele siden. Ikke ét pr.
sektion: seks WebGL-kontekster paa samme side draeber en telefon. Scenen
skifter farve naar man scroller ind i et nyt felt. */
.q-scene{
position:fixed; inset:0; z-index:0;
pointer-events:none;
/* Fallback-farven mens WebGL starter — saa der aldrig blinker hvidt */
background:var(--scene-bg,#F99470);
transition:background var(--t-scene) var(--e-inout);
}
.q-scene canvas{display:block;width:100%;height:100%}
/* Alt indhold ligger over vandet. */
.q-page{position:relative;z-index:1}
/* Uden WebGL falder vi tilbage paa flade farvefelter — altsaa v1's udtryk.
Siden skal virke, ikke undskylde sig. */
.no-webgl .q-scene{display:none}
.no-webgl .q-field{background:var(--field)}
/* ------------------------------------------------------------- 3. FELTERNE */
/* Et felt = én skaerm, én farve, ét produkt, én overskrift. Brandbogens blok. */
.q-field{
position:relative;
min-height:100svh;
display:grid;
/* "safe" er ikke pynt. Er indholdet hoejere end feltet, centrerer almindelig
center det ud over BEGGE kanter — og toppen, hvor overskriften staar,
forsvinder op under headeren. safe falder tilbage til start i det tilfaelde.
Set paa planfeltet: 1295px indhold i et 900px felt aad overskriften. */
align-content:safe center;
padding-block:var(--sp-7);
--field:var(--coral);
/* Feltet SÆTTER sin tekstfarve. Det gjorde det ikke før, og det var en hel
klasse af fejl: --on-field stod i hver sektions style, men skulle sættes
eksplicit af hvert element for at gøre nogen forskel. Alt der glemte det
— figcaptions, talbjælken, nye komponenter — arvede body's ink og landede
på 1,27:1 mod uklart vand.
Målt 29/7-2026: syv fejl på missionssidens talbjælke, femten mere da
siden blev bygget om. Med denne ene linje arver alt det rigtige, og
elementer med egen farve i style vinder stadig, som de skal.
Fallback til --ink, så et felt uden --on-field står som før. */
color:var(--on-field,var(--ink));
}
@media(max-width:768px){
.q-field{min-height:auto;padding-block:var(--sp-6)}
/* ⛔ UNDTAGELSEN. Reglen lige ovenfor slaar 100svh fra paa mobil, saa korte
felter ikke straekkes — det er rigtigt for de fleste. Men et felt, der ER
en helskaermsoplevelse, skal blive ved med at vaere det.
Maalt 9/8 paa 375x812 (virkelighedens brillehero): 436px efter klikket,
altsaa 54 % af skaermen. Christian: «det skal jo laves i telefonfold, saa
den fylder hele skaermen.» Med klassen: 812px.
`min-height` er et GULV, ikke et loft — er indholdet hoejere, faar det
lov at vokse. Derfor kan den her regel ikke klippe noget af. */
.q-field--fuld{min-height:100svh}
}
/* Heroen er et saertilfaelde: ALT skal kunne ses uden at scrolle — overskrift,
produkt, farvevaelger og knap. Maalt til 1466px paa en 900px skaerm med
feltets normale rytme, saa produktet laa under folden. Her strammes
luften, og billedet loftes i vh frem for px, saa det skalerer med vinduet
i stedet for at skubbe. */
.q-field--hero{
/* Toppen er fastgjort, saa heroen skal selv holde sig fri af den. Hoejden
MAALES i qleer-v2-chrome.js og lander i --top-h; en fast vaerdi kom ud
af trit i det oejeblik announce-teksten ombroed til to linjer, og saa laa
eyebrow'en ind over kurv og hamburger. 132px er kun reserven, hvis JS
ikke naar at koere. */
padding-block:calc(var(--top-h,132px) + 2.5rem) var(--sp-4);
align-content:center;
}
.q-field--hero .q-display{font-size:clamp(2.8rem,6.4vw,5.4rem)}
.q-field--hero .q-float__img{max-height:38vh;width:auto;max-width:min(92%,480px)}
.q-field--hero .q-swatch{height:44px;width:44px}
/* ---------------------------------------------------------------------------
HEROENS GITTER — ÉN CENTRERET SOEJLE (rettet 9/8-2026)
Christian: «brusehovedet skal jo vaere centralt i midten sammen med det her,
"Qleer as it should be", naar det er paa desktop … det ser allerede godt ud
paa mobilen.»
⛔ HER STOD `grid-template-columns:1.05fr .95fr` paa desktop — to spalter:
tekst til venstre, produkt til hoejre. Den anden spalte findes bare ikke
laengere. Christian bad 8/8 om at rykke bruseren OP i selve soejlen
(«ryk bruseren op mellem Qleer as it should be og se hvad der er i dit
vand»), og `.q-hero-media` blev taget ud. Reglen blev staaende.
Maalt 9/8 paa 1280px, foer rettelsen:
skaermens midte 640px
overskriftens midte 240px ← 400px for langt til venstre
brusehovedets midte 334px ← 306px for langt til venstre
hoejre spalte 532px bred og HELT TOM
Heroen laa altsaa i venstre halvdel med en tom coral flade ved siden af.
Nu er der ÉN soejle, centreret — praecis som under 900px, hvor det allerede
virkede. Det er ikke en ny idé, det er den samme regel uden en undtagelse.
⚠️ Noten i markup'et siger: «Centreret + stablet gav 1060px hoejde paa en
900px skaerm, saa knappen laa under folden.» Det gjaldt den gang produktet
laa i sin EGEN spalte og en centrering derfor lagde det UNDER teksten. I
dag ligger det i stakken uanset hvad, saa raekkefoelgen og hoejden er den
samme — det eneste, der aendrer sig, er vandret placering.
--------------------------------------------------------------------------- */
.q-hero-grid{
display:grid;gap:var(--sp-4);align-items:center;
justify-items:center;text-align:center;
}
.q-hero-grid .q-hero-stack{justify-items:center !important}
@media(min-width:900px){
.q-hero-grid{gap:var(--sp-5)}
}
@media(max-width:899px){
.q-field--hero .q-float__img{max-height:30vh}
}
/* ---------------------------------------------------------------------------
PRODUKTET I HEROENS EGEN SOEJLE (Christian 8/8-2026)
Det laa foer i .q-hero-media til hoejre. Paa en telefon betoed det, at man
skulle rulle forbi overskrift, postnummerfelt OG knap, foer man saa hvad man
koebte. Nu staar det mellem overskriften og feltet — det andet, oejet moeder.
HELE BILLEDET ER KLIKMAALET og foerer til koebspanelet. Det er et , saa
det virker uden JS (lov 7). display:block, fordi et ellers er inline og
ikke kan baere .q-float's positionering.
Hoejden er bundet til viewporten, ikke til billedet: 34vh paa telefon lader
overskrift + produkt + felt staa paa ét skaermbillede. Uden graensen fylder
renderen (928x1152, altsaa hoejformat) hele skaermen alene.
--------------------------------------------------------------------------- */
.q-hero-prod{
display:block;width:100%;
/* Ingen understregning, ingen farve — det ER et billede, ikke en tekstlink. */
color:inherit;text-decoration:none;
border-radius:var(--radius-l);
transition:transform var(--t-micro) var(--e-out);
}
.q-hero-prod:hover{transform:translateY(-4px)}
.q-hero-prod:focus-visible{outline:3px solid currentColor;outline-offset:8px}
.q-hero-prod .q-float{display:block;position:relative}
.q-hero-prod .q-float__img{
display:block;margin-inline:auto;width:auto;height:auto;
/* MAALT paa 375x812: med 34vh blev heroen 907px hoej mod en viewport paa
812 — altsaa 95px for meget, og «Fix mit vand» laa under folden. Delene
var eyebrow 14 + overskrift 85 + produkt 211 + felt 146 + knap 56, plus
fire mellemrum a 25,6. Produktet er den eneste af dem, der kan give.
22vh holder hele heroen paa ét skaermbillede.
⚠️ HAEVET TIL 25vh 9/8-2026. Christian: «selve brusehovedet maa godt vaere
lidt stoerre, faktisk, saa det fylder en lille smule mere.»
MAALT paa 375x812 efter aendringen: billedet 203px, «Fix mit vand» slutter
paa 803 af 812. Den staar over folden — men der er kun 9px tilbage. Gaar
du hoejere, saa MAAL, og forvent at skulle give et andet sted.
⛔ OG SAA DEN UBEHAGELIGE DEL, som paastanden ovenfor skjulte:
paa 375x667 (iPhone SE og 8) staar knappen UNDER folden — og den har gjort
det hele tiden. Kontrolproeven, koert i samme vindue 9/8:
15vh -> -33px 18vh -> -53px
22vh -> -80px 25vh -> -100px (det gamle og det nye)
Selv 15vh redder den ikke. Eyebrow + overskrift + felt + knap fylder for
meget alene, og billedet er ikke det, der vaelter laesset. Saetningen
«22vh holder hele heroen paa ét skaermbillede» var altsaa kun sand for
812px. Aendringen her goer et eksisterende problem 20px vaerre — den
skaber det ikke. Skal 667px fikses, skal der skaeres i TEKSTEN eller
luften, ikke i produktet. ⬛ Aabent punkt. */
max-height:25vh;max-width:100%;
}
/* Den gamle graense laa paa .q-field--hero .q-float__img og er mere specifik
end reglen ovenfor (0,2,0 mod 0,2,0, men den staar senere i arket).
Den skal derfor saettes ned samme sted — ellers vinder 30vh. */
@media(max-width:899px){
.q-field--hero .q-hero-prod .q-float__img{max-height:25vh}
/* Luften mellem heroens dele: 25,6px x 4 er 102px paa en skaerm der mangler
95. Paa desktop er der plads, saa den strammes kun her.
⭐ 1,15 -> 0,85rem 13/8-2026. Christian, med telefonen foran sig: «naar du
lander paa telefonen lige nu, saa er det naesten svaert at ane, at der
staar "fix mit vand" … det hele skal lige rette sig ind dimensionelt, saa
det passer i foerste fold.»
Maalt paa 375x812 FOER: knappens underkant laa paa 821 — altsaa 9px UNDER
folden. Delene var eyebrow 14 + overskrift 85 + produkt 203 + felt 146 +
knap 56 = 504, og de fire mellemrum tog 18,4 hver.
Her spares 4 x 4,8 = 19px, og swipe-kortet giver 24 mere (25 -> 22vh).
Produktet er IKKE det, der skaeres i foerst — det staar i noten ovenfor,
og luften var billigere. */
.q-hero-grid .q-hero-stack{gap:.85rem !important}
.q-field--hero{padding-bottom:2rem}
}
@media(min-width:900px){
/* Paa desktop staar soejlen ved siden af en tom halvdel af gitteret, saa
produktet maa gerne fylde mere — men ikke saa meget at knappen falder
under folden.
42 -> 50vh 9/8-2026, samme oenske som paa mobil. Paa desktop er der
rigeligt: heroen er ikke hoejdebegraenset paa samme maade. */
.q-hero-prod .q-float__img{max-height:50vh}
}
@media(prefers-reduced-motion:reduce){
.q-hero-prod{transition:none}
.q-hero-prod:hover{transform:none}
}
/* `.q-hero-media` — den anden halvdel af `.q-hero-grid`, hvor produktet og
farvevaelgeren staar. Den har MED VILJE ingen CSS-regel, og det er
dokumenteret her 30/7-2026, fordi den staar i sektionsplanens felt 1 og
ellers ser ud som en glemt klasse:
den er et rent markup-greb. Som gitterbarn arver den `align-items:center`
fra `.q-hero-grid` og `justify-items:center` under 899px, og indholdet
(`.q-float`, `[data-swatches]`) baerer sin egen `display:grid` inline.
Skriver man en regel her, aendrer man samtidig fire vedtagne sider —
index.html:119, produkter.html:108, produkt.html:130, medlemskab.html:136 —
plus de fire tilsvarende `sections/qleer-v2-*.liquid`. Det er otte filer for
nul gevinst.
Ingen farve, ingen tekst, intet kontrasttal. Brug den som wrapper; laeg
layout paa `.q-hero-grid` eller paa barnet, ikke her. */
@media(max-width:768px){
/* ⭐ 1,5 -> 0,5rem foroven og 3 -> 1,5rem forneden. 13/8-2026
Christian, med bruseren skaaret over paa telefonen: «du kan overveje at
rykke Qleer og "as it should be" lidt laengere op. Og saa kan du goere dem
lidt mindre store, saa de kan vaere der. Det vigtigste er, at man kan se
HELE produktet, og at det ikke bliver cuttet af.»
De to aendringer frigoer 16 + 24 = 40px, og det er DEM, der betaler for at
swipe-kortet kan vokse fra 22 til 24vh (+16px) uden at «Fix mit vand»
ryger under folden igen. Luften var billigere end produktet — samme
afvejning som noten ved `.q-hero-prod .q-float__img`. */
.q-field--hero{padding-block:calc(var(--top-h,132px) + .5rem) 1.5rem}
.q-field--hero .q-float__img{max-height:26vh}
}
/* Det hvide pusterum mellem felterne. Brandbogen: "hvide pusterum imellem". */
.q-pause{
position:relative;
/* Crisp White — den varme brandhvide, ikke skaermhvid. */
background:#FBF8F2;
padding-block:var(--sp-7);
}
.q-pause--tight{padding-block:var(--sp-6)}
/* To pusterum i traek med hver sin hvide tone gav en synlig kant midt i det
lyse. Gradienten fjerner kanten uden at fjerne forskellen. */
.q-pause--fade{background:linear-gradient(#FBF8F2 0%,#F3FAFB 26%)}
/* --------------------------------------------------------- 3b. OVERGANGEN */
/* Christian: overgangen ind i det hvide "Én identitet"-felt skifter haardt
fra farvefelt til hvidt. Det skal flyde.
Hvorfor det var haardt: feltet er ikke malet — det er vandet, der ligger i
ét fastgjort canvas BAG hele siden. Pusterummet er en uigennemsigtig
#FBF8F2-flade oven paa. Der er ingen faelles flade at tone imellem, saa
kanten mellem dem er en ren klipning.
Loesningen ligger derfor i feltet, ikke i pusterummet: de sidste ~150px af
feltet toner over i pusterummets farve, og nederst staar to bloede
boelgekanter, saa det hvide stiger som tidevand i stedet for at ligge som
en linje. Farven er en variabel (--tide-to), saa den samme overgang kan
bruges ind i ethvert pusterum — ogsaa #F3FAFB.
Boelgen er en MASKE, ikke et billede: saa kan formen males med
--tide-to og skifte med feltet. url() i en maske i DENNE fil ville
ellers resolve relativt til assets/ — det er praecis den faelde der
staar i fejlbanken. En data-URI har ingen sti og undgaar den helt.
Bevaegelsen er én transform pr. lag paa GPU'en. Fejler den, staar
overgangen stille — og den ser stadig rigtig ud (regel 5). */
.q-tide{
position:absolute;left:0;right:0;bottom:0;
height:var(--tide-h,clamp(110px,15vh,190px));
z-index:0;pointer-events:none;
--tide-to:#FBF8F2;
}
.q-tide::before{
content:"";position:absolute;inset:0;
background:linear-gradient(to bottom,
rgba(255,255,255,0) 0%,
color-mix(in srgb,var(--tide-to) 55%,transparent) 62%,
var(--tide-to) 96%);
}
/* Browsere uden color-mix faar en almindelig, lidt kortere tone. Uden dette
ville hele gradienten falde bort og kanten vaere haard igen. */
@supports not (color:color-mix(in srgb,#fff 50%,transparent)){
.q-tide::before{
background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,var(--tide-to) 88%);
}
}
.q-tide__w{
position:absolute;left:0;bottom:0;width:200%;
background:var(--tide-to);
-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
-webkit-mask-position:bottom;mask-position:bottom;
/* Ét felt = halvdelen af elementet = praecis foraeldrenes bredde. Derfor
er en forskydning paa -50% altid et helt antal boelger, uanset
skaermbredde — og gentagelsen er usynlig. */
-webkit-mask-size:50% 100%;mask-size:50% 100%;
will-change:transform;
}
.q-tide__w--back{
height:58%;opacity:.45;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 64C240 14 480 114 720 64c240-50 480 50 720 0v56H0Z' fill='%23000'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 64C240 14 480 114 720 64c240-50 480 50 720 0v56H0Z' fill='%23000'/%3E%3C/svg%3E");
animation:qTide 26s linear infinite;
}
.q-tide__w--front{
height:40%;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C180 34 360 106 720 70c360-36 540 36 720 0v50H0Z' fill='%23000'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C180 34 360 106 720 70c360-36 540 36 720 0v50H0Z' fill='%23000'/%3E%3C/svg%3E");
animation:qTide 17s linear infinite reverse;
}
@keyframes qTide{to{transform:translateX(-50%)}}
/* Den modsatte vej: fra et hvidt pusterum ned i et felt. Samme greb vendt
om, saa rytmen hvid → farve heller ikke klipper. */
.q-tide--top{top:0;bottom:auto;transform:scaleY(-1)}
/* ===========================================================================
.q-tide--blend — EN BLANDING, IKKE EN BOELGESILHUET. 13/8-2026
---------------------------------------------------------------------------
Christian, efter at boelgen var loeftet op over designets baggrundslag:
«Det er stadigvaek ikke blandet sammen. Overgangen skal ligesom blende ind
over hinanden.»
Han har ret, og fejlen var min forstaaelse af, hvad `.q-tide` GOER. Den
tegner en BOELGEFORM i naboens farve — to maskede silhuetter med en skarp
kant, og en gradient der foerst saetter ind ved 62 %. Mellem to felter, hvor
farverne ligner hinanden, laeses den som en blød overgang. Mellem uklart
vand #4A4034 og en lys himmel er den en BOELGET STREG — kanten er stadig
en kant, den er bare ikke lige.
Blandingen goer tre ting:
· dobbelt hoejde — der skal vaere plads til at farverne moedes
· gradienten begynder med det samme (0 %) i stedet for ved 62 %
· boelgerne daempes til .30/.18 og bliver en TEKSTUR i blandingen i
stedet for dens kant
Formen er der stadig — vandet skal kunne ses. Den bestemmer bare ikke
laengere, hvor den ene farve slutter.
=========================================================================== */
.q-tide--blend{--tide-h:clamp(190px,26vh,340px)}
.q-tide--blend::before{
background:linear-gradient(to bottom,
rgba(255,255,255,0) 0%,
color-mix(in srgb,var(--tide-to) 30%,transparent) 34%,
color-mix(in srgb,var(--tide-to) 72%,transparent) 68%,
var(--tide-to) 100%);
}
.q-tide--blend .q-tide__w--back{opacity:.30}
.q-tide--blend .q-tide__w--front{opacity:.18}
/* ===========================================================================
.q-tide--spejl — SYD SKAL SPEJLE NORD. 13/8-2026
---------------------------------------------------------------------------
Christian, med overgangen over produkterne foran sig:
«i overgangen opad mod nord er groen, men nedad er der ikke noget. Syd skal
ogsaa vaere spejlet, saa den ser ens ud begge veje. Saa ligner det jo
egentlig, at der er en glidende overgang, hvis man goer det saadan.»
HVORFOR KANTEN VAR DER. `.q-tide` er asymmetrisk med VILJE: den fader ind
fra ingenting og ender FULDT OPAK i bunden, fordi den blev skrevet til at
moede en solid flade (fejlbank §22). Moeder den i stedet et GENNEMSIGTIGT
felt — som mint-feltet #bestsellere, der males af canvas'et — er der ingen
flade at lande paa, og den opake underkant staar som en knivskarp streg.
Maalt paa forsiden foer rettelsen: gradienten naaede fuld `rgb(170,225,197)`
ved 96 % og klippede ved `bottom:0`.
⚠️ SPEJLINGEN LIGGER PAA CONTAINEREN, IKKE I `::before`. Tidevandet er TRE
lag: gradienten i `::before` og de to maskede boelgesilhuetter, som begge er
fuld `--tide-to` forankret i bunden. Skriver man kun gradienten om, bliver
boelgerne staaende som praecis den opake kant, man ville af med. Én maske paa
`.q-tide` rammer alle tre paa én gang.
Profilen er symmetrisk om midten — de to lag ganges sammen:
::before 0 % → 55 % (28 %) → fuld (50 %) → fuld (100 %)
maske fuld (0 %) → fuld (50 %) → 55 % (72 %) → 0 % (100 %)
produkt 0 · 55 % · FULD · 55 % · 0 ← ens begge veje
Masken bruger `rgba(0,0,0,…)` og ikke `color-mix`: en maske laeser kun
alfakanalen, saa der er ingen farve at blande, og reglen har dermed ingen
@supports-afhaengighed. `::before` bruger color-mix, fordi `--tide-to` er en
vilkaarlig hex — derfor staar fallbacken lige nedenfor.
=========================================================================== */
.q-tide--spejl{
--tide-h:clamp(170px,22vh,280px);
-webkit-mask-image:linear-gradient(to bottom,
#000 0%,#000 50%,rgba(0,0,0,.55) 72%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom,
#000 0%,#000 50%,rgba(0,0,0,.55) 72%,rgba(0,0,0,0) 100%);
}
.q-tide--spejl::before{
background:linear-gradient(to bottom,
rgba(255,255,255,0) 0%,
color-mix(in srgb,var(--tide-to) 55%,transparent) 28%,
var(--tide-to) 50%,
var(--tide-to) 100%);
}
@supports not (color:color-mix(in srgb,#fff 50%,transparent)){
.q-tide--spejl::before{
background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,var(--tide-to) 50%,var(--tide-to) 100%);
}
}
/* Et felt med tidevand skal have luft nok til at indholdet ikke lander i
det. Uden dette staar den sidste linje tekst midt i overgangen.
===========================================================================
⛔ REGLEN KIGGEDE PAA KLASSEN, IKKE PAA OM BOELGEN VAR DER — rettet 13/8-2026
---------------------------------------------------------------------------
Christian, med produktsiden foran sig: «Der er ogsaa for meget groent dead
space under, hvor der staar "retur garanti" … Det skal lige gaa lidt
laengere op, saa det ser koent ud. Og det er bare spild.»
Han har ret, og det er vaerre end ét sted. Maalt paa hanefilteret, 882x994:
felt top-tide bund-tide padding-bottom
byg nej NEJ 208px ← 208px for ingenting
derfor nej ja 208px
maalt ja ja 208px
ambassadoerer ja NEJ 208px ← 208px for ingenting
handlen nej ja 208px
planer ja NEJ 208px ← 208px for ingenting
TRE felter betalte fuldt frirum for en boelge, der ikke fandtes. Grunden er
her: den gamle regel var `.q-field.has-tide{...}` — den spurgte om KLASSEN,
ikke om elementet. Top-reglen nedenfor gjorde det rigtigt hele tiden med
`:has(.q-tide--top)`; bunden gjorde ikke.
To ting er aendret:
1. `:has(> .q-tide:not(.q-tide--top))` — kun felter der FAKTISK har en
bundboelge, faar det ekstra frirum. De tre andre falder tilbage til
feltets almindelige polstring (144px). Paa Christians skaerm er det
64px mindre doedt groent, uden at noget flytter sig.
2. frirummet foelger BOELGENS EGEN HOEJDE i stedet for at vaere et fast
tal. Boelgen er `clamp(110px,15vh,190px)`; de faste 208px var regnet
efter den hoejeste. Paa en lav skaerm (582px) er boelgen 110px, og
saa stod der 98px tom flade under den. Nu: 110+32 = 142px.
⬛ OG DET REJSER LOV 13: `#byg` er et gennemsigtigt felt, og under det
ligger `#kunderulle`, som er en SOLID `#FBF8F2`-flade. Det ER en aegte soem
— to forskellige malere moedes — og den mangler sit tidevand. Samme
spoergsmaal for `ambassadoerer` og `planer`. Det er en DESIGNbeslutning
(skal der en boelge ind, eller skal kanten vaere skarp dér), ikke en
oprydning, saa den staar i NAESTE-SESSION i stedet for at blive bygget
uden at spoerge.
=========================================================================== */
.q-field.has-tide:has(> .q-tide:not(.q-tide--top)){
padding-bottom:calc(var(--tide-h,clamp(110px,15vh,190px)) + 2rem);
}
.q-field.has-tide:has(.q-tide--top){padding-top:calc(var(--sp-7) + 3rem)}
/* Indholdet skal ligge over tidevandet. Uden dette maler et absolut
placeret barn uden z-index oven paa teksten. */
.q-field > .q-wrap,
.q-pause > .q-wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
.q-tide__w{animation:none}
}
/* min-width:0 er ikke pynt. Felterne er `display:grid`, og et gitterbarn har
`min-width:auto` — det naegter at krympe under sit indhold. Er der ét bredt
element inde i wrappen (sammenligningstabellen har `min-width:520px`),
sprænger wrappen ud til 568px paa en 375px-telefon. Body har
`overflow-x:clip`, saa der kommer ingen scrollbar: indholdet bliver
**klippet af** i stedet, og medlemskolonnen bliver uopnaaelig.
Maalt 28/7-2026: q-wrap 568px i en 375px viewport. Med min-width:0 er den
375px, og den indre .q-cmp-scroll faar sin scroll tilbage. */
.q-wrap{
width:100%;margin-inline:auto;
padding-inline:1.5rem;
max-width:1340px;
min-width:0;
}
@media(min-width:768px){.q-wrap{padding-inline:2.5rem}}
/* To-kolonne felt: tekst / produkt. Spejlvendes med --flip. */
.q-split{
display:grid;gap:var(--sp-5);
grid-template-columns:1fr;
align-items:center;
}
@media(min-width:900px){
.q-split{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.q-split--flip .q-split-text{order:2}
.q-split--flip .q-split-media{order:1}
}
/* ----------------------------------------------------------- 4. TYPOGRAFI */
/* Brandbogen: display er Jost vaegt 200–300, meget stort, tracking -0.02 til
-0.03em, linjehoejde helt ned til 0.95. Kontrasten er skrift, ikke farve. */
.q-display{
font-family:'Jost',Futura,'Century Gothic',sans-serif;
font-weight:200;
letter-spacing:-.028em;
line-height:.95;
font-size:clamp(3rem,8.5vw,7.5rem);
color:var(--on-field,var(--ink));
text-wrap:balance;
}
.q-display--md{font-size:clamp(2.4rem,5.5vw,4.5rem);line-height:1}
.q-display--sm{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;font-weight:300}
/* Kursiven. Brandbogens anden halvdel af overskriften. */
.q-em{
font-family:'Instrument Serif',Georgia,serif;
font-style:italic;font-weight:400;
letter-spacing:-.01em;
}
.q-eyebrow{
font-family:'Inter',sans-serif;
text-transform:uppercase;
letter-spacing:.22em; /* brandbogen: 0.22em */
font-size:.7rem;font-weight:500;
color:var(--on-field,var(--ink));
/* .62 maalt til 2,87:1 paa koral — eyebrow'en er 11px, saa kravet er 4,5.
Fejlen var at bruge gennemsigtighed som hierarki: hvert skridt ned i
opacity spiser direkte af kontrasten, og paa en maettet flade er der
ikke noget at give af. Hierarkiet ligger allerede i stoerrelse,
versaler og 0,22em tracking. .9 giver 4,74:1 paa koral, 6,6:1 paa mint. */
opacity:.9;
}
.q-body{
font-family:'Inter',sans-serif;
font-size:1.0625rem;line-height:1.6; /* 17px/1.6 — brandbogen */
color:var(--on-field,var(--ink));
max-width:46ch;
}
.q-body--lg{font-size:1.2rem;line-height:1.55}
/* Stort tal, til priser og beviser. Tabular saa cifre ikke hopper. */
.q-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* --------------------------------------------------------------- 5. KNAPPER */
/* Brandbogen: "knap = inverteret ink". Paa et farvefelt betyder det ink-flade
med feltets farve som tekst — ikke en ny farve ind i paletten. */
.q-btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
min-height:56px; /* > 44px touch-krav, og det foeles dyrt */
padding-inline:2rem;
border-radius:var(--radius-pill);
font-family:'Inter',sans-serif;font-weight:500;font-size:1rem;
letter-spacing:-.01em;
position:relative;overflow:hidden;
cursor:pointer;
transform:translateZ(0);
transition:transform var(--t-ui) var(--e-spring),
box-shadow var(--t-ui) var(--e-out),
background var(--t-ui) var(--e-out),
color var(--t-ui) var(--e-out);
}
/* Knappens tekst er feltets farve — "et hul i fladen" frem for en plade
ovenpaa. Men den rene feltfarve paa ink holder ikke: koral #F99470 paa ink
maaler 3,95:1. Feltfarven blandes derfor 45% op i Crisp White, saa ekkoet
bevares og teksten holder 5,4:1. */
.q-btn--solid{
background:var(--ink);
color:color-mix(in srgb,var(--field-echo,#FAFCFD) 45%,#FBF8F2);
box-shadow:var(--lift-2);
}
@supports not (color:color-mix(in srgb,#fff 50%,transparent)){
.q-btn--solid{color:#FBF8F2}
}
.q-btn--solid:hover{transform:translateY(-3px) scale(1.015);box-shadow:var(--lift-3)}
.q-btn--solid:active{transform:translateY(-1px) scale(.99);transition-duration:90ms}
/* Glasknap — kun over vand. */
.q-btn--glass{
background:var(--glass-bg);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-brd);
color:var(--ink);
box-shadow:var(--lift-2);
}
.q-btn--glass:hover{transform:translateY(-3px);box-shadow:var(--lift-3);background:rgba(255,255,255,.72)}
/* Vaeskeboelgen der loeber gennem knappen ved hover. Ikke pynt: den siger
"det her handler om vand" én gang til, paa 500ms. */
.q-btn__ripple{
position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 60%);
opacity:0;transition:opacity var(--t-ui) var(--e-out);
}
.q-btn:hover .q-btn__ripple{opacity:1}
/* --------------------------------------------------- 6. PRODUKTET PAA VAND */
/* Produktet svaever. Det er hele pointen — brandbogens "produkt der svaever
ovenpaa". I v2 er svaevet ikke en skygge i CSS, men en rigtig transform der
foelger musen, med en skygge der flytter sig modsat. */
.q-float{
position:relative;
transform-style:preserve-3d;
perspective:1400px;
will-change:transform;
}
.q-float__img{
display:block;margin-inline:auto;
max-width:min(88%,520px);
/* height:auto er ikke pynt. Billederne baerer width/height-attributter, saa
browseren kan reservere plads og undgaa layout-hop (CLS). Uden height:auto
vinder attributten over CSS'ens bredde, og et 1376x768-foto renderes
492x768 — altsaa strukket paa hoejkant. */
height:auto;
filter:drop-shadow(0 34px 34px rgba(60,84,97,.20));
transform:translate3d(var(--fx,0),var(--fy,0),0)
rotateX(var(--frx,0deg)) rotateY(var(--fry,0deg));
transition:transform var(--t-spatial) var(--e-out),
filter var(--t-spatial) var(--e-out);
will-change:transform;
}
.q-float:hover .q-float__img{filter:drop-shadow(0 48px 44px rgba(60,84,97,.24))}
/* Skyggen paa vandet. Separat element, saa den kan bevaege sig MODSAT
produktet — det er det, der laeser som hoejde frem for som et billede. */
.q-float__shadow{
position:absolute;left:50%;bottom:4%;
width:46%;height:5%;
translate:-50% 0;
background:radial-gradient(ellipse at center,rgba(60,84,97,.26) 0%,transparent 70%);
filter:blur(14px);
transform:translate3d(var(--sx,0),0,0) scale(var(--ss,1));
transition:transform var(--t-spatial) var(--e-out),opacity var(--t-spatial);
pointer-events:none;
}
/* Multiply-blend: produktfotoet er skudt paa hvidt. Paa et farvefelt skal det
smelte ind i vandet, ikke ligge som et klistermaerke i en hvid kasse.
Brandbogen brugte allerede greb i farvevaelgeren. */
.q-float--blend .q-float__img{mix-blend-mode:multiply}
/* ------------------------------------------------------- 7. FARVEVAELGEREN */
/* ⚠️ GITTER, IKKE FLEX-WRAP. Seks farver a 44px med 13,6px mellemrum fylder
332px; en telefon paa 375 har 327px indenfor. Der manglede fem pixel, saa
der laa fem farver paa foerste linje og én alene nedenunder.
Christian 28/7: "det ser jo heller ikke aestetisk ud."
Seks ting ombryder pænt i 6, 3+3 eller 2+2+2 — aldrig 5+1. Reglen er den
samme som for saetbyggerens farveprikker, saa de to steder opfoerer sig
ens: paa telefon 3+3, fra tablet og op alle seks paa én linje.
Raekkeafstanden er stoerre end spalteafstanden, fordi farvens navn ligger
under prikken og ellers ville lande oven i naeste raekke. */
/* Antallet af spalter FØLGER antallet af farver. Stod som repeat(3) og
repeat(6), fordi der var seks farver. Da de blev til to (29/7), stod der
stadig seks spalter: de fire tomme er 0px brede, men gapsene mellem dem er
der stadig, så rækken blev ~54px for bred og de to prikker sad synligt til
VENSTRE for "Vælg din farve".
Kommer de seks tilbage, er det her tallet, der skal med — se
FARVER-PAA-PAUSE.md. */
.q-swatches{
display:grid;
grid-template-columns:repeat(2,max-content);
gap:1.9rem .85rem;
align-items:center;justify-content:center;
width:max-content;
}
@media(min-width:768px){
.q-swatches{grid-template-columns:repeat(2,max-content);gap:.85rem}
}
.q-swatch{
height:52px;width:52px;border-radius:var(--radius-pill);
border:2px solid transparent;
cursor:pointer;position:relative;
box-shadow:var(--lift-1);
transition:transform var(--t-ui) var(--e-spring),box-shadow var(--t-ui) var(--e-out);
}
.q-swatch:hover{transform:translateY(-4px) scale(1.06);box-shadow:var(--lift-3)}
.q-swatch[aria-pressed="true"]{
transform:scale(1.1);
box-shadow:0 0 0 3px var(--field,#fff),0 0 0 6px var(--ink),var(--lift-2);
}
/* Navnet staar altid — farve alene maa ikke baere betydning (WCAG 1.4.1). */
.q-swatch__name{
position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;
font-size:.68rem;letter-spacing:.06em;white-space:nowrap;
opacity:0;transition:opacity var(--t-micro);
pointer-events:none;color:var(--on-field,var(--ink));
}
/* 1, ikke .8: navnet er den eneste tekstbaerer af farvens betydning
(WCAG 1.4.1), saa det skal kunne laeses naar det endelig vises. */
.q-swatch:hover .q-swatch__name,
.q-swatch:focus-visible .q-swatch__name{opacity:1}
/* --------------------------------------------------------- 8. DYBDEKORTET */
/* Kort der vipper mod musen. Bruges til testimonials og planer. Vippet er
lille — 6 grader. Mere end det, og det bliver en legetoejsside. */
.q-card{
background:var(--glass-bg);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-brd);
border-radius:var(--radius-l);
padding:var(--sp-4);
box-shadow:var(--lift-2);
transform-style:preserve-3d;
transition:transform var(--t-spatial) var(--e-out),box-shadow var(--t-spatial) var(--e-out);
will-change:transform;
}
/* Kortet saetter sin EGEN tekstfarve, fordi det saetter sin egen baggrund.
Da .q-field begyndte at saette color (29/7-2026), arvede kortets tekst
feltets --on-field — og et hvidt kort i et moerkt felt gav hvid tekst paa
hvidt. Maalt paa forsidens citatkort: 1,02:1.
Reglen er generel: den, der saetter background, skal ogsaa saette color. */
.q-card--solid{
background:#fff;color:var(--ink);
-webkit-backdrop-filter:none;backdrop-filter:none;
border-color:var(--hairline);
}
.q-card:hover{box-shadow:var(--lift-4)}
.q-card__inner{transform:translateZ(30px)}
/* ------------------------------------------------------ 9. FARVEKARRUSEL */
/* "Én identitet. Seks farver." — det hvide pusterum. I v1 var det 12 fliser.
I v2 er det en ring i rummet, man kan traekke i. Dybden gør at man SER at
det er ét produkt i seks farver, ikke seks produkter. */
.q-ring{
position:relative;
height:clamp(320px,44vh,460px);
perspective:1600px;
perspective-origin:50% 45%;
touch-action:pan-y;
cursor:grab;
}
/* Dybdetaage. Uden den staar de bageste farver lige saa skarpt som den
forreste, og ringen laeses som en flad raekke frem for som et rum.
Maskering frem for et overlay, saa det virker paa enhver baggrund. */
.q-ring{
-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.q-ring:active{cursor:grabbing}
.q-ring__stage{
position:absolute;inset:0;
transform-style:preserve-3d;
transform:rotateY(var(--ring-rot,0deg));
transition:transform var(--t-spatial) var(--e-out);
}
.q-ring__stage.is-dragging{transition:none}
/* VIFTE, ikke lukket ring. En 360-graders ring gemmer halvdelen af farverne
bag scenen — men sektionen hedder "Seks farver", saa alle seks skal kunne
ses paa én gang. Viften spreder dem over ~120 grader: forreste staar
frontalt og stoerst, de yderste drejer vaek og traeder tilbage i rummet.
--i og --n saettes af JS pr. element. */
.q-ring__item{
position:absolute;left:50%;top:50%;
width:min(26vw,200px);
translate:-50% -50%;
transform-style:preserve-3d;
transform:
rotateY(calc((var(--i) - (var(--n) - 1) / 2) * var(--fan,24deg)))
translateZ(var(--ring-r,420px));
transition:filter var(--t-spatial) var(--e-out);
}
.q-ring__item img{width:100%;filter:drop-shadow(0 22px 26px rgba(60,84,97,.18))}
/* De yderste toner en anelse — luftperspektiv. Det er dét, der gør at oejet
laeser afstand frem for bare "mindre". */
.q-ring__item[data-far]{opacity:.72}
.q-ring__label{
text-align:center;margin-top:.9rem;
font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;
}
/* --------------------------------------------------------- 10. SCROLLTEGN */
.q-scrollhint{
position:absolute;left:50%;bottom:2.5rem;translate:-50% 0;
display:grid;justify-items:center;gap:.6rem;
font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
/* .5 maalte 2,22:1. "Rul" er en instruktion, ikke pynt — den skal kunne
laeses. */
color:var(--on-field,var(--ink));opacity:.9;
}
.q-scrollhint__line{
width:1px;height:44px;
background:linear-gradient(to bottom,currentColor,transparent);
animation:qDrip 2.4s var(--e-inout) infinite;
transform-origin:top;
}
@keyframes qDrip{
0%{transform:scaleY(0);opacity:0}
35%{transform:scaleY(1);opacity:1}
100%{transform:scaleY(1) translateY(44px);opacity:0}
}
/* ------------------------------------------------- 11. AFSLOERING VED SCROLL */
/* Alt indhold kommer op nedefra, én gang, naar det naas. Stagger via
--d (delay-index). Motion-laget saetter .is-in — CSS'en gør resten, saa
siden virker selv hvis JS'en fejler. */
.q-reveal{
opacity:0;transform:translate3d(0,26px,0);
transition:opacity var(--t-spatial) var(--e-out),transform var(--t-spatial) var(--e-out);
transition-delay:calc(var(--d,0) * 80ms);
}
.q-reveal.is-in{opacity:1;transform:none}
/* Uden JS: vis alt. En tom side er vaerre end en uanimeret side. */
.no-js .q-reveal{opacity:1;transform:none}
/* --------------------------------------------------------- 12. TILGAENGELIGHED */
/* ui-ux-pro-max, prioritet 1 og 7: reduced-motion skal respekteres, og
3D-stilarten er markeret "ikke tilgaengelig" som udgangspunkt. Her lukkes
den afvigelse: alt rumligt slaas fra, indholdet staar. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important;
}
.q-scene{display:none}
.q-field{background:var(--field)}
.q-reveal{opacity:1;transform:none}
.q-float__img,.q-card{transform:none !important}
.q-scrollhint__line{animation:none}
}
/* Tastaturfokus skal vaere synligt paa vand ogsaa — derfor dobbelt ring. */
.q-btn:focus-visible,.q-swatch:focus-visible,.q-ring:focus-visible{
outline:none;
box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink);
}
/* Klikmaal. Maalt paa medlemskabssiden: 13 elementer under 44px — logoet laa
paa 42, og footer-linkene var 18px hoeje. Paa en telefon rammer man dem
ikke. Linkene faar hoejden gennem padding frem for gennem font-size, saa
typografien er uroert; de er stadig inline i loebende tekst. */
.q-hdr__mark{min-height:44px;min-width:44px}
.q-hdr nav a{display:inline-flex;align-items:center;min-height:44px}
.q-foot a{display:inline-block;padding-block:.7rem;line-height:1.35}
.q-foot__grid a{min-height:44px}
/* ------------------------------------------------- 12b. VIDEO, BLØDE KANTER */
/* Christian 30/7: videoerne skal have "soft borders, saa det ser laekkert ud
til vores stil" — og ingen lyd. Grebet er det samme som tidevandets: en
MASKE, ikke en ramme. Et billede med en hvid kant lyver om feltet det ligger
paa; en maske lader feltets egen farve staa hele vejen ind.
HVORFOR TO LAG. Kanterne skal fade paa alle fire sider, og det kraever to
gradienter. Den oplagte vej er mask-composite:intersect — men den er ung
nok til at Safari under 15.4 falder helt bort og lader videoen staa med en
haard firkantet kant, altsaa praecis den fejl vi skulle af med. To indlejrede
elementer med ét gradient hver giver samme resultat med gradient-support
alene: den ydre maskerer lodret, den indre vandret. Ingen @supports, ingen
browser der falder igennem.
Fade-zonen er 14%, ikke de 9 den startede paa. 9 var nok til at fjerne
linjen, men ikke til at fjerne FIRKANTEN: paa det sorte klip (ad 7) staar
produktet i et moerkegraat studie, og graat moeder lyseroed haardt. Med 14%
opløses hjoernerne, og de to klip laeser som film i feltet frem for som to
billeder lagt ovenpaa. Maalt paa 375px: 39px lodret, 22px vandret af et
156x278-klip — produktet staar midt i billedet og roeres ikke.
Variablen gør det justerbart pr. klip uden at røre komponenten. */
.q-vid{
position:relative;
--fade:14%;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}
.q-vid__in{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
}
.q-vid video{
display:block;width:100%;height:auto;
/* Forholdet laases, saa der ikke er et layout-hop mens filen hentes — samme
grund som foer/efter-rammen har aspect-ratio. width/height staar ogsaa paa
elementet: attributterne vinder over CSS'ens bredde, og et 720x1280-klip
uden height:auto bliver renderet i sin egen hoejde (fejlbanken §12). */
object-fit:cover;
}
/* Autoplay er en bevaegelse man ikke har bedt om. Kan man ikke taale den,
staar posteren i stedet — den ER videoens foerste billede, saa feltet ser
ud som det skal, der er bare ingen bevaegelse. Vagten i JS pauser dem;
dette er sikkerhedsnettet, hvis JS'en ikke naar det. */
@media(prefers-reduced-motion:reduce){
.q-vid video{visibility:hidden}
.q-vid__in{
background-position:center;background-size:cover;background-repeat:no-repeat;
background-image:var(--poster);
}
}
/* Springtil-indhold. */
.q-skip{
position:absolute;left:1rem;top:-4rem;z-index:100;
background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:var(--radius-pill);
transition:top var(--t-ui) var(--e-out);
}
.q-skip:focus{top:1rem}
/* ------------------------------------------------------------ 13. RESPONSIV */
/* Brandbogens brydepunkter: 375 / 768 / 1024 / 1440. Ingen vandret scroll. */
html,body{overflow-x:clip}
@media(max-width:640px){
:root{--sp-7:5.5rem;--sp-8:7rem}
.q-display{font-size:clamp(2.6rem,11vw,3.6rem)}
.q-float__img{max-width:78%}
.q-ring{height:340px}
.q-ring__item{width:44vw}
}
/* Vendepunktet. Lavere end en fuld skaerm med vilje: det er et aandedrag
mellem problemet og loesningen, ikke en sektion man skal laese. */
.q-field--beat + .q-field{padding-top:var(--sp-4)}
.q-field--beat{
/* 48svh, ikke 62. Christian: "det er gaaet for lang tid inden den kommer
ned" — vendepunktet skal vaere et aandedrag mellem problemet og
planerne, ikke en tredje skaerm man skal igennem. */
min-height:44svh;
/* Asymmetrisk: luft over, stramt under. Vendepunktet skal PEGE ned mod
planerne, ikke staa som sin egen afsluttede sektion. */
padding-block:var(--sp-5) var(--sp-3);
}
@media(max-width:768px){
.q-field--beat + .q-field{padding-top:var(--sp-4)}
.q-field--beat{min-height:auto;padding-block:var(--sp-5)}
}
/* Headeren over skiftende felter. --hdr-ink saettes af qleer-motion.js efter
feltets luminans; her er kun standardvaerdien og hvordan den bruges.
Uden dette forsvandt logo og menu helt paa det brune felt. */
.q-top{--hdr-ink:var(--ink)}
.q-hdr nav a,
.q-hdr .q-hdr__title{color:var(--hdr-ink);transition:color var(--t-ui) var(--e-out)}
/* Logoets maske staar KUN i qleer-v2-chrome.css, med stien skrevet direkte.
Her stod den ogsaa engang, med var(--qmark) sat fra siden — og noten
herunder forklarede endda hvorfor det ikke kan gaa. To udgaver af den
samme regel er én for meget, og den forkerte vandt: en url() i en custom
property resolves relativt til DEN STYLESHEET DER BRUGER DEN, saa masken
pegede paa shopify-tema/assets/billeder/. Logoet forsvandt.
Se qleer-v2-chrome.css, afsnit 1. */
/* Naar headeren er "stuck" ligger den paa en lys plade, uanset feltet bagved.
Der bliver logoet og CTA'en KORAL — maerkets farve, ikke blaek. */
.q-top.is-stuck .q-hdr nav a{color:var(--ink)}
.q-top.is-stuck .q-hdr__mark{background-color:var(--coral)}
.q-top.is-stuck .q-hdr__cta{
background:var(--coral);
border-color:transparent;
color:#fff;
}
/* ===========================================================================
COMBO-SCENEN — begge produkter i én fold (Christian 9/8-2026)
---------------------------------------------------------------------------
«det skal være et billede af både en bruser og hanefilteret i én.»
Der findes ikke ét samlet render af de to, og et sammensat foto ville skulle
laves om, hver gang et produkt ændrer sig. To .q-float ved siden af
hinanden i stedet: samme svæven som resten af sitet, hver sin skygge, hvert
sit alt — og de kan skiftes uafhængigt.
DE OVERLAPPER MED VILJE. To render med luft imellem læses som to varer på
en hylde; to der deler plads læses som ét sæt. Bruseren står forrest og
lidt lavere, hanen bagest og lidt højere — det er dybde, ikke rod, og det
er den samme forskydning som .q-float bruger i forvejen.
⚠️ Ingen `opacity` på den bagerste. Dybde bæres af skala og skygge, aldrig
af gennemsigtighed — DESIGN-V2 §2 og fejlbank §10.
=========================================================================== */
.q-combo-scene{
display:flex;align-items:center;justify-content:center;
gap:4%;
width:100%;
}
/* ⛔ TO GRAENSER, IKKE ÉN. Foerste udgave begraensede kun HOEJDEN, og saa
fandt bredden selv sit maal ud af formatet: maalt paa 375px laa bruseren
53px uden for venstre kant og hanen 53px uden for hoejre — 196 + 276 =
472px i en 327px scene.
Nu er der loft paa BEGGE: max-width holder dem inden for sporet, max-height
holder dem i samme stoerrelsesorden. Den graense der binder foerst, vinder,
og saa kan ingen af dem loebe ud. 44 + 52 + 4 % mellemrum = 100. */
.q-combo-scene .q-float{flex:0 1 auto;min-width:0;position:relative;display:block}
.q-combo-scene__et{max-width:44%}
.q-combo-scene__to{max-width:52%}
/* width:auto + height:auto + de rigtige width/height-attributter = filens eget
format, uanset hvad. Der beskaeres og straekkes ikke en eneste procent. */
.q-combo-scene .q-float__img{
display:block;width:auto;height:auto;
max-width:100%;
max-height:var(--combo-h,300px);
}
.q-combo-scene__et{--combo-h:min(42vh,380px)}
.q-combo-scene__to{--combo-h:min(26vh,236px)}
@media(max-width:599px){
.q-combo-scene__et{--combo-h:min(30vh,260px)}
.q-combo-scene__to{--combo-h:min(19vh,162px)}
}
}