/* ======================================================= Modern styling for: .page_login AND .page_front AND .page_confirm Drop-in overrides (Bootstrap 3 + sb-admin friendly) ======================================================= */ :root{ --bg: #0b1220; --card: rgba(255,255,255,.92); --card2: rgba(255,255,255,.86); --cardBorder: rgba(255,255,255,.25); --text: #0f172a; --muted: #475569; --accent: #00acd4; --accent2: #80808d; --shadow: 0 18px 55px rgba(0,0,0,.22); --shadow2: 0 12px 40px rgba(0,0,0,.16); --radius: 18px; --radius2: 14px; } html, body{ height:100%; } body.page_login, body.page_front, body.page_confirm{ font-family: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 700px at 15% 10%, rgba(190, 220, 240, 0.55), transparent 65%), radial-gradient(900px 600px at 85% 15%, rgba(200, 230, 245, 0.45), transparent 60%), radial-gradient(900px 700px at 50% 95%, rgba(215, 235, 250, 0.40), transparent 65%), linear-gradient(180deg, #f7fafc 0%, #e9f0f6 70%); background-attachment: fixed; padding: 28px 20px; } .page_login .container, .page_front .container, .page_confirm .container{ max-width: 980px; padding: 20px; } .page_login .col-lg-10.col-lg-offset-1, .page_front .col-lg-10.col-lg-offset-1, .page_confirm .col-lg-10.col-lg-offset-1{ float: none; margin: 0 auto; width: 100%; max-width: 860px; } /* ========================= Header card + typography ========================= */ .page_login .page-header, .page_front .page-header, .page_confirm .page-header{ margin: 0 0 14px 0; padding: 0; border: 0; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; position: relative; padding-top: 22px; /* room for badge */ } .page_login .row .col-lg-10, .page_front .row .col-lg-10, .page_confirm .row .col-lg-10{ background: var(--card); border: 1px solid var(--cardBorder); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; backdrop-filter: blur(10px); position: relative; margin-bottom: 20px; } /* Paragraphs */ .page_login p, .page_front p, .page_confirm p{ color: var(--muted); font-size: 16px; line-height: 1.55; margin: 10px 0; } .page_login p i, .page_confirm p i{ font-style: normal; font-weight: 700; color: #111827; padding: 0 .25em; border-radius: 8px; background: rgba(0,172,212,.10); } /* ========================= Badge above h1 (all pages) ========================= */ /* Optional: If you later add it will use that */ body.page_login[data-badge] .page-header::before, body.page_front[data-badge] .page-header::before, body.page_confirm[data-badge] .page-header::before{ content: attr(data-badge); } /* Badge må ALDRIG blokere klik */ .page_login .page-header::before, .page_front .page-header::before, .page_confirm .page-header::before{ pointer-events: none; } /* ========================= Secondary content card (page_front area with accordion) ========================= */ .page_front .row:nth-of-type(2) .col-lg-10.col-lg-offset-1{ background: var(--card2); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); box-shadow: var(--shadow2); padding: 18px 22px 22px 22px; margin-top: 14px; backdrop-filter: blur(10px); } /* Logout button: more modern */ .page_front a.btn.btn-primary.pull-right{ border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 800; background: rgba(15,23,42,.90); box-shadow: 0 10px 22px rgba(0,0,0,.16); position: relative; z-index: 5; /* Sørg for at logout-knappen ligger "øverst" og kan klikkes */ } .page_front a.btn.btn-primary.pull-right:hover{ background: rgba(15,23,42,.98); } /* ========================= Alerts (bootstrap 3) ========================= */ .page_front .alert{ border: 0; border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.10); padding: 14px 16px; } .page_front .alert-success{ background: rgba(34,197,94,.14); color: #0f172a; } .page_front .alert .close{ opacity: .55; right: 0px !important; } .page_front .alert .close:hover{ opacity: .9; } /* ========================= Accordion / Panels ========================= */ .page_front .panel-group{ margin-top: 14px; } .page_front .panel{ border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.10); background: rgba(255,255,255,.85); margin-bottom: 12px; } .page_front .panel-heading{ background: rgba(255,255,255,.92); border: 0; padding: 0; } .page_front .panel-title a{ display: block; padding: 14px 16px; font-weight: 800; color: #0f172a; text-decoration: none; position: relative; } .page_front .panel-title a::after{ content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: .6; font-size: 16px; } /* when collapsed -> rotate arrow (Bootstrap 3 adds "collapsed" class) */ .page_front .panel-title a.collapsed::after{ content: "▸"; } .page_front .panel-body{ border-top: 1px solid rgba(148,163,184,.35); padding: 14px 16px 16px 16px; background: rgba(255,255,255,.80); } .page_front .panel-body p{ margin-top: 0; font-size: 14px; } /* ========================= Booking buttons (btn-info) ========================= */ .page_front .btn.btn-info.bookbtn{ border: 0; border-radius: 999px; padding: 10px 14px; font-weight: 800; background: rgba(0,172,212,.14); color: #0f172a; box-shadow: 0 8px 18px rgba(0,0,0,.10); transition: transform .08s ease, box-shadow .15s ease, filter .15s ease; } .page_front .btn.btn-info.bookbtn:hover{ filter: brightness(1.02); box-shadow: 0 10px 24px rgba(0,0,0,.14); } .page_front .btn.btn-info.bookbtn:active{ transform: translateY(1px); } /* Make buttons wrap nicely */ .page_front .panel-body{ display: flex; flex-wrap: wrap; gap: 8px; } .page_front .panel-body p{ flex: 0 0 100%; } /* ========================= Form controls + success button (modal too) ========================= */ .page_front .form-control, .page_login .form-control, .page_confirm .form-control{ height: 48px; border-radius: 12px; border: 1px solid rgba(148,163,184,.55); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; font-size: 16px; padding: 12px 14px; background: rgba(255,255,255,.95); } .page_front textarea.form-control, .page_confirm textarea.form-control{ height: auto; min-height: 110px; padding: 12px 14px; } .page_front .form-control:focus, .page_login .form-control:focus, .page_confirm .form-control:focus{ border-color: rgba(0,172,212,.85); box-shadow: 0 0 0 4px rgba(0,172,212,.18); outline: none; } .page_front .btn.btn-success, .page_login .btn.btn-success, .page_confirm .btn.btn-success, .page_front .btn-info, .page_confirm .btn-info{ width: 100%; height: 48px; border-radius: 12px; border: 0; font-weight: 800; letter-spacing: .02em; font-size: 16px; margin-top: 6px; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 12px 26px rgba(0,0,0,.18); } .page_front .btn.btn-success:hover, .page_login .btn.btn-success:hover, .page_confirm .btn.btn-success:hover{ filter: brightness(1.03); box-shadow: 0 14px 34px rgba(0,0,0,.22); } .page_front .btn.btn-default, .page_confirm .btn.btn-default{ border-radius: 12px; border: 0; background: rgba(15,23,42,.08); font-weight: 800; } /* ========================= Modal (Bootstrap 3) ========================= */ .page_front .modal-content, .page_confirm .modal-content{ border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.35); } .page_front .modal-header, .page_confirm .modal-header{ border: 0; background: radial-gradient(900px 280px at 20% 20%, rgba(0,172,212,.25), transparent 60%), radial-gradient(700px 260px at 90% 20%, rgba(34,197,94,.18), transparent 60%), rgba(255,255,255,.96); } .page_front .modal-title, .page_confirm .modal-title{ font-weight: 900; letter-spacing: -0.01em; } .page_front .modal-body, .page_confirm .modal-body{ background: rgba(255,255,255,.95); } .page_front .modal-footer, .page_confirm .modal-footer{ border: 0; background: rgba(255,255,255,.92); } /* ========================= Links ========================= */ .page_front a, .page_confirm a{ color: rgba(0,172,212,.95); font-weight: 700; } .page_front a:hover, .page_confirm a:hover{ color: rgba(34,197,94,.95); text-decoration: none; } /* ========================= Small screens ========================= */ @media (max-width: 768px){ body.page_login, body.page_front, body.page_confirm{ padding: 16px 0; } .page_login .row:first-of-type .col-lg-10.col-lg-offset-1, .page_front .row:first-of-type .col-lg-10.col-lg-offset-1, .page_confirm .row:first-of-type .col-lg-10.col-lg-offset-1, .page_front .row:nth-of-type(2) .col-lg-10.col-lg-offset-1{ padding: 16px; border-radius: 16px; } .page_front a.btn.btn-primary.pull-right{ margin-top: 10px !important; width: 100%; float: none !important; } } /* Bootstrap modal/backdrop stacking fix */ .modal{ z-index: 1060; } .modal-backdrop{ z-index: 1050; } .modal-dialog, .modal-content{ position: relative; z-index: 1070; } /* Hvis backdrop-filter driller modals/klik, så slå det fra på wrappers */ .page_front .row:first-of-type .col-lg-10.col-lg-offset-1, .page_front .row:nth-of-type(2) .col-lg-10.col-lg-offset-1, .page_confirm .row:first-of-type .col-lg-10.col-lg-offset-1{ backdrop-filter: none; } .alert-dismissible .close { right: 0px !important; }