FlowFlowFlow.de CSS (update on Bullet.so)

/* Default Callout */
.notion-callout {
  background-color: #FCF1E1 !important;
  /* Beige */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
  padding: 16px 16px !important;
}

/* Callout icon + heading alignment (Bullet/Notion-style) */
.notion-callout .notion-callout__icon,
.notion-callout .notion-icon {
  margin-top: 2px !important;
  margin-right: 10px !important;
}

/* Bullet "page icons" */
.notion-page-icon,
.notion-page-icon-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: text-top !important;
}

/* Icon next to a heading: keep it on the same line as the heading */
.notion-page-icon-inline {
  margin-right: 10px !important;
  vertical-align: middle !important;
  transform: translateY(6px) !important;
}

/* When an inline icon is used with a heading, align both via flex */
.notion-callout .notion-callout__content h1,
.notion-callout .notion-callout__content h2,
.notion-callout .notion-callout__content h3,
.notion-callout .notion-callout__content h4 {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

/* Standalone page icon (not inline): avoid floating too high */
.notion-page-icon {
  margin-top: 2px !important;
}

.notion-callout .notion-callout__content {
  margin-left: 0 !important;
}

/* Keep the first heading aligned with the icon */
.notion-callout .notion-callout__content h1,
.notion-callout .notion-callout__content h2,
.notion-callout .notion-callout__content h3,
.notion-callout .notion-callout__content h4 {
  margin-top: 0 !important;
}

/* Gray Callout */
.notion-gray_background_co {
  background-color: #292524 !important;
  /* Off Black */
  color: #FFFFFF;
  /* Ensuring contrast */
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
}

/* Brown Callout */
.notion-brown_background_co {
  background-color: #ED9698 !important;
  /* Dusty Red */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

/* Orange Callout */
.notion-orange_background_co {
  background-color: #F7E26B !important;
  /* Mustard */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

/* Yellow Callout */
.notion-yellow_background_co {
  background-color: #F7E26B !important;
  /* Mustard */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

/* Green Callout */
.notion-teal_background_co {
  background-color: #6BEACD !important;
  /* Petrol */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

/* Blue Callout */
.notion-blue_background_co {
  background-color: #70AEE0 !important;
  /* Pastel Ocean */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

/* Purple Callout */
.notion-purple_background_co {
  background-color: #F2AFB5 !important;
  /* Old Rosé */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

/* Pink Callout */
.notion-pink_background_co {
  background-color: #F2AFB5 !important;
  /* Old Rosé */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

/* Red Callout */
.notion-red_background_co {
  background-color: #ED9698 !important;
  /* Dusty Red */
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}




/* Custom Half-Height Highlight Effect */
:root {
  --notion-yellow_background: linear-gradient(180deg, transparent 50%, #F7E26B 50%);
  --notion-blue_background: linear-gradient(180deg, transparent 50%, #70AEE0 50%);
  --notion-pink_background: linear-gradient(180deg, transparent 50%, #F2AFB5 50%);
  --notion-red_background: linear-gradient(180deg, transparent 50%, #ED9698 50%);
  --notion-green_background: linear-gradient(180deg, transparent 50%, #6BEACD 50%);
  --notion-gray_background: linear-gradient(180deg, transparent 50%, #292524 50%);
  --notion-brown_background: linear-gradient(180deg, transparent 50%, #FCF1E1 50%);
}

/* Apply the effect to the highlights */
.notion-yellow_background {
  background: var(--notion-yellow_background) !important;
}

.notion-blue_background {
  background: var(--notion-blue_background) !important;
}

.notion-pink_background {
  background: var(--notion-pink_background) !important;
}

.notion-red_background {
  background: var(--notion-red_background) !important;
}

.notion-green_background {
  background: var(--notion-green_background) !important;
}

.notion-gray_background {
  background: var(--notion-gray_background) !important;
}

.notion-brown_background {
  background: var(--notion-brown_background) !important;
}



/* Adjust the Headings and Notion elements */

/* Responsive Typography for H1 */
h2 {
  font-size: clamp (2rem, 5vw, 4rem) !important;
  /* Ensures scalability between screen sizes */
  line-height: 1.2;
  /* Reduces spacing */
  word-break: break-word;
  /* Prevents text overflow */
  text-align: left;
  /* Centers the text */
  padding: 10px;
  /* Adds some space inside */
}

/* Mobile Specific Adjustments */
@media (max-width: 768px) {
  h2 {
    font-size: 2.8rem !important;
    /* Smaller text for mobile */
    line-height: 1.2 !important;
    /* Reduce vertical space */
    padding: 0 10px !important;
    /* Adjust horizontal padding */
  }
}

h3 {
  font-size: 1.8rem !important;
  /* Adjust size to your preference */
  font-weight: 600;
  /* Slightly bolder for better readability */
}

h4 {
  font-family: 'Roboto Slab', serif !important;
  font-weight: 700 !important;
  /* Ensures it's bold */
}


.notion-quote {
  font-size: 1.1rem !important;
  /* Smaller text size */
  line-height: 1.2 !important;
  /* Reduced line spacing */
  font-family: 'Roboto Slab', serif !important;
  /* Apply Roboto Slab */
  font-style: italic !important;
  /* Make it cursive */
  font-weight: 400 !important;
  /* Force normal weight to override bold */
  margin-left: 0 !important;
  /* Remove any previous indentation */
}
}

/* Align the toggle border with the container */
.notion-toggle {
padding-left: 0px !important;
/* Removes excessive padding */
margin-left: 0px !important;
/* Aligns with container */
}

/* Reduce the summary text size */
summary {
font-size: 1.2rem !important;
/* Adjust as needed */
font-weight: 500 !important;
/* Slightly lighter than bold */
}

/* Larger NavBar Logo */
/* Increase the size of the navbar wrapper */
.navbar-item {
max-width: 180px !important;
/* Expand the wrapper */
height: auto !important;
display: flex !important;
align-items: center !important;
}

/* Increase the size of the navbar logo */
.navbar-brand-logo {
width: 160px !important;
/* Adjust size */
height: auto !important;
/* Maintain aspect ratio */
max-width: 100% !important;
/* Ensure it doesn't exceed the wrapper */
}



/* Restore 'notion-blank' elements on mobile but make them more compact */
.notion-blank {
display: block !important;
/* Ensure they show up */
height: 10px;
/* Reduce spacing */
margin: 5px 0;
/* Adjust vertical spacing */
}

/* Adjust spacing for larger screens */
@media (min-width: 768px) {
.notion-blank {
height: 20px;
/* Normal spacing for desktop */
margin: 10px 0;
}
}

/* Styling the Case Studies */

.tagLeft {
display: none !important;
}

.blog-tags {
display: none !important;
}

/* Lists: force left alignment (avoid centered bullets) */
ul, ol,
.notion-bulleted_list,
.notion-numbered_list,
.notion-list {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Lists: normalize weight (Bullet sometimes renders list text heavier) */
ul li, ol li,
.notion-bulleted_list li,
.notion-numbered_list li {
  font-weight: 400 !important;
}

/* If list markers/content are wrapped, keep them from inheriting bold */
.notion-bulleted_list *,
.notion-numbered_list * {
  font-weight: inherit !important;
}