html {
scrollbar-gutter: stable;
}
.app-shell.app-shell--tool-demo .tmd-phone-view {
display: none;
}
.app-shell.app-shell--tool-demo .tmd-family-name-shell {
container-type: inline-size;
min-width: 0;
align-items: center;
padding: 0 8px;
overflow: hidden;
}
.app-shell.app-shell--tool-demo .tmd-family-name-text {
display: block;
width: 100%;
min-width: 0;
margin: 0;
color: #4a4f55;
font-size: clamp(0.72rem, 8.5cqw, 1.25rem);
line-height: 1.18;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-shell.app-shell--tool-demo .tmd-family-name-input .mud-input-root {
font-size: clamp(0.75rem, 7.5cqw, 1rem);
}
.app-shell.app-shell--tool-demo .tmd-back-projects {
min-height: 36px;
margin-left: 4px;
color: white !important;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: none;
white-space: nowrap;
}
.app-shell.app-shell--tool-demo .tmd-app-title {
margin-left: 16px;
color: white;
font-size: 15px;
font-weight: 500;
}
@media (max-width: 760px) {
.app-shell.app-shell--tool-demo .tmd-back-projects {
margin-left: 0;
padding-inline: 6px;
min-width: 0;
font-size: 0.72rem;
}
.app-shell.app-shell--tool-demo .tmd-app-title {
margin-left: 8px;
font-size: 13px;
}
.app-shell.app-shell--tool-demo .tmd-desktop-table {
display: none;
}
.app-shell.app-shell--tool-demo .tmd-phone-view {
display: block;
padding: 0 0 2rem;
}
.app-shell.app-shell--tool-demo .tmd-main-container {
padding: 0 8px 24px;
}
.app-shell.app-shell--tool-demo .tmd-phone-toolbar {
position: sticky;
top: 64px;
z-index: 20;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #d7dce3;
border-radius: 8px;
background: #fff;
}
.app-shell.app-shell--tool-demo .tmd-phone-toolbar-search {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-search {
flex: 1 1 auto;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-sort .mud-button-root,
.app-shell.app-shell--tool-demo .tmd-phone-sort .mud-icon-button {
min-width: 44px;
width: 44px;
height: 44px;
}
.app-shell.app-shell--tool-demo .tmd-phone-view .mud-icon-button,
.app-shell.app-shell--tool-demo .tmd-phone-pagination .mud-button-root,
.app-shell.app-shell--tool-demo .tmd-phone-pagination .mud-pagination-item {
min-width: 44px;
width: 44px;
height: 44px;
}
.app-shell.app-shell--tool-demo .tmd-phone-toolbar-actions,
.app-shell.app-shell--tool-demo .tmd-phone-paste-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.app-shell.app-shell--tool-demo .tmd-phone-toolbar-actions .mud-button-root,
.app-shell.app-shell--tool-demo .tmd-phone-paste-row .mud-button-root {
flex: 1 1 96px;
min-height: 44px;
padding-inline: 10px;
white-space: normal;
}
.app-shell.app-shell--tool-demo .tmd-phone-cancel-confirm,
.app-shell.app-shell--tool-demo .tmd-phone-details-panel {
width: 100%;
margin-top: 10px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 12px;
background: #fff;
}
.app-shell.app-shell--tool-demo .tmd-phone-confirm-title {
display: block;
margin-bottom: 8px;
font-weight: 700;
}
.app-shell.app-shell--tool-demo .tmd-phone-confirm-list .mud-list-item {
padding-inline: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e0e0e0;
}
.app-shell.app-shell--tool-demo .tmd-phone-tree {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-card {
min-width: 0;
padding: 12px;
border: 2px solid #e0e0e0;
border-left-width: 4px;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
}
.app-shell.app-shell--tool-demo .tmd-phone-family {
border-left-color: #0f58d6;
}
.app-shell.app-shell--tool-demo .tmd-phone-kit {
margin-left: 10px;
border-left-color: #5e96ec;
}
.app-shell.app-shell--tool-demo .tmd-phone-assembly {
margin-left: 12px;
border-left-color: #95b8f2;
}
.app-shell.app-shell--tool-demo .tmd-phone-part {
margin-left: 12px;
border-left-color: #c6d8f8;
}
.app-shell.app-shell--tool-demo .tmd-phone-card-header {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-card-header--expandable {
align-items: flex-start;
}
.app-shell.app-shell--tool-demo .tmd-phone-title-group {
flex: 1 1 auto;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-header-side {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 2px;
margin-left: auto;
}
.app-shell.app-shell--tool-demo .tmd-phone-eyebrow,
.app-shell.app-shell--tool-demo .tmd-phone-label {
display: block;
color: #3b4450;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.2;
}
.app-shell.app-shell--tool-demo .tmd-phone-title,
.app-shell.app-shell--tool-demo .tmd-phone-value {
display: block;
min-width: 0;
color: #212529;
font-size: 1rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.app-shell.app-shell--tool-demo .tmd-phone-family-title {
font-size: clamp(0.82rem, 4.2vw, 1rem);
line-height: 1.22;
}
.app-shell.app-shell--tool-demo .tmd-phone-count {
flex: 0 0 auto;
color: #8b949e;
font-size: 0.8rem;
white-space: nowrap;
}
.app-shell.app-shell--tool-demo .tmd-phone-field-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
min-width: 0;
width: 100%;
}
.app-shell.app-shell--tool-demo .tmd-phone-field {
min-width: 0;
padding-bottom: 4px;
border-bottom: 1px solid #bdbdbd;
}
.app-shell.app-shell--tool-demo .tmd-phone-children {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
margin-top: 10px;
}
.app-shell.app-shell--tool-demo .tmd-phone-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.app-shell.app-shell--tool-demo .tmd-phone-actions .mud-icon-button {
width: 44px;
height: 44px;
margin: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-actions .mud-button-root {
min-height: 44px;
margin: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-details-button {
margin-left: auto !important;
}
.app-shell.app-shell--tool-demo .tmd-phone-card .mud-input-control {
width: 100%;
margin-top: 8px;
margin-bottom: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-card .mud-input-slot,
.app-shell.app-shell--tool-demo .tmd-phone-toolbar .mud-input-slot,
.app-shell.app-shell--tool-demo .tmd-phone-card .mud-input-root,
.app-shell.app-shell--tool-demo .tmd-phone-toolbar .mud-input-root {
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-phone-add-button {
align-self: flex-start;
min-width: 96px;
min-height: 44px;
}
.app-shell.app-shell--tool-demo .tmd-phone-pagination {
justify-content: center;
padding: 16px 0 0;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
font-family: var(--font);
}
html,
body {
margin: 0;
min-height: 100%;
background: var(--bg);
color: var(--text);
}
body {
overflow-x: hidden;
}
.yakoruClickRing {
position: absolute;
left: 0;
top: 0;
z-index: 2147483000;
width: 14px;
height: 14px;
border-radius: 999px;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(0.36);
transform-origin: center;
animation: yakoruClickRing 700ms cubic-bezier(0.18, 0.88, 0.24, 1) forwards;
will-change: opacity, transform;
}
.yakoruClickRing::before,
.yakoruClickRing::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.yakoruClickRing::before {
border: 1.5px solid rgba(148, 217, 255, 0.72);
background: transparent;
box-shadow: inset 0 0 0 1px rgba(241, 201, 121, 0.16);
opacity: 0.9;
animation: yakoruClickRippleOuter 700ms ease-out forwards;
will-change: opacity;
}
.yakoruClickRing::after {
inset: 3px;
background: rgba(241, 201, 121, 0.72);
box-shadow: 0 0 0 1px rgba(148, 217, 255, 0.22);
opacity: 0.92;
animation: yakoruClickRippleCore 700ms ease-out forwards;
will-change: opacity;
}
@keyframes yakoruClickRing {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.36);
}
10% {
opacity: 1;
}
66% {
opacity: 0.5;
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(3.7);
}
}
@keyframes yakoruClickRippleOuter {
0% {
opacity: 0.72;
}
100% {
opacity: 0;
}
}
@keyframes yakoruClickRippleCore {
0% {
opacity: 0.92;
}
34% {
opacity: 0.55;
}
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.yakoruClickRing {
animation: yakoruClickRingReduced 220ms ease-out forwards;
}
.yakoruClickRing::before,
.yakoruClickRing::after {
animation: none;
}
}
@keyframes yakoruClickRingReduced {
from {
opacity: 0.55;
transform: translate(-50%, -50%) scale(0.85);
}
to {
opacity: 0;
transform: translate(-50%, -50%) scale(1.15);
}
}
#content {
width: 100%;
min-width: 0;
}
.app-shell:not(.app-shell--tool-demo):not(.app-shell--mguard-demo) #content {
position: relative;
overflow: hidden;
isolation: isolate;
}
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page) {
--signal-angle: 112deg;
--signal-angle-alt: 42deg;
--signal-grid: 96px;
--signal-grid-x: 0px;
--signal-grid-y: 0px;
--signal-strength: 0.46;
--signal-trace-strength: 0.42;
--signal-mask-focus: 50% 30%;
position: relative;
overflow: hidden;
isolation: isolate;
}
.projects-page {
--signal-angle: 104deg;
--signal-angle-alt: 32deg;
--signal-grid-x: 28px;
--signal-grid-y: 8px;
--signal-mask-focus: 52% 34%;
--signal-trace-strength: 0.46;
}
.contactPage {
--signal-angle: 108deg;
--signal-angle-alt: 18deg;
--signal-grid-x: -18px;
--signal-grid-y: 18px;
--signal-mask-focus: 58% 40%;
}
.journeyPage {
--signal-angle: 118deg;
--signal-angle-alt: 48deg;
--signal-grid-x: 8px;
--signal-grid-y: 24px;
--signal-mask-focus: 48% 38%;
}
.login-page,
.auth-page {
--signal-angle: 112deg;
--signal-angle-alt: 68deg;
--signal-grid: 84px;
--signal-grid-x: 12px;
--signal-grid-y: 12px;
--signal-mask-focus: 50% 48%;
}
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::before,
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::before {
inset: 0;
background:
linear-gradient(90deg, rgba(148, 217, 255, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(232, 178, 89, 0.04) 1px, transparent 1px),
repeating-linear-gradient(var(--signal-angle),
transparent 0 146px,
rgba(148, 217, 255, 0.07) 147px 148px,
transparent 149px 290px),
repeating-linear-gradient(var(--signal-angle-alt),
transparent 0 190px,
rgba(232, 178, 89, 0.055) 191px 192px,
transparent 193px 360px);
background-size:
var(--signal-grid) var(--signal-grid),
var(--signal-grid) var(--signal-grid),
680px 680px,
760px 760px;
background-position:
var(--signal-grid-x) var(--signal-grid-y),
var(--signal-grid-x) var(--signal-grid-y),
12% 24%,
82% 16%;
opacity: var(--signal-strength);
animation: yakoruSignalField 42s linear infinite;
will-change: background-position;
}
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::after {
inset: 0;
background:
linear-gradient(var(--signal-angle),
transparent 0%,
transparent 35%,
rgba(232, 178, 89, 0.18) 35.18%,
rgba(148, 217, 255, 0.16) 35.45%,
transparent 35.8%,
transparent 100%),
linear-gradient(var(--signal-angle),
transparent 0%,
transparent 58%,
rgba(148, 217, 255, 0.14) 58.14%,
transparent 58.55%,
transparent 100%),
linear-gradient(var(--signal-angle-alt),
transparent 0%,
transparent 48%,
rgba(232, 178, 89, 0.115) 48.18%,
transparent 48.55%,
transparent 100%);
background-size: 180% 180%, 145% 145%, 160% 160%;
background-position: 8% 48%, 70% 18%, 40% 74%;
opacity: var(--signal-trace-strength);
mix-blend-mode: screen;
animation: yakoruSignalTrace 26s ease-in-out infinite alternate;
will-change: background-position, opacity;
}
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page) > :not(.login-bg):not(.auth-bg) {
position: relative;
z-index: 1;
}
.login-bg,
.auth-bg {
z-index: 0;
}
@keyframes yakoruSignalField {
0% {
background-position:
var(--signal-grid-x) var(--signal-grid-y),
var(--signal-grid-x) var(--signal-grid-y),
12% 24%,
82% 16%;
}
100% {
background-position:
calc(var(--signal-grid-x) + 44px) calc(var(--signal-grid-y) + 22px),
calc(var(--signal-grid-x) + 44px) calc(var(--signal-grid-y) + 22px),
72% 54%,
26% 76%;
}
}
@keyframes yakoruSignalTrace {
0% {
background-position: 8% 48%, 70% 18%, 40% 74%;
opacity: 0.3;
}
50% {
background-position: 52% 54%, 38% 44%, 72% 36%;
opacity: var(--signal-trace-strength);
}
100% {
background-position: 88% 50%, 12% 72%, 18% 42%;
opacity: 0.34;
}
}
@media (max-width: 640px) {
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::before {
opacity: 0.34;
}
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::after {
opacity: 0.24;
}
}
@media (prefers-reduced-motion: reduce) {
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::before,
:where(.projects-page, .contactPage, .journeyPage, .login-page, .auth-page)::after {
animation: none !important;
}
}
:root {
/* Font */
--font: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
/* Typography — Kicker / label */
--fs-kicker: 12px;
--fw-kicker: 800;
--ls-kicker: 0.14em;
/* Typography — Page title */
--fs-title: 56px;
--fw-title: 700;
--ls-title: 0.02em;
--lh-title: 1.04;
/* Typography — Section heading */
--fs-heading: 36px;
--fw-heading: 700;
--lh-heading: 1.2;
/* Typography — Card / item title */
--fs-card-title: 19px;
--fw-card-title: 600;
/* Typography — Body / lead */
--fs-body: 16px;
--lh-body: 1.7;
/* Typography — Small / description */
--fs-small: 14px;
/* Typography — Tags */
--fs-tag: 12px;
--fw-tag: 500;
/* Base */
--bg: #07090d;
--bg2: #0d1014;
--surface: rgba(18,20,21,0.78);
--surface2: rgba(255,255,255,0.055);
/* Borders & dividers */
--border: rgba(205,208,198,0.14);
--border2: rgba(205,208,198,0.22);
--divider: rgba(205,208,198,0.12);
/* Text */
--text: rgba(247,250,255,0.92);
--muted: rgba(224,229,229,0.72);
--subtle: rgba(202,210,209,0.56);
/* Accents (Wuwa-like) */
--gold: #e8b259;
--goldSoft: rgba(232,178,89,0.16);
--goldBorder: rgba(232,178,89,0.38);
--aqua: #94d9ff;
--aquaSoft: rgba(148,217,255,0.105);
/* Shadows */
--shadow: 0 20px 64px rgba(0,0,0,0.46);
--mobile-bottom-nav-height: 76px;
}
a, .btn-link {
color: var(--aqua);
}
.btn-primary {
color: #11120f;
background-color: var(--gold);
border-color: rgba(255,218,143,0.72);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem rgba(247,250,255,0.86), 0 0 0 0.25rem rgba(148,217,255,0.34);
}
.content {
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.text-danger {
color: #ff7d7d !important;
}
.table {
width: 100%;
border-collapse: collapse;
color: var(--text);
}
.table th,
.table td {
padding: 0.75rem;
border-bottom: 1px solid var(--border);
text-align: left;
}
.table thead th {
color: var(--muted);
font-weight: 700;
}
.lpBtn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: 14px;
font-weight: 800;
text-decoration: none;
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.92);
}
.lpBtn:hover {
background: rgba(255,255,255,0.06);
}
.lpBtn--ghost {
background: rgba(255,255,255,0.03);
}
.lpNav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.45), rgba(0,0,0,0));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.lpNav__inner {
max-width: 1180px;
margin: 0 auto;
padding: 12px 20px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
}
.lpBrand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #fff;
white-space: nowrap;
}
.lpBrand__mark {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 900;
letter-spacing: 0;
line-height: 1;
color: rgba(0,0,0,.9);
background: linear-gradient(135deg, rgba(211,176,106,1), rgba(255,255,255,.75));
box-shadow: 0 10px 30px rgba(211,176,106,.18);
}
.lpBrand__name {
font-weight: 900;
letter-spacing: .10em;
font-size: 13px;
opacity: .92;
}
.lpNav__links {
justify-self: center;
display: flex;
align-items: center;
gap: 18px;
}
.lpNav__link {
text-decoration: none;
color: rgba(255,255,255,.78);
padding: 8px 10px;
border-radius: 10px;
font-weight: 700;
}
.lpNav__link:hover {
color: #fff;
background: rgba(255,255,255,.08);
}
.lpNav__actions {
justify-self: end;
}
.siteTopbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
font-family: var(--font);
background: linear-gradient(to bottom, rgba(7,8,9,.97), rgba(11,13,14,.88) 58%, rgba(11,13,14,.24));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(205,208,198,.13);
box-shadow: 0 16px 42px rgba(0,0,0,.24);
}
.siteTopbar__inner {
max-width: 1180px;
margin: 0 auto;
padding: 12px 20px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
}
.siteBrand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: #fff;
white-space: nowrap;
}
.siteBrand__mark {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 900;
letter-spacing: 0;
line-height: 1;
color: rgba(22,14,4,.94);
background: linear-gradient(135deg, #f3d28a, #d49a45);
box-shadow: 0 10px 26px rgba(185,129,39,.2), inset 0 1px 0 rgba(255,255,255,.36);
}
.siteBrand__name {
font-size: 13px;
font-weight: 900;
letter-spacing: .10em;
color: rgba(247,250,255,.9);
opacity: 1;
}
.siteTopbar__links {
justify-self: center;
display: flex;
align-items: center;
gap: 18px;
}
.siteTopbar__link {
text-decoration: none;
color: rgba(224,229,229,.78);
padding: 8px 10px;
border-radius: 10px;
border: 1px solid transparent;
font-weight: 700;
transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.siteTopbar__link:hover {
color: rgba(247,250,255,.96);
border-color: rgba(155,220,255,.2);
background: rgba(155,220,255,.07);
}
.siteTopbar__link.active {
color: rgba(246,220,160,.98);
border-color: rgba(232,178,89,.26);
background: rgba(232,178,89,.12);
}
.siteTopbar__actions {
justify-self: end;
}
.siteTopbar__login {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: 12px;
font-weight: 800;
text-decoration: none;
border: 1px solid rgba(205,208,198,.17);
background: rgba(12,14,15,.72);
color: rgba(247,250,255,.92);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.siteTopbar__login:hover {
border-color: rgba(155,220,255,.3);
background: rgba(15,24,29,.86);
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 26px rgba(0,0,0,.22);
}
.siteTopbar__login.active {
color: rgba(246,220,160,.98);
border-color: rgba(232,178,89,.42);
background: rgba(232,178,89,.13);
}
.mobileBottomNav {
display: none;
}
@media (max-width: 980px) {
.lpNav__links,
.siteTopbar__links {
display: none;
}
body {
padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
}
:root {
--fs-title: 38px;
--fs-heading: 28px;
--fs-body: 16px;
--fs-card-title: 18px;
--ls-title: 0;
--ls-kicker: 0;
--lh-body: 1.62;
}
.siteTopbar {
z-index: 70;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.siteTopbar__inner {
grid-template-columns: auto 1fr;
padding: 10px 16px;
}
.siteTopbar__actions {
justify-self: end;
}
.siteTopbar__login {
min-height: 44px;
padding: 10px 14px;
border-radius: 12px;
}
.mobileBottomNav {
position: fixed;
left: 10px;
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
z-index: 60;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
min-height: 62px;
padding: 7px;
border: 1px solid rgba(205,208,198,.14);
border-radius: 18px;
background: rgba(8,9,10,.94);
box-shadow: 0 10px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter: none;
-webkit-backdrop-filter: none;
opacity: 1;
transform: translate3d(0, 0, 0);
transition:
transform 0.32s cubic-bezier(.22, 1, .36, 1),
opacity 0.22s ease;
will-change: transform, opacity;
}
.mobileBottomNav.mobileBottomNav--hidden {
opacity: 0;
pointer-events: none;
transform: translate3d(0, calc(100% + max(22px, env(safe-area-inset-bottom))), 0) scale(.98);
}
.mobileBottomNav__link {
min-width: 0;
min-height: 48px;
border-radius: 13px;
display: grid;
place-items: center;
align-content: center;
gap: 3px;
color: rgba(224,229,229,.72);
text-decoration: none;
font-size: 11px;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
-webkit-tap-highlight-color: transparent;
}
.mobileBottomNav__link:hover,
.mobileBottomNav__link:focus-visible,
.mobileBottomNav__link.active {
color: rgba(246,220,160,.98);
background: linear-gradient(135deg, rgba(232,178,89,.14), rgba(155,220,255,.075));
outline: none;
}
.mobileBottomNav__icon {
position: relative;
width: 22px;
height: 22px;
color: currentColor;
}
.mobileBottomNav__icon::before,
.mobileBottomNav__icon::after {
content: "";
position: absolute;
box-sizing: border-box;
}
.mobileBottomNav__link--home .mobileBottomNav__icon::before {
left: 5px;
top: 3px;
width: 12px;
height: 12px;
border-left: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: rotate(45deg);
border-radius: 2px 0 0 0;
}
.mobileBottomNav__link--home .mobileBottomNav__icon::after {
left: 6px;
bottom: 3px;
width: 10px;
height: 9px;
border: 2px solid currentColor;
border-top: 0;
border-radius: 0 0 3px 3px;
}
.mobileBottomNav__link--about .mobileBottomNav__icon::before {
left: 9px;
top: 4px;
width: 4px;
height: 4px;
border-radius: 999px;
background: currentColor;
}
.mobileBottomNav__link--about .mobileBottomNav__icon::after {
left: 9px;
top: 10px;
width: 4px;
height: 9px;
border-radius: 999px;
background: currentColor;
}
.mobileBottomNav__link--projects .mobileBottomNav__icon::before {
left: 4px;
top: 4px;
width: 6px;
height: 6px;
border: 2px solid currentColor;
border-radius: 3px;
box-shadow: 8px 0 0 0 currentColor, 0 8px 0 0 currentColor, 8px 8px 0 0 currentColor;
}
.mobileBottomNav__link--contact .mobileBottomNav__icon::before {
left: 3px;
top: 5px;
width: 16px;
height: 12px;
border: 2px solid currentColor;
border-radius: 4px;
}
.mobileBottomNav__link--contact .mobileBottomNav__icon::after {
left: 5px;
top: 7px;
width: 12px;
height: 8px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transform-origin: center;
}
a,
button,
input,
textarea,
select {
touch-action: manipulation;
}
input,
textarea,
select {
font-size: 16px;
}
}
@media (max-width: 520px) {
:root {
--fs-title: 34px;
--fs-heading: 26px;
--fs-kicker: 11px;
--fs-small: 13px;
--fs-tag: 11px;
}
.siteBrand__name {
letter-spacing: .08em;
}
.siteTopbar__login {
padding-inline: 12px;
font-size: 13px;
}
.pageShell {
padding-inline: 18px;
}
}
@media (max-width: 640px) {
.contactPage {
display: block;
max-height: none;
align-items: initial;
}
.auth-page {
min-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
}
.auth-shell {
min-height: auto;
place-items: start center;
padding: 94px 14px 26px;
}
.auth-bg {
inset: 0;
}
.auth-card {
width: 100%;
border-radius: 18px;
padding: 18px 16px 16px;
}
.auth-brand {
gap: 10px;
}
.password-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.ghost-btn {
min-height: 44px;
padding-inline: 12px;
}
.row,
.footer {
align-items: flex-start;
line-height: 1.4;
}
.primary-btn {
min-height: 46px;
}
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
.project {
display: grid;
margin: 0 auto;
align-content: center; /* centers the grid content vertically */
}
.hero {
position: relative;
height: 80vh;
overflow: hidden;
background-size: cover;
background-position: center;
border: 1px solid rgba(0,0,0,0.12);
}
/* Optional readability gradient (like many game UIs) */
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 45%, rgba(0,0,0,.70));
pointer-events: none;
}
.nav-btn {
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(0,0,0,.35);
color: white;
font-size: 26px;
display: grid;
place-items: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.thumb-strip {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 120px;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
width: min(900px, calc(100vw - 32px));
}
.thumbs {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 2px;
scrollbar-width: none;
/* 👇 IMPORTANT: do NOT use flex: 1 here */
flex: 0 1 auto;
}
.thumbs::-webkit-scrollbar {
display: none;
}
/* chrome */
.thumb {
flex: 0 1 auto;
width: 200px;
height: 85px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.20);
background-size: cover;
background-position: center;
background-color: rgba(0,0,0,.25);
}
.thumb.active {
outline: 2px solid rgba(255,255,255,.75);
outline-offset: 2px;
}
/* Bottom overlay */
.project-description {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 35px 22px;
background: rgba(20, 20, 20, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,0.18);
color: white;
/* 🔥 THIS is the key */
display: grid;
grid-template-columns: 300px 1fr;
align-items: center;
}
.project-description-title {
font-weight: 700;
font-size: 28px;
line-height: 1.2;
}
.project-description-description {
font-weight: 500;
opacity: 0.85;
max-width: none; /* let grid control width */
}
@media (max-width: 700px) {
.project-description {
grid-template-columns: 1fr;
gap: 8px;
}
}
/* ===== THEME ===== */
.home {
background: var(--bg);
min-height: 100vh;
color: var(--text);
}
/* ===== HERO ===== */
/* full-screen section with internal scroll */
.hero-home {
height: 100vh;
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding-top: 84px; /* space for your top bar */
padding-bottom: 28px;
background: radial-gradient(1200px 700px at 18% 0%, rgba(211,176,106,0.10), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 78% 18%, rgba(134,183,255,0.10), rgba(0,0,0,0) 55%), linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
}
.hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
display: grid;
grid-template-columns: 1.25fr 0.85fr;
gap: 26px;
align-items: start;
}
/* HERO layout */
.heroRow {
display: grid;
grid-template-columns: 1.25fr 0.85fr;
gap: 26px;
align-items: start;
}
/* section spacing */
.sectionBlock {
display: grid;
gap: 14px;
}
/* subtle dividers give “chapters” */
.sectionDivider {
height: 1px;
background: linear-gradient(to right, rgba(255,255,255,0.00), rgba(255,255,255,0.12), rgba(255,255,255,0.00));
margin: 6px 0;
}
/* THE structure: fixed content width + consistent side padding */
.pageShell {
max-width: 1180px;
margin: 0 auto;
padding: 0 30px 40px 30px;
display: grid;
gap: 26px;
}
.kicker {
color: rgba(211,176,106,0.92);
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
font-size: var(--fs-kicker);
font-weight: var(--fw-kicker);
}
.hero-title {
margin: 10px 0 10px 0;
font-size: var(--fs-title);
font-weight: var(--fw-title);
letter-spacing: var(--ls-title);
line-height: var(--lh-title);
color: rgba(255,255,255,0.94);
text-shadow: 0 4px 18px rgba(0,0,0,0.55);
}
.hero-lead {
margin: 0;
max-width: 58ch;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--muted);
}
.hero-cta {
margin-top: 18px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 14px;
padding: 12px 16px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
backdrop-filter: blur(10px);
}
.btn.primary {
background: var(--goldSoft);
border-color: var(--goldBorder);
color: rgba(255,255,255,0.92);
}
.btn.primary:hover {
background: rgba(211,176,106,0.24);
}
.btn.ghost {
background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.86);
}
.btn.ghost:hover {
background: rgba(0,0,0,0.28);
}
.hero-meta {
margin-top: 16px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pill {
padding: 8px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.03);
color: rgba(255,255,255,0.78);
font-size: 12px;
letter-spacing: 0.02em;
}
.hero-card {
border-radius: 18px;
background: rgba(10,12,16,0.55); /* not pure black */
border: 1px solid var(--border);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
}
.card-title {
color: var(--text);
}
.hero-card-top {
padding: 16px 16px 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-card-title {
font-weight: 800;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.92);
}
.hero-card-sub {
margin-top: 6px;
font-size: 13px;
color: var(--subtle);
}
.hero-card-body {
padding: 14px 16px;
display: grid;
gap: 12px;
}
.stat-label {
font-size: 12px;
color: var(--subtle);
}
.stat-value {
margin-top: 4px;
font-weight: 700;
color: var(--text);
}
.hero-card-footer {
padding: 14px 16px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.miniLink {
color: rgba(211,176,106,0.92);
text-decoration: none;
font-weight: 700;
}
.miniLink:hover {
text-decoration: underline;
}
.hero-fade {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 46px;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(42,40,43,1));
}
/* ===== SECTIONS ===== */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 34px 30px 10px 30px;
}
.section-header {
display: grid;
gap: 10px;
padding-bottom: 14px;
}
.section-title {
font-size: 22px;
font-weight: 700;
letter-spacing: 0.02em;
color: rgba(211,176,106,0.92);
}
.section-rule {
height: 2px;
background: linear-gradient(to right, rgba(211,176,106,0.55), rgba(255,255,255,0.12));
}
/* ===== CARDS ===== */
/* grids: make them visually even */
.cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
/* equalize service cards a bit */
.card {
height: 100%;
display: grid;
align-content: start;
gap: 8px;
}
.cards .card {
border-radius: 16px;
background: rgba(0,0,0,0.16);
}
.section-sub {
margin-top: -6px;
color: var(--subtle);
font-size: 13px;
}
.card-title {
font-weight: 800;
color: rgba(255,255,255,0.92);
}
.card-text {
margin-top: 8px;
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.72);
}
.tagRow {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(0,0,0,0.16);
color: rgba(255,255,255,0.74);
}
/* ===== WORK ===== */
.workWrap {
margin-top: 8px;
}
/* --- Carousel (peek + no drift) --- */
.imgViewport {
height: 60vh;
position: relative;
border: 1px solid rgba(255,255,255,0.10);
overflow: hidden;
background: rgba(255,255,255,0.02);
--peek: 10%;
--gap: 18px;
--slideW: calc(100% - var(--peek));
--step: calc(var(--slideW) + var(--gap));
}
.imgTrack {
height: 100%;
display: flex;
gap: var(--gap);
transition: transform 450ms ease;
will-change: transform;
/* reserve peek-space so the next slide is visible */
padding-right: var(--peek);
box-sizing: border-box;
}
.imgSlide {
flex: 0 0 var(--slideW);
height: 100%;
border: 0;
padding: 0;
cursor: pointer;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
display: block;
outline: none;
background-color: transparent;
}
.imgSlide:focus-visible {
box-shadow: 0 0 0 3px rgba(211,176,106,0.55);
}
.imgOverlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 22px 24px;
background: linear-gradient(to top, rgba(0,0,0,0.70), rgba(0,0,0,0));
}
.imgTitle {
color: #d3b06a;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.02em;
}
.imgSubtitle {
margin-top: 6px;
color: rgba(255,255,255,0.75);
font-size: 14px;
}
/* Nav buttons */
.navBtn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(0,0,0,0.35);
color: rgba(255,255,255,0.9);
font-size: 26px;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(6px);
z-index: 5;
}
.navBtn:hover {
background: rgba(0,0,0,0.55);
}
.navBtn.prev {
left: 14px;
}
.navBtn.next {
right: 14px;
}
/* Dots */
.dots {
position: absolute;
right: 14px;
bottom: 14px;
display: flex;
gap: 8px;
z-index: 5;
}
.dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.35);
background: rgba(255,255,255,0.12);
cursor: pointer;
}
.dot.active {
background: #d3b06a;
border-color: rgba(211,176,106,0.9);
}
.hero-bottom {
margin-left: 2px;
margin-top: 16px;
font-size: 48px;
font-weight: 800;
letter-spacing: 0.06em;
color: #f0eadc;
text-shadow: 0 4px 18px rgba(0,0,0,0.75), 0 0 30px rgba(0,0,0,0.6);
}
/* ===== WHY ===== */
/* why grid is lighter + tighter */
.whyGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.whyCard {
border-radius: 18px;
background: rgba(10,12,16,0.55); /* not pure black */
border: 1px solid var(--border);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 16px;
}
.whyTitle {
font-weight: 800;
color: var(--text);
}
.whyText {
margin-top: 8px;
font-size: 14px;
line-height: 1.55;
color: var(--muted);
}
/* ===== ABOUT + CTA ===== */
.aboutCta {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 14px;
align-items: stretch;
}
.about, .cta {
border-radius: 18px;
background: rgba(10,12,16,0.55); /* not pure black */
border: 1px solid var(--border);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 18px;
}
.aboutTitle, .ctaTitle {
font-weight: 900;
color: var(--text);
letter-spacing: 0.02em;
}
.aboutText, .ctaText {
margin-top: 10px;
color: var(--muted);
line-height: 1.6;
font-size: 14px;
}
.ctaButtons {
margin-top: 14px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ===== MODAL ===== */
.modalBackdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(6px);
z-index: 9999;
display: grid;
place-items: center;
padding: 24px;
}
.modalPanel--wide {
width: 100%;
height: 100%;
}
.modalClose {
position: sticky;
top: 0;
margin-left: auto;
margin-bottom: 30px;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(0,0,0,0.35);
color: rgba(255,255,255,0.9);
font-size: 26px;
cursor: pointer;
z-index: 1;
}
/* ===== RESPONSIVE ===== */
/* responsive: keep structure */
@media (max-width: 1100px) {
.heroRow {
grid-template-columns: 1fr;
}
.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.whyGrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.cards {
grid-template-columns: 1fr;
}
.whyGrid {
grid-template-columns: 1fr;
}
}
/* ===== PAGE ===== */
.contactPage {
min-height: 100vh;
max-height: 100vh;
background: #2A282B;
display: flex;
align-items: center;
}
.contactWrap {
max-width: 1100px;
margin: 0 auto;
padding: 90px 30px 30px 30px; /* space for top nav */
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 28px;
}
/* ===== LEFT ===== */
.kicker {
color: rgba(211,176,106,0.92);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
}
.contactTitle {
margin: 12px 0 12px 0;
font-size: 48px;
line-height: 1.05;
letter-spacing: 0.02em;
color: #f0eadc;
}
.contactLead {
max-width: 52ch;
font-size: 15px;
line-height: 1.6;
color: rgba(255,255,255,0.78);
}
.contactFacts {
margin-top: 24px;
display: grid;
gap: 14px;
}
.factLabel {
font-size: 12px;
color: rgba(255,255,255,0.55);
}
.factValue {
margin-top: 4px;
font-weight: 700;
color: rgba(255,255,255,0.88);
}
.factLink {
margin-top: 4px;
display: inline-block;
font-weight: 700;
color: rgba(211,176,106,0.95);
text-decoration: none;
}
.factLink:hover {
text-decoration: underline;
}
/* ===== RIGHT CARD ===== */
.contactCard {
border-radius: 18px;
background: rgba(10,12,16,0.55); /* not pure black */
border: 1px solid var(--border);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 22px;
display: flex;
align-items: center;
}
.contactForm {
width: 100%;
display: grid;
gap: 16px;
}
.field {
display: grid;
gap: 6px;
}
label {
font-size: 12px;
color: rgba(255,255,255,0.65);
}
input, textarea {
width: 100%;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(0,0,0,0.28);
padding: 12px 14px;
color: rgba(255,255,255,0.92);
font-size: 14px;
outline: none;
}
input:focus, textarea:focus {
border-color: rgba(211,176,106,0.65);
box-shadow: 0 0 0 3px rgba(211,176,106,0.15);
}
textarea {
resize: vertical;
min-height: 120px;
}
/* ===== ACTIONS ===== */
.formActions {
margin-top: 10px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.formNote {
font-size: 12px;
color: rgba(255,255,255,0.55);
}
/* ===== BUTTON ===== */
.btn {
border-radius: 14px;
padding: 12px 18px;
font-weight: 800;
border: 1px solid rgba(255,255,255,0.14);
cursor: pointer;
}
.btn.primary {
background: rgba(211,176,106,0.18);
border-color: rgba(211,176,106,0.35);
color: #f0eadc;
}
.btn.primary:hover {
background: rgba(211,176,106,0.26);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.contactWrap {
grid-template-columns: 1fr;
padding-top: 80px;
}
.contactTitle {
font-size: 40px;
}
}
.app-shell {
min-height: 100vh;
width: 100%;
background: #0b0d10;
display:flex;
}
html:has(.app-shell--tool-demo),
body:has(.app-shell--tool-demo) {
background: #f5f7fa;
color: #202124;
}
html:has(.app-shell--mguard-demo),
body:has(.app-shell--mguard-demo) {
background: #f5f5f5;
color: #202124;
padding-bottom: 0 !important;
}
html:has(.app-shell--tool-demo) {
scroll-behavior: smooth;
}
html:has(.app-shell--mguard-demo) {
scroll-behavior: auto;
}
.app-shell.app-shell--tool-demo,
#content.content--tool-demo {
display: block;
min-height: 100vh;
width: 100%;
background: #f5f7fa;
}
.app-shell.app-shell--tool-demo {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
.app-shell.app-shell--tool-demo .mud-layout,
.app-shell.app-shell--tool-demo .mud-main-content {
min-height: 100vh;
background: #f5f7fa;
}
.app-shell.app-shell--mguard-demo,
#content.content--mguard-demo {
display: block;
min-height: 100vh;
width: 100%;
background: #f5f5f5;
}
.app-shell.app-shell--mguard-demo {
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
.app-shell.app-shell--mguard-demo .mud-layout,
.app-shell.app-shell--mguard-demo .mud-main-content {
min-height: 100vh;
background: #f5f5f5;
}
:where(.app-shell.app-shell--mguard-demo table) {
caption-side: bottom;
border-collapse: collapse;
}
:where(.app-shell.app-shell--mguard-demo th) {
text-align: inherit;
text-align: -webkit-match-parent;
}
:where(.app-shell.app-shell--mguard-demo tbody),
:where(.app-shell.app-shell--mguard-demo td),
:where(.app-shell.app-shell--mguard-demo tfoot),
:where(.app-shell.app-shell--mguard-demo th),
:where(.app-shell.app-shell--mguard-demo thead),
:where(.app-shell.app-shell--mguard-demo tr) {
border-color: inherit;
border-style: solid;
border-width: 0;
}
:where(.app-shell.app-shell--tool-demo table) {
caption-side: bottom;
border-collapse: collapse;
}
:where(.app-shell.app-shell--tool-demo th) {
text-align: inherit;
text-align: -webkit-match-parent;
}
:where(.app-shell.app-shell--tool-demo tbody),
:where(.app-shell.app-shell--tool-demo td),
:where(.app-shell.app-shell--tool-demo tfoot),
:where(.app-shell.app-shell--tool-demo th),
:where(.app-shell.app-shell--tool-demo thead),
:where(.app-shell.app-shell--tool-demo tr) {
border-color: inherit;
border-style: solid;
border-width: 0;
}
.app-shell.app-shell--tool-demo .loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.2s ease-in-out;
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.app-shell.app-shell--tool-demo .loading-overlay.active {
background-color: rgba(0, 0, 0, 0.5);
pointer-events: auto;
}
.app-shell.app-shell--tool-demo .rotate-center {
animation: tmdRotateCenter 1.6s ease-in-out infinite both;
transform-origin: center;
}
.app-shell.app-shell--tool-demo .tracking-in-expand {
animation: tmdTrackingInExpand 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
.app-shell.app-shell--tool-demo .mud-collapse-container,
.app-shell.app-shell--tool-demo .mud-collapse-entering {
animation-duration: 0.2s !important;
}
.app-shell.app-shell--tool-demo .fade-in {
animation: tmdFadeIn 0.2s ease-in-out;
}
.app-shell.app-shell--tool-demo .slide-down {
animation: tmdSlideDown 0.2s ease-in-out;
}
.app-shell.app-shell--tool-demo .hover-scale {
transition: transform 0.3s ease-in-out;
}
.app-shell.app-shell--tool-demo .hover-scale:hover {
transform: scale(1.05);
}
.app-shell.app-shell--tool-demo .mark-for-delete {
border-color: red !important;
animation: tmdPulseRed 2s infinite, tmdSubtleShake 0.3s;
}
.app-shell.app-shell--tool-demo .mark-for-insert {
border-color: lawngreen !important;
animation: tmdFadeIn 0.2s ease-in-out, tmdSlideDown 0.2s ease-in-out, tmdPulseGreen 2s infinite;
}
.app-shell.app-shell--tool-demo .interactive-icon {
margin: 0.3rem;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.app-shell.app-shell--tool-demo .interactive-icon:hover {
transform: scale(1.1);
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.app-shell.app-shell--tool-demo .interactive-button {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: 8px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
cursor: pointer;
}
.app-shell.app-shell--tool-demo .interactive-button:hover {
transform: scale(1.05);
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.app-shell.app-shell--tool-demo .mud-table-toolbar {
align-items: center;
min-height: 62px;
padding: 10px 16px 6px;
}
.app-shell.app-shell--tool-demo .tmd-table-toolbar {
display: grid;
grid-template-columns: max-content minmax(280px, 1fr) max-content;
align-items: center;
column-gap: 24px;
width: 100%;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-toolbar-add {
align-self: center;
justify-self: start;
margin-left: 0 !important;
white-space: nowrap;
}
.app-shell.app-shell--tool-demo .tmd-toolbar-search {
width: 100%;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-toolbar-search .mud-input-control {
margin-top: 0;
margin-bottom: 0;
}
.app-shell.app-shell--tool-demo .tmd-toolbar-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: max-content;
}
.app-shell.app-shell--tool-demo .tmd-toolbar-actions .interactive-button {
margin-left: 0;
}
.app-shell.app-shell--tool-demo .tmd-cancel-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.app-shell.app-shell--tool-demo .tmd-cancel-confirmation {
position: absolute;
top: calc(100% + 12px);
right: 0;
z-index: 100;
border: 3px solid #ddd;
border-radius: 15px;
}
.app-shell.app-shell--tool-demo .scrollButton,
.app-shell.app-shell--tool-demo .scrollAddFamily {
position: static;
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.app-shell.app-shell--tool-demo .scrollButton.pop,
.app-shell.app-shell--tool-demo .scrollAddFamily.pop {
animation: tmdPopEffect 0.3s ease-in-out;
}
.app-shell.app-shell--tool-demo .scrollConfirmation {
z-index: 1000;
transition: position 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.app-shell.app-shell--tool-demo .pop-up-animation {
animation: tmdPopup 0.2s ease-out forwards;
}
.app-shell.app-shell--tool-demo .hover-container {
position: relative;
}
.app-shell.app-shell--tool-demo .details-container {
position: relative;
z-index: 20;
overflow: visible;
}
.app-shell.app-shell--tool-demo .details-container.tmd-details-open {
z-index: 260;
}
.app-shell.app-shell--tool-demo .details-text {
cursor: pointer;
position: relative;
z-index: 2;
}
.app-shell.app-shell--tool-demo .tmd-details-button,
.app-shell.app-shell--tool-demo .tmd-phone-details-button {
min-width: 88px;
margin: 0 !important;
transform: translateY(0) scale(1);
transform-origin: center;
transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
will-change: transform;
}
.app-shell.app-shell--tool-demo .tmd-details-button:hover,
.app-shell.app-shell--tool-demo .tmd-phone-details-button:hover {
transform: translateY(-1px) scale(1.025);
box-shadow: 0 4px 10px rgba(15, 87, 211, 0.24);
}
.app-shell.app-shell--tool-demo .tmd-details-button:active,
.app-shell.app-shell--tool-demo .tmd-phone-details-button:active {
transform: translateY(0) scale(0.97);
transition-duration: 0.07s;
}
.app-shell.app-shell--tool-demo .hover-text {
cursor: pointer;
}
.app-shell.app-shell--tool-demo .hidden-text {
position: absolute;
opacity: 0;
visibility: hidden;
transform: scale(0.9);
transform-origin: center left;
transition: visibility 0.2s ease-in-out;
z-index: 999;
background: white;
padding: 10px;
border: 1px solid #ccc;
border-radius: 15px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.app-shell.app-shell--tool-demo .assembly-list-item {
list-style: none;
padding-top: 0;
padding-bottom: 0;
}
.app-shell.app-shell--tool-demo .tmd-cascade-list {
--tmd-cascade-step: clamp(2.75rem, 3.2vw, 4rem);
margin: 0;
padding: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-assembly-list {
width: calc(100% + 42px);
}
.app-shell.app-shell--tool-demo .tmd-view-mode .tmd-assembly-list {
width: 100%;
}
.app-shell.app-shell--tool-demo .tmd-view-mode .tmd-part-list {
--tmd-cascade-step: clamp(2.25rem, 2.6vw, 3rem);
width: 100%;
}
.app-shell.app-shell--tool-demo .tmd-view-mode {
container-type: inline-size;
}
.app-shell.app-shell--tool-demo .tmd-cascade-item {
list-style: none;
box-sizing: border-box;
padding: 0;
}
.app-shell.app-shell--tool-demo .tmd-assembly-item,
.app-shell.app-shell--tool-demo .tmd-part-item {
width: calc(100% - var(--tmd-cascade-step));
margin-left: var(--tmd-cascade-step);
}
.app-shell.app-shell--tool-demo .part-list-item {
list-style: none;
margin-bottom: 1rem;
padding: 0.5rem;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
.app-shell.app-shell--tool-demo .tmd-view-mode .part-list-item {
margin-bottom: 0.35rem;
padding: 0.1rem 0.25rem 0.25rem;
border-bottom: 0;
}
.app-shell.app-shell--tool-demo .no-negative-margin {
margin-left: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-view-row.mud-grid {
--tmd-name-column: clamp(220px, calc(59cqw - 215px), 710px);
--tmd-status-column: clamp(104px, 10cqw, 128px);
display: grid !important;
column-gap: clamp(12px, 1.2cqw, 20px);
align-items: center;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.app-shell.app-shell--tool-demo .tmd-kit-view-row.mud-grid {
grid-template-columns: minmax(0, var(--tmd-name-column)) minmax(0, 1fr);
padding-left: clamp(60px, 4.4cqw, 72px) !important;
padding-right: clamp(48px, 4.8cqw, 80px) !important;
position: relative;
}
.app-shell.app-shell--tool-demo .tmd-kit-panel {
position: relative;
}
.app-shell.app-shell--tool-demo .tmd-kit-panel:has(.tmd-summary-trigger:hover),
.app-shell.app-shell--tool-demo .tmd-kit-panel:has(.tmd-summary-popup:hover) {
z-index: 60;
}
.app-shell.app-shell--tool-demo .tmd-assembly-view-row.mud-grid {
grid-template-columns: minmax(0, var(--tmd-name-column)) minmax(0, 1fr) var(--tmd-status-column);
}
.app-shell.app-shell--tool-demo .tmd-part-view-row.mud-grid {
grid-template-columns: minmax(0, var(--tmd-name-column)) minmax(0, 1fr);
}
.app-shell.app-shell--tool-demo .tmd-view-row > .mud-grid-item {
width: auto !important;
max-width: none !important;
min-width: 0;
padding: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-assembly-view-row > .mud-grid-item:nth-child(2):last-child {
grid-column: span 2;
}
.app-shell.app-shell--tool-demo .tmd-view-summary {
display: flex;
position: absolute;
left: 0;
top: 50%;
width: 48px;
transform: translateY(-50%);
justify-content: center;
align-items: center;
z-index: 20;
}
.app-shell.app-shell--tool-demo .tmd-view-summary .hover-container {
width: 44px !important;
margin-top: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-view-summary .tmd-summary-trigger {
overflow: visible;
}
.app-shell.app-shell--tool-demo .tmd-summary-popup {
position: absolute;
left: calc(100% + 14px) !important;
top: 50%;
z-index: 1000;
width: min(680px, calc(100vw - 48px));
width: clamp(320px, 58cqw, 680px);
max-width: calc(100vw - 48px);
margin-top: 0 !important;
padding: 12px !important;
background: #fefefe;
border: 2px solid #ccc !important;
border-radius: 8px !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
transform: translateY(-50%) scale(0.96);
transform-origin: center left;
cursor: default;
}
.app-shell.app-shell--tool-demo .tmd-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 12px;
align-items: start;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-summary-card {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
padding: 14px;
border: 1px solid #e6e6e6;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.app-shell.app-shell--tool-demo .tmd-summary-card-header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 8px 14px;
align-items: start;
}
.app-shell.app-shell--tool-demo .tmd-summary-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 5px;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-summary-meta--article {
justify-content: flex-start;
}
.app-shell.app-shell--tool-demo .tmd-summary-label {
flex: 0 0 auto;
color: #333;
font-weight: 700;
white-space: nowrap;
}
.app-shell.app-shell--tool-demo .tmd-summary-value {
min-width: 0;
color: #555;
overflow-wrap: anywhere;
word-break: break-word;
}
.app-shell.app-shell--tool-demo .tmd-summary-meta--article .tmd-summary-value {
white-space: normal;
}
.app-shell.app-shell--tool-demo .tmd-summary-parts-count {
margin: 10px 0 6px;
color: #007bff;
font-weight: 700;
}
.app-shell.app-shell--tool-demo .tmd-summary-parts-list {
gap: 8px;
}
.app-shell.app-shell--tool-demo .tmd-summary-part-grid.mud-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(96px, 0.8fr);
gap: 8px;
width: 100%;
margin: 0;
}
.app-shell.app-shell--tool-demo .tmd-summary-part-grid > .mud-grid-item {
width: auto !important;
max-width: none !important;
min-width: 0;
padding: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-summary-part-pill {
display: block;
min-width: 0;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fafafa;
color: #444;
overflow-wrap: anywhere;
}
.app-shell.app-shell--tool-demo .tmd-view-field .mud-input-control {
margin-top: 0;
margin-bottom: 0;
}
.app-shell.app-shell--tool-demo .tmd-view-count {
color: #C5C4C4;
display: block;
margin-top: 2px;
margin-bottom: 0;
padding-right: 2px;
font-size: 0.75rem;
line-height: 1;
}
.app-shell.app-shell--tool-demo .tmd-view-status {
padding-right: 8px !important;
}
.app-shell.app-shell--tool-demo .tmd-edit-row.mud-grid {
display: grid !important;
grid-template-columns: 132px minmax(280px, 1.1fr) minmax(260px, 1fr) 132px;
column-gap: 24px;
align-items: center;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.app-shell.app-shell--tool-demo .tmd-part-edit-row.mud-grid {
padding-right: 16px;
}
.app-shell.app-shell--tool-demo .tmd-edit-row > .mud-grid-item {
width: auto !important;
max-width: none !important;
padding: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-edit-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.app-shell.app-shell--tool-demo .tmd-edit-actions .interactive-icon {
margin: 0;
}
.app-shell.app-shell--tool-demo .tmd-edit-actions .mud-tooltip-root {
display: inline-flex;
align-items: center;
}
.app-shell.app-shell--tool-demo .tmd-edit-field {
min-width: 0;
margin-left: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-edit-details {
display: flex;
justify-content: flex-end;
align-items: center;
justify-self: stretch;
min-width: 132px;
margin-top: 0 !important;
position: relative;
z-index: 30;
}
.app-shell.app-shell--tool-demo .tmd-edit-details .mud-button-root {
min-width: 88px;
position: relative;
z-index: 31;
}
.app-shell.app-shell--tool-demo .tmd-edit-details-popup {
width: min(760px, calc(100vw - 48px));
max-width: calc(100vw - 48px);
padding: 12px 14px;
border: 3px solid #ddd;
border-radius: 15px;
background: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14);
}
.app-shell.app-shell--tool-demo .tmd-edit-details-popup--compact {
width: min(520px, calc(100vw - 48px));
}
.app-shell.app-shell--tool-demo .tmd-edit-details-popup .mud-input-control {
margin-top: 0;
}
.app-shell.app-shell--tool-demo .mud-icon-root.mud-svg-icon.mud-expand-panel-icon {
fill: rgb(15, 87, 211) !important;
color: rgb(15, 87, 211) !important;
}
.app-shell.app-shell--tool-demo .hover-container:hover .hidden-text {
opacity: 1;
visibility: visible;
transform: translateY(50px) scale(0);
animation: tmdHoverPopup 0.3s cubic-bezier(0.27, 0.53, 0.28, 1.23) forwards;
}
.app-shell.app-shell--tool-demo .tmd-view-summary .hover-container:hover .tmd-summary-popup {
opacity: 1;
visibility: visible;
transform: translateY(-50%) scale(0.96);
animation: tmdSummaryPopup 0.22s cubic-bezier(0.27, 0.53, 0.28, 1.23) forwards;
}
.app-shell.app-shell--tool-demo .hidden-details,
.app-shell.app-shell--tool-demo .hidden-details-family {
position: absolute;
opacity: 1;
visibility: visible;
translate: 0 0;
scale: 1;
background: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
animation: tmdDetailsPopoverIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
z-index: 250;
will-change: opacity, translate, scale;
}
.app-shell.app-shell--tool-demo .hidden-details {
top: calc(100% + 8px);
right: 0 !important;
transform: none !important;
transform-origin: top right;
}
.app-shell.app-shell--tool-demo .hidden-details-family {
top: calc(100% + 8px);
left: 0 !important;
transform: none !important;
transform-origin: top left;
}
@media (max-width: 760px) {
.app-shell.app-shell--tool-demo .tmd-edit-row.mud-grid {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
}
.app-shell.app-shell--tool-demo .tmd-part-edit-row.mud-grid {
padding-right: 0;
}
.app-shell.app-shell--tool-demo .tmd-cascade-list {
--tmd-cascade-step: 1.25rem;
}
.app-shell.app-shell--tool-demo .tmd-assembly-list {
width: 100%;
}
.app-shell.app-shell--tool-demo .tmd-view-mode .tmd-part-list {
width: 100%;
}
.app-shell.app-shell--tool-demo .tmd-view-row.mud-grid {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
}
.app-shell.app-shell--tool-demo .tmd-kit-view-row.mud-grid {
padding-left: 0 !important;
padding-right: 0 !important;
}
.app-shell.app-shell--tool-demo .tmd-view-row > .mud-grid-item {
flex: 0 0 100% !important;
max-width: 100% !important;
min-width: 0;
}
.app-shell.app-shell--tool-demo .tmd-view-summary {
position: static;
width: 100%;
transform: none;
justify-content: flex-start;
}
.app-shell.app-shell--tool-demo .tmd-summary-popup {
position: static;
width: 100%;
max-width: 100%;
margin-top: 8px !important;
transform: none;
}
.app-shell.app-shell--tool-demo .tmd-summary-grid {
grid-template-columns: 1fr;
}
.app-shell.app-shell--tool-demo .tmd-edit-row > .mud-grid-item:first-child,
.app-shell.app-shell--tool-demo .tmd-edit-actions,
.app-shell.app-shell--tool-demo .tmd-edit-field,
.app-shell.app-shell--tool-demo .tmd-edit-details {
flex: 0 0 100% !important;
max-width: 100% !important;
min-width: 0;
justify-content: flex-start;
}
}
@keyframes tmdFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes tmdRotateCenter {
0% {
transform: rotate(0);
transform-origin: center;
}
100% {
transform: rotate(360deg);
transform-origin: center;
}
}
@keyframes tmdTrackingInExpand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tmdSlideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tmdPulseRed {
0% {
box-shadow: 0 0 5px red;
}
50% {
box-shadow: 0 0 10px red;
}
100% {
box-shadow: 0 0 5px red;
}
}
@keyframes tmdPulseGreen {
0% {
box-shadow: 0 0 3px green;
}
50% {
box-shadow: 0 0 3px green;
}
100% {
box-shadow: 0 0 3px green;
}
}
@keyframes tmdSubtleShake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-2px);
}
75% {
transform: translateX(2px);
}
}
@keyframes tmdPopEffect {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 0.9);
}
100% {
transform: scale(1, 1);
}
}
@keyframes tmdPopup {
0% {
opacity: 0;
transform: scale(0.5);
}
80% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes tmdHoverPopup {
0% {
opacity: 0;
transform: translateY(50px) scale(0);
}
100% {
opacity: 1;
transform: translateY(0px) scale(1);
}
}
@keyframes tmdSummaryPopup {
0% {
opacity: 0;
transform: translateY(calc(-50% + 20px)) scale(0.96);
}
100% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
@keyframes tmdDetailsPopup {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes tmdDetailsPopoverIn {
0% {
opacity: 0;
translate: 0 -7px;
scale: 0.985;
}
100% {
opacity: 1;
translate: 0 0;
scale: 1;
}
}
@keyframes tmdDetailsFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.topbar {
position: absolute;
display: flex;
left: 1px;
right: 1px;
z-index: 10;
background: linear-gradient( to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 100% );
backdrop-filter: blur(12px);
mask-image: linear-gradient( to bottom, black 0%, black 60%, transparent 100% );
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar-inner {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto; /* brand | centered nav | profile */
align-items: center;
padding: 10px 18px; /* optional */
box-sizing: border-box;
}
.brand {
font-weight: 800;
letter-spacing: 0.08em;
text-decoration: none;
color: white;
white-space: nowrap;
}
/* This makes the center nav truly centered regardless of left/right width */
.nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 18px;
align-items: center;
justify-content: center;
}
.nav-link {
text-decoration: none;
color: rgba(255,255,255,0.8);
padding: 8px 10px;
border-radius: 10px;
}
.nav-link:hover {
color: #fff;
background: rgba(255,255,255,0.08);
}
/* Blazor adds .active to NavLink when it matches */
.nav-link.active {
color: #fff;
background: rgba(255,255,255,0.14);
}
.nav-right {
margin-left: auto; /* pushes this container to the far right */
display: flex;
align-items: center;
gap: 10px;
min-width: 40px; /* helps keep center stable */
justify-content: flex-end;
}
.content {
flex: 1;
}
/*REGISTER*/
/* Shared look with Login */
.auth-page {
min-height: 100vh;
background: #07090d;
position: relative;
overflow: hidden;
color: var(--text);
}
.auth-bg {
position: absolute;
inset: -20%;
background:
radial-gradient(closest-side at 18% 20%, rgba(232,178,89,0.18), transparent 62%),
radial-gradient(closest-side at 82% 28%, rgba(148,217,255,0.14), transparent 60%),
linear-gradient(135deg, rgba(148,217,255,0.05), rgba(232,178,89,0.035) 46%, transparent 72%);
filter: blur(4px);
opacity: 0.95;
pointer-events: none;
}
.auth-shell {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: 28px 18px;
}
.auth-card {
width: min(520px, 96vw);
border-radius: 20px;
border: 1px solid rgba(205,208,198,0.16);
background:
linear-gradient(145deg, rgba(18,20,21,0.86), rgba(8,11,16,0.9)),
rgba(8,11,16,0.88);
box-shadow: 0 28px 92px rgba(0,0,0,0.54), inset 0 1px 0 rgba(255,255,255,0.055);
backdrop-filter: blur(16px);
padding: 22px 22px 18px;
}
.auth-brand {
display: flex;
gap: 12px;
align-items: center;
padding-bottom: 16px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(205,208,198,0.12);
}
.brand-mark {
width: 44px;
height: 44px;
border-radius: 13px;
display: grid;
place-items: center;
font-weight: 800;
letter-spacing: 0.12em;
color: rgba(13,12,9,0.94);
background: linear-gradient(135deg, #f4cf82 0%, #e8b259 48%, #f7e7bd 100%);
box-shadow: 0 12px 34px rgba(232,178,89,0.2), inset 0 1px 0 rgba(255,255,255,0.35);
}
.brand-name {
color: rgba(247,250,255,0.92);
font-weight: 800;
letter-spacing: 0.14em;
font-size: 14px;
}
.brand-sub {
color: rgba(202,210,209,0.58);
font-size: 13px;
margin-top: 2px;
}
.grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 520px) {
.grid2 {
grid-template-columns: 1fr;
}
}
.field {
margin-top: 14px;
}
label {
display: block;
color: rgba(224,229,229,0.72);
font-size: 13px;
margin-bottom: 8px;
}
.input {
width: 100%;
border-radius: 13px;
border: 1px solid rgba(205,208,198,0.16);
background: rgba(3,6,10,0.38);
color: rgba(247,250,255,0.9);
padding: 12px 12px;
outline: none;
box-sizing: border-box;
}
.input:focus {
border-color: rgba(148,217,255,0.46);
box-shadow: 0 0 0 3px rgba(148,217,255,0.12), inset 0 0 0 1px rgba(232,178,89,0.16);
}
.password-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
}
.ghost-btn {
border-radius: 13px;
border: 1px solid rgba(148,217,255,0.2);
background: rgba(148,217,255,0.065);
color: rgba(224,241,250,0.86);
padding: 10px 12px;
cursor: pointer;
}
.ghost-btn:hover {
border-color: rgba(148,217,255,0.34);
background: rgba(148,217,255,0.105);
}
.row {
margin-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.check {
position: relative; /* ✅ anchor the absolute native input */
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
color: rgba(224,229,229,0.72);
font-size: 13px;
line-height: 1.2;
}
/* ✅ hide native checkbox but keep it focusable/accessibility-friendly */
.checkNative {
position: absolute;
inset: 0 auto auto 0; /* top-left of label */
width: 16px;
height: 16px;
margin: 0;
opacity: 0;
appearance: none;
-webkit-appearance: none;
}
/* visible custom box */
.checkCustom {
width: 16px;
height: 16px;
border-radius: 5px;
border: 1px solid rgba(205,208,198,0.22);
background: rgba(3,6,10,0.38);
display: inline-grid;
place-items: center;
flex: 0 0 auto;
box-shadow: 0 0 0 3px rgba(0,0,0,0);
}
.checkCustom::after {
content: "";
width: 8px;
height: 8px;
border-radius: 2px;
background: rgba(232,178,89,0.95);
transform: scale(0);
transition: transform 140ms ease;
}
.checkNative:checked + .checkCustom::after {
transform: scale(1);
}
.checkNative:focus-visible + .checkCustom {
border-color: rgba(148,217,255,0.58);
box-shadow: 0 0 0 3px rgba(148,217,255,0.14);
}
.checkText {
transform: translateY(1px);
}
.link {
color: rgba(246,220,160,0.94);
text-decoration: none;
font-size: 13px;
}
.link:hover {
text-decoration: underline;
}
.primary-btn {
width: 100%;
margin-top: 16px;
border-radius: 14px;
border: 1px solid rgba(255,218,143,0.72);
background: linear-gradient(135deg, #f2c979, #e8b259 54%, #d99d43);
color: rgba(14,13,10,0.94);
padding: 12px 14px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
}
.primary-btn:hover {
border-color: rgba(255,231,181,0.86);
background: linear-gradient(135deg, #f6d592, #ebb963 54%, #dea84d);
}
.primary-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.footer {
margin-top: 14px;
text-align: center;
color: rgba(202,210,209,0.58);
font-size: 12px;
}
.val-summary {
color: rgba(255,120,120,0.95);
font-size: 13px;
margin-top: 10px;
}
.val {
color: rgba(255,120,120,0.95);
font-size: 12px;
margin-top: 6px;
display: block;
}
.status {
margin-top: 14px;
border: 1px solid rgba(148,217,255,0.18);
border-radius: 13px;
padding: 12px;
color: rgba(224,241,250,0.84);
background: rgba(148,217,255,0.07);
}
/* --- Modern layout tweaks --- */
.heroRow.modern {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 32px;
align-items: start;
}
/* On smaller screens, stack */
@media (max-width: 920px) {
.heroRow.modern {
grid-template-columns: 1fr;
}
}
/* --- Info panel: not a “card”, more like a crisp panel --- */
.infoPanel {
background: rgba(10,12,16,0.55); /* not pure black */
border: 1px solid var(--border);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
padding: 18px 18px 14px;
backdrop-filter: saturate(120%);
}
.infoSpec {
background: rgba(10,12,16,0.55); /* not pure black */
border: 1px solid var(--border);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.infoPanelHeader {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 12px;
}
.infoTitle {
font-weight: 650;
letter-spacing: 0.2px;
}
.infoHint {
font-size: 0.9rem;
color: rgba(255,255,255,0.60);
}
/* Definition list “spec” look */
.specList {
margin: 0;
padding: 0;
}
.specRow {
display: grid;
grid-template-columns: 140px 1fr;
gap: 14px;
padding: 10px 0;
}
.specRow + .specRow {
border-top: 1px solid rgba(255,255,255,0.06);
}
.specRow dt {
margin: 0;
font-size: 0.85rem;
color: rgba(255,255,255,0.60);
text-transform: none;
letter-spacing: 0.2px;
}
.specRow dd {
margin: 0;
font-weight: 520;
color: rgba(255,255,255,0.92);
line-height: 1.35;
}
@media (max-width: 520px) {
.specRow {
grid-template-columns: 1fr;
gap: 6px;
}
.specRow dt {
font-size: 0.8rem;
}
}
/* --- Section header modernization --- */
.section-header.modern {
margin-top: 44px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 16px;
}
.section-header.modern .section-rule {
height: 1px;
background: rgba(255,255,255,0.10);
}
/* --- Why Yakoru: “features” instead of “cards” --- */
.featureGrid {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 22px;
}
@media (max-width: 920px) {
.featureGrid {
grid-template-columns: 1fr;
}
}
.feature {
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
border-radius: 14px;
padding: 14px 16px;
}
.featureHead {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.featureIcon {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.85);
font-size: 0.95rem;
}
.featureTitle {
font-weight: 650;
letter-spacing: 0.2px;
}
.featureText {
color: rgba(255,255,255,0.72);
line-height: 1.5;
max-width: 60ch;
}
/* Optional: make everything feel less “soft” */
.hero-home .btn {
border-radius: 12px;
}
@media (max-width: 980px) {
input,
textarea,
select,
.input {
font-size: 16px;
}
.btn,
.lpBtn,
.primary-btn,
.secondary-btn,
.ghost-btn {
min-height: 44px;
}
}
@media (max-width: 640px) {
.contactPage {
display: block;
max-height: none;
align-items: initial;
}
.contactWrap {
width: 100%;
}
.auth-page {
min-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
}
.auth-shell {
min-height: auto;
place-items: start center;
padding: 94px 14px 26px;
}
.auth-bg {
inset: 0;
}
.auth-card {
width: 100%;
border-radius: 18px;
padding: 18px 16px 16px;
}
.auth-brand {
gap: 10px;
}
.password-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.row,
.footer {
align-items: flex-start;
line-height: 1.4;
}
.check {
min-height: 44px;
}
.checkNative {
inset: 0;
width: 100%;
height: 100%;
}
.link {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
}
}