mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 13:28:25 -04:00
e3dd8fd018
The message text in our previous illustration was white on light blue, which didn’t meet WCAG AA colour contrast. WCAG AA requires a contrast ratio of 4.5:1. The text in our image was only 3.8:1. The text in this new image has a contrast ratio of 19.8:1, so easily passes WCAG AAA. Required a slight tweak to the positioning of the image because it’s dimensions weren’t exactly the same as the previous one.
106 lines
1.6 KiB
SCSS
106 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 85px;
|
|
|
|
@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;
|
|
|
|
&: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;
|
|
}
|
|
|
|
}
|