/*! * Normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* ========================================================================== Base Styles ========================================================================== */ /** * 1. Correct line height in all browsers. * 2. Prevent font size adjustments after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /** * Remove margin in all browsers. */ body { margin: 0; position: relative; } /** * Render main element consistently in IE. */ main { display: block; } /** * Correct font size and margin on h1 elements. */ h1 { font-size: 2em; margin: 0.67em 0; } /* ========================================================================== Grouping Content ========================================================================== */ hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } /* ========================================================================== Text-level Semantics ========================================================================== */ a { background-color: transparent; text-decoration: none; cursor: pointer; padding-bottom: 0.1375em; border-bottom: 1px solid; } abbr[title] { border-bottom: none; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* ========================================================================== Embedded Content ========================================================================== */ img { border-style: none; max-width: 100%; height: auto; border-radius: 5px; display: block; } /* ========================================================================== Forms ========================================================================== */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border: 0; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* ========================================================================== Interactive ========================================================================== */ details { display: block; } summary { display: list-item; } /* ========================================================================== Misc ========================================================================== */ template { display: none; } [hidden] { display: none; } /* ========================================================================== Typography and General Layout ========================================================================== */ html { font-variant-ligatures: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100%; hyphens: auto; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.65; } p { font-size: 1em; } h1, h2, h3, h4, h5 { font-family: inherit; font-weight: var(--headline-font-weight); line-height: 1.4; } h1, .text-size-h1 { font-size: 1.8em; margin-top: 0; } h2, .text-size-h2 { font-size: 1.6em; } h3, .text-size-h3 { font-size: 1.42em; } h4, .text-size-h4 { font-size: 1.27em; } h5, .text-size-h5 { font-size: 1.13em; } .text-caption { font-size: 0.89em; } small, .text-small { font-size: 0.79em; } /* ========================================================================== Links ========================================================================== */ a:hover { transition: 0.2s; } .external::after { content: " \2197"; } .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: #000; color: #fff; padding: 0.5rem; z-index: 1000; } /* ========================================================================== Layout Containers ========================================================================== */ .separator { margin: 0 auto; text-align: center; width: 100%; } nav, main, footer { max-width: 700px; width: 90%; margin: 0 auto; } nav { display: block; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); transition: opacity 0.4s; will-change: opacity; position: sticky; z-index: 1; top: 1em; border-radius: 8px; padding-top: 0; } nav p { padding: 0.5em; } header { width: 90%; text-align: left; } header h1 { font-size: clamp(2rem, 10vw, 9rem); margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: left; max-width: 100vw; } .scaled-heading { display: block; text-align: inherit; white-space: nowrap; font-size: clamp(2rem, 10vw, 9rem); font-weight: var(--headline-font-weight); line-height: 1.2; min-height: clamp(2rem, 10vw, 9rem); overflow: hidden; text-overflow: ellipsis; color: transparent; -webkit-text-fill-color: transparent; visibility: hidden; opacity: 0; transition: opacity 0.4s ease; } .scaled-heading.show { visibility: visible; opacity: 1; } figure { display: block; width: 100%; margin: 1.5em 0 0 0; } footer { padding-bottom: 1.65em; margin-bottom: 0; } section { margin: 3em auto; } /* ========================================================================== Visual Elements ========================================================================== */ .highlight { border-radius: 1em 0 1em 0; } /* Background Color Variants */ .pink { background-image: linear-gradient( -100deg, rgba(255, 101, 159, 0.15), rgba(255, 101, 159, 0.8) 100%, rgba(255, 101, 159, 0.25) ); } .blue { background-image: linear-gradient( -100deg, rgba(103, 223, 255, 0.15), rgba(103, 223, 255, 0.8) 100%, rgba(103, 223, 255, 0.25) ); } .green { background-image: linear-gradient( -100deg, rgba(131, 241, 141, 0.15), rgba(131, 241, 141, 0.8) 100%, rgba(131, 241, 141, 0.25) ); } .purple { background-image: linear-gradient( -100deg, rgba(181, 129, 254, 0.15), rgba(181, 129, 254, 0.8) 100%, rgba(181, 129, 254, 0.25) ); } .yellow { background-image: linear-gradient( -100deg, rgba(252, 241, 81, 0.15), rgba(252, 241, 81, 0.8) 100%, rgba(252, 241, 81, 0.25) ); } /* Pinned footer gradient */ .footer-gradient { position: absolute; left: 0; bottom: 0; width: 100%; height: 600px; z-index: -1; pointer-events: none; background: radial-gradient(at 20% 80%, rgba(255, 100, 150, 0.4), transparent 60%), radial-gradient(at 70% 60%, rgba(120, 160, 255, 0.4), transparent 60%), radial-gradient(at 80% 100%, rgba(255, 200, 100, 0.4), transparent 60%), linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%); } /* Accessibility Helpers */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ========================================================================== Color Scheme: Dark Mode ========================================================================== */ @media (prefers-color-scheme: dark) { ::selection { background-color: #ffffff1a; } body { background-color: #0d0d0d; color: white; } a { color: white; border-color: #7a7a7a; } a:hover { color: #7a7a7a; border-color: #2c2c2c; } nav { background: rgba(0, 0, 0, 0.2); } /* Remove bottom border for links inside nav */ nav a, nav a:link, nav a:active, nav a:visited { border: none; } hr { background-color: #7a7a7a; color: #7a7a7a; height: 1px; border: none; } .separator, li::marker { color: #7a7a7a; } .footer-gradient { background: radial-gradient(at 20% 80%, rgba(255, 100, 150, 0.4), transparent 60%), radial-gradient(at 70% 60%, rgba(120, 160, 255, 0.4), transparent 60%), radial-gradient(at 80% 100%, rgba(255, 200, 100, 0.4), transparent 60%), linear-gradient(to top, #0d0d0d 0%, rgba(13, 13, 13, 0) 100%); } } /* ========================================================================== Color Scheme: Light Mode ========================================================================== */ @media (prefers-color-scheme: light) { ::selection { background-color: #0d0d0d0d; } body { background-color: white; color: #0d0d0d; } a { color: #0d0d0d; border-color: #d5d5d5; } a:hover { color: #d5d5d5; border-color: #f5f5f5; } nav { background: rgba(255, 255, 255, 0.2); } /* Remove bottom border for links inside nav */ nav a, nav a:link, nav a:active, nav a:visited { border: none; } hr { background-color: #d5d5d5; color: #d5d5d5; height: 1px; border: none; } .separator, li::marker { color: #d5d5d5; } } /* ========================================================================== Responsive Layout ========================================================================== */ @media only screen and (min-width: 1px) { html { font-size: 16px; } main, header { margin: 3em auto 0 auto; } } @media only screen and (min-width: 768px) { html { font-size: 17px; } main, header { margin: 5em auto 0 auto; } } @media only screen and (min-width: 992px) { html { font-size: 18px; } main, header { margin: 7em auto 0 auto; } header h1, .scaled-heading { text-align: center; } } @media only screen and (min-width: 1200px) { html { font-size: 19px; } main, header { margin: 9em auto 0 auto; } header h1, .scaled-heading { text-align: center; } } /* === Add to your main stylesheet (styles.css) === */ /* Base color used at the start of headline animations */ :root { --headline-start-color: #0d0d0d; --headline-font-weight: 500; } /* === 1. Base styles for all headlines === */ h1, h2, h3, h4, h5 { color: currentColor; /* Fallback visible text color */ -webkit-text-fill-color: currentColor; } .chroma-text { color: transparent; -webkit-text-fill-color: transparent; visibility: hidden; } .chroma-text.animate { font-weight: var(--headline-font-weight); background-image: linear-gradient( 90deg, var(--headline-start-color) 0, var(--headline-start-color) 33.33%, #c679c4 40%, #fa3d1d 45%, #ffb005 50%, #e1e1fe 55%, #0358f7 60%, transparent 66.67%, transparent ); background-size: 300% 100%; background-position: 100% 0; will-change: background-position; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-fill-color: transparent; animation: chroma-sweep 0.9s ease-in-out forwards; filter: blur(1px); visibility: visible; opacity: 1; transition: color 0.3s ease-out, -webkit-text-fill-color 0.3s ease-out; } @keyframes chroma-sweep { from { background-position: 100% 0; filter: blur(1px); } to { background-position: 0% 0; filter: blur(0); color: var(--headline-start-color); -webkit-text-fill-color: var(--headline-start-color); } } /* === 3. Dark Mode fallback for visible base color === */ @media (prefers-color-scheme: dark) { :root { --headline-start-color: white; } h1, h2, h3, h4, h5 { color: white; -webkit-text-fill-color: white; } } @media (prefers-color-scheme: light) { :root { --headline-start-color: #0d0d0d; } h1, h2, h3, h4, h5 { color: #0d0d0d; -webkit-text-fill-color: #0d0d0d; }} @media (prefers-reduced-motion: reduce) { .chroma-text.animate { animation: none; filter: none; background: none; } }