/* =====================================
   I MADE *****
   AUGUST 2026
   LIVE DEVELOPMENT CALENDAR
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:wght@300;400;500;600&display=swap');


/* =====================================
   GENERAL
===================================== */

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

margin:0;
padding:0;

background:#0b0d12;

color:#e9e1d3;

font-family:"Cormorant Garamond",serif;

line-height:1.8;

overflow-x:hidden;

}


/* =====================================
   ATMOSPHERIC BACKGROUND
===================================== */

body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(

rgba(8,10,14,.84),

rgba(8,10,14,.94)

),

url("../../../../project-three-background.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

opacity:.70;

z-index:-2;

}


/* =====================================
   LINKS
===================================== */

a{

text-decoration:none;

transition:.3s;

}


/* =====================================
   HEADER
===================================== */

.calendar-header{

max-width:1100px;

margin:0 auto;

padding:45px 35px 0;

}

.back-link{

display:inline-block;

color:#d8c7ff;

font-family:"Cinzel",serif;

font-size:17px;

letter-spacing:.7px;

}

.back-link:hover{

color:#ffffff;

text-shadow:

0 0 10px rgba(216,199,255,.45);

}


/* =====================================
   HERO
===================================== */

.calendar-hero{

max-width:950px;

margin:0 auto;

padding:70px 30px 65px;

text-align:center;

}

.calendar-hero h1{

font-family:"Cinzel",serif;

font-size:54px;

font-weight:500;

letter-spacing:9px;

color:#d8c7ff;

margin-bottom:22px;

}

.calendar-hero p{

max-width:720px;

margin:0 auto;

font-size:25px;

line-height:1.6;

color:#efe7d8;

}

.calendar-hero::after{

content:"✦";

display:block;

margin:35px auto 0;

font-family:"Cormorant Garamond",serif;

font-size:20px;

color:#d8c7ff;

}


/* =====================================
   MAIN CONTAINER
===================================== */

.calendar-container{

max-width:1100px;

margin:0 auto 120px;

padding:0 30px;

}


/* =====================================
   INTRODUCTION
===================================== */

.calendar-intro{

max-width:760px;

margin:0 auto 65px;

text-align:center;

}

.calendar-intro h2{

font-family:"Cinzel",serif;

font-size:28px;

font-weight:500;

letter-spacing:4px;

color:#d8c7ff;

margin-bottom:25px;

}

.calendar-intro p{

font-size:22px;

line-height:1.85;

color:#cfc7d9;

}


/* =====================================
   CALENDAR FRAME
===================================== */

.calendar{

max-width:950px;

margin:0 auto;

padding:35px;

position:relative;

background:

linear-gradient(

rgba(20,20,26,.94),

rgba(14,15,20,.96)

);

border:1px solid rgba(216,199,255,.18);

box-shadow:

0 35px 90px rgba(0,0,0,.58);

}


/* inner manuscript frame */

.calendar::before{

content:"";

position:absolute;

inset:16px;

border:1px solid rgba(216,199,255,.07);

pointer-events:none;

}


/* =====================================
   WEEKDAY HEADERS
===================================== */

.calendar-weekdays{

display:grid;

grid-template-columns:

repeat(7,1fr);

gap:10px;

margin-bottom:10px;

position:relative;

z-index:1;

}

.calendar-weekdays div{

padding:14px 5px;

text-align:center;

font-family:"Cinzel",serif;

font-size:13px;

letter-spacing:2px;

color:#9f91b9;

}


/* =====================================
   CALENDAR DAYS
===================================== */

.calendar-days{

display:grid;

grid-template-columns:

repeat(7,1fr);

gap:10px;

position:relative;

z-index:1;

}


/* =====================================
   INDIVIDUAL DAY
===================================== */

.calendar-day{

min-height:105px;

padding:20px;

display:flex;

align-items:flex-start;

justify-content:flex-end;

position:relative;

border:1px solid rgba(216,199,255,.10);

background:

rgba(255,255,255,.018);

color:#aaa2b6;

transition:

background .3s,

border-color .3s,

transform .3s,

box-shadow .3s;

}


/* =====================================
   EMPTY CELLS
===================================== */

.calendar-day.empty{

border-color:transparent;

background:transparent;

pointer-events:none;

}


/* =====================================
   ACTIVE DAYS
===================================== */

.calendar-day.active{

cursor:pointer;

color:#d8c7ff;

border-color:rgba(216,199,255,.18);

background:

rgba(216,199,255,.025);

}

.calendar-day.active:hover{

transform:translateY(-3px);

border-color:rgba(216,199,255,.55);

background:

rgba(216,199,255,.07);

box-shadow:

0 10px 30px rgba(0,0,0,.35),

0 0 18px rgba(216,199,255,.06);

color:#ffffff;

}


/* =====================================
   DAY NUMBER
===================================== */

.day-number{

font-family:"Cinzel",serif;

font-size:20px;

font-weight:400;

letter-spacing:1px;

}


/* =====================================
   DAY STATUS MARKER
===================================== */

.calendar-day.active::after{

content:"";

position:absolute;

left:18px;

bottom:18px;

width:5px;

height:5px;

border-radius:50%;

background:#d8c7ff;

box-shadow:

0 0 8px rgba(216,199,255,.45);

opacity:.65;

transition:.3s;

}

.calendar-day.active:hover::after{

opacity:1;

box-shadow:

0 0 12px rgba(216,199,255,.75);

}


/* =====================================
   FUTURE / UNPUBLISHED DAYS
===================================== */

.calendar-day.locked{

cursor:default;

color:rgba(216,199,255,.28);

border-color:rgba(216,199,255,.055);

background:

rgba(255,255,255,.008);

}

.calendar-day.locked::after{

content:"";

position:absolute;

left:18px;

bottom:18px;

width:4px;

height:4px;

border-radius:50%;

background:rgba(216,199,255,.18);

}


/* =====================================
   FOOTER
===================================== */

.legal-footer{

padding:0 30px 55px;

text-align:center;

}

.copyright{

color:rgba(233,225,211,.45);

font-family:"Cormorant Garamond",serif;

font-size:17px;

letter-spacing:1px;

}


/* =====================================
   TEXT SELECTION
===================================== */

::selection{

background:rgba(216,199,255,.35);

color:#ffffff;

}


/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#11141b;

}

::-webkit-scrollbar-thumb{

background:#5d5376;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#80729d;

}


/* =====================================
   MOBILE
===================================== */

@media (max-width:900px){

.calendar-header{

padding:35px 22px 0;

}

.calendar-hero{

padding:55px 22px 50px;

}

.calendar-hero h1{

font-size:40px;

letter-spacing:6px;

}

.calendar-hero p{

font-size:22px;

}

.calendar-container{

padding:0 18px;

}

.calendar{

padding:25px 18px;

}

.calendar-days,
.calendar-weekdays{

gap:6px;

}

.calendar-day{

min-height:85px;

padding:14px;

}

.day-number{

font-size:18px;

}

}


@media (max-width:600px){

.calendar-header{

padding:28px 18px 0;

}

.back-link{

font-size:15px;

}

.calendar-hero{

padding:45px 18px 40px;

}

.calendar-hero h1{

font-size:30px;

letter-spacing:4px;

}

.calendar-hero p{

font-size:20px;

}

.calendar-intro{

margin-bottom:45px;

}

.calendar-intro h2{

font-size:22px;

letter-spacing:3px;

}

.calendar-intro p{

font-size:19px;

}

.calendar{

padding:20px 10px;

}

.calendar-weekdays{

gap:3px;

}

.calendar-weekdays div{

font-size:9px;

letter-spacing:1px;

padding:10px 2px;

}

.calendar-days{

gap:3px;

}

.calendar-day{

min-height:62px;

padding:9px;

}

.day-number{

font-size:15px;

}

.calendar-day.active::after,
.calendar-day.locked::after{

left:9px;

bottom:9px;

width:4px;

height:4px;

}

}