/* AgreeO stage-gate · login-side. Brandes via CSS custom props sat i . */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Chrome anvender ikke UA-reglen for [hidden] på inline-SVG — håndhæv den */ [hidden] { display: none !important; } html { height: 100%; } body { min-height: 100dvh; font-family: var(--font-body); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; } /* ---------- Animeret baggrund: drivende brandfarvede blobs ---------- */ .gate-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; } .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.32; will-change: transform; } .blob-1 { width: 55vw; height: 55vw; min-width: 420px; min-height: 420px; background: var(--blob-1); top: -18%; left: -12%; animation: drift-1 60s ease-in-out infinite alternate; } .blob-2 { width: 45vw; height: 45vw; min-width: 360px; min-height: 360px; background: var(--blob-2); bottom: -20%; right: -10%; animation: drift-2 75s ease-in-out infinite alternate; } .blob-3 { width: 35vw; height: 35vw; min-width: 300px; min-height: 300px; background: var(--blob-3); top: 45%; left: 55%; animation: drift-3 90s ease-in-out infinite alternate; } @keyframes drift-1 { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(12vw, 8vh, 0) scale(1.15); } to { transform: translate3d(4vw, 16vh, 0) scale(0.95); } } @keyframes drift-2 { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-10vw, -10vh, 0) scale(1.1); } to { transform: translate3d(-16vw, 2vh, 0) scale(1.2); } } @keyframes drift-3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-18vw, -14vh, 0) scale(1.25); } } /* Lys wash over blobs, så tekstkontrast aldrig påvirkes */ .gate-bg::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 55%, transparent); } /* ---------- Layout ---------- */ .gate-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px 16px; } /* ---------- Kort ---------- */ .gate-card { width: 100%; max-width: 420px; background: color-mix(in srgb, #ffffff 82%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid color-mix(in srgb, var(--border) 70%, #ffffff); border-radius: min(var(--radius), 24px); box-shadow: 0 1px 2px rgba(8, 6, 13, 0.04), 0 12px 40px -8px rgba(8, 6, 13, 0.12), 0 32px 80px -24px color-mix(in srgb, var(--brand-primary) 22%, transparent); animation: card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .gate-card-inner { padding: 44px 40px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; } @keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Staggered entrance af kortets indhold */ .stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5, .stagger-6 { animation: fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .stagger-1 { animation-delay: 0.08s; } .stagger-2 { animation-delay: 0.16s; } .stagger-3 { animation-delay: 0.24s; } .stagger-4 { animation-delay: 0.32s; } .stagger-5 { animation-delay: 0.4s; } .stagger-6 { animation-delay: 0.55s; } @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Brand / badge / tekst ---------- */ .gate-brand { margin-bottom: 20px; } .gate-logo { display: block; max-width: 220px; height: auto; max-height: 64px; } .gate-wordmark { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); } .gate-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); color: var(--brand-primary-dark); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; } h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 10px; } .gate-intro { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; max-width: 32ch; margin-bottom: 26px; } .gate-intro code { font-size: 0.875em; background: color-mix(in srgb, var(--border) 40%, transparent); padding: 2px 6px; border-radius: 6px; } /* ---------- Fejl ---------- */ .gate-error { width: 100%; color: #b3261e; background: rgba(179, 38, 30, 0.07); border: 1px solid rgba(179, 38, 30, 0.25); border-radius: min(var(--radius), 12px); font-size: 0.875rem; padding: 10px 14px; margin-bottom: 18px; } /* ---------- Formular ---------- */ .gate-form { width: 100%; display: flex; flex-direction: column; gap: 18px; } .gate-field { text-align: left; display: flex; flex-direction: column; gap: 7px; } .gate-field label { font-size: 0.8125rem; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; } .gate-input-wrap { position: relative; } .gate-input-wrap input { width: 100%; height: 52px; padding: 0 52px 0 18px; font: inherit; font-size: 1rem; color: var(--ink); background: #ffffff; border: 1.5px solid var(--border); border-radius: min(var(--radius), 16px); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .gate-input-wrap input:hover { border-color: color-mix(in srgb, var(--border) 40%, var(--muted)); } .gate-input-wrap input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 16%, transparent); } .gate-input-wrap input[aria-invalid='true'] { border-color: #b3261e; } .gate-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 10px; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .gate-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--border) 45%, transparent); } /* ---------- Submit-knap ---------- */ .gate-submit { position: relative; height: 54px; border: 0; border-radius: var(--radius); background: var(--brand-primary); color: #ffffff; font: inherit; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; display: grid; place-items: center; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, background-color 0.25s ease; } .gate-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--brand-primary) 55%, transparent); } .gate-submit:active { transform: translateY(0) scale(0.99); box-shadow: none; } .gate-submit:disabled { cursor: default; opacity: 0.85; } .gate-submit-check { position: absolute; opacity: 0; } .gate-submit-check .check-path { stroke-dasharray: 26; stroke-dashoffset: 26; } /* Ventende (JS): pulserende label */ .gate-form.is-pending .gate-submit-label { animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Succes (JS): label ud, checkmark tegnes, mørkere brandfarve */ .gate-form.is-success .gate-submit { background: var(--brand-primary-dark); } .gate-form.is-success .gate-submit-label { opacity: 0; transition: opacity 0.15s ease; } .gate-form.is-success .gate-submit-check { opacity: 1; transition: opacity 0.1s ease 0.1s; } .gate-form.is-success .gate-submit-check .check-path { animation: draw-check 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; } @keyframes draw-check { to { stroke-dashoffset: 0; } } /* Fejl-shake (JS) */ .gate-card.is-shaking { animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } /* ---------- Focus (tastatur) ---------- */ :focus-visible { outline: 2px solid var(--brand-primary-dark); outline-offset: 2px; } /* ---------- Footer: diskret AgreeO-reference ---------- */ .gate-footer { padding-bottom: 8px; } .gate-agreeo { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--muted); text-decoration: none; opacity: 0.6; transition: opacity 0.2s ease; } .gate-agreeo:hover { opacity: 1; } .gate-agreeo img { display: block; } /* ---------- Mobil ---------- */ @media (max-width: 480px) { .gate-card-inner { padding: 36px 24px 32px; } h1 { font-size: 1.3125rem; } } /* ---------- Reduceret bevægelse ---------- */ @media (prefers-reduced-motion: reduce) { .blob { animation: none; } .gate-card, .stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5, .stagger-6 { animation-duration: 0.01ms; animation-delay: 0s; } .gate-card.is-shaking { animation: none; } .gate-submit, .gate-input-wrap input { transition: none; } }