Files
notifications-admin/app/assets/stylesheets/views/product-page.scss
Chris Hill-Scott 893d9deb7c Update product page to talk about letters
Letters is now a mature enough feature that we should:
- be raising awareness amongst our users that it’s a thing we offer
- not have letters be a surprise to anyone creating a Notify account for
  the first time

Shouldn’t be merged until:
- [ ] https://github.com/alphagov/notifications-api/pull/1600
2018-01-24 16:34:05 +00:00

107 lines
1.6 KiB
SCSS

.product-page {
&-intro {
margin: -10px 0 $gutter * 1.5 0;
padding: 0 0 $gutter * 2 0;
background: $govuk-blue;
color: $white;
&-wrapper {
@extend %site-width-container;
@include media(desktop) {
background-image: file-url('product/proposition-illustration.png');
background-size: 320px;
background-repeat: no-repeat;
background-position: right -6px top 100px;
@include ie-lte(8) {
background-image: none;
}
}
}
h1 {
@include bold-48;
margin: 20px 0 $gutter 0;
}
p {
@include core-24;
margin: $gutter-half 0 $gutter;
}
.button-container {
line-height: 45px;
}
.button {
@include box-shadow(0 2px 0 darken($govuk-blue, 15%));
background: $white;
margin-right: 15px;
padding-right: 1.25em;
&:link,
&:visited,
&:hover {
color: $govuk-blue;
}
&:hover {
background: $light-blue-25;
outline: none;
}
}
a {
&:link,
&:visited {
color: $white;
}
&:hover,
&:active {
color: $light-blue-25;
}
}
}
&-section {
@extend %site-width-container;
margin-bottom: $gutter-half;
h2 {
@include bold-27;
margin: 0 0 $gutter;
}
.with-keyline {
border-top: 1px solid $border-colour;
padding: $gutter * 1.5 0 0 0;
}
img {
width: 100%;
margin: 0 0 $gutter * 1.5 0;
}
}
&-big-number {
@include bold-48($tabular-numbers: true);
margin: 0 0 0 0;
}
}