/* ==================================================== Top strip + Nav (unchanged from v4) ==================================================== */ /* R13: baggrunden er full-bleed, indholdet kappes — samme kant som .nav__row. Sidepadding'en er derfor gutter PLUS det, der er tilovers uden for --content-w. Under 1480px er (100% − 1480px) negativ, så max() falder tilbage på ren var(--gutter): no-op på laptop og mobil. */ .topstrip { background: var(--ink); color: var(--snow); padding: 10px max(var(--gutter), calc((100% - var(--content-w)) / 2 + var(--gutter))); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: center; } .topstrip__pills { display: flex; gap: 28px; } .topstrip__pills span { display: inline-flex; align-items: center; gap: 8px; opacity: 0.8; } .topstrip__pills span .dot { background: var(--cobalt-soft); } .topstrip__lang { display: flex; gap: 20px; } .topstrip__lang a { opacity: 0.6; transition: opacity var(--d-fast) var(--ease); } .topstrip__lang a:hover, .topstrip__lang a[aria-current="true"] { opacity: 1; } .nav { background: var(--snow); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .nav__row { max-width: var(--content-w); margin: 0 auto; padding: 18px var(--gutter); display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; } .logo__img { height: 44px; width: auto; } .nav__primary { display: flex; gap: 36px; justify-content: center; font-size: 14.5px; font-weight: 500; } .nav__primary a { padding: 8px 0; border-bottom: 1.5px solid transparent; } .nav__primary a:hover, .nav__primary a[aria-current="page"] { border-color: var(--cobalt); } .nav__util { display: flex; gap: 28px; align-items: center; font-size: 14px; } .nav__util a { display: inline-flex; align-items: center; gap: 8px; } .nav__util .cart { background: var(--ink); color: var(--snow); padding: 10px 18px; border-radius: var(--r-1); font-weight: 500; transition: background var(--d-fast) var(--ease); } .nav__util .cart:hover { background: var(--cobalt); } .nav__util .cart b { font-family: var(--font-mono); font-size: 12px; opacity: 0.8; margin-left: 6px; font-weight: 400; } .nav__primary > .nav-item { position: relative; } .nav__primary > .nav-item > a { padding: 8px 0; border-bottom: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .nav__primary > .nav-item > a:hover, .nav__primary > .nav-item[data-open="true"] > a { border-color: var(--cobalt); } .nav__primary > .nav-item > a .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform var(--d-fast) var(--ease); opacity: 0.6; } .nav__primary > .nav-item[data-open="true"] > a .caret { transform: rotate(-135deg) translateY(-1px); } /* MEGA MENU */ /* F9-F2 (Marc 20/8, "større på iMac eller fixed?"): FAST bredde er den pæne løsning — et panel der vokser med 2560px bliver en strakt banner med kæmpe gab (samme argument som auth-cappen). Men 880 var i underkanten til 6 fliser + 4 kolonner; 1080 giver fliserne ~155px uden at panelet mister sin kort-karakter. */ .mega { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(1080px, 92vw); background: var(--snow); border: 1.5px solid var(--ink); box-shadow: 0 24px 48px -24px rgba(13,16,25,0.4); opacity: 0; visibility: hidden; transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); z-index: 60; } .nav-item[data-open="true"] .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* F7-6: kvalitets-tiles med produktfotos øverst i STOF-panelet (GM-mønsteret). */ .mega__tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line); } .mega__tiles a { display: grid; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink); text-align: left; } .mega__tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); } .mega__tiles a:hover img { border-color: var(--ink); } .mega__inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } .mega__col { padding: 24px 24px; border-right: 1px solid var(--line); } .mega__col:last-child { border-right: 0; } .mega__col h4 { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 14px; } .mega__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .mega__col ul a { font-size: 14px; font-weight: 500; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .mega__col ul a:hover { color: var(--cobalt); } .mega__col ul a .ct { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); } .mega__swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .mega__sw { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); } .mega__feature { padding: 0; border-right: 0; position: relative; overflow: hidden; } .mega__feature .bg { position: absolute; inset: 0; } .mega__feature .body { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 20px; background: linear-gradient(to top, rgba(13,16,25,0.85), transparent); color: var(--snow); } .mega__feature .body .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(248,248,244,0.75); } .mega__feature .body b { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; margin-top: 4px; } .mega__feature .body span { font-size: 11.5px; color: rgba(248,248,244,0.8); } @media (max-width: 1100px) { .nav__row { grid-template-columns: auto 1fr auto; } .nav__primary { display: none; } .nav__util .util-text { display: none; } .nav__burger { display: inline-flex; } } @media (min-width: 1101px) { .nav__burger { display: none; } } /* HAMBURGER */ .nav__burger { width: 42px; height: 42px; border: 1.5px solid var(--ink); background: var(--snow); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav__burger span { width: 18px; height: 1.5px; background: var(--ink); transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); } /* MOBILE DRAWER */ .drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; } .drawer[data-open="true"] { visibility: visible; pointer-events: auto; } .drawer__backdrop { position: absolute; inset: 0; background: rgba(13,16,25,0.4); opacity: 0; transition: opacity var(--d-med) var(--ease); } .drawer[data-open="true"] .drawer__backdrop { opacity: 1; } .drawer__panel { position: absolute; top: 0; right: 0; width: 360px; max-width: 88vw; height: 100vh; background: var(--snow); border-left: 1.5px solid var(--ink); transform: translateX(100%); transition: transform var(--d-med) var(--ease); display: flex; flex-direction: column; overflow-y: auto; } .drawer[data-open="true"] .drawer__panel { transform: translateX(0); } .drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1.5px solid var(--ink); } .drawer__head img { height: 36px; } .drawer__close { width: 38px; height: 38px; border: 1.5px solid var(--ink); background: var(--snow); cursor: pointer; font-size: 16px; display: grid; place-items: center; } .drawer__close:hover { background: var(--ink); color: var(--snow); } .drawer__search { padding: 16px 24px; border-bottom: 1px solid var(--line); } .drawer__search a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); font-size: 14px; color: var(--ink-mute); } .drawer__search a:hover { border-color: var(--ink); color: var(--ink); } .drawer__nav { padding: 8px 0; } .drawer__group { border-bottom: 1px solid var(--line); } .drawer__group > button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: 0; border: 0; cursor: pointer; font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--ink); } .drawer__group > button .caret { width: 8px; height: 8px; border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute); transform: rotate(45deg); transition: transform var(--d-fast) var(--ease); } .drawer__group[data-open="true"] > button .caret { transform: rotate(-135deg); } .drawer__sub { display: none; padding: 0 24px 16px; flex-direction: column; gap: 2px; } .drawer__group[data-open="true"] .drawer__sub { display: flex; } .drawer__sub a { display: flex; justify-content: space-between; padding: 9px 14px; font-size: 13.5px; color: var(--ink-soft); background: var(--snow-deep); } .drawer__sub a:hover { color: var(--cobalt); } .drawer__sub a .ct { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); } .drawer__link { display: block; padding: 16px 24px; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); } .drawer__link:hover { color: var(--cobalt); } .drawer__foot { margin-top: auto; padding: 20px 24px; background: var(--ink); color: var(--snow); display: flex; flex-direction: column; gap: 12px; } .drawer__foot a { color: rgba(248,248,244,0.85); font-size: 13.5px; display: flex; align-items: center; gap: 8px; } .drawer__foot a:hover { color: var(--cobalt-soft); } .drawer__foot .phone { font-family: var(--font-sans); font-weight: 500; font-size: 18px; color: var(--snow); letter-spacing: -0.01em; } /* ==================================================== 1 / HERO — full-bleed cobalt ==================================================== */ .hero { background: var(--cobalt); color: var(--snow); padding: 80px var(--gutter) 0; position: relative; overflow: hidden; } .hero__inner { max-width: var(--content-inner); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; min-height: 660px; position: relative; align-items: end; } .hero__copy { grid-column: 1 / span 6; padding-bottom: 100px; position: relative; z-index: 3; } .hero__copy .eyebrow { color: rgba(248,248,244,0.7); margin-bottom: 32px; } .hero__copy .eyebrow::before { background: rgba(248,248,244,0.7); } /* overflow-wrap: dansk og finsk er sammensætningssprog, og overskriften står i en 6/12-kolonne hvor BÅDE skrift og kolonne skalerer med vw. Et for langt ord retter sig derfor aldrig af sig selv ved en anden bredde. Målt på /tukku/: "kilpailijoillasi" lå 20px uden for kolonnen i HELE båndet 1040-1400px. Ikke hyphens: auto. Den delte også "kon-kurrenter" på den danske side, hvor intet løb over, og en bindestreg midt i en 112px display-overskrift er en dårligere fejl end den vi retter. break-word rører kun et ord der ikke kan være der. */ .hero__copy h1 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-display); line-height: 0.94; letter-spacing: -0.035em; margin: 0 0 32px; max-width: 12ch; overflow-wrap: break-word; } .hero__copy h1 em { font-style: italic; font-weight: 400; } .hero__copy h1 b { font-weight: 500; } .hero__copy p { font-size: var(--t-body-l); line-height: 1.5; color: rgba(248,248,244,0.82); max-width: 44ch; margin: 0 0 40px; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero__collage { grid-column: 7 / span 6; position: relative; min-height: 660px; padding-bottom: 80px; } .hero__block-1 { position: absolute; top: 64px; left: 32px; width: 78%; height: 60%; background: var(--snow); z-index: 1; } .hero__img-1 { position: absolute; top: 24px; left: 0; width: 78%; aspect-ratio: 16/10; background: var(--stone); border: 1.5px solid var(--snow); z-index: 2; } .hero__img-1 .ph { width: 100%; height: 100%; } .hero__img-2 { position: absolute; right: 0; bottom: 120px; width: 44%; aspect-ratio: 4/5; background: var(--stone); border: 1.5px solid var(--snow); z-index: 3; } .hero__img-2 .ph { width: 100%; height: 100%; } .hero__stamp { position: absolute; top: 0; right: 64px; width: 116px; height: 116px; border-radius: 50%; background: var(--ink); color: var(--snow); display: grid; place-items: center; text-align: center; font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; padding: 0 14px; z-index: 4; transform: rotate(-1.5deg); } .hero__stamp::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(248,248,244,0.2); border-radius: 50%; } .hero__stamp b { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--cobalt-soft); margin: 4px 0; } @media (max-width: 1000px) { .hero__inner { grid-template-columns: 1fr; min-height: 0; } .hero__copy { grid-column: 1; padding-bottom: 32px; } .hero__collage { grid-column: 1; min-height: 460px; } } /* ==================================================== 2 / TICKER — full-bleed ink ==================================================== */ .ticker { background: var(--ink); color: var(--snow); } .ticker__inner { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(5, 1fr); } .ticker__cell { padding: 32px 24px; border-right: 1px solid rgba(248,248,244,0.12); display: flex; flex-direction: column; gap: 8px; } .ticker__cell:last-child { border-right: 0; } .ticker__cell .lbl { font-size: 11px; font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; color: rgba(248,248,244,0.5); } .ticker__cell .val { font-family: var(--font-sans); font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -0.03em; } .ticker__cell .val small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(248,248,244,0.5); margin-left: 4px; vertical-align: 18px; font-weight: 400; } .ticker__cell:nth-child(odd) .val { color: var(--cobalt-soft); } @media (max-width: 900px) { .ticker__inner { grid-template-columns: 1fr 1fr; } .ticker__cell:nth-child(odd) { border-right: 1px solid rgba(248,248,244,0.12); } .ticker__cell { border-bottom: 1px solid rgba(248,248,244,0.12); } } /* ==================================================== Section base + headers ==================================================== */ .sec { max-width: var(--content-w); margin: 0 auto; padding: 128px var(--gutter); } /* R13: om/kontakt/discover/faq/legal/faq-arkiv lægger et .wrap INDE i .sec, så gutteren blev talt to gange (112px inset, indhold 1256px i stedet for 1368px) på ALLE viewports. Her dropper .sec sin egen sidepadding og lader .wrap'et eje kapningen — præcis som .form-section (linje 546) allerede gør. :has(> .wrap) er bevidst: forsidens .sec-sektioner har INTET .wrap-barn og ville gå kant-til-kant hvis padding'en blev fjernet ubetinget. */ .sec:has(> .wrap) { padding-inline: 0; } .sec--snow { background: var(--snow); } .sec--snow-deep { background: var(--snow); } .sec-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; margin-bottom: 64px; } .sec-head__index { grid-column: 1 / span 1; font-size: 14px; font-weight: 500; color: var(--cobalt); } .sec-head__title { grid-column: 2 / span 6; } .sec-head__title h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.028em; margin: 16px 0 0; } .sec-head__title h2 em { font-style: italic; font-weight: 400; color: var(--cobalt); } .sec-head__title h2 b { font-weight: 500; } .sec-head__lead { grid-column: 8 / span 5; color: var(--ink-soft); font-size: var(--t-body-l); max-width: 38ch; margin: 0; line-height: 1.5; } @media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } .sec-head__index, .sec-head__title, .sec-head__lead { grid-column: 1; } } /* ==================================================== 3 / CATEGORIES — bento grid 12×3, mixed-size tiles resolving to a clean rectangle ==================================================== */ .cats { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 260px; gap: 14px; } .cat { position: relative; overflow: hidden; border: 1.5px solid var(--ink); display: block; background: var(--stone); transition: transform var(--d-med) var(--ease); } .cat:hover { transform: translateY(-3px); } .cat::after { /* dark gradient toward bottom so label is always legible */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to bottom, transparent 0%, rgba(13,16,25,0.0) 30%, rgba(13,16,25,0.62) 100%); pointer-events: none; z-index: 1; } .cat__bg { /* per-audience color tint that doubles as fabric placeholder */ position: absolute; inset: 0; z-index: 0; } .cat__bg::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0 18px, rgba(13,16,25,0.06) 18px 19px); } /* F7-11: ægte produktfoto i flisen. Fotoet ligger i bunden, tinten er flisens egen gradient (background: inherit fra .cat__bg) som multiply- lag OVENPÅ — farveidentiteten består, teksten forbliver læsbar via .cat::after-mørkningen. Tint som ELEMENT, ikke ::before: pseudoen males FØR børn og ville lægge sig under fotoet. Uden foto: ren gradient som hidtil. */ .cat__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cat__tint { position: absolute; inset: 0; background: inherit; opacity: 0.30; mix-blend-mode: multiply; } /* .cat__hint fjernet: den viste mock'ens engelske art-direction-noter */ /* per-audience tints (placeholders — swap for real photos later) De fire første har hver et FARVEROLLE-alias ved siden af sig. Uden for dansk bærer de samme fire pladser motiv-fliser (M-06b), og en flise der hedder "Animals" må ikke bære klassen .cat--girls: så ville den næste der restyler pigefarven ramme et motiv uden at vide det. Aliaset peger på præcis samme gradient — værdien står ét sted, så de to ikke kan skride fra hinanden. */ .cat--women .cat__bg, .cat--rose .cat__bg { background: linear-gradient(155deg, #D9A8A0 0%, #B85A47 100%); } .cat--girls .cat__bg, .cat--blush .cat__bg { background: linear-gradient(155deg, #F0C9D6 0%, #C87A8E 100%); } .cat--boys .cat__bg, .cat--indigo .cat__bg { background: linear-gradient(155deg, #4A6BA8 0%, #1D2944 100%); } .cat--unisex .cat__bg, .cat--sage .cat__bg { background: linear-gradient(155deg, #B5C0A0 0%, #6B7A55 100%); } .cat--bamboo .cat__bg { background: linear-gradient(155deg, #E8DDC0 0%, #B89F75 100%); } .cat--rib .cat__bg { background: linear-gradient(155deg, #B89C82 0%, #5E4A38 100%); } .cat--mobel .cat__bg { background: linear-gradient(155deg, #8A9B7E 0%, #3D5238 100%); } /* Tile sizes — bento layout that resolves to 12×3 rectangle */ .cat--xl { grid-column: span 6; grid-row: span 2; } .cat--m { grid-column: span 3; grid-row: span 1; } .cat--wide { grid-column: span 6; grid-row: span 1; } .cat__lbl { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 24px 22px; display: flex; align-items: end; justify-content: space-between; gap: 16px; z-index: 2; color: var(--snow); } .cat__lbl h3 { font-family: var(--font-sans); font-weight: 500; line-height: 0.94; letter-spacing: -0.025em; margin: 0; color: var(--snow); font-size: 30px; } .cat--xl .cat__lbl h3 { font-size: 64px; letter-spacing: -0.035em; } .cat--wide .cat__lbl h3 { font-size: 48px; letter-spacing: -0.03em; } .cat__lbl .sub { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(248,248,244,0.78); } .cat__lbl .count { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .cat__lbl .count b { font-family: var(--font-sans); font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--snow); } .cat--xl .cat__lbl .count b { font-size: 42px; } .cat__lbl .count span { font-family: var(--font-mono); font-size: 10px; color: rgba(248,248,244,0.6); letter-spacing: 0.06em; text-transform: uppercase; } .cat__badge { position: absolute; top: 14px; left: 14px; background: var(--cobalt); color: var(--snow); padding: 6px 12px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; z-index: 3; } .cat__badge--ink { background: var(--ink); } /* Vault tile — wide foil anchor */ .cat--vault { background: var(--vault-bg); border-color: var(--vault-bg); } .cat--vault::after { display: none; } .cat--vault .cat__bg { background: radial-gradient(circle at 78% 18%, rgba(245,220,149,0.16), transparent 55%), radial-gradient(circle at 22% 82%, rgba(201,150,85,0.12), transparent 55%); } .cat--vault .cat__bg::after { background-image: repeating-linear-gradient(45deg, transparent 0 16px, rgba(232,239,251,0.045) 16px 17px); } .cat--vault .cat__lbl { background: linear-gradient(to right, rgba(13,10,6,0.7) 0%, transparent 70%); } .cat--vault .cat__lbl h3 { background: var(--vault-foil); -webkit-background-clip: text; background-clip: text; color: transparent; } .cat--vault .cat__lbl .sub { color: var(--vault-mute); } .cat--vault .cat__lbl .count b { color: var(--vault-ink); } .cat--vault .cat__badge { background: var(--vault-foil); color: #1A1408; } @media (max-width: 1000px) { .cats { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; } .cat--xl { grid-column: span 6; grid-row: span 2; } .cat--m, .cat--wide { grid-column: span 3; grid-row: span 1; } .cat--wide { grid-column: span 6; } } @media (max-width: 600px) { .cats { grid-template-columns: 1fr; grid-auto-rows: 200px; } .cat--xl, .cat--m, .cat--wide { grid-column: 1; grid-row: span 1; } .cat--xl .cat__lbl h3 { font-size: 44px; } .cat--wide .cat__lbl h3 { font-size: 36px; } } /* ==================================================== 4 / EDITS — 3 large editorial landscape cards (replaces the false "every Wednesday" claim) ==================================================== */ .edits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Scopet til .edits. Klassen .edit stod uscoped og ramte derfor også WooCommerces Redigér-link på adressekortet, som fik display:flex, flex-direction:column, gap:20px og et hover-løft på 4px det aldrig skulle have haft. theme.css lægges på hver eneste frontend-side, så lækagen gjaldt overalt hvor et plugin skriver class="edit". I temaet selv bruges .edit kun ét sted, front-page.php:275, og altid inde i .edits, så indsnævringen ændrer intet på forsiden. */ .edits .edit { position: relative; display: flex; flex-direction: column; gap: 20px; transition: transform var(--d-med) var(--ease); } .edits .edit:hover { transform: translateY(-4px); } /* F9-1: hele kortet er klikbart — CTA'ens ::after strækkes over .edit (nærmeste positionerede forfader). Ét anker, hele fladen. z-index 2: .edit__media ligger på z-index 1 og vandt ellers hit-testen (målt 20/8 — elementFromPoint gav edit__img, ikke linket). */ .edits .edit .cta::after { content: ''; position: absolute; inset: 0; z-index: 2; } .edit__media-wrap { position: relative; padding: 16px 0 0 16px; } .edit__media-bg { position: absolute; top: 0; left: 0; bottom: 16px; right: 16px; background: var(--cobalt); z-index: 0; } .edit--basics .edit__media-bg { background: var(--ink); } .edit--best .edit__media-bg { background: var(--cobalt-deep); } .edit__media { position: relative; z-index: 1; aspect-ratio: 5/4; background: var(--stone); border: 1.5px solid var(--ink); } .edit__media .ph { width: 100%; height: 100%; } .edit__media .ribbon { position: absolute; bottom: 16px; right: 16px; background: var(--snow); color: var(--ink); padding: 6px 12px; font-size: 11px; font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; border: 1.5px solid var(--ink); } .edit__body { padding: 0 4px; display: flex; flex-direction: column; gap: 8px; /* Pernille 2/9: kroppen fylder kortet, så __foot kan bundforankres og alle tre CTA'er står på samme linje uanset tekstlængde. */ flex: 1; } .edit__kicker { font-size: 11px; font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; color: var(--cobalt); } .edit__title { font-family: var(--font-sans); font-weight: 500; font-size: 30px; line-height: 1.04; letter-spacing: -0.022em; margin: 0; } .edit__title em { font-style: italic; font-weight: 400; color: var(--cobalt); } .edit__desc { font-size: 14.5px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.5; } /* F-17: tælle-badgen til venstre er fjernet (tallene var opdigtede). Med kun ét barn tilbage ville space-between trække CTA'en helt til venstre — flex-end holder den, hvor designet satte den. .count-reglen er slettet med badgen; en regel uden element er kun en invitation til at genindføre tallet. */ .edit__foot { display: flex; justify-content: flex-end; align-items: center; padding-top: 12px; margin-top: auto; border-top: 1px solid var(--line); font-size: 13px; } .edit__foot .cta { font-weight: 500; border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; } /* "Find ved at browse" — pattern-type discovery chip row */ /* F9-2 (20/8): rækken lignede et afsnit "kastet ind uden omtanke" (Marc) — nøgen labelrække på sektionens bund. Nu et indrammet bånd med labelen som egen mini-overskrift og luft nok til at chippene læses som et valg, ikke som resterende tags. */ .discover { display: flex; gap: 12px 12px; flex-wrap: wrap; align-items: center; margin-top: 64px; padding: 26px 28px 30px; background: var(--paper); border: 1.5px solid var(--line); } .discover .lbl { flex-basis: 100%; font-size: 12px; font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; color: var(--ink-mute); margin: 0 0 6px; } .discover .chip { padding: 10px 18px; font-size: 13.5px; } .chip { padding: 8px 14px; background: var(--snow); border: 1.5px solid var(--ink); border-radius: var(--r-pill); font-size: 13px; font-weight: 500; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .chip:hover { background: var(--ink); color: var(--snow); } .chip--brand { background: var(--cobalt); color: var(--snow); border-color: var(--cobalt); } .chip--brand:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--snow); } .chip .ct { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); margin-left: 6px; letter-spacing: 0.04em; } .chip:hover .ct { color: rgba(248,248,244,0.7); } .chip--brand .ct { color: rgba(248,248,244,0.7); } @media (max-width: 1000px) { .edits { grid-template-columns: 1fr; } } /* ==================================================== 5 / MANIFESTO — snow background, cobalt internal accent ==================================================== */ .manifesto { background: var(--snow); color: var(--ink); padding: 128px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .manifesto__inner { max-width: var(--content-inner); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; } .manifesto__collage { grid-column: 1 / span 5; position: relative; min-height: 540px; } .manifesto__block { position: absolute; top: 32px; right: 32px; width: 80%; height: 88%; background: var(--cobalt); z-index: 1; } .manifesto__img { position: absolute; top: 0; left: 0; width: 80%; aspect-ratio: 4/5; background: var(--stone); border: 1.5px solid var(--ink); z-index: 2; } .manifesto__img .ph { width: 100%; height: 100%; } .manifesto__num { position: absolute; bottom: 0; right: 0; background: var(--ink); color: var(--snow); padding: 24px 32px; z-index: 3; transform: rotate(-1.5deg); } .manifesto__num .n { font-size: 80px; font-weight: 400; line-height: 0.9; letter-spacing: -0.04em; } .manifesto__num .l { font-size: 11px; font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; color: rgba(248,248,244,0.7); margin-top: 6px; } .manifesto__copy { grid-column: 7 / span 6; } .manifesto__copy .eyebrow { color: var(--ink-mute); margin-bottom: 24px; } .manifesto__copy .eyebrow::before { background: var(--cobalt); } .manifesto__copy h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.028em; margin: 0 0 28px; color: var(--ink); } .manifesto__copy h2 em { font-style: italic; font-weight: 400; color: var(--cobalt); } .manifesto__copy h2 b { font-weight: 500; } .manifesto__copy p { font-size: var(--t-body-l); line-height: 1.55; color: var(--ink-soft); max-width: 44ch; margin: 0 0 18px; } .manifesto__copy .actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } @media (max-width: 1000px) { .manifesto__inner { grid-template-columns: 1fr; gap: 80px; } .manifesto__collage, .manifesto__copy { grid-column: 1; } } /* ==================================================== 6 / VAULT — pitch black + foil (lighter than before since we have a teaser in the cats grid) ==================================================== */ .vault { background: var(--vault-bg); color: var(--vault-ink); padding: 128px 0; position: relative; overflow: hidden; } .vault__bg { position: absolute; top: 80px; left: -3vw; right: -3vw; font-family: var(--font-sans); font-weight: 600; font-size: clamp(160px, 24vw, 400px); line-height: 0.85; letter-spacing: -0.06em; background: var(--vault-foil); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.13; pointer-events: none; } .vault__inner { position: relative; z-index: 2; max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; } .vault__pitch { grid-column: 1 / span 5; } .vault__pitch .eyebrow { color: var(--vault-mute); margin-bottom: 24px; } .vault__pitch .eyebrow::before { background: var(--vault-foil); } .vault__pitch h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.028em; margin: 0 0 28px; } .vault__pitch h2 em { font-style: italic; } .vault__pitch p { color: var(--vault-mute); font-size: var(--t-body-l); line-height: 1.55; max-width: 38ch; margin: 0 0 32px; } .vault__pitch .actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn--foil { background: var(--vault-foil); color: #1A1408; border: 1.5px solid transparent; font-weight: 600; } .btn--foil:hover { filter: brightness(1.1); } .vault__mosaic { grid-column: 7 / span 6; position: relative; height: 520px; } .vault__tile { position: absolute; background: #11141C; border: 1px solid var(--vault-line); overflow: hidden; } .vault__tile .ph { width: 100%; height: 100%; background: linear-gradient(135deg, rgba(232,239,251,0.04), rgba(232,239,251,0.08)), repeating-linear-gradient(45deg, transparent 0 14px, rgba(232,239,251,0.05) 14px 15px); } .vault__tile .ph__label { background: var(--vault-bg); color: var(--vault-mute); } .vault__tile--1 { top: 0; left: 0; width: 300px; height: 300px; z-index: 3; } .vault__tile--2 { top: 40px; left: 260px; width: 220px; height: 340px; z-index: 2; } .vault__tile--3 { top: 120px;left: 440px; width: 200px; height: 220px; z-index: 3; } .vault__tile--4 { top: 320px;left: 100px; width: 230px; height: 180px; z-index: 2; } .vault__tile--5 { top: 280px;left: 340px; width: 240px; height: 200px; z-index: 1; } .vault__tile--6 { top: 220px; left: 620px; width: 150px; height: 150px; background: var(--vault-foil); color: #1A1408; display: grid; place-items: center; text-align: center; padding: 14px; font-size: 12px; font-weight: 600; letter-spacing: var(--tracked-eye); text-transform: uppercase; z-index: 4; transform: rotate(-1.5deg); line-height: 1.3; } @media (max-width: 1000px) { .vault__inner { grid-template-columns: 1fr; gap: 80px; } .vault__pitch, .vault__mosaic { grid-column: 1; } } @media (max-width: 700px) { .vault__mosaic { transform: scale(0.7); transform-origin: top left; height: 380px; } } /* ==================================================== 7 / ONBOARDING (unchanged) ==================================================== */ .onb { max-width: var(--content-w); margin: 0 auto; padding: 128px var(--gutter); } .onb__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; margin-bottom: 64px; } .onb__head .idx { grid-column: 1 / span 1; color: var(--cobalt); font-size: 14px; font-weight: 500; } .onb__head .title { grid-column: 2 / span 7; } .onb__head .title h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.028em; margin: 16px 0 0; } .onb__head .title h2 em { font-style: italic; color: var(--cobalt); } .onb__head p { grid-column: 9 / span 4; color: var(--ink-soft); font-size: var(--t-body-l); margin: 0; max-width: 36ch; line-height: 1.5; } .onb__head p b { color: var(--ink); font-weight: 500; } /* Marc 1/9: "dette afsnit ser ud til kun at fylde halvdelen af skærmen på mobil: Sådan foregår det". Målt efter: det var en tredjedel, ikke halvdelen, og på iPad en sjettedel. Fejlen var at reglen her tvang BØRNENE ind i spalte 1, men aldrig rørte selve gridet, som blev ved med at være repeat(12, 1fr) med 32px gap. Ved 390px giver det 11 tomme spor plus 11 gaps a 32px = 352px i en kasse der kun er 350px bred. Sporene og deres gaps var altså bredere end kassen, de tomme 1fr-spor blev klemt til 0, og al tekst endte i spalte 1 på 113px = 32 % af skærmen. Overskriften brækkede til en høj smal ribbe, så hovedet blev 749px højt mod 280px nu. Ved 834px var teksten nede på 15 %. Gridet skal kollapses, ikke kun børnene. Det er præcis hvad linjen for .onb__steps nedenfor allerede gør, og at hovedet manglede den er grunden til at trinnene så rigtige ud mens overskriften over dem ikke gjorde. column-gap nulstilles fordi et vandret mellemrum ikke betyder noget når der kun er ét spor. row-gap sættes til 20px, ikke 32, fordi de tre led (nummer, overskrift, manchet) læses som én blok når de er stablet. Manchettens max-width: 36ch bliver stående: trinnenes egne afsnit lige nedenfor er cappet på 30ch, og uden cap bliver manchetlinjen 95 tegn bred på iPad. Målt på kontrolfladen før noget blev skrevet her. Samme fejl står på .tests__head længere nede. Den er urørt med vilje: ingen markup i temaet bruger den klasse, så den er død CSS. */ @media (max-width: 900px) { .onb__head { grid-template-columns: 1fr; column-gap: 0; row-gap: 20px; } .onb__head > * { grid-column: 1 !important; } } .onb__steps { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-top: 1.5px solid var(--ink); } .step { grid-column: span 4; border-right: 1px solid var(--line); padding: 32px 32px 40px 0; position: relative; } .step:last-child { border-right: 0; padding-right: 0; } .step .n { display: inline-block; margin-bottom: 32px; font-size: 13px; font-weight: 500; color: var(--cobalt); letter-spacing: var(--tracked-eye); text-transform: uppercase; } .step h3 { font-family: var(--font-sans); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; } .step p { color: var(--ink-soft); margin: 0; font-size: var(--t-body); line-height: 1.5; max-width: 30ch; } @media (max-width: 900px) { .onb__steps { grid-template-columns: 1fr; } .step { grid-column: 1; border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; } } /* ==================================================== 8 / TESTIMONIALS (unchanged) ==================================================== */ .tests { background: var(--snow); padding: 128px var(--gutter); border-top: 1px solid var(--line); } .tests__inner { max-width: var(--content-inner); margin: 0 auto; } .tests__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; margin-bottom: 64px; } .tests__head .idx { grid-column: 1 / span 1; color: var(--cobalt); font-size: 14px; font-weight: 500; } .tests__head .title { grid-column: 2 / span 6; } .tests__head .title h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.028em; margin: 16px 0 0; } .tests__head .title h2 em { font-style: italic; color: var(--cobalt); } .tests__head .meta { grid-column: 9 / span 4; text-align: right; color: var(--ink-mute); font-size: 13px; line-height: 1.55; } .tests__head .meta b { color: var(--ink); font-weight: 500; } @media (max-width: 900px) { .tests__head > * { grid-column: 1 !important; text-align: left !important; } } .tests__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; } .quote { background: var(--snow); border: 1.5px solid var(--ink); padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 28px; grid-column: span 4; } .quote--offset { margin-top: 56px; } .quote blockquote { font-family: var(--font-sans); font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; margin: 0; } .quote blockquote em { font-style: italic; font-weight: 400; } .quote__by { display: flex; gap: 14px; align-items: center; margin-top: auto; } .quote__by .avt { width: 48px; height: 48px; border-radius: 50%; background: var(--cobalt); color: var(--snow); display: grid; place-items: center; font-weight: 500; font-size: 18px; flex-shrink: 0; } .quote__by .who { font-size: 13px; line-height: 1.4; } .quote__by .who b { display: block; font-weight: 500; } .quote__by .who span { color: var(--ink-mute); font-size: 11.5px; } @media (max-width: 900px) { .tests__grid { grid-template-columns: 1fr; } .quote { grid-column: 1; } .quote--offset { margin-top: 0; } } /* ==================================================== 9 / CLOSER (unchanged) ==================================================== */ .closer { background: var(--cobalt); color: var(--snow); padding: 128px 0; position: relative; overflow: hidden; } .closer__bg { position: absolute; bottom: -40px; left: -3vw; font-family: var(--font-sans); font-weight: 600; font-size: clamp(180px, 24vw, 380px); line-height: 0.85; letter-spacing: -0.06em; color: rgba(248,248,244,0.08); pointer-events: none; } .closer__inner { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; position: relative; z-index: 2; } .closer__main { grid-column: 1 / span 7; } .closer__main h2 { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-display); line-height: 0.96; letter-spacing: -0.035em; margin: 0; max-width: 14ch; } .closer__main h2 em { font-style: italic; } .closer__main .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; } .closer__contact { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 4px; } .closer__contact .eyebrow { color: rgba(248,248,244,0.7); margin-bottom: 16px; } .closer__contact .eyebrow::before { background: rgba(248,248,244,0.7); } .closer__contact a { font-size: 16px; padding: 14px 0; border-bottom: 1px solid rgba(248,248,244,0.25); transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); font-weight: 500; } .closer__contact a:hover { color: var(--ink); border-color: var(--ink); } @media (max-width: 900px) { .closer__inner { grid-template-columns: 1fr; gap: 48px; } .closer__main, .closer__contact { grid-column: 1; } } /* ==================================================== PRIVATKUNDE-UDGANGEN (.pk-exit) · Marc 26/8 "lidt for subtilt … måske skal det laves som en knap" ÉN chip, fire vægte. Basen herunder er den letteste form (hvid bund, 1px --line). Hver flade skruer OP eller NED i sit eget ark; ingen flade arver en vægt den ikke selv har valgt. Alle fire overskrivninger er skrevet med højere specificitet end basen, så rækkefølgen mellem arkene ikke kan drive. Basen ligger i theme.css fordi det er det ene ark der indlæses på alle fire flader (functions.php, 'jydsk-v2-main'); access-gate.css, pdp.css og account.css indlæses efter. Firkantet (--r-1 = 2px), ingen skygge, ingen ny token. min-height: 44px = Apples og Googles tapmål, samme tal som .ag__x. ⚠️ Brug ALDRIG .btn--mini her: den er 38px og falder under tapmålet. ==================================================== */ .pk-exit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); font-family: var(--font-sans); font-size: var(--t-body-s); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); text-decoration: none; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } .pk-exit:hover { background: var(--cobalt-wash); border-color: var(--cobalt); color: var(--cobalt-deep); } /* Chippen er nu en knap, ikke en tekstlinje, så den skal have en synlig fokusring. En understregning rækker ikke længere. */ .pk-exit:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; } /* Ekstern-glyffen. Se jydsk_v2_ext_svg() for hvorfor det er inline SVG og ikke et ↗-tegn. stroke="currentColor", så farven styres herfra. */ .pk-exit__ext { flex: 0 0 auto; color: var(--ink-mute); transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); } .pk-exit:hover .pk-exit__ext { color: var(--cobalt); transform: translate(1px, -1px); } /* ==================================================== FOOTER (unchanged) ==================================================== */ footer.site { background: var(--ink); color: var(--snow); padding: 96px var(--gutter) 40px; } footer.site .ftr { max-width: var(--content-inner); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 56px; } footer.site .brand { display: flex; flex-direction: column; gap: 20px; max-width: 36ch; } footer.site .brand img { width: 220px; height: auto; filter: brightness(0) invert(1); opacity: 0.95; } footer.site .brand p { color: rgba(248,248,244,0.6); font-size: 13.5px; margin: 0; line-height: 1.55; } /* Privatkunde-udgangen i footeren, v2 (Marc 26/8). Chip, ikke fodnote, men den dæmpede af de fire varianter — se noten i footer.php for hvorfor netop denne flade holdes nede. Selektoren footer.site .brand a.pk-exit er (0,3,2) og slår både footer.site a (0,1,2) på farve og footer.site a:hover (0,2,2) på hover. ⚠️ Hover-linjen er BÆRENDE: uden den vinder footer.site a:hover og maler teksten kobolt-blå (--cobalt-soft) på den mørke bund. Den gamle p.-form er unødvendig nu: elementet er en
med en indeni, så footer.site .brand p (0,2,2) rammer intet. Den negative margin ophæver .brand's gap: 20px, som er afstand MELLEM afsnit; chippen hører til sætningen over. */ footer.site .brand .brand__exit { margin-top: -8px; } footer.site .brand a.pk-exit { background: transparent; border-color: rgba(248,248,244,0.28); color: rgba(248,248,244,0.85); font-size: 12.5px; font-weight: 500; } footer.site .brand a.pk-exit:hover { background: rgba(248,248,244,0.06); border-color: rgba(248,248,244,0.60); color: var(--snow); } footer.site .brand a.pk-exit .pk-exit__ext { color: rgba(248,248,244,0.55); } footer.site .brand a.pk-exit:hover .pk-exit__ext { color: var(--cobalt-soft); } footer.site h4 { font-size: 11px; font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; color: rgba(248,248,244,0.4); margin: 0 0 18px; } footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; } footer.site a { color: rgba(248,248,244,0.75); } footer.site a:hover { color: var(--cobalt-soft); } footer.site .base { max-width: var(--content-inner); margin: 72px auto 0; padding-top: 28px; border-top: 1px solid rgba(248,248,244,0.12); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: rgba(248,248,244,0.5); } @media (max-width: 900px) { footer.site .ftr { grid-template-columns: 1fr 1fr; } } /* ---- Nyhedsbrev i footeren (Marc 28/8: "byg den i v2's footer") ---- ⚠️ Der fandtes INGEN feltstil på mørk baggrund i hele v2 før denne blok. Hver eneste input-regel i temaet antager --paper-hvid flade og --line-kant, og dem kan man ikke lægge på --ink uden at det ligner en fejl. Præcedensen er pk-exit-chippen ovenfor (theme.css:635): gennemsigtig flade, kant i snow med lav alpha, fyld først ved hover/fokus. Samme alfatrin genbruges her (.06 / .12 / .28 / .40 / .45 / .60), så footeren beholder ét sprog. Layoutet låner .closer's to spalter og .search-bar's feltrække; begge findes i forvejen. Ét brud ved 900px, samme som .ftr. */ footer.site .ftr-news { max-width: var(--content-inner); margin: var(--s-10) auto 0; padding-top: var(--s-10); border-top: 1px solid rgba(248,248,244,0.12); display: grid; grid-template-columns: 1.4fr 2fr; gap: 56px; align-items: start; } footer.site .ftr-news__title { font-size: 19px; line-height: 1.3; color: var(--snow); margin: 0 0 8px; } footer.site .ftr-news__lead { font-size: 13.5px; line-height: 1.55; color: rgba(248,248,244,0.6); margin: 0; max-width: 34ch; } /* MC4WP tegner ét

pr. felt inde i .mc4wp-form-fields. Den danske formular har fire: Fornavn, Firmanavn, E-mail, knap — altså 2×2. Knappen fylder IKKE bredden. Gjorde den det, faldt e-mailfeltet ned i række to alene med en tom halvdel ved siden af (målt: felt 380px, hul 380px) og knappen blev 772px bred. Fire felter i to spalter er 2×2, og knappen hører hjemme i det fjerde felt. Slås GDPR-boksen til, bliver antallet ulige. Så fylder afkrydsning, e-mail OG knap hver sin række, for ellers flytter hullet sig bare. */ footer.site .ftr-news .mc4wp-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; } footer.site .ftr-news .mc4wp-form-fields > p { margin: 0; } footer.site .ftr-news .mc4wp-form-fields > p:has(input[type="checkbox"]) { grid-column: 1 / -1; } footer.site .ftr-news .mc4wp-form-fields:has(input[type="checkbox"]) > p:has(input[type="email"]), footer.site .ftr-news .mc4wp-form-fields:has(input[type="checkbox"]) > p:has(input[type="submit"]), footer.site .ftr-news .mc4wp-form-fields:has(input[type="checkbox"]) > p:has(button) { grid-column: 1 / -1; } footer.site .ftr-news label { display: block; font-size: 11px; font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; color: rgba(248,248,244,0.4); margin: 0 0 7px; } footer.site .ftr-news .mc4wp-form-fields > p:has(input[type="checkbox"]) label { display: inline; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: rgba(248,248,244,0.6); } footer.site .ftr-news input[type="text"], footer.site .ftr-news input[type="email"] { width: 100%; height: 48px; padding: 0 14px; font-family: var(--font-sans); font-size: 14px; background: rgba(248,248,244,0.06); border: 1.5px solid rgba(248,248,244,0.28); border-radius: var(--r-1); color: var(--snow); transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } footer.site .ftr-news input::placeholder { color: rgba(248,248,244,0.45); } footer.site .ftr-news input[type="text"]:focus, footer.site .ftr-news input[type="email"]:focus { outline: 0; border-color: var(--cobalt-soft); background: rgba(248,248,244,0.12); box-shadow: 0 0 0 3px rgba(74,130,219,0.30); } /* Knappen er .btn--on-cobalt's greb: snow-flade på mørk bund. Den er den eneste lyse flade i footeren, og det er meningen. */ footer.site .ftr-news button[type="submit"], footer.site .ftr-news input[type="submit"] { width: 100%; height: 48px; padding: 0 28px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; line-height: 1; cursor: pointer; background: var(--snow); color: var(--ink); border: 1.5px solid var(--snow); border-radius: var(--r-1); transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); } footer.site .ftr-news button[type="submit"]:hover, footer.site .ftr-news input[type="submit"]:hover { background: var(--cobalt-soft); border-color: var(--cobalt-soft); color: var(--snow); } /* Kvittering og fejl. --error (#8A2A1F) er umulig at læse på --ink, så de to tilstande har lyse varianter. Første gang v2 har brug for dem. */ footer.site .ftr-news .mc4wp-alert, footer.site .ftr-news .mc4wp-response { font-size: 13px; line-height: 1.5; margin-top: 12px; } footer.site .ftr-news .mc4wp-success p { color: #8FD6A2; margin: 0; } footer.site .ftr-news .mc4wp-error p, footer.site .ftr-news .mc4wp-notice p { color: #F0A594; margin: 0; } @media (max-width: 900px) { footer.site .ftr-news { grid-template-columns: 1fr; gap: 28px; } footer.site .ftr-news .mc4wp-form-fields { grid-template-columns: 1fr; } } /* WP port: classes replacing the mock's inline styles */ .drawer__foot-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; } .base__legal { display: flex; gap: 24px; } .ph--fill { height: 100%; } /* Content pages (about/contact) */ .about-hero, .contact-hero { padding: var(--s-24) 0 var(--s-16); background: var(--cobalt); color: var(--snow); } .about-hero h1, .contact-hero h1 { font-size: var(--t-display); line-height: var(--lh-display); margin: var(--s-4) 0 0; } .about-hero .eyebrow, .contact-hero .eyebrow { color: rgba(248,248,244,0.65); } .sec--page-content, .form-section { padding: var(--s-16) 0; } /* F9-11: notits når vault-CTA'en lander på formularen med ?emne=vault */ .form-note { margin: 12px 0 20px; padding: 12px 16px; background: var(--cobalt-wash, #eef2fc); border-left: 3px solid var(--cobalt); font-size: 14px; } /* F9-8: map-card fra designpakkens contact.html — tegnet SVG, intet embed */ .map-strip { margin: 0 auto var(--s-16); } .map-card { background: var(--snow); border: 1.5px solid var(--ink); overflow: hidden; display: grid; grid-template-columns: 1.6fr 1fr; } .map-card__map { aspect-ratio: 21/9; position: relative; background: var(--cobalt-wash, #eef2fc); border-right: 1.5px solid var(--ink); overflow: hidden; } .map-card__map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map-card__pin { position: absolute; top: 42%; left: 45%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .map-card__pin .marker { width: 36px; height: 36px; border-radius: 50% 50% 50% 0; background: var(--cobalt); transform: rotate(-45deg); border: 3px solid var(--snow); box-shadow: 0 4px 14px rgba(13,16,25,0.3); position: relative; } .map-card__pin .marker::after { content: ""; position: absolute; top: 8px; left: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--snow); } .map-card__pin .lbl { background: var(--ink); color: var(--snow); padding: 5px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 14px; font-weight: 600; } .map-card__addr { padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; justify-content: space-between; } .map-card__addr .kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; } .map-card__addr .kicker::before { content: ""; width: 24px; height: 1.5px; background: var(--cobalt); } .map-card__addr h3 { font-weight: 500; font-size: 28px; margin: 8px 0 0; letter-spacing: -0.022em; line-height: 1.1; } .map-card__addr p { font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.5; max-width: 32ch; } .map-card__addr .actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .map-card__addr .actions .primary { background: var(--ink); color: var(--snow); padding: 12px 18px; font-size: 13.5px; font-weight: 500; } .map-card__addr .actions .primary:hover { background: var(--cobalt); } @media (max-width: 900px) { .map-card { grid-template-columns: 1fr; } .map-card__map { border-right: 0; border-bottom: 1.5px solid var(--ink); aspect-ratio: 4/3; } } /* F9-21: CF7-formularen i temaets feltsprog (samme udtryk som kassens felter) */ .form-section .wpcf7 { max-width: 680px; } .form-section .wpcf7 label { display: block; font-size: var(--t-eyebrow, 11px); font-weight: 500; letter-spacing: var(--tracked-eye); text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .form-section .wpcf7 input[type="text"], .form-section .wpcf7 input[type="email"], .form-section .wpcf7 input[type="tel"], .form-section .wpcf7 select { width: 100%; height: 48px; padding: 0 14px; font: inherit; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-1, 3px); } .form-section .wpcf7 textarea { width: 100%; min-height: 170px; padding: 12px 14px; font: inherit; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-1, 3px); } .form-section .wpcf7 input:focus, .form-section .wpcf7 textarea:focus { outline: none; border-color: var(--cobalt); } .form-section .wpcf7 p { margin: 0 0 18px; } .form-section .wpcf7 input[type="submit"] { background: var(--cobalt); color: var(--snow); border: 0; height: 50px; padding: 0 28px; font: inherit; font-weight: 500; cursor: pointer; } .form-section .wpcf7 input[type="submit"]:hover { background: var(--cobalt-deep, var(--ink)); } .team-grid, .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-8); margin-top: var(--s-8); } @media (max-width: 700px) { .team-grid, .contact-grid { grid-template-columns: 1fr; } } .team-card__photo { aspect-ratio: 4/5; } .team-card b { display: block; margin-top: var(--s-3); } .team-card span { color: var(--ink-mute); font-size: var(--t-body-s); } .contact-list { list-style: none; padding: 0; margin: var(--s-4) 0 0; } .contact-list li { padding: 8px 0; border-bottom: var(--rule-thin); } /* Search results */ .search-bar { padding: var(--s-12) 0 var(--s-4); border-bottom: var(--rule-thin); } .search-bar form { display: flex; gap: var(--s-3); } .search-bar input[type="search"] { flex: 1; height: 52px; padding: 0 16px; font: inherit; font-size: var(--t-body-l); background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-1); } .search-bar input[type="search"]:focus { outline: none; border-color: var(--cobalt); } /* Ikonet og ryd-knappen fra search.php's formrække. Reglerne manglede helt: uden dem fyldte viewBox-SVG'en 100 % bredde (kæmpe lup, målt 3/9). */ .search-bar__ico { flex: 0 0 auto; width: 22px; height: 22px; align-self: center; color: var(--ink-mute); } .search-bar__clear { flex: 0 0 auto; align-self: center; width: 32px; height: 32px; border: 0; background: none; font-size: var(--t-body-l); line-height: 1; color: var(--ink-mute); cursor: pointer; } .search-bar__clear:hover { color: var(--ink); } .search-bar__meta { padding: var(--s-3) 0; } .results { padding: var(--s-8) 0 var(--s-24); } .result-row { grid-column: 1 / -1; padding: var(--s-4) 0; border-bottom: var(--rule-thin); } .result-row__type { font-size: var(--t-eyebrow); letter-spacing: var(--tracked-eye); text-transform: uppercase; color: var(--ink-mute); } /* Vault program landing (dark/foil) */ .vault-program { background: var(--vault-bg); color: var(--vault-ink); } .vp-hero { padding: var(--s-32) 0 var(--s-16); } .vp-hero h1 { font-size: var(--t-mega); line-height: var(--lh-display); margin: var(--s-4) 0; } .vp-hero__lead { max-width: 560px; font-size: var(--t-body-l); color: var(--vault-mute); } .vp-hero__actions { margin-top: var(--s-8); } .btn--foil { background: var(--vault-foil); color: var(--vault-bg); border: 0; font-weight: 600; } .vp-pillars { padding: var(--s-16) 0; border-top: 1px solid var(--vault-line); } .vp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-8); } @media (max-width: 900px) { .vp-grid { grid-template-columns: 1fr; } } .vp-pillar .n { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--vault-mute); } .vp-pillar h3 { margin: var(--s-2) 0; } .vp-pillar p { color: var(--vault-mute); font-size: var(--t-body-s); } .vp-how, .vp-apply { padding: var(--s-16) 0; border-top: 1px solid var(--vault-line); } .vp-steps { list-style: none; counter-reset: step; padding: 0; margin: var(--s-8) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-6); } @media (max-width: 900px) { .vp-steps { grid-template-columns: 1fr; } } .vp-steps li { counter-increment: step; border-top: 1px solid var(--vault-line); padding-top: var(--s-4); } .vp-steps li::before { content: "0" counter(step); font-family: var(--font-mono); font-size: var(--t-mono); color: var(--vault-mute); display: block; margin-bottom: var(--s-2); } .vp-steps b { display: block; margin-bottom: var(--s-1); } .vp-steps span { color: var(--vault-mute); font-size: var(--t-body-s); } /* FAQ content rhythm (existing Q/A markup passthrough) */ .faq-content { max-width: 780px; } .faq-content a[tabindex] { display: block; font-size: var(--t-h3); font-weight: 600; margin: var(--s-8) 0 var(--s-2); padding-top: var(--s-4); border-top: var(--rule-thin); color: var(--ink); } .faq-content p { color: var(--ink-soft); } .faq-content img { display: none; } /* legacy generic stock images add nothing */ /* Quick order */ .quick-order__form { display: grid; gap: var(--s-4); max-width: 520px; } .quick-order textarea { font-family: var(--font-mono); font-size: 13px; padding: 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-1); } .quick-order textarea:focus { outline: none; border-color: var(--cobalt); } .qo-msg { padding: 10px 14px; border: 1.5px solid var(--line); font-size: var(--t-body-s); } .qo-msg--ok { border-color: var(--moss); color: var(--moss); } .qo-msg--err { border-color: var(--rust); color: var(--rust); } .faq-item { border-top: var(--rule-thin); padding: var(--s-6) 0; } .faq-item__q { font-size: var(--t-h3); margin: 0 0 var(--s-3); } .faq-item__a { color: var(--ink-soft); } /* Cart flyout */ /* R12: samme containment som .drawer (linje ~661). .flyout__panel er 420px bred og står med transform: translateX(100%) når kurven er lukket, altså 420px ude til højre for viewporten (359px ved 390px pga. max-width:92vw). Flyouten renderes på HVER side via footer.php. .drawer fik overflow:hidden i A4-runden med præcis den begrundelse; .flyout blev overset dengang. */ .flyout { position: fixed; inset: 0; overflow: hidden; z-index: 300; visibility: hidden; } .flyout[data-open="true"] { visibility: visible; } .flyout__backdrop { position: absolute; inset: 0; background: rgba(13,16,25,0.4); opacity: 0; transition: opacity var(--d-med) var(--ease); } .flyout[data-open="true"] .flyout__backdrop { opacity: 1; } /* V-07: bredden var deklareret tre steder med SAMME specificitet — 420px her, 460px i plp.css og pdp.css — så kurven var 460 på shop/PDP/kurv og 420 på forsiden. Deklarationerne i plp.css og pdp.css er slettet; theme.css ejer panelet nu. 460 er valgt fordi det er det kunderne faktisk ser i dag på de fire af fem flader hvor kurven bruges. */ .flyout__panel { position: absolute; top: 0; right: 0; width: 460px; max-width: 92vw; height: 100vh; background: var(--snow); border-left: 1.5px solid var(--ink); transform: translateX(100%); transition: transform var(--d-med) var(--ease); display: flex; flex-direction: column; overflow-y: auto; } .flyout[data-open="true"] .flyout__panel { transform: none; } .flyout__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1.5px solid var(--ink); } .flyout__head h2 { margin: 0; font-size: var(--t-h3); } .flyout__close { width: 38px; height: 38px; border: 1.5px solid var(--ink); background: var(--snow); cursor: pointer; display: grid; place-items: center; } /* V-07: her lå sidste rest af den FØRSTE flyout-udgave (10 linjer, slettet 2026-08-01). Den kostede tre fejl på én gang: 1) .widget_shopping_cart_content havde padding 18px 24px OVEN I de indre blokkes egne 20px — 88 af 458,5 px, altså 19,2 % af panelbredden, var ren padding, og det gav de fem forskellige venstrekanter Marc så. 2) .woocommerce-mini-cart li satte grid 64px 1fr på de samme

  • som .flyout .fline styrer. Sammen med wrapperens ekstra 48 px havde antalsvælgeren <=101,3 px at stå på og krævede >=109 px, så den løb ind under prisen. Uden den gamle regel og uden dobbeltpaddingen er der plads. 3) .woocommerce-mini-cart__total satte display:flex på