02.Dark.theme.page

Replace this with your opening paragraph. The big title above is pulled from the page title — set it in the page settings sidebar, not here.

Section two

/* —- // kicker : JetBrains Mono, crimson, uppercase, +18% tracking —- */ .is-style-kicker{ font-family:var(–wp–preset–font-family–mono)!important; font-weight:500; font-font-family–mono)!important; font-size:var(–wp–preset–font-size–meta); letter-spacing:.12em; text-transform:uppercase; color:var(–wp–preset–color–slate); } /* —- ghost / outline button —- */ .wp-block-button.is-style-ghost .wp-block-button__link{ background:transparent; color:var(–wp–preset–color–crimson); box-shadow:inset 0 0 0 1.5px currentColor; } .wp-block-button.is-style-ghost .wp-block-button__link:hover{ background:var(–wp–preset–color–crimson); color:var(–wp–preset–color–paper); } /* ghost on dark */ .has-ink-background-color .wp-block-button.is-style-ghost .wp-block-button__link, .vllm-dark .wp-block-button.is-style-ghost .wp-block-button__link{ color:var(–wp–preset–color–paper); box-shadow:inset 0 0 0 1.5px rgba(246,240,252,.4); } /* —- embed container for graph / gauge iframes —- */ .vllm-embed{ position:relative; width:100%; height:var(–h,640px); border:1px solid var(–wp–preset–color–line); border-radius:6px; overflow:hidden; background:var(–wp–preset–color–surface); } .vllm-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .vllm-dark .vllm-embed{ border-color:var(–wp–preset–color–dark-line); background:var(–wp–preset–color–ink); } /* —- corner crosshairs (brandbook print-mark grammar) —- */ .vllm-crosshairs{ position:relative; } .vllm-crosshairs::before, .vllm-crosshairs::after{ content:”+”; position:absolute; font-family:var(–wp–preset–font-family–mono); color:var(–wp–preset–color–crimson); opacity:.5; font-size:1rem; line-height:1; } .vllm-crosshairs::before{ top:14px; left:14px; } .vllm-crosshairs::after{ top:14px; right:14px; } /* —- dark section helper —- */ .vllm-dark{ background:var(–wp–preset–color–ink); color:var(–wp–preset–color–paper); } .vllm-dark :is(h1,h2,h3,h4){ color:var(–wp–preset–color–paper); } /* —- layered hero: graph as full-bleed background, text over it on the left —- */ .vllm-hero{ position:relative; overflow:hidden; min-height:78vh; display:flex; align-items:center; } .vllm-hero__bg{ position:absolute; inset:0; z-index:0; } .vllm-hero__bg iframe{ width:100%; height:100%; border:0; display:block; background:transparent; pointer-events:auto; } /* scrim: darken the left so text stays readable, fade out to the right where the graph shows */ .vllm-hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, var(–wp–preset–color–ink) 0%, rgba(19,21,22,.85) 30%, rgba(19,21,22,.35) 55%, rgba(19,21,22,0) 80%); } /* content wrapper is click-through so the graph underneath stays interactive; only the actual interactive children (buttons) re-enable pointer events. It is itself a centered 1320px column with the same root padding as the header, so its left edge lines up exactly with the header logo. */ .vllm-hero__content{ position:relative; z-index:2; transform:translateY(-5rem); /* raise hero text: bigger negative = higher */ width:100%; max-width:1320px; margin-left:auto; margin-right:auto; padding-left:var(–wp–style–root–padding-left, var(–wp–preset–spacing–40)); padding-right:var(–wp–style–root–padding-right, var(–wp–preset–spacing–40)); pointer-events:none; box-sizing:border-box; } .vllm-hero__content a, .vllm-hero__content button, .vllm-hero__content .wp-block-buttons{ pointer-events:auto; } /* inner sits at the LEFT edge of that 1320px column (in line with the header logo), capped so the text occupies the left ~46% and the graph shows right */ .vllm-hero .vllm-hero__content > .vllm-hero__inner{ max-width:56%; margin-left:0;margin-left:-1.00rem; margin-right:auto; text-align:left; } @media(max-width:782px){ .vllm-hero__content .vllm-hero__inner{ max-width:100%; } .vllm-hero__scrim{ background:linear-gradient(180deg, rgba(19,21,22,.6), var(–wp–preset–color–ink) 92%); } } /* —- “sun” accent word in a heading —- */ .vllm-accent{ color:var(–wp–preset–color–crimson); } .vllm-accent-sun{ color:var(–wp–preset–color–sun); } /* —- header wordmark sizing —- */ /* Header wordmark: sizing is controlled by the Site Logo block’s own width setting (Appearance → Editor → select logo → Width). The theme only handles vertical alignment in the header row. */ .wp-block-site-logo a{ display:inline-flex; align-items:center; } /* pull header wordmark left to line up with the hero title. .vllm-logo is the unique class on the site-logo block. The header group has root padding (spacing–40); negative margin cancels it so the logo lines up with the flush-left hero title. */ .vllm-logo{ transform:translateX(0rem); } /* tune this rem value freely: bigger = further left */ /* —- titles sit low against air (brandbook): give hero headings breathing room —- */ .vllm-lowtitle{ padding-top:4rem; } /* —- thin crimson rule —- */ .vllm-rule{ height:2px; width:56px; background:var(–wp–preset–color–crimson); border:0; } /* —- card —- */ .is-style-card{ background:var(–wp–preset–color–white); border:1px solid var(–wp–preset–color–line); border-radius:4px; } /* —- editor-only: flatten the layered hero so it’s editable —- */ .editor-styles-wrapper .vllm-hero{ display:block; min-height:0; } .editor-styles-wrapper .vllm-hero__bg{ position:relative; height:340px; } .editor-styles-wrapper .vllm-hero__scrim{ display:none; } .editor-styles-wrapper .vllm-hero__content{ position:relative; pointer-events:auto; } .editor-styles-wrapper .vllm-hero .vllm-hero__content > .vllm-hero__inner{ max-width:100%; } /* —- close the paper gap between header and hero —- */ .wp-site-blocks > main{ background:var(–wp–preset–color–ink); } /* —- kill the 1.5rem block-gap between top-level blocks (header/main/sections) —- */ .wp-site-blocks > *{ margin-block-start:0 !important; margin-block-end:0 !important; } /* —- restore gap between buttons (blockGap:0 removed the default) —- */ .wp-block-buttons.is-layout-flex{ gap:0.75rem !important; } .wp-block-buttons{ gap:0.75rem !important; } .wp-block-buttons.is-layout-flex{ –wp–style–block-gap:0.75rem !important; } /* —- restore spacing between nav items (blockGap:0 removed the default) —- */ .wp-block-navigation{ gap:1.5rem; } .wp-block-navigation .wp-block-navigation__container{ gap:1.5rem; } /* ============================================================= Interior page (1-deep) — brand grammar only. Append to custom.css. Colours/fonts pull from theme.json presets. Default = dark (ink). Add is-style-light on the section for surface. Accent = sun (#c28a1f). ============================================================= */ .vllm-ip { –ip-fg: var(–wp–preset–color–paper, #F7F5ED); –ip-bg: var(–wp–preset–color–ink, #131516); –ip-accent: var(–wp–preset–color–sun, #c28a1f); –ip-visual-bg: #000; position: relative; background: var(–ip-bg); color: var(–ip-fg); padding-block: clamp(48px, 6vw, 88px); } /* The section inherits the 760 content constraint from .entry-content. Force it to 900 wide, centered, so the whole band widens. */ .entry-content > .vllm-ip, .vllm-ip.vllm-ip { max-width: 900px !important; width: 100%; margin-inline: auto; } /* —- light variant ———————————————- */ .vllm-ip.is-style-light { –ip-fg: var(–wp–preset–color–ink, #131516); –ip-bg: var(–wp–preset–color–surface, #F4F3EC); –ip-visual-bg: #eceadf; } /* —- meta strip ————————————————– */ .vllm-ip__meta { font-family: var(–wp–preset–font-family–mono, monospace); font-size: 10px; letter-spacing: .05em; margin-bottom: clamp(28px, 4vw, 48px); color: color-mix(in srgb, var(–ip-fg) 30%, transparent); } .vllm-ip__meta p { margin: 0; } /* —- split hero ————————————————– */ .vllm-ip__hero { align-items: center; gap: clamp(40px, 5vw, 64px) !important; } .vllm-ip__kicker { letter-spacing: .14em; color: var(–ip-accent) !important; margin-bottom: 1.5rem; } .vllm-ip__title { font-family: var(–wp–preset–font-family–poppins, sans-serif); font-weight: 600; font-size: clamp(2.125rem, 4.4vw, 3.375rem); letter-spacing: -.02em; line-height: 1.06; max-width: 14ch; margin: 0; color: var(–ip-fg); } .vllm-ip__subtitle { font-family: var(–wp–preset–font-family–poppins, sans-serif); font-weight: 400; letter-spacing: -.005em; line-height: 1.3; max-width: 30ch; margin-top: 1.1rem; color: color-mix(in srgb, var(–ip-fg) 62%, transparent); } /* —- framed B&W visual ——————————————- */

Section three

Body copy is Geist; headings are Poppins SemiBold. The table of contents sticks in view and highlights the active section as you scroll.