sportpressa_front/src/styles/main.css

body{
    font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Helvetica,roboto,Arial;
}

header {
    overflow: visible; /* Вместо hidden */
}


.container {
    max-width: 1200px;
    margin: 0 auto;
}

.site-header {
    background-color: #3c3c3c;
    width: 100%;
    position: relative;
}

.site-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc((100% - 1200px) / 2); /* занимает пространство слева от контента */
    z-index: 0;
    background-color: white;
}

.site-header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 18px 18px; /* размер треугольника */
    border-color: transparent transparent white transparent;
}





/* Белая полоса с датой и временем */
.header-top-bar {
    background-color: white;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

.header-top-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

#current-datetime {
    font-size: 0.9rem;
    color: #909294;
}

/* Основной header */
.site-header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 0 4px 8px;
    display: flex;
    align-items: center;
}


.sportpressa-logo {
    font-size: clamp(1.0625rem, 1.0625rem + 12*(100vw - 400px) / 800, 2.8125rem);
    font-weight: bold;
    color: white;
    display: flex;
}

    .sportpressa-logo IMG{
        width: 35px;
    }

.redword{
    color: red;
}




.maintitle{
    display: flex;
   
}

.wrapper{
    display: flex;    
    gap: 15px;
}


.main{
    margin: 22px 0;
    flex: 3;
}

.sidebar{
    flex: 1; 
}   

.sideparts {
    background-color: #F1F1F1;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 18px 0 18px 22px;
}

.sideparts-title {
    font-weight: bold;
    margin-bottom: 12px;
}


.partslist a {
    color: #0F2D5F;
}

.maintitle h1{
    font-size: 1.6rem;
}

.h-telega {
    color: #909294;
    font-size: 1.6rem;
    font-weight: bold;
    margin-left: 4px;
}

    .h-telega:hover{
        color: #666;
    }

footer{
    background-color: #3c3c3c;
    padding-top: 22px;
    padding-bottom: 42px;
    position: relative;
}


.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 0;
}

.footer-line-1{
    display: flex;
}    


.sportpressa-logo-footer {
    font-size: 28px;
    font-weight: bold;
    color: white;
    width: 90%;
    display: flex;
    gap: 1px;
}

.rating {
    color: white;
    font-weight: bold;
    width: 10%;
}



#copyr {
    margin-top: 18px;
    font-size: small;
    color: #999999;
}

.to-top {
    position: absolute;
    right: 20%;
    top: 0;
    transform: translate(-50%,-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: #333;
    color: #fff;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
}

.to-top:hover{
    opacity: .9;
}

.live_counter{
    float: right;
    margin-top: 12px;
    margin-bottom: 12px;
}


@media (max-width: 768px) {

    .desc{
        display: none;
    }

    .mob{
        display: block;
    }

    body{
        width: 100%;
        max-width: 100%;
    }

    header{
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .header-top-content{
        max-width: 100%;
        margin-left: 4px;
    }

    .site-header-content{
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 8px;
    }

    .site-header::before {
        content: none;
    }

    .site-header::after {
        content: none;
    }

    .sportpressa-logo {
        font-size: 2rem;
        font-weight: bold;
        color: white;
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .sidebar {
        display: none;
    }

    main{
        padding: 12px;
    }

    footer{
        padding: 18px 18px 62px 18px;
      
    }

    .footer-content {
        max-width: 100%;    
    }    
}