inside the button span, keep it button-like */
.rw-btn a{
color: inherit;
text-decoration: none;
font-weight: inherit;
}
.rw-btn a:hover{ text-decoration: none; }
/* CONTACT ROWS */
.rw-event-contact{
display: grid;
grid-template-columns: 1fr;
gap: 8px;
border-top: 1px solid rgba(0,0,0,.10);
padding-top: 12px;
margin-top: 10px;
}
.rw-contact-item{
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
font-size: 14px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(255,255,255,.54);
border: 1px solid rgba(0,0,0,.08);
}
.rw-contact-icon{ opacity: .85; }
.rw-event-contact a{
color: var(--rw-accent);
font-weight: 900;
text-decoration: none;
}
.rw-event-contact a:hover{ text-decoration: underline; }
/* BODY + GRID */
.rw-event-body{
padding: 18px 22px 22px;
background:
radial-gradient(900px 420px at 70% 40%, rgba(8,59,102,.06), transparent 62%),
linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.02));
}
.rw-event-grid{
max-width: 1040px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
/* This is the key fix: the wrapper spans full width, then becomes its own 2-col grid */
.rw-panels-2{
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.rw-panel{
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.80);
border-radius: 16px;
padding: 14px 14px;
box-shadow: 0 10px 22px rgba(0,0,0,.06);
min-width: 0;
}
.rw-panel-title{
margin: 0 0 10px;
font-size: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.rw-panel-title:before{
content:"";
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--rw-accent2);
box-shadow: 0 0 0 4px rgba(11,94,163,.14);
}
.rw-list{ margin: 8px 0 0 18px; }
.rw-muted{ color: var(--rw-muted); }
.rw-callout{
margin: 12px 0 0;
padding: 12px 12px;
border-radius: 14px;
background: rgba(8,59,102,.07);
border: 1px solid rgba(8,59,102,.18);
}
/* ICON CARDS */
.rw-icons{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 10px;
}
.rw-icon-card{
position: relative;
display: flex;
gap: 10px;
align-items: flex-start;
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.74);
border-radius: 14px;
padding: 12px 12px;
box-shadow: 0 10px 20px rgba(0,0,0,.05);
}
.rw-icon-card:before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width: 4px;
border-radius: 14px 0 0 14px;
background: linear-gradient(180deg, var(--rw-accent), var(--rw-accent2));
opacity: .85;
}
.rw-icon{ font-size: 20px; line-height: 1; margin-left: 2px; }
.rw-icon-title{ font-weight: 900; margin-bottom: 2px; }
/* Responsive */
@media (max-width: 720px){
.rw-event-quick{ grid-template-columns: 1fr; }
.rw-event-grid{ grid-template-columns: 1fr; }
.rw-panels-2{ grid-template-columns: 1fr; }
.rw-icons{ grid-template-columns: 1fr; }
.rw-event-title{ font-size: 28px; }
}
/* ===== Dark theme (MyBB theme id 5) =====
Requires: (which you already set up)
*/
#container.rw-theme-5 .rw-event-wrap{
/* text + lines */
--rw-ink: rgba(255,255,255,.92);
--rw-muted: rgba(255,255,255,.70);
--rw-line: rgba(255,255,255,.10);
/* slightly calmer accent for dark */
--rw-accent: #4aa3e6;
--rw-accent2: #1f76c8;
/* softer outer surface (avoid “dead black”) */
background:
radial-gradient(900px 420px at 18% 12%, rgba(31,118,200,.22), transparent 62%),
radial-gradient(700px 360px at 82% 18%, rgba(74,163,230,.14), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
border-color: rgba(255,255,255,.10);
box-shadow: 0 16px 44px rgba(0,0,0,.55);
/* FORCE readable text (dark themes often override post text colors) */
color: var(--rw-ink) !important;
}
/* Keep hero like your “perfect” top box, but ensure text stays readable */
#container.rw-theme-5 .rw-event-hero{
background:
radial-gradient(900px 420px at 18% 12%, rgba(31,118,200,.28), transparent 62%),
radial-gradient(700px 360px at 82% 18%, rgba(74,163,230,.18), transparent 58%),
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
#container.rw-theme-5 .rw-event-hero:after{ opacity: .14; }
/* Make ALL the smaller panels/cards lighter (less “too dark”) */
#container.rw-theme-5 .rw-quick-card,
#container.rw-theme-5 .rw-panel,
#container.rw-theme-5 .rw-icon-card,
#container.rw-theme-5 .rw-contact-item{
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
border-color: rgba(255,255,255,.12);
box-shadow: 0 12px 30px rgba(0,0,0,.45);
color: var(--rw-ink) !important;
}
/* Muted text inside the block */
#container.rw-theme-5 .rw-muted{
color: var(--rw-muted) !important;
}
/* Callout: a bit more lift so it doesn’t disappear */
#container.rw-theme-5 .rw-callout{
background: rgba(31,118,200,.14);
border-color: rgba(74,163,230,.22);
color: var(--rw-ink) !important;
}
/* Buttons: keep both “Email Bob” and “Event Website” consistent */
#container.rw-theme-5 .rw-btn{
background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
border-color: rgba(255,255,255,.14);
box-shadow: 0 12px 26px rgba(0,0,0,.45);
color: var(--rw-ink) !important;
}
#container.rw-theme-5 .rw-btn:hover{
filter: brightness(1.06);
}
/* Links: tone them down (less neon) but still readable */
#container.rw-theme-5 .rw-event-wrap a{
color: rgba(180,215,240,.85);
}
#container.rw-theme-5 .rw-event-wrap a:hover{
color: rgba(210,235,255,.95);
}
/* The little left accent strip on icon cards: reduce intensity a touch */
#container.rw-theme-5 .rw-icon-card:before{
opacity: .65;
}
/* ===== Dark theme (theme id 5): fix the 4 lower blocks readability + brightness ===== */
/* Targets ONLY the lower panels/cards (not the top hero area). */
#container.rw-theme-5 .rw-event-body .rw-panel,
#container.rw-theme-5 .rw-event-body .rw-icon-card{
background: rgba(255,255,255,.10); /* brighter “glass” */
border-color: rgba(255,255,255,.14);
box-shadow: 0 14px 34px rgba(0,0,0,.45);
color: rgba(255,255,255,.88) !important; /* force readable text */
}
/* Headings inside the lower panels */
#container.rw-theme-5 .rw-event-body .rw-panel-title{
color: rgba(255,255,255,.94) !important;
}
/* Normal paragraph/list text inside the lower panels */
#container.rw-theme-5 .rw-event-body .rw-panel p,
#container.rw-theme-5 .rw-event-body .rw-panel li,
#container.rw-theme-5 .rw-event-body .rw-icon-card div{
color: rgba(255,255,255,.86) !important;
}
/* Muted text inside lower panels (still readable) */
#container.rw-theme-5 .rw-event-body .rw-panel .rw-muted,
#container.rw-theme-5 .rw-event-body .rw-icon-card .rw-muted{
color: rgba(255,255,255,.72) !important;
opacity: 1; /* some themes reduce opacity too hard */
}
/* Links in lower panels: less “neon”, still clear */
#container.rw-theme-5 .rw-event-body .rw-panel a{
color: rgba(170,210,245,.85) !important;
font-weight: 800;
}
#container.rw-theme-5 .rw-event-body .rw-panel a:hover{
color: rgba(200,230,255,.95) !important;
}
/* Callout inside About panel (make it pop but not too dark) */
#container.rw-theme-5 .rw-event-body .rw-callout{
background: rgba(8,59,102,.22);
border-color: rgba(11,94,163,.32);
color: rgba(255,255,255,.90) !important;
}
/* The left accent bar on the 4 icon cards: slightly brighter */
#container.rw-theme-5 .rw-event-body .rw-icon-card:before{
opacity: .95;
}
/* Optional: slightly lift the whole body area so panels don’t feel “sunk” */
#container.rw-theme-5 .rw-event-body{
background:
radial-gradient(900px 420px at 70% 40%, rgba(8,59,102,.10), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
/* ===== Dark theme (theme id 5): make the 4 panel titles blue + unify text tone ===== */
/* 1) Set a consistent “nice gray-white” text tone inside ALL medium panels */
#container.rw-theme-5 .rw-event-body .rw-panel{
color: rgba(230,238,245,.90) !important; /* nice gray-white */
}
/* Paragraphs + lists + general text inside medium panels */
#container.rw-theme-5 .rw-event-body .rw-panel p,
#container.rw-theme-5 .rw-event-body .rw-panel li,
#container.rw-theme-5 .rw-event-body .rw-panel div{
color: rgba(230,238,245,.90) !important;
}
/* Muted text inside medium panels (still readable, slightly dimmer) */
#container.rw-theme-5 .rw-event-body .rw-panel .rw-muted{
color: rgba(210,222,232,.78) !important;
opacity: 1;
}
/* 2) Make the TITLE text blue so it stands out */
#container.rw-theme-5 .rw-event-body .rw-panel-title{
color: rgba(160,210,255,.95) !important; /* “Rotorway blue” title */
font-weight: 900;
}
/* Keep the little dot accent in sync (optional slightly brighter) */
#container.rw-theme-5 .rw-event-body .rw-panel-title:before{
background: rgba(90,170,235,.95) !important;
box-shadow: 0 0 0 4px rgba(90,170,235,.18) !important;
}
/* 3) Links inside medium panels: not neon, but clearly clickable */
#container.rw-theme-5 .rw-event-body .rw-panel a{
color: rgba(175,214,245,.88) !important;
text-decoration: none;
}
#container.rw-theme-5 .rw-event-body .rw-panel a:hover{
color: rgba(205,232,255,.96) !important;
text-decoration: underline;
}
/* ===== Theme 5 (dark) readability + title accent ===== */
#container.rw-theme-5 .rw-panel,
#container.rw-theme-5 .rw-quick-card,
#container.rw-theme-5 .rw-contact-item{
background: rgba(255,255,255,.10) !important; /* brighter “glass” */
border-color: rgba(255,255,255,.14) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
}
/* Medium panel text (make it the same nice gray-white as your mini cards) */
#container.rw-theme-5 .rw-event-body .rw-panel{
color: rgba(235,242,248,.92) !important;
}
#container.rw-theme-5 .rw-event-body .rw-panel p,
#container.rw-theme-5 .rw-event-body .rw-panel li{
color: rgba(235,242,248,.92) !important;
}
#container.rw-theme-5 .rw-event-body .rw-panel .rw-muted{
color: rgba(215,225,235,.78) !important;
opacity: 1 !important;
}
/* Make the 4 medium block titles blue */
#container.rw-theme-5 .rw-event-body .rw-panel-title{
color: rgba(160,210,255,.95) !important;
}
/* Keep the dot accent cohesive */
#container.rw-theme-5 .rw-event-body .rw-panel-title:before{
background: rgba(90,170,235,.95) !important;
box-shadow: 0 0 0 4px rgba(90,170,235,.18) !important;
}
/* Links in Quick Details: less “neon”, still clear */
#container.rw-theme-5 .rw-event-body .rw-panel a{
color: rgba(175,214,245,.82) !important;
text-decoration: none !important;
}
#container.rw-theme-5 .rw-event-body .rw-panel a:hover{
color: rgba(205,232,255,.95) !important;
text-decoration: underline !important;
}
/* ===== Theme 5: FORCE panel titles to the blue accent ===== */
#container.rw-theme-5 .rw-event-wrap h2.rw-panel-title,
#container.rw-theme-5 .rw-event-wrap .rw-panel .rw-panel-title{
color: rgba(160,210,255,.95) !important;
text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
/* Dot accent (keep consistent) */
#container.rw-theme-5 .rw-event-wrap .rw-panel-title:before{
background: rgba(90,170,235,.95) !important;
box-shadow: 0 0 0 4px rgba(90,170,235,.18) !important;
}
/* ===== Theme 5: make the BIG hero title blue too ===== */
#container.rw-theme-5 .rw-event-wrap .rw-event-title{
color: rgba(160,210,255,.96) !important;
text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
/* Optional: make the subtitle a softer “silver-blue” */
#container.rw-theme-5 .rw-event-wrap .rw-event-subtitle{
color: rgba(215,235,255,.78) !important;
}
/* Let the title/subtitle pull from variables (so themes can swap colors cleanly) */
.rw-event-wrap .rw-event-title{
color: var(--rw-title, var(--rw-ink)) !important;
}
.rw-event-wrap .rw-event-subtitle{
color: var(--rw-subtitle, var(--rw-muted)) !important;
}
/* Theme 5: make hero title/subtitle blue */
#container.rw-theme-5 .rw-event-wrap,
body.rw-theme-5 .rw-event-wrap{
--rw-title: rgba(160,210,255,.96); /* nice “ice blue” */
--rw-subtitle: rgba(215,235,255,.72); /* softer */
}
/* --- Calendar event render fix: remove
that become CSS grid items --- */
.rw-event-wrap .rw-event-grid > br,
.rw-event-wrap .rw-panels-2 > br,
.rw-event-wrap .rw-icons > br{
display: none !important;
}
/* (extra safety) enforce grid in case theme/calendar CSS overrides it */
.rw-event-wrap .rw-event-grid{ display: grid !important; }
.rw-event-wrap .rw-panels-2{ display: grid !important; grid-column: 1 / -1 !important; }
.rw-event-wrap .rw-icons{ display: grid !important; }
[/rwcss]