.midnight-product-page {
--mdps-panel: #101218;
--mdps-card: #171a24;
--mdps-border: rgba(255, 255, 255, 0.09);
--mdps-border-strong: rgba(255, 84, 8, 0.5);
--mdps-text: #f3f4f6;
--mdps-muted: #9ca3af;
--mdps-soft: #cbd5e1;
--mdps-accent: #ff580b;
--mdps-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
margin-top: 18px;
margin-bottom: 40px;
color: var(--mdps-text);
}
.midnight-product-page * {
box-sizing: border-box;
}
.midnight-product-page p {
color: var(--mdps-muted);
font-size: 15px;
line-height: 1.75;
margin: 0 0 16px;
}
.midnight-product-page h1,
.midnight-product-page h2,
.midnight-product-page h3 {
letter-spacing: 0;
}
.midnight-product-page .mp-hero,
.midnight-product-page .mp-section,
.midnight-product-page .mp-access {
background: radial-gradient(circle at top left, rgba(255, 88, 11, 0.13), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
var(--mdps-panel);
border: 1px solid var(--mdps-border);
border-radius: 22px;
box-shadow: var(--mdps-shadow);
}
.midnight-product-page .mp-hero {
min-height: 0;
display: flex;
align-items: center;
padding: 28px;
margin: 18px 0 24px;
background: radial-gradient(circle at top left, rgba(255, 88, 11, 0.13), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
var(--mdps-panel);
overflow: hidden;
}
.midnight-product-page .mp-hero-copy {
width: 100%;
position: relative;
z-index: 1;
}
.midnight-product-page .mp-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding: 7px 12px;
border: 1px solid rgba(255, 88, 11, 0.38);
border-radius: 999px;
background: rgba(255, 88, 11, 0.09);
color: #ffd5c2;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.midnight-product-page h1 {
color: var(--mdps-text);
font-size: 34px;
line-height: 1.12;
margin: 0 0 14px;
font-weight: 800;
}
.midnight-product-page .mp-lead {
color: var(--mdps-soft);
font-size: 16px;
line-height: 1.75;
max-width: none;
}
.midnight-product-page .mp-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}
.midnight-product-page .mp-actions.align-right {
justify-content: flex-end;
}
.midnight-product-page .mp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 18px;
border-radius: 14px;
border: 1px solid rgba(255, 88, 11, 0.45);
background: linear-gradient(180deg, #ff6a1f, #d9480f);
color: #ffffff !important;
font-size: 14px;
font-weight: 800;
text-decoration: none !important;
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 0.02em;
transition:
transform 0.18s ease,
filter 0.18s ease,
border-color 0.18s ease;
}
.midnight-product-page .mp-btn:hover {
transform: translateY(-1px);
filter: brightness(1.08);
border-color: rgba(255, 126, 57, 0.75);
}
.midnight-product-page .mp-btn.secondary {
background: rgba(255, 255, 255, 0.04);
color: var(--mdps-text) !important;
border-color: rgba(255, 255, 255, 0.14);
}
.midnight-product-page .mp-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin: 0 0 18px;
}
.midnight-product-page .mp-strip-item,
.midnight-product-page .mp-image {
border: 1px solid var(--mdps-border);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
var(--mdps-card);
transition:
transform 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
}
.midnight-product-page .mp-strip-item {
padding: 22px;
color: var(--mdps-soft);
font-size: 14px;
line-height: 1.65;
}
.midnight-product-page .mp-strip-item:hover,
.midnight-product-page .mp-image:hover {
transform: translateY(-2px);
border-color: var(--mdps-border-strong);
background: radial-gradient(circle at top right, rgba(255, 88, 11, 0.14), transparent 35%),
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
var(--mdps-card);
}
.midnight-product-page .mp-strip-item strong {
display: block;
color: var(--mdps-text);
font-size: 18px;
line-height: 1.25;
margin-bottom: 8px;
}
.midnight-product-page .mp-section {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 24px;
align-items: center;
padding: 24px;
margin: 18px 0;
}
.midnight-product-page .mp-section.reverse {
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.midnight-product-page .mp-image-grid {
display: grid;
gap: 14px;
}
.midnight-product-page .mp-image.crop-center img {
height: 320px;
object-fit: cover;
object-position: center;
}
.midnight-product-page .mp-section h2 {
color: var(--mdps-text);
font-size: 24px;
line-height: 1.2;
font-weight: 800;
margin: 0 0 14px;
}
.midnight-product-page .mp-section h2 span {
color: var(--mdps-accent);
}
.midnight-product-page .mp-image {
padding: 10px;
box-shadow: none;
overflow: hidden;
}
.midnight-product-page .mp-image img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
.midnight-product-page .mp-list {
list-style: none;
padding: 18px;
margin: 18px 0 0;
display: grid;
gap: 12px;
border: 1px solid var(--mdps-border);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
var(--mdps-card);
}
.midnight-product-page .mp-list li {
position: relative;
padding-left: 18px;
color: var(--mdps-soft);
font-size: 14px;
line-height: 1.55;
}
.midnight-product-page .mp-list li:before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mdps-accent);
box-shadow: 0 0 0 5px rgba(255, 88, 11, 0.12);
}
.midnight-product-page .mp-access {
margin-top: 18px;
padding: 24px;
border-color: rgba(255, 88, 11, 0.5);
text-align: left;
}
.midnight-product-page .mp-access h2 {
color: var(--mdps-text);
margin: 0 0 12px;
font-size: 24px;
line-height: 1.2;
font-weight: 800;
}
.midnight-product-page .mp-class-status {
margin: 18px 0;
padding: 24px;
background: radial-gradient(circle at top left, rgba(255, 88, 11, 0.13), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
var(--mdps-panel);
border: 1px solid var(--mdps-border);
border-radius: 22px;
box-shadow: var(--mdps-shadow);
}
.midnight-product-page .mp-class-status h2 {
color: var(--mdps-text);
margin: 0 0 12px;
font-size: 24px;
line-height: 1.2;
font-weight: 800;
}
.midnight-product-page .mp-class-status h2 span {
color: var(--mdps-accent);
}
.midnight-product-page .mp-class-status p {
max-width: 920px;
margin: 0;
}
.midnight-product-page .mp-status-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 4px;
color: var(--mdps-soft);
font-size: 13px;
line-height: 1;
font-weight: 700;
}
.midnight-product-page .mp-status-legend span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.midnight-product-page .mp-status-legend span:before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
}
.midnight-product-page .mp-status-ready:before {
background: #22c55e;
}
.midnight-product-page .mp-status-progress:before {
background: #3b82f6;
}
.midnight-product-page .mp-status-planned:before {
background: #ef4444;
}
.midnight-product-page .mp-class-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.midnight-product-page .mp-class-card {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
padding: 12px;
border: 1px solid var(--mdps-border);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
var(--mdps-card);
}
.midnight-product-page .mp-class-card:last-child {
grid-column: 2;
}
.midnight-product-page .mp-class-icon,
.midnight-product-page .mp-spec img {
width: 30px;
height: 30px;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.14);
}
.midnight-product-page .mp-spec img {
grid-column: 1;
grid-row: 1;
}
.midnight-product-page .mp-class-icon {
width: 42px;
height: 42px;
}
.midnight-product-page .mp-class-card h3 {
color: var(--mdps-text);
margin: 0 0 8px;
font-size: 16px;
line-height: 1.25;
font-weight: 800;
}
.midnight-product-page .mp-spec-list {
display: grid;
gap: 7px;
}
.midnight-product-page .mp-spec {
position: relative;
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 10px 10px;
gap: 8px;
align-items: center;
min-height: 38px;
padding: 5px 7px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.035);
}
.midnight-product-page .mp-spec-name {
display: block;
grid-column: 2;
grid-row: 1;
color: var(--mdps-soft);
font-size: 13px;
line-height: 1.2;
font-weight: 700;
}
.midnight-product-page .mp-spec:before,
.midnight-product-page .mp-spec:after {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
}
.midnight-product-page .mp-spec:before {
grid-column: 3;
grid-row: 1;
background: transparent;
box-shadow: none;
}
.midnight-product-page .mp-spec:after {
grid-column: 4;
grid-row: 1;
}
.midnight-product-page .mp-spec[data-user-rotation="1"]:before {
background: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}
.midnight-product-page .mp-spec[data-status="ready"]:after {
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}
.midnight-product-page .mp-spec[data-status="progress"]:after {
background: transparent;
box-shadow: none;
}
.midnight-product-page .mp-spec[data-status="planned"]:after {
background: transparent;
box-shadow: none;
}
.account-gate-backdrop {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
place-items: center;
padding: 20px;
background: rgba(5, 7, 12, 0.76);
backdrop-filter: blur(10px);
}
.account-gate-backdrop.is-open {
display: grid;
}
.account-gate-dialog {
position: relative;
width: min(620px, 100%);
padding: 26px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
background: linear-gradient(180deg, #191d27, #11141c);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
color: #f3f4f6;
}
.account-gate-close {
position: absolute;
top: 14px;
right: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: #f3f4f6;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.account-gate-close:hover {
background: rgba(255, 88, 11, 0.18);
border-color: rgba(255, 88, 11, 0.5);
transform: translateY(-1px);
}
.account-gate-title {
margin: 0 42px 14px 0;
font-size: 24px;
line-height: 1.2;
font-weight: 800;
}
.account-gate-copy {
display: grid;
gap: 12px;
color: #cbd5e1;
font-size: 15px;
line-height: 1.55;
}
.account-gate-copy p {
margin: 0;
}
.account-gate-note {
padding: 13px 14px;
border: 1px solid rgba(255, 88, 11, 0.24);
border-radius: 14px;
background: rgba(255, 88, 11, 0.08);
color: #f8fafc;
}
.account-gate-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.account-gate-actions .mp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 18px;
border-radius: 14px;
border: 1px solid rgba(255, 88, 11, 0.45);
background: linear-gradient(180deg, #ff6a1f, #d9480f);
color: #ffffff !important;
font-size: 14px;
font-weight: 800;
text-decoration: none !important;
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 0.02em;
transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.account-gate-actions .mp-btn:hover {
transform: translateY(-1px);
filter: brightness(1.08);
border-color: rgba(255, 126, 57, 0.75);
}
.account-gate-actions .mp-btn.secondary {
background: rgba(255, 255, 255, 0.04);
color: #f3f4f6 !important;
border-color: rgba(255, 255, 255, 0.14);
}
.account-gate-actions .mp-btn.secondary:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.28);
}
body.account-gate-open {
overflow: hidden;
}
@media (max-width: 991px) {
.midnight-product-page .mp-hero {
padding: 22px;
background-position: center;
}
.midnight-product-page h1 {
font-size: 29px;
}
.midnight-product-page .mp-strip,
.midnight-product-page .mp-section,
.midnight-product-page .mp-section.reverse {
grid-template-columns: 1fr;
}
.midnight-product-page .mp-image-grid {
grid-template-columns: 1fr;
}
.midnight-product-page .mp-image.crop-center img {
height: auto;
}
.midnight-product-page .mp-section,
.midnight-product-page .mp-access,
.midnight-product-page .mp-class-status {
padding: 22px;
}
.midnight-product-page .mp-class-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.midnight-product-page .mp-class-card:last-child {
grid-column: 1 / -1;
justify-self: center;
width: calc((100% - 12px) / 2);
}
}
@media (max-width: 575px) {
.midnight-product-page h1 {
font-size: 25px;
}
.midnight-product-page .mp-actions {
display: grid;
}
.midnight-product-page .mp-btn {
width: 100%;
}
.midnight-product-page .mp-class-grid {
grid-template-columns: 1fr;
}
.midnight-product-page .mp-class-card:last-child {
grid-column: auto;
width: auto;
}
}