[FixMyStreet.com] Add information for councils.

Fixes #765.

16 files changed, 579 insertions, 1 deletions

diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index c33f927f8..eb86d3d3c 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -88,4 +88,3 @@
     }
   }
 }
-
diff --git a/web/cobrands/fixmystreet/fmsforcouncils.scss b/web/cobrands/fixmystreet/fmsforcouncils.scss
new file mode 100644
index 000000000..afc5aeacb
--- /dev/null
+++ b/web/cobrands/fixmystreet/fmsforcouncils.scss
@@ -0,0 +1,579 @@
+/*
+    FixMyStreet for Councils page.
+    Todo: This should be in a separate stylesheet
+*/
+$fms-orange: #f4a140;
+$fms-red: #e04b4b;
+$fms-blue: #4faded;
+$fms-green: #62b356;
+
+.fms-for-councils {
+  background-color: #1a1a1a;
+  a {
+    color: $fms-orange;
+    &:hover,
+    &:active,
+    &:focus {
+      color: darken($fms-orange, 5%);
+      text-decoration: underline;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  .wrapper {
+    display: block;
+    @media only screen and (min-width: 48em) {
+      display: table;
+    }
+  }
+  .content {
+      background-color: transparent;
+      color: #c2c2c2;
+      padding: 0 !important;
+      margin: 0;
+      h1,h2,h3,h4,h5,h6 {
+        color: #fff;
+        font-family: MuseoSans,Helmet,Freesans,sans-serif;
+        font-weight: bold;
+      }
+  }
+  .container {
+    width: 100%;
+    padding: 0;
+  }
+  #site-header {
+    .container {
+      @media only screen and (min-width: 60em) {
+        max-width: 60em;
+      }
+    }
+  }
+
+  .fixed-container {
+    @media only screen and (min-width: 60em) {
+      width: 100%;
+    }
+    max-width: 58em; /*(60em - 1em + 1em padding)*/
+    padding: 0;
+    width: auto;
+    margin: 0 auto;
+    position: relative;
+    padding: 0 1em;
+  }
+
+  .button-base {
+    padding: 0.5em 1.25em;
+    border-radius: 3px;
+    display: inline-block;
+    font-weight: bold;
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+        color: #fff;
+    }
+  }
+
+  .button {
+      @extend .button-base;
+      color: #fff;
+      background-color: $fms-orange;
+      border: none;
+      width: 100%;
+      padding: 0.75em 0;
+       @media only screen and (min-width: 48em) {
+        width: auto;
+        padding: 0.5em 1.25em;
+      }
+      &:hover,
+      &:active,
+      &:focus {
+          background-color: darken($fms-orange, 5%);
+      }
+  }
+
+  .councils-section {
+    border-bottom: 1px solid #161616;
+    border-top: 1px solid #3a3a3a;
+    padding: 2.5em 0;
+    background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    background-image: gradient( 90deg, rgba(0,0,0,0) 58%, rgba(0,0,0,0.2) 100%);
+    @media only screen and (min-width: 48em) {
+      padding: 4em 0;
+    }
+
+    &.photo-break {
+      padding: 0;
+      height: 10em;
+      background-size: cover;
+      background-position: center center;
+      background-repeat: no-repeat;
+      @media only screen and (min-width: 48em) {
+        height: 25em;
+      }
+    }
+
+    h2 {
+      font-size: 1.6875em;
+      margin-top: 0;
+    }
+
+    p {
+      font-size: 1.0625em;
+    }
+  }
+
+  .photo-break--street-scene {
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg);
+  }
+
+  .photo-break--highway {
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/highway.jpg);
+  }
+
+  .photo-break--sunset {
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg);
+  }
+
+  .section-content {
+    @media only screen and (min-width: 60em) {
+      max-width: 60%;
+    }
+  }
+
+  .hero {
+    text-align: center;
+    border-top: 0;
+    background-image: url(/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg);
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    padding: 4em 0;
+    @media only screen and (min-width: 48em) {
+      padding: 9em 0;
+    }
+  }
+
+    .hero-title {
+      color: #fff;
+      text-shadow: 0px 1px 7px rgba(0,0,0, 0.7);
+      font-size: 2em;
+      font-weight: bold;
+      @media only screen and (min-width: 48em) {
+        font-size: 3.375em;
+      }
+    }
+
+    p.hero-intro {
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0,0,0, 0.7);
+      max-width: 37em;
+      margin-left: auto;
+      margin-right: auto;
+      font-size: 1.1em;
+      @media only screen and (min-width: 48em) {
+        font-size: 1.25em;
+      }
+    }
+
+  /* Pricing tables */
+  .product-pricing {
+    margin-bottom: 3em;
+  }
+
+    .pricing-table {
+      color: #fff;
+      border: 1px solid #444;
+    }
+
+    .pricing-table-column {
+      width: 100%;
+      display: inline-block;
+      vertical-align: top;
+      @media only screen and (min-width: 48em) {
+       width: 33.333%;
+      }
+    }
+
+    .pricing-table-column-wrapper {
+      border-right: 1px solid #555;
+      min-height: 472px;
+      &.last {
+        border-right: 0;
+      }
+    }
+
+    .pricing-product-header {
+      background-color: $fms-orange;
+      color: #fff;
+      padding: 0.2em 0;
+      width: 100%;
+      text-align: center;
+      font-size: 1.2em;
+      line-height: 1em;
+      position: relative;
+      &:after {
+        top: 100%;
+        left: 50%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-color: rgba(0,0,0,0);
+        border-top-color: $fms-orange;
+        border-width: 10px;
+        margin-left: -10px;
+      }
+      h3 {
+        font-weight: normal;
+      }
+    }
+
+    .pricing-header {
+      background-color: $fms-red;
+      padding: 1em;
+    }
+
+    .mobile-web {
+      .pricing-header {
+        background-color: $fms-blue;
+      }
+    }
+
+    .mobile-web-apps {
+      .pricing-header {
+        background-color: $fms-green;
+      }
+    }
+
+    .pricing-header-price {
+      margin-bottom: 0.5em;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    .pricing-price {
+      font-size: 2.25em;
+      line-height: 1.15em;
+      .asterisk {
+        color: rgba(255,255,255,0.5);
+      }
+    }
+
+    .pricing-note {
+      font-size: 0.388888889em;
+    }
+
+    .pricing-label {
+      color: rgba(255,255,255,0.7);
+      display: block;
+    }
+
+    .pricing-content {
+      padding: 1.5em 1em;
+      ul {
+        list-style: none outside none;
+        margin: 0;
+      }
+      li {
+        list-style: none outside none
+      }
+    }
+
+    .pricing-extras-item {
+      border-bottom: 1px solid #444;
+      overflow: hidden;
+      &:last-of-type {
+        border-bottom: 0;
+      }
+    }
+
+    .pricing-extras-column--primary {
+      @media only screen and (min-width: 32em) {
+       float: left;
+        width: 66.6%;
+      }
+
+    }
+    .pricing-extras-column--secondary {
+      @media only screen and (min-width: 32em) {
+        float: right;
+        width: 33.4%;
+      }
+    }
+
+    .pricing-extras-description {
+      padding: 1.5em 1em;
+      h4 {
+        font-weight: normal;
+        font-size: 1.125em;
+        margin: 0 0 0.25em;
+      }
+      p {
+        color: #bab8b3;
+        font-size: 0.875em;
+        margin-bottom: 0;
+      }
+    }
+
+    .pricing-extras-price {
+      background-color: #2b2b2b;
+      padding: 1.5em 1em;
+      .pricing-price {
+        font-size: 1.3125em;
+        margin-bottom: 0.5em;
+        display: inline-block;
+      }
+      .pricing-label {
+        font-size: 0.875em;
+      }
+    }
+
+    .small-print {
+      margin: 0.66em 0 0;
+      small {
+        font-style: normal;
+        color: #bab8b3;
+      }
+    }
+
+    .call-to-action {
+      background-color: $fms-orange;
+      text-align: center;
+      background-image: none;
+      a {
+        color: #fff;
+        text-decoration: underline;
+      }
+      h2 {
+        font-size: 2.25em;
+        margin-bottom: 0.25em;
+        margin-top: 0;
+      }
+      p {
+        max-width: 37em;
+        margin: 0 auto 2em;
+        color: #fff;
+      }
+      .button {
+        background-color: darken($fms-orange, 7.5%);
+        font-size: 1.125em;
+        text-decoration: none;
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: darken($fms-orange, 12.5%);
+        }
+      }
+    }
+
+    .call-to-action--mini {
+      text-align: left;
+      padding: 2em 0;
+      p {
+        margin: 0;
+        font-size: 1.3125em;
+      }
+    }
+
+    .flush-image {
+      position: relative;
+      width: 66%;
+      margin-left: 17%;
+      @media only screen and (min-width: 60em) {
+         position: absolute;
+         margin: 0;
+         width: auto;
+      }
+    }
+
+    .flush-image--bottom {
+      bottom: -41px;
+      @media only screen and (min-width: 48em) {
+        bottom: -65px;
+      }
+      @media only screen and (min-width: 60em) {
+        bottom: -82px;
+        right: 2em;
+      }
+    }
+
+    .flush-image--bottom-right {
+      bottom: -41px;
+      @media only screen and (min-width: 48em) {
+        bottom: -65px;
+      }
+      @media only screen and (min-width: 60em) {
+        bottom: -82px;
+        right: -1em;
+      }
+    }
+
+    .case-study-button {
+      background-color: #222;
+      padding: 1em 0;
+      border-radius: 5px;
+      display: inline-block;
+      color: #fff;
+      margin-right: 0.5em;
+      margin-bottom: 1em;
+      width: 100%;
+      @media only screen and (min-width: 48em) {
+        width: auto;
+        padding: 1em;
+      }
+      &:hover,
+      &:active,
+      &:focus {
+        color: #fff;
+        background-color: #1b1b1b;
+        text-decoration: none;
+      }
+    }
+
+    .case-study-button-label {
+      display: block;
+      font-size: 0.875em;
+      color: #bab8b3;
+      @media only screen and (max-width: 48em) {
+        margin-left: 30px;
+      }
+    }
+
+    .case-study-button-name {
+      font-size: 1.5em;
+      display: inline-block;
+      background-repeat: no-repeat;
+      background-image: url(/cobrands/fixmystreet/images/fms-for-councils/download-icon.png);
+      background-position: 0 7px;
+      padding-left: 30px;
+      @media only screen and (max-width: 48em) {
+        margin-left: 30px;
+      }
+    }
+
+    .case-study-button-format {
+      color: #6c6b68;
+      font-size: 0.875em;
+    }
+
+  .client-logos {
+    margin: 2em 0 0;
+    @media only screen and (min-width: 60em) {
+      position: absolute;
+      right: 0;
+      top: 3em;
+      width: 35%;
+      margin-top: 0;
+    }
+    a {
+      text-align: center;
+      display: inline-block;
+      width: 50%;
+      margin-bottom: 1em;
+      vertical-align: middle;
+      opacity: 0.5;
+      &:hover,
+      &:active,
+      &:focus {
+        opacity: 1;
+      }
+    }
+    img {
+      max-width: 100%;
+    }
+  }
+}
+
+ .ie8, .ie7 {
+    .fms-for-councils {
+      .wrapper {
+        display: table;
+      }
+
+      #site-header {
+        .container {
+          max-width: 60em;
+        }
+      }
+
+      .fixed-container {
+        width: 100%;
+      }
+
+      .button {
+        width: auto;
+        padding: 0.5em 1.25em;
+      }
+      .councils-section {
+        padding: 4em 0;
+      }
+
+      .photo-break {
+        height: 25em;
+        background-size: 100%;
+      }
+
+      .section-content {
+        max-width: 60%;
+      }
+
+      .pricing-table-column {
+        width: 33.333%;
+        display: block;
+        float: left;
+      }
+
+      .pricing-extras-column--primary {
+        float: left;
+        width: 66.6%;
+      }
+
+      .pricing-extras-column--secondary {
+        float: right;
+        width: 33.4%;
+      }
+
+      .flush-image {
+        position: absolute;
+        margin: 0;
+        width: auto;
+      }
+
+      .flush-image--bottom {
+        bottom: -82px;
+        right: 2em;
+      }
+
+      .flush-image--bottom-right {
+        bottom: -82px;
+        right: -1em;
+      }
+
+      .client-logos {
+        position: absolute;
+        right: 0;
+        top: 3em;
+        width: 35%;
+        margin-top: 0;
+      }
+
+      .case-study-button {
+        width: auto;
+        padding: 1em;
+      }
+
+      .case-study-button-name {
+        margin-left: 30px;
+      }
+    }
+
+  }
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/barnet-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/barnet-logo.png
new file mode 100644
index 000000000..ad90a663c
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/barnet-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/bromley-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/bromley-logo.png
new file mode 100644
index 000000000..96f6cbdc0
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/bromley-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/download-icon.png b/web/cobrands/fixmystreet/images/fms-for-councils/download-icon.png
new file mode 100644
index 000000000..2bd373f70
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/download-icon.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/hart-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/hart-logo.png
new file mode 100644
index 000000000..8ec4dd68e
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/hart-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/hart.png b/web/cobrands/fixmystreet/images/fms-for-councils/hart.png
new file mode 100644
index 000000000..362df3dc8
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/hart.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/highway.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/highway.jpg
new file mode 100644
index 000000000..98f53617b
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/highway.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/iphone.png b/web/cobrands/fixmystreet/images/fms-for-councils/iphone.png
new file mode 100644
index 000000000..68557a2a2
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/iphone.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/oxfordshire-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/oxfordshire-logo.png
new file mode 100644
index 000000000..85655c4b1
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/oxfordshire-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/responsive.png b/web/cobrands/fixmystreet/images/fms-for-councils/responsive.png
new file mode 100644
index 000000000..dc7468397
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/responsive.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/stevenage-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/stevenage-logo.png
new file mode 100644
index 000000000..96c60299d
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/stevenage-logo.png
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg
new file mode 100644
index 000000000..296db5f3b
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/street-crossing.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg
new file mode 100644
index 000000000..9c13bbaa8
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/street-scene.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg b/web/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg
new file mode 100644
index 000000000..0f0bb1800
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/street-sunset.jpg
diff --git a/web/cobrands/fixmystreet/images/fms-for-councils/warwickshire-logo.png b/web/cobrands/fixmystreet/images/fms-for-councils/warwickshire-logo.png
new file mode 100644
index 000000000..62087ba52
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/fms-for-councils/warwickshire-logo.png