mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-02 17:48:50 -04:00
a4e5c4a3bc
‘How much does it cost’ is one of the user needs that we identifed for the product page. Cost is not the primary reason someone would use Notify (they’re more likely to cite ease, or that it’s ‘official’). However if you _don’t_ mention cost then it looks like we’re hiding something or that there’s a catch. So putting it on the page allays fears that people might have, rather than pushing them towards using it. Visually I’ve dropped the size of the `<h2>`s on this page so that there’s enough difference between them and the big numbers. The idea of the big numbers being big is to catch people’s attention as they scroll down the page, by breaking up the rythmn.
106 lines
1.6 KiB
SCSS
106 lines
1.6 KiB
SCSS
.product-page {
|
|
|
|
&-intro {
|
|
|
|
margin: -10px 0 $gutter * 1.5 0;
|
|
padding: $gutter * 2 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 -14px top -10px;
|
|
|
|
@include ie-lte(8) {
|
|
background-image: none;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
h1 {
|
|
@include bold-48;
|
|
margin: 0 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;
|
|
|
|
&: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;
|
|
}
|
|
|
|
}
|