@charset "UTF-8"; /* CSS Document */ /* ===== Mini day boxes: global theme ===== */ :root{ --mini-bg: #ffd400; /* background of minis */ --mini-text: #fff; /* text color */ --mini-border: transparent; /* add a subtle border if you like */ --mini-shadow: 0 10px 24px rgba(0,0,0,.35); --mini-shadow-hover: 0 16px 36px rgba(0,0,0,.45); --mini-thumb-bg: #111; /* little image box bg */ --mini-thumb-size: 52px; --mini-radius: 12px; --mini-gap-inline: 10px; --mini-height: 65px; --mini-label-size: 15px; --mini-label-weight: 900; } /* core mini style (does not affect tall .day-box) */ .day-box--mini{ aspect-ratio: auto; height: var(--mini-height); padding: 8px 12px; display: flex; align-items: center; justify-content: flex-start; gap: var(--mini-gap-inline); background: var(--mini-bg); color: var(--mini-text); border: 1px solid var(--mini-border); border-radius: var(--mini-radius); box-shadow: var(--mini-shadow); text-decoration: none; overflow: visible; transition: transform .18s, box-shadow .18s, filter .18s; } .day-box--mini:hover{ transform: translateY(-3px); box-shadow: var(--mini-shadow-hover); filter: saturate(1.05); } /* thumbnail in minis */ .day-box--mini .inner-box{ position: static; width: var(--mini-thumb-size); height: var(--mini-thumb-size); flex: 0 0 var(--mini-thumb-size); border-radius: 10px; overflow: hidden; background: var(--mini-thumb-bg); } .day-box--mini .inner-box img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* label inside minis */ .day-box--mini .day-label{ position: static; background: transparent; padding: 0; font-size: var(--mini-label-size); font-weight: var(--mini-label-weight); line-height: 1.1; } /* optional: slightly softer shadow when minis are inside a stack wrapper */ .mini-stack .day-box--mini{ box-shadow: 0 6px 16px rgba(0,0,0,.32); } /* ===== Optional themes (switch via a class on or the section) ===== */ body.theme-mint{ --mini-bg: #1e6f5c; --mini-text: #fff; --mini-border: rgba(255,255,255,.18); --mini-thumb-bg: #124b3f; } body.theme-sun{ --mini-bg: #ffd400; --mini-text: #111; --mini-border: rgba(0,0,0,.1); --mini-thumb-bg: #f4c400; }