source/css/organisms/candidate-card-list.pcss

 .candidate-card-list {
-  @apply grid grid-flow-row gap-0 row-gap-4;
+  @apply grid grid-flow-row gap-0 gap-y-4;
 }
 
-@responsive {
-  .candidate-card-list__item-wrapper {
-    @apply px-2 border-r border-grey-100;
-  }
+.candidate-card-list__item-wrapper {
+  @apply px-2 border-r border-grey-100;
+}
 
-  .candidate-card-list__item-wrapper--border {
-    @apply border-r;
-  }
+.candidate-card-list__item-wrapper--border {
+  @apply border-r;
+}
 
-  .candidate-card-list__item-wrapper--noborder {
-    @apply border-0;
-  }
+.candidate-card-list__item-wrapper--noborder {
+  @apply border-0;
 }

source/css/organisms/footer.pcss

@@ -22,12 +22,12 @@
     @apply gap-4;
 
     grid-template-areas: "brand main-links social";
-    grid-template-columns: 25% 1fr 25%;
+    grid-template-columns: 34% 1fr 25%;
   }
 }
 
 .footer-collapsible__toggle {
-  @apply flex items-center cursor-pointer;
+  @apply flex items-center cursor-pointer lg:cursor-auto;
 
   &:after {
     content: "\e925";
@@ -40,11 +40,7 @@
     transform: rotate(-180deg);
   }
 
-  @screen lg {
-    @apply cursor-auto;
-
-    &:after {
-      @apply hidden;
-    }
+  &:after {
+    @apply lg:hidden
   }
 }

source/css/organisms/hero.pcss

 .hero {
-  @apply py-4;
+  @apply py-8 md:py-24;
+}
 
-  @screen md {
-    @apply py-24;
-  }
+.hero--condensed {
+  @apply py-8 md:py-16;
 }
 
 .hero--image {

source/css/organisms/navbar.pcss

@@ -59,7 +59,7 @@
 }
 
 .navbar-menu__submenu .navbar-menu__link {
-  @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-no-wrap;
+  @apply text-lg text-grey-200 font-body normal-case leading-normal pl-4 whitespace-nowrap;
 }
 
 .navbar-menu__link,

source/css/organisms/subnav.pcss

@@ -8,19 +8,11 @@
 
 .subnav-aside__close,
 .subnav-aside__close:hover {
-  @apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline;
-
-  @screen xl {
-    @apply block;
-  }
+  @apply hidden absolute text-3xl pr-8 cursor-pointer right-0 no-underline xl:block;
 }
 
 .subnav-aside__item {
-  @apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50;
-
-  @screen lg {
-    @apply py-8;
-  }
+  @apply absolute w-full opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21 z-50 lg:py-8;
 }
 
 .subnav-aside__item--visible {

source/css/organisms/vertical-navbar.pcss

+.vertical-navbar {
+  @apply p-8 border-l border-grey-100 bg-grey-50 bg-opacity-50;
+}
+
+.vertical-navbar__items {
+  @apply h-allcaps leading-loose;
+}
+
+.vertical-navbar__item--active {
+  @apply font-bold bg-grey-125 block -mx-8 px-8;
+}

source/css/style.pcss

-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
+@import url('https://gfonts.pirati.cz/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
 
 /* Icons */
 @import "./atoms/icons.pcss";
@@ -15,9 +15,14 @@
 */
 @import "tailwindcss/components";
 
+/* Tippy.js styles */
+@import 'tippy.js/dist/tippy.css';
+
 /**
  * Custom components
  */
+@import "./atoms/animations.pcss";
+@import "./atoms/alert.pcss";
 @import "./atoms/avatar.pcss";
 @import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";
@@ -30,10 +35,13 @@
 @import "./atoms/icons.pcss";
 @import "./atoms/list.pcss";
 @import "./atoms/paragraph.pcss";
+@import "./atoms/full-calendar.pcss";
 @import "./atoms/quotation.pcss";
 @import "./atoms/social-icon.pcss";
 @import "./atoms/super-button.pcss";
 @import "./atoms/table.pcss";
+@import "./atoms/text-shadow.pcss";
+@import "./atoms/tooltip.pcss";
 
 @import "./molecules/article-card.pcss";
 @import "./molecules/badge.pcss";
@@ -60,6 +68,7 @@
 @import "./organisms/navbar.pcss";
 @import "./organisms/subnav.pcss";
 @import "./organisms/region-map.pcss";
+@import "./organisms/vertical-navbar.pcss";
 
 @import "./templates/candidate-detail.pcss";
 @import "./templates/cf2021.pcss";
@@ -72,12 +81,12 @@
 
 ::-moz-selection {
   color: theme("colors.white");
-  background: theme("colors.grey.500");
+  background: theme("colors.cyan.300");
 }
 
 ::selection {
   color: theme("colors.white");
-  background: theme("colors.grey.500");
+  background: theme("colors.cyan.300");
 }
 
 :root {
@@ -114,3 +123,14 @@ a.icon-link:hover {
   /* Avoid gaps between inline-block elements */
   font-size: 0;
 }
+
+/* auto-size iframe according to aspect ratio while keeping the 100% height */
+.iframe-container {
+  @apply relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+}
+
+.iframe-container iframe {
+  @apply absolute top-0 left-0 w-full h-full;
+}

source/css/templates/candidate-detail.pcss

-.candidate-detail__hero {
-  z-index: -1;
-}
-
 .candidate-detail__sidebar {
-  @apply bg-white;
+  @apply bg-white z-10;
 
   @screen lg {
     margin-top: -6rem;

source/css/templates/cf2021.pcss

 .cf2021 {
   @apply grid gap-8;
 
-  grid-template-areas: "video"
+  grid-template-areas: "title"
+                       "video"
                        "notifications"
                        "posts";
 
   @screen lg {
-    grid-template-areas: "video notifications"
+    grid-template-areas: "title title"
+                         "video notifications"
                          "posts notifications";
-    /* Needs to match .candidate-card__avatar width */
+    grid-template-rows: auto auto 1fr;
+    grid-template-columns: theme("width.7/12") 1fr;
+  }
+
+  @screen xl {
     grid-template-columns: theme("width.2/3") 1fr;
+
   }
 }
 
+.cf2021__title {
+  grid-area: title;
+}
+
 .cf2021__video {
   grid-area: video;
 }

source/icons/Read Me.txt

-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

source/icons/demo-files/demo.css

@@ -147,19 +147,19 @@ p {
   font-size: 16px;
 }
 .fs1 {
-  font-size: 20px;
+  font-size: 32px;
 }
 .fs2 {
   font-size: 32px;
 }
 .fs3 {
-  font-size: 32px;
+  font-size: 24px;
 }
 .fs4 {
-  font-size: 32px;
+  font-size: 20px;
 }
 .fs5 {
-  font-size: 24px;
+  font-size: 32px;
 }
 .fs6 {
   font-size: 28px;