@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ============================================================ TERMINAL PRESS Ã¢â‚¬â€ Ormle home page (Views/Home/Index.cshtml) Brutalist publication discipline with kinetic data overlays. Scoped under .htp so styles never leak to other public pages. ============================================================ */ /* ---- Tokens + root reset ---- Signal palette: Absolute Zero blue is the brand voice; --hs-signal (amber) is the single reserved "look here" pop used for DENY/closed tags, the lead numeric, the live-chip, and form errors. Green stays as the affirmative accent. */ body.htp { --hs-bg: #fafafa; --hs-ink: #0a0a0a; --hs-ink-soft: #525252; --hs-ink-muted: #a3a3a3; --hs-accent: #0048BA; --hs-accent-2: #00308F; --hs-accent-good: #16a34a; --hs-signal: #F5A300; --hs-surface: #f5f5f5; --hs-border: #e5e5e5; --hs-font-body: "Space Grotesk", sans-serif; --hs-font-mono: "Space Mono", monospace; --hs-font-display: "Space Grotesk", sans-serif; --hs-radius: 0px; background: var(--hs-bg); color: var(--hs-ink); font-family: var(--hs-font-body); margin: 0; overflow-x: hidden; } .htp *, .htp *::before, .htp *::after { box-sizing: border-box; } .htp h1, .htp h2, .htp h3, .htp h4, .htp h5, .htp h6 { margin: 0; } .htp p { margin: 0; } .htp ul { margin: 0; padding: 0; list-style: none; } .htp a { color: inherit; text-decoration: none; } .htp img, .htp svg, .htp video { display: block; max-width: 100%; } /* The comp wrapped everything in .home-slice .home-slice-inner. Production simply lives on plus one .htp-shell main wrapper. */ .htp-shell { background: var(--hs-bg); color: var(--hs-ink); overflow: hidden; } /* ============================================================ TICKER (kinetic ribbon, top of page) ============================================================ */ .d6-ticker { display: flex; background: var(--hs-ink); color: var(--hs-bg); overflow: hidden; font-family: var(--hs-font-mono); border-bottom: 3px solid var(--hs-ink); } .d6-ticker-live { padding: 0 16px; background: var(--hs-signal); color: var(--hs-ink); font-weight: 700; letter-spacing: 0.1em; font-size: 10px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .d6-ticker-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hs-ink); animation: d6-pulse 1.2s ease-in-out infinite; } @keyframes d6-pulse { 0%,100%{opacity:.35} 50%{opacity:1} } .d6-ticker-viewport { flex: 1; overflow: hidden; padding: 10px 0; } .d6-ticker-track { display: inline-flex; gap: 40px; white-space: nowrap; animation: d6-scroll 32s linear infinite; padding-left: 40px; } @keyframes d6-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .d6-ticker-track span { font-size: 11px; color: rgba(255,255,255,0.65); letter-spacing: 0.03em; } .d6-ticker-track .val { color: #4ade80; font-weight: 700; margin-right: 4px; } .d6-ticker-track .bad { color: var(--hs-signal); font-weight: 700; margin-right: 4px; } .d6-ticker-track .lab { color: rgba(255,255,255,0.4); text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; margin-left: 6px; } /* ============================================================ MASTHEAD + NAV (replaces _PublicNav on the home page only) ============================================================ */ .htp-nav-row { padding: 10px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--hs-border); background: var(--hs-bg); font-family: var(--hs-font-mono); position: relative; z-index: 50; } .htp-nav-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hs-font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink); flex-shrink: 0; } .htp-nav-brand img { height: 30px; } .htp-nav-brand .slash { color: var(--hs-ink-muted); margin: 0 6px; font-weight: 400; } .htp-nav-links { display: inline-flex; align-items: center; gap: 26px; flex: 1; justify-content: center; min-width: 0; } .htp-nav-link { position: relative; font-family: var(--hs-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-soft); padding: 6px 2px; transition: color 0.15s ease; white-space: nowrap; } .htp-nav-link:hover { color: var(--hs-ink); } /* Generic dropdown primitive (.htp-nav-dropdown*) lives in public-htp-shell.css so both body.htp (home) and body.htp-lite (other public pages) can use it. */ .htp-nav-cta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .htp-nav-signin { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-soft); padding: 6px 8px; } .htp-nav-signin:hover { color: var(--hs-ink); } .htp-nav-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--hs-accent); color: #fff; font-family: var(--hs-font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border: 2px solid var(--hs-accent); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .htp-nav-primary:hover { background: var(--hs-ink); border-color: var(--hs-ink); color: var(--hs-bg); } .htp-user-wrap { position: relative; } .htp-user-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--hs-surface); border: 1px solid var(--hs-border); color: var(--hs-ink-soft); cursor: pointer; font-family: var(--hs-font-mono); font-size: 12px; font-weight: 700; } .htp-user-button:hover { background: var(--hs-ink); color: var(--hs-bg); } .htp-user-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--hs-bg); border: 2px solid var(--hs-ink); z-index: 100; font-family: var(--hs-font-mono); } .htp-user-menu.hidden { display: none; } .htp-user-menu .htp-user-head { padding: 10px 16px; border-bottom: 1px solid var(--hs-border); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-muted); } .htp-user-menu .htp-user-name { margin-top: 4px; font-size: 11px; letter-spacing: 0.02em; text-transform: none; color: var(--hs-ink); word-break: break-all; } .htp-user-menu a { display: block; padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-soft); border-left: 3px solid transparent; } .htp-user-menu a:hover { color: var(--hs-ink); background: var(--hs-surface); border-left-color: var(--hs-accent); } .htp-burger { display: none; width: 34px; height: 34px; background: transparent; border: 1px solid var(--hs-border); cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .htp-burger span { display: block; width: 14px; height: 1.5px; background: var(--hs-ink); } .htp-mobile-nav { display: none; border-bottom: 1px solid var(--hs-border); background: var(--hs-bg); padding: 8px 16px 14px; font-family: var(--hs-font-mono); } .htp-mobile-nav.open { display: block; } .htp-mobile-nav a { display: block; padding: 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-soft); border-bottom: 1px solid var(--hs-border); } .htp-mobile-nav a:last-child { border-bottom: none; } .htp-mobile-nav a:hover { color: var(--hs-ink); } .htp-mobile-nav a.htp-mobile-cta { margin: 4px 0 8px; padding: 12px 14px; background: var(--hs-accent); color: #fff; border: 2px solid var(--hs-accent); border-bottom: 2px solid var(--hs-accent); text-align: center; letter-spacing: 0.1em; } .htp-mobile-nav a.htp-mobile-cta:hover { background: var(--hs-ink); border-color: var(--hs-ink); color: var(--hs-bg); } /* Original brutalist masthead from comp (now sits under nav as "edition" strip) */ .d6-masthead { padding: 14px 48px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--hs-border); font-family: var(--hs-font-mono); } .d6-masthead .brand { font-family: var(--hs-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink); } .d6-masthead .brand .slash { color: var(--hs-ink-muted); margin: 0 6px; font-weight: 400; } .d6-masthead .edition { font-size: 10px; color: var(--hs-ink-muted); letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; } .d6-masthead .edition .sep { width: 1px; height: 10px; background: var(--hs-border); } .d6-masthead .edition .live-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--hs-signal); color: var(--hs-ink); font-weight: 700; font-size: 9px; } .d6-masthead .edition .live-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--hs-ink); animation: d6-pulse 1.2s ease-in-out infinite; } /* ============================================================ HERO ============================================================ */ .d6-hero { padding: 56px 64px 40px; border-bottom: 3px solid var(--hs-ink); position: relative; overflow: hidden; } /* Signal: diagonal amber stripe anchoring the right side of the hero Ã¢â‚¬â€ sits behind the stream panel so it acts as a visual shadow tying the panel to the page rather than ghosting through empty white gutter. */ .d6-hero::after { content: ''; position: absolute; top: 24px; right: -80px; width: 360px; height: calc(100% - 48px); background: var(--hs-signal); transform: skewX(-12deg); transform-origin: top right; opacity: 0.16; pointer-events: none; z-index: 0; } .d6-hero > * { position: relative; z-index: 1; } .d6-hero-eyebrow { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-accent); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px; } .d6-hero-eyebrow::before, .d6-hero-eyebrow::after { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--hs-accent); } .d6-hero-grid { display: grid; grid-template-columns: 1.2fr 0.85fr; gap: 56px; align-items: stretch; } .d6-hero h1 { font-family: var(--hs-font-display); font-size: clamp(32px, 5.4vw + 8px, 68px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; margin-bottom: 24px; } .d6-hero h1 .accent { color: var(--hs-accent); } .d6-hero h1 .underline { position: relative; display: inline-block; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 3px; text-underline-offset: 4px; } .d6-hero .subhead { font-size: 16px; color: var(--hs-ink-soft); line-height: 1.65; max-width: 520px; margin-bottom: 28px; } .d6-hero .subhead strong { color: var(--hs-ink); font-weight: 700; } .d6-cta-row { display: flex; gap: 0; align-items: stretch; border: 2px solid var(--hs-ink); width: fit-content; } .d6-cta-primary { padding: 14px 28px; background: var(--hs-accent); color: #fff; font-family: var(--hs-font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s ease, color 0.15s ease; } .d6-cta-primary:hover { background: var(--hs-ink); color: var(--hs-bg); } .d6-cta-secondary { padding: 14px 28px; background: transparent; color: var(--hs-ink); font-family: var(--hs-font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-left: 2px solid var(--hs-ink); display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s ease, color 0.15s ease; } .d6-cta-secondary:hover { background: var(--hs-ink); color: var(--hs-bg); } /* Hero right: live stream panel. Bordered + offset-shadow so it reads as a deliberate hero element anchored to the page, not a black rectangle dropped onto white. Height is pinned (not min-height) so the JS appending lines never resizes the panel Ã¢â‚¬â€ newest lines hug the bottom of .d6-stream-body, old lines clip off the top, panel stays exactly this tall. */ .d6-stream { background: var(--hs-ink); color: var(--hs-bg); font-family: var(--hs-font-mono); display: flex; flex-direction: column; height: 420px; max-width: 480px; width: 100%; justify-self: end; align-self: start; border: 2px solid var(--hs-ink); box-shadow: 6px 6px 0 var(--hs-ink-muted); } .d6-stream-header { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: rgba(255,255,255,0.55); } .d6-stream-header .left { display: flex; align-items: center; gap: 8px; } .d6-stream-header .dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: d6-pulse 1.2s ease-in-out infinite; } .d6-stream-header .count { color: #4ade80; font-weight: 700; } .d6-stream-body { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; } .d6-stream-line { padding: 8px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 11px; display: flex; gap: 12px; align-items: baseline; flex-shrink: 0; animation: d6-slidein 0.35s ease-out; } /* Two-line clamp on the message column. Long questions wrap to a second line and clip at the third Ã¢â‚¬â€ readable, but each row still has a bounded max height so the panel never grows beyond `height: 420px`. `min-width: 0` is required for clamp + ellipsis to work inside flex. */ .d6-stream-line .msg { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; } @keyframes d6-slidein { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .d6-stream-line .time { color: rgba(255,255,255,0.35); min-width: 52px; font-size: 10px; flex-shrink: 0; } .d6-stream-line .msg { color: rgba(255,255,255,0.82); flex: 1; } .d6-stream-line .ok { color: #4ade80; font-weight: 700; } .d6-stream-line .analyst { color: #c084fc; font-weight: 700; } /* CLARIFY (rendered as "OPUS") Ã¢â‚¬â€ the Analyst engaging with an ambiguous question: proposing a working definition, asking back, or starting an investigation. Cyan to differentiate from green MATCH and purple ANALYST. Not a refusal Ã¢â‚¬â€ the conversation plane (Opus) is a senior collaborator. */ .d6-stream-line .clarify { color: #22d3ee; font-weight: 700; } .d6-stream-line .rows { color: rgba(255,255,255,0.45); font-size: 10px; margin-left: 4px; } .d6-stream-line .kw { color: #60a5fa; } .d6-stream-line .nl { color: #fbbf24; font-weight: 700; font-size: 9px; padding: 1px 5px; background: rgba(251,191,36,0.12); letter-spacing: 0.06em; margin-right: 4px; } /* Hero bottom: live numerics strip (reused for ROI section below) */ .d6-numerics { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--hs-ink); border-bottom: 2px solid var(--hs-ink); } .d6-numeric { padding: 20px 24px; border-left: 1px solid var(--hs-border); position: relative; } .d6-numeric:first-child { border-left: none; } /* Signal: the "Closed / By construction" refusal stat is the lead amber block in the numerics strip -- solid amber bg with ink text. */ .d6-numeric:nth-child(2) { background: var(--hs-signal); border-left-color: var(--hs-signal); } .d6-numeric:nth-child(2) .num, .d6-numeric:nth-child(2) .num.red, .d6-numeric:nth-child(2) .num.blue, .d6-numeric:nth-child(2) .num.good { color: var(--hs-ink); } .d6-numeric:nth-child(2) .label, .d6-numeric:nth-child(2) .sub { color: var(--hs-ink); } .d6-numeric.live::before { content: 'LIVE'; position: absolute; top: 8px; right: 12px; font-family: var(--hs-font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; color: var(--hs-accent); } .d6-numeric.live::after { content: ''; position: absolute; top: 13px; right: 42px; width: 5px; height: 5px; border-radius: 50%; background: var(--hs-accent); animation: d6-pulse 1.2s ease-in-out infinite; } .d6-numeric .num { font-family: var(--hs-font-mono); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--hs-ink); } .d6-numeric .num.red { color: var(--hs-signal); } .d6-numeric .num.blue { color: var(--hs-accent-2); } .d6-numeric .num.good { color: var(--hs-accent-good); } .d6-numeric .sub { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--hs-ink-muted); margin-top: 4px; } .d6-numeric .label { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); margin-top: 6px; line-height: 1.3; } /* ============================================================ DATA STRIP (divider between sections) ============================================================ */ .d6-strip { display: flex; height: 6px; } .d6-strip .s1 { flex: 3; background: var(--hs-accent); } .d6-strip .s2 { flex: 2; background: var(--hs-signal); } .d6-strip .s3 { flex: 1; background: var(--hs-ink); } .d6-strip .s4 { flex: 4; background: var(--hs-border); } .d6-strip .s5 { flex: 1; background: var(--hs-accent-good); } /* ============================================================ SHARED: SECTION HEADER ============================================================ */ .d6-section-header { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: baseline; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--hs-border); } .d6-section-header .kicker { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-ink); padding: 4px 10px; background: var(--hs-signal); white-space: nowrap; } .d6-section-header h2 { font-family: var(--hs-font-display); font-size: clamp(22px, 2.6vw + 10px, 34px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; } .d6-section-header > p { grid-column: 1 / -1; } .d6-section-header .lede { grid-column: 1 / -1; font-size: 15px; color: var(--hs-ink-soft); line-height: 1.65; max-width: 780px; } .d6-section-header .lede a { color: var(--hs-accent-2); font-weight: 700; border-bottom: 1px solid currentColor; } .d6-section-header .lede a:hover { color: var(--hs-ink); } /* ============================================================ TOOLS Ã¢â‚¬â€ three equal cards (Ontologist, Dashboard, Analyst) Used when .d6-how also has .d6-how-bands. ============================================================ */ .d6-how-bands .d6-band { border-top: 2px solid var(--hs-ink); margin-bottom: 0; } .d6-how-bands .d6-band:last-child { border-bottom: 2px solid var(--hs-ink); } .d6-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .d6-tool-card { padding: 32px 28px 24px; border-left: 1px solid var(--hs-border); background: var(--hs-bg); display: flex; flex-direction: column; } .d6-tool-card:first-child { border-left: none; } .d6-tool-card-ontologist { background: linear-gradient(180deg, rgba(0, 72, 186, 0.05) 0%, rgba(0, 72, 186, 0.02) 100%); border-top: 3px solid var(--hs-accent); } .d6-tool-card-dashboard { background: linear-gradient(180deg, rgba(22, 163, 74, 0.06) 0%, rgba(22, 163, 74, 0.02) 100%); border-top: 3px solid var(--hs-accent-good); } .d6-tool-card-analyst { background: linear-gradient(180deg, rgba(245, 163, 0, 0.06) 0%, rgba(245, 163, 0, 0.02) 100%); border-top: 3px solid var(--hs-signal); } .d6-tool-tag { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; } .d6-tool-card-ontologist .d6-tool-tag { color: var(--hs-accent-2); } .d6-tool-card-dashboard .d6-tool-tag { color: var(--hs-accent-good); } .d6-tool-card-analyst .d6-tool-tag { color: var(--hs-accent); } .d6-tool-card h3 { font-family: var(--hs-font-display); font-size: clamp(26px, 1.8vw + 14px, 36px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 14px; } .d6-tool-card p { font-size: 14px; color: var(--hs-ink-soft); line-height: 1.6; } .d6-tool-card p + p { margin-top: 12px; } /* Responsive: collapse to single column under tablet */ @media (max-width: 768px) { .d6-tools-grid { grid-template-columns: 1fr; } .d6-tool-card { border-left: none; border-top: 1px solid var(--hs-border); } .d6-tool-card:first-child { border-top: none; } } /* ============================================================ HOW IT WORKS (four steps, oversized numerics, pulse dots) ============================================================ */ .d6-how { padding: 56px 48px; border-bottom: 3px solid var(--hs-ink); } .d6-steps { display: grid; grid-template-columns: repeat(4, 1fr); } .d6-step { padding: 28px 24px; border-left: 2px solid var(--hs-ink); position: relative; } .d6-step:first-child { border-left: none; } .d6-step .num-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .d6-step .num { font-family: var(--hs-font-mono); font-size: 68px; font-weight: 700; line-height: 0.9; color: var(--hs-border); letter-spacing: -0.04em; } .d6-step .pulse-mark { width: 10px; height: 10px; border-radius: 50%; margin-top: 10px; animation: d6-pulse 1.6s ease-in-out infinite; } .d6-step:nth-child(1) .pulse-mark { background: var(--hs-accent); } .d6-step:nth-child(2) .pulse-mark { background: var(--hs-accent-2); } .d6-step:nth-child(3) .pulse-mark { background: var(--hs-accent); } .d6-step:nth-child(4) .pulse-mark { background: var(--hs-accent-good); } .d6-step .verb { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; } .d6-step:nth-child(1) .verb { color: var(--hs-accent); } .d6-step:nth-child(2) .verb { color: var(--hs-accent-2); } .d6-step:nth-child(3) .verb { color: var(--hs-accent); } .d6-step:nth-child(4) .verb { color: var(--hs-accent-good); } .d6-step h4 { font-family: var(--hs-font-display); font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; } .d6-step p { font-size: 12px; color: var(--hs-ink-soft); line-height: 1.65; } /* ============================================================ FINAL CTA BAND ============================================================ */ .d6-cta-band { padding: 56px 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; background: var(--hs-ink); color: var(--hs-bg); align-items: center; border-top: 6px solid var(--hs-signal); } .d6-cta-band .left .kicker { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-accent); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; } .d6-cta-band .left .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hs-accent); animation: d6-pulse 1.2s ease-in-out infinite; } .d6-cta-band h2 { font-family: var(--hs-font-display); font-size: clamp(26px, 3.2vw + 12px, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 14px; } .d6-cta-band .left p { font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 24px; max-width: 460px; line-height: 1.6; } .d6-cta-inv { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--hs-signal); color: var(--hs-ink); font-family: var(--hs-font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--hs-signal); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .d6-cta-inv.ghost { background: transparent; color: var(--hs-bg); border-color: rgba(255,255,255,0.25); margin-left: 8px; } .d6-cta-inv:not(.ghost):hover { background: var(--hs-ink); border-color: var(--hs-ink); color: var(--hs-signal); } .d6-cta-inv.ghost:hover { background: rgba(255,255,255,0.1); color: var(--hs-bg); border-color: rgba(255,255,255,0.55); } .d6-cta-band .right { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(255,255,255,0.15); } .d6-cta-stat { padding: 18px 20px; font-family: var(--hs-font-mono); border-right: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); } .d6-cta-stat:nth-child(2n) { border-right: none; } .d6-cta-stat:nth-last-child(-n+2) { border-bottom: none; } .d6-cta-stat .num { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .d6-cta-stat .num.r { color: var(--hs-signal); } .d6-cta-stat .num.b { color: #60a5fa; } .d6-cta-stat .num.g { color: #4ade80; } .d6-cta-stat .lab { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 6px; } .d6-cta-band .left .d6-cta-research { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.15); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; max-width: 620px; } .d6-cta-band .left .d6-cta-research-tag { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-accent-good); padding: 3px 8px; background: rgba(22,163,74,0.15); white-space: nowrap; } .d6-cta-band .left .d6-cta-research-body { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.65); } .d6-cta-band .left .d6-cta-research-body strong { color: var(--hs-bg); font-weight: 700; } .d6-cta-band .left .d6-cta-research-body a { display: inline-block; margin-left: 6px; color: #86efac; font-family: var(--hs-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid rgba(134,239,172,0.4); } .d6-cta-band .left .d6-cta-research-body a:hover { color: var(--hs-bg); border-bottom-color: var(--hs-bg); } /* ============================================================ SEMANTIC CONTRACT ARCHITECTURE (inverted dark band hosting SVG) ============================================================ */ .htp-sca { padding: 80px 48px; background: var(--hs-ink); color: var(--hs-bg); border-bottom: 3px solid var(--hs-ink); } .htp-sca .d6-section-header { border-bottom-color: rgba(255,255,255,0.12); } .htp-sca .d6-section-header h2 { color: var(--hs-bg); } .htp-sca .d6-section-header .kicker { background: rgba(245, 163, 0, 0.22); color: #fcd34d; } .htp-sca .d6-section-header .lede { color: rgba(255,255,255,0.7); } .htp-sca .d6-section-header .lede a { color: #93c5fd; } .htp-sca .htp-sca-tagline { font-family: var(--hs-font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hs-bg); margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; } .htp-sca .htp-sca-tagline .arrow { color: var(--hs-accent); } .htp-sca .htp-sca-split { margin: 36px auto 0; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: stretch; } .htp-sca .htp-sca-split-left { display: flex; flex-direction: column; } .htp-sca .htp-sca-split-left .htp-sca-frame { margin: 0; max-width: none; width: 100%; } .htp-sca .htp-sca-split-left .htp-sca-layers { margin: 16px 0 0; max-width: none; grid-template-columns: 1fr; gap: 12px; } .htp-sca .htp-sca-split-right { display: flex; } .htp-sca .htp-sca-category-check { background: var(--hs-ink); color: var(--hs-bg); padding: 32px 28px; border: 2px solid rgba(255,255,255,0.2); width: 100%; height: 100%; display: flex; flex-direction: column; } .htp-sca .htp-sca-category-check .kicker { display: inline-block; align-self: flex-start; background: rgba(22,163,74,0.18); color: #86efac; font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 8px; margin-bottom: 14px; } .htp-sca .htp-sca-category-check h3 { color: var(--hs-bg); font-family: var(--hs-font-display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; } .htp-sca .htp-sca-category-check .lede { color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.55; margin: 0 0 16px; } .htp-sca-survey { list-style: none; padding: 0; margin: 0 0 18px; border-top: 1px solid rgba(255,255,255,0.1); } .htp-sca-survey li { color: rgba(255,255,255,0.7); font-size: 13px; line-height: 1.55; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); } .htp-sca-survey li strong { color: var(--hs-bg); font-weight: 600; } .htp-sca-gap { color: var(--hs-bg); background: rgba(22,163,74,0.08); border-left: 3px solid var(--hs-accent-good); padding: 14px 16px; font-size: 13.5px; line-height: 1.55; margin: auto 0 0; } /* Two-panel split inside the architecture aside (Positioning + Category check share one box) */ .htp-sca-aside-section { display: flex; flex-direction: column; } .htp-sca-aside-section + .htp-sca-aside-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); } .htp-sca .htp-sca-category-check .htp-sca-aside-positioning .kicker { background: rgba(245, 163, 0, 0.22); color: #fcd34d; } .htp-sca .htp-sca-category-check .htp-sca-aside-positioning .lede { margin: 0 0 12px; } .htp-sca .htp-sca-category-check .htp-sca-aside-positioning .lede:last-child { margin-bottom: 0; } .htp-sca .htp-sca-aside-section .htp-sca-gap { margin-top: 16px; } .htp-sca .htp-sca-frame { margin: 36px auto 0; max-width: 900px; background: var(--hs-ink); color: var(--hs-bg); padding: 32px; border: 2px solid rgba(255,255,255,0.2); } .htp-sca .htp-sca-frame-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--hs-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-ink-muted); } .htp-sca .htp-sca-frame-head .dot { width: 7px; height: 7px; } .htp-sca .htp-sca-frame-head .dot.r { background: var(--hs-accent); } .htp-sca .htp-sca-frame-head .dot.a { background: #f59e0b; } .htp-sca .htp-sca-frame-head .dot.g { background: var(--hs-accent-good); } .htp-sca .htp-sca-frame-head .htp-sca-frame-label { margin-left: 4px; } .htp-sca .htp-sca-frame svg { max-width: 820px; margin: 0 auto; } .htp-sca .htp-sca-layers { margin: 36px auto 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .htp-sca-layer { padding: 18px 20px 20px; background: rgba(255,255,255,0.025); border-top: 3px solid rgba(255,255,255,0.25); display: flex; flex-direction: column; gap: 6px; } .htp-sca-layer-llm { border-top-color: var(--hs-accent-2); } .htp-sca-layer-gram { border-top-color: var(--hs-accent-good); } .htp-sca-layer-db { border-top-color: rgba(255,255,255,0.4); } .htp-sca-layer-num { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); } .htp-sca-layer-llm .htp-sca-layer-num { color: #93c5fd; } .htp-sca-layer-gram .htp-sca-layer-num { color: #86efac; } .htp-sca-layer-tag { font-family: var(--hs-font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--hs-bg); } .htp-sca-layer-body { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.65); } .htp-sca .htp-sca-cap { margin-top: 18px; font-family: var(--hs-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-align: center; } /* ============================================================ SECURITY (3x2 brutalist cards with inline SVG icons) ============================================================ */ .htp-security { padding: 56px 48px; border-bottom: 3px solid var(--hs-ink); } .htp-security-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--hs-ink); border-left: 2px solid var(--hs-ink); } .htp-sec-card { padding: 24px 22px; border-right: 2px solid var(--hs-ink); border-bottom: 2px solid var(--hs-ink); background: var(--hs-bg); } .htp-sec-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .htp-sec-card .icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--hs-ink); color: var(--hs-accent-good); } .htp-sec-card .icon svg { width: 16px; height: 16px; } .htp-sec-card .tag { font-family: var(--hs-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-accent-good); } .htp-sec-card h4 { font-family: var(--hs-font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; } .htp-sec-card p { font-size: 12px; color: var(--hs-ink-soft); line-height: 1.65; } .htp-sec-card.wide { grid-column: 1 / -1; } .htp-sec-card.wide p { max-width: 72ch; font-size: 12.5px; } /* ============================================================ PHILOSOPHY PULL QUOTE ============================================================ */ .htp-philosophy { padding: 72px 48px; text-align: center; border-bottom: 3px solid var(--hs-ink); background: var(--hs-surface); } .htp-philosophy .kicker { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hs-accent); margin-bottom: 20px; } .htp-philosophy h3 { font-family: var(--hs-font-display); font-size: clamp(22px, 2.8vw + 8px, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: 720px; margin: 0 auto 18px; color: var(--hs-ink); } .htp-philosophy p { font-size: 15px; color: var(--hs-ink-soft); line-height: 1.65; max-width: 560px; margin: 0 auto; } /* ============================================================ BEATS Ã¢â‚¬â€ shared scaffold for the four-beat narrative Each beat is a standalone section. The page header lives in .d6-section-header (already styled above). The beat-specific blocks live in .htp-beat-{n}-* classes below. ============================================================ */ .htp-beat { padding: 56px 48px; border-bottom: 3px solid var(--hs-ink); } .htp-beat .d6-section-header { margin-bottom: 32px; } .htp-beat .d6-section-header .lede + .lede { margin-top: 14px; } /* ---- Wide-screen magazine section-opener (prose-heavy beats only) ---- Beats 1, 2 and 4 are header-only prose: several .lede paragraphs that, at the default 780px left-aligned cap, strand in the left ~65% of a ~1180px section and leave a lopsided empty right cell. Above 1080px (clear of the 1024px tablet stack) these lay out as a proper section opener: the kicker + display headline anchor a fixed left rail, and the full prose runs as ONE continuous column on the right at a premium reading measure -- every paragraph whole, read straight top-to-bottom. A hairline rule between the rail and the column makes the split read as deliberate editorial structure. Below the breakpoint everything falls back to the shared single-column header -- small screens are untouched. */ /* The prose beats wrap their kicker+headline in .beat-title and their paragraphs in .beat-prose (see the three htp-beat blocks in the view). On narrow screens both are ordinary block children of the header and stack top-to-bottom, exactly like every other section. Above 1080px they become the two cells of a magazine section-opener. */ .beat-title .kicker { align-self: flex-start; } .beat-title h2 { margin-top: 16px; } @media (min-width: 1080px) { /* Two clean cells, both pinned to the top: [ title rail ][ prose column ]. Each side is ONE grid child, so neither can be stretched or pushed to the bottom by the other's height. The title block holds kicker+headline stacked; the prose block holds all paragraphs as one continuous flow. */ .htp-beat-1 .d6-section-header, .htp-beat-2 .d6-section-header, .htp-beat-measures .d6-section-header, .htp-beat-4 .d6-section-header { grid-template-columns: minmax(240px, 320px) 1fr; column-gap: 64px; align-items: start; } .htp-beat-1 .d6-section-header .beat-title, .htp-beat-2 .d6-section-header .beat-title, .htp-beat-measures .d6-section-header .beat-title, .htp-beat-4 .d6-section-header .beat-title { grid-column: 1; align-self: start; } /* .beat-title's own children (kicker + h2) stack naturally; the kicker is inline-flow so give it block display to sit above the headline. */ .beat-title .kicker { display: inline-block; } .htp-beat-1 .d6-section-header .beat-prose, .htp-beat-2 .d6-section-header .beat-prose, .htp-beat-measures .d6-section-header .beat-prose, .htp-beat-4 .d6-section-header .beat-prose { grid-column: 2; align-self: start; max-width: 680px; } /* Inside the prose column, paragraphs stack with normal rhythm. */ .htp-beat-1 .d6-section-header .beat-prose .lede + .lede, .htp-beat-2 .d6-section-header .beat-prose .lede + .lede, .htp-beat-measures .d6-section-header .beat-prose .lede + .lede, .htp-beat-4 .d6-section-header .beat-prose .lede + .lede { margin-top: 14px; } } /* ---- Beat 1 Ã¢â‚¬â€ narrative only; the architecture SVG (htp-sca) follows as its own full-width section. ---- */ /* ---- Beat 2 Ã¢â‚¬â€ discovery experiment + before/after grid ---- */ .htp-beat-2-result { font-family: var(--hs-font-display); font-size: clamp(20px, 1.6vw + 12px, 26px) !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25 !important; color: var(--hs-ink) !important; margin-top: 8px !important; padding-top: 14px; border-top: 1px solid var(--hs-border); } .htp-beat-2-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--hs-ink); border-bottom: 2px solid var(--hs-ink); margin-top: 8px; } .htp-beat-2-col { padding: 18px 24px 22px; border-left: 1px solid var(--hs-border); } .htp-beat-2-col:first-child { border-left: none; } .htp-beat-2-col-head { font-family: var(--hs-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-ink-muted); padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--hs-border); } .htp-beat-2-col-after .htp-beat-2-col-head { color: var(--hs-accent-good); } .htp-beat-2-row { padding: 9px 0; font-size: 15px; line-height: 1.55; color: var(--hs-ink); } .htp-beat-2-row + .htp-beat-2-row { border-top: 1px dashed var(--hs-border); } .htp-beat-2-row-from em { font-style: italic; color: var(--hs-accent); font-weight: 600; } .htp-beat-2-row-to strong { font-weight: 700; color: var(--hs-accent-good); font-family: var(--hs-font-mono); padding: 1px 6px; background: rgba(22, 163, 74, 0.08); border-radius: 2px; } .htp-beat-2-foot { margin-top: 24px; padding: 18px 22px; background: var(--hs-surface); border-left: 4px solid var(--hs-ink); } .htp-beat-2-foot p { font-size: 15px; line-height: 1.65; color: var(--hs-ink); max-width: 760px; } /* ---- Beat 4 Ã¢â‚¬â€ version note ---- */ .htp-versionnote { border: 2px solid var(--hs-ink); background: var(--hs-bg); } .htp-versionnote-head { padding: 16px 24px; background: var(--hs-ink); color: var(--hs-bg); display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; } .htp-versionnote-tag { font-family: var(--hs-font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-bg); } .htp-versionnote-sub { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .htp-versionnote-list { margin: 0; } .htp-versionnote-list li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--hs-border); align-items: baseline; } .htp-versionnote-list li:last-child { border-bottom: none; } .htp-versionnote-key { font-family: var(--hs-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hs-accent); } .htp-versionnote-val { font-size: 14px; color: var(--hs-ink); line-height: 1.6; } /* ============================================================ STOP DOING Ã¢â‚¬â€ implications list ============================================================ */ .htp-stopdoing { padding: 56px 48px; border-bottom: 3px solid var(--hs-ink); } .htp-stopdoing-list { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--hs-ink); border-bottom: 2px solid var(--hs-ink); } .htp-stopdoing-list li { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--hs-border); align-items: baseline; } .htp-stopdoing-list li:last-child { border-bottom: none; } .htp-stopdoing-num { font-family: var(--hs-font-mono); font-size: 36px; font-weight: 700; line-height: 1; color: var(--hs-border); letter-spacing: -0.04em; } .htp-stopdoing-body h4 { font-family: var(--hs-font-display); font-size: clamp(18px, 1.4vw + 8px, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--hs-ink); margin-bottom: 6px; } .htp-stopdoing-body p { font-size: 15px; line-height: 1.6; color: var(--hs-ink-soft); max-width: 760px; } /* ============================================================ LOGO STRIP + FOOTER ============================================================ */ .htp-logo-strip { padding: 36px 48px; display: flex; justify-content: center; background: var(--hs-ink); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .htp-logo-strip img { height: 40px; opacity: 0.85; } .htp-footer { padding: 40px 48px; background: var(--hs-bg); border-top: 3px solid var(--hs-ink); font-family: var(--hs-font-mono); } .htp-footer-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; } .htp-footer-copy { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-muted); line-height: 1.6; } .htp-footer-copy strong { color: var(--hs-ink); font-weight: 700; } .htp-footer-doi { margin-top: 6px; font-size: 10px; letter-spacing: 0.04em; text-transform: none; } .htp-footer-doi a { color: var(--hs-ink-soft); border-bottom: 1px solid var(--hs-border); } .htp-footer-doi a:hover { color: var(--hs-ink); } .htp-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-muted); } .htp-footer-links a { color: var(--hs-ink-soft); } .htp-footer-links a:hover { color: var(--hs-ink); border-bottom: 1px solid var(--hs-accent); } /* ============================================================ BUTTON TEXT COLOR OVERRIDES The `.htp a { color: inherit; }` rule near the top of this file has specificity (0,1,1) and was beating unscoped button classes (0,1,0), so blue buttons were rendering with inherited ink text instead of white. Re-assert button colors under a `.htp` ancestor to win the cascade. (The htp-lite shell pages do not have this bug because their button rules are already `body.htp-lite`-prefixed.) ============================================================ */ .htp .d6-cta-primary { color: #fff; } .htp .d6-cta-primary:hover { color: var(--hs-bg); } .htp .htp-nav-primary { color: #fff; } .htp .htp-nav-primary:hover { color: var(--hs-bg); } .htp .d6-cta-inv { color: var(--hs-ink); } .htp .d6-cta-inv:hover { color: var(--hs-signal); } .htp .d6-cta-inv.ghost { color: var(--hs-bg); } .htp .d6-cta-inv.ghost:hover { color: var(--hs-bg); } /* ============================================================ RESPONSIVE (scoped under .htp only) Fluid type is handled via clamp() on the three major headlines. These queries handle structural collapse. ============================================================ */ /* ---- Laptop / tablet: stack the two 2-col bands, collapse nav links ---- */ @media (max-width: 1024px) { .htp .d6-hero { padding: 44px 32px 32px; } .htp .d6-hero-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; } .htp .d6-stream { max-width: none; justify-self: stretch; align-self: auto; } .htp .d6-cta-band { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px; } .htp .d6-how { padding: 48px 32px; } .htp .d6-masthead { padding: 14px 32px; } .htp .htp-nav-row { padding: 10px 32px; gap: 16px; } .htp .htp-nav-links { gap: 18px; } .htp .htp-sca, .htp .htp-security, .htp .htp-philosophy, .htp .htp-beat, .htp .htp-stopdoing, .htp .htp-logo-strip, .htp .htp-footer { padding-left: 32px; padding-right: 32px; } .htp .htp-security-grid { grid-template-columns: repeat(2, 1fr); } .htp .htp-beat-2-grid { grid-template-columns: 1fr; } } /* ---- Tablet / large phone: collapse 4-col grids to 2x2, show burger ---- */ @media (max-width: 768px) { .htp .d6-hero { padding: 32px 20px 28px; } .htp .d6-how { padding: 40px 20px; } .htp .d6-cta-band { padding: 40px 20px; gap: 28px; } .htp .d6-masthead { padding: 12px 20px; } .htp .d6-masthead .edition > span:not(.live-chip) { display: none; } .htp .htp-nav-row { padding: 10px 20px; gap: 10px; } .htp .htp-nav-links { display: none; } .htp .htp-nav-signin { display: none; } .htp .htp-user-wrap { display: none; } .htp .htp-burger { display: inline-flex; } .htp .d6-section-header { grid-template-columns: 1fr; gap: 16px; } .htp .d6-numerics { grid-template-columns: repeat(2, 1fr); } .htp .d6-numeric:nth-child(2n+1) { border-left: none; } .htp .d6-numeric:nth-child(n+3) { border-top: 1px solid var(--hs-border); } /* Tools section responsive collapse is handled inside the tools block */ .htp .d6-steps { grid-template-columns: repeat(2, 1fr); } .htp .d6-step:nth-child(2n+1) { border-left: none; } .htp .d6-step:nth-child(n+3) { border-top: 2px solid var(--hs-ink); } .htp .d6-step .num { font-size: 52px; } .htp .d6-stream { height: 340px; max-width: none; justify-self: stretch; box-shadow: 4px 4px 0 var(--hs-ink-muted); } .htp .d6-ticker-track { gap: 24px; } .htp .htp-sca, .htp .htp-security, .htp .htp-philosophy, .htp .htp-beat, .htp .htp-stopdoing, .htp .htp-logo-strip, .htp .htp-footer { padding-left: 20px; padding-right: 20px; } .htp .htp-philosophy { padding-top: 56px; padding-bottom: 56px; } .htp .htp-security-grid { grid-template-columns: 1fr; } .htp .htp-sca-split { grid-template-columns: 1fr; gap: 20px; } .htp .htp-sca-layers { grid-template-columns: 1fr; gap: 12px; } .htp .htp-beat-2-grid { grid-template-columns: 1fr; } .htp .htp-beat { padding-top: 40px; padding-bottom: 40px; } .htp .htp-stopdoing { padding-top: 40px; padding-bottom: 40px; } } /* ---- Small phone: single column, stacked CTAs ---- */ @media (max-width: 480px) { .htp .d6-hero { padding: 24px 16px 20px; } .htp .d6-how { padding: 32px 16px; } .htp .d6-cta-band { padding: 32px 16px; gap: 24px; } .htp .d6-masthead { padding: 10px 16px; } .htp .htp-nav-row { padding: 10px 14px; gap: 8px; } .htp .htp-nav-brand { font-size: 11px; } .htp .htp-nav-brand img { height: 28px; } .htp .htp-nav-cta .htp-nav-primary { display: none; } .htp .d6-hero-eyebrow { font-size: 9px; } .htp .d6-hero-eyebrow::before, .htp .d6-hero-eyebrow::after { width: 16px; } .htp .d6-hero .subhead { font-size: 14px; } .htp .d6-numerics { grid-template-columns: 1fr; } .htp .d6-numeric { border-left: none; border-top: 1px solid var(--hs-border); } .htp .d6-numeric:first-child { border-top: none; } .htp .d6-numeric .num { font-size: 30px; } .htp .d6-steps { grid-template-columns: 1fr; } .htp .d6-step { border-left: none; border-top: 2px solid var(--hs-ink); } .htp .d6-step:first-child { border-top: none; } .htp .d6-ticker-live { padding: 0 10px; font-size: 9px; letter-spacing: 0.08em; } .htp .d6-ticker-track { animation-duration: 44s; gap: 20px; } .htp .d6-cta-row { flex-direction: column; width: 100%; } .htp .d6-cta-primary, .htp .d6-cta-secondary { justify-content: center; } .htp .d6-cta-secondary { border-left: none; border-top: 2px solid var(--hs-ink); } .htp .d6-cta-band .left .d6-cta-inv { display: flex; justify-content: center; width: 100%; } .htp .d6-cta-band .left .d6-cta-inv.ghost { margin-left: 0; margin-top: 8px; } .htp .d6-cta-band .left .d6-cta-research { grid-template-columns: 1fr; gap: 10px; max-width: 100%; } .htp .d6-cta-band .left .d6-cta-research-tag { justify-self: start; } .htp .htp-sca, .htp .htp-security, .htp .htp-philosophy, .htp .htp-beat, .htp .htp-stopdoing, .htp .htp-logo-strip, .htp .htp-footer { padding-left: 16px; padding-right: 16px; } .htp .htp-sca { padding-top: 40px; padding-bottom: 40px; } .htp .htp-sca .htp-sca-frame { padding: 16px; } .htp .htp-sca .htp-sca-category-check { padding: 20px 18px; } .htp .htp-philosophy { padding-top: 44px; padding-bottom: 44px; } .htp .htp-beat { padding-top: 32px; padding-bottom: 32px; } .htp .htp-stopdoing { padding-top: 32px; padding-bottom: 32px; } .htp .htp-beat-2-grid .htp-beat-2-col-head { font-size: 11px; } .htp .htp-versionnote-list li { grid-template-columns: 1fr; gap: 4px; } .htp .htp-versionnote-key { font-size: 11px; } .htp .htp-footer-row { flex-direction: column; gap: 18px; } .htp .htp-footer-links { gap: 6px 14px; } } /* ============================================================ HERO CORPUS PANEL Ã¢â‚¬â€ SOFT RESKIN (.d6-stream--soft) The one "moving part" that breaks from the brutalist page: a warm, friendly, humanist-sans light card showing real cross-industry questions flowing in. Scoped entirely to the --soft modifier so the rest of the page stays Space Grotesk / Space Mono brutalist. Font: Inter (humanist geometric sans). Appended last so source-order + specificity win the cascade. ============================================================ */ /* Wider, balanced hero so the card doesn't strand to the right with a dead gutter on big monitors. Cap the whole hero, pull the columns closer, let the card fill its column instead of clamping at 480px. */ .htp .d6-hero { padding-left: clamp(32px, 5vw, 96px); padding-right: clamp(32px, 5vw, 96px); } .htp .d6-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(32px, 4vw, 64px); align-items: center; max-width: 1320px; margin: 0 auto; } /* Soften the brutalist amber wedge so it reads as a gentle warm glow behind the light card rather than a hard skewed slab. */ .htp .d6-hero:has(.d6-stream--soft)::after { right: -120px; opacity: 0.08; filter: blur(8px); } /* The card itself: light, rounded, soft-shadowed, Inter. */ .htp .d6-stream--soft { background: #ffffff; color: #1f2430; font-family: 'Inter', system-ui, sans-serif; border: 1px solid #e8eaf0; border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(20, 28, 50, 0.35), 0 4px 14px -8px rgba(20, 28, 50, 0.18); max-width: 560px; height: 440px; justify-self: end; align-self: center; overflow: hidden; } .htp .d6-stream--soft .d6-stream-header { padding: 18px 22px 14px; border-bottom: 1px solid #eef0f5; background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-transform: none; letter-spacing: 0; } .htp .d6-stream--soft .d6-stream-header .left { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #1f2430; gap: 9px; } .htp .d6-stream--soft .d6-stream-header .dot { width: 8px; height: 8px; background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14); } .htp .d6-stream--soft .d6-stream-sub { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8b91a3; } .htp .d6-stream--soft .d6-stream-body { padding: 6px 4px 10px; gap: 2px; } /* Each row is a soft conversation line, not a log entry. */ .htp .d6-stream--soft .d6-stream-line { padding: 9px 22px; border-bottom: none; font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; gap: 10px; align-items: baseline; animation: d6-soft-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes d6-soft-rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .htp .d6-stream--soft .d6-stream-line .msg { color: #3a4154; line-height: 1.5; font-weight: 400; -webkit-line-clamp: 3; } /* Verdict chips: small soft pills, sentence case, not shouty caps. */ .htp .d6-stream--soft .nl, .htp .d6-stream--soft .ok, .htp .d6-stream--soft .analyst, .htp .d6-stream--soft .clarify { font-family: 'Inter', system-ui, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; padding: 2px 9px; border-radius: 999px; margin-right: 9px; white-space: nowrap; flex-shrink: 0; } /* "Asked" Ã¢â‚¬â€ neutral, the human voice. Slightly heavier message text. */ .htp .d6-stream--soft .nl { color: #5b6175; background: #f1f3f8; } .htp .d6-stream--soft .d6-stream-line .msg:has(.nl) { color: #1f2430; font-weight: 500; } /* ============================================================ App vignettes: inline SVG scenes in the tool cards + the method section's fact-type diagram. The SVGs draw their own dark frames; these wrappers only handle sizing and rhythm. viewBox scaling keeps them responsive at every width. ============================================================ */ .d6-tool-viz { margin: 14px 0 16px; } .d6-tool-viz svg { width: 100%; height: auto; display: block; border-radius: 10px; } /* The method exhibit: the fact-type figure lives INSIDE the versionnote frame, padded on the light paper so the dark canvas panel never touches the black head band. At desktop the figure and its four annotation rows sit side by side; below 1080px they stack and the rows keep their existing narrow-phone collapse. */ .htp-versionnote-fig { padding: 22px 24px 20px; } .htp-versionnote-fig svg { width: 100%; height: auto; display: block; } @media (min-width: 1080px) { .htp-versionnote-body { display: grid; grid-template-columns: minmax(340px, 46%) 1fr; align-items: center; } .htp-versionnote-body .htp-versionnote-fig { align-self: center; } .htp-versionnote-body .htp-versionnote-list { border-left: 1px solid var(--hs-border); } .htp-versionnote-body .htp-versionnote-list li { grid-template-columns: 132px 1fr; gap: 18px; padding: 16px 22px; } } /* ============================================================ Ask-the-graph hero scene. A dark canvas panel (same family as the tool vignettes and the architecture frame) where each cycled question lights a path through the constellation and the answer lands as a chip. Driven by home-terminal-press.js; the markup ships with the first sample fully lit so the no-JS state is a complete picture. ============================================================ */ .d6-askgraph { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 14px; padding: 16px 20px 16px; display: flex; flex-direction: column; gap: 10px; align-self: stretch; } .d6-askgraph svg { width: 100%; height: auto; display: block; flex: 1; min-height: 0; } .ag-head { display: flex; align-items: center; gap: 8px; font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--hs-ink-soft); } .ag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hs-accent-good); flex-shrink: 0; } .ag-head-sub { margin-left: auto; color: var(--hs-ink-muted); font-weight: 500; } .ag-question { font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--hs-ink); min-height: 47px; opacity: 0; transform: translateY(4px); transition: opacity 0.5s ease, transform 0.5s ease; } .ag-question.ag-show { opacity: 1; transform: none; } .ag-node { opacity: 0.5; transition: opacity 0.45s ease, filter 0.45s ease; } .ag-node.lit { opacity: 1; filter: drop-shadow(0 0 6px rgba(0, 72, 186, 0.5)); } .ag-edge { stroke: var(--hs-ink); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity 0.4s ease; } .ag-edge.lit { opacity: 0.8; } .ag-pulse { stroke: #F5A300; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 14; opacity: 0; transition: opacity 0.4s ease; } .ag-pulse.lit { opacity: 0.9; animation: ag-flow 1.1s linear infinite; } @keyframes ag-flow { to { stroke-dashoffset: -40; } } .ag-lbl { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; fill: var(--hs-ink); opacity: 0; transition: opacity 0.45s ease; } .ag-role { font-family: Inter, system-ui, sans-serif; font-size: 9.5px; font-style: italic; fill: #525252; opacity: 0; transition: opacity 0.45s ease; } .ag-lbl.lit, .ag-role.lit { opacity: 1; } .ag-thinking .ag-node { animation: ag-breathe 1.6s ease-in-out infinite; } @keyframes ag-breathe { 50% { opacity: 0.95; } } .ag-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #3f9d77; background: rgba(22, 163, 74, 0.08); color: #15803d; border-radius: 999px; padding: 4px 13px; font-size: 12.5px; font-weight: 600; min-height: 26px; opacity: 0; transform: translateY(4px); transition: opacity 0.5s ease, transform 0.5s ease; } .ag-chip.ag-show { opacity: 1; transform: none; } .ag-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hs-accent-good); flex-shrink: 0; } /* Clarify beat: the sharper question comes back as a reply bubble floating over the breathing constellation. */ .ag-scene { position: relative; flex: 1; display: flex; } .ag-reply { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) translateY(5px); max-width: 78%; padding: 9px 16px; border-radius: 12px; background: #f5f5f5; border: 1px solid #d4d4d4; color: var(--hs-ink); font-size: 13.5px; font-style: italic; line-height: 1.45; text-align: center; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .ag-reply.ag-show { opacity: 1; transform: translate(-50%, -50%); } @media (max-width: 640px) { .ag-question { font-size: 14px; min-height: 41px; } .d6-askgraph { padding: 14px 16px; } } @media (prefers-reduced-motion: reduce) { .ag-question, .ag-chip, .ag-node, .ag-edge, .ag-pulse, .ag-lbl, .ag-role, .ag-reply { transition: none; } .ag-pulse.lit { animation: none; } .ag-thinking .ag-node { animation: none; } } /* "Answered" Ã¢â‚¬â€ confident green. */ .htp .d6-stream--soft .ok { color: #15803d; background: rgba(22, 163, 74, 0.12); } /* "Investigated" Ã¢â‚¬â€ multi-step violet. */ .htp .d6-stream--soft .analyst { color: #6d28d9; background: rgba(124, 58, 237, 0.12); } /* "Thinking it through" Ã¢â‚¬â€ engaging cyan. */ .htp .d6-stream--soft .clarify { color: #0e7490; background: rgba(8, 145, 178, 0.12); } /* Row-count footnote: quiet, tucked at the end. */ .htp .d6-stream--soft .rows { color: #9aa0b0; font-size: 11px; margin-left: 6px; } /* Tablet/phone: card fills width, a touch shorter, lighter shadow. */ @media (max-width: 1024px) { .htp .d6-hero-grid { grid-template-columns: 1fr; } .htp .d6-stream--soft { max-width: none; justify-self: stretch; align-self: auto; } } @media (max-width: 768px) { .htp .d6-stream--soft { height: 380px; border-radius: 14px; box-shadow: 0 16px 40px -22px rgba(20, 28, 50, 0.32); } .htp .d6-stream--soft .d6-stream-line { font-size: 13px; padding: 9px 18px; } } @media (prefers-reduced-motion: reduce) { .htp .d6-stream--soft .d6-stream-line { animation: none; } } /* ============================================================ ARCHITECTURE SVG Ã¢â‚¬â€ SOFT RESKIN MOTION (.htp-sca-svg) The blink-pulse SMIL is gone from the markup; motion now comes from CSS so it's smooth, eased, and reduced-motion-aware. The two connector wires carry a slow continuous dash-flow ("data flowing" down the wire), and the graph nodes breathe gently. Scoped to .htp-sca-svg so nothing else is touched. ============================================================ */ .htp .htp-sca-svg .htp-sca-flow { animation: htp-sca-dashflow 1.9s linear infinite; } .htp .htp-sca-svg .htp-sca-flow-2 { /* offset so the two wires don't pulse in lockstep */ animation-delay: 0.6s; } @keyframes htp-sca-dashflow { /* one dash + gap cycle = 6 + 14 = 20 user units, flowing downward */ from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } } .htp .htp-sca-svg .htp-sca-nodes circle { animation: htp-sca-breathe 4s ease-in-out infinite; } /* stagger a few nodes so the field shimmers rather than blinking as one */ .htp .htp-sca-svg .htp-sca-nodes circle:nth-child(3n) { animation-delay: 0.8s; } .htp .htp-sca-svg .htp-sca-nodes circle:nth-child(3n+1) { animation-delay: 1.6s; } @keyframes htp-sca-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .htp .htp-sca-svg .htp-sca-flow, .htp .htp-sca-svg .htp-sca-nodes circle { animation: none; } } /* ============================================================ DESKTOP TYPE SCALE (min-width: 1025px) The base sizes are tuned for phones (mobile-first, max-width queries only), where narrow columns make small body copy read fine. On the wide desktop bands that same fixed px looks tiny and "homework-y", so scale body copy + small labels up above the 1024px band-collapse breakpoint. Phones and the collapsed tablet layout (<=1024px) keep the base untouched. Headlines are already clamp()-fluid and are left alone. The architecture band (.htp-sca) stays deliberately small as the one "read this closely" section -- its dense .htp-sca-* text is intentionally NOT bumped, and its header lede is re-pinned below. ============================================================ */ @media (min-width: 1025px) { /* Body copy */ .htp .d6-hero .subhead { font-size: 19px; } .htp .d6-section-header .lede { font-size: 18px; } .htp .d6-tool-card p { font-size: 17px; } .htp .d6-step p { font-size: 15px; } .htp .d6-cta-band .left p { font-size: 17px; } .htp .d6-cta-band .left .d6-cta-research-body { font-size: 15px; } .htp .htp-philosophy p { font-size: 18px; } .htp .htp-beat-2-row { font-size: 17px; } .htp .htp-beat-2-foot p { font-size: 17px; } .htp .htp-sec-card p { font-size: 15px; } .htp .htp-versionnote-val { font-size: 16px; } .htp .htp-versionnote-key { font-size: 13px; } .htp .htp-stopdoing-body p { font-size: 17px; } /* Small labels / captions that read as tiny on a big screen */ .htp .d6-numeric .label { font-size: 11px; } .htp .d6-numeric .sub { font-size: 11px; } .htp .d6-hero-eyebrow { font-size: 11px; } .htp .d6-section-header .kicker { font-size: 11px; } .htp .d6-tool-tag { font-size: 11px; } .htp .d6-step .verb { font-size: 11px; } /* Architecture band stays the small "read this closely" one-off: hold its header lede at base; its dense .htp-sca-* text is not bumped above. */ .htp .htp-sca .d6-section-header .lede { font-size: 15px; } }