Untitled

 avatar
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