31:I[868422,["/_next/static/chunks/0orfmzo0_hup-.js","/_next/static/chunks/3cmvik1zogxvy.js","/_next/static/chunks/0op9flae642fi.js","/_next/static/chunks/3jtkuz33a278i.js","/_next/static/chunks/3cn85recchj3h.js","/_next/static/chunks/2matreab0rub0.js"],"SiteProvider"] :HL["/styles/static.css","style"] :HL["/styles/notion.css","style"] :HL["/styles/super.css","style"] :HL["https://assets-v2.super.so/global/fonts/Poppins/poppins-v20-latin-ext_latin-600.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] 11:["$","style",null,{"dangerouslySetInnerHTML":{"__html":"html{font-size:16px}"}}] 12:[["$","link","/styles/static.css",{"rel":"stylesheet","href":"/styles/static.css","precedence":"default"}],["$","link","/styles/notion.css",{"rel":"stylesheet","href":"/styles/notion.css","precedence":"default"}],["$","link","/styles/super.css",{"rel":"stylesheet","href":"/styles/super.css","precedence":"default"}]] 13:["$","link","font-preload-Poppins-600",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Poppins/poppins-v20-latin-ext_latin-600.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 14:["$","link","font-preload-Inter-regular",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 15:["$","script","1",{"src":"https://analytics.ahrefs.com/analytics.js","data-key":"k99nqL+Sr/3DQUPlE7Nj8w","async":true,"children":null}] 16:["$","script","5",{"src":"https://d7a97ajcmht8v.cloudfront.net/production/app.js","children":null}] 17:["$","script","9",{"src":"https://app.lemonsqueezy.com/js/lemon.js","defer":true,"children":null}] 18:["$","script","13",{"dangerouslySetInnerHTML":{"__html":"\n const tallyIframe = document.querySelector('iframe[src^=\"https://tally.so\"]');\n if (tallyIframe) {\n tallyIframe.src = `${tallyIframe.src}&page=${window.location.pathname}`;\n }\n"},"children":null}] 19:["$","script","15",{"async":true,"src":"https://tally.so/widgets/embed.js","dangerouslySetInnerHTML":{"__html":"\n"},"children":null}] 1a:["$","script","19",{"type":"module","dangerouslySetInnerHTML":{"__html":" import Fouita from 'https://cdn.fouita.com/assets/fouita/fouita-v1.js'; Fouita({key: \"FT-0xc61ed-0xc61ee\", spa: true, prefix: '/'}) "},"children":null}] 1b:["$","script","21",{"src":"https://cdn.fouita.com/widgets/0xe581a.js","children":null}] 1c:["$","script","23",{"src":"https://cdn.fouita.com/widgets/0xe584b.js","children":null}] 1d:["$","meta","25",{"name":"facebook-domain-verification","content":"fytvuts567j3p66yrw4sn6p0lnzd10","children":null}] 1e:["$","script","29",{"dangerouslySetInnerHTML":{"__html":"\n!function(f,b,e,v,n,t,s)\n{if(f.fbq)return;n=f.fbq=function(){n.callMethod?\nn.callMethod.apply(n,arguments):n.queue.push(arguments)};\nif(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\nn.queue=[];t=b.createElement(e);t.async=!0;\nt.src=v;s=b.getElementsByTagName(e)[0];\ns.parentNode.insertBefore(t,s)}(window, document,'script',\n'https://connect.facebook.net/en_US/fbevents.js');\nfbq('init', '348731970157899');\nfbq('track', 'PageView');\n"},"children":null}] 2c:["$","img",null,{"height":"1","width":"1","style":{"display":"none"},"src":"https://www.facebook.com/tr?id=348731970157899&ev=PageView&noscript=1","children":null}] 1f:["$","noscript","31",{"children":"$2c"}] 20:["$","script","35",{"async":true,"src":"https://cdn.splitbee.io/sb.js","children":null}] 21:["$","script","39",{"dangerouslySetInnerHTML":{"__html":"\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n\n gtag('config', 'G-M6EJG30KEB');\n"},"children":null}] 22:["$","script","41",{"async":true,"src":"https://www.googletagmanager.com/gtag/js?id=G-M6EJG30KEB","children":null}] 23:["$","script","45",{"type":"text/javascript","dangerouslySetInnerHTML":{"__html":"\n (function(c,l,a,r,i,t,y){\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n t=l.createElement(r);t.async=1;t.src=\"https://www.clarity.ms/tag/\"+i;\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n })(window, document, \"clarity\", \"script\", \"c3i4j1rr0g\");\n"},"children":null}] 24:["$","script","49",{"dangerouslySetInnerHTML":{"__html":"(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\nnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\nj=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n})(window,document,'script','dataLayer','GTM-P23MPB3');"},"children":null}] 25:["$","meta","53",{"name":"p:domain_verify","content":"70b8e6dcc35608d81f1c2f84f769560b","children":null}] 2d:T52a, let isObserving = false const config = { subtree: true, characterData: true }; const callback = function (mutationsList, observer) { for (const mutation of mutationsList) { if (mutation.type === 'characterData') { onPageLoad() } } }; const observer = new MutationObserver(callback); const setActiveTab = (options, currentTabContent) => { const active = Array.from(options).find(el => el.textContent === currentTabContent); active.classList.add('active-filter') options.forEach((option) => { option.addEventListener('click', () => { const activeFilter = document.querySelector('.active-filter') if (activeFilter) { activeFilter.classList.remove('active-filter') } option.classList.add('active-filter') }) }) } function onPageLoad() { const options = document.querySelectorAll('.notion-dropdown__option') const currentTab = document.querySelector('.notion-dropdown__button-title') if (options && currentTab) { setActiveTab(options, currentTab.textContent) } if (!isObserving) { const header = document.querySelector('.notion-header'); observer.observe(header, config); isObserving = true } } document.addEventListener("DOMContentLoaded", onPageLoad); 26:["$","script","57",{"dangerouslySetInnerHTML":{"__html":"$2d"},"children":null}] 27:["$","script","61",{"dangerouslySetInnerHTML":{"__html":"\n function consultBadge() {\n \nlet badge = document.querySelector(\"img.badge\")\n\nif(!badge) {\n \n \nlet badgeDiv = document.createElement('img');\nbadgeDiv.classList.add(\"badge\")\nbadgeDiv.src=\"https://notionflows.b-cdn.net/super/certified-consultant.png\"\nbadgeDiv.alt=\"Cerfied Notion Consultant badge\"\n\n\n\nlet currentFooter = document.querySelector(\".super-footer__content\")\n\ncurrentFooter.appendChild(badgeDiv)\n\n}\n}\n"},"children":null}] 2e:T713, function addArrows() { console.log("started arrows") let testimonialsContainer = document.querySelector('#block-9968846575c54e5f9a84a42a4791abee .notion-collection-gallery') let testimonials = document.querySelectorAll("#block-9968846575c54e5f9a84a42a4791abee .notion-collection-card") let currentIndex = 0; let totalTestimonials = testimonials.length; // Arrows let leftArrowDiv = document.createElement('div'); let rightArrowDiv = document.createElement('div'); // Addclass to Arrows rightArrowDiv.classList.add("right-arrow", "arrow") leftArrowDiv.classList.add("left-arrow", "arrow") testimonialsContainer.appendChild(rightArrowDiv) testimonialsContainer.appendChild(leftArrowDiv) let nextButton = document.querySelector(".right-arrow") let prevButton = document.querySelector(".left-arrow") // Prevent readding arrows // Event listeners for buttons nextButton.addEventListener("click", () => { console.log("clicked right: " + currentIndex) scrollToTestimonial(currentIndex + 1); }); prevButton.addEventListener("click", () => { console.log("clicked left: " + currentIndex) scrollToTestimonial(currentIndex - 1); }); testimonialsContainer.addEventListener("scroll", () => { let slideWidth = testimonials[0].clientWidth; let index = Math.round(testimonialsContainer.scrollLeft / slideWidth); currentIndex = index; }); // Scroll to testimonial let scrollToTestimonial = (index) => { if (index < 0) { index = totalTestimonials - 1; // Loop to last slide } else if (index >= totalTestimonials) { index = 0; // Loop to first slide } let slideWidth = testimonials[index].clientWidth; testimonialsContainer.scrollTo({ left: slideWidth * index, behavior: "smooth", }); currentIndex = index; }; } console.log("ended arrows func") 28:["$","script","65",{"dangerouslySetInnerHTML":{"__html":"$2e"},"children":null}] 2f:T511, const runFunctions = () => { // console.log("Running functions to set up navigation."); consultBadge() addArrows() // console.log("RunFunctions completed."); }; const initializeRouteChangeHandler = () => { if (window.events && window.events.on) { window.events.on('routeChangeComplete', runFunctions); } else { // console.warn('Event system not available: window.events.on is undefined.'); window.addEventListener('popstate', runFunctions); // Fallback for route changes } }; const initialSetup = () => { // console.log("Initial setup started."); runFunctions(); // Handle initial load initializeRouteChangeHandler(); // Set up route change handling // console.log("Initial setup completed."); }; if (document.readyState === 'complete' || document.readyState === 'interactive') { // console.log("Document is ready or interactive. Running initial setup."); setTimeout(initialSetup, 50); // Delay initial setup to ensure readiness } else { // console.log("Waiting for document to be fully loaded."); document.addEventListener('DOMContentLoaded', initialSetup); // Perform setup after DOM is fully loaded } 29:["$","script","69",{"dangerouslySetInnerHTML":{"__html":"$2f"},"children":null}] 30:Taef, /* Custom HTML components (moved from the CSS slot): tabs + word slider */ .tabs{display:flex;flex-direction:column;justify-content:space-between;max-width:1200px;margin:3rem auto 0;padding:0 20px} .tabs ul{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:0;padding:0;list-style:none} .tabs ul li{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px 18px;border-radius:12px;font-size:.8rem;font-weight:600;opacity:.85} .tabs ul li:hover,.tabs ul li.active{cursor:pointer;background-color:var(--cream-200);border-radius:4px} .tabs ul li img{max-width:20px;opacity:.85} .tabs ul li p{margin:0} .content-wrapper img{width:100%} #content{display:none} #content.active{display:block} #content div{display:flex;flex-direction:column;align-items:center} #content div h3,#content div p{max-width:800px;text-align:center} #content div h3{margin-bottom:.5rem;font-size:2rem;font-weight:500} #content div p{padding-bottom:1.5rem;font-size:1rem!important;font-weight:600} .word-slider-inner{display:flex;padding:12px;transition:transform .5s ease-in-out} .word-slider span{padding:.5rem} .word-slider a{position:relative;color:#333;font-size:1.2em;line-height:2rem;text-decoration:none;border-radius:8px;transition:background-color .3s ease-in-out} .word-slider a span{transition:background-color .2s ease-in-out} .word-slider a span.linkText:hover{background-color:var(--color-ui-hover-bg)} span.tooltiptext{position:absolute;bottom:100%;left:50%;z-index:1000;min-width:250px;max-width:500px;padding:8px 12px;color:#fff;font-size:.9em;background:#333;border-radius:4px;visibility:hidden;opacity:0;transform:translateX(-50%);transition:opacity .3s,visibility .3s} .word-slider a:hover span.tooltiptext{visibility:visible;opacity:1} @media (max-width:767px){ .word-slider a.tooltipText{display:none} .word-slider{position:relative;display:block;max-width:90%;height:120px;margin:20px auto} .word-slider-inner{padding:0} .word-slider a{min-width:100%;margin:0;box-sizing:border-box;text-align:left} .slider-nav-btn,.slider-dots{display:block;margin-top:2px} .slider-nav-btn{position:absolute;top:50%;z-index:10;display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#000;font-size:1.5em;line-height:1;background-color:unset;border:none;border-radius:50%;cursor:pointer;transform:translateY(-50%)} .slider-nav-btn.prev{left:0} .slider-nav-btn.next{right:0} .slider-dots{text-align:left} .dot{display:inline-block;width:10px;height:10px;margin:0 5px;background-color:#bbb;border-radius:50%;cursor:pointer;transition:background-color .3s ease} .dot.active{background-color:#717171} } @media (max-width:600px){.tabs,#content div h3,#content div p{text-align:left!important}.tabs ul{justify-content:flex-start}#content div{align-items:flex-start}} 2a:["$","style","71",{"id":"nf-components","dangerouslySetInnerHTML":{"__html":"$30"},"children":null}] 32:T2a37, 33:T617, 34:T120e2,@charset "UTF-8"; /* ===================================================================== NotionFlows — site stylesheet --------------------------------------------------------------------- KEY (Notion gesture → style) Button block = primary button. Callouts: brown = white box · gray (top) = yellow band (last block sticks to footer) · orange = grid CTA · green = testimonial card · blue = slider · red (top) = logo marquee · purple = soft panel · pink = centring wrapper · yellow = numbered timeline · default holding default = invisible wrapper (columns of default callouts = stat strip, of gray = notes table, next to an image = info panel). Quotes: brown = button row · green = pull quote · orange = lead. Text: purple = eyebrow · blue = large · red at line start = info row · gray highlight = muted link · underline in heading = outlined word · red-bg text block = spacer. Toggles: yellow = FAQ · gray = hidden. Sections: /blog-post, /notion-product-update, /case-study. ===================================================================== */ /* ===================================================================== 1. TOKENS ===================================================================== */ :root { /* Brand */ --primary: #fcf09d; --primary-light: #FFF8C4; --primary-dark: #D69E12; --secondary: #A1E6FC; --secondary-mid: #1DADE1; --secondary-dark: #047EAA; --accent: #FF7E78; --text: #000; --link: #D69E12; /* brand gold */ --glow: #f0bd66; --muted: #6b645a; /* secondary text in stat grids */ --line-soft: rgba(0, 0, 0, .14); /* Creams (one scale instead of nine one-off hex values) */ --cream-50: #FFFDF3; /* page background, toggle background */ --cream-100: #FEFCEB; /* code blocks */ --cream-200: #fefae2; /* soft panels, tabs, highlights */ --cream-300: #FEF9D9; /* hover */ /* Fonts */ --font-regular: "avant-normal", "Poppins", system-ui, sans-serif; --font-medium: "avant-medium", "Poppins", system-ui, sans-serif; --font-bold: "avant-bold", "Poppins", system-ui, sans-serif; --font-display: "recoleta-black", Georgia, serif; /* Type scale */ --h1: 2.8em; --h2: 2.2em; --h3: 1.6em; --h4: 1.4em; --body: 1.2em; --caption: 0.8em; --blog-quote: 1.5em; --h1-mobile: 2.6em; /* Borders, shadows, motion */ --radius: 0px; --border-yellow: 2px solid var(--primary); --border-black: 2px solid #000; --btn-padding: 16px 24px; --shadow-glow: 0 10px 20px -10px var(--glow); --shadow-glow-lg: 0 15px 20px -15px var(--glow); --shadow-offset: 20px 20px 0 var(--primary); --ease-in: all .2s ease-in-out; --ease-out: all .4s ease-in-out; /* Sliders: keep the counts equal to the number of items in the callout */ --logo-duration: 40s; --logo-count: 12; --testi-duration: 25s; --testi-count: 4; /* Notion colours (override Super's defaults, so these keep !important) */ --color-bg-gray: rgb(235, 236, 237) !important; --color-bg-brown: #C8B7A6 !important; --color-bg-orange: #FFB482 !important; --color-bg-yellow: #FFF8C4 !important; --color-bg-green: #A3DAD2 !important; --color-bg-blue: #A1E6FC !important; --color-bg-purple: #A8B4EB !important; --color-bg-pink: #FFC1E3 !important; --color-bg-red: #FFA8A8 !important; --color-text-gray: rgb(155, 154, 151) !important; --color-text-brown: #6A3E12 !important; --color-text-orange: #C35105 !important; --color-text-yellow: #D69E12 !important; --color-text-green: #058D79 !important; --color-text-blue: #278FB1 !important; --color-text-purple: #3E55BA !important; --color-text-pink: #D7383A !important; --color-text-red: #AB1215 !important; --color-pill-default: rgba(206, 205, 202, 0.5) !important; --color-pill-gray: var(--color-bg-gray) !important; --color-pill-brown: var(--color-bg-brown) !important; --color-pill-orange: var(--color-bg-orange) !important; --color-pill-yellow: var(--color-bg-yellow) !important; --color-pill-green: var(--color-bg-green) !important; --color-pill-blue: var(--color-bg-blue) !important; --color-pill-purple: var(--color-bg-purple) !important; --color-pill-pink: var(--color-bg-pink) !important; --color-pill-red: var(--color-bg-red) !important; /* Database view picker */ --picker-active-bg-color: rgb(233, 233, 233) !important; --picker-active-text-color: rgb(70, 70, 70) !important; --picker-border-color: rgb(233, 233, 233) !important; --picker-text-color: rgb(70, 70, 70) !important; --picker-border-radius: 8px !important; --picker-hover-bg-color: rgb(233, 233, 233) !important; --picker-hover-text-color: rgb(70, 70, 70) !important; --picker-hover-border-color: rgb(233, 233, 233) !important; } /* ===================================================================== 2. FONTS (.otf files; converting them to .woff2 would make pages load faster) ===================================================================== */ @font-face { font-family: "avant-normal"; src: url(https://res.cloudinary.com/dep1i65jt/raw/upload/v1715343951/NotionFlows/ITCAvantGardeW1G-Bk_ko298s.otf); font-display: swap; } @font-face { font-family: "avant-book"; src: url(https://res.cloudinary.com/dep1i65jt/raw/upload/v1715343935/NotionFlows/AvantGardeCE-Book_z9ezus.otf); font-display: swap; } @font-face { font-family: "avant-medium"; src: url(https://res.cloudinary.com/dep1i65jt/raw/upload/v1715343941/NotionFlows/AvantGarde-Medium_ncep34.otf); font-display: swap; } @font-face { font-family: "avant-demi"; src: url(https://res.cloudinary.com/dep1i65jt/raw/upload/v1715343920/NotionFlows/AvantGarde-Demi_frfomw.otf); font-display: swap; } @font-face { font-family: "avant-bold"; src: url(https://res.cloudinary.com/dep1i65jt/raw/upload/v1715343914/NotionFlows/AvantGarde-Bold_mg1uka.otf); font-display: swap; } @font-face { font-family: "recoleta-black"; src: url(https://res.cloudinary.com/dep1i65jt/raw/upload/v1767202352/NotionFlows/font%20recoleta/Recoleta-Black_aq9kam.woff2) format("woff2"); font-display: swap; } /* ===================================================================== 3. BASE ===================================================================== */ body { background: var(--cream-50); cursor: url(https://res.cloudinary.com/dep1i65jt/image/upload/v1735066650/NotionFlows/arrow-click_nb0nxl.png), auto !important; } ::selection { color: #000 !important; background: var(--primary-light) !important; } /* Scrollbar: thin, yellow thumb (was invisible white-on-white) */ * { scrollbar-width: thin; scrollbar-color: var(--primary) transparent; } *::-webkit-scrollbar { width: 12px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--primary) !important; border-radius: 20px; border: 3px solid transparent; background-clip: content-box; } .super-content.max-width { max-width: 1200px; margin: auto; } iframe { background: transparent !important; } /* Page title is hidden site-wide; section layouts below turn it back on */ .notion-header.page { display: none !important; } .notion-header__cover.no-cover { height: 240px !important; } /* Hidden by design */ .notion-toggle.bg-gray, .notion-caption.notion-semantic-string, .notion-caption .highlighted-color.color-yellow, .notion-collection__header, .notion-collection-board__column-header, #block-root-divider { display: none !important; } /* ===================================================================== 4. TYPOGRAPHY ===================================================================== */ h1.notion-heading { font-size: var(--h1) !important; font-family: var(--font-bold) !important; white-space: pre-wrap; word-break: break-word; } h2.notion-heading { font-size: var(--h2); font-family: var(--font-bold) !important; letter-spacing: -1px !important; line-height: 1.3 !important; } h3.notion-heading { font-size: var(--h3); font-family: var(--font-bold) !important; line-height: 1.3 !important; } h4.notion-heading { font-size: var(--h4); font-family: var(--font-medium) !important; } .notion-heading strong { font-family: var(--font-bold) !important; } /* Links inside headings */ :is(h1, h2, h3, h4).notion-heading a { opacity: 1 !important; border-bottom: var(--border-yellow) !important; } :is(h1, h2, h3, h4).notion-heading a:hover { color: var(--primary) !important; } /* Underline inside a heading = outlined word with yellow shadow */ :is(h1, h2, h3, h4).notion-heading u { text-decoration: none; -webkit-text-stroke: 1px #000; -webkit-text-fill-color: #fff; text-shadow: -3px 5px var(--primary); } :is(h1, h2).notion-heading u { font-family: var(--font-display); } h3.notion-heading u { font-family: var(--font-bold) !important; -webkit-text-stroke-width: 0.8px; } h4.notion-heading u { font-family: var(--font-medium) !important; -webkit-text-stroke-width: 0.8px; } /* Body text */ p { font-size: var(--body) !important; font-family: var(--font-regular) !important; line-height: 1.6 !important; } strong { font-family: var(--font-medium) !important; } .notion-list-item.notion-semantic-string { font-size: var(--body) !important; } p a { color: var(--link) !important; font-family: var(--font-medium) !important; text-decoration: underline 1px !important; text-decoration-color: rgba(0, 0, 0, 0.35) !important; text-underline-offset: 4px; border-bottom: 0 !important; opacity: 1 !important; } /* Text rhythm (top-level blocks only; callouts keep their own spacing): a clear gap between paragraphs, more air above headings than below. */ .notion-root > p.notion-text { margin: 0 0 0.8em !important; } .notion-root > :is(.notion-bulleted-list, .notion-numbered-list, .notion-to-do) { margin-bottom: 0.3em; } .notion-root > .notion-heading { margin: 1.6em 0 0.45em !important; } /* Blog posts read like an article: roomier lines and paragraphs. Empty lines typed in Notion are dropped so the spacing stays even. */ .parent-page__blog-post .notion-root > p.notion-text { margin-bottom: 1.15em !important; line-height: 1.75 !important; } .parent-page__blog-post .notion-root > p.notion-text:empty { display: none; } .parent-page__blog-post .notion-root > .notion-heading { margin: 2.2em 0 0.6em !important; } .parent-page__blog-post .notion-root > :is(.notion-quote, .notion-image, .notion-callout) { margin-block: 1.6em !important; } /* ===================================================================== 5. BUTTONS — Notion button block = primary button ===================================================================== */ .notion-root a.notion-button__content { display: inline-flex; align-items: center; gap: 0.5em; width: fit-content; padding: var(--btn-padding) !important; background: var(--primary) !important; color: var(--text) !important; border: 2px solid transparent !important; /* no jump on hover */ border-radius: var(--radius) !important; box-shadow: var(--shadow-glow); font-family: var(--font-medium); font-weight: 600; text-decoration: none !important; opacity: 1 !important; transition: var(--ease-out); } .notion-root a.notion-button__content:hover { background: #fff !important; border-color: #000 !important; transform: scale(1.05); transition: var(--ease-in); } /* ===================================================================== 6. CALLOUTS ===================================================================== */ /* Brown: plain white container, no border */ .notion-callout.bg-brown-light { background: #fff !important; border: none; } .notion-callout__content { overflow: visible !important; } /* --- Full-width bands: gray, red (top level only) ------------------ */ .notion-root > :is(.notion-callout.bg-gray-light, .notion-callout.bg-red-light) { position: relative; width: 100vw !important; max-width: 100vw !important; margin: 0 calc(50% - 50vw) !important; border: 0 !important; border-radius: 0 !important; } /* Gray: yellow band, icon hidden, content back on the grid */ .notion-root > .notion-callout.bg-gray-light { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding: 50px 0 !important; background: var(--primary) !important; } .notion-root > .notion-callout.bg-gray-light > .notion-callout__icon { display: none !important; } .notion-root > .notion-callout.bg-gray-light > .notion-callout__content { max-width: var(--layout-max-width) !important; margin: 0 auto !important; margin-inline-start: auto !important; padding-left: var(--padding-left) !important; padding-right: var(--padding-right) !important; } /* Gray band as the LAST block on a page sticks to the footer (blank lines after it are ignored and hidden). */ .notion-root > .notion-callout.bg-gray-light:nth-last-child(1 of :not(p.notion-text:empty)) { margin-bottom: 0 !important; } .notion-root > .notion-callout.bg-gray-light:nth-last-child(1 of :not(p.notion-text:empty)) ~ p.notion-text:empty { display: none !important; } body:has(.notion-root > .notion-callout.bg-gray-light:nth-last-child(1 of :not(p.notion-text:empty))) :is(.super-content, .notion-root) { padding-bottom: 0 !important; margin-bottom: 0 !important; } body:has(.notion-root > .notion-callout.bg-gray-light:nth-last-child(1 of :not(p.notion-text:empty))) .super-footer { margin-top: 0 !important; } .notion-callout.bg-gray-light .highlighted-background.bg-yellow { background: var(--cream-200) !important; } /* Orange: CTA box with grid paper */ .notion-callout.bg-orange-light { background-color: #fff; background-image: linear-gradient(var(--primary-light) 1px, transparent 1px), linear-gradient(to right, var(--primary-light) 1px, #fff 1px); background-size: 20px 20px; border: var(--border-yellow) !important; overflow: visible !important; } /* Green: testimonial card */ .notion-callout.bg-green-light { background: #fff; border: 3px solid #000 !important; box-shadow: var(--shadow-offset); text-align: center; padding-bottom: 70px; } /* Purple: soft yellow panel */ .notion-callout.bg-purple-light { background: var(--cream-200); border: transparent; } /* Pink: invisible centring wrapper */ .notion-callout.bg-pink-light { background: transparent !important; border: 0; padding: 0; text-align: center; overflow: visible !important; } /* --- Blue: testimonial slider (default callouts inside) ------------ */ .notion-callout.bg-blue-light { background-color: unset; border: unset; } .notion-callout.bg-blue-light > .notion-callout__content { position: relative; flex-direction: row; gap: 1rem; width: 100%; height: 350px; margin-inline: auto; overflow: hidden; } .notion-callout.bg-blue-light > .notion-callout__content .notion-callout.color-default { position: absolute; left: max(350px * var(--testi-count), 100%); width: 100%; max-width: 500px; border: unset; animation: scrollLeftTesti var(--testi-duration) linear infinite; } .notion-callout.bg-blue-light > .notion-callout__content:hover .notion-callout.color-default { animation-play-state: paused; } /* One delay per slide: item n starts (count - (n-1)) / count of the way through */ .notion-callout.bg-blue-light > .notion-callout__content .notion-callout.color-default:nth-child(2) { animation-delay: calc(var(--testi-duration) / var(--testi-count) * (var(--testi-count) - 1) * -1); } .notion-callout.bg-blue-light > .notion-callout__content .notion-callout.color-default:nth-child(3) { animation-delay: calc(var(--testi-duration) / var(--testi-count) * (var(--testi-count) - 2) * -1); } .notion-callout.bg-blue-light > .notion-callout__content .notion-callout.color-default:nth-child(4) { animation-delay: calc(var(--testi-duration) / var(--testi-count) * (var(--testi-count) - 3) * -1); } .notion-callout.bg-blue-light > .notion-callout__content .notion-callout.color-default:nth-child(5) { animation-delay: calc(var(--testi-duration) / var(--testi-count) * (var(--testi-count) - 4) * -1); } .notion-callout.bg-blue-light > .notion-callout__content .notion-callout.color-default:nth-child(6) { animation-delay: calc(var(--testi-duration) / var(--testi-count) * (var(--testi-count) - 5) * -1); } @keyframes scrollLeftTesti { to { left: -600px; } } /* --- Red: logo marquee (images inside) ------------------------------ */ .notion-root > .notion-callout.bg-red-light { background: var(--cream-50) !important; } .notion-callout.bg-red-light > .notion-callout__content { position: relative; width: 100%; height: 50px; margin-inline: auto; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); } .notion-callout.bg-red-light > .notion-callout__content .notion-semantic-string:first-of-type { display: none !important; } .notion-callout.bg-red-light > .notion-callout__content .notion-image { position: absolute; left: max(200px * var(--logo-count), 100%); width: 160px; opacity: 0.7; animation: scrollLeft var(--logo-duration) linear infinite; } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(2) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 1) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(3) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 2) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(4) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 3) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(5) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 4) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(6) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 5) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(7) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 6) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(8) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 7) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(9) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 8) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(10) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 9) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(11) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 10) * -1); } .notion-callout.bg-red-light > .notion-callout__content .notion-image:nth-child(12) { animation-delay: calc(var(--logo-duration) / var(--logo-count) * (var(--logo-count) - 11) * -1); } @keyframes scrollLeft { to { left: -200px; } } /* --- Nested default callouts ---------------------------------------- */ /* Wrapper: a default callout holding a default callout (directly or in */ /* columns) is invisible. Inside it: */ /* columns of only default callouts = stat strip */ /* columns of gray callouts = notes table */ /* default callout next to an image = info panel */ /* (CSS nesting: "&" stands for the selector above it.) */ .notion-callout:not([class*=-light]):not(.bg-yellow-light *):has(> .notion-callout__content > .notion-callout:not([class*=-light]), > .notion-callout__content > .notion-column-list > .notion-column > .notion-callout:not([class*=-light]), > .notion-callout__content > .notion-column-list > .notion-column > .notion-callout.bg-gray-light) { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } .notion-callout:not([class*=-light]):not(.bg-yellow-light *):has(> .notion-callout__content > .notion-callout:not([class*=-light]), > .notion-callout__content > .notion-column-list > .notion-column > .notion-callout:not([class*=-light]), > .notion-callout__content > .notion-column-list > .notion-column > .notion-callout.bg-gray-light) > .notion-callout__icon { display: none; } .notion-callout:not([class*=-light]):not(.bg-yellow-light *):has(> .notion-callout__content > .notion-callout:not([class*=-light]), > .notion-callout__content > .notion-column-list > .notion-column > .notion-callout:not([class*=-light]), > .notion-callout__content > .notion-column-list > .notion-column > .notion-callout.bg-gray-light) > .notion-callout__content { width: 100%; margin: 0 !important; padding: 0; } /* Stat strip: one frame, cells touching; first line = big number */ .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) { gap: 0 !important; margin-top: 24px; border: var(--border-black); } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column { display: flex; flex: 1 1 0 !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column:nth-child(n+2 of .notion-column) { border-left: var(--border-black); } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column > .notion-callout { flex: 1; margin: 0 !important; padding: 22px 24px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) .notion-callout__icon { display: none; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) .notion-callout__content { margin: 0 !important; padding: 0; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) p.notion-text { margin: 0; color: var(--muted); line-height: 1.5 !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) .notion-callout__content > :is(span.notion-semantic-string:not(:empty), span.notion-semantic-string:empty + p.notion-text) { display: block; margin: 0 0 6px; color: var(--text); font-family: var(--font-bold) !important; font-size: var(--h3) !important; line-height: 1.1 !important; } @media (max-width: 767px) { .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) { /* tablet: 2 × 2 */ flex-direction: row !important; flex-wrap: wrap !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column { flex: 1 1 50% !important; border-left: 0 !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column:nth-child(even of .notion-column) { border-left: var(--border-black) !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column:nth-child(n+3 of .notion-column) { border-top: var(--border-black); } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column > .notion-callout { padding: 16px !important; } } @media (max-width: 600px) { .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) { /* phone: one per row */ flex-direction: column !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column { flex: 1 1 auto !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column:nth-child(n of .notion-column) { border-left: 0 !important; } .notion-callout:not([class*=-light]) .notion-column-list:not(:has(> .notion-column > :not(.notion-callout:not([class*=-light])))) > .notion-column:nth-child(n+2 of .notion-column) { border-top: var(--border-black); } } /* Notes table: one frame, black header bar (first line), cream body */ .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) { gap: 0 !important; align-items: stretch; margin-top: 24px; background: var(--cream-100); border: var(--border-black); } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) > .notion-column { display: flex; flex: 1 1 0 !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) > .notion-column:nth-child(n+2 of .notion-column) { border-left: var(--border-black); } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) > .notion-column > .notion-callout { flex: 1; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) .notion-callout__icon { display: none; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) .notion-callout__content { width: 100%; margin: 0 !important; padding: 0; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) p.notion-text { margin: 0; padding: 16px 22px 4px; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) .notion-callout__content > :is(span.notion-semantic-string:not(:empty), span.notion-semantic-string:empty + p.notion-text) { display: block; margin: 0 0 4px; padding: 12px 22px; color: #fff !important; font-family: var(--font-bold) !important; background: #000; } @media (max-width: 767px) { .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) { flex-direction: column !important; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > .notion-callout.bg-gray-light) > .notion-column:nth-child(n+2 of .notion-column) { border-left: 0; border-top: var(--border-black); } } /* Info panel: no box, black rule on top, first line = small heading */ .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > :not(.notion-callout)) > .notion-column > .notion-callout:not([class*=-light]):not(.bg-yellow-light *) { padding: 0 !important; background: transparent !important; border: 0 !important; border-top: var(--border-black) !important; border-radius: 0 !important; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > :not(.notion-callout)) > .notion-column > .notion-callout:not([class*=-light]):not(.bg-yellow-light *) > .notion-callout__icon { display: none; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > :not(.notion-callout)) > .notion-column > .notion-callout:not([class*=-light]):not(.bg-yellow-light *) > .notion-callout__content { width: 100%; margin: 0 !important; padding: 0; } .notion-callout:not([class*=-light]) .notion-column-list:has(> .notion-column > :not(.notion-callout)) > .notion-column > .notion-callout:not([class*=-light]):not(.bg-yellow-light *) > .notion-callout__content > :is(span.notion-semantic-string:not(:empty), span.notion-semantic-string:empty + p.notion-text) { display: block; margin: 14px 0 6px; font-family: var(--font-bold) !important; font-size: var(--h3) !important; line-height: 1.2 !important; } /* images inside a wrapper get a black frame */ .notion-callout:not([class*=-light]):not(.bg-yellow-light *) .notion-column > .notion-image img { border: var(--border-black); } /* --- Yellow callout: numbered timeline ----------------------------- */ .notion-callout.bg-yellow-light, .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout { overflow: visible !important; } .notion-callout.bg-yellow-light { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } .notion-callout.bg-yellow-light > .notion-callout__icon { display: none; } .notion-callout.bg-yellow-light > .notion-callout__content { counter-reset: step; width: 100%; margin: 0 !important; padding: 0; } /* each callout inside = one step */ .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout { counter-increment: step; position: relative; margin: 0 0 0 22px !important; padding: 4px 0 40px 52px !important; background: transparent !important; border: 0 !important; border-left: var(--border-black) !important; border-radius: 0 !important; box-shadow: none; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout:nth-last-child(1 of .notion-callout) { padding-bottom: 8px !important; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout > .notion-callout__icon { display: none; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout > .notion-callout__content { width: 100%; margin: 0 !important; padding: 0; } /* the number */ .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout::before { content: counter(step); position: absolute; top: 0; left: -23px; width: 44px; height: 44px; box-sizing: border-box; line-height: 40px; text-align: center; color: #000; font-family: var(--font-bold); font-size: 22px; background: var(--primary); border: var(--border-black); } /* step title = first line */ .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout > .notion-callout__content > :is(span.notion-semantic-string:not(:empty), span.notion-semantic-string:empty + p.notion-text) { display: block; margin: 2px 0 14px; font-family: var(--font-bold) !important; font-size: var(--h3) !important; line-height: 1.3 !important; } /* step with an image: text left, image right */ .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout:has(> .notion-callout__content > .notion-image) > .notion-callout__content { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 36px; align-items: start; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout:has(> .notion-callout__content > .notion-image) > .notion-callout__content > * { grid-column: 1; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout:has(> .notion-callout__content > .notion-image) > .notion-callout__content > .notion-image { grid-column: 2; grid-row: 1/span 40; } .notion-callout.bg-yellow-light .notion-image img { display: block; width: 100% !important; max-width: none !important; border: var(--border-black); box-shadow: 8px 8px 0 var(--primary); } /* a callout inside a step = white note box */ .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout .notion-callout { display: block; margin: 14px 0 6px !important; padding: 14px 18px !important; background: #fff !important; border: var(--border-black) !important; border-radius: 0 !important; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout .notion-callout > .notion-callout__icon { display: none; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout .notion-callout > .notion-callout__content { margin: 0 !important; padding: 0; } .notion-callout.bg-yellow-light > .notion-callout__content > .notion-callout .notion-callout :is(p.notion-text, span.notion-semantic-string) { margin: 0; font-family: var(--font-medium) !important; line-height: 1.7 !important; } /* ===================================================================== 7. QUOTES & TEXT MARKS ===================================================================== */ /* Brown quote: row of buttons, one per link; first link is yellow */ .notion-quote.bg-brown { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 28px 0 0; padding: 0 !important; background: transparent !important; border: 0 !important; font-style: normal; } .notion-quote.bg-brown > .notion-semantic-string { display: contents; } .notion-quote.bg-brown a { display: inline-flex; align-items: center; padding: 14px 24px; color: var(--text) !important; font-family: var(--font-medium) !important; font-weight: 700; line-height: 1; text-decoration: none !important; background: var(--cream-50); border: var(--border-black); border-radius: 0; box-shadow: 4px 4px 0 #000; opacity: 1 !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .notion-quote.bg-brown a:first-of-type { background: var(--primary); } .notion-quote.bg-brown a:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; } /* Red text at the start of a line: info row (label | value) */ p.notion-text:has(.highlighted-color.color-red) { position: relative; margin: 0; padding: 12px 0 12px 148px; border-bottom: 1px dashed var(--line-soft); } p.notion-text .highlighted-color.color-red { display: inline-block; width: 136px; margin: 0 12px 0 -148px; vertical-align: top; color: var(--primary-dark) !important; font-family: var(--font-bold) !important; } /* Green quote: pull quote */ .notion-quote.bg-green { font-size: var(--blog-quote) !important; background: #fff !important; border-inline-start: 5px solid var(--primary) !important; } /* Orange quote: lead / intro paragraph */ .notion-quote.bg-orange { font-size: 1.7em; color: #000 !important; text-align: center; background: var(--cream-50); border-inline-start: none !important; padding: 0; } /* Purple text: eyebrow label (inline colour or whole block) */ .notion-root :is(p.notion-text:has(.highlighted-color.color-purple), p.notion-text.color-purple) { margin-bottom: 0 !important; /* no gap under the eyebrow line */ } /* the heading right after an eyebrow sits close to it */ .notion-root :is(p.notion-text:has(.highlighted-color.color-purple), p.notion-text.color-purple) + .notion-heading__anchor + .notion-heading, .notion-root :is(p.notion-text:has(.highlighted-color.color-purple), p.notion-text.color-purple) + .notion-heading { margin-top: 0.15em !important; } .notion-root :is(.highlighted-color.color-purple, .notion-text.color-purple) { display: block; margin: 1.5em 0 0; /* a bit more air above */ font-weight: 400 !important; font-family: var(--font-regular) !important; font-size: 16px !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-dark) !important; } /* Blue text: large text */ .highlighted-color.color-blue { color: #000; font-size: 1.2em; } .notion-text.color-blue { color: #000; font-size: calc(var(--body) * 1.2) !important; } /* Gray background highlight: small muted link */ .highlighted-background.bg-gray { background: transparent !important; font-size: 0.8em; font-weight: 100; } .highlighted-background.bg-gray a { color: #000 !important; text-decoration: none !important; opacity: 0.5 !important; } .highlighted-background.bg-gray a:hover { opacity: 1 !important; } /* Text block with red background: spacer (hidden on mobile, see 16) */ .notion-text.bg-red { background: none !important; } /* ===================================================================== 8. TOGGLES & TO-DOS ===================================================================== */ .notion-toggle .notion-toggle__summary .notion-semantic-string { font-size: var(--body); } .notion-toggle .notion-toggle__content { padding: 12px !important; } /* Yellow toggle: FAQ accordion */ .notion-toggle.bg-yellow { width: 100%; margin-bottom: 12px; padding: 5px 8px; background: var(--cream-50); border: var(--border-black); } .notion-toggle.bg-yellow:hover { background: var(--cream-300); } .notion-toggle.bg-yellow.open { background: var(--primary); } .notion-toggle.bg-yellow .notion-toggle__summary { flex-direction: row-reverse; justify-content: space-between; align-items: center; margin-top: 0; } .notion-toggle.bg-yellow .notion-toggle__trigger { height: auto; margin: 0; color: #000; } .notion-toggle.bg-yellow .notion-toggle__trigger_icon { display: none; } .notion-toggle.bg-yellow .notion-toggle__trigger::before { content: "+"; font-size: 30px; } .notion-toggle.bg-yellow.open .notion-toggle__trigger::before { content: "−"; } /* To-do: round yellow checkboxes, no strike-through */ .notion-to-do__content { margin: 0 0 3px !important; padding: 2px !important; font-size: var(--body); } .notion-to-do__icon { margin-right: 6px !important; } .notion-checkbox { width: 1.2em !important; height: 1.2em !important; border-radius: 999px !important; border: var(--border-yellow); } .notion-checkbox svg { display: none !important; } .notion-checkbox.checked { background: var(--primary) !important; } .notion-checkbox.checked svg { display: inline !important; fill: var(--primary-dark); } .notion-to-do__title, .notion-to-do__title.checked { opacity: 1 !important; text-align: left !important; } .notion-to-do__title.checked del { text-decoration: none !important; } /* ===================================================================== 9. OTHER BLOCKS ===================================================================== */ .notion-divider { border: 1.6px solid var(--primary); } /* Captions (hidden above; this styles any that are shown) */ .notion-caption { margin-left: auto; margin-top: -20px; padding: 10px !important; text-align: right !important; background: #fff; border-radius: var(--radius); } /* Code blocks */ .notion-code .language-css { background: var(--cream-100) !important; text-wrap: wrap !important; } .notion-code__copy-button { padding: 4px 20px; font-size: 1em; background: var(--cream-100); border: var(--border-black); border-radius: 0; box-shadow: -6px 5px 0 var(--primary); opacity: 1; transition: var(--ease-out) !important; } .notion-code__copy-button:hover { background: var(--primary); } .notion-code__copy-button > svg { display: none; } .notion-page__property { grid-template-columns: 50px 1fr; } /* ===================================================================== 10. DATABASES ===================================================================== */ /* Tags: outlined in their own colour */ .notion-pill { padding: 2px 10px !important; border-radius: 4px; background: #fff; font-size: 12px; } .pill-gray { --pill: var(--color-text-gray); } .pill-brown { --pill: var(--color-text-brown); } .pill-orange { --pill: var(--color-text-orange); } .pill-yellow { --pill: var(--color-text-yellow); } .pill-green { --pill: var(--color-text-green); } .pill-blue { --pill: var(--color-text-blue); } .pill-purple { --pill: var(--color-text-purple); } .pill-pink { --pill: var(--color-text-pink); } .pill-red { --pill: var(--color-text-red); } :is(.pill-gray, .pill-brown, .pill-orange, .pill-yellow, .pill-green, .pill-blue, .pill-purple, .pill-pink, .pill-red) { border: 2px solid var(--pill); color: var(--pill); } /* Top lines */ .notion-collection-gallery, .notion-collection-list, .notion-collection-board { border-top: unset; } .notion-collection-table { border-top: var(--border-yellow); } /* Cards */ .notion-collection-card { border: var(--border-black); border-radius: var(--radius); box-shadow: none !important; transition: all 0.3s ease !important; } .notion-collection-card:hover { background: #fff !important; box-shadow: var(--shadow-glow-lg) !important; transform: scale(1.025) !important; } .notion-collection-gallery .notion-collection-card.gallery { align-self: flex-start !important; justify-self: flex-start !important; } .notion-collection-gallery.small { grid-template-columns: none !important; } /* View switcher (mobile: yellow dropdown; desktop: pill row, see 16) */ .notion-dropdown__menu-header, .notion-dropdown__option-icon, .notion-dropdown__button svg:first-of-type { display: none !important; } .notion-dropdown { width: 100% !important; } .notion-dropdown__button { justify-content: space-between !important; width: 100% !important; padding: 14px !important; background: var(--primary); border: var(--border-black); border-radius: var(--radius) !important; } .notion-dropdown__menu-wrapper { margin-bottom: 16px !important; } .notion-dropdown__menu { width: 100% !important; margin-top: -2px !important; border: var(--border-black); border-radius: 0 !important; box-shadow: var(--shadow-glow); transform: none !important; top: auto !important; left: auto !important; } .notion-dropdown__option-list { flex-wrap: wrap !important; padding-top: 10px !important; } .notion-dropdown__option { height: 50px !important; padding: 5px 16px !important; } .notion-dropdown__option:hover { color: #000; background: var(--primary-light); } .notion-dropdown__option p, .notion-dropdown__button-title { font-size: var(--body) !important; } /* ===================================================================== 11. NAVBAR ===================================================================== */ .super-navbar { background: #fff; } .super-navbar__content { padding: 0 !important; } .super-navbar__logo, .super-navbar__actions { padding: 0 20px; } /* Super navbar spacing fix */ .super-navbar__viewport.single-column { margin-top: -5px !important; } .super-navbar__list-content.single-column { padding: 0; } .super-navbar__list-arrow-wrapper { height: 0; margin: unset; padding: 0; } .super-navbar__item, .super-navbar__list { font-weight: 600 !important; } .super-navbar__item:hover, .super-navbar__list:hover, .super-navbar__content li a.active { text-decoration: underline 3px var(--primary); } .super-navbar__item:hover, .super-navbar__list:hover { transform: scale(1.08) !important; transition: transform 0.3s ease, color 0.2s ease-in-out !important; } /* CTA button */ .super-navbar__cta { padding: var(--btn-padding); border: var(--border-yellow); border-radius: var(--radius); font-weight: 600; text-transform: uppercase; transition: all 0.3s ease; } .super-navbar__cta:hover { background: #fff !important; border: var(--border-black) !important; transform: scale(1.02) !important; } /* Mobile menu */ .super-navbar__menu { background: var(--primary) !important; } .notion-link.super-navigation-menu__item { border-radius: 0; } .notion-link.super-navigation-menu__item.active { color: var(--primary-dark); background: transparent; } /* ===================================================================== 12. FOOTER ===================================================================== */ .super-footer { padding-top: 60px !important; border-top: 12px solid var(--primary); } .super-footer.corners .super-footer__content, .super-footer.floating .super-footer__content { grid-template-areas: "logo logo icons" "links links links" "divider divider divider" "footnote footnote badge" !important; } .super-footer.corners .super-footer__footnote, .super-footer.floating .super-footer__footnote { align-content: center; } .super-footer__logo, .super-footer__logo-image, .super-footer__logo img { height: 100px !important; } .super-footer__logo-image, .super-footer__logo img { width: 290px; } .super-footer__icons { gap: 24px; } .super-footer__divider { border-top: var(--border-yellow); opacity: 1; } .super-footer__list { margin: 0; padding: 10px 0; } .super-footer__list-heading { font-size: var(--body); } .super-footer__list-links { font-size: 0.9em !important; opacity: 0.8; } .super-footer__list-links a:hover { opacity: 1 !important; } .notion-link.super-footer__link:hover { color: #000; opacity: 1 !important; text-decoration: underline 3px var(--primary); transform: scale(1.08) !important; transition: transform 0.3s ease, color 0.2s ease-in-out !important; } .super-footer__footnote { font-size: 1em !important; opacity: 0.5; } /* Certified consultant badge (added by head script) */ .badge { display: flex; width: 100%; max-width: 200px; height: auto; margin-left: auto; margin-right: 2rem; } /* ===================================================================== 13. SECTION LAYOUTS ===================================================================== */ /* --- Blog posts (/blog-post) + Notion product updates -------------- */ :is(.parent-page__blog-post, .parent-page__notion-product-update).super-content { width: 100%; max-width: 920px !important; margin: auto; } .parent-page__blog-post .notion-header.page { display: inline-block !important; } :is(.parent-page__blog-post, .parent-page__notion-product-update) .notion-header__title { font-size: 3.8em; line-height: 1.1; text-align: center; } :is(.parent-page__blog-post, .parent-page__notion-product-update) .notion-header__cover.no-cover { height: 40px !important; } /* Product updates: properties */ .parent-page__notion-product-update .notion-page__properties-layout { display: block !important; margin-inline: auto !important; } .parent-page__notion-product-update .notion-page__property-name { font-weight: 800; color: #000 !important; opacity: 1 !important; } .parent-page__notion-product-update .notion-page__properties-layout :is(.notion-page__properties, .notion-page__layout-property, .notion-page__title-properties) { border-bottom: none; } /* --- Blog post header: title, then a meta line ---------------------- */ /* Row 1: By (first property, left) · Publish date (right), small text. */ /* Row 2: tags as yellow-outlined chips. */ .parent-page__blog-post .notion-header.page { display: block !important; } .parent-page__blog-post .notion-header__title { font-size: var(--h1) !important; line-height: 1.1 !important; text-align: left; } .parent-page__blog-post .notion-page__properties { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; width: 100% !important; margin: 8px 0 28px !important; padding: 0 0 18px !important; border: 0 !important; border-bottom: 3.2px solid var(--primary) !important; /* same as the divider block */ } .parent-page__blog-post .notion-page__property { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; } .parent-page__blog-post .notion-page__property:has(> .notion-property:empty) { display: none; } .parent-page__blog-post .notion-page__property :is(.notion-page__property-name-wrapper, .notion-page__property-name-wrapper *) { color: var(--muted) !important; font-family: var(--font-regular); font-size: 14px; opacity: 1 !important; } .parent-page__blog-post .notion-page__property .notion-page__property-name-wrapper { flex: none; gap: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .parent-page__blog-post .notion-page__property .notion-page__property-name-wrapper svg { display: none; } .parent-page__blog-post .notion-page__property .notion-page__property-name-wrapper { display: none !important; } .parent-page__blog-post .notion-page__property { /* no labels: just name, date, tags */ } .parent-page__blog-post .notion-page__property .notion-property { margin: 0 !important; padding: 0 !important; font-family: var(--font-regular); font-size: 14px; color: var(--text); overflow: visible !important; } .parent-page__blog-post .notion-page__property .notion-property__relation a { color: var(--text) !important; text-decoration: none !important; } .parent-page__blog-post .notion-page__property { /* By: left, small round avatar + bold linked name */ } .parent-page__blog-post .notion-page__property:first-child { grid-column: 1; grid-row: 1; } .parent-page__blog-post .notion-page__property .notion-property__relation a :is(*, *::after) { text-decoration: none !important; border-bottom: 0 !important; } .parent-page__blog-post .notion-page__property:first-child .notion-property__relation a { display: inline-flex; align-items: center; gap: 8px; border: 0 !important; } .parent-page__blog-post .notion-page__property:first-child .notion-property__relation a :is(span, div) { font-family: var(--font-regular) !important; font-size: 14px !important; font-weight: 400 !important; } .parent-page__blog-post .notion-page__property:first-child .notion-property__relation a:hover :is(span, div) { text-decoration: underline 2px var(--primary) !important; } .parent-page__blog-post .notion-page__property:first-child .notion-property__relation a :has(> img) { display: inline-flex !important; align-items: center; justify-content: center; width: 26px !important; height: 26px !important; min-width: 26px; margin: 0 !important; overflow: visible !important; } .parent-page__blog-post .notion-page__property:first-child .notion-property__relation img { display: block; position: static !important; width: 26px !important; height: 26px !important; margin: 0 !important; object-fit: cover; object-position: center; transform: none !important; border-radius: 50%; box-shadow: -2px 2px 0 var(--primary); } .parent-page__blog-post .notion-page__property { /* Publish date: right */ } .parent-page__blog-post .notion-page__property:has(:is(.notion-property__date, .notion-property__created_time)) { grid-column: 2; grid-row: 1; justify-self: end; } .parent-page__blog-post .notion-page__property { /* Tags (everything else): own row, no label, yellow-outlined chips */ } .parent-page__blog-post .notion-page__property:not(:first-child):not(:has(:is(.notion-property__date, .notion-property__created_time))) { grid-column: 1/-1; } .parent-page__blog-post .notion-page__property:not(:first-child):not(:has(:is(.notion-property__date, .notion-property__created_time))) .notion-page__property-name-wrapper { display: none; } .parent-page__blog-post .notion-page__property:not(:first-child) .notion-property__relation :is(svg, img, :has(> img), :has(> svg)) { display: none !important; } .parent-page__blog-post .notion-page__property:not(:first-child) :is(.notion-property__relation, .notion-property__multi_select) { display: flex; flex-wrap: wrap; gap: 8px; } .parent-page__blog-post .notion-page__property:not(:first-child) .notion-property__relation a > :not(:last-child) { display: none !important; } .parent-page__blog-post .notion-page__property:not(:first-child) :is(.notion-property__relation a, .notion-pill) { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none !important; margin: 0 !important; padding: 2px 9px !important; color: var(--text) !important; font-size: 12px !important; line-height: 1.3; background: transparent !important; border: 2px solid var(--primary) !important; border-radius: 0 !important; } .parent-page__blog-post .notion-page__property:not(:first-child) .notion-property__relation a:hover { background: var(--primary) !important; } .parent-page__blog-post .notion-page__property:not(:first-child) .notion-property__relation a * { margin: 0 !important; padding: 0 !important; } /* --- Category + sub-category chips in database views. Colours mapped by URL (update when a Color or URL changes in Notion). Posts keep yellow. */ .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) { display: flex; flex-wrap: wrap; gap: 6px; } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a[href*=category] { --pill: #000; display: inline-flex; align-items: center; margin: 0 !important; padding: 2px 7px !important; color: var(--pill) !important; font-size: 11px !important; line-height: 1.4; text-decoration: none !important; background: #fff; border: 2px solid var(--pill); border-radius: 0; opacity: 1 !important; } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a[href*=category]:hover { background: color-mix(in srgb, var(--pill) 14%, #fff); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) { /* light tint of its own colour */ } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a[href*=category] :is(svg, img, :has(> img), :has(> svg)) { display: none !important; } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a[href*=category] * { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; text-decoration: none !important; border: 0 !important; } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) { /* Green */ } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a:is([href$=knowledge-management], [href$=operations-scaling], [href$=operations-workflows], [href$=change-management], [href$=team-adoption-change-management]) { --pill: var(--color-text-green); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) { /* Blue */ } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a:is([href$=building-in-notion], [href$=notion], [href$=notion-ai]) { --pill: var(--color-text-blue); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) { /* Yellow */ } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a:is([href$=inside-notionflows], [href$=founders-notes]) { --pill: var(--color-text-yellow); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) { /* Purple */ } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a:is([href$=workflow-automation], [href$=automation]) { --pill: var(--color-text-purple); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) { /* Sub-categories (/posts/sub-category/…) */ } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a[href*=sub-category] { --pill: var(--color-text-purple); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a:is([href$=documentation-knowledge-sharing], [href$=remote-work], [href$=notion-enterprise]) { --pill: var(--color-text-orange); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a[href$=gamification] { --pill: var(--color-text-blue); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a:is([href$=delegation-improvement], [href$=working-with-a-consultant], [href$=team-adoption]) { --pill: var(--color-text-yellow); } .notion-property__relation:not(.notion-page__properties *):has(a[href*=category]) a[href$=product-updates] { --pill: var(--color-text-green); } /* --- Blog cards: chip, title, then "Author · Date" in small grey text */ .notion-collection-card__content:has(a[href*=category]) { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px 6px; } .notion-collection-card__content:has(a[href*=category]) > * { flex-basis: 100%; margin: 0 !important; } .notion-collection-card__content:has(a[href*=category]) > .notion-property__relation:has(a[href*=category]) { order: 1; } .notion-collection-card__content:has(a[href*=category]) > .notion-property__title { order: 2; } .notion-collection-card__content:has(a[href*=category]) > .notion-property__relation:not(:has(a[href*=category])) { order: 3; flex-basis: auto; } .notion-collection-card__content:has(a[href*=category]) > .notion-property__date { order: 4; flex-basis: auto; } .notion-collection-card__content:has(a[href*=category]) > :is(.notion-property__relation:not(:has(a[href*=category])), .notion-property__date), .notion-collection-card__content:has(a[href*=category]) > :is(.notion-property__relation:not(:has(a[href*=category])), .notion-property__date) * { padding: 0 !important; font-family: var(--font-regular) !important; font-size: 13px !important; font-weight: 400 !important; color: var(--muted) !important; text-decoration: none !important; border: 0 !important; } .notion-collection-card__content:has(a[href*=category]) > .notion-property__relation:not(:has(a[href*=category])) :is(img, svg, :has(> img), :has(> svg)) { display: none !important; } .notion-collection-card__content:has(a[href*=category]) { /* author: name only, no avatar space */ } .notion-collection-card__content:has(a[href*=category]) > .notion-property__relation:not(:has(a[href*=category])) a { display: inline !important; margin: 0 !important; gap: 0 !important; } .notion-collection-card__content:has(a[href*=category]) > .notion-property__relation:not(:has(a[href*=category])) a > :not(:last-child) { display: none !important; } .notion-collection-card__content:has(a[href*=category]) > .notion-property__relation:not(:has(a[href*=category]))::after { content: "·"; margin-left: 6px; color: var(--muted); } /* --- Feature tiles: a SMALL gallery inside a DEFAULT callout -------- */ /* Card = "cover" image + Name + "description" text + "color" select */ /* (hidden; it colours the tile). Hover: dark tile, description shows. */ .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) { padding: 0 !important; background: transparent !important; border: 0 !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) > .notion-callout__icon { display: none; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) > .notion-callout__content { width: 100%; margin: 0 !important; padding: 0; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-gallery.small { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px); gap: 24px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; border: 0 !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery { --dark: #37352f; display: flex !important; flex-direction: column !important; aspect-ratio: 3/4; margin: 0 !important; overflow: hidden; scroll-snap-align: start; background: color-mix(in srgb, var(--dark) 14%, #fff) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: background 0.3s ease !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-gray) { --dark: #4b4a47; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-brown) { --dark: #6a3e12; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-orange) { --dark: #a5460a; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-yellow) { --dark: #8a6a0c; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-green) { --dark: #0b5a4c; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-blue) { --dark: #1e3a6e; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-purple) { --dark: #4a1f75; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-pink) { --dark: #8a2a5a; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:has(.pill-red) { --dark: #8a1f1f; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:hover { background: var(--dark) !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card__cover { flex: 0 0 58%; padding: 24px 24px 0; background: transparent !important; transition: transform 0.3s ease; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) :is(.notion-collection-card__cover, .notion-collection-card__cover div, .notion-collection-card__cover img) { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; background: transparent !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card__cover img { object-fit: contain !important; object-position: left top; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card__content { display: flex !important; flex-direction: column !important; justify-content: flex-end; align-items: flex-start !important; gap: 8px; flex: 1; margin-top: auto; padding: 0 24px 24px !important; text-align: left !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card__content .notion-property__select { display: none !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-property__title { width: 100%; padding: 0 !important; text-align: left !important; color: var(--dark) !important; font-family: var(--font-medium) !important; font-weight: 600 !important; font-size: 1.25em !important; line-height: 1.25 !important; white-space: normal !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-property__text { max-height: 0; opacity: 0; overflow: hidden; padding: 0 !important; text-align: left !important; color: #fff !important; font-family: var(--font-regular) !important; font-size: 13px !important; line-height: 1.5 !important; white-space: normal !important; transition: max-height 0.35s ease, opacity 0.25s ease; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:hover .notion-property__title { color: #fff !important; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:hover .notion-property__text { max-height: 9em; opacity: 1; } .notion-callout:not([class*=-light]):has(.notion-collection-gallery.small) .notion-collection-card.gallery:hover .notion-collection-card__cover { transform: translateY(-8%); } /* --- Case studies (/case-study) ------------------------------------ */ .parent-page__case-study .notion-root { max-width: 950px !important; margin: auto; } .parent-page__case-study .notion-header { display: block !important; } .parent-page__case-study .notion-header__cover { height: 50vh !important; max-height: 50vh !important; } .parent-page__case-study .notion-header__cover-image { position: relative !important; width: 110vw !important; max-width: 110vw !important; margin: 0 !important; margin-left: -50vw !important; left: 50% !important; } .parent-page__case-study .notion-header__title { margin-top: -120px; padding: 60px; font-size: 4em; line-height: 1; text-align: center; background: var(--cream-50); } /* ===================================================================== 14. CUSTOM HTML COMPONENTS: tabs + word slider live in the HEAD code (Code → Head, inside

Notion websites