@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap'); /* * ===== Universally Color ThemeCss: semantic --theme-* + neon rainbow (dark-first) ===== * Layouts set data-theme="light"|"dark" on from SiteAppearance chrome. * Fork default is dark (cosmic navy + yellow primary #FFE566). Do not introduce --ks-* here. * --neon-cyan remains a rainbow accent only — primary CTA uses --theme-green / --neon-yellow. */ :root { --font-display: "Syne", "Segoe UI", sans-serif; --font-body: "Outfit", "Segoe UI", sans-serif; /* Neon rainbow accents (logo drips / cosmic mood) */ --neon-cyan: #00D4FF; --neon-magenta: #FF4FD8; --neon-violet: #9B5CFF; --neon-lime: #7CFF3A; --neon-orange: #FF5A1F; --neon-yellow: #FFE566; --rainbow-gradient: linear-gradient( 110deg, var(--neon-orange) 0%, var(--neon-yellow) 18%, var(--neon-lime) 36%, var(--neon-cyan) 55%, var(--neon-violet) 78%, var(--neon-magenta) 100% ); --cosmic-navy: #0B1224; --cosmic-void: #070B14; } :root, [data-theme="light"] { /* Brand accents (legacy class names kept for .text-theme-* / bands) */ --theme-green: #FFE566; /* primary CTA — neon yellow */ --theme-blue: #1A0B2E; /* deep-purple chrome / footer bands */ --theme-secondary: #2D1B4E; /* secondary panels */ /* Semantic surfaces / text / lines — light */ --theme-bg: #f7f5ff; --theme-surface: #ffffff; --theme-surface-alt: #efeaff; --theme-surface-raised: #ffffff; --theme-line: rgba(11, 18, 36, 0.12); --theme-line-muted: rgba(11, 18, 36, 0.08); --theme-line-strong: rgba(11, 18, 36, 0.2); --theme-text: #0B1224; --theme-text-muted: #4B5568; --theme-text-subtle: #6B7280; --theme-panel-bg: rgba(11, 18, 36, 0.03); --theme-panel-bg-inset: rgba(11, 18, 36, 0.06); --theme-sticky-bar-bg: rgba(247, 245, 255, 0.96); --theme-header-hover: color-mix(in srgb, var(--theme-green) 10%, transparent); color-scheme: light; } [data-theme="dark"] { --theme-green: #FFE566; --theme-blue: #1A0B2E; --theme-secondary: #2D1B4E; --theme-bg: #070B14; --theme-surface: #2D1B4E; --theme-surface-alt: #1A0B2E; --theme-surface-raised: #3A2860; --theme-line: rgba(255, 255, 255, 0.12); --theme-line-muted: rgba(255, 255, 255, 0.08); --theme-line-strong: rgba(255, 255, 255, 0.22); --theme-text: #F4F6FB; --theme-text-muted: #A8B3CC; --theme-text-subtle: #6B7690; --theme-panel-bg: rgba(45, 27, 78, 0.55); --theme-panel-bg-inset: rgba(0, 0, 0, 0.28); --theme-sticky-bar-bg: rgba(26, 11, 46, 0.96); --theme-header-hover: color-mix(in srgb, var(--theme-green) 16%, transparent); color-scheme: dark; } .text-theme-primary { color: var(--theme-green) !important; } .text-theme-secondary { color: var(--theme-blue) !important; } .bg-theme-primary { background: var(--theme-green) !important; color: #070B14 !important; } .bg-theme-secondary { background: var(--theme-blue) !important; } /* Translucent deep-purple panel for starfield public pages (About/Contact/Services/Blog). */ .uc-studio-panel { background: rgba(45, 27, 78, 0.80); color: #F4F6FB; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.10); padding: 1.25rem 1.5rem; } .uc-studio-panel .mud-typography, .uc-studio-panel p, .uc-studio-panel li { color: inherit; } /* Yellow filled CTA helper (pairs with Mud Color.Primary; use when not on MudButton). */ .mrc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 1.25rem; border-radius: 0.5rem; border: 2px solid var(--theme-green, #FFE566); background: var(--theme-green, #FFE566); color: #070B14 !important; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter 0.15s ease, background-color 0.15s ease; } .mrc-btn:hover, .mrc-btn:focus-visible { filter: brightness(1.05); color: #070B14 !important; text-decoration: none; } .mrc-btn.mud-button-root, .mud-button-filled.mrc-btn { background-color: var(--theme-green, #FFE566) !important; border-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; } /* Instagram / secondary outline CTA — white border + white text (not Mud Secondary). */ .mrc-btn-outline-white { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 1.25rem; border-radius: 0.5rem; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF !important; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .mrc-btn-outline-white:hover, .mrc-btn-outline-white:focus-visible { background: rgba(255, 255, 255, 0.12); color: #FFFFFF !important; text-decoration: none; } .mrc-btn-outline-white.mud-button-root, .mud-button-outlined.mrc-btn-outline-white { border-color: #FFFFFF !important; color: #FFFFFF !important; background: transparent !important; } /* About: readable tagline on starfield; slightly rounded portrait (not circular). */ .uc-about-tagline { color: #F4F6FB !important; } .uc-about-portrait { border-radius: 1rem; /* 16px */ max-width: 100%; height: auto; } .uc-about-contact-link, .uc-about-contact-link.mud-link { color: #FFE566 !important; } /* Contact: yellow phone/email/IG links inside translucent purple panel. */ .uc-contact-panel a, .uc-contact-panel .mud-link { color: #FFE566 !important; } .uc-contact-panel a:hover, .uc-contact-panel a:focus-visible, .uc-contact-panel .mud-link:hover, .uc-contact-panel .mud-link:focus-visible { color: #FFF0A0 !important; } /* Public editorial titles used by /book (+ cancel/policy) and shop helpers */ .mrc-editorial-eyebrow { font-family: var(--font-display), var(--font-body), sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--theme-green, #FFE566); margin: 0 0 0.5rem; } .mrc-section-title { color: var(--theme-text, #F4F6FB); } .mrc-section-sub { color: var(--theme-text-muted, #A8B3CC); } .mrc-legal-inline-link, .mrc-legal-inline-link.mud-link { color: var(--theme-green, #FFE566) !important; } /* Home: services strip uses theme colors instead of a client-specific photo background */ .home-services-band { background: radial-gradient(ellipse at 15% 20%, color-mix(in srgb, var(--neon-violet) 28%, transparent) 0%, transparent 50%), radial-gradient(ellipse at 85% 10%, color-mix(in srgb, var(--neon-magenta) 22%, transparent) 0%, transparent 45%), linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-blue) 100%); background-size: cover; background-position: center; } .cursor-pointer { cursor: pointer !important; } html, body { font-family: var(--font-body); } h1, h2, h3, .display-font, .banner-brand { font-family: var(--font-display); letter-spacing: -0.02em; } body { margin: 0; padding: 0; height: 100vh; background-color: var(--theme-bg); color: var(--theme-text); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center; transition: background-image 0.5s ease-in-out; } /* * Dark public shell: tiled speckled starfield + soft neon wash. * Tile native ~592×1024; sized to 520px wide so repeats stay dense (not sparse). * Dark veil keeps body text / gaps readable without fighting Mud surfaces. */ [data-theme="dark"] body { background-color: var(--theme-bg); background-image: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--neon-violet) 18%, transparent) 0%, transparent 42%), radial-gradient(ellipse at 88% 8%, color-mix(in srgb, var(--neon-cyan) 14%, transparent) 0%, transparent 40%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--neon-magenta) 10%, transparent) 0%, transparent 45%), linear-gradient(rgba(7, 11, 20, 0.48), rgba(7, 11, 20, 0.58)), url("/images/brand/bg-starfield-speckle.png"); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-size: auto, auto, auto, auto, 520px auto; background-position: center, center, center, center, 0 0; background-attachment: fixed; } /* Admin hub + auth: keep solid void (no busy tile) for form/table readability */ [data-theme="dark"] body:has(.admin-nav-row), [data-theme="dark"] body:has(.admin-auth-layout) { background-image: radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--neon-violet) 10%, transparent) 0%, transparent 42%), radial-gradient(ellipse at 88% 8%, color-mix(in srgb, var(--neon-cyan) 8%, transparent) 0%, transparent 40%); background-repeat: no-repeat; background-size: cover; background-position: center; } .rainbow-text { background-image: var(--rainbow-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .rainbow-underline { border-image: var(--rainbow-gradient) 1; border-bottom: 2px solid transparent; } /* * MainLayout chrome fallbacks (scoped CSS is in MainLayout.razor.css / *.styles.css). * Public chrome is nav-only — no header logo band. */ .page > main > .nav-row.mrc-public-header, .page > main > .nav-row { display: flex; align-items: center; justify-content: center; min-height: calc(2.75rem + env(safe-area-inset-top, 0px)); box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); background: #2D1B4E; } /* Home: translucent deep-purple cards on starfield (not opaque navy leftovers). */ [data-theme="dark"] .uc-home-hero.mud-card, [data-theme="dark"] .uc-home-why.mud-card, [data-theme="dark"] .home-services-band .mud-card { background-color: rgba(45, 27, 78, 0.80) !important; color: #F4F6FB; } [data-theme="dark"] .uc-home-hero .mud-typography, [data-theme="dark"] .uc-home-why .mud-typography, [data-theme="dark"] .home-services-band .mud-card .mud-typography { color: inherit; } [data-theme="dark"] .home-services-band .mud-card .mud-typography.mud-primary-text, [data-theme="dark"] .uc-home-hero .mud-typography.mud-primary-text, [data-theme="dark"] .uc-home-why .mud-typography.mud-primary-text { color: var(--theme-green, #FFE566) !important; } /* Home hero: logo left (md+), stacked above copy on mobile — brand mark, not full-bleed */ .uc-home-hero__logo-col { display: flex; align-items: center; justify-content: center; } .uc-home-hero__logo { display: block; width: auto; max-width: min(100%, 11.25rem); /* ~180px mobile */ max-height: 11.25rem; height: auto; object-fit: contain; margin-inline: auto; } @media (min-width: 960px) { .uc-home-hero__logo-col { justify-content: flex-start; } .uc-home-hero__logo { max-width: 17.5rem; /* 280px desktop */ max-height: 17.5rem; margin-inline: 0; } } /* Prevent layout shifts during initial load - smooth fade in */ body:not(.page-ready) .content { opacity: 0; transition: opacity 0.3s ease-in; /* If Blazor never calls mrcNotifyBlazorReady (interop failure), avoid a permanently blank main column */ animation: mrc-content-fallback 0.35s ease-in 10s forwards; } @keyframes mrc-content-fallback { to { opacity: 1; } } body.page-ready .content { opacity: 1; animation: none; } /* Optimize image loading */ img { content-visibility: auto; contain-intrinsic-size: auto 300px; } /* Prevent animation stutter - use GPU acceleration */ [data-aos] { will-change: transform, opacity; backface-visibility: hidden; perspective: 1000px; transform: translateZ(0); /* Force GPU acceleration */ } /* Smooth font rendering */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Prevent layout shifts from images */ .mud-card-media img, .mud-image { width: 100%; height: auto; object-fit: cover; } h1:focus { outline: none; } a, .btn-link { color: #0071c1; } a:hover { color: var(--theme-green); } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } .round-border { border-radius: 10px !important; } .img-home { height: 100% !important; border-radius: 10px !important; } .img-home-mobile { height: 300px !important; border-radius: 10px !important; } .mud-icon-root mud-svg-icon mud-icon-size-medium mud-nav-link-expand-icon { color: white !important; } #blazor-error-ui { background: #0f172a; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: #fff; text-align: center; font-size: 14px; } #blazor-error-ui .reload { color: #fff; text-decoration: underline; cursor: pointer; margin-left: 8px; transition: color 0.3s; } #blazor-error-ui .reload:hover { color: var(--theme-green); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; color: #fff; font-size: 18px; opacity: 0.8; transition: opacity 0.3s; } #blazor-error-ui .dismiss:hover { opacity: 1; } .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." } code { color: #c02d76; } .zoom-15:hover { transform: scale(1.15) !important; } .zoom-5:hover { transform: scale(1.05) !important; } .zoom-8:hover { transform: scale(1.08) !important; } .zoom { animation-duration: 0.6s; animation-name: zoom; animation-timing-function: ease-in-out; } .zoom-left { transform-origin: left top; } .nav-menu { position: relative; display: inline-block; } .nav-menu-label { cursor: pointer; padding: 4px 12px; background-color: #1A0B2E; color: #ffffff; border-radius: 4px; display: flex; align-items: center; height: 100%; } .nav-menu-label .mud-icon-root { color: #ffffff !important; } .nav-menu-content { position: absolute; color: #fff; top: 32px; right: 10px; background: linear-gradient(165deg, #2D1B4E 0%, #1A0B2E 100%); min-width: 200px; max-width: min(320px, 92vw); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); z-index: 1; margin-top: 8px; border-radius: 4px; display: flex; flex-direction: column; } .nav-menu-content > .mud-divider { border-color: rgba(255, 255, 255, 0.2) !important; opacity: 1 !important; } .nav-menu-label.admin-nav-user-label-active { background-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; box-shadow: 0 0 0 1px rgba(255, 229, 102, 0.45); } .nav-menu-label.admin-nav-user-label-active span { color: #070B14 !important; } .nav-menu-label.admin-nav-user-label-active .mud-icon-root { color: #070B14 !important; } .mud-divider-user-submenu { border-color: rgba(255, 255, 255, 0.22) !important; opacity: 1 !important; } /* Scrollable account menu items */ .nav-menu-items-scroll { max-height: min(70vh, 420px); overflow-y: auto; overflow-x: hidden; padding-right: 4px; margin-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.08); } .nav-menu-items-scroll::-webkit-scrollbar { width: 8px; } .nav-menu-items-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 4px; } .nav-menu-items-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 4px; } .nav-menu-items-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } .nav-menu-header { padding: 8px 16px; font-weight: bold; } .nav-menu-header .mud-icon-root { color: #e8eef8 !important; } .nav-menu-item { padding: 8px 16px; cursor: pointer; display: flex; align-items: center; color: #e8eef8 !important; } .nav-menu-item i.material-icons { margin-right: 8px; } .nav-menu-item:hover, .nav-menu-item:focus-visible { background-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; } .nav-menu-item:hover span, .nav-menu-item:focus-visible span { color: #070B14 !important; } .nav-menu-item .mud-icon-root { color: #ffffff !important; } .nav-menu-item:hover .mud-icon-root, .nav-menu-item:focus-visible .mud-icon-root { color: #070B14 !important; } .nav-menu-item.admin-nav-user-submenu-active { background-color: var(--theme-green, #FFE566) !important; border-left: 3px solid #070B14; padding-left: 13px; color: #070B14 !important; } .nav-menu-item.admin-nav-user-submenu-active span { color: #070B14 !important; } .nav-menu-item.admin-nav-user-submenu-active .mud-icon-root, .nav-menu-item.admin-nav-user-submenu-active .admin-nav-user-submenu-icon-active { color: #070B14 !important; } .nav-menu-item.admin-nav-user-submenu-active:hover .mud-icon-root, .nav-menu-item.admin-nav-user-submenu-active:focus-visible .mud-icon-root { color: #070B14 !important; } /* Center nav: MudMenu group button when any child route is active (scoped desktop overrides below) */ .admin-mudmenu--group-active .mud-button-root { background-color: var(--theme-green, #FFE566) !important; border-radius: 4px !important; color: #070B14 !important; } .admin-mudmenu--group-active .mud-button-root .mud-button-label, .admin-mudmenu--group-active .mud-button-root .mud-icon-root { color: #070B14 !important; } /* Admin Content page picker: selected row — translucent green (nav group pills use white on the bar) */ .content-page-picker-item--selected.mud-button-root { background-color: rgba(125, 216, 86, 0.25) !important; border-radius: 4px !important; } .content-page-picker-item--selected.mud-button-root:hover { background-color: rgba(125, 216, 86, 0.32) !important; } /* MudMenu dropdown panels: match custom NavMenu (gradient, border, green accents) */ .admin-nav-submenu-popover.mud-popover, .admin-nav-submenu-popover, .admin-nav-submenu-popover .mud-paper, .admin-nav-submenu-popover.mud-popover > .mud-paper { background: linear-gradient(165deg, #2D1B4E 0%, #1A0B2E 100%) !important; background-color: var(--theme-secondary) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; color: #e8eef8 !important; } .admin-nav-submenu-popover .mud-list, .admin-nav-submenu-popover .mud-list-padding { background-color: transparent !important; } .admin-nav-submenu-popover .mud-menu-item, .admin-nav-submenu-popover .mud-list-item { color: #e8eef8 !important; } .admin-nav-submenu-popover .mud-menu-item:hover, .admin-nav-submenu-popover .mud-list-item:hover, .admin-nav-submenu-popover .mud-menu-item:focus-visible, .admin-nav-submenu-popover .mud-list-item:focus-visible { background-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; } .admin-nav-submenu-popover .mud-menu-item:hover .mud-list-item-text, .admin-nav-submenu-popover .mud-list-item:hover .mud-list-item-text, .admin-nav-submenu-popover .mud-menu-item:focus-visible .mud-list-item-text, .admin-nav-submenu-popover .mud-list-item:focus-visible .mud-list-item-text, .admin-nav-submenu-popover .mud-menu-item:hover .mud-typography, .admin-nav-submenu-popover .mud-list-item:hover .mud-typography, .admin-nav-submenu-popover .mud-menu-item:focus-visible .mud-typography, .admin-nav-submenu-popover .mud-list-item:focus-visible .mud-typography { color: #070B14 !important; } .admin-nav-submenu-popover .mud-menu-item .mud-icon-root, .admin-nav-submenu-popover .mud-list-item .mud-icon-root { color: #ffffff !important; } .admin-nav-submenu-popover .mud-menu-item:hover .mud-icon-root, .admin-nav-submenu-popover .mud-list-item:hover .mud-icon-root, .admin-nav-submenu-popover .mud-menu-item:focus-visible .mud-icon-root, .admin-nav-submenu-popover .mud-list-item:focus-visible .mud-icon-root { color: #070B14 !important; } .admin-nav-submenu-popover .admin-mudmenuitem--active, .admin-nav-submenu-popover .mud-list-item.admin-mudmenuitem--active { background-color: var(--theme-green, #FFE566) !important; border-left: 3px solid #070B14; color: #070B14 !important; } .admin-nav-submenu-popover .admin-mudmenuitem--active .mud-icon-root, .admin-nav-submenu-popover .mud-list-item.admin-mudmenuitem--active .mud-icon-root { color: #070B14 !important; } .admin-nav-submenu-popover .admin-mudmenuitem--active .mud-list-item-text, .admin-nav-submenu-popover .mud-list-item.admin-mudmenuitem--active .mud-list-item-text, .admin-nav-submenu-popover .admin-mudmenuitem--active .mud-typography, .admin-nav-submenu-popover .mud-list-item.admin-mudmenuitem--active .mud-typography { color: #070B14 !important; } .admin-nav-submenu-popover .mud-divider { border-color: rgba(255, 255, 255, 0.2) !important; background-color: rgba(255, 255, 255, 0.12) !important; } .admin-nav-submenu-popover .mud-typography, .admin-nav-submenu-popover .mud-list-item-text { color: #e8eef8 !important; } /* Admin top nav: desktop center menus vs mobile drawer */ .admin-nav-row { display: flex; align-items: center; padding: 0 2rem; gap: 1rem; flex-wrap: nowrap; position: relative; /* Lower than AdminLayout sticky .top-row (z-index 30); MudMenus use portaled popovers */ z-index: 10; } .admin-nav-desktop-menus { flex: 1; display: none; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.25rem; } /* MudMenu renders a full-viewport .mud-overlay on top of the bar to close on outside click; it blocks sibling activators. */ .admin-nav-desktop-menus .mud-menu > .mud-overlay { pointer-events: none !important; } /* * Admin MudMenu dropdowns render in the popover portal at z-index calc(var(--mud-zindex-popover) + 1), * above the bar unless we stack neighbors higher. Without this, the portaled panel (and hit-target) * covers sibling activators: no hover highlight and the first click only dismisses. * Also: each MudMenu’s full-viewport overlay uses z-index 5 inside its .mud-menu; later menus must * stack above earlier menus. Markup: child 1 = Dashboard , children 2–6 = MudMenus. */ .admin-nav-desktop-menus > a:first-of-type { position: relative; z-index: var(--mud-zindex-popover, 1200); } .admin-nav-desktop-menus > .mud-menu:nth-child(2) { position: relative; z-index: var(--mud-zindex-popover, 1200); } .admin-nav-desktop-menus > .mud-menu:nth-child(3) { position: relative; z-index: calc(var(--mud-zindex-popover, 1200) + 2); } .admin-nav-desktop-menus > .mud-menu:nth-child(4) { position: relative; z-index: calc(var(--mud-zindex-popover, 1200) + 3); } .admin-nav-desktop-menus > .mud-menu:nth-child(5) { position: relative; z-index: calc(var(--mud-zindex-popover, 1200) + 4); } .admin-nav-desktop-menus > .mud-menu:nth-child(6) { position: relative; z-index: calc(var(--mud-zindex-popover, 1200) + 5); } /* MudMenu activators — white on bar; hover / route-active = yellow pill + dark text */ .admin-nav-desktop-menus .mud-menu .mud-button-root { color: #ffffff !important; } .admin-nav-desktop-menus .mud-menu .mud-button-root .mud-button-label, .admin-nav-desktop-menus .mud-menu .mud-button-root .mud-icon-root { color: #ffffff !important; } .admin-nav-desktop-menus .mud-menu .mud-button-root:hover, .admin-nav-desktop-menus .mud-menu .mud-button-root:focus-visible { background-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; } .admin-nav-desktop-menus .mud-menu .mud-button-root:hover .mud-button-label, .admin-nav-desktop-menus .mud-menu .mud-button-root:hover .mud-icon-root, .admin-nav-desktop-menus .mud-menu .mud-button-root:focus-visible .mud-button-label, .admin-nav-desktop-menus .mud-menu .mud-button-root:focus-visible .mud-icon-root { color: #070B14 !important; } .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root { background-color: var(--theme-green, #FFE566) !important; border-radius: 4px !important; color: #070B14 !important; } .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root:hover, .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root:focus-visible { background-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; } .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root .mud-button-label, .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root .mud-icon-root { color: #070B14 !important; } .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root:hover .mud-button-label, .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root:hover .mud-icon-root, .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root:focus-visible .mud-button-label, .admin-nav-desktop-menus .mud-menu.admin-mudmenu--group-active .mud-button-root:focus-visible .mud-icon-root { color: #070B14 !important; } /* Account / user menu: same row, must sit above all center MudMenus and their portaled panels */ .admin-nav-row > .flex-shrink-0.ms-auto { position: relative; z-index: calc(var(--mud-zindex-popover, 1200) + 6); } @media (min-width: 768px) { .admin-nav-desktop-menus { display: flex; } } .admin-nav-menu-btn.mud-icon-button { color: #ffffff !important; } /* Mobile drawer: deep purple + yellow row highlights */ .admin-mobile-drawer .mud-drawer-content { background: linear-gradient(165deg, #2D1B4E 0%, #1A0B2E 100%); color: #F4F6FB; } .admin-mobile-drawer .mud-nav-link, .admin-mobile-drawer .mud-nav-link .mud-nav-link-text { color: #F4F6FB !important; } .admin-mobile-drawer .mud-nav-link .mud-nav-link-icon { color: #ffffff !important; } .admin-mobile-drawer .mud-nav-link:hover, .admin-mobile-drawer .mud-nav-link:focus-visible { background-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; } .admin-mobile-drawer .mud-nav-link:hover .mud-nav-link-text, .admin-mobile-drawer .mud-nav-link:focus-visible .mud-nav-link-text { color: #070B14 !important; } .admin-mobile-drawer .mud-nav-link:hover .mud-nav-link-icon, .admin-mobile-drawer .mud-nav-link:focus-visible .mud-nav-link-icon { color: #070B14 !important; } .admin-mobile-drawer .mud-nav-link.mud-nav-link-active { background-color: var(--theme-green, #FFE566) !important; color: #070B14 !important; } .admin-mobile-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-text, .admin-mobile-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: #070B14 !important; } .admin-mobile-drawer .mud-nav-group .mud-nav-link .mud-nav-link-expand-icon { color: #E8ECF8 !important; } @media (min-width: 768px) { .admin-dashboard-quick-actions { width: auto !important; min-width: 250px; max-width: 320px; } } /* Storage browser: preview tooltip + detail dialog */ .storage-browser-tooltip { max-width: 260px; } .storage-browser-tooltip-img { max-width: 240px; max-height: 180px; width: auto; height: auto; object-fit: contain; display: block; border-radius: 4px; } .storage-browser-tooltip-hint { opacity: 0.85; } .storage-browser-detail-img { max-width: 100%; max-height: min(50vh, 420px); object-fit: contain; } .storage-browser-text-preview { margin: 0; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; } .storage-browser-meta-table td { vertical-align: top; } .storage-browser-meta-table td:first-child { width: 38%; white-space: nowrap; } .nav-link-admin { color: #fff !important; text-decoration: none; padding: 8px 16px; margin: 0 4px; border-radius: 4px; display: flex; align-items: center; transition: background-color 0.2s, color 0.2s; } .nav-link-admin .nav-link-admin-ic, .nav-link-admin span { color: inherit !important; } .nav-link-admin:hover, .nav-link-admin:focus-visible { background-color: var(--theme-green, #FFE566); color: #070B14 !important; } .nav-link-admin:hover .nav-link-admin-ic, .nav-link-admin:hover span, .nav-link-admin:hover .mud-icon-root, .nav-link-admin:focus-visible .nav-link-admin-ic, .nav-link-admin:focus-visible span, .nav-link-admin:focus-visible .mud-icon-root { color: #070B14 !important; } .nav-link-admin.active { background-color: var(--theme-green, #FFE566); color: #070B14 !important; } .nav-link-admin.active:hover, .nav-link-admin.active:focus-visible { background-color: var(--theme-green, #FFE566); color: #070B14 !important; } .nav-link-admin.active .mud-icon-root, .nav-link-admin.active span, .nav-link-admin.active .nav-link-admin-ic { color: #070B14 !important; } .nav-link-admin.active:hover .mud-icon-root, .nav-link-admin.active:hover span, .nav-link-admin.active:hover .nav-link-admin-ic, .nav-link-admin.active:focus-visible .mud-icon-root, .nav-link-admin.active:focus-visible span, .nav-link-admin.active:focus-visible .nav-link-admin-ic { color: #070B14 !important; } @keyframes moveLetters { 0% { transform: translateX(-15vw); opacity: 0; } 33.3%, 66% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(15vw); opacity: 0; } } @media(max-width: 460px) { .welcome-title { font-size: large !important; } .why-choose-us-title, .lets-get-started-title{ font-size: xx-large !important; } .mud-input-control .mud-typography-body1 { font-size: smaller !important; } } /* Public blog index (/blog) — light masthead + translucent purple list on starfield */ .blog-index__container { max-width: 52rem; } .blog-index__masthead { margin-bottom: 2rem; text-align: center; } @media (min-width: 768px) { .blog-index__masthead { text-align: left; } } .blog-index__eyebrow { font-family: var(--font-display), var(--font-body), sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #F4F6FB; margin: 0 0 0.5rem; opacity: 0.9; } .blog-index__headline { font-family: var(--font-display), var(--font-body), sans-serif; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; color: #F4F6FB; margin: 0 0 0.75rem; line-height: 1.2; } .blog-index__lede { font-size: 1.05rem; line-height: 1.55; color: #E8ECF8; margin: 0 auto 1.25rem; max-width: 40rem; } @media (min-width: 768px) { .blog-index__lede { margin-left: 0; margin-right: 0; } } .blog-index__rule { height: 3px; width: 4rem; background: linear-gradient(90deg, var(--theme-green, #FFE566), rgba(255, 229, 102, 0.25)); border-radius: 2px; margin: 0 auto; } @media (min-width: 768px) { .blog-index__rule { margin: 0; } } .blog-index__toolbar { margin-bottom: 0.5rem; } /* Readable Mud outlined fields on starfield */ .blog-index__toolbar .mud-input-outlined .mud-input-outlined-border { border-color: rgba(244, 246, 251, 0.35) !important; } .blog-index__toolbar .mud-input-label, .blog-index__toolbar .mud-input-slot, .blog-index__toolbar .mud-input, .blog-index__toolbar .mud-select .mud-input-slot, .blog-index__toolbar .mud-typography { color: #F4F6FB !important; } .blog-index__toolbar .mud-input-adornment .mud-icon-root, .blog-index__toolbar .mud-svg-icon { color: #A8B3CC !important; } .blog-index__toolbar .mud-input::placeholder, .blog-index__toolbar input::placeholder { color: #A8B3CC !important; opacity: 1; } .blog-index__count { color: #A8B3CC; margin: 0.75rem 0 1.25rem; } .blog-index__count strong { color: #F4F6FB; } .blog-index__list { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; overflow: hidden; background: rgba(45, 27, 78, 0.80); box-shadow: none; } .blog-index__post + .blog-index__post { border-top: 1px solid rgba(255, 255, 255, 0.10); } .blog-index__post-link { display: grid; grid-template-columns: 1fr; gap: 0.35rem 1.5rem; padding: 1.25rem 1.25rem; text-decoration: none; color: inherit; transition: background-color 0.15s ease, box-shadow 0.15s ease; } @media (min-width: 640px) { .blog-index__post-link { grid-template-columns: 9.5rem 1fr; align-items: start; padding: 1.35rem 1.5rem; } } .blog-index__post-link:hover { background-color: rgba(255, 255, 255, 0.06); } .blog-index__post-link:focus-visible { outline: 2px solid var(--theme-green, #FFE566); outline-offset: -2px; } .blog-index__date { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #A8B3CC; white-space: nowrap; } .blog-index__title { font-family: var(--font-display), var(--font-body), sans-serif; font-size: 1.2rem; font-weight: 600; color: #F4F6FB; margin: 0 0 0.4rem; line-height: 1.35; transition: color 0.15s ease; } .blog-index__post-link:hover .blog-index__title { color: var(--theme-green, #FFE566); } .blog-index__excerpt { font-size: 0.95rem; line-height: 1.5; color: #A8B3CC; margin: 0 0 0.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-index__cta { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-green, #FFE566); } .blog-index__post-link:hover .blog-index__cta { text-decoration: underline; text-underline-offset: 3px; } /* Blog post detail: back link + date (aligned, spaced; no label uppercase) */ .blog-post .blog-post-meta { column-gap: 2rem; row-gap: 0.35rem; gap: 0.35rem 2rem; } .blog-post-meta .blog-post-meta__back.mud-button-root { flex: 0 0 auto; min-height: 0; /* Mud often zeroes adjacent text-button margins; keep clear space before the date */ margin-inline-end: 1.5rem; color: var(--theme-green, #FFE566) !important; } .blog-post-meta .blog-post-meta__date { flex: 0 1 auto; line-height: 1.5; margin: 0; padding-inline-start: 0.25rem; color: var(--theme-green, #FFE566) !important; } .blog-post-meta .blog-post-meta__back .mud-button-label { text-transform: none; letter-spacing: normal; } .blog-post-meta .blog-post-meta__back .mud-icon-root, .blog-post-meta .blog-post-meta__back .mud-svg-icon { color: var(--theme-green, #FFE566) !important; } /* Services cards: single static image in translucent panel */ .uc-services-masthead__title, .uc-services-masthead__lede { color: #F4F6FB; } .uc-service-card__media { height: 240px; max-height: 240px; overflow: hidden; border-radius: 0.75rem; } .uc-service-card__image { width: 100%; height: 100%; max-height: 240px; object-fit: cover; } /* Public blog post body (admin-authored HTML) */ .blog-post-body img { max-width: 100%; height: auto; } .blog-post-body blockquote { border-left: 4px solid var(--theme-green, #7dd856); margin: 1rem 0; padding-left: 1rem; color: rgba(0, 0, 0, 0.75); } .blog-post-body iframe, .blog-post-body .ql-video { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; border-radius: 4px; margin: 1rem 0; display: block; background: #000; } /* Quill host in admin content dialog */ .mrc-quill-host .ql-editor { min-height: 200px; } /* Quill toolbar: video (embed): theme has no default icon for ql-video */ .mrc-quill-host .ql-toolbar button.ql-video::before { content: ''; display: inline-block; width: 18px; height: 18px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") center / contain no-repeat; } .mrc-quill-host .ql-editor .mrc-quill-video, .mrc-quill-host .ql-editor iframe.ql-video { display: block; max-width: 100%; margin: 0.75rem 0; border-radius: 4px; background: #000; } /* Admin > Blog & Site Content preview pane */ .content-preview-surface { background: var(--mud-palette-background-grey, #f7f7f7); border: 1px solid var(--theme-green); box-sizing: border-box; } .content-preview-root .blog-post-body img { max-width: 100%; height: auto; } /* === W2 SEO/Legal: legal policy markup === */ .legal-policies-markup { max-width: 48rem; margin: 0 auto; line-height: 1.6; } .legal-policies-markup .legal-policies-title { font-weight: 700; text-align: center; margin: 2rem 0 1rem; } .legal-policies-markup p { margin-bottom: 0.85rem; } [data-theme="dark"] .legal-policies-markup, [data-theme="dark"] .legal-policies-markup .legal-policies-title { color: #F4F6FB; } [data-theme="dark"] .legal-policies-markup p, [data-theme="dark"] .legal-policies-markup li { color: #E8ECF8; } [data-theme="dark"] .legal-policies-markup a { color: var(--theme-green, #FFE566); } /* Privacy / Terms MudDialogs — translucent purple paper on dark, not white cards */ [data-theme="dark"] .mud-dialog .mud-dialog-title, [data-theme="dark"] .mud-dialog .mud-dialog-content { color: #F4F6FB; } [data-theme="dark"] .mud-dialog .mud-paper, [data-theme="dark"] .mud-dialog-container .mud-paper { background: rgba(45, 27, 78, 0.96) !important; color: #F4F6FB; border: 1px solid rgba(255, 255, 255, 0.10); } /* ===== W2 UX: ImageLightbox / BrandLoadingOverlay / public chrome safe-area ===== */ :root { /* Public chrome is nav-only (~2.75rem); was ~6rem when logo top-row existed */ --mrc-header-offset: calc(2.75rem + env(safe-area-inset-top, 0px)); --mrc-loader-z: 10050; } html { scroll-padding-top: var(--mrc-header-offset); } @media (max-width: 640.98px) { :root { --mrc-header-offset: calc(2.75rem + env(safe-area-inset-top, 0px)); } } .mrc-public-header { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .mrc-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; } .mrc-lightbox:focus { outline: none; } .mrc-lightbox img { max-width: 90vw; max-height: 90vh; } .mrc-lightbox-close { position: absolute; top: 1rem; right: 1rem; color: #fff; } .mrc-lightbox-prev { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: #fff; } .mrc-lightbox-next { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); color: #fff; } .mrc-brand-loader { display: flex; align-items: center; justify-content: center; background: rgba(26, 11, 46, 0.96); color: #F4F6FB; z-index: var(--mrc-loader-z); } .mrc-brand-loader--fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; pointer-events: auto; } body:has(.mrc-brand-loader--fullscreen) .page, body:has(.mrc-brand-loader--fullscreen) .footer, body:has(.mrc-brand-loader--fullscreen) .mud-popover, body:has(.mrc-brand-loader--fullscreen) .mud-overlay, body:has(.mrc-brand-loader--fullscreen) .mud-drawer { pointer-events: none !important; } body:has(.mrc-brand-loader--fullscreen) .mrc-brand-loader--fullscreen { pointer-events: auto !important; } body:has(.mrc-brand-loader--admin-health-gate) article.content { position: relative; z-index: var(--mrc-loader-z); } body:has(.mrc-brand-loader--admin-health-gate) .top-row, body:has(.mrc-brand-loader--admin-health-gate) .nav-row, body:has(.mrc-brand-loader--admin-health-gate) .admin-nav-row { z-index: 0 !important; } body:has(.mrc-brand-loader--admin-health-gate) .top-row, body:has(.mrc-brand-loader--admin-health-gate) .top-row *, body:has(.mrc-brand-loader--admin-health-gate) .nav-row, body:has(.mrc-brand-loader--admin-health-gate) .nav-row *, body:has(.mrc-brand-loader--admin-health-gate) .admin-nav-row, body:has(.mrc-brand-loader--admin-health-gate) .admin-nav-row *, body:has(.mrc-brand-loader--admin-health-gate) .admin-mobile-drawer, body:has(.mrc-brand-loader--admin-health-gate) .admin-mobile-drawer *, body:has(.mrc-brand-loader--admin-health-gate) .footer, body:has(.mrc-brand-loader--admin-health-gate) .footer *, body:has(.mrc-brand-loader--admin-health-gate) .mud-popover, body:has(.mrc-brand-loader--admin-health-gate) .mud-popover *, body:has(.mrc-brand-loader--admin-health-gate) .mud-overlay, body:has(.mrc-brand-loader--admin-health-gate) .mud-drawer, body:has(.mrc-brand-loader--admin-health-gate) .nav-menu-content, body:has(.mrc-brand-loader--admin-health-gate) .nav-menu-content * { pointer-events: none !important; } body:has(.mrc-brand-loader--admin-health-gate) .mrc-brand-loader--admin-health-gate, body:has(.mrc-brand-loader--admin-health-gate) .mrc-brand-loader--admin-health-gate * { pointer-events: auto !important; } .mrc-brand-loader--panel { position: absolute; inset: 0; min-height: 12rem; border-radius: inherit; } .mrc-brand-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2rem; max-width: 20rem; width: 100%; } .mrc-brand-loader__emblem { width: 7rem; height: auto; opacity: 0; animation: mrc-brand-loader-emblem-fade 700ms ease forwards; } .mrc-brand-loader__message { margin: 0; color: rgba(0, 0, 0, 0.65); font-size: 0.95rem; text-align: center; } .mrc-brand-loader__bar-track { width: 100%; height: 4px; background: rgba(37, 99, 235, 0.2); border-radius: 2px; overflow: hidden; } .mrc-brand-loader__bar-fill { height: 100%; background: var(--theme-green, #2563eb); border-radius: 2px; transition: width 300ms ease; } .mrc-brand-loader__bar-fill--indeterminate { width: 40% !important; animation: mrc-brand-loader-bar-slide 1.4s ease-in-out infinite; } .mrc-brand-loader__percent { margin: 0; color: var(--theme-green, #2563eb); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; } @keyframes mrc-brand-loader-emblem-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mrc-brand-loader-bar-slide { 0% { transform: translateX(-100%); } 50% { transform: translateX(150%); } 100% { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .mrc-brand-loader__emblem { animation: none; opacity: 1; } .mrc-brand-loader__bar-fill { transition: none; } .mrc-brand-loader__bar-fill--indeterminate { animation: none; width: 100% !important; opacity: 0.6; } } .mrc-loading-host { position: relative; } .mrc-loading-host:has(.mrc-brand-loader--panel) { min-height: 12rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === w3-shop: inquiry shop listings === */ .mrc-listing-actions .mud-button-root { min-height: 44px; } .mrc-shop-mobile-filters { margin-bottom: 1rem; } .mrc-shop-filters.mud-paper, .mrc-shop-filters { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; background: #fff; } .mrc-listing-card { border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mrc-listing-card:hover { border-color: rgba(37, 99, 235, 0.35); } .mrc-listing-img-wrap { position: relative; background: #f1f5f9; overflow: hidden; } .mrc-listing-img-wrap img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.3s ease; } .mrc-listing-card:hover .mrc-listing-img-wrap img { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .mrc-listing-img-wrap img { transition: none; } .mrc-listing-card:hover .mrc-listing-img-wrap img { transform: none; } } .mrc-listing-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mrc-listing-price { font-weight: 700; color: var(--theme-green, #2563eb); } .mrc-listing-row { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; background: #fff; } .mrc-listing-row-img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 6px; } .mrc-listing-excerpt { color: rgba(0, 0, 0, 0.6); } .mrc-badge { display: inline-block; font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; margin-right: 4px; font-weight: 700; letter-spacing: 0.04em; } .mrc-badge-sale { background: #a02828; color: #fff; position: absolute; top: 8px; left: 8px; } .mrc-badge-featured { background: #f59e0b; color: #111; position: absolute; top: 8px; right: 8px; } .mrc-badge-status { background: #e2e8f0; color: #1e293b; border: 1px solid #cbd5e1; } .mrc-badge-sold { background: #4a4a4a; color: #fff; } .mrc-badge-reserved { background: #3a4a6a; color: #fff; } .mrc-listing-badges .mrc-badge-featured, .mrc-listing-badges .mrc-badge-sale { position: static; } .mrc-featured-track { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; } .mrc-featured-item { flex: 0 0 280px; } .mrc-pdp-main { width: 100%; border-radius: 8px; max-height: 500px; object-fit: contain; } .mrc-pdp-thumbs { display: flex; flex-direction: column; gap: 0.5rem; } .mrc-pdp-thumb { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.7; } .mrc-pdp-thumb.active { opacity: 1; border: 2px solid var(--theme-green, #2563eb); } .mrc-pdp-price { font-size: 1.5rem; font-weight: 600; color: var(--theme-green, #2563eb); } .mrc-pdp-description { white-space: pre-wrap; word-wrap: break-word; } .mrc-sale-banner { border: 1px solid rgba(37, 99, 235, 0.35) !important; } .mrc-table-scroll { overflow-x: auto; } .mrc-table-actions-col { white-space: nowrap; } .mrc-table-actions-col--wide { min-width: 10rem; } .mrc-admin-record-cards { display: flex; flex-direction: column; gap: 0.75rem; } .mrc-admin-record-card { border: 1px solid rgba(0, 0, 0, 0.08); } /* ===== W3 Portfolio: public page + gallery ===== */ .mrc-portfolio-masthead .mud-typography { color: #F4F6FB; } .mrc-portfolio-masthead .mud-typography.mud-primary-text { color: var(--theme-green, #FFE566) !important; } .mrc-portfolio-section { padding: 2.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .mrc-portfolio-section:last-of-type { border-bottom: 0; } .mrc-portfolio-section .mud-typography { color: #F4F6FB; } .mrc-portfolio-section .mud-typography.mud-primary-text { color: var(--theme-green, #FFE566) !important; } .mrc-portfolio-section--alt { background: rgba(45, 27, 78, 0.55); } @media (max-width: 639.98px) { .mrc-portfolio-section { padding: 1.75rem 0; } } .mrc-portfolio-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 1rem 0 1.5rem; } .mrc-portfolio-gallery__trigger { display: block; width: 100%; padding: 0; margin: 0; border: none; background: transparent; border-radius: 4px; cursor: zoom-in; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mrc-portfolio-gallery__trigger:focus { outline: none; } .mrc-portfolio-gallery__trigger:focus-visible { outline: 2px solid var(--theme-green, #FFE566); outline-offset: 3px; } .mrc-portfolio-gallery__trigger img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(26, 11, 46, 0.65); transition: transform 0.2s ease, border-color 0.2s ease; pointer-events: none; } .mrc-portfolio-gallery__trigger:focus-visible img, .mrc-portfolio-gallery__trigger:hover img { transform: translateY(-2px); border-color: var(--theme-green, #FFE566); } @media (prefers-reduced-motion: reduce) { .mrc-portfolio-gallery__trigger img { transition: none; } } /* === W3 Booking: public /book + admin Booking section === */ /* Public booking wizard (/book) — translucent purple panel on starfield */ .mud-paper.mrc-book { background: rgba(45, 27, 78, 0.80) !important; color: #F4F6FB; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.10); } .mud-paper.mrc-book .mud-typography, .mud-paper.mrc-book .mud-input-label, .mud-paper.mrc-book .mud-checkbox .mud-typography { color: inherit; } .mud-paper.mrc-book .mud-input-outlined .mud-input-outlined-border { border-color: rgba(255, 255, 255, 0.22) !important; } .mud-paper.mrc-book a.mud-link { color: var(--theme-green, #FFE566) !important; } .mrc-book-steps { display: flex; flex-wrap: wrap; gap: 0.4rem 0.65rem; } .mrc-book-steps__item { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: #A8B3CC; opacity: 0.85; } .mrc-book-steps__item--active { color: var(--theme-green, #FFE566); font-weight: 700; opacity: 1; } .mrc-book-steps__item--done { opacity: 1; color: #E8ECF8; } .mrc-booking-service-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; } .mrc-booking-service-actions .mud-input-control-boolean-input, .mrc-booking-service-actions .mud-switch { flex: 1 1 auto; min-width: 5.5rem; } .mrc-booking-service-delete { flex: 0 0 auto; } .mrc-book-service-list { display: flex; flex-direction: column; gap: 0.75rem; } .mrc-book-service-btn { justify-content: space-between; text-transform: none; height: auto; min-height: 3rem; padding: 0.85rem 1rem; } .mrc-book-service-btn__title { font-weight: 600; } .mrc-book-service-btn__meta { margin-left: 1rem; opacity: 0.8; font-size: 0.9rem; } .mrc-book-slot-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .mrc-book-slot-btn { text-transform: none; min-width: 6.5rem; } .mrc-book-policy { background: rgba(26, 11, 46, 0.55) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #E8ECF8; } .mrc-book-intake__section-title { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 0.35rem; color: #F4F6FB; } .mrc-book-intake__html { line-height: 1.5; color: #E8ECF8; } .mrc-book-intake__checks { display: flex; flex-direction: column; gap: 0.15rem; } .mrc-book-signature__canvas { display: block; width: 100%; height: 140px; max-width: 100%; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 4px; background: #fff; touch-action: none; cursor: crosshair; } .mrc-book-signature--disabled .mrc-book-signature__canvas { pointer-events: none; cursor: not-allowed; opacity: 0.55; background: #e8ecf8; } .mrc-book-signature__actions { display: flex; justify-content: flex-end; } .mrc-book-card-validate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .mrc-book-card-verified { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--mud-palette-success, #7CFF3A); font-weight: 600; font-size: 0.95rem; } .mrc-book-card-verified--local { color: var(--mud-palette-warning, #ed6c02); } .mrc-book-card-pan input { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } /* Mask card digits without type=password (password blocks browser autofill). */ .mrc-book-card-secret input { -webkit-text-security: disc; } /* Stripe Card Element host: public /book CARD + admin booking detail validate */ .mrc-book-stripe-element { min-height: 2.75rem; padding: 0.85rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--mud-default-borderradius, 4px); background: rgba(255, 255, 255, 0.96); } .mrc-book-stripe-element:focus-within { border-color: var(--theme-green, #FFE566); box-shadow: 0 0 0 1px var(--theme-green, #FFE566); } .mrc-book-stripe-element .StripeElement { width: 100%; } /* Admin booking detail (agenda eyeball) */ .mrc-booking-detail-section + .mrc-booking-detail-section { padding-top: 0.15rem; } .mrc-booking-detail-timestamps { max-width: 36rem; } .mrc-booking-detail-meta { font-size: 0.75rem; line-height: 1.35; word-break: break-all; } .mrc-booking-detail-stripe { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)); } .mrc-booking-pan { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; } .mrc-booking-signature-preview { display: block; max-width: 100%; width: 320px; height: auto; /* ===== W3 Ops: LLC Checklist + Books & Tax ===== */ .mrc-admin-page .mrc-llc-checklist-items { display: flex; flex-direction: column; gap: 0.625rem; } .mrc-admin-page .mrc-llc-checklist-item { border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-panel-bg); max-width: 100%; min-width: 0; } .mrc-admin-page .mrc-llc-checklist-item--fail { border-left: 3px solid var(--mud-palette-error, #f44336); } .mrc-admin-page .mrc-llc-checklist-item__title { min-width: 0; word-break: break-word; } .mrc-admin-page .mrc-llc-checklist-status-group { flex-wrap: wrap; width: 100%; } .mrc-admin-page .mrc-llc-checklist-status-group .mud-button-root { flex: 1 1 auto; min-width: 3.5rem; } .mrc-admin-page .mrc-llc-checklist-status-chip--pass { background-color: rgba(76, 175, 80, 0.2) !important; color: #81c784 !important; } .mrc-admin-page .mrc-llc-checklist-status-chip--fail { background-color: rgba(244, 67, 54, 0.2) !important; color: #e57373 !important; } .mrc-admin-page .mrc-llc-checklist-status-chip--na { background-color: rgba(158, 158, 158, 0.2) !important; color: #bdbdbd !important; } .mrc-admin-page .mrc-llc-checklist-status-chip--pending { background-color: rgba(255, 183, 77, 0.2) !important; color: #ffb74d !important; } .mrc-admin-page .mrc-llc-checklist-item__suggestion { padding: 0.625rem 0.75rem; border-radius: 6px; background: rgba(255, 183, 77, 0.1); border: 1px solid rgba(255, 183, 77, 0.35); } .mrc-admin-page .mrc-llc-checklist-item__details { border-radius: 6px; background: var(--theme-panel-bg-inset); border: 1px solid var(--theme-line-muted); } .mrc-admin-page .mrc-llc-checklist-item__detail-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--theme-text-muted); margin-bottom: 0.25rem; } .mrc-admin-page .mrc-llc-checklist-item__steps { margin: 0.25rem 0 0; padding-left: 1.25rem; } .mrc-admin-page .mrc-llc-checklist-item__steps li { margin-bottom: 0.4rem; line-height: 1.45; } .mrc-admin-page .mrc-llc-checklist-item__steps li:last-child { margin-bottom: 0; } .mrc-admin-page .mrc-llc-checklist-item__links .mrc-llc-checklist-item__link { display: inline-flex; align-items: center; word-break: break-word; } .mrc-admin-page .mrc-llc-checklist-item__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mrc-admin-page .mrc-llc-checklist-section__blurb { max-width: 42rem; line-height: 1.35; } .mrc-admin-page .mrc-llc-checklist-item__actions { border-top: 1px solid var(--theme-line-muted); } .mrc-admin-page .mrc-llc-checklist-item__notes .mud-input-root { font-size: 0.875rem; } .mrc-admin-page .mrc-llc-checklist-section { border: 1px solid var(--theme-line); border-radius: 8px; overflow: hidden; } .mrc-admin-page .mrc-llc-checklist-section__header { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; border: none; background: var(--theme-panel-bg); color: inherit; text-align: left; cursor: pointer; } .mrc-admin-page .mrc-llc-checklist-section__header:hover { background: var(--theme-header-hover); } .mrc-admin-page .mrc-llc-checklist-section__title { flex: 1 1 auto; min-width: 0; } .mrc-admin-page .mrc-llc-checklist-section__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; } .mrc-admin-page .mrc-llc-section-chip { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .mrc-admin-page .mrc-llc-section-chip--pass { background: rgba(76, 175, 80, 0.2); color: #81c784; } .mrc-admin-page .mrc-llc-section-chip--fail { background: rgba(244, 67, 54, 0.2); color: #e57373; } .mrc-admin-page .mrc-llc-section-chip--pending { background: rgba(255, 183, 77, 0.2); color: #ffb74d; } .mrc-admin-page .mrc-llc-section-chip--na { background: rgba(158, 158, 158, 0.2); color: #bdbdbd; } /* Fixed bar so Save All stays visible while editing items above the fold */ .mrc-admin-page .mrc-llc-checklist--dirty { padding-bottom: 5rem; } .mrc-admin-page .mrc-llc-checklist-sticky-save { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0.875rem 1.25rem; border-radius: 0; border: none; border-top: 1px solid var(--mud-palette-primary, var(--theme-green)); background: var(--theme-sticky-bar-bg); color: var(--theme-text); backdrop-filter: blur(8px); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25); } .mrc-admin-page .mrc-llc-checklist-signoff { padding-top: 0.5rem; border-top: 2px solid var(--theme-line); } .mrc-admin-page .mrc-llc-checklist-empty-log { text-align: center; } @media (max-width: 767.98px) { .mrc-admin-page .mrc-llc-checklist-item__status-btn { min-height: 44px; min-width: 44px; } .mrc-admin-page .mrc-llc-checklist-section__header { flex-wrap: wrap; } .mrc-admin-page .mrc-llc-checklist-section__chips { width: 100%; justify-content: flex-start; } } /* Books & Tax — roadmap, checklist, ledger, vault, sticky save */ .mrc-admin-page .mrc-books-tax-roadmap__summary { margin: 0; padding-left: 1.25rem; line-height: 1.55; } .mrc-admin-page .mrc-books-tax-roadmap__summary li { margin-bottom: 0.35rem; } .mrc-admin-page .mrc-books-tax-roadmap__link { word-break: break-word; } .mrc-admin-page .mrc-books-tax-roadmap__detail { border-radius: 6px; background: var(--theme-panel-bg-inset); border: 1px solid var(--theme-line-muted); } .mrc-admin-page .mrc-books-tax-roadmap__footer { display: block; margin-top: 0.5rem; } .mrc-admin-page .mrc-books-tax-checklist-items { display: flex; flex-direction: column; gap: 0.625rem; } .mrc-admin-page .mrc-books-tax-checklist-item { border: 1px solid var(--theme-line); border-radius: 8px; background: var(--theme-panel-bg); max-width: 100%; min-width: 0; } .mrc-admin-page .mrc-books-tax-checklist-item--fail { border-left: 3px solid var(--mud-palette-error, #f44336); } .mrc-admin-page .mrc-books-tax-checklist-item__title { min-width: 0; word-break: break-word; } .mrc-admin-page .mrc-books-tax-checklist-status-group { flex-wrap: wrap; width: 100%; } .mrc-admin-page .mrc-books-tax-checklist-status-group .mud-button-root { flex: 1 1 auto; min-width: 3.5rem; } .mrc-admin-page .mrc-books-tax-checklist-status-chip--pass { background-color: rgba(76, 175, 80, 0.2) !important; color: #81c784 !important; } .mrc-admin-page .mrc-books-tax-checklist-status-chip--fail { background-color: rgba(244, 67, 54, 0.2) !important; color: #e57373 !important; } .mrc-admin-page .mrc-books-tax-checklist-status-chip--na { background-color: rgba(158, 158, 158, 0.2) !important; color: #bdbdbd !important; } .mrc-admin-page .mrc-books-tax-checklist-status-chip--pending { background-color: rgba(255, 183, 77, 0.2) !important; color: #ffb74d !important; } .mrc-admin-page .mrc-books-tax-checklist-item__suggestion { padding: 0.625rem 0.75rem; border-radius: 6px; background: rgba(255, 183, 77, 0.1); border: 1px solid rgba(255, 183, 77, 0.35); } .mrc-admin-page .mrc-books-tax-checklist-item__details { border-radius: 6px; background: var(--theme-panel-bg-inset); border: 1px solid var(--theme-line-muted); } .mrc-admin-page .mrc-books-tax-checklist-item__detail-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--theme-text-muted); margin-bottom: 0.25rem; } .mrc-admin-page .mrc-books-tax-checklist-item__steps { margin: 0.25rem 0 0; padding-left: 1.25rem; } .mrc-admin-page .mrc-books-tax-checklist-item__steps li { margin-bottom: 0.4rem; line-height: 1.45; } .mrc-admin-page .mrc-books-tax-checklist-item__steps li:last-child { margin-bottom: 0; } .mrc-admin-page .mrc-books-tax-checklist-item__links .mrc-books-tax-checklist-item__link { display: inline-flex; align-items: center; word-break: break-word; } .mrc-admin-page .mrc-books-tax-checklist-item__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mrc-admin-page .mrc-books-tax-checklist-section__blurb { max-width: 42rem; line-height: 1.35; } .mrc-admin-page .mrc-books-tax-checklist-item__actions { border-top: 1px solid var(--theme-line-muted); } .mrc-admin-page .mrc-books-tax-checklist-item__notes .mud-input-root { font-size: 0.875rem; } .mrc-admin-page .mrc-books-tax-checklist-section { border: 1px solid var(--theme-line); border-radius: 8px; overflow: hidden; } .mrc-admin-page .mrc-books-tax-checklist-section__header { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1rem; border: none; background: var(--theme-panel-bg); color: inherit; text-align: left; cursor: pointer; } .mrc-admin-page .mrc-books-tax-checklist-section__header:hover { background: var(--theme-header-hover); } .mrc-admin-page .mrc-books-tax-checklist-section__title { flex: 1 1 auto; min-width: 0; } .mrc-admin-page .mrc-books-tax-checklist-section__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: flex-end; } .mrc-admin-page .mrc-books-tax-section-chip { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .mrc-admin-page .mrc-books-tax-section-chip--pass { background: rgba(76, 175, 80, 0.2); color: #81c784; } .mrc-admin-page .mrc-books-tax-section-chip--fail { background: rgba(244, 67, 54, 0.2); color: #e57373; } .mrc-admin-page .mrc-books-tax-section-chip--pending { background: rgba(255, 183, 77, 0.2); color: #ffb74d; } .mrc-admin-page .mrc-books-tax-section-chip--na { background: rgba(158, 158, 158, 0.2); color: #bdbdbd; } .mrc-admin-page .mrc-books-tax-checklist--dirty { padding-bottom: 5rem; } .mrc-admin-page .mrc-books-tax-checklist-sticky-save { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0.875rem 1.25rem; border-radius: 0; border: none; border-top: 1px solid var(--mud-palette-primary, var(--theme-green)); background: var(--theme-sticky-bar-bg); color: var(--theme-text); backdrop-filter: blur(8px); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25); } .mrc-admin-page .mrc-books-tax-checklist-signoff { padding-top: 0.5rem; border-top: 2px solid var(--theme-line); } .mrc-admin-page .mrc-books-tax-checklist-empty-log { text-align: center; } .mrc-admin-page .mrc-books-tax-rollup-chips { align-items: center; } .mrc-admin-page .mrc-books-tax-ledger-entry, .mrc-admin-page .mrc-books-tax-vault-record { border-radius: 8px; max-width: 100%; min-width: 0; } .mrc-admin-page .mrc-books-tax-ledger-empty, .mrc-admin-page .mrc-books-tax-vault-empty { border-radius: 8px; text-align: center; } @media (max-width: 767.98px) { .mrc-admin-page .mrc-books-tax-checklist-item__status-btn { min-height: 44px; min-width: 44px; } .mrc-admin-page .mrc-books-tax-checklist-section__header { flex-wrap: wrap; } .mrc-admin-page .mrc-books-tax-checklist-section__chips { width: 100%; justify-content: flex-start; } }