@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/styles/surfaces/marketing-global.scss

@@ -1,748 +0,0 @@
-
-// Shared tokens, navbar, footer, page shell: /assets/viking-ui.css (@deml/viking-ui)
-
-// ====================== LEAFLET ======================
-
-pre[class*='language-'] {
-  background-color: var(--viking-charcoal-900) !important;
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius-md);
-  padding: var(--space-3);
-  margin: var(--space-4) 0;
-  box-shadow: none;
-  tab-size: 4;
-}
-
-code[class*='language-'] {
-  font-size: 1rem;
-  line-height: 1.65;
-  color: var(--white) !important;
-}
-
-// Inter variable font loaded via viking-ui.css (self-hosted woff2).
-
-// ====================== GLOBAL LAYOUT ======================
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-pre,
-pre code {
-  white-space: pre-wrap !important;
-  word-wrap: break-word !important;
-  word-break: break-word !important;
-  max-width: 100%;
-}
-
-html,
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden; /* Guarantee no horizontal overflow */
-  max-width: 100vw;
-}
-
-app-root {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-body {
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  font-family: var(--viking-font-family);
-  font-size: var(--base-font-size, 16px);
-  line-height: 1.65;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  transition:
-    background-color 0.3s,
-    color 0.3s;
-}
-
-html[data-theme='light'] body {
-  background-color: var(--bg-color);
-}
-
-// ====================== TYPOGRAPHY & READABILITY ======================
-p {
-  margin-bottom: var(--space-3);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.25;
-  margin-top: var(--space-4);
-  margin-bottom: var(--space-2);
-  font-weight: 600;
-  letter-spacing: var(--header-letter-spacing);
-}
-
-h1 {
-  font-size: clamp(1.75rem, 5vw, 2.5rem);
-}
-h2 {
-  font-size: clamp(1.5rem, 4vw, 2rem);
-}
-h3 {
-  font-size: 1.5rem;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-ul,
-ol {
-  margin-bottom: var(--space-3);
-  padding-left: var(--space-3);
-}
-
-li {
-  margin-bottom: var(--space-1);
-}
-
-a:not(.viking-button):not(.viking-btn):not(.cta-button):not(.nav-item):not(.nav-btn):not(.auth-btn):not(.mobile-auth-btn):not(.mobile-nav-btn):not(.integration-link):not(.integration-logo-item) {
-  color: var(--link-color);
-  font-weight: 500;
-  text-decoration: none;
-  border-bottom: 1px solid transparent; /* Prevents layout shift */
-  box-shadow: none !important;
-  text-shadow: none !important;
-  transition:
-    border-bottom-color 0.2s ease,
-    color 0.2s ease;
-}
-
-a:not(.viking-button):not(.viking-btn):not(.cta-button):not(.nav-item):not(.nav-btn):not(.auth-btn):not(.mobile-auth-btn):not(.mobile-nav-btn):not(.integration-link):not(.integration-logo-item):hover,
-a:not(.viking-button):not(.viking-btn):not(.cta-button):not(.nav-item):not(.nav-btn):not(.auth-btn):not(.mobile-auth-btn):not(.mobile-nav-btn):not(.integration-link):not(.integration-logo-item):focus-visible {
-  color: var(--link-hover-color);
-  text-decoration: none;
-  border-bottom-color: var(--link-hover-color); /* WCAG requirement: non-color hover indicator */
-}
-
-// ====================== INLINE CODE ======================
-:not(pre) > code {
-  background-color: var(--color-dark-grey-btn-bg);
-  padding: 0.1em 0.35em;
-  border-radius: 4px;
-  font-size: 0.875em;
-  line-height: inherit;
-  color: var(--text-muted);
-  white-space: normal;
-  vertical-align: baseline;
-}
-
-// ====================== MARKDOWN COMPONENT ======================
-app-page {
-  display: block;
-  margin-top: 24px;
-}
-
-main.main {
-  padding: var(--viking-space-2);
-}
-
-@media (min-width: 481px) {
-  main.main {
-    padding: var(--viking-space-8) var(--viking-space-3);
-  }
-}
-
-@media (min-width: 768px) {
-  main.main {
-    padding: var(--viking-space-9) var(--viking-space-4);
-  }
-}
-
-/* Global Layout Containers (Moved from app.scss for ViewEncapsulation) */
-.landing-container-global {
-  position: relative;
-  min-height: calc(100vh - 64px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  margin-top: -64px;
-  padding-top: 72px;
-  width: 100%;
-  box-sizing: border-box;
-
-  @media (min-width: 768px) {
-    padding: 32px;
-    padding-top: 72px;
-  }
-}
-
-.dashboard-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  justify-content: flex-start;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  width: 100%;
-  box-sizing: border-box;
-
-  @media (min-width: 768px) {
-    padding-top: 72px;
-    padding-bottom: 72px;
-  }
-}
-
-.page-content {
-  position: relative;
-  z-index: 10;
-  width: 100%;
-  max-width: var(--container-max-width);
-  padding: 16px;
-  margin: 0 auto;
-  box-sizing: border-box;
-  background-color: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius-lg);
-  box-shadow: var(--shadow-sm);
-}
-
-@media (min-width: 768px) {
-  .page-content {
-    padding: 56px;
-  }
-}
-
-.dashboard-content-area {
-  flex: 1;
-  padding: var(--viking-space-3, 24px) 0 var(--viking-space-4, 32px);
-  position: relative;
-  z-index: 1;
-  box-sizing: border-box;
-
-  @media (min-width: 768px) {
-    padding-top: var(--viking-space-4, 32px);
-  }
-}
-
-.content-wrapper {
-  max-width: var(--container-max-width, 1260px);
-  margin: 0 auto;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--grid-gap);
-
-  &.full-width {
-    max-width: 100%;
-  }
-}
-
-// ====================== GLOBAL ERROR TOAST ======================
-#global-error-toast {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 99999;
-  font-family: var(--viking-font-family);
-  max-width: 400px;
-  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-
-  /* Default Dark Theme variables */
-  --toast-bg: var(--color-surface);
-  --toast-border: 1px solid var(--color-error);
-  --toast-text: var(--color-error);
-  --toast-title: var(--color-on-surface);
-  --toast-icon: var(--color-error);
-  --toast-close: var(--text-muted);
-  --toast-close-hover: var(--color-error);
-  --toast-shadow: var(--shadow-hover);
-}
-
-html[data-theme='light'] #global-error-toast {
-  /* Light Theme variables */
-  --toast-bg: var(--color-surface);
-  --toast-border: 1px solid var(--color-error);
-  --toast-text: var(--color-error);
-  --toast-title: var(--color-on-surface);
-  --toast-icon: var(--color-error);
-  --toast-close: var(--text-muted);
-  --toast-close-hover: var(--color-error);
-  --toast-shadow: var(--shadow-hover);
-}
-
-#global-error-toast .toast-container {
-  background: var(--toast-bg);
-  border: var(--toast-border);
-  color: var(--toast-text);
-  padding: 16px 16px;
-  border-radius: var(--border-radius-md);
-  box-shadow: var(--toast-shadow);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.3s ease;
-}
-
-#global-error-toast .toast-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--toast-icon);
-}
-
-#global-error-toast .toast-content {
-  flex-grow: 1;
-}
-
-#global-error-toast .toast-title {
-  display: block;
-  font-size: var(--ui-font-size, 14px);
-  font-weight: 600;
-  margin-bottom: 0px;
-  color: var(--toast-title);
-}
-
-#global-error-toast .toast-message {
-  font-size: var(--base-font-size, 16px);
-  opacity: 0.9;
-  line-height: 1.4;
-}
-
-#global-error-toast .toast-close {
-  background: none;
-  border: none;
-  color: var(--toast-close);
-  cursor: pointer;
-  font-size: 20px;
-  line-height: 1;
-  padding: 0 8px;
-  margin-left: 8px;
-  opacity: 0.7;
-  transition:
-    opacity 0.2s,
-    color 0.2s;
-}
-
-#global-error-toast .toast-close:hover {
-  opacity: 1;
-  color: var(--toast-close-hover);
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateY(24px) scale(0.95);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0) scale(1);
-    opacity: 1;
-  }
-}
-
-/* Error/Offline State */
-.status-error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 32px 24px;
-  background: var(--viking-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius-lg);
-  position: relative;
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-  margin-top: 32px;
-
-  @media (min-width: 601px) {
-    padding: 72px 32px;
-  }
-
-  .error-state-icon {
-    font-size: 72px;
-    width: 72px;
-    height: 72px;
-    color: var(--text-muted);
-    margin-bottom: 24px;
-    opacity: 0.6;
-  }
-
-  .error-title {
-    margin: 0 0 8px;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--text-color);
-    letter-spacing: -0.01em;
-  }
-
-  .error-subtitle {
-    margin: 0 0 32px;
-    font-size: 1rem;
-    line-height: 1.6;
-    color: var(--text-muted);
-    max-width: 416px;
-  }
-
-  .retry-btn {
-    font-weight: 700 !important;
-    padding: 8px 24px !important;
-    border-radius: var(--border-radius-sm) !important;
-    box-shadow: var(--shadow-sm) !important;
-    transition: all 0.2s ease !important;
-
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: var(--shadow-md) !important;
-      opacity: 0.95;
-    }
-  }
-}
-
-.btn-spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid color-mix(in srgb, var(--viking-white) 30%, transparent);
-  border-radius: 50%;
-  border-top-color: currentColor;
-  animation: spin 0.8s linear infinite;
-  vertical-align: middle;
-  margin-right: 8px;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// Eliminate border-radius on elements that only have single-sided borders (top, bottom, left, or right)
-// to avoid curved corners on straight dividing lines.
-.hud-header,
-.panel-header,
-.filter-bar,
-.telemetry-bar,
-.video-flat-info,
-.sidebar-brand,
-.sidebar-footer,
-.dashboard-sidebar,
-.vuln-profile-header,
-.page-content:not([style*='border']) {
-  border-radius: 0 !important;
-}
-
-// ====================== HUD HEADER STYLING ======================
-.hud-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 8px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--border-layout);
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.hud-brand {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.hud-title {
-  font-family: var(--viking-font-family-mono);
-  font-size: 1.25rem;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  margin: 0;
-  color: var(--text-color);
-  text-transform: uppercase;
-}
-
-.hud-subtitle {
-  font-size: 1rem;
-  color: var(--text-muted);
-  margin: 8px 0 0 0;
-  font-family: var(--viking-font-family-mono);
-}
-
-/* Hide floating invisible reCAPTCHA badge globally */
-.grecaptcha-badge {
-  visibility: hidden !important;
-}
-
-/* Ensure Google reCAPTCHA challenge iframe and its parent containers are always on top of Angular Material dialogs */
-.grecaptcha-bubble-holder,
-div.grecaptcha-bubble-holder,
-#recaptcha-container,
-#firebase-recaptcha-container,
-iframe[src*='recaptcha'],
-iframe[src*='google.com/recaptcha'],
-body > div[style*='z-index']:has(iframe[src*='recaptcha']),
-body > div[style*='z-index']:has(iframe[src*='google.com/recaptcha']),
-body > div:has(iframe[src*='recaptcha']),
-body > div:has(iframe[src*='google.com/recaptcha']),
-body > div:has(iframe[title*='recaptcha']),
-body > div:has(iframe[title*='reCAPTCHA']),
-div[style*='z-index']:has(iframe[src*='recaptcha']),
-div[style*='z-index']:has(iframe[src*='google.com/recaptcha']) {
-  z-index: 2000000000 !important;
-}
-
-// ====================== SECTION TAGS ======================
-.section-tag-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.section-tag {
-  font-family: var(--viking-font-family-mono);
-  font-size: 1rem;
-  font-weight: 800;
-  color: var(--color-primary);
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-  margin-bottom: 0;
-  display: inline-block;
-}
-
-// ====================== SLEEK PLATFORM CONSOLE SCROLLBARS ======================
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track {
-  background: var(--color-background);
-}
-::-webkit-scrollbar-thumb {
-  background: var(--color-primary);
-  border-radius: var(--viking-radius-pill, 999px);
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-primary-container);
-}
-
-/* Machined surfaces + status pulse live in viking-ui.css (_layout-rhythm.scss) */
-
-/* ====================== SHARED DASHBOARD SHELL (marketing pages) ====================== */
-.dashboard-page-container {
-  display: block;
-  width: 100%;
-  min-height: calc(100vh - var(--navbar-height, 64px));
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  overflow-x: hidden;
-}
-
-.dashboard-layout {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: calc(100vh - var(--navbar-height, 64px));
-}
-
-.dashboard-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.mobile-chapter-select {
-  display: block;
-  width: 100%;
-  margin-bottom: 16px;
-
-  select {
-    width: 100%;
-    min-height: 44px;
-    padding: 10px 12px;
-    border-radius: var(--border-radius-md);
-    border: 1px solid var(--border);
-    background: var(--viking-surface);
-    color: var(--text-color);
-    font: inherit;
-  }
-}
-
-.dashboard-sidebar {
-  display: none;
-}
-
-@media (min-width: 901px) {
-  .dashboard-layout {
-    flex-direction: row;
-  }
-
-  .dashboard-sidebar {
-    display: block;
-    width: 280px;
-    flex-shrink: 0;
-    border-right: 1px solid var(--border);
-  }
-
-  .mobile-chapter-select {
-    display: none;
-  }
-}
-
-/* ====================== RESPONSIVE GRID SYSTEM ====================== */
-.grid-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--grid-gap);
-  width: 100%;
-}
-
-@media (min-width: 600px) {
-  .grid-layout {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 768px) {
-  .grid-layout {
-    grid-template-columns: repeat(12, 1fr);
-  }
-}
-
-.col-span-1 {
-  grid-column: span 1;
-}
-.col-span-2 {
-  grid-column: span 2;
-}
-.col-span-3 {
-  grid-column: span 3;
-}
-.col-span-4 {
-  grid-column: span 4;
-}
-
-@media (min-width: 768px) {
-  .col-span-md-1 {
-    grid-column: span 1;
-  }
-  .col-span-md-2 {
-    grid-column: span 2;
-  }
-  .col-span-md-3 {
-    grid-column: span 3;
-  }
-  .col-span-md-4 {
-    grid-column: span 4;
-  }
-  .col-span-md-5 {
-    grid-column: span 5;
-  }
-  .col-span-md-6 {
-    grid-column: span 6;
-  }
-  .col-span-md-7 {
-    grid-column: span 7;
-  }
-  .col-span-md-8 {
-    grid-column: span 8;
-  }
-  .col-span-md-9 {
-    grid-column: span 9;
-  }
-  .col-span-md-10 {
-    grid-column: span 10;
-  }
-  .col-span-md-11 {
-    grid-column: span 11;
-  }
-  .col-span-md-12 {
-    grid-column: span 12;
-  }
-}
-
-// ====================== CUSTOM BRANDED SELECT STYLING ======================
-/* Enable customization for all select elements and their pickers */
-select,
-select::picker(select) {
-  appearance: base-select;
-}
-
-/* Style the visible trigger button */
-select {
-  font-family: var(--viking-font-family);
-  background-color: var(--card-bg);
-  color: var(--text-color);
-  border: 1px solid var(--text-muted); /* WCAG 3:1 contrast for input borders */
-  border-radius: var(--border-radius-md, 8px);
-  padding: 16px 16px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-select:hover {
-  border-color: var(--color-primary);
-}
-
-/* Style the dropdown options list */
-select::picker(select) {
-  font-family: var(--viking-font-family);
-  background-color: var(--card-bg);
-  color: var(--text-color);
-  border: 1px solid var(--text-muted);
-  border-radius: var(--border-radius-md, 8px);
-  padding: 8px;
-  box-shadow: var(--shadow-md);
-  box-sizing: border-box;
-  margin: 0;
-  width: anchor-size(width);
-}
-
-/* Customize internal part colors to match text */
-select::picker-icon {
-  color: var(--text-color); /* WCAG compliance for icon */
-  margin-left: 16px; /* Spacing around the caret */
-  margin-right: 0px;
-}
-
-select option::checkmark {
-  color: var(--color-primary);
-}
-
-/* Style individual options and hover effects */
-select option {
-  padding: 8px 16px;
-  border-radius: var(--border-radius-sm, 4px);
-  color: var(--text-color);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-select option:hover,
-select option:focus {
-  background-color: var(--hover-color);
-  color: var(--color-on-primary); /* Ensure white text on primary hover background */
-}
-
-select option:checked {
-  background-color: var(--color-primary-container);
-  color: var(--color-on-primary-container);
-  font-weight: 600;
-}
-
-// Algolia site search styles live in viking-ui static-navbar.scss (synced via viking-ui.css).