/* Reset */ *{ display: block; margin: 0; padding: 0; font-family: inherit; line-height: inherit; font-size: inherit; border: 0; border-radius: 0; border-spacing: 0; border: 0; outline: 0; text-decoration: inherit; font-weight: inherit; list-style: none; color: inherit; word-break: normal; text-overflow: ellipsis; background: none; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-text-size-adjust: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; -webkit-touch-callout: none; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; box-sizing: border-box; z-index: 1; cursor: inherit; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; flex-direction: row; flex-grow: 1; flex-shrink: 0; } input[type=text], textarea{ user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; cursor: text; } input[type=password]{ user-select: all; -webkit-user-select: text; } head, script, style, noscript{ display: none !important; } ::placeholder{ overflow: hidden; color: #555; font-weight: 500; line-height: normal; text-overflow: hidden; } ::-moz-placeholder{ overflow: hidden; color: #555; font-weight: 500; line-height: 1; text-overflow: hidden; } br{ display: inline; } /* Branding */ .primary.text{ background: #6137a2; background: linear-gradient(to top right, #6137A2 0%, #DA39C3 100%); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .primary.background{ color: #fff; background: rgb(97,55,162); background: linear-gradient(45deg, rgba(97,55,162,1) 0%, rgba(218,57,195,1) 100%); } .secondary.text{ background: #ECA53B; background: linear-gradient(to top right, #ECA53B 0%, #FB7B1F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .secondary.background{ background: rgb(236,165,59); background: linear-gradient(45deg, rgba(236,165,59,1) 0%, rgba(251,123,31,1) 100%); } .mix.text{ background: #ECA53B; background: linear-gradient(to top right, #ECA53B 0%, #DF3AC5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .mix.background{ background: rgb(236,165,59); background: linear-gradient(45deg, rgba(236,165,59,1) 0%, rgba(218,57,195,1) 100%); } .highlight.text{ background: #D8E1FE; background: linear-gradient(to right, #D8E1FE 0%, #9eeae0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .highlight.background{ background: rgb(216,225,254); background: linear-gradient(90deg, rgba(216,225,254,1) 0%, rgba(158,234,224,1) 100%); } /* Components */ input[type=text]{ padding: 1em; width: 100%; color: #555; font-weight: 500; border-radius: 0.5em; background-color: #fff; box-shadow: 0 0.25em 2em -1em #000; cursor: text; transition: .2s; } input[type=text]:hover, input[type=text]:focus, input[type=text]:active{ transform: scale(1.05); } input[type=submit]{ } span.button{ color: #fff; font-weight: 500; border-radius: 100em; background: rgb(97,55,162); background: linear-gradient(45deg, rgba(97,55,162,1) 0%, rgba(218,57,195,1) 100%); cursor: pointer; transition: .2s; } span.button > input[type=button], span.button > input[type=submit]{ overflow: hidden; padding: 1em; width: 100%; text-overflow: ellipsis; } span.secondary.button{ color: #444; background: transparent; border: 0.125em solid #444; } span.secondary.button > input[type=button], span.secondary.button > input[type=submit]{ } span.button.previous, span.button.next{ position: relative; } span.button.previous:before, span.button.next:after{ position: absolute; top: 1em; display: block; font-family: "FontAwesome"; font-weight: 700; pointer-events: none; } span.button.next{ } span.button.next > input{ padding-right: 2em; } span.button.next:after{ content: "\f054"; right: 1em; } span.button.previous{ } span.button.previous > input{ padding-left: 2em; } span.button.previous:before{ content: "\f053"; left: 1em; } span.button:hover, span.button:focus, span.button:active{ /* transform: scale(1.05); */ } span.secondary.button:hover, span.secondary.button:focus, span.secondary.button:active{ color: #fff; background-color: #444; border-color: #444; transform: none; } input[type=radio]{ } input[type=checkbox]{ } p{ line-height: 1.25; } a{ } p a, li a{ color: #DA39C3; cursor: pointer; background: #6137a2; background: linear-gradient(to top right, #6137A2 0%, #DA39C3 100%); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: underline; } article.card{ } @media (orientation: landscape) and (min-width: 200px){ p{ line-height: 1.5; } } /* FontAwesome */ @font-face{ font-family: "FontAwesome"; font-display: block; src: url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-solid-900.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-solid-900.ttf) format("truetype") } @font-face{ font-family:"FontAwesome"; font-display: block; src: url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-brands-400.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-brands-400.ttf) format("truetype") } @font-face{ font-family:"FontAwesome"; font-display: block; src: url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-regular-400.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-regular-400.ttf) format("truetype"); unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc } @font-face{ font-family:"FontAwesome"; font-display:block; src:url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-v4compatibility.woff2) format("woff2"), url(https://ka-f.fontawesome.com/releases/v6.4.0/webfonts/free-fa-v4compatibility.ttf) format("truetype"); unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a } /* Layout */ html{ min-width: 200px; height: 100%; color: #444; font-family: "Ubuntu", sans-serif; font-size: 62.5%; font-weight: normal; line-height: 1; text-decoration: none; background-color: #fff; background: rgb(248,255,255); background: linear-gradient(45deg, rgba(248,255,255,1) 0%, rgba(251,243,250,1) 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } body{ overflow-x: hidden; font-size: 1em; } #wrapper{ z-index: 2; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2em; min-height: 100vh; background-image: url("assets/planimeter.png"); background-repeat: repeat; background-size: 250% auto; } #header{ flex-grow: 0; flex-shrink: 1; z-index: 10; position: relative; } #header > header{ position: relative; } #logo{ } #logo > a{ display: flex; flex-direction: row; align-items: center; width: 5.75em; font-size: 1em; font-weight: 600; cursor: pointer; } #logo > a:before{ content: " "; margin-right: 0.5em; width: 2em; height: 2em; display: block; background-image: urL("assets/logo.png"); background-size: contain; background-position: center; background-repeat: no-repeat; } /* #logo > a:before{ content: "\f1ea"; margin-right: 0.25em; width: 1.125em; display: block; background: #6137A2; background: linear-gradient(to top right, #6137A2 0%, #DA39C3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "FontAwesome"; text-align: center; } */ #menu{ overflow: hidden; margin-top: 1em; background-color: #fff; border-radius: 0.5em; box-shadow: 0 1em 8em -4em #000; } body.js #menu{ display: none; } body.js #menu.active{ z-index: 2; position: absolute; top: 2em; right: 0; left: 0; margin-top: 0.5em; display: block; border-radius: 0.5em 0 0.5em 0.5em; } #navigation{ } #navigation > h2{ display: none; } #navigation > p{ display: none; } #navigation > ul{ } #navigation > ul > li{ } #navigation > ul > li > a{ padding: 1em; color: #444; font-weight: 500; -webkit-text-fill-color: initial; text-decoration: none; } #navigation > ul > li > a:hover{ color: #444; background: #f2f2f2; } #navigation > ul > li:last-of-type > a:hover{ /* border-radius: 0 0 0.5em 0.5em; */ } #navigation > ul > li > ul{ margin-left: 2em; } #navigation > ul > li > ul > li{ } #navigation > ul > li > ul > li > a{ padding: 1em; color: #444; -webkit-text-fill-color: initial; text-decoration: none; border-radius: 0.5em; } #navigation > ul > li > ul > li > a:hover{ color: #fff; background: #444; } #navigation > ul > li > ul > li > span{ display: none; } #navigation > ul > li > ul > li > ul{ display: none; } #signin{ display: flex; flex-direction: row; flex-wrap: wrap; padding: 1em; /* background-color: #fff; background: rgb(216,225,254); background: linear-gradient(90deg, rgb(216, 225, 254) 0%, rgb(158, 234, 224) 100%); border-radius: 0.5em 0.5em 0 0; box-shadow: 0 1em 5em -2.5em #000; */ border-top: 1px solid #f2f2f2; } #signin > h2{ flex-grow: 1; flex-shrink: 0; margin-bottom: 1em; width: 100%; } #signin > h2 > span{ display: inline-block; padding: 0.5em; font-size: 1em; font-weight: 700; background: rgb(216,225,254); background: linear-gradient(90deg, rgba(216,225,254,1) 0%, rgba(158,234,224,1) 100%); border-radius: 0.5em; box-shadow: 0 0.5em 2em -1em #888; transform: rotate(-1deg); } #signin > p{ display: none; } #signin > input[type=text]{ flex-grow: 1; flex-shrink: 1; flex-basis: 1em; } #signin > span.button{ flex-grow: 0; flex-shrink: 1; flex-basis: 0; margin-left: 1em; width: 4em; } #signin > span.button > input[type=submit]{ color: transparent; text-indent: -999999em; } #signin > span.button:after{ width: 1em; height: 1em; text-align: center; } #hamburger{ position: absolute; top: -0.5em; right: 0; padding: 1em; border-radius: 0.5em; cursor: pointer; } #hamburger:hover{ color: #444; background-color: #fff; box-shadow: 0 0.25em 2.5em -1.25em #000; } #hamburger.active{ color: #444; background-color: #fff; border-radius: 0.5em 0.5em 0 0; box-shadow: 0 0.25em 2.5em -1.25em #000; } #hamburger.active:hover{ color: #444; background-color: #f2f2f2; } #hamburger:before{ content: "Menu"; margin-right: 0.5em; font-weight: 600; } body.sv #hamburger:before{ content: "Meny"; } #hamburger:after{ content: "\f078"; display: inline-block; width: 1em; height: 1em; font-family: "FontAwesome"; } #hamburger.active:after{ content: "\f077"; } main{ flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 4em; width: 100%; } #maintenance{ display: flex; flex-direction: column; justify-content: center; align-items: center; } #maintenance > h2{ flex-grow: 0; flex-shrink: 0; margin-bottom: 2em; display: inline-block; padding: 0.5em; border-radius: 0.5em; background: rgb(216,225,254); background: linear-gradient(90deg, rgba(216,225,254,1) 0%, rgba(158,234,224,1) 100%); box-shadow: 0 0.5em 2em -1em #888; transform: rotate(-5deg); } #maintenance > h2 > span{ flex-grow: 0; flex-shrink: 0; color: #444; font-size: 1.5em; font-weight: 700; text-align: center; /* background: #ECA53B; background: linear-gradient(to top right, #ECA53B 0%, #FB7B1F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ } #maintenance > p{ flex-grow: 0; flex-shrink: 0; font-size: 1.25em; text-align: center; } #footer{ flex-grow: 0; flex-shrink: 1; margin-top: 4em; } #footer > h2{ display: none; } #footer > div{ } #footer > div > p{ font-size: 0.75em; text-align: center; } #footer > div > p > span{ display: inline-block; font-weight: 600; } #footer > div > p > span:before{ content: "\f1ea"; margin-right: 0.25em; width: 1.125em; display: inline-block; font-weight: normal; background: #6137A2; background: linear-gradient(to top right, #6137A2 0%, #DA39C3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "FontAwesome"; text-align: center; } #footer > div#language{ margin-top: 1em; } #footer > div#language > p{ text-align: center; } #footer > div#language > p > span{ display: none; } #footer > div#language > p > a{ display: inline-block; padding: 1em; color: #444; font-weight: 600; line-height: 1; background: #f2f2f2; -webkit-text-fill-color: inherit; text-decoration: none; border-radius: 0.5em; cursor: pointer; } #footer > div#language > p > a:after{ content: "\f2f1"; margin-left: 0.5em; width: 1em; font-family: "FontAwesome"; font-weight: 700; text-align: center; } #footer > div#language > p > a:hover{ color: #fff; background-color: #444; } #bg{ z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } #bg:before{ content: " "; position: absolute; top: 17em; left: -10em; display: block; width: 12.5em; height: 12.5em; background-image: url("assets/crop.png"); background-size: contain; transform: rotate(-5deg); } #bg:after{ content: " "; position: absolute; top: 22.5em; right: -12.5em; display: block; width: 15em; height: 15em; background-image: url("assets/crop.png"); background-size: contain; transform: rotate(-5deg); } /* Portrait */ @media (orientation: portrait) and (min-width: 200px){ html{ } body{ font-size: 5vw; } #wrapper{ } } /* Landscape */ @media (orientation: landscape) and (min-width: 200px){ html{ } body{ font-size: 1.25vw; } #wrapper{ margin: 0 auto; max-width: 80em; } #header{ } #header > header{ display: flex; flex-direction: row; align-items: center; } #logo{ } #logo > a{ font-size: 1.5em; } #menu{ flex-grow: 0; flex-shrink: 1; display: flex; flex-direction: row; overflow: visible; margin-top: 0; background-color: transparent; box-shadow: none; } #navigation{ } #navigation > ul{ display: flex; flex-direction: row; } #navigation > ul > li{ flex-grow: 0; flex-shrink: 1; } #navigation > ul > li > a{ border-radius: 0.5em; } #navigation > ul > li:last-of-type > a:hover{ border-radius: 0.5em; } #signin{ flex-grow: 0; flex-shrink: 1; display: flex; flex-direction: row; margin-top: 0; margin-left: 2em; padding: 0; background: transparent; box-shadow: none; } #signin > h2{ display: none; } #signin > p{ } #signin > input[type=text]{ flex-grow: 0; flex-shrink: 1; width: auto; max-width: 10em; } #signin > span.button{ flex-grow: 0; flex-shrink: 1; margin-top: 0; margin-left: 1em; width: auto; } #signin > span.button > input[type=submit]{ color: inherit; text-indent: 0; } #signin > span.button:after{ } body.js #menu{ display: flex; } body.js #menu.active{ display: flex; border-radius: none; } #hamburger{ display: none; } main{ margin-top: 8em; margin-right: auto; margin-left: auto; max-width: 50em; } #maintenance{ } #maintenance > h2{ margin-bottom: 4em; padding: 1em; } #maintenance > h2 > span{ font-size: 2em; } #maintenance > p{ font-size: 1.5em; font-weight: 500; } #footer{ margin-top: 8em; } #bg{ } #bg:before{ top: 35em; left: -25em; width: 40em; height: 40em; } #bg:after{ top: 10em; right: -35%; width: 40em; height: 40em; } } /* Wide */ @media (orientation: landscape) and (min-width: 100em){ html{ } body{ font-size: 2em; } #wrapper{ } } /* Print */ @media print{ html{ } body{ } #wrapper{ } }