{"path":"/obsidian-theme/css/main.css","source":"/* ═══════════════════════════════════════════════════════════\n   OBSIDIAN Theme — Main Stylesheet v1.0\n   A proper HubSpot CMS theme. No overrides. This IS the base.\n   ═══════════════════════════════════════════════════════════ */\n\n\n/* ── RESET — Clean slate ── */\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  -webkit-text-size-adjust: 100%;\n  font-variant-ligatures: none;\n  text-rendering: optimizeLegibility;\n}\n\nimg, picture, video, canvas, svg {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\ninput, button, textarea, select {\n  font: inherit;\n}\n\n\n/* ── BODY ── */\n\nbody {\n  background-color: #ffffff;\n  color: #0a0a0a;\n  font-family: Montserrat, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.7;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.body-wrapper {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.body-container-wrapper {\n  flex: 1;\n}\n\n\n/* ── LAYOUT — Sections edge-to-edge, content contained ── */\n\n.dnd-section {\n  width: 100%;\n  padding: clamp(48px, 6vw, 96px) clamp(1rem, 3vw, 3rem);\n}\n\n.dnd-section > .row-fluid {\n  max-width: 1400px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.content-wrapper {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding-left: clamp(1rem, 3vw, 3rem);\n  padding-right: clamp(1rem, 3vw, 3rem);\n}\n\n\n/* ── HUBSPOT GRID — Based on official CMS Boilerplate ── */\n/* Mobile-first: all columns stack. Desktop (768px+): side-by-side. */\n\n:root {\n  --column-gap: 2.13%;\n  --column-width-multiplier: 8.333;\n}\n\n.row-fluid {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.row-fluid [class*=\"span\"] {\n  min-height: 1px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n@media (min-width: 768px) {\n  .row-fluid {\n    flex-wrap: nowrap;\n    justify-content: space-between;\n  }\n\n  .row-fluid .span1  { width: calc(var(--column-width-multiplier) * 1% * 1  - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span2  { width: calc(var(--column-width-multiplier) * 1% * 2  - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span3  { width: calc(var(--column-width-multiplier) * 1% * 3  - var(--column-gap) * (9  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span4  { width: calc(var(--column-width-multiplier) * 1% * 4  - var(--column-gap) * (8  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span5  { width: calc(var(--column-width-multiplier) * 1% * 5  - var(--column-gap) * (7  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span6  { width: calc(var(--column-width-multiplier) * 1% * 6  - var(--column-gap) * (6  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span7  { width: calc(var(--column-width-multiplier) * 1% * 7  - var(--column-gap) * (5  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span8  { width: calc(var(--column-width-multiplier) * 1% * 8  - var(--column-gap) * (4  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span9  { width: calc(var(--column-width-multiplier) * 1% * 9  - var(--column-gap) * (3  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1  * var(--column-width-multiplier) / 100)); }\n  .row-fluid .span12 { width: 100%; }\n}\n\n/* Ensure DnD module wrappers fill their columns */\n.dnd-section .dnd-module,\n.dnd-section .hs_cos_wrapper {\n  width: 100%;\n}\n\n\n/* ── COLUMNS ── */\n\n.dnd-section .dnd-column {\n  padding-left: clamp(0.75rem, 1.5vw, 1.5rem);\n  padding-right: clamp(0.75rem, 1.5vw, 1.5rem);\n}\n\n/* Mobile stacking is handled by the grid above (.row-fluid flex-wrap + 100% spans) */\n\n\n/* ── TYPOGRAPHY ── */\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: Poppins, sans-serif;\n  color: #0a0a0a;\n  letter-spacing: -0.02em;\n  text-wrap: balance;\n}\n\nh1 { font-size: 64px; font-weight: 700; line-height: 1.15; }\nh2 { font-size: 48px; font-weight: 700; line-height: 1.15; }\nh3 { font-size: 32px; font-weight: 700; line-height: 1.15; }\nh4 { font-size: 24px; font-weight: 700; line-height: 1.2; }\nh5 { font-size: 20px; font-weight: 700; line-height: 1.2; }\nh6 { font-size: 16px; font-weight: 700; line-height: 1.2; }\n\np, li, td, th {\n  font-family: Montserrat, sans-serif;\n  color: #333333;\n  font-size: clamp(0.95rem, 1.2vw, 1.1rem);\n  line-height: 1.7;\n}\n\np + p {\n  margin-top: 1em;\n}\n\nstrong, b {\n  font-weight: 700;\n  color: #0a0a0a;\n}\n\n\n/* ── LINKS ── */\n\na {\n  color: #17a192;\n  text-decoration: none;\n  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\na:hover, a:focus {\n  color: #1ec4b2;\n}\n\n\n/* ── BUTTONS ── */\n\n.button,\n.hs-button,\n.cta_button,\nbutton[type=\"submit\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background-color: #76ff03;\n  border: 2px solid #76ff03;\n  border-radius: 8px;\n  color: #ffffff;\n  font-family: Poppins, sans-serif;\n  font-weight: 600;\n  font-size: 1rem;\n  padding: 14px 32px;\n  cursor: pointer;\n  text-decoration: none;\n  text-transform: none;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  line-height: 1.4;\n}\n\n.button:hover,\n.hs-button:hover,\n.cta_button:hover,\nbutton[type=\"submit\"]:hover {\n  background-color: #0a0a0a;\n  border-color: #76ff03;\n  color: #76ff03;\n  transform: translateY(-2px);\n}\n\n.button--secondary,\n.button.button--secondary {\n  background-color: transparent;\n  border: 2px solid #666666;\n  color: #0a0a0a;\n}\n\n.button--secondary:hover,\n.button.button--secondary:hover {\n  border-color: #76ff03;\n  color: #76ff03;\n  background-color: transparent;\n}\n\n.button--small  { font-size: 0.875rem; padding: 10px 20px; }\n.button--large  { font-size: 1.125rem; padding: 16px 40px; }\n\n\n/* ── FORMS ── */\n\nform {\n  background-color: #ffffff;\n  border: 1px solid #e8e8e8;\n  border-radius: 16px;\n  padding: 32px;\n}\n\nform label {\n  color: #0a0a0a;\n  font-weight: 600;\n  font-size: 0.9rem;\n}\n\nform input[type=\"text\"],\nform input[type=\"email\"],\nform input[type=\"tel\"],\nform input[type=\"number\"],\nform input[type=\"password\"],\nform input[type=\"url\"],\nform select,\nform textarea {\n  background-color: #f8f9fa;\n  border: 1px solid #d0d0d0;\n  border-radius: 6px;\n  color: #0a0a0a;\n  padding: 12px 16px;\n  width: 100%;\n  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nform input:focus,\nform select:focus,\nform textarea:focus {\n  border-color: #76ff03;\n  outline: none;\n  box-shadow: 0 0 0 3px #76ff0326;\n}\n\nform .submitted-message {\n  color: #76ff03;\n  font-weight: 600;\n}\n\nform button[type=\"submit\"],\nform input[type=\"submit\"] {\n  background-color: #76ff03;\n  color: #ffffff;\n  border: 2px solid #76ff03;\n  border-radius: 8px;\n}\n\nform button[type=\"submit\"]:hover,\nform input[type=\"submit\"]:hover {\n  background-color: #5ecb02;\n  border-color: #5ecb02;\n}\n\n\n/* ── LISTS ── */\n\nul, ol {\n  padding-left: 1.5em;\n}\n\nul li::marker {\n  color: #76ff03;\n}\n\n\n/* ── BLOCKQUOTE ── */\n\nblockquote {\n  border-left: 3px solid #76ff03;\n  padding: 16px 24px;\n  margin: 1.5em 0;\n  color: #333333;\n  font-style: italic;\n}\n\n\n/* ── TABLES ── */\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth {\n  text-align: left;\n  color: #0a0a0a;\n  font-weight: 700;\n  padding: 12px 16px;\n  border-bottom: 2px solid #d0d0d0;\n}\n\ntd {\n  padding: 12px 16px;\n  border-bottom: 1px solid #e8e8e8;\n}\n\n\n/* ── SCROLLBAR ── */\n\n::-webkit-scrollbar { width: 8px; }\n::-webkit-scrollbar-track { background: #ffffff; }\n::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 4px; }\n::-webkit-scrollbar-thumb:hover { background: #666666; }\n\n\n/* ── SELECTION ── */\n\n::selection {\n  background: #76ff03;\n  color: #0a0a0a;\n}\n\n\n/* ── UTILITY CLASSES ── */\n\n/* Section background variants */\n.obs-surface  { background-color: #f8f9fa; }\n.obs-card-bg  { background-color: #ffffff; }\n\n.obs-gradient {\n  background: linear-gradient(\n    135deg,\n    #ffffff 0%,\n    #76ff030D 50%,\n    #ffffff 100%\n  );\n}\n\n/* Full-bleed: section content goes edge-to-edge */\n.body-container-wrapper .obs-full-bleed > .row-fluid {\n  max-width: 100%;\n  padding-left: 0;\n  padding-right: 0;\n}\n\n/* Tight / flush section padding */\n.body-container-wrapper .dnd-section.obs-tight {\n  padding-top: clamp(24px, 3vw, 48px);\n  padding-bottom: clamp(24px, 3vw, 48px);\n}\n\n.body-container-wrapper .dnd-section.obs-flush {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n/* Text utilities */\n.obs-text-accent { color: #76ff03; }\n.obs-text-warm   { color: #f7931a; }\n.obs-text-muted  { color: #666666; }\n.obs-text-center { text-align: center; }\n\n/* Prose widths for readable text */\n.obs-prose      { max-width: 720px; }\n.obs-prose-wide { max-width: 960px; }\n.obs-mx-auto    { margin-left: auto; margin-right: auto; }\n\n/* Card styles — Rik's preference: left accent border, not boxy */\n.obs-card {\n  background: transparent;\n  border-left: 3px solid #76ff03;\n  padding: 24px 28px;\n  transition: border-color 0.25s, background 0.25s;\n}\n\n.obs-card:hover {\n  background: #76ff030A;\n  border-left-color: #f7931a;\n}\n\n.obs-card--boxed {\n  background: #ffffff;\n  border: 1px solid #e8e8e8;\n  border-left: 3px solid #76ff03;\n  border-radius: 8px;\n  padding: 28px;\n}\n\n/* ═══════════════════════════════════════════════════════════\n   MOTION & GLOW — Theme-wide movement system\n   Keeps the fluid, alive feel consistent across all pages.\n   ═══════════════════════════════════════════════════════════ */\n\n/* ── Entrance animation keyframes ─────────────────────────── */\n@keyframes obs-fadeSlideUp {\n  from { opacity: 0; transform: translateY(32px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes obs-fadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes obs-shimmer {\n  to { left: 130%; }\n}\n\n@keyframes obs-pulseGlow {\n  0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); }\n  50%      { box-shadow: 0 0 20px #76ff0315; }\n}\n\n/* ── Section entrance — staggered fade-slide on load ──────── */\n.dnd-section {\n  animation: obs-fadeSlideUp .7s cubic-bezier(.25,.46,.45,.94) both;\n}\n\n.dnd-section:nth-child(1) { animation-delay: 0s; }\n.dnd-section:nth-child(2) { animation-delay: .08s; }\n.dnd-section:nth-child(3) { animation-delay: .16s; }\n.dnd-section:nth-child(4) { animation-delay: .24s; }\n.dnd-section:nth-child(5) { animation-delay: .30s; }\n.dnd-section:nth-child(6) { animation-delay: .36s; }\n.dnd-section:nth-child(7) { animation-delay: .40s; }\n.dnd-section:nth-child(8) { animation-delay: .44s; }\n.dnd-section:nth-child(n+9) { animation-delay: .48s; }\n\n/* ── Button glow + shimmer ────────────────────────────────── */\n.button,\n.hs-button,\n.cta_button,\nbutton[type=\"submit\"] {\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 0 0 rgba(0,0,0,0);\n}\n\n.button:hover,\n.hs-button:hover,\n.cta_button:hover,\nbutton[type=\"submit\"]:hover {\n  box-shadow:\n    0 4px 20px rgba(0,0,0,.4),\n    0 0 30px #76ff0350,\n    0 0 60px #76ff0325;\n}\n\n.button::before,\n.hs-button::before,\n.cta_button::before,\nbutton[type=\"submit\"]::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 60%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);\n  pointer-events: none;\n}\n\n.button:hover::before,\n.hs-button:hover::before,\n.cta_button:hover::before,\nbutton[type=\"submit\"]:hover::before {\n  animation: obs-shimmer .65s ease-out;\n}\n\n/* ── Card hover — accent glow + lift ──────────────────────── */\n.obs-card {\n  transition: border-color .35s cubic-bezier(.25,.46,.45,.94),\n              background .35s ease,\n              box-shadow .35s cubic-bezier(.25,.46,.45,.94),\n              transform .35s cubic-bezier(.25,.46,.45,.94);\n}\n\n.obs-card:hover {\n  background: #76ff0312;\n  border-left-color: #f7931a;\n  transform: translateX(6px);\n  box-shadow: -6px 0 32px #76ff0330;\n}\n\n.obs-card--boxed {\n  transition: border-color .35s cubic-bezier(.25,.46,.45,.94),\n              background .35s ease,\n              box-shadow .35s cubic-bezier(.25,.46,.45,.94),\n              transform .35s cubic-bezier(.25,.46,.45,.94);\n}\n\n.obs-card--boxed:hover {\n  transform: translateY(-6px);\n  border-color: #76ff0360;\n  box-shadow:\n    0 16px 40px rgba(0,0,0,.5),\n    0 0 36px #76ff0330;\n}\n\n/* ── Image hover — zoom + brightness on any linked image ──── */\n.dnd-section a img,\n.dnd-section .obs-card img {\n  transition: transform .5s cubic-bezier(.25,.46,.45,.94),\n              filter .5s ease;\n}\n\n.dnd-section a:hover img,\n.dnd-section .obs-card:hover img {\n  transform: scale(1.04);\n  filter: brightness(1.06);\n}\n\n/* ── Link underline animation ─────────────────────────────── */\n.body-container-wrapper p a,\n.body-container-wrapper li a {\n  position: relative;\n  text-decoration: none;\n}\n\n.body-container-wrapper p a::after,\n.body-container-wrapper li a::after {\n  content: '';\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  width: 0;\n  height: 1px;\n  background: #1ec4b2;\n  transition: width .3s cubic-bezier(.25,.46,.45,.94);\n}\n\n.body-container-wrapper p a:hover::after,\n.body-container-wrapper li a:hover::after {\n  width: 100%;\n}\n\n/* ── Form focus glow — enhanced ───────────────────────────── */\nform input:focus,\nform select:focus,\nform textarea:focus {\n  box-shadow:\n    0 0 0 3px #76ff0326,\n    0 0 16px #76ff0310;\n}\n\n/* ── Heading accent underline on hover (in DnD sections) ──── */\n.dnd-section h2,\n.dnd-section h3 {\n  position: relative;\n  display: inline-block;\n}\n\n/* ── Blockquote — subtle accent glow ──────────────────────── */\nblockquote {\n  transition: border-color .3s ease, box-shadow .3s ease;\n}\n\nblockquote:hover {\n  border-left-color: #f7931a;\n  box-shadow: -4px 0 24px #76ff0330;\n}\n\n/* ── Reduce motion for accessibility ──────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* ── Footer: kill stray default menu rendering ── */\nbody .obs-footer__bottom .hs-menu-wrapper ul,\nbody footer .obs-footer__inner > .hs_cos_wrapper_type_menu {\n  display: none;\n}\n","id":"362922831086","createdAt":0,"updatedAt":1773325748397,"archivedAt":0,"readOnly":false,"folder":false,"children":[],"buffer":false,"cdnUrl":null,"warnings":[],"parentPath":"/obsidian-theme/css","name":"main.css"}