/* Fonts are loaded from each page's (preconnect + stylesheet link). A CSS @import here would serialise the request behind style.css. */ /* Dark is the default, defined on :root rather than applied by script. The previous arrangement painted the light theme first and let JavaScript swap it, which is what produced a white flash on every navigation. The light theme is now the opt-in class, and it sits on so the inline head script can set it before exists and before first paint. */ :root { color-scheme: dark; --bg: #000000; --text: #FFFFFF; --accent: #FF3C2F; --border: #FFFFFF; --border-thick: 4px; --border-thin: 2px; --font-display: 'Plus Jakarta Sans', sans-serif; --font-sans: 'Space Grotesk', sans-serif; --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace; --font-math: 'Lora', Georgia, serif; --max-width: 1300px; --number-opacity: 0.22; } :root.light-theme { color-scheme: light; --bg: #FFFFFF; --text: #000000; --accent: #E22B1F; /* Signal Red */ --border: #000000; --number-opacity: 0.12; } /* Paint the canvas from the same variable so the area outside .container, and the gap before renders, match the theme instead of flashing. */ html { background-color: var(--bg); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.4; -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; } /* Base elements */ a { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 0.2s, background-color 0.2s; } a:hover { color: var(--accent); background-color: rgba(226, 43, 31, 0.05); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.95; color: var(--text); } h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); } /* The universal reset zeroes every margin, so an h2 followed by body copy sat directly on its first line. The long-form pages already set their own h2 margins and keep overriding this one. */ h2 { font-size: clamp(1.8rem, 4.5vw, 3.2rem); margin-bottom: 1.5rem; } h3 { font-size: 1.4rem; } /* Unnumbered sub-subheads inside long whitepaper sections. Without a size the global heading rule leaves h4 below body size, which reads as emphasis rather than structure. */ h4 { font-size: 1.05rem; letter-spacing: 0.02em; } .whitepaper h4 { margin: 2rem 0 0.9rem; opacity: 0.85; } p { margin-bottom: 1.25rem; } strong { font-weight: 700; } code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(0, 0, 0, 0.05); border: 1px solid var(--border); padding: 0.1rem 0.35rem; color: var(--text); } :root:not(.light-theme) code { background: rgba(255, 255, 255, 0.08); } pre { background: rgba(0, 0, 0, 0.02); border: var(--border-thin) solid var(--border); padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0; font-family: var(--font-mono); } :root:not(.light-theme) pre { background: rgba(255, 255, 255, 0.02); } pre code { background: none; border: none; padding: 0; color: var(--text); } kbd { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg); border: 2px solid var(--border); border-bottom-width: 4px; padding: 0.1rem 0.4rem; font-weight: 700; } /* Layout Container */ .container, .wrap { width: 100%; max-width: var(--max-width); margin: 0 auto; } .container { border-left: var(--border-thick) solid var(--border); border-right: var(--border-thick) solid var(--border); } @media (max-width: 768px) { .container { border-left: none; border-right: none; } } /* Header */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: var(--border-thick) solid var(--border); transition: background-color 0.2s; } .site-header .wrap { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.05em; text-transform: uppercase; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } /* The mark is inline SVG rather than a background image so both halves of it can read the theme variables. As an external file the S had to be punched out with an SVG , which several mobile browsers dropped on the floor, leaving a plain red disc. Here the S is simply stroked in the page colour. */ .brand-mark { width: 20px; height: 20px; flex: none; display: block; overflow: visible; } .brand-mark-disc { fill: var(--accent); } .brand-mark-s { fill: none; stroke: var(--bg); stroke-width: 13; stroke-linecap: round; } .site-nav { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; } .site-nav a { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; color: var(--text); padding: 0.2rem 0.5rem; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); } .site-nav a[aria-current="page"] { outline: var(--border-thin) solid var(--border); } .theme-toggle-btn { background: transparent; border: none; color: var(--text); width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 0.5rem; font-size: 1.5rem; font-weight: 700; line-height: 1; transition: background-color 0.2s, color 0.2s; /* Opts out of the double-tap-to-zoom gesture, which otherwise makes a small header button feel unresponsive on touch: the browser holds the tap back to see whether a second one is coming. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Hover states are guarded on every filled control. A touch browser latches :hover on tap and holds it until you touch something else, so on a phone this rule left a filled square sitting on the button, which reads as the button's own state rather than as a pointer effect. :active gives touch the same feedback without the latch. */ @media (hover: hover) { .theme-toggle-btn:hover { background: var(--text); color: var(--bg); } } .theme-toggle-btn:active { background: var(--text); color: var(--bg); } /* Hamburger. Hidden until the mobile breakpoint, where the nav collapses. */ .nav-toggle { display: none; background: transparent; border: none; color: var(--text); width: 44px; height: 44px; padding: 0; cursor: pointer; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .nav-toggle-bars { position: relative; display: block; width: 22px; height: 3px; background: currentColor; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 3px; background: currentColor; transition: transform 0.2s ease; } .nav-toggle-bars::before { top: -7px; } .nav-toggle-bars::after { top: 7px; } /* Open: the middle bar goes out and the other two cross into an X. */ .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; } } /* Mobile Header Layout Grid. The four links used to sit permanently on a second row, which is a strip of shouting uppercase above every page. On mobile they collapse behind the hamburger instead, and the bar keeps only the wordmark, the theme button and the toggle. */ @media (max-width: 768px) { .site-header .wrap { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0 0.4rem; padding: 0.85rem 1.25rem; } .brand { grid-column: 1; grid-row: 1; justify-self: start; font-size: 1.6rem; } .theme-toggle-btn { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; } .nav-toggle { grid-column: 3; grid-row: 1; justify-self: end; display: flex; } .site-nav { grid-column: 1 / -1; grid-row: 2; display: none; flex-direction: column; align-items: stretch; gap: 0; /* Full-bleed to the header edges, and flush with its bottom border. */ margin: 0.85rem -1.25rem -0.85rem; border-top: var(--border-thin) solid var(--border); } .site-nav.is-open { display: flex; } .site-nav a { padding: 1rem 1.25rem; font-size: 1rem; border-bottom: 1px dashed var(--border); } .site-nav a:last-child { border-bottom: none; } /* The desktop outline marks the current page in a row of four. In a stacked list it reads as a stray box, so colour carries it instead. */ .site-nav a[aria-current="page"] { outline: none; color: var(--accent); } } /* The free-floating GLOAM wordmark is the narrow left rail of the two-column hero. Below that breakpoint there is no rail: it turns into a large banner repeating a word the header already carries, above the copy that matters. */ @media (max-width: 899px) { .hero-vertical-title { display: none; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; text-decoration: none; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; padding: 1rem 1.8rem; border: var(--border-thick) solid var(--border); cursor: pointer; transition: all 0.15s ease; margin: 0.25rem 0; } @media (hover: hover) { .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--border); } } /* Touch gets the lift on press instead, so a tapped button does not stay inverted and raised after the finger leaves. */ .btn:active { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--border); } .btn-primary { background: var(--text); color: var(--bg); } .btn-secondary { background: transparent; color: var(--text); } @media (hover: hover) { .btn-primary:hover { background: var(--bg); color: var(--text); } .btn-secondary:hover { background: var(--text); color: var(--bg); } } /* Sections */ section { border-bottom: var(--border-thick) solid var(--border); } .kicker { display: inline-block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 0.8rem; } .section-lede { font-size: 1.2rem; font-weight: 550; margin-top: 1rem; line-height: 1.4; } /* Hero */ .hero { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .hero { grid-template-columns: auto 1fr; } } /* Mobile first: a normal horizontal wordmark. The vertical treatment only makes sense once the hero is a two-column grid and this is the narrow left rail; stacked on a phone it became a tall band of sideways text that pushed the actual hero copy off the first screen. */ .hero-vertical-title { text-transform: uppercase; font-family: var(--font-display); font-size: clamp(2.75rem, 13vw, 4rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; padding: 1.75rem 1.5rem; color: var(--accent); border-bottom: var(--border-thick) solid var(--border); text-align: left; } @media (min-width: 900px) { .hero-vertical-title { writing-mode: vertical-rl; font-size: clamp(3rem, 8vw, 5.5rem); padding: 4rem 3rem; text-align: center; border-bottom: none; border-right: var(--border-thick) solid var(--border); } } .hero-body { padding: 3.5rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 900px) { .hero-body { padding: 4rem 3rem; } } .hero h1 { margin-bottom: 2rem; line-height: 1.05; } .hero h1 span { border-bottom: 6px solid var(--accent); padding-bottom: 2px; } .hero-tagline { font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin-bottom: 1.5rem; } .hero-summary { font-size: 1.1rem; color: var(--text); opacity: 0.85; max-width: 800px; margin-bottom: 2.5rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } .hero-meta { font-size: 0.8rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; opacity: 0.6; } /* Problem / stats */ .problem-layout { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .problem-layout { grid-template-columns: 5fr 7fr; } } .problem-copy { padding: 3.5rem 1.5rem; } @media (min-width: 900px) { .problem-copy { border-right: var(--border-thick) solid var(--border); padding: 4rem 3rem; } } .problem-copy p { font-size: 1.1rem; margin-bottom: 1.5rem; line-height: 1.45; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } } .stat { border-top: var(--border-thin) solid var(--border); padding-top: 1rem; } .stat-value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--accent); display: block; } .stat-label { font-size: 0.8rem; text-transform: uppercase; font-weight: 700; opacity: 0.8; line-height: 1.3; } /* Image comparison slider with aspect-ratio scaling */ .comparison { position: relative; width: 100%; /* Hold the aspect ratio the pair is actually rendered at, and centre the panel in its grid cell, rather than stretching to whatever height the copy column happens to be. Stretching made object-fit: cover silently centre-crop the frame -- by up to half its width at some viewports -- so the framing on screen no longer matched the framing that was composed. See site/assets/CREDITS.txt. */ aspect-ratio: 4 / 5; align-self: center; overflow: hidden; cursor: ew-resize; background: #000; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } @media (max-width: 900px) { .comparison { border-top: var(--border-thick) solid var(--border); } } .comparison img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .comparison .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; /* Reveals the region to the RIGHT of the handle, so the base image (the uncorrected "before") reads on the left and the corrected "after" on the right, matching the slider's labels and aria-label. */ clip-path: polygon(var(--clip-pos, 50%) 0, 100% 0, 100% 100%, var(--clip-pos, 50%) 100%); } .comparison .after img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .comparison-handle { position: absolute; top: 0; left: var(--clip-pos, 50%); width: 4px; height: 100%; background: var(--accent); z-index: 3; transform: translateX(-50%); user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .comparison-handle svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); color: var(--text); padding: 7px; } .comparison-labels { position: absolute; bottom: 1.25rem; width: 100%; display: flex; justify-content: space-between; padding: 0 1.25rem; z-index: 4; pointer-events: none; } .comparison-labels span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; background: var(--bg); border: var(--border-thin) solid var(--border); padding: 0.2rem 0.5rem; color: var(--text); } /* Method note + image credit, spanning the full width of the problem grid */ .comparison-credit { grid-column: 1 / -1; border-top: var(--border-thick) solid var(--border); padding: 1rem 1.5rem; font-size: 0.75rem; line-height: 1.6; opacity: 0.65; } @media (min-width: 900px) { .comparison-credit { padding: 1rem 3rem; } } .comparison-credit code { font-family: var(--font-mono); font-size: 0.9em; } /* How it works scrollytelling */ .how-section { position: relative; border-bottom: var(--border-thick) solid var(--border); } .how-sticky-container { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .how-sticky-container { grid-template-columns: 350px 1fr; } } /* Left panel: Pipeline progress indicator (Reduced Padding) */ .pipeline-panel { padding: 1rem; border-bottom: var(--border-thick) solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (min-width: 900px) { .pipeline-panel { border-bottom: none; border-right: var(--border-thick) solid var(--border); padding: 1rem; height: 100%; } } .pipeline-vertical { display: flex; flex-direction: row; align-items: center; position: relative; width: 100%; max-width: 500px; justify-content: space-between; } @media (min-width: 900px) { .pipeline-vertical { flex-direction: column; height: 85%; max-height: 420px; justify-content: space-between; } } .pipeline-line { position: absolute; top: 50%; left: 20px; right: 20px; height: 4px; width: auto; background: var(--border); z-index: 1; transform: translateY(-50%); } @media (min-width: 900px) { .pipeline-line { top: 20px; bottom: 20px; left: auto; right: auto; width: 4px; height: auto; transform: none; } } .pipeline-step { position: relative; z-index: 2; width: 40px; height: 40px; background: var(--bg); border: 3px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; user-select: none; } @media (min-width: 900px) { .pipeline-step { width: 44px; height: 44px; font-size: 1.15rem; } } .pipeline-step:hover, .pipeline-step.active { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: scale(1.15); } /* Right panel: Scrollytelling content display (Reduced Padding) */ .how-copy { padding: 1rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 900px) { .how-copy { padding: 1.5rem 3.5rem; height: 100%; overflow-y: auto; } } .details-panel { margin-bottom: 1rem; display: flex; flex-direction: column; position: relative; } .giant-number { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 800; line-height: 0.75; color: var(--text); opacity: var(--number-opacity); margin-bottom: 0.25rem; user-select: none; } .node-title { font-family: var(--font-display); font-size: 1.8rem; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .node-explanation { font-size: 1.15rem; max-width: 800px; line-height: 1.45; min-height: 60px; } /* Borderless Technical diagram wrapper */ .diagram-container { border: none; padding: 0.5rem 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 0.5rem; width: 100%; } .pipeline-diagram { width: 100%; max-width: 550px; height: auto; aspect-ratio: 16 / 9; display: none; border: none; outline: none; } .pipeline-diagram.active { display: block; } .diagram-caption { font-size: 0.8rem; text-transform: uppercase; font-weight: 700; opacity: 0.6; margin-top: 1rem; text-align: center; } /* Features Block Grid (Clean - No Card Borders) */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem 2rem 4rem; } @media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } .feature-card { padding: 1.5rem 0; border: none; } .feature-card h3 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; font-size: 1.25rem; } .feature-icon { width: 32px; height: 32px; color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-icon svg { width: 24px; height: 24px; } .feature-card p { font-size: 0.95rem; line-height: 1.45; opacity: 0.85; margin-bottom: 0; } /* Opensource split */ .opensource-layout { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .opensource-layout { grid-template-columns: 5fr 7fr; } } .opensource-copy { padding: 3.5rem 1.5rem; } @media (min-width: 900px) { .opensource-copy { border-right: var(--border-thick) solid var(--border); padding: 4rem 3rem; } } .opensource-copy p { font-size: 1.1rem; margin-bottom: 1.5rem; line-height: 1.45; } .license-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border: var(--border-thin) solid var(--border); padding: 0.2rem 0.6rem; margin-left: 1rem; } .license-pill .dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; } .opensource-details { padding: 3.5rem 1.5rem; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 900px) { .opensource-details { padding: 4rem 3rem; } } .opensource-list { list-style: none; } .opensource-list li { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .opensource-list li svg { width: 24px; height: 24px; color: var(--accent); flex-shrink: 0; } .opensource-list li span { font-size: 0.95rem; line-height: 1.45; } /* Downloads overwrites */ .download-panel { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .download-panel { grid-template-columns: 1fr 1fr; } } .download-option { padding: 1.5rem 1.5rem; display: flex; flex-direction: column; } @media (min-width: 900px) { .download-option { padding: 2.5rem 2rem; } } .download-option h3 { font-size: 1.6rem; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; } .download-option p { font-size: 1rem; color: var(--accent); font-weight: 700; margin-bottom: 2rem; } .download-option ul { list-style: none; margin-bottom: 2rem; } .download-option ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.8rem; font-size: 0.95rem; line-height: 1.4; } .download-option ul li::before { content: "-"; position: absolute; left: 0; color: var(--accent); } .download-action-box { display: flex; justify-content: center; padding: 2rem 1.5rem; border-bottom: var(--border-thick) solid var(--border); background: rgba(0,0,0,0.01); } .download-action-box .btn { width: 100%; max-width: 450px; } /* Each download card carries its own button, bottom-aligned so the two line up across cards with different numbers of bullets. */ .download-option .btn { margin-top: auto; align-self: center; } /* Both of these are secondary explanatory copy. They run the full width of the band rather than a 70ch measure, so they collapse to a couple of lines and read as a footnote instead of a wall of text. */ .download-note { font-size: 0.85rem; line-height: 1.6; opacity: 0.7; max-width: none; text-align: center; } .smartscreen-note { padding: 2rem; } .smartscreen-note p { font-size: 0.85rem; line-height: 1.6; opacity: 0.7; max-width: none; } /* Guides & Whitepaper layout */ .guides-page, .whitepaper-page { padding: 4rem 1.25rem; max-width: 850px; margin: 0 auto; } @media (min-width: 768px) { .guides-page, .whitepaper-page { padding: 5rem 3rem; } } .guides-page h2 { margin: 3rem 0 1.5rem; padding-bottom: 0.5rem; } .whitepaper-page h2 { margin: 3rem 0 1.5rem; border-bottom: var(--border-thin) solid var(--border); padding-bottom: 0.5rem; } .guides-page section, .whitepaper-page section { border-bottom: none; } .guides-page h3, .whitepaper-page h3 { margin: 2rem 0 1rem; } .toc { border: var(--border-thin) solid var(--border); padding: 1.5rem; margin: 2.5rem 0; } .toc-title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; text-transform: uppercase; margin-bottom: 1rem; color: var(--accent); } .toc ol { list-style: none; } .toc li { margin-bottom: 0.5rem; font-weight: 700; font-size: 0.95rem; } .toc a { text-decoration: none; } /* Steps list (Guides borderless) */ .steps { list-style-type: none; margin: 2rem 0; } .steps > li { position: relative; padding-left: 0; margin-bottom: 3rem; border-top: none; /* Removed top border */ padding-top: 0; } .steps > li::before { content: attr(data-step); display: block; font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 0.5rem; } .steps h3 { margin: 0 0 0.75rem; } /* Borderless Math blocks with Lora math font */ .math { margin: 2.5rem auto; padding: 1.5rem; border: none; /* Removed border */ text-align: center; font-size: 1.25rem; overflow-x: auto; font-family: var(--font-math); background: rgba(0, 0, 0, 0.01); } .math var { font-style: italic; font-weight: 500; font-family: var(--font-math); } .math .cases { display: inline-block; text-align: left; position: relative; padding-left: 1.5em; vertical-align: middle; font-family: var(--font-math); } .math .cases::before { content: "{"; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(1, 2.5); font-size: 2rem; font-weight: 300; font-family: var(--font-math); } .math .cases > span { display: block; padding: 0.1rem 0; } /* Whitepaper Editorial Typography Overhaul */ .whitepaper blockquote { font-family: var(--font-math); font-size: 1.25rem; font-style: italic; border-left: var(--border-thick) solid var(--accent); padding-left: 1.5rem; margin: 2.5rem 0; color: var(--text); line-height: 1.45; } .whitepaper .paper-meta { font-size: 0.85rem; text-transform: uppercase; font-weight: 700; opacity: 0.6; margin-bottom: 2.5rem; } .whitepaper h2 { margin-top: 4rem; margin-bottom: 1.5rem; } /* Display equations. These were markup-only until now: .formula had no rule, so every equation in the whitepaper rendered as plain body text. */ .whitepaper .formula { font-family: var(--font-math); font-size: 1.05rem; line-height: 1.9; border-left: var(--border-thick) solid var(--accent); padding: 0.9rem 1.25rem; margin: 0 0 1.5rem; overflow-x: auto; } .whitepaper .formula em { font-style: italic; } .whitepaper p { font-size: 1.1rem; line-height: 1.55; margin-bottom: 1.5rem; } /* Whitepaper table styling: narrow width */ .whitepaper table { width: 100%; max-width: 650px; margin: 3rem auto; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.9rem; } .whitepaper th, .whitepaper td { border: var(--border-thin) solid var(--border); padding: 0.75rem 1rem; text-align: left; } .whitepaper th { font-family: var(--font-display); text-transform: uppercase; font-size: 0.75rem; font-weight: 800; background: rgba(0,0,0,0.02); } :root:not(.light-theme) .whitepaper th { background: rgba(255,255,255,0.03); } .whitepaper tr:hover td { background: rgba(226, 43, 31, 0.05); } @media (max-width: 768px) { .whitepaper table { display: block; overflow-x: auto; white-space: nowrap; } } .refs { margin-top: 4rem; padding-top: 2rem; border-top: var(--border-thin) solid var(--border); } .refs h2 { border: none !important; } .refs ol { padding-left: 1.5rem; font-size: 0.9rem; } .refs li { margin-bottom: 0.8rem; line-height: 1.45; } /* Back to top button */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; background: var(--bg); border: var(--border-thin) solid var(--border); color: var(--text); padding: 0.5rem 1rem; font-weight: 700; font-size: 0.8rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s; text-transform: uppercase; z-index: 10; } .back-to-top.visible { opacity: 1; pointer-events: auto; } @media (hover: hover) { .back-to-top:hover { background: var(--text); color: var(--bg); } } .back-to-top:active { background: var(--text); color: var(--bg); } /* Footer styling */ .site-footer { padding: 2.5rem 1.5rem; border-top: var(--border-thick) solid var(--border); } @media (min-width: 768px) { .site-footer { padding: 3rem 2rem; } } .site-footer .wrap { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; text-align: center; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } @media (min-width: 768px) { .site-footer .wrap { flex-direction: row; justify-content: space-between; text-align: left; } } .site-footer a { text-decoration: none; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } /* Print view */ @media print { .site-header, .site-footer, .back-to-top, .theme-toggle-btn { display: none; } body { background: #fff; color: #000; } .container { border: none; } }