C.C. O

.<div class="wrapper-calendar-ortodox">

    <div class="calendar-sacru">

        <h1 class="titlu-anual">Ortodox</h1>

        <div class="grid-luni" id="main-calendar"></div>

    </div>

</div>

<style>

.wrapper-calendar-ortodox {

    font-family: 'Segoe UI', Roboto, sans-serif;

    background: #000000;

    padding: 15px 5px;

    max-width: 1200px;

    margin: 0 auto;

}

.titlu-anual {

    text-align: center;

    color: #D4AF37;

    font-size: 2.2rem;

    font-weight: 700;

    margin-bottom: 25px;

    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);

}

.grid-luni {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

}

.luna-box {

    background: #0a0a0a;

    border-radius: 12px;

    padding: 15px 10px;

    border: 1px solid #1a1a1a;

}

/* Numele lunii scris cu verde deschis */

.nume-luna {

    text-align: center;

    color: #98FB98; /* Verde deschis pastelat */

    font-size: 1.4rem;

    font-weight: 600;

    margin-bottom: 12px;

    padding-bottom: 8px;

    border-bottom: 1px dashed #222222;

}

.zile-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 4px;

    text-align: center;

    align-items: center;

}

/* Zilele săptămânii scrise cu verde deschis */

.cap-zi {

    color: #a2ffa2; 

    font-size: 0.85rem;

    font-weight: 700;

    padding-bottom: 8px;

}

.cap-zi:nth-child(7) {

    color: #D4AF37; /* Duminica rămâne evidențiată cu auriu */

}

.sp-gol {

    height: 32px;

}

/* Numerele zilelor scrise cu verde deschis */

.btn-zi-cautare {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 32px;

    width: 32px;

    margin: 0 auto;

    border-radius: 50%;

    color: #a2ffa2; /* Verde deschis pentru numere */

    font-size: 1rem;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.2s ease;

}

.btn-zi-cautare:hover {

    background: #D4AF37 !important;

    color: #000000 !important;

    font-weight: 700;

}

/* Ziua de azi luminează elegant în auriu */

.btn-zi-cautare.azi {

    background: rgba(212, 175, 55, 0.2) !important;

    color: #D4AF37 !important;

    border: 1px solid #D4AF37;

    font-weight: 700;

    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);

}

</style>

<script>

const infoLuni = [

    { n: "Ianuarie", z: 31, s: 3 }, { n: "Februarie", z: 28, s: 6 }, 

    { n: "Martie", z: 31, s: 6 }, { n: "Aprilie", z: 30, s: 2 },

    { n: "Mai", z: 31, s: 4 }, { n: "Iunie", z: 30, s: 0 },

    { n: "Iulie", z: 31, s: 2 }, { n: "August", z: 31, s: 5 },

    { n: "Septembrie", z: 30, s: 1 }, { n: "Octombrie", z: 31, s: 3 },

    { n: "Noiembrie", z: 30, s: 6 }, { n: "Decembrie", z: 31, s: 1 }

];

const dataAzi = new Date();

const ziuaAzi = dataAzi.getDate();

const lunaAziNume = infoLuni[dataAzi.getMonth()].n;

const containerCalendar = document.getElementById('main-calendar');

let totCalendarul = "";

infoLuni.forEach(luna => {

    let blocLuna = `

    <div class="luna-box">

        <div class="nume-luna">${luna.n}</div>

        <div class="zile-grid">

            <div class="cap-zi">L</div><div class="cap-zi">M</div><div class="cap-zi">M</div>

            <div class="cap-zi">J</div><div class="cap-zi">V</div><div class="cap-zi">S</div><div class="cap-zi">D</div>`;

    

    for(let i=0; i < luna.s; i++) {

        blocLuna += `<div class="sp-gol"></div>`;

    }

    

    for(let d=1; d <= luna.z; d++) {

        let etichetaZi = d + '-' + luna.n;

        let linkCautare = '/search/label/' + encodeURIComponent(etichetaZi);

        

        let clasaAzi = (d === ziuaAzi && luna.n === lunaAziNume) ? ' azi' : '';

        

        blocLuna += `<a href="${linkCautare}" class="btn-zi-cautare${clasaAzi}">${d}</a>`;

    }

    

    blocLuna += `</div></div>`;

    totCalendarul += blocLuna;

});

containerCalendar.innerHTML = totCalendarul;

</script>.