Untitled
unknown
plain_text
2 months ago
8.3 kB
3
Indexable
:root { --primary-bg: #012b45; --primary-text: white; --secondary-text: #17a2b8; --overlay-bg: rgba(143, 141, 141, 0.312); --overlay-blur: blur(2.4px); } @media (min-width: 768px) { .teaser--overlap .cmp-teaser { position: relative; width: 100%; overflow: hidden; } .teaser--overlap .cmp-teaser__image { width: 100%; height: auto; display: block; } /* Common Styles for Titles, Links, and Descriptions */ .cmp-teaser__pretitle, .cmp-teaser__title, .cmp-teaser__title-link, .cmp-teaser__description { font-weight: lighter; background: var(--primary-bg); backdrop-filter: var(--overlay-blur); -webkit-backdrop-filter: var(--overlay-blur); max-width: fit-content; display: block; padding: 12.5px; border-radius: 10px; } .cmp-teaser__title, .cmp-teaser__title-link { font-size: 50px; font-weight: bolder; text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000; font-family: IrvinHeadingPro, "Helvetica Neue", Helvetica, Arial, sans-serif; } .cmp-teaser__title { color: var(--primary-text); } .cmp-teaser__title-link { color: var(--secondary-text); } .cmp-teaser__description { font-size: 28px; font-weight: 300; line-height: 2.3ch; color: var(--primary-text); } .cmp-teaser__description p { margin: 0; } /* Content Styling */ .cmp-teaser__content { max-width: 65%; display: block; padding: 20px; position: absolute; bottom: 15%; left: 1%; text-align: center; font-family: "Adobe Caslon Pro", serif; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } .teaser--withoutoverlap .cmp-teaser__content { text-align: center; left: 1%; padding: 10px; background-color: rgba(175, 175, 175, 0.129); } /* Specific Adjustments for Without Overlap */ .teaser--withoutoverlap .cmp-teaser__title { color: var(--primary-bg); } .teaser--withoutoverlap .cmp-teaser__title-link { color: rgb(42, 103, 146); font-weight: bold; } } @media (max-width: 767px) { .cmp-teaser__content { text-align: center; left: 1%; padding: 10px; background-color: rgba(175, 175, 175, 0.129); } .cmp-teaser__description { font-size: large; font-weight: 100; } .cmp-teaser__title-link { font-weight: bold; color: rgb(42, 103, 146); } .cmp-teaser__title { font-size: 50px; font-weight: bolder; color: var(--primary-bg); } } } } } } } } } } } } } } } } } } } } }
Editor is loading...
Leave a Comment