/* ============================================================ RELIS "Still spørsmål" — form styling. Self-contained: the base rules are carried over from the Skisse 1 mockup (forside-skisser-k7m2qd9x/demo.css), which is a static page and does not load on the real site. Everything is scoped to .relis-* so it cannot disturb Avada or Elementor styles. ============================================================ */ .relis-redesign{ --relis-blue:#00539c; --relis-blue-dark:#003e75; --relis-slate:#364d57; --relis-line:#e0e6ea; --relis-muted:#5b6b73; --relis-error:#cf2e2e; width:100%; flex-basis:100%; max-width:820px; padding-top:63px; } /* Hides the stock Elementor hero (search box + "Still spørsmål" link) until form.js mounts the two-card version, so a hard refresh shows nothing there rather than a flash of the old markup. The `relis-hero-pending` class is added by a synchronous inline script in (class-frontpage.php::anti_fouc_script) and removed the instant form.js mounts — see the JS-disabled/failure notes there. */ html.relis-hero-pending .elementor-element-2ad23e5 .elementor-widget-wrap{ visibility:hidden; } /* Vertical placement of the hero block. The mockup carried an empty

above the cards purely for spacing; its margins pushed the cards ~30px further down than the padding above accounts for. An empty heading is announced by screen readers, so rather than reproducing one the offset is expressed here as padding — which is why the cards need more than the expanded form, whose own box supplies the difference. Tune these two numbers to move each state independently. */ .relis-redesign-cards{ padding-top:93px; } /* On a phone the column is full width with nothing beside it to line up against, so the desktop offset just pushes the content off the first screen. */ @media(max-width:780px){ .relis-redesign, .relis-redesign-cards{ padding-top:16px; } } /* ---------- buttons ---------- */ .relis-redesign .relis-btn-primary, .relis-redesign .relis-btn-outline{ display:inline-block; font-family:inherit; font-weight:600; font-size:1.02em; line-height:1.2; padding:13px 22px; border-radius:7px; cursor:pointer; border:2px solid var(--relis-blue); text-decoration:none; transition:all .15s ease; } .relis-redesign .relis-btn-primary{ background:var(--relis-blue); color:#fff; } .relis-redesign .relis-btn-primary:hover{ background:var(--relis-blue-dark); border-color:var(--relis-blue-dark); color:#fff; text-decoration:none; } .relis-redesign .relis-btn-primary[disabled]{ opacity:.65; cursor:progress; } .relis-redesign .relis-btn-outline{ background:#fff; color:var(--relis-blue); } .relis-redesign .relis-btn-outline:hover{ background:#eef4fa; color:var(--relis-blue-dark); text-decoration:none; } /* ---------- two cards ---------- */ .relis-dual{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .relis-card{ background:#fff; border:1px solid var(--relis-line); border-radius:10px; padding:22px; box-shadow:0 1px 3px rgba(20,40,55,.06); transition:transform .15s,box-shadow .15s; display:flex; flex-direction:column; } .relis-card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(20,40,55,.12); } .relis-card-ask{ background:linear-gradient(180deg,#fbfdff,#fff); } .relis-card-title{ color:var(--relis-slate); font-size:1.15em; margin:0 0 6px; } .relis-card-sub{ color:var(--relis-slate); font-size:.96em; line-height:1.5; margin:0 0 16px !important; flex:1; } .relis-card .relis-btn-primary{ text-align:center; } .relis-hero-search{ margin:0; padding:0; border:0; } .relis-hero-search input{ width:100%; padding:14px 18px; font-size:1.1em; border:2px solid var(--relis-blue); border-radius:7px; outline:none; box-sizing:border-box; margin:0; background:#fff; display:block; } .relis-hero-search input::placeholder{ font-size:.85em; color:#000; opacity:.4; } @media(max-width:780px){ .relis-dual{ grid-template-columns:1fr; } } /* ---------- expanded ask box ---------- */ .relis-askbox{ background:#fff; border:1px solid var(--relis-line); border-radius:12px; box-shadow:0 1px 3px rgba(20,40,55,.06); padding:24px; animation:relisFade .25s ease; } .relis-askbox-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .relis-askbox-head .relis-card-title{ margin:0; } .relis-askbox-close{ flex:none; background:transparent; border:0; color:var(--relis-blue); font-family:inherit; font-weight:600; font-size:.92em; cursor:pointer; padding:6px 8px; border-radius:6px; white-space:nowrap; } .relis-askbox-close:hover{ background:#eef4fa; color:var(--relis-blue-dark); } @keyframes relisFade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } /* Mobile side-inset for the opened form. The white card sits inside the Elementor hero column, which is full-width (its section contributes no side padding) — so on a phone the entire visible gap either side of the card is the *column's* own padding, outside our card. Trimming the card's internal padding alone barely moved it; the column padding is the real lever. That column padding comes from Elementor's own rule .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding:10px } which has specificity 0,3,0 — so the override MUST clear that bar or it is ignored (an earlier attempt at 0,2,0 lost to it silently). The selector below is 0,4,0: `.elementor-page` (a body class on every Elementor page) lifts it over Elementor's rule without pinning to this page id or to the column-gap size, so it keeps working if either changes. `:has(.relis-askbox)` scopes it to the column only while the opened form is shown, leaving the two-card state untouched; it matches nothing outside Elementor, so the [relis_sporsmal] shortcode on a plain page is unaffected. */ @media(max-width:780px){ .elementor-page .elementor-column > .elementor-element-populated:has(.relis-askbox){ padding-left:0; padding-right:0; } .relis-askbox{ padding-left:10px; padding-right:10px; } } /* ---------- the form itself ---------- */ .relis-qform{ margin:0; padding:0; border:0; } .relis-qform label, .relis-qform .relis-grouplabel{ display:block; font-size:13px; font-weight:700; color:var(--relis-slate); margin:12px 0 5px; } .relis-qform input, .relis-qform select, .relis-qform textarea{ width:100%; box-sizing:border-box; padding:11px 13px; border:1.5px solid var(--relis-line); border-radius:8px; font-size:15px; font-family:inherit; color:#1f2a30; background:#fff; margin:0; } .relis-qform textarea{ min-height:88px; resize:vertical; } .relis-qform input:focus, .relis-qform select:focus, .relis-qform textarea:focus{ outline:none; border-color:var(--relis-blue); } .relis-qform input[type="radio"]{ width:auto; } .relis-privacy{ background:#f3f6f8; border:1px solid var(--relis-line); border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.45; color:var(--relis-slate); margin-bottom:14px; } .relis-req{ color:var(--relis-error); font-weight:700; } .relis-radio{ display:flex; gap:20px; margin-top:2px; } .relis-radio label{ display:inline-flex; align-items:center; gap:7px; margin:0; font-size:14px; font-weight:600; color:var(--relis-slate); } .relis-help{ margin:5px 0 0 !important; font-size:12px; color:var(--relis-muted); line-height:1.4; } .relis-modal-actions{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; } /* ---------- validation feedback ---------- */ .relis-field-error, .relis-form-error{ margin:5px 0 0 !important; font-size:12.5px; font-weight:600; color:var(--relis-error); display:none; } .relis-field-error.is-shown, .relis-form-error.is-shown{ display:block; } .relis-form-error.is-shown{ margin-top:16px !important; background:#fdf2f2; border:1px solid #f0c9c9; border-radius:8px; padding:10px 13px; font-weight:600; } .relis-qform .is-invalid{ border-color:var(--relis-error); } /* Honeypot: off-screen rather than display:none, which some bots detect and skip. */ .relis-hp{ position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; } /* ---------- success ---------- */ .relis-success{ animation:relisFade .25s ease; color:var(--relis-slate); } .relis-success h4{ color:var(--relis-slate); margin:0 0 10px; } .relis-success p{ margin:0 0 10px; line-height:1.55; }