begin styling

app/cells/decidim/content_blocks/hero/show.erb

@@ -0,0 +1,7 @@
+<section id="hero" style="background-image:url('<%= background_image %>');">
+  <div class="hero__container">
+    <div class="row">
+      <%= cta_button %>
+    </div>
+  </div>
+</section>

app/packs/stylesheets/decidim/_decidim-settings.scss

@@ -5,3 +5,4 @@
 // To override styles use decidim_application.scss
 //
 // By default this is empty.
+@import 'stylesheets/okbr/variables.scss';

app/packs/stylesheets/decidim/decidim_application.scss

@@ -1,7 +1,8 @@
-// This is a file that can be overridden by the application in order to override styles
-// Notice that this file is included at the very end of the stylesheets packs to have
-// more priority
+// This is a file that can be overridden by the application in order to override
+// styles Notice that this file is included at the very end of the stylesheets
+// packs to have more priority
 //
 // To override CSS variables or Foundation settings use _decidim-settings.scss
 //
 // By default this is empty.
+@import 'stylesheets/okbr/application.scss';

app/packs/stylesheets/okbr/_fonts.scss

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'HK Grotesk';
+  src: url(fonts/hk-grotesk/HKGrotesk-LightLegacy.otf) format('opentype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'HK Grotesk';
+  src: url(fonts/hk-grotesk/HKGrotesk-Regular.otf) format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'HK Grotesk';
+  src: url(fonts/hk-grotesk/HKGrotesk-SemiBold.otf) format('opentype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'HK Grotesk';
+  src: url(fonts/hk-grotesk/HKGrotesk-LightLegacyItalic.otf) format('opentype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'HK Grotesk';
+  src: url(fonts/hk-grotesk/HKGrotesk-Italic.otf) format('opentype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'HK Grotesk';
+  src: url(fonts/hk-grotesk/HKGrotesk-SemiBoldItalic.otf) format('opentype');
+  font-weight: 600;
+  font-style: italic;
+}

app/packs/stylesheets/okbr/_hero.scss

@@ -0,0 +1,29 @@
+/**
+ * Hero
+ */
+.hero-heading {
+  display: none;
+}
+
+.hero__container {
+  text-align: right;
+}
+
+.hero-cta {
+  padding: .7rem 1rem;
+  border-radius: 100px;
+  color: black;
+  font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.hero-cta.button.expanded {
+  width: auto;
+  display: inline-block;
+}
+
+.button--sc.large {
+  font-size: 28px;
+  font-weight: 600;
+}

app/packs/stylesheets/okbr/_nav.scss

@@ -0,0 +1,38 @@
+.navbar {
+  background-color: white;
+  color: black;
+  text-transform: uppercase;
+  font-weight: 100;
+}
+
+.main-nav__link a {
+  padding: 0;
+}
+
+.main-nav ul {
+  justify-content: center;
+  padding: 2rem 0;
+  line-height: 1;
+}
+
+.main-nav ul > li {
+  flex: none;
+}
+
+.main-nav ul > li > a {
+  padding: 0 1rem;
+}
+
+.main-nav ul > li:not(:last-child) a {
+  border-right: solid 1px black;
+}
+
+.main-nav__link--active a {
+  box-shadow: inset 0 -4px 0 0 var(--primary);
+}
+
+.main-nav__link a,
+.main-nav__link a:hover {
+  color: black;
+  font-weight: 100;
+}

app/packs/stylesheets/okbr/_search.scss

@@ -0,0 +1,41 @@
+/**
+ * Search bar
+ */
+.okbr-search {
+  background-color: $color-cyan;
+  height: 2.4rem;
+  border-radius: 1.2rem;
+  overflow: hidden;
+}
+
+.okbr-search__form {
+  display: flex;
+}
+
+.okbr-search__input {
+  border: 0;
+  background-color: transparent;
+  box-shadow: none;
+  height: 100%;
+  margin: 0;
+}
+
+.okbr-search__input::placeholder {
+  color: black;
+  font-weight: 100;
+  text-transform: uppercase;
+}
+
+.okbr-search__input:focus {
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+.okbr-search__button {
+  height: 100%;
+  padding: 0 .7rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

app/packs/stylesheets/okbr/_title.scss

@@ -0,0 +1,29 @@
+/**
+ * Title bar
+ */
+.title-bar {
+  background-color: white;
+  text-transform: uppercase;
+}
+
+.title-bar,
+.topbar__admin__link a,
+.topbar__user__login a,
+.topbar__search input,
+.topbar__dropmenu > ul > li > a {
+  color: black;
+  font-weight: 100;
+}
+
+.topbar__admin__link a:hover {
+  color: #333;
+}
+
+.topbar__notifications .icon,
+.topbar__conversations .icon {
+  fill: black;
+}
+
+.topbar__search input {
+  background-color: $color-cyan;
+}

app/packs/stylesheets/okbr/application.scss

@@ -0,0 +1,17 @@
+@import 'stylesheets/okbr/_fonts.scss';
+@import 'stylesheets/okbr/_title.scss';
+@import 'stylesheets/okbr/_search.scss';
+@import 'stylesheets/okbr/_hero.scss';
+@import 'stylesheets/okbr/_nav.scss';
+
+body {
+  font-family: 'HK Grotesk', sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.heading3 {
+  text-transform: uppercase;
+  font-weight: 600;
+  text-align: left;
+}

app/packs/stylesheets/okbr/variables.scss

@@ -0,0 +1,5 @@
+$color-pink: #e077ff;
+$color-purple: #6173e8;
+$color-cyan: #adffed;
+
+$color-primary: $color-pink;

app/views/layouts/decidim/_topbar_search.html.erb

@@ -0,0 +1,10 @@
+<div class="okbr-search">
+  <%= form_tag(decidim.search_path, method: :get, class: "okbr-search__form") do %>
+    <div class="okbr-search__button-wrapper">
+      <%= submit_tag icon("magnifying-glass", aria_label: t("decidim.search.term_input_placeholder"), role: "img"), title: t("decidim.search.term_input_placeholder"), id: :submit, class: "okbr-search__button" %>
+    </div>
+    <%= label_tag :term do %>
+      <%= text_field_tag :term, nil, class: "okbr-search__input", placeholder: t("decidim.search.term_input_placeholder"), title: t("decidim.search.term_input_placeholder") %>
+    <% end %>
+  <% end %>
+</div>