Template:PortalCurrentEvents/styles.css
Template page
More actions
/* ============================================ */
/* CURRENT EVENTS PORTAL - COMPACT CALENDAR VERSION */
/* ============================================ */
/* WRAPPER & HEADER */
.portal-events-wrapper {
max-width: 1400px;
margin: 0 auto 2rem;
padding: 0 1rem;
}
.portal-events-header {
background: linear-gradient(135deg, #f7faf6 0%, #eef4ea 100%);
border-radius: 12px;
border: 1px solid #c5d2c0;
padding: 1.2rem 1.5rem;
margin-bottom: 1.25rem;
}
.portal-events-nav {
font-size: 0.85rem;
color: #4b5f3c;
}
.portal-events-nav a {
color: #324625;
text-decoration: none;
}
.portal-events-nav a:hover {
text-decoration: underline;
}
/* ============================================ */
/* CALENDAR NAVIGATION - SIDEBAR MINI VERSION */
/* ============================================ */
.portal-events-calendar {
background: #ffffff;
border: 1px solid #d2ddce;
border-radius: 8px;
padding: 0.45rem 0.55rem;
margin-bottom: 1.25rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
/* Month Navigation */
.calendar-month-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.35rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid #e8ede5;
}
.calendar-current-month {
font-size: 0.75rem;
font-weight: 700;
color: #26351a;
white-space: nowrap;
}
.calendar-nav-link {
display: inline-block;
background: #f0f5ed;
border: 1px solid #d2ddce;
border-radius: 4px;
padding: 0.15rem 0.35rem;
font-size: 0.68rem;
color: #3a4a2e;
font-weight: 600;
text-decoration: none;
line-height: 1;
transition: background 0.2s;
white-space: nowrap;
}
.calendar-nav-link a {
color: #3a4a2e;
text-decoration: none;
}
.calendar-nav-link:hover {
background: #e3ebe0;
}
.calendar-nav-disabled {
opacity: 0.45;
}
/* Weekday Headers */
.calendar-week-headers {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.18rem;
margin-bottom: 0.18rem;
}
.calendar-weekday {
text-align: center;
font-size: 0.52rem;
font-weight: 700;
color: #5a6650;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.05rem 0;
}
/* Month Grid */
.calendar-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.18rem;
margin-bottom: 0.35rem;
grid-auto-rows: 22px;
}
.calendar-day {
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: #fafbf9;
border: 1px solid #e8ede5;
border-radius: 3px;
font-size: 0.6rem;
font-weight: 600;
color: #7a8472;
transition: all 0.15s;
position: relative;
padding: 0;
}
.calendar-day a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: inherit;
text-decoration: none;
}
/* Empty cells */
.calendar-day.empty {
background: transparent;
border: none;
}
/* Days with events */
.calendar-day.has-events {
background: #5b7a45;
border-color: #4a6337;
}
.calendar-day.has-events a {
color: #ffffff;
font-weight: 700;
}
.calendar-day.has-events:hover {
background: #4a6337;
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* Today indicator */
.calendar-day.today {
border: 2px solid #d4842f;
background: #fef9f3;
}
.calendar-day.today a {
color: #d4842f;
}
.calendar-day.today.has-events {
background: #5b7a45;
border: 2px solid #d4842f;
box-shadow: 0 0 0 2px rgba(212, 132, 47, 0.12);
}
.calendar-day.today.has-events a {
color: #ffffff;
}
/* Regular days hover */
.calendar-day:not(.has-events):not(.empty):hover {
background: #f0f5ed;
border-color: #d2ddce;
}
/* Event indicator dot */
.calendar-day.has-events::after {
content: '';
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 2px;
background: rgba(255, 255, 255, 0.85);
border-radius: 50%;
}
/* Archive Links */
.calendar-archive-link {
text-align: center;
font-size: 0.65rem;
padding-top: 0.3rem;
border-top: 1px solid #e8ede5;
line-height: 1.3;
}
.calendar-archive-link a {
color: #3a5228;
text-decoration: none;
padding: 0.1rem 0.2rem;
border-radius: 3px;
transition: background 0.2s;
}
.calendar-archive-link a:hover {
background: #f0f5ed;
text-decoration: underline;
}
/* Mini calendar mobile tune */
@media (max-width: 768px) {
.calendar-month-grid {
grid-auto-rows: 20px;
}
.calendar-day {
height: 20px;
font-size: 0.58rem;
}
.calendar-weekday {
font-size: 0.5rem;
}
}
/* ============================================ */
/* TWO-COLUMN GRID */
/* ============================================ */
.portal-events-grid {
display: grid;
grid-template-columns: 60% 38%;
gap: 2%;
}
/* ============================================ */
/* LEFT COLUMN: CHRONOLOGICAL FEED */
/* ============================================ */
.portal-events-feed {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* DAY CARD */
.day-card {
background: #ffffff;
border: 1px solid #d2ddce;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.day-header {
background: linear-gradient(135deg, #3a5228 0%, #2d4120 100%);
padding: 0.9rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.day-date {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
}
.day-count {
font-size: 0.85rem;
color: #b8d4a8;
background: rgba(255, 255, 255, 0.15);
padding: 0.25rem 0.7rem;
border-radius: 12px;
}
.day-events {
padding: 1rem 1.25rem 1.25rem;
}
/* EVENT ITEM */
.event-item {
padding: 1rem;
margin-bottom: 1rem;
border-left: 4px solid #d2ddce;
background: #fafbf9;
border-radius: 6px;
}
.event-item:last-child {
margin-bottom: 0;
}
/* Event Type Color Coding */
.event-policy {
border-left-color: #5b7a45;
background: #f7faf5;
}
.event-enforcement {
border-left-color: #c75b3c;
background: #fef7f5;
}
.event-fieldwork {
border-left-color: #4a7c9d;
background: #f5f9fb;
}
.event-meta {
display: flex;
gap: 0.6rem;
margin-bottom: 0.5rem;
align-items: center;
}
.event-tag {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.6rem;
border-radius: 4px;
}
.tag-policy {
background: #5b7a45;
color: #ffffff;
}
.tag-enforcement {
background: #c75b3c;
color: #ffffff;
}
.tag-fieldwork {
background: #4a7c9d;
color: #ffffff;
}
.event-region {
font-size: 0.8rem;
color: #5a6650;
font-weight: 500;
}
.event-title {
font-size: 1rem;
font-weight: 600;
color: #26351a;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.event-body {
font-size: 0.9rem;
color: #3a4a2e;
line-height: 1.6;
margin-bottom: 0.6rem;
}
.event-links {
font-size: 0.8rem;
color: #5a6650;
padding-top: 0.5rem;
border-top: 1px solid #e8ede5;
}
.event-links a {
color: #3a5228;
text-decoration: none;
}
.event-links a:hover {
text-decoration: underline;
}
/* ============================================ */
/* RIGHT COLUMN: SIDEBAR */
/* ============================================ */
.portal-events-sidebar {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sidebar-card {
background: #ffffff;
border: 1px solid #d2ddce;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.sidebar-title {
font-size: 1rem;
font-weight: 600;
color: #ffffff;
padding: 0.9rem 1.25rem;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar-icon {
font-size: 1.1rem;
}
/* Sidebar Card Type Styling */
.sidebar-enforcement .sidebar-title {
background: linear-gradient(135deg, #c75b3c 0%, #a84a2f 100%);
}
.sidebar-fieldwork .sidebar-title {
background: linear-gradient(135deg, #4a7c9d 0%, #3a6379 100%);
}
.sidebar-policy .sidebar-title {
background: linear-gradient(135deg, #5b7a45 0%, #4a6337 100%);
}
.sidebar-conservation .sidebar-title {
background: linear-gradient(135deg, #3a5228 0%, #2d4120 100%);
}
.sidebar-list {
padding: 0.75rem 1.25rem 1rem;
}
.sidebar-item {
padding: 0.75rem 0;
border-bottom: 1px solid #e8ede5;
}
.sidebar-item:last-child {
border-bottom: none;
}
.sidebar-date {
font-size: 0.75rem;
color: #5a6650;
font-weight: 600;
margin-bottom: 0.25rem;
}
.sidebar-region {
font-size: 0.85rem;
color: #26351a;
font-weight: 600;
margin-bottom: 0.15rem;
}
.sidebar-status {
font-size: 0.75rem;
color: #5a6650;
margin-bottom: 0.35rem;
}
.sidebar-link {
font-size: 0.85rem;
color: #3a4a2e;
line-height: 1.4;
}
.sidebar-link a {
color: #3a5228;
text-decoration: none;
}
.sidebar-link a:hover {
text-decoration: underline;
}
.sidebar-footer {
padding: 0.75rem 1.25rem;
background: #f7faf6;
border-top: 1px solid #e8ede5;
font-size: 0.85rem;
}
.sidebar-footer a {
color: #3a5228;
text-decoration: none;
font-weight: 500;
}
.sidebar-footer a:hover {
text-decoration: underline;
}
/* CONSERVATION STATUS GRID */
.status-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
padding: 1rem 1.25rem;
}
.status-item {
text-align: center;
padding: 0.75rem 0.5rem;
border-radius: 6px;
border: 2px solid;
}
.status-critical {
border-color: #c75b3c;
background: #fef7f5;
}
.status-eradications {
border-color: #d4842f;
background: #fef9f3;
}
.status-active {
border-color: #5b7a45;
background: #f7faf5;
}
.status-label {
font-size: 0.75rem;
font-weight: 600;
color: #3a4a2e;
margin-bottom: 0.25rem;
}
.status-count {
font-size: 1.25rem;
font-weight: 700;
color: #26351a;
}
/* ============================================ */
/* UPDATE GUIDELINES */
/* ============================================ */
.portal-events-guidelines {
background: #f7faf6;
border: 1px dashed #c5d2c0;
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin-top: 2rem;
}
.portal-events-guidelines h3 {
font-size: 1.1rem;
color: #26351a;
margin: 0 0 1rem;
}
.guidelines-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1rem;
}
.guideline-item {
font-size: 0.85rem;
color: #3a4a2e;
line-height: 1.5;
}
.guideline-item strong {
color: #26351a;
}
.portal-events-guidelines p {
font-size: 0.85rem;
color: #4c5d44;
margin: 0;
line-height: 1.6;
}
/* ============================================ */
/* RESPONSIVE DESIGN (MOBILE OPTIMIZED) */
/* ============================================ */
@media (max-width: 1100px) {
.portal-events-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.portal-events-sidebar {
margin-top: 0;
}
.guidelines-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
/* overall page breathing room */
.portal-events-wrapper {
padding: 0 0.6rem;
}
.portal-events-header {
padding: 0.85rem 1rem;
margin-bottom: 0.9rem;
border-radius: 10px;
}
.portal-events-nav {
font-size: 0.8rem;
line-height: 1.45;
}
/* calendar in sidebar should feel like a widget */
.portal-events-calendar {
padding: 0.45rem 0.55rem;
border-radius: 8px;
}
/* month nav stacks cleanly */
.calendar-month-nav {
flex-direction: row;
gap: 0.4rem;
}
.calendar-current-month {
font-size: 0.75rem;
text-align: center;
flex: 1;
}
.calendar-nav-link {
font-size: 0.68rem;
padding: 0.15rem 0.35rem;
}
/* day cards tighten and headers stack */
.day-header {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
padding: 0.8rem 1rem;
}
.day-date {
font-size: 1rem;
}
.day-count {
font-size: 0.78rem;
padding: 0.2rem 0.55rem;
}
.day-events {
padding: 0.85rem 1rem 1rem;
}
.event-item {
padding: 0.85rem;
margin-bottom: 0.85rem;
}
/* meta row wraps instead of overflowing */
.event-meta {
flex-wrap: wrap;
row-gap: 0.35rem;
column-gap: 0.5rem;
}
.event-title {
font-size: 0.95rem;
}
.event-body {
font-size: 0.88rem;
line-height: 1.55;
}
.event-links {
font-size: 0.78rem;
}
/* sidebar cards tighter */
.sidebar-title {
padding: 0.8rem 1rem;
font-size: 0.95rem;
}
.sidebar-list {
padding: 0.6rem 1rem 0.85rem;
}
.sidebar-item {
padding: 0.65rem 0;
}
.sidebar-link {
font-size: 0.83rem;
}
.sidebar-footer {
padding: 0.6rem 1rem;
font-size: 0.82rem;
}
}
@media (max-width: 600px) {
/* even tighter cards + calendar */
.day-card,
.sidebar-card {
border-radius: 8px;
}
.event-tag {
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
}
/* calendar grid slightly smaller */
.calendar-week-headers,
.calendar-month-grid {
gap: 0.16rem;
}
.calendar-month-grid {
grid-auto-rows: 20px;
}
.calendar-day {
height: 20px;
font-size: 0.58rem;
}
.calendar-weekday {
font-size: 0.5rem;
}
.calendar-archive-link {
font-size: 0.63rem;
}
}
@media (max-width: 480px) {
/* kill any leftover horizontal cramp */
.portal-events-wrapper {
padding: 0 0.45rem;
}
.portal-events-header {
padding: 0.75rem 0.85rem;
}
.day-header {
padding: 0.7rem 0.85rem;
}
.day-events {
padding: 0.75rem 0.85rem 0.9rem;
}
.event-item {
padding: 0.75rem;
}
.event-title {
font-size: 0.92rem;
}
.event-body {
font-size: 0.86rem;
}
.sidebar-title {
font-size: 0.9rem;
}
/* month nav wraps instead of squishing */
.calendar-month-nav {
flex-wrap: wrap;
row-gap: 0.3rem;
}
.calendar-nav-link,
.calendar-current-month {
width: 100%;
text-align: center;
}
}
/* ARCHIVE STRIP (REPLACES PAGINATION) */
.feed-archive-strip {
margin-top: 1.25rem;
padding: 0.9rem 1.1rem;
background: #f7faf6;
border: 1px solid #d2ddce;
border-radius: 8px;
text-align: center;
font-size: 0.9rem;
font-weight: 600;
}
.feed-archive-strip a {
color: #3a5228;
text-decoration: none;
}
.feed-archive-strip a:hover {
text-decoration: underline;
}
.guidelines-footer-link {
margin-top: 0.9rem;
font-size: 0.9rem;
font-weight: 600;
}
.guidelines-footer-link a {
color: #3a5228;
text-decoration: none;
}
.guidelines-footer-link a:hover {
text-decoration: underline;
}