diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 80ac86219f1184a411ca22b21bb50d7d1641bd6d..b038e87b5681b3ff1224b89ee79dd4b0f7133207 100644
--- a/src/components/cta-button/cta-button.scss
+++ b/src/components/cta-button/cta-button.scss
@@ -15,8 +15,13 @@
&.transparent-background {
background-color: var(--grayscale-white);
+ border: 3px solid var(--grayscale-black);
color: var(--grayscale-black);
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--grayscale-black);
+ }
+
.link-icon svg {
background-color: var(--grayscale-white);
fill: var(--grayscale-black);
@@ -29,8 +34,13 @@
&.black-background {
background-color: var(--grayscale-black);
+ border: 3px solid var(--grayscale-white);
color: var(--grayscale-white);
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--grayscale-white);
+ }
+
.link-icon svg {
background-color: var(--grayscale-black);
fill: var(--grayscale-white);
@@ -39,12 +49,33 @@
.text {
color: var(--grayscale-white);
}
+
+ &:hover {
+ background-color: var(--brand-main-active);
+
+ .link-icon svg {
+ background-color: var(--brand-main-active);
+ }
+ }
+
+ &:focus {
+ background-color: var(--brand-main);
+
+ .link-icon svg {
+ background-color: var(--brand-main);
+ }
+ }
}
&.blue-background {
background-color: var(--brand-main-light);
+ border: 3px solid var(--grayscale-white);
color: var(--grayscale-white);
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--grayscale-white);
+ }
+
.link-icon svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
@@ -53,19 +84,64 @@
.text {
color: var(--grayscale-white);
}
+
+ &:hover {
+ background-color: var(--brand-main);
+
+ .link-icon svg {
+ background-color: var(--brand-main);
+ }
+ }
+
+ &:focus {
+ background-color: var(--brand-main-active);
+
+ .link-icon svg {
+ background-color: var(--brand-main-active);
+ }
+ }
}
&.white-background {
- background-color: var(--brand-main-light);
- color: var(--grayscale-white);
+ background-color: var(--grayscale-white);
+ border: 3px solid var(--brand-main-light);
+ color: var(--brand-main-light);
+
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--brand-main-light);
+ }
.link-icon svg {
- background-color: var(--brand-main-light);
- fill: var(--grayscale-white);
+ background-color: var(--grayscale-white);
+ fill: var(--brand-main-light);
}
.text {
- color: var(--grayscale-white);
+ color: var(--brand-main-light);
+ }
+
+ &:hover {
+ border-color: var(--brand-main);
+
+ .text {
+ color: var(--brand-main);
+ }
+
+ .link-icon svg {
+ fill: var(--brand-main);
+ }
+ }
+
+ &:focus {
+ border-color: var(--brand-main-active);
+
+ .text {
+ color: var(--brand-main-active);
+ }
+
+ .link-icon svg {
+ fill: var(--brand-main-active);
+ }
}
}
@@ -77,11 +153,11 @@
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
display: flex;
- justify-content: center;
height: 100%;
+ justify-content: center;
max-width: 278px;
-
padding: 14px 12px;
+
@include breakpoint($narrow) {
padding: 15px 16px;
}
@@ -100,10 +176,12 @@
@include breakpoint($narrow) {
@include font-size(18px, 18px); //button medium
}
+
@include breakpoint($extrawide) {
// with sidebar on page
@include font-size(18px, 18px); //button medium
}
+
@include breakpoint($xlarge) {
// with sidebar on page
@include font-size(20px, 20px); //button large
@@ -116,9 +194,11 @@
@include breakpoint($narrow) {
margin-left: 10px; //button medium
}
+
@include breakpoint($extrawide) {
margin-left: 10px; //button medium
}
+
@include breakpoint($xlarge) {
margin-left: 12px; //button large
}
@@ -132,11 +212,13 @@
height: 18px;
width: 18px;
}
+
@include breakpoint($extrawide) {
//button medium
height: 18px;
width: 18px;
}
+
@include breakpoint($xlarge) {
//button large
height: 22px;
@@ -145,25 +227,6 @@
}
}
}
-
- &.blue-background,
- &.black-background {
- border: 3px solid var(--grayscale-white);
- @include breakpoint($xlarge) {
- border: 4px solid var(--grayscale-white);
- }
- }
-
- &.transparent-background {
- border: 3px solid var(--grayscale-black);
- @include breakpoint($xlarge) {
- border: 4px solid var(--grayscale-black);
- }
- }
-
- &.white-background {
- border: none;
- }
}
.hy-cta-button.large {
@@ -194,13 +257,19 @@
&.blue-background,
&.black-background {
@include breakpoint($extrawide) {
- border: 4px solid var(--grayscale-white);
+ border-width: 4px;
}
}
&.transparent-background {
@include breakpoint($extrawide) {
- border: 4px solid var(--grayscale-black);
+ border-width: 4px;
+ }
+ }
+
+ &.white-background {
+ @include breakpoint($extrawide) {
+ border-width: 4px;
}
}
}
diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx
index 5f33549f906de86ea755aeb5b2f10d626336b4f4..ee5ccfae5f5f66fc841203fcda0108403592e94f 100644
--- a/src/components/heading/heading.tsx
+++ b/src/components/heading/heading.tsx
@@ -68,7 +68,9 @@ export class Heading {
) : (
<div class={containerSectionClass}>
<HeadingVarians.default class={classAttributes.join(' ')}>
- <slot />
+ <span>
+ <slot />
+ </span>
</HeadingVarians.default>
<span class={sectionClassAttributes}></span>
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 110d1457dad8769b60112d5fef9553c1bb67381d..d23cc11f82449e3f417ba6cea9a3475b87916716 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -3,337 +3,500 @@
}
.hy-hero {
+ overflow: hidden;
position: relative;
- @include breakpoint($wide) {
- margin-left: 0;
- margin-right: 0;
+ @include breakpoint($extrawide) {
+ margin-left: 8px;
+ margin-right: 8px;
+ margin-top: 8px;
}
@include breakpoint($xlarge) {
- margin-left: -32px;
- padding-left: 32px;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 24px;
}
- // No sidebar, >1200px styles
- &__large {
- @include breakpoint($xlarge) {
- margin-left: 0;
- padding-left: 0;
+ &--blue {
+ .hy-hero__content-container,
+ .hy-hero__spacer-box {
+ background-color: var(--brand-main-light);
}
- }
- &__desktop-container {
- @include breakpoint($wide) {
- display: flex;
- }
- }
+ .hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ span {
+ color: var(--grayscale-white);
+ }
+ }
- &__image-container {
- background: transparent;
- background-position: 50% 50%;
- background-size: cover;
- position: relative;
+ h1 {
+ color: var(--grayscale-white);
+ }
- @include breakpoint($wide) {
- background: white;
- order: 2;
- padding: 6px 0;
- width: 60%;
- z-index: 1;
+ &--overlay {
+ span {
+ background-color: var(--brand-main-light);
+ box-shadow: 24px 0 0 var(--brand-main-light), -24px 0 0 var(--brand-main-light);
+ color: var(--brand-main-light);
+ display: inline;
+ position: relative;
+
+ @include breakpoint($narrow) {
+ box-shadow: 48px 0 0 var(--brand-main-light), -48px 0 0 var(--brand-main-light);
+ }
+
+ @include breakpoint($wide) {
+ box-shadow: 32px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: 40px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
+ }
+ }
+ }
}
- img.hy-image__image {
- height: 100%;
- min-height: 205px;
- object-fit: cover;
- width: 100%;
+ .hy-hero__description {
+ background-color: var(--brand-main-light);
+ color: var(--grayscale-white);
}
}
- &__content {
- display: none;
- margin-right: 24px;
- margin-top: -24px;
- min-height: 24px;
- max-width: 100%;
- position: relative;
-
- @include breakpoint($narrow) {
- margin-right: 48px;
- margin-top: -40px;
- min-height: 40px;
- max-width: 87%; //7col (out of 8) - 32px (1 margin)
+ &--black {
+ .hy-hero__content-container,
+ .hy-hero__spacer-box {
+ background-color: var(--grayscale-black);
}
- @include breakpoint($wide) {
- display: none;
+ .hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ span {
+ color: var(--grayscale-white);
+ }
+ }
+
+ h1 {
+ color: var(--grayscale-white);
+ }
+
+ &--overlay {
+ span {
+ background-color: var(--grayscale-black);
+ box-shadow: 24px 0 0 var(--grayscale-black), -24px 0 0 var(--grayscale-black);
+ color: var(--grayscale-black);
+ display: inline;
+ position: relative;
+
+ @include breakpoint($narrow) {
+ box-shadow: 48px 0 0 var(--grayscale-black), -48px 0 0 var(--grayscale-black);
+ }
+
+ @include breakpoint($wide) {
+ box-shadow: 32px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: 40px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
+ }
+ }
+ }
}
- }
- &__content--bottom {
- @include breakpoint($extrawide) {
- margin-right: 32px;
+ .hy-hero__description {
+ background-color: var(--grayscale-black);
+ color: var(--grayscale-white);
}
}
- &__content--container {
- position: relative;
+ &--white {
+ border-bottom: 1px solid rgba(16, 126, 171, 0.1);
+ box-shadow: inset 0 -2rem 2rem -2rem rgba(14, 104, 139, 0.1);
+ padding-bottom: 2rem;
+
+ @include breakpoint($narrow) {
+ box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1);
+ padding-bottom: 40px;
+ }
@include breakpoint($wide) {
- margin-left: 32px;
- margin-right: -32px;
- padding-bottom: 44px;
- padding-top: 20px;
+ background-color: var(--grayscale-white);
+ border-bottom: 1px solid rgba(16, 126, 171, 0.1);
+ border-top: 1px solid rgba(16, 126, 171, 0.1);
+ box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1);
+ padding: 6px 0;
}
@include breakpoint($extrawide) {
- padding-bottom: 44px;
- padding-top: 20px;
- margin-left: 0;
- margin-right: 0;
+ box-shadow: inset 0 -6px 6px -6px rgba(14, 104, 139, 0.1), inset 0 6px 6px -6px rgba(14, 104, 139, 0.1);
+ margin: 0;
}
+
@include breakpoint($xlarge) {
- padding-bottom: 78px;
- padding-top: 48px;
+ box-shadow: inset 0 -12px 12px -12px rgba(14, 104, 139, 0.1), inset 0 12px 12px -12px rgba(14, 104, 139, 0.1);
+ margin-left: -32px;
+ margin-right: -32px;
+ padding: 12px 0;
}
- // No sidebar, large screens
- &__large {
+ .hy-hero__content-container {
+ @include breakpoint(max-width 959px) {
+ padding-bottom: 0;
+ }
+
@include breakpoint($extrawide) {
- padding-bottom: 78px;
- padding-top: 48px;
+ padding-left: 32px; // Original 24px + 8px
+ padding-right: 8px;
}
+
@include breakpoint($xlarge) {
- padding-bottom: 92px;
- padding-top: 56px;
+ padding-left: 0;
+ }
+ }
+
+ .hy-hero__image-container {
+ @include breakpoint($wide) {
+ padding: 0;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-right: 8px;
}
}
+
+ .hy-hero__content-container,
+ .hy-hero__spacer-box {
+ background-color: var(--grayscale-white);
+ }
+
+ .hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ span {
+ color: var(--grayscale-black);
+ }
+ }
+
+ h1 {
+ color: var(--grayscale-black);
+ }
+
+ &--overlay {
+ span {
+ background-color: var(--grayscale-white);
+ box-shadow: 24px 0 0 var(--grayscale-white), -24px 0 0 var(--grayscale-white);
+ color: var(--grayscale-white);
+ display: inline;
+ position: relative;
+
+ @include breakpoint($narrow) {
+ box-shadow: 48px 0 0 var(--grayscale-white), -48px 0 0 var(--grayscale-white);
+ }
+
+ @include breakpoint($wide) {
+ box-shadow: 32px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: 40px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
+ }
+ }
+ }
+ }
+
+ .hy-hero__description {
+ background-color: var(--grayscale-white);
+ color: var(--grayscale-black);
+ }
}
- &__content-wrap-helper {
- padding: 0 1rem;
- padding-bottom: 32px;
+ &--fp_white {
+ border-bottom: 1px solid rgba(16, 126, 171, 0.1);
+ box-shadow: inset 0 -2rem 2rem -2rem rgba(14, 104, 139, 0.1);
+ padding-bottom: 2rem;
@include breakpoint($narrow) {
- padding: 0 2rem;
+ box-shadow: inset 0 -40px 40px -40px rgba(14, 104, 139, 0.1);
padding-bottom: 40px;
}
+
@include breakpoint($wide) {
+ border-top: 1px solid rgba(16, 126, 171, 0.1);
padding: 0;
- align-self: center;
- display: flex;
- flex-direction: column;
- height: 100%;
- justify-content: center;
- left: 0;
- margin: 0;
- order: 1;
- position: relative;
- top: 0;
- width: 40%;
- z-index: 2;
}
- }
- &--blue {
- background-color: var(--brand-main-light);
+ @include breakpoint($extrawide) {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ margin-top: 0;
+ }
- .hy-hero__title__overlay h1 {
- background-color: var(--brand-main-light);
- color: transparent !important;
+ @include breakpoint($xlarge) {
+ margin-top: 0;
}
- .hy-hero__content,
- .hy-hero__description,
- .hy-hero__cta-link__container {
- background-color: var(--brand-main-light);
- color: var(--grayscale-white);
+ .hy-hero__content-container {
+ @include breakpoint(max-width 959px) {
+ padding-bottom: 0;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-left: 32px; // Original 24px + 8px
+ padding-right: 8px;
+ }
+
+ @include breakpoint($xlarge) {
+ padding-left: 0;
+ }
}
- }
- &--black {
- background-color: var(--grayscale-black);
+ .hy-hero__image-container {
+ @include breakpoint($wide) {
+ padding: 0;
+ }
+ }
- .hy-hero__title__overlay h1 {
- background-color: var(--grayscale-black);
- color: transparent !important;
+ .hy-hero__spacer-box {
+ @include breakpoint($wide) {
+ box-shadow: inset 0 -20px 20px -20px rgba(14, 104, 139, 0.1), inset 0 20px 20px -20px rgba(14, 104, 139, 0.1);
+ }
}
- .hy-hero__content,
- .hy-hero__description,
- .hy-hero__cta-link__container {
- background-color: var(--grayscale-black);
- color: var(--grayscale-white);
+ .hy-hero__content-container,
+ .hy-hero__spacer-box {
+ background-color: var(--grayscale-slightly-gray);
}
- }
- &--white {
- background-color: var(--grayscale-white);
+ .hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ span {
+ color: var(--grayscale-black);
+ }
+ }
- .hy-hero__title__overlay h1 {
- background-color: var(--grayscale-white);
- color: transparent !important;
+ h1 {
+ color: var(--grayscale-black);
+ }
+
+ &--overlay {
+ span {
+ background-color: var(--grayscale-slightly-gray);
+ box-shadow: 24px 0 0 var(--grayscale-slightly-gray), -24px 0 0 var(--grayscale-slightly-gray);
+ color: var(--grayscale-slightly-gray);
+ display: inline;
+ position: relative;
+
+ @include breakpoint($narrow) {
+ box-shadow: 48px 0 0 var(--grayscale-slightly-gray), -48px 0 0 var(--grayscale-slightly-gray);
+ }
+
+ @include breakpoint($wide) {
+ box-shadow: 32px 0 0 var(--grayscale-slightly-gray), 0 0 0 var(--grayscale-slightly-gray);
+ }
+
+ @include breakpoint($extrawide) {
+ box-shadow: 40px 0 0 var(--grayscale-slightly-gray), 0 0 0 var(--grayscale-slightly-gray);
+ }
+ }
+ }
}
- .hy-hero__content,
- .hy-hero__description,
- .hy-hero__cta-link__container {
- background-color: var(--grayscale-white);
+ .hy-hero__description {
+ background-color: var(--grayscale-slightly-gray);
color: var(--grayscale-black);
}
}
+}
- &__title__container {
+.hy-hero__container {
+ @include breakpoint($wide) {
+ display: flex;
position: relative;
- padding-bottom: 1rem;
-
- @include breakpoint($wide) {
- width: 110%;
- }
}
+}
- &__description {
- // Ingress Small
- @include font-size(16px, 24px);
-
- color: var(--grayscale-white);
- font-family: var(--main-font-family);
- font-weight: 600;
- letter-spacing: -0.1px;
- margin: 12px 0 24px 0;
- padding: 0;
+.hy-hero__image-container {
+ background-position: 50% 50%;
+ background-size: cover;
+ background: transparent;
+ margin: 0;
+ padding: 0;
+ position: relative;
- @include breakpoint($narrow) {
- margin: 16px 0 24px 0;
- max-width: 87%;
+ @include breakpoint($wide) {
+ background-color: var(--grayscale-white);
+ bottom: 0;
+ order: 2;
+ padding: 6px 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 60%;
+ }
+}
- // Ingress Medium
- @include font-size(18px, 28px);
- letter-spacing: -0.1px;
- }
+.hy-image__image {
+ display: block;
+ height: 100%;
+ min-height: 205px;
+ object-fit: cover;
+ width: 100%;
+}
- @include breakpoint($wide) {
- @include font-size(18px, 28px);
- letter-spacing: -0.1px;
+.hy-hero__content-container {
+ padding: 0 1rem 2rem;
- max-width: 100%;
- margin: 9px 0 0;
- padding: 0 24px 20px 0;
- }
+ @include breakpoint($narrow) {
+ padding: 0 2rem 40px;
+ }
- @include breakpoint($extrawide) {
- margin: 9px 0 0;
- padding: 0 24px 20px 0;
- }
+ @include breakpoint($wide) {
+ background-color: transparent !important;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin: 0 auto;
+ min-height: 360px;
+ padding: 52px 2rem;
+ position: relative;
+ width: 100%;
+ }
- @include breakpoint($xlarge) {
- padding: 0 40px 32px 0;
- }
+ @include breakpoint($extrawide) {
+ min-height: 400px;
+ padding: 80px 24px;
+ }
- // No sidebar, large desktop screens
- &__large {
- @include breakpoint($extrawide) {
- padding: 0 40px 32px 0;
- }
+ @include breakpoint($overwide) {
+ min-height: 450px;
+ }
- @include breakpoint($xlarge) {
- padding: 0 40px 36px 0;
- }
- }
+ @include breakpoint($xlarge) {
+ max-width: 1216px;
+ min-height: 500px;
+ padding: 80px 0;
}
- &__cta-link__container {
- max-width: 100%;
- @include breakpoint($wide) {
- max-width: 87%;
- }
+ @include breakpoint($fullhd) {
+ min-height: 600px;
}
}
-.hy-hero__title {
- z-index: 2;
+.hy-hero__spacer-box {
+ display: none;
+
+ @include breakpoint($wide) {
+ bottom: 0;
+ display: block;
+ left: 0;
+ order: 1;
+ position: absolute;
+ top: 0;
+ width: 40%;
+ }
}
-.hy-hero__title__overlay--container {
- left: 0;
- opacity: 1;
- position: absolute;
- top: 0;
+.hy-hero__title-container {
+ position: relative;
+}
- .hy-hero__title__overlay {
- .hy-heading__container.hy-heading__container__common,
- .hy-heading__container.sc-hy-heading-wide {
- display: block;
- }
+.hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ position: relative;
+ z-index: 10;
- h1 {
- display: inline;
+ span {
+ color: var(--grayscale-black);
}
}
- .hy-hero__title__overlay h1 {
- box-decoration-break: clone;
- display: inline;
- margin-left: -32px;
- padding: 16px 16px 16px 32px !important;
+ h1 {
+ display: inline-block !important;
+ margin-bottom: 12px !important;
+ max-width: 100%;
@include breakpoint($narrow) {
- margin-left: -32px;
- padding: 16px 16px 16px 32px !important;
+ margin-bottom: 16px !important;
+ max-width: 87% !important;
}
@include breakpoint($wide) {
- margin-left: 0;
- padding: 16px 16px 16px 0 !important;
+ margin-bottom: 0 !important;
+ max-width: 48.75% !important;
+ }
+
+ span {
+ padding-top: 24px;
+
+ @include breakpoint($narrow) {
+ padding-top: 40px;
+ }
+
+ @include breakpoint($wide) {
+ padding-bottom: 28px;
+ padding-top: 24px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-bottom: 36px;
+ padding-top: 30px;
+ }
}
}
-}
-.hy-hero__title,
-.hy-hero__title__overlay h1 {
- @include font-weight($bold);
+ &--overlay {
+ display: block;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
- box-decoration-break: clone;
- display: inline;
- color: var(--grayscale-white);
+ span {
+ display: inline;
+ position: relative;
+ }
+ }
+}
+
+// TODO: Update this to use styles straight from DSLIB (Ingress).
+.hy-hero__description {
+ @include font-size(16px);
+ color: var(--grayscale-black);
font-family: var(--main-font-family);
- font-weight: bold;
- letter-spacing: -0.75px;
- word-wrap: break-word;
- hyphens: auto;
- margin-bottom: 12px;
- max-width: 100%;
+ font-weight: 600;
+ letter-spacing: -0.1px;
+ line-height: 22px;
+ margin: 0;
+ padding: 0;
position: relative;
- text-transform: uppercase;
@include breakpoint($narrow) {
- margin-bottom: 16px;
+ line-height: 24px;
}
@include breakpoint($wide) {
- margin: 0;
- max-width: 100%;
+ margin-top: -8px;
+ max-width: 40.21%;
+ padding: 16px 40px 20px 0;
+ }
+
+ @include breakpoint($extrawide) {
+ @include font-size(18px);
+ letter-spacing: -0.16px;
+ line-height: 26px;
+ max-width: 40.13%;
+ padding: 28px 40px 32px 0;
}
}
-.hy-hero__title h1,
-.hy-hero__title__overlay > h1 {
- padding: 1rem;
+.hy-hero__actions {
+ margin-top: 20px;
@include breakpoint($narrow) {
- margin-bottom: 16px;
+ margin-top: 24px;
}
@include breakpoint($wide) {
- margin: 0;
- max-width: 100%;
- padding: 16px 32px 16px 0;
- }
- @include breakpoint($extrawide) {
- padding: 16px 32px 16px 0;
- }
- @include breakpoint($xlarge) {
- padding: 16px 40px 16px 0;
+ margin-top: 0;
}
}
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index c45c58b297e813305227694e9fe1ba854527bf47..524c6a9d7971a77e1af93dad5ad39428606ceb97 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -67,10 +67,7 @@ export class HyHero {
render() {
const classAttributes = ['hy-hero', `hy-hero__${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' ');
const classDescription = ['hy-hero__description', `hy-hero__description__${this.headerstyle}`].join(' ');
- const classContentContainer = [
- 'hy-hero__content--container',
- `hy-hero__content--container__${this.headerstyle}`,
- ].join(' ');
+ const classContentContainer = ['hy-hero__content', `hy-hero__content--${this.headerstyle}`].join(' ');
const aspectRatioWidth = 8;
const aspectRatioHeight = 5;
@@ -83,58 +80,48 @@ export class HyHero {
if (this.colorVariant == HeroColorVariant.black) {
variant = CtaLinkButtonVariants.onBlackBkgd;
- } else if (this.colorVariant == HeroColorVariant.white) {
- variant = CtaLinkButtonVariants.onTransparentBkgd;
+ } else if (this.colorVariant == HeroColorVariant.white || this.colorVariant == HeroColorVariant.fp_white) {
+ variant = CtaLinkButtonVariants.onWhiteBkgd;
}
return (
<Host>
<div class={classAttributes}>
- <div>
- <div class="hy-hero__desktop-container">
- <div class="hy-hero__image-container" style={aspectRatio}>
- <img alt={this.scLabel} class="hy-image__image" src={this.image} />
- </div>
- <div class="hy-hero__content"></div>
- <div class="hy-hero__content-wrap-helper">
- <div class={classContentContainer}>
- <div class="hy-hero__title__container">
- <hy-heading
- class="hy-hero__title"
- heading={HeadingVarians.default}
- section={HeadingSectionVariants.introduction}
- >
- {this.heading}
- </hy-heading>
- <div class="hy-hero__title__overlay--container">
- <hy-heading
- class="hy-hero__title__overlay"
- heading={HeadingVarians.default}
- section={HeadingSectionVariants.introduction}
- >
- {this.heading}
- </hy-heading>
- </div>
- </div>
- <div class="hy-hero__content--bottom">
- {this.description && (
- <div class="hy-hero__description__container">
- <div class={classDescription}>{this.description}</div>
- </div>
- )}
- {this.url && (
- <div class="hy-hero__cta-link__container">
- <hy-cta-button
- link-content={this.urlTitle}
- sc-label={this.scLabel}
- url={this.url}
- is-external={this.isExternal}
- variant={variant}
- />
- </div>
- )}
- </div>
+ <div class="hy-hero__container">
+ <figure class="hy-hero__image-container" style={aspectRatio}>
+ <img alt={this.scLabel} class="hy-image__image" src={this.image} />
+ </figure>
+ <div class="hy-hero__spacer-box"></div>
+ <div class="hy-hero__content-container">
+ <div class={classContentContainer}>
+ <div class="hy-hero__title-container">
+ <hy-heading
+ class="hy-hero__title"
+ heading={HeadingVarians.default}
+ section={HeadingSectionVariants.introduction}
+ >
+ {this.heading}
+ </hy-heading>
+ <hy-heading
+ class="hy-hero__title hy-hero__title--overlay"
+ heading={HeadingVarians.default}
+ section={HeadingSectionVariants.introduction}
+ >
+ {this.heading}
+ </hy-heading>
</div>
+ {this.description && <p class={classDescription}>{this.description}</p>}
+ {this.url && (
+ <div class="hy-hero__actions">
+ <hy-cta-button
+ link-content={this.urlTitle}
+ sc-label={this.scLabel}
+ url={this.url}
+ is-external={this.isExternal}
+ variant={variant}
+ />
+ </div>
+ )}
</div>
</div>
</div>
diff --git a/src/components/hy-hero/readme.md b/src/components/hy-hero/readme.md
index 3a8d33c086f53c6979e2bd9ba947fc5891c58b30..7e6cb3980663bca0f6eb5b2adaa66b41fb0f9ad3 100644
--- a/src/components/hy-hero/readme.md
+++ b/src/components/hy-hero/readme.md
@@ -4,17 +4,17 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------- | --------------- | ----------- | --------------------------------------------------------------------------- | ----------------------- |
-| `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.white` | `HeroColorVariant.blue` |
-| `description` | `description` | | `string` | `undefined` |
-| `headerstyle` | `headerstyle` | | `string` | `'common'` |
-| `heading` | `heading` | | `string` | `undefined` |
-| `image` | `image` | | `string` | `undefined` |
-| `isExternal` | `is-external` | | `boolean` | `false` |
-| `scLabel` | `sc-label` | | `string` | `undefined` |
-| `url` | `url` | | `string` | `undefined` |
-| `urlTitle` | `url-title` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------- | --------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ----------------------- |
+| `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.fp_white \| HeroColorVariant.white` | `HeroColorVariant.blue` |
+| `description` | `description` | | `string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `heading` | `heading` | | `string` | `undefined` |
+| `image` | `image` | | `string` | `undefined` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+| `urlTitle` | `url-title` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index a850ab006d3b70a358184acb7fcdb65f65afd951..7c6b8a8fbcffca1783bc8e3ac1b00077c1156c9a 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/src/components/hy-main/hy-main.scss
@@ -27,6 +27,7 @@
width: 100%;
}
@include breakpoint($extrawide) {
+ flex-grow: 1;
order: 2;
width: 80%;
}
diff --git a/src/global/_colors.scss b/src/global/_colors.scss
index 4c21ffbe899f80970573f5d4bae6760354bf2408..e3fd88fe8091d9bc7c36d3bad7150ae176c9fd0c 100644
--- a/src/global/_colors.scss
+++ b/src/global/_colors.scss
@@ -7,6 +7,7 @@
--link-blue: #0479a5;
--link-disabled: #767676;
--grayscale-white: #fff;
+ --grayscale-slightly-gray: #fefefe;
--grayscale-light: #f8f8f8;
--grayscale-medium: #d2d2d2;
--grayscale-background-box: #f5f5f5;
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index f34e08dcf2543ad36d408c5d89581151b7b237fc..c4fa3e0755722d696da99c843bc267dd29b8e4d1 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -182,6 +182,7 @@ export enum HeroColorVariant {
blue = 'blue',
black = 'black',
white = 'white',
+ fp_white = 'fp_white',
}
export enum FooterLinkItemColor {