/** * Fælles prototype-navigation — grøn bar til hurtigt at skifte mellem statiske templates. * Indlæs sammen med prototype-kit.js (første element i anbefales). */ :root { --pk-teal: #1a7a72; --pk-teal-mid: #239688; --pk-teal-light: #e6f5f3; /* Fallback indtil prototype-kit.js har målt den rigtige højde (bar kan blive højere ved wrap) */ --pk-h: 80px; } html.has-prototype-kit { --prototype-kit-h: var(--pk-h); } .prototype-kit-strip { position: sticky; top: 0; z-index: 99999; min-height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; padding: 10px 20px; font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.95); background: linear-gradient(105deg, #145a54 0%, var(--pk-teal-mid) 42%, #1fa090 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 4px 18px rgba(13, 74, 68, 0.35); } .prototype-kit-strip__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); white-space: nowrap; } .prototype-kit-strip__badge svg { opacity: 0.9; flex-shrink: 0; } .prototype-kit-strip__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; width: 100%; max-width: 1280px; } .prototype-kit-strip__meta { flex: 1 1 200px; min-width: 0; line-height: 1.35; } .prototype-kit-strip__meta strong { color: #fff; font-weight: 700; } .prototype-kit-strip__switch { flex: 1 1 280px; max-width: min(480px, 100%); } .prototype-kit-strip__label { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 4px; } .prototype-kit-strip__select { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; font-weight: 600; color: #0f2f2c; background: #fff; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 10px; padding: 9px 12px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .prototype-kit-strip__select:hover { border-color: #fff; } .prototype-kit-strip__select:focus { outline: none; border-color: #f2cb68; box-shadow: 0 0 0 3px rgba(242, 203, 104, 0.35); } .prototype-kit-strip__portal { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #0f2f2c; background: #f2cb68; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.06); white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s; } .prototype-kit-strip__portal:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); color: #1a1510; } .prototype-kit-strip__toggle { flex-shrink: 0; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.12); color: #fff; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .prototype-kit-strip__toggle:hover { background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.7); } html.prototype-kit-hidden .prototype-kit-strip { display: none !important; } html.prototype-kit-hidden { --prototype-kit-h: 0px !important; } .prototype-kit-fab { position: fixed; bottom: 18px; right: 18px; z-index: 100000; display: none; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: none; background: linear-gradient(105deg, #145a54 0%, var(--pk-teal-mid) 100%); color: #fff; font-size: 12.5px; font-weight: 800; font-family: system-ui, "Segoe UI", Roboto, sans-serif; cursor: pointer; box-shadow: 0 8px 28px rgba(13, 74, 68, 0.45); } .prototype-kit-fab:hover { filter: brightness(1.06); } html.prototype-kit-hidden .prototype-kit-fab:not([hidden]) { display: inline-flex; } @media (max-width: 720px) { .prototype-kit-strip { padding: 10px 14px; align-items: stretch; } .prototype-kit-strip__inner { flex-direction: column; align-items: stretch; } .prototype-kit-strip__portal { justify-content: center; } } /* Sommerhus-demo: to sticky rækker (kit + salgsnav) må ikke overlappe */ html.has-prototype-kit body.page-demo .top-nav { top: var(--prototype-kit-h); } html.has-prototype-kit body.page-demo .section-nav { top: calc(var(--prototype-kit-h) + var(--nav-h)); } html.has-prototype-kit body.page-demo { scroll-padding-top: calc(var(--prototype-kit-h) + var(--nav-h) + var(--subnav-h) + 12px); } /* Medarbejderportal: undgå at den interne header kolliderer med prototype-baren */ html.has-prototype-kit .staff-bar { top: var(--prototype-kit-h); } /* Gæsteportal: sidebaren er position:fixed; top:0 — uden offset ligger logoet under prototype-baren */ html.has-prototype-kit .sidebar { top: var(--prototype-kit-h); height: calc(100vh - var(--prototype-kit-h)); } html.has-prototype-kit .mobile-header { top: var(--prototype-kit-h); } @media (max-width: 1024px) { html.has-prototype-kit .main-content { padding-top: calc(72px + var(--prototype-kit-h)); } } /* PLUS-side: sticky højresøjle under prototype-baren */ html.has-prototype-kit .signup-page .perks-side { top: calc(24px + var(--prototype-kit-h)); }