/* ========================================================= DAILY READINGS Two Column Layout Calendar + Daily Reading ========================================================= */ /* ========================================================= MAIN WRAPPER ========================================================= */ .adr-wrapper { width: 100%; max-width: 1250px; margin: 40px auto; padding: 0 20px; color: #263746; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 35px; align-items: start; } /* ========================================================= CALENDAR ========================================================= */ .adr-calendar { background: #ffffff; border: 1px solid #e7eaed; border-radius: 18px; padding: 24px; box-shadow: 0 8px 30px rgba(38, 55, 70, 0.07); /* * Keeps calendar visible while scrolling * through long Bible readings. */ position: sticky; top: 30px; } /* ========================================================= CALENDAR HEADER ========================================================= */ .adr-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #eef0f2; } /* Month / Year */ .adr-calendar-header strong { color: #263746; font-size: 18px; font-weight: 700; text-align: center; } /* Previous / Next buttons */ .adr-calendar-header button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #e2e6e9; border-radius: 50%; background: #ffffff; color: #263746; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .adr-calendar-header button:hover { background: #263746; color: #ffffff; border-color: #263746; transform: translateY(-2px); } /* ========================================================= WEEKDAYS ========================================================= */ .adr-weekdays, .adr-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .adr-weekdays { margin-bottom: 7px; } .adr-weekdays span { text-align: center; padding: 8px 2px; color: #7b8790; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } /* ========================================================= CALENDAR DAYS ========================================================= */ .adr-day { position: relative; min-height: 52px; width: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #edf0f2; border-radius: 9px; background: #ffffff; color: #263746; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } /* Hover */ .adr-day:hover { background: #f7f9fa; border-color: #cfd6db; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(38, 55, 70, 0.08); } /* Selected day */ .adr-day.selected { background: #263746; color: #ffffff; border-color: #263746; font-weight: 700; box-shadow: 0 6px 18px rgba(38, 55, 70, 0.20); transform: translateY(-2px); } /* ========================================================= DAYS WITH READINGS ========================================================= */ .adr-day.has-reading { position: relative; } /* Reading indicator */ .adr-day.has-reading::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #e30613; transform: translateX(-50%); } /* Selected reading indicator */ .adr-day.selected.has-reading::after { background: #ffffff; } /* ========================================================= EMPTY CALENDAR CELLS ========================================================= */ .adr-empty { min-height: 52px; } /* ========================================================= READING CONTENT COLUMN ========================================================= */ #adr-reading-content { min-width: 0; position: relative; transition: opacity .2s ease; } /* ========================================================= DAY READING ========================================================= */ .adr-day-reading { margin: 0; } /* ========================================================= DATE ========================================================= */ .adr-date { display: inline-block; margin-bottom: 6px; color: #7b8790; font-size: 13px; font-weight: 600; letter-spacing: .04em; } /* ========================================================= DAILY READING TITLE ========================================================= */ .adr-day-reading h2 { margin: 5px 0 25px; color: #263746; font-size: 30px; line-height: 1.25; font-weight: 700; } /* ========================================================= DESCRIPTION ========================================================= */ .adr-description { margin-bottom: 25px; color: #5d6971; font-size: 15px; line-height: 1.75; } /* ========================================================= INDIVIDUAL READING CARD ========================================================= */ .adr-reading { position: relative; padding: 25px 28px; margin-bottom: 18px; background: #ffffff; border: 1px solid #e7eaed; border-radius: 14px; box-shadow: 0 5px 20px rgba(38, 55, 70, 0.05); transition: box-shadow .2s ease, transform .2s ease; } .adr-reading:hover { box-shadow: 0 8px 25px rgba(38, 55, 70, 0.09); transform: translateY(-2px); } /* ========================================================= RED ACCENT ========================================================= */ .adr-reading::before { content: ""; position: absolute; top: 25px; left: 0; width: 4px; height: 42px; background: #e30613; border-radius: 0 4px 4px 0; } /* ========================================================= READING TYPE ========================================================= */ .adr-reading-type { display: inline-block; margin-bottom: 6px; color: #e30613; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } /* ========================================================= READING REFERENCE ========================================================= */ .adr-reading h3 { margin: 5px 0 18px; color: #263746; font-size: 20px; line-height: 1.4; font-weight: 700; } /* ========================================================= BIBLE TEXT ========================================================= */ .adr-bible-text { max-width: 900px; color: #4f5d66; font-size: 16px; line-height: 1.9; } /* Paragraph spacing */ .adr-bible-text p { margin-top: 0; margin-bottom: 16px; } /* ========================================================= NO READING ========================================================= */ .adr-no-reading { padding: 35px 25px; color: #7b8790; text-align: center; background: #f8f9fa; border: 1px dashed #dfe4e7; border-radius: 12px; font-size: 15px; } /* ========================================================= LOADING ========================================================= */ #adr-reading-content.loading { opacity: .45; pointer-events: none; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1000px) { .adr-wrapper { grid-template-columns: 320px minmax(0, 1fr); gap: 25px; } .adr-calendar { padding: 18px; } .adr-day { min-height: 48px; } .adr-empty { min-height: 48px; } .adr-day-reading h2 { font-size: 26px; } .adr-reading { padding: 23px 24px; } } /* ========================================================= MOBILE / ONE COLUMN ========================================================= */ @media (max-width: 768px) { .adr-wrapper { display: block; width: 100%; margin: 25px auto; padding: 0 12px; } /* * Calendar is no longer sticky * when layout becomes one column. */ .adr-calendar { position: static; margin-bottom: 30px; padding: 18px; border-radius: 14px; } .adr-weekdays, .adr-days { gap: 4px; } .adr-weekdays span { font-size: 10px; padding: 8px 2px; } .adr-day { min-height: 52px; border-radius: 7px; font-size: 14px; } .adr-empty { min-height: 52px; } .adr-calendar-header { margin-bottom: 18px; padding-bottom: 15px; } .adr-calendar-header button { width: 36px; height: 36px; font-size: 18px; } .adr-calendar-header strong { font-size: 16px; } .adr-day-reading h2 { font-size: 25px; margin-bottom: 20px; } .adr-reading { padding: 23px 22px; } .adr-reading h3 { font-size: 19px; } .adr-bible-text { font-size: 15px; line-height: 1.8; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .adr-wrapper { padding: 0 8px; } .adr-calendar { padding: 12px; } .adr-weekdays, .adr-days { gap: 3px; } .adr-day { min-height: 44px; font-size: 13px; border-radius: 6px; } .adr-empty { min-height: 44px; } .adr-day.has-reading::after { width: 4px; height: 4px; bottom: 5px; } .adr-day-reading { margin-top: 0; } .adr-day-reading h2 { font-size: 22px; } .adr-reading { padding: 20px 18px; } .adr-reading::before { top: 20px; height: 35px; } .adr-reading h3 { font-size: 18px; } .adr-bible-text { font-size: 14px; line-height: 1.75; } }