/* ============================================================ CRE Resources, LLC — Super.so Custom CSS Purpose: Make Super.so site match Notion page appearance Domain: creresources.biz INSTRUCTIONS: 1. Go to app.super.so → Your Site → CODE (left sidebar) 2. Click the CSS tab 3. Paste this entire file 4. Click Save 5. Republish your site ============================================================ */ /* ============================================================ 1. GLOBAL COLOR VARIABLES & FOUNDATION Match Notion's default light-mode palette ============================================================ */ :root { /* Notion's default page background */ --color-bg-default: #FFFFFF !important; /* Notion's default text color */ --color-text-default: #37352F !important; /* CRE Resources brand colors (from your Notion page) */ --cre-navy: #1B2A4A; --cre-gold: #C5A55A; --cre-green-accent: #2E7D32; --cre-blue-accent: #0B6E99; --cre-light-bg: #FFFFFF; --cre-off-white: #F7F6F3; --cre-text-primary: #37352F; --cre-text-secondary: #6B6B6B; --cre-border: #E9E9E7; } /* ============================================================ 2. PAGE BACKGROUND & CONTENT AREA Clean white background matching Notion ============================================================ */ body { background-color: #FFFFFF !important; color: #37352F !important; } .super-content { background-color: #FFFFFF !important; } /* Match Notion's content width (~900px centered) */ .super-content.max-width { max-width: 900px !important; margin: 0 auto !important; padding-left: 24px !important; padding-right: 24px !important; } /* ============================================================ 3. NAVBAR — Clean, Notion-style top navigation Replaces the gold/purple bar with a clean look ============================================================ */ .super-navbar { background-color: #FFFFFF !important; border-bottom: 1px solid #E9E9E7 !important; box-shadow: none !important; padding: 12px 24px !important; } /* Navbar links — clean dark text like Notion */ .super-navbar__item { color: #37352F !important; font-weight: 500 !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; padding: 6px 12px !important; border-radius: 4px !important; transition: background-color 0.15s ease !important; } .super-navbar__item:hover { background-color: #F1F1EF !important; color: #37352F !important; text-decoration: none !important; } /* Navbar logo styling */ .super-navbar__logo { text-decoration: none !important; } .super-navbar__logo-text { color: #37352F !important; font-weight: 600 !important; font-size: 16px !important; } /* CTA button in navbar (if any) */ .super-navbar__cta { background-color: #0B6E99 !important; color: #FFFFFF !important; border-radius: 4px !important; padding: 6px 16px !important; font-weight: 500 !important; font-size: 14px !important; border: none !important; } .super-navbar__cta:hover { background-color: #095A7D !important; } /* Mobile menu styling */ .super-navbar__menu { background-color: #FFFFFF !important; border: 1px solid #E9E9E7 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; } .super-navbar__menu-item { color: #37352F !important; font-size: 14px !important; font-weight: 500 !important; } .super-navbar__menu-item:hover { background-color: #F1F1EF !important; } /* ============================================================ 4. PAGE HEADER — Cover image & title area Match Notion's native cover + icon layout ============================================================ */ .notion-header { margin-bottom: 0 !important; } .notion-header__cover { width: 100% !important; max-height: 30vh !important; object-fit: cover !important; border-radius: 0 !important; } /* Page title — match Notion's large bold heading */ .notion-header__title { font-size: 40px !important; font-weight: 700 !important; color: #37352F !important; line-height: 1.2 !important; margin-top: 16px !important; padding: 0 !important; } /* Hide the Notion header title if you're using content headings instead */ /* .notion-header__title-wrapper { display: none !important; } */ /* ============================================================ 5. TYPOGRAPHY — Match Notion's native fonts & sizes ============================================================ */ /* Headings — Notion uses a system serif for headings by default, but your page appears to use the sans-serif option */ h1.notion-heading { font-size: 30px !important; font-weight: 700 !important; color: #37352F !important; line-height: 1.3 !important; margin-top: 2em !important; margin-bottom: 0.25em !important; } h2.notion-heading { font-size: 24px !important; font-weight: 600 !important; color: #37352F !important; line-height: 1.3 !important; margin-top: 1.5em !important; margin-bottom: 0.25em !important; } h3.notion-heading { font-size: 20px !important; font-weight: 600 !important; color: #37352F !important; line-height: 1.3 !important; margin-top: 1.25em !important; margin-bottom: 0.25em !important; } /* Body text */ .notion-text__content { font-size: 16px !important; line-height: 1.6 !important; color: #37352F !important; } /* Bold text emphasis */ .notion-text__content strong, .notion-text__content b { font-weight: 600 !important; } /* Links — Notion uses a subtle underline style */ .notion-link { color: #37352F !important; text-decoration: underline !important; text-decoration-color: rgba(55, 53, 47, 0.4) !important; text-underline-offset: 2px !important; } .notion-link:hover { text-decoration-color: rgba(55, 53, 47, 0.8) !important; } /* ============================================================ 6. COLUMNS & LAYOUT — Notion-native spacing ============================================================ */ .notion-column-list { gap: 24px !important; } .notion-column { padding: 0 !important; } /* ============================================================ 7. CALLOUT BLOCKS — Match Notion's default callout style ============================================================ */ .notion-callout { background-color: #F7F6F3 !important; border: none !important; border-radius: 4px !important; padding: 16px !important; margin: 8px 0 !important; } .notion-callout__icon { font-size: 20px !important; margin-right: 8px !important; } .notion-callout__content { font-size: 16px !important; line-height: 1.6 !important; color: #37352F !important; } /* ============================================================ 8. IMAGES — Clean rendering like Notion ============================================================ */ .notion-image { border-radius: 0 !important; overflow: hidden !important; margin: 8px 0 !important; } .notion-image img { max-width: 100% !important; height: auto !important; border-radius: 0 !important; } /* Caption below images */ .notion-caption { font-size: 14px !important; color: #9B9A97 !important; margin-top: 6px !important; } /* ============================================================ 9. DIVIDERS — Notion's simple thin line ============================================================ */ .notion-divider { border-top: 1px solid #E9E9E7 !important; margin: 16px 0 !important; } /* ============================================================ 10. TOGGLE BLOCKS ============================================================ */ .notion-toggle { margin: 4px 0 !important; } .notion-toggle__summary { font-size: 16px !important; font-weight: 500 !important; color: #37352F !important; cursor: pointer !important; } .notion-toggle__content { padding-left: 24px !important; color: #37352F !important; } /* ============================================================ 11. QUOTE BLOCKS ============================================================ */ .notion-quote { border-left: 3px solid #37352F !important; padding-left: 16px !important; font-size: 18px !important; color: #37352F !important; } /* ============================================================ 12. BULLET & NUMBERED LISTS ============================================================ */ .notion-bulleted-list, .notion-numbered-list { margin: 4px 0 !important; } .notion-list-item { font-size: 16px !important; line-height: 1.6 !important; color: #37352F !important; padding: 2px 0 !important; } /* ============================================================ 13. PAGE LINKS / SUB-PAGES — Notion's native page block style ============================================================ */ .notion-page { border-radius: 4px !important; padding: 4px 8px !important; transition: background-color 0.15s ease !important; } .notion-page:hover { background-color: #F1F1EF !important; } .notion-page__title { font-size: 16px !important; color: #37352F !important; font-weight: 400 !important; } .notion-page__icon { font-size: 18px !important; margin-right: 6px !important; } /* ============================================================ 14. BOOKMARK BLOCKS ============================================================ */ .notion-bookmark { border: 1px solid #E9E9E7 !important; border-radius: 4px !important; overflow: hidden !important; box-shadow: none !important; } .notion-bookmark:hover { background-color: #F7F6F3 !important; } .notion-bookmark__title { font-size: 14px !important; font-weight: 500 !important; color: #37352F !important; } .notion-bookmark__description { font-size: 13px !important; color: #9B9A97 !important; } /* ============================================================ 15. DATABASE / COLLECTION BLOCKS ============================================================ */ .notion-collection__header { font-size: 18px !important; font-weight: 600 !important; color: #37352F !important; } /* Gallery cards */ .notion-collection-card__content { padding: 8px !important; } .notion-collection-card__cover img { border-radius: 0 !important; } /* Table styling */ .notion-collection-table__cell { font-size: 14px !important; border-color: #E9E9E7 !important; } /* ============================================================ 16. FOOTER — Clean, Notion-aligned footer ============================================================ */ .super-footer { background-color: #FFFFFF !important; border-top: 1px solid #E9E9E7 !important; padding: 24px !important; margin-top: 48px !important; } .super-footer__link { color: #37352F !important; font-size: 14px !important; font-weight: 400 !important; } .super-footer__link:hover { text-decoration: underline !important; } .super-footer__footnote { color: #9B9A97 !important; font-size: 13px !important; } .super-footer__icons svg, .super-footer__icons img { opacity: 0.6 !important; transition: opacity 0.15s ease !important; } .super-footer__icons svg:hover, .super-footer__icons img:hover { opacity: 1 !important; } /* ============================================================ 17. NOTION COLOR OVERRIDES — Keep Notion's native palette These ensure colored text/backgrounds render correctly ============================================================ */ /* No overrides needed — we want Notion's default colors */ /* If you need to tweak a specific color, uncomment and edit: */ /* --color-text-blue: #0B6E99 !important; --color-text-green: #0F7B6C !important; --color-text-orange: #D9730D !important; --color-text-yellow: #DFAB01 !important; --color-text-red: #E03E3E !important; --color-text-purple: #6940A5 !important; */ /* ============================================================ 18. SEARCH MODAL — Clean Notion-like search ============================================================ */ .notion-search__wrapper { background-color: rgba(0, 0, 0, 0.4) !important; } .notion-search__box { background-color: #FFFFFF !important; border: 1px solid #E9E9E7 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } .notion-search__input > input { font-size: 16px !important; color: #37352F !important; } .notion-search__result-item { border-radius: 4px !important; } .notion-search__result-item:hover { background-color: #F1F1EF !important; } /* ============================================================ 19. RESPONSIVE / MOBILE ADJUSTMENTS ============================================================ */ @media (max-width: 768px) { .super-content.max-width { padding-left: 16px !important; padding-right: 16px !important; } .notion-header__title { font-size: 28px !important; } h1.notion-heading { font-size: 24px !important; } h2.notion-heading { font-size: 20px !important; } h3.notion-heading { font-size: 18px !important; } .notion-column-list { flex-direction: column !important; gap: 16px !important; } .super-navbar { padding: 8px 16px !important; } } /* ============================================================ 20. SCROLLBAR — Subtle like Notion ============================================================ */ ::-webkit-scrollbar { width: 10px !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background: #D3D1CB !important; border-radius: 10px !important; border: 2px solid #FFFFFF !important; } ::-webkit-scrollbar-thumb:hover { background: #AEACA6 !important; } /* ============================================================ END OF CUSTOM CSS AFTER PASTING: 1. Save in Super.so CODE → CSS tab 2. Go to DESIGN in the left sidebar: - Set Default color mode to LIGHT - Set Primary font to match your Notion page (likely "Default" or a system sans-serif) - Set Cover height to ~30vh or "Medium" 3. Go to NAVIGATION: - Update nav links to match your current pages - Remove any stale links 4. Republish all pages (Manual Publishing → select all → Publish) 5. Clear browser cache and test ============================================================ */