/* ══════════════════════════════════════════════════════════════════ KANYA MANDIR — Academic Calendar Page File: academic_calendar.css Add to master.html : ══════════════════════════════════════════════════════════════════ */ /* ── Tokens (mirrors hero.css) ── */ :root { --ac-green: #08915e; --ac-green-l: #18c47e; --ac-green-d: #04562f; --ac-gold: #e8a020; --ac-crimson: #b8001a; --ac-blue: #1a6fb8; --ac-sport: #7c3aed; --ac-ink: #030c06; --ac-surface: #ffffff; --ac-bg: #f1f5f4; --ac-heading: #2d465e; --ac-rim: rgba(8,145,94,.18); --ac-ease: cubic-bezier(0.22,1,0.36,1); --ac-spring: cubic-bezier(0.34,1.56,0.64,1); } /* type colors */ .ac-type-exam { --tc: var(--ac-crimson); --tb: rgba(184,0,26,.1); --tbr: rgba(184,0,26,.25); } .ac-type-holiday { --tc: var(--ac-gold); --tb: rgba(232,160,32,.1);--tbr: rgba(232,160,32,.3);} .ac-type-event { --tc: var(--ac-green); --tb: rgba(8,145,94,.1); --tbr: rgba(8,145,94,.28); } .ac-type-result { --tc: var(--ac-blue); --tb: rgba(26,111,184,.1);--tbr: rgba(26,111,184,.28);} .ac-type-deadline { --tc: #d97706; --tb: rgba(217,119,6,.1); --tbr: rgba(217,119,6,.28);} .ac-type-sport { --tc: var(--ac-sport); --tb: rgba(124,58,237,.1);--tbr: rgba(124,58,237,.28);} /* ════════════════════════════ HERO ════════════════════════════ */ .ac-hero { position: relative; overflow: hidden; min-height: 340px; display: flex; align-items: center; background: var(--ac-ink); } .ac-hero__bg { position: absolute; inset: 0; } .ac-hero__img { width: 100%; height: 100%; object-fit: cover; opacity: .28; } .ac-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(3,12,6,.96) 0%, rgba(4,40,20,.82) 55%, rgba(3,12,6,.9) 100%), radial-gradient(ellipse 60% 80% at 8% 50%, rgba(8,145,94,.22) 0%, transparent 55%), radial-gradient(ellipse 40% 50% at 92% 80%, rgba(232,160,32,.1) 0%, transparent 50%); } /* Nepali pattern SVG motif */ .ac-hero__motif { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2318c47e' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .ac-hero__content { position: relative; z-index: 2; padding: 60px 0 50px; } .ac-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(8,145,94,.12); border: 1px solid rgba(8,145,94,.3); backdrop-filter: blur(10px); padding: 6px 16px 6px 10px; border-radius: 100px; margin-bottom: 18px; } .ac-hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-green-l); box-shadow: 0 0 8px var(--ac-green-l); animation: acDotPulse 2s ease-in-out infinite; } @keyframes acDotPulse { 0%,100%{opacity:1;} 50%{opacity:.3;} } .ac-hero__badge span { font-family: 'Poppins', sans-serif; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ac-green-l); } .ac-hero__title { font-family: 'Raleway', sans-serif; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; color: #fff; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 14px; } .ac-hero__title span { color: var(--ac-green-l); } .ac-hero__sub { font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255,255,255,.55); max-width: 520px; line-height: 1.7; margin-bottom: 28px; } /* Legend pills in hero */ .ac-hero__legend { display: flex; flex-wrap: wrap; gap: 8px; } .ac-legend-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); padding: 5px 14px; border-radius: 100px; font-family: 'Poppins', sans-serif; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.65); } .ac-legend-pill__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ════════════════════════════ YEAR / MONTH NAVIGATION BAR ════════════════════════════ */ .ac-nav { background: #fff; border-bottom: 1px solid rgba(8,145,94,.12); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(0,0,0,.06); } .ac-nav__inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; flex-wrap: wrap; } .ac-nav__year-select { font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 800; color: var(--ac-heading); background: transparent; border: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: background .2s; } .ac-nav__year-select:hover { background: rgba(8,145,94,.08); } .ac-nav__months { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .ac-nav__month-btn { font-family: 'Poppins', sans-serif; font-size: .68rem; font-weight: 600; color: #64748b; border: 1.5px solid transparent; background: transparent; border-radius: 10px; padding: 6px 12px; cursor: pointer; transition: all .22s var(--ac-ease); text-decoration: none; display: block; white-space: nowrap; } .ac-nav__month-btn:hover { background: rgba(8,145,94,.08); color: var(--ac-green); border-color: rgba(8,145,94,.2); } .ac-nav__month-btn.active { background: var(--ac-green); color: #fff; border-color: var(--ac-green); box-shadow: 0 4px 14px rgba(8,145,94,.35); } .ac-nav__view-toggle { display: flex; gap: 4px; margin-left: auto; } .ac-nav__view-btn { width: 36px; height: 36px; border-radius: 9px; background: transparent; border: 1.5px solid rgba(8,145,94,.2); color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: all .2s; } .ac-nav__view-btn.active, .ac-nav__view-btn:hover { background: var(--ac-green); color: #fff; border-color: var(--ac-green); } /* ════════════════════════════ MAIN LAYOUT ════════════════════════════ */ .ac-body { background: var(--ac-bg); padding: 40px 0 80px; min-height: 60vh; } .ac-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; } /* ════════════════════════════ CALENDAR GRID ════════════════════════════ */ .ac-calendar { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,.07), 0 0 0 1px rgba(8,145,94,.08); } /* Month header */ .ac-cal__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 20px; background: linear-gradient(135deg, var(--ac-green-d) 0%, var(--ac-green) 100%); } .ac-cal__month-nav { display: flex; align-items: center; gap: 14px; } .ac-cal__nav-btn { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all .22s; text-decoration: none; } .ac-cal__nav-btn:hover { background: rgba(255,255,255,.28); color: #fff; transform: scale(1.08); } .ac-cal__month-title { font-family: 'Raleway', sans-serif; font-size: 1.4rem; font-weight: 900; color: #fff; letter-spacing: -.02em; } .ac-cal__month-title small { display: block; font-size: .7rem; font-weight: 600; opacity: .7; letter-spacing: 1px; font-family: 'Poppins', sans-serif; text-transform: uppercase; } .ac-cal__year-badge { font-family: 'Poppins', sans-serif; font-size: .7rem; font-weight: 800; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 5px 14px; border-radius: 8px; letter-spacing: 1px; } /* Weekday header row */ .ac-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: #f8faf9; border-bottom: 1px solid rgba(8,145,94,.1); } .ac-cal__weekday { text-align: center; padding: 10px 0; font-family: 'Poppins', sans-serif; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #94a3b8; } .ac-cal__weekday:first-child { color: var(--ac-heading); } /* Sunday - working day */ .ac-cal__weekday:last-child { color: var(--ac-crimson); } /* Saturday */ /* Grid rows */ .ac-cal__grid { padding: 12px; display: flex; flex-direction: column; gap: 6px; } .ac-cal__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .ac-cal__day { position: relative; min-height: 88px; border-radius: 14px; border: 1.5px solid rgba(0,0,0,.05); padding: 9px 8px 8px; background: #f8faf9; transition: all .25s var(--ac-ease); cursor: default; overflow: hidden; } /* Subtle top-left corner accent bar */ .ac-cal__day::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: transparent; border-radius: 14px 0 0 14px; transition: background .25s; } /* ── HOVER (plain days) ── */ .ac-cal__day:hover:not(.ac-cal__day--empty):not([class*="--has-"]) { border-color: rgba(8,145,94,.2); background: #fff; box-shadow: 0 6px 20px rgba(8,145,94,.1); transform: translateY(-3px); z-index: 2; } /* ── EMPTY ── */ .ac-cal__day--empty { background: transparent; border-color: transparent; cursor: default; } .ac-cal__day--empty::before { display: none; } /* ── TODAY ── */ .ac-cal__day--today { background: rgba(8,145,94,.07) !important; border-color: var(--ac-green) !important; box-shadow: 0 0 0 2px rgba(8,145,94,.18) !important; } .ac-cal__day--today::before { background: var(--ac-green) !important; } /* ══════════════════════════════════════ FULL-CELL TYPE HIGHLIGHTS JS adds: ac-cal__day--has-exam, --has-holiday, --has-event, --has-result, --has-deadline, --has-sport ══════════════════════════════════════ */ /* EXAM — deep crimson wash */ .ac-cal__day--has-exam { background: linear-gradient(145deg, rgba(184,0,26,.13) 0%, rgba(184,0,26,.07) 100%); border-color: rgba(184,0,26,.3); box-shadow: inset 0 0 0 1px rgba(184,0,26,.1), 0 3px 14px rgba(184,0,26,.1); } .ac-cal__day--has-exam::before { background: #b8001a; } .ac-cal__day--has-exam:hover { background: linear-gradient(145deg, rgba(184,0,26,.2) 0%, rgba(184,0,26,.12) 100%); border-color: rgba(184,0,26,.45); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(184,0,26,.2); z-index: 2; } /* HOLIDAY — warm gold wash */ .ac-cal__day--has-holiday { background: linear-gradient(145deg, rgba(232,160,32,.14) 0%, rgba(232,160,32,.07) 100%); border-color: rgba(232,160,32,.32); box-shadow: inset 0 0 0 1px rgba(232,160,32,.1), 0 3px 14px rgba(232,160,32,.1); } .ac-cal__day--has-holiday::before { background: #e8a020; } .ac-cal__day--has-holiday:hover { background: linear-gradient(145deg, rgba(232,160,32,.22) 0%, rgba(232,160,32,.14) 100%); border-color: rgba(232,160,32,.5); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(232,160,32,.22); z-index: 2; } /* EVENT — brand green wash */ .ac-cal__day--has-event { background: linear-gradient(145deg, rgba(8,145,94,.12) 0%, rgba(8,145,94,.06) 100%); border-color: rgba(8,145,94,.28); box-shadow: inset 0 0 0 1px rgba(8,145,94,.08), 0 3px 14px rgba(8,145,94,.1); } .ac-cal__day--has-event::before { background: #08915e; } .ac-cal__day--has-event:hover { background: linear-gradient(145deg, rgba(8,145,94,.2) 0%, rgba(8,145,94,.12) 100%); border-color: rgba(8,145,94,.45); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(8,145,94,.2); z-index: 2; } /* RESULT — blue wash */ .ac-cal__day--has-result { background: linear-gradient(145deg, rgba(26,111,184,.12) 0%, rgba(26,111,184,.06) 100%); border-color: rgba(26,111,184,.28); box-shadow: inset 0 0 0 1px rgba(26,111,184,.08), 0 3px 14px rgba(26,111,184,.1); } .ac-cal__day--has-result::before { background: #1a6fb8; } .ac-cal__day--has-result:hover { background: linear-gradient(145deg, rgba(26,111,184,.2) 0%, rgba(26,111,184,.12) 100%); border-color: rgba(26,111,184,.45); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(26,111,184,.2); z-index: 2; } /* DEADLINE — amber wash */ .ac-cal__day--has-deadline { background: linear-gradient(145deg, rgba(217,119,6,.12) 0%, rgba(217,119,6,.06) 100%); border-color: rgba(217,119,6,.28); box-shadow: inset 0 0 0 1px rgba(217,119,6,.08), 0 3px 14px rgba(217,119,6,.1); } .ac-cal__day--has-deadline::before { background: #d97706; } .ac-cal__day--has-deadline:hover { background: linear-gradient(145deg, rgba(217,119,6,.2) 0%, rgba(217,119,6,.12) 100%); border-color: rgba(217,119,6,.45); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(217,119,6,.2); z-index: 2; } /* SPORT — purple wash */ .ac-cal__day--has-sport { background: linear-gradient(145deg, rgba(124,58,237,.12) 0%, rgba(124,58,237,.06) 100%); border-color: rgba(124,58,237,.28); box-shadow: inset 0 0 0 1px rgba(124,58,237,.08), 0 3px 14px rgba(124,58,237,.1); } .ac-cal__day--has-sport::before { background: #7c3aed; } .ac-cal__day--has-sport:hover { background: linear-gradient(145deg, rgba(124,58,237,.2) 0%, rgba(124,58,237,.12) 100%); border-color: rgba(124,58,237,.45); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 24px rgba(124,58,237,.2); z-index: 2; } /* Multi-event day — show both colors via double border */ .ac-cal__day--has-exam.ac-cal__day--has-holiday { background: linear-gradient(145deg, rgba(184,0,26,.1) 0%, rgba(232,160,32,.1) 100%); border-color: rgba(184,0,26,.3); } /* ── DAY NUMBER ── */ .ac-cal__day-num { font-family: 'Raleway', sans-serif; font-size: .95rem; font-weight: 800; color: var(--ac-heading); line-height: 1; margin-bottom: 5px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; } /* Colored day number badge matching the event type */ .ac-cal__day--has-exam .ac-cal__day-num { background: rgba(184,0,26,.15); color: #b8001a; } .ac-cal__day--has-holiday .ac-cal__day-num { background: rgba(232,160,32,.18); color: #a06808; } .ac-cal__day--has-event .ac-cal__day-num { background: rgba(8,145,94,.15); color: #04562f; } .ac-cal__day--has-result .ac-cal__day-num { background: rgba(26,111,184,.15);color: #1a4a80; } .ac-cal__day--has-deadline .ac-cal__day-num { background: rgba(217,119,6,.15); color: #92400e; } .ac-cal__day--has-sport .ac-cal__day-num { background: rgba(124,58,237,.15);color: #5b21b6; } .ac-cal__day--today .ac-cal__day-num { background: var(--ac-green) !important; color: #fff !important; border-radius: 50%; box-shadow: 0 2px 10px rgba(8,145,94,.4); } /* Saturday number always crimson */ .ac-cal__week > .ac-cal__day:last-child .ac-cal__day-num { color: var(--ac-crimson); } /* Event dots on day cell */ .ac-cal__day-events { display: flex; flex-direction: column; gap: 2px; } .ac-cal__day-event-dot { display: flex; align-items: center; gap: 4px; font-family: 'DM Sans', sans-serif; font-size: .58rem; line-height: 1.2; color: var(--tc); background: var(--tb); border-left: 2px solid var(--tc); padding: 1px 5px; border-radius: 0 4px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ac-cal__day-more { font-family: 'Poppins', sans-serif; font-size: .55rem; font-weight: 700; color: var(--ac-green); margin-top: 2px; } /* ════════════════════════════ SIDEBAR ════════════════════════════ */ .ac-sidebar { display: flex; flex-direction: column; gap: 20px; } /* Month Events Panel */ .ac-panel { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(8,145,94,.07); } .ac-panel__head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 16px; border-bottom: 1px solid rgba(8,145,94,.1); } .ac-panel__head-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--ac-green-d), var(--ac-green)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .85rem; flex-shrink: 0; } .ac-panel__title { font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 900; color: var(--ac-heading); margin: 0; } .ac-panel__count { margin-left: auto; font-family: 'Poppins', sans-serif; font-size: .65rem; font-weight: 800; background: rgba(8,145,94,.1); color: var(--ac-green); padding: 3px 10px; border-radius: 20px; } .ac-panel__body { padding: 12px; } /* Event item in sidebar */ .ac-event-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid transparent; transition: all .22s var(--ac-ease); cursor: default; margin-bottom: 6px; } .ac-event-item:last-child { margin-bottom: 0; } .ac-event-item:hover { background: rgba(8,145,94,.04); border-color: rgba(8,145,94,.15); transform: translateX(4px); } .ac-event-item__date { flex-shrink: 0; text-align: center; width: 44px; padding: 6px 4px; background: var(--tb); border: 1px solid var(--tbr); border-radius: 10px; } .ac-event-item__day { display: block; font-family: 'Raleway', sans-serif; font-size: 1.3rem; font-weight: 900; color: var(--tc); line-height: 1; } .ac-event-item__month { display: block; font-family: 'Poppins', sans-serif; font-size: .52rem; font-weight: 700; color: var(--tc); opacity: .75; text-transform: uppercase; letter-spacing: .5px; } .ac-event-item__body { flex: 1; min-width: 0; } .ac-event-item__title { font-family: 'Raleway', sans-serif; font-size: .9rem; font-weight: 800; color: var(--ac-heading); margin-bottom: 3px; line-height: 1.3; } .ac-event-item__type-badge { display: inline-flex; font-family: 'Poppins', sans-serif; font-size: .55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--tc); background: var(--tb); padding: 2px 8px; border-radius: 4px; } .ac-event-item__desc { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: #94a3b8; margin-top: 4px; line-height: 1.5; } /* ── All Year Timeline ── */ .ac-timeline { padding: 8px 0; } .ac-timeline__month { margin-bottom: 18px; } .ac-timeline__month-label { display: flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--ac-green); margin-bottom: 8px; padding: 0 12px; } .ac-timeline__month-label::after { content: ''; flex: 1; height: 1px; background: rgba(8,145,94,.15); } .ac-timeline__month-num { width: 22px; height: 22px; border-radius: 6px; background: rgba(8,145,94,.1); display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--ac-green); flex-shrink: 0; } /* ── Mini summary stats ── */ .ac-stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(8,145,94,.1); border-top: 1px solid rgba(8,145,94,.1); } .ac-stats-strip__item { background: #fff; padding: 14px 10px; text-align: center; } .ac-stats-strip__num { display: block; font-family: 'Raleway', sans-serif; font-size: 1.4rem; font-weight: 900; color: var(--ac-heading); } .ac-stats-strip__lbl { font-family: 'DM Sans', sans-serif; font-size: .65rem; color: #94a3b8; margin-top: 2px; } /* ════════════════════════════ LIST VIEW (toggle) ════════════════════════════ */ .ac-list-view { display: none; } .ac-list-view.active { display: block; } .ac-grid-view.hidden { display: none; } .ac-list-month { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.06); margin-bottom: 20px; } .ac-list-month__head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: linear-gradient(90deg, rgba(8,145,94,.08) 0%, transparent 100%); border-bottom: 1px solid rgba(8,145,94,.1); } .ac-list-month__num { width: 40px; height: 40px; border-radius: 12px; background: var(--ac-green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Raleway', sans-serif; font-size: .95rem; font-weight: 900; flex-shrink: 0; } .ac-list-month__name { font-family: 'Raleway', sans-serif; font-size: 1.1rem; font-weight: 900; color: var(--ac-heading); } .ac-list-month__body { padding: 14px; } .ac-list-event { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--tc); background: var(--tb); margin-bottom: 8px; transition: transform .2s; } .ac-list-event:hover { transform: translateX(4px); } .ac-list-event:last-child { margin-bottom: 0; } .ac-list-event__day { font-family: 'Raleway', sans-serif; font-size: 1.2rem; font-weight: 900; color: var(--tc); flex-shrink: 0; width: 32px; text-align: center; } .ac-list-event__title { font-family: 'Raleway', sans-serif; font-size: .92rem; font-weight: 800; color: var(--ac-heading); flex: 1; } .ac-list-event__badge { font-family: 'Poppins', sans-serif; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--tc); background: var(--tbr); padding: 3px 10px; border-radius: 6px; flex-shrink: 0; } .ac-list-empty { text-align: center; padding: 28px; font-family: 'DM Sans', sans-serif; font-size: .88rem; color: #cbd5e1; } /* ════════════════════════════ TERMS BANNER ════════════════════════════ */ .ac-terms { background: #fff; border-radius: 20px; padding: 24px; margin-bottom: 28px; box-shadow: 0 4px 20px rgba(0,0,0,.06); overflow: hidden; } .ac-terms__title { font-family: 'Raleway', sans-serif; font-size: .85rem; font-weight: 900; color: var(--ac-heading); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; } .ac-terms__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ac-term-card { border-radius: 14px; overflow: hidden; border: 1.5px solid rgba(0,0,0,.06); } .ac-term-card__bar { height: 5px; background: var(--tc, var(--ac-green)); } .ac-term-card__body { padding: 12px; } .ac-term-card__name { font-family: 'Raleway', sans-serif; font-size: .82rem; font-weight: 900; color: var(--ac-heading); margin-bottom: 5px; } .ac-term-card__range { font-family: 'DM Sans', sans-serif; font-size: .72rem; color: #94a3b8; } /* ══════════════════════════════════════ RANGE EVENT CELLS JS adds --range-start, --range-mid, --range-end ══════════════════════════════════════ */ /* Start of range — rounded left, square right */ .ac-cal__day--range-start { border-radius: 14px 4px 4px 14px; } /* Middle of range — no border radius on sides, full bleed color */ .ac-cal__day--range-mid { border-radius: 4px; border-left-color: transparent !important; border-right-color: transparent !important; } .ac-cal__day--range-mid::before { display: none; } /* End of range — square left, rounded right */ .ac-cal__day--range-end { border-radius: 4px 14px 14px 4px; border-left-color: transparent !important; } .ac-cal__day--range-end::before { display: none; } /* Stronger fill for mid/end cells */ .ac-cal__day--has-exam.ac-cal__day--range-mid, .ac-cal__day--has-exam.ac-cal__day--range-end { background: linear-gradient(145deg, rgba(184,0,26,.18) 0%, rgba(184,0,26,.11) 100%); } .ac-cal__day--has-holiday.ac-cal__day--range-mid, .ac-cal__day--has-holiday.ac-cal__day--range-end { background: linear-gradient(145deg, rgba(232,160,32,.2) 0%, rgba(232,160,32,.12) 100%); } .ac-cal__day--has-event.ac-cal__day--range-mid, .ac-cal__day--has-event.ac-cal__day--range-end { background: linear-gradient(145deg, rgba(8,145,94,.18) 0%, rgba(8,145,94,.1) 100%); } .ac-cal__day--has-result.ac-cal__day--range-mid, .ac-cal__day--has-result.ac-cal__day--range-end { background: linear-gradient(145deg, rgba(26,111,184,.18) 0%, rgba(26,111,184,.1) 100%); } .ac-cal__day--has-deadline.ac-cal__day--range-mid, .ac-cal__day--has-deadline.ac-cal__day--range-end { background: linear-gradient(145deg, rgba(217,119,6,.18) 0%, rgba(217,119,6,.1) 100%); } .ac-cal__day--has-sport.ac-cal__day--range-mid, .ac-cal__day--has-sport.ac-cal__day--range-end { background: linear-gradient(145deg, rgba(124,58,237,.18) 0%, rgba(124,58,237,.1) 100%); } /* Range mid/end — hide the event label dots (only show on start) */ .ac-cal__day--range-mid .ac-cal__day-events, .ac-cal__day--range-end .ac-cal__day-events { display: none; } /* Range mid/end day number — lighter */ .ac-cal__day--range-mid .ac-cal__day-num, .ac-cal__day--range-end .ac-cal__day-num { opacity: .65; } /* ════════════════════════════ RESPONSIVE ════════════════════════════ */ @media (max-width: 1100px) { .ac-layout { grid-template-columns: 1fr 300px; } } @media (max-width: 991px) { .ac-layout { grid-template-columns: 1fr; } .ac-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .ac-terms__track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ac-hero { min-height: 260px; } .ac-hero__title { font-size: clamp(1.6rem, 6vw, 2.2rem); } .ac-nav__months { gap: 2px; } .ac-nav__month-btn { font-size: .6rem; padding: 5px 9px; } .ac-cal__day { min-height: 58px; padding: 6px 4px; } .ac-sidebar { grid-template-columns: 1fr; } .ac-terms__track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ac-cal__day-event-dot { display: none; } .ac-cal__day { min-height: 44px; } .ac-terms__track { grid-template-columns: 1fr 1fr; } .ac-hero__legend { display: none; } }