/* /Components/TestConfigModal.razor.rz.scp.css */
.nl-modal-backdrop[b-dmrgg45km4] {
position: fixed;
inset: 0;
background: rgba(10, 15, 25, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
z-index: 9999;
}
.nl-modal[b-dmrgg45km4] {
width: min(980px, 100%);
max-height: min(86vh, 900px);
overflow: hidden;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
}
.nl-modal-header[b-dmrgg45km4] {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nl-modal-title[b-dmrgg45km4] {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.2px;
color: #111827;
}
.nl-modal-subtitle[b-dmrgg45km4] {
margin-top: 3px;
font-size: 13px;
color: #6b7280;
}
.nl-icon-button[b-dmrgg45km4] {
border: 0;
background: transparent;
font-size: 18px;
line-height: 1;
cursor: pointer;
color: #6b7280;
padding: 6px 10px;
border-radius: 10px;
}
.nl-icon-button:hover[b-dmrgg45km4] {
background: rgba(0,0,0,0.06);
color: #111827;
}
.nl-modal-body[b-dmrgg45km4] {
padding: 16px 20px;
overflow: auto;
}
.nl-callout[b-dmrgg45km4] {
border: 1px solid rgba(59, 130, 246, 0.22);
background: rgba(59, 130, 246, 0.08);
border-radius: 14px;
padding: 14px 14px;
margin-bottom: 16px;
}
.nl-callout-title[b-dmrgg45km4] {
font-weight: 700;
font-size: 13px;
color: #1f2937;
margin-bottom: 6px;
}
.nl-callout-text[b-dmrgg45km4] {
font-size: 13px;
color: #374151;
line-height: 1.45;
}
.nl-controls[b-dmrgg45km4] {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.nl-field[b-dmrgg45km4] {
display: grid;
gap: 6px;
}
.nl-label[b-dmrgg45km4] {
font-size: 12px;
color: #6b7280;
font-weight: 600;
}
.nl-input[b-dmrgg45km4] {
border: 1px solid rgba(0,0,0,0.14);
border-radius: 12px;
padding: 10px 12px;
font-size: 14px;
outline: none;
min-width: 160px;
background: #fff;
}
.nl-input:focus[b-dmrgg45km4] {
border-color: rgba(59,130,246,0.65);
box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}
.nl-toggle[b-dmrgg45km4] {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #111827;
user-select: none;
}
.nl-toggle input[b-dmrgg45km4] {
width: 18px;
height: 18px;
}
.nl-grid-wrap[b-dmrgg45km4] {
margin-top: 8px;
}
.nl-grid-title[b-dmrgg45km4] {
display: flex;
align-items: baseline;
gap: 10px;
font-weight: 800;
font-size: 14px;
color: #111827;
margin-bottom: 10px;
}
.nl-grid-title-hint[b-dmrgg45km4] {
font-weight: 600;
font-size: 12px;
color: #6b7280;
}
.nl-grid[b-dmrgg45km4] {
border: 1px solid rgba(0,0,0,0.10);
border-radius: 14px;
overflow: hidden;
}
.nl-grid-head[b-dmrgg45km4] {
display: grid;
grid-template-columns: 180px 1fr 110px; /* tighter Topic + tight Questions */
background: #f9fafb;
padding: 12px 14px;
font-size: 12px;
color: #6b7280;
font-weight: 800;
}
.nl-grid-row[b-dmrgg45km4] {
display: grid;
grid-template-columns: 180px 1fr 110px; /* match header */
padding: 10px 14px; /* slightly shorter row height */
border-top: 1px solid rgba(0,0,0,0.06);
align-items: center; /* tighter vertical alignment */
}
.nl-topic-name[b-dmrgg45km4] {
font-weight: 700;
color: #111827;
font-size: 13px;
padding-right: 10px;
}
.nl-topic-desc[b-dmrgg45km4] {
color: #4b5563;
font-size: 13px;
line-height: 1.35;
padding-right: 14px;
}
.nl-col-qty[b-dmrgg45km4] {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.nl-input-qty[b-dmrgg45km4] {
min-width: 0; /* override previous min */
width: 74px; /* fits 2β3 digits comfortably */
padding: 8px 10px; /* slightly smaller */
}
.nl-grid-empty[b-dmrgg45km4] {
padding: 14px;
font-size: 13px;
color: #6b7280;
}
.nl-error[b-dmrgg45km4] {
margin-top: 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(239, 68, 68, 0.10);
border: 1px solid rgba(239, 68, 68, 0.25);
color: #991b1b;
font-size: 13px;
font-weight: 600;
}
.nl-modal-footer[b-dmrgg45km4] {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 12px 20px;
border-top: 1px solid rgba(0,0,0,0.08);
background: #fff;
align-items: center;
}
.nl-footer-left[b-dmrgg45km4] {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
min-width: 0;
}
.nl-footer-metric[b-dmrgg45km4] {
font-size: 13px;
color: #111827;
white-space: nowrap;
}
.nl-footer-controls[b-dmrgg45km4] {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.nl-footer-right[b-dmrgg45km4] {
display: flex;
align-items: center;
gap: 10px;
}
.nl-field-inline .nl-label[b-dmrgg45km4] {
margin-right: 10px;
}
.nl-field-inline[b-dmrgg45km4] {
display: flex;
align-items: center;
gap: 10px;
}
.nl-input-minutes[b-dmrgg45km4] {
width: 120px;
min-width: 120px;
padding: 8px 10px;
}
@media (max-width: 820px) {
.nl-modal-footer[b-dmrgg45km4] {
flex-direction: column;
align-items: stretch;
}
.nl-footer-left[b-dmrgg45km4] {
justify-content: space-between;
}
.nl-footer-right[b-dmrgg45km4] {
justify-content: flex-end;
}
}
.nl-primary[b-dmrgg45km4], .nl-secondary[b-dmrgg45km4] {
border-radius: 12px;
padding: 10px 14px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
border: 1px solid transparent;
}
.nl-secondary[b-dmrgg45km4] {
background: #fff;
border-color: rgba(0,0,0,0.16);
color: #111827;
}
.nl-secondary:hover[b-dmrgg45km4] {
background: rgba(0,0,0,0.04);
}
.nl-primary[b-dmrgg45km4] {
background: #111827;
color: #fff;
}
.nl-primary:hover[b-dmrgg45km4] {
filter: brightness(1.05);
}
@media (max-width: 820px) {
.nl-grid-head[b-dmrgg45km4], .nl-grid-row[b-dmrgg45km4] {
grid-template-columns: 1fr;
}
.nl-col-qty[b-dmrgg45km4] {
align-items: flex-start;
}
.nl-input-qty[b-dmrgg45km4] {
width: 120px; /* on mobile give it a bit more breathing room */
}
}
/* /Layout/BottomBarLayout.razor.rz.scp.css */
/* =========================================================
Bottom Bar + Buttons (Drop-in Clean Version)
Hover does NOT change button colors
+ FIX: Phone layout prevents "Next question" text changes
from squashing/distorting other buttons
========================================================= */
/* Bottom bar container (keep yours; compatible with Fix 1) */
.nl-bottombar[b-6k3zfygzt9] {
position: relative;
width: 100%;
height: 60px;
background-color: #006b9b;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.22);
}
/* Button row */
.nl-bottombar-buttons[b-6k3zfygzt9] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 10px;
width: 100%;
max-width: 1200px;
flex-wrap: wrap;
}
/* ---------------------------
Modern button base
---------------------------- */
.nl-bottombar-btn[b-6k3zfygzt9] {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.96);
height: 44px;
min-width: 112px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px; /* pill */
font-size: 0.92rem;
font-weight: 650;
letter-spacing: 0.2px;
cursor: pointer;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
/* NOTE: removed background-color/border-color/filter from transition
so hover can't accidentally "color shift" */
transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
/* Hover: NO color changes (no background/border/filter changes) */
.nl-bottombar-btn:hover:not(:disabled)[b-6k3zfygzt9] {
transform: translateY(-1px);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
opacity: 0.98;
}
.nl-bottombar-btn:active:not(:disabled)[b-6k3zfygzt9] {
transform: translateY(0px) scale(0.98);
box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.nl-bottombar-btn:focus-visible[b-6k3zfygzt9] {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32), 0 14px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Disabled */
.nl-bottombar-btn:disabled[b-6k3zfygzt9] {
opacity: 0.45;
cursor: default;
transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* ---------------------------
Solve button: "primary"
---------------------------- */
.nl-bottombar-btn-primary[b-6k3zfygzt9] {
background: linear-gradient(180deg, rgba(0, 215, 255, 0.38), rgba(0, 125, 170, 0.38));
border-color: rgba(255, 255, 255, 0.30);
}
/* ---------------------------
Action button: color changes
---------------------------- */
.nl-bottombar-btn-action[b-6k3zfygzt9] {
border-color: rgba(255, 255, 255, 0.34);
}
/* Default action */
.nl-bottombar-btn-action.is-action[b-6k3zfygzt9] {
background: linear-gradient(180deg, rgba(255, 210, 77, 0.95), rgba(242, 177, 0, 0.95));
color: rgba(9, 31, 46, 0.95);
border-color: rgba(255, 255, 255, 0.22);
}
/* Retry / check again */
.nl-bottombar-btn-action.is-retry[b-6k3zfygzt9] {
background: linear-gradient(180deg, rgba(255, 143, 196, 0.95), rgba(224, 168, 223, 0.95));
color: rgba(20, 20, 35, 0.94);
}
/* Next question */
.nl-bottombar-btn-action.is-next[b-6k3zfygzt9] {
background: linear-gradient(180deg, rgba(72, 221, 140, 0.95), rgba(39, 174, 96, 0.95));
color: rgba(10, 25, 18, 0.95);
}
/* ---------------------------
Mobile tweaks (original)
---------------------------- */
@media (max-width: 400px) {
.nl-bottombar[b-6k3zfygzt9] {
height: 58px;
}
.nl-bottombar-buttons[b-6k3zfygzt9] {
gap: 8px;
padding: 0 8px;
}
.nl-bottombar-btn[b-6k3zfygzt9] {
min-width: 70px;
height: 40px;
padding: 0 12px;
font-size: 0.6rem;
border-radius: 999px;
}
}
/* =========================================================
FIX: Phones β keep 4 buttons stable on one row
Prevent "Next question" label changes from distorting others
========================================================= */
@media (max-width: 480px) {
/* keep all 4 buttons in ONE row */
.nl-bottombar-buttons[b-6k3zfygzt9] {
flex-wrap: nowrap; /* IMPORTANT */
width: 100%;
}
/* make each button share available width equally */
.nl-bottombar-btn[b-6k3zfygzt9] {
flex: 1 1 0; /* IMPORTANT */
min-width: 0; /* IMPORTANT: allow shrink */
padding: 0 10px; /* a bit tighter than default */
/* prevent text from breaking layout */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* (Optional) If you want the right-most button a bit wider,
keep this. If you want EXACT equal width, delete this rule. */
.nl-bottombar-btn-action.is-next[b-6k3zfygzt9] {
flex: 1.25 1 0;
}
}
/* =========================================================
Bottom-bar scrollable language banner
(unchanged)
========================================================= */
/* Container */
.lang-canvas[b-6k3zfygzt9] {
position: relative;
width: 100%;
height: 60px;
margin: 0;
padding: 0 12px;
display: flex;
align-items: center;
overflow: hidden;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Subtle Arabic background wordmark (static, non-distracting) */
.lang-bg-ar[b-6k3zfygzt9] {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
direction: rtl;
unicode-bidi: plaintext;
font-size: 48px;
font-weight: 900;
letter-spacing: 0.6px;
line-height: 1;
color: rgba(255, 255, 255, 0.12);
pointer-events: none;
user-select: none;
transform: translateY(1px);
animation: none;
}
/* Scrolling track */
.lang-canvas__track[b-6k3zfygzt9] {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 28px;
white-space: nowrap;
padding-left: 100%;
will-change: transform;
animation: langCanvasMove-b-6k3zfygzt9 linear infinite;
}
/* Scrolling motion */
@keyframes langCanvasMove-b-6k3zfygzt9 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* Language text */
.lang-canvas__text[b-6k3zfygzt9] {
font-size: 16px;
font-weight: 800;
line-height: 1;
color: rgba(255, 255, 255, 0.95);
opacity: 0.95;
letter-spacing: -0.2px;
user-select: none;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* RTL scripts */
.lang-canvas__text[dir="rtl"][b-6k3zfygzt9] {
font-weight: 800;
letter-spacing: 0.4px;
}
/* Hover behavior (desktop only) */
@media (hover: hover) and (pointer: fine) {
.lang-canvas:hover .lang-canvas__track[b-6k3zfygzt9] {
animation-play-state: paused;
}
}
/* Small screens */
@media (max-width: 480px) {
.lang-canvas[b-6k3zfygzt9] {
height: 56px;
padding: 0 10px;
}
.lang-bg-ar[b-6k3zfygzt9] {
font-size: 18px;
opacity: 0.10;
}
.lang-canvas__text[b-6k3zfygzt9] {
font-size: 14.5px;
}
.lang-canvas__track[b-6k3zfygzt9] {
gap: 22px;
}
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css
In-flow TopBar + In-flow BottomBar
Scroll only inside .content
*/
.page[b-s11sxmghw7] {
position: relative;
display: flex;
flex-direction: column;
height: 100dvh; /* full viewport */
overflow: hidden; /* prevent document scrolling */
}
/* Bars are in normal flow and must not shrink */
.nl-topbar-slot[b-s11sxmghw7],
.nl-bottombar-slot[b-s11sxmghw7] {
flex: 0 0 auto;
}
/* The only scrollable region */
.content[b-s11sxmghw7] {
flex: 1 1 auto;
min-height: 0; /* CRITICAL for flex scrolling */
overflow-y: auto;
box-sizing: border-box;
/* Optional: small padding for content */
padding: 8px 12px;
}
/* Disabled mode */
.nl-body-disabled[b-s11sxmghw7] {
pointer-events: none;
filter: grayscale(40%);
opacity: 0.6;
}
/* Overlay should cover only the content area */
.content[b-s11sxmghw7] {
position: relative; /* so overlay is relative to content */
}
.nl-body-overlay[b-s11sxmghw7] {
position: absolute;
inset: 0;
z-index: 50;
background: rgba(200, 200, 200, 0.18);
pointer-events: all;
}
/* /Layout/TopBarLayout.razor.rz.scp.css */
.header-bar-new[b-bvmcqmi43v] {
/* Fix 1: make it IN-FLOW (not fixed) */
position: relative; /* or just remove position entirely */
top: auto;
left: auto;
width: 100%;
height: 60px;
background-color: rgb(0, 100, 150);
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
/* z-index no longer needed, but harmless to keep low */
z-index: 1;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
/* LEFT GROUP */
.nl-header-left[b-bvmcqmi43v] {
display: flex;
align-items: center;
flex-direction: row;
gap: 12px; /* spacing between Home, Stats, score, accuracy */
}
/* HOME / STATS BUTTON AS ICON-OVER-TEXT */
.nl-header-button[b-bvmcqmi43v] {
display: flex;
flex-direction: column; /* ICON ABOVE TEXT */
align-items: center; /* CENTER BOTH */
cursor: pointer;
border: none;
background: none;
padding: 0;
color: #ffffff;
width: 50px; /* keeps width consistent */
}
.nl-header-icon[b-bvmcqmi43v] {
font-size: 28px; /* same icon size */
line-height: 1;
}
.nl-header-label[b-bvmcqmi43v] {
font-size: 10px; /* smaller text */
margin-top: 2px; /* small spacing under icon */
opacity: 0.9;
}
/* Shared font and style for score, accuracy, and timer */
.nl-header-score[b-bvmcqmi43v],
.nl-header-accuracy[b-bvmcqmi43v],
.nl-header-timer[b-bvmcqmi43v] {
font-family: "Exo", sans-serif;
font-size: 16px;
font-weight: 400;
color: #ffffff;
}
/* Make timer clickable */
.nl-header-timer[b-bvmcqmi43v] {
margin: 0 12px;
cursor: pointer;
display: flex;
align-items: center;
}
/* Optional: slightly dim when paused */
.nl-header-timer.paused[b-bvmcqmi43v] {
opacity: 0.5;
}
/* Responsive for small screens */
@media (max-width: 600px) {
.nl-header-timer[b-bvmcqmi43v] {
font-size: 0.9em;
}
}
/* RIGHT GROUP */
.header-buttons button[b-bvmcqmi43v] {
background: none;
border: none;
color: white;
font-size: .9em;
cursor: pointer;
margin: 0;
padding: 5px 10px;
transition: transform 0.2s ease;
}
.header-buttons[b-bvmcqmi43v] {
display: flex;
justify-content: flex-end;
gap: 0;
white-space: nowrap;
}
.header-buttons button:hover[b-bvmcqmi43v] {
transform: scale(1.2);
}
.nl-grade-select[b-bvmcqmi43v] {
font-family: "Exo", sans-serif;
font-size: 12px;
font-weight: 300;
color: #0b3556;
height: 32px;
min-width: 140px;
max-width: 140px;
padding: 4px 4px 4px 4px;
border-radius: 8px; /* pill */
border: 1px solid rgba(255, 255, 255, 0.85);
background-color: #ffffff;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
margin-right: 8px;
transition: max-width 0.2s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* optional: a custom small arrow on the right */
.nl-grade-select[b-bvmcqmi43v] {
background-image: linear-gradient(45deg, transparent 50%, #0b3556 50%), linear-gradient(135deg, #0b3556 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
/* hover/focus states */
.nl-grade-select:hover[b-bvmcqmi43v] {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.nl-grade-select:focus[b-bvmcqmi43v] {
outline: none;
border-color: #ffffff;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.nl-stats-popup[b-bvmcqmi43v] {
background: #ffffff;
border-radius: 18px;
width: 100%;
max-width: 420px;
max-height: 80vh;
display: flex;
flex-direction: column;
padding: 16px 16px 12px 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.nl-stats-title[b-bvmcqmi43v] {
font-size: 1.1rem;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
color: #5b3fd8;
}
.nl-stats-content[b-bvmcqmi43v] {
font-size: 0.9rem;
line-height: 1.4;
color: #333;
overflow-y: auto; /* π scrollable area */
padding-right: 4px;
margin-bottom: 10px;
}
/* Make scrolling nicer on touch devices */
.nl-stats-content[b-bvmcqmi43v]::-webkit-scrollbar {
width: 6px;
}
.nl-stats-content[b-bvmcqmi43v]::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(0, 0, 0, 0.2);
}
.nl-stats-close[b-bvmcqmi43v] {
align-self: center;
padding: 6px 16px;
border-radius: 999px;
border: none;
font-size: 0.9rem;
font-weight: 600;
background: #5b3fd8;
color: #fff;
cursor: pointer;
}
.nl-stats-close:active[b-bvmcqmi43v] {
transform: scale(0.97);
}
/* Overlay stays full-screen, dimmed background */
.nl-stats-overlay[b-bvmcqmi43v] {
position: fixed;
inset: 0;
background: rgba(10, 10, 20, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Popup container for adult report */
.nl-stats-popup-adult[b-bvmcqmi43v] {
background: #ffffff;
border-radius: 16px;
padding: 24px 28px;
max-width: 900px;
max-height: 80vh;
width: 90%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
display: flex;
flex-direction: column;
gap: 18px;
}
.nl-stats-header-row[b-bvmcqmi43v] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.nl-stats-main-title[b-bvmcqmi43v] {
font-size: 1.4rem;
font-weight: 600;
color: #1f2933; /* dark slate */
}
.nl-stats-date[b-bvmcqmi43v] {
font-size: 0.9rem;
color: #6b7280; /* muted gray */
margin-top: 2px;
}
.nl-stats-close-btn[b-bvmcqmi43v] {
border: 1px solid #d1d5db;
background: #f9fafb;
color: #111827;
font-size: 0.9rem;
padding: 6px 14px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.nl-stats-close-btn:hover[b-bvmcqmi43v] {
background: #e5e7eb;
box-shadow: 0 0 0 1px #d1d5db;
}
.nl-stats-body[b-bvmcqmi43v] {
overflow-y: auto;
padding-right: 6px;
}
/* Empty message */
.nl-stats-empty[b-bvmcqmi43v] {
padding: 24px 0;
text-align: center;
color: #6b7280;
}
/* Report content */
.nl-adult-report h2[b-bvmcqmi43v] {
font-size: 1.3rem;
margin: 0;
color: #1f2933;
}
.nl-report-heading[b-bvmcqmi43v] {
border-bottom: 1px solid #e5e7eb;
padding-bottom: 10px;
margin-bottom: 12px;
}
.nl-report-date[b-bvmcqmi43v] {
font-size: 0.9rem;
color: #6b7280;
}
/* Summary metrics grid */
.nl-report-summary-grid[b-bvmcqmi43v] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.nl-metric-card[b-bvmcqmi43v] {
background: #f9fafb;
border-radius: 10px;
padding: 10px 12px;
border: 1px solid #e5e7eb;
}
.nl-metric-label[b-bvmcqmi43v] {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
margin-bottom: 4px;
}
.nl-metric-value[b-bvmcqmi43v] {
font-size: 1.1rem;
font-weight: 600;
color: #111827;
}
/* Sections */
.nl-report-section[b-bvmcqmi43v] {
margin-top: 10px;
}
.nl-report-section h3[b-bvmcqmi43v] {
font-size: 1.05rem;
color: #111827;
margin-bottom: 6px;
border-left: 3px solid #2563eb; /* blue accent */
padding-left: 8px;
}
/* Description list layout */
.nl-report-list[b-bvmcqmi43v] {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 6px 18px;
}
.nl-report-list dt[b-bvmcqmi43v] {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6b7280;
}
.nl-report-list dd[b-bvmcqmi43v] {
margin: 0;
font-size: 0.95rem;
color: #111827;
}
/* Highlights */
.nl-report-highlights[b-bvmcqmi43v] {
margin: 4px 0 0 0;
padding-left: 18px;
font-size: 0.95rem;
color: #111827;
}
.nl-report-highlights li + li[b-bvmcqmi43v] {
margin-top: 4px;
}
/* Activity cards grid */
.nl-report-activity-grid[b-bvmcqmi43v] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
margin-top: 6px;
}
.nl-activity-card[b-bvmcqmi43v] {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
background: #ffffff;
}
.nl-activity-title[b-bvmcqmi43v] {
font-size: 0.95rem;
font-weight: 600;
color: #111827;
margin-bottom: 6px;
}
@keyframes slideIn-b-bvmcqmi43v {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.menu-item:hover[b-bvmcqmi43v] {
background-color: #f7fafc !important;
}
/* =========================
Topbar dropdown toggle button
========================= */
[b-bvmcqmi43v] .dropdown-toggle {
background: linear-gradient( 180deg, #ffffff, #f3f4f6 ) !important;
color: rgba(15, 23, 42, 0.85) !important;
border: 1px solid rgba(15, 23, 42, 0.18) !important;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
}
/* Remove Bootstrap blue focus */
[b-bvmcqmi43v] .dropdown-toggle:focus,
[b-bvmcqmi43v] .dropdown-toggle:active,
[b-bvmcqmi43v] .dropdown-toggle.show {
background: #f1f2f4 !important;
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
border-color: rgba(15, 23, 42, 0.28) !important;
}
/* Caret icon color */
[b-bvmcqmi43v] .dropdown-toggle::after {
color: rgba(15, 23, 42, 0.65);
}
.dropdown-toggle:hover[b-bvmcqmi43v] {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
/* =========================
Topbar dropdown β blended / neutral
========================= */
/* Dropdown container */
[b-bvmcqmi43v] .dropdown-menu {
background: linear-gradient( 180deg, #ffffff 0%, #f3f4f6 100% );
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 14px;
box-shadow: 0 14px 40px rgba(2, 6, 23, 0.14);
padding: 6px;
min-width: 180px;
position: absolute; /* required for z-index to work */
z-index: 210000 !important;
}
/* Top bar must always be above page content */
[b-bvmcqmi43v] .nl-topbar,
[b-bvmcqmi43v] header {
position: relative; /* important */
z-index: 200000 !important;
isolation: isolate; /* creates a top-level stacking context */
}
/* Dropdown items */
[b-bvmcqmi43v] .dropdown-item {
background: transparent;
color: rgba(15, 23, 42, 0.85);
font-weight: 700;
padding: 9px 12px;
border-radius: 10px;
}
/* Hover / focus */
[b-bvmcqmi43v] .dropdown-item:hover,
[b-bvmcqmi43v] .dropdown-item:focus {
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.95);
}
/* Active item */
[b-bvmcqmi43v] .dropdown-item.active {
background: rgba(15, 23, 42, 0.10);
color: rgba(15, 23, 42, 0.95);
}
/* Optional: dropdown divider */
[b-bvmcqmi43v] .dropdown-divider {
margin: 6px 0;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
/* Menu button: classic vertical 3-dots (kebab) */
.nl-menu-btn[b-bvmcqmi43v] {
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: transform 0.15s ease, background 0.15s ease;
}
.nl-menu-btn:hover[b-bvmcqmi43v] {
background: rgba(255, 255, 255, 0.18);
}
.nl-menu-btn:active[b-bvmcqmi43v] {
transform: translateY(1px);
}
.nl-menu-dots[b-bvmcqmi43v] {
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
display: inline-block;
position: relative;
}
.nl-menu-dots[b-bvmcqmi43v]::before,
.nl-menu-dots[b-bvmcqmi43v]::after {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
position: absolute;
left: 0;
}
.nl-menu-dots[b-bvmcqmi43v]::before {
top: -8px;
}
.nl-menu-dots[b-bvmcqmi43v]::after {
top: 8px;
}
/* Tiny: slightly smaller */
@media (max-width: 480px) {
.nl-menu-btn[b-bvmcqmi43v] {
width: 36px;
height: 36px;
border-radius: 9px;
}
.nl-menu-dots[b-bvmcqmi43v],
.nl-menu-dots[b-bvmcqmi43v]::before,
.nl-menu-dots[b-bvmcqmi43v]::after {
width: 3.5px;
height: 3.5px;
}
.nl-menu-dots[b-bvmcqmi43v]::before {
top: -7px;
}
.nl-menu-dots[b-bvmcqmi43v]::after {
top: 7px;
}
.nl-test-counter[b-bvmcqmi43v] {
font-size: 1rem;
font-weight: 500;
}
}
.owner-plus[b-bvmcqmi43v] {
margin-left: 6px;
font-weight: 700;
opacity: 0.65;
}
/* /Owner/Pages/HearSpeakLangPage.razor.rz.scp.css */
/* (same CSS you had β kept compact here, works as-is) */
.hs-page[b-6e961o7i5m] {
min-height: calc(100dvh - 20px);
padding: 5px 5px;
background: radial-gradient(1200px 520px at 20% 0%, rgba(99,102,241,0.16), transparent 62%), radial-gradient(900px 480px at 80% 20%, rgba(16,185,129,0.14), transparent 58%), linear-gradient(180deg, #f7f8fc 0%, #eef1f8 100%);
color: #111827;
}
.hs-shell[b-6e961o7i5m] {
max-width: 1120px;
margin: 0 auto;
border-radius: 18px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 18px 60px rgba(0,0,0,0.45);
backdrop-filter: blur(10px);
padding: 10px 10px 8px 10px;
}
.hs-header[b-6e961o7i5m] {
display: flex;
gap: 12px;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.hs-title-main[b-6e961o7i5m] {
font-size: 1.25rem;
font-weight: 750;
letter-spacing: 0.2px;
}
.hs-title-sub[b-6e961o7i5m] {
margin-top: 4px;
color: rgba(70,70,70,0.7);
font-size: 0.92rem;
}
.hs-status[b-6e961o7i5m] {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.hs-pill[b-6e961o7i5m] {
padding: 8px 10px;
border-radius: 999px;
font-size: 0.82rem;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.12);
}
.hs-pill-error[b-6e961o7i5m] {
background: rgba(239,68,68,0.16);
border-color: rgba(239,68,68,0.35);
}
.hs-grid[b-6e961o7i5m] {
display: grid;
grid-template-columns: 1fr 72px 1fr;
gap: 12px;
align-items: stretch;
}
.hs-card[b-6e961o7i5m] {
border-radius: 16px;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(15,23,42,0.10);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 210px;
}
.hs-card-header[b-6e961o7i5m] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 14px 10px 14px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.hs-label[b-6e961o7i5m] {
font-weight: 700;
color: rgba(70,70,70,0.92);
}
.hs-select[b-6e961o7i5m] {
background: rgba(255,255,255,0.95);
border: 1px solid rgba(15,23,42,0.14);
color: #111827;
border-radius: 10px;
padding: 8px 10px;
outline: none;
min-width: 170px;
}
.hs-textarea-wrap[b-6e961o7i5m] {
padding: 12px 14px 10px 14px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.hs-textarea[b-6e961o7i5m] {
width: 100%;
flex: 1;
resize: none;
border-radius: 14px;
padding: 14px 14px;
background: rgba(255,255,255,0.98);
border: 1px solid rgba(15,23,42,0.12);
color: #111827;
outline: none;
line-height: 1.45;
font-size: 1rem;
}
.hs-textarea[b-6e961o7i5m]::placeholder {
color: rgba(70,70,70,0.45);
}
.hs-meta[b-6e961o7i5m] {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.86rem;
}
.hs-muted[b-6e961o7i5m] {
color: rgba(70,70,70,0.65);
}
.hs-dot[b-6e961o7i5m] {
margin: 0 8px;
opacity: 0.7;
}
.hs-actions[b-6e961o7i5m] {
display: flex;
gap: 10px;
padding: 12px 14px 14px 14px;
border-top: 1px solid rgba(255,255,255,0.10);
flex-wrap: wrap;
}
.hs-btn[b-6e961o7i5m] {
display: inline-flex;
gap: 8px;
align-items: center;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(15,23,42,0.04);
color: #111827;
cursor: pointer;
user-select: none;
}
.hs-btn:disabled[b-6e961o7i5m] {
opacity: 0.45;
cursor: not-allowed;
}
.hs-btn-ghost[b-6e961o7i5m] {
background: rgba(0,0,0,0.18);
}
.hs-btn-primary[b-6e961o7i5m] {
background: linear-gradient(135deg, rgba(99,102,241,0.95), rgba(16,185,129,0.9));
border-color: rgba(255,255,255,0.20);
font-weight: 700;
justify-content: center;
}
.hs-ico[b-6e961o7i5m] {
width: 18px;
height: 18px;
}
.hs-ico-lg[b-6e961o7i5m] {
width: 20px;
height: 20px;
}
.hs-swap[b-6e961o7i5m] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.hs-swap-btn[b-6e961o7i5m] {
width: 54px;
height: 54px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.07);
color: #2a286f;
cursor: pointer;
}
.hs-swap-hint[b-6e961o7i5m] {
font-size: 0.8rem;
color: rgba(70,70,70,0.6);
}
.hs-footer[b-6e961o7i5m] {
margin-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.hs-spinner[b-6e961o7i5m] {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: rgba(255,255,255,0.95);
display: inline-block;
animation: hsSpin-b-6e961o7i5m 0.8s linear infinite;
}
@keyframes hsSpin-b-6e961o7i5m {
to {
transform: rotate(360deg);
}
}
@media (max-width: 450px) {
.hs-grid[b-6e961o7i5m] {
grid-template-columns: 1fr;
}
.hs-swap[b-6e961o7i5m] {
flex-direction: row;
justify-content: flex-start;
padding: 4px 4px 10px 4px;
}
/* when stacked: make the swap icon look up/down */
.hs-swap-btn .hs-ico[b-6e961o7i5m],
.hs-swap-btn .hs-ico-lg[b-6e961o7i5m] {
transform: rotate(90deg);
}
.hs-footer[b-6e961o7i5m] {
flex-direction: column;
align-items: stretch;
}
}
.hs-textarea-wrap[b-6e961o7i5m] {
position: relative;
}
.hs-fkbar-host[b-6e961o7i5m] {
top: 10px;
right: 10px;
z-index: 50;
}
/* On very small screens, push it slightly down if it overlaps */
@media (max-width: 560px) {
.hs-fkbar-host[b-6e961o7i5m] {
top: 8px;
right: 8px;
}
}
.hs-fkbar-underinput[b-6e961o7i5m] {
margin-top: 8px;
display: flex;
justify-content: flex-start;
}
/* /Owner/Pages/TopFrenchSentencesPage.razor.rz.scp.css */
.tfs-page[b-8lj8y23rjk] {
max-width: 980px;
margin: 0 auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
background: #ffffff;
color: #1f2937;
}
.tfs-group[b-8lj8y23rjk] {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 12px;
}
/* Group 1 */
.tfs-toolbar[b-8lj8y23rjk] {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 12px;
}
.tfs-nav[b-8lj8y23rjk] {
display: flex;
gap: 8px;
align-items: center;
}
.tfs-btn[b-8lj8y23rjk] {
min-width: 46px;
height: 40px;
border-radius: 12px;
border: 1px solid #d1d5db;
background: #ffffff;
cursor: pointer;
font-size: 18px;
}
.tfs-btn:disabled[b-8lj8y23rjk] {
opacity: 0.45;
cursor: not-allowed;
}
.tfs-select[b-8lj8y23rjk] {
height: 40px;
border-radius: 12px;
border: 1px solid #d1d5db;
padding: 0 10px;
background: #ffffff;
min-width: 110px;
}
.tfs-id[b-8lj8y23rjk] {
height: 40px;
min-width: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #ffffff;
border: 1px solid #d1d5db;
font-weight: 700;
}
/* Group 2 */
.tfs-sentence[b-8lj8y23rjk] {
text-align: center;
padding: 18px 12px;
}
.tfs-fr-row[b-8lj8y23rjk] {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.tfs-fr[b-8lj8y23rjk] {
font-size: 30px;
font-weight: 800;
color: #7f1d1d;
line-height: 1.2;
word-break: break-word;
}
.tfs-speak-big[b-8lj8y23rjk] {
width: 46px;
height: 42px;
border-radius: 12px;
border: 1px solid #d1d5db;
background: #ffffff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.tfs-en[b-8lj8y23rjk] {
font-size: 20px;
font-weight: 700;
color: #1d4ed8;
word-break: break-word;
}
/* Group 3 */
.tfs-words-header[b-8lj8y23rjk] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.tfs-words-title[b-8lj8y23rjk] {
font-weight: 800;
}
.tfs-progress[b-8lj8y23rjk] {
font-size: 13px;
color: #6b7280;
background: #ffffff;
border: 1px solid #e5e7eb;
padding: 6px 10px;
border-radius: 999px;
white-space: nowrap;
}
.tfs-words-grid[b-8lj8y23rjk] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.tfs-word-card[b-8lj8y23rjk] {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 10px;
}
.tfs-word-fr-row[b-8lj8y23rjk] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
}
.tfs-word-fr[b-8lj8y23rjk] {
font-weight: 900;
color: #7f1d1d;
font-size: 18px;
}
.tfs-word-en[b-8lj8y23rjk] {
font-weight: 700;
color: #1d4ed8;
font-size: 15px;
word-break: break-word;
}
.tfs-speak[b-8lj8y23rjk] {
width: 38px;
height: 34px;
border-radius: 10px;
border: 1px solid #d1d5db;
background: #ffffff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.tfs-muted[b-8lj8y23rjk] {
color: #6b7280;
font-size: 13px;
}
.tfs-error[b-8lj8y23rjk] {
color: #b91c1c;
font-weight: 700;
}
@media (max-width: 520px) {
.tfs-toolbar[b-8lj8y23rjk] {
grid-template-columns: 1fr;
gap: 10px;
}
.tfs-id[b-8lj8y23rjk] {
justify-self: start;
width: fit-content;
padding: 0 12px;
}
.tfs-fr-row[b-8lj8y23rjk] {
grid-template-columns: 1fr;
}
.tfs-speak-big[b-8lj8y23rjk] {
justify-self: center;
}
.tfs-fr[b-8lj8y23rjk] {
font-size: 26px;
}
.tfs-en[b-8lj8y23rjk] {
font-size: 18px;
}
}
/* /Pages/OpeningPage.razor.rz.scp.css */
/* OpeningPage.razor.css (FULL)
Light mode, modern, content-rich.
*/
.op-page[b-prr0g754si] {
width: 100%;
background: white;
/* β
prevents the βchopped from rightβ / horizontal overflow on phones */
overflow-x: clip; /* if clip causes issues, use hidden */
}
/* β
Make all elements calculate width predictably (mobile overflow fix) */
.op-page[b-prr0g754si], .op-page *[b-prr0g754si] {
box-sizing: border-box;
}
.op-shell[b-prr0g754si] {
width: 100%;
max-width: 890px; /* β
CHANGED from 980 */
margin: 0 auto; /* center on wide screens */
padding-left: 16px;
padding-right: 16px;
}
/* β
Ensure key top blocks never exceed container width */
.op-strip[b-prr0g754si],
.nl-banner[b-prr0g754si],
.lang-canvas[b-prr0g754si] {
width: 100%;
max-width: 100%;
}
/* --------------------------
Top strip (horizontal marquee)
-------------------------- */
.op-strip[b-prr0g754si] {
position: relative;
border-radius: 18px;
padding: 10px 0;
overflow: hidden;
background: radial-gradient(1200px 340px at 10% 0%, rgba(34, 197, 94, 0.16), transparent 55%), radial-gradient(1100px 320px at 85% 10%, rgba(59, 130, 246, 0.16), transparent 55%), radial-gradient(900px 240px at 55% 100%, rgba(236, 72, 153, 0.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 26px rgba(2, 6, 23, 0.08);
}
.op-strip__track[b-prr0g754si] {
display: inline-flex;
gap: 10px;
align-items: center;
white-space: nowrap;
padding: 0 16px;
will-change: transform;
animation: opMarquee-b-prr0g754si linear infinite;
}
.op-strip:hover .op-strip__track[b-prr0g754si] {
animation-play-state: paused;
}
.op-strip__fade[b-prr0g754si] {
position: absolute;
top: 0;
bottom: 0;
width: 70px;
z-index: 2;
pointer-events: none;
}
.op-strip__fade--left[b-prr0g754si] {
left: 0;
background: linear-gradient(to right, rgba(248,250,252,0.96), transparent);
}
.op-strip__fade--right[b-prr0g754si] {
right: 0;
background: linear-gradient(to left, rgba(248,250,252,0.96), transparent);
}
/* --------------------------
Artistic Banner (NL)
-------------------------- */
.nl-banner[b-prr0g754si] {
position: relative;
margin-top: 10px;
border-radius: 26px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 22px 60px rgba(2, 6, 23, 0.16);
}
/* Gold "Always Free" badge (top-right stamp) */
.nl-banner__badge[b-prr0g754si] {
position: absolute;
top: 12px;
right: 12px;
width: 118px;
height: auto;
z-index: 1; /* above blobs/grain */
pointer-events: none;
user-select: none;
filter: drop-shadow(0 14px 28px rgba(2, 6, 23, 0.18));
transform: rotate(6deg);
}
/* Desktop: make the hero feel more "designed" (two-column layout) */
@media (min-width: 760px) {
.nl-banner__content[b-prr0g754si] {
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: 16px;
padding: 22px 22px 18px 22px;
}
.nl-banner__left[b-prr0g754si] {
align-items: flex-start;
}
.nl-banner__card[b-prr0g754si] {
padding: 16px 16px 14px 16px;
}
}
/* Mobile: keep badge visible but not overpowering */
@media (max-width: 520px) {
.nl-banner__badge[b-prr0g754si] {
width: 92px;
top: 10px;
right: 10px;
transform: rotate(7deg);
}
}
.nl-banner__bg[b-prr0g754si] {
position: absolute;
inset: 0;
background: radial-gradient(1200px 700px at 10% 10%, rgba(59,130,246,0.18), transparent 55%), radial-gradient(900px 600px at 90% 15%, rgba(236,72,153,0.16), transparent 55%), radial-gradient(1000px 800px at 50% 110%, rgba(34,197,94,0.16), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.92));
}
.nl-banner__blob[b-prr0g754si] {
position: absolute;
filter: blur(34px);
opacity: 0.85;
border-radius: 999px;
transform: translateZ(0);
}
.nl-banner__blob--a[b-prr0g754si] {
width: 420px;
height: 420px;
left: -140px;
top: -120px;
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,0.55), transparent 55%);
}
.nl-banner__blob--b[b-prr0g754si] {
width: 420px;
height: 420px;
right: -160px;
top: -140px;
background: radial-gradient(circle at 30% 30%, rgba(236,72,153,0.55), transparent 55%);
}
.nl-banner__blob--c[b-prr0g754si] {
width: 520px;
height: 520px;
left: 20%;
bottom: -320px;
background: radial-gradient(circle at 30% 30%, rgba(34,197,94,0.50), transparent 60%);
}
.nl-banner__grain[b-prr0g754si] {
position: absolute;
inset: 0;
opacity: 0.08;
background-image: radial-gradient(circle at 10% 20%, rgba(0,0,0,0.22) 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.18) 1px, transparent 1px);
background-size: 24px 24px;
mix-blend-mode: soft-light;
}
.nl-banner__content[b-prr0g754si] {
position: relative;
padding: 18px 18px 14px 18px;
display: grid;
gap: 14px;
}
.nl-banner__left[b-prr0g754si] {
display: flex;
gap: 14px;
align-items: center;
}
.nl-banner__logoWrap[b-prr0g754si] {
position: relative;
width: 92px;
height: 92px;
/* REMOVE card look */
background: none;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
flex: 0 0 auto;
}
.nl-banner__logo[b-prr0g754si] {
width: 100%;
height: 100%;
object-fit: contain; /* π key change */
display: block;
transform: none;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
}
.nl-banner__logoGlow[b-prr0g754si] {
position: absolute;
inset: -30px;
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,0.30), transparent 55%), radial-gradient(circle at 70% 40%, rgba(236,72,153,0.26), transparent 55%), radial-gradient(circle at 50% 80%, rgba(34,197,94,0.26), transparent 60%);
filter: blur(18px);
opacity: 0.9;
pointer-events: none;
}
.nl-banner__titles[b-prr0g754si] {
min-width: 0;
}
.nl-banner__kicker[b-prr0g754si] {
font-size: 12px;
font-weight: 900;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(15, 23, 42, 0.70);
}
.nl-banner__title[b-prr0g754si] {
margin: 6px 0 2px 0;
line-height: 0.92;
letter-spacing: -1px;
}
.nl-banner__titleTop[b-prr0g754si] {
display: block;
font-size: 38px;
font-weight: 950;
font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.nl-banner__titleBottom[b-prr0g754si] {
display: block;
font-size: 42px;
font-weight: 950;
font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
background: linear-gradient(90deg, rgba(37,99,235,0.95), rgba(124,58,237,0.95), rgba(236,72,153,0.92));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nl-banner__tagline[b-prr0g754si] {
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
color: rgba(15, 23, 42, 0.78);
}
.nl-banner__taglineStrong[b-prr0g754si] {
padding: 2px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.nl-banner__taglineSoft[b-prr0g754si] {
margin-left: 6px;
}
.nl-banner__right[b-prr0g754si] {
display: grid;
}
.nl-banner__card[b-prr0g754si] {
border-radius: 22px;
padding: 14px 14px 12px 14px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 18px 44px rgba(2, 6, 23, 0.10);
backdrop-filter: blur(10px);
}
.nl-banner__cardTitle[b-prr0g754si] {
font-weight: 950;
letter-spacing: 0.2px;
font-size: 14px;
}
.nl-banner__cardText[b-prr0g754si] {
margin-top: 6px;
line-height: 1.6;
color: rgba(15, 23, 42, 0.80);
font-size: 13.5px;
}
.nl-banner__ctaRow[b-prr0g754si] {
margin-top: 12px;
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.nl-banner__ctaPrimary[b-prr0g754si] {
border: none;
border-radius: 16px;
padding: 10px 14px;
font-weight: 950;
cursor: pointer;
color: #fff;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.14);
transition: transform 140ms ease, box-shadow 140ms ease;
}
.nl-banner__ctaPrimary:hover[b-prr0g754si] {
transform: translateY(-1px);
box-shadow: 0 22px 44px rgba(2, 6, 23, 0.18);
}
.nl-banner__ctaLink[b-prr0g754si] {
text-decoration: none;
font-weight: 950;
color: rgba(37, 99, 235, 0.95);
}
.nl-banner__ctaLink:hover[b-prr0g754si] {
text-decoration: underline;
}
.nl-banner__chips[b-prr0g754si] {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nl-chip[b-prr0g754si] {
font-size: 12px;
font-weight: 900;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255,255,255,0.82);
color: rgba(15, 23, 42, 0.72);
}
/* Ribbon marquee inside banner */
.nl-banner__ribbon[b-prr0g754si] {
position: relative;
border-radius: 18px;
overflow: hidden;
padding: 10px 0;
border: 1px solid rgba(15, 23, 42, 0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(248,250,252,0.65));
backdrop-filter: blur(10px);
}
.nl-banner__ribbonTrack[b-prr0g754si] {
display: inline-flex;
gap: 10px;
align-items: center;
white-space: nowrap;
padding: 0 16px;
will-change: transform;
animation: nlRibbonMarquee-b-prr0g754si linear infinite;
}
.nl-banner__ribbon:hover .nl-banner__ribbonTrack[b-prr0g754si] {
animation-play-state: paused;
}
.nl-banner__ribbonFade[b-prr0g754si] {
position: absolute;
top: 0;
bottom: 0;
width: 70px;
z-index: 2;
pointer-events: none;
}
.nl-banner__ribbonFade--l[b-prr0g754si] {
left: 0;
background: linear-gradient(to right, rgba(248,250,252,0.75), transparent);
}
.nl-banner__ribbonFade--r[b-prr0g754si] {
right: 0;
background: linear-gradient(to left, rgba(248,250,252,0.75), transparent);
}
.nl-ribbonPill[b-prr0g754si] {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
font-weight: 900;
font-size: 13px;
letter-spacing: 0.2px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255,255,255,0.82);
box-shadow: 0 10px 22px rgba(2, 6, 23, 0.08);
}
@keyframes nlRibbonMarquee-b-prr0g754si {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Responsive layout for banner */
/*@media (min-width: 980px) {
.nl-banner__content {
grid-template-columns: 1.15fr 0.85fr;
align-items: center;
}
.nl-banner__ribbon {
grid-column: 1 / -1;
}
}*/
/* Add to OpeningPage.razor.css */
/* Paper modal sizing */
.op-modal--paper[b-prr0g754si] {
padding: 20px;
}
.nl-paper h2[b-prr0g754si] {
margin-top: 2.2rem;
margin-bottom: 0.6rem;
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.2px;
}
.nl-paper h2[b-prr0g754si]::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin-top: 6px;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
border-radius: 999px;
}
.op-modal__panel--paper[b-prr0g754si] {
width: min(1050px, 96vw);
max-height: 90vh;
display: grid;
grid-template-rows: auto 1fr;
}
/* Paper header tweak */
.op-modal__hdr--paper[b-prr0g754si] {
background: linear-gradient(90deg, rgba(15, 23, 42, 0.06), rgba(37, 99, 235, 0.10), rgba(236, 72, 153, 0.08));
}
/* Scroll area inside modal */
.op-paperScroll[b-prr0g754si] {
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #ffffff;
}
/* Paper inside modal: slightly tighter */
.nl-paper--inModal[b-prr0g754si] {
margin: 0;
border-radius: 0;
box-shadow: none;
border: none;
}
/* Byline */
.nl-paper__byline[b-prr0g754si] {
margin-top: 10px;
font-size: 13px;
opacity: 0.78;
letter-spacing: 0.2px;
}
/* Optional: nicer scrollbar on webkit */
.op-paperScroll[b-prr0g754si]::-webkit-scrollbar {
width: 10px;
}
.op-paperScroll[b-prr0g754si]::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.18);
border-radius: 999px;
}
.op-paperScroll[b-prr0g754si]::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.06);
}
.op-pill[b-prr0g754si] {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
font-weight: 800;
letter-spacing: 0.2px;
font-size: 13px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255,255,255,0.92);
box-shadow: 0 8px 18px rgba(2, 6, 23, 0.06);
}
.op-pill[dir="rtl"][b-prr0g754si] {
text-align: right;
}
@keyframes opMarquee-b-prr0g754si {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* --------------------------
Hero layout
-------------------------- */
.op-hero[b-prr0g754si] {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 18px;
margin-top: 14px;
align-items: start;
}
@media (max-width: 980px) {
.op-hero[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
.op-hero__left[b-prr0g754si] {
border-radius: 22px;
padding: 18px;
background: radial-gradient(1100px 420px at 0% 0%, rgba(59, 130, 246, 0.14), transparent 55%), radial-gradient(900px 340px at 90% 10%, rgba(34, 197, 94, 0.12), transparent 55%), radial-gradient(900px 340px at 50% 100%, rgba(236, 72, 153, 0.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.97));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 44px rgba(2, 6, 23, 0.10);
}
/* sticky can misbehave inside some layouts; if you see weirdness, remove sticky */
.op-hero__right[b-prr0g754si] {
position: sticky;
top: 10px;
}
@media (max-width: 980px) {
.op-hero__right[b-prr0g754si] {
position: static;
}
}
/* Brand */
.op-brand[b-prr0g754si] {
display: flex;
gap: 14px;
align-items: center;
}
.op-logo[b-prr0g754si] {
width: 84px;
height: 84px;
object-fit: cover;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 12px 28px rgba(2, 6, 23, 0.10);
background: #fff;
}
.op-brand__kicker[b-prr0g754si] {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(15, 23, 42, 0.70);
}
.op-brand__title[b-prr0g754si] {
margin: 4px 0 2px 0;
font-size: 34px;
line-height: 1.05;
letter-spacing: -0.6px;
}
.op-brand__tagline[b-prr0g754si] {
font-weight: 800;
color: rgba(15, 23, 42, 0.78);
}
/* Hero text */
.op-hero__lead[b-prr0g754si] {
margin: 14px 0 0 0;
font-size: 15.5px;
line-height: 1.65;
color: rgba(15, 23, 42, 0.88);
}
/* CTA */
.op-cta[b-prr0g754si] {
display: flex;
gap: 10px;
align-items: center;
margin-top: 14px;
flex-wrap: wrap;
}
.op-cta--center[b-prr0g754si] {
justify-content: center;
}
.op-btn[b-prr0g754si] {
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 14px;
padding: 10px 14px;
font-weight: 900;
letter-spacing: 0.2px;
cursor: pointer;
background: #fff;
transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.op-btn:hover[b-prr0g754si] {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
}
.op-btn--primary[b-prr0g754si] {
border: none;
color: #ffffff;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
}
.op-btn--big[b-prr0g754si] {
padding: 12px 18px;
border-radius: 16px;
font-size: 15px;
}
/* Trust row */
.op-trust[b-prr0g754si] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 14px;
}
@media (max-width: 720px) {
.op-trust[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
.op-trust__item[b-prr0g754si] {
border-radius: 16px;
padding: 12px;
background: rgba(255,255,255,0.85);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.op-trust__big[b-prr0g754si] {
font-weight: 950;
font-size: 16px;
}
.op-trust__small[b-prr0g754si] {
margin-top: 2px;
font-size: 13px;
color: rgba(15, 23, 42, 0.70);
}
/* Story */
.op-story[b-prr0g754si] {
margin-top: 16px;
padding: 14px;
border-radius: 18px;
background: rgba(255,255,255,0.82);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.op-story p[b-prr0g754si] {
margin: 0 0 10px 0;
line-height: 1.75;
color: rgba(15, 23, 42, 0.86);
}
.op-story__highlight[b-prr0g754si] {
margin: 0;
padding: 12px 12px;
border-radius: 16px;
background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(59,130,246,0.10), rgba(236,72,153,0.10));
border: 1px solid rgba(15, 23, 42, 0.06);
font-weight: 800;
}
/* --------------------------
Video card
-------------------------- */
.op-videoCard[b-prr0g754si] {
border-radius: 22px;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 44px rgba(2, 6, 23, 0.10);
}
.op-videoCard__top[b-prr0g754si] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 12px;
background: linear-gradient(90deg, rgba(37, 99, 235, 0.10), rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.op-badge[b-prr0g754si] {
font-weight: 950;
letter-spacing: 0.4px;
}
.op-videoCard__hint[b-prr0g754si] {
font-size: 12px;
color: rgba(15, 23, 42, 0.70);
}
.op-video[b-prr0g754si] {
width: 100%;
height: auto;
display: block;
background: #000;
}
.op-videoCard__bottom[b-prr0g754si] {
padding: 12px 12px 14px 12px;
}
.op-mini[b-prr0g754si] {
font-size: 13px;
line-height: 1.55;
color: rgba(15, 23, 42, 0.80);
}
/* --------------------------
Sections
-------------------------- */
.op-section[b-prr0g754si] {
margin-top: 16px;
padding: 18px;
border-radius: 22px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 44px rgba(2, 6, 23, 0.08);
}
.op-section--alt[b-prr0g754si] {
background: radial-gradient(1100px 420px at 0% 0%, rgba(34, 197, 94, 0.10), transparent 55%), radial-gradient(900px 340px at 90% 10%, rgba(59, 130, 246, 0.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.97));
}
.op-section__hdr[b-prr0g754si] {
display: grid;
gap: 8px;
margin-bottom: 12px;
}
.op-h2[b-prr0g754si] {
margin: 0;
font-size: 20px;
letter-spacing: -0.2px;
}
.op-sub[b-prr0g754si] {
margin: 0;
line-height: 1.7;
color: rgba(15, 23, 42, 0.76);
}
/* Feature grid */
.op-grid[b-prr0g754si] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 980px) {
.op-grid[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
.op-card[b-prr0g754si] {
border-radius: 18px;
padding: 14px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(248,250,252,0.90);
}
.op-card--highlight[b-prr0g754si] {
background: linear-gradient(180deg, rgba(37,99,235,0.10), rgba(255,255,255,0.85));
border-color: rgba(37, 99, 235, 0.18);
}
.op-card__title[b-prr0g754si] {
font-weight: 950;
margin-bottom: 6px;
}
.op-card__body[b-prr0g754si] {
line-height: 1.7;
color: rgba(15, 23, 42, 0.80);
}
/* Tags */
.op-tags[b-prr0g754si] {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.op-tag[b-prr0g754si] {
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.70);
font-weight: 800;
}
/* Two-column section */
.op-twoCol[b-prr0g754si] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 980px) {
.op-twoCol[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
.op-panel[b-prr0g754si] {
border-radius: 18px;
padding: 14px;
background: rgba(255,255,255,0.90);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.op-panel--soft[b-prr0g754si] {
background: rgba(248,250,252,0.90);
}
.op-list[b-prr0g754si] {
margin: 10px 0 0 18px;
line-height: 1.7;
color: rgba(15, 23, 42, 0.82);
}
.op-callout[b-prr0g754si] {
margin-top: 12px;
border-radius: 18px;
padding: 14px;
background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(59,130,246,0.10), rgba(236,72,153,0.10));
border: 1px solid rgba(15, 23, 42, 0.06);
}
.op-callout__title[b-prr0g754si] {
font-weight: 950;
margin-bottom: 6px;
}
.op-callout__body[b-prr0g754si] {
color: rgba(15, 23, 42, 0.82);
line-height: 1.7;
}
/* Final CTA */
.op-final[b-prr0g754si] {
margin-top: 16px;
padding: 0;
}
.op-final__card[b-prr0g754si] {
border-radius: 22px;
padding: 18px;
background: radial-gradient(1100px 420px at 0% 0%, rgba(236, 72, 153, 0.12), transparent 55%), radial-gradient(900px 340px at 90% 10%, rgba(59, 130, 246, 0.12), transparent 55%), radial-gradient(900px 340px at 50% 100%, rgba(34, 197, 94, 0.12), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.97));
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 44px rgba(2, 6, 23, 0.10);
text-align: center;
}
.op-final__text[b-prr0g754si] {
margin: 10px auto 0 auto;
max-width: 860px;
line-height: 1.75;
color: rgba(15, 23, 42, 0.82);
}
/* --------------------------
AI article section + paper view
-------------------------- */
.op-ai .op-ai__hdr[b-prr0g754si] {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.op-ai__teaser[b-prr0g754si] {
border-radius: 18px;
padding: 14px;
background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.95));
border: 1px solid rgba(15, 23, 42, 0.08);
}
.op-ai__teaser p[b-prr0g754si] {
margin: 0 0 10px 0;
line-height: 1.75;
color: rgba(15, 23, 42, 0.86);
}
.op-ai__call[b-prr0g754si] {
margin: 0;
padding: 12px 12px;
border-radius: 16px;
background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(59,130,246,0.10), rgba(236,72,153,0.10));
border: 1px solid rgba(15, 23, 42, 0.06);
font-weight: 800;
}
.op-ai__actions[b-prr0g754si] {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.op-ai__link[b-prr0g754si] {
text-decoration: none;
display: inline-flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 14px;
font-weight: 950;
letter-spacing: 0.2px;
border: 1px solid rgba(15, 23, 42, 0.10);
background: rgba(255,255,255,0.92);
color: rgba(15, 23, 42, 0.92);
transition: transform 140ms ease, box-shadow 140ms ease;
}
.op-ai__link:hover[b-prr0g754si] {
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(2, 6, 23, 0.10);
}
.op-ai__arrow[b-prr0g754si] {
opacity: 0.9;
}
/* Professional βpaperβ view */
.nl-paper[b-prr0g754si] {
margin-top: 12px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 18px 46px rgba(0,0,0,0.18);
background: #ffffff;
color: #14151a;
}
.nl-paper__topline[b-prr0g754si] {
height: 6px;
background: linear-gradient(90deg, #1ec8ff, #8b5cf6, #ff4fa3, #22c55e);
}
.nl-paper__hdr[b-prr0g754si] {
padding: 18px 18px 10px 18px;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nl-paper__meta[b-prr0g754si] {
font-size: 12px;
opacity: 0.70;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.nl-paper__title[b-prr0g754si] {
margin: 8px 0 6px 0;
font-size: 26px;
line-height: 1.12;
font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}
.nl-paper__subtitle[b-prr0g754si] {
margin: 0;
opacity: 0.80;
line-height: 1.45;
font-size: 14.5px;
}
.nl-paper__content[b-prr0g754si] {
padding: 16px 18px 18px 18px;
font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}
.nl-paper__content h2[b-prr0g754si] {
margin: 16px 0 8px 0;
font-size: 16px;
letter-spacing: 0.2px;
}
.nl-paper__content p[b-prr0g754si] {
margin: 0 0 12px 0;
line-height: 1.75;
font-size: 15px;
}
.nl-paper__content ul[b-prr0g754si] {
margin: 8px 0 14px 18px;
}
.nl-paper__content li[b-prr0g754si] {
margin: 6px 0;
line-height: 1.65;
font-size: 15px;
}
/* Add these to your OpeningPage.razor.css (FULL)
Video mini card next to story + popup modal
*/
/* Hero becomes single-column now (we removed the right sticky panel) */
.op-heroSingle[b-prr0g754si] {
margin-top: 14px;
}
/* Story + video side-by-side */
.op-storyRow[b-prr0g754si] {
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 12px;
margin-top: 14px;
align-items: start;
}
@media (max-width: 980px) {
.op-storyRow[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
/* Small video card */
.op-videoMiniCard[b-prr0g754si] {
border-radius: 18px;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 14px 34px rgba(2, 6, 23, 0.10);
cursor: pointer;
outline: none;
}
.op-videoMiniCard:focus[b-prr0g754si] {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 14px 34px rgba(2, 6, 23, 0.10);
}
.op-videoMiniCard__top[b-prr0g754si] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background: linear-gradient(90deg, rgba(37, 99, 235, 0.10), rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.op-videoMini[b-prr0g754si] {
width: 100%;
height: auto;
display: block;
background: #000;
/* shrink feel / nicer crop */
aspect-ratio: 16 / 9;
object-fit: cover;
}
.op-videoMiniCard__bottom[b-prr0g754si] {
padding: 10px 12px 12px 12px;
display: flex;
justify-content: flex-end;
}
.op-popLink[b-prr0g754si] {
text-decoration: none;
font-weight: 950;
color: rgba(37, 99, 235, 0.95);
}
.op-popLink:hover[b-prr0g754si] {
text-decoration: underline;
}
/* Modal popup */
.op-modal[b-prr0g754si] {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(2, 6, 23, 0.55);
display: grid;
place-items: center;
padding: 18px;
}
.op-modal__panel[b-prr0g754si] {
width: min(980px, 96vw);
border-radius: 18px;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35);
}
.op-modal__hdr[b-prr0g754si] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: linear-gradient(90deg, rgba(37, 99, 235, 0.10), rgba(124, 58, 237, 0.08), rgba(236, 72, 153, 0.08));
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.op-modal__title[b-prr0g754si] {
font-weight: 950;
letter-spacing: 0.2px;
}
.op-modal__close[b-prr0g754si] {
border: 1px solid rgba(15, 23, 42, 0.10);
background: rgba(255,255,255,0.9);
border-radius: 12px;
padding: 6px 10px;
cursor: pointer;
font-weight: 950;
}
.op-modal__video[b-prr0g754si] {
width: 100%;
height: auto;
display: block;
background: #000;
}
.op-modal__hint[b-prr0g754si] {
padding: 10px 14px 14px 14px;
font-size: 12.5px;
color: rgba(15, 23, 42, 0.70);
}
/* =========================================
REPLACEMENT: Language Banner (Merged)
- Keeps your current lang-canvas styling
- Removes old scattered alphabet ::before
- Adds BIG Arabic background phrase via .lang-bg-ar
- Keeps slow drift/scroll + readable text
========================================= */
/* Container */
.lang-canvas[b-prr0g754si] {
position: relative;
margin: 18px 0 10px 0;
padding: 22px 0;
overflow: hidden;
border-radius: 22px;
background: radial-gradient(800px 300px at 10% 50%, rgba(59,130,246,0.12), transparent 55%), radial-gradient(700px 260px at 90% 40%, rgba(236,72,153,0.12), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.90));
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 14px 36px rgba(2, 6, 23, 0.10);
}
/* Big Arabic background wordmark (add ΩΩΩ ΩΨ§ΨͺΨ§ΩΩ ΩΩΨͺΨΉΩΩΩ
inside .lang-canvas) */
.lang-bg-ar[b-prr0g754si] {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
direction: rtl;
unicode-bidi: plaintext;
font-size: clamp(36px, 6vw, 110px);
font-weight: 900;
letter-spacing: 1.2px;
line-height: 1.1;
color: rgba(15, 23, 42, 0.12);
mix-blend-mode: multiply;
filter: blur(0.2px);
/* subtle artistic tilt + placement */
transform: translateY(6px) rotate(-1deg);
/* gentle motion (optional but nice) */
animation: arabicDrift-b-prr0g754si 18s ease-in-out infinite alternate;
}
/* Gentle drift (used by lang-bg-ar) */
@keyframes arabicDrift-b-prr0g754si {
0% {
transform: translateY(6px) rotate(-1deg) translateX(0px);
}
100% {
transform: translateY(-6px) rotate(-1deg) translateX(10px);
}
}
/* Moving track on top of Arabic wordmark */
.lang-canvas__track[b-prr0g754si] {
position: relative;
z-index: 2; /* β
above Arabic background wordmark */
display: inline-flex;
align-items: center;
gap: 44px;
white-space: nowrap;
padding-left: 100%;
will-change: transform;
animation: langCanvasMove-b-prr0g754si linear infinite;
}
/* Scrolling motion */
@keyframes langCanvasMove-b-prr0g754si {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* Make the languages readable (not faint) */
.lang-canvas__text[b-prr0g754si] {
font-size: clamp(18px, 2.2vw, 30px);
font-weight: 900;
letter-spacing: -0.4px;
opacity: 0.70;
color: rgba(15, 23, 42, 0.88);
mix-blend-mode: normal;
filter: none;
user-select: none;
pointer-events: none;
}
/* RTL scripts slightly softer (optional) */
.lang-canvas__text[dir="rtl"][b-prr0g754si] {
opacity: 0.62;
font-weight: 850;
letter-spacing: 0.6px;
}
/* Optional: pause on hover so it feels premium */
.lang-canvas:hover .lang-canvas__track[b-prr0g754si] {
animation-play-state: paused;
}
/* Footer */
.nl-op-footer[b-prr0g754si] {
width: 100%;
max-width: 100%; /* β
was 1100px β now obeys the 890 shell */
margin-top: 26px;
padding: 18px 14px;
border-radius: 18px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(10px);
}
.nl-op-footer-inner[b-prr0g754si] {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 14px;
align-items: start;
}
@media (max-width: 820px) {
.nl-op-footer-inner[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
.nl-op-footer-brand[b-prr0g754si] {
font-weight: 900;
letter-spacing: 0.2px;
font-size: 1.05rem;
}
.nl-op-footer-about[b-prr0g754si] {
margin-top: 6px;
color: rgba(246,247,255,0.78);
line-height: 1.55;
font-size: 0.92rem;
}
.nl-op-footer-row[b-prr0g754si] {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
@media (max-width: 820px) {
.nl-op-footer-row[b-prr0g754si] {
justify-content: flex-start;
}
}
.nl-op-footer-copy[b-prr0g754si] {
color: rgba(246,247,255,0.75);
font-size: 0.92rem;
font-weight: 800;
}
.nl-op-footer-sep[b-prr0g754si] {
color: rgba(246,247,255,0.35);
}
.nl-op-footer-link[b-prr0g754si] {
color: #f97316;
text-decoration: none;
font-weight: 900;
}
.nl-op-footer-link:hover[b-prr0g754si] {
text-decoration: underline;
}
.nl-op-footer-muted[b-prr0g754si] {
color: rgba(246,247,255,0.65);
font-size: 0.92rem;
font-weight: 800;
}
.nl-op-footer-email[b-prr0g754si] {
color: #f97316;
text-decoration: none;
font-weight: 900;
}
.nl-op-footer-email:hover[b-prr0g754si] {
text-decoration: underline;
}
/* Modal (professional) */
.nl-op-modal[b-prr0g754si] {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(2, 6, 23, 0.62);
display: grid;
place-items: center;
padding: 18px;
}
.nl-op-modal-panel[b-prr0g754si] {
width: min(980px, 96vw);
max-height: 90vh;
overflow: hidden;
border-radius: 18px;
background: rgba(10, 12, 24, 0.98);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 30px 90px rgba(0,0,0,0.55);
display: grid;
grid-template-rows: auto 1fr;
}
.nl-op-modal-header[b-prr0g754si] {
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(90deg, rgba(37,99,235,0.20), rgba(124,58,237,0.16), rgba(236,72,153,0.16));
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nl-op-modal-title[b-prr0g754si] {
font-weight: 950;
letter-spacing: 0.2px;
}
.nl-op-modal-close[b-prr0g754si] {
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
color: rgba(246,247,255,0.92);
border-radius: 12px;
padding: 6px 10px;
cursor: pointer;
font-weight: 950;
}
.nl-op-modal-body[b-prr0g754si] {
overflow: auto;
padding: 16px 16px 18px 16px;
}
/* Legal text styling */
.nl-op-legal-title[b-prr0g754si] {
font-weight: 950;
font-size: 1.05rem;
margin-bottom: 10px;
}
.nl-op-legal p[b-prr0g754si] {
color: rgba(246,247,255,0.80);
line-height: 1.65;
margin: 10px 0;
}
.nl-op-legal-foot[b-prr0g754si] {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.10);
color: rgba(246,247,255,0.70);
font-weight: 800;
font-size: 0.9rem;
}
/* =========================
Feedback section (Premium / Light)
========================= */
.nl-feedback[b-prr0g754si] {
margin-top: 26px;
}
.nl-feedback__card[b-prr0g754si] {
border-radius: 26px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.10);
background: rgba(255,255,255,0.78);
backdrop-filter: blur(14px);
box-shadow: 0 26px 70px rgba(2, 6, 23, 0.14);
}
.nl-feedback__hdr[b-prr0g754si] {
padding: 18px 18px 14px 18px;
background: radial-gradient(700px 220px at 15% 0%, rgba(59,130,246,0.22), transparent 55%), radial-gradient(700px 220px at 85% 10%, rgba(236,72,153,0.22), transparent 55%), linear-gradient(90deg, rgba(255,255,255,0.70), rgba(248,250,252,0.65));
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.nl-feedback__title[b-prr0g754si] {
font-weight: 950;
letter-spacing: -0.3px;
font-size: 1.18rem;
color: rgba(15, 23, 42, 0.92);
}
.nl-feedback__subtitle[b-prr0g754si] {
margin-top: 6px;
color: rgba(15, 23, 42, 0.65);
font-size: 0.95rem;
font-weight: 650;
}
.nl-feedback__grid[b-prr0g754si] {
padding: 18px;
display: grid;
gap: 14px;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) {
.nl-feedback__grid[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
.nl-feedback__field[b-prr0g754si] {
display: grid;
gap: 7px;
}
.nl-feedback__field--full[b-prr0g754si] {
grid-column: 1 / -1;
}
.nl-feedback__label[b-prr0g754si] {
font-weight: 900;
font-size: 0.92rem;
color: rgba(15, 23, 42, 0.86);
}
/* β
FIX: inputs should NOT be gray */
.nl-feedback__input[b-prr0g754si],
.nl-feedback__textarea[b-prr0g754si] {
width: 100%;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255,255,255,0.92);
color: rgba(15, 23, 42, 0.90);
padding: 12px 12px;
outline: none;
box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.nl-feedback__input[b-prr0g754si]::placeholder,
.nl-feedback__textarea[b-prr0g754si]::placeholder {
color: rgba(15, 23, 42, 0.40);
font-weight: 650;
}
.nl-feedback__input:focus[b-prr0g754si],
.nl-feedback__textarea:focus[b-prr0g754si] {
border-color: rgba(124, 58, 237, 0.40);
box-shadow: 0 14px 34px rgba(2, 6, 23, 0.10), 0 0 0 4px rgba(124, 58, 237, 0.14);
transform: translateY(-1px);
}
.nl-feedback__actions[b-prr0g754si] {
grid-column: 1 / -1;
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
/* CTA button: more premium */
.nl-feedback__btn[b-prr0g754si] {
border: none;
cursor: pointer;
border-radius: 18px;
padding: 12px 16px;
font-weight: 950;
color: #fff;
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
box-shadow: 0 18px 44px rgba(2, 6, 23, 0.18);
transition: transform 140ms ease, box-shadow 140ms ease;
}
.nl-feedback__btn:hover[b-prr0g754si] {
transform: translateY(-1px);
box-shadow: 0 26px 60px rgba(2, 6, 23, 0.22);
}
.nl-feedback__btn:disabled[b-prr0g754si] {
opacity: 0.65;
cursor: not-allowed;
}
.nl-feedback__status[b-prr0g754si] {
color: rgba(15, 23, 42, 0.78);
font-weight: 850;
}
/* =========================
Footer (Premium / Light)
========================= */
.nl-footer[b-prr0g754si] {
margin-top: 18px;
border-radius: 26px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.10);
background: radial-gradient(900px 260px at 15% 0%, rgba(59,130,246,0.14), transparent 55%), radial-gradient(900px 260px at 85% 20%, rgba(236,72,153,0.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,250,252,0.72));
backdrop-filter: blur(14px);
box-shadow: 0 26px 70px rgba(2, 6, 23, 0.14);
}
.nl-footer__top[b-prr0g754si] {
padding: 18px 18px;
display: grid;
grid-template-columns: 1.5fr 0.75fr 0.75fr;
gap: 16px;
}
@media (max-width: 980px) {
.nl-footer__top[b-prr0g754si] {
grid-template-columns: 1fr;
}
}
.nl-footer__logoRow[b-prr0g754si] {
display: flex;
gap: 10px;
align-items: center;
}
.nl-footer__mark[b-prr0g754si] {
width: 44px;
height: 44px;
border-radius: 16px;
display: grid;
place-items: center;
font-weight: 950;
color: rgba(255,255,255,0.96);
background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899);
box-shadow: 0 14px 34px rgba(2, 6, 23, 0.18);
}
.nl-footer__name[b-prr0g754si] {
font-weight: 950;
letter-spacing: -0.2px;
color: rgba(15, 23, 42, 0.92);
}
.nl-footer__tag[b-prr0g754si] {
color: rgba(15, 23, 42, 0.62);
font-weight: 800;
font-size: 0.95rem;
}
.nl-footer__about[b-prr0g754si] {
margin-top: 10px;
color: rgba(15, 23, 42, 0.70);
line-height: 1.7;
font-size: 0.98rem;
}
.nl-footer__colTitle[b-prr0g754si] {
font-weight: 950;
color: rgba(15, 23, 42, 0.92);
margin-bottom: 10px;
}
.nl-footer__link[b-prr0g754si] {
display: inline-block;
margin-top: 8px;
color: rgba(15, 23, 42, 0.78);
text-decoration: none;
font-weight: 850;
}
.nl-footer__link:hover[b-prr0g754si] {
text-decoration: underline;
}
.nl-footer__linkStrong[b-prr0g754si] {
color: rgba(236, 72, 153, 0.95);
text-decoration: none;
font-weight: 950;
}
.nl-footer__linkStrong:hover[b-prr0g754si] {
text-decoration: underline;
}
.nl-footer__line[b-prr0g754si] {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.nl-footer__muted[b-prr0g754si] {
color: rgba(15, 23, 42, 0.55);
font-weight: 850;
}
.nl-footer__bottom[b-prr0g754si] {
padding: 12px 18px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.nl-footer__copy[b-prr0g754si] {
color: rgba(15, 23, 42, 0.62);
font-weight: 850;
}
.nl-footer__dot[b-prr0g754si] {
margin: 0 8px;
color: rgba(15, 23, 42, 0.30);
}
.nl-footer__legal[b-prr0g754si] {
color: rgba(37, 99, 235, 0.95);
text-decoration: none;
font-weight: 950;
}
.nl-footer__legal:hover[b-prr0g754si] {
text-decoration: underline;
}
.nl-footer__mini[b-prr0g754si] {
color: rgba(15, 23, 42, 0.55);
font-weight: 800;
}
/* =========================
Legal modal (keeps your dark modal)
========================= */
.nl-legalModal[b-prr0g754si] {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(2, 6, 23, 0.62);
display: grid;
place-items: center;
padding: 18px;
}
.nl-legalModal__panel[b-prr0g754si] {
width: min(980px, 96vw);
max-height: 90vh;
overflow: hidden;
border-radius: 18px;
background: rgba(10, 12, 24, 0.98);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 30px 90px rgba(0,0,0,0.55);
display: grid;
grid-template-rows: auto 1fr;
}
.nl-legalModal__hdr[b-prr0g754si] {
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(90deg, rgba(59,130,246,0.14), rgba(124,58,237,0.10), rgba(236,72,153,0.10));
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.nl-legalModal__title[b-prr0g754si] {
font-weight: 950;
letter-spacing: -0.2px;
color: rgba(15, 23, 42, 0.92);
}
.nl-legalModal__close[b-prr0g754si] {
border: 1px solid rgba(15, 23, 42, 0.18);
background: rgba(255,255,255,0.85);
color: rgba(15, 23, 42, 0.80);
border-radius: 14px;
padding: 6px 10px;
cursor: pointer;
font-weight: 950;
}
.nl-legalModal__body[b-prr0g754si] {
overflow: auto;
padding: 20px 22px;
}
.nl-legal__headline[b-prr0g754si] {
font-weight: 950;
font-size: 1.1rem;
margin-bottom: 14px;
color: rgba(15, 23, 42, 0.92);
}
.nl-legal p[b-prr0g754si] {
color: rgba(15, 23, 42, 0.78);
line-height: 1.75;
margin: 12px 0;
font-size: 0.96rem;
}
.nl-legal__foot[b-prr0g754si] {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(15, 23, 42, 0.12);
color: rgba(15, 23, 42, 0.65);
font-weight: 850;
}
/* =========================
Legal Modal β Light / Paper Style
========================= */
.nl-legalModal[b-prr0g754si] {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 23, 42, 0.35); /* lighter overlay */
display: grid;
place-items: center;
padding: 18px;
}
.nl-legalModal__panel[b-prr0g754si] {
width: min(920px, 96vw);
max-height: 90vh;
overflow: hidden;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff, #f9fafb);
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 40px 90px rgba(2, 6, 23, 0.18);
display: grid;
grid-template-rows: auto 1fr;
}
.nl-bottom-wrap[b-prr0g754si] {
margin-top: 18px;
padding: 10px;
border-radius: 28px;
background: radial-gradient(900px 280px at 20% 0%, rgba(59,130,246,0.08), transparent 55%), radial-gradient(900px 280px at 80% 10%, rgba(236,72,153,0.08), transparent 55%);
}
/* =========================
Video preview
========================= */
.nl-video-preview[b-prr0g754si] {
position: relative;
border-radius: 22px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 26px 70px rgba(2, 6, 23, 0.18);
}
.nl-video-preview__video[b-prr0g754si] {
width: 100%;
display: block;
border-radius: 22px;
}
.nl-video-preview__overlay[b-prr0g754si] {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient( 180deg, rgba(15,23,42,0.00), rgba(15,23,42,0.35) );
opacity: 0;
transition: opacity 160ms ease;
}
.nl-video-preview:hover .nl-video-preview__overlay[b-prr0g754si] {
opacity: 1;
}
.nl-video-preview__text[b-prr0g754si] {
background: rgba(255,255,255,0.90);
padding: 8px 14px;
border-radius: 14px;
font-weight: 900;
color: rgba(15,23,42,0.92);
box-shadow: 0 12px 30px rgba(2,6,23,0.18);
}
/* =========================
Video modal (popup)
========================= */
.nl-video-modal[b-prr0g754si] {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(15, 23, 42, 0.35);
display: grid;
place-items: center;
padding: 16px;
}
.nl-video-modal__panel[b-prr0g754si] {
position: relative;
width: min(1000px, 96vw);
border-radius: 26px;
background: #000;
box-shadow: 0 40px 100px rgba(2,6,23,0.35);
overflow: hidden;
}
/* Close button */
.nl-video-modal__close[b-prr0g754si] {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
color: rgba(15,23,42,0.85);
font-size: 20px;
font-weight: 900;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.nl-video-modal__close:hover[b-prr0g754si] {
transform: scale(1.05);
}
/* Video itself */
.nl-video-modal__video[b-prr0g754si] {
width: 100%;
height: auto;
display: block;
background: #000;
}
/* ============================
Help video preview (TreeNode style)
============================ */
.nl-help-video-wrapper[b-prr0g754si] {
position: relative;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255,255,255,0.82);
backdrop-filter: blur(12px);
box-shadow: 0 26px 70px rgba(2, 6, 23, 0.14);
max-width: 520px; /* tweak as needed */
}
.nl-help-video[b-prr0g754si] {
width: 100%;
height: auto;
display: block;
cursor: pointer;
/* subtle βpremiumβ look */
transform: scale(1.01);
transition: transform 160ms ease, filter 160ms ease;
}
.nl-help-video-wrapper:hover .nl-help-video[b-prr0g754si] {
transform: scale(1.03);
filter: saturate(1.05) contrast(1.03);
}
.nl-help-video-hint[b-prr0g754si] {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 14px 36px rgba(2, 6, 23, 0.12);
font-weight: 900;
color: rgba(15, 23, 42, 0.78);
text-align: center;
}
/* ============================
Video popup modal (TreeNode style)
============================ */
.nl-video-modal-backdrop[b-prr0g754si] {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 16px;
/* light overlay (not dark-heavy) */
background: rgba(15, 23, 42, 0.35);
backdrop-filter: blur(2px);
}
.nl-video-modal[b-prr0g754si] {
position: relative;
width: min(1050px, 96vw);
max-height: 90vh;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 40px 100px rgba(2, 6, 23, 0.22);
display: grid;
grid-template-rows: auto 1fr;
}
/* close button */
.nl-video-close[b-prr0g754si] {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 42px;
height: 42px;
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.14);
background: rgba(255,255,255,0.92);
color: rgba(15, 23, 42, 0.82);
font-size: 20px;
font-weight: 950;
cursor: pointer;
box-shadow: 0 14px 36px rgba(2, 6, 23, 0.16);
transition: transform 140ms ease;
}
.nl-video-close:hover[b-prr0g754si] {
transform: translateY(-1px);
}
/* title bar */
.nl-video-modal-title[b-prr0g754si] {
padding: 14px 16px;
font-weight: 950;
letter-spacing: -0.2px;
color: rgba(15, 23, 42, 0.92);
background: linear-gradient(90deg, rgba(59,130,246,0.16), rgba(124,58,237,0.12), rgba(236,72,153,0.12));
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
/* video area */
.nl-video-modal-video[b-prr0g754si] {
width: 100%;
height: auto;
display: block;
background: #000;
/* keep it nicely contained on small screens */
max-height: calc(90vh - 70px);
}
/* =========================
Cross-platform panel (responsive)
========================= */
.nl-platform-panel[b-prr0g754si] {
margin-top: 14px;
padding: 18px 16px;
border-radius: 22px;
border: 1px solid rgba(15, 23, 42, 0.10);
background: radial-gradient(700px 220px at 15% 0%, rgba(59,130,246,0.14), transparent 55%), radial-gradient(700px 220px at 85% 10%, rgba(236,72,153,0.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.90), rgba(248,250,252,0.86));
backdrop-filter: blur(12px);
box-shadow: 0 22px 60px rgba(2, 6, 23, 0.14);
display: grid;
gap: 14px;
}
/* Icons row */
.nl-platform-icons[b-prr0g754si] {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: nowrap; /* keep on one row */
}
/* Individual device pill */
.nl-platform-item[b-prr0g754si] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 18px;
background: rgba(255,255,255,0.85);
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 12px 30px rgba(2, 6, 23, 0.10);
font-weight: 900;
color: rgba(15, 23, 42, 0.82);
}
/* Icon */
.nl-platform-icon[b-prr0g754si] {
font-size: 1.4rem;
line-height: 1;
}
/* Label */
.nl-platform-label[b-prr0g754si] {
font-size: 0.95rem;
}
/* Description text */
.nl-platform-text[b-prr0g754si] {
text-align: center;
max-width: 820px;
margin: 0 auto;
font-size: 0.98rem;
line-height: 1.7;
font-weight: 700;
color: rgba(15, 23, 42, 0.72);
}
/* =========================
Tiny screens adjustment
========================= */
@media (max-width: 420px) {
.nl-platform-icons[b-prr0g754si] {
gap: 12px;
}
.nl-platform-item[b-prr0g754si] {
padding: 8px 10px;
border-radius: 14px;
}
.nl-platform-icon[b-prr0g754si] {
font-size: 1.15rem;
}
.nl-platform-label[b-prr0g754si] {
font-size: 0.78rem;
font-weight: 800;
}
.nl-platform-text[b-prr0g754si] {
font-size: 0.88rem;
}
}
/* Desktop: keep 890px centered, and slightly reduce heavy blur */
@media (min-width: 980px) {
.nl-banner__blob[b-prr0g754si] {
filter: blur(24px);
}
}
/* =========================
Banner: small-screen fixes (prevent right-side clipping)
========================= */
@media (max-width: 520px) {
.nl-banner__content[b-prr0g754si] {
padding: 14px 14px 12px 14px;
gap: 12px;
}
.nl-banner__left[b-prr0g754si] {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.nl-banner__logoWrap[b-prr0g754si] {
width: 76px;
height: 76px;
border-radius: 18px;
}
.nl-banner__kicker[b-prr0g754si] {
font-size: 11px;
letter-spacing: 0.6px;
}
.nl-banner__title[b-prr0g754si] {
overflow-wrap: anywhere;
}
.nl-banner__titleTop[b-prr0g754si] {
font-size: 30px;
}
.nl-banner__titleBottom[b-prr0g754si] {
font-size: 34px;
}
.nl-banner__tagline[b-prr0g754si] {
font-size: 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.nl-banner__taglineSoft[b-prr0g754si] {
margin-left: 0;
}
.nl-banner__cardText[b-prr0g754si] {
font-size: 13.5px;
}
.nl-banner__ctaRow[b-prr0g754si] {
gap: 8px;
}
}
/*----------------------------*/
/* Chip button (looks like your spans, but clickable) */
.nl-chip-btn[b-prr0g754si] {
appearance: none;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(255,255,255,0.85);
border-radius: 999px;
padding: 10px 14px; /* a bit bigger target */
font-size: 0.9rem; /* slightly larger on phone */
font-weight: 600;
color: #333;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
/* β
Stop text selection on mobile (and desktop) */
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
/* β
Remove iOS callout / selection quirks */
-webkit-touch-callout: none;
/* β
Better touch behavior */
touch-action: manipulation; /* tells browser "this is a tap target" */
-webkit-tap-highlight-color: transparent;
/* β
Make press feedback consistent */
transition: background-color 70ms ease, transform 70ms ease, box-shadow 70ms ease, border-color 70ms ease;
/* Optional: prevents 300ms delay on very old mobile browsers */
cursor: pointer;
}
/* Also prevent selection inside the button */
.nl-chip-btn *[b-prr0g754si] {
user-select: none;
-webkit-user-select: none;
}
/* Desktop hover only */
@media (hover: hover) and (pointer: fine) {
.nl-chip-btn:hover[b-prr0g754si] {
background: rgba(255,255,255,1);
}
}
/* β
Press feedback (finger down / mouse down) */
.nl-chip-btn:active[b-prr0g754si] {
background-color: #ffe066;
border-color: rgba(0,0,0,0.18);
transform: translateY(1px);
box-shadow: 0 0 0 3px rgba(255, 224, 102, 0.35);
}
/* Keyboard focus */
.nl-chip-btn:focus-visible[b-prr0g754si] {
outline: 2px solid rgba(0,0,0,0.35);
outline-offset: 2px;
}
/* Green state */
.nl-chip-btn--green[b-prr0g754si] {
background: rgba(40, 180, 80, 0.18);
border-color: rgba(40, 180, 80, 0.55);
color: #146b2e;
}
/* Press feedback even when green */
.nl-chip-btn--green:active[b-prr0g754si] {
background-color: #ffe066;
}
/* /Pages/TestRunnerPage.razor.rz.scp.css */
/* Root container */
.nl-test-runner[b-g573p3w687] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nl-test-topbar[b-g573p3w687] {
position: fixed;
top: 0px;
left: 0;
width: 100%;
height: 62px;
background-color: #006b9b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
z-index: 999;
}
.nl-test-body[b-g573p3w687] {
flex: 1;
margin-top: 62px; /* Space for top bar */
margin-bottom: 62px; /* Space for bottom bar */
padding: 16px; /* Add some internal padding if needed */
overflow-y: auto; /* Allow scrolling within this area only */
scrollbar-width: none; /* Hide scrollbar (Firefox) */
}
/* Hide scrollbar (Chrome/Edge/Safari) */
.nl-test-body[b-g573p3w687]::-webkit-scrollbar {
display: none;
}
.nl-test-bottombar[b-g573p3w687] {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
height: 62px;
background-color: #006b9b;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25);
z-index: 999;
}
/* When the Test Runner is on the page, prevent the whole window from scrolling */
body:has(.nl-test-runner)[b-g573p3w687] {
overflow: hidden;
}
.nl-test-title[b-g573p3w687] {
font-size: 1.1rem;
font-weight: 600;
}
.nl-test-counter[b-g573p3w687] {
font-size: 1rem;
font-weight: 500;
}
.nl-test-bottombar-actions[b-g573p3w687] {
width: 100%;
display: flex;
justify-content: flex-end;
gap: 12px;
padding-right: 16px;
}
/* πΉ Buttons */
.nl-test-btn[b-g573p3w687] {
min-width: 90px;
padding: 8px 18px;
border-radius: 18px;
border: none;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: 0.2s ease;
color: #ffffff;
}
/* Skip: softer */
.nl-test-btn-skip[b-g573p3w687] {
background: linear-gradient(145deg, #7f8c8d, #5d6d6f);
}
.nl-test-btn-skip:hover[b-g573p3w687] {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
/* Submit: primary */
.nl-test-btn-submit[b-g573p3w687] {
background: linear-gradient(145deg, #f2b100, #d68910);
}
.nl-test-btn-submit:hover[b-g573p3w687] {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
/* HOME / STATS BUTTON AS ICON-OVER-TEXT */
.nl-header-button[b-g573p3w687] {
display: flex;
flex-direction: column; /* ICON ABOVE TEXT */
align-items: center; /* CENTER BOTH */
cursor: pointer;
border: none;
background: none;
padding: 0;
color: #ffffff;
width: 50px; /* keeps width consistent */
}
.nl-header-icon[b-g573p3w687] {
font-size: 28px; /* same icon size */
line-height: 1;
}
.nl-header-label[b-g573p3w687] {
font-size: 10px; /* smaller text */
margin-top: 2px; /* small spacing under icon */
opacity: 0.9;
}
/* Shared font and style for score, accuracy, and timer */
/* /Pages/WordSearchGame.razor.rz.scp.css */
/* Root container */
.nl-word-search-game[b-fijr8ef14f] {
display: flex;
flex-direction: column;
height: 100%;
background-color: #fffbe6;
overflow: hidden; /* optional, depends on your scroll preference */
}
.nl-body[b-fijr8ef14f] {
flex: 1 1 auto;
min-height: 0; /* important in flex */
overflow-y: auto;
/*padding: 16px;*/
}
/* ======================================================= */
/* RIGHT SIDE: tools above grid, words to the right */
/*.ws-game {
display: grid;
grid-template-columns: 420px minmax(240px, 320px);*/
/*gap: 18px;*/
/*align-items: start;
flex: 1;
}*/
.ws-game[b-fijr8ef14f] {
--grid-size: 420px;
display: grid;
grid-template-columns: 420px minmax(240px, 320px);
/*gap: 18px;*/
align-items: start;
flex: 1;
}
/* Tools sit above the grid (left column) */
.ws-game > .ws-tools[b-fijr8ef14f] {
grid-column: 1;
grid-row: 1;
}
/* Grid sits below tools (left column) */
.ws-game > .ws-gridwrap[b-fijr8ef14f] {
grid-column: 1;
grid-row: 2;
}
/* Word list stays on the right and spans both rows */
.ws-game > .ws-words[b-fijr8ef14f] {
grid-column: 2;
grid-row: 1 / span 2;
}
/* .ws-gridwrap.ws-gridwrap-tiny {
margin: 0 auto;
} */
.ws-tools[b-fijr8ef14f] {
padding: 12px;
border: 1px solid #ddd;
border-radius: 12px;
background: #fff;
}
.ws-toolrow[b-fijr8ef14f] {
display: flex;
gap: 10px;
}
.ws-tool.active[b-fijr8ef14f] {
border-color: #3D3D3D;
background: #F59127;
font-weight: 800;
}
.ws-status[b-fijr8ef14f] {
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.ws-complete[b-fijr8ef14f] {
font-weight: 800;
}
/* Fixed-size grid (no resizing) */
.ws-gridwrap[b-fijr8ef14f] {
position: relative;
width: var(--grid-size);
height: var(--grid-size);
aspect-ratio: 1 / 1;
touch-action: none; /* important for touch dragging */
}
.ws-grid[b-fijr8ef14f] {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(var(--n), 1fr);
grid-template-rows: repeat(var(--n), 1fr);
border: 2px solid #111;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
/* Pen cursor */
.ws-gridwrap.ws-cursor-pen[b-fijr8ef14f],
.ws-gridwrap.ws-cursor-pen .ws-cell[b-fijr8ef14f] {
cursor: url("data:image/svg+xml;utf8,\
") 4 28, pointer;
}
/* Eraser cursor */
.ws-gridwrap.ws-cursor-eraser[b-fijr8ef14f],
.ws-gridwrap.ws-cursor-eraser .ws-cell[b-fijr8ef14f] {
cursor: url("data:image/svg+xml;utf8,\
") 16 16, pointer;
}
.ws-cell[b-fijr8ef14f] {
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 16px; /* fixed size to avoid responsive resizing */
border: 1px solid rgba(0,0,0,0.12);
user-select: none;
}
.ws-overlay[b-fijr8ef14f] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.ws-stroke[b-fijr8ef14f] {
fill: none;
stroke: #888; /* soft gray */
stroke-width: 0.10; /* thinner line */
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.75;
}
.ws-preview[b-fijr8ef14f] {
opacity: 0.35;
stroke-dasharray: 0.25 0.25;
}
.ws-words[b-fijr8ef14f] {
min-width: 140px;
max-width: 180px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 12px;
background: #fff;
}
.ws-subtitle[b-fijr8ef14f] {
margin: 0 0 10px 0;
}
.ws-word[b-fijr8ef14f] {
display: flex;
gap: 10px;
align-items: center;
padding: 6px 6px;
border-radius: 10px;
cursor: pointer;
}
.ws-word.found[b-fijr8ef14f] {
font-weight: 800;
text-decoration: line-through;
opacity: 0.85;
}
/* Tiny: words list becomes horizontal and wraps */
.ws-words-tiny[b-fijr8ef14f] {
display: flex;
flex-wrap: wrap;
gap: 10px 14px; /* row-gap / column-gap */
align-items: center;
}
/* Each word becomes an inline pill */
.ws-words-tiny .ws-word[b-fijr8ef14f] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 10px;
white-space: nowrap;
}
/* When tiny, force grid to 380px */
.ws-gridwrap.ws-gridwrap-tiny[b-fijr8ef14f] {
width: 370px;
height: 370px;
}
/* Tiny: words list becomes horizontal and wraps */
.ws-words.ws-words-tiny[b-fijr8ef14f] {
width: 100%;
max-width: none;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px; /* tighter row / column gap */
box-sizing: border-box;
}
/* Title occupies full row */
.ws-words.ws-words-tiny .ws-subtitle[b-fijr8ef14f] {
flex-basis: 100%;
margin: 0 0 6px 0;
font-size: 0.85rem;
}
/* Compact "chip" words */
.ws-words.ws-words-tiny .ws-word[b-fijr8ef14f] {
display: inline-flex;
align-items: center;
gap: 4px; /* tighter checkbox gap */
padding: 2px 6px; /* π much smaller */
border-radius: 8px;
font-size: 0.75rem; /* smaller text */
line-height: 1.1;
white-space: nowrap;
}
/* Shrink checkbox itself */
.ws-words.ws-words-tiny .ws-word input[type="checkbox"][b-fijr8ef14f] {
transform: scale(0.75);
margin: 0;
}
/* Found words: still visible but compact */
.ws-words.ws-words-tiny .ws-word.found[b-fijr8ef14f] {
font-weight: 700;
opacity: 0.8;
}
/* Tiny footer buttons */
.nl-bottombar.nl-bottombar-tiny .nl-btn[b-fijr8ef14f] {
min-width: 64px;
padding: 6px 12px;
font-size: 0.8rem;
border-radius: 14px;
}
/* Optional: slightly emphasize Next even when tiny */
.nl-bottombar.nl-bottombar-tiny .nl-btn-next[b-fijr8ef14f] {
min-width: 72px;
font-weight: 700;
}
/* /Shared/SymbolGridWithSplits.razor.rz.scp.css */
.sg-container[b-4jv6mxuwls] {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 600px;
margin: 0 auto;
font-family: "Exo", system-ui, sans-serif;
}
.sg-grid-overlay[b-4jv6mxuwls] {
position: relative;
display: inline-block;
padding: 20px 0 0 20px; /* space for buttons */
margin: 0;
background: transparent;
overflow: visible;
}
.sg-grid[b-4jv6mxuwls] {
display: grid;
grid-template-columns: repeat(var(--cols), 24px);
grid-template-rows: repeat(var(--rows), 24px);
gap: 0;
position: relative;
z-index: 1;
}
.sg-cell[b-4jv6mxuwls] {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: transparent;
border: none;
box-shadow: none;
user-select: none;
line-height: 1;
}
/* Arrow buttons */
.sg-arrow-btn[b-4jv6mxuwls] {
position: absolute;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
font-size: 18px;
color: #8a9fb5;
transition: color 0.2s ease;
z-index: 10;
padding: 0;
}
.sg-arrow-btn:hover[b-4jv6mxuwls] {
color: #0080c0;
}
.sg-arrow-btn.active[b-4jv6mxuwls] {
color: #0080c0;
}
.sg-arrow-btn.active:hover[b-4jv6mxuwls] {
color: #0099e6;
}
/* Top buttons for vertical splits */
.sg-top-buttons[b-4jv6mxuwls] {
position: absolute;
top: 0;
left: 20px;
width: calc(var(--cols) * 24px);
height: 20px;
z-index: 10;
}
.sg-arrow-down[b-4jv6mxuwls] {
top: 1px;
transform: translateX(-50%);
}
/* Left buttons for horizontal splits */
.sg-left-buttons[b-4jv6mxuwls] {
position: absolute;
left: 0;
top: 20px;
width: 20px;
height: calc(var(--rows) * 24px);
z-index: 10;
}
.sg-arrow-right[b-4jv6mxuwls] {
left: 1px;
transform: translateY(-50%);
}
/* Base split lines */
.sg-split-h-line[b-4jv6mxuwls],
.sg-split-v-line[b-4jv6mxuwls] {
position: absolute;
background: #0080c0;
z-index: 2;
}
/* -----------------------------------------
Horizontal lines
- run left β right
- shift RIGHT by 24px
- extend LENGTH by 24px
------------------------------------------ */
.sg-split-h-line[b-4jv6mxuwls] {
height: 2px;
/* Positioning */
top: 50%;
left: 24px; /* shift RIGHT */
right: -24px; /* extend 24px more to the RIGHT */
transform: translateY(-50%);
}
/* -----------------------------------------
Vertical lines
- run top β bottom
- shift DOWN by 24px
- extend LENGTH by 24px
------------------------------------------ */
.sg-split-v-line[b-4jv6mxuwls] {
width: 2px;
/* Positioning */
left: 50%;
top: 24px; /* shift DOWN */
bottom: -24px; /* extend 24px more DOWN */
transform: translateX(-50%);
}
/* Active highlight */
.sg-split-h-line.active[b-4jv6mxuwls],
.sg-split-v-line.active[b-4jv6mxuwls] {
box-shadow: 0 0 4px rgba(0, 107, 155, 0.7);
}
/* /Shared/YesNoModal.razor.rz.scp.css */
/* Overlay background */
.nl-modal-overlay[b-cl8m3500ce] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.45);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
/* Popup box */
.nl-modal-box[b-cl8m3500ce] {
background: #ffffff;
width: 85%;
max-width: 380px;
padding: 24px;
border-radius: 18px;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
text-align: center;
animation: popIn-b-cl8m3500ce 0.25s ease-out;
}
/* Title */
.nl-modal-title[b-cl8m3500ce] {
font-size: 1.2rem;
font-weight: 700;
color: #d9534f; /* gentle red warning */
margin-bottom: 12px;
}
/* Message */
.nl-modal-message[b-cl8m3500ce] {
font-size: 1rem;
color: #444;
margin-bottom: 20px;
}
/* Buttons container */
.nl-modal-buttons[b-cl8m3500ce] {
display: flex;
justify-content: space-between;
gap: 14px;
}
/* Yes button */
.nl-btn-yes[b-cl8m3500ce] {
flex: 1;
padding: 10px;
border-radius: 14px;
border: none;
background-color: #f0ad4e;
color: white;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
/* No button */
.nl-btn-no[b-cl8m3500ce] {
flex: 1;
padding: 10px;
border-radius: 14px;
border: none;
background-color: #5bc0de;
color: white;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.nl-btn-yes:hover[b-cl8m3500ce],
.nl-btn-no:hover[b-cl8m3500ce] {
transform: scale(1.05);
}
/* Simple pop-in animation */
@keyframes popIn-b-cl8m3500ce {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}