html { color-scheme: dark; }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
::selection { background: rgba(46, 204, 113, .30); color: #fff; }
/* OC 2026 theme: professional, server-community, Minecraft-adjacent without cosplay. */
:root {
--oc-bg: #111814;
--oc-bg-2: #17211b;
--oc-stone: #253129;
--oc-stone-2: #2d3b31;
--oc-cream: #f3eee2;
--oc-cream-2: #fffaf0;
--oc-line: rgba(255, 250, 240, .14);
--oc-line-strong: rgba(46, 204, 113, .28);
--oc-green: #2ecc71;
--oc-green-soft: rgba(46, 204, 113, .12);
--oc-gold: #d6a84f;
--oc-text: #f7f3e8;
--oc-muted: #c7c0ae;
--oc-ink: #17211b;
--oc-ink-muted: #5b665d;
}
* { box-sizing: border-box; }
body {
background:
radial-gradient(circle at 16% -8%, rgba(46, 204, 113, .16), transparent 28rem),
radial-gradient(circle at 84% 5%, rgba(214, 168, 79, .10), transparent 24rem),
linear-gradient(180deg, #151e18 0%, #101712 58%, #0b100d 100%);
color: var(--oc-text);
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: .16;
background-image:
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: linear-gradient(to bottom, black, transparent 74%);
}
/* Common content surfaces */
.oc-home > section,
.oc-marketplace-panel,
.oc-guide-card,
.oc-forum-card,
.oc-server-card,
.oc-profile-editor-shell,
.oc-panel {
border-color: rgba(255, 250, 240, .13) !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
.oc-home-card,
.oc-feature-tile {
border: 1px solid rgba(255, 250, 240, .13);
background: rgba(31, 43, 36, .72);
box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 32px rgba(0,0,0,.18);
}
/* Homepage */
.oc-home { letter-spacing: -0.01em; }
.oc-hero {
background:
linear-gradient(135deg, rgba(31,43,36,.92), rgba(23,33,27,.94)),
linear-gradient(90deg, rgba(46,204,113,.18), transparent) !important;
border-radius: 1.35rem !important;
}
.oc-hero h1 { text-wrap: balance; }
.oc-hero-panel {
background: rgba(243, 238, 226, .92);
color: var(--oc-ink);
border: 1px solid rgba(17, 24, 20, .12);
box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.oc-hero-panel a { color: var(--oc-ink); }
.oc-kicker {
display: inline-flex;
align-items: center;
border-radius: .55rem;
border: 1px solid rgba(46,204,113,.26);
background: rgba(46,204,113,.12);
color: #d9ffe5;
padding: .42rem .7rem;
font-size: .74rem;
font-weight: 950;
letter-spacing: .15em;
text-transform: uppercase;
}
.oc-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .72rem;
background: var(--oc-green);
color: #062013 !important;
padding: .72rem 1rem;
font-weight: 950;
text-decoration: none;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.16);
}
.oc-btn-primary:hover { background: #56e58f; }
.oc-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .72rem;
border: 1px solid rgba(255,250,240,.16);
background: rgba(255,250,240,.07);
color: var(--oc-text) !important;
padding: .72rem 1rem;
font-weight: 900;
text-decoration: none;
}
.oc-btn-secondary:hover { background: rgba(255,250,240,.11); }
.oc-service-carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 360px);
gap: 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding: .25rem;
padding: .25rem .15rem .75rem;
scrollbar-color: rgba(46,204,113,.45) rgba(17,24,20,.7);
max-width: 100%;
}
.oc-service-slide { scroll-snap-align: start; min-height: 320px; min-width: 0; }
.oc-carousel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
border-radius: .7rem;
border: 1px solid rgba(255,250,240,.14);
background: rgba(255,250,240,.06);
color: #f7f3e8;
font-size: 1.45rem;
font-weight: 950;
line-height: 1;
transition: .16s ease;
}
.oc-carousel-btn:hover { background: rgba(46,204,113,.14); border-color: rgba(46,204,113,.32); }
/* Discord-style markup rendering */
.oc-markup-link { color: #85eaa9; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.oc-markup-link:hover { color: #b4fac9; text-decoration: underline; }
.oc-markup-mention {
display: inline-flex; align-items: center; border-radius: 999px;
border: 1px solid rgba(46, 204, 113, .22); background: rgba(46, 204, 113, .10);
color: #bbf7d0; padding: .05rem .45rem; font-size: .9em; font-weight: 800; vertical-align: baseline;
}
.oc-markup-inline-code { border-radius: .45rem; background: rgba(7, 12, 10, .72); border: 1px solid rgba(255,255,255,.10); color: #d1fae5; padding: .1rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .92em; }
.oc-markup-code { margin: .75rem 0; overflow-x: auto; border-radius: .85rem; border: 1px solid rgba(255,255,255,.10); background: rgba(7, 12, 10, .82); padding: 1rem; color: #d1fae5; white-space: pre; }
.oc-markup-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .92rem; }
/* Forms: practical and readable */
input, textarea, select {
border-radius: .72rem !important;
border-color: rgba(255,250,240,.16) !important;
}
input:focus, textarea:focus, select:focus {
outline: 2px solid rgba(46, 204, 113, .35) !important;
outline-offset: 1px;
border-color: rgba(46, 204, 113, .50) !important;
}
/* Partner ads */
.oc-partner-top aside { border-color: rgba(214,168,79,.28) !important; }
.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
@media (max-width: 720px) {
.oc-service-carousel { grid-auto-columns: minmax(250px, 84vw); }
}
/* Build 83 homepage reset: simple, contained, community-first. */
.oc-home-v2 {
display: grid;
gap: 1.6rem;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.oc-home-hero-v2,
.oc-home-section-v2,
.oc-discord-card-v2 {
border: 1px solid rgba(255,250,240,.14);
background: rgba(29, 40, 33, .82);
border-radius: 1.25rem;
box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.oc-home-hero-v2 {
padding: clamp(1.5rem, 4vw, 3rem);
background:
radial-gradient(circle at 0 0, rgba(46,204,113,.18), transparent 30rem),
linear-gradient(135deg, rgba(34,48,39,.95), rgba(19,27,22,.96));
}
.oc-home-hero-v2 h1 {
max-width: 920px;
margin: 1.1rem 0 0;
font-size: clamp(2.35rem, 6vw, 4.9rem);
line-height: .96;
letter-spacing: -.055em;
color: #f7f3e8;
text-wrap: balance;
}
.oc-home-hero-v2 p {
max-width: 790px;
margin: 1.25rem 0 0;
color: #d8d0c0;
font-size: clamp(1rem, 1.5vw, 1.18rem);
line-height: 1.75;
}
.oc-home-actions-v2 { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.55rem; }
.oc-home-actions-v2.compact { margin-top: 1.3rem; }
.oc-btn-discord {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .72rem;
border: 1px solid rgba(114,137,218,.35);
background: rgba(114,137,218,.18);
color: #eef1ff !important;
padding: .72rem 1rem;
font-weight: 950;
text-decoration: none;
}
.oc-btn-discord:hover { background: rgba(114,137,218,.28); }
.oc-home-route-grid {
display: grid;
gap: .85rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.oc-home-route-card {
display: grid;
gap: .45rem;
min-width: 0;
border: 1px solid rgba(255,250,240,.13);
background: rgba(29, 40, 33, .78);
border-radius: 1rem;
padding: 1.05rem;
color: #f7f3e8;
text-decoration: none;
box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.oc-home-route-card:hover { border-color: rgba(46,204,113,.32); transform: translateY(-1px); }
.oc-home-route-card span,
.oc-section-label-v2 {
color: #85eaa9;
font-size: .76rem;
font-weight: 950;
letter-spacing: .18em;
text-transform: uppercase;
}
.oc-home-route-card strong { font-size: 1.04rem; line-height: 1.25; }
.oc-home-route-card em { color: #c7c0ae; font-style: normal; line-height: 1.55; font-size: .92rem; }
.oc-home-route-discord { border-color: rgba(114,137,218,.28); background: rgba(37,45,66,.72); }
.oc-home-section-v2,
.oc-discord-card-v2 { padding: clamp(1.25rem, 3vw, 2rem); }
.oc-section-head-v2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.2rem; }
.oc-section-head-v2 h2,
.oc-home-section-v2 h2,
.oc-discord-card-v2 h2 { margin: .5rem 0 0; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.05; letter-spacing: -.035em; }
.oc-section-head-v2 p,
.oc-discord-card-v2 p { margin: .55rem 0 0; color: #c7c0ae; line-height: 1.7; max-width: 760px; }
.oc-section-actions-v2 { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.oc-small-action { border-radius: .72rem; background: var(--oc-green); color: #062013 !important; padding: .72rem 1rem; font-weight: 950; text-decoration: none; white-space: nowrap; }
.oc-empty-card-v2 { border: 1px solid rgba(255,250,240,.12); background: rgba(9,14,11,.45); border-radius: 1rem; padding: 1.1rem; color: #c7c0ae; }
.oc-home-service-card-v2 {
border: 1px solid rgba(255,250,240,.13);
background: rgba(14, 21, 17, .76);
border-radius: 1rem;
padding: 1rem;
min-height: 285px;
}
.oc-service-top-v2 { display: flex; gap: .85rem; align-items: flex-start; }
.oc-service-avatar-v2 { width: 3.4rem; height: 3.4rem; border-radius: .8rem; object-fit: cover; border: 1px solid rgba(255,250,240,.14); }
.oc-service-main-v2 { min-width: 0; }
.oc-service-category-v2 { display: inline-flex; border: 1px solid rgba(46,204,113,.22); background: rgba(46,204,113,.12); color: #d9ffe5; border-radius: 999px; padding: .2rem .55rem; font-size: .74rem; font-weight: 900; }
.oc-home-service-card-v2 h3 { margin: .65rem 0 .15rem; font-size: 1.18rem; line-height: 1.18; }
.oc-home-service-card-v2 h3 a { color: #f7f3e8; text-decoration: none; }
.oc-home-service-card-v2 h3 a:hover { color: #a7f3d0; }
.oc-service-provider-v2,
.oc-home-service-card-v2 p,
.oc-service-meta-v2 span { color: #c7c0ae; }
.oc-home-service-card-v2 p { line-height: 1.55; margin: 1rem 0 0; }
.oc-service-meta-v2 { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(255,250,240,.12); display: flex; justify-content: space-between; gap: .75rem; align-items: center; font-size: .9rem; }
.oc-home-split-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: 1rem; }
.oc-mini-grid-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.oc-mini-grid-v2 div { border-radius: .9rem; background: rgba(9,14,11,.38); padding: 1rem; }
.oc-mini-grid-v2 strong { display: block; color: #f7f3e8; margin-bottom: .35rem; }
.oc-mini-grid-v2 span { display: block; color: #c7c0ae; font-size: .92rem; line-height: 1.55; }
.oc-discord-card-v2 { border-color: rgba(114,137,218,.24); background: linear-gradient(135deg, rgba(31,43,36,.88), rgba(35,42,62,.82)); }
@media (max-width: 980px) {
.oc-home-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-home-split-v2 { grid-template-columns: 1fr; }
.oc-section-head-v2 { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
.oc-home-route-grid,
.oc-mini-grid-v2 { grid-template-columns: 1fr; }
.oc-service-meta-v2 { align-items: flex-start; flex-direction: column; }
}
/* Build 84: homepage service cards use a contained grid, not a clipping carousel. */
.oc-home-v2 { overflow: visible; }
.oc-home-service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
width: 100%;
max-width: 100%;
overflow: visible;
}
.oc-home-service-grid .oc-service-slide,
.oc-home-service-grid .oc-home-service-card-v2 {
min-width: 0;
width: 100%;
scroll-snap-align: none;
}
.oc-home-service-grid .oc-home-service-card-v2 {
min-height: 0;
}
.oc-home-service-grid .oc-home-service-card-v2 p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 1180px) {
.oc-home-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
.oc-home-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Build 90: purple Owners Connect refresh, light/dark ready foundation. */
:root {
--oc-purple: #8b5cf6;
--oc-purple-2: #a855f7;
--oc-purple-soft: rgba(139, 92, 246, .16);
--oc-purple-line: rgba(167, 139, 250, .26);
--oc-bg: #080913;
--oc-bg-2: #111426;
--oc-card: rgba(17, 20, 38, .78);
--oc-card-2: rgba(24, 20, 44, .78);
--oc-text: #f8f7ff;
--oc-muted: #b8b4c9;
--oc-line: rgba(226, 232, 240, .12);
--oc-green: var(--oc-purple);
--oc-green-soft: var(--oc-purple-soft);
--oc-line-strong: var(--oc-purple-line);
}
html { color-scheme: dark; }
body {
background:
radial-gradient(circle at 18% -10%, rgba(139, 92, 246, .22), transparent 30rem),
radial-gradient(circle at 86% 10%, rgba(168, 85, 247, .18), transparent 28rem),
linear-gradient(180deg, #090a15 0%, #0c0d19 45%, #070812 100%) !important;
color: var(--oc-text) !important;
}
::selection { background: rgba(139, 92, 246, .38); color: #fff; }
.oc-header { background: rgba(8, 9, 19, .88) !important; border-bottom-color: rgba(167,139,250,.16) !important; }
.oc-brand-mark { background: linear-gradient(135deg, #7c3aed, #c084fc) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(139,92,246,.25) !important; }
.oc-brand-line, .oc-footer-copy, .oc-footer-links a { color: var(--oc-muted) !important; }
.oc-nav-link:hover, .oc-nav-dropdown>summary:hover, .oc-nav-link.is-active, .oc-nav-dropdown>summary.is-active { background: rgba(139,92,246,.14) !important; border-color: rgba(167,139,250,.22) !important; }
.oc-nav-action, .oc-btn-primary, .oc-small-action { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; color: #fff !important; box-shadow: 0 14px 32px rgba(139,92,246,.24), inset 0 -2px 0 rgba(0,0,0,.18) !important; }
.oc-btn-primary:hover, .oc-small-action:hover { filter: brightness(1.08); }
.oc-btn-secondary { border-color: rgba(167,139,250,.24) !important; background: rgba(139,92,246,.08) !important; color: #f8f7ff !important; }
.oc-dropdown-panel { background: rgba(17,20,38,.98) !important; border-color: rgba(167,139,250,.18) !important; }
.oc-dropdown-feature { background: rgba(139,92,246,.12) !important; border-color: rgba(167,139,250,.22) !important; }
.oc-footer { background: rgba(7,8,18,.92) !important; border-top-color: rgba(167,139,250,.14) !important; }
.oc-footer-links a:hover, .oc-home-modern a:hover { color: #c4b5fd !important; }
.oc-home-modern { display: grid; gap: 1rem; }
.oc-hero-modern {
position: relative;
overflow: hidden;
min-height: 470px;
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
align-items: stretch;
gap: 1rem;
border: 1px solid rgba(167,139,250,.16);
border-radius: 1.5rem;
background:
linear-gradient(90deg, rgba(8,9,19,.96) 0%, rgba(8,9,19,.88) 46%, rgba(8,9,19,.16) 100%),
radial-gradient(circle at 78% 38%, rgba(139,92,246,.55), transparent 22rem),
linear-gradient(135deg, rgba(24,20,44,.98), rgba(8,9,19,.98));
box-shadow: 0 26px 70px rgba(0,0,0,.28);
}
.oc-hero-modern:before {
content:"";
position:absolute;
inset:0;
background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 34px 34px;
opacity: .22;
mask-image: linear-gradient(to bottom, #000, transparent 82%);
pointer-events: none;
}
.oc-hero-copy-modern { position: relative; z-index: 2; padding: clamp(1.6rem, 5vw, 3.2rem); align-self: center; }
.oc-powered-pill { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(167,139,250,.28); background: rgba(139,92,246,.12); color: #ddd6fe; border-radius: 999px; padding: .45rem .75rem; font-size: .82rem; font-weight: 950; }
.oc-hero-modern h1 { margin: 1.15rem 0 0; font-size: clamp(2.75rem, 6.4vw, 5.3rem); line-height: .97; letter-spacing: -.06em; color: #fff; text-wrap: balance; }
.oc-hero-modern h1 span { color: #a855f7; text-shadow: 0 0 32px rgba(168,85,247,.35); }
.oc-hero-modern p { margin: 1.2rem 0 0; max-width: 680px; color: #d8d3e8; font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.62; }
.oc-home-actions-modern { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }
.oc-home-actions-modern.compact { margin-top: 0; align-items: center; }
.oc-home-actions-modern a { min-height: 3rem; padding-inline: 1.25rem; }
.oc-hero-art-modern { position: relative; min-height: 420px; background: radial-gradient(circle at 52% 42%, rgba(168,85,247,.46), transparent 20rem); }
.oc-castle-card { position: absolute; inset: clamp(1rem, 3vw, 2.2rem); border-radius: 1.25rem; border: 1px solid rgba(167,139,250,.18); background:
linear-gradient(180deg, rgba(11,12,24,.02), rgba(8,9,19,.78)),
linear-gradient(135deg, rgba(58,43,97,.78), rgba(17,20,38,.94)); overflow: hidden; }
.oc-castle-card:before { content:""; position:absolute; inset:0; background:
linear-gradient(135deg, transparent 0 42%, rgba(139,92,246,.28) 42% 46%, transparent 46% 100%),
radial-gradient(circle at 55% 42%, rgba(192,132,252,.42), transparent 12rem),
repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 56px),
repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 2px, transparent 2px 56px); opacity:.72; }
.oc-castle-glow { position:absolute; left:50%; top:50%; translate:-50% -45%; width:12rem; height:15rem; border-radius: 45% 45% 1rem 1rem; background: radial-gradient(circle, rgba(216,180,254,.95), rgba(139,92,246,.34) 42%, transparent 70%); filter: blur(3px); }
.oc-castle-title { position:absolute; right:2rem; bottom:4.5rem; color:#fff; font-weight:1000; letter-spacing:-.08em; font-size: clamp(4rem, 9vw, 8rem); text-shadow: 0 0 40px rgba(168,85,247,.55); }
.oc-castle-subtitle { position:absolute; right:2.25rem; bottom:2rem; color:#ddd6fe; font-weight:850; }
.oc-trust-grid-modern, .oc-route-grid-modern, .oc-service-grid-modern, .oc-community-grid-modern, .oc-lower-grid-modern, .oc-guide-grid-modern, .oc-safety-grid-modern { display: grid; gap: 1rem; }
.oc-trust-grid-modern { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oc-trust-card-modern, .oc-route-grid-modern a, .oc-home-panel-modern, .oc-service-card-modern, .oc-discord-cta-modern {
border: 1px solid rgba(167,139,250,.15);
background: linear-gradient(180deg, rgba(17,20,38,.82), rgba(13,15,29,.78));
border-radius: 1.1rem;
box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
.oc-trust-card-modern, .oc-route-grid-modern a { display:grid; gap:.35rem; text-decoration:none; padding:1.1rem; min-height: 108px; }
.oc-trust-card-modern span, .oc-route-grid-modern span { display:grid; place-items:center; width:2.65rem; height:2.65rem; border-radius:.82rem; background: rgba(139,92,246,.16); font-size:1.35rem; }
.oc-trust-card-modern strong, .oc-route-grid-modern strong { color:#fff; font-size:1rem; }
.oc-trust-card-modern em, .oc-route-grid-modern em { color: var(--oc-muted); font-size:.9rem; font-style:normal; line-height:1.35; }
.oc-route-grid-modern { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.oc-route-grid-modern a { text-align: center; align-items: center; justify-items: center; min-height: 150px; }
.oc-home-panel-modern { padding: clamp(1.15rem, 3vw, 1.8rem); }
.oc-section-head-modern { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1rem; }
.oc-section-head-modern.compact { align-items:center; }
.oc-section-kicker-modern { color:#c4b5fd; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; font-weight:1000; }
.oc-section-head-modern h2, .oc-safety-panel-modern h2, .oc-discord-cta-modern h2 { margin:.35rem 0 0; color:#fff; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height:1.05; letter-spacing:-.04em; }
.oc-section-head-modern p, .oc-discord-cta-modern p { margin:.4rem 0 0; color:var(--oc-muted); line-height:1.55; }
.oc-section-head-modern a { color:#c084fc; text-decoration:none; font-weight:950; white-space:nowrap; }
.oc-empty-modern { border:1px dashed rgba(167,139,250,.22); background: rgba(139,92,246,.07); border-radius: .95rem; padding: 1rem; color: var(--oc-muted); }
.oc-service-grid-modern { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oc-service-card-modern { overflow:hidden; }
.oc-service-banner-modern { min-height: 118px; background: radial-gradient(circle at 70% 35%, rgba(168,85,247,.42), transparent 8rem), linear-gradient(135deg, rgba(41,31,73,.92), rgba(12,14,27,.96)); display:flex; align-items:flex-end; padding: .85rem; }
.oc-service-banner-modern span { border-radius:999px; background:rgba(8,9,19,.68); border:1px solid rgba(167,139,250,.26); color:#ddd6fe; padding:.28rem .65rem; font-weight:950; font-size:.78rem; }
.oc-service-body-modern { padding: 1rem; }
.oc-service-provider-modern { display:flex; align-items:center; gap:.5rem; color:var(--oc-muted); font-size:.88rem; }
.oc-service-provider-modern img { width:1.65rem; height:1.65rem; border-radius:.45rem; object-fit:cover; }
.oc-service-card-modern h3 { margin:.65rem 0 .35rem; font-size:1.12rem; line-height:1.2; }
.oc-service-card-modern h3 a { color:#fff; text-decoration:none; }
.oc-service-card-modern p { color:var(--oc-muted); line-height:1.5; margin:.55rem 0 0; }
.oc-service-foot-modern { border-top:1px solid rgba(167,139,250,.14); margin-top:1rem; padding-top:.85rem; display:flex; justify-content:space-between; gap:.75rem; align-items:center; font-size:.88rem; }
.oc-service-foot-modern strong { color:#c084fc; }
.oc-service-foot-modern span { color:var(--oc-muted); }
.oc-community-grid-modern { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.oc-thread-list-modern, .oc-activity-list-modern { display:grid; gap:.65rem; }
.oc-thread-list-modern a, .oc-activity-list-modern a { display:grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items:center; gap:.75rem; padding:.8rem; border-radius:.85rem; background:rgba(8,9,19,.42); border:1px solid rgba(167,139,250,.1); text-decoration:none; }
.oc-thread-list-modern span, .oc-activity-list-modern span { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.7rem; background:rgba(139,92,246,.15); }
.oc-thread-list-modern strong, .oc-activity-list-modern strong { color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oc-thread-list-modern em, .oc-activity-list-modern em { color:var(--oc-muted); font-style:normal; font-size:.84rem; white-space:nowrap; }
.oc-activity-list-modern a { grid-template-columns: 2.4rem minmax(0, .85fr); }
.oc-activity-list-modern em { grid-column:2; white-space:normal; margin-top:-.35rem; }
.oc-lower-grid-modern { grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); }
.oc-guide-grid-modern { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-guide-grid-modern a, .oc-safety-grid-modern a { display:grid; gap:.45rem; min-height: 150px; padding:1rem; border-radius:.95rem; border:1px solid rgba(167,139,250,.14); background:rgba(8,9,19,.38); text-decoration:none; }
.oc-guide-grid-modern span { color:#ddd6fe; font-size:.78rem; font-weight:950; text-transform:uppercase; letter-spacing:.12em; }
.oc-guide-grid-modern strong, .oc-safety-grid-modern strong { color:#fff; line-height:1.18; }
.oc-guide-grid-modern em, .oc-safety-grid-modern em { color:var(--oc-muted); font-style:normal; line-height:1.45; font-size:.9rem; }
.oc-safety-panel-modern > h2 { margin-bottom: 1rem; }
.oc-safety-grid-modern { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-safety-grid-modern a { text-align:center; justify-items:center; }
.oc-safety-grid-modern span { font-size:1.65rem; }
.oc-wide-action-modern { display:flex; justify-content:center; margin-top:1rem; border-radius:.85rem; padding:.85rem 1rem; background:rgba(139,92,246,.12); border:1px solid rgba(167,139,250,.18); color:#ddd6fe; text-decoration:none; font-weight:950; }
.oc-discord-cta-modern { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding: clamp(1.25rem, 3vw, 1.8rem); background: radial-gradient(circle at 20% 10%, rgba(139,92,246,.35), transparent 16rem), linear-gradient(135deg, rgba(26,20,49,.92), rgba(12,14,27,.94)); }
@media (prefers-color-scheme: light) {
html { color-scheme: light; }
body { background: linear-gradient(180deg, #faf7ff 0%, #f2edff 100%) !important; color: #171322 !important; }
.oc-header { background: rgba(250,247,255,.88) !important; border-bottom-color: rgba(109,40,217,.16) !important; }
.oc-nav-link, .oc-nav-dropdown>summary, .oc-brand-name, .oc-footer-brand { color:#171322 !important; }
.oc-brand-line, .oc-footer-copy, .oc-footer-links a { color:#665f75 !important; }
.oc-home-panel-modern, .oc-trust-card-modern, .oc-route-grid-modern a, .oc-service-card-modern, .oc-discord-cta-modern { background: rgba(255,255,255,.82); border-color: rgba(109,40,217,.14); box-shadow: 0 18px 44px rgba(76,29,149,.08); }
.oc-section-head-modern h2, .oc-safety-panel-modern h2, .oc-discord-cta-modern h2, .oc-trust-card-modern strong, .oc-route-grid-modern strong, .oc-service-card-modern h3 a, .oc-thread-list-modern strong, .oc-activity-list-modern strong, .oc-guide-grid-modern strong, .oc-safety-grid-modern strong { color:#171322 !important; }
.oc-trust-card-modern em, .oc-route-grid-modern em, .oc-section-head-modern p, .oc-service-card-modern p, .oc-service-foot-modern span, .oc-thread-list-modern em, .oc-activity-list-modern em, .oc-guide-grid-modern em, .oc-safety-grid-modern em, .oc-discord-cta-modern p { color:#665f75 !important; }
.oc-thread-list-modern a, .oc-activity-list-modern a, .oc-guide-grid-modern a, .oc-safety-grid-modern a { background: rgba(246,242,255,.72); }
.oc-footer { background: rgba(250,247,255,.92) !important; }
}
@media (max-width: 1100px) {
.oc-hero-modern { grid-template-columns: 1fr; }
.oc-hero-art-modern { min-height: 280px; }
.oc-trust-grid-modern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-route-grid-modern { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-service-grid-modern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-community-grid-modern, .oc-lower-grid-modern { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.oc-trust-grid-modern, .oc-route-grid-modern, .oc-service-grid-modern, .oc-guide-grid-modern, .oc-safety-grid-modern { grid-template-columns: 1fr; }
.oc-section-head-modern, .oc-discord-cta-modern { align-items:flex-start; flex-direction:column; }
.oc-thread-list-modern a { grid-template-columns: 2.4rem minmax(0, 1fr); }
.oc-thread-list-modern em { grid-column:2; white-space:normal; margin-top:-.35rem; }
.oc-service-foot-modern { flex-direction:column; align-items:flex-start; }
}
/* Build 91: real purple dark theme + manual light/dark switch. */
:root {
--oc-purple: #8b5cf6;
--oc-purple-2: #a855f7;
--oc-purple-soft: rgba(139, 92, 246, .16);
--oc-bg-dark: #070711;
--oc-bg-dark-2: #0d0b1b;
--oc-surface-dark: rgba(18, 17, 34, .84);
--oc-surface-dark-2: rgba(23, 20, 44, .88);
--oc-line-purple: rgba(167, 139, 250, .18);
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] body {
background:
radial-gradient(circle at 22% -10%, rgba(139, 92, 246, .24), transparent 28rem),
radial-gradient(circle at 80% 6%, rgba(168, 85, 247, .18), transparent 30rem),
linear-gradient(180deg, #070711 0%, #0b0918 48%, #080711 100%) !important;
color: #f8f7ff !important;
}
html[data-theme="dark"] body::before { opacity: .12; }
html[data-theme="dark"] .oc-header {
background: rgba(7, 7, 17, .86) !important;
border-bottom-color: rgba(167, 139, 250, .16) !important;
box-shadow: 0 16px 40px rgba(0,0,0,.36) !important;
}
html[data-theme="dark"] .oc-brand-mark {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important;
box-shadow: 0 12px 28px rgba(139,92,246,.28) !important;
}
html[data-theme="dark"] .oc-brand-name,
html[data-theme="dark"] .oc-nav-link,
html[data-theme="dark"] .oc-nav-dropdown>summary,
html[data-theme="dark"] .oc-footer-brand { color: #fff !important; }
html[data-theme="dark"] .oc-brand-line,
html[data-theme="dark"] .oc-footer-copy,
html[data-theme="dark"] .oc-footer-links a { color: #b8b4c9 !important; }
html[data-theme="dark"] .oc-page-frame { padding-top: 1.35rem; }
html[data-theme="dark"] .oc-nav-link:hover,
html[data-theme="dark"] .oc-nav-dropdown>summary:hover,
html[data-theme="dark"] .oc-nav-link.is-active,
html[data-theme="dark"] .oc-dropdown-panel {
background: rgba(23,20,44,.96) !important;
border-color: rgba(167,139,250,.20) !important;
}
html[data-theme="dark"] .oc-nav-action,
html[data-theme="dark"] .oc-btn-primary {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
border-color: rgba(216,180,254,.32) !important;
color: #fff !important;
box-shadow: 0 16px 30px rgba(124,58,237,.25) !important;
}
html[data-theme="dark"] .oc-btn-secondary {
background: rgba(255,255,255,.06) !important;
border-color: rgba(216,180,254,.20) !important;
color: #fff !important;
}
.oc-theme-toggle {
display: inline-flex;
align-items: center;
gap: .42rem;
border: 1px solid rgba(167,139,250,.22);
border-radius: .7rem;
min-height: 2.55rem;
padding: .55rem .75rem;
background: rgba(139,92,246,.12);
color: #f8f7ff;
font-weight: 900;
cursor: pointer;
}
.oc-theme-toggle:hover { background: rgba(139,92,246,.22); }
html[data-theme="dark"] .oc-home-modern { gap: 1.1rem; }
html[data-theme="dark"] .oc-hero-modern {
min-height: 520px;
background:
linear-gradient(90deg, rgba(7,7,17,.98) 0%, rgba(8,7,17,.86) 42%, rgba(8,7,17,.34) 100%),
radial-gradient(circle at 74% 42%, rgba(168,85,247,.52), transparent 18rem),
linear-gradient(135deg, #0d0b1b 0%, #181135 100%) !important;
border: 1px solid rgba(167,139,250,.18) !important;
box-shadow: 0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html[data-theme="dark"] .oc-hero-modern:before {
opacity: .8;
background:
radial-gradient(circle at 76% 52%, rgba(216,180,254,.52), transparent 11rem),
repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 60px),
repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px) !important;
}
html[data-theme="dark"] .oc-powered-pill {
background: rgba(139,92,246,.14) !important;
border-color: rgba(216,180,254,.25) !important;
color: #e9d5ff !important;
}
html[data-theme="dark"] .oc-hero-modern h1 { color: #fff !important; }
html[data-theme="dark"] .oc-hero-modern h1 span { color: #a855f7 !important; }
html[data-theme="dark"] .oc-hero-modern p { color: #d8d3e8 !important; }
html[data-theme="dark"] .oc-castle-card {
background: linear-gradient(135deg, rgba(32,24,61,.88), rgba(8,9,19,.94)) !important;
border-color: rgba(216,180,254,.18) !important;
}
html[data-theme="dark"] .oc-trust-card-modern,
html[data-theme="dark"] .oc-route-grid-modern a,
html[data-theme="dark"] .oc-home-panel-modern,
html[data-theme="dark"] .oc-service-card-modern,
html[data-theme="dark"] .oc-discord-cta-modern {
background: linear-gradient(180deg, rgba(18,17,34,.90), rgba(12,11,24,.86)) !important;
border-color: rgba(167,139,250,.17) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html[data-theme="dark"] .oc-section-head-modern h2,
html[data-theme="dark"] .oc-safety-panel-modern h2,
html[data-theme="dark"] .oc-discord-cta-modern h2,
html[data-theme="dark"] .oc-trust-card-modern strong,
html[data-theme="dark"] .oc-route-grid-modern strong,
html[data-theme="dark"] .oc-service-card-modern h3 a,
html[data-theme="dark"] .oc-thread-list-modern strong,
html[data-theme="dark"] .oc-activity-list-modern strong,
html[data-theme="dark"] .oc-guide-grid-modern strong,
html[data-theme="dark"] .oc-safety-grid-modern strong { color: #fff !important; }
html[data-theme="dark"] .oc-trust-card-modern em,
html[data-theme="dark"] .oc-route-grid-modern em,
html[data-theme="dark"] .oc-section-head-modern p,
html[data-theme="dark"] .oc-service-card-modern p,
html[data-theme="dark"] .oc-service-foot-modern span,
html[data-theme="dark"] .oc-thread-list-modern em,
html[data-theme="dark"] .oc-activity-list-modern em,
html[data-theme="dark"] .oc-guide-grid-modern em,
html[data-theme="dark"] .oc-safety-grid-modern em,
html[data-theme="dark"] .oc-discord-cta-modern p { color: #b8b4c9 !important; }
html[data-theme="dark"] .oc-thread-list-modern a,
html[data-theme="dark"] .oc-activity-list-modern a,
html[data-theme="dark"] .oc-guide-grid-modern a,
html[data-theme="dark"] .oc-safety-grid-modern a {
background: rgba(8,9,19,.46) !important;
border-color: rgba(167,139,250,.12) !important;
}
html[data-theme="dark"] .oc-footer {
background: rgba(7,7,17,.94) !important;
border-top-color: rgba(167,139,250,.16) !important;
}
html[data-theme="light"] body {
background: linear-gradient(180deg, #faf7ff 0%, #f0e9ff 100%) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-theme-toggle {
background: #fff;
color: #211a32;
border-color: rgba(109,40,217,.18);
}
html[data-theme="light"] .oc-header {
background: rgba(250,247,255,.90) !important;
border-bottom-color: rgba(109,40,217,.16) !important;
}
html[data-theme="light"] .oc-brand-mark {
background: linear-gradient(135deg, #8b5cf6, #c084fc) !important;
color: #fff !important;
}
html[data-theme="light"] .oc-brand-name,
html[data-theme="light"] .oc-nav-link,
html[data-theme="light"] .oc-nav-dropdown>summary,
html[data-theme="light"] .oc-footer-brand { color:#171322 !important; }
html[data-theme="light"] .oc-brand-line,
html[data-theme="light"] .oc-footer-copy,
html[data-theme="light"] .oc-footer-links a { color:#665f75 !important; }
html[data-theme="light"] .oc-home-panel-modern,
html[data-theme="light"] .oc-trust-card-modern,
html[data-theme="light"] .oc-route-grid-modern a,
html[data-theme="light"] .oc-service-card-modern,
html[data-theme="light"] .oc-discord-cta-modern { background: rgba(255,255,255,.84) !important; border-color: rgba(109,40,217,.14) !important; box-shadow: 0 18px 44px rgba(76,29,149,.08) !important; }
html[data-theme="light"] .oc-section-head-modern h2,
html[data-theme="light"] .oc-safety-panel-modern h2,
html[data-theme="light"] .oc-discord-cta-modern h2,
html[data-theme="light"] .oc-trust-card-modern strong,
html[data-theme="light"] .oc-route-grid-modern strong,
html[data-theme="light"] .oc-service-card-modern h3 a,
html[data-theme="light"] .oc-thread-list-modern strong,
html[data-theme="light"] .oc-activity-list-modern strong,
html[data-theme="light"] .oc-guide-grid-modern strong,
html[data-theme="light"] .oc-safety-grid-modern strong { color:#171322 !important; }
html[data-theme="light"] .oc-trust-card-modern em,
html[data-theme="light"] .oc-route-grid-modern em,
html[data-theme="light"] .oc-section-head-modern p,
html[data-theme="light"] .oc-service-card-modern p,
html[data-theme="light"] .oc-service-foot-modern span,
html[data-theme="light"] .oc-thread-list-modern em,
html[data-theme="light"] .oc-activity-list-modern em,
html[data-theme="light"] .oc-guide-grid-modern em,
html[data-theme="light"] .oc-safety-grid-modern em,
html[data-theme="light"] .oc-discord-cta-modern p { color:#665f75 !important; }
html[data-theme="light"] .oc-thread-list-modern a,
html[data-theme="light"] .oc-activity-list-modern a,
html[data-theme="light"] .oc-guide-grid-modern a,
html[data-theme="light"] .oc-safety-grid-modern a { background: rgba(246,242,255,.72) !important; }
html[data-theme="light"] .oc-footer { background: rgba(250,247,255,.94) !important; }
@media (max-width: 700px) {
.oc-theme-toggle-text { display: none; }
.oc-theme-toggle { padding-inline: .65rem; }
}
/* OC purple homepage v3 refinement: closer to the dark mockup, less pastel, compact partner ad */
html[data-theme="dark"] .oc-page-frame,
html[data-theme="dark"] .oc-home-modern {
width: min(100% - 2rem, 1240px);
margin-inline: auto;
}
html[data-theme="dark"] .oc-home-modern {
gap: 1.05rem !important;
}
html[data-theme="dark"] .oc-hero-modern {
min-height: 430px !important;
display: block !important;
padding: clamp(1.6rem, 4vw, 2.6rem) !important;
border-radius: 1.55rem !important;
background:
linear-gradient(90deg, rgba(5,8,18,.98) 0%, rgba(5,8,18,.84) 38%, rgba(5,8,18,.36) 65%, rgba(5,8,18,.10) 100%),
linear-gradient(180deg, rgba(5,8,18,.10), rgba(5,8,18,.64)),
url('/assets/img/oc-hero-castle.webp') right center / cover no-repeat,
radial-gradient(circle at 76% 30%, rgba(168,85,247,.42), transparent 24rem),
#070a14 !important;
box-shadow: 0 24px 80px rgba(0,0,0,.42) !important;
}
html[data-theme="dark"] .oc-hero-modern:before {
opacity: .08 !important;
mask-image: linear-gradient(to right, #000, transparent 78%) !important;
}
html[data-theme="dark"] .oc-hero-copy-modern {
width: min(100%, 570px) !important;
padding: clamp(1.2rem, 3.8vw, 2.1rem) 0 !important;
}
html[data-theme="dark"] .oc-hero-art-modern {
display: none !important;
}
html[data-theme="dark"] .oc-hero-modern h1 {
font-size: clamp(2.55rem, 5vw, 4.25rem) !important;
line-height: 1.02 !important;
letter-spacing: -.045em !important;
margin-top: 1.05rem !important;
}
html[data-theme="dark"] .oc-hero-modern p {
max-width: 520px !important;
font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
}
html[data-theme="dark"] .oc-trust-grid-modern,
html[data-theme="dark"] .oc-route-grid-modern {
gap: .9rem !important;
}
html[data-theme="dark"] .oc-trust-card-modern,
html[data-theme="dark"] .oc-route-grid-modern a,
html[data-theme="dark"] .oc-home-panel-modern,
html[data-theme="dark"] .oc-service-card-modern,
html[data-theme="dark"] .oc-discord-cta-modern {
background: linear-gradient(180deg, rgba(13,18,31,.88), rgba(8,12,23,.84)) !important;
border-color: rgba(167,139,250,.18) !important;
}
html[data-theme="dark"] .oc-route-grid-modern a {
min-height: 135px !important;
}
html[data-theme="dark"] .oc-service-banner-modern {
min-height: 126px !important;
background:
radial-gradient(circle at 72% 28%, rgba(168,85,247,.48), transparent 8rem),
linear-gradient(180deg, rgba(5,8,18,.08), rgba(5,8,18,.55)),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
}
html[data-theme="dark"] .oc-discord-cta-modern {
background:
linear-gradient(90deg, rgba(8,10,23,.92), rgba(60,23,112,.82)),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
}
.oc-partner-top {
margin: .35rem 0 .1rem !important;
}
.oc-partner-ad {
border: 1px solid rgba(167,139,250,.18);
background: linear-gradient(180deg, rgba(13,18,31,.9), rgba(8,12,23,.86));
border-radius: 1.1rem;
padding: .9rem;
display: grid;
grid-template-columns: minmax(220px, 36%) minmax(0, 1fr);
gap: .9rem;
box-shadow: 0 16px 44px rgba(0,0,0,.20);
overflow: hidden;
}
.oc-partner-ad-label {
grid-column: 1 / -1;
color: #c4b5fd;
font-size: .7rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: .16em;
font-weight: 1000;
}
.oc-partner-ad-media {
border-radius: .85rem;
overflow: hidden;
background: #050711;
border: 1px solid rgba(167,139,250,.16);
height: 118px;
}
.oc-partner-ad-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.oc-partner-ad-body {
min-width: 0;
align-self: center;
}
.oc-partner-ad-name {
color: #a78bfa;
font-size: .78rem;
font-weight: 900;
margin-bottom: .25rem;
}
.oc-partner-ad h3 {
color: #fff;
margin: 0;
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.15;
font-weight: 1000;
}
.oc-partner-ad p {
color: #b8b4c9;
margin: .35rem 0 .65rem;
line-height: 1.45;
font-size: .92rem;
}
.oc-partner-ad a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.35rem;
border-radius: .75rem;
padding: .55rem .85rem;
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
text-decoration: none;
font-weight: 950;
font-size: .84rem;
}
html[data-theme="light"] .oc-partner-ad {
background: rgba(255,255,255,.86) !important;
border-color: rgba(109,40,217,.16) !important;
box-shadow: 0 14px 34px rgba(109,40,217,.10) !important;
}
html[data-theme="light"] .oc-partner-ad h3 { color: #171322 !important; }
html[data-theme="light"] .oc-partner-ad p { color: #5f5870 !important; }
html[data-theme="light"] .oc-partner-ad-name,
html[data-theme="light"] .oc-partner-ad-label { color: #7c3aed !important; }
@media (max-width: 760px) {
.oc-partner-ad { grid-template-columns: 1fr; }
.oc-partner-ad-media { height: 110px; }
html[data-theme="dark"] .oc-hero-modern { min-height: auto !important; }
}
/* OC purple homepage v4: make both themes use the castle hero and keep partner ads compact */
.oc-home-modern { padding-top: clamp(1.35rem, 3vw, 2.25rem) !important; }
.oc-hero-modern {
display: block !important;
min-height: clamp(520px, 56vw, 650px) !important;
border-radius: 1.6rem !important;
overflow: hidden !important;
background:
linear-gradient(90deg, rgba(5,7,18,.96) 0%, rgba(9,8,24,.86) 42%, rgba(11,9,28,.42) 72%, rgba(16,8,32,.22) 100%),
radial-gradient(circle at 75% 34%, rgba(168,85,247,.30), transparent 22rem),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
box-shadow: 0 24px 80px rgba(20,8,45,.24) !important;
}
.oc-hero-modern:before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(180deg, rgba(5,7,18,.08), rgba(5,7,18,.42)),
radial-gradient(circle at 12% 82%, rgba(168,85,247,.16), transparent 18rem) !important;
pointer-events: none !important;
}
.oc-hero-copy-modern {
max-width: 720px !important;
padding: clamp(2.2rem, 6vw, 4.1rem) !important;
}
.oc-hero-art-modern { display: none !important; }
.oc-hero-modern h1 {
max-width: 680px !important;
font-size: clamp(3.1rem, 6.7vw, 5.55rem) !important;
line-height: .98 !important;
letter-spacing: -.065em !important;
color: #fff !important;
}
.oc-hero-modern h1 span { color: #a855f7 !important; }
.oc-hero-modern p {
max-width: 560px !important;
color: #e6e0f5 !important;
font-weight: 750 !important;
}
html[data-theme="light"] .oc-hero-modern {
background:
linear-gradient(90deg, rgba(5,7,18,.94) 0%, rgba(10,8,24,.84) 42%, rgba(12,8,30,.48) 72%, rgba(16,8,32,.28) 100%),
radial-gradient(circle at 75% 34%, rgba(168,85,247,.30), transparent 22rem),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
}
html[data-theme="light"] .oc-hero-modern h1,
html[data-theme="light"] .oc-hero-modern p { color: #fff !important; }
html[data-theme="light"] .oc-hero-modern h1 span { color: #a855f7 !important; }
.oc-partner-top { margin: 1.05rem 0 .25rem !important; }
.oc-partner-ad {
grid-template-columns: 260px minmax(0, 1fr) auto !important;
align-items: center !important;
padding: .7rem !important;
gap: .75rem !important;
min-height: 0 !important;
max-height: 132px !important;
}
.oc-partner-ad-label {
grid-column: 1 / -1 !important;
margin-bottom: -.15rem !important;
}
.oc-partner-ad-media {
height: 74px !important;
min-height: 74px !important;
}
.oc-partner-ad-body {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"name cta"
"title cta"
"desc cta" !important;
column-gap: 1rem !important;
align-items: center !important;
}
.oc-partner-ad-name { grid-area: name !important; margin: 0 !important; }
.oc-partner-ad h3 {
grid-area: title !important;
font-size: clamp(.95rem, 1.6vw, 1.15rem) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.oc-partner-ad p {
grid-area: desc !important;
margin: .2rem 0 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: .82rem !important;
}
.oc-partner-ad a {
grid-area: cta !important;
min-height: 2.2rem !important;
white-space: nowrap !important;
font-size: .78rem !important;
}
html[data-theme="light"] .oc-partner-ad {
background: rgba(255,255,255,.94) !important;
}
html[data-theme="light"] .oc-partner-ad h3 { color: #1c1728 !important; text-shadow: none !important; }
html[data-theme="light"] .oc-partner-ad p { color: #534a64 !important; opacity: 1 !important; }
html[data-theme="light"] .oc-partner-ad-name,
html[data-theme="light"] .oc-partner-ad-label { color: #6d28d9 !important; opacity: 1 !important; }
@media (max-width: 860px) {
.oc-hero-modern { min-height: 560px !important; }
.oc-hero-copy-modern { padding: 2rem !important; }
.oc-partner-ad { grid-template-columns: 1fr !important; max-height: none !important; }
.oc-partner-ad-media { height: 96px !important; }
.oc-partner-ad-body { display: block !important; }
.oc-partner-ad h3 { white-space: normal !important; }
.oc-partner-ad p { -webkit-line-clamp: 2 !important; }
.oc-partner-ad a { margin-top: .55rem !important; }
}
/* OC purple global v5: lock the dark mockup as the primary visual system and make light mode readable. */
html { background: #070712 !important; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] body {
background:
radial-gradient(circle at 82% 4%, rgba(126, 34, 206, .23), transparent 26rem),
radial-gradient(circle at 10% 10%, rgba(88, 28, 135, .18), transparent 22rem),
linear-gradient(180deg, #070712 0%, #080913 48%, #05050d 100%) !important;
color: #f8f7ff !important;
}
html[data-theme="light"] body {
background:
radial-gradient(circle at 85% -10%, rgba(168, 85, 247, .18), transparent 26rem),
radial-gradient(circle at 10% 5%, rgba(139, 92, 246, .12), transparent 24rem),
linear-gradient(180deg, #faf7ff 0%, #f2ebff 55%, #ebe3fb 100%) !important;
color: #171322 !important;
}
html[data-theme="dark"] body::before { opacity: .10 !important; }
html[data-theme="light"] body::before { opacity: .035 !important; }
.oc-page-frame,
.oc-footer-inner,
.oc-header-inner,
.oc-flash-wrap,
.oc-footer-ad,
.oc-home-modern {
width: min(100% - 2rem, 1240px) !important;
margin-inline: auto !important;
}
.oc-page-frame { padding-top: clamp(1.6rem, 3vw, 2.3rem) !important; }
/* Shared header: same layout, purple identity. */
html[data-theme="dark"] .oc-header {
background: rgba(7, 7, 18, .90) !important;
border-bottom-color: rgba(167, 139, 250, .17) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
}
html[data-theme="light"] .oc-header {
background: rgba(250, 247, 255, .88) !important;
border-bottom-color: rgba(109, 40, 217, .16) !important;
box-shadow: 0 16px 35px rgba(76, 29, 149, .09) !important;
}
.oc-brand-mark {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important;
box-shadow: 0 12px 24px rgba(124, 58, 237, .26) !important;
}
html[data-theme="dark"] .oc-brand-name,
html[data-theme="dark"] .oc-nav-link,
html[data-theme="dark"] .oc-nav-dropdown>summary { color: #f8f7ff !important; }
html[data-theme="dark"] .oc-brand-line { color: #b8b4c9 !important; }
html[data-theme="light"] .oc-brand-name,
html[data-theme="light"] .oc-nav-link,
html[data-theme="light"] .oc-nav-dropdown>summary { color: #171322 !important; }
html[data-theme="light"] .oc-brand-line { color: #5f5870 !important; }
html[data-theme="dark"] .oc-nav-link:hover,
html[data-theme="dark"] .oc-nav-dropdown>summary:hover,
html[data-theme="dark"] .oc-nav-link.is-active,
html[data-theme="dark"] .oc-nav-dropdown>summary.is-active {
background: rgba(167,139,250,.13) !important;
border-color: rgba(167,139,250,.24) !important;
}
html[data-theme="light"] .oc-nav-link:hover,
html[data-theme="light"] .oc-nav-dropdown>summary:hover,
html[data-theme="light"] .oc-nav-link.is-active,
html[data-theme="light"] .oc-nav-dropdown>summary.is-active {
background: rgba(139,92,246,.12) !important;
border-color: rgba(109,40,217,.20) !important;
}
.oc-theme-toggle,
.oc-nav-action,
.oc-btn-primary {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
border-color: rgba(216,180,254,.32) !important;
color: #fff !important;
box-shadow: 0 14px 30px rgba(124,58,237,.24) !important;
}
.oc-theme-toggle { min-width: 5.65rem; justify-content: center; }
.oc-btn-secondary {
background: rgba(255,255,255,.08) !important;
border-color: rgba(216,180,254,.26) !important;
color: #fff !important;
}
html[data-theme="light"] .oc-btn-secondary:not(.oc-hero-modern .oc-btn-secondary):not(.oc-discord-cta-modern .oc-btn-secondary) {
color: #27193f !important;
background: rgba(255,255,255,.72) !important;
border-color: rgba(109,40,217,.20) !important;
}
/* Homepage: force the dark mockup structure in both themes. */
.oc-home-modern {
display: grid !important;
gap: 1.15rem !important;
padding-top: clamp(1.7rem, 3vw, 2.4rem) !important;
}
.oc-hero-modern {
position: relative !important;
display: block !important;
overflow: hidden !important;
min-height: clamp(520px, 48vw, 600px) !important;
border-radius: 1.55rem !important;
border: 1px solid rgba(167,139,250,.20) !important;
background:
linear-gradient(90deg, rgba(5,7,18,.96) 0%, rgba(8,8,22,.86) 42%, rgba(10,8,28,.50) 68%, rgba(12,8,30,.22) 100%),
radial-gradient(circle at 70% 38%, rgba(168,85,247,.32), transparent 22rem),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
box-shadow: 0 26px 80px rgba(20,8,45,.24) !important;
}
html[data-theme="dark"] .oc-hero-modern {
box-shadow: 0 28px 90px rgba(0,0,0,.44) !important;
}
.oc-hero-modern:before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(180deg, rgba(5,7,18,.04), rgba(5,7,18,.42)),
radial-gradient(circle at 15% 80%, rgba(168,85,247,.18), transparent 18rem) !important;
opacity: 1 !important;
}
.oc-hero-copy-modern {
position: relative !important;
z-index: 1 !important;
width: min(100%, 650px) !important;
max-width: 650px !important;
padding: clamp(2rem, 5vw, 3.8rem) !important;
}
.oc-hero-art-modern { display: none !important; }
.oc-hero-modern h1 {
max-width: 650px !important;
margin: 1.05rem 0 0 !important;
font-size: clamp(3rem, 6.2vw, 5.1rem) !important;
line-height: .98 !important;
letter-spacing: -.065em !important;
color: #fff !important;
text-wrap: balance !important;
}
.oc-hero-modern h1 span { color: #a855f7 !important; }
.oc-hero-modern p {
max-width: 540px !important;
color: #f1ecff !important;
font-weight: 760 !important;
font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
line-height: 1.55 !important;
}
.oc-powered-pill {
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
border: 1px solid rgba(216,180,254,.28) !important;
background: rgba(139,92,246,.18) !important;
color: #f1e7ff !important;
border-radius: 999px !important;
padding: .42rem .72rem !important;
font-weight: 950 !important;
}
.oc-home-actions-modern { display: flex !important; gap: .75rem !important; flex-wrap: wrap !important; margin-top: 1.35rem !important; }
/* Home cards and panels: same geometry across light/dark, only surfaces change. */
.oc-trust-grid-modern { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: .9rem !important; }
.oc-route-grid-modern { grid-template-columns: repeat(6, minmax(0,1fr)) !important; gap: .9rem !important; }
.oc-trust-card-modern,
.oc-route-grid-modern a,
.oc-home-panel-modern,
.oc-service-card-modern,
.oc-discord-cta-modern,
.oc-guide-grid-modern a,
.oc-safety-grid-modern a,
.oc-thread-list-modern a,
.oc-activity-list-modern a {
border-radius: 1rem !important;
border: 1px solid rgba(167,139,250,.18) !important;
}
html[data-theme="dark"] .oc-trust-card-modern,
html[data-theme="dark"] .oc-route-grid-modern a,
html[data-theme="dark"] .oc-home-panel-modern,
html[data-theme="dark"] .oc-service-card-modern,
html[data-theme="dark"] .oc-discord-cta-modern,
html[data-theme="dark"] .oc-guide-grid-modern a,
html[data-theme="dark"] .oc-safety-grid-modern a,
html[data-theme="dark"] .oc-thread-list-modern a,
html[data-theme="dark"] .oc-activity-list-modern a,
html[data-theme="dark"] .oc-panel,
html[data-theme="dark"] .oc-marketplace-panel,
html[data-theme="dark"] .oc-guide-card,
html[data-theme="dark"] .oc-forum-card,
html[data-theme="dark"] .oc-server-card,
html[data-theme="dark"] .oc-profile-editor-shell,
html[data-theme="dark"] .rounded-2xl,
html[data-theme="dark"] .rounded-xl {
background: linear-gradient(180deg, rgba(13,18,31,.92), rgba(8,12,23,.88)) !important;
border-color: rgba(167,139,250,.18) !important;
box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
color: #f8f7ff !important;
}
html[data-theme="light"] .oc-trust-card-modern,
html[data-theme="light"] .oc-route-grid-modern a,
html[data-theme="light"] .oc-home-panel-modern,
html[data-theme="light"] .oc-service-card-modern,
html[data-theme="light"] .oc-discord-cta-modern,
html[data-theme="light"] .oc-guide-grid-modern a,
html[data-theme="light"] .oc-safety-grid-modern a,
html[data-theme="light"] .oc-thread-list-modern a,
html[data-theme="light"] .oc-activity-list-modern a,
html[data-theme="light"] .oc-panel,
html[data-theme="light"] .oc-marketplace-panel,
html[data-theme="light"] .oc-guide-card,
html[data-theme="light"] .oc-forum-card,
html[data-theme="light"] .oc-server-card,
html[data-theme="light"] .oc-profile-editor-shell,
html[data-theme="light"] .rounded-2xl,
html[data-theme="light"] .rounded-xl {
background: rgba(255,255,255,.86) !important;
border-color: rgba(109,40,217,.14) !important;
box-shadow: 0 16px 36px rgba(76,29,149,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
color: #171322 !important;
}
.oc-route-grid-modern a { min-height: 130px !important; }
.oc-route-grid-modern span,
.oc-trust-card-modern span,
.oc-safety-grid-modern span {
background: rgba(139,92,246,.16) !important;
color: #d8b4fe !important;
}
html[data-theme="light"] .oc-route-grid-modern span,
html[data-theme="light"] .oc-trust-card-modern span,
html[data-theme="light"] .oc-safety-grid-modern span { color: #6d28d9 !important; }
/* Text contrast: normalize all OC pages and common Tailwind text utilities. */
html[data-theme="dark"] .oc-section-head-modern h2,
html[data-theme="dark"] .oc-safety-panel-modern h2,
html[data-theme="dark"] .oc-discord-cta-modern h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .font-bold,
html[data-theme="dark"] .font-semibold,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-zinc-900,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-black {
color: #fff !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-zinc-700,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .oc-trust-card-modern em,
html[data-theme="dark"] .oc-route-grid-modern em,
html[data-theme="dark"] .oc-section-head-modern p,
html[data-theme="dark"] .oc-service-card-modern p,
html[data-theme="dark"] .oc-service-foot-modern span,
html[data-theme="dark"] .oc-thread-list-modern em,
html[data-theme="dark"] .oc-activity-list-modern em,
html[data-theme="dark"] .oc-guide-grid-modern em,
html[data-theme="dark"] .oc-safety-grid-modern em,
html[data-theme="dark"] .oc-discord-cta-modern p {
color: #c7c3d8 !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .font-bold,
html[data-theme="light"] .font-semibold,
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-gray-100 {
color: #171322 !important;
}
html[data-theme="light"] .oc-hero-modern h1,
html[data-theme="light"] .oc-hero-modern h2,
html[data-theme="light"] .oc-hero-modern h3,
html[data-theme="light"] .oc-hero-modern p,
html[data-theme="light"] .oc-powered-pill,
html[data-theme="light"] .oc-discord-cta-modern h2,
html[data-theme="light"] .oc-discord-cta-modern p { color: #fff !important; }
html[data-theme="light"] .oc-hero-modern h1 span { color: #a855f7 !important; }
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] label,
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-gray-300,
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .oc-trust-card-modern em,
html[data-theme="light"] .oc-route-grid-modern em,
html[data-theme="light"] .oc-section-head-modern p,
html[data-theme="light"] .oc-service-card-modern p,
html[data-theme="light"] .oc-service-foot-modern span,
html[data-theme="light"] .oc-thread-list-modern em,
html[data-theme="light"] .oc-activity-list-modern em,
html[data-theme="light"] .oc-guide-grid-modern em,
html[data-theme="light"] .oc-safety-grid-modern em {
color: #5b536b !important;
}
.oc-section-kicker-modern,
.oc-section-head-modern a,
.oc-wide-action-modern,
.oc-service-foot-modern strong,
.oc-service-card-modern a,
.oc-guide-grid-modern span {
color: #c084fc !important;
}
html[data-theme="light"] .oc-section-kicker-modern,
html[data-theme="light"] .oc-section-head-modern a,
html[data-theme="light"] .oc-wide-action-modern,
html[data-theme="light"] .oc-service-foot-modern strong,
html[data-theme="light"] .oc-service-card-modern a,
html[data-theme="light"] .oc-guide-grid-modern span { color: #8b5cf6 !important; }
/* Service tiles match the mockup better. */
.oc-service-banner-modern {
min-height: 126px !important;
background:
radial-gradient(circle at 72% 28%, rgba(168,85,247,.48), transparent 8rem),
linear-gradient(180deg, rgba(5,8,18,.08), rgba(5,8,18,.58)),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
}
.oc-service-banner-modern span {
background: rgba(16,12,30,.88) !important;
color: #fff !important;
border: 1px solid rgba(216,180,254,.18) !important;
}
/* Partner ad: compact, readable, not dominating. */
.oc-partner-top { margin: 1rem 0 .2rem !important; }
.oc-partner-ad {
grid-template-columns: 260px minmax(0,1fr) auto !important;
align-items: center !important;
gap: .8rem !important;
padding: .7rem !important;
max-height: 132px !important;
overflow: hidden !important;
border-radius: 1rem !important;
}
html[data-theme="dark"] .oc-partner-ad {
background: linear-gradient(180deg, rgba(13,18,31,.94), rgba(8,12,23,.90)) !important;
border-color: rgba(245,158,11,.26) !important;
}
html[data-theme="light"] .oc-partner-ad {
background: rgba(255,255,255,.92) !important;
border-color: rgba(109,40,217,.16) !important;
}
.oc-partner-ad-media { height: 74px !important; min-height: 74px !important; }
.oc-partner-ad-label { color: #c4b5fd !important; }
html[data-theme="light"] .oc-partner-ad-label,
html[data-theme="light"] .oc-partner-ad-name { color: #6d28d9 !important; }
html[data-theme="light"] .oc-partner-ad h3 { color: #171322 !important; }
html[data-theme="light"] .oc-partner-ad p { color: #5b536b !important; }
/* Forms and tables on all pages. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] table,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100 {
background-color: rgba(8,12,23,.88) !important;
color: #f8f7ff !important;
border-color: rgba(167,139,250,.18) !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] table {
background-color: rgba(255,255,255,.92) !important;
color: #171322 !important;
border-color: rgba(109,40,217,.18) !important;
}
input:focus, textarea:focus, select:focus {
outline-color: rgba(139,92,246,.38) !important;
border-color: rgba(139,92,246,.55) !important;
}
/* Footer follows the same system. */
html[data-theme="dark"] .oc-footer {
background: rgba(5,5,13,.94) !important;
border-top-color: rgba(167,139,250,.16) !important;
}
html[data-theme="light"] .oc-footer {
background: rgba(250,247,255,.94) !important;
border-top-color: rgba(109,40,217,.14) !important;
}
html[data-theme="dark"] .oc-footer-copy,
html[data-theme="dark"] .oc-footer-links a { color: #b8b4c9 !important; }
html[data-theme="light"] .oc-footer-copy,
html[data-theme="light"] .oc-footer-links a { color: #5b536b !important; }
@media (max-width: 980px) {
.oc-trust-grid-modern { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.oc-route-grid-modern { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.oc-community-grid-modern,
.oc-lower-grid-modern { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
.oc-page-frame,
.oc-footer-inner,
.oc-header-inner,
.oc-flash-wrap,
.oc-footer-ad,
.oc-home-modern { width: min(100% - 1rem, 1240px) !important; }
.oc-hero-modern { min-height: auto !important; }
.oc-hero-copy-modern { padding: 1.6rem !important; }
.oc-hero-modern h1 { font-size: clamp(2.55rem, 14vw, 4rem) !important; }
.oc-trust-grid-modern,
.oc-route-grid-modern { grid-template-columns: 1fr !important; }
.oc-partner-ad { grid-template-columns: 1fr !important; max-height: none !important; }
.oc-partner-ad-body { display: block !important; }
.oc-partner-ad h3 { white-space: normal !important; }
.oc-partner-ad p { -webkit-line-clamp: 2 !important; }
.oc-partner-ad a { margin-top: .55rem !important; }
}
/* OC purple global v6: tighten hero + consistent theme dimensions */
.oc-home-modern {
padding-top: clamp(1rem, 2vw, 1.45rem) !important;
gap: 1rem !important;
}
.oc-hero-modern,
html[data-theme="light"] .oc-hero-modern,
html[data-theme="dark"] .oc-hero-modern {
min-height: 430px !important;
height: 430px !important;
max-height: 430px !important;
border-radius: 1.45rem !important;
background:
linear-gradient(90deg, rgba(5,7,18,.97) 0%, rgba(8,8,22,.88) 40%, rgba(10,8,28,.54) 68%, rgba(12,8,30,.28) 100%),
radial-gradient(circle at 70% 38%, rgba(168,85,247,.28), transparent 22rem),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
}
.oc-hero-copy-modern {
max-width: 610px !important;
padding: 2.35rem clamp(2rem, 4vw, 3.2rem) !important;
}
.oc-hero-modern h1,
html[data-theme="light"] .oc-hero-modern h1,
html[data-theme="dark"] .oc-hero-modern h1 {
max-width: 590px !important;
font-size: clamp(2.65rem, 4.8vw, 4.25rem) !important;
line-height: .98 !important;
color: #fff !important;
}
.oc-hero-modern p,
html[data-theme="light"] .oc-hero-modern p,
html[data-theme="dark"] .oc-hero-modern p {
max-width: 520px !important;
font-size: 1.02rem !important;
line-height: 1.55 !important;
color: #f1ecff !important;
}
.oc-home-actions-modern { margin-top: 1.1rem !important; }
.oc-powered-pill { padding: .36rem .68rem !important; font-size: .84rem !important; }
@media (max-width: 900px) {
.oc-hero-modern,
html[data-theme="light"] .oc-hero-modern,
html[data-theme="dark"] .oc-hero-modern {
min-height: 390px !important;
height: 390px !important;
max-height: 390px !important;
}
.oc-hero-copy-modern { padding: 1.9rem !important; }
.oc-hero-modern h1 { font-size: clamp(2.35rem, 8vw, 3.65rem) !important; }
}
@media (max-width: 560px) {
.oc-hero-modern,
html[data-theme="light"] .oc-hero-modern,
html[data-theme="dark"] .oc-hero-modern {
min-height: 430px !important;
height: 430px !important;
max-height: 430px !important;
background-position: center !important;
}
.oc-hero-copy-modern { padding: 1.45rem !important; }
.oc-hero-modern h1 { font-size: clamp(2.25rem, 12vw, 3.15rem) !important; }
}
/* Page-wide dark purple system for older Tailwind-heavy pages. */
html[data-theme="dark"] body {
background:
radial-gradient(circle at 85% 0%, rgba(88,28,135,.30), transparent 34rem),
radial-gradient(circle at 8% 12%, rgba(59,7,100,.20), transparent 30rem),
#050611 !important;
color: #f8f7ff !important;
}
html[data-theme="dark"] main,
html[data-theme="dark"] .oc-shell { color: #f8f7ff !important; }
html[data-theme="dark"] [class*="bg-slate-950"],
html[data-theme="dark"] [class*="bg-slate-900"],
html[data-theme="dark"] [class*="bg-white/"],
html[data-theme="dark"] [class*="bg-white\\/"],
html[data-theme="dark"] [class*="rounded-[2rem]"],
html[data-theme="dark"] [class*="rounded-2xl"] {
border-color: rgba(167,139,250,.18) !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
background: rgba(7,10,20,.92) !important;
border-color: rgba(167,139,250,.20) !important;
color: #f8f7ff !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #8f86a8 !important; }
/* Light-mode readability: dark hero blocks keep light text, light cards keep dark text. */
html[data-theme="light"] [class*="bg-slate-950"] h1,
html[data-theme="light"] [class*="bg-slate-950"] h2,
html[data-theme="light"] [class*="bg-slate-950"] h3,
html[data-theme="light"] [class*="bg-slate-900"] h1,
html[data-theme="light"] [class*="bg-slate-900"] h2,
html[data-theme="light"] [class*="bg-slate-900"] h3 {
color: #fff !important;
}
html[data-theme="light"] [class*="bg-slate-950"] p,
html[data-theme="light"] [class*="bg-slate-950"] span,
html[data-theme="light"] [class*="bg-slate-900"] p,
html[data-theme="light"] [class*="bg-slate-900"] span {
color: #d8d3e8 !important;
}
html[data-theme="light"] .oc-panel,
html[data-theme="light"] .oc-marketplace-panel,
html[data-theme="light"] .oc-guide-card,
html[data-theme="light"] .oc-forum-card,
html[data-theme="light"] .oc-server-card,
html[data-theme="light"] .oc-profile-editor-shell,
html[data-theme="light"] .oc-home-panel-modern,
html[data-theme="light"] .oc-service-card-modern,
html[data-theme="light"] .oc-guide-grid-modern a,
html[data-theme="light"] .oc-safety-grid-modern a,
html[data-theme="light"] .oc-thread-list-modern a,
html[data-theme="light"] .oc-activity-list-modern a {
color: #171322 !important;
}
html[data-theme="light"] .oc-panel p,
html[data-theme="light"] .oc-marketplace-panel p,
html[data-theme="light"] .oc-guide-card p,
html[data-theme="light"] .oc-forum-card p,
html[data-theme="light"] .oc-server-card p,
html[data-theme="light"] .oc-profile-editor-shell p,
html[data-theme="light"] .oc-home-panel-modern p,
html[data-theme="light"] .oc-service-card-modern p,
html[data-theme="light"] .oc-guide-grid-modern p,
html[data-theme="light"] .oc-safety-grid-modern p,
html[data-theme="light"] .oc-thread-list-modern p,
html[data-theme="light"] .oc-activity-list-modern p {
color: #5f5870 !important;
}
/* Replace the old green accent feel with purple on public pages. */
html[data-theme="dark"] .bg-emerald-400,
html[data-theme="light"] .bg-emerald-400 {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important;
}
html[data-theme="dark"] .text-emerald-300,
html[data-theme="dark"] .text-emerald-200,
html[data-theme="dark"] .text-emerald-100,
html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-200,
html[data-theme="light"] .text-emerald-100 {
color: #c084fc !important;
}
html[data-theme="dark"] [class*="border-emerald"],
html[data-theme="light"] [class*="border-emerald"] { border-color: rgba(192,132,252,.28) !important; }
html[data-theme="dark"] [class*="bg-emerald"],
html[data-theme="light"] [class*="bg-emerald"] { background-color: rgba(124,58,237,.14) !important; }
/* OC purple global v7: smaller fixed hero + hard light-mode readability pass */
:root { --oc-purple:#8b5cf6; --oc-purple-2:#a855f7; --oc-dark:#050611; --oc-card:#090d19; --oc-line:rgba(167,139,250,.20); --oc-light-text:#171322; --oc-light-muted:#5f5870; }
/* The homepage hero must be identical size in light/dark. Only surrounding colors change. */
.oc-home-modern .oc-hero-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern {
min-height: 360px !important;
height: 360px !important;
max-height: 360px !important;
border-radius: 1.35rem !important;
background:
linear-gradient(90deg, rgba(5,7,18,.98) 0%, rgba(8,8,22,.90) 37%, rgba(10,8,28,.58) 66%, rgba(12,8,30,.30) 100%),
radial-gradient(circle at 70% 38%, rgba(168,85,247,.26), transparent 21rem),
url('/assets/img/oc-hero-castle.webp') center / cover no-repeat !important;
}
.oc-home-modern .oc-hero-copy-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-copy-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-copy-modern {
max-width: 560px !important;
padding: 1.85rem clamp(1.8rem, 3.2vw, 2.7rem) !important;
}
.oc-home-modern .oc-hero-modern h1,
html[data-theme="light"] .oc-home-modern .oc-hero-modern h1,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern h1 {
max-width: 540px !important;
font-size: clamp(2.35rem, 4.1vw, 3.55rem) !important;
line-height: .98 !important;
letter-spacing: -.055em !important;
color: #fff !important;
}
.oc-home-modern .oc-hero-modern h1 span,
html[data-theme="light"] .oc-home-modern .oc-hero-modern h1 span,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern h1 span { color: #a855f7 !important; }
.oc-home-modern .oc-hero-modern p,
html[data-theme="light"] .oc-home-modern .oc-hero-modern p,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern p {
max-width: 500px !important;
font-size: .98rem !important;
line-height: 1.5 !important;
color: #f1ecff !important;
}
.oc-home-modern .oc-powered-pill { margin-bottom: .75rem !important; }
.oc-home-actions-modern .oc-btn-primary,
.oc-home-actions-modern .oc-btn-secondary { padding: .75rem 1.05rem !important; }
/* Hard reset for light mode: no more white-on-pastel page content. */
html[data-theme="light"] main h1,
html[data-theme="light"] main h2,
html[data-theme="light"] main h3,
html[data-theme="light"] main h4,
html[data-theme="light"] main h5,
html[data-theme="light"] main h6,
html[data-theme="light"] main .font-black,
html[data-theme="light"] main .font-bold,
html[data-theme="light"] main .font-semibold,
html[data-theme="light"] main .text-white,
html[data-theme="light"] main .text-slate-50,
html[data-theme="light"] main .text-slate-100,
html[data-theme="light"] main .text-slate-200,
html[data-theme="light"] main .text-zinc-50,
html[data-theme="light"] main .text-zinc-100,
html[data-theme="light"] main .text-gray-50,
html[data-theme="light"] main .text-gray-100 {
color: var(--oc-light-text) !important;
}
html[data-theme="light"] main p,
html[data-theme="light"] main li,
html[data-theme="light"] main label,
html[data-theme="light"] main small,
html[data-theme="light"] main .text-slate-300,
html[data-theme="light"] main .text-slate-400,
html[data-theme="light"] main .text-slate-500,
html[data-theme="light"] main .text-slate-600,
html[data-theme="light"] main .text-gray-300,
html[data-theme="light"] main .text-gray-400,
html[data-theme="light"] main .text-gray-500,
html[data-theme="light"] main .text-zinc-300,
html[data-theme="light"] main .text-zinc-400,
html[data-theme="light"] main .text-zinc-500 {
color: var(--oc-light-muted) !important;
}
/* Then explicitly restore text inside intentionally dark hero/CTA blocks. */
html[data-theme="light"] .oc-hero-modern,
html[data-theme="light"] .oc-hero-modern h1,
html[data-theme="light"] .oc-hero-modern h2,
html[data-theme="light"] .oc-hero-modern h3,
html[data-theme="light"] .oc-hero-modern p,
html[data-theme="light"] .oc-hero-modern .font-black,
html[data-theme="light"] .oc-hero-modern .font-bold,
html[data-theme="light"] .oc-powered-pill,
html[data-theme="light"] .oc-discord-cta-modern,
html[data-theme="light"] .oc-discord-cta-modern h1,
html[data-theme="light"] .oc-discord-cta-modern h2,
html[data-theme="light"] .oc-discord-cta-modern p {
color: #fff !important;
}
html[data-theme="light"] .oc-hero-modern h1 span { color: #a855f7 !important; }
/* Light mode cards and old Tailwind blocks: light panels, readable text, purple accents. */
html[data-theme="light"] main [class*="bg-slate-950"],
html[data-theme="light"] main [class*="bg-slate-900"],
html[data-theme="light"] main [class*="bg-white/"],
html[data-theme="light"] main [class*="bg-white\\/"],
html[data-theme="light"] main .oc-panel,
html[data-theme="light"] main .oc-marketplace-panel,
html[data-theme="light"] main .oc-guide-card,
html[data-theme="light"] main .oc-forum-card,
html[data-theme="light"] main .oc-server-card,
html[data-theme="light"] main .oc-profile-editor-shell {
background: rgba(255,255,255,.88) !important;
border-color: rgba(109,40,217,.14) !important;
color: var(--oc-light-text) !important;
box-shadow: 0 18px 42px rgba(76,29,149,.07) !important;
}
html[data-theme="light"] main [class*="bg-emerald"],
html[data-theme="light"] main [class*="bg-teal"],
html[data-theme="light"] main [class*="bg-cyan"] {
background: rgba(139,92,246,.12) !important;
border-color: rgba(139,92,246,.22) !important;
color: #6d28d9 !important;
}
html[data-theme="light"] main [class*="text-emerald"],
html[data-theme="light"] main [class*="text-teal"],
html[data-theme="light"] main [class*="text-cyan"] { color: #7c3aed !important; }
html[data-theme="light"] main [class*="border-emerald"],
html[data-theme="light"] main [class*="border-teal"],
html[data-theme="light"] main [class*="border-cyan"] { border-color: rgba(139,92,246,.26) !important; }
/* Buttons should stay readable in both themes. */
html[data-theme="light"] main a[class*="bg-emerald"],
html[data-theme="light"] main button[class*="bg-emerald"],
html[data-theme="light"] main .oc-btn-primary {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important;
border-color: rgba(216,180,254,.35) !important;
}
html[data-theme="light"] main a[class*="border"],
html[data-theme="light"] main button[class*="border"] {
border-color: rgba(109,40,217,.18) !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
background: rgba(255,255,255,.96) !important;
color: #1f1a2e !important;
border-color: rgba(109,40,217,.18) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #6f6680 !important; }
/* Dark mode page consistency for older pages: same dark purple system as the homepage. */
html[data-theme="dark"] main [class*="bg-slate-950"],
html[data-theme="dark"] main [class*="bg-slate-900"],
html[data-theme="dark"] main [class*="bg-white/"],
html[data-theme="dark"] main [class*="bg-white\\/"],
html[data-theme="dark"] main .oc-panel,
html[data-theme="dark"] main .oc-marketplace-panel,
html[data-theme="dark"] main .oc-guide-card,
html[data-theme="dark"] main .oc-forum-card,
html[data-theme="dark"] main .oc-server-card,
html[data-theme="dark"] main .oc-profile-editor-shell {
background: linear-gradient(180deg, rgba(10,14,26,.94), rgba(6,9,18,.91)) !important;
border-color: rgba(167,139,250,.18) !important;
color: #f8f7ff !important;
box-shadow: 0 18px 48px rgba(0,0,0,.24) !important;
}
/* Non-homepage top banners: keep them compact and dark-style instead of huge pastel panels. */
main > .rounded-\[2rem\]:first-child,
main > .rounded-3xl:first-child,
main > section.rounded-\[2rem\]:first-child,
main > section.rounded-3xl:first-child,
main > div.rounded-\[2rem\]:first-child,
main > div.rounded-3xl:first-child {
min-height: unset !important;
}
html[data-theme="dark"] main > .rounded-\[2rem\]:first-child,
html[data-theme="dark"] main > .rounded-3xl:first-child,
html[data-theme="dark"] main > section.rounded-\[2rem\]:first-child,
html[data-theme="dark"] main > section.rounded-3xl:first-child,
html[data-theme="dark"] main > div.rounded-\[2rem\]:first-child,
html[data-theme="dark"] main > div.rounded-3xl:first-child {
background:
radial-gradient(circle at 20% 10%, rgba(124,58,237,.28), transparent 20rem),
linear-gradient(135deg, rgba(11,15,29,.96), rgba(4,7,16,.96)) !important;
border-color: rgba(167,139,250,.18) !important;
}
html[data-theme="light"] main > .rounded-\[2rem\]:first-child,
html[data-theme="light"] main > .rounded-3xl:first-child,
html[data-theme="light"] main > section.rounded-\[2rem\]:first-child,
html[data-theme="light"] main > section.rounded-3xl:first-child,
html[data-theme="light"] main > div.rounded-\[2rem\]:first-child,
html[data-theme="light"] main > div.rounded-3xl:first-child {
background: rgba(255,255,255,.88) !important;
border-color: rgba(109,40,217,.14) !important;
}
/* Keep the homepage partner ad compact even on light mode. */
.oc-partner-ad { max-height: 112px !important; }
.oc-partner-ad-media { height: 64px !important; min-height: 64px !important; }
.oc-partner-ad h3 { font-size: 1rem !important; line-height: 1.18 !important; }
.oc-partner-ad p { font-size: .85rem !important; }
@media (max-width: 900px) {
.oc-home-modern .oc-hero-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern {
min-height: 330px !important;
height: 330px !important;
max-height: 330px !important;
}
.oc-home-modern .oc-hero-modern h1 { font-size: clamp(2.15rem, 7vw, 3.1rem) !important; }
}
@media (max-width: 560px) {
.oc-home-modern .oc-hero-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern {
min-height: 360px !important;
height: 360px !important;
max-height: 360px !important;
}
.oc-home-modern .oc-hero-copy-modern { padding: 1.25rem !important; }
.oc-home-modern .oc-hero-modern h1 { font-size: clamp(2rem, 11vw, 2.85rem) !important; }
.oc-partner-ad { max-height: none !important; }
}
/* OC purple global v8: recover hero buttons + clean light forum/readability issues */
.oc-home-modern .oc-hero-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern {
min-height: 380px !important;
height: 380px !important;
max-height: 380px !important;
background-position: center center !important;
}
.oc-home-modern .oc-hero-copy-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-copy-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-copy-modern {
max-width: 540px !important;
padding: 1.5rem clamp(1.55rem, 3vw, 2.35rem) !important;
}
.oc-home-modern .oc-hero-modern h1,
html[data-theme="light"] .oc-home-modern .oc-hero-modern h1,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern h1 {
max-width: 520px !important;
font-size: clamp(2.15rem, 3.75vw, 3.2rem) !important;
line-height: 1 !important;
margin-top: .8rem !important;
}
.oc-home-modern .oc-hero-modern p,
html[data-theme="light"] .oc-home-modern .oc-hero-modern p,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern p {
max-width: 500px !important;
margin-top: .8rem !important;
font-size: .92rem !important;
line-height: 1.45 !important;
}
.oc-home-actions-modern {
margin-top: .9rem !important;
position: relative !important;
z-index: 3 !important;
}
.oc-home-actions-modern .oc-btn-primary,
.oc-home-actions-modern .oc-btn-secondary {
min-height: 2.75rem !important;
padding: .68rem 1rem !important;
line-height: 1 !important;
}
.oc-home-modern .oc-powered-pill {
margin-bottom: .65rem !important;
font-size: .78rem !important;
}
@media (max-width: 900px) {
.oc-home-modern .oc-hero-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern {
min-height: 360px !important;
height: 360px !important;
max-height: 360px !important;
}
.oc-home-modern .oc-hero-modern h1 { font-size: clamp(2rem, 6vw, 2.85rem) !important; }
}
@media (max-width: 560px) {
.oc-home-modern .oc-hero-modern,
html[data-theme="light"] .oc-home-modern .oc-hero-modern,
html[data-theme="dark"] .oc-home-modern .oc-hero-modern {
min-height: 390px !important;
height: 390px !important;
max-height: 390px !important;
}
.oc-home-modern .oc-hero-copy-modern { padding: 1.1rem !important; }
.oc-home-modern .oc-hero-modern h1 { font-size: clamp(1.9rem, 10vw, 2.55rem) !important; }
}
/* Light mode: forum cards should be clean white cards, not purple slabs caused by hover utility names. */
html[data-theme="light"] main a.group[href^="/forums/"],
html[data-theme="light"] main a.rounded-2xl[href^="/thread/"],
html[data-theme="light"] main article.forum-thread-card,
html[data-theme="light"] main aside.rounded-\[1\.5rem\],
html[data-theme="light"] main section.rounded-\[1\.5rem\],
html[data-theme="light"] main div.rounded-\[2rem\],
html[data-theme="light"] main form.rounded-\[1\.5rem\] {
background: rgba(255,255,255,.88) !important;
border-color: rgba(109,40,217,.14) !important;
color: #171322 !important;
box-shadow: 0 14px 34px rgba(76,29,149,.07) !important;
}
html[data-theme="light"] main a.group[href^="/forums/"]:hover,
html[data-theme="light"] main a.rounded-2xl[href^="/thread/"]:hover,
html[data-theme="light"] main article.forum-thread-card:hover {
background: rgba(250,247,255,.96) !important;
border-color: rgba(139,92,246,.32) !important;
}
html[data-theme="light"] main a.group[href^="/forums/"] h3,
html[data-theme="light"] main article.forum-thread-card h2,
html[data-theme="light"] main article.forum-thread-card h2 a,
html[data-theme="light"] main aside a[href^="/thread/"] .font-black,
html[data-theme="light"] main .forum-thread-card .text-white,
html[data-theme="light"] main a.group[href^="/forums/"] .text-white {
color: #171322 !important;
}
html[data-theme="light"] main a.group[href^="/forums/"] p,
html[data-theme="light"] main article.forum-thread-card p,
html[data-theme="light"] main .forum-thread-card .text-slate-400,
html[data-theme="light"] main .forum-thread-card .text-slate-500,
html[data-theme="light"] main a.group[href^="/forums/"] .text-slate-400,
html[data-theme="light"] main a.group[href^="/forums/"] .text-slate-500 {
color: #5f5870 !important;
}
html[data-theme="light"] main a.group[href^="/forums/"] .bg-slate-950\/50,
html[data-theme="light"] main article.forum-thread-card .bg-slate-900\/80,
html[data-theme="light"] main article.forum-thread-card .bg-slate-950\/50 {
background: rgba(246,242,255,.95) !important;
color: #171322 !important;
border-color: rgba(109,40,217,.12) !important;
}
html[data-theme="light"] main a.group[href^="/forums/"] .bg-slate-950\/50 .text-white,
html[data-theme="light"] main article.forum-thread-card .bg-slate-900\/80 .text-white {
color: #171322 !important;
}
html[data-theme="light"] main a[href^="/forums/search?tag="],
html[data-theme="light"] main a[href*="?tag="] {
background: rgba(255,255,255,.82) !important;
border-color: rgba(109,40,217,.16) !important;
color: #3b2b59 !important;
}
/* Light mode warnings/reminders: keep contrast instead of pale yellow on pale purple. */
html[data-theme="light"] main .text-yellow-50,
html[data-theme="light"] main .text-yellow-100,
html[data-theme="light"] main .text-yellow-200,
html[data-theme="light"] main .text-amber-50,
html[data-theme="light"] main .text-amber-100,
html[data-theme="light"] main .text-amber-200 {
color: #7c2d12 !important;
}
html[data-theme="light"] main [class*="bg-yellow"],
html[data-theme="light"] main [class*="bg-amber"] {
background: rgba(255,251,235,.92) !important;
border-color: rgba(245,158,11,.24) !important;
}
html[data-theme="light"] main .bg-purple-400\/10,
html[data-theme="light"] main .bg-purple-500\/10,
html[data-theme="light"] main .bg-purple-600\/10 {
background: rgba(139,92,246,.10) !important;
color: #5b21b6 !important;
}
/* v10: profile editor and light-forum readability fixes */
html[data-theme="light"] .oc-profile-editor-shell {
background: rgba(255,255,255,.92) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-profile-editor-shell aside,
html[data-theme="light"] .oc-profile-editor-shell main,
html[data-theme="light"] .oc-profile-editor-shell [class*="bg-white/"],
html[data-theme="light"] .oc-profile-editor-shell [class*="bg-white\\/"],
html[data-theme="light"] .oc-profile-editor-shell [class*="bg-slate-950/"],
html[data-theme="light"] .oc-profile-editor-shell [class*="bg-slate-900/"] {
background: rgba(255,255,255,.86) !important;
color: #171322 !important;
border-color: rgba(109,40,217,.16) !important;
}
html[data-theme="light"] .oc-profile-editor-shell .relative.border-b,
html[data-theme="light"] .oc-profile-editor-shell .relative.border-b * {
color: #f8f7ff !important;
}
html[data-theme="light"] .oc-profile-editor-shell .relative.border-b p,
html[data-theme="light"] .oc-profile-editor-shell .relative.border-b .text-slate-300,
html[data-theme="light"] .oc-profile-editor-shell .relative.border-b .text-slate-200 {
color: #e8e2ff !important;
}
html[data-theme="light"] .oc-profile-editor-shell h2,
html[data-theme="light"] .oc-profile-editor-shell h3,
html[data-theme="light"] .oc-profile-editor-shell label,
html[data-theme="light"] .oc-profile-editor-shell .font-black,
html[data-theme="light"] .oc-profile-editor-shell .font-bold,
html[data-theme="light"] .oc-profile-editor-shell .profile-tab-button span:first-child span:first-child {
color: #171322 !important;
}
html[data-theme="light"] .oc-profile-editor-shell p,
html[data-theme="light"] .oc-profile-editor-shell small,
html[data-theme="light"] .oc-profile-editor-shell .text-slate-300,
html[data-theme="light"] .oc-profile-editor-shell .text-slate-400,
html[data-theme="light"] .oc-profile-editor-shell .text-slate-500,
html[data-theme="light"] .oc-profile-editor-shell .profile-tab-button span:first-child span:last-child {
color: #5f5870 !important;
}
html[data-theme="light"] .oc-profile-editor-shell input,
html[data-theme="light"] .oc-profile-editor-shell textarea,
html[data-theme="light"] .oc-profile-editor-shell select {
background: rgba(255,255,255,.98) !important;
color: #171322 !important;
border-color: rgba(139,92,246,.28) !important;
}
html[data-theme="light"] .oc-profile-editor-shell input::placeholder,
html[data-theme="light"] .oc-profile-editor-shell textarea::placeholder {
color: #8b819b !important;
}
html[data-theme="light"] .oc-profile-editor-shell .grid.grid-cols-3 .text-lg,
html[data-theme="light"] .oc-profile-editor-shell aside .text-lg,
html[data-theme="light"] .oc-profile-editor-shell aside .font-black {
color: #171322 !important;
}
html[data-theme="light"] .oc-profile-editor-shell aside .grid.grid-cols-3 > div,
html[data-theme="light"] .oc-profile-editor-shell .profile-tab-button {
background: rgba(250,247,255,.92) !important;
border-color: rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-profile-editor-shell .profile-tab-button.is-active {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
border-color: rgba(168,85,247,.35) !important;
}
html[data-theme="light"] .oc-profile-editor-shell .profile-tab-button.is-active span,
html[data-theme="light"] .oc-profile-editor-shell .profile-tab-button.is-active .block {
color: #fff !important;
}
html[data-theme="light"] .oc-profile-editor-shell .text-emerald-300,
html[data-theme="light"] .oc-profile-editor-shell .text-emerald-100 {
color: #7c3aed !important;
}
html[data-theme="light"] .oc-profile-editor-shell .bg-emerald-400,
html[data-theme="light"] .oc-profile-editor-shell .bg-emerald-300,
html[data-theme="light"] .oc-profile-editor-shell [class*="bg-emerald"] {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
color: #fff !important;
border-color: rgba(168,85,247,.28) !important;
}
html[data-theme="light"] .oc-profile-editor-shell .border-emerald-300\/25,
html[data-theme="light"] .oc-profile-editor-shell [class*="border-emerald"] {
border-color: rgba(139,92,246,.28) !important;
}
/* Forum light mode: remove purple slabs and make category/thread text readable. */
html[data-theme="light"] body main .grid.gap-4 a.group.rounded-\[1\.5rem\],
html[data-theme="light"] body main .grid.gap-4 a.group.rounded-\[1\.5rem\]:hover,
html[data-theme="light"] body main a[href^="/forums/"].group,
html[data-theme="light"] body main a[href^="/forums/"].group:hover,
html[data-theme="light"] body main a[href^="/thread/"].rounded-2xl,
html[data-theme="light"] body main a[href^="/thread/"].rounded-2xl:hover {
background: rgba(255,255,255,.9) !important;
color: #171322 !important;
border-color: rgba(139,92,246,.22) !important;
box-shadow: 0 14px 30px rgba(76,29,149,.06) !important;
}
html[data-theme="light"] body main .grid.gap-4 a.group.rounded-\[1\.5rem\] h3,
html[data-theme="light"] body main a[href^="/forums/"].group h3,
html[data-theme="light"] body main a[href^="/thread/"] .font-black,
html[data-theme="light"] body main aside h2,
html[data-theme="light"] body main .grid.gap-4 h2 {
color: #171322 !important;
}
html[data-theme="light"] body main .grid.gap-4 a.group.rounded-\[1\.5rem\] p,
html[data-theme="light"] body main a[href^="/forums/"].group p,
html[data-theme="light"] body main a[href^="/thread/"] .text-slate-500,
html[data-theme="light"] body main a[href^="/thread/"] .text-slate-400 {
color: #5f5870 !important;
}
html[data-theme="light"] body main a.group.rounded-\[1\.5rem\] [class*="bg-slate-950"],
html[data-theme="light"] body main a.group.rounded-\[1\.5rem\] [class*="bg-slate-900"],
html[data-theme="light"] body main a[href^="/forums/"].group [class*="bg-slate-950"],
html[data-theme="light"] body main a[href^="/thread/"] [class*="bg-slate-950"] {
background: rgba(246,242,255,.96) !important;
color: #171322 !important;
border-color: rgba(139,92,246,.16) !important;
}
html[data-theme="light"] body main a.group.rounded-\[1\.5rem\] [class*="bg-slate-950"] .text-white,
html[data-theme="light"] body main a[href^="/forums/"].group [class*="bg-slate-950"] .text-white,
html[data-theme="light"] body main a[href^="/thread/"] [class*="bg-slate-950"] .text-white {
color: #171322 !important;
}
/* Dark banner blocks should keep readable white text in light mode without bleaching normal white cards. */
html[data-theme="light"] main .bg-slate-950 > .relative h1,
html[data-theme="light"] main .bg-slate-950 > .relative h2,
html[data-theme="light"] main .bg-slate-950 > .relative p,
html[data-theme="light"] main .bg-slate-950 > .relative span,
html[data-theme="light"] main [class*="linear-gradient"] h1,
html[data-theme="light"] main [class*="linear-gradient"] h2 {
color: #f8f7ff !important;
}
/* v12: targeted forum/readability fixes without flattening the whole site */
.oc-forum-hero {
background:
radial-gradient(circle at 10% 0%, rgba(139, 92, 246, .20), transparent 34%),
radial-gradient(circle at 85% 10%, rgba(168, 85, 247, .16), transparent 38%),
linear-gradient(135deg, rgba(6, 8, 18, .98), rgba(17, 12, 34, .96) 55%, rgba(8, 10, 24, .98)) !important;
border-color: rgba(168, 85, 247, .24) !important;
box-shadow: 0 22px 48px rgba(15, 7, 35, .22) !important;
color: #f8f7ff !important;
}
.oc-forum-hero h1,
.oc-forum-hero h2,
.oc-forum-hero h3,
.oc-forum-hero .text-white {
color: #f8f7ff !important;
}
.oc-forum-hero p,
.oc-forum-hero .text-slate-400,
.oc-forum-hero .text-slate-300 {
color: #d9d2ef !important;
}
.oc-forum-hero a:not(.rounded-2xl),
.oc-forum-hero .text-emerald-300 {
color: #c084fc !important;
}
.oc-forum-hero .bg-emerald-400,
.oc-forum-hero a.bg-emerald-400,
.oc-forum-hero button.bg-emerald-400 {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important;
box-shadow: 0 12px 28px rgba(124, 58, 237, .28) !important;
}
html[data-theme="light"] .oc-forum-hero,
html[data-theme="dark"] .oc-forum-hero {
background:
radial-gradient(circle at 10% 0%, rgba(139, 92, 246, .22), transparent 34%),
radial-gradient(circle at 85% 10%, rgba(168, 85, 247, .18), transparent 38%),
linear-gradient(135deg, rgba(6, 8, 18, .98), rgba(17, 12, 34, .96) 55%, rgba(8, 10, 24, .98)) !important;
color: #f8f7ff !important;
}
html[data-theme="light"] .oc-forum-hero *,
html[data-theme="dark"] .oc-forum-hero * {
text-shadow: none !important;
}
html[data-theme="light"] .oc-forum-hero h1,
html[data-theme="light"] .oc-forum-hero h2,
html[data-theme="light"] .oc-forum-hero .text-white {
color: #f8f7ff !important;
}
html[data-theme="light"] .oc-forum-hero p,
html[data-theme="light"] .oc-forum-hero .text-slate-400,
html[data-theme="light"] .oc-forum-hero .text-slate-300,
html[data-theme="light"] .oc-forum-hero .text-slate-500 {
color: #d9d2ef !important;
}
/* Make forum admin/editor panels readable in light mode. */
html[data-theme="light"] main form[action^="/staff/forums"],
html[data-theme="light"] main form[action^="/staff/forums"] *,
html[data-theme="light"] main section#forum-reports,
html[data-theme="light"] main section#forum-reports *,
html[data-theme="light"] main .oc-edit-context,
html[data-theme="light"] main .oc-edit-context * {
text-shadow: none !important;
}
html[data-theme="light"] main form[action^="/staff/forums"],
html[data-theme="light"] main div:has(> h2):has(a[href^="/staff/forums?edit="]),
html[data-theme="light"] main section#forum-reports {
background: rgba(255,255,255,.92) !important;
border-color: rgba(139,92,246,.18) !important;
color: #171322 !important;
}
html[data-theme="light"] main form[action^="/staff/forums"] h2,
html[data-theme="light"] main div:has(> h2):has(a[href^="/staff/forums?edit="]) h2,
html[data-theme="light"] main section#forum-reports h2,
html[data-theme="light"] main form[action^="/staff/forums"] .font-black,
html[data-theme="light"] main div:has(> h2):has(a[href^="/staff/forums?edit="]) .font-black {
color: #171322 !important;
}
html[data-theme="light"] main form[action^="/staff/forums"] label,
html[data-theme="light"] main form[action^="/staff/forums"] span,
html[data-theme="light"] main form[action^="/staff/forums"] .text-slate-300,
html[data-theme="light"] main form[action^="/staff/forums"] .text-slate-400,
html[data-theme="light"] main form[action^="/staff/forums"] .text-slate-500,
html[data-theme="light"] main div:has(> h2):has(a[href^="/staff/forums?edit="]) .text-slate-500,
html[data-theme="light"] main section#forum-reports .text-slate-400,
html[data-theme="light"] main section#forum-reports .text-slate-300 {
color: #5f5870 !important;
}
html[data-theme="light"] main form[action^="/staff/forums"] input,
html[data-theme="light"] main form[action^="/staff/forums"] textarea,
html[data-theme="light"] main form[action^="/staff/forums"] select,
html[data-theme="light"] main section#forum-reports input,
html[data-theme="light"] main section#forum-reports textarea,
html[data-theme="light"] main section#forum-reports select {
background: #fff !important;
color: #171322 !important;
border-color: rgba(139,92,246,.24) !important;
}
html[data-theme="light"] main form[action^="/staff/forums"] input::placeholder,
html[data-theme="light"] main form[action^="/staff/forums"] textarea::placeholder {
color: #8b819b !important;
}
html[data-theme="light"] main form[action^="/staff/forums"] [class*="bg-slate-950"],
html[data-theme="light"] main div:has(> h2):has(a[href^="/staff/forums?edit="]) article,
html[data-theme="light"] main section#forum-reports article,
html[data-theme="light"] main section#forum-reports [class*="bg-slate-950"] {
background: rgba(250,247,255,.96) !important;
border-color: rgba(139,92,246,.18) !important;
color: #171322 !important;
}
html[data-theme="light"] main div:has(> h2):has(a[href^="/staff/forums?edit="]) article .text-white,
html[data-theme="light"] main section#forum-reports article .text-white {
color: #171322 !important;
}
html[data-theme="light"] .oc-edit-context {
background: rgba(139,92,246,.10) !important;
border-color: rgba(139,92,246,.25) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-edit-context .text-purple-200,
html[data-theme="light"] .oc-edit-context .text-white {
color: #5b21b6 !important;
}
html[data-theme="light"] .oc-edit-context .text-slate-300 {
color: #5f5870 !important;
}
/* Forum category/thread light mode: keep title and post content readable. */
html[data-theme="light"] main article.forum-thread-card {
background: #fff !important;
color: #171322 !important;
}
html[data-theme="light"] main article.forum-thread-card h2,
html[data-theme="light"] main article.forum-thread-card h2 a {
color: #6d28d9 !important;
}
html[data-theme="light"] main article.forum-thread-card p,
html[data-theme="light"] main article.forum-thread-card .text-slate-400,
html[data-theme="light"] main article.forum-thread-card .text-slate-500 {
color: #5f5870 !important;
}
html[data-theme="light"] main article.forum-thread-card .grid.min-w-36 > div {
background: rgba(246,242,255,.96) !important;
}
html[data-theme="light"] main article.forum-thread-card .grid.min-w-36 .text-white {
color: #171322 !important;
}
html[data-theme="light"] main article.mt-6.rounded-\[1\.5rem\],
html[data-theme="light"] main article.mt-6.rounded-\[1\.5rem\] * {
color: #171322 !important;
}
html[data-theme="light"] main article.mt-6.rounded-\[1\.5rem\] {
background: #fff !important;
border-color: rgba(139,92,246,.18) !important;
}
/* Purple buttons site-wide where old emerald utility classes are still present. */
main .bg-emerald-400,
main button.bg-emerald-400,
main a.bg-emerald-400,
html[data-theme="light"] main .bg-emerald-400,
html[data-theme="light"] main button.bg-emerald-400,
html[data-theme="light"] main a.bg-emerald-400 {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
color: #fff !important;
border-color: rgba(168,85,247,.28) !important;
}
/* v13: fix remaining light-mode washout on profile editor + forum admin/thread headers */
html[data-theme="light"] .oc-profile-editor-page,
html[data-theme="light"] .oc-profile-editor-page *:not(.bg-slate-950):not(.bg-slate-900):not(.bg-emerald-400):not(.bg-purple-500):not(.bg-purple-600) {
text-shadow: none !important;
}
html[data-theme="light"] .oc-profile-editor-page > .overflow-hidden {
background: rgba(255,255,255,.96) !important;
border-color: rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-profile-editor-page > .overflow-hidden > .relative,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b {
background:
radial-gradient(circle at 0% 0%, rgba(139,92,246,.22), transparent 36%),
radial-gradient(circle at 95% 10%, rgba(168,85,247,.16), transparent 34%),
linear-gradient(135deg, rgba(6,8,18,.98), rgba(17,12,34,.96) 55%, rgba(8,10,24,.98)) !important;
color: #f8f7ff !important;
}
html[data-theme="light"] .oc-profile-editor-page > .overflow-hidden > .relative h1,
html[data-theme="light"] .oc-profile-editor-page > .overflow-hidden > .relative p,
html[data-theme="light"] .oc-profile-editor-page > .overflow-hidden > .relative a,
html[data-theme="light"] .oc-profile-editor-page > .overflow-hidden > .relative span,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b h1,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b p,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b a,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b span {
color: #f8f7ff !important;
}
html[data-theme="light"] .oc-profile-editor-page aside,
html[data-theme="light"] .oc-profile-editor-page main {
background: rgba(255,255,255,.94) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-profile-editor-page aside > div,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel > div,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel section,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel article {
background: rgba(255,255,255,.98) !important;
border-color: rgba(139,92,246,.18) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-profile-editor-page h2,
html[data-theme="light"] .oc-profile-editor-page h3,
html[data-theme="light"] .oc-profile-editor-page h4,
html[data-theme="light"] .oc-profile-editor-page .font-black,
html[data-theme="light"] .oc-profile-editor-page .text-white,
html[data-theme="light"] .oc-profile-editor-page label,
html[data-theme="light"] .oc-profile-editor-page label span,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button .block:first-child,
html[data-theme="light"] .oc-profile-editor-page [class*="text-slate-100"],
html[data-theme="light"] .oc-profile-editor-page [class*="text-slate-200"],
html[data-theme="light"] .oc-profile-editor-page [class*="text-slate-300"] {
color: #171322 !important;
}
html[data-theme="light"] .oc-profile-editor-page p,
html[data-theme="light"] .oc-profile-editor-page small,
html[data-theme="light"] .oc-profile-editor-page .text-sm,
html[data-theme="light"] .oc-profile-editor-page .text-xs,
html[data-theme="light"] .oc-profile-editor-page [class*="text-slate-400"],
html[data-theme="light"] .oc-profile-editor-page [class*="text-slate-500"],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button .block:last-child {
color: #5f5870 !important;
}
html[data-theme="light"] .oc-profile-editor-page input,
html[data-theme="light"] .oc-profile-editor-page textarea,
html[data-theme="light"] .oc-profile-editor-page select {
background: #fff !important;
color: #171322 !important;
border-color: rgba(139,92,246,.28) !important;
}
html[data-theme="light"] .oc-profile-editor-page input::placeholder,
html[data-theme="light"] .oc-profile-editor-page textarea::placeholder {
color: #80768f !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button {
background: rgba(255,255,255,.98) !important;
border-color: rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button.is-active {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
border-color: rgba(168,85,247,.35) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button.is-active,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button.is-active * {
color: #fff !important;
}
html[data-theme="light"] .oc-profile-editor-page .rounded-2xl.bg-slate-900\/80,
html[data-theme="light"] .oc-profile-editor-page [class*="bg-slate-900"] {
background: rgba(246,242,255,.96) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-profile-editor-page .rounded-2xl.bg-slate-900\/80 .text-white,
html[data-theme="light"] .oc-profile-editor-page [class*="bg-slate-900"] .text-white {
color: #171322 !important;
}
/* Force forum/staff dark banners to stay dark in every theme. */
.oc-forum-hero,
html[data-theme="light"] .oc-forum-hero,
html[data-theme="dark"] .oc-forum-hero {
background:
radial-gradient(circle at 8% 0%, rgba(139,92,246,.24), transparent 34%),
radial-gradient(circle at 86% 10%, rgba(168,85,247,.18), transparent 38%),
linear-gradient(135deg, rgba(6,8,18,.99), rgba(17,12,34,.97) 58%, rgba(8,10,24,.99)) !important;
border-color: rgba(168,85,247,.28) !important;
color: #f8f7ff !important;
}
.oc-forum-hero h1,
.oc-forum-hero h2,
.oc-forum-hero p,
.oc-forum-hero a,
html[data-theme="light"] .oc-forum-hero h1,
html[data-theme="light"] .oc-forum-hero h2,
html[data-theme="light"] .oc-forum-hero p,
html[data-theme="light"] .oc-forum-hero a,
html[data-theme="light"] .oc-forum-hero .text-white,
html[data-theme="light"] .oc-forum-hero [class*="text-slate"] {
color: #f8f7ff !important;
opacity: 1 !important;
text-shadow: none !important;
}
.oc-forum-hero p,
html[data-theme="light"] .oc-forum-hero p {
color: #d9d2ef !important;
}
/* Forum admin page readability */
html[data-theme="light"] .oc-forum-admin-page > .grid > form,
html[data-theme="light"] .oc-forum-admin-page > .grid > div,
html[data-theme="light"] .oc-forum-admin-page #forum-reports {
background: rgba(255,255,255,.96) !important;
border-color: rgba(139,92,246,.18) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-forum-admin-page h2,
html[data-theme="light"] .oc-forum-admin-page h3,
html[data-theme="light"] .oc-forum-admin-page .font-black,
html[data-theme="light"] .oc-forum-admin-page .text-white {
color: #171322 !important;
}
html[data-theme="light"] .oc-forum-admin-page label,
html[data-theme="light"] .oc-forum-admin-page label span,
html[data-theme="light"] .oc-forum-admin-page [class*="text-slate-300"],
html[data-theme="light"] .oc-forum-admin-page [class*="text-slate-400"],
html[data-theme="light"] .oc-forum-admin-page [class*="text-slate-500"] {
color: #5f5870 !important;
}
html[data-theme="light"] .oc-forum-admin-page article,
html[data-theme="light"] .oc-forum-admin-page [class*="bg-slate-950"],
html[data-theme="light"] .oc-forum-admin-page [class*="bg-slate-900"] {
background: rgba(250,247,255,.98) !important;
border-color: rgba(139,92,246,.18) !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-forum-admin-page input,
html[data-theme="light"] .oc-forum-admin-page textarea,
html[data-theme="light"] .oc-forum-admin-page select {
background: #fff !important;
color: #171322 !important;
border-color: rgba(139,92,246,.25) !important;
}
html[data-theme="light"] .oc-forum-admin-page button,
html[data-theme="light"] .oc-forum-admin-page a.rounded-xl {
color: #171322 !important;
}
html[data-theme="light"] .oc-forum-admin-page button.bg-emerald-400,
html[data-theme="light"] .oc-forum-admin-page a.bg-emerald-400 {
color: #fff !important;
}
html[data-theme="light"] .oc-forum-admin-page .oc-edit-context,
html[data-theme="light"] .oc-forum-admin-page .oc-edit-context * {
color: #171322 !important;
}
html[data-theme="light"] .oc-forum-admin-page .oc-edit-context {
background: rgba(139,92,246,.10) !important;
border-color: rgba(139,92,246,.28) !important;
}
/* v14: make profile badges readable and colorful in light mode */
.oc-profile-badge {
position: relative;
overflow: hidden;
border-color: rgba(168, 85, 247, 0.42) !important;
background:
radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.30), transparent 26%),
linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(168, 85, 247, 0.88), rgba(79, 70, 229, 0.92)) !important;
color: #ffffff !important;
box-shadow: 0 16px 30px rgba(124, 58, 237, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.oc-profile-badge span,
.oc-profile-badge * {
color: #ffffff !important;
opacity: 1 !important;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
}
.oc-profile-badge span:first-child {
filter: saturate(1.35) contrast(1.08);
text-shadow: none;
}
html[data-theme="light"] .tab-panel[data-tab-panel="badges"] {
background: rgba(255, 255, 255, 0.88) !important;
border-color: rgba(196, 181, 253, 0.65) !important;
}
html[data-theme="light"] .tab-panel[data-tab-panel="badges"] > h2,
html[data-theme="light"] .tab-panel[data-tab-panel="badges"] h3 {
color: #161225 !important;
}
html[data-theme="light"] .tab-panel[data-tab-panel="badges"] > p {
color: #5f5874 !important;
}
html[data-theme="light"] .tab-panel[data-tab-panel="badges"] .rounded-2xl.bg-white\/\[0\.04\] {
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid rgba(221, 214, 254, 0.85) !important;
}
html[data-theme="light"] .oc-profile-badge {
border-color: rgba(124, 58, 237, 0.50) !important;
background:
radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
linear-gradient(135deg, #7c3aed 0%, #a855f7 48%, #ec4899 100%) !important;
color: #ffffff !important;
box-shadow: 0 14px 28px rgba(124, 58, 237, 0.28) !important;
}
html[data-theme="light"] .oc-profile-badge span,
html[data-theme="light"] .oc-profile-badge * {
color: #ffffff !important;
opacity: 1 !important;
}
/* v15: OC role/verification badge icon color variants for bot-synced badge keys */
.oc-profile-badge[data-badge-key="web_team"],
.oc-profile-badge[data-badge-key="web_staff"] {
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg, #2563eb 0%, #7c3aed 48%, #06b6d4 100%) !important;
border-color: rgba(96,165,250,.65) !important;
}
.oc-profile-badge[data-badge-key="reports_team"],
.oc-profile-badge[data-badge-key="reports_staff"] {
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg, #dc2626 0%, #f97316 48%, #a855f7 100%) !important;
border-color: rgba(251,146,60,.7) !important;
}
.oc-profile-badge[data-badge-key="verified_owner"],
.oc-profile-badge[data-badge-key="verified_server_owner"] {
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg, #b45309 0%, #f59e0b 45%, #7c3aed 100%) !important;
border-color: rgba(245,158,11,.72) !important;
}
.oc-profile-badge[data-badge-key="verified_provider"] {
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg, #059669 0%, #10b981 42%, #7c3aed 100%) !important;
border-color: rgba(16,185,129,.72) !important;
}
.oc-profile-badge[data-badge-key="verified_developer"] {
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg, #4f46e5 0%, #8b5cf6 42%, #22d3ee 100%) !important;
border-color: rgba(34,211,238,.72) !important;
}
.oc-profile-badge[data-badge-key="oc_staff"],
.oc-profile-badge[data-badge-key="staff"] {
background:
radial-gradient(circle at 14% 18%, rgba(255,255,255,.42), transparent 28%),
linear-gradient(135deg, #581c87 0%, #7c3aed 48%, #ec4899 100%) !important;
border-color: rgba(216,180,254,.72) !important;
}
html[data-theme="light"] .oc-profile-badge[data-badge-key="web_team"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="web_staff"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="reports_team"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="reports_staff"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="verified_owner"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="verified_server_owner"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="verified_provider"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="verified_developer"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="oc_staff"],
html[data-theme="light"] .oc-profile-badge[data-badge-key="staff"] {
color: #fff !important;
box-shadow: 0 14px 30px rgba(88,28,135,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
/* v16: public verification markers/checkmarks */
.oc-verify-row {
display: inline-flex;
align-items: center;
gap: 0.35rem;
vertical-align: middle;
}
.oc-verify-row-sm {
gap: 0.25rem;
}
.oc-verify-mark {
position: relative;
display: inline-grid;
place-items: center;
width: 1.55rem;
height: 1.55rem;
flex: 0 0 auto;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.28);
color: #fff !important;
font-size: 0.92rem;
font-weight: 950;
line-height: 1;
box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.34);
cursor: help;
}
.oc-verify-row-sm .oc-verify-mark {
width: 1.2rem;
height: 1.2rem;
font-size: 0.72rem;
}
.oc-verify-mark span {
color: #fff !important;
opacity: 1 !important;
text-shadow: 0 1px 8px rgba(0,0,0,.30);
}
.oc-verify-owner {
background: linear-gradient(135deg, #d97706, #f59e0b 48%, #7c3aed) !important;
border-color: rgba(251,191,36,.72) !important;
}
.oc-verify-provider {
background: linear-gradient(135deg, #059669, #10b981 46%, #8b5cf6) !important;
border-color: rgba(52,211,153,.72) !important;
}
.oc-verify-developer {
background: linear-gradient(135deg, #2563eb, #8b5cf6 48%, #22d3ee) !important;
border-color: rgba(96,165,250,.72) !important;
}
.oc-verify-web {
background: linear-gradient(135deg, #0ea5e9, #7c3aed 50%, #06b6d4) !important;
border-color: rgba(56,189,248,.72) !important;
}
.oc-verify-reports {
background: linear-gradient(135deg, #dc2626, #f97316 48%, #a855f7) !important;
border-color: rgba(251,146,60,.75) !important;
}
.oc-verify-staff {
background: linear-gradient(135deg, #312e81, #7c3aed 48%, #ec4899) !important;
border-color: rgba(216,180,254,.75) !important;
}
html[data-theme="light"] .oc-verify-mark {
color: #fff !important;
box-shadow: 0 10px 20px rgba(88,28,135,.22), inset 0 1px 0 rgba(255,255,255,.36) !important;
}
/* v18: stop light-mode washout on homepage CTA and forums. Put this last on purpose. */
.oc-discord-cta-modern,
html[data-theme="light"] .oc-discord-cta-modern,
html[data-theme="dark"] .oc-discord-cta-modern {
background:
radial-gradient(circle at 16% 20%, rgba(168,85,247,.42), transparent 22rem),
linear-gradient(135deg, rgba(10,10,24,.98), rgba(29,18,58,.96) 58%, rgba(76,29,149,.88)) !important;
border: 1px solid rgba(168,85,247,.32) !important;
box-shadow: 0 24px 70px rgba(76,29,149,.20) !important;
}
.oc-discord-cta-modern h2,
.oc-discord-cta-modern p,
html[data-theme="light"] .oc-discord-cta-modern h2,
html[data-theme="light"] .oc-discord-cta-modern p,
html[data-theme="light"] .oc-discord-cta-modern div,
html[data-theme="dark"] .oc-discord-cta-modern h2,
html[data-theme="dark"] .oc-discord-cta-modern p {
color: #f8f7ff !important;
opacity: 1 !important;
text-shadow: 0 1px 14px rgba(0,0,0,.30) !important;
}
html[data-theme="light"] .oc-discord-cta-modern p,
html[data-theme="dark"] .oc-discord-cta-modern p { color: #d9d2ef !important; }
html[data-theme="light"] .oc-discord-cta-modern .oc-btn-secondary {
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.28) !important;
color: #fff !important;
}
/* Forum hero/readability: force the category/thread/admin headers to stay dark and readable in all modes. */
main .oc-forum-hero,
html[data-theme="light"] main .oc-forum-hero,
html[data-theme="dark"] main .oc-forum-hero,
.oc-forum-admin-page > .oc-forum-hero,
html[data-theme="light"] .oc-forum-admin-page > .oc-forum-hero {
background:
linear-gradient(90deg, rgba(6,8,18,.98) 0%, rgba(8,10,24,.94) 44%, rgba(30,18,60,.90) 100%),
radial-gradient(circle at 12% 5%, rgba(168,85,247,.24), transparent 30rem) !important;
border-color: rgba(168,85,247,.30) !important;
color: #f8f7ff !important;
box-shadow: 0 24px 70px rgba(20,12,36,.24) !important;
}
main .oc-forum-hero h1,
main .oc-forum-hero h2,
main .oc-forum-hero h3,
main .oc-forum-hero p,
main .oc-forum-hero a,
main .oc-forum-hero span,
html[data-theme="light"] main .oc-forum-hero h1,
html[data-theme="light"] main .oc-forum-hero h2,
html[data-theme="light"] main .oc-forum-hero h3,
html[data-theme="light"] main .oc-forum-hero p,
html[data-theme="light"] main .oc-forum-hero a,
html[data-theme="light"] main .oc-forum-hero span,
html[data-theme="light"] main .oc-forum-hero .text-white,
html[data-theme="light"] main .oc-forum-hero [class*="text-slate"] {
opacity: 1 !important;
text-shadow: none !important;
}
main .oc-forum-hero h1,
main .oc-forum-hero h2,
main .oc-forum-hero .text-white,
html[data-theme="light"] main .oc-forum-hero h1,
html[data-theme="light"] main .oc-forum-hero h2,
html[data-theme="light"] main .oc-forum-hero .text-white {
color: #ffffff !important;
}
main .oc-forum-hero p,
html[data-theme="light"] main .oc-forum-hero p,
html[data-theme="light"] main .oc-forum-hero [class*="text-slate-400"] {
color: #d9d2ef !important;
}
main .oc-forum-hero a:not(.bg-emerald-400),
html[data-theme="light"] main .oc-forum-hero a:not(.bg-emerald-400) {
color: #c084fc !important;
}
/* Pinned/locked/removed status pills must be visible, especially in light mode. */
.oc-status-pill,
html[data-theme="light"] .oc-status-pill,
html[data-theme="dark"] .oc-status-pill {
opacity: 1 !important;
text-shadow: none !important;
box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}
.oc-status-pinned,
html[data-theme="light"] .oc-status-pinned {
color: #7c2d12 !important;
background: #fff7ed !important;
border-color: #fdba74 !important;
}
.oc-status-locked,
html[data-theme="light"] .oc-status-locked {
color: #7f1d1d !important;
background: #fff1f2 !important;
border-color: #fda4af !important;
}
.oc-status-removed,
html[data-theme="light"] .oc-status-removed {
color: #334155 !important;
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
}
html[data-theme="dark"] .oc-status-pinned { color: #fde68a !important; background: rgba(245,158,11,.16) !important; border-color: rgba(245,158,11,.38) !important; }
html[data-theme="dark"] .oc-status-locked { color: #fecdd3 !important; background: rgba(244,63,94,.16) !important; border-color: rgba(244,63,94,.38) !important; }
html[data-theme="dark"] .oc-status-removed { color: #e2e8f0 !important; background: rgba(148,163,184,.14) !important; border-color: rgba(148,163,184,.34) !important; }
/* Forum cards/lists in light mode: white surfaces, dark text, purple links. */
html[data-theme="light"] main .forum-thread-card,
html[data-theme="light"] main article.forum-thread-card,
html[data-theme="light"] main .rounded-\[2rem\]:has(.forum-thread-card),
html[data-theme="light"] main form[action^="/forums"] {
background: rgba(255,255,255,.96) !important;
border-color: rgba(139,92,246,.20) !important;
color: #171322 !important;
}
html[data-theme="light"] main .forum-thread-card h2,
html[data-theme="light"] main .forum-thread-card h2 a,
html[data-theme="light"] main .forum-thread-card .font-black,
html[data-theme="light"] main .forum-thread-card .text-white {
color: #171322 !important;
}
html[data-theme="light"] main .forum-thread-card h2 a { color: #6d28d9 !important; }
html[data-theme="light"] main .forum-thread-card p,
html[data-theme="light"] main .forum-thread-card .text-slate-400,
html[data-theme="light"] main .forum-thread-card .text-slate-500,
html[data-theme="light"] main .forum-thread-card .text-xs {
color: #5f5870 !important;
opacity: 1 !important;
}
html[data-theme="light"] main form[action^="/forums"] label span,
html[data-theme="light"] main form[action^="/forums"] .text-slate-300,
html[data-theme="light"] main form[action^="/forums"] .text-slate-400 {
color: #4f485f !important;
}
html[data-theme="light"] main form[action^="/forums"] input,
html[data-theme="light"] main form[action^="/forums"] select {
background: #fff !important;
color: #171322 !important;
border-color: rgba(139,92,246,.24) !important;
}
/* Thread detail page in light mode: preserve readable title/meta/body. */
html[data-theme="light"] main article:has(.oc-verify-row),
html[data-theme="light"] main article:has(.oc-verify-mark) {
background: rgba(255,255,255,.96) !important;
color: #171322 !important;
}
html[data-theme="light"] main article:has(.oc-verify-row) h1,
html[data-theme="light"] main article:has(.oc-verify-row) h2,
html[data-theme="light"] main article:has(.oc-verify-mark) h1,
html[data-theme="light"] main article:has(.oc-verify-mark) h2 {
color: #171322 !important;
}
html[data-theme="light"] main article:has(.oc-verify-row) .text-slate-400,
html[data-theme="light"] main article:has(.oc-verify-mark) .text-slate-400,
html[data-theme="light"] main article:has(.oc-verify-row) .text-slate-500,
html[data-theme="light"] main article:has(.oc-verify-mark) .text-slate-500 {
color: #6a6278 !important;
}
/* v21: forum light mode rebuild + clickable forum authors */
.oc-forum-author-link {
color: inherit !important;
font-weight: 800 !important;
text-decoration: none !important;
}
.oc-forum-author-link:hover {
color: #a855f7 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
html[data-theme="light"] .oc-forum-compose-card,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero {
background: linear-gradient(135deg, #ffffff 0%, #faf7ff 58%, #f2ecff 100%) !important;
border: 1px solid rgba(139,92,246,.22) !important;
color: #181426 !important;
box-shadow: 0 18px 55px rgba(88, 58, 140, .10) !important;
}
html[data-theme="light"] .oc-forum-compose-card h1,
html[data-theme="light"] .oc-forum-compose-card h2,
html[data-theme="light"] .oc-forum-compose-card label,
html[data-theme="light"] .oc-forum-compose-card span,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero h1,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero h2,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero .text-white {
color: #181426 !important;
opacity: 1 !important;
text-shadow: none !important;
}
html[data-theme="light"] .oc-forum-compose-card p,
html[data-theme="light"] .oc-forum-compose-card .text-slate-400,
html[data-theme="light"] .oc-forum-compose-card .text-slate-300,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero .text-slate-400,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero .text-slate-500,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero p {
color: #635b73 !important;
opacity: 1 !important;
text-shadow: none !important;
}
html[data-theme="light"] .oc-forum-compose-card a,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero a {
color: #7c3aed !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-forum-compose-card input,
html[data-theme="light"] .oc-forum-compose-card textarea,
html[data-theme="light"] .oc-forum-compose-card select,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero input,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero textarea,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero select {
background: #fff !important;
color: #181426 !important;
border-color: rgba(139,92,246,.26) !important;
}
html[data-theme="light"] .oc-forum-compose-card input::placeholder,
html[data-theme="light"] .oc-forum-compose-card textarea::placeholder,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero input::placeholder,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero textarea::placeholder {
color: #817894 !important;
}
html[data-theme="light"] .oc-thread-body,
html[data-theme="light"] .oc-reply-card,
html[data-theme="light"] .oc-reply-form,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero article,
html[data-theme="light"] .oc-forum-thread-page .oc-forum-hero details {
background: #ffffff !important;
color: #181426 !important;
border-color: rgba(139,92,246,.22) !important;
box-shadow: 0 12px 30px rgba(88,58,140,.08) !important;
}
html[data-theme="light"] .oc-thread-body *,
html[data-theme="light"] .oc-reply-card *,
html[data-theme="light"] .oc-reply-form * {
opacity: 1 !important;
text-shadow: none !important;
}
html[data-theme="light"] .oc-thread-body,
html[data-theme="light"] .oc-thread-body p,
html[data-theme="light"] .oc-thread-body div,
html[data-theme="light"] .oc-reply-card,
html[data-theme="light"] .oc-reply-card p,
html[data-theme="light"] .oc-reply-card div {
color: #181426 !important;
}
html[data-theme="light"] .oc-reply-card .text-slate-500,
html[data-theme="light"] .oc-reply-card .text-slate-400,
html[data-theme="light"] .oc-reply-form .text-slate-500,
html[data-theme="light"] .oc-reply-form .text-slate-400 {
color: #6b6478 !important;
}
html[data-theme="light"] .oc-forum-thread-page h2,
html[data-theme="light"] .oc-forum-thread-page > .grid h2,
html[data-theme="light"] .oc-forum-thread-page #replies > h2 {
color: #181426 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-thread-actions details,
html[data-theme="light"] .oc-thread-actions input,
html[data-theme="light"] .oc-thread-actions button,
html[data-theme="light"] .oc-reply-card details,
html[data-theme="light"] .oc-reply-card input,
html[data-theme="light"] .oc-reply-card button {
background: #fff !important;
color: #181426 !important;
border-color: rgba(139,92,246,.22) !important;
}
html[data-theme="light"] .oc-thread-actions button.bg-emerald-400,
html[data-theme="light"] .oc-thread-actions button[class*="bg-emerald"],
html[data-theme="light"] .oc-reply-form button.bg-emerald-400,
html[data-theme="light"] .oc-reply-form button[class*="bg-emerald"] {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
color: #fff !important;
border-color: rgba(124,58,237,.55) !important;
box-shadow: 0 12px 26px rgba(124,58,237,.22) !important;
}
html[data-theme="light"] button:disabled,
html[data-theme="light"] .oc-thread-actions button[disabled] {
background: #f3eefc !important;
color: #8b82a0 !important;
border-color: rgba(139,92,246,.18) !important;
opacity: .75 !important;
}
html[data-theme="dark"] .oc-forum-author-link { color: #d8ccff !important; }
html[data-theme="dark"] .oc-forum-author-link:hover { color: #fff !important; }
/* v22: rebuild forum light mode instead of forcing dark cards into light theme. */
html[data-theme="light"] .oc-forum-hero,
html[data-theme="light"] .oc-forum-compose-card {
background: linear-gradient(135deg, #ffffff 0%, #fbf8ff 58%, #f4efff 100%) !important;
color: #171322 !important;
border: 1px solid rgba(139, 92, 246, .22) !important;
box-shadow: 0 18px 55px rgba(88, 58, 140, .10) !important;
}
html[data-theme="light"] .oc-forum-hero *,
html[data-theme="light"] .oc-forum-compose-card * {
text-shadow: none !important;
}
html[data-theme="light"] .oc-forum-hero h1,
html[data-theme="light"] .oc-forum-hero h2,
html[data-theme="light"] .oc-forum-hero h3,
html[data-theme="light"] .oc-forum-compose-card h1,
html[data-theme="light"] .oc-forum-compose-card h2,
html[data-theme="light"] .oc-forum-compose-card h3,
html[data-theme="light"] .oc-forum-compose-card label,
html[data-theme="light"] .oc-forum-compose-card label span {
color: #171322 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-forum-hero p,
html[data-theme="light"] .oc-forum-compose-card p,
html[data-theme="light"] .oc-forum-hero .text-slate-300,
html[data-theme="light"] .oc-forum-hero .text-slate-400,
html[data-theme="light"] .oc-forum-hero .text-slate-500,
html[data-theme="light"] .oc-forum-compose-card .text-slate-300,
html[data-theme="light"] .oc-forum-compose-card .text-slate-400,
html[data-theme="light"] .oc-forum-compose-card .text-slate-500 {
color: #625a73 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-forum-hero a,
html[data-theme="light"] .oc-forum-compose-card a {
color: #7c3aed !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-forum-hero .oc-forum-author-link,
html[data-theme="light"] .oc-forum-compose-card .oc-forum-author-link {
color: #7c3aed !important;
}
html[data-theme="light"] .oc-thread-body {
background: #ffffff !important;
color: #181426 !important;
border: 1px solid rgba(139, 92, 246, .20) !important;
box-shadow: 0 12px 30px rgba(88,58,140,.08) !important;
}
html[data-theme="light"] .oc-thread-body,
html[data-theme="light"] .oc-thread-body *,
html[data-theme="light"] .oc-thread-body p,
html[data-theme="light"] .oc-thread-body div,
html[data-theme="light"] .oc-thread-body li,
html[data-theme="light"] .oc-thread-body span {
color: #181426 !important;
opacity: 1 !important;
text-shadow: none !important;
}
html[data-theme="light"] .oc-thread-body a {
color: #7c3aed !important;
font-weight: 800 !important;
}
html[data-theme="light"] .oc-thread-actions form,
html[data-theme="light"] .oc-thread-actions details {
background: transparent !important;
border-color: transparent !important;
}
html[data-theme="light"] .oc-thread-actions input,
html[data-theme="light"] .oc-thread-actions select,
html[data-theme="light"] .oc-thread-actions textarea,
html[data-theme="light"] .oc-reply-card input,
html[data-theme="light"] .oc-reply-card select,
html[data-theme="light"] .oc-reply-card textarea {
background: #ffffff !important;
color: #181426 !important;
border: 1px solid rgba(139,92,246,.24) !important;
}
html[data-theme="light"] .oc-thread-actions button,
html[data-theme="light"] .oc-thread-actions summary,
html[data-theme="light"] .oc-reply-card button,
html[data-theme="light"] .oc-reply-card summary {
color: #181426 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-thread-actions button.bg-emerald-400,
html[data-theme="light"] .oc-thread-actions button[class*="bg-emerald"],
html[data-theme="light"] .oc-reply-form button.bg-emerald-400,
html[data-theme="light"] .oc-reply-form button[class*="bg-emerald"] {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important;
border: 1px solid rgba(124,58,237,.45) !important;
box-shadow: 0 14px 30px rgba(124,58,237,.22) !important;
}
html[data-theme="light"] .oc-thread-actions button[disabled],
html[data-theme="light"] .oc-thread-actions button:disabled {
background: #f2ecff !important;
color: #8e83a4 !important;
border: 1px solid rgba(139,92,246,.18) !important;
opacity: .75 !important;
box-shadow: none !important;
}
html[data-theme="light"] .oc-reply-card,
html[data-theme="light"] .oc-reply-form {
background: #ffffff !important;
color: #181426 !important;
border: 1px solid rgba(139,92,246,.20) !important;
box-shadow: 0 12px 30px rgba(88,58,140,.08) !important;
}
html[data-theme="light"] .oc-reply-card *,
html[data-theme="light"] .oc-reply-form * {
text-shadow: none !important;
}
html[data-theme="light"] .oc-reply-card,
html[data-theme="light"] .oc-reply-card div,
html[data-theme="light"] .oc-reply-card p,
html[data-theme="light"] .oc-reply-card span,
html[data-theme="light"] .oc-reply-form h2,
html[data-theme="light"] .oc-reply-form label,
html[data-theme="light"] .oc-reply-form span {
color: #181426 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-reply-card .text-slate-400,
html[data-theme="light"] .oc-reply-card .text-slate-500,
html[data-theme="light"] .oc-reply-form .text-slate-400,
html[data-theme="light"] .oc-reply-form .text-slate-500 {
color: #625a73 !important;
}
html[data-theme="light"] .oc-forum-thread-page #replies > h2,
html[data-theme="light"] .oc-forum-thread-page > .grid > h2,
html[data-theme="light"] .oc-forum-thread-page h2 {
color: #171322 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-forum-editor,
html[data-theme="light"] .oc-reply-form .oc-forum-editor,
html[data-theme="light"] .oc-forum-compose-card .oc-forum-editor {
background: #fff !important;
border-color: rgba(139,92,246,.24) !important;
}
html[data-theme="light"] .oc-forum-editor-toolbar,
html[data-theme="light"] .oc-reply-form .oc-forum-editor-toolbar,
html[data-theme="light"] .oc-forum-compose-card .oc-forum-editor-toolbar {
background: linear-gradient(135deg,#f8f3ff,#efe7ff) !important;
border-bottom-color: rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-forum-editor-toolbar button {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
color: #fff !important;
border-color: rgba(124,58,237,.36) !important;
}
html[data-theme="light"] .oc-forum-editor-textarea {
background: #fff !important;
color: #171322 !important;
}
html[data-theme="light"] .oc-forum-editor-help {
color: #625a73 !important;
}
html[data-theme="light"] .forum-status-pill,
html[data-theme="light"] .oc-status-pill,
html[data-theme="light"] .rounded-full.border.border-amber-400\/30,
html[data-theme="light"] .rounded-full.border.border-red-400\/30 {
color: #5f3b00 !important;
background: #fff7ed !important;
border-color: rgba(245,158,11,.45) !important;
opacity: 1 !important;
}
/* v26: Partner ads access + readable partner ad page. */
.oc-partner-page {
color: var(--text) !important;
}
.oc-partner-hero {
background: linear-gradient(135deg, rgba(12, 8, 28, .98), rgba(32, 14, 64, .96)) !important;
border-color: rgba(167, 139, 250, .24) !important;
color: #fff !important;
box-shadow: 0 22px 60px rgba(88, 28, 135, .18) !important;
}
.oc-partner-hero h1 {
color: #fff !important;
opacity: 1 !important;
text-shadow: none !important;
}
.oc-partner-hero p {
color: #ded6ff !important;
opacity: 1 !important;
text-shadow: none !important;
}
.oc-partner-kicker {
background: rgba(139, 92, 246, .18) !important;
border-color: rgba(196, 181, 253, .38) !important;
color: #d9ccff !important;
}
html[data-theme="light"] .oc-partner-page .text-white,
html[data-theme="light"] .oc-partner-page .text-slate-100,
html[data-theme="light"] .oc-partner-page .text-slate-200 {
color: #181426 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-partner-page .text-slate-300,
html[data-theme="light"] .oc-partner-page .text-slate-400,
html[data-theme="light"] .oc-partner-page .text-slate-500 {
color: #625a73 !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-partner-page .bg-white\/\[0\.04\],
html[data-theme="light"] .oc-partner-page .bg-slate-950\/60,
html[data-theme="light"] .oc-partner-page .bg-slate-950\/70,
html[data-theme="light"] .oc-partner-page .bg-slate-950\/80 {
background: rgba(255,255,255,.92) !important;
border-color: rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-partner-page input,
html[data-theme="light"] .oc-partner-page textarea,
html[data-theme="light"] .oc-partner-page select {
background: #fff !important;
color: #181426 !important;
border-color: rgba(139,92,246,.24) !important;
}
html[data-theme="light"] .oc-partner-page input::placeholder,
html[data-theme="light"] .oc-partner-page textarea::placeholder {
color: #7c728f !important;
opacity: 1 !important;
}
html[data-theme="light"] .oc-partner-page button,
html[data-theme="light"] .oc-partner-page a[class*="bg-emerald"],
html[data-theme="light"] .oc-partner-page .bg-emerald-400 {
background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
color: #fff !important;
}
html[data-theme="light"] .oc-partner-hero {
background: linear-gradient(135deg, #ffffff 0%, #fbf8ff 55%, #f2ecff 100%) !important;
border-color: rgba(139,92,246,.20) !important;
color: #181426 !important;
box-shadow: 0 20px 55px rgba(88,58,140,.10) !important;
}
html[data-theme="light"] .oc-partner-hero h1 {
color: #181426 !important;
}
html[data-theme="light"] .oc-partner-hero p {
color: #564d68 !important;
}
html[data-theme="light"] .oc-partner-kicker {
background: rgba(139,92,246,.10) !important;
border-color: rgba(139,92,246,.26) !important;
color: #6d28d9 !important;
}
html[data-theme="light"] .oc-partner-page .border-white\/10,
html[data-theme="light"] .oc-partner-page .border-white\/5 {
border-color: rgba(139,92,246,.16) !important;
}
/* v27 Badge Catalog */
.oc-badge-page {
display: grid;
gap: 1.4rem;
padding: 1.5rem 0 3rem;
}
.oc-badge-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
gap: 1.25rem;
align-items: stretch;
overflow: hidden;
border: 1px solid rgba(199, 181, 255, .18);
border-radius: 2rem;
padding: clamp(1.4rem, 3vw, 2.4rem);
background:
radial-gradient(circle at 15% 20%, rgba(168, 85, 247, .36), transparent 34%),
radial-gradient(circle at 82% 18%, rgba(79, 70, 229, .28), transparent 32%),
linear-gradient(135deg, #130b26 0%, #21103f 52%, #0e0820 100%);
color: #fff;
box-shadow: 0 24px 70px rgba(39, 21, 82, .28);
}
.oc-badge-kicker {
display: inline-flex;
width: fit-content;
margin: 0 0 .75rem;
border: 1px solid rgba(216, 201, 255, .26);
border-radius: 999px;
padding: .38rem .7rem;
background: rgba(255,255,255,.08);
color: #e8ddff;
font-size: .74rem;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.oc-badge-hero h1 {
margin: 0;
color: #fff;
font-size: clamp(2.2rem, 6vw, 4.7rem);
line-height: .92;
letter-spacing: -.055em;
font-weight: 1000;
}
.oc-badge-hero p {
max-width: 52rem;
margin: 1rem 0 0;
color: #d9ccff;
font-size: 1rem;
line-height: 1.75;
font-weight: 650;
}
.oc-badge-hero-card {
display: grid;
align-content: center;
gap: .55rem;
border: 1px solid rgba(255,255,255,.15);
border-radius: 1.55rem;
padding: 1.3rem;
background: rgba(255,255,255,.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}
.oc-badge-hero-card strong {
color: #fff;
font-size: 1.25rem;
font-weight: 1000;
}
.oc-badge-hero-card span:not(.oc-badge-hero-icon) {
color: #d9ccff;
line-height: 1.55;
font-weight: 700;
}
.oc-badge-hero-icon {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
border-radius: 1.4rem;
background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(236,72,153,.88));
box-shadow: 0 18px 35px rgba(168,85,247,.28);
font-size: 2rem;
}
.oc-badge-note {
border: 1px solid rgba(168,85,247,.22);
border-radius: 1.25rem;
padding: 1rem 1.1rem;
background: rgba(31, 18, 58, .86);
color: #ded4ff;
line-height: 1.65;
font-weight: 650;
}
.oc-badge-note strong { color: #fff; }
.oc-badge-filters {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.oc-badge-filters a {
border: 1px solid rgba(168,85,247,.32);
border-radius: 999px;
padding: .58rem .85rem;
background: rgba(255,255,255,.06);
color: #eee8ff;
text-decoration: none;
font-size: .86rem;
font-weight: 950;
}
.oc-badge-filters a:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
}
.oc-badge-table-card,
.oc-badge-section {
border: 1px solid rgba(199,181,255,.16);
border-radius: 1.6rem;
background: rgba(17, 10, 33, .82);
box-shadow: 0 18px 55px rgba(16, 8, 36, .22);
overflow: hidden;
}
.oc-badge-table-head,
.oc-badge-section-title {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 1.25rem;
border-bottom: 1px solid rgba(199,181,255,.14);
background: rgba(255,255,255,.035);
}
.oc-badge-table-head h2,
.oc-badge-section-title h2 {
margin: 0;
color: #fff;
font-size: 1.25rem;
font-weight: 1000;
}
.oc-badge-table-head span,
.oc-badge-section-title span {
color: #bfb3df;
font-size: .84rem;
font-weight: 800;
}
.oc-badge-table-wrap { overflow-x: auto; }
.oc-badge-table {
width: 100%;
min-width: 900px;
border-collapse: collapse;
}
.oc-badge-table th,
.oc-badge-table td {
padding: 1rem 1.1rem;
border-bottom: 1px solid rgba(199,181,255,.10);
text-align: left;
vertical-align: top;
}
.oc-badge-table th {
color: #efe9ff;
background: rgba(255,255,255,.04);
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 1000;
}
.oc-badge-table td {
color: #d8cfff;
line-height: 1.55;
font-weight: 650;
}
.oc-badge-name {
display: flex;
gap: .8rem;
align-items: flex-start;
min-width: 260px;
}
.oc-badge-name > span {
display: grid;
place-items: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 1rem;
background: rgba(168,85,247,.16);
font-size: 1.45rem;
}
.oc-badge-name strong {
display: block;
color: #fff;
font-weight: 1000;
}
.oc-badge-name code,
.oc-badge-card code {
display: inline-flex;
width: fit-content;
margin-top: .25rem;
border-radius: .55rem;
padding: .18rem .4rem;
background: rgba(0,0,0,.26);
color: #cdbfff;
font-size: .76rem;
font-weight: 900;
}
.oc-badge-category {
display: inline-flex;
border-radius: 999px;
padding: .32rem .58rem;
background: rgba(168,85,247,.14);
color: #f1ebff;
font-size: .76rem;
font-weight: 1000;
}
.oc-badge-cat-staff { background: rgba(236,72,153,.18); }
.oc-badge-cat-trust { background: rgba(34,197,94,.16); }
.oc-badge-cat-verified { background: rgba(59,130,246,.18); }
.oc-badge-cat-activity { background: rgba(168,85,247,.18); }
.oc-badge-cat-reputation { background: rgba(250,204,21,.16); }
.oc-badge-cat-owner { background: rgba(245,158,11,.18); }
.oc-badge-cat-skills { background: rgba(14,165,233,.18); }
.oc-badge-cat-fun { background: rgba(244,114,182,.18); }
.oc-badge-section { padding-bottom: 1.2rem; }
.oc-badge-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .9rem;
padding: 1.1rem;
}
.oc-badge-card {
border: 1px solid rgba(199,181,255,.13);
border-radius: 1.2rem;
padding: 1rem;
background: rgba(255,255,255,.045);
}
.oc-badge-card-top {
display: flex;
gap: .75rem;
align-items: center;
}
.oc-badge-card-icon {
display: grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
border-radius: 1rem;
background: linear-gradient(135deg, rgba(124,58,237,.78), rgba(168,85,247,.42));
font-size: 1.45rem;
}
.oc-badge-card h3 {
margin: 0;
color: #fff;
font-size: 1rem;
font-weight: 1000;
}
.oc-badge-card p {
margin: .85rem 0 0;
color: #d8cfff;
line-height: 1.6;
font-weight: 650;
}
.oc-badge-how {
margin-top: .9rem;
border-radius: .9rem;
padding: .8rem;
background: rgba(0,0,0,.18);
color: #cfc3f3;
line-height: 1.55;
font-size: .9rem;
font-weight: 650;
}
.oc-badge-how strong { color: #fff; }
html[data-theme="light"] .oc-badge-hero {
background:
radial-gradient(circle at 15% 20%, rgba(168,85,247,.16), transparent 34%),
radial-gradient(circle at 82% 18%, rgba(79,70,229,.12), transparent 32%),
linear-gradient(135deg, #ffffff 0%, #fbf8ff 56%, #f1eaff 100%);
color: #181426;
border-color: rgba(139,92,246,.20);
}
html[data-theme="light"] .oc-badge-hero h1,
html[data-theme="light"] .oc-badge-hero-card strong,
html[data-theme="light"] .oc-badge-note strong,
html[data-theme="light"] .oc-badge-table-head h2,
html[data-theme="light"] .oc-badge-section-title h2,
html[data-theme="light"] .oc-badge-name strong,
html[data-theme="light"] .oc-badge-card h3,
html[data-theme="light"] .oc-badge-how strong {
color: #181426 !important;
}
html[data-theme="light"] .oc-badge-hero p,
html[data-theme="light"] .oc-badge-hero-card span:not(.oc-badge-hero-icon),
html[data-theme="light"] .oc-badge-table-head span,
html[data-theme="light"] .oc-badge-section-title span,
html[data-theme="light"] .oc-badge-table td,
html[data-theme="light"] .oc-badge-card p,
html[data-theme="light"] .oc-badge-how {
color: #514762 !important;
}
html[data-theme="light"] .oc-badge-kicker,
html[data-theme="light"] .oc-badge-filters a,
html[data-theme="light"] .oc-badge-category {
color: #6d28d9 !important;
background: rgba(139,92,246,.10) !important;
border-color: rgba(139,92,246,.24) !important;
}
html[data-theme="light"] .oc-badge-note,
html[data-theme="light"] .oc-badge-table-card,
html[data-theme="light"] .oc-badge-section,
html[data-theme="light"] .oc-badge-card {
background: rgba(255,255,255,.94) !important;
color: #514762 !important;
border-color: rgba(139,92,246,.18) !important;
box-shadow: 0 18px 45px rgba(88,58,140,.09) !important;
}
html[data-theme="light"] .oc-badge-table-head,
html[data-theme="light"] .oc-badge-section-title,
html[data-theme="light"] .oc-badge-table th {
background: #f4efff !important;
color: #181426 !important;
border-color: rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-badge-table th { color:#38265a !important; }
html[data-theme="light"] .oc-badge-table td { border-color: rgba(139,92,246,.12) !important; }
html[data-theme="light"] .oc-badge-name code,
html[data-theme="light"] .oc-badge-card code,
html[data-theme="light"] .oc-badge-how {
background: #f4efff !important;
color: #6d28d9 !important;
}
html[data-theme="light"] .oc-badge-name > span,
html[data-theme="light"] .oc-badge-card-icon {
background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(168,85,247,.10)) !important;
}
@media (max-width: 900px) {
.oc-badge-hero { grid-template-columns: 1fr; }
.oc-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.oc-badge-hero { border-radius: 1.4rem; padding: 1.2rem; }
.oc-badge-grid { grid-template-columns: 1fr; }
.oc-badge-table-head,
.oc-badge-section-title { align-items: flex-start; flex-direction: column; }
}
/* v29 staff roster divisions */
.oc-staff-public-page article,
.oc-staff-public-page section > div {
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.oc-staff-public-page article:hover {
transform: translateY(-1px);
border-color: rgba(168,85,247,.32) !important;
}
html[data-theme="light"] .oc-staff-public-page .bg-slate-950 {
background: linear-gradient(135deg, #2b174f, #120a24) !important;
}
html[data-theme="light"] .oc-staff-public-page article,
html[data-theme="light"] .oc-staff-public-page section > div:not(.absolute):not(.relative) {
background: rgba(255,255,255,.94) !important;
border-color: rgba(139,92,246,.18) !important;
color: #241936 !important;
}
html[data-theme="light"] .oc-staff-public-page h2,
html[data-theme="light"] .oc-staff-public-page h3 {
color: #181426 !important;
}
html[data-theme="light"] .oc-staff-public-page p,
html[data-theme="light"] .oc-staff-public-page .text-slate-300,
html[data-theme="light"] .oc-staff-public-page .text-slate-400 {
color: #514762 !important;
}
html[data-theme="light"] .oc-staff-public-page .text-purple-100,
html[data-theme="light"] .oc-staff-public-page .text-purple-200 {
color: #6d28d9 !important;
}
html[data-theme="light"] .oc-staff-public-page .bg-purple-400\/15 {
background: rgba(139,92,246,.14) !important;
}
/* v32 staff roster management polish */
.staff-roster-manager .staff-card {
border-color: rgba(168, 85, 247, .18);
}
.staff-roster-stat {
border: 1px solid rgba(168, 85, 247, .20);
border-radius: 1rem;
background: rgba(255,255,255,.055);
padding: .9rem 1rem;
}
.staff-roster-stat strong {
display: block;
color: #fff;
font-size: 1.45rem;
font-weight: 950;
line-height: 1;
}
.staff-roster-stat span {
display: block;
margin-top: .25rem;
color: #c4b5fd;
font-size: .75rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.staff-roster-add-card {
position: sticky;
top: 5.5rem;
}
.staff-optional {
color: #a78bfa;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.staff-public-toggle {
display: flex;
align-items: center;
gap: .65rem;
border: 1px solid rgba(168,85,247,.20);
border-radius: 1rem;
background: rgba(255,255,255,.055);
padding: .85rem 1rem;
color: #e9d5ff;
font-size: .9rem;
font-weight: 900;
}
.staff-roster-division {
border: 1px solid rgba(168,85,247,.20);
border-radius: 1.35rem;
background: linear-gradient(180deg, rgba(168,85,247,.08), rgba(255,255,255,.035));
padding: .9rem;
}
.staff-roster-division-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .35rem .35rem .85rem;
}
.staff-roster-division-head h3 {
color: #fff;
font-size: 1.05rem;
font-weight: 950;
}
.staff-roster-division-head p {
color: #c4b5fd;
font-size: .82rem;
font-weight: 800;
}
.staff-roster-row {
border: 1px solid rgba(168,85,247,.18);
border-radius: 1.2rem;
background: rgba(2,6,23,.50);
padding: 1rem;
}
.staff-roster-row.is-hidden {
opacity: .72;
border-style: dashed;
}
.staff-roster-row-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding-bottom: .85rem;
border-bottom: 1px solid rgba(168,85,247,.14);
margin-bottom: .9rem;
}
.staff-roster-row h4 {
color: #fff;
font-size: 1rem;
font-weight: 950;
}
.staff-roster-row p {
color: #a5b4fc;
font-size: .78rem;
font-weight: 750;
margin-top: .25rem;
}
.staff-roster-chip {
display: inline-flex;
align-items: center;
border: 1px solid rgba(168,85,247,.24);
border-radius: 999px;
background: rgba(168,85,247,.12);
color: #ddd6fe;
padding: .22rem .55rem;
font-size: .7rem;
font-weight: 950;
}
.staff-roster-chip.is-public {
border-color: rgba(34,197,94,.24);
background: rgba(34,197,94,.12);
color: #bbf7d0;
}
.staff-roster-chip.is-private {
border-color: rgba(148,163,184,.24);
background: rgba(148,163,184,.10);
color: #cbd5e1;
}
.staff-roster-chip.is-warning {
border-color: rgba(251,191,36,.32);
background: rgba(251,191,36,.12);
color: #fde68a;
}
.staff-roster-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .5rem;
}
.staff-roster-edit-grid {
display: grid;
grid-template-columns: minmax(170px, .85fr) minmax(180px, 1.15fr) minmax(170px, .85fr) 90px;
gap: .75rem;
align-items: end;
}
.staff-roster-bio {
grid-column: 1 / span 3;
}
@media (max-width: 1100px) {
.staff-roster-add-card { position: static; }
.staff-roster-edit-grid { grid-template-columns: 1fr 1fr; }
.staff-roster-bio { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
.staff-roster-row-head { flex-direction: column; }
.staff-roster-actions { justify-content: flex-start; }
.staff-roster-edit-grid { grid-template-columns: 1fr; }
.staff-roster-bio { grid-column: auto; }
}
html[data-theme="light"] .staff-roster-manager .staff-card,
html[data-theme="light"] .staff-roster-division,
html[data-theme="light"] .staff-roster-row {
background: rgba(255,255,255,.96) !important;
border-color: rgba(124,58,237,.20) !important;
color: #1c162d !important;
}
html[data-theme="light"] .staff-roster-manager h2,
html[data-theme="light"] .staff-roster-manager h3,
html[data-theme="light"] .staff-roster-manager h4,
html[data-theme="light"] .staff-roster-manager .staff-section-title {
color: #181426 !important;
}
html[data-theme="light"] .staff-roster-manager p,
html[data-theme="light"] .staff-roster-manager .staff-muted,
html[data-theme="light"] .staff-roster-row p,
html[data-theme="light"] .staff-roster-division-head p {
color: #5f5570 !important;
}
html[data-theme="light"] .staff-roster-stat,
html[data-theme="light"] .staff-public-toggle {
background: #f5f0ff !important;
border-color: rgba(124,58,237,.20) !important;
color: #2d2142 !important;
}
html[data-theme="light"] .staff-roster-stat strong {
color: #181426 !important;
}
html[data-theme="light"] .staff-roster-stat span,
html[data-theme="light"] .staff-roster-manager .staff-optional {
color: #7c3aed !important;
}
html[data-theme="light"] .staff-roster-chip {
background: #f0e7ff !important;
border-color: rgba(124,58,237,.26) !important;
color: #5b21b6 !important;
}
html[data-theme="light"] .staff-roster-chip.is-public {
background: #ecfdf5 !important;
border-color: rgba(16,185,129,.28) !important;
color: #047857 !important;
}
html[data-theme="light"] .staff-roster-chip.is-private {
background: #f1f5f9 !important;
border-color: rgba(100,116,139,.20) !important;
color: #475569 !important;
}
html[data-theme="light"] .staff-roster-chip.is-warning {
background: #fffbeb !important;
border-color: rgba(245,158,11,.32) !important;
color: #92400e !important;
}
/* v33 staff roster manager polish */
.staff-roster-identity {
margin-top: .25rem;
color: #a78bfa;
font-size: .78rem;
font-weight: 800;
}
html[data-theme="light"] .staff-roster-identity {
color: #6d28d9;
}
.staff-roster-row.is-hidden { opacity: .7; }
.staff-roster-row form[data-roster-ajax] button[disabled] { opacity: .72; cursor: wait; transform: none !important; }
/* v34 marketplace payments + downloads beta shell */
.oc-beta-lock-card{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;border:1px solid rgba(167,139,250,.22);border-radius:1.5rem;background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(15,23,42,.08));padding:1.35rem;box-shadow:0 24px 70px rgba(76,29,149,.14)}
.oc-lock-icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:1rem;background:linear-gradient(135deg,#7c3aed,#c084fc);color:#fff;font-size:1.35rem;box-shadow:0 16px 38px rgba(124,58,237,.28)}
.oc-beta-lock-card h1,.oc-beta-lock-card h2{margin:.15rem 0 .5rem;color:var(--oc-strong,#171326);font-weight:950;letter-spacing:-.04em}.oc-beta-lock-card p{max-width:56rem;color:var(--oc-muted,#625a78);line-height:1.65}.oc-beta-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.oc-plugins-hero{min-height:320px}.oc-download-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.oc-download-card{border:1px solid rgba(167,139,250,.22);border-radius:1.25rem;background:rgba(255,255,255,.72);padding:1rem;box-shadow:0 18px 50px rgba(76,29,149,.08)}.oc-download-type{display:inline-flex;border-radius:999px;background:rgba(139,92,246,.14);color:#7c3aed;padding:.28rem .65rem;font-size:.72rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.oc-download-card h3{margin:.75rem 0 .35rem;color:#171326;font-size:1.15rem;font-weight:950}.oc-download-card p{color:#625a78}.oc-download-meta{display:flex;justify-content:space-between;gap:.75rem;margin-top:1rem;color:#7c3aed;font-weight:900}.oc-empty-modern{grid-column:1/-1;border:1px dashed rgba(139,92,246,.35);border-radius:1.25rem;padding:1.25rem;background:rgba(139,92,246,.08);color:#625a78}.oc-empty-modern strong{display:block;color:#171326;font-size:1.1rem}.oc-empty-modern span{display:block;margin-top:.35rem}
html[data-theme="dark"] .oc-beta-lock-card{background:linear-gradient(135deg,rgba(17,24,39,.94),rgba(46,16,101,.48));border-color:rgba(167,139,250,.28)}html[data-theme="dark"] .oc-beta-lock-card h1,html[data-theme="dark"] .oc-beta-lock-card h2{color:#fff}html[data-theme="dark"] .oc-beta-lock-card p{color:#d8d3ef}html[data-theme="dark"] .oc-download-card{background:rgba(8,10,22,.78);border-color:rgba(167,139,250,.25)}html[data-theme="dark"] .oc-download-card h3,html[data-theme="dark"] .oc-empty-modern strong{color:#fff}html[data-theme="dark"] .oc-download-card p,html[data-theme="dark"] .oc-empty-modern{color:#d8d3ef}html[data-theme="dark"] .oc-empty-modern{background:rgba(139,92,246,.1)}
@media(max-width:720px){.oc-beta-lock-card{grid-template-columns:1fr}.oc-lock-icon{width:2.75rem;height:2.75rem}.oc-plugins-hero{min-height:auto}}
/* v38 forum image uploads */
.oc-forum-post-image {
display: block;
max-width: min(100%, 820px);
max-height: 640px;
object-fit: contain;
margin: 1rem 0;
border-radius: 1.25rem;
border: 1px solid rgba(139, 92, 246, .22);
background: rgba(15, 23, 42, .06);
box-shadow: 0 18px 40px rgba(88, 58, 140, .14);
}
.oc-forum-image-link {
display: inline-block;
max-width: 100%;
text-decoration: none !important;
}
html[data-theme="dark"] .oc-forum-post-image {
border-color: rgba(255, 255, 255, .12);
background: rgba(2, 6, 23, .55);
box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}
/* v39 forum edit buttons */
html[data-theme="light"] .oc-thread-actions a[href$="/edit"],
html[data-theme="light"] .oc-reply-card a[href*="/edit"] {
color: #5b21b6 !important;
background: #f3e8ff !important;
border-color: rgba(124, 58, 237, .35) !important;
}
html[data-theme="light"] .oc-thread-actions a[href$="/edit"]:hover,
html[data-theme="light"] .oc-reply-card a[href*="/edit"]:hover {
background: #eadcff !important;
color: #3b0764 !important;
}
html[data-theme="light"] .oc-forum-edit-page .oc-forum-form {
background: #ffffff !important;
border-color: rgba(139, 92, 246, .18) !important;
box-shadow: 0 18px 45px rgba(88, 58, 140, .10) !important;
}
/* v40 marketplace downloads first layer */
.oc-market-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.25rem;align-items:start}.oc-market-form-main,.oc-market-form-side{display:grid;gap:1.25rem}.oc-sticky-panel{position:sticky;top:6rem}.oc-field-stack{display:grid;gap:1rem}.oc-field-label{display:grid;gap:.45rem;color:var(--oc-strong,#171326);font-weight:900}.oc-field-input{width:100%;border:1px solid rgba(139,92,246,.22);border-radius:1rem;background:#fff;color:#171326;-webkit-text-fill-color:#171326;padding:.82rem 1rem;box-shadow:0 12px 30px rgba(88,58,140,.06)}.oc-field-input::placeholder{color:#7c6f96;-webkit-text-fill-color:#7c6f96}.oc-form-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.oc-review-note,.oc-alert-card{border:1px solid rgba(139,92,246,.24);border-radius:1rem;background:rgba(139,92,246,.08);padding:1rem;color:#625a78;font-weight:700;line-height:1.55}.oc-download-submit-hero{min-height:300px}.oc-download-show-hero{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:1.25rem;align-items:stretch;border:1px solid rgba(167,139,250,.22);border-radius:2rem;padding:1.5rem;background:linear-gradient(135deg,rgba(46,16,101,.96),rgba(17,24,39,.95));color:#fff;box-shadow:0 30px 90px rgba(46,16,101,.25)}.oc-download-show-hero h1{font-size:clamp(2rem,4vw,4rem);font-weight:1000;letter-spacing:-.06em;margin:.65rem 0}.oc-download-show-hero p{color:#e9d5ff;max-width:62rem;font-size:1.08rem}.oc-download-show-meta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.oc-download-show-meta span{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);border-radius:999px;padding:.42rem .75rem;font-size:.8rem;font-weight:900;color:#fff}.oc-download-side-card{display:grid;place-items:center;gap:.55rem;border:1px solid rgba(255,255,255,.14);border-radius:1.5rem;background:rgba(255,255,255,.08);padding:1rem;text-align:center}.oc-download-side-card strong{font-size:2.5rem}.oc-market-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.25rem;align-items:start}.oc-download-description{line-height:1.75}.oc-kv-list{display:grid;gap:.75rem}.oc-kv-list>div{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(139,92,246,.14);padding-bottom:.65rem}.oc-kv-list span{color:#7c6f96;font-size:.85rem;font-weight:800}.oc-kv-list strong{color:#171326;text-align:right}.oc-soft-line{border:none;border-top:1px solid rgba(139,92,246,.16);margin:1.25rem 0}.oc-file-list,.oc-ticket-list{display:grid;gap:.75rem}.oc-file-row,.oc-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(139,92,246,.16);border-radius:1rem;background:rgba(139,92,246,.06);padding:.85rem}.oc-file-row strong,.oc-ticket-row strong{display:block;color:#171326}.oc-file-row span,.oc-ticket-row span,.oc-muted{display:block;color:#625a78;font-size:.85rem}.oc-market-staff-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem}.oc-market-review-card{border-color:rgba(167,139,250,.18)!important}.oc-download-card .oc-btn-secondary{margin-top:1rem;display:inline-flex}.oc-plugins-page .oc-panel-modern h2,.oc-plugins-page .oc-panel-modern h3{color:var(--oc-strong,#171326);font-weight:950}html[data-theme="dark"] .oc-field-label,html[data-theme="dark"] .oc-plugins-page .oc-panel-modern h2,html[data-theme="dark"] .oc-plugins-page .oc-panel-modern h3{color:#fff}html[data-theme="dark"] .oc-field-input{background:rgba(15,23,42,.86);border-color:rgba(167,139,250,.25);color:#f8fafc;-webkit-text-fill-color:#f8fafc}html[data-theme="dark"] .oc-field-input::placeholder{color:#a8a2bd;-webkit-text-fill-color:#a8a2bd}html[data-theme="dark"] .oc-review-note,html[data-theme="dark"] .oc-alert-card{background:rgba(139,92,246,.12);color:#d8d3ef}html[data-theme="dark"] .oc-kv-list span,html[data-theme="dark"] .oc-file-row span,html[data-theme="dark"] .oc-ticket-row span,html[data-theme="dark"] .oc-muted{color:#bdb6d9}html[data-theme="dark"] .oc-kv-list strong,html[data-theme="dark"] .oc-file-row strong,html[data-theme="dark"] .oc-ticket-row strong{color:#fff}html[data-theme="dark"] .oc-file-row,html[data-theme="dark"] .oc-ticket-row{background:rgba(15,23,42,.55);border-color:rgba(167,139,250,.2)}
@media(max-width:980px){.oc-market-form-grid,.oc-market-detail-grid,.oc-download-show-hero{grid-template-columns:1fr}.oc-sticky-panel{position:static}.oc-market-staff-hero{align-items:flex-start;flex-direction:column}}
/* v41 marketplace layer cleanup */
.oc-market-beta-shell{max-width:1240px;margin:0 auto;display:grid;gap:1.5rem}.oc-market-hero-clean{position:relative;overflow:hidden;border:1px solid rgba(167,139,250,.22);border-radius:2rem;background:radial-gradient(circle at 80% 10%,rgba(139,92,246,.28),transparent 34%),linear-gradient(135deg,#080b16 0%,#15112c 55%,#2a1551 100%);padding:2rem;color:#fff;box-shadow:0 28px 80px rgba(31,18,65,.28)}.oc-market-hero-clean:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.18)),url('/ocbanner.png') center/cover;opacity:.35}.oc-market-hero-clean>*{position:relative}.oc-market-hero-clean h1{margin:.5rem 0 .65rem;color:#fff!important;font-weight:1000;letter-spacing:-.055em;font-size:clamp(2.2rem,5vw,4.8rem);line-height:.95}.oc-market-hero-clean p{max-width:760px;color:#f0eaff!important;font-weight:750;line-height:1.6;font-size:1.05rem}.oc-market-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.25rem;align-items:center}.oc-market-hero-stats{display:grid;gap:.75rem}.oc-market-stat-card{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);border-radius:1.25rem;padding:1rem;backdrop-filter:blur(12px)}.oc-market-stat-card strong{display:block;color:#fff;font-size:1.35rem}.oc-market-stat-card span{display:block;color:#ddd6fe;font-size:.85rem;font-weight:800;margin-top:.15rem}.oc-market-note{border:1px solid rgba(167,139,250,.24);background:linear-gradient(135deg,rgba(139,92,246,.11),rgba(255,255,255,.04));border-radius:1.25rem;padding:1rem;color:var(--oc-copy,#5f5874);font-weight:750;line-height:1.55}.oc-market-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.35rem;align-items:start}.oc-market-form-main,.oc-market-form-side{display:grid;gap:1.25rem}.oc-market-card{border:1px solid rgba(139,92,246,.18);background:rgba(255,255,255,.76);border-radius:1.5rem;padding:1.35rem;box-shadow:0 22px 65px rgba(88,58,140,.08)}.oc-market-card h2,.oc-market-card h3{margin:0;color:#171326!important;font-size:1.4rem;font-weight:1000;letter-spacing:-.025em}.oc-market-card p{color:#5f5874!important;line-height:1.6}.oc-market-kicker{color:#8b5cf6!important;font-size:.76rem;text-transform:uppercase;letter-spacing:.18em;font-weight:1000;margin-bottom:.3rem}.oc-market-fields{display:grid;gap:1rem;margin-top:1.1rem}.oc-market-label{display:grid;gap:.45rem;color:#312945!important;font-weight:950}.oc-market-label small{color:#776b92;font-weight:750}.oc-market-input{width:100%;border:1px solid rgba(139,92,246,.25)!important;border-radius:1rem;background:#fff!important;color:#171326!important;-webkit-text-fill-color:#171326!important;padding:.88rem 1rem;font-weight:750;box-shadow:0 14px 35px rgba(88,58,140,.06)}.oc-market-input::placeholder{color:#827596!important;-webkit-text-fill-color:#827596!important}.oc-market-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.oc-market-side{position:sticky;top:6rem}.oc-market-side .oc-market-card{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(249,245,255,.92))}.oc-market-help{border:1px solid rgba(139,92,246,.25);background:#f1e9ff;border-radius:1rem;padding:1rem;color:#514566!important;font-weight:800;line-height:1.5}.oc-market-upload-drop{border:1px dashed rgba(139,92,246,.45);border-radius:1.15rem;background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(255,255,255,.7));padding:1rem}.oc-staff-market-page{max-width:1240px;margin:0 auto;display:grid;gap:1.25rem}.oc-staff-market-hero{border:1px solid rgba(167,139,250,.2);border-radius:1.75rem;background:linear-gradient(135deg,#080b16,#17122d 58%,#28104a);color:#fff;padding:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:0 22px 70px rgba(23,18,45,.22)}.oc-staff-market-hero h1{color:#fff!important;margin:.25rem 0;font-size:2rem;font-weight:1000;letter-spacing:-.04em}.oc-staff-market-hero p{color:#d8d3ef!important}.oc-staff-market-panel{border:1px solid rgba(139,92,246,.18);border-radius:1.35rem;background:rgba(255,255,255,.84);padding:1rem;box-shadow:0 18px 55px rgba(88,58,140,.08);color:#171326}.oc-staff-market-filter{display:grid;grid-template-columns:minmax(0,1fr) 220px auto auto;gap:.85rem;align-items:end}.oc-staff-market-filter label{display:grid;gap:.35rem;color:#5f5874!important;font-weight:950}.oc-staff-market-filter input,.oc-staff-market-filter select{border:1px solid rgba(139,92,246,.22);background:#fff;color:#171326;border-radius:.9rem;padding:.78rem .9rem;font-weight:750}.oc-market-empty{border:1px dashed rgba(139,92,246,.3);border-radius:1.25rem;background:rgba(139,92,246,.06);padding:2rem;text-align:center;color:#5f5874;font-weight:800}.oc-payment-page{max-width:1050px;margin:0 auto;display:grid;gap:1.5rem}.oc-payment-hero{border:1px solid rgba(139,92,246,.16);border-radius:1.75rem;background:rgba(255,255,255,.85);padding:1.6rem;box-shadow:0 22px 65px rgba(88,58,140,.08);color:#171326}.oc-payment-hero h1{color:#171326!important;font-size:clamp(2rem,4vw,3.3rem);font-weight:1000;letter-spacing:-.045em;margin:.35rem 0}.oc-payment-hero p{color:#5f5874!important;line-height:1.65;font-weight:650}.oc-rate-card{border:1px solid rgba(139,92,246,.25);border-radius:1.75rem;background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(255,255,255,.84));padding:1.4rem;color:#171326}.oc-rate-card h2,.oc-rate-card h3{color:#171326!important}.oc-rate-big{font-size:3.7rem;font-weight:1000;color:#171326;letter-spacing:-.06em;line-height:1}.oc-rate-card p{color:#332d45!important}.oc-payment-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}.oc-payment-status-grid div{border:1px solid rgba(139,92,246,.14);background:#fff;border-radius:1rem;padding:1rem}.oc-payment-status-grid dt{color:#6b607f;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.oc-payment-status-grid dd{margin:.2rem 0 0;color:#171326;font-weight:1000}.oc-badge-soft{display:inline-flex;border:1px solid rgba(139,92,246,.25);background:rgba(139,92,246,.1);color:#6d28d9;border-radius:999px;padding:.38rem .7rem;font-size:.74rem;font-weight:1000;letter-spacing:.13em;text-transform:uppercase}.oc-download-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.oc-download-card{border:1px solid rgba(139,92,246,.18);border-radius:1.35rem;background:rgba(255,255,255,.82);overflow:hidden;padding:1rem;box-shadow:0 18px 50px rgba(88,58,140,.07)}.oc-download-card h3{color:#171326!important;font-size:1.25rem;font-weight:1000}.oc-download-card p{color:#5f5874!important}.oc-download-type{display:inline-flex;width:max-content;border:1px solid rgba(139,92,246,.3);background:rgba(139,92,246,.12);color:#7c3aed!important;border-radius:999px;padding:.34rem .65rem;font-weight:1000;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.oc-download-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin:.85rem 0}.oc-download-meta span{border:1px solid rgba(139,92,246,.16);background:rgba(139,92,246,.07);border-radius:999px;padding:.32rem .55rem;color:#5f5874;font-size:.78rem;font-weight:900}
html[data-theme="dark"] .oc-market-card,html[data-theme="dark"] .oc-staff-market-panel,html[data-theme="dark"] .oc-payment-hero,html[data-theme="dark"] .oc-download-card{background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(10,12,25,.9));border-color:rgba(167,139,250,.2);color:#f8fafc}html[data-theme="dark"] .oc-market-card h2,html[data-theme="dark"] .oc-market-card h3,html[data-theme="dark"] .oc-payment-hero h1,html[data-theme="dark"] .oc-download-card h3{color:#fff!important}html[data-theme="dark"] .oc-market-card p,html[data-theme="dark"] .oc-payment-hero p,html[data-theme="dark"] .oc-download-card p{color:#cfc8e8!important}html[data-theme="dark"] .oc-market-label,html[data-theme="dark"] .oc-staff-market-filter label{color:#e9d5ff!important}html[data-theme="dark"] .oc-market-input,html[data-theme="dark"] .oc-staff-market-filter input,html[data-theme="dark"] .oc-staff-market-filter select{background:rgba(8,10,22,.92)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:rgba(167,139,250,.28)!important}html[data-theme="dark"] .oc-market-input::placeholder{color:#a8a2bd!important;-webkit-text-fill-color:#a8a2bd!important}html[data-theme="dark"] .oc-market-help{background:rgba(139,92,246,.12);color:#d8d3ef!important}html[data-theme="dark"] .oc-rate-card{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(15,23,42,.9));color:#fff}html[data-theme="dark"] .oc-rate-card h2,html[data-theme="dark"] .oc-rate-card h3,html[data-theme="dark"] .oc-rate-big{color:#fff!important}html[data-theme="dark"] .oc-rate-card p{color:#d8d3ef!important}html[data-theme="dark"] .oc-payment-status-grid div{background:rgba(255,255,255,.05);border-color:rgba(167,139,250,.16)}html[data-theme="dark"] .oc-payment-status-grid dt{color:#bdb6d9}html[data-theme="dark"] .oc-payment-status-grid dd{color:#fff}
@media(max-width:980px){.oc-market-hero-grid,.oc-market-form-grid,.oc-staff-market-filter{grid-template-columns:1fr}.oc-market-side{position:static}.oc-staff-market-hero{flex-direction:column;align-items:flex-start}.oc-payment-status-grid,.oc-download-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.oc-payment-status-grid,.oc-download-grid{grid-template-columns:1fr}.oc-market-hero-clean{padding:1.35rem}.oc-market-hero-clean h1{font-size:2.25rem}}
/* v42 marketplace light-mode cleanup + featured downloads */
.oc-featured-downloads-panel,
.oc-all-downloads-panel {
border: 1px solid rgba(139, 92, 246, .18) !important;
background: rgba(255, 255, 255, .88) !important;
color: #181326 !important;
}
html[data-theme="light"] .oc-featured-downloads-panel,
html[data-theme="light"] .oc-all-downloads-panel,
html[data-theme="light"] .oc-payment-page .oc-payment-hero,
html[data-theme="light"] .oc-payment-page .oc-rate-card,
html[data-theme="light"] .oc-staff-market-page .oc-staff-market-panel,
html[data-theme="light"] .oc-market-beta-shell .oc-market-card {
background: rgba(255, 255, 255, .94) !important;
color: #181326 !important;
border-color: rgba(139, 92, 246, .20) !important;
}
html[data-theme="light"] .oc-payment-page,
html[data-theme="light"] .oc-payment-page *,
html[data-theme="light"] .oc-staff-market-page,
html[data-theme="light"] .oc-staff-market-page *,
html[data-theme="light"] .oc-plugins-page,
html[data-theme="light"] .oc-plugins-page * {
text-shadow: none !important;
}
html[data-theme="light"] .oc-payment-page h1,
html[data-theme="light"] .oc-payment-page h2,
html[data-theme="light"] .oc-payment-page h3,
html[data-theme="light"] .oc-payment-page strong,
html[data-theme="light"] .oc-rate-big,
html[data-theme="light"] .oc-staff-market-page h1,
html[data-theme="light"] .oc-staff-market-page h2,
html[data-theme="light"] .oc-staff-market-page h3,
html[data-theme="light"] .oc-staff-market-page strong,
html[data-theme="light"] .oc-plugins-page h1,
html[data-theme="light"] .oc-plugins-page h2,
html[data-theme="light"] .oc-plugins-page h3,
html[data-theme="light"] .oc-plugins-page strong,
html[data-theme="light"] .oc-market-card h2,
html[data-theme="light"] .oc-market-card h3 {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-payment-page p,
html[data-theme="light"] .oc-payment-page span,
html[data-theme="light"] .oc-payment-page dd,
html[data-theme="light"] .oc-staff-market-page p,
html[data-theme="light"] .oc-staff-market-page span,
html[data-theme="light"] .oc-plugins-page p,
html[data-theme="light"] .oc-plugins-page span,
html[data-theme="light"] .oc-download-card p,
html[data-theme="light"] .oc-empty-modern,
html[data-theme="light"] .oc-empty-modern span {
color: #5f5874 !important;
-webkit-text-fill-color: #5f5874 !important;
}
html[data-theme="light"] .oc-payment-page .oc-market-kicker,
html[data-theme="light"] .oc-staff-market-page .staff-kicker,
html[data-theme="light"] .oc-plugins-page .oc-section-kicker-modern,
html[data-theme="light"] .oc-plugins-page .oc-market-kicker,
html[data-theme="light"] .oc-plugins-page .oc-badge-soft {
color: #7c3aed !important;
-webkit-text-fill-color: #7c3aed !important;
}
html[data-theme="light"] .oc-market-help,
html[data-theme="light"] .oc-payment-page .oc-market-help {
background: #f1e9ff !important;
color: #44365f !important;
-webkit-text-fill-color: #44365f !important;
border-color: rgba(139, 92, 246, .25) !important;
}
html[data-theme="light"] .oc-payment-status-grid div,
html[data-theme="light"] .oc-staff-market-filter input,
html[data-theme="light"] .oc-staff-market-filter select,
html[data-theme="light"] .oc-market-input,
html[data-theme="light"] .oc-market-card input,
html[data-theme="light"] .oc-market-card textarea,
html[data-theme="light"] .oc-market-card select {
background: #fff !important;
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
border-color: rgba(139, 92, 246, .28) !important;
}
html[data-theme="light"] .oc-market-input::placeholder,
html[data-theme="light"] .oc-staff-market-filter input::placeholder,
html[data-theme="light"] .oc-market-card textarea::placeholder {
color: #746887 !important;
-webkit-text-fill-color: #746887 !important;
}
html[data-theme="light"] .oc-staff-market-hero,
html[data-theme="light"] .oc-market-hero-clean,
html[data-theme="light"] .oc-plugins-hero {
background:
radial-gradient(circle at 88% 10%, rgba(139,92,246,.18), transparent 34%),
linear-gradient(135deg, #ffffff 0%, #f7f2ff 52%, #efe4ff 100%) !important;
color: #181326 !important;
border-color: rgba(139, 92, 246, .22) !important;
box-shadow: 0 24px 70px rgba(88, 58, 140, .10) !important;
}
html[data-theme="light"] .oc-market-hero-clean:before {
opacity: .10 !important;
}
html[data-theme="light"] .oc-staff-market-hero h1,
html[data-theme="light"] .oc-staff-market-hero p,
html[data-theme="light"] .oc-staff-market-hero a,
html[data-theme="light"] .oc-market-hero-clean h1,
html[data-theme="light"] .oc-market-hero-clean p,
html[data-theme="light"] .oc-market-hero-clean a,
html[data-theme="light"] .oc-plugins-hero h1,
html[data-theme="light"] .oc-plugins-hero p {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-market-hero-clean .oc-btn-primary,
html[data-theme="light"] .oc-staff-market-hero .staff-btn-primary,
html[data-theme="light"] .oc-plugins-hero .oc-btn-primary,
html[data-theme="light"] .oc-payment-page .oc-btn-primary {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
html[data-theme="light"] .oc-staff-market-hero .staff-btn-muted,
html[data-theme="light"] .oc-market-hero-clean .oc-btn-secondary,
html[data-theme="light"] .oc-plugins-hero .oc-btn-secondary {
background: #fff !important;
color: #3b255f !important;
-webkit-text-fill-color: #3b255f !important;
border-color: rgba(139, 92, 246, .28) !important;
}
html[data-theme="light"] .oc-market-empty,
html[data-theme="light"] .oc-empty-modern {
background: #f6f0ff !important;
border-color: rgba(139, 92, 246, .28) !important;
color: #5f5874 !important;
}
html[data-theme="light"] .oc-empty-modern strong,
html[data-theme="light"] .oc-market-empty strong {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
.oc-download-card.is-featured {
border-color: rgba(168, 85, 247, .35) !important;
background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,240,255,.95)) !important;
}
html[data-theme="dark"] .oc-featured-downloads-panel,
html[data-theme="dark"] .oc-all-downloads-panel {
background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(10,12,25,.9)) !important;
border-color: rgba(167,139,250,.2) !important;
color: #f8fafc !important;
}
html[data-theme="dark"] .oc-download-card.is-featured {
background: linear-gradient(180deg, rgba(31,18,65,.92), rgba(10,12,25,.92)) !important;
}
/* v43 marketplace pages: polish plugins/downloads without square beta blocks */
.oc-plugins-page {
max-width: 1240px;
margin: 0 auto;
}
.oc-plugins-page .oc-hero-modern.oc-plugins-hero {
min-height: 260px !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
border-radius: 2rem !important;
padding: clamp(1.4rem, 3vw, 2.25rem) !important;
}
.oc-plugins-page .oc-hero-modern.oc-plugins-hero h1 {
margin: .45rem 0 .75rem !important;
line-height: .95 !important;
}
.oc-featured-downloads-panel,
.oc-all-downloads-panel {
overflow: hidden !important;
border-radius: 1.75rem !important;
padding: clamp(1.15rem, 2.2vw, 1.65rem) !important;
box-shadow: 0 24px 70px rgba(88,58,140,.08) !important;
}
.oc-featured-downloads-panel .oc-section-head-modern,
.oc-all-downloads-panel .oc-section-head-modern {
align-items: flex-start !important;
}
.oc-featured-downloads-panel .oc-download-grid,
.oc-all-downloads-panel .oc-download-grid {
margin-top: 1rem !important;
}
.oc-empty-modern {
border-radius: 1.35rem !important;
padding: 1.2rem 1.35rem !important;
}
html[data-theme="light"] .oc-plugins-page .oc-hero-modern.oc-plugins-hero {
background:
radial-gradient(circle at 86% 12%, rgba(139,92,246,.22), transparent 34%),
radial-gradient(circle at 10% 8%, rgba(46,204,113,.12), transparent 30%),
linear-gradient(135deg, #ffffff 0%, #f7f2ff 54%, #efe4ff 100%) !important;
color: #181326 !important;
}
html[data-theme="light"] .oc-plugins-page .oc-hero-modern.oc-plugins-hero h1,
html[data-theme="light"] .oc-plugins-page .oc-hero-modern.oc-plugins-hero p,
html[data-theme="light"] .oc-plugins-page .oc-hero-modern.oc-plugins-hero .oc-hero-pill {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-plugins-page .oc-hero-modern.oc-plugins-hero .oc-hero-pill,
html[data-theme="light"] .oc-plugins-page .oc-badge-soft {
background: rgba(139,92,246,.10) !important;
border-color: rgba(139,92,246,.28) !important;
color: #6d28d9 !important;
-webkit-text-fill-color: #6d28d9 !important;
}
html[data-theme="light"] .oc-featured-downloads-panel,
html[data-theme="light"] .oc-all-downloads-panel {
background: rgba(255,255,255,.94) !important;
border: 1px solid rgba(139,92,246,.18) !important;
color: #181326 !important;
}
html[data-theme="light"] .oc-featured-downloads-panel h2,
html[data-theme="light"] .oc-all-downloads-panel h2,
html[data-theme="light"] .oc-featured-downloads-panel strong,
html[data-theme="light"] .oc-all-downloads-panel strong {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-featured-downloads-panel p,
html[data-theme="light"] .oc-all-downloads-panel p,
html[data-theme="light"] .oc-featured-downloads-panel span,
html[data-theme="light"] .oc-all-downloads-panel span {
color: #5f5874 !important;
-webkit-text-fill-color: #5f5874 !important;
}
html[data-theme="light"] .oc-featured-downloads-panel .oc-section-kicker-modern,
html[data-theme="light"] .oc-all-downloads-panel .oc-section-kicker-modern {
color: #7c3aed !important;
-webkit-text-fill-color: #7c3aed !important;
}
/* Marketplace staff/download review: force readable surfaces in both themes */
.oc-staff-market-hero h1,
.oc-staff-market-hero p,
.oc-staff-market-hero .staff-kicker {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
html[data-theme="light"] .oc-staff-market-hero {
background:
radial-gradient(circle at 92% 8%, rgba(139,92,246,.18), transparent 34%),
linear-gradient(135deg, #ffffff 0%, #f7f2ff 58%, #efe4ff 100%) !important;
color: #181326 !important;
border-color: rgba(139,92,246,.22) !important;
}
html[data-theme="light"] .oc-staff-market-hero h1,
html[data-theme="light"] .oc-staff-market-hero p,
html[data-theme="light"] .oc-staff-market-hero .staff-kicker {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-staff-market-hero .staff-kicker {
color: #7c3aed !important;
-webkit-text-fill-color: #7c3aed !important;
}
html[data-theme="light"] .oc-staff-market-panel,
html[data-theme="light"] .oc-market-empty {
background: rgba(255,255,255,.94) !important;
border-color: rgba(139,92,246,.20) !important;
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-staff-market-filter label,
html[data-theme="light"] .oc-staff-market-filter span,
html[data-theme="light"] .oc-market-empty,
html[data-theme="light"] .oc-market-empty * {
color: #5f5874 !important;
-webkit-text-fill-color: #5f5874 !important;
}
html[data-theme="light"] .oc-staff-market-filter input,
html[data-theme="light"] .oc-staff-market-filter select {
background: #fff !important;
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
border-color: rgba(139,92,246,.28) !important;
}
html[data-theme="light"] .oc-staff-market-filter input::placeholder {
color: #746887 !important;
-webkit-text-fill-color: #746887 !important;
}
/* Submit plugin/mod: remove the billboard feeling and keep light mode readable */
.oc-market-beta-shell .oc-market-hero-clean {
min-height: auto !important;
border-radius: 2rem !important;
padding: clamp(1.4rem, 3vw, 2rem) !important;
}
html[data-theme="light"] .oc-market-beta-shell .oc-market-hero-clean {
background:
radial-gradient(circle at 86% 10%, rgba(139,92,246,.18), transparent 34%),
linear-gradient(135deg, #ffffff 0%, #f7f2ff 56%, #efe4ff 100%) !important;
}
html[data-theme="light"] .oc-market-beta-shell .oc-market-hero-clean:before {
opacity: 0 !important;
}
html[data-theme="light"] .oc-market-beta-shell .oc-market-hero-clean h1,
html[data-theme="light"] .oc-market-beta-shell .oc-market-hero-clean p,
html[data-theme="light"] .oc-market-beta-shell .oc-market-stat-card strong,
html[data-theme="light"] .oc-market-beta-shell .oc-market-stat-card span {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-market-beta-shell .oc-market-stat-card {
background: rgba(255,255,255,.76) !important;
border-color: rgba(139,92,246,.20) !important;
}
html[data-theme="light"] .oc-market-beta-shell .oc-market-card,
html[data-theme="light"] .oc-market-beta-shell .oc-market-side .oc-market-card {
background: rgba(255,255,255,.94) !important;
border-color: rgba(139,92,246,.20) !important;
color: #181326 !important;
}
html[data-theme="light"] .oc-market-beta-shell .oc-market-label,
html[data-theme="light"] .oc-market-beta-shell .oc-market-card h2,
html[data-theme="light"] .oc-market-beta-shell .oc-market-card h3,
html[data-theme="light"] .oc-market-beta-shell .oc-market-card strong {
color: #181326 !important;
-webkit-text-fill-color: #181326 !important;
}
html[data-theme="light"] .oc-market-beta-shell .oc-market-card p,
html[data-theme="light"] .oc-market-beta-shell .oc-market-card span,
html[data-theme="light"] .oc-market-beta-shell .oc-market-help {
color: #5f5874 !important;
-webkit-text-fill-color: #5f5874 !important;
}
/* v44: homepage light text, marketplace staff links, and Plugins & Mods landing cleanup */
html[data-theme="light"] .oc-home-modern .oc-section-head-modern h2,
html[data-theme="light"] .oc-home-modern .oc-safety-panel-modern h2,
html[data-theme="light"] .oc-home-modern .oc-home-panel-modern h2,
html[data-theme="light"] .oc-home-modern .oc-home-panel-modern h3,
html[data-theme="light"] .oc-home-modern .oc-section-head-modern .oc-section-kicker-modern,
html[data-theme="light"] .oc-home-modern .oc-section-kicker-modern {
color: #171326 !important;
opacity: 1 !important;
text-shadow: none !important;
-webkit-text-fill-color: #171326 !important;
}
html[data-theme="light"] .oc-home-modern .oc-section-head-modern p,
html[data-theme="light"] .oc-home-modern .oc-home-panel-modern p,
html[data-theme="light"] .oc-home-modern .oc-safety-panel-modern p,
html[data-theme="light"] .oc-home-modern .oc-thread-list-modern em,
html[data-theme="light"] .oc-home-modern .oc-activity-list-modern em,
html[data-theme="light"] .oc-home-modern .oc-guide-grid-modern em,
html[data-theme="light"] .oc-home-modern .oc-safety-grid-modern em {
color: #5f5874 !important;
opacity: 1 !important;
text-shadow: none !important;
-webkit-text-fill-color: #5f5874 !important;
}
html[data-theme="light"] .oc-home-modern .oc-thread-list-modern strong,
html[data-theme="light"] .oc-home-modern .oc-activity-list-modern strong,
html[data-theme="light"] .oc-home-modern .oc-guide-grid-modern strong,
html[data-theme="light"] .oc-home-modern .oc-safety-grid-modern strong,
html[data-theme="light"] .oc-home-modern .oc-service-card-modern h3 a,
html[data-theme="light"] .oc-home-modern .oc-service-provider-modern,
html[data-theme="light"] .oc-home-modern .oc-service-foot-modern span {
color: #171326 !important;
opacity: 1 !important;
text-shadow: none !important;
-webkit-text-fill-color: #171326 !important;
}
html[data-theme="light"] .oc-home-modern .oc-home-panel-modern,
html[data-theme="light"] .oc-home-modern .oc-trust-card-modern,
html[data-theme="light"] .oc-home-modern .oc-route-grid-modern a,
html[data-theme="light"] .oc-home-modern .oc-service-card-modern,
html[data-theme="light"] .oc-home-modern .oc-safety-grid-modern a,
html[data-theme="light"] .oc-home-modern .oc-guide-grid-modern a,
html[data-theme="light"] .oc-home-modern .oc-thread-list-modern a,
html[data-theme="light"] .oc-home-modern .oc-activity-list-modern a {
background: rgba(255,255,255,.92) !important;
border-color: rgba(139,92,246,.16) !important;
}
.oc-staff-market-hero .staff-btn,
.oc-staff-market-hero a.staff-btn,
html[data-theme="light"] .oc-staff-market-hero .staff-btn,
html[data-theme="light"] .oc-staff-market-hero a.staff-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
padding: .72rem 1rem !important;
text-decoration: none !important;
font-weight: 950 !important;
border: 1px solid rgba(139,92,246,.22) !important;
background: rgba(255,255,255,.88) !important;
color: #171326 !important;
-webkit-text-fill-color: #171326 !important;
box-shadow: 0 14px 32px rgba(88,58,140,.10) !important;
}
html[data-theme="light"] .oc-staff-market-hero .staff-btn-primary,
.oc-staff-market-hero .staff-btn-primary {
background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: rgba(255,255,255,.18) !important;
}
html[data-theme="light"] .oc-staff-market-hero h1,
html[data-theme="light"] .oc-staff-market-hero p,
html[data-theme="light"] .oc-staff-market-hero .staff-kicker {
opacity: 1 !important;
text-shadow: none !important;
}
html[data-theme="light"] .oc-staff-market-hero h1 { color:#fff !important; -webkit-text-fill-color:#fff !important; }
html[data-theme="light"] .oc-staff-market-hero p { color:#ddd6fe !important; -webkit-text-fill-color:#ddd6fe !important; }
html[data-theme="light"] .oc-staff-market-filter span,
html[data-theme="light"] .oc-staff-market-filter label,
html[data-theme="light"] .oc-staff-market-filter input,
html[data-theme="light"] .oc-staff-market-filter select {
color: #171326 !important;
-webkit-text-fill-color: #171326 !important;
opacity: 1 !important;
}
.oc-plugins-landing-hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) !important;
gap: 1rem !important;
align-items: stretch !important;
border: 1px solid rgba(167,139,250,.22) !important;
border-radius: 2rem !important;
padding: clamp(1.25rem, 3vw, 2rem) !important;
background:
radial-gradient(circle at 82% 18%, rgba(168,85,247,.24), transparent 20rem),
linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,241,255,.92)) !important;
box-shadow: 0 24px 70px rgba(88,58,140,.10) !important;
overflow: hidden !important;
}
.oc-plugins-hero-copy h1 {
margin: .45rem 0 .65rem !important;
font-size: clamp(2.35rem, 6vw, 4.6rem) !important;
line-height: .92 !important;
letter-spacing: -.075em !important;
color: #171326 !important;
-webkit-text-fill-color: #171326 !important;
text-shadow: none !important;
}
.oc-plugins-hero-copy p {
max-width: 42rem !important;
color: #4f4861 !important;
-webkit-text-fill-color: #4f4861 !important;
opacity: 1 !important;
line-height: 1.55 !important;
font-weight: 800 !important;
}
.oc-plugins-hero-cards {
display: grid !important;
gap: .75rem !important;
align-content: center !important;
}
.oc-plugins-hero-cards div {
border: 1px solid rgba(139,92,246,.18) !important;
border-radius: 1.15rem !important;
background: rgba(255,255,255,.74) !important;
padding: 1rem !important;
box-shadow: 0 16px 38px rgba(88,58,140,.08) !important;
}
.oc-plugins-hero-cards strong {
display: block !important;
color: #171326 !important;
-webkit-text-fill-color: #171326 !important;
font-weight: 1000 !important;
}
.oc-plugins-hero-cards span {
display: block !important;
margin-top: .25rem !important;
color: #5f5874 !important;
-webkit-text-fill-color: #5f5874 !important;
font-weight: 750 !important;
}
html[data-theme="dark"] .oc-plugins-landing-hero {
background:
radial-gradient(circle at 78% 20%, rgba(168,85,247,.35), transparent 22rem),
linear-gradient(135deg, rgba(10,10,24,.98), rgba(29,18,58,.96)) !important;
border-color: rgba(167,139,250,.26) !important;
box-shadow: 0 26px 80px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] .oc-plugins-hero-copy h1 { color:#fff !important; -webkit-text-fill-color:#fff !important; }
html[data-theme="dark"] .oc-plugins-hero-copy p { color:#ddd6fe !important; -webkit-text-fill-color:#ddd6fe !important; }
html[data-theme="dark"] .oc-plugins-hero-cards div { background: rgba(15,23,42,.62) !important; border-color: rgba(167,139,250,.20) !important; }
html[data-theme="dark"] .oc-plugins-hero-cards strong { color:#fff !important; -webkit-text-fill-color:#fff !important; }
html[data-theme="dark"] .oc-plugins-hero-cards span { color:#c7c3d8 !important; -webkit-text-fill-color:#c7c3d8 !important; }
html[data-theme="light"] .oc-featured-downloads-panel,
html[data-theme="light"] .oc-all-downloads-panel,
html[data-theme="light"] .oc-plugins-page .oc-panel-modern {
background: rgba(255,255,255,.94) !important;
border: 1px solid rgba(139,92,246,.16) !important;
}
html[data-theme="light"] .oc-featured-downloads-panel h2,
html[data-theme="light"] .oc-all-downloads-panel h2,
html[data-theme="light"] .oc-featured-downloads-panel p,
html[data-theme="light"] .oc-all-downloads-panel p,
html[data-theme="light"] .oc-featured-downloads-panel strong,
html[data-theme="light"] .oc-all-downloads-panel strong,
html[data-theme="light"] .oc-featured-downloads-panel span,
html[data-theme="light"] .oc-all-downloads-panel span {
opacity: 1 !important;
text-shadow: none !important;
}
@media (max-width: 900px) {
.oc-plugins-landing-hero { grid-template-columns: 1fr !important; }
.oc-plugins-hero-cards { grid-template-columns: 1fr !important; }
}
/* v45 marketplace product/review polish */
.oc-market-submit-page,
.oc-download-product-page,
.oc-market-review-page { color: var(--oc-text, #171326); }
.oc-market-submit-hero,
.oc-download-product-hero,
.oc-market-review-hero {
position: relative;
overflow: hidden;
border-radius: 30px;
border: 1px solid rgba(139,92,246,.22);
background:
radial-gradient(circle at 15% 10%, rgba(46,204,113,.16), transparent 34%),
radial-gradient(circle at 84% 10%, rgba(139,92,246,.26), transparent 42%),
linear-gradient(135deg, #0a0b18, #17102f 62%, #27124a);
box-shadow: 0 24px 80px rgba(21, 14, 47, .22);
color: #fff;
}
.oc-market-submit-hero {
display:grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
gap: 28px;
padding: clamp(28px, 5vw, 56px);
margin-bottom: 28px;
}
.oc-market-submit-hero h1,
.oc-download-product-hero h1,
.oc-market-review-hero h1 {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
font-size: clamp(2.4rem, 5vw, 5rem);
line-height:.92;
letter-spacing:-.06em;
margin: 16px 0;
}
.oc-market-submit-hero p,
.oc-download-product-hero p,
.oc-market-review-hero p {
color:#e9ddff !important;
-webkit-text-fill-color:#e9ddff !important;
max-width: 720px;
font-weight: 800;
}
.oc-market-submit-steps {
display:grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 12px;
align-content:center;
}
.oc-market-submit-steps div,
.oc-market-hero-stats .oc-market-stat-card {
background: rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
border-radius: 22px;
padding:18px;
backdrop-filter: blur(14px);
}
.oc-market-submit-steps strong { display:block; font-size:2rem; color:#fff; }
.oc-market-submit-steps span { color:#dcd0ff; font-weight:900; }
.oc-market-card,
.oc-panel-modern,
.staff-card {
border-radius: 26px !important;
}
.oc-market-image-grid {
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 16px;
}
.oc-market-upload-card {
display:flex;
flex-direction:column;
gap:10px;
min-height: 150px;
padding: 22px;
border-radius: 24px;
border: 1px dashed rgba(139,92,246,.45);
background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(255,255,255,.76));
cursor:pointer;
}
.oc-market-upload-banner { min-height: 190px; }
.oc-market-upload-card span { font-size: 1.15rem; font-weight: 950; color:#171326; }
.oc-market-upload-card small { color:#625775; font-weight: 750; line-height:1.45; }
.oc-market-upload-card input { margin-top:auto; color:#171326; font-weight:800; }
.oc-market-sticky-card { position: sticky; top: 92px; }
.oc-download-product-hero {
min-height: 410px;
display:grid;
grid-template-columns: 1fr 240px;
align-items:end;
gap: 24px;
padding: clamp(28px, 5vw, 52px);
background-image:
linear-gradient(90deg, rgba(7,8,20,.95), rgba(18,12,42,.82) 48%, rgba(38,18,74,.68)),
var(--download-banner),
radial-gradient(circle at 85% 12%, rgba(139,92,246,.38), transparent 36%),
linear-gradient(135deg, #0a0b18, #21113f);
background-size: cover;
background-position: center;
}
.oc-download-hero-content { position:relative; z-index:1; }
.oc-download-type,
.oc-market-kicker,
.staff-kicker {
display:inline-flex;
align-items:center;
width:max-content;
border-radius:999px;
border:1px solid rgba(167,139,250,.35);
background:rgba(139,92,246,.14);
color:#8b5cf6;
padding:.42rem .78rem;
font-size:.78rem;
font-weight:1000;
letter-spacing:.16em;
text-transform:uppercase;
}
.oc-download-show-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.oc-download-show-meta span {
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.10);
color:#fff;
padding:.5rem .75rem;
font-weight:900;
}
.oc-download-hero-card {
position:relative;
z-index:1;
display:grid;
gap:12px;
justify-items:center;
align-content:center;
min-height:220px;
border-radius:28px;
border:1px solid rgba(255,255,255,.24);
background:rgba(255,255,255,.12);
backdrop-filter: blur(16px);
}
.oc-download-hero-card strong { font-size:4rem; line-height:1; color:#fff; }
.oc-download-hero-card span { color:#dcd0ff; font-weight:900; }
.oc-download-gallery-grid {
display:grid;
grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
gap:14px;
margin-top:18px;
}
.oc-download-gallery-item {
display:block;
overflow:hidden;
border-radius:22px;
border:1px solid rgba(139,92,246,.18);
background:#120d24;
aspect-ratio: 16/9;
}
.oc-download-gallery-item img {
width:100%; height:100%; object-fit:cover; display:block;
transition: transform .2s ease;
}
.oc-download-gallery-item:hover img { transform: scale(1.03); }
.oc-download-main-card,
.oc-download-details-card { background: rgba(255,255,255,.94) !important; }
.oc-download-description { color:#251f33; font-size:1rem; line-height:1.72; }
.oc-file-row {
border-radius:18px;
border:1px solid rgba(139,92,246,.18);
background:rgba(139,92,246,.06);
padding:14px;
}
.oc-market-review-hero {
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
padding:32px;
}
.oc-market-review-hero h1 { font-size: clamp(2rem,3vw,3.2rem); }
.oc-review-actions { display:flex; flex-wrap:wrap; gap:10px; }
.oc-review-banner-preview {
min-height: 260px;
border-radius: 24px;
overflow:hidden;
display:flex;
align-items:flex-end;
padding:18px;
color:#fff;
font-weight:1000;
background-image:
linear-gradient(90deg, rgba(7,8,20,.90), rgba(22,12,46,.50)),
var(--download-banner),
linear-gradient(135deg, rgba(139,92,246,.35), rgba(15,23,42,.92));
background-size:cover;
background-position:center;
border:1px solid rgba(139,92,246,.22);
}
.oc-review-listing-head {
display:flex;
justify-content:space-between;
gap:18px;
margin-top:20px;
}
.oc-review-listing-head h2 { font-size:2.2rem; letter-spacing:-.04em; }
.oc-review-description {
margin-top:18px;
border-radius:22px;
background:rgba(139,92,246,.06);
border:1px solid rgba(139,92,246,.14);
padding:18px;
}
.oc-review-file-row {
display:flex;
flex-direction:column;
gap:12px;
}
@media (min-width: 760px) { .oc-review-file-row { flex-direction:row; align-items:center; justify-content:space-between; } }
.oc-review-ticket h3 { color:#171326; font-size:1.2rem; font-weight:950; margin-top:10px; }
.oc-review-ticket p { color:#554b66; }
.oc-review-case-message {
margin-top:12px;
border-radius:18px;
border:1px solid rgba(139,92,246,.16);
background:rgba(255,255,255,.68);
padding:12px;
}
.oc-review-case-message div { color:#7c3aed; font-weight:900; font-size:.8rem; }
.oc-review-case-message p { margin-top:4px; color:#251f33; }
.oc-status-pill {
display:inline-flex;
align-items:center;
border-radius:999px;
border:1px solid rgba(139,92,246,.2);
padding:.35rem .7rem;
font-size:.75rem;
font-weight:950;
}
.oc-status-good { background:rgba(34,197,94,.12); color:#047857; border-color:rgba(34,197,94,.28); }
.oc-status-warn { background:rgba(245,158,11,.12); color:#92400e; border-color:rgba(245,158,11,.30); }
.oc-status-bad { background:rgba(239,68,68,.12); color:#991b1b; border-color:rgba(239,68,68,.30); }
.oc-status-muted { background:rgba(100,116,139,.12); color:#475569; border-color:rgba(100,116,139,.25); }
.oc-check-label {
display:flex;
align-items:center;
gap:.55rem;
border-radius:18px;
border:1px solid rgba(139,92,246,.16);
background:rgba(139,92,246,.06);
padding:.85rem 1rem;
color:#251f33;
font-weight:900;
}
.oc-featured-check { justify-content:flex-start; }
html[data-theme="dark"] .oc-market-card,
html[data-theme="dark"] .oc-panel-modern,
html[data-theme="dark"] .staff-card {
background: rgba(10,12,26,.82) !important;
border-color: rgba(167,139,250,.22) !important;
color:#f8f5ff !important;
}
html[data-theme="dark"] .oc-market-upload-card,
html[data-theme="dark"] .oc-download-main-card,
html[data-theme="dark"] .oc-download-details-card,
html[data-theme="dark"] .oc-review-description,
html[data-theme="dark"] .oc-review-case-message,
html[data-theme="dark"] .oc-check-label {
background: rgba(15,23,42,.72) !important;
color:#f8f5ff !important;
border-color: rgba(167,139,250,.22) !important;
}
html[data-theme="dark"] .oc-market-upload-card span,
html[data-theme="dark"] .oc-market-upload-card input,
html[data-theme="dark"] .oc-review-ticket h3,
html[data-theme="dark"] .oc-review-case-message p,
html[data-theme="dark"] .oc-download-description { color:#f8f5ff !important; }
html[data-theme="dark"] .oc-market-upload-card small,
html[data-theme="dark"] .oc-review-ticket p { color:#c7c3d8 !important; }
html[data-theme="dark"] .oc-status-good { color:#86efac; }
html[data-theme="dark"] .oc-status-warn { color:#fde68a; }
html[data-theme="dark"] .oc-status-bad { color:#fca5a5; }
html[data-theme="dark"] .oc-status-muted { color:#cbd5e1; }
@media (max-width: 900px) {
.oc-market-submit-hero,
.oc-download-product-hero { grid-template-columns:1fr; }
.oc-market-submit-steps,
.oc-market-image-grid { grid-template-columns:1fr; }
.oc-download-hero-card { min-height:160px; justify-items:start; padding:20px; }
.oc-market-review-hero { flex-direction:column; align-items:flex-start; }
}
/* v46 marketplace product/review/services readability cleanup */
html[data-theme="light"] .oc-market-review-page,
html[data-theme="light"] .oc-download-product-page,
html[data-theme="light"] .oc-plugins-page,
html[data-theme="light"] .oc-staff-market-page {
color: #171326 !important;
}
/* Staff downloads queue */
.oc-staff-market-hero {
min-height: 170px;
}
.oc-staff-market-hero .staff-btn,
.oc-staff-market-hero a.staff-btn,
.oc-review-actions .staff-btn {
text-decoration: none !important;
border-radius: 14px !important;
padding: .8rem 1rem !important;
font-weight: 950 !important;
line-height: 1 !important;
}
html[data-theme="light"] .oc-staff-market-hero h1,
html[data-theme="light"] .oc-staff-market-hero p,
html[data-theme="light"] .oc-staff-market-hero .staff-kicker {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
opacity: 1 !important;
text-shadow: none !important;
}
html[data-theme="light"] .oc-staff-market-hero p {
color: #efe7ff !important;
-webkit-text-fill-color: #efe7ff !important;
}
html[data-theme="light"] .oc-staff-market-hero .staff-btn-muted,
html[data-theme="light"] .oc-staff-market-hero .staff-btn-primary {
color: #fff !important;
-webkit-text-fill-color:#fff !important;
background: rgba(139,92,246,.92) !important;
border: 1px solid rgba(255,255,255,.22) !important;
}
html[data-theme="light"] .oc-staff-market-panel,
html[data-theme="light"] .oc-staff-market-filter,
html[data-theme="light"] .oc-market-empty {
background: rgba(255,255,255,.94) !important;
border: 1px solid rgba(139,92,246,.18) !important;
color: #171326 !important;
-webkit-text-fill-color: initial !important;
border-radius: 24px !important;
}
html[data-theme="light"] .oc-staff-market-filter label,
html[data-theme="light"] .oc-staff-market-filter span,
html[data-theme="light"] .oc-staff-market-filter input,
html[data-theme="light"] .oc-staff-market-filter select,
html[data-theme="light"] .oc-staff-market-filter option {
color: #171326 !important;
-webkit-text-fill-color:#171326 !important;
opacity:1 !important;
}
html[data-theme="light"] .oc-staff-market-filter input::placeholder { color:#776b92 !important; -webkit-text-fill-color:#776b92 !important; }
/* Public plugin/mod product page */
.oc-download-product-hero {
border-radius: 30px !important;
}
html[data-theme="light"] .oc-download-product-hero {
background-image:
linear-gradient(90deg, rgba(7,8,20,.96), rgba(19,12,42,.86) 52%, rgba(50,25,84,.74)),
var(--download-banner),
radial-gradient(circle at 85% 12%, rgba(139,92,246,.38), transparent 36%),
linear-gradient(135deg, #0a0b18, #21113f) !important;
color:#fff !important;
}
html[data-theme="light"] .oc-download-product-hero h1,
html[data-theme="light"] .oc-download-product-hero p,
html[data-theme="light"] .oc-download-product-hero .oc-download-type,
html[data-theme="light"] .oc-download-product-hero .oc-download-show-meta span,
html[data-theme="light"] .oc-download-product-hero .oc-download-hero-card strong,
html[data-theme="light"] .oc-download-product-hero .oc-download-hero-card span {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
opacity:1 !important;
}
html[data-theme="light"] .oc-download-product-hero p,
html[data-theme="light"] .oc-download-product-hero .oc-download-hero-card span { color:#e9ddff !important; -webkit-text-fill-color:#e9ddff !important; }
html[data-theme="light"] .oc-download-main-card,
html[data-theme="light"] .oc-download-details-card,
html[data-theme="light"] .oc-download-gallery-panel {
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(139,92,246,.16) !important;
color: #171326 !important;
box-shadow: 0 18px 60px rgba(88,58,140,.08) !important;
}
html[data-theme="light"] .oc-download-main-card h2,
html[data-theme="light"] .oc-download-details-card h3,
html[data-theme="light"] .oc-download-description,
html[data-theme="light"] .oc-download-description *,
html[data-theme="light"] .oc-file-row strong,
html[data-theme="light"] .oc-kv-list strong {
color:#171326 !important;
-webkit-text-fill-color:#171326 !important;
opacity:1 !important;
}
html[data-theme="light"] .oc-file-row span,
html[data-theme="light"] .oc-kv-list span,
html[data-theme="light"] .oc-muted { color:#5f5874 !important; -webkit-text-fill-color:#5f5874 !important; }
/* Staff download review detail */
html[data-theme="light"] .oc-market-review-page .staff-card,
html[data-theme="light"] .oc-market-review-page .staff-item,
html[data-theme="light"] .oc-market-review-page .oc-review-description,
html[data-theme="light"] .oc-market-review-page .oc-review-case-message,
html[data-theme="light"] .oc-market-review-page .oc-check-label,
html[data-theme="light"] .oc-market-review-page .oc-review-decision-card,
html[data-theme="light"] .oc-market-review-page .oc-review-preview-card {
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(139,92,246,.16) !important;
color:#171326 !important;
box-shadow: 0 18px 60px rgba(88,58,140,.08) !important;
}
html[data-theme="light"] .oc-market-review-page h1,
html[data-theme="light"] .oc-market-review-page h2,
html[data-theme="light"] .oc-market-review-page h3,
html[data-theme="light"] .oc-market-review-page strong,
html[data-theme="light"] .oc-market-review-page .staff-section-title,
html[data-theme="light"] .oc-market-review-page .oc-review-listing-head h2,
html[data-theme="light"] .oc-market-review-page .oc-review-description h3,
html[data-theme="light"] .oc-market-review-page .oc-markup,
html[data-theme="light"] .oc-market-review-page .oc-markup * {
color:#171326 !important;
-webkit-text-fill-color:#171326 !important;
opacity:1 !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-market-review-page p,
html[data-theme="light"] .oc-market-review-page span,
html[data-theme="light"] .oc-market-review-page .text-xs,
html[data-theme="light"] .oc-market-review-page .staff-muted,
html[data-theme="light"] .oc-market-review-page .oc-review-ticket p,
html[data-theme="light"] .oc-market-review-page .oc-review-listing-head p {
color:#5f5874 !important;
-webkit-text-fill-color:#5f5874 !important;
opacity:1 !important;
}
html[data-theme="light"] .oc-market-review-page .staff-field,
html[data-theme="light"] .oc-market-review-page textarea,
html[data-theme="light"] .oc-market-review-page select,
html[data-theme="light"] .oc-market-review-page input {
background:#fff !important;
color:#171326 !important;
-webkit-text-fill-color:#171326 !important;
border:1px solid rgba(139,92,246,.22) !important;
}
html[data-theme="light"] .oc-market-review-page textarea::placeholder { color:#776b92 !important; -webkit-text-fill-color:#776b92 !important; }
html[data-theme="light"] .oc-review-banner-preview {
background-image:
linear-gradient(90deg, rgba(7,8,20,.78), rgba(22,12,46,.42)),
var(--download-banner),
linear-gradient(135deg, rgba(139,92,246,.22), rgba(255,255,255,.95)) !important;
}
html[data-theme="light"] .oc-review-banner-preview span { color:#fff !important; -webkit-text-fill-color:#fff !important; }
/* Plugins & Mods landing */
.oc-plugins-landing-hero {
min-height: auto !important;
padding: clamp(28px, 4vw, 44px) !important;
border-radius: 30px !important;
}
.oc-plugins-hero-copy h1 { margin-bottom: .65rem !important; }
html[data-theme="light"] .oc-plugins-landing-hero {
background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,239,255,.92) 55%, rgba(237,226,255,.9)) !important;
color:#171326 !important;
border:1px solid rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-plugins-landing-hero h1,
html[data-theme="light"] .oc-plugins-landing-hero p,
html[data-theme="light"] .oc-plugins-landing-hero strong,
html[data-theme="light"] .oc-plugins-landing-hero span {
color:#171326 !important;
-webkit-text-fill-color:#171326 !important;
opacity:1 !important;
}
html[data-theme="light"] .oc-plugins-hero-cards > div {
background:rgba(255,255,255,.92) !important;
border:1px solid rgba(139,92,246,.18) !important;
color:#171326 !important;
}
html[data-theme="light"] .oc-featured-downloads-panel,
html[data-theme="light"] .oc-all-downloads-panel {
border-radius:28px !important;
background:rgba(255,255,255,.96) !important;
border:1px solid rgba(139,92,246,.16) !important;
}
html[data-theme="light"] .oc-featured-downloads-panel h2,
html[data-theme="light"] .oc-all-downloads-panel h2,
html[data-theme="light"] .oc-featured-downloads-panel p,
html[data-theme="light"] .oc-all-downloads-panel p,
html[data-theme="light"] .oc-empty-modern,
html[data-theme="light"] .oc-empty-modern strong,
html[data-theme="light"] .oc-empty-modern span {
color:#171326 !important;
-webkit-text-fill-color:#171326 !important;
opacity:1 !important;
}
html[data-theme="light"] .oc-empty-modern span { color:#5f5874 !important; -webkit-text-fill-color:#5f5874 !important; }
/* Services browse light-mode contrast */
html[data-theme="light"] .services-page,
html[data-theme="light"] .services-page * {
text-shadow: none !important;
}
html[data-theme="light"] .services-page h1,
html[data-theme="light"] .services-page h2,
html[data-theme="light"] .services-page h3,
html[data-theme="light"] .services-page strong,
html[data-theme="light"] .services-page .text-3xl,
html[data-theme="light"] .services-page .text-2xl,
html[data-theme="light"] .services-page .font-black {
color:#171326 !important;
-webkit-text-fill-color:#171326 !important;
opacity:1 !important;
}
html[data-theme="light"] .services-page p,
html[data-theme="light"] .services-page span,
html[data-theme="light"] .services-page label,
html[data-theme="light"] .services-page .text-slate-300,
html[data-theme="light"] .services-page .text-slate-400,
html[data-theme="light"] .services-page .text-slate-500 {
color:#5f5874 !important;
-webkit-text-fill-color:#5f5874 !important;
opacity:1 !important;
}
html[data-theme="light"] .services-page .bg-slate-950,
html[data-theme="light"] .services-page .bg-slate-950\/55,
html[data-theme="light"] .services-page .bg-white\/\[0\.04\] {
background:rgba(255,255,255,.96) !important;
border-color:rgba(139,92,246,.16) !important;
}
html[data-theme="light"] .services-page input,
html[data-theme="light"] .services-page select {
background:#fff !important;
color:#171326 !important;
-webkit-text-fill-color:#171326 !important;
border-color:rgba(139,92,246,.22) !important;
}
/* v49 emergency light-mode reset: readable surfaces, dropdowns, and CTAs */
html[data-theme="light"] {
--oc-light-text:#171322;
--oc-light-muted:#514963;
--oc-light-panel:#ffffff;
--oc-light-panel-2:#f8f4ff;
--oc-light-border:rgba(124,58,237,.18);
--oc-light-purple:#7c3aed;
--oc-light-purple-2:#a855f7;
}
/* Header / brand / account */
html[data-theme="light"] .oc-header,
html[data-theme="light"] .site-header,
html[data-theme="light"] header.oc-header {
background:rgba(255,255,255,.92) !important;
border-bottom:1px solid var(--oc-light-border) !important;
color:var(--oc-light-text) !important;
}
html[data-theme="light"] .oc-brand-name,
html[data-theme="light"] .oc-brand-line,
html[data-theme="light"] .oc-header a,
html[data-theme="light"] .oc-header button,
html[data-theme="light"] .oc-nav-link,
html[data-theme="light"] .oc-nav-dropdown > summary,
html[data-theme="light"] .oc-user-menu,
html[data-theme="light"] .oc-user-menu *,
html[data-theme="light"] .oc-account-chip,
html[data-theme="light"] .oc-account-chip * {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-brand-line {
color:#5b526b !important;
-webkit-text-fill-color:#5b526b !important;
}
html[data-theme="light"] .oc-user-menu,
html[data-theme="light"] .oc-account-chip,
html[data-theme="light"] .oc-theme-toggle {
background:#fff !important;
border:1px solid var(--oc-light-border) !important;
box-shadow:0 10px 25px rgba(88,28,135,.10) !important;
}
html[data-theme="light"] .oc-theme-toggle {
background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
html[data-theme="light"] .oc-theme-toggle * {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
/* Dropdown menus: never black-on-black in light mode */
html[data-theme="light"] .oc-dropdown-panel,
html[data-theme="light"] .oc-marketplace-menu,
html[data-theme="light"] .oc-nav-dropdown[open] .oc-dropdown-panel,
html[data-theme="light"] details[open] > .oc-dropdown-panel {
background:#fff !important;
color:var(--oc-light-text) !important;
border:1px solid rgba(124,58,237,.22) !important;
box-shadow:0 22px 60px rgba(88,28,135,.18) !important;
}
html[data-theme="light"] .oc-dropdown-panel *,
html[data-theme="light"] .oc-marketplace-menu *,
html[data-theme="light"] details[open] > .oc-dropdown-panel * {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-dropdown-feature,
html[data-theme="light"] .oc-dropdown-panel a,
html[data-theme="light"] .oc-marketplace-menu a {
background:linear-gradient(135deg,#ffffff,#f5efff) !important;
border:1px solid rgba(124,58,237,.16) !important;
border-radius:14px !important;
}
html[data-theme="light"] .oc-dropdown-panel a:hover,
html[data-theme="light"] .oc-marketplace-menu a:hover {
background:linear-gradient(135deg,#f2eaff,#eadcff) !important;
}
/* General CTA/buttons in light mode */
html[data-theme="light"] a.oc-btn-primary,
html[data-theme="light"] button.oc-btn-primary,
html[data-theme="light"] .oc-btn-primary,
html[data-theme="light"] .staff-btn-primary,
html[data-theme="light"] .oc-nav-action,
html[data-theme="light"] input[type="submit"],
html[data-theme="light"] button[type="submit"],
html[data-theme="light"] .btn-primary {
background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
border:1px solid rgba(124,58,237,.35) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
box-shadow:0 14px 30px rgba(124,58,237,.22) !important;
text-shadow:none !important;
}
html[data-theme="light"] a.oc-btn-secondary,
html[data-theme="light"] button.oc-btn-secondary,
html[data-theme="light"] .oc-btn-secondary,
html[data-theme="light"] .staff-btn-muted,
html[data-theme="light"] .btn-secondary {
background:#fff !important;
border:1px solid rgba(124,58,237,.22) !important;
color:#211a32 !important;
-webkit-text-fill-color:#211a32 !important;
box-shadow:0 10px 22px rgba(88,28,135,.08) !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-btn-primary *,
html[data-theme="light"] .staff-btn-primary *,
html[data-theme="light"] .oc-nav-action * {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
/* Homepage hero remains dark readable; homepage panels readable */
html[data-theme="light"] .oc-hero-modern,
html[data-theme="light"] .oc-home-hero,
html[data-theme="light"] .home-hero {
color:#fff !important;
}
html[data-theme="light"] .oc-hero-modern h1,
html[data-theme="light"] .oc-hero-modern h2,
html[data-theme="light"] .oc-hero-modern p,
html[data-theme="light"] .oc-hero-modern span,
html[data-theme="light"] .oc-hero-modern strong,
html[data-theme="light"] .oc-home-hero h1,
html[data-theme="light"] .oc-home-hero p {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
opacity:1 !important;
text-shadow:0 2px 16px rgba(0,0,0,.35) !important;
}
html[data-theme="light"] .oc-hero-modern .oc-gradient-text,
html[data-theme="light"] .oc-hero-modern em {
color:#b866ff !important;
-webkit-text-fill-color:#b866ff !important;
}
html[data-theme="light"] .oc-home-panel-modern,
html[data-theme="light"] .oc-section-card,
html[data-theme="light"] .oc-trust-card-modern,
html[data-theme="light"] .oc-route-grid-modern a,
html[data-theme="light"] .oc-service-card-modern,
html[data-theme="light"] .oc-discord-cta-modern {
background:#fff !important;
border:1px solid rgba(124,58,237,.14) !important;
color:var(--oc-light-text) !important;
}
html[data-theme="light"] .oc-home-panel-modern *,
html[data-theme="light"] .oc-section-card *,
html[data-theme="light"] .oc-trust-card-modern *,
html[data-theme="light"] .oc-route-grid-modern a *,
html[data-theme="light"] .oc-service-card-modern *,
html[data-theme="light"] .oc-discord-cta-modern * {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-home-panel-modern p,
html[data-theme="light"] .oc-service-card-modern p,
html[data-theme="light"] .oc-discord-cta-modern p,
html[data-theme="light"] .oc-home-panel-modern em {
color:var(--oc-light-muted) !important;
-webkit-text-fill-color:var(--oc-light-muted) !important;
}
html[data-theme="light"] .oc-discord-cta-modern .oc-btn-primary,
html[data-theme="light"] .oc-home-panel-modern .oc-btn-primary {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
/* Light mode form fields: typed text must always be visible */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] option {
background:#fff !important;
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
border-color:rgba(124,58,237,.22) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
color:#766b8d !important;
-webkit-text-fill-color:#766b8d !important;
opacity:1 !important;
}
html[data-theme="light"] label,
html[data-theme="light"] .form-label,
html[data-theme="light"] .field-label {
color:#4a415d !important;
-webkit-text-fill-color:#4a415d !important;
opacity:1 !important;
}
/* Services, marketplace, reports, appeals, staff, partner pages should default light/readable */
html[data-theme="light"] .services-page,
html[data-theme="light"] .oc-plugins-page,
html[data-theme="light"] .oc-market-submit-page,
html[data-theme="light"] .oc-market-review-page,
html[data-theme="light"] .oc-download-product-page,
html[data-theme="light"] .staff-page,
html[data-theme="light"] .staff-shell,
html[data-theme="light"] .reports-page,
html[data-theme="light"] .appeals-page,
html[data-theme="light"] .partner-ads-page {
color:var(--oc-light-text) !important;
}
html[data-theme="light"] .services-page h1,
html[data-theme="light"] .services-page h2,
html[data-theme="light"] .services-page h3,
html[data-theme="light"] .oc-plugins-page h1,
html[data-theme="light"] .oc-plugins-page h2,
html[data-theme="light"] .oc-market-submit-page h1,
html[data-theme="light"] .oc-market-submit-page h2,
html[data-theme="light"] .oc-market-review-page h1,
html[data-theme="light"] .oc-market-review-page h2,
html[data-theme="light"] .oc-download-product-page h1,
html[data-theme="light"] .oc-download-product-page h2,
html[data-theme="light"] .staff-page h1,
html[data-theme="light"] .reports-page h1,
html[data-theme="light"] .appeals-page h1,
html[data-theme="light"] .partner-ads-page h1 {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
text-shadow:none !important;
}
/* Light page heroes must not be black/green slabs except homepage castle hero */
html[data-theme="light"] .services-page .rounded-\[2rem\],
html[data-theme="light"] .oc-plugins-landing-hero,
html[data-theme="light"] .oc-market-submit-hero,
html[data-theme="light"] .staff-hero,
html[data-theme="light"] .reports-hero,
html[data-theme="light"] .appeals-hero,
html[data-theme="light"] .partner-hero {
background:linear-gradient(135deg,#ffffff 0%,#f7f1ff 54%,#ece0ff 100%) !important;
border:1px solid rgba(124,58,237,.18) !important;
box-shadow:0 18px 55px rgba(88,28,135,.10) !important;
color:var(--oc-light-text) !important;
}
html[data-theme="light"] .services-page .rounded-\[2rem\] *,
html[data-theme="light"] .oc-plugins-landing-hero *,
html[data-theme="light"] .oc-market-submit-hero *,
html[data-theme="light"] .staff-hero *,
html[data-theme="light"] .reports-hero *,
html[data-theme="light"] .appeals-hero *,
html[data-theme="light"] .partner-hero * {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-market-submit-hero,
html[data-theme="light"] .oc-plugins-landing-hero {
min-height:unset !important;
padding:clamp(28px,4vw,44px) !important;
}
html[data-theme="light"] .oc-market-submit-steps { display:none !important; }
/* Marketplace operations review page: use the good CTA size but readable colors */
html[data-theme="light"] .oc-staff-market-hero,
html[data-theme="light"] .oc-market-review-hero {
background:linear-gradient(135deg,#ffffff 0%,#f7f1ff 52%,#ecddff 100%) !important;
color:var(--oc-light-text) !important;
border:1px solid rgba(124,58,237,.18) !important;
}
html[data-theme="light"] .oc-staff-market-hero *,
html[data-theme="light"] .oc-market-review-hero * {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-staff-market-hero .staff-btn-primary,
html[data-theme="light"] .oc-market-review-hero .staff-btn-primary {
background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
html[data-theme="light"] .oc-staff-market-filter { padding-bottom:20px !important; }
/* Product/download preview: avoid atrocious mixed dark/light */
html[data-theme="light"] .oc-download-product-hero {
background:linear-gradient(135deg,#ffffff 0%,#f7f1ff 55%,#eadcff 100%) !important;
color:var(--oc-light-text) !important;
border:1px solid rgba(124,58,237,.18) !important;
}
html[data-theme="light"] .oc-download-product-hero * {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-download-product-hero .oc-download-type,
html[data-theme="light"] .oc-download-product-hero .oc-status-pill {
background:#efe5ff !important;
border:1px solid rgba(124,58,237,.20) !important;
color:#6d28d9 !important;
-webkit-text-fill-color:#6d28d9 !important;
}
/* Restore contrast in existing dark-mode-only utility classes when light */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-50,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-zinc-100,
html[data-theme="light"] .text-neutral-100 {
color:var(--oc-light-text) !important;
-webkit-text-fill-color:var(--oc-light-text) !important;
opacity:1 !important;
}
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-zinc-300,
html[data-theme="light"] .text-neutral-300 {
color:var(--oc-light-muted) !important;
-webkit-text-fill-color:var(--oc-light-muted) !important;
opacity:1 !important;
}
/* Guide headers too tall */
.guide-hero,
.oc-guide-hero,
.article-hero,
.guide-cover-hero {
max-height:360px !important;
min-height:220px !important;
}
/* v51 targeted light-mode repairs: review headers, profile manager, guides */
html[data-theme="light"] {
--oc-v51-text:#171326;
--oc-v51-muted:#5f5874;
--oc-v51-soft:#fff;
--oc-v51-panel:#fbf8ff;
--oc-v51-border:rgba(124,58,237,.18);
--oc-v51-purple:#7c3aed;
}
/* Staff download review / marketplace operations: readable light headers */
html[data-theme="light"] .oc-staff-market-page .oc-staff-market-hero,
html[data-theme="light"] .oc-market-review-page .oc-market-review-hero,
html[data-theme="light"] .staff-shell.oc-market-review-page .oc-market-review-hero {
background:linear-gradient(135deg,#ffffff 0%,#f8f2ff 52%,#eadcff 100%) !important;
border:1px solid var(--oc-v51-border) !important;
box-shadow:0 18px 55px rgba(88,28,135,.10) !important;
color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-staff-market-page .oc-staff-market-hero h1,
html[data-theme="light"] .oc-market-review-page .oc-market-review-hero h1,
html[data-theme="light"] .staff-shell.oc-market-review-page .oc-market-review-hero h1,
html[data-theme="light"] .oc-staff-market-page .oc-staff-market-hero p,
html[data-theme="light"] .oc-market-review-page .oc-market-review-hero p,
html[data-theme="light"] .staff-shell.oc-market-review-page .oc-market-review-hero p,
html[data-theme="light"] .oc-staff-market-page .oc-staff-market-hero .staff-kicker,
html[data-theme="light"] .oc-market-review-page .oc-market-review-hero .staff-kicker {
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
text-shadow:none !important;
opacity:1 !important;
}
html[data-theme="light"] .oc-staff-market-page .oc-staff-market-hero .staff-kicker,
html[data-theme="light"] .oc-market-review-page .oc-market-review-hero .staff-kicker {
color:var(--oc-v51-purple) !important;
-webkit-text-fill-color:var(--oc-v51-purple) !important;
}
html[data-theme="light"] .oc-staff-market-page .staff-card,
html[data-theme="light"] .oc-market-review-page .staff-card,
html[data-theme="light"] .oc-staff-market-panel,
html[data-theme="light"] .oc-review-preview-card,
html[data-theme="light"] .oc-review-decision-card {
background:#fff !important;
border:1px solid var(--oc-v51-border) !important;
color:var(--oc-v51-text) !important;
box-shadow:0 16px 45px rgba(88,28,135,.08) !important;
}
html[data-theme="light"] .oc-market-review-page .staff-card *,
html[data-theme="light"] .oc-staff-market-page .staff-card *,
html[data-theme="light"] .oc-staff-market-panel * {
text-shadow:none !important;
}
html[data-theme="light"] .oc-market-review-page h2,
html[data-theme="light"] .oc-market-review-page h3,
html[data-theme="light"] .oc-market-review-page .staff-section-title,
html[data-theme="light"] .oc-staff-market-page h2,
html[data-theme="light"] .oc-staff-market-page h3 {
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-market-review-page p,
html[data-theme="light"] .oc-market-review-page .staff-muted,
html[data-theme="light"] .oc-staff-market-page p,
html[data-theme="light"] .oc-staff-market-page .staff-muted {
color:var(--oc-v51-muted) !important;
-webkit-text-fill-color:var(--oc-v51-muted) !important;
}
html[data-theme="light"] .oc-market-review-page .oc-status-pill,
html[data-theme="light"] .oc-staff-market-page .oc-status-pill,
html[data-theme="light"] .oc-staff-market-page .inline-flex.rounded-full.border {
color:#4c1d95 !important;
-webkit-text-fill-color:#4c1d95 !important;
background:#f0e7ff !important;
border-color:rgba(124,58,237,.24) !important;
}
/* Profile / manage services page: no black hero in light mode */
html[data-theme="light"] .oc-profile-editor-page > .overflow-hidden.rounded-\[2rem\],
html[data-theme="light"] .oc-profile-editor-page .relative.border-b {
background:linear-gradient(135deg,#ffffff 0%,#f8f2ff 55%,#eadcff 100%) !important;
border-color:var(--oc-v51-border) !important;
color:var(--oc-v51-text) !important;
box-shadow:0 18px 55px rgba(88,28,135,.10) !important;
}
html[data-theme="light"] .oc-profile-editor-page .relative.border-b h1,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b p,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b a,
html[data-theme="light"] .oc-profile-editor-page .relative.border-b span:not(.rounded-full) {
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-profile-editor-page aside,
html[data-theme="light"] .oc-profile-editor-page main,
html[data-theme="light"] .oc-profile-editor-page .rounded-\[2rem\],
html[data-theme="light"] .oc-profile-editor-page .rounded-3xl,
html[data-theme="light"] .oc-profile-editor-page .rounded-2xl {
border-color:rgba(124,58,237,.16) !important;
}
html[data-theme="light"] .oc-profile-editor-page aside,
html[data-theme="light"] .oc-profile-editor-page main {
background:#fff !important;
color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-profile-editor-page main .rounded-\[2rem\],
html[data-theme="light"] .oc-profile-editor-page aside .rounded-3xl,
html[data-theme="light"] .oc-profile-editor-page .bg-white\/\[0\.04\],
html[data-theme="light"] .oc-profile-editor-page .bg-slate-900\/80,
html[data-theme="light"] .oc-profile-editor-page .bg-slate-950\/40,
html[data-theme="light"] .oc-profile-editor-page .bg-slate-950\/70 {
background:#fbf8ff !important;
color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-profile-editor-page h1,
html[data-theme="light"] .oc-profile-editor-page h2,
html[data-theme="light"] .oc-profile-editor-page h3,
html[data-theme="light"] .oc-profile-editor-page .text-white,
html[data-theme="light"] .oc-profile-editor-page .text-slate-100,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button span:first-child span:first-child {
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-profile-editor-page p,
html[data-theme="light"] .oc-profile-editor-page .text-slate-300,
html[data-theme="light"] .oc-profile-editor-page .text-slate-400,
html[data-theme="light"] .oc-profile-editor-page .text-slate-500,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button span:first-child span:last-child {
color:var(--oc-v51-muted) !important;
-webkit-text-fill-color:var(--oc-v51-muted) !important;
}
html[data-theme="light"] .oc-profile-editor-page .rounded-2xl.bg-slate-900\/80 .text-lg,
html[data-theme="light"] .oc-profile-editor-page .rounded-2xl.bg-slate-900\/80 div:first-child {
color:#4c1d95 !important;
-webkit-text-fill-color:#4c1d95 !important;
}
html[data-theme="light"] .oc-profile-editor-page a.rounded-2xl,
html[data-theme="light"] .oc-profile-editor-page button.rounded-2xl,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button.is-active {
background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border-color:rgba(124,58,237,.35) !important;
}
html[data-theme="light"] .oc-profile-editor-page a.rounded-2xl *,
html[data-theme="light"] .oc-profile-editor-page button.rounded-2xl * {
color:inherit !important;
-webkit-text-fill-color:inherit !important;
}
html[data-theme="light"] .oc-profile-editor-page input,
html[data-theme="light"] .oc-profile-editor-page textarea,
html[data-theme="light"] .oc-profile-editor-page select {
background:#fff !important;
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
}
/* Guides: light mode must not inherit dark guide article backgrounds */
html[data-theme="light"] .oc-guide-page,
html[data-theme="light"] .oc-guide-shell,
html[data-theme="light"] .oc-guide-page article,
html[data-theme="light"] .guide-content {
color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-guide-page article,
html[data-theme="light"] .oc-guide-shell.overflow-hidden,
html[data-theme="light"] .oc-guide-page .border-b,
html[data-theme="light"] .guide-content,
html[data-theme="light"] .oc-guide-shell > div,
html[data-theme="light"] .oc-guide-shell > section,
html[data-theme="light"] .oc-guide-shell > article {
background:#fff !important;
border-color:var(--oc-v51-border) !important;
color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-guide-page h1,
html[data-theme="light"] .oc-guide-page h2,
html[data-theme="light"] .oc-guide-page h3,
html[data-theme="light"] .oc-guide-page h4,
html[data-theme="light"] .oc-guide-page .guide-content h1,
html[data-theme="light"] .oc-guide-page .guide-content h2,
html[data-theme="light"] .oc-guide-page .guide-content h3,
html[data-theme="light"] .oc-guide-shell .text-white,
html[data-theme="light"] .oc-guide-shell .text-slate-100,
html[data-theme="light"] .oc-guide-shell .text-slate-200 {
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-guide-page p,
html[data-theme="light"] .oc-guide-page li,
html[data-theme="light"] .oc-guide-page .guide-content p,
html[data-theme="light"] .oc-guide-page .guide-content li,
html[data-theme="light"] .oc-guide-shell .text-slate-300,
html[data-theme="light"] .oc-guide-shell .text-slate-400,
html[data-theme="light"] .oc-guide-shell .text-slate-500 {
color:var(--oc-v51-muted) !important;
-webkit-text-fill-color:var(--oc-v51-muted) !important;
}
html[data-theme="light"] .oc-guide-shell [style*="background"],
html[data-theme="light"] .guide-content [style*="background"] {
background:#fff !important;
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .oc-guide-shell [style*="color"],
html[data-theme="light"] .guide-content [style*="color"] {
color:var(--oc-v51-text) !important;
-webkit-text-fill-color:var(--oc-v51-text) !important;
}
html[data-theme="light"] .guide-content pre,
html[data-theme="light"] .guide-content code,
html[data-theme="light"] .oc-guide-shell pre,
html[data-theme="light"] .oc-guide-shell code {
background:#f3ecff !important;
color:#4c1d95 !important;
-webkit-text-fill-color:#4c1d95 !important;
border-color:rgba(124,58,237,.18) !important;
}
html[data-theme="light"] .oc-guide-page img.aspect-\[1200\/630\] {
max-height:340px !important;
object-fit:cover !important;
}
/* v52 targeted light recovery: guides + profile editor */
:root {
--oc-v52-text:#171225;
--oc-v52-muted:#5f5875;
--oc-v52-soft:#fbf8ff;
--oc-v52-card:#ffffff;
--oc-v52-border:rgba(124,58,237,.18);
--oc-v52-purple:#7c3aed;
}
/* Guides should become real light articles in light mode, not dark guide HTML with unreadable overrides */
html[data-theme="light"] .oc-guide-page,
html[data-theme="light"] .oc-guide-shell {
color:var(--oc-v52-text) !important;
}
html[data-theme="light"] .oc-guide-shell > .oc-guide-block,
html[data-theme="light"] .oc-guide-shell > .topmc-player-guide-block,
html[data-theme="light"] .oc-guide-block,
html[data-theme="light"] .topmc-player-guide-block,
html[data-theme="light"] .oc-guide,
html[data-theme="light"] .oc-guide-content,
html[data-theme="light"] .oc-guide-body,
html[data-theme="light"] .guide-content,
html[data-theme="light"] .tms-sell-server-guide {
background:var(--oc-v52-card) !important;
color:var(--oc-v52-text) !important;
border-color:var(--oc-v52-border) !important;
box-shadow:0 18px 55px rgba(88,28,135,.09) !important;
}
html[data-theme="light"] .oc-guide-header,
html[data-theme="light"] .oc-guide-hero {
background:
radial-gradient(circle at 88% 12%, rgba(168,85,247,.20), transparent 32%),
linear-gradient(135deg,#ffffff 0%,#f7f0ff 54%,#efe3ff 100%) !important;
border:1px solid var(--oc-v52-border) !important;
border-bottom:1px solid var(--oc-v52-border) !important;
color:var(--oc-v52-text) !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-guide-header h1,
html[data-theme="light"] .oc-guide-hero h1,
html[data-theme="light"] .oc-guide-page h1,
html[data-theme="light"] .oc-guide-page h2,
html[data-theme="light"] .oc-guide-page h3,
html[data-theme="light"] .oc-guide-page h4,
html[data-theme="light"] .oc-guide-content h1,
html[data-theme="light"] .oc-guide-content h2,
html[data-theme="light"] .oc-guide-content h3,
html[data-theme="light"] .guide-content h1,
html[data-theme="light"] .guide-content h2,
html[data-theme="light"] .guide-content h3,
html[data-theme="light"] .guide-section h2,
html[data-theme="light"] .guide-section h3,
html[data-theme="light"] .oc-guide-section h2,
html[data-theme="light"] .oc-guide-section h3 {
color:var(--oc-v52-text) !important;
-webkit-text-fill-color:var(--oc-v52-text) !important;
text-shadow:none !important;
border-color:rgba(124,58,237,.18) !important;
}
html[data-theme="light"] .oc-guide-header .subtitle,
html[data-theme="light"] .oc-guide-hero p,
html[data-theme="light"] .oc-guide-page p,
html[data-theme="light"] .oc-guide-page li,
html[data-theme="light"] .oc-guide-page td,
html[data-theme="light"] .oc-guide-page th,
html[data-theme="light"] .oc-guide-body p,
html[data-theme="light"] .oc-guide-body li,
html[data-theme="light"] .oc-guide-content p,
html[data-theme="light"] .oc-guide-content li,
html[data-theme="light"] .guide-content p,
html[data-theme="light"] .guide-content li,
html[data-theme="light"] .guide-section p,
html[data-theme="light"] .oc-guide-section p {
color:var(--oc-v52-muted) !important;
-webkit-text-fill-color:var(--oc-v52-muted) !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-guide-label,
html[data-theme="light"] .oc-guide-eyebrow,
html[data-theme="light"] .guide-kicker,
html[data-theme="light"] .oc-pill,
html[data-theme="light"] .oc-guide-page .rounded-full {
background:#efe3ff !important;
color:#6d28d9 !important;
-webkit-text-fill-color:#6d28d9 !important;
border-color:rgba(124,58,237,.24) !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-guide-nav,
html[data-theme="light"] .oc-quick-nav,
html[data-theme="light"] .guide-grid,
html[data-theme="light"] .guide-tip,
html[data-theme="light"] .guide-warning,
html[data-theme="light"] .guide-section,
html[data-theme="light"] .guide-example,
html[data-theme="light"] .oc-guide-section,
html[data-theme="light"] .oc-guide-summary,
html[data-theme="light"] .oc-guide-callout,
html[data-theme="light"] .oc-card,
html[data-theme="light"] .oc-callout,
html[data-theme="light"] .oc-note,
html[data-theme="light"] .oc-warning,
html[data-theme="light"] .oc-danger,
html[data-theme="light"] .oc-info-panel,
html[data-theme="light"] .oc-danger-box,
html[data-theme="light"] .oc-summary-item,
html[data-theme="light"] .oc-number-card,
html[data-theme="light"] .oc-loop-step,
html[data-theme="light"] .oc-security {
background:var(--oc-v52-soft) !important;
color:var(--oc-v52-text) !important;
border:1px solid var(--oc-v52-border) !important;
box-shadow:none !important;
}
html[data-theme="light"] .oc-guide-nav strong,
html[data-theme="light"] .oc-quick-nav h3,
html[data-theme="light"] .oc-guide-nav a,
html[data-theme="light"] .oc-quick-nav a,
html[data-theme="light"] .oc-guide-page a {
color:#6d28d9 !important;
-webkit-text-fill-color:#6d28d9 !important;
}
html[data-theme="light"] .oc-guide-nav a,
html[data-theme="light"] .oc-quick-nav a {
background:#fff !important;
border-color:rgba(124,58,237,.18) !important;
}
html[data-theme="light"] .oc-guide-page [style*="background"]:not(.oc-guide-header):not(.oc-guide-hero) {
background:var(--oc-v52-soft) !important;
}
html[data-theme="light"] .oc-guide-page [style*="color"] {
color:var(--oc-v52-text) !important;
-webkit-text-fill-color:var(--oc-v52-text) !important;
}
html[data-theme="light"] .oc-guide-page blockquote,
html[data-theme="light"] .oc-guide-page pre,
html[data-theme="light"] .oc-guide-page code {
background:#f3ecff !important;
color:#4c1d95 !important;
-webkit-text-fill-color:#4c1d95 !important;
border-color:rgba(124,58,237,.22) !important;
}
html[data-theme="light"] .oc-guide-page img.aspect-\[1200\/630\] {
max-height:260px !important;
object-fit:cover !important;
}
/* Profile editor light mode: remove the double-box / random white block look */
html[data-theme="light"] .oc-profile-editor-page aside {
background:#fbf8ff !important;
}
html[data-theme="light"] .oc-profile-editor-page main {
background:#fff !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel > .rounded-\[2rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel > .grid > .rounded-\[1\.5rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel > .grid > .rounded-\[1\.75rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel details,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel summary,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .rounded-\[1\.5rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .rounded-\[1\.75rem\] {
background:#ffffff !important;
color:var(--oc-v52-text) !important;
border:1px solid var(--oc-v52-border) !important;
box-shadow:0 12px 36px rgba(88,28,135,.06) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel h2,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel h3,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .font-black,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .font-bold,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .text-white,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .text-slate-100,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .text-slate-200 {
color:var(--oc-v52-text) !important;
-webkit-text-fill-color:var(--oc-v52-text) !important;
text-shadow:none !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel p,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .text-slate-300,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .text-slate-400,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .text-slate-500 {
color:var(--oc-v52-muted) !important;
-webkit-text-fill-color:var(--oc-v52-muted) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel input,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel textarea,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel select {
background:#fff !important;
color:var(--oc-v52-text) !important;
-webkit-text-fill-color:var(--oc-v52-text) !important;
border-color:rgba(124,58,237,.22) !important;
box-shadow:none !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel input::placeholder,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel textarea::placeholder {
color:#8b7ba8 !important;
-webkit-text-fill-color:#8b7ba8 !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button:not(.is-active) {
background:#fff !important;
border-color:rgba(124,58,237,.16) !important;
color:var(--oc-v52-text) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button:not(.is-active) * {
color:inherit !important;
-webkit-text-fill-color:inherit !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button.is-active,
html[data-theme="light"] .oc-profile-editor-page button.bg-emerald-500,
html[data-theme="light"] .oc-profile-editor-page a.bg-emerald-500 {
background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border-color:rgba(124,58,237,.35) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-button.is-active * {
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
/* v53 profile editor light-mode surface cleanup: remove hard white blocks */
html[data-theme="light"] .oc-profile-editor-page main,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel {
background: linear-gradient(180deg, #fbf8ff 0%, #f4edff 100%) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel > .rounded-\[2rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel > .grid > .rounded-\[1\.5rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel > .grid > .rounded-\[1\.75rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel details,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel summary,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .rounded-\[1\.5rem\],
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .rounded-\[1\.75rem\] {
background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(248,244,255,.84)) !important;
border: 1px solid rgba(139,92,246,.20) !important;
box-shadow: 0 18px 44px rgba(88,28,135,.075) !important;
}
/* Keep actual form controls white/readable, not the entire section shell */
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel input,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel textarea,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel select {
background: #fff !important;
color: #171127 !important;
-webkit-text-fill-color: #171127 !important;
border-color: rgba(124,58,237,.24) !important;
box-shadow: 0 6px 18px rgba(88,28,135,.045) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel label.flex,
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .border-t {
background: rgba(255,255,255,.48) !important;
border-color: rgba(139,92,246,.18) !important;
}
html[data-theme="light"] .oc-profile-editor-page .profile-tab-panel .border-dashed {
background: rgba(248,244,255,.72) !important;
border-color: rgba(124,58,237,.28) !important;
color: #5b516f !important;
-webkit-text-fill-color: #5b516f !important;
}
/* v54 dashboard invites: read-only OC Core invite data */
.oc-invite-dashboard {
border: 1px solid rgba(167,139,250,.24);
border-radius: 1.25rem;
padding: 1rem;
background: linear-gradient(145deg, rgba(69,34,116,.34), rgba(18,14,39,.42));
box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.oc-invite-dashboard__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.oc-invite-dashboard__eyebrow { margin:0 0 .2rem; color:#c4b5fd; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:900; }
.oc-invite-dashboard h2 { margin:0; color:#fff; font-size:1.05rem; font-weight:900; }
.oc-invite-dashboard__heading p:not(.oc-invite-dashboard__eyebrow) { margin:.2rem 0 0; color:#c6bfd8; font-size:.82rem; line-height:1.35; }
.oc-invite-dashboard__qualified { min-width:4.5rem; border:1px solid rgba(196,181,253,.24); border-radius:1rem; padding:.45rem .55rem; text-align:center; background:rgba(139,92,246,.17); }
.oc-invite-dashboard__qualified strong { display:block; color:#fff; font-size:1.2rem; line-height:1; }
.oc-invite-dashboard__qualified span { display:block; margin-top:.18rem; color:#ddd6fe; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.oc-invite-dashboard__links { display:grid; gap:.55rem; margin-top:1rem; }
.oc-invite-dashboard__link-row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.7rem .75rem; border:1px solid rgba(255,255,255,.09); border-radius:.9rem; background:rgba(255,255,255,.055); }
.oc-invite-dashboard__link-copy { min-width:0; display:grid; gap:.18rem; }
.oc-invite-dashboard__link-copy span { color:#bfb7d0; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.oc-invite-dashboard__link-copy code { overflow:hidden; color:#fff; font-size:.82rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.oc-invite-dashboard__copy { flex:0 0 auto; border:1px solid rgba(196,181,253,.30); border-radius:.7rem; padding:.48rem .7rem; background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; font-size:.78rem; font-weight:900; cursor:pointer; }
.oc-invite-dashboard__copy:hover { filter:brightness(1.08); }
.oc-invite-dashboard__empty { display:grid; gap:.25rem; margin-top:1rem; padding:.75rem; border:1px dashed rgba(196,181,253,.25); border-radius:.9rem; color:#c6bfd8; font-size:.82rem; }
.oc-invite-dashboard__empty strong { color:#fff; }
.oc-invite-dashboard__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1rem; }
.oc-invite-dashboard__stats > div { padding:.7rem .45rem; border:1px solid rgba(255,255,255,.08); border-radius:.85rem; background:rgba(255,255,255,.045); text-align:center; }
.oc-invite-dashboard__stats strong { display:block; color:#fff; font-size:1.15rem; font-weight:950; }
.oc-invite-dashboard__stats span { display:block; margin-top:.15rem; color:#c6bfd8; font-size:.7rem; font-weight:800; }
.oc-invite-dashboard__note { margin:.75rem 0 0; color:#aaa1be; font-size:.71rem; line-height:1.35; }
html[data-theme="light"] .oc-invite-dashboard { background:linear-gradient(145deg,#f7f1ff,#eee4ff); border-color:rgba(124,58,237,.22); box-shadow:0 14px 34px rgba(88,28,135,.07); }
html[data-theme="light"] .oc-invite-dashboard h2,
html[data-theme="light"] .oc-invite-dashboard__qualified strong,
html[data-theme="light"] .oc-invite-dashboard__link-copy code,
html[data-theme="light"] .oc-invite-dashboard__empty strong,
html[data-theme="light"] .oc-invite-dashboard__stats strong { color:#1b1530 !important; -webkit-text-fill-color:#1b1530 !important; }
html[data-theme="light"] .oc-invite-dashboard__heading p:not(.oc-invite-dashboard__eyebrow),
html[data-theme="light"] .oc-invite-dashboard__empty,
html[data-theme="light"] .oc-invite-dashboard__stats span,
html[data-theme="light"] .oc-invite-dashboard__note { color:#625979 !important; -webkit-text-fill-color:#625979 !important; }
html[data-theme="light"] .oc-invite-dashboard__eyebrow { color:#6d28d9 !important; -webkit-text-fill-color:#6d28d9 !important; }
html[data-theme="light"] .oc-invite-dashboard__qualified,
html[data-theme="light"] .oc-invite-dashboard__link-row,
html[data-theme="light"] .oc-invite-dashboard__stats > div { background:rgba(255,255,255,.68); border-color:rgba(124,58,237,.18); }
html[data-theme="light"] .oc-invite-dashboard__link-copy span { color:#766a91 !important; -webkit-text-fill-color:#766a91 !important; }
html[data-theme="light"] .oc-invite-dashboard__empty { background:rgba(255,255,255,.42); border-color:rgba(124,58,237,.25); }
@media(max-width:520px){.oc-invite-dashboard__heading{align-items:flex-start;flex-direction:column}.oc-invite-dashboard__qualified{min-width:unset}.oc-invite-dashboard__link-row{align-items:stretch;flex-direction:column}.oc-invite-dashboard__copy{width:100%}}
/* v55 marketplace product + review workspace overhaul */
.oc-product-shell,
.oc-review-workspace { --ocx-ink:#1d1730; --ocx-muted:#685e7a; --ocx-line:rgba(124,58,237,.17); --ocx-surface:linear-gradient(150deg,#fff,#f8f5ff); --ocx-soft:#f4edff; color:var(--ocx-ink); }
.oc-product-hero,.oc-review-workspace__header,.oc-product-section,.oc-review-card { border:1px solid var(--ocx-line); box-shadow:0 20px 56px rgba(78,31,135,.08); }
.oc-product-hero { position:relative; isolation:isolate; min-height:260px; display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:stretch; overflow:hidden; border-radius:30px; background:linear-gradient(135deg,#f8f3ff 0%,#eee4ff 58%,#e7ddff 100%); }
.oc-product-hero.has-banner { background-image:var(--product-banner); background-size:cover; background-position:center; }
.oc-product-hero__wash { position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,rgba(250,247,255,.98) 0%,rgba(248,244,255,.91) 44%,rgba(236,225,255,.7) 100%); }
.oc-product-hero.has-banner .oc-product-hero__wash { background:linear-gradient(100deg,rgba(25,14,48,.88) 0%,rgba(41,22,72,.72) 44%,rgba(74,37,120,.36) 100%); }
.oc-product-hero__content { align-self:center; padding:2.45rem 2.6rem; max-width:780px; }
.oc-product-hero__eyebrow,.oc-product-section__heading span,.oc-review-card__heading span,.oc-review-workspace__eyebrow { display:inline-flex; align-items:center; font-weight:950; text-transform:uppercase; letter-spacing:.13em; font-size:.68rem; color:#6d28d9; }
.oc-product-hero h1,.oc-review-workspace h1 { margin:.75rem 0 .6rem; max-width:720px; color:#1c1530; font-size:clamp(2.4rem,5vw,4.25rem); letter-spacing:-.065em; line-height:.94; font-weight:950; }
.oc-product-hero p { margin:0; color:#584d6e; font-size:1.04rem; font-weight:650; line-height:1.6; max-width:610px; }
.oc-product-hero.has-banner h1,.oc-product-hero.has-banner p,.oc-product-hero.has-banner .oc-product-hero__meta { color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.oc-product-hero.has-banner .oc-product-hero__eyebrow { color:#ddd6fe; }
.oc-product-hero__meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.35rem; color:#36274b; font-size:.82rem; font-weight:850; }
.oc-product-hero__meta span,.oc-product-status { padding:.42rem .7rem; border:1px solid rgba(124,58,237,.22); border-radius:999px; background:rgba(255,255,255,.72); }
.oc-product-hero.has-banner .oc-product-hero__meta span { border-color:rgba(255,255,255,.24); background:rgba(18,9,37,.34); }
.oc-product-hero__aside { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.25rem; margin:1rem; padding:1.45rem; border:1px solid rgba(124,58,237,.18); border-radius:24px; background:rgba(255,255,255,.7); box-shadow:0 14px 32px rgba(70,28,124,.07); }
.oc-product-hero.has-banner .oc-product-hero__aside { background:rgba(21,11,43,.57); border-color:rgba(255,255,255,.2); backdrop-filter:blur(10px); }
.oc-product-hero__count { display:grid; gap:.15rem; text-align:center; }
.oc-product-hero__count strong { font-size:3rem; line-height:1; font-weight:950; color:#241837; }
.oc-product-hero__count span { color:#685e7a; font-size:.75rem; text-transform:uppercase; font-weight:900; letter-spacing:.08em; }
.oc-product-hero.has-banner .oc-product-hero__count strong,.oc-product-hero.has-banner .oc-product-hero__count span { color:#fff; }
.oc-product-hero__actions { display:grid; gap:.6rem; width:100%; }
.oc-product-hero__actions a { text-align:center; }
.oc-product-layout { display:grid; gap:1.35rem; grid-template-columns:minmax(0,1.38fr) minmax(300px,.62fr); align-items:start; }
.oc-product-side-stack,.oc-review-workspace__sidebar { display:grid; gap:1.35rem; }
.oc-product-section,.oc-review-card { border-radius:24px; padding:1.55rem; background:var(--ocx-surface); }
.oc-product-section__heading,.oc-review-card__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; }
.oc-product-section__heading h2,.oc-review-card__heading h2 { margin:.28rem 0 0; color:#20172f; font-size:1.42rem; line-height:1.04; letter-spacing:-.035em; font-weight:950; }
.oc-product-copy { color:#4f4662; line-height:1.75; font-size:.98rem; }
.oc-product-facts dl,.oc-review-side-facts dl { display:grid; gap:0; margin:0; }
.oc-product-facts dl>div,.oc-review-side-facts dl>div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid rgba(124,58,237,.13); }
.oc-product-facts dl>div:last-child,.oc-review-side-facts dl>div:last-child { border-bottom:0; }
.oc-product-facts dt,.oc-review-side-facts dt { color:#766a91; font-weight:800; font-size:.84rem; }
.oc-product-facts dd,.oc-review-side-facts dd { margin:0; color:#20172f; font-weight:950; text-align:right; }
.oc-product-file-list,.oc-review-file-list,.oc-product-case-list,.oc-review-ticket-list { display:grid; gap:.75rem; }
.oc-product-file-row,.oc-review-file-row,.oc-product-case-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid rgba(124,58,237,.16); border-radius:16px; background:rgba(255,255,255,.68); }
.oc-product-file-row__copy,.oc-review-file-row>div,.oc-product-case-row>div { min-width:0; display:grid; gap:.25rem; }
.oc-product-file-row strong,.oc-review-file-row strong,.oc-product-case-row strong { color:#211731; font-weight:950; overflow-wrap:anywhere; }
.oc-product-file-row span,.oc-review-file-row span,.oc-product-case-row span,.oc-product-empty,.oc-review-empty { color:#716681; font-size:.82rem; line-height:1.45; }
.oc-product-case-row em { color:#6d28d9; font-size:.75rem; font-style:normal; font-weight:950; white-space:nowrap; }
.oc-product-gallery-grid,.oc-review-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; }
.oc-product-gallery-item,.oc-review-gallery-grid a { display:block; overflow:hidden; border:1px solid rgba(124,58,237,.16); border-radius:16px; background:#ede6ff; aspect-ratio:16/10; }
.oc-product-gallery-item img,.oc-review-gallery-grid img { width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.oc-product-gallery-item:hover img,.oc-review-gallery-grid a:hover img { transform:scale(1.03); }
/* staff review workspace */
.oc-review-workspace__header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.65rem 1.8rem; border-radius:24px; background:linear-gradient(125deg,#fbf8ff,#f0e6ff); }
.oc-review-workspace h1 { font-size:clamp(1.9rem,3.4vw,3rem); margin:.45rem 0; }
.oc-review-workspace__header p { margin:0; color:#685e7a; font-size:.94rem; font-weight:700; }
.oc-review-workspace__header-actions { display:flex; flex-wrap:wrap; gap:.65rem; justify-content:flex-end; }
.oc-review-workspace__grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; gap:1.35rem; }
.oc-review-workspace__main { display:grid; gap:1.35rem; }
.oc-review-listing-card { padding:0; overflow:hidden; }
.oc-review-listing-card__cover { min-height:160px; display:flex; align-items:flex-end; padding:1rem 1.3rem; background:linear-gradient(120deg,#ede6ff,#f7f3ff); border-bottom:1px solid rgba(124,58,237,.16); color:#776d8f; font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.oc-review-listing-card__cover.has-banner { background-image:linear-gradient(0deg,rgba(22,12,42,.58),rgba(22,12,42,.1)),var(--review-banner); background-position:center; background-size:cover; color:#fff; }
.oc-review-listing-card__body { padding:1.45rem; }
.oc-review-listing-card__topline { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#6d28d9; font-size:.72rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.oc-review-listing-card__body h2 { margin:.62rem 0 .35rem; color:#211731; font-size:2rem; letter-spacing:-.05em; font-weight:950; }
.oc-review-listing-card__summary { margin:0; color:#665c79; font-weight:700; }
.oc-review-listing-card__facts { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.oc-review-listing-card__facts span { padding:.38rem .62rem; border:1px solid rgba(124,58,237,.16); border-radius:999px; color:#564b68; background:#f6f1ff; font-size:.76rem; font-weight:850; }
.oc-review-listing-card__description { margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid rgba(124,58,237,.14); }
.oc-review-listing-card__description h3 { margin:0 0 .65rem; color:#211731; font-weight:950; }
.oc-review-listing-card__description .oc-markup { color:#50465f; line-height:1.65; }
.oc-review-ticket { padding:1rem; border:1px solid rgba(124,58,237,.16); border-radius:18px; background:rgba(255,255,255,.58); }
.oc-review-ticket__head { display:flex; justify-content:space-between; gap:1rem; }
.oc-review-ticket__pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.oc-review-ticket h3 { margin:.75rem 0 .2rem; color:#241a35; font-size:1.02rem; font-weight:950; }
.oc-review-ticket p { margin:.25rem 0 0; color:#655b76; line-height:1.55; }
.oc-review-ticket__head>span { color:#7a6e92; font-size:.73rem; white-space:nowrap; }
.oc-review-ticket__message { margin-top:.75rem; padding:.75rem; border-radius:12px; background:#f5f0ff; border-left:3px solid #9d6cff; }
.oc-review-ticket__message strong { color:#402465; font-size:.78rem; }
.oc-review-ticket__message span { margin-left:.45rem; color:#7a6e92; font-size:.72rem; }
.oc-review-ticket__form { display:grid; gap:.65rem; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(124,58,237,.14); }
.oc-review-ticket__form textarea,.oc-review-ticket__form select,.oc-review-decision textarea,.oc-review-decision select { width:100%; border:1px solid rgba(124,58,237,.25); border-radius:12px; padding:.72rem .82rem; color:#211731; background:#fff; box-shadow:none; }
.oc-review-ticket__form>div { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
.oc-review-ticket__form label,.oc-review-featured { color:#5d5270; font-size:.82rem; font-weight:800; }
.oc-review-decision { display:grid; gap:.9rem; }
.oc-review-decision label:not(.oc-review-featured) { display:grid; gap:.35rem; color:#554b65; font-size:.78rem; font-weight:950; }
.oc-review-decision label>span { color:#6b5e80; }
.oc-review-featured { display:flex; align-items:center; gap:.55rem; padding:.8rem; border:1px solid rgba(124,58,237,.18); border-radius:12px; background:#f6f1ff; }
.oc-review-featured input { accent-color:#7c3aed; }
/* Dark theme preserves the rich dark workspace, but uses matching components instead of different layouts. */
html[data-theme="dark"] .oc-product-shell,
html[data-theme="dark"] .oc-review-workspace { --ocx-ink:#f5f1ff; --ocx-muted:#bdb4d3; --ocx-line:rgba(167,139,250,.23); --ocx-surface:linear-gradient(155deg,rgba(18,14,40,.97),rgba(27,17,54,.97)); --ocx-soft:#251846; }
html[data-theme="dark"] .oc-product-hero { background:linear-gradient(130deg,#17102f,#2a164d); }
html[data-theme="dark"] .oc-product-hero__wash { background:linear-gradient(100deg,rgba(15,9,31,.92),rgba(28,13,52,.85),rgba(52,23,88,.7)); }
html[data-theme="dark"] .oc-product-hero h1,html[data-theme="dark"] .oc-review-workspace h1 { color:#fff; }
html[data-theme="dark"] .oc-product-hero p,html[data-theme="dark"] .oc-review-workspace__header p { color:#d5ccec; }
html[data-theme="dark"] .oc-product-hero__aside { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
html[data-theme="dark"] .oc-product-hero__count strong,html[data-theme="dark"] .oc-product-hero__count span { color:#fff; }
html[data-theme="dark"] .oc-product-hero__meta span,html[data-theme="dark"] .oc-product-status { color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); }
html[data-theme="dark"] .oc-product-section,html[data-theme="dark"] .oc-review-card { background:var(--ocx-surface); }
html[data-theme="dark"] .oc-product-section__heading h2,html[data-theme="dark"] .oc-review-card__heading h2,html[data-theme="dark"] .oc-product-facts dd,html[data-theme="dark"] .oc-review-side-facts dd,html[data-theme="dark"] .oc-product-file-row strong,html[data-theme="dark"] .oc-review-file-row strong,html[data-theme="dark"] .oc-product-case-row strong,html[data-theme="dark"] .oc-review-listing-card__body h2,html[data-theme="dark"] .oc-review-listing-card__description h3,html[data-theme="dark"] .oc-review-ticket h3 { color:#fff; }
html[data-theme="dark"] .oc-product-copy,html[data-theme="dark"] .oc-review-listing-card__description .oc-markup,html[data-theme="dark"] .oc-review-ticket p { color:#d4cbe7; }
html[data-theme="dark"] .oc-product-facts dt,html[data-theme="dark"] .oc-review-side-facts dt,html[data-theme="dark"] .oc-product-file-row span,html[data-theme="dark"] .oc-review-file-row span,html[data-theme="dark"] .oc-product-case-row span,html[data-theme="dark"] .oc-product-empty,html[data-theme="dark"] .oc-review-empty,html[data-theme="dark"] .oc-review-listing-card__summary { color:#bbb1cf; }
html[data-theme="dark"] .oc-product-file-row,html[data-theme="dark"] .oc-review-file-row,html[data-theme="dark"] .oc-product-case-row,html[data-theme="dark"] .oc-review-ticket { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .oc-review-workspace__header { background:linear-gradient(125deg,rgba(22,14,45,.98),rgba(48,24,80,.94)); }
html[data-theme="dark"] .oc-review-listing-card__cover { background:linear-gradient(120deg,#1b1034,#281648); color:#c8bee2; border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .oc-review-listing-card__facts span,html[data-theme="dark"] .oc-review-ticket__message,html[data-theme="dark"] .oc-review-featured { background:rgba(255,255,255,.07); color:#d9d1eb; border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .oc-review-ticket__message strong { color:#dacdff; }
html[data-theme="dark"] .oc-review-ticket__message span,html[data-theme="dark"] .oc-review-ticket__head>span { color:#aaa0c3; }
html[data-theme="dark"] .oc-review-ticket__form textarea,html[data-theme="dark"] .oc-review-ticket__form select,html[data-theme="dark"] .oc-review-decision textarea,html[data-theme="dark"] .oc-review-decision select { color:#fff; background:#120b27; border-color:rgba(167,139,250,.32); }
html[data-theme="dark"] .oc-review-decision label:not(.oc-review-featured),html[data-theme="dark"] .oc-review-decision label>span,html[data-theme="dark"] .oc-review-ticket__form label { color:#c7bfd9; }
@media(max-width:900px){
.oc-product-hero{grid-template-columns:1fr;min-height:0}.oc-product-hero__aside{margin:0 1.2rem 1.2rem;display:grid;grid-template-columns:1fr 1fr}.oc-product-hero__actions{align-content:center}.oc-product-layout,.oc-review-workspace__grid{grid-template-columns:1fr}.oc-review-workspace__header{align-items:flex-start;flex-direction:column}.oc-review-workspace__header-actions{justify-content:flex-start}
}
@media(max-width:600px){.oc-product-hero__content{padding:1.6rem}.oc-product-hero__aside{grid-template-columns:1fr}.oc-product-section,.oc-review-card{border-radius:19px;padding:1.15rem}.oc-review-ticket__head,.oc-product-file-row,.oc-review-file-row,.oc-product-case-row{align-items:flex-start;flex-direction:column}.oc-review-ticket__head>span{white-space:normal}.oc-review-workspace__header{padding:1.25rem}.oc-product-hero h1{font-size:2.45rem}}
/* v56 guide cover normalization: cap guide art in every theme */
.oc-guide-page .oc-guide-cover {
display:block !important;
width:100% !important;
height:clamp(190px, 27vw, 340px) !important;
max-height:340px !important;
object-fit:cover !important;
object-position:center !important;
}
@media (max-width: 700px) {
.oc-guide-page .oc-guide-cover { height:210px !important; max-height:210px !important; }
}
/* v57 Roadmap: intentionally self-contained so light/dark work without hero hacks. */
.oc-roadmap-page,.oc-roadmap-detail-page,.oc-roadmap-staff-page{max-width:1240px;margin:0 auto;padding:32px 20px 64px;color:var(--oc-text,#171225)}
.oc-roadmap-hero,.oc-roadmap-detail-hero,.oc-roadmap-staff-hero{display:flex;justify-content:space-between;gap:28px;align-items:center;padding:38px;border:1px solid #d9c8ff;border-radius:28px;background:linear-gradient(135deg,#f7f2ff 0%,#eee5ff 100%);box-shadow:0 20px 44px rgba(74,32,135,.10)}
.oc-roadmap-hero h1,.oc-roadmap-detail-hero h1,.oc-roadmap-staff-hero h1{margin:6px 0 10px;font-size:clamp(2rem,5vw,3.6rem);line-height:.98;letter-spacing:-.06em;color:#1b1429}.oc-roadmap-hero p,.oc-roadmap-detail-hero p,.oc-roadmap-staff-hero p{margin:0;max-width:760px;color:#5f5675;font-size:1.03rem;line-height:1.6}.oc-roadmap-kicker{margin:0 0 9px;color:#7c3ff0!important;font-size:.75rem!important;letter-spacing:.18em!important;font-weight:900!important}
.oc-roadmap-hero-stats{display:grid;gap:4px;min-width:190px;padding:22px;border-radius:22px;background:#fff;border:1px solid #dfd2ff;text-align:center}.oc-roadmap-hero-stats strong{font-size:3rem;line-height:1;color:#783bf1}.oc-roadmap-hero-stats span{font-weight:800;color:#241d34}.oc-roadmap-hero-stats small{color:#70647f;line-height:1.35}
.oc-roadmap-filterbar,.oc-roadmap-area-tabs{display:flex;flex-wrap:wrap;gap:9px}.oc-roadmap-filterbar{margin:22px 0}.oc-roadmap-filterbar a,.oc-roadmap-area-tabs a{padding:9px 12px;border-radius:999px;border:1px solid #ddd0ff;background:#fff;color:#504764;text-decoration:none;font-weight:800;font-size:.88rem}.oc-roadmap-filterbar a.is-active,.oc-roadmap-area-tabs a.is-active{background:#7d3cf0;color:#fff;border-color:#7d3cf0}.oc-roadmap-filterbar span{opacity:.7;margin-left:4px}
.oc-roadmap-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px}.oc-roadmap-list-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:15px}.oc-roadmap-list-head h2{margin:0;color:#1c1629;font-size:1.7rem}.oc-roadmap-list{display:grid;gap:13px}.oc-roadmap-card{padding:22px;border:1px solid #e1d6fb;border-radius:20px;background:#fff;box-shadow:0 8px 18px rgba(56,25,99,.05)}.oc-roadmap-card:hover{border-color:#b995ff;transform:translateY(-1px)}.oc-roadmap-card a{text-decoration:none;color:inherit}.oc-roadmap-card h3{margin:11px 0 8px;color:#1b1429;font-size:1.2rem}.oc-roadmap-card p{margin:0;color:#615875;line-height:1.55}.oc-roadmap-card footer{margin-top:16px;padding-top:13px;border-top:1px solid #eee8fb;display:flex;justify-content:space-between;gap:12px;color:#746a84;font-size:.85rem}.oc-roadmap-card-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.oc-roadmap-status,.oc-roadmap-area{border-radius:999px;padding:6px 9px;font-size:.72rem;font-weight:900;letter-spacing:.06em}.oc-roadmap-status{background:#ece2ff;color:#6824de}.oc-roadmap-area{background:#edf5ff;color:#235c98}.status-in_progress .oc-roadmap-status{background:#e3f7e9;color:#16723b}.status-testing .oc-roadmap-status{background:#fff1d8;color:#9b5b00}.status-published .oc-roadmap-status{background:#dff8ee;color:#13724a}.status-denied .oc-roadmap-status{background:#ffe5e7;color:#a5313b}
.oc-roadmap-suggest-card{align-self:start;padding:25px;border-radius:22px;background:#fff;border:1px solid #dfd3fb;box-shadow:0 12px 26px rgba(56,25,99,.06)}.oc-roadmap-suggest-card h2{margin:0 0 8px;color:#1d162b}.oc-roadmap-suggest-card>p:not(.oc-roadmap-kicker){color:#625876;line-height:1.55}.oc-roadmap-suggest-card form{display:grid;gap:12px;margin-top:18px}.oc-roadmap-suggest-card label,.oc-roadmap-note-form label{display:grid;gap:6px;color:#51486a;font-weight:800;font-size:.85rem}.oc-roadmap-suggest-card input,.oc-roadmap-suggest-card select,.oc-roadmap-suggest-card textarea,.oc-roadmap-comments textarea,.oc-roadmap-staff-create input,.oc-roadmap-staff-create select,.oc-roadmap-staff-create textarea,.oc-roadmap-admin-list input,.oc-roadmap-admin-list select,.oc-roadmap-admin-list textarea{width:100%;box-sizing:border-box;border:1px solid #d8c8fb;border-radius:12px;background:#fff;color:#221a31;padding:12px;font:inherit}.oc-roadmap-suggest-card textarea,.oc-roadmap-comments textarea,.oc-roadmap-staff-create textarea,.oc-roadmap-admin-list textarea{min-height:118px;resize:vertical}.oc-btn-primary,.oc-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 15px;font-weight:900;text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit}.oc-btn-primary{background:linear-gradient(135deg,#7a35e9,#a851f1);color:#fff;box-shadow:0 10px 20px rgba(122,53,233,.23)}.oc-btn-secondary{background:#fff;color:#352450;border-color:#d9c9fb}.oc-roadmap-staff-link{display:block;margin-top:16px;color:#7135ea;font-weight:900;text-decoration:none}.oc-roadmap-empty{padding:25px;border:1px dashed #ccb8fb;border-radius:18px;background:#f7f2ff;display:grid;gap:4px;color:#635875}
.oc-roadmap-back{display:inline-block;margin-bottom:16px;color:#7038ea;text-decoration:none;font-weight:900}.oc-roadmap-detail-hero{align-items:stretch}.oc-roadmap-detail-hero>div:first-child{flex:1}.oc-roadmap-detail-hero small{display:block;margin-top:18px;color:#6d6380}.oc-roadmap-vote-box{min-width:215px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:22px;background:#fff;border:1px solid #dfd1ff;padding:22px}.oc-roadmap-vote-box>strong{font-size:3rem;color:#783bf0;line-height:1}.oc-roadmap-vote-box>span{color:#665d78;font-weight:800}.oc-roadmap-vote-box>div{display:flex;gap:7px;margin-top:10px}.oc-roadmap-vote-box form{margin:0}.oc-roadmap-vote-box button{border:1px solid #d8c8fb;background:#fff;color:#392a53;border-radius:10px;padding:8px;font-weight:800;cursor:pointer}.oc-roadmap-vote-box button.is-selected{background:#7235e8;color:#fff}.oc-roadmap-vote-box a{color:#7135ea;font-weight:900;text-decoration:none}.oc-roadmap-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:24px;margin-top:24px}.oc-roadmap-staff-updates,.oc-roadmap-comments,.oc-roadmap-detail-side{padding:25px;border-radius:22px;background:#fff;border:1px solid #e1d7fb}.oc-roadmap-staff-updates{margin-bottom:22px}.oc-roadmap-staff-updates h2,.oc-roadmap-comments h2{margin:0 0 16px;color:#1e172c}.oc-roadmap-staff-updates article{padding:18px;border-left:4px solid #7d3cf0;border-radius:0 14px 14px 0;background:#f6f0ff;margin-top:10px}.oc-roadmap-staff-updates article span{font-weight:900;color:#7135ea;font-size:.8rem}.oc-roadmap-staff-updates article p{color:#403652;line-height:1.55}.oc-roadmap-staff-updates article small{color:#776b88}.oc-roadmap-comments form{display:grid;gap:12px;margin-bottom:22px}.oc-roadmap-comment-list{display:grid;gap:12px}.oc-roadmap-comment-list article{padding:16px;border-radius:15px;background:#fbf9ff;border:1px solid #eee8fb}.oc-roadmap-comment-list strong{color:#271c38}.oc-roadmap-comment-list a{margin-left:6px;color:#7038ea;font-weight:800;text-decoration:none}.oc-roadmap-comment-list small{margin-left:8px;color:#81778f}.oc-roadmap-comment-list p{margin:8px 0 0;color:#514861;line-height:1.55}.oc-roadmap-detail-side{align-self:start;display:grid;gap:15px}.oc-roadmap-detail-side>div{display:grid;gap:5px}.oc-roadmap-detail-side strong{font-size:1.3rem;color:#20182e}.oc-roadmap-detail-side span{color:#6d637b}
.oc-roadmap-staff-page{max-width:1300px}.oc-roadmap-staff-hero{margin-bottom:24px}.oc-roadmap-staff-create{padding:24px;border-radius:22px;background:#fff;border:1px solid #e0d4fb;margin-bottom:24px}.oc-roadmap-staff-create h2{margin:0 0 15px;color:#21182f}.oc-roadmap-staff-create form{display:grid;grid-template-columns:2fr 150px 180px;gap:12px}.oc-roadmap-staff-create textarea{grid-column:1/-1}.oc-roadmap-staff-create button{width:max-content}.oc-roadmap-admin-list{display:grid;gap:20px}.oc-roadmap-admin-list>article{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;padding:23px;border-radius:22px;background:#fff;border:1px solid #ded2fb}.oc-roadmap-admin-list form{display:grid;gap:11px}.oc-roadmap-admin-top{display:flex;justify-content:space-between;gap:10px;color:#70647f;font-size:.85rem}.oc-roadmap-admin-top a{color:#7135ea;font-weight:900}.oc-roadmap-admin-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.oc-roadmap-note-form{padding:15px;border-radius:16px;background:#f6f0ff;align-self:start}
html[data-theme="dark"] .oc-roadmap-page,html[data-theme="dark"] .oc-roadmap-detail-page,html[data-theme="dark"] .oc-roadmap-staff-page{color:#f5f2ff}html[data-theme="dark"] .oc-roadmap-hero,html[data-theme="dark"] .oc-roadmap-detail-hero,html[data-theme="dark"] .oc-roadmap-staff-hero{background:linear-gradient(135deg,#0d1222,#281348);border-color:#402064;box-shadow:none}html[data-theme="dark"] .oc-roadmap-hero h1,html[data-theme="dark"] .oc-roadmap-detail-hero h1,html[data-theme="dark"] .oc-roadmap-staff-hero h1,html[data-theme="dark"] .oc-roadmap-list-head h2,html[data-theme="dark"] .oc-roadmap-card h3,html[data-theme="dark"] .oc-roadmap-suggest-card h2,html[data-theme="dark"] .oc-roadmap-staff-updates h2,html[data-theme="dark"] .oc-roadmap-comments h2,html[data-theme="dark"] .oc-roadmap-detail-side strong,html[data-theme="dark"] .oc-roadmap-staff-create h2{color:#fff}html[data-theme="dark"] .oc-roadmap-hero p,html[data-theme="dark"] .oc-roadmap-detail-hero p,html[data-theme="dark"] .oc-roadmap-staff-hero p,html[data-theme="dark"] .oc-roadmap-card p,html[data-theme="dark"] .oc-roadmap-suggest-card>p:not(.oc-roadmap-kicker),html[data-theme="dark"] .oc-roadmap-comment-list p{color:#c8c0d8}html[data-theme="dark"] .oc-roadmap-hero-stats,html[data-theme="dark"] .oc-roadmap-card,html[data-theme="dark"] .oc-roadmap-suggest-card,html[data-theme="dark"] .oc-roadmap-staff-updates,html[data-theme="dark"] .oc-roadmap-comments,html[data-theme="dark"] .oc-roadmap-detail-side,html[data-theme="dark"] .oc-roadmap-staff-create,html[data-theme="dark"] .oc-roadmap-admin-list>article{background:#101425;border-color:#30254a;box-shadow:none}html[data-theme="dark"] .oc-roadmap-hero-stats span,html[data-theme="dark"] .oc-roadmap-hero-stats small,html[data-theme="dark"] .oc-roadmap-card footer,html[data-theme="dark"] .oc-roadmap-detail-side span{color:#c2b9d1}html[data-theme="dark"] .oc-roadmap-filterbar a,html[data-theme="dark"] .oc-roadmap-area-tabs a,html[data-theme="dark"] .oc-btn-secondary,html[data-theme="dark"] .oc-roadmap-vote-box button{background:#171b30;border-color:#40345d;color:#f5f1ff}html[data-theme="dark"] .oc-roadmap-vote-box,html[data-theme="dark"] .oc-roadmap-comment-list article{background:#171b30;border-color:#40345d}html[data-theme="dark"] .oc-roadmap-staff-updates article,html[data-theme="dark"] .oc-roadmap-note-form{background:#1d1730}html[data-theme="dark"] .oc-roadmap-suggest-card input,html[data-theme="dark"] .oc-roadmap-suggest-card select,html[data-theme="dark"] .oc-roadmap-suggest-card textarea,html[data-theme="dark"] .oc-roadmap-comments textarea,html[data-theme="dark"] .oc-roadmap-staff-create input,html[data-theme="dark"] .oc-roadmap-staff-create select,html[data-theme="dark"] .oc-roadmap-staff-create textarea,html[data-theme="dark"] .oc-roadmap-admin-list input,html[data-theme="dark"] .oc-roadmap-admin-list select,html[data-theme="dark"] .oc-roadmap-admin-list textarea{background:#0b0f1d;border-color:#3c3058;color:#f5f1ff}html[data-theme="dark"] .oc-roadmap-empty{background:#17142a;border-color:#4a3870;color:#d2c8e0}
@media(max-width:850px){.oc-roadmap-hero,.oc-roadmap-detail-hero,.oc-roadmap-staff-hero,.oc-roadmap-main-grid,.oc-roadmap-detail-grid,.oc-roadmap-admin-list>article{grid-template-columns:1fr;display:grid}.oc-roadmap-hero-stats,.oc-roadmap-vote-box{min-width:0}.oc-roadmap-list-head{display:grid;align-items:start}.oc-roadmap-staff-create form{grid-template-columns:1fr}.oc-roadmap-staff-create textarea{grid-column:auto}.oc-roadmap-admin-list>article{gap:14px}}
/* v60 roadmap comment identity polish */
.oc-roadmap-comment-author,.oc-roadmap-author{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.oc-roadmap-comment-author strong{color:#271c38}.oc-roadmap-comment-author .oc-verify-row,.oc-roadmap-author .oc-verify-row{display:inline-flex;margin:0}.oc-roadmap-comment-author .oc-verify-mark,.oc-roadmap-author .oc-verify-mark{width:20px;height:20px;font-size:.7rem}.oc-roadmap-profile-link{font-size:.78rem;margin-left:0!important}.oc-roadmap-comment-author small{margin-left:auto!important}
html[data-theme="dark"] .oc-roadmap-comment-list strong,html[data-theme="dark"] .oc-roadmap-comment-author strong,html[data-theme="dark"] .oc-roadmap-author{color:#fff!important}html[data-theme="dark"] .oc-roadmap-comment-list a,html[data-theme="dark"] .oc-roadmap-profile-link{color:#c7a8ff!important}html[data-theme="dark"] .oc-roadmap-comment-list small{color:#bcb3ca!important}
/* v62 Roadmap moderation and ticket workspace */
.oc-roadmap-feedback-closed{display:grid;gap:4px;margin:0 0 22px;padding:15px 17px;border:1px solid #e4c8d1;border-radius:15px;background:#fff5f7;color:#6d3141}.oc-roadmap-feedback-closed strong{color:#8e2944}
.oc-roadmap-staff-hero-actions{display:flex;gap:10px;flex-wrap:wrap}.oc-roadmap-staff-summary{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}.oc-roadmap-staff-summary span{display:flex;align-items:center;gap:7px;padding:10px 13px;border-radius:14px;background:#fff;border:1px solid #e0d4fb;color:#594b72;font-size:.86rem;font-weight:800}.oc-roadmap-staff-summary strong{font-size:1.15rem;color:#6b32d5}.oc-roadmap-admin-table-wrap{overflow:auto;border:1px solid #dfd3fa;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgba(56,25,99,.06)}.oc-roadmap-admin-table{width:100%;border-collapse:collapse;min-width:900px}.oc-roadmap-admin-table th,.oc-roadmap-admin-table td{padding:15px 16px;border-bottom:1px solid #eee8fb;text-align:left;vertical-align:middle;color:#514764}.oc-roadmap-admin-table th{background:#f8f5ff;color:#6c5b83;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em}.oc-roadmap-admin-table td:first-child{display:grid;gap:4px}.oc-roadmap-admin-table td:first-child strong{font-size:.75rem;color:#7e40e7}.oc-roadmap-admin-table td:first-child span{font-weight:900;color:#20182e}.oc-roadmap-table-empty{text-align:center!important;color:#756a84}.oc-roadmap-ticket-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:24px}.oc-roadmap-ticket-grid main{display:grid;gap:20px}.oc-roadmap-ticket-card{padding:24px;border:1px solid #e1d7fb;border-radius:22px;background:#fff}.oc-roadmap-ticket-card h2{margin:0 0 14px;color:#21172f}.oc-roadmap-ticket-card form{display:grid;gap:12px}.oc-roadmap-ticket-card label{display:grid;gap:7px;color:#51486a;font-weight:800;font-size:.85rem}.oc-roadmap-ticket-card input,.oc-roadmap-ticket-card select,.oc-roadmap-ticket-card textarea{width:100%;box-sizing:border-box;border:1px solid #d8c8fb;border-radius:12px;background:#fff;color:#221a31;padding:12px;font:inherit}.oc-roadmap-ticket-card textarea{min-height:145px;resize:vertical}.oc-roadmap-ticket-help{margin:-4px 0 14px;color:#6a5c7a}.oc-roadmap-ticket-timeline{display:grid;gap:11px;margin-top:16px}.oc-roadmap-ticket-timeline article{padding:14px;border-radius:14px;background:#f7f2ff;border-left:4px solid #7a35e9}.oc-roadmap-ticket-timeline strong{color:#442279}.oc-roadmap-ticket-timeline small{margin-left:8px;color:#7a6c8a}.oc-roadmap-ticket-timeline p{margin:8px 0 0;color:#514660;line-height:1.5}.oc-roadmap-ticket-comments{display:grid;gap:11px}.oc-roadmap-ticket-comments article{padding:14px;border-radius:14px;background:#fbf9ff;border:1px solid #eee8fb}.oc-roadmap-ticket-comments article.is-deleted{opacity:.7;background:#fff7f7}.oc-roadmap-ticket-comments article>div{display:flex;justify-content:space-between;gap:10px}.oc-roadmap-ticket-comments strong{color:#2a1d3e}.oc-roadmap-ticket-comments small{color:#7a6c89}.oc-roadmap-ticket-comments p{margin:8px 0;color:#514861;line-height:1.55}.oc-roadmap-delete-comment{border:0;background:transparent;padding:0;color:#b52e4b;font-weight:900;cursor:pointer}
html[data-theme="dark"] .oc-roadmap-feedback-closed{background:#24162a;border-color:#593044;color:#efc9d3}html[data-theme="dark"] .oc-roadmap-feedback-closed strong{color:#ffb5c7}html[data-theme="dark"] .oc-roadmap-staff-summary span,html[data-theme="dark"] .oc-roadmap-admin-table-wrap,html[data-theme="dark"] .oc-roadmap-ticket-card{background:#101425;border-color:#30254a;color:#ded7ea}html[data-theme="dark"] .oc-roadmap-staff-summary strong{color:#c8a7ff}html[data-theme="dark"] .oc-roadmap-admin-table th{background:#171b30;color:#c7bfd5}html[data-theme="dark"] .oc-roadmap-admin-table td{border-color:#29223d;color:#cbc3d8}html[data-theme="dark"] .oc-roadmap-admin-table td:first-child span,html[data-theme="dark"] .oc-roadmap-ticket-card h2,html[data-theme="dark"] .oc-roadmap-ticket-comments strong{color:#fff}html[data-theme="dark"] .oc-roadmap-ticket-card label,html[data-theme="dark"] .oc-roadmap-ticket-help,html[data-theme="dark"] .oc-roadmap-ticket-comments p{color:#c8c0d8}html[data-theme="dark"] .oc-roadmap-ticket-card input,html[data-theme="dark"] .oc-roadmap-ticket-card select,html[data-theme="dark"] .oc-roadmap-ticket-card textarea{background:#0b0f1d;border-color:#3c3058;color:#f5f1ff}html[data-theme="dark"] .oc-roadmap-ticket-timeline article{background:#1d1730}html[data-theme="dark"] .oc-roadmap-ticket-timeline p{color:#d1c9dd}html[data-theme="dark"] .oc-roadmap-ticket-comments article{background:#171b30;border-color:#40345d}html[data-theme="dark"] .oc-roadmap-ticket-comments article.is-deleted{background:#281a23}.oc-roadmap-ticket-grid .oc-roadmap-detail-side{height:max-content}
@media(max-width:850px){.oc-roadmap-ticket-grid{grid-template-columns:1fr}.oc-roadmap-staff-hero-actions{width:100%}.oc-roadmap-staff-hero-actions a{flex:1}.oc-roadmap-admin-table-wrap{border-radius:16px}}
/* v63 community blogs */
.oc-blog-page,.oc-blog-dashboard,.oc-blog-editor-page,.oc-blog-post-page{display:grid;gap:1.35rem}.oc-blog-hero,.oc-blog-dashboard-hero,.oc-blog-editor-hero{display:flex;align-items:end;justify-content:space-between;gap:1.25rem;border:1px solid rgba(139,92,246,.25);border-radius:1.6rem;padding:2rem;background:linear-gradient(135deg,rgba(124,58,237,.13),rgba(255,255,255,.72));color:#24143d}.oc-blog-hero h1,.oc-blog-dashboard-hero h1,.oc-blog-editor-hero h1{margin:.25rem 0;font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;font-weight:950}.oc-blog-hero p,.oc-blog-dashboard-hero p,.oc-blog-editor-hero p{max-width:48rem;margin:.5rem 0 0;color:#5b4c71;line-height:1.65}.oc-blog-kicker{margin:0;color:#7c3aed;font-size:.72rem;font-weight:950;letter-spacing:.13em}.oc-blog-hero-actions{display:flex;flex-wrap:wrap;gap:.65rem}.oc-blog-filter{display:grid;grid-template-columns:1fr minmax(10rem,.45fr) auto;gap:.7rem;padding:1rem;border:1px solid rgba(139,92,246,.18);border-radius:1.3rem;background:rgba(255,255,255,.65)}.oc-blog-filter input,.oc-blog-filter select,.oc-blog-editor-form input,.oc-blog-editor-form select,.oc-blog-editor-form textarea{width:100%;border:1px solid rgba(124,58,237,.22);border-radius:.85rem;background:#fff;color:#24143d;padding:.8rem .9rem;font:inherit}.oc-blog-category-row{display:flex;flex-wrap:wrap;gap:.45rem}.oc-blog-category-row a{border:1px solid rgba(124,58,237,.16);border-radius:999px;padding:.5rem .7rem;background:rgba(255,255,255,.58);color:#50376e;font-size:.84rem;font-weight:850;text-decoration:none}.oc-blog-category-row a.is-active{background:#7c3aed;color:#fff}.oc-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.oc-blog-card{overflow:hidden;border:1px solid rgba(139,92,246,.18);border-radius:1.35rem;background:rgba(255,255,255,.8);box-shadow:0 12px 28px rgba(82,54,133,.08)}.oc-blog-card-cover{display:block;height:12rem;background:#eee}.oc-blog-card-cover img{width:100%;height:100%;object-fit:cover}.oc-blog-card-body{display:grid;gap:.7rem;padding:1.05rem}.oc-blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:#6b5a82;font-size:.78rem;font-weight:850}.oc-blog-card-meta span{border-radius:999px;background:#eee7ff;color:#6d28d9;padding:.25rem .55rem}.oc-blog-card h2{margin:0;color:#24143d;font-size:1.2rem;line-height:1.2}.oc-blog-card a{text-decoration:none}.oc-blog-card p{margin:0;color:#5d536d;line-height:1.6}.oc-blog-card footer{display:flex;justify-content:space-between;gap:.5rem;color:#6b5a82;font-size:.82rem;font-weight:800}.oc-blog-card footer a{color:#7c3aed}.oc-blog-empty{display:grid;gap:.35rem;padding:2rem;border:1px dashed rgba(124,58,237,.3);border-radius:1.3rem;color:#5d536d;background:rgba(255,255,255,.55);grid-column:1/-1}.oc-blog-manager-list{display:grid;gap:.8rem}.oc-blog-manager-list article{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.15rem;border:1px solid rgba(139,92,246,.18);border-radius:1.15rem;background:rgba(255,255,255,.76)}.oc-blog-manager-list h2{margin:.45rem 0 .2rem;color:#24143d;font-size:1.1rem}.oc-blog-manager-list p{margin:0;color:#645974}.oc-blog-manager-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.oc-blog-manager-actions a,.oc-blog-manager-actions button{border:1px solid rgba(124,58,237,.2);border-radius:.7rem;padding:.5rem .7rem;background:#fff;color:#5b21b6;font:inherit;font-size:.82rem;font-weight:850;text-decoration:none}.oc-blog-status{display:inline-flex;border-radius:999px;padding:.25rem .55rem;background:#eee7ff;color:#6d28d9;font-size:.72rem;font-weight:950;text-transform:uppercase}.oc-blog-status.status-published{background:#dcfce7;color:#166534}.oc-blog-editor-form{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1rem}.oc-blog-editor-main,.oc-blog-editor-side>div{display:grid;gap:.9rem;padding:1.1rem;border:1px solid rgba(139,92,246,.18);border-radius:1.25rem;background:rgba(255,255,255,.78)}.oc-blog-editor-main>label,.oc-blog-editor-side label{display:grid;gap:.38rem;color:#4c3b62;font-size:.84rem;font-weight:900}.oc-blog-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.oc-blog-wysiwyg{overflow:hidden;border:1px solid rgba(124,58,237,.22);border-radius:1rem;background:#fff}.oc-blog-wysiwyg-toolbar{display:flex;flex-wrap:wrap;gap:.4rem;padding:.65rem;background:#f2ecff;border-bottom:1px solid rgba(124,58,237,.16)}.oc-blog-wysiwyg-toolbar button{border:1px solid rgba(124,58,237,.2);border-radius:.55rem;padding:.4rem .55rem;background:#fff;color:#5b21b6;font-weight:900}.oc-blog-wysiwyg-canvas{min-height:20rem;padding:1rem;color:#24143d;line-height:1.7;outline:0}.oc-blog-source{display:none}.oc-blog-wysiwyg-help{padding:.75rem 1rem;background:#faf8ff;color:#6b5a82;font-size:.78rem}.oc-blog-upload{display:grid;gap:.35rem;border:1px dashed rgba(124,58,237,.35);border-radius:1rem;padding:.85rem;background:#fbfaff;color:#4c3b62;font-weight:900}.oc-blog-upload small{color:#6b5a82;font-weight:700}.oc-blog-editor-side{display:grid;align-content:start;gap:1rem}.oc-blog-editor-side h2{margin:0;color:#24143d;font-size:1rem}.oc-blog-editor-side p{margin:0;color:#645974;line-height:1.55}.oc-blog-editor-side .oc-btn-primary,.oc-blog-editor-side .oc-btn-secondary{width:100%;text-align:center}.oc-blog-cover-preview{max-height:12rem;width:100%;border-radius:.9rem;object-fit:cover}.oc-blog-back{color:#6d28d9;font-weight:900;text-decoration:none}.oc-blog-post-hero{position:relative;overflow:hidden;border:1px solid rgba(139,92,246,.2);border-radius:1.6rem;padding:2.4rem;background:linear-gradient(135deg,#ede9fe,#fff)}.oc-blog-post-hero.has-cover{background:linear-gradient(90deg,rgba(20,10,40,.86),rgba(43,20,75,.48)),var(--cover) center/cover;color:#fff}.oc-blog-post-hero h1{max-width:54rem;margin:.6rem 0;font-size:clamp(2.2rem,5vw,4.7rem);line-height:.98}.oc-blog-post-hero p{max-width:48rem;font-size:1.08rem;line-height:1.7}.oc-blog-post-hero footer{font-weight:850}.oc-blog-post-layout{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:1rem}.oc-blog-post-body{padding:clamp(1rem,3vw,2.5rem);border:1px solid rgba(139,92,246,.18);border-radius:1.35rem;background:rgba(255,255,255,.8);color:#2b203c;font-size:1.03rem;line-height:1.8}.oc-blog-post-body h2,.oc-blog-post-body h3{color:#321650;line-height:1.2}.oc-blog-post-body img{display:block;max-width:100%;height:auto;margin:1rem auto;border-radius:1rem}.oc-blog-post-body blockquote{margin:1rem 0;border-left:4px solid #8b5cf6;padding:.3rem 1rem;color:#5f4a78;background:#f8f5ff}.oc-blog-post-body pre{overflow:auto;padding:1rem;border-radius:.85rem;background:#211836;color:#f5f3ff}.oc-blog-post-side{display:grid;align-content:start;gap:.75rem}.oc-blog-post-side>div{display:grid;gap:.2rem;padding:1rem;border:1px solid rgba(139,92,246,.18);border-radius:1rem;background:rgba(255,255,255,.76);color:#5a486e}.oc-blog-post-side strong{color:#321650}.oc-blog-post-side .oc-btn-secondary{text-align:center}
html[data-theme="dark"] .oc-blog-hero,html[data-theme="dark"] .oc-blog-dashboard-hero,html[data-theme="dark"] .oc-blog-editor-hero,html[data-theme="dark"] .oc-blog-post-hero:not(.has-cover){background:linear-gradient(135deg,rgba(76,29,149,.34),rgba(15,23,42,.9));border-color:rgba(196,181,253,.2);color:#f8f7ff}html[data-theme="dark"] .oc-blog-hero p,html[data-theme="dark"] .oc-blog-dashboard-hero p,html[data-theme="dark"] .oc-blog-editor-hero p{color:#c4b5d8}html[data-theme="dark"] .oc-blog-filter,html[data-theme="dark"] .oc-blog-card,html[data-theme="dark"] .oc-blog-manager-list article,html[data-theme="dark"] .oc-blog-editor-main,html[data-theme="dark"] .oc-blog-editor-side>div,html[data-theme="dark"] .oc-blog-post-body,html[data-theme="dark"] .oc-blog-post-side>div{background:rgba(15,23,42,.82);border-color:rgba(255,255,255,.1)}html[data-theme="dark"] .oc-blog-filter input,html[data-theme="dark"] .oc-blog-filter select,html[data-theme="dark"] .oc-blog-editor-form input,html[data-theme="dark"] .oc-blog-editor-form select,html[data-theme="dark"] .oc-blog-editor-form textarea,html[data-theme="dark"] .oc-blog-wysiwyg{background:#0b1020;color:#f8f7ff;border-color:rgba(255,255,255,.12)}html[data-theme="dark"] .oc-blog-card h2,html[data-theme="dark"] .oc-blog-manager-list h2,html[data-theme="dark"] .oc-blog-editor-side h2,html[data-theme="dark"] .oc-blog-post-body h2,html[data-theme="dark"] .oc-blog-post-body h3,html[data-theme="dark"] .oc-blog-post-side strong{color:#fff}html[data-theme="dark"] .oc-blog-card p,html[data-theme="dark"] .oc-blog-manager-list p,html[data-theme="dark"] .oc-blog-editor-main>label,html[data-theme="dark"] .oc-blog-editor-side label,html[data-theme="dark"] .oc-blog-editor-side p,html[data-theme="dark"] .oc-blog-post-side>div{color:#c4b5d8}html[data-theme="dark"] .oc-blog-category-row a{background:rgba(255,255,255,.06);color:#ddd6fe;border-color:rgba(255,255,255,.1)}html[data-theme="dark"] .oc-blog-wysiwyg-toolbar,html[data-theme="dark"] .oc-blog-wysiwyg-help{background:#151126;color:#c4b5d8;border-color:rgba(255,255,255,.08)}html[data-theme="dark"] .oc-blog-wysiwyg-toolbar button{background:#241b3f;color:#f5f3ff;border-color:rgba(255,255,255,.12)}html[data-theme="dark"] .oc-blog-wysiwyg-canvas{color:#f8f7ff}html[data-theme="dark"] .oc-blog-upload{background:#151126;color:#e9ddff;border-color:rgba(196,181,253,.28)}html[data-theme="dark"] .oc-blog-post-body blockquote{background:#211836;color:#e9ddff}
@media(max-width:850px){.oc-blog-grid{grid-template-columns:1fr 1fr}.oc-blog-editor-form,.oc-blog-post-layout{grid-template-columns:1fr}.oc-blog-editor-side{grid-template-columns:1fr 1fr}.oc-blog-post-side{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.oc-blog-hero,.oc-blog-dashboard-hero,.oc-blog-editor-hero,.oc-blog-manager-list article{align-items:flex-start;flex-direction:column}.oc-blog-filter,.oc-blog-form-grid,.oc-blog-grid,.oc-blog-editor-side,.oc-blog-post-side{grid-template-columns:1fr}.oc-blog-card-cover{height:10rem}}
/* v64 RSS directory */
.oc-feeds-page{max-width:1180px;margin:0 auto;padding:34px 20px 68px}.oc-feeds-hero{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:36px;border:1px solid rgba(124,58,237,.22);border-radius:28px;background:linear-gradient(135deg,#f5f0ff,#ece4ff);color:#211334}.oc-feeds-kicker{margin:0 0 9px;color:#7135ea;font-size:.76rem;letter-spacing:.16em;font-weight:950}.oc-feeds-hero h1{margin:0;font-size:clamp(2.3rem,5vw,4.2rem);line-height:.98;color:#241236}.oc-feeds-hero p{max-width:640px;margin:13px 0 0;color:#5f526e;font-size:1.02rem;line-height:1.65}.oc-feeds-hero-badge{display:grid;gap:6px;justify-items:center;min-width:190px;padding:20px;border:1px solid rgba(124,58,237,.18);border-radius:20px;background:rgba(255,255,255,.76);text-align:center}.oc-feeds-hero-badge span{font-size:1.9rem;font-weight:950;color:#7437ea;letter-spacing:.08em}.oc-feeds-hero-badge small{color:#635776;line-height:1.4}.oc-feeds-note{display:flex;gap:11px;align-items:flex-start;margin:18px 0;padding:16px 18px;border:1px solid rgba(124,58,237,.16);border-radius:17px;background:rgba(255,255,255,.72);color:#564866;line-height:1.55}.oc-feeds-note strong{color:#32184e;white-space:nowrap}.oc-feeds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.oc-feed-card{display:grid;gap:14px;padding:23px;border:1px solid rgba(124,58,237,.16);border-radius:20px;background:rgba(255,255,255,.82);box-shadow:0 12px 26px rgba(65,34,105,.06)}.oc-feed-card-top{display:flex;gap:10px;align-items:center}.oc-feed-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#eee6ff;color:#6d28d9;font-size:1.2rem;font-weight:950}.oc-feed-card h2{margin:0;color:#27163b;font-size:1.18rem}.oc-feed-card p{min-height:48px;margin:0;color:#625672;line-height:1.55}.oc-feed-url{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(124,58,237,.13);border-radius:12px;background:#f8f5ff}.oc-feed-url code{flex:1;overflow:hidden;color:#5b35a0;font-size:.81rem;text-overflow:ellipsis;white-space:nowrap}.oc-feed-copy{border:1px solid rgba(124,58,237,.22);border-radius:8px;background:#fff;color:#5b21b6;padding:6px 9px;font:inherit;font-size:.75rem;font-weight:900;cursor:pointer}.oc-feed-card>a{color:#6930d5;font-weight:900;text-decoration:none}.oc-feed-card>a span{margin-left:4px}.oc-feed-card>a:hover{color:#4d1aab}
html[data-theme="dark"] .oc-feeds-hero{background:linear-gradient(135deg,#121126,#271546);border-color:rgba(196,181,253,.24);color:#faf8ff}.oc-feeds-hero h1{color:#241236}html[data-theme="dark"] .oc-feeds-hero h1{color:#fff}html[data-theme="dark"] .oc-feeds-hero p,html[data-theme="dark"] .oc-feeds-hero-badge small{color:#cbc0dd}html[data-theme="dark"] .oc-feeds-hero-badge,html[data-theme="dark"] .oc-feeds-note,html[data-theme="dark"] .oc-feed-card{background:rgba(17,17,35,.86);border-color:rgba(255,255,255,.11)}html[data-theme="dark"] .oc-feeds-note{color:#d0c6df}html[data-theme="dark"] .oc-feeds-note strong,html[data-theme="dark"] .oc-feed-card h2{color:#fff}html[data-theme="dark"] .oc-feed-card p{color:#c4b8d4}html[data-theme="dark"] .oc-feed-url{background:#141227;border-color:rgba(255,255,255,.09)}html[data-theme="dark"] .oc-feed-url code{color:#d6c9ff}html[data-theme="dark"] .oc-feed-copy{background:#261941;color:#f2edff;border-color:rgba(255,255,255,.13)}@media(max-width:720px){.oc-feeds-hero{align-items:flex-start;flex-direction:column;padding:24px}.oc-feeds-hero-badge{width:100%;min-width:0}.oc-feeds-grid{grid-template-columns:1fr}.oc-feeds-note{flex-direction:column;gap:4px}}