@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/payin/rednoseday/components/form/_form.scss

@@ -0,0 +1,262 @@
+.form__row--title {
+  padding: 0;
+  width: 100%;
+  max-width: none;
+  background-color: $colour-light-green;
+
+  h2 {
+    @extend p;
+    @extend .text--subtitle-small;
+    margin: 0;
+    padding: 40px 60px;
+    width: 100%;
+    text-transform: none;
+    text-align: left;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include breakpoint($screen-md) {
+    display: flex;
+    flex-direction: row;
+    height: 270px;
+    div {
+      display: inline-block;
+      width: 50%;
+    }
+
+    div:first-child {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.form__row {
+  background-color: transparent;
+  @include breakpoint($screen-md) {
+    padding-top: 0;
+  }
+}
+.form__row-transaction-id {
+  padding-top: 30px;
+  text-align: center;
+}
+
+.form__step {
+  max-width: none;
+}
+
+// hide address fields until shown
+.form__field--address,
+.form__row--billing-detail {
+  display: block;
+   &.hide {
+    display: none;
+   }
+}
+
+.form__section-title {
+  @extend p;
+  @extend .text--subtitle-small;
+  text-align: left;
+  text-transform: none;
+  color: $colour-black;
+}
+
+label,
+input {
+  color: $colour-black;
+}
+
+input[type="email"],
+input[type="number"],
+input[type="text"],
+textarea {
+  max-width: none;
+  border: 1px solid $colour-black;
+  background-color: $colour-light-grey;
+}
+select {
+  max-width: none;
+  border: 1px solid $colour-black;
+  background: transparent url($image-path + "drop-down.svg") calc(100% - 20px) 20px/20px 10px no-repeat;
+}
+
+// after element to put loading gif in on top of postcode find address button
+.search-box-button {
+  margin-top: 3%;
+  .search-box-button.loading {
+    &:after {
+      position: absolute;
+      content:'';
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: calc(100% + 3px); // cover button as it's not hovered anymore
+      border: 1px solid $colour-black;
+      box-shadow:inset 0 0 0 3px $colour-black;
+      background: $colour-white url($image-path + "loader.gif") center no-repeat;
+      transform: translateY(-3px); // place at same position as hovered button
+    }
+  }
+  #postcode_button {
+    display: inline-block;
+    width: 100%;
+    margin: 0 auto;
+    padding: 16px 30px;
+    cursor: pointer;
+    transition: 0;
+    text-align: center;
+    vertical-align: middle;
+    text-decoration: none;
+    border: none;
+    font-family: $body-font;
+    font-weight: 700;
+    font-size: 15px;
+    line-height: 15px;
+    color: $colour-white;
+    background-color: $colour-deep-violet;
+    @include border-radius(30px);
+    span {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $colour-grey;
+      color: $colour-deep-violet;
+    }
+    .search-box.has-error & {
+      margin-top: 0;
+    }
+  }
+}
+
+.form__row--your-detail,
+.form__row--keep-touch,
+.form__row--billing-detail,
+.form__row--user-generate-content {
+  p,
+  strong {
+    color: $colour-black;
+  }
+
+  input[type="checkbox"]:focus+span {
+    border-color: $colour-black;
+  }
+}
+.form__row--keep-touch {
+  .form__subcopy--privacy-policy {
+    @extend .text--body-small;
+  }
+}
+
+#comicrelief_payinbundle_payment_card.clicked {
+  color: $colour-white;
+  background-color: $colour-black;
+
+  &:focus,
+  &:hover {
+    transform: translateY(0);
+  }
+}
+
+.form__field--wrapper.form__submit {
+  text-align: center;
+}
+button[type=submit] {
+  @extend .btn;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+}
+
+//specificity needed for form error
+.help-block,
+.help-block.form-error {
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.form__row--payment {
+  .form__subcopy {
+    text-align: left;
+  }
+}
+
+.form__checkbox.form__checkbox-text-only label.form__checkbox {
+  display: inline-block;
+  padding: 0 2px 1px;
+  width: auto;
+  text-decoration: none;
+  border-bottom: 2px solid;
+  border-bottom-color: inherit;
+}
+
+@include breakpoint($screen-md) {
+  .form__checkbox-text-only label.form__checkbox {
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+    text-align: left;
+  }
+  .form__checkbox--same-address {
+    label.form__checkbox {
+      margin: 0 0 3%;
+      text-align: left;
+    }
+  }
+  button.payment-button,
+  button[type=submit] {
+    width: auto;
+  }
+}
+button.payment-button-paypal {
+  @extend .btn;
+  width: 100%;
+  border: 2px solid;
+  border-radius: 60px;
+}
+button.payment-button-card {
+  @extend .btn;
+  @extend .btn--deep-violet;
+  width: 100%;
+  color: $colour-white;
+  background-color: $colour-deep-violet;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $colour-grey;
+    color: $colour-deep-violet;
+  }
+}
+.form__field--address-detail {
+  label.form__checkbox{
+    padding: 0;
+  }
+}
+
+.form__row {
+  &.form__nav {
+    padding: 40px 0 80px;
+
+    .form__field--wrapper {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.form__radio {
+  label {
+    min-width: 80px;
+  }
+  input[type="radio"] {
+    top: 45px;
+  }
+}

package/src/sass/themes/payin/rednoseday/components/form/images/drop-down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 9" style="enable-background:new 0 0 16 9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#2C0230;}
+</style>
+<polygon class="st0" points="14.4,0.3 8,6.7 1.6,0.3 0.9,1 8,8.1 8.7,7.4 15.1,1 "/>
+</svg>

package/src/sass/themes/payin/rednoseday/components/header/_header.scss

@@ -0,0 +1,36 @@
+header[role=banner] {
+  height: 90px;
+
+  .header__inner-home {
+    float: right;
+    margin: 28px 15px 0 0;
+    font-family: $font-bold;
+
+    a {
+      border-bottom:2px solid transparent;
+
+      &:hover {
+        border-color:inherit;
+      }
+      span {
+        color: $colour-black;
+      }
+    }
+  }
+
+  .header__inner-wrapper {
+    padding: 0 15px 0;
+    .block-branding {
+      float: left;
+
+      .site-logo {
+        margin-top: 10px;
+        margin-left: 0;
+        width: 70px;
+        height: 70px;
+        background: url($image-path + "rnd19-logo.svg") no-repeat 0 0;
+        transform: rotate(0);
+      }
+    }
+  }
+}

package/src/sass/themes/payin/rednoseday/components/header/cr-logo.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="447px" height="447px" viewBox="0 0 447 447" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title>CR19-logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="CR18-logo" fill-rule="nonzero">
+            <g id="Group">
+                <path d="M427.95,446.05 L18.13,446.05 C8.15737289,446.006188 0.0838122845,437.932627 0.04,427.96 L0.04,18.14 C0.0892372702,8.16963484 8.15963484,0.0992372702 18.13,0.05 L427.95,0.05 C437.957045,0.0774693977 446.062531,8.18295492 446.09,18.19 L446.09,427.96 C446.040569,437.949787 437.939886,446.028142 427.95,446.05" id="Shape" fill="#E53138"></path>
+                <path d="M77.63,183.65 C77.63,193.31 78.83,199.52 86.24,199.53 C93.65,199.54 94.87,193.32 94.88,183.66 L94.88,171.93 L119.55,171.93 L119.55,176.93 C119.55,202.28 111.42,220.05 86.75,220.04 C61.39,220.04 51.57,202.94 51.58,171.72 L51.58,156.9 C51.58,125.68 61.43,108.6 86.79,108.61 C111.46,108.61 119.56,126.4 119.55,151.76 L119.55,156.76 L94.89,156.76 L94.89,145.05 C94.89,135.39 93.69,129.17 86.27,129.17 C78.85,129.17 77.65,135.38 77.64,145.04 L77.63,183.65 Z" id="Shape" fill="#FFFFFF"></path>
+                <path d="M149.91,183.34 C149.91,193 151.45,199.56 158.91,199.56 C166.37,199.56 167.91,193.01 167.91,183.35 L167.91,145.4 C167.91,135.74 166.37,129.18 158.91,129.17 C151.45,129.16 149.91,135.73 149.91,145.39 L149.91,183.34 Z M194.04,171.11 C194.04,202.34 184.18,220.11 158.82,220.11 C133.46,220.11 123.63,202.33 123.65,171.11 L123.65,157.63 C123.65,126.4 133.5,108.63 158.86,108.63 C184.22,108.63 194.05,126.42 194.03,157.63 L194.04,171.11 Z" id="Shape" fill="#FFFFFF"></path>
+            </g>
+            <polygon id="Shape" fill="#FFFFFF" points="243.27 165.26 243.96 165.26 254.33 110.06 286.25 110.08 286.2 218.76 262.74 218.75 262.76 156.82 262.07 156.82 250.14 218.75 234.27 218.74 222.05 156.8 221.36 156.8 221.33 218.73 199.08 218.72 199.13 110.04 231.73 110.05"></polygon>
+            <rect id="Rectangle-path" fill="#FFFFFF" x="294.65" y="110.09" width="25.36" height="108.69"></rect>
+            <g id="Group" transform="translate(52.000000, 108.000000)" fill="#FFFFFF">
+                <path d="M299.91,75.78 C299.91,85.44 301.11,91.65 308.53,91.65 C315.95,91.65 317.16,85.45 317.16,75.78 L317.16,64.05 L341.84,64.05 L341.84,69.05 C341.84,94.41 333.72,112.17 309.05,112.16 C283.69,112.16 273.86,95.07 273.88,63.84 L273.88,49.05 C273.88,17.83 283.74,0.75 309.1,0.77 C333.77,0.77 341.87,18.55 341.86,43.91 L341.86,48.91 L317.17,48.91 L317.17,37.14 C317.17,27.48 315.97,21.27 308.55,21.27 C301.13,21.27 299.92,27.47 299.92,37.13 L299.91,75.78 Z" id="Shape"></path>
+                <path d="M28.04,170.05 C38.22,170.05 42.19,166.78 42.19,155.74 C42.19,145.91 38.19,141.08 28.05,141.07 L25.64,141.07 L25.64,170.07 L28.04,170.05 Z M42.33,229.41 C40.95,225.26 40.61,218.88 39.93,205.77 C39.41,195.42 36.83,190.07 28.93,190.07 L25.65,190.07 L25.65,229.41 L0.65,229.41 L0.7,120.72 L31.93,120.72 C56.25,120.72 67.11,133.51 67.1,152.83 C67.1,169.91 59.33,178.36 48.29,180.25 C59.67,182.84 63.46,190.95 64.29,204.58 C65.15,218.9 64.97,224.42 67.39,229.43 L42.33,229.41 Z" id="Shape"></path>
+            </g>
+            <polygon id="Shape" fill="#FFFFFF" points="179.86 337.4 124.83 337.37 124.88 228.69 179.91 228.71 179.9 249.59 149.71 249.58 149.7 271.83 172.13 271.84 172.12 292.54 149.69 292.53 149.68 316.51 179.87 316.52"></polygon>
+            <polygon id="Shape" fill="#FFFFFF" points="211.82 228.73 211.78 316.54 241.11 316.55 241.1 337.43 186.41 337.4 186.46 228.72"></polygon>
+            <rect id="Rectangle-path" fill="#FFFFFF" x="246.02" y="228.75" width="25.36" height="108.69"></rect>
+            <polygon id="Shape" fill="#FFFFFF" points="334.94 337.47 279.91 337.44 279.96 228.76 334.99 228.78 334.98 249.66 304.79 249.65 304.78 271.9 327.21 271.91 327.2 292.61 304.77 292.6 304.76 316.58 334.95 316.6"></polygon>
+            <polygon id="Shape" fill="#FFFFFF" points="341.49 337.47 341.54 228.79 394.5 228.81 394.5 249.69 366.89 249.68 366.88 274.86 387.07 274.87 387.06 295.4 366.87 295.39 366.85 337.48"></polygon>
+        </g>
+    </g>
+</svg>

package/src/sass/themes/payin/rednoseday/components/header/rnd19-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 790.29 747.45"><defs><style>.cls-1{fill:#e62731;}.cls-2{fill:#2a72b7;}.cls-3{fill:#fff;}</style></defs><title>RND19</title><g id="Layer_2" data-name="Layer 2"><g id="Livello_1" data-name="Livello 1"><path class="cls-1" d="M775.49,426.13c0,169.14-137.11,306.25-306.25,306.25S163,595.27,163,426.13,300.1,119.88,469.24,119.88,775.49,257,775.49,426.13"/><rect class="cls-2" x="43.93" y="43.65" width="306.27" height="306.27" rx="25.34" ry="25.34" transform="translate(-44.22 57.71) rotate(-15)"/><path class="cls-3" d="M287.24,15A25.36,25.36,0,0,1,311.7,33.79l30.44,113.62A305.08,305.08,0,0,1,469,120c169.13,0,306.25,137.11,306.25,306.24S638.17,732.45,469,732.45,162.79,595.34,162.79,426.2a307,307,0,0,1,6.6-63.44l-56.34,15.09a25.3,25.3,0,0,1-31-17.92L15.87,113.05A25.34,25.34,0,0,1,33.79,82L280.66,15.87a25.38,25.38,0,0,1,6.58-.87m0-15h0a40.28,40.28,0,0,0-10.46,1.38L29.9,67.53A40.39,40.39,0,0,0,1.38,116.94L67.53,363.81a40.32,40.32,0,0,0,49.41,28.53l33.71-9a323.65,323.65,0,0,0-2.86,42.89A321,321,0,1,0,352.17,126.88l-26-97A40.4,40.4,0,0,0,287.24,0Z"/><polygon class="cls-3" points="188.07 280.4 151.53 290.07 132.42 217.91 168.96 208.24 172.63 222.1 152.59 227.41 156.5 242.18 171.39 238.24 175.03 251.98 160.14 255.92 164.36 271.85 184.4 266.54 188.07 280.4"/><polygon class="cls-3" points="190.15 202.62 205.59 260.93 225.06 255.77 228.73 269.63 192.42 279.24 173.31 207.08 190.15 202.62"/><rect class="cls-3" x="222.14" y="193.13" width="17.42" height="74.65" transform="translate(-51.31 66.78) rotate(-14.83)"/><polygon class="cls-3" points="291.04 253.13 254.5 262.8 235.39 190.64 271.92 180.97 275.6 194.82 255.55 200.13 259.46 214.91 274.36 210.97 278 224.71 263.1 228.65 267.32 244.57 287.37 239.27 291.04 253.13"/><polygon class="cls-3" points="295.39 251.97 276.27 179.81 311.44 170.5 315.11 184.36 296.78 189.21 301.21 205.94 314.61 202.39 318.22 216.02 304.82 219.57 312.22 247.51 295.39 251.97"/><path class="cls-3" d="M93.12,196.33c1.7,6.42,3.6,10.33,8.52,9s4.64-5.64,2.94-12.06l-2.06-7.79,16.37-4.34.88,3.33c4.46,16.83,2.21,30.06-14.17,34.4-16.84,4.45-26.37-5.16-31.86-25.89l-2.61-9.85c-5.49-20.73-2-33.8,14.87-38.26,16.38-4.34,24.88,6,29.34,22.87l.88,3.32-16.37,4.34-2.07-7.79c-1.7-6.41-3.59-10.32-8.52-9s-4.63,5.64-2.93,12.06Z"/><path class="cls-3" d="M168.22,167.5c5.49,20.73,2.09,34.26-14.75,38.71s-26.49-5.6-32-26.34l-2.37-8.93c-5.49-20.73-2.08-34.26,14.75-38.72s26.49,5.61,32,26.34Zm-27.17,15.9c1.7,6.41,3.89,10.49,8.81,9.19s4.8-5.93,3.11-12.35L146.29,155c-1.7-6.41-3.88-10.49-8.81-9.19s-4.8,5.93-3.1,12.35Z"/><polygon class="cls-3" points="199.84 154.95 200.3 154.83 197.47 116.36 218.66 110.75 237.77 182.91 222.19 187.03 211.3 145.91 210.84 146.03 213.83 189.25 203.29 192.04 184.27 153.07 183.81 153.19 194.7 194.31 179.93 198.23 160.81 126.07 182.46 120.33 199.84 154.95"/><rect class="cls-3" x="233.52" y="105.79" width="17.42" height="74.65" transform="translate(-28.57 66.79) rotate(-14.83)"/><path class="cls-3" d="M275.23,148.1c1.7,6.42,3.59,10.33,8.52,9s4.63-5.64,2.94-12.05l-2.07-7.79L301,132.94l.88,3.33c4.46,16.83,2.2,30-14.18,34.39-16.84,4.46-26.37-5.15-31.86-25.88l-2.61-9.85c-5.49-20.73-2-33.8,14.88-38.26,16.37-4.34,24.88,6,29.34,22.87l.88,3.32L282,127.2l-2.06-7.79c-1.7-6.41-3.59-10.32-8.52-9s-4.63,5.64-2.93,12.06Z"/><path class="cls-3" d="M131.26,295.44c-1.64-2.51-3-6.68-5.76-15.27-2.16-6.78-4.82-9.87-10.09-8.48l-2.17.58,6.91,26.11-16.61,4.4L84.43,230.62l20.73-5.49c16.15-4.27,25.62,2.29,29,15.12,3,11.34-.66,18.32-7.66,21.52,8-.29,12,4.43,14.93,13.33,3.09,9.35,3.95,13,6.43,15.94Zm-19.94-36.88c6.76-1.79,8.82-4.67,6.87-12-1.72-6.52-5.21-9-12-7.24l-1.61.42,5.1,19.24Z"/><polygon class="cls-3" points="188.07 280.4 151.53 290.07 132.42 217.91 168.96 208.24 172.63 222.1 152.59 227.41 156.5 242.18 171.39 238.24 175.03 251.98 160.14 255.92 164.36 271.85 184.4 266.54 188.07 280.4"/><polygon class="cls-3" points="190.15 202.62 205.59 260.93 225.06 255.77 228.73 269.63 192.42 279.24 173.31 207.08 190.15 202.62"/><rect class="cls-3" x="222.14" y="193.13" width="17.42" height="74.65" transform="translate(-51.31 66.78) rotate(-14.83)"/><polygon class="cls-3" points="291.04 253.13 254.5 262.8 235.39 190.64 271.92 180.97 275.6 194.82 255.55 200.13 259.46 214.91 274.36 210.97 278 224.71 263.1 228.65 267.32 244.57 287.37 239.27 291.04 253.13"/><polygon class="cls-3" points="295.39 251.97 276.27 179.81 311.44 170.5 315.11 184.36 296.78 189.21 301.21 205.94 314.61 202.39 318.22 216.02 304.82 219.57 312.22 247.51 295.39 251.97"/><path class="cls-3" d="M397.71,346.57c-1.67-5-2.09-12.74-2.92-28.62-.63-12.53-3.76-19-13.37-19h-4v47.62H347.17V215H385c29.45,0,42.6,15.46,42.6,38.85,0,20.67-9.39,30.91-22.76,33.2,13.78,3.14,18.38,13,19.42,29.45,1,17.34.84,24,3.76,30.08Zm-17.33-71.85c12.32,0,17.12-4,17.12-17.33,0-11.91-4.8-17.75-17.12-17.75h-2.93v35.08Z"/><polygon class="cls-3" points="501.29 346.57 434.67 346.57 434.67 214.99 501.29 214.99 501.29 240.26 464.75 240.26 464.75 267.2 491.9 267.2 491.9 292.27 464.75 292.27 464.75 321.3 501.29 321.3 501.29 346.57"/><path class="cls-3" d="M592.14,291.22c0,35.09-13.37,55.35-42.82,55.35H509.23V215h40.09c29.45,0,42.82,20.26,42.82,55.35Zm-31.33-31.53c0-12.95-4.38-20.47-15.25-20.47h-5.64v83.12h5.64c10.87,0,15.25-7.52,15.25-20.47Z"/><polygon class="cls-3" points="358.14 360.34 386.54 360.34 386.54 491.92 363.36 491.92 333.08 424.04 332.24 424.04 332.24 491.92 303.84 491.92 303.84 360.34 331.82 360.34 357.3 420.91 358.14 420.91 358.14 360.34"/><path class="cls-3" d="M510,447.43v5.23c0,9.81,4.18,16.28,12.32,16.28,7.1,0,10.86-4,10.86-11.27,0-7.52-4.8-10.45-12.74-14.83l-11.07-6.06c-14-7.73-26.1-17.12-26.1-39.68,0-23.39,15.24-38.43,37.8-38.43,24,0,37.8,13.79,37.8,40.73v5.22H531.89v-5.43c0-10.65-3.34-15.87-10.86-15.87-6.48,0-9.82,4.59-9.82,11.69,0,6.69,3.76,10.86,10,14.2l12.32,6.69c17.33,9.4,27.77,18.59,27.77,39.05,0,25.48-15.66,38.64-39.05,38.64S483,480.64,483,452.45v-5Z"/><path class="cls-3" d="M478.85,434.28c0,37.8-11.91,59.31-42.61,59.31s-42.6-21.51-42.6-59.31V418c0-37.8,11.9-59.32,42.6-59.32s42.61,21.52,42.61,59.32ZM425.38,449.1c0,11.7,1.88,19.64,10.86,19.64s10.86-7.94,10.86-19.64V403.16c0-11.7-1.88-19.63-10.86-19.63s-10.86,7.93-10.86,19.63Z"/><polygon class="cls-3" points="634.64 491.92 568.01 491.92 568.01 360.34 634.64 360.34 634.64 385.61 598.09 385.61 598.09 412.56 625.24 412.56 625.24 437.62 598.09 437.62 598.09 466.65 634.64 466.65 634.64 491.92"/><path class="cls-3" d="M429.49,581.93c0,35.08-13.37,55.34-42.82,55.34H346.58V505.7h40.09c29.45,0,42.82,20.25,42.82,55.34Zm-31.33-31.54c0-12.95-4.39-20.47-15.25-20.47h-5.64V613h5.64c10.86,0,15.25-7.52,15.25-20.46Z"/><path class="cls-3" d="M492.77,505.7l28.4,131.57H490.68l-4.39-23.39H460.4l-4.6,23.39h-28L456.22,505.7Zm-28,85h17.34l-7.94-43.44h-.84Z"/><polygon class="cls-3" points="564.96 505.69 595.25 505.69 564.54 591.12 564.54 637.27 534.68 637.27 534.68 591.12 503.98 505.69 535.72 505.69 550.97 554.15 564.96 505.69"/></g></g></svg>

package/src/sass/themes/payin/rednoseday/components/just-in-time-block/_just-in-time.scss

@@ -0,0 +1,21 @@
+.form__row--just-in-time-block {
+  padding-top: 15px;
+  @include breakpoint($screen-md) {
+    padding-top: 30px;
+  }
+  .toggle-link {
+    font-family: $body-font;
+  }
+  .just-in-time--content {
+    p {
+      @extend .text--body-small;
+      font-weight: 500;
+    }
+    strong {
+      @extend p;
+      color: $colour-black;
+      font-weight: 800;
+      text-decoration: none;
+    }
+  }
+}

package/src/sass/themes/payin/rednoseday/components/promo-header/_promo-header.scss

@@ -0,0 +1,28 @@
+.promo-header {
+  background-color: $colour-black;
+
+  .promo-header__content {
+    top: 0;
+    transform: translate(0);
+
+    .promo-header__content-inner {
+      @include breakpoint($screen-md) {
+        margin-top:100px;
+      }
+    }
+  }
+
+  &.promo-header--small {
+    min-height: 325px;
+  }
+
+  h1 {
+    color: $colour-white;
+    margin-bottom: 36px;
+  }
+
+  p {
+    @include font-size($p-large-font-size);
+    color: $colour-white;
+  }
+}

package/src/sass/themes/payin/rednoseday/pages/failure-page.twig

@@ -0,0 +1,14 @@
+<section id="payin-step-four" class="content">
+  <div class="promo-header promo-header--default promo-header--failure">
+    <div class="promo-header__content">
+      <div class="promo-header__content-inner promo-header__content-inner--centre">
+        <h1>Payment Failed</h1>
+      </div>
+    </div>
+  </div>
+  <div class="inner-content">
+    <p>Sorry, your payment has failed. Please try again to pay in your fundraising money.</p>
+    <a href="/" class="btn btn--ruby">Try again</a>
+    <p class="contact-information">If you continue to experience issues, please <a href="http://www.comicrelief.com/contact-us?_ga=2.216239263.884518803.1517826958-841508478.1506692348">contact us.</a>
+  </div>
+</section>