2a:T2313,@charset "UTF-8"; /* ════════════════════════════════════════════ MATHIASCELIS.COM — FULL CUSTOM CSS v6 ════════════════════════════════════════════ */ /* ── 1. Base typography & polish ── */ html { font-size: 16px; scroll-behavior: smooth; } body { overflow-x: clip; } h1, .notion-heading { letter-spacing: -0.02em; } .notion-image img, .notion-page__cover { border-radius: 14px; } ::selection { background: #26697B; color: #FBFFFF; } /* ── 2. Soft brand-colored glow behind everything ── */ body { background-color: var(--color-bg-default) !important; background-image: radial-gradient(600px 400px at 15% 10%, rgba(38, 105, 123, 0.1), transparent 70%), radial-gradient(700px 500px at 85% 35%, rgba(129, 189, 208, 0.12), transparent 70%), radial-gradient(600px 450px at 30% 80%, rgba(86, 127, 145, 0.08), transparent 70%); background-attachment: fixed; } html.theme-dark body { background-image: radial-gradient(600px 400px at 15% 10%, rgba(129, 189, 208, 0.08), transparent 70%), radial-gradient(700px 500px at 85% 35%, rgba(38, 105, 123, 0.14), transparent 70%); } /* ── 3. Frosted glass floating navbar ── */ .super-navbar { top: 12px !important; width: min(1100px, 100% - 32px) !important; margin: 12px auto 0 !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.65) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; backdrop-filter: blur(14px) saturate(180%) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important; } html.theme-dark .super-navbar { background: rgba(20, 26, 28, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important; } .super-navbar__item { border-radius: 10px !important; transition: background 0.15s ease; } .super-navbar__item:hover { background: rgba(38, 105, 123, 0.12) !important; } /* ── 4. Buttons (blue-background callouts) — ONE style everywhere: teal with a subtle frost, identical in light & dark ── */ .notion-callout.bg-blue-light { position: relative !important; width: fit-content !important; min-width: 200px; background: rgba(38, 105, 123, 0.82) !important; /* teal, slightly translucent */ -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 10px !important; padding: 16px 28px 16px 20px !important; align-items: center !important; letter-spacing: -0.4px !important; box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.2) !important; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .notion-callout.bg-blue-light:hover { background: rgba(86, 127, 145, 0.92) !important; box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3) !important; } .notion-callout.bg-blue-light:active { transform: scale(0.96); } .notion-callout.bg-blue-light .notion-semantic-string .notion-link { color: #FBFFFF !important; font-size: 17px !important; font-weight: 700 !important; border: none !important; opacity: 1 !important; white-space: nowrap; } .notion-callout.bg-blue-light .notion-semantic-string .notion-link:hover { border: none !important; } .notion-callout.bg-blue-light .notion-semantic-string .notion-link::after { content: ""; position: absolute; inset: 0; border-radius: 10px; } .notion-callout.bg-blue-light .notion-callout__icon { pointer-events: none !important; } .notion-callout.bg-blue-light .notion-callout__icon, .notion-callout.bg-blue-light .notion-callout__icon div, .notion-callout.bg-blue-light .notion-callout__icon img { height: 20px !important; width: 20px !important; } /* ── 5. Frosted glass cards ── */ .notion-collection-gallery { gap: 18px !important; border: none !important; } .notion-collection-card { border-radius: 16px !important; overflow: hidden; background: rgba(255, 255, 255, 0.55) !important; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: 0 4px 24px rgba(27, 68, 72, 0.08) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .notion-collection-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(27, 68, 72, 0.16) !important; } html.theme-dark .notion-collection-card { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important; } .notion-collection-card__cover, .notion-collection-card__cover.small { height: 165px !important; transition: transform 0.35s ease; } .notion-collection-card:hover .notion-collection-card__cover { transform: scale(1.04); } .notion-collection-card__content { padding: 14px 16px 16px !important; } .notion-collection-card .notion-property__title { font-weight: 600 !important; font-size: 15px !important; line-height: 1.45 !important; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notion-collection-card .notion-property__title__icon-wrapper { display: none !important; } /* ── 6. HERO (homepage only) ── */ /* kill dead space: hide ALL empty paragraph blocks on the homepage */ #page-index .notion-text:empty { display: none !important; } /* the desk photo: framed, NO shadow — it should melt into the background */ #page-index .notion-root > .notion-image:not(#block-f0b50db5bc3b431fbb53d5926d20d68e) { width: min(1600px, 100vw - 48px) !important; max-width: none !important; margin-left: calc(50% - min(800px, 50vw - 24px)) !important; margin-top: clamp(-520px, -22vw, -120px); /* ① text depth into the photo */ position: relative; z-index: 0; } #page-index .notion-root > .notion-image:not(#block-f0b50db5bc3b431fbb53d5926d20d68e) img { border-radius: 20px !important; width: 100% !important; box-shadow: none !important; } /* hero text: readable column, floats above the photo */ #page-index .notion-root > .notion-text { position: relative; z-index: 2; max-width: min(44rem, 88%); font-size: clamp(15px, 0.6vw + 9px, 18px); line-height: 1.6; } #page-index .notion-header__content { position: relative; z-index: 2; } #page-index .notion-page__title { font-size: clamp(2.4rem, 4.5vw, 3.6rem) !important; } /* readability halo (light + dark) */ #page-index .notion-root > .notion-text .notion-text__content { text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.85), 1px -1px 0 rgba(255, 255, 255, 0.85), -1px 1px 0 rgba(255, 255, 255, 0.85), 1px 1px 0 rgba(255, 255, 255, 0.85), 0 0 14px rgba(255, 255, 255, 0.75); } html.theme-dark #page-index .notion-root > .notion-text .notion-text__content { text-shadow: -1px -1px 0 rgba(20, 54, 57, 0.85), 1px -1px 0 rgba(20, 54, 57, 0.85), -1px 1px 0 rgba(20, 54, 57, 0.85), 1px 1px 0 rgba(20, 54, 57, 0.85), 0 0 14px rgba(20, 54, 57, 0.75); } /* button row: straddles the photo's bottom edge */ #page-index #block-8ba2889e7a8544838bba5faad8f03b9f { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: -38px; /* ② half-on / half-off the photo edge */ margin-bottom: 56px; } #page-index #block-8ba2889e7a8544838bba5faad8f03b9f .notion-column { width: auto !important; flex: none !important; min-height: 0 !important; margin: 0 !important; } /* ── 7. Hide the site-pages toggle at the bottom of the homepage ── */ #block-301a537d40f3495f9407731f8c4a6ced { display: none !important; } /* ── 8. Header title layout ── */ .notion-header__title-wrapper { display: flex; flex-wrap: wrap; } .notion-header__title { flex: 1; } /* ── 9. Tablet: gentler overlap ── */ @media (max-width: 1100px) { #page-index .notion-root > .notion-image:not(#block-f0b50db5bc3b431fbb53d5926d20d68e) { margin-top: -10vw; } } /* ── 10. Mobile: stack cleanly ── */ @media (max-width: 700px) { #page-index .notion-root > .notion-image:not(#block-f0b50db5bc3b431fbb53d5926d20d68e) { margin-top: 8px; } #page-index #block-8ba2889e7a8544838bba5faad8f03b9f { flex-direction: column; gap: 12px; margin-top: 20px; margin-bottom: 32px; } } @media (max-width: 500px) { #block-bead52d38b4844808133ae5940542f47 { display: flex; flex-wrap: wrap; } #block-8c2f46d1241e4b40a5a91a8045ca7c85 { flex: 2; } #block-29cb0290f0db47f1bb8b708b1c68af7f { flex: 1; } .notion-column { display: flex; justify-content: center; align-items: center; } }

Resources database