updated design

content/index.html

@@ -28,7 +28,11 @@
 		
 		<link
 			rel="stylesheet"
-			href="static/fonts/open-sans/style.css"
+			href="static/fonts/roboto-condensed/style.css"
+		>
+		<link
+			rel="stylesheet"
+			href="static/fonts/bebas-neue/style.css"
 		>
 		
 		<link
@@ -63,10 +67,8 @@
 					height="55"
 				>
 			</div>
-		</header>
 			
-		<main>
-			<div id="step1">
+			<div id="intro-wrapper">
 				<h1>Vyřiď si svůj voličský průkaz na prezidentské volby!</h1>
 				
 				<p id="intro-text">
@@ -85,7 +87,11 @@
 					První kolo se bude konat 13. - 14. ledna 2023.<br>
 					Druhé kolo se bude konat 27. - 28. ledna 2023.
 				</p>
+			</div>
+		</header>
 
+		<main>
+			<div id="step1">
 				<form id="form-wrapper">
 					<h2 class="info-type">Osobní informace</h2>
 					

content/static/css/base.css

@@ -12,7 +12,7 @@
 	width:100%
 }
 
-#finish,#download-pdf {
+#finish,#download-paper-pdf,#download-electronic-pdf {
 	margin-top:20px
 }
 
@@ -38,6 +38,12 @@
 	padding-bottom:14px
 }
 
+#intro-wrapper {
+	margin-left:auto;
+	margin-right:auto;
+	max-width:750px
+}
+
 #logo {
 	align-items:center;
 	display:flex;
@@ -119,7 +125,7 @@
 }
 
 .info-type {
-	font-size:1.2rem;
+	font-size:1.6rem;
 	margin:0;
 	text-align:center
 }
@@ -130,37 +136,43 @@ a,a:hover,a:visited {
 
 body {
 	background:#000;
-	font-family:"Open Sans",sans-serif
+	font-family:"Roboto Condensed",sans-serif
 }
 
 button,input[type="submit"],[aria-role="button"] {
-	background:#2f2f2f;
+	background:#f9ce05;
 	border:none;
-	color:#fff;
+	color:#000;
 	cursor:pointer;
 	display:inline-block;
-	font-size:unset;
+	font-family:"Bebas Neue";
+	font-size:1.35rem;
 	padding:12px;
 	text-decoration:none;
 	transition:.15s
 }
 
 button:not([disabled]):hover,input[type="submit"]:not([disabled]):hover,[aria-role="button"]:not([disabled]):hover {
-	background:#333
+	background:#000;
+	color:#f9ce05
 }
 
 button[disabled],input[type="submit"][disabled],[aria-role="button"][disabled] {
-	background:#737373;
+	background:#f9ce0575;
 	cursor:unset
 }
 
 header {
+	align-items:center;
 	background:#000;
 	color:#fff;
 	display:flex;
-	height:70px;
-	justify-content:center;
-	padding:10px
+	flex-direction:column;
+	padding:25px 0 10px 0
+}
+
+header a,header a:visited {
+	color:#fff
 }
 
 html,body {
@@ -168,10 +180,19 @@ html,body {
 	padding:0
 }
 
+h1,h2,h3,h4,h5,h6 {
+	font-family:"Bebas Neue",sans-serif;
+	text-transform:uppercase
+}
+
+h1 {
+	font-size:39px
+}
+
 input,[aria-role="textbox"],textarea,select {
 	background:#dddcdc;
 	border:0;
-	font-family:"Open Sans",sans-serif;
+	font-family:"Roboto Condensed",sans-serif;
 	font-size:medium;
 	padding:10px
 }
@@ -180,7 +201,7 @@ main {
 	background:#fff;
 	border-top-left-radius:40px;
 	border-top-right-radius:40px;
-	min-height:calc(100vh - 90px)
+	min-height:calc(100vh - 350px);
 }
 
 textarea {

content/static/fonts/bebas-neue/style.css

+/*
+ * Thanks to majodev for their Google webfont helper!
+ */
+
+/* bebas-neue-regular - latin-ext_latin */
+@font-face {
+	font-family: 'Bebas Neue';
+	font-style: normal;
+	font-weight: 400;
+	src:
+		url('./bebas-neue-v9-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+		url('./bebas-neue-v9-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

content/static/fonts/open-sans/style.css

-/*
-* Thanks to majodev for their Google webfont helper!
-*/
-
-/* open-sans-regular - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: normal;
-font-weight: 400;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-600 - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: normal;
-font-weight: 600;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-italic - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: italic;
-font-weight: 400;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-600italic - latin */
-@font-face {
-font-family: 'Open Sans';
-font-style: italic;
-font-weight: 600;
-src: local(''),
-	url('./open-sans-v29-latin-ext_latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-	url('./open-sans-v29-latin-ext_latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}

content/static/fonts/roboto-condensed/style.css

+/*
+ * Thanks to majodev for their Google webfont helper!
+ */
+
+/* roboto-condensed-regular - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: normal;
+  src: local(''),
+       url('roboto-condensed-v25-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('roboto-condensed-v25-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* roboto-condensed-700 - latin-ext_latin */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: bold;
+  src: local(''),
+       url('roboto-condensed-v25-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('roboto-condensed-v25-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

content/static/js/main.js

@@ -408,8 +408,14 @@ $(window).ready(
 				}
 				
 				await new Promise(
-					resolve => { $("#step1").fadeOut(200, resolve); }
+					resolve => {
+						$("#intro-wrapper").slideUp(200);
+						$("#step1").fadeOut(200, resolve);
+					}
 				);
+				
+				$("header").css("padding", "17.5px");
+				$("main").css("min-height", "calc(100vh - 90px)");
 				$("#step1").css("display", "none");
 				
 				await new Promise(