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;
 }
@@ -14,4 +13,3 @@
 .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;
-    }
+    @apply lg:hidden
   }
 }

source/css/organisms/hero.pcss

 .hero {
-  @apply py-4;
-
-  @screen md {
-    @apply py-24;
+  @apply py-8 md: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/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;

source/icons/style.css

 @font-face {
   font-family: 'pirati-ui';
-  src:  url('fonts/pirati-ui.eot?uj7vjb');
-  src:  url('fonts/pirati-ui.eot?uj7vjb#iefix') format('embedded-opentype'),
-    url('fonts/pirati-ui.ttf?uj7vjb') format('truetype'),
-    url('fonts/pirati-ui.woff?uj7vjb') format('woff'),
-    url('fonts/pirati-ui.svg?uj7vjb#pirati-ui') format('svg');
+  src:  url('fonts/pirati-ui.eot?bp1872');
+  src:  url('fonts/pirati-ui.eot?bp1872#iefix') format('embedded-opentype'),
+    url('fonts/pirati-ui.ttf?bp1872') format('truetype'),
+    url('fonts/pirati-ui.woff?bp1872') format('woff'),
+    url('fonts/pirati-ui.svg?bp1872#pirati-ui') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,11 +25,68 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.ico--lock-open:before {
-  content: "\e949";
+.ico--mastodon:before {
+  content: "\e973";
 }
-.ico--lock:before {
-  content: "\e94a";
+.ico--helios:before {
+  content: "\e96e";
+}
+.ico--redmine:before {
+  content: "\e96f";
+}
+.ico--zulip:before {
+  content: "\e970";
+}
+.ico--forum:before {
+  content: "\e971";
+}
+.ico--pirati:before {
+  content: "\e90d";
+}
+.ico--jitsi:before {
+  content: "\e90f";
+}
+.ico--open-source:before {
+  content: "\e90e";
+}
+.ico--donation-full:before {
+  content: "\e96c";
+}
+.ico--donation-outline:before {
+  content: "\e96d";
+}
+.ico--strategy:before {
+  content: "\e932";
+}
+.ico--pig:before {
+  content: "\e928";
+}
+.ico--thermometer:before {
+  content: "\e90a";
+}
+.ico--menu:before {
+  content: "\e933";
+}
+.ico--chevron-right:before {
+  content: "\e923";
+}
+.ico--chevron-left:before {
+  content: "\e924";
+}
+.ico--chevron-down:before {
+  content: "\e925";
+}
+.ico--chevron-up:before {
+  content: "\e926";
+}
+.ico--link-horizontal:before {
+  content: "\e910";
+}
+.ico--beer:before {
+  content: "\e909";
+}
+.ico--food:before {
+  content: "\e968";
 }
 .ico--dots-three-vertical:before {
   content: "\e940";
@@ -40,169 +97,184 @@
 .ico--log-out:before {
   content: "\e942";
 }
+.ico--envelope:before {
+  content: "\e908";
+}
 .ico--pin:before {
   content: "\e943";
 }
-.ico--edit-pencil:before {
-  content: "\e929";
-}
 .ico--at:before {
   content: "\e905";
 }
-.ico--strategy:before {
-  content: "\e932";
+.ico--glass:before {
+  content: "\e967";
 }
-.ico--pig:before {
-  content: "\e928";
+.ico--checkmark:before {
+  content: "\e965";
 }
-.ico--thermometer:before {
-  content: "\e90a";
+.ico--info:before {
+  content: "\e901";
 }
-.ico--pirati:before {
-  content: "\e90d";
+.ico--question:before {
+  content: "\e904";
 }
-.ico--stackshare:before {
-  content: "\e90f";
+.ico--warning:before {
+  content: "\e93f";
 }
-.ico--open-source:before {
-  content: "\e90e";
+.ico--code:before {
+  content: "\e94a";
 }
-.ico--search:before {
-  content: "\e913";
+.ico--checkbox-unchecked:before {
+  content: "\e94e";
 }
-.ico--switch:before {
-  content: "\e94b";
+.ico--star-full:before {
+  content: "\e94f";
 }
-.ico--loop:before {
-  content: "\e94c";
+.ico--star-empty:before {
+  content: "\e950";
 }
-.ico--repeat:before {
-  content: "\e94c";
+.ico--bookmark:before {
+  content: "\e951";
 }
-.ico--player:before {
-  content: "\e94c";
+.ico--cog:before {
+  content: "\e952";
 }
-.ico--reload:before {
-  content: "\e94c";
+.ico--key:before {
+  content: "\e953";
 }
-.ico--refresh:before {
-  content: "\e94c";
+.ico--zoom-in:before {
+  content: "\e954";
 }
-.ico--update:before {
-  content: "\e94c";
+.ico--zoom-out:before {
+  content: "\e955";
 }
-.ico--synchronize:before {
-  content: "\e94c";
+.ico--shrink:before {
+  content: "\e956";
 }
-.ico--arrows:before {
-  content: "\e94c";
+.ico--printer:before {
+  content: "\e957";
 }
-.ico--spinner:before {
-  content: "\e94d";
+.ico--file-openoffice:before {
+  content: "\e958";
 }
-.ico--loading:before {
-  content: "\e94d";
+.ico--user:before {
+  content: "\e959";
 }
-.ico--loading-wheel:before {
-  content: "\e94d";
+.ico--file-excel:before {
+  content: "\e95a";
 }
-.ico--refresh1:before {
-  content: "\e94d";
+.ico--file-word:before {
+  content: "\e95b";
 }
-.ico--repeat1:before {
-  content: "\e94d";
+.ico--file-pdf:before {
+  content: "\e95c";
 }
-.ico--busy:before {
-  content: "\e94d";
+.ico--file-picture:before {
+  content: "\e95d";
 }
-.ico--wait:before {
-  content: "\e94d";
+.ico--file-blank:before {
+  content: "\e95e";
 }
-.ico--arrow:before {
-  content: "\e94d";
+.ico--folder-upload:before {
+  content: "\e95f";
 }
-.ico--bullhorn:before {
-  content: "\e944";
+.ico--upload:before {
+  content: "\e960";
 }
-.ico--bin:before {
-  content: "\e945";
+.ico--cloud-upload:before {
+  content: "\e961";
 }
-.ico--trashcan:before {
-  content: "\e945";
+.ico--folder-download:before {
+  content: "\e962";
 }
-.ico--remove:before {
-  content: "\e945";
+.ico--download:before {
+  content: "\e963";
 }
-.ico--delete:before {
-  content: "\e945";
+.ico--cloud-download:before {
+  content: "\e964";
 }
-.ico--recycle:before {
-  content: "\e945";
+.ico--alarm:before {
+  content: "\e900";
 }
-.ico--dispose:before {
-  content: "\e945";
+.ico--calculator:before {
+  content: "\e911";
 }
-.ico--cross:before {
-  content: "\e937";
+.ico--facebook-full:before {
+  content: "\e913";
 }
-.ico--checkbox-checked:before {
-  content: "\e938";
+.ico--feed:before {
+  content: "\e927";
 }
-.ico--quill:before {
-  content: "\e939";
+.ico--library:before {
+  content: "\e929";
 }
-.ico--feather:before {
-  content: "\e939";
+.ico--office:before {
+  content: "\e92a";
 }
-.ico--write:before {
-  content: "\e939";
+.ico--attachment:before {
+  content: "\e92b";
+}
+.ico--enlarge:before {
+  content: "\e92c";
+}
+.ico--eye-off:before {
+  content: "\e92e";
 }
-.ico--edit:before {
+.ico--eye:before {
+  content: "\e92f";
+}
+.ico--share:before {
+  content: "\e931";
+}
+.ico--search:before {
   content: "\e939";
 }
-.ico--sphere:before {
-  content: "\e93a";
+.ico--pencil:before {
+  content: "\e93c";
 }
-.ico--globe:before {
-  content: "\e93a";
+.ico--lock-open:before {
+  content: "\e947";
 }
-.ico--internet:before {
-  content: "\e93a";
+.ico--lock:before {
+  content: "\e948";
 }
-.ico--wikipedia:before {
-  content: "\e93b";
+.ico--equalizer:before {
+  content: "\e949";
 }
-.ico--brand:before {
-  content: "\e93b";
+.ico--switch:before {
+  content: "\e94b";
 }
-.ico--youtube:before {
-  content: "\e936";
+.ico--loop:before {
+  content: "\e94c";
 }
-.ico--users:before {
-  content: "\e934";
+.ico--refresh:before {
+  content: "\e94d";
 }
-.ico--group:before {
-  content: "\e934";
+.ico--bullhorn:before {
+  content: "\e944";
 }
-.ico--team:before {
-  content: "\e934";
+.ico--bin:before {
+  content: "\e945";
 }
-.ico--members:before {
-  content: "\e934";
+.ico--cross:before {
+  content: "\e937";
 }
-.ico--community:before {
-  content: "\e934";
+.ico--checkbox-checked:before {
+  content: "\e938";
 }
-.ico--collaborate:before {
-  content: "\e934";
+.ico--globe:before {
+  content: "\e93a";
 }
-.ico--book:before {
-  content: "\e935";
+.ico--wikipedia:before {
+  content: "\e93b";
 }
-.ico--read:before {
-  content: "\e935";
+.ico--youtube:before {
+  content: "\e936";
+}
+.ico--users:before {
+  content: "\e934";
 }
-.ico--reading:before {
+.ico--book:before {
   content: "\e935";
 }
 .ico--bubbles:before {
@@ -259,24 +331,9 @@
 .ico--power:before {
   content: "\e90c";
 }
-.ico--house:before {
-  content: "\e93f";
-}
 .ico--rocket:before {
   content: "\e946";
 }
-.ico--jet:before {
-  content: "\e946";
-}
-.ico--speed:before {
-  content: "\e946";
-}
-.ico--spaceship:before {
-  content: "\e946";
-}
-.ico--fast:before {
-  content: "\e946";
-}
 .ico--location:before {
   content: "\e906";
 }
@@ -286,53 +343,35 @@
 .ico--linkedin:before {
   content: "\e903";
 }
-.ico--github1:before {
-  content: "\e904";
-}
-.ico--gplus:before {
-  content: "\e900";
-}
-.ico--twitter1:before {
-  content: "\e901";
-}
 .ico--facebook:before {
   content: "\e902";
 }
-.ico--menu:before {
-  content: "\e933";
+.ico--envelop:before {
+  content: "\e972";
 }
-.ico--chevron-right:before {
-  content: "\e923";
+.ico--file-text2:before {
+  content: "\e974";
 }
-.ico--chevron-left:before {
-  content: "\e924";
+.ico--price-tag:before {
+  content: "\e975";
 }
-.ico--chevron-down:before {
-  content: "\e925";
+.ico--price-tags:before {
+  content: "\e976";
 }
-.ico--chevron-up:before {
-  content: "\e926";
+.ico--stats-dots:before {
+  content: "\e99b";
 }
-.ico--eye-off:before {
-  content: "\e947";
+.ico--bed:before {
+  content: "\e969";
 }
-.ico--eye:before {
-  content: "\e948";
-}
-.ico--zoom_out_map:before {
-  content: "\e927";
-}
-.ico--arrow-down:before {
-  content: "\e911";
-}
-.ico--link1:before {
-  content: "\e910";
+.ico--train:before {
+  content: "\e96a";
 }
-.ico--city:before {
-  content: "\e908";
+.ico--bus:before {
+  content: "\e96b";
 }
-.ico--beer:before {
-  content: "\e909";
+.ico--wheelchair:before {
+  content: "\e966";
 }
 .ico--thumbs-down:before {
   content: "\e93d";
@@ -340,30 +379,9 @@
 .ico--thumbs-up:before {
   content: "\e93e";
 }
-.ico--tasks:before {
-  content: "\e93c";
-}
-.ico--calculator:before {
-  content: "\e931";
-}
-.ico--bank:before {
-  content: "\e92a";
-}
-.ico--facebook-official:before {
-  content: "\e92b";
-}
-.ico--close:before {
-  content: "\e92c";
-}
 .ico--anchor:before {
   content: "\e92d";
 }
-.ico--feed:before {
-  content: "\e92e";
-}
 .ico--paw:before {
   content: "\e90b";
 }
-.ico--envelope:before {
-  content: "\e92f";
-}