LinkedIn

1c:I[868422,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/3vkzaackgg_qg.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/3p652vdqlk1ce.js","/_next/static/chunks/0-dqqj6hfkr_n.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/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] :HL["https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-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-700.woff2","font",{"crossOrigin":"anonymous","type":"font/woff2"}] 11:[["$","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"}]] 12:["$","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"}] 13:["$","link","font-preload-Inter-500",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 14:["$","link","font-preload-Inter-600",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-600.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 15:["$","link","font-preload-Inter-700",{"rel":"preload","href":"https://assets-v2.super.so/global/fonts/Inter/inter-v12-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2","crossOrigin":"anonymous","as":"font","type":"font/woff2"}] 1a:T3118, /* ====================================== CARD LIGHTBOX Overlay opened by clicking a gallery card. Markup is built empty on load; .large / .medium is added at click time, then .active to fade it in. Styled in CSS section 11. ====================================== */ /* -- FIELD MAP -- One entry per gallery size. Adding a gallery = adding an entry here. ⚠️ property-xxxxxxxx are Notion property IDs. Renaming a property is safe; DELETING and recreating one issues a new ID and breaks these. tag getters may return one element or a NodeList — the renderer takes both. "small" has no entry: it reuses "medium" whole. */ const CARD_FIELD_MAP = { large: { name: c => null, tag: c => c.querySelectorAll(".notion-property__select .notion-pill"), tagMode: "html", /* html keeps Notion's pill styling */ desc: c => c.querySelector(".notion-property__text.property-7b57445c"), sec_desc: c => c.querySelector(".notion-property__text.property-46484354"), /* Website */ link: c => c.querySelector(".notion-property__url.property-6d784a6e a"), linkLabel: "Website →", /* fixed label; slot hides if no URL */ linkRenderMode: "text", /* Exited. Selected by TYPE, not ID — Portfolio has only one checkbox column, so no hash is needed and renaming it stays safe. */ exited: c => c.querySelector(".notion-property__checkbox"), }, medium: { name: c => c.querySelector(".notion-property__title"), /* Job title */ tag: c => c.querySelector(".notion-property__text.property-523c663b"), tagMode: "text", /* Bio */ desc: c => c.querySelector(".notion-property__text.property-7049553c"), /* LinkedIn */ link: c => c.querySelector(".notion-property__url.property-67427468 a"), /* X */ link2: c => c.querySelector(".notion-property__url.property-6a407473 a"), linkRenderMode: "icons", }, }; const SOCIAL_ICONS = { linkedin: '', x: '', }; /* -- CHECKBOX READ -- Super's ticked-checkbox markup is not documented, so three TRUE-state signals are tested in turn. ⚠️ Only true-state signals belong here. Earlier versions tested for the string "checked" anywhere in the markup, and for the presence of any svg — both are present on an UNTICKED cell too, so every card came back ticked. */ function cardCheckboxOn(el) { if (!el) return false; const input = el.querySelector('input[type="checkbox"]'); if (input) return input.checked; if (el.querySelector('[aria-checked="true"]')) return true; return !!el.querySelector('[data-checked="true"], .checked'); } /* -- BUILD -- Empty shell, appended to body once. Every field is filled at open. */ let cardLightboxOverlay; function buildCardLightbox() { const existing = document.querySelector(".card-lightbox-overlay"); if (existing) { cardLightboxOverlay = existing; return; } cardLightboxOverlay = document.createElement("div"); cardLightboxOverlay.className = "card-lightbox-overlay"; cardLightboxOverlay.innerHTML = ` `; document.body.appendChild(cardLightboxOverlay); cardLightboxOverlay.querySelector(".card-lightbox-close") .addEventListener("click", closeCardLightbox); /* Backdrop click — only the overlay itself, not anything inside it. */ cardLightboxOverlay.addEventListener("click", function (e) { if (e.target === cardLightboxOverlay) closeCardLightbox(); }); document.addEventListener("keydown", function (e) { if (e.key === "Escape") closeCardLightbox(); }); } /* -- OPEN -- */ function openCardLightbox(card, gallery) { if (!cardLightboxOverlay) buildCardLightbox(); /* Size detection. "small" routes to the medium field map and medium CSS — it reuses medium entirely. Both classes land on the overlay so the shared CSS selector still matches. */ const isLarge = gallery && gallery.classList.contains("large"); const isMedium = gallery && gallery.classList.contains("medium"); const isSmall = gallery && gallery.classList.contains("small"); const size = isLarge ? "large" : (isMedium || isSmall) ? "medium" : null; cardLightboxOverlay.classList.remove("large", "medium", "small"); if (isLarge) { cardLightboxOverlay.classList.add("large"); } else if (isMedium || isSmall) { cardLightboxOverlay.classList.add("medium"); if (isSmall) cardLightboxOverlay.classList.add("small"); } /* Fallback covers the null case — a gallery with no size class. */ const map = CARD_FIELD_MAP[size] || CARD_FIELD_MAP.medium; const lb = cardLightboxOverlay.querySelector.bind(cardLightboxOverlay); const coverImg = card.querySelector(".notion-collection-card__cover"); const nameEl = map.name(card); const descEl = map.desc(card); const secDescEl = map.sec_desc ? map.sec_desc(card) : null; const linkEl = map.link(card); const link2El = map.link2 ? map.link2(card) : null; const nameText = nameEl ? nameEl.textContent.trim() : ""; /* Cover + name */ lb(".card-lightbox-cover").src = coverImg ? coverImg.src : ""; lb(".card-lightbox-cover").alt = nameText; lb(".card-lightbox-name").textContent = nameText; /* Tag / role slot — one element or a NodeList of pills. */ const tagResult = map.tag(card); const roleSlot = lb(".card-lightbox-role"); if (tagResult instanceof NodeList) { roleSlot.innerHTML = Array.from(tagResult) .map(el => el.outerHTML).join(""); } else if (tagResult) { if (map.tagMode === "html") { roleSlot.innerHTML = tagResult.outerHTML; } else { roleSlot.textContent = tagResult.textContent.trim(); } } else { roleSlot.textContent = ""; } /* Bio */ lb(".card-lightbox-desc").innerHTML = descEl ? descEl.innerHTML : ""; /* Large only. Emptied otherwise so the slot collapses via :empty. */ lb(".card-lightbox-sec-desc").innerHTML = secDescEl ? secDescEl.innerHTML : ""; /* Exited flag — large only, below the bio. Emptied when unticked so the slot collapses via :empty. */ const exitedEl = map.exited ? map.exited(card) : null; lb(".card-lightbox-exited").textContent = cardCheckboxOn(exitedEl) ? "Exited" : ""; /* -- LINKS -- icons = medium/small, text = large */ const linkContainer = lb(".card-lightbox-link"); const socialContainer = lb(".card-lightbox-social-links"); if (map.linkRenderMode === "icons") { let iconsHtml = ""; if (linkEl) { iconsHtml += '' + SOCIAL_ICONS.linkedin + ''; } if (link2El) { iconsHtml += '' + SOCIAL_ICONS.x + ''; } socialContainer.innerHTML = iconsHtml; linkContainer.innerHTML = ""; } else { socialContainer.innerHTML = ""; if (linkEl) { const label = map.linkLabel || linkEl.textContent.trim(); linkContainer.innerHTML = '' + label + ''; } else { linkContainer.innerHTML = ""; } } /* -- SCROLL FADE -- Desktop: the bio scrolls in its own box, classes go on .desc-wrap. Mobile: the whole panel scrolls, classes go on the overlay. Both are tracked every time — CSS decides which one is in play. */ const descScrollEl = lb(".card-lightbox-desc"); const descWrapEl = lb(".card-lightbox-desc-wrap"); const coverEl = lb(".card-lightbox-cover"); function updateFade() { const scrollable = descScrollEl.scrollHeight - descScrollEl.clientHeight > 2; descWrapEl.classList.toggle("is-scrollable", scrollable); const atBottom = descScrollEl.scrollHeight - descScrollEl.scrollTop - descScrollEl.clientHeight < 2; descWrapEl.classList.toggle("at-bottom", atBottom); const panel = lb(".card-lightbox-panel"); if (!panel) return; const pScrollable = panel.scrollHeight - panel.clientHeight > 2; const pAtBottom = panel.scrollHeight - panel.scrollTop - panel.clientHeight < 2; cardLightboxOverlay.classList.toggle("is-scrollable", pScrollable); cardLightboxOverlay.classList.toggle("at-bottom", pAtBottom); } /* Handlers are stashed on the element so the previous one can be removed — the same nodes are reused for every card, so they would otherwise stack up on each open. */ if (descScrollEl._fadeHandler) { descScrollEl.removeEventListener("scroll", descScrollEl._fadeHandler); } descScrollEl._fadeHandler = updateFade; descScrollEl.addEventListener("scroll", updateFade); /* Re-measure once the cover loads: the bio box height is tied to the photo column height. */ if (coverEl._fadeHandler) { coverEl.removeEventListener("load", coverEl._fadeHandler); } coverEl._fadeHandler = updateFade; coverEl.addEventListener("load", updateFade); descScrollEl.scrollTop = 0; /* The panel scrolls instead of the bio on mobile, so reset it too — else a long bio opens part-scrolled with the photo cut off. */ const panelEl = lb(".card-lightbox-panel"); if (panelEl) { panelEl.scrollTop = 0; if (panelEl._fadeHandler) { panelEl.removeEventListener("scroll", panelEl._fadeHandler); } panelEl._fadeHandler = updateFade; panelEl.addEventListener("scroll", updateFade); } updateFade(); requestAnimationFrame(updateFade); cardLightboxOverlay.classList.add("active"); document.body.style.overflow = "hidden"; } /* -- CLOSE -- */ function closeCardLightbox() { if (!cardLightboxOverlay) return; cardLightboxOverlay.classList.remove("active"); document.body.style.overflow = ""; } /* -- CLICK BINDING -- One document-level CAPTURE listener, bound once. Capture phase is load-bearing: it must run before Super's own card-anchor and image-lightbox handlers. Binding on document (not the cards) survives Super's client-side navigation. */ if (!window.__cardLightboxBound) { window.__cardLightboxBound = true; document.addEventListener("click", function (e) { const card = e.target.closest( ".notion-collection-gallery .notion-collection-card"); if (!card) return; /* Relationships reuses the large Portfolio gallery but has no lightbox. Bail before the preventDefault below. */ if (card.closest("#page-relationships")) return; /* Let a real URL property link (target=_blank) open normally. */ if (e.target.closest(".notion-property__url a")) return; e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); openCardLightbox(card, card.closest(".notion-collection-gallery")); }, true); if (document.body) { buildCardLightbox(); } else { document.addEventListener("DOMContentLoaded", buildCardLightbox); } } 16:["$","script","0",{"dangerouslySetInnerHTML":{"__html":"$1a"},"children":null}] 17:["$","script","2",{"src":"https://cdn.jsdelivr.net/npm/page-flip@2.0.7/dist/js/page-flip.browser.js","children":null}] 1b:T1831, /* ====================================== HOME FLIPBOOK Builds a page-turning book from the images in a hidden blue callout, and inserts it just above. Runs on Home and Values. Home is served as three page IDs (Cloudflare clones), so four IDs are listed in SRC. Library: StPageFlip 2.0.7 (MIT), loaded above. Styled in CSS section 13. ====================================== */ (function () { var SRC = '#page-index .notion-callout.bg-blue-light,' + '#page-homepage .notion-callout.bg-blue-light,' + '#page-home-page .notion-callout.bg-blue-light,' + '#page-values .notion-callout.bg-blue-light'; var MAX_PAGE_W = 560; /* two of these must fit the stage side by side */ /* ⚠️ Guards the async gap: the probe below loads before the book exists, so getElementById alone lets several observer calls through and you get one book per call. Cleared once make() finishes, so a rebuild is still possible after Super's React wipes the DOM. */ var building = false; function build() { var src = document.querySelector(SRC); if (!src) return; /* Guard — the observer below fires on every Super re-render. */ if (building) return; if (document.getElementById('values-flipbook')) return; /* The library tag is above this one, but a slow CDN can still leave it unparsed. Retry rather than fail. */ if (!window.St || !window.St.PageFlip) { setTimeout(build, 100); return; } var imgs = src.querySelectorAll('img'); if (imgs.length < 2) return; var srcs = []; for (var i = 0; i < imgs.length; i++) srcs.push(imgs[i].src); /* Page shape comes from the first image's real proportions, so the book matches the artwork. */ building = true; var probe = new Image(); probe.onload = function () { make(src, srcs, probe.naturalWidth / probe.naturalHeight || 0.7); }; probe.onerror = function () { make(src, srcs, 0.7); }; probe.src = srcs[0]; } function make(src, srcs, ratio) { var wrap = document.createElement('div'); wrap.id = 'values-flipbook'; wrap.innerHTML = '

' + '

' + '' + '' + '

' + '

' + '' + '' + '' + '

'; src.parentNode.insertBefore(wrap, src); var stage = wrap.querySelector('.values-flipbook-stage'); var book = wrap.querySelector('#values-flipbook-book'); var html = ''; srcs.forEach(function (s) { html += '

' + '

'; }); book.innerHTML = html; var avail = wrap.clientWidth || 900; var pageW = Math.min(MAX_PAGE_W, Math.floor(avail / 2)); /* Read by the cover-centring rules in CSS section 13. */ stage.style.setProperty('--page-w', pageW + 'px'); var flip = new St.PageFlip(book, { width: pageW, height: Math.round(pageW / ratio), size: 'fixed', showCover: true, usePortrait: false, drawShadow: true, maxShadowOpacity: 0.5, flippingTime: 700, mobileScrollSupport: true }); flip.loadFromHTML(book.querySelectorAll('.values-flipbook-page')); var count = wrap.querySelector('.values-flipbook-count'); var prev = wrap.querySelector('.values-flipbook-prev'); var next = wrap.querySelector('.values-flipbook-next'); var edgeL = wrap.querySelector('.values-flipbook-edge.left'); var edgeR = wrap.querySelector('.values-flipbook-edge.right'); /* Covers are the first and last pages. The class shifts the stage to centre a lone cover; the disabled flags stop a click running off either end. */ function update() { var i = flip.getCurrentPageIndex(); var n = flip.getPageCount(); var first = i <= 0; var last = i >= n - 1; stage.classList.toggle('at-first', first); stage.classList.toggle('at-last', last); count.textContent = (i + 1) + ' / ' + n; prev.disabled = edgeL.disabled = first; next.disabled = edgeR.disabled = last; } flip.on('flip', update); flip.on('changeState', function (e) { var moving = e.data === 'flipping' || e.data === 'user_fold' || e.data === 'fold_corner'; stage.classList.toggle('is-flipping', moving); if (moving) { var i = flip.getCurrentPageIndex(); var n = flip.getPageCount(); /* n-3, NOT n-2. n-2 never fires, and the back cover shows a white ghost page. Found by console testing, 9 Sept. */ if (i >= n - 3) stage.classList.add('at-last'); if (i === 1) stage.classList.add('at-first'); } else { update(); } }); update(); function fwd() { flip.flipNext(); } function back() { flip.flipPrev(); } next.addEventListener('click', fwd); edgeR.addEventListener('click', fwd); prev.addEventListener('click', back); edgeL.addEventListener('click', back); building = false; } /* Rebuilt on every client-side navigation, since Super tears the page down and back up. The 1200ms matches the hover-swap script: anything inserted before hydration finishes gets removed again (React #418). document.body may not exist yet — this runs in Head. */ function start() { setTimeout(build, 1200); new MutationObserver(build) .observe(document.body, { childList: true, subtree: true }); } if (document.body) { start(); } else { document.addEventListener('DOMContentLoaded', start); } })(); 18:["$","script","4",{"dangerouslySetInnerHTML":{"__html":"$1b"},"children":null}] 1d:T49d0, 1e:T1ec0, 1f:T11e92,@charset "UTF-8"; /* v3 */ /* ⚠️ REVIEW MARKER — sections 01–07 were cleaned quickly and need a slow read- through for understanding. Start here when picking this back up. Delete this block once done. */ /* ====================================== 01 · TOKENS ====================================== */ :root { /* Colours ///////////////// */ --surface-white: #FFFFFF; --main-black: #000000; --gray-blocks: #F2F2F2; --smile-red: #E4002B; --divider-gray: #c1c1c1; --text-body-gray: #333; /* sitewide default text color */ --text-muted-mid: #999; /* homepage strikethrough/del text */ /* Highlight colour (Notion text-color repurposing) */ --highlight-green-bg: #ADFF8C; /* .color-green highlight */ /* Typography /////////////// */ /* Fixed at every width. Only the root font size below is fluid. */ --h1: 2.7rem; --h2: 1.73rem; --h3: 1.44rem; --h4: 1.1rem; --body: 0.9rem; --button-text: 0.8rem; /* Others ////////////////// */ --border-radius: 20px; --radius-pill: 100px; /* buttons, portfolio tabs, navbar CTA */ } /* Root font size — the only fluid value on the site. 16px at 380px wide, rising to 20px at 1440+. !important is load-bearing: Super injects its own html { font-size: 16px } further down. */ html { font-size: clamp(16px, 14.6px + 0.38vw, 20px) !important; } /* Tablet — buttons get narrow enough here that a 100px radius resolves to a full circle (browsers cap an oversized radius at half the shortest side). Softening the token moves buttons, portfolio tabs and the navbar CTA together. */ @media (min-width: 681px) and (max-width: 900px) { :root { --radius-pill: 50px; } } /* ====================================== 02 · GLOBAL BASE ====================================== */ body { background-color: var(--surface-white); color: var(--text-body-gray); } /* Hyphenation — long words break at syllable boundaries with a real hyphen. Only fires when a break is needed. */ p, h1, h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 12 5 5; } .notion-link.link { text-decoration: none; } /* Headings /////////////////// */ h1.notion-heading { font-size: var(--h1); white-space: pre-wrap; font-weight: 300; } h2.notion-heading { font-size: var(--h2); letter-spacing: 0px; line-height: 1.1; font-weight: 600; } h3.notion-heading { font-size: var(--h3); line-height: 1.2; font-weight: 400; } h4.notion-heading { font-size: var(--h4); font-weight: 400; } /* Even out line lengths (~6 lines max). h1 excluded — manual Notion breaks control the hero headings. */ h2.notion-heading, h3.notion-heading, h4.notion-heading { text-wrap: balance; } /* Links inside headings — red on hover. opacity is load-bearing: Super dims links by default. */ h1.notion-heading a, h2.notion-heading a, h3.notion-heading a, h4.notion-heading a { opacity: 1 !important; } h1.notion-heading a:hover, h2.notion-heading a:hover, h3.notion-heading a:hover, h4.notion-heading a:hover { color: var(--smile-red) !important; } /* Body text /////////////////// */ /* text-wrap: pretty stops a lone word stranding on the last line. NOTE: margin-bottom !important is deliberately overridden in several places — toggle rows, nav titles, dropdown options, gallery cards, lightboxes. Check before changing. */ p { line-height: 1.75; font-size: var(--body); margin-bottom: 1rem !important; text-wrap: pretty; } /* Bullets and numbered lists — Super styles these separately from p, so they need the token applied explicitly or they drift out of step with body copy. */ li { font-size: var(--body); line-height: 1.75; } /* Struck text — muted grey, thin line, so it reads as "not this", not an edit mark. */ del { color: var(--text-muted-mid); text-decoration-thickness: 1px; } /* ====================================== 03 · COLOUR SYSTEMS Grouped by the Notion class Super emits. ====================================== */ /* -- TEXT BLOCK BG .bg-{color} -- */ /* Two empty text blocks used as invisible spacers, exact inverses of each other. Background stripped so each reads as blank space. ⚠️ Empty paragraphs carry no colour data in the Notion export — verify in the DOM, not the source. */ .notion-text.bg-red, .notion-text.bg-purple { background: none !important; } /* Red — desktop only */ @media only screen and (max-width: 680px) { .notion-text.bg-red { display: none !important; } } /* Purple — mobile only */ @media only screen and (min-width: 681px) { .notion-text.bg-purple { display: none !important; } } /* -- TEXT COLOURS .color-{name} -- */ /* Blue and red are NOT highlights. Green is the only highlight fill still styled. */ /* Blue — independent slide-right link. Each one moves and turns red on its own hover, no column grouping. (Home/Home-Page/Homepage hero "Learn more →") color and -webkit-text-fill-color must always move as a PAIR — Super sets the webkit property on links and it beats plain color in Safari. */ .color-blue { display: inline-block; transition: transform 0.2s ease; } .color-blue a { color: var(--main-black) !important; -webkit-text-fill-color: var(--main-black) !important; text-decoration: none !important; opacity: 1 !important; transition: color 0.2s ease; } .color-blue:hover { transform: translateX(12px); } .color-blue:hover a { color: var(--smile-red) !important; -webkit-text-fill-color: var(--smile-red) !important; } /* Red — only styled inside an h2, where it forces Notion's red back to black and enlarges it: the Smile Scorecard stat numbers. (Home + Home-Page + Homepage) */ h2.notion-heading .highlighted-color.color-red { font-size: 1.3em !important; color: var(--main-black); font-weight: 100 !important; } /* Green — neon highlight. Flush to the text, no padding or radius. ⚠️ Stop pairs must MATCH (10/10, 90/90) or it fades instead of banding. */ .color-green { color: var(--text-body-gray) !important; background-image: linear-gradient(to top, transparent 10%, var(--highlight-green-bg) 10%, var(--highlight-green-bg) 90%, transparent 90%); background-color: transparent; } /* Gray — muted caption text. em, not rem, so it shrinks relative to whatever it sits in: 0.85 of a p, an h3, an li. !important beats Notion's native grey, which Super injects after this file. -webkit-text-fill-color is carried in case the span wraps a link (see blue). */ .color-gray { color: var(--text-muted-mid) !important; -webkit-text-fill-color: var(--text-muted-mid) !important; font-size: 0.85em; } /* ====================================== 04 · NAVIGATION Only one nav renders at a time: desktop bar .super-navbar__* mobile drawer .super-navigation-menu__* ====================================== */ /* -- SHARED -- */ /* Super dims nav items and sizes them off the root, which climbs to 20px on wide screens. Both pinned here. */ .super-navbar__item, .super-navbar__list, .super-navbar__list-item-heading, .super-navigation-menu__item, .super-navigation-menu__item-title, .super-navigation-menu__list-header { opacity: 1 !important; } .super-navbar__item, .super-navbar__list, .super-navbar__list-item-heading { font-size: 0.85rem !important; } /* Mobile drawer titles scale with the viewport — px inside clamp(), since rem compounds with the fluid root size. */ .super-navigation-menu__item-title { font-size: clamp(19px, 4vw, 26px) !important; } /* -- DESKTOP NAVBAR -- */ .notion-link.super-navbar__logo { background: var(--smile-red); color: var(--surface-white); padding: 0 40px; margin-left: -10px; font-weight: 100 !important; } .notion-link.super-navbar__logo img { display: block; margin: auto; vertical-align: middle; } ul.super-navbar__item-list { padding: 8px; } /* Current page + hover. The About parent is deliberately absent — it opens the dropdown, it isn't a destination, so it stays black. Children handle their own hover below. */ .notion-link.super-navbar__item.active, a.super-navbar__item:hover, div.super-navbar__list-item-heading:hover { color: var(--smile-red) !important; } /* Dropdown rows — kill Super's grey pill */ .super-navbar__list-item:hover, .super-navbar__list-item:hover .super-navbar__list-item-heading { background: transparent !important; color: var(--smile-red) !important; } /* CTA — last item. Red fill and white label at rest, inverting on hover. ⚠️ Still the old red style — not yet brought over to the black 06 C. */ ul.super-navbar__item-list li:nth-last-child(1) { background: var(--smile-red); border: 2px solid var(--smile-red); border-radius: var(--radius-pill); transition: background 0.3s ease, transform 0.3s ease; } ul.super-navbar__item-list li:nth-last-child(1) a { color: var(--surface-white) !important; } ul.super-navbar__item-list li:nth-last-child(1):hover { transform: scale(1.05); background: var(--surface-white); } /* Beats the generic red hover on a.super-navbar__item above — same !important, higher specificity. */ ul.super-navbar__item-list li:nth-last-child(1):hover a { color: var(--smile-red) !important; } /* -- MOBILE DRAWER -- */ /* 900px, not 680px: Super swaps to the hamburger inside the tablet band. */ @media only screen and (max-width: 900px) { /* Contact is a mailto: link, so Super appends its external-link icon. Not wanted — the arrow in the label already signals the action. */ .super-navigation-menu__item .lucide-external-link { display: none !important; } /* The About submenu is opened by script in Body and Radix sets its height inline. A short height transition smooths that jump — Radix does not set one itself. */ .super-navigation-menu__list-items { transition: height 0.18s ease !important; overflow: hidden !important; } /* Chevron hidden — the script keeps the About submenu permanently open, so there is nothing to toggle. */ .super-navigation-menu__chevron { display: none !important; } /* About parent is a label, not a link — the child About row goes to the page. pointer-events: none stops a tap reaching Radix, which would collapse the submenu. The keep-expanded script still works: dispatched events ignore pointer-events. */ .super-navigation-menu__list-header { display: flex; align-items: center; pointer-events: none; } /* Row spacing. Padding rather than margin — Super may collapse margins between siblings, and padding also grows the tap target. */ .super-navigation-menu__item, .super-navigation-menu__list-header { padding-top: 0.5em !important; padding-bottom: 0.5em !important; } /* Title is a

, so the global 1rem margin-bottom throws off align-items and drops the chevron low. */ .super-navigation-menu__item-title { margin-bottom: 0 !important; } /* Hover — strip grey pill, go red. .__item covers entries with no submenu (Home); .__list-header covers parents. */ .super-navigation-menu__list-header:hover, .super-navigation-menu__item:hover, .super-navigation-menu__link:hover, .super-navigation-menu__item:hover .super-navigation-menu__item-title { background: transparent !important; } /* About parent absent — same reasoning as desktop. */ .super-navigation-menu__item:hover, .super-navigation-menu__link:hover, .super-navigation-menu__item:hover .super-navigation-menu__item-title { color: var(--smile-red) !important; } /* Current page — permanently red */ .super-navigation-menu__item.active, .super-navigation-menu__item.active .super-navigation-menu__item-content, .super-navigation-menu__item.active .super-navigation-menu__item-title { background: transparent !important; color: var(--smile-red) !important; } /* CTA — the mailto row. Old red style, same as the desktop CTA — not yet brought over to 06 C. Keyed off the href rather than position: the drawer's last child is not reliably Contact. Both rules beat the generic drawer hover above on specificity. */ .super-navigation-menu__item[href^="mailto:"] { display: inline-flex !important; align-items: center; width: fit-content; padding: 0.6em 1.4em; background: var(--smile-red) !important; border: 2px solid var(--smile-red); border-radius: var(--radius-pill); transition: background 0.3s ease, transform 0.3s ease; } .super-navigation-menu__item[href^="mailto:"] .super-navigation-menu__item-title { color: var(--surface-white) !important; } .super-navigation-menu__item[href^="mailto:"]:hover { transform: scale(1.05); background: var(--surface-white) !important; } .super-navigation-menu__item[href^="mailto:"]:hover .super-navigation-menu__item-title { color: var(--smile-red) !important; } } /* -- GEOTARGETED ACTIVE STATES -- */ /* Cloudflare serves several page IDs per destination, so Super only marks .active on the URL actually hit. These light up the right item on every variant. To add one: duplicate a body:has(#page-…) line. The href never changes. */ /* Home — /, /homepage, /home-page */ body:has(#page-index) .super-navbar__item[href="/"], body:has(#page-homepage) .super-navbar__item[href="/"], body:has(#page-home-page) .super-navbar__item[href="/"], body:has(#page-index) .super-navigation-menu__item[href="/"], body:has(#page-index) .super-navigation-menu__item[href="/"] .super-navigation-menu__item-title, body:has(#page-homepage) .super-navigation-menu__item[href="/"], body:has(#page-homepage) .super-navigation-menu__item[href="/"] .super-navigation-menu__item-title, body:has(#page-home-page) .super-navigation-menu__item[href="/"], body:has(#page-home-page) .super-navigation-menu__item[href="/"] .super-navigation-menu__item-title { color: var(--smile-red) !important; } /* About + VB + SC — dropdown children. About Us is a child now, so the parent is never reddened — same as VB and SC. */ body:has(#page-about) a[href="/about"], body:has(#page-about) a[href="/about"] .super-navbar__list-item-heading, body:has(#page-about) a[href="/about"] .super-navigation-menu__item-title, body:has(#page-venture-builder) a[href="/venture-builder"], body:has(#page-venture-builder) a[href="/venture-builder"] .super-navbar__list-item-heading, body:has(#page-venture-builder) a[href="/venture-builder"] .super-navigation-menu__item-title, body:has(#page-capital) a[href="/capital"], body:has(#page-capital) a[href="/capital"] .super-navbar__list-item-heading, body:has(#page-capital) a[href="/capital"] .super-navigation-menu__item-title { color: var(--smile-red) !important; } /* Market Entry — nav href is always /marketentry; Cloudflare swaps the page behind it, so only the ID varies. */ body:has(#page-marketentry) a[href="/marketentry"], body:has(#page-market-entry) a[href="/marketentry"], body:has(#page-marketentrypage) a[href="/marketentry"], body:has(#page-marketentry) a[href="/marketentry"] .super-navbar__list-item-heading, body:has(#page-market-entry) a[href="/marketentry"] .super-navbar__list-item-heading, body:has(#page-marketentrypage) a[href="/marketentry"] .super-navbar__list-item-heading, body:has(#page-marketentry) a[href="/marketentry"] .super-navigation-menu__item-title, body:has(#page-market-entry) a[href="/marketentry"] .super-navigation-menu__item-title, body:has(#page-marketentrypage) a[href="/marketentry"] .super-navigation-menu__item-title { color: var(--smile-red) !important; } /* ====================================== 05 · FOOTER ====================================== */ /* Icons sit red, go white on hover. opacity is load-bearing — Super dims footer icons the way it dims nav items, which mutes the red. */ .super-footer__icons, .super-footer__icons a { color: var(--smile-red); opacity: 1 !important; } .super-footer__icons a:hover { color: var(--surface-white); transition: color 0.2s ease; } /* Links sit muted, go red on hover. Everything else in the footer keeps its default colour. */ .super-footer__links a { color: var(--text-muted-mid); transition: color 0.2s ease; } /* Rows pointing at "/" are static labels — Super demands a URL, so they carry the homepage one. No hover state, so they don't read as links. */ .super-footer__links a:not([href="/"]):hover { color: var(--smile-red); } .super-footer__links a[href="/"] { pointer-events: none; cursor: default; } .super-footer__footnote { font-size: 0.8em !important; } /* Contact details stack as separate paragraphs, so the global 1rem p margin opens a body-copy gap between address and phone. Tighten to a line break. */ .super-footer p { margin-bottom: 0.25rem !important; } /* Link columns. Only one of .corners / .floating is present at a time — Super picks it from the footer layout setting, so both are listed. */ .super-footer.has-list .super-footer__links { display: grid !important; gap: 24px 32px !important; } /* Sized on the paragraph, not the wrapper — the global p rule beats an inherited size. */ .super-footer__links p { font-size: 0.8rem; } .super-footer.corners.has-list .super-footer__links, .super-footer.floating.has-list .super-footer__links { grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr)); } /* ====================================== 06 · BUTTONS Two styles x three alignments. The colour class carries BOTH — Notion allows only one class per button, so each combination spends its own colour. ====================================== */ /* -- A · BASE -- */ /* Shape only. Fill and label colour live in the variants, so the base hover does nothing but scale. Putting colours here was what forced every static variant to carry a defensive hover rule restating its own rest colours. */ .notion-button { opacity: 1; transition: all 0.3s ease; } .notion-button__content { display: inline-block; width: fit-content; padding: 0.6em 1.4em; border: 2px solid var(--main-black) !important; border-radius: var(--radius-pill); font-size: var(--button-text); transition: all 0.3s ease !important; } .notion-button__content:hover { transform: scale(1.05) !important; } /* -- B · ALIGNMENT -- */ /* On the WRAPPER, via :has(). The old blue rule used a descendant selector, which landed on the button itself and did nothing — the right-align came from a margin-left: auto that is now gone. */ .notion-button:has(.bg-red-light), .notion-button:has(.bg-green-light) { display: flex; justify-content: flex-start; } .notion-button:has(.bg-gray-light), .notion-button:has(.bg-yellow-light) { display: flex; justify-content: center; } /* Centre only — fills the container instead of hugging the label. The wrapper's justify-content is then moot; text-align does the centring inside. !important beats the base's fit-content. The mobile block in E overrides this back to fit-content below 680px. box-sizing keeps the 1.4em padding and 2px border inside the 100%, not added on top of it. */ .notion-button__content.bg-gray-light, .notion-button__content.bg-yellow-light { width: 100% !important; box-sizing: border-box !important; text-align: center; } .notion-button:has(.bg-blue-light), .notion-button:has(.bg-pink-light), .notion-button:has(.bg-brown-light) { display: flex; justify-content: flex-end; } /* -- C · PRIMARY -- */ /* Black fill and border, white label. Hover swaps both to red; label stays white. Border colour comes from the base at rest, so only the hover restates it. */ .notion-button__content.bg-red-light, .notion-button__content.bg-gray-light, .notion-button__content.bg-blue-light { background: var(--main-black) !important; color: var(--surface-white) !important; } .notion-button__content.bg-red-light:hover, .notion-button__content.bg-gray-light:hover, .notion-button__content.bg-blue-light:hover { background: var(--smile-red) !important; border-color: var(--smile-red) !important; color: var(--surface-white) !important; } /* -- D · SECONDARY -- */ /* No fill. Black border and label, both going red on hover. Background stays transparent throughout, so these sit on a grey card as readily as on white. */ .notion-button__content.bg-green-light, .notion-button__content.bg-yellow-light, .notion-button__content.bg-pink-light { background: transparent !important; color: var(--main-black) !important; } .notion-button__content.bg-green-light:hover, .notion-button__content.bg-yellow-light:hover, .notion-button__content.bg-pink-light:hover { background: transparent !important; border-color: var(--smile-red) !important; color: var(--smile-red) !important; } /* -- D2 · TEXT LINK -- */ /* Brown. No fill, no border: a bold red label that slides right on hover. Right-aligned (see B). Beats the base black border and scale hover in A on specificity. */ .notion-button__content.bg-brown-light { padding: 0.6em 0 !important; background: transparent !important; border: none !important; color: var(--smile-red) !important; font-weight: 700 !important; } .notion-button__content.bg-brown-light:hover { transform: translateX(12px) !important; } /* -- E · MOBILE -- */ /* All seven centred and text-width below 680px. Deliberate, not a gap. ⚠️ Gray and yellow named to match the specificity of their full-width rules in 06 B. A new full-width colour must be added here too. */ @media only screen and (max-width: 680px) { .notion-button { display: flex !important; justify-content: center !important; } .notion-button__content, .notion-button__content.bg-gray-light, .notion-button__content.bg-yellow-light { width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } } /* ====================================== 07 · TOGGLES ====================================== */ /* Super's arrow hidden site-wide. */ .notion-toggle__trigger { display: none; } .notion-toggle__summary { font-size: var(--h4) !important; font-weight: 400 !important; } /* Red — hides the toggle entirely. ("Hidden databases & pages" on Home) */ .notion-toggle.bg-red { display: none; } /* ====================================== 08 · CALLOUTS ====================================== */ /* -- A · LAYOUT WRAPPERS -- */ /* Invisible, but they rearrange what's inside: float-wrap layouts. */ /* DEFAULT + IMAGE: float-wrap hero */ /* Image floats right at 40%, text wraps around it. Stacks <=680px, two centred flex columns >=1100px. (Home clones, VB, ME, SC, Portfolio) Everything is nested inside the parent selector, so it applies only to a default callout containing an image. !important throughout — Notion sets inline widths on columns. */ .notion-callout.color-default:has(.notion-image) { border: none !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; overflow: visible !important; } .notion-callout.color-default:has(.notion-image) .notion-callout__content { display: block !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } .notion-callout.color-default:has(.notion-image) .notion-column-list { display: block !important; margin: 0 !important; overflow: visible !important; } .notion-callout.color-default:has(.notion-image) .notion-column { display: block !important; float: none; overflow: visible !important; } .notion-callout.color-default:has(.notion-image) { /* Image column — the floated element */ } .notion-callout.color-default:has(.notion-image) .notion-column:has(.notion-image) { float: right !important; width: 40% !important; margin: 0 0 0.5rem 2rem !important; background: transparent !important; } .notion-callout.color-default:has(.notion-image) { /* Text column — wraps around the float */ } .notion-callout.color-default:has(.notion-image) .notion-column:not(:has(.notion-image)) { width: 100% !important; max-width: 100% !important; margin-inline-start: 0 !important; } .notion-callout.color-default:has(.notion-image) .notion-callout.bg-red-light { display: inline-block !important; width: auto !important; } .notion-callout.color-default:has(.notion-image) .notion-button { clear: none !important; display: block !important; width: fit-content !important; margin-top: 0 !important; overflow: visible !important; } .notion-callout.color-default:has(.notion-image) .notion-button__content { display: inline-block !important; width: auto !important; overflow: visible !important; } .notion-callout.color-default:has(.notion-image) ul { margin-bottom: 0 !important; } /* Mobile — unwind the float and stack. Flex, so the image drops BELOW the text whatever the Notion source order. */ @media only screen and (max-width: 680px) { .notion-callout.color-default:has(.notion-image) .notion-column-list { display: flex !important; flex-direction: column !important; } .notion-callout.color-default:has(.notion-image) .notion-column:has(.notion-image) { float: none !important; width: 100% !important; margin: 0 0 1rem 0 !important; order: 1 !important; } .notion-callout.color-default:has(.notion-image) .notion-column:not(:has(.notion-image)) { width: 100% !important; margin-inline-start: 0 !important; order: 2 !important; } .notion-callout.color-default:has(.notion-image) .notion-button { display: flex !important; justify-content: center !important; width: 100% !important; } .notion-callout.color-default:has(.notion-image) .notion-button__content { width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } } /* Wide — swap the float for two flex columns so text sits vertically centred against the image. */ @media (min-width: 1100px) { .notion-callout.color-default:has(.notion-image) .notion-callout__content { display: flex !important; } .notion-callout.color-default:has(.notion-image) .notion-column-list { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 2rem; } .notion-callout.color-default:has(.notion-image) .notion-column { float: none !important; display: block !important; } .notion-callout.color-default:has(.notion-image) .notion-column:has(.notion-image) { flex: 0 0 40% !important; min-width: 0 !important; margin: 0 !important; order: 2 !important; } .notion-callout.color-default:has(.notion-image) .notion-column:not(:has(.notion-image)) { flex: 1 1 auto !important; min-width: 0 !important; margin-inline-start: 0 !important; order: 1 !important; } .notion-callout.color-default:has(.notion-image) { /* Centred buttons go full-width here. Safe because the float is gone at this width — two flex columns, so a button has nothing to slide under. */ } .notion-callout.color-default:has(.notion-image) .notion-button__content.bg-gray-light, .notion-callout.color-default:has(.notion-image) .notion-button__content.bg-yellow-light { width: 100% !important; } } /* Portfolio only — no float-wrap at any width. Text sits beside the image and centres against it instead of wrapping under. Below 681px it still stacks, via the mobile block above. */ @media (min-width: 681px) and (max-width: 1099px) { #page-portfolio .notion-callout.color-default:has(.notion-image) .notion-callout__content { display: flex !important; } #page-portfolio .notion-callout.color-default:has(.notion-image) .notion-column-list { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 2rem; } #page-portfolio .notion-callout.color-default:has(.notion-image) .notion-column { float: none !important; display: block !important; } #page-portfolio .notion-callout.color-default:has(.notion-image) .notion-column:has(.notion-image) { flex: 1 1 48% !important; min-width: 0 !important; margin: 0 !important; order: 1 !important; } #page-portfolio .notion-callout.color-default:has(.notion-image) .notion-column:not(:has(.notion-image)) { flex: 1 1 48% !important; min-width: 0 !important; margin-inline-start: 0 !important; order: 2 !important; } } @media (min-width: 1100px) { #page-portfolio .notion-callout.color-default:has(.notion-image) .notion-column:has(.notion-image) { order: 1 !important; } #page-portfolio .notion-callout.color-default:has(.notion-image) .notion-column:not(:has(.notion-image)) { order: 2 !important; } } /* DEFAULT + RED BOX: float-wrap */ /* Red callout floats right at 25%, text wraps around it. (About "Approach" box) The :not(:has(.notion-image)) is LOAD-BEARING — without it this collides with the image float-wrap above on any hero that contains both. */ .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) { border: none !important; padding: 0 !important; } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) .notion-callout__content { margin: 0 !important; padding: 0 !important; } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) .notion-column-list { display: block !important; margin: 0 !important; } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) { /* Red box column — the floated element */ } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) .notion-column:has(.notion-callout.bg-red-light) { float: right !important; width: 25% !important; margin: 0 0 1rem 2rem !important; } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) { /* Text column — wraps around the float */ } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) .notion-column:not(:has(.notion-callout.bg-red-light)) { width: 100% !important; margin-inline-start: 0 !important; display: block !important; flex: none !important; } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) { /* Gap below the last divider before the body text wraps under. */ } .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) .notion-callout.bg-red-light { padding-bottom: 0 !important; } /* Tablet — widen. At 25% the column collapses to ~90px here and the headings inside overflow. */ @media (min-width: 681px) and (max-width: 900px) { .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) .notion-column:has(.notion-callout.bg-red-light) { width: 35% !important; } } /* Mobile — hidden. Hide the COLUMN, not the callout: the column is what floats, so hiding its contents alone would leave a 25% float still reserving space. */ @media only screen and (max-width: 680px) { .notion-callout.color-default:has(.notion-callout.bg-red-light):not(:has(.notion-image)) .notion-column:has(.notion-callout.bg-red-light) { display: none !important; } } /* -- B · VISIBLE BOXES -- */ /* Wrappers you can see: they change the look of what's inside them. */ /* GRAY — the grey card. */ .notion-callout.bg-gray-light { background: var(--gray-blocks) !important; border-radius: var(--border-radius); padding: 20px; text-align: left; border: none !important; box-shadow: none !important; } /* Nested inside another callout, the parent can strip child backgrounds. Doubled class raises specificity so the grey survives. */ .notion-callout .notion-callout.bg-gray-light.bg-gray-light { background: var(--gray-blocks) !important; border-radius: var(--border-radius) !important; padding: 20px !important; } /* Two columns inside a grey card (Smile Scorecard) — min-height on paragraphs lines the dividers up across both. */ .notion-callout.bg-gray-light .notion-column-list > .notion-column { display: flex; flex-direction: column; } .notion-callout.bg-gray-light .notion-column-list > .notion-column > p { min-height: 3em; } /* Mobile — the left divider of each pair sits in an orange callout (group D) and vanishes, leaving its partner low. Tighten the survivor, collapse the column the hidden one left behind. */ @media only screen and (max-width: 680px) { .notion-callout.bg-gray-light .notion-column-list > .notion-column > .notion-divider { margin-top: 0 !important; margin-bottom: 8px !important; } .notion-callout.bg-gray-light .notion-column-list > .notion-column:has(> .notion-callout.bg-orange-light) { display: none !important; } } /* BROWN — grey card minus the grey. Notion's default callout padding, no fill, no border. Groups blocks with breathing room and no visible box. */ .notion-callout.bg-brown-light { background: transparent !important; border: none !important; box-shadow: none !important; } /* PINK — brown, but centred and with the padding removed too. Section headers. */ .notion-callout.bg-pink-light { background: transparent !important; text-align: center; padding: 0; border: 0; } .notion-callout.bg-pink-light, .notion-callout.bg-pink-light .notion-callout__content { overflow: visible !important; } /* -- C · DECORATIVE -- */ /* Visible wrapper does nothing; the styling lands on the contents. */ /* RED — slide-right link box */ /* Each heading link inside slides and turns red on its own hover. color + -webkit-text-fill-color move as a PAIR (see the blue system in 03). */ .notion-callout.bg-red-light { background: transparent !important; border: none !important; box-shadow: none !important; padding-left: 0 !important; padding-top: 0 !important; } .notion-callout.bg-red-light .notion-heading a { display: inline-block; text-decoration: none !important; color: var(--main-black) !important; -webkit-text-fill-color: var(--main-black) !important; transition: transform 0.2s ease, color 0.2s ease; } .notion-callout.bg-red-light .notion-heading:hover a { color: var(--smile-red) !important; -webkit-text-fill-color: var(--smile-red) !important; transform: translateX(12px); } /* GREEN — logo carousel */ /* Images sit greyscale at 40%, full colour on individual hover. (Home, Home-Page, Homepage) */ .notion-callout.bg-green-light { background-color: unset !important; border: unset; } .notion-callout.bg-green-light img { filter: grayscale(100%); opacity: 0.4; transition: filter 0.3s ease, opacity 0.3s ease; } .notion-callout.bg-green-light img:hover { filter: grayscale(0%); opacity: 1; } /* 5 per row, stepping down to 4, 3, 2. Notion's columns are ignored; each logo becomes a grid item. */ .notion-callout.bg-green-light .notion-column-list { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 2rem 1rem !important; align-items: center !important; } @media only screen and (max-width: 1099px) { .notion-callout.bg-green-light .notion-column-list { grid-template-columns: repeat(4, 1fr) !important; } } @media only screen and (max-width: 900px) { .notion-callout.bg-green-light .notion-column-list { grid-template-columns: repeat(3, 1fr) !important; } } @media only screen and (max-width: 680px) { .notion-callout.bg-green-light .notion-column-list { grid-template-columns: repeat(2, 1fr) !important; } } .notion-callout.bg-green-light .notion-column { display: contents !important; } .notion-callout.bg-green-light .notion-image, .notion-callout.bg-green-light .notion-image > span { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .notion-callout.bg-green-light .notion-column img { display: block !important; width: 100% !important; height: auto !important; object-fit: contain; margin: 0 auto !important; } /* YELLOW — logo grid. Greyscale until hover, like green, but no padding. 3 per row, 2 per row <=680px. Flex rather than grid (green uses grid) so a short last row sits centred. The -1px stops rounding pushing the third logo onto a new line. Keep all logos in ONE Notion column row so they reflow together. */ /* The callout box itself is removed — display: contents lets the logos sit in the page as if it wasn't there. The icon and the callout's own text line go too. */ .notion-callout.bg-yellow-light, .notion-callout.bg-yellow-light > .notion-callout__content { display: contents !important; } .notion-callout.bg-yellow-light > :not(.notion-callout__content), .notion-callout.bg-yellow-light .notion-callout__content > .notion-semantic-string { display: none !important; } .notion-callout.bg-yellow-light img { filter: grayscale(100%); opacity: 0.4; transition: filter 0.3s ease, opacity 0.3s ease; } .notion-callout.bg-yellow-light img:hover { filter: grayscale(0%); opacity: 1; } .notion-callout.bg-yellow-light .notion-column-list { margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 2rem !important; } .notion-callout.bg-yellow-light .notion-column { display: contents !important; } .notion-callout.bg-yellow-light .notion-image { flex: 0 0 calc((100% - 4rem) / 3 - 1px) !important; width: calc((100% - 4rem) / 3 - 1px) !important; max-width: calc((100% - 4rem) / 3 - 1px) !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .notion-callout.bg-yellow-light .notion-image > span { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .notion-callout.bg-yellow-light .notion-image img { display: block !important; width: 100% !important; height: auto !important; object-fit: contain; margin: 0 auto !important; } @media only screen and (max-width: 680px) { .notion-callout.bg-yellow-light .notion-image { flex-basis: calc((100% - 2rem) / 2 - 1px) !important; width: calc((100% - 2rem) / 2 - 1px) !important; max-width: calc((100% - 2rem) / 2 - 1px) !important; } } /* -- D · VISIBILITY -- */ /* Invisible pair, exact inverses. Used to show different content per breakpoint. */ /* ORANGE — desktop only */ /* Invisible. Margins zeroed so dividers inside align flush with plain dividers elsewhere on the page. */ .notion-callout.bg-orange-light { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } .notion-callout.bg-orange-light > .notion-callout__content { margin: 0 !important; padding: 0 !important; overflow: visible !important; } .notion-callout.bg-orange-light .notion-callout__content > .notion-divider { /* restated — the reset above flattens these to 0 */ margin-top: 8px !important; margin-bottom: 8px !important; } .notion-callout.bg-orange-light .notion-callout__content > .notion-semantic-string:empty { /* the empty callout text slot would otherwise reserve a line above the divider */ display: none !important; } @media only screen and (max-width: 680px) { .notion-callout.bg-orange-light { display: none !important; } } /* PURPLE — mobile only */ /* Exact inverse of orange. Visibility control only — no padding, margin, or border of its own. */ .notion-callout.bg-purple-light { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .notion-callout.bg-purple-light, .notion-callout.bg-purple-light .notion-callout__content { overflow: visible !important; } @media only screen and (min-width: 681px) { .notion-callout.bg-purple-light { display: none !important; } } /* ====================================== 09 · DIVIDERS ====================================== */ /* border-bottom has no colour of its own, so it inherits from `color` — that's why the colour is set separately rather than written into the border shorthand. Divider margins are restated in two places: orange callouts (08 D) and grey cards on mobile (08 B). */ .notion-divider { color: var(--divider-gray) !important; border-bottom: 1.8px solid; } /* ====================================== 10 · GALLERIES Three sizes, set per-database in Notion: large = Portfolio (logo only) medium = People small = VB people (medium, smaller grid) ====================================== */ /* ⚠️ PROPERTY HASHES .property-7049553c = Bio .property-523c663b = Job title These are Notion property IDs. Renaming a property in Notion is safe. DELETING and recreating one issues a NEW id and silently breaks these rules. */ /* -- A · ALL SIZES -- */ /* Cards are clickable — JS opens a lightbox. Super's own anchor is disabled so it can't navigate away first. */ .notion-collection-gallery .notion-collection-card { cursor: pointer; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .notion-collection-gallery .notion-collection-card:hover { transform: translateY(-8px); } .notion-collection-gallery .notion-collection-card .notion-collection-card__anchor { pointer-events: none; } /* Bio — lightbox only, never on the card */ .notion-collection-gallery .notion-collection-card .notion-property__text.property-7049553c { display: none; } /* -- B · LARGE (Portfolio) -- */ /* 5 per row on wide screens (1100px+). Below that, as many 260px cards as fit, never below 2 — min() shrinks the track to 45% on small screens. Logos only; all detail is in the lightbox. */ .notion-collection-gallery.large { grid-template-columns: repeat(auto-fit, minmax(min(260px, 45%), 1fr)) !important; } @media (min-width: 1100px) { .notion-collection-gallery.large { grid-template-columns: repeat(5, 1fr) !important; } } .notion-collection-gallery.large .notion-collection-card { border: 0 !important; box-shadow: none; background: var(--surface-white); } .notion-collection-gallery.large .notion-collection-card img { object-fit: contain; padding: 15px; } .notion-collection-gallery.large .notion-collection-card__property-list { display: none; } /* -- B2 · RELATIONSHIPS -- */ /* Same large gallery as Portfolio, tighter grid, no lightbox. Scoped to #page-relationships — the unscoped large rules above still own Portfolio. The JS in Head skips this page. The hover-lift in group A is kept deliberately. */ #page-relationships .notion-collection-gallery.large { grid-template-columns: repeat(auto-fit, minmax(min(200px, 45%), 1fr)) !important; } /* -- C · MEDIUM + SMALL (People, VB) -- */ /* Identical treatment; only grid sizing differs. Name and job title are hidden at rest and fade in on hover. The reveal uses OPACITY, not display, so hovering never changes a card's height and the grid never shifts. Trade-off: hidden text still reserves its space, so cards sit slightly taller than the photo. */ /* Card shell — strip Super's chrome */ .notion-collection-gallery.medium .notion-collection-card, .notion-collection-gallery.small .notion-collection-card { display: flex; flex-direction: column; border: none !important; box-shadow: none !important; outline: none !important; padding: 8px !important; background: transparent !important; } /* Cancel the hover-lift from group A — these cards reveal text instead */ .notion-collection-gallery.medium .notion-collection-card:hover, .notion-collection-gallery.small .notion-collection-card:hover { box-shadow: none !important; background-color: unset !important; transform: none !important; } /* Grid sizing — the only real difference between the two. ⚠️ 180px is deliberate: it gives one card per row on a phone. Don't shrink. */ .notion-collection-gallery.medium { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; padding: 4rem 1rem; gap: 1px 24px !important; } .notion-collection-gallery.small { grid-template-columns: repeat(4, 1fr) !important; padding: 1rem 1rem 0.5rem !important; gap: 1px 24px !important; } /* Mobile — 4rem is desktop breathing room; on a phone it's ~80px of dead space. */ @media only screen and (max-width: 680px) { .notion-collection-gallery.medium { padding: 1.5rem 0.5rem !important; } } /* Photo */ .notion-collection-gallery.medium .notion-collection-card__cover.medium, .notion-collection-gallery.small .notion-collection-card__cover.small { border-radius: 12px !important; aspect-ratio: 2/3.3 !important; width: 100% !important; height: auto !important; object-fit: cover !important; object-position: center top !important; } /* Hidden at rest — name and job title. min-height reserves a consistent slot whether or not the text wraps. */ .notion-collection-gallery.medium .notion-collection-card__property.title, .notion-collection-gallery.small .notion-collection-card__property.title { opacity: 0; transition: opacity 0.15s ease; min-height: 1.4em; line-height: 1.3 !important; text-align: center !important; justify-content: center; margin: 0 auto !important; font-size: 0.8rem !important; } .notion-collection-gallery.medium .notion-property__text, .notion-collection-gallery.small .notion-property__text { opacity: 0; transition: opacity 0.15s ease; min-height: 1.4em; line-height: 1.3 !important; } /* Revealed on hover */ .notion-collection-gallery.medium .notion-collection-card:hover .notion-collection-card__property.title, .notion-collection-gallery.medium .notion-collection-card:hover .notion-property__text.property-523c663b, .notion-collection-gallery.small .notion-collection-card:hover .notion-collection-card__property.title, .notion-collection-gallery.small .notion-collection-card:hover .notion-property__text.property-523c663b { opacity: 1 !important; } /* Centre the job title */ .notion-collection-gallery.medium p, .notion-collection-gallery.small p { text-align: center !important; justify-content: center; margin: 0 auto !important; font-size: 0.7rem !important; } /* Hidden properties — the file property feeds the hover-swap script in Super's Body code, not this file. LinkedIn and X belong in the lightbox only. */ .notion-collection-gallery.medium .notion-property__file, .notion-collection-gallery.small .notion-property__file { display: none; } .notion-collection-gallery.medium .notion-collection-card .notion-property__url, .notion-collection-gallery.small .notion-collection-card .notion-property__url { display: none !important; } /* Hover-swap photo — a second image the JS positions exactly over the cover and fades in on hover. */ .hover-swap-img { position: absolute; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2; border-radius: 12px; object-fit: cover; } .notion-collection-gallery.medium .notion-collection-card:hover .hover-swap-img, .notion-collection-gallery.small .notion-collection-card:hover .hover-swap-img { opacity: 1; } /* ====================================== 11 · LIGHTBOXES A JS-built overlay opened by clicking a gallery card. Markup is created empty on page load; JS adds .large or .medium at click time, then .active to fade it in. ====================================== */ /* At rest the overlay has NO size class, so it must be hidden outright — without this it renders as empty markup at the top of every page. */ .card-lightbox-overlay:not(.large):not(.medium) { display: none !important; } /* -- A · SHARED BY BOTH SIZES -- */ /* Backdrop. visibility has a 0.35s delay on close and 0s on open, so the panel finishes fading out before the overlay stops taking clicks. */ .card-lightbox-overlay.large, .card-lightbox-overlay.medium { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: auto; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); opacity: 0; visibility: hidden; transition: background 0.35s ease, backdrop-filter 0.35s ease, opacity 0.35s ease, visibility 0s 0.35s; } .card-lightbox-overlay.large.active, .card-lightbox-overlay.medium.active { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); opacity: 1; visibility: visible; transition: background 0.35s ease, backdrop-filter 0.35s ease, opacity 0.35s ease, visibility 0s 0s; } /* Close button — same in both sizes. Bare × , black, red on hover. The 32px box has no visible edge but keeps the tap target usable on a phone. */ .card-lightbox-overlay.large .card-lightbox-close, .card-lightbox-overlay.medium .card-lightbox-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--main-black); font-size: 28px; line-height: 1; cursor: pointer; transition: color 0.3s ease; } .card-lightbox-overlay.large .card-lightbox-close:hover, .card-lightbox-overlay.medium .card-lightbox-close:hover { color: var(--smile-red); } /* The slot is always in the markup — JS fills it or empties it. Left empty it still held its 20px margin, so every People and VB bio sat above a gap. */ .card-lightbox-overlay.large .card-lightbox-sec-desc:empty, .card-lightbox-overlay.medium .card-lightbox-sec-desc:empty { display: none; } /* Panel contents — same in both sizes. The panel itself differs (B and C); only what's inside is shared. */ .card-lightbox-overlay.large .card-lightbox-panel p, .card-lightbox-overlay.large .card-lightbox-panel a, .card-lightbox-overlay.large .card-lightbox-panel .heading, .card-lightbox-overlay.medium .card-lightbox-panel p, .card-lightbox-overlay.medium .card-lightbox-panel a, .card-lightbox-overlay.medium .card-lightbox-panel .heading { color: var(--main-black); } .card-lightbox-overlay.large .card-lightbox-panel .notion-pill, .card-lightbox-overlay.medium .card-lightbox-panel .notion-pill { padding: 8px 16px; margin-right: 0.8rem; border: 2px solid var(--main-black); border-radius: 24px; background: var(--surface-white); color: var(--main-black); font-size: var(--body); } .card-lightbox-overlay.large .card-lightbox-panel, .card-lightbox-overlay.medium .card-lightbox-panel { /* Weight matches the Portfolio filter pills (12 B). Children too — Super can wrap the label in its own span with a heavier weight. */ } .card-lightbox-overlay.large .card-lightbox-panel .notion-pill, .card-lightbox-overlay.large .card-lightbox-panel .notion-pill *, .card-lightbox-overlay.medium .card-lightbox-panel .notion-pill, .card-lightbox-overlay.medium .card-lightbox-panel .notion-pill * { font-weight: 500 !important; } /* -- B · LARGE (Portfolio) -- */ .card-lightbox-overlay.large .card-lightbox-panel { position: relative; width: 100%; max-width: 720px; max-height: 85vh; padding: 2.5rem; overflow-y: auto; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25); background: var(--surface-white); transform: translateY(20px) scale(0.97); opacity: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; /* Link sizing lives HERE — this nested selector beats the standalone rule below on specificity. */ } .card-lightbox-overlay.large .card-lightbox-panel .card-lightbox-link a { padding: 12px 0; border-radius: 24px; color: var(--smile-red); font-size: var(--body); } .card-lightbox-overlay.large.active .card-lightbox-panel { transform: translateY(0) scale(1); opacity: 1; } /* Logo — sits above the text, not beside */ .card-lightbox-overlay.large .card-lightbox-cover { display: block; width: 85%; height: auto; max-height: 260px; margin: 0 auto; object-fit: contain; object-position: center; } .card-lightbox-overlay.large .card-lightbox-body { padding: 0; } /* Always empty — Portfolio cards pass no name (see Head field map). */ .card-lightbox-overlay.large .card-lightbox-name { display: none; } /* Tag pills container. Flex keeps the pills aligned on their text rather than their boxes, and wrapping when there are several. */ .card-lightbox-overlay.large .card-lightbox-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 16px; color: inherit; font-size: var(--button-text); font-weight: 500; letter-spacing: normal; text-transform: none; } /* Empty unless the Portfolio checkbox is ticked. :empty collapses the slot so an unticked card has no gap. */ .card-lightbox-overlay.large .card-lightbox-exited:empty { display: none; } /* The extra .panel is load-bearing — it beats the shared `& p` colour rule in A, which matches this slot now that it is a

. Same trick as the job title in C. */ .card-lightbox-overlay.large .card-lightbox-panel .card-lightbox-exited { margin: 0 0 20px; color: var(--text-muted-mid); font-size: var(--body); font-weight: 500; } .card-lightbox-overlay.large .card-lightbox-desc, .card-lightbox-overlay.large .card-lightbox-sec-desc { margin: 0 0 20px; font-size: var(--body); line-height: 1.65; } /* "Website →" link. Sizing and colour are in the panel block above; this adds the slide-right hover. */ .card-lightbox-overlay.large .card-lightbox-link a { display: inline-block; margin-left: 0; text-decoration: none; font-weight: 500; transition: transform 0.2s ease, color 0.2s ease; } .card-lightbox-overlay.large .card-lightbox-link a:hover { transform: translateX(12px); } /* -- C · MEDIUM + SMALL (People, VB) -- */ /* Two columns: a 220px photo on the left, text on the right. The bio scrolls inside its own box; the panel doesn't. */ .card-lightbox-overlay.medium .card-lightbox-panel { position: relative; display: grid; grid-template-columns: 220px 1fr; grid-template-rows: minmax(0, 1fr); gap: 40px; align-items: stretch; width: 100%; max-width: 960px; max-height: 85vh; padding: 2.5rem; overflow: hidden; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25); background: var(--surface-white); transform: translateY(20px) scale(0.97); opacity: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } .card-lightbox-overlay.medium.active .card-lightbox-panel { transform: translateY(0) scale(1); opacity: 1; } /* LEFT COLUMN — photo + social icons */ .card-lightbox-overlay.medium .card-lightbox-media { grid-column: 1; display: flex; flex-direction: column; } .card-lightbox-overlay.medium .card-lightbox-cover { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 2/3.3; border-radius: 12px; object-fit: cover; object-position: center top; } .card-lightbox-overlay.medium .card-lightbox-social-links { display: flex; justify-content: center; gap: 20px; margin-top: 28px; } .card-lightbox-overlay.medium .card-lightbox-social-links a { display: flex; color: var(--main-black); transition: color 0.2s ease; } .card-lightbox-overlay.medium .card-lightbox-social-links a:hover { color: var(--smile-red); } /* RIGHT COLUMN — name, role, bio */ .card-lightbox-overlay.medium .card-lightbox-body { grid-column: 2; display: flex; flex-direction: column; min-height: 0; padding: 0; } .card-lightbox-overlay.medium .card-lightbox-name { margin: 0 0 4px; color: var(--main-black); font-family: var(--primary-font); font-size: var(--h3); font-weight: 700; line-height: 1.3; } .card-lightbox-overlay.medium .card-lightbox-role { margin: 0 0 16px; font-size: var(--button-text); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } /* Red job title. The extra .panel in the selector is load-bearing — it beats the shared `& p, & a` colour rule in A. */ .card-lightbox-overlay.medium .card-lightbox-panel .card-lightbox-role { color: var(--smile-red) !important; } /* BIO — scrolls inside its own box, with a red scrollbar and a fade at the bottom edge. JS toggles .is-scrollable and .at-bottom on the wrapper. */ .card-lightbox-overlay.medium .card-lightbox-desc-wrap { position: relative; flex: 1; min-height: 0; margin: 0 0 20px; } .card-lightbox-overlay.medium .card-lightbox-desc { height: 100%; margin: 0; padding-right: 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--smile-red) transparent; font-size: var(--body); line-height: 1.65; white-space: pre-wrap; } .card-lightbox-overlay.medium .card-lightbox-desc::-webkit-scrollbar { width: 6px; } .card-lightbox-overlay.medium .card-lightbox-desc::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--smile-red); } /* Fade — hidden unless the bio overflows, and hidden again once you reach the end */ .card-lightbox-overlay.medium .card-lightbox-desc-wrap::after { content: ""; position: absolute; bottom: 0; left: 0; right: 10px; height: 28px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255)); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; } .card-lightbox-overlay.medium .card-lightbox-desc-wrap.is-scrollable::after { opacity: 1; } .card-lightbox-overlay.medium .card-lightbox-desc-wrap.is-scrollable.at-bottom::after { opacity: 0; } .card-lightbox-overlay.medium .card-lightbox-sec-desc { margin: 0 0 20px; font-size: var(--body); line-height: 1.65; white-space: pre-wrap; } /* Text link unused here — the social icons in the left column replace it. */ .card-lightbox-overlay.medium .card-lightbox-link { display: none; } /* Mobile — stack into one column. The 220px photo column leaves the bio almost no width on a phone, so the grid collapses, the photo shrinks and centres, and the PANEL scrolls instead of the bio. That moves the scrollbar and the fade up from the bio box to the panel. */ @media only screen and (max-width: 680px) { .card-lightbox-overlay.medium .card-lightbox-panel { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 24px; padding: 2rem 1.5rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--smile-red) transparent; } .card-lightbox-overlay.medium .card-lightbox-panel::-webkit-scrollbar { width: 6px; } .card-lightbox-overlay.medium .card-lightbox-panel::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--smile-red); } .card-lightbox-overlay.medium .card-lightbox-media, .card-lightbox-overlay.medium .card-lightbox-body { grid-column: 1; } .card-lightbox-overlay.medium .card-lightbox-cover { max-width: 180px; margin: 0 auto; } /* Bio scrolls with the panel now, not in its own box — so drop its height cap, its scroll, and its fade. */ .card-lightbox-overlay.medium .card-lightbox-desc { height: auto; padding-right: 0; overflow-y: visible; } .card-lightbox-overlay.medium .card-lightbox-desc-wrap::after { display: none; } /* flex: 1 on desktop makes the wrapper fill the photo column's height. Here it must size to its own content, or it stretches and pushes the panel's bottom padding out of view. */ .card-lightbox-overlay.medium .card-lightbox-desc-wrap { flex: none; margin-bottom: 0; } .card-lightbox-overlay.medium .card-lightbox-body { display: block; min-height: 0; } /* Panel fade — sticky, so it stays pinned to the bottom edge while content moves under it. The negative bottom and margin pull it past the panel's 2rem padding to sit flush with the edge. */ .card-lightbox-overlay.medium.is-scrollable .card-lightbox-panel::after { content: ""; position: sticky; display: block; bottom: -2rem; left: 0; right: 0; height: 40px; margin-bottom: -2rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255)); pointer-events: none; opacity: 1; transition: opacity 0.2s ease; } .card-lightbox-overlay.medium.is-scrollable.at-bottom .card-lightbox-panel::after { opacity: 0; } } /* ====================================== 12 · PORTFOLIO VIEW SWITCHER Notion's database view dropdown, made into a row of red pill tabs on desktop and a restyled dropdown on mobile. (#page-portfolio) ====================================== */ /* -- A · KEYFRAMES -- */ /* CONFIRMED LIVE on mobile (tested 27 Aug 2026 — added a rotate and the panel swung in tilted). Super uses these by name; do not delete. The desktop block sets animation: none, so they only ever run below 681px. These same .animate-in / .animate-out classes drive the chevron flip in D. */ @keyframes dropdown-animation-in { 0% { opacity: 0; transform: translateY(-5%) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes dropdown-animation-out { 0% { opacity: 1; transform: translateY(0) scale(1); } to { z-index: -1; opacity: 0; transform: translateY(-5%) scale(0.95); } } /* -- B · BASE (both widths) -- */ /* Super's own header and icons, never wanted at any width. */ .notion-dropdown__menu-header, .notion-dropdown__option-icon, .notion-dropdown__button svg { display: none !important; } .notion-dropdown { width: 100% !important; } .notion-dropdown__button { width: 100% !important; } .notion-dropdown__menu-wrapper { margin-bottom: 25px !important; } .notion-dropdown__menu { width: 100% !important; transform: none !important; left: auto !important; top: auto !important; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.12) !important; } .notion-dropdown__option-list { padding: 0 !important; flex-wrap: wrap !important; } /* Tabs are pills, so the label takes the button token rather than a fixed px. */ .notion-dropdown__option p, .notion-dropdown__button-title { font-size: var(--button-text) !important; } /* Matches button text: body font (Inter) at 500. Super puts the tabs in the collection header, which uses its heavier heading font by default. */ .notion-dropdown__option, .notion-dropdown__option *, .notion-dropdown__button-title, .notion-dropdown__button-title * { font-family: var(--secondary-font) !important; font-weight: 500 !important; } /* -- C · DESKTOP: tab row -- */ /* Hide the trigger, force the menu open, strip its panel styling, and turn each option into a pill. ⚠️ 681px is load-bearing — it must butt exactly against the mobile block in D. At 624px the two overlapped and both the pill trigger AND the tab row rendered together between 624 and 680px. */ @media all and (min-width: 681px) { .notion-dropdown__button { display: none !important; } /* Menu is permanently open and inert — no animation, no panel chrome. */ .notion-dropdown__menu.initial-state { z-index: 1 !important; opacity: 1 !important; transform: none !important; } .notion-dropdown__menu.animate-in, .notion-dropdown__menu.animate-out, .notion-dropdown__menu.animate-in.animate-out { animation: none !important; } .notion-dropdown__menu { background: none !important; box-shadow: unset !important; position: relative !important; overflow: visible !important; } .notion-dropdown__option-list { display: flex !important; overflow: visible !important; } .notion-dropdown__menu-wrapper { margin-bottom: 10px !important; position: relative !important; } /* Tab pill — mirrors .notion-button__content */ .notion-dropdown__option { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 10px 10px 0 !important; padding: 12px 22px !important; background: transparent !important; border: 2px solid var(--smile-red) !important; border-radius: var(--radius-pill) !important; height: auto !important; min-height: 0 !important; line-height: 1.2 !important; box-sizing: border-box !important; transform-origin: center !important; will-change: transform; transition: background 0.3s ease, transform 0.3s ease !important; } .notion-dropdown__option p { margin: 0 !important; line-height: 1.2 !important; color: var(--main-black) !important; transition: color 0.3s ease !important; } /* Hover and selected both fill red */ .notion-dropdown__option:hover { background: var(--smile-red) !important; transform: scale(1.05) !important; } .notion-dropdown__option.active { background: var(--smile-red) !important; border: unset !important; } .notion-dropdown__option:hover p, .notion-dropdown__option.active p { color: var(--surface-white) !important; } } /* -- D · MOBILE: dropdown -- */ /* Below 681px the tab-row rules in C don't apply, so this stays a real dropdown — restyled to match the site's pills and the hamburger's hover behaviour. */ @media only screen and (max-width: 680px) { /* Closed trigger — a pill, matching .notion-button__content */ .notion-dropdown__button { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 22px !important; background: transparent !important; border: 2px solid var(--smile-red) !important; border-radius: var(--radius-pill) !important; transition: background 0.3s ease, color 0.3s ease !important; } .notion-dropdown__button-title { margin: 0 !important; line-height: 1.2 !important; transition: color 0.3s ease !important; } /* Chevron — drawn here because the sitewide toggle rule hides Super's. */ .notion-dropdown__button::after { content: ""; width: 8px; height: 8px; margin-left: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s ease; flex: none; } /* Open state — Super marks the MENU, not the button. .animate-in appears on open; .animate-out joins it while closing, so genuinely-open is animate-in WITHOUT animate-out. Reached from the button via :has() on their shared .notion-dropdown parent. (aria-expanded never fired.) */ .notion-dropdown:has(.notion-dropdown__menu.animate-in:not(.animate-out)) .notion-dropdown__button::after { transform: rotate(-135deg) translate(-2px, -2px); } /* Hover — red fill, only while closed. No scale: the trigger is full-width, so 1.05 would push past the viewport. */ .notion-dropdown:not(:has(.notion-dropdown__menu.animate-in:not(.animate-out))) .notion-dropdown__button:hover, .notion-dropdown:not(:has(.notion-dropdown__menu.animate-in:not(.animate-out))) .notion-dropdown__button:hover .notion-dropdown__button-title { background: var(--smile-red) !important; color: var(--surface-white) !important; } /* Open menu — plain white panel */ .notion-dropdown__menu { border-radius: var(--border-radius) !important; padding: 8px 0 !important; background: var(--surface-white) !important; } /* Rows — no grey pill, red on hover */ .notion-dropdown__option { display: flex !important; align-items: center !important; min-height: 44px !important; padding: 0 22px !important; background: transparent !important; transition: color 0.2s ease !important; } .notion-dropdown__option p { margin: 0 !important; line-height: 1.2 !important; transition: color 0.2s ease !important; } /* Hover and selected both go red */ .notion-dropdown__option:hover, .notion-dropdown__option:hover p, .notion-dropdown__option.active, .notion-dropdown__option.active p { background: transparent !important; color: var(--smile-red) !important; } } /* ====================================== 13 · HOME FLIPBOOK JS in Head code builds the book from the images in the blue callout, then inserts it just above. The callout is the source and is hidden here. Runs on Home and Values. Home is served as three page IDs (Cloudflare clones), so four IDs are listed — same pattern as section 04. ====================================== */ /* Source images — hidden, not removed. display: none would stop Super loading them and the script would find nothing. */ #page-index .notion-callout.bg-blue-light, #page-homepage .notion-callout.bg-blue-light, #page-home-page .notion-callout.bg-blue-light, #page-values .notion-callout.bg-blue-light { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; } /* Breaks out of Notion's narrow content column. left + translate re-centres it after the width escapes the parent. */ #values-flipbook { position: relative; left: 50%; transform: translateX(-50%); width: min(1000px, 92vw); margin: 2rem 0 3rem; } .values-flipbook-stage { position: relative; } /* Covers sit in place — front cover on the right half, back cover on the left. The book does NOT slide to centre them. ::before masks the empty half StPageFlip still paints. Assumes a white page behind. --page-w is set by the script. */ .values-flipbook-stage.at-first::before, .values-flipbook-stage.at-last::before { content: ""; position: absolute; top: 0; bottom: 0; width: var(--page-w); z-index: 3; background: var(--surface-white); pointer-events: none; opacity: 1; transition: opacity 0.35s ease; } /* at-first: cover on the RIGHT half, blank on the left. at-last is the mirror. */ .values-flipbook-stage.at-first::before { left: 0; } .values-flipbook-stage.at-last::before { right: 0; } .values-flipbook-stage.is-flipping::before { opacity: 0; } .values-flipbook-page { background: var(--surface-white); } .values-flipbook-page img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Shadow on the book, not the pages — they move independently. On a cover it moves to the page so it doesn't outline the mask. */ #values-flipbook-book { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); } .values-flipbook-stage.at-first #values-flipbook-book, .values-flipbook-stage.at-last #values-flipbook-book { box-shadow: none; } .values-flipbook-stage.at-first .values-flipbook-page, .values-flipbook-stage.at-last .values-flipbook-page { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); } /* Invisible click strips down each vertical edge. Inset top and bottom so the library's own corner-drag zones stay reachable. */ .values-flipbook-edge { position: absolute; top: 60px; bottom: 60px; width: 40px; z-index: 2; padding: 0; background: transparent; border: none; cursor: pointer; } .values-flipbook-edge.left { left: 0; } .values-flipbook-edge.right { right: 0; } /* Disabled at the ends — the script sets the attribute. */ .values-flipbook-edge[disabled] { cursor: default; pointer-events: none; } /* Nav row — matches the secondary buttons in 06 D: no fill, black border and arrow, both going red on hover. */ .values-flipbook-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; } .values-flipbook-nav button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 2px solid var(--main-black); border-radius: var(--radius-pill); color: var(--main-black); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: all 0.3s ease; } .values-flipbook-nav button:hover { transform: scale(1.05); border-color: var(--smile-red); color: var(--smile-red); } .values-flipbook-nav button[disabled] { opacity: 0.35; cursor: default; transform: none; } .values-flipbook-nav button[disabled]:hover { transform: none; border-color: var(--main-black); color: var(--main-black); } .values-flipbook-count { min-width: 60px; font-size: var(--button-text); text-align: center; }19:["$","body",null,{"children":[["$","$L1c",null,{"settings":{"siteId":"e5bc215f-f301-4d23-8796-11730b0f3ec8","userId":"null","domainName":"smile.group","name":"Smile Group","active":true,"free":false,"tier":"personal","favicon":"https://assets.super.so/e5bc215f-f301-4d23-8796-11730b0f3ec8/uploads/favicon/6539b9fa-1b38-4af7-be58-3ba048af2e3f.png","fontFamily":"Inter","legacyTheme":null,"language":"en","languages":[],"notionPage":"241ae3517dd38047bd34c315a341c0c5","indexPageId":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::4393f371-d744-478f-8db1-866848f4a5d2","pageProperties":true,"hidePageProperties":false,"disablePageProperties":false,"pageSyncing":true,"viewSwitcher":true,"layoutSidePanel":true,"floatingTableOfContents":false,"siteSearch":false,"advancedSearch":false,"themeToggle":false,"mondayFirst":false,"loadLimits":false,"hidePersonInfo":false,"showPropertyIcons":true,"filterRedirectsFromSearch":false,"redirectSubdomain":null,"noIndex":false,"viewsExceeded":false,"cacheTTL":0,"manualSync":false,"syncStatus":"unsynced","publishedAt":null,"custom404Enabled":false,"membershipEnabled":false,"membershipConfigured":false,"suppressLoginEmail":false,"indexMembershipTierIds":null,"navbar":{"type":"simple","style":{"height":56,"textColor":"var(--color-text-default)","backgroundColor":"var(--color-bg-default)","ctaTextColor":"var(--color-text-default)","ctaBackgroundColor":"var(--color-bg-default)","isSticky":true,"shadow":{"type":"none","color":"rgba(0,0,0,1)","opacity":12}},"links":[{"id":"f3461dfd-faac-4988-9daf-1687c30b647b","type":"list","label":"About","icon":"","list":[{"id":"6ed48dab-2faa-4afe-b2ca-ed3a0cd63865","type":"page","label":"About","link":"/about","pageId":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::024788f5-3b0b-4b2e-aad2-8634667ddff6","icon":"","description":"","list":[]},{"id":"dc31d2fd-02d6-40d2-8fa8-b6d6b928c734","type":"page","label":"Market Entry","link":"/marketentry","pageId":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::7de909d8-722a-4f79-95b9-c6b21aac7cea","icon":"","description":"","list":[]},{"id":"456fe535-626f-4593-aba3-44c440e27b66","type":"page","label":"Capital","link":"/capital","pageId":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::9fa2517d-d3e3-43a3-941d-ef5b5b6983ee","icon":"","description":"","list":[]},{"id":"911510ba-7337-461a-afae-e33bffe71a25","type":"page","label":"Venture Builder","link":"/venture-builder","pageId":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::3f813707-f1bf-4be5-b103-e9e79441b43d","icon":"","description":"","list":[]}]},{"id":"f0e26cac-fcf0-4275-baa4-9c2454c736bb","type":"page","label":"Portfolio","link":"/portfolio","pageId":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::6c202e22-6f23-421a-9769-721e78a57bb0","icon":"","list":[]},{"id":"c513d32b-519a-4cf1-80e9-6af56b2b439b","type":"url","label":"Contact >","link":"mailto:info@smile.group","icon":"","list":[]}],"logo":{"type":"image","width":180,"fontSize":35,"textContent":"smile group","imageContent":"https://assets.super.so/e5bc215f-f301-4d23-8796-11730b0f3ec8/uploads/logo/16207ddc-06f0-4e78-b3c7-d3c01b29e600.svg","imageContentDark":null,"disabled":false},"cta":{"type":"page","label":"","link":"","pageId":""},"isSticky":true,"breadcrumbs":false},"footer":{"type":"corners","style":{"textColor":"var(--color-text-default)","backgroundColor":"var(--color-bg-default)"},"links":[{"id":"c6d554df-925f-4dd7-854f-733a89f0432f","type":"list","label":"Headquarters | Singapore","icon":"","list":[{"id":"b56b08ac-2c69-4d7d-a9f6-3fa5dd7ff36d","type":"url","label":"#22-02, One George Street , Singapore 049145","link":"https://maps.app.goo.gl/XJchp8JVUJF265wRA","icon":"","description":"","list":[]}]},{"id":"3e74028c-8767-4a22-b68b-ce0e7192b54e","type":"list","label":"Founding Campus | India","icon":"","list":[{"id":"4e44ed29-48bb-4e0e-8c19-82becaf6fc4a","type":"url","label":"241, Udyog Vihar Phase 1, Udyog Vihar, Sector 20, Gurugram, Haryana 122016","link":"https://maps.app.goo.gl/eWWYp4bR3F4aStqS7","icon":"","description":"","list":[]}]},{"id":"7a73aa0a-b62c-4a75-a6ec-4f677e0cee00","type":"list","label":"Offices","icon":"","list":[{"id":"3dffa281-69b7-46dc-be73-f1ab8e0eac91","type":"url","label":"Shanghai | Tokyo | Seoul | Jakarta | Manila | Bangkok | Kuala Lumpur | Abu Dhabi","link":"/","icon":"","description":"","list":[]}]}],"logo":{"type":"image","width":180,"fontSize":34,"textContent":"smile group","imageContent":"https://assets.super.so/e5bc215f-f301-4d23-8796-11730b0f3ec8/uploads/logo/02e0ddef-a437-48ff-96ba-5ba3d62218f3.svg","imageContentDark":null,"disabled":false},"socials":[{"type":"linkedin","link":"https://www.linkedin.com/company/wearesmilegroup"},{"type":"twitter","link":"https://x.com/wearesmilegroup"}],"footnote":"Copyright © 2026 Smile Group. All rights reserved.","divider":false},"sidebar":{"enabled":false,"links":[],"cta":[],"logo":null,"searchEnabled":true},"theme":{"colorMode":"light","layout":{"paddingLayout":0.9,"layoutMaxWidth":1300,"columnSpacing":46,"borderThicknessLayout":1,"borderTypeLayout":"solid","borderRadiiLayout":5,"pageDisplay":"flex"},"header":{"coverHeight":30,"titleAlign":"left","iconAlign":"-112px auto auto auto","display":"none"},"collectionCard":{"gap":10,"shadow":"rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px","coverHeightLarge":200,"coverHeightMedium":200,"coverHeightSmall":128,"titleSize":0.875,"coverSizeSmall":172,"coverSizeMedium":260,"coverSizeLarge":320,"iconDisplay":"inline-flex"},"callout":{"iconDisplay":"block","shadow":"none"},"typography":{"primaryFont":"Inter","secondaryFont":"Inter","fonts":[],"baseSize":16,"titleSize":2.5,"headingSize":1,"quoteSize":1.2,"quoteSizeLarge":1.4,"textWeight":400,"headingWeight":600},"scrollbar":{"width":15},"navbar":{"height":56,"shadow":"rgba(0, 0, 0, 0.12) 0px 4px 8px -2px"},"footer":{"height":0},"sidebar":{"width":280,"shadow":"none"},"colors":{"light":{"text":"#37352F","textLight":"#7d7c78","background":"#ffffff","borderColor":"#E9E9E7","checkboxBackground":"#2EAADC","hoverBackground":"#efefef","scrollbar":{"background":"#FAFAFA","handle":"#C1C1C1","border":"#E8E8E8"},"navbar":{"text":"#37352F","background":"#ffffff","buttonText":"#ffffff","buttonBackground":"#37352F","hoverBackground":null},"footer":{"text":"#ffffff","background":"#000000","buttonText":"#ffffff","buttonBackground":"#37352F"},"sidebar":{"text":"#37352F","ctaText":"#37352F","background":"#ffffff","hoverBackground":"#efefef","ctaBackground":"#ffffff","border":"#E9E9E7"},"database":{"cardBackground":"#ffffff","cardHoverBackground":"#f9f9f8","calendarWeekendBackground":"#f7f6f3"},"default":[45,8,20],"gray":[36,2,46],"brown":[19,31,47],"orange":[30,87,45],"yellow":[38,62,49],"green":[149,31,39],"blue":[202,53,43],"purple":[274,32,54],"pink":[328,48,53],"red":[2,62,55],"form":{"submitButton":{"default":"#55534E","gray":"#A7A39A","brown":"#9A6851","orange":"#D9730D","yellow":"#CA922F","green":"#448361","blue":"#327DA9","purple":"#8F64AF","pink":"#C24C8B","red":"#D44E49"}}},"dark":{"text":"#e1e1e1","textLight":"#9b9b9b","background":"#ffffff","borderColor":"#373737","checkboxBackground":"#2EAADC","hoverBackground":"#292929","scrollbar":{"background":"#FAFAFA","handle":"#C1C1C1","border":"#E8E8E8"},"navbar":{"text":"#e1e1e1","background":"#191919","buttonText":"#191919","buttonBackground":"#e1e1e1","hoverBackground":null},"footer":{"text":"#e1e1e1","background":"#191919","buttonText":"#191919","buttonBackground":"#e1e1e1"},"sidebar":{"text":"#e1e1e1","ctaText":"#e1e1e1","background":"#191919","hoverBackground":"#292929","ctaBackground":"#191919","border":"#373737"},"database":{"cardBackground":"#212121","cardHoverBackground":"#292929","calendarWeekendBackground":"#202020"},"form":{"submitButton":{"default":"#55534E","gray":"#A7A39A","brown":"#9A6851","orange":"#D9730D","yellow":"#CA922F","green":"#448361","blue":"#327DA9","purple":"#8F64AF","pink":"#C24C8B","red":"#D44E49"}},"default":[45,8,20],"gray":[0,0,61],"brown":[18,35,58],"orange":[25,54,53],"yellow":[38,54,54],"green":[146,32,47],"blue":[217,50,58],"purple":[270,55,62],"pink":[329,57,58],"red":[1,69,60]}}},"code":{"global":[{"id":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::365fa9d8-e11c-488a-bb1a-fdb6604c3d34","content":"$1d"}],"head":[],"body":[{"id":"e5bc215f-f301-4d23-8796-11730b0f3ec8:::7ac541c8-7346-467f-a8c0-3e81186f7337","content":"$1e"}],"style":[],"css":"$1f"},"files":[]},"config":{"assetEndpoint":"https://assets.super.so","isPreview":false},"domainQueryParam":"$undefined","children":[null,"$L20","$L21","$L22","$L23"]}],"$L24"]}]

Activate