/* ═══════════════════════════════════════════════════════════════ APORT — sektioner. Bruger tokens fra system.css. Rækkefølgen her følger sidens rækkefølge, så filen kan læses oppefra og ned som siden selv. ═══════════════════════════════════════════════════════════════ */ /* ─── toppen ────────────────────────────────────────────────── */ .top{ position:sticky;top:0;z-index:50; background:rgba(245,239,231,.86);backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent;transition:border-color .4s var(--ind) } .top.rullet{border-bottom-color:var(--streg)} .top-in{display:flex;align-items:center;gap:clamp(14px,3vw,40px);min-height:70px} .logo{display:inline-flex;align-items:center;min-height:44px;font-size:19px;font-weight:700;letter-spacing:-.03em} .logo em{font-style:normal;color:var(--guld-tekst)} .top-nav{display:none;gap:clamp(16px,2vw,30px);margin-inline:auto} .top-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--daempet);transition:color .3s var(--ind)} .top-nav a:hover,.top-nav a[aria-current]{color:var(--blaek)} .top-hoejre{display:flex;align-items:center;gap:12px;margin-left:auto} .top-knap{display:none;min-height:44px;padding:0 20px;font-size:14.5px} .burger{display:grid;gap:5px;width:44px;height:44px;place-content:center;background:none;border:0;cursor:pointer} .burger span{display:block;width:21px;height:1.5px;background:var(--blaek)} /* 11. september 2026: braekpunktet er flyttet fra 900 til 980 px. MAALT: med ni menupunkter fyldte den vandrette bjaelke 947 px inde i et vindue paa 920 px, og hele forsiden kunne rulles til siden. Med otte punkter fyldte den praecis 920 af 920, altsaa nul plads tilovers. Bjaelken stod med andre ord og vippede paa kanten, og det naeste menupunkt ville braekke den igen. Under 980 px bruges burgermenuen, som den altid har gjort under 900. Der er ingen punkter, der forsvinder: de staar alle i burgermenuen. */ @media(min-width:980px){ .top-nav{display:flex} .top-knap{display:inline-flex} .burger{display:none} } /* mobilmenu — helskærm, ikke en dropdown der klemmer sig ind */ .mmenu{position:fixed;inset:0;z-index:60;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--moerk);color:var(--ivory); display:flex;flex-direction:column;padding-block:22px 40px} .mmenu[hidden]{display:none} .mmenu-top{display:flex;align-items:center;justify-content:space-between} .mmenu-luk{width:44px;height:44px;display:grid;place-content:center;background:none;border:0;color:inherit;cursor:pointer} .mmenu-nav{display:flex;flex-direction:column;gap:6px;margin-top:auto;margin-bottom:auto} .mmenu-nav a{font-size:clamp(30px,9vw,46px);font-weight:600;letter-spacing:-.03em;padding-block:8px} .mmenu-fod{display:flex;flex-direction:column;gap:14px;align-items:flex-start} /* ─── hero ──────────────────────────────────────────────────── */ .hero{padding-block:clamp(48px,8vw,96px) clamp(56px,9vw,110px);overflow:hidden} .hero-h1{max-width:16ch} .hero-under{margin-top:26px;max-width:52ch} .hero-knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px} .hero-mikro{ display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px; font-size:var(--t-lille);color:var(--daempet) } .hero-mikro span{display:inline-flex;align-items:center;gap:8px} .hero-mikro span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--guld);flex:none} /* Heroens billede: rigtige sider, redaktionelt forskudt. Ingen svævende laptop på en gradient. */ .hero-vaerk{position:relative;margin-top:clamp(48px,7vw,84px)} .hero-v1{position:relative;z-index:3} .hero-v2,.hero-v3{display:none} @media(min-width:820px){ /* To sider, ikke tre. Den tredje laa begravet bag den foerste og laeste som en fejl. Kundens rigtige side er stoerst og forrest. */ .hero-vaerk{display:grid;grid-template-columns:repeat(12,1fr);align-items:end} .hero-v1{grid-column:1/9;grid-row:1;z-index:3} .hero-v2{display:block;grid-column:8/13;grid-row:1;margin-bottom:clamp(46px,7vw,96px);z-index:2} } /* ─── trust-stribe ──────────────────────────────────────────── */ .trust{border-block:1px solid var(--streg);padding-block:clamp(30px,4vw,50px)} .trust-net{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(2,1fr)} @media(min-width:820px){.trust-net{grid-template-columns:repeat(4,1fr)}} .trust-navn{font-size:var(--t-mikro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px} .trust p{font-size:var(--t-lille);color:var(--daempet);line-height:1.5} /* ─── sektionshoved ─────────────────────────────────────────── */ .hoved{display:grid;gap:18px;margin-bottom:clamp(38px,5vw,64px)} @media(min-width:900px){ .hoved{grid-template-columns:minmax(0,1fr) minmax(0,26ch);align-items:end;gap:clamp(30px,5vw,70px)} } .hoved .h2{max-width:19ch} /* ─── rigtige kunder ────────────────────────────────────────── */ .case{display:grid;gap:clamp(26px,4vw,54px)} @media(min-width:900px){.case{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center}} .case-mrk{ display:inline-flex;align-items:center;gap:8px; font-size:var(--t-mikro);font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--guld-tekst);margin-bottom:16px } .case-mrk::before{content:"";width:6px;height:6px;border-radius:50%;background:#3E7D4E;flex:none} .case h3{margin-bottom:10px} .case-meta{font-size:var(--t-lille);color:var(--daempet);margin-bottom:20px} .case-liste{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 26px} .case-liste li{ font-size:13px;padding:6px 12px;border:1px solid var(--streg);border-radius:2px;color:var(--daempet) } .case-billeder{position:relative} .case-telefon{display:none} @media(min-width:1100px){ /* Telefonen laegger sig i hjoernet af computerskaermen og beviser, at den samme side virker begge steder. Den maa aldrig daekke teksten. */ .case-telefon{display:block;position:absolute;right:-18px;bottom:-34px;width:150px;z-index:4} } /* ─── branche-eksempler ─────────────────────────────────────── */ .demo-net{display:grid;gap:clamp(24px,3vw,40px)} @media(min-width:760px){.demo-net{grid-template-columns:repeat(2,1fr)}} @media(min-width:1180px){.demo-net{grid-template-columns:repeat(3,1fr)}} .demo h3{font-size:var(--t-h3);margin-top:20px} .demo p{font-size:var(--t-lille);color:var(--daempet);margin-top:8px;line-height:1.55} .demo .tlink{margin-top:14px} .demo-baand{ display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--daempet);border:1px solid var(--streg);border-radius:2px;padding:4px 9px;margin-bottom:14px } /* ─── proces ────────────────────────────────────────────────── */ .trin{display:grid;gap:0} .trin > div{ display:grid;gap:8px 30px;padding-block:clamp(26px,3.4vw,44px); border-top:1px solid var(--streg-lys) } .trin > div:last-child{border-bottom:1px solid var(--streg-lys)} @media(min-width:820px){ .trin > div{grid-template-columns:5rem minmax(0,20ch) minmax(0,1fr);align-items:baseline} } .trin b{font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.04em;color:var(--guld)} .trin h3{font-size:var(--t-h3)} .trin p{color:rgba(245,239,231,.66);font-size:var(--t-brod);max-width:52ch} /* ─── priser ────────────────────────────────────────────────── */ .pris-net{display:grid;gap:16px} @media(min-width:700px){.pris-net{grid-template-columns:repeat(2,1fr)}} @media(min-width:1180px){.pris-net{grid-template-columns:repeat(4,1fr)}} .pris{ display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px); background:var(--flade);border:1px solid var(--streg);border-radius:4px;position:relative } .pris.frem{border-color:var(--blaek)} .pris-flag{ position:absolute;top:-1px;right:-1px; font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; background:var(--blaek);color:var(--ivory);padding:6px 11px;border-radius:0 4px 0 4px } .pris-navn{font-size:var(--t-mikro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--daempet)} .pris-kr{font-size:clamp(30px,2.4vw,38px);font-weight:600;letter-spacing:-.035em;margin-top:12px;line-height:1} .pris-md{font-size:var(--t-lille);color:var(--daempet);margin-top:9px} .pris-linje{font-size:var(--t-lille);color:var(--blaek);margin-top:16px;padding-top:16px;border-top:1px solid var(--streg);min-height:3.6em} .pris ul{margin:18px 0 26px;display:grid;gap:10px} .pris li{font-size:14.5px;line-height:1.5;padding-left:19px;position:relative;color:var(--daempet)} .pris li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--guld)} .pris li strong{color:var(--blaek);font-weight:600} .pris .knap{margin-top:auto;width:100%;justify-content:center} .pris-note{margin-top:26px;font-size:var(--t-lille);color:var(--daempet)} /* springet mellem trinene — det er her kunden bestemmer sig */ .spring-net{display:grid;gap:16px;margin-top:clamp(34px,4vw,54px)} @media(min-width:900px){.spring-net{grid-template-columns:repeat(3,1fr)}} .spring-kort{padding:24px;border:1px solid var(--streg);border-radius:4px;background:transparent} .spring-kort b{display:block;font-size:var(--t-lille);font-weight:600;letter-spacing:.02em;margin-bottom:10px} .spring-kort p{font-size:14.5px;color:var(--daempet);line-height:1.55} /* ─── FAQ ───────────────────────────────────────────────────── */ .faq{display:grid;gap:0;max-width:78ch} .faq details{border-top:1px solid var(--streg)} .faq details:last-child{border-bottom:1px solid var(--streg)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding-block:22px;font-size:var(--t-stor);font-weight:600;letter-spacing:-.015em; cursor:pointer;list-style:none } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--daempet);flex:none;transition:transform .3s var(--ind)} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{padding-bottom:24px;color:var(--daempet);max-width:64ch} /* ─── kontakt ───────────────────────────────────────────────── */ .kontakt-net{display:grid;gap:clamp(34px,5vw,70px)} @media(min-width:960px){.kontakt-net{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}} .form{display:grid;gap:16px} .form label{display:grid;gap:7px;font-size:var(--t-lille);font-weight:600} .form .to{display:grid;gap:16px} @media(min-width:560px){.form .to{grid-template-columns:1fr 1fr}} .form input,.form select,.form textarea{ font:inherit;font-size:16px;width:100%;padding:13px 15px; background:var(--flade);color:var(--blaek); border:1px solid var(--streg);border-radius:2px;min-height:50px } .form textarea{min-height:118px;resize:vertical} .form .knap{justify-content:center;margin-top:6px} .form-note{font-size:13.5px;color:var(--daempet);margin-top:4px} .kvit{padding:22px;border:1px solid var(--streg);border-radius:4px;background:var(--flade)} /* ─── afsluttende opfordring ────────────────────────────────── */ .slut{text-align:center} .slut .h2{max-width:20ch;margin-inline:auto} .slut .brod{margin-inline:auto;margin-top:20px;text-align:center} .slut .knap{margin-top:34px} /* ─── fod ───────────────────────────────────────────────────── */ .fod{background:var(--moerk);color:var(--ivory);padding-block:clamp(54px,7vw,86px) 34px} .fod-net{display:grid;gap:clamp(30px,4vw,50px)} @media(min-width:760px){.fod-net{grid-template-columns:1.5fr 1fr 1fr 1.2fr}} /* h3, ikke h4: rækken sprang h2 -> h4, og en skærmlæser bruger overskriftsrækken til at hoppe rundt paa siden. Maalt 9. sept. */ .fod h3{font-size:var(--t-mikro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--guld);margin-bottom:16px;line-height:1.2} .fod ul{display:grid;gap:0} .fod a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:rgba(245,239,231,.72);transition:color .3s var(--ind)} .fod a:hover{color:var(--ivory)} .fod-bund{ margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--streg-lys); font-size:13.5px;color:rgba(245,239,231,.5);line-height:1.8 } /* ─── klæbrig knap på telefon ───────────────────────────────── */ .bookbar{ position:fixed;left:0;right:0;bottom:0;z-index:40; display:flex;gap:10px;padding:12px var(--kant) calc(12px + env(safe-area-inset-bottom)); background:rgba(21,16,14,.94);backdrop-filter:blur(12px); transform:translateY(110%);transition:transform .45s var(--ind) } .bookbar.vis{transform:none} .bookbar .knap{flex:1;justify-content:center;background:var(--ivory);color:var(--blaek);border-color:var(--ivory)} @media(min-width:900px){.bookbar{display:none}} /* ═══ ARBEJDET — sektionen der skifter farve ══════════════════════ Apports hele påstand er: hver kunde får sit eget udseende. At skrive det er billigt. Derfor skriver siden det ikke — den GØR det. Ruller man gennem brancherne, skifter hele sektionen til den branches egne farver, hentet ud af de sider vi faktisk har bygget. Farverne står på hvert panel som data-attributter og sættes på sektionen af JavaScript. Fejler det, bliver sektionen stående i Apports egne farver — den kan aldrig blive ulæselig. */ .vaerk{ --v-bund:var(--moerk); --v-blaek:var(--ivory); --v-acc:var(--guld); --v-daempet:rgba(245,239,231,.62); --v-linje:rgba(245,239,231,.16); background:var(--v-bund);color:var(--v-blaek); transition:background-color .9s var(--ind),color .9s var(--ind); padding-block:var(--sektion) 0 } .vaerk .mrk{color:var(--v-acc);transition:color .9s var(--ind)} .vaerk .brod{color:var(--v-daempet);transition:color .9s var(--ind)} .vaerk .hoved{margin-bottom:clamp(30px,4vw,54px)} .panel{ display:grid;gap:clamp(24px,3.5vw,52px); padding-block:clamp(48px,6vw,86px); border-top:1px solid var(--v-linje); transition:border-color .9s var(--ind) } @media(min-width:940px){ .panel{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center} .panel:nth-child(even) > .panel-foto{order:2} } .panel-foto .skaerm{border-color:var(--v-linje);box-shadow:0 26px 64px -28px rgba(0,0,0,.6)} .panel-foto .skaerm-top{background:color-mix(in srgb,var(--v-bund) 82%,var(--v-blaek));border-bottom-color:var(--v-linje)} .panel-foto .skaerm-top i{background:color-mix(in srgb,var(--v-blaek) 22%,transparent)} .panel-foto .skaerm-adr{color:var(--v-daempet)} .panel-navn{font-size:var(--t-h2);font-weight:600;letter-spacing:-.032em;line-height:1.04} .panel-branche{ display:inline-flex;align-items:center;gap:9px; font-size:var(--t-mikro);font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--v-acc);margin-bottom:14px;transition:color .9s var(--ind) } .panel-branche::before{ content:"";width:8px;height:8px;border-radius:50%; background:var(--v-acc);flex:none;transition:background-color .9s var(--ind) } .panel-tekst{margin-top:16px;color:var(--v-daempet);max-width:46ch;transition:color .9s var(--ind)} .panel .tlink{ margin-top:22px;color:var(--v-blaek);border-bottom-color:var(--v-linje); transition:color .9s var(--ind),border-color .35s var(--ind) } .panel .tlink:hover{border-bottom-color:var(--v-acc)} /* fodnoten under panelerne */ .vaerk-fod{ padding-block:clamp(40px,5vw,68px); border-top:1px solid var(--v-linje); transition:border-color .9s var(--ind) } @media(prefers-reduced-motion:reduce){ .vaerk,.vaerk *{transition:none!important} } /* Paletterne. Farverne er hentet ud af de sider vi faktisk har bygget (14. sept: de syv nye taget direkte fra sidernes egne CSS-variabler; maalt: blaek >= 14:1, daempet >= 5,9:1, accent >= 5,0:1 mod bunden). JavaScript skifter KUN attributten data-p. Alt andet staar her. */ .vaerk[data-p="salon-bellman"] {background:#FBF5EC;color:#2C1F16;--v-acc:#A3542A;--v-blaek:#2C1F16;--v-daempet:#6F5949;--v-linje:#EADCCA} .vaerk[data-p="barber"] {background:#0F0E0D;color:#F4F0EA;--v-acc:#C8873C;--v-blaek:#F4F0EA;--v-daempet:#96908A;--v-linje:#2F2E2C} .vaerk[data-p="skoenhed"] {background:#15100C;color:#F8F0E7;--v-acc:#C98F5E;--v-blaek:#F8F0E7;--v-daempet:#A08F80;--v-linje:#352F2B} .vaerk[data-p="pizzeria-marina"] {background:#0F0D0B;color:#F3ECE2;--v-acc:#C9A25E;--v-daempet:#A69C8E;--v-linje:#2A2521} .vaerk[data-p="tandvaerket"] {background:#FFFFFF;color:#0F1115;--v-acc:#20577D;--v-blaek:#0F1115;--v-daempet:#5B6270;--v-linje:#E3E6EB} .vaerk[data-p="autovaerksted"] {background:#14181C;color:#F2F1EE;--v-acc:#FF5A1F;--v-blaek:#F2F1EE;--v-daempet:#9AA4AE;--v-linje:#2B333B} .vaerk[data-p="klinge"] {background:#E7ECE9;color:#1C1C1A;--v-acc:#9B3A24;--v-blaek:#1C1C1A;--v-daempet:#5A5854;--v-linje:#C4CEC8} .vaerk[data-p="kvist"] {background:#12100E;color:#E8E1D6;--v-acc:#C9A227;--v-blaek:#E8E1D6;--v-daempet:#A79C8C;--v-linje:#2E2A25} /* ═══ galleri — 25 sider, du kan trykke paa ══════════════════════ Kortene rejser sig, mens de rulles ind. Det er bundet til selve rulningen i ren CSS (animation-timeline: view()) — ingen timer og intet JavaScript, der kan naa at fejle. Kan browseren ikke, staar kortene der bare. Et kort kan kun vaere gennemsigtigt, mens det stadig ligger under skaermkanten. */ .galleri{padding-top:calc(var(--sektion) * .6)} .gal-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,34px)} .gal-f{min-height:44px;padding:0 16px;border-radius:2px;font-family:inherit;font-size:14.5px;font-weight:600; border:1px solid var(--streg);background:transparent;color:var(--daempet);cursor:pointer; transition:border-color .3s var(--ind),color .3s var(--ind),background .3s var(--ind)} .gal-f:hover{border-color:var(--blaek);color:var(--blaek)} .gal-f.valgt{background:var(--blaek);border-color:var(--blaek);color:var(--ivory)} .gal-f:focus-visible{outline:2px solid var(--blaek);outline-offset:3px} .gal-net{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,30px) clamp(10px,2vw,22px)} @media(min-width:720px){.gal-net{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1100px){.gal-net{grid-template-columns:repeat(4,minmax(0,1fr))}} .gal-kort{display:block;color:inherit;text-decoration:none;border:0} .gal-kort[hidden]{display:none} .gal-kort:focus-visible{outline:2px solid var(--blaek);outline-offset:4px;border-radius:4px} .gal-bil{display:block;position:relative;border-radius:4px;overflow:hidden;background:var(--flade);border:1px solid var(--streg);aspect-ratio:16/10} .gal-bil img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ind)} .gal-kort:hover .gal-bil img,.gal-kort:focus-visible .gal-bil img{transform:scale(1.04)} .gal-baand{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:2px;font-size:11px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;background:rgba(21,16,14,.82);color:var(--ivory)} .gal-branche{display:block;margin-top:10px;font-size:var(--t-mikro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--guld-tekst)} .gal-navn{display:block;margin-top:3px;font-size:clamp(15px,.85rem + .35vw,18px);font-weight:600;letter-spacing:-.015em;line-height:1.25} .gal-mere{margin-top:clamp(30px,4vw,48px)} @supports (animation-timeline:view()){ .gal-kort{animation:gal-op linear both;animation-timeline:view();animation-range:entry 0% entry 42%} .gal-kort:nth-child(2n){animation-range:entry 12% entry 54%} .gal-kort:nth-child(4n+3){animation-range:entry 22% entry 64%} } @keyframes gal-op{from{opacity:0;translate:0 26px;scale:.94}to{opacity:1;translate:none;scale:none}} @media(prefers-reduced-motion:reduce){.gal-kort{animation:none}} .drift-t{margin-top:20px;padding-top:16px;border-top:1px solid var(--streg);font-size:var(--t-mikro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--daempet)} .pris ul.drift-l{margin-top:8px} .pris-moms{font-size:12.5px;color:var(--daempet);margin-top:4px;line-height:1.4} /* gron-hak: Abels oenske 11. sept — hvert punkt paa priskortene faar et groent hak: "ja, det kan vi", "ja, det har vi allerede gjort". Ingen eksterne kald (SVG som data-URI). */ .pris li{padding-left:24px} .pris li::before{content:"";width:15px;height:15px;top:.2em;background:none;border:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='none' stroke='%232F7A4E' stroke-width='1.4'/%3E%3Cpath d='M4.6 8.3l2.2 2.3 4.4-4.9' fill='none' stroke='%232F7A4E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:15px 15px;background-repeat:no-repeat} /* ═══ delt med branchesiderne — 11. september 2026 ════════════════ De her regler stod KUN i index.html's egen