new-templane/resources/view/layouts/partials/styles.php

<?php
$styles = (new \App\Settings('styles'))->getAll();
?>
<style>
    th{
        color: <?= $styles['pass_btn_color'] ?? '' ?>;
        background-color: <?= $styles['accent_color'] ?? '' ?>;
    }
    .burger:before,
    .burger:after,
    .burger {
        background-color: <?= $styles['burger-color'] ?? '' ?>;
    }

    .main-font {
        font-family: <?= $styles['main-fz'] ?? '' ?>;
    }

    .main-color {
        background: <?= $styles['main_color'] ?? '' ?>;
    }

    .header-color {
        background: <?= $styles['header_color'] ?? '' ?>;
    }

    .login-btn-bg {
        background: <?= $styles['login_btn_bg'] ?? '' ?>;
    }

    .accent-color {
        background: <?= $styles['accent_color'] ?? '' ?>;
    }

    button.accent-color {
        transition: filter 0.3s ease;
    }

    button.accent-color:hover {
        filter: brightness(0.85);
    }

    .faq-title-font-color {
        color: <?= $styles['faq-title-font-color'] ?? '' ?>;
    }

    .faq-title-hover-font-color:hover {
        color: <?= $styles['faq-title-hover-font-color'] ?? '' ?>;
    }

    .font-color {
        color: <?= $styles['font_color'] ?? '' ?>;
    }

    a {
        color: <?= $styles['link_color'] ?? '' ?>;
        text-decoration: none;
        transition: 300ms;
    }

    a:hover {
        color: <?= $styles['accent_color'] ?? '' ?>;
    }

    .secondary-color {
        background-color: <?= $styles['secondary_color'] ?? '' ?>;
    }

    .main-fz {
        color: <?= $styles['main_fz'] ?? '' ?>;
    }

    .footer-color {
        background: <?= $styles['footer_color'] ?? '' ?>;
    }

    .accordion-header.active {
        background: <?= $styles['accent_color'] ?? '' ?>;
    }

    .accordion-header:hover {
        background: <?= $styles['accent_color'] ?? '' ?>;
    }

    .header__menu-list {
        background: <?= $styles['header_color'] ?? '' ?>;
    }

    .login-btn-color {
        color: <?= $styles['login_btn_color'] ?? '' ?>;
    }

    .pass-btn-color {
        color: <?= $styles['pass_btn_color'] ?? '' ?>;
    }

    table {
        background: <?= $styles['table'] ?? '' ?>;
    }

    caption {
        background: <?= $styles['caption'] ?? '' ?>;
    }

    .casinos__bonus {
        color: <?= $styles['accent_color'] ?? '' ?>;
    }

    h2 {
        color: inherit;
    }

    h2::after {
        background: <?= $styles['accent_color'] ?? '' ?>;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0;
        }

        70% {
            transform: scale(1);
            box-shadow: 0 4px 24px 0 <?= $styles['accent_color'] ?? '' ?>;
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 transparent;
        }
    }

    ul {
        list-style: none;
    }

    .main__text ul li {
        position: relative;
        margin: 5px 0;
    }

    .main__text ul li::before {
        content: '✓';
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: <?= $styles['accent_color'] ?? '' ?>;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        font-size: 15px;
    }

    .secondary__text ul li {
        position: relative;
        margin: 5px 0;
    }

    .secondary__text ul li::before {
        content: '✓';
        width: 23px;
        height: 23px;
        border-radius: 50%;
        background: <?= $styles['accent_color'] ?? '' ?>;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        font-size: 15px;
    }

    .bottom-btn {
        margin: auto;
        width: 200px;
        background: #c30054;
    }

    ol {
        list-style: none;
        counter-reset: list-counter;
        padding-left: 0;
    }

    ol li {
        counter-increment: list-counter;
        position: relative;
        padding-left: 40px;
        /* Отступ для цифры */
        margin: 15px 0;
    }

    ol li::before {
        content: counter(list-counter);
        position: absolute;
        left: 0;
        width: 25px;
        height: 25px;
        border: 1px solid <?= $styles['accent_color'] ?? '' ?>;
        border-radius: 50%;
        text-align: center;
        line-height: 25px;
        font-weight: bold;
        top: -1px;
        font-size: 14px;
    }

    .main__btn {
        position: relative;
        margin: auto;

    }

    .main__btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        color: <?= $styles['pass_btn_color'] ?? '' ?>;
    }

    .main__btn a:hover {
        color: <?= $styles['pass_btn_color'] ?? '' ?>;
    }
</style>