diff --git a/ghost/core/core/frontend/src/cards/css/header_v2.css b/ghost/core/core/frontend/src/cards/css/header_v2.css index 2cda778b9d..49ee7889d5 100644 --- a/ghost/core/core/frontend/src/cards/css/header_v2.css +++ b/ghost/core/core/frontend/src/cards/css/header_v2.css @@ -1,27 +1,30 @@ -.kg-header-card-v2 { +.kg-header-card.kg-v2 { position: relative; + padding: 0; + min-height: initial; + text-align: initial; } -.kg-header-card-v2, -.kg-header-card-v2 * { +.kg-header-card.kg-v2, +.kg-header-card.kg-v2 * { box-sizing: border-box; } -.kg-header-card-v2 a, -.kg-header-card-v2 a span { +.kg-header-card.kg-v2 a, +.kg-header-card.kg-v2 a span { color: currentColor; } -.kg-header-card-v2.kg-style-accent { +.kg-header-card.kg-style-accent.kg-v2 { background-color: var(--ghost-accent-color); } -.kg-layout-split .kg-header-card-v2-content { +.kg-layout-split .kg-header-card-content { display: grid; grid-template-columns: 1fr 1fr; } -.kg-header-card-v2-text { +.kg-header-card-text { position: relative; display: flex; flex-direction: column; @@ -34,44 +37,44 @@ text-align: left; } -.kg-width-wide .kg-header-card-v2-text { +.kg-width-wide .kg-header-card-text { padding: 6.4vmax; } -.kg-width-full .kg-header-card-v2-text { +.kg-width-full .kg-header-card-text { padding: 12vmax 0; } -.kg-layout-split .kg-header-card-v2-text { +.kg-layout-split .kg-header-card-text { padding: 12vmax 4vmax; } -.kg-layout-split.kg-content-wide .kg-header-card-v2-text { +.kg-layout-split.kg-content-wide .kg-header-card-text { padding: 10vmax 0 10vmax 4vmax; } -.kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-v2-text { +.kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text { padding: 10vmax 4vmax 10vmax 0; } -.kg-swapped .kg-header-card-v2-text { +.kg-swapped .kg-header-card-text { grid-row: 1; } -.kg-header-card-v2-text.kg-align-center { +.kg-header-card-text.kg-align-center { align-items: center; text-align: center; } -.kg-header-card-v2.kg-style-image h2.kg-header-card-v2-heading, -.kg-header-card-v2.kg-style-image h3.kg-header-card-v2-subheading, -.kg-header-card-v2.kg-style-image .kg-header-card-v2-button { +.kg-header-card.kg-style-image h2.kg-header-card-heading, +.kg-header-card.kg-style-image h3.kg-header-card-subheading, +.kg-header-card.kg-style-image.kg-v2 .kg-header-card-button { z-index: 999; } /* Background image */ -.kg-header-card-v2 > picture > .kg-header-card-v2-image { +.kg-header-card > picture > .kg-header-card-image { position: absolute; top: 0; left: 0; @@ -85,7 +88,7 @@ /* Split layout image */ -.kg-header-card-v2-content .kg-header-card-v2-image { +.kg-header-card-content .kg-header-card-image { /* this will force the image to follow the signup card height */ height: 0; min-height: 100%; @@ -94,7 +97,7 @@ object-position: center; } -.kg-content-wide .kg-header-card-v2-content .kg-header-card-v2-image { +.kg-content-wide .kg-header-card-content .kg-header-card-image { height: 100%; padding: 8rem 0; object-fit: contain; @@ -102,7 +105,7 @@ /* Heading */ -.kg-header-card-v2 h2.kg-header-card-v2-heading { +.kg-header-card h2.kg-header-card-heading { margin: 0; font-size: clamp(2.8rem, 4vw, 4rem); font-weight: 700; @@ -110,29 +113,29 @@ letter-spacing: -0.01em; } -.kg-header-card-v2.kg-width-wide h2.kg-header-card-v2-heading { +.kg-header-card.kg-width-wide h2.kg-header-card-heading { font-size: clamp(2.8rem, 5vw, 5.2rem); } -.kg-header-card-v2.kg-width-full h2.kg-header-card-v2-heading { +.kg-header-card.kg-width-full h2.kg-header-card-heading { font-size: clamp(3.6rem, 5.6vw, 6.4rem); } -.kg-header-card-v2.kg-width-full.kg-layout-split h2.kg-header-card-v2-heading { +.kg-header-card.kg-width-full.kg-layout-split h2.kg-header-card-heading { font-size: clamp(3.2rem, 4vw, 5.6rem); } -.kg-header-card-v2.kg-width-full.kg-layout-split.kg-content-wide h2.kg-header-card-v2-heading { +.kg-header-card.kg-width-full.kg-layout-split.kg-content-wide h2.kg-header-card-heading { font-size: clamp(2.8rem, 4vw, 5.2rem); } /* Subheading */ -.kg-header-card-v2-subheading { +.kg-header-card-subheading { margin: 0 0 2em; } -.kg-header-card-v2 h3.kg-header-card-v2-subheading { +.kg-header-card h3.kg-header-card-subheading { max-width: 40em; margin: 0; font-size: clamp(1.05em, 2vw, 2rem); @@ -140,48 +143,28 @@ line-height: 1.4em; } -.kg-header-card-v2 h2 + h3.kg-header-card-v2-subheading { +.kg-header-card h2 + h3.kg-header-card-subheading { margin: 0.6em 0 0; } -.kg-header-card-v2 h3.kg-header-card-v2-subheading strong { +.kg-header-card h3.kg-header-card-subheading strong { font-weight: 600; } -.kg-header-card-v2.kg-width-wide h3.kg-header-card-v2-subheading { +.kg-header-card.kg-width-wide h3.kg-header-card-subheading { font-size: clamp(1.05em, 2vw, 2.4rem); } -.kg-header-card-v2.kg-width-full h3.kg-header-card-v2-subheading:not(.kg-layout-split h3.kg-header-card-v2-subheading) { +.kg-header-card.kg-width-full h3.kg-header-card-subheading:not(.kg-layout-split h3.kg-header-card-subheading) { max-width: 65vmax; font-size: clamp(1.05em, 2vw, 2.6rem); } -.kg-header-card-v2.kg-width-full.kg-layout-split h3.kg-header-card-v2-subheading { +.kg-header-card.kg-width-full.kg-layout-split h3.kg-header-card-subheading { font-size: clamp(1.05em, 2vw, 2.4rem); } -.kg-width-wide .kg-header-card-v2-fields, -.kg-width-full .kg-header-card-v2-fields { - width: 100%; - max-width: 500px; -} - -.kg-header-card-v2-input { - width: 100%; - height: 4.6rem; - margin-right: 3px; - padding: 12px 16px; - border: none; - font-size: 1.1em; -} - -.kg-header-card-v2-input:focus, -.kg-header-card-v2-input:focus-visible { - outline: none; -} - -.kg-header-card-v2-button { +.kg-header-card.kg-v2 .kg-header-card-button { display: flex; position: relative; align-items: center; @@ -201,83 +184,77 @@ transition: opacity .2s ease; } -.kg-header-card-v2-button.kg-style-accent { +.kg-header-card.kg-v2 .kg-header-card-button.kg-style-accent { background-color: var(--ghost-accent-color); } -.kg-header-card-v2 h2 + .kg-header-card-v2-button, -.kg-header-card-v2 h3 + .kg-header-card-v2-button { +.kg-header-card.kg-v2 h2 + .kg-header-card-button, +.kg-header-card.kg-v2 h3 + .kg-header-card-button { margin: 1.5em 0 0; } -.kg-header-card-v2 .kg-header-card-v2-button:hover { +.kg-header-card.kg-v2 .kg-header-card-button:hover { opacity: 0.85; } -.kg-header-card-v2.kg-width-wide .kg-header-card-v2-button { +.kg-header-card.kg-v2.kg-width-wide .kg-header-card-button { font-size: 1.05em; } -.kg-header-card-v2.kg-width-wide h2 + .kg-header-card-v2-button, -.kg-header-card-v2.kg-width-wide h3 + .kg-header-card-v2-button { +.kg-header-card.kg-v2.kg-width-wide h2 + .kg-header-card-button, +.kg-header-card.kg-v2.kg-width-wide h3 + .kg-header-card-button { margin-top: 1.75em; } -.kg-header-card-v2.kg-width-full .kg-header-card-v2-button { +.kg-header-card.kg-v2.kg-width-full .kg-header-card-button { font-size: 1.1em; } -.kg-header-card-v2.kg-width-full h2 + .kg-header-card-v2-button, -.kg-header-card-v2.kg-width-full h3 + .kg-header-card-v2-button { +.kg-header-card.kg-v2.kg-width-full h2 + .kg-header-card-button, +.kg-header-card.kg-v2.kg-width-full h3 + .kg-header-card-button { margin-top: 2em; } /* Responsive styles */ @media (max-width: 640px) { - .kg-layout-split .kg-header-card-v2-content { + .kg-layout-split .kg-header-card-content { grid-template-columns: 1fr; } - .kg-width-wide .kg-header-card-v2-text { + .kg-width-wide .kg-header-card-text { padding: 6.4vmax 4vmax; } - .kg-layout-split.kg-content-wide .kg-header-card-v2-text, - .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-v2-text { + .kg-layout-split.kg-content-wide .kg-header-card-text, + .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text { padding: 9.6vmax 0; } - .kg-header-card-v2.kg-width-full h3.kg-header-card-v2-subheading:not(.kg-layout-split h3.kg-header-card-v2-subheading) { + .kg-header-card.kg-width-full h3.kg-header-card-subheading:not(.kg-layout-split h3.kg-header-card-subheading) { max-width: unset; } - .kg-header-card-v2-content .kg-header-card-v2-image:not(.kg-content-wide .kg-header-card-v2-content .kg-header-card-v2-image) { + .kg-header-card-content .kg-header-card-image:not(.kg-content-wide .kg-header-card-content .kg-header-card-image) { height: auto; min-height: unset; aspect-ratio: 1 / 1; } - .kg-content-wide .kg-header-card-v2-content .kg-header-card-v2-image { + .kg-content-wide .kg-header-card-content .kg-header-card-image { padding: 2.4rem 0 0; } - .kg-content-wide.kg-swapped .kg-header-card-v2-content .kg-header-card-v2-image { + .kg-content-wide.kg-swapped .kg-header-card-content .kg-header-card-image { padding: 0 0 2.4rem; } - .kg-header-card-v2-input { - height: 4.2rem; - padding: 6px 12px; - font-size: 1em; - } - - .kg-header-card-v2-button { + .kg-header-card.kg-v2 .kg-header-card-button { height: 4.2rem; } - .kg-header-card-v2.kg-width-wide .kg-header-card-v2-button, - .kg-header-card-v2.kg-width-full .kg-header-card-v2-button { + .kg-header-card.kg-v2.kg-width-wide .kg-header-card-button, + .kg-header-card.kg-v2.kg-width-full .kg-header-card-button { font-size: 1em; } }