/** * Trygt i Reden - temaets chrome-styling (v3: "notesbog"). * Papir + blæk, frisk grøn + koral-pop, flade farver, håndtegnet, asymmetrisk. * Design-tokens kommer fra theme.json; her mapper vi dem til semantiske vars * og understøtter dag/nat via [data-theme] + prefers-color-scheme. */ :root { --paper: var(--wp--preset--color--base, #fbf7ef); --panel: var(--wp--preset--color--surface, #f1ece0); --ink: var(--wp--preset--color--contrast, #2b2a26); --muted: var(--wp--preset--color--muted, #6e6a60); --green: var(--wp--preset--color--accent, #2e8b6b); --green-deep: var(--wp--preset--color--accent-deep, #256f55); --coral: var(--wp--preset--color--coral, #ee6c4d); --sun: var(--wp--preset--color--sun, #f4ce5e); --sky: var(--wp--preset--color--sky, #dcebe6); --soft: var(--wp--preset--color--soft, #eaf4ef); --border: var(--wp--preset--color--border, #e7ddca); --card: #fffdf8; /* Radius-skala + de to signatur-hjørnemønstre (style-guide §2.4) */ --r-xs: 4px; --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --r-xl: 28px; --r-pill: 100px; --corner-leaf: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm); --corner-wing: var(--r-sm) var(--r-lg) var(--r-sm) var(--r-lg); /* Skygge-system (style-guide §2.5) */ --shadow-soft: 0 8px 24px rgba(43,42,38,.08); --shadow-press: 4px 4px 0 var(--ink); --shadow-press-lift: 5px 5px 0 var(--ink); --shadow-press-active: 1px 1px 0 var(--ink); --shadow-overlay: 6px 6px 0 rgba(43,42,38,.18); /* Z-index-skala (style-guide §2.6) */ --z-base: 0; --z-raised: 10; --z-header: 50; --z-dropdown: 100; --z-backdrop: 900; --z-modal: 1000; --z-toast: 1100; --z-consent: 2000; /* App-chrome-mål */ --bn-tabbar-h: 72px; color-scheme: light dark; /* native controls følger dag/nat */ } :root[data-theme="day"] { color-scheme: light; } :root[data-theme="night"] { color-scheme: dark; } /* Nat-tema (lun mørkegrøn - IKKE sort/hacker) */ :root[data-theme="night"] { --paper: #1f2a25; --panel: #2b3a32; --ink: #f1ead9; --muted: #aab3a8; --green: #8ed9b4; --green-deep: #7ccca4; --coral: #f2916f; --sky: #31433b; --soft: #2f4139; --border: #37473e; --card: #26332d; /* Bro: WP-preset-farver skifter OGSAA i nat, saa blok/plugin-komponenter (spotlight, compare, badges) tilpasser sig i stedet for at forblive lyse. */ --wp--preset--color--base: #26332d; --wp--preset--color--contrast: #f1ead9; --wp--preset--color--accent: #8ed9b4; --wp--preset--color--accent-deep: #a7e6c6; --wp--preset--color--soft: #2f4139; --wp--preset--color--coral: #f2916f; --wp--preset--color--sky: #31433b; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { --paper: #1f2a25; --panel: #2b3a32; --ink: #f1ead9; --muted: #aab3a8; --green: #8ed9b4; --green-deep: #7ccca4; --coral: #f2916f; --sky: #31433b; --soft: #2f4139; --border: #37473e; --card: #26332d; --wp--preset--color--base: #26332d; --wp--preset--color--contrast: #f1ead9; --wp--preset--color--accent: #8ed9b4; --wp--preset--color--accent-deep: #a7e6c6; --wp--preset--color--soft: #2f4139; --wp--preset--color--coral: #f2916f; --wp--preset--color--sky: #31433b; } } body { background: var(--paper); color: var(--ink); transition: background .35s ease, color .35s ease; } /* --- Sidehoved: venstrestillet masthead + blæk-regel --- */ .bn-header { position: sticky; top: 0; z-index: 50; background: transparent; transition: background .25s ease, box-shadow .25s ease; } /* Transparent i toppen; faar papir-flade naar man scroller (laesbarhed over indhold). */ .bn-header.is-scrolled { background: var(--paper); box-shadow: 0 2px 14px rgba(43,42,38,.06); } .bn-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); } .bn-logo__mark { flex: 0 0 auto; display: inline-flex; line-height: 0; } .bn-logo__mark img { display: block; width: 60px; height: auto; } .bn-logo__word { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.32rem; letter-spacing: -0.03em; line-height: 1; } /* Haandtegnet koral-hjerte som prik over i'et i ordmaerket (design-agent). Rigtig tekst forbliver "Trygt i Reden" (a.bn-logo har aria-label); hjertet er dekorativt. */ .bn-logo__word em { position: relative; font-style: normal; color: transparent; } .bn-logo__word em::before { content: "\0131"; position: absolute; inset: 0; color: var(--ink); } .bn-logo__word em::after { content: ""; position: absolute; left: 50%; top: -0.30em; width: .44em; height: .40em; transform: translateX(-50%); background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 20.5C2.5 13.8 2.2 6.4 7 4.3c2.6-1.1 4.4.5 5 1.9.6-1.4 2.4-3 5-1.9 4.8 2.1 4.5 9.5-5 16.2Z' fill='%23ee6c4d' stroke='%232b2a26' stroke-width='2.1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); } @media (max-width: 480px) { .bn-logo__word { font-size: 1.1rem; } .bn-logo__mark img { width: 50px; } } /* Navigation (statisk markup - ingen wp-block-navigation-oppustning) */ .bn-header .bn-desktop-nav a { font-weight: 600; font-size: .94rem; } .bn-header .bn-desktop-nav a:hover { color: var(--green-deep); } /* Dag/nat-knap */ .bn-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; /* WCAG touch-mål (style-guide §7) */ border: 1.5px solid var(--border); background: transparent; color: var(--muted); border-radius: 100px; padding: .42rem 1.15rem; font-size: .84rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .bn-theme-toggle:hover { border-color: var(--ink); color: var(--ink); } .bn-theme-toggle svg { width: 18px; height: 18px; } .bn-theme-toggle:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; } .bn-theme-toggle-wrap { display: flex; justify-content: center; margin: .3rem 0 1.4rem; } /* --- Brødkrummer --- */ .bn-breadcrumbs { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; } .bn-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; } .bn-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: .5rem; opacity: .5; } .bn-breadcrumbs a { color: inherit; text-decoration: none; } .bn-breadcrumbs a:hover { color: var(--green-deep); } /* --- Hero (redaktionel, asymmetrisk, luft; ingen kasse) --- */ .bn-hero { padding: clamp(2.2rem, 6vw, 5.5rem) 0 clamp(1.5rem, 4vw, 3.5rem); } .bn-hero__grid { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(1.2rem, 4vw, 3.5rem); max-width: 72rem; margin-inline: auto; } .bn-kicker { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: var(--green-deep); font-size: .98rem; margin: 0 0 1.1rem; } .bn-hero__title { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 1.2rem; } .bn-hero__lead { font-size: clamp(1.06rem, 2.2vw, 1.3rem); line-height: 1.6; color: var(--ink); max-width: 33rem; margin: 0 0 1.9rem; } .bn-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; } .bn-hero__art { position: relative; justify-self: end; } .bn-hero__art img { width: clamp(230px, 33vw, 380px); height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(43,42,38,.12)); } @media (max-width: 860px) { .bn-hero__grid { grid-template-columns: 1fr; gap: 1.2rem; } .bn-hero__art { order: -1; justify-self: start; } .bn-hero__art img { width: clamp(150px, 40vw, 220px); } } /* Mobil: side-luft saa fuld-bredde-sektioner + br'tekst ikke klistrer til kanten. */ @media (max-width: 680px) { .bn-hero, .bn-trustbar, .bn-hubwrap, .bn-guides-wrap { padding-left: 1.25rem; padding-right: 1.25rem; } .wp-block-post-content { padding-left: 1.25rem; padding-right: 1.25rem; } } /* --- Knapper (blaek-kant + tryk-offset ved hover) --- */ .bn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.6rem; font-weight: 800; text-decoration: none; border: 1.5px solid var(--ink); border-radius: 14px 4px 14px 4px; transition: transform .14s ease, box-shadow .14s ease; } .bn-btn--solid { background: var(--green); color: #fff; } .bn-btn--ghost { background: transparent; color: var(--ink); border-radius: 4px 14px 4px 14px; } .bn-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-press); } .bn-btn--solid:hover { color: #fff; } .bn-btn:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; } .bn-btn { touch-action: manipulation; } /* --- Web Interface Guidelines-polish (tilgaengelighed + typografi) --- */ h1, h2, h3, .bn-hero__title, .bn-hero__lead, .bn-hub-head h2, .bn-hub-card__title { text-wrap: balance; } .bn-hub-card { touch-action: manipulation; } .bn-hub-card:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; border-radius: 20px; } /* --- Emne-hub: redaktionelt magasin-layout, luftigt, bloede felter (ikke haarde kasser) --- */ .bn-hub-head { max-width: 42rem; margin: 0 0 clamp(1.8rem, 3.4vw, 2.8rem); } .bn-hub-head h2 { margin: 0 0 .5rem; } .bn-hub-head p { margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.55; } .bn-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.2vw, 2rem); } .bn-hub-card { position: relative; overflow: visible; display: flex; flex-direction: column; padding: 2.6rem 2.1rem 2.1rem; text-decoration: none; color: inherit; background: var(--card); border-radius: 20px; box-shadow: 0 1px 2px rgba(43,42,38,.05); transition: transform .2s ease, box-shadow .2s ease; } .bn-hub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); } .bn-hub-card__bird { display: block; } .bn-hub-card__bird img { width: 92px; height: auto; display: block; margin: -2.2rem 0 .8rem .1rem; } .bn-hub-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.42rem; margin: .2rem 0 .45rem; letter-spacing: -.02em; } .bn-hub-card__desc { font-size: .97rem; color: var(--muted); margin: 0; line-height: 1.55; } .bn-hub-card__go { margin-top: auto; padding-top: 1.2rem; font-weight: 800; color: var(--green-deep); font-size: .96rem; } .bn-hub-card__go::after { content: " \2192"; } /* Feature-felt (Soevn): stort, spaenner 2x2, rolig himmel-flade */ .bn-hub-card--feature { grid-column: span 2; grid-row: span 2; background: var(--sky); box-shadow: none; padding: 3rem 2.6rem 2.4rem; } .bn-hub-card--feature:hover { box-shadow: var(--shadow-soft); } .bn-hub-card--feature .bn-hub-card__bird img { width: 150px; margin: -3rem 0 1rem -.2rem; } .bn-hub-card--feature .bn-hub-card__title { font-size: 2.2rem; } .bn-hub-card--feature .bn-hub-card__desc { font-size: 1.1rem; max-width: 34ch; } @media (max-width: 860px) { .bn-hub { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .bn-hub-card--feature { grid-column: span 2; grid-row: span 1; } } @media (max-width: 560px) { .bn-hub { grid-template-columns: 1fr; } .bn-hub-card--feature { grid-column: span 1; } .bn-hub-card__bird img { width: 80px; margin-top: -1.8rem; } } /* Klynge-hub-header (emne-arkiv): varm panel + stor fugl + titel */ .bn-cluster-hero { background: var(--panel); border-radius: 24px 6px 24px 6px; padding: clamp(1.5rem, 3vw, 2.4rem); margin-bottom: clamp(1.8rem, 3vw, 2.6rem); } .bn-cluster-hero .bn-cluster-bird { display: inline-flex; flex: 0 0 auto; } .bn-cluster-hero .bn-cluster-bird img { width: clamp(88px, 12vw, 124px); height: auto; display: block; } .bn-cluster-hero .wp-block-query-title { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0; } .bn-cluster-hero .wp-block-term-description { color: var(--muted); margin: .45rem 0 0; max-width: 44ch; line-height: 1.55; } /* --- Tillids-baand (rene honning-cirkel-ikoner, luftigt, ikke tynde bokse) --- */ .bn-trustbar { margin-top: clamp(2.6rem, 5vw, 4rem); } .bn-trust { display: flex; flex-direction: column; gap: .45rem; padding: 0; height: 100%; border: 0; } .bn-trust__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--soft); color: var(--green-deep); margin-bottom: .55rem; } .bn-trust strong { font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; } .bn-trust span:last-child { font-size: .95rem; color: var(--muted); line-height: 1.55; } /* --- Nyeste guides (redaktionelle kort, ikke bar tekst) --- */ .bn-guides .wp-block-post-template { gap: clamp(1.1rem, 2vw, 1.8rem); } .bn-guides .wp-block-post { display: flex; flex-direction: column; background: var(--card); border-radius: 16px; padding: 1.6rem 1.5rem; box-shadow: 0 1px 2px rgba(43,42,38,.05); transition: transform .2s ease, box-shadow .2s ease; } .bn-guides .wp-block-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } .bn-guides .bn-guide-chip { font-size: .82rem; font-weight: 700; color: var(--green-deep); } .bn-guides .bn-guide-chip a { color: inherit; text-decoration: none; } .bn-guides .wp-block-post-title { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.16; margin: .45rem 0 .55rem; } .bn-guides .wp-block-post-title a { text-decoration: none; color: var(--ink); } .bn-guides .wp-block-post-title a:hover { color: var(--green-deep); } .bn-guides .wp-block-post-excerpt { margin: 0; } .bn-guides .wp-block-post-excerpt p { margin: 0; color: var(--muted); line-height: 1.55; } /* --- Byline (E-E-A-T) --- */ .bn-byline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin: .3rem 0 1.4rem; } .bn-byline strong { color: var(--ink); } .bn-byline a { color: var(--green-deep); } /* --- Hurtigt svar --- */ .bn-quickanswer { background: var(--sky); border: 1.5px solid var(--ink); border-radius: 16px 6px 16px 16px; padding: 1.4rem 1.6rem; margin: 1.6rem 0 2rem; font-size: 1.03rem; } .bn-quickanswer > *:first-child { margin-top: 0; } .bn-quickanswer > *:last-child { margin-bottom: 0; } .bn-quickanswer strong { color: var(--green-deep); } /* --- YMYL-note --- */ .bn-medical-note { font-size: .84rem; color: var(--muted); border: 1.5px dashed var(--border); border-radius: 14px; padding: .85rem 1.1rem; margin: 1.6rem 0; } /* ===== CONTENT-BREAKERS (scannbare artikel-moduler til lange sider) ===== */ h2[id], h3[id] { scroll-margin-top: 84px; } /* Hurtigt overblik (auto-TOC fra H2) */ .bn-toc { background: var(--soft); border-radius: 18px 6px 18px 6px; padding: 1.2rem 1.5rem; margin: 1.6rem 0 2.2rem; } .bn-toc__title { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1rem; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; color: var(--ink); } .bn-toc__title svg { color: var(--green-deep); } .bn-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 2rem; } .bn-toc li { margin: .32rem 0; break-inside: avoid; counter-increment: toc; } .bn-toc a { color: var(--green-deep); text-decoration: none; display: inline-flex; gap: .5rem; align-items: baseline; } .bn-toc a::before { content: counter(toc); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .bn-toc a:hover { color: var(--ink); } @media (max-width: 600px) { .bn-toc ol { columns: 1; } } /* Godt at vide (honning-tip) + Vaer opmaerksom (aerlig ulempe) */ .bn-tip, .bn-warn { padding: 1.2rem 1.4rem; margin: 1.9rem 0; border-radius: 16px 6px 16px 6px; } .bn-tip { background: color-mix(in srgb, var(--sun) 20%, var(--card)); } .bn-warn { background: color-mix(in srgb, var(--coral) 12%, var(--card)); border-radius: 6px 16px 6px 16px; } .bn-tip > :first-child, .bn-warn > :first-child { margin-top: 0; } .bn-tip > :last-child, .bn-warn > :last-child { margin-bottom: 0; } .bn-tip strong:first-child, .bn-warn strong:first-child { font-family: var(--wp--preset--font-family--display); } /* Naegletal / kort fortalt (stat-kort) */ .bn-keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 1rem; margin: 1.9rem 0; padding: 0; list-style: none; } .bn-keyfacts li { min-width: 0; background: var(--card); border-radius: 14px; padding: 1.15rem 1.25rem; box-shadow: 0 1px 2px rgba(43,42,38,.05); } .bn-keyfacts strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.75rem; color: var(--green-deep); line-height: 1; overflow-wrap: anywhere; } .bn-keyfacts span { display: block; font-size: .88rem; color: var(--muted); margin-top: .4rem; line-height: 1.4; overflow-wrap: anywhere; } @media (max-width: 380px) { .bn-keyfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Paginering: WCAG-tap-maal (mobil) */ .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .6rem; } /* Fugl-deler (haandtegnet content breaker mellem sektioner) */ .bn-divider { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 2.8rem auto; max-width: 30rem; } .bn-divider::before, .bn-divider::after { content: ""; flex: 1; height: 1.5px; background: var(--border); } .bn-divider picture { flex: 0 0 auto; display: inline-flex; line-height: 0; } .bn-divider img { display: block; width: 54px; height: auto; } /* --- Dekorative kant-fugle (kun stor desktop, i gutteren, bag indholdet). Laget er FULD DOKUMENTHOEJDE (body{position:relative} + inset:0/height:100%), saa fuglene fordeles ned ad HELE siden (top i %), ikke kun i toppen. Skjult som standard; vises kun naar 72rem-kolonnen efterlader nok gutter (>=1360px) → kan aldrig daekke tekst/CTA (offset >= fuglens bredde). pointer-events:none, overflow:hidden (ingen vandret scroll). Bevaegelse gates af reduced-motion. Kun paa enkelt-indlaeg (PHP: is_singular('post')). --- */ body { position: relative; } /* forankrer kant-fugle-laget til fuld sidehoejde */ .bn-edge-birds { display: none; } @media (min-width: 1360px) { .bn-edge-birds { display: block; position: absolute; inset: 0; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; } .bn-edge-bird { position: absolute; opacity: .42; will-change: transform; } .bn-edge-bird img { display: block; width: 100%; height: auto; } /* Skiftevis venstre/hoejre, top i % → fordelt over hele sidehoejden. Gutter-offset er altid >= fuglens bredde → altid fri af 72rem-kolonnen. */ .bn-edge-bird--p1 { top: 10%; left: calc((100vw - 72rem) / 2 - 100px); width: 82px; animation: bn-edge-float 9s ease-in-out infinite; } .bn-edge-bird--p2 { top: 26%; right: calc((100vw - 72rem) / 2 - 98px); width: 78px; animation: bn-edge-sway 11s ease-in-out infinite .8s; } .bn-edge-bird--p3 { top: 44%; left: calc((100vw - 72rem) / 2 - 104px); width: 88px; animation: bn-edge-float 10s ease-in-out infinite 1.6s; } .bn-edge-bird--p4 { top: 62%; right: calc((100vw - 72rem) / 2 - 100px); width: 80px; animation: bn-edge-sway 12s ease-in-out infinite .4s; } .bn-edge-bird--p5 { top: 80%; left: calc((100vw - 72rem) / 2 - 96px); width: 76px; animation: bn-edge-float 10.5s ease-in-out infinite 1.2s; } .bn-edge-bird--p6 { top: 92%; right: calc((100vw - 72rem) / 2 - 102px); width: 84px; animation: bn-edge-sway 9.5s ease-in-out infinite 2s; } } @media (min-width: 1600px) { .bn-edge-bird { opacity: .5; } } @keyframes bn-edge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes bn-edge-sway { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .bn-edge-bird { animation: none !important; } } /* --- Nyhedsbrev (flad grøn, ingen gradient) --- */ .bn-newsletter { background: var(--green-deep); color: #fff; border: 1.5px solid var(--ink); border-radius: 28px 8px 28px 8px; padding: 2.2rem 1.5rem; text-align: center; } :root[data-theme="night"] .bn-newsletter { color: #12201a; } .bn-newsletter h3 { color: inherit; margin: 0 0 .4rem; } .bn-newsletter p { color: inherit; opacity: .93; margin: 0 0 1rem; font-size: .95rem; } .bn-newsletter form { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; } .bn-newsletter input[type=email] { flex: 1 1 220px; min-height: 50px; padding: 0 1rem; border-radius: 12px 4px 12px 4px; border: 1.5px solid var(--ink); font-size: 1rem; } .bn-newsletter button { min-height: 50px; padding: 0 1.5rem; border: 1.5px solid var(--ink); border-radius: 4px 12px 4px 12px; background: var(--coral); color: #fff; font-weight: 800; cursor: pointer; } /* --- Nyhedsbrev-fugl (læser et brev) - blid, langsom, dag/nat-neutral --- Fast blæk-streg + creme fyld gør den læselig på både mørkegrøn (dag) og lysegrøn (nat) flade. */ .bn-nl-bird { width: 132px; height: auto; display: block; margin: 0 auto .5rem; overflow: visible; } .bn-nl-eye { transform-box: fill-box; transform-origin: center; animation: bn-nl-blink 5s ease-in-out infinite; } .bn-nl-tail { transform-box: fill-box; transform-origin: right center; animation: bn-nl-wag 4.5s ease-in-out infinite; } .bn-nl-page { transform-box: fill-box; transform-origin: left bottom; animation: bn-nl-flutter 3.8s ease-in-out infinite; } .bn-nl-sheet { transform-box: fill-box; transform-origin: 60% bottom; animation: bn-nl-rock 6s ease-in-out infinite; } @keyframes bn-nl-blink { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } } @keyframes bn-nl-wag { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } } @keyframes bn-nl-flutter { 0%,100% { transform: rotate(0deg); } 45% { transform: rotate(-17deg); } 70% { transform: rotate(-4deg); } } @keyframes bn-nl-rock { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(1.6deg); } } /* --- Dagens citat (under reden, rolig editorial serif) --- */ .bn-citat { margin: 0; padding: .3rem 1.2rem 2.6rem; text-align: center; background: var(--panel); } .bn-citat__label { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .82rem; color: var(--green-deep); margin: 0 0 .5rem; } .bn-citat__text { margin: 0 auto; max-width: 34rem; border: 0; padding: 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.08rem, 2.4vw, 1.38rem); line-height: 1.5; color: var(--ink); } .bn-citat__text .bn-citat__q { color: var(--green); } /* --- Header-nav polish (statisk ul: jaevn afstand, ren hover) --- */ .bn-header .bn-desktop-nav { margin-right: .9rem; } .bn-header .bn-desktop-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: clamp(.5rem, 1.5vw, 1.25rem); } .bn-header .bn-desktop-nav a { font-weight: 600; font-size: .95rem; padding: .25rem .1rem; text-decoration: none; color: var(--ink); } /* --- Sidefod --- */ .bn-footer { background: var(--panel); border-top: 1.5px solid var(--ink); font-size: .92rem; } .bn-footer a { color: var(--ink); text-decoration: none; } .bn-footer a:hover { color: var(--green-deep); } .bn-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } /* --- Cookie-samtykke (papir/ink-flade - ikke sort slab; style-guide §2.5) --- */ .bn-consent { position: fixed; inset: auto 1rem 1rem 1rem; z-index: var(--z-consent); max-width: 32rem; margin-inline: auto; background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 16px 6px 16px 16px; padding: 1rem 1.2rem; box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; gap: .8rem; } /* Løft banneret over bund-tab-baren på mobil, så det aldrig skjuler navigationen. */ @media (max-width: 820px) { .bn-consent { bottom: calc(var(--bn-tabbar-h) + env(safe-area-inset-bottom, 0px) + .6rem); } } .bn-consent__text { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink); } .bn-consent__text a { color: var(--green-deep); } .bn-consent__actions { display: flex; gap: .6rem; flex-wrap: wrap; } /* "Afvis alle" er lige så stor og let som "Accepter alle" (lovkrav). */ .bn-consent__btn { min-height: 46px; padding: 0 1rem; border-radius: 10px 4px 10px 4px; border: 1.5px solid var(--ink); font-weight: 700; cursor: pointer; font-size: .92rem; } .bn-consent__btn--reject, .bn-consent__btn--accept { flex: 1 1 8rem; } .bn-consent__btn--reject { background: transparent; color: var(--ink); } .bn-consent__btn--accept { background: var(--green); color: #fff; } .bn-consent__btn--ghost { flex: 0 1 auto; background: transparent; color: var(--muted); border-color: var(--border); } .bn-consent__btn--save { flex: 0 1 auto; background: var(--ink); color: var(--paper); } :root[data-theme="night"] .bn-consent__btn--accept { color: #12201a; } .bn-consent__btn:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; } /* Kategori-valg (granulaert samtykke, Datatilsynet 2025) */ .bn-consent__cats { display: grid; gap: .55rem; margin: .1rem 0 .2rem; } .bn-consent__cats[hidden] { display: none; } .bn-consent__cat { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; line-height: 1.45; color: var(--muted); cursor: pointer; } .bn-consent__cat input { margin: .12rem 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--green); } .bn-consent__cat strong { color: var(--ink); } /* --- Knapper (kerne) --- */ .wp-block-button__link { border: 2px solid var(--ink); } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; border-radius: 4px 14px 4px 14px !important; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--panel) !important; } /* --- Enkeltprodukt-skabelon --- */ .bn-single-product { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 720px) { .bn-single-product { grid-template-columns: 1fr 1fr; } } /* --- Animeret rede (footer-signatur: dag pipper, nat sover) --- */ .bn-nest { display: flex; justify-content: center; padding: 1rem 1rem 0; background: var(--panel); } .bn-nest__svg { width: 100%; max-width: 340px; height: auto; } .bn-nest .bn-night-only { display: none; } :root[data-theme="night"] .bn-nest .bn-day-only { display: none; } :root[data-theme="night"] .bn-nest .bn-night-only { display: block; } @keyframes bn-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes bn-bob2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes bn-chirp { 0%,86%,100% { transform: scaleY(1); } 90%,94% { transform: scaleY(1.9); } } @keyframes bn-breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.04); } } @keyframes bn-note { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(6px,-24px) scale(1); } } @keyframes bn-zfloat { 0% { opacity: 0; transform: translate(0,0) scale(.7); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(9px,-26px) scale(1.1); } } @keyframes bn-twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } } .bn-chick { transform-box: fill-box; transform-origin: center bottom; } .bn-c1 { animation: bn-bob 2.6s ease-in-out infinite; } .bn-c2 { animation: bn-bob2 2.9s ease-in-out infinite .3s; } .bn-c3 { animation: bn-bob 3.1s ease-in-out infinite .6s; } .bn-beak { transform-box: fill-box; transform-origin: center top; } .bn-b1 { animation: bn-chirp 3s ease-in-out infinite .2s; } .bn-b3 { animation: bn-chirp 3.4s ease-in-out infinite 1.4s; } .bn-note { animation: bn-note 3s ease-out infinite; } .bn-n2 { animation-delay: 1.6s; } .bn-twk { animation: bn-twinkle 3.4s ease-in-out infinite; } :root[data-theme="night"] .bn-c1, :root[data-theme="night"] .bn-c2, :root[data-theme="night"] .bn-c3 { animation: bn-breathe 4s ease-in-out infinite; } :root[data-theme="night"] .bn-zzz { animation: bn-zfloat 3.4s ease-out infinite; } .bn-z2 { animation-delay: 1.2s; } .bn-z3 { animation-delay: 2.2s; } @media (prefers-reduced-motion: reduce) { .bn-hub-card, .bn-header, body { transition: none; } .bn-chick, .bn-beak, .bn-note, .bn-zzz, .bn-twk { animation: none !important; } .bn-nl-eye, .bn-nl-tail, .bn-nl-page, .bn-nl-sheet { animation: none !important; } } /* ============================================================================ MOBIL-APP-CHROME (style-guide §4.10 · mobile-ux.md §2–3) Bund-tab-bar + klynge-ark + buy-bar. Alt kun på mobil/tablet (≤820px), desktop-nav uændret. Tokens fra §2, dag/nat automatisk, reduced-motion-sikret. ============================================================================ */ /* Desktop-nav skjules på mobil (bund-baren erstatter den ustylede WP-overlay). */ @media (max-width: 820px) { .bn-header .bn-desktop-nav { display: none !important; } /* Plads i bunden så indhold ikke gemmer sig bag den faste tab-bar. */ body { padding-bottom: calc(var(--bn-tabbar-h) + env(safe-area-inset-bottom, 0px)); } } /* --- Bund-tab-bar --- */ .bn-tabbar { position: fixed; inset: auto 0 0 0; z-index: var(--z-header); display: none; /* skjult på desktop */ grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--panel); border-top: 1.5px solid var(--ink); /* RT-1: blæk-kant binder alt */ padding-bottom: env(safe-area-inset-bottom, 0px); } @media (max-width: 820px) { .bn-tabbar { display: grid; } } .bn-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--bn-tabbar-h); padding: 7px 4px 9px; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 600; font-family: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .16s ease, transform .12s ease; } .bn-tab__icon { width: 25px; height: 25px; display: block; } .bn-tab__label { line-height: 1; } .bn-tab[aria-current="page"], .bn-tab.is-active { color: var(--green-deep); } .bn-tab[aria-current="page"] .bn-tab__icon { transform: translateY(-1px); } .bn-tab--accent { color: var(--coral); } /* nyhedsbrev = den ene pop */ .bn-tab:active { transform: translateY(1px); } .bn-tab:focus-visible { outline: 3px solid var(--green-deep); outline-offset: -3px; border-radius: 6px; } /* --- Klynge-ark ("Emner") - erstatter den ødelagte WP-overlay --- */ .bn-sheet { position: fixed; inset: 0; z-index: var(--z-dropdown); } .bn-sheet[hidden] { display: none; } .bn-sheet__backdrop { position: absolute; inset: 0; background: rgba(43,42,38,.45); } .bn-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 1.5px solid var(--ink); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); animation: bn-sheet-up .28s cubic-bezier(.22,.61,.36,1); max-height: 88vh; overflow-y: auto; } @keyframes bn-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .bn-sheet__grip { width: 40px; height: 4px; border-radius: 100px; background: var(--border); margin: 0 auto .6rem; } .bn-sheet__kicker { font-family: inherit; font-weight: 700; font-size: .9rem; margin: 0 0 .5rem; color: var(--muted); } .bn-sheet__list { list-style: none; margin: 0; padding: 0; } .bn-sheet__list a { display: flex; align-items: center; gap: .8rem; min-height: 58px; padding: .4rem .5rem; text-decoration: none; color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--border); } .bn-sheet__list li:last-child a { border-bottom: 0; } .bn-sheet__list a:active { background: var(--soft); } .bn-sheet__list a:focus-visible { outline: 3px solid var(--green-deep); outline-offset: -3px; border-radius: 8px; } .bn-sheet__list img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; } .bn-sheet__close { position: absolute; top: .5rem; right: .5rem; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer; } .bn-sheet__close:focus-visible { outline: 3px solid var(--green-deep); outline-offset: -3px; border-radius: 8px; } /* --- Sticky "Se pris"-buy-bar på money-pages (stakket OVER tab-baren) --- */ .bn-buybar { position: fixed; left: 0; right: 0; bottom: calc(var(--bn-tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-raised); display: none; align-items: center; gap: .75rem; background: var(--card); border-top: 1.5px solid var(--ink); padding: .55rem .9rem calc(.55rem); transform: translateY(120%); transition: transform .25s ease; } @media (max-width: 820px) { .bn-buybar.bn-buybar--ready { display: flex; } } .bn-buybar.is-visible { transform: translateY(0); } .bn-buybar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bn-buybar__label { font-size: .72rem; font-weight: 700; color: var(--muted); line-height: 1.1; } .bn-buybar__seller { font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bn-buybar__cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.1rem; background: var(--green); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; border: 1.5px solid var(--ink); border-radius: var(--corner-leaf); } :root[data-theme="night"] .bn-buybar__cta { color: #12201a; } .bn-buybar__cta:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; } .bn-buybar__close { flex: 0 0 auto; min-width: 40px; min-height: 44px; background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; } .bn-buybar__close:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; border-radius: 6px; } /* --- 404 (ælling ud af reden - style-guide §4.14) --- */ .bn-404 { text-align: center; padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40); } .bn-404__art { width: 100%; max-width: 260px; height: auto; margin: 0 auto 1.2rem; display: block; } .bn-404__title { font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6rem; } .bn-404__text { color: var(--muted); max-width: 34rem; margin: 0 auto 1.6rem; } .bn-404__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; } .bn-404__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.4rem; font-weight: 700; text-decoration: none; border: 1.5px solid var(--ink); } .bn-404__btn--primary { background: var(--green); color: #fff; border-radius: var(--corner-leaf); box-shadow: var(--shadow-press); } :root[data-theme="night"] .bn-404__btn--primary { color: #12201a; } .bn-404__btn--ghost { background: transparent; color: var(--ink); border-radius: var(--corner-wing); } .bn-404__btn:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; } .bn-404__code { font-size: .8rem; color: var(--muted); margin-top: 1.4rem; } .bn-duck-wing { transform-box: fill-box; transform-origin: center; animation: bn-duck-flutter 3.6s ease-in-out infinite; } @keyframes bn-duck-flutter { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } } /* Bløde sideovergange (progressive, reduced-motion-gated). */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { .bn-sheet__panel { animation: none; } .bn-tab:active { transform: none; } .bn-buybar { transition: none; } .bn-duck-wing { animation: none !important; } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* ======================================================================= >>> PRODUKT-CTA-MODUL (SEO-content-agent) <<< Genanvendeligt "foed money-siden"-kort med akvarel-fugl. Bruges paa info-/pillar-sider uden egne produkter, saa de leder mod money-sider. Pattern: themes/babynest/patterns/produkt-cta.php (markup .bn-productcta). Selvstaendig sektion, ingen afhaengigheder ud over eksisterende tokens. Hovedtraaden kan merge hele denne blok som den er. ======================================================================= */ .bn-productcta { display: flex; align-items: center; gap: 1.15rem; margin: 2rem 0; padding: 1.15rem 1.3rem; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--coral) 12%, transparent), transparent 55%), var(--soft); border: 1.5px solid var(--ink); border-radius: var(--corner-leaf); box-shadow: var(--shadow-press); position: relative; } .bn-productcta__bird { flex: 0 0 auto; width: 74px; height: 74px; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); } .bn-productcta__bird img { width: 58px; height: 58px; object-fit: contain; display: block; } .bn-productcta__body { flex: 1 1 auto; min-width: 0; } .bn-productcta__kicker { margin: 0 0 .15rem; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--coral); } .bn-productcta__title { margin: 0 0 .35rem; font-size: 1.18rem; line-height: 1.25; font-weight: 800; color: var(--ink); } .bn-productcta__text { margin: 0 0 .85rem; color: var(--muted); font-size: .95rem; line-height: 1.45; } .bn-productcta__btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1.35rem; background: var(--green); color: #fff; font-weight: 800; font-size: 1rem; text-decoration: none; border: 1.5px solid var(--ink); border-radius: var(--corner-wing); box-shadow: var(--shadow-press); transition: transform .12s ease, box-shadow .12s ease; } .bn-productcta__btn::after { content: "\2192"; font-weight: 700; } .bn-productcta__btn:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-press-lift); } .bn-productcta__btn:active { transform: translate(3px,3px); box-shadow: var(--shadow-press-active); } .bn-productcta__btn:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; } :root[data-theme="night"] .bn-productcta__btn { color: #12201a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .bn-productcta__btn { color: #12201a; } } /* Mobil: fuglen paa toppen, knap i fuld bredde for stoerre tap-target */ @media (max-width: 560px) { .bn-productcta { flex-direction: column; align-items: flex-start; text-align: left; gap: .8rem; padding: 1.1rem; } .bn-productcta__btn { width: 100%; box-sizing: border-box; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .bn-productcta__btn { transition: none; } } /* <<< PRODUKT-CTA-MODUL slut >>> */ /* ============================================================================ >>> MOBIL-UX-FINPUDS (mobil-ux-agent) <<< Native/app-fornemmelse: roligere vertikal rytme paa mobil, tap-feedback, momentum-scroll, ingen tap-delay/flash. KUN app.css. Alt der bevaeger sig er gated af prefers-reduced-motion. Isoleret blok -> nem merge. NB: den overordnede sektions-luft strammes af fluid spacing-tokens i theme.json (spacing 50/60/70 -> clamp: desktop uaendret, mobil strammere); her finjusterer vi kun modul-rytme + interaktion. ============================================================================ */ /* --- Global native-polish (sikker paa alle skaerme) --- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Bloed in-page-scroll (TOC-spring/anker) - foeles native. Reduced-motion slaar fra nedenfor. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Fjern graa tap-flash; vi leverer egen :active/:focus-feedback. */ a, button, summary, label, .bn-hub-card, .bn-guides .wp-block-post { -webkit-tap-highlight-color: transparent; } /* Draeb 300ms tap-delay paa interaktive flader (double-tap-zoom unoedvendig her). */ a, button, summary, .bn-hub-card, .bn-guides .wp-block-post, .bn-buybar__cta, .bn-consent__btn, .bn-sheet__list a { touch-action: manipulation; } /* --- Momentum + scroll-indeslutning (ingen scroll-chaining bag ark/tabeller) --- */ .bn-sheet__panel { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .wp-block-table, figure.wp-block-table, .bn-tablewrap, .bn-compare-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* --- Tap-feedback: fysisk "tryk" paa touch (hvor der ingen hover er) --- */ @media (hover: none) and (pointer: coarse) { .bn-hub-card { transition: transform .13s ease, box-shadow .13s ease; } .bn-hub-card:active { transform: scale(.985); } .bn-guides .wp-block-post { transition: transform .13s ease, box-shadow .13s ease; } .bn-guides .wp-block-post:active { transform: scale(.99); box-shadow: var(--shadow-soft); } .bn-btn:active { transform: translate(1px, 1px); box-shadow: var(--shadow-press-active); } .bn-theme-toggle:active { transform: translateY(1px); } .bn-buybar__cta:active { transform: translateY(1px); } .bn-consent__btn:active { transform: translateY(1px); } .bn-breadcrumbs a:active, .bn-footer a:active, .bn-guides .wp-block-post-title a:active { color: var(--green-deep); } } /* --- Mobil vertikal finpuds (stram lokal overdreven luft) --- */ @media (max-width: 560px) { .bn-divider { margin: 2rem auto; } /* var 2.8rem: roligere paa lille skaerm */ .bn-hero { padding-top: clamp(1.8rem, 5vw, 2.6rem); } /* mindre daad-luft under det tynde sidehoved */ } /* --- Reduced-motion: sluk mine tap-transforms + smooth-scroll --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bn-hub-card:active, .bn-guides .wp-block-post:active, .bn-btn:active, .bn-theme-toggle:active, .bn-buybar__cta:active, .bn-consent__btn:active { transform: none; } } /* <<< MOBIL-UX-FINPUDS slut >>> */ /* ======================================================================= >>> SOEGE-OVERLAY (soege-agent) <<< App-agtigt instant-AJAX-soegeoverlay. Fuldskaerms-ark paa mobil, centreret panel paa desktop. GPU-animationer (transform/opacity), reduced-motion-gated. On-brand: papir + blaek, groen fokus, bloede hjoerner. Markup + JS: functions.php ("SOEGE-OVERLAY"-wp_footer-hook). Selvstaendig sektion - kun eksisterende tokens. Hovedtraaden kan merge blokken som den er. ======================================================================= */ /* Desktop soege-ikon i headeren (skjules < 820px - mobil bruger tab-baren). */ .bn-header-search { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--ink); border-radius: var(--r-sm); -webkit-tap-highlight-color: transparent; transition: color .16s ease; } .bn-header-search:hover { color: var(--green-deep); } .bn-header-search__icon { width: 24px; height: 24px; display: block; } .bn-header-search:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; } @media (max-width: 820px) { .bn-header-search { display: none; } } /* Overlay-rod + backdrop */ .bn-search { position: fixed; inset: 0; z-index: var(--z-modal); } .bn-search[hidden] { display: none; } .bn-search__backdrop { position: absolute; inset: 0; background: rgba(43,42,38,.5); opacity: 0; transition: opacity .22s ease; will-change: opacity; } .bn-search.is-open .bn-search__backdrop { opacity: 1; } /* Panel: mobil = fuldskaerms-ark fra toppen */ .bn-search__panel { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; max-height: 100dvh; height: 100dvh; background: var(--paper); border-bottom: 1.5px solid var(--ink); padding: calc(.9rem + env(safe-area-inset-top, 0px)) 1rem 1rem; opacity: 0; transform: translateY(-14px); transition: opacity .24s ease, transform .24s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .bn-search.is-open .bn-search__panel { opacity: 1; transform: none; } /* Soegefelt-raekke */ .bn-search__form { display: flex; align-items: center; gap: .55rem; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--corner-leaf); padding: .3rem .4rem .3rem .8rem; box-shadow: var(--shadow-press); } .bn-search__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); } .bn-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink); min-height: 44px; padding: 0; } .bn-search__input::placeholder { color: var(--muted); font-weight: 500; } .bn-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .bn-search__close { flex: 0 0 auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--muted); border-radius: var(--r-sm); } .bn-search__close:hover { color: var(--ink); } .bn-search__close:focus-visible { outline: 3px solid var(--green-deep); outline-offset: -2px; } /* Status + hint */ .bn-search__status { margin: .8rem .2rem .2rem; font-size: .82rem; font-weight: 700; color: var(--muted); min-height: 1.1em; } .bn-search__status:empty { display: none; } .bn-search__hint { margin: .4rem .2rem 0; font-size: .78rem; color: var(--muted); } /* Resultatliste */ .bn-search__results { list-style: none; margin: .3rem 0 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; } .bn-search__results:not(:empty) + .bn-search__hint, .bn-search__results:not(:empty) ~ .bn-search__hint { display: none; } .bn-search__result { margin: 0; } .bn-search__result > a { display: block; text-decoration: none; color: var(--ink); padding: .7rem .8rem; border-radius: var(--r-md); border: 1.5px solid transparent; } .bn-search__result + .bn-search__result { margin-top: .25rem; } .bn-search__result.is-active > a, .bn-search__result > a:hover { background: var(--soft); border-color: var(--border); } .bn-search__result.is-active > a { border-color: var(--green); } .bn-search__result-kind { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--green-deep); margin-bottom: .15rem; } .bn-search__result-title { display: block; font-weight: 800; font-size: 1rem; line-height: 1.3; } .bn-search__result-excerpt { display: block; margin-top: .2rem; font-size: .85rem; line-height: 1.4; color: var(--muted); } /* Desktop: centreret panel i stedet for fuldskaerms-ark */ @media (min-width: 821px) { .bn-search__panel { left: 50%; right: auto; top: 12vh; width: min(620px, calc(100vw - 3rem)); height: auto; max-height: 76vh; transform: translateX(-50%) translateY(-14px); border: 1.5px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--shadow-overlay); padding: 1rem 1.1rem 1.1rem; } .bn-search.is-open .bn-search__panel { transform: translateX(-50%); } } /* Reduced-motion: ingen transform-bevaegelse, kun blank paa/af. */ @media (prefers-reduced-motion: reduce) { .bn-search__panel { transition: opacity .12s ease; transform: none; } .bn-search.is-open .bn-search__panel { transform: none; } .bn-search__backdrop { transition: none; } @media (min-width: 821px) { .bn-search__panel { transform: translateX(-50%); } .bn-search.is-open .bn-search__panel { transform: translateX(-50%); } } } /* <<< SOEGE-OVERLAY slut >>> */ /* ============================================================================ >>> VISUELLE LISTER (mindre "dokument-agtigt", ikke bare sorte prikker) <<< Content-bullets faar honning/groent marker; pro/con-lister med ikon-badges. Bruges af redaktionelle money-sider: