slidev-theme-measurelab 0.1.0

package/global.css

@@ -0,0 +1,646 @@
+/* Import Poppins font globally */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Offset for fixed navbar when using anchor links */
+html {
+  scroll-padding-top: 30px;
+}
+
+/* Target pseudo-elements for heading anchors */
+h2[id]:target::before,
+h3[id]:target::before {
+  content: "";
+  display: block;
+  height: 120px;
+  margin-top: -120px;
+}
+
+/* Ensure all clickable elements have proper cursor */
+button:not(:disabled),
+[role="button"]:not([aria-disabled="true"]),
+a[href],
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+[onclick],
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Ensure disabled elements have proper cursor */
+button:disabled,
+[role="button"][aria-disabled="true"],
+[disabled],
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+/* Assessment Results Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideInFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Animation utility classes */
+.animate-fadeInUp {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-fadeInScale {
+  animation: fadeInScale 0.6s ease-out forwards;
+}
+
+.animate-slideInFromLeft {
+  animation: slideInFromLeft 0.6s ease-out forwards;
+}
+
+/* Stagger delays for score cards */
+.animate-delay-100 {
+  animation-delay: 100ms;
+}
+
+.animate-delay-200 {
+  animation-delay: 200ms;
+}
+
+.animate-delay-300 {
+  animation-delay: 300ms;
+}
+
+.animate-delay-400 {
+  animation-delay: 400ms;
+}
+
+.animate-delay-500 {
+  animation-delay: 500ms;
+}
+
+.animate-delay-700 {
+  animation-delay: 700ms;
+}
+
+.animate-delay-1000 {
+  animation-delay: 1000ms;
+}
+
+/* Respect user motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .animate-fadeInUp,
+  .animate-fadeInScale,
+  .animate-slideInFromLeft {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.1408 0.0044 285.8229);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.1408 0.0044 285.8229);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1408 0.0044 285.8229);
+  --primary: oklch(0.7879 0.1991 139.5227);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.9579 0.0013 106.4242);
+  --secondary-foreground: oklch(0.2163 0.0435 230.7774);
+  --muted: oklch(0.9674 0.0013 286.3752);
+  --muted-foreground: oklch(0.373 0.034 259.733);
+  --accent: oklch(0.9674 0.0013 286.3752);
+  --accent-foreground: oklch(0.2103 0.0059 285.8852);
+  --destructive: oklch(0.583 0.2387 28.4765);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.9197 0.004 286.3202);
+  --input: oklch(0.9197 0.004 286.3202);
+  --ring: oklch(0.7879 0.1991 139.5227);
+  --chart-1: #40faa3; /* mint green */
+  --chart-2: #fbbc02; /* golden yellow */
+  --chart-3: #7ddaee; /* sky blue */
+  --chart-4: #cdfe0c; /* lime yellow */
+  --chart-5: #f97316; /* coral orange */
+  --sidebar: oklch(0.9851 0 0);
+  --sidebar-foreground: oklch(0.1408 0.0044 285.8229);
+  --sidebar-primary: oklch(0.7879 0.1991 139.5227);
+  --sidebar-primary-foreground: oklch(0.9819 0.0181 155.8263);
+  --sidebar-accent: oklch(0.9674 0.0013 286.3752);
+  --sidebar-accent-foreground: oklch(0.2103 0.0059 285.8852);
+  --sidebar-border: oklch(0.9197 0.004 286.3202);
+  --sidebar-ring: oklch(0.7879 0.1991 139.5227);
+  --font-sans: Poppins, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --radius: 0.65rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+
+.dark {
+  /* Backgrounds */
+  --background: oklch(0.2307 0.044 243.7); /* #081F30 - Primary dark background */
+  --foreground: oklch(0.9804 0 0); /* #F9F9F9 - Light grey text */
+  --card: oklch(1 0 0 / 0.05); /* Subtle white overlay for hierarchy */
+  --card-foreground: oklch(0.9804 0 0);
+  --popover: oklch(0.3 0.03 243.7); /* Slightly lighter navy for popovers */
+  --popover-foreground: oklch(0.9804 0 0);
+
+  /* Primary (Brand Green - stays same in both modes) */
+  --primary: oklch(0.7879 0.1991 139.5227);
+  --primary-foreground: oklch(0.3804 0.1038 150.1238);
+
+  /* Interactive States */
+  --secondary: oklch(0.2739 0.0055 286.0326);
+  --secondary-foreground: oklch(0.9804 0 0);
+  --muted: oklch(0.2739 0.0055 286.0326);
+  --muted-foreground: oklch(0.7057 0.0144 286.0246);
+  --accent: oklch(0.2739 0.0055 286.0326);
+  --accent-foreground: oklch(0.9851 0 0);
+
+  /* Borders & Inputs */
+  --border: oklch(0.3211 0 0); /* Dark grey borders */
+  --input: oklch(0.3211 0 0); /* Match borders */
+
+  /* Destructive */
+  --destructive: oklch(0.7022 0.1892 22.2279);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  /* Ring */
+  --ring: oklch(0.5296 0.1495 148.9899);
+
+  /* Charts */
+  --chart-1: #40faa3; /* mint green */
+  --chart-2: #fbbc02; /* golden yellow */
+  --chart-3: #7ddaee; /* sky blue */
+  --chart-4: #cdfe0c; /* lime yellow */
+  --chart-5: #f97316; /* coral orange */
+
+  /* Sidebar */
+  --sidebar: oklch(0.2103 0.0059 285.8852);
+  --sidebar-foreground: oklch(0.9851 0 0);
+  --sidebar-primary: oklch(0.7019 0.1577 160.4375);
+  --sidebar-primary-foreground: oklch(0.3935 0.0957 152.2754);
+  --sidebar-accent: oklch(0.2739 0.0055 286.0326);
+  --sidebar-accent-foreground: oklch(0.9851 0 0);
+  --sidebar-border: oklch(1 0 0);
+  --sidebar-ring: oklch(0.5296 0.1495 148.9899);
+  --font-sans: Poppins, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --radius: 0.625rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl:
+    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
+
+/* 4. Layer Definitions: All custom styles go in layers. */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: "Poppins", sans-serif;
+    font-weight: 300;
+    letter-spacing: var(--tracking-normal);
+  }
+
+  .container {
+    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  [data-radix-navigation-menu-content] {
+    min-width: 600px !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    box-shadow:
+      0 10px 38px -10px rgba(22, 23, 24, 0.35),
+      0 10px 20px -15px rgba(22, 23, 24, 0.2) !important;
+  }
+
+  .submenu-item {
+    padding: 12px !important;
+    margin-bottom: 4px !important;
+    border-radius: 6px !important;
+    display: flex !important;
+    gap: 12px !important;
+  }
+
+  [data-radix-navigation-menu-content] > * {
+    width: 100% !important;
+  }
+}
+
+@layer components {
+  /* Active Nav Link Styles */
+  .active-nav-link {
+    position: relative;
+    color: var(--foreground) !important;
+    background-color: transparent !important;
+  }
+
+  .active-nav-link::after {
+    content: "";
+    position: absolute;
+    bottom: 0.25rem;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #22c55e;
+    border-radius: 9999px;
+  }
+
+  .active-nav-link[data-state="active"],
+  .active-nav-link[data-state="open"],
+  .active-nav-link:focus {
+    background-color: transparent !important;
+    color: var(--foreground) !important;
+  }
+
+  .active-nav-link:hover {
+    background-color: transparent !important;
+  }
+
+  .group.active-nav-link[data-state="closed"] > span.NavigationMenuTrigger,
+  .group.active-nav-link[data-state="open"] > span.NavigationMenuTrigger {
+    color: var(--foreground) !important;
+  }
+
+  /* Prose Styles */
+  .prose {
+    color: var(--foreground);
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+
+  .prose h1,
+  .prose h2,
+  .prose h3,
+  .prose h4,
+  .prose h5,
+  .prose h6 {
+    @apply font-medium;
+    color: var(--foreground);
+    margin-top: 2em;
+    margin-bottom: 0.75em;
+    line-height: 1.3;
+  }
+
+  .prose h1 {
+    font-size: 1.75rem;
+  }
+  .prose h2 {
+    font-size: 1.5rem;
+    margin-top: 1.75em;
+  }
+  .prose h3 {
+    font-size: 1.25rem;
+    margin-top: 1.5em;
+  }
+  .prose h4 {
+    font-size: 1.125rem;
+    margin-top: 1.25em;
+  }
+  .prose p {
+    margin-top: 1.25em;
+    margin-bottom: 1.5em;
+  }
+  .prose ol,
+  .prose ul {
+    margin-top: 1.25em;
+    margin-bottom: 1.5em;
+    padding-left: 1.5rem;
+  }
+
+  .prose ul {
+    list-style-type: disc;
+  }
+
+  .prose ol {
+    list-style-type: decimal;
+  }
+
+  .prose li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    list-style-position: outside;
+  }
+
+  .prose strong,
+  .prose b {
+    font-weight: 500;
+    color: var(--foreground);
+  }
+
+  .prose blockquote {
+    @apply italic;
+    border-left: 4px solid var(--border);
+    padding-left: 1rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    color: var(--muted-foreground);
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .prose table {
+    @apply w-full text-left border-collapse;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .prose thead th {
+    @apply font-semibold;
+    background-color: var(--muted);
+  }
+
+  .prose th,
+  .prose td {
+    border-bottom: 1px solid var(--border);
+    padding: 0.5rem 1rem;
+  }
+
+  .prose img {
+    @apply block mx-auto;
+    max-width: 100%;
+    height: auto;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .prose a {
+    color: var(--foreground) !important;
+    text-decoration: underline !important;
+    text-decoration-color: var(--primary) !important;
+    text-decoration-thickness: 2px !important;
+    text-underline-offset: 0.2em !important;
+    border-bottom: none !important; /* Remove any border-bottom that might create double underlines */
+  }
+
+  .prose a:hover {
+    text-decoration-color: oklch(0.6879 0.1791 139.5227) !important;
+  }
+
+  .prose pre {
+    background-color: oklch(0.1408 0.0044 285.8229);
+    color: oklch(0.9851 0 0);
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    overflow-x: auto;
+    font-size: 0.875rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    font-family: var(--font-mono);
+    border: 1px solid oklch(0.2103 0.0059 285.8852);
+  }
+
+  .prose pre code {
+    color: var(--primary);
+    background-color: transparent;
+    padding: 0;
+  }
+
+  .prose code {
+    color: var(--primary);
+    background-color: oklch(0.1408 0.0044 285.8229);
+    padding: 0.125rem 0.25rem;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+  }
+
+  .prose iframe {
+    width: 100%;
+    height: 16rem;
+    border-radius: var(--radius-lg);
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .prose iframe[src*="youtube"],
+  .prose iframe[src*="youtu.be"] {
+    height: 28rem;
+  }
+
+  /* Services How To Buy column dividers */
+  @media (min-width: 768px) {
+    .services-divider::before,
+    .services-divider::after {
+      content: "";
+      position: absolute;
+      top: 4.5rem; /* Start from headline level (after icon + margin) */
+      bottom: 0;
+      width: 1px;
+      background-color: var(--border);
+    }
+
+    .services-divider::before {
+      left: -1.5rem; /* Exactly half of md:gap-12 (3rem ÷ 2 = 1.5rem) */
+    }
+
+    .services-divider::after {
+      right: -1.5rem; /* Exactly half of md:gap-12 (3rem ÷ 2 = 1.5rem) */
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .services-divider::before {
+      left: -2rem; /* Exactly half of lg:gap-16 (4rem ÷ 2 = 2rem) */
+    }
+
+    .services-divider::after {
+      right: -2rem; /* Exactly half of lg:gap-16 (4rem ÷ 2 = 2rem) */
+    }
+  }
+}
+
+/* Print Styles for White Paper */
+@media print {
+  /* Hide non-essential elements */
+  .white-paper-toc-sidebar,
+  .white-paper-mobile-toc,
+  .white-paper-cta,
+  .white-paper-pdf-button,
+  header,
+  footer,
+  nav {
+    display: none !important;
+  }
+
+  /* Reset backgrounds for printing */
+  body,
+  .bg-background {
+    background: white !important;
+    color: black !important;
+  }
+
+  /* Ensure content is print-friendly */
+  .white-paper-content {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Page break management */
+  h1,
+  h2,
+  h3 {
+    break-after: avoid;
+    page-break-after: avoid;
+  }
+
+  img,
+  figure,
+  table {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Ensure links show their URLs */
+  .prose a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+    color: #666;
+  }
+
+  /* Hide external link indicators in print */
+  .prose a[href^="http"]::after {
+    content: none;
+  }
+
+  /* Set proper margins */
+  @page {
+    margin: 2cm;
+  }
+}
+
+/* Recharts styling - ensure Poppins font and correct colours */
+.recharts-text,
+.recharts-cartesian-axis-tick text,
+.recharts-label {
+  font-family: var(--font-sans) !important;
+  fill: var(--foreground) !important;
+}
+
+.recharts-legend-item-text {
+  font-family: var(--font-sans) !important;
+  fill: var(--foreground) !important;
+  color: var(--foreground) !important;
+}
+
+/* Dark mode chart tooltip cursor - use primary green tint */
+.dark .recharts-rectangle.recharts-tooltip-cursor {
+  fill: oklch(0.7879 0.1991 139.5227 / 0.1) !important;
+}