@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.2

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

@@ -0,0 +1,748 @@
+
+// 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).