hugo-theme-zzo/assets/sass/components/_notice.scss

.notices {
    margin: 2rem 0;
    position: relative;
    border-radius: .125rem;
    color: #fff;
    padding: .3rem 0.5rem .3rem 2rem;
    font-size: 0.95rem;

    &.warning {
        border-top: 30px solid #f1b37e;
        background: #fefaf5;
        color: rgba(150, 90, 38, 0.995) !important;

        &::before {
            position: absolute;
            content: '⚠️   Warning';
            font-family: $title-font;
            top: -26.5px;
            left: 0.4rem;
            height: 100%;
        }
    }

    &.error {
        border-top: 30px solid #d58181;
        background: #fbeded;
        color: rgba(132, 56, 56, 0.995) !important;

        &::before {
            position: absolute;
            content: '❌   Error';
            font-family: $title-font;
            top: -26.5px;
            left: 0.4rem;
            height: 100%;
        }
    }

    &.info {
        border-top: 30px solid #6bb1e0;
        background: #e6f3fb;
        color: rgba(47, 103, 141, 0.995) !important;

        &::before {
            position: absolute;
            content: 'ℹ️   Info';
            font-family: $title-font;
            top: -26.5px;
            left: 0.4rem;
            height: 100%;
        }
    }

    &.success {
        border-top: 30px solid #84c578;
        background: #e8f7e6;
        color: rgba(72, 125, 63, 0.995) !important;

        &::before {
            position: absolute;
            content: '✔️   Success';
            font-family: $title-font;
            top: -26.5px;
            left: 0.4rem;
            height: 100%;
        }
    }
}