<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>{{=headerTitle}}</title> <base href="/"> <meta name="description" content="{{=headerDescription}}"> <meta name="twitter:card" value="summary"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:type" content="website" /> <meta property="og:url" content="{{=headerUrl}}" /> <meta property="og:image" content="{{=headerImage}}" /> <meta property="og:description" content="{{=headerDescription}}" /> <meta property="og:title" content="{{=headerTitle}}" /> <link rel="icon" type="image/png" href="/assets/img/favicon.png"> <link rel="preconnect" href="https://eignavakt.is" /> <style> /* ===================== Variables ===================== */ :root { --bg: #E5E5E5; --content-max-width: 1280px; --accent-bg: #EF6C10; --accent-fg: white; --main-bg: white; --main-fg: black; --main-fg-light: #919191; --main-accent: #EF6C10; --main-accent-fg: white; --menu-bg: var(--bg); --menu-fg: black; --form-border: 1px solid #e4e4e4; --form-inactive-bg: #C4C4C4; --form-inactive-fg: white; --form-radius: 4px; --form-input-padding: 0.5rem 0.5rem; --form-button-padding: 0.5rem 2rem; --section-blue-bg: #5465FF; --section-blue-fg: white; --section-radius: 25px; } .nightmode { --content-max-width: 1280px; } /* ===================== Reset ===================== */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } [hidden] { display: none !important; } body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; font-size: 16px; font-family: 'Inter var', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-variation-settings: "slnt" 0; font-feature-settings: "case", "frac", "tnum", "ss02", "calt", "ccmp", "kern"; background: var(--bg); color: var(--main-fg); width: 100%; display: flex; flex-direction: column; align-items: center; padding: 1rem; } .italic { font-variation-settings: "slnt" 10deg; } a { text-decoration-skip-ink: auto; } img { max-width: 100%; margin: 0 auto; display: block; } input, button, textarea, select { font: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } } h1, h2, h3, h4, h5 { line-height: 120%; margin: 0; padding: 0; } h1 { font-size: 2.488rem; } h2 { font-size: 2.074rem; } h3 { font-size: 1.728rem; } h4 { font-size: 1.44rem; } h5 { font-size: 1.0rem; font-weight: 700; margin: 1rem 0; } a, a:visited, button { text-decoration: none; border: none; padding: 0; margin: 0; cursor: pointer; background: transparent; cursor: pointer; } .filler { flex-grow: 2; } header, main, footer { width: 100%; max-width: var(--content-max-width); } .button-flat, .button-outline, .button-inactive, .button-active, .button-white { border-radius: var(--form-radius); padding: 0.9rem 2rem; display: inline-block; align-self: flex-start; border: none; } .button-flat { display: inline-flex; align-items: center; color: #909090; background: transparent; padding: 0.9rem 0; } .button-outline { background: transparent; border: var(--form-border); color: var(--main-fg-light); } .button-active { background: var(--main-accent); color: var(--main-accent-fg); } .button-inactive { background: var(--form-inactive-bg); color: var(--form-inactive-fg); } .button-white { background: var(--section-blue-fg); color: var(--section-blue-bg); } .button-flat i, .button-outline i, .button-inactive i, .button-active i, .button-white i { margin-right: 0.5rem; } /* ---------------- header ---------------- */ header { display: flex; min-height: 127px; align-items: center; background: var(--menu-bg); color: var(--menu-fg); flex-wrap: wrap; } header .logo { height: 45px; width: auto; margin-right: 1rem; } header a { color: var(--menu-fg); font-weight: 350; display: block; } header .links { display: flex; } header .button { background: var(--accent-bg); color: var(--accent-fg); } header .links a { padding: 1rem; } header .links a.button { padding: 1rem 2rem; } /* ---------------- main ---------------- */ /* ---------------- top ---------------- */ section.title { margin: 0 0 5rem; } section.title .under { display: flex; border-radius: var(--section-radius); background: var(--accent-bg); color: var(--accent-fg); } section.title .under .text { padding: 3rem 3rem 14rem; max-width: 580px; } section.title .under .text p { padding: 1rem 0 2rem; } section.title .under .house1 { flex: 2 1 670px; background: url('/assets/img/house_1.png') right bottom no-repeat; background-size: contain; border-radius: 0 0 var(--section-radius) 0; } section.title .form { border-radius: var(--section-radius); background: var(--main-bg); color: var(--main-fg); padding: 0.5rem 1rem 3rem 2rem; margin: -12rem 1rem 0 3rem; max-width: 650px; position: relative; z-index: 2; } section.title .remove-item { height: 2.5rem; width: 2.5rem; background: url('/assets/img/remove.svg') center no-repeat; background-size: 1.5rem auto; } section.title .form h5 { color: var(--main-accent); margin: 2rem 0; } /* ---------------- tips ---------------- */ section.tips { display: flex; margin: 3rem 3rem 6rem; } section.tips .image { flex: 1 1 100px; background: url('/assets/img/house_2.png') center no-repeat; background-size: cover; border-radius: var(--section-radius); } section.tips .content { flex: 1 1 100px; padding: 3rem 0rem; } section.tips .space { flex: 0 0 100px; } section.tips h2 { margin-bottom: 1rem; } section.tips p { font-size: 0.8rem; font-weight: 350; margin-bottom: 1rem; } section.tips .checkmark { background: url('/assets/img/checkmark.svg') left top no-repeat; background-size: auto 52px; min-height: 52px; margin-bottom: 1rem; padding: 0.8rem 0 0 5rem; font-weight: 600; } /* ---------------- pricemat ---------------- */ section.pricemat { display: flex; margin: 3rem 3rem 6rem; background: var(--section-blue-bg); color: var(--section-blue-fg); border-radius: var(--section-radius); } section.pricemat .image { margin-top: 2rem; flex: 1 1 100px; background: url('/assets/img/house_3.png') center top no-repeat; background-size: cover; border-radius: 0 0 var(--section-radius) 0; } section.pricemat a.link { font-weight: 800; font-size: 0.6rem; text-transform: uppercase; color: var(--section-blue-fg); margin-bottom: 1rem; display: block; } section.pricemat .content { flex: 1 1 100px; padding: 3rem 0rem 3rem 3rem; } section.pricemat .space { flex: 0 0 50px; } section.pricemat h2 { margin-bottom: 2rem; } section.pricemat p { font-size: 0.8rem; font-weight: 350; margin-bottom: 2rem; } section.pricemat .button-white { font-size: 0.8rem; } /* ---------------- footer ---------------- */ footer { display: flex; padding: 3rem 3rem 0 0; margin: 1rem 1rem 3rem; background: var(--accent-bg); color: var(--accent-fg); border-radius: var(--section-radius); } footer .house_4 { flex: 0 1 300px; background: url('/assets/img/house__4.png') center top no-repeat; background-size: cover; border-radius: 0 0 0 var(--section-radius); } footer .content { display: flex; flex-direction: column; margin-left: 2rem; flex: 2 1 auto; } footer .top { display: flex; align-self: stretch; } footer .logo { height: 45px; width: auto; margin-right: 1rem; } footer .middle { display: flex; flex-direction: column; } footer .split { margin: 3rem 0 2rem; display: flex; padding-left: 3rem; } footer .split-part { display: flex; flex-direction: column; } footer .split-part { flex: 1 1 100px; } footer form { flex: 1 1 300px; background: var(--main-bg); color: var(--main-fg); border-radius: 8px; padding: 1rem; margin-bottom: 3rem; } footer .split-part a, footer .split-part a:visited, footer .split-part p { color: var(--accent-fg); margin-bottom: 0.5rem; } footer .split-part a { font-weight: 700; } footer button { width: 100%; } /* ---------------- form ---------------- */ .form-group { display: flex; flex-wrap: wrap; } .form-item { flex: 2 1 calc(45% - 1rem); display: flex; flex-direction: column; margin-bottom: 1rem; margin-right: 1rem; } .form-item.no-margin { margin: 0; } .form-fill { flex: 2 1 60%; } .form-no-label { padding-top: 1.7rem; } .form-small { flex: 0 0 auto; } .form-item label { font-size: 0.8rem; margin-bottom: 0.5rem; font-weight: 600; } .form-list { display: flex; } .form-list-vertical { display: flex; flex-direction: column; } label.checkbox { display: block; position: relative; margin-right: 1rem; margin-bottom: 1rem; } label.checkbox input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } label.checkbox .button-checkbox { border-radius: var(--form-radius); padding: var(--form-input-padding); border: var(--form-border); color: var(--main-fg-light); cursor: pointer; } label.checkbox input[type=checkbox]:checked ~ .button-checkbox { background: var(--main-accent); border-color: var(--main-accent); color: var(--main-accent-fg); } .form-item input[type=text], .form-item input[type=password] { border-radius: var(--form-radius); border: var(--form-border); padding: 0.9rem 0.5rem; width: 100%; } .form-item .fake-input { border-radius: var(--form-radius); border: none; padding: 0.5rem 0.5rem; width: 100%; background: rgba(237, 101, 3, 0.1); display: flex; } .form-item .fake-input p { padding: 0.5rem; line-height: 1.5rem; font-size: 0.8rem; flex: 2 1 auto; } /* ---------------- icons ---------------- */ i { display: inline-block; } i.ic-plus { width: 1.5rem; height: 1.5rem; background: url('/assets/img/orange_circle_plus.svg') center no-repeat; background-size: contain; } </style> <link id="headstyle" rel="Stylesheet" href="/assets/app.css?v=2" type="text/css" media="none" /> </head> <body> <script type="text/javascript" nonce="{{=nonce}}"> document.getElementById('headstyle').addEventListener('load', function() { window.styleloaded = true; if(this.media!='all') { this.media='all'} }); </script> <header id="header"> </header> <main id="main"> </main> <footer id="footer"> </footer> <script type="text/javascript" src="/assets/app.js?v=2"></script> </body> </html>