with no reveal at all — the one place these pages visibly diverged from the homepage's identity. .page-hero reuses the homepage's own vocabulary (the mono eyebrow tag with its alpenglow dot, the gradient-clipped display title) at a scale that fits a content page rather than a full-viewport hero. Wrapping it in class="hero" (not a new selector) is deliberate: site.js's reveal observer already targets `main section, main .hero`, so this fades and rises into place exactly like every section below it, with zero JS changes needed. */ .page-hero { padding: 6px 0 4px; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(115deg, var(--ember) 0%, var(--amber) 100%); /* dotpulse-amber, not the plain teal dotpulse used elsewhere — its ring color is warm (rgba(255,138,61,…)), matching this dot's ember/amber fill instead of haloing it in a clashing teal. */ animation: dotpulse-amber 2.6s ease-out infinite; } .page-hero-title { font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.05; margin: 0 0 10px; background: linear-gradient(120deg, var(--text-primary) 55%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-hero .lede { margin-bottom: 0; } /* ---------- Staggered reveal for grids ---------- .stagger complements the section-level reveal above: once its parent section (or .hero) crosses into view, each direct child fades/rises in with a small per-item delay instead of all at once — the same idea as the homepage's .reveal-stagger (web/frontend/src/styles/global.css), done in plain CSS since these pages have no per-item JS observer. Capped at 10 explicit delays; any child beyond that just joins on the last delay rather than growing unbounded for long lists. */ @supports not (animation-timeline: view()) { .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-reveal, cubic-bezier(0.16,1,0.3,1)), transform 0.6s var(--ease-reveal, cubic-bezier(0.16,1,0.3,1)); } section.in-view .stagger > *, .hero.in-view .stagger > *, .stagger.in-view > * { opacity: 1; transform: none; } .stagger > *:nth-child(1) { transition-delay: 0ms; } .stagger > *:nth-child(2) { transition-delay: 45ms; } .stagger > *:nth-child(3) { transition-delay: 90ms; } .stagger > *:nth-child(4) { transition-delay: 135ms; } .stagger > *:nth-child(5) { transition-delay: 180ms; } .stagger > *:nth-child(6) { transition-delay: 225ms; } .stagger > *:nth-child(7) { transition-delay: 270ms; } .stagger > *:nth-child(8) { transition-delay: 315ms; } .stagger > *:nth-child(9) { transition-delay: 360ms; } .stagger > *:nth-child(n+10) { transition-delay: 405ms; } } @supports (animation-timeline: view()) { .stagger > * { animation: stagger-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; } @keyframes stagger-reveal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .stagger > *:nth-child(1) { animation-delay: 0ms; } .stagger > *:nth-child(2) { animation-delay: 45ms; } .stagger > *:nth-child(3) { animation-delay: 90ms; } .stagger > *:nth-child(4) { animation-delay: 135ms; } .stagger > *:nth-child(5) { animation-delay: 180ms; } .stagger > *:nth-child(6) { animation-delay: 225ms; } .stagger > *:nth-child(7) { animation-delay: 270ms; } .stagger > *:nth-child(8) { animation-delay: 315ms; } .stagger > *:nth-child(9) { animation-delay: 360ms; } .stagger > *:nth-child(n+10) { animation-delay: 405ms; } } /* ---------- SecOps board (secops.html) + observability's restyle ---------- New components for the Tidal-matched pages: radial gauges, a service process pulse, and the audit-console terminal variant. Everything here reads the same CSS custom properties as the rest of the site, so it automatically picks up [data-theme="tidal"]'s values on the two pages that set it, and would fall back to Mountain's own alpenglow palette on any page that doesn't (not currently used anywhere else, but no reason for these rules to only work under one theme). */ .gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; } .gauge-figure { display: flex; flex-direction: column; align-items: center; margin: 0; } .chart-canvas.gauge { max-width: 200px; } .gauge-note { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; text-align: center; } .score-layout { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } .score-layout .chart-figure { justify-self: center; } @media (max-width: 640px) { .score-layout { grid-template-columns: 1fr; } .score-layout .chart-figure { margin: 0 auto; } } .pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; } .pulse-chip { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .pulse-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--status-good); box-shadow: 0 0 0 0 var(--teal-dim); animation: dotpulse 2.2s ease-out infinite; } .pulse-dot.down { background: var(--status-critical); box-shadow: none; animation: none; } /* Audit console — the .terminal chrome already matches Tidal's own terminal-panel look (traffic-light dots, dark monospace body); this just adds the trigger button in the header and a typed-line style for the replay script in JS below. */ .audit-console .terminal-header { flex-wrap: wrap; gap: 8px 12px; } .console-run-btn { cursor: pointer; } .console-run-btn:disabled { opacity: 0.5; cursor: default; } .console-output { max-height: 320px; } .console-line { display: block; margin: 2px 0; } .console-line .tag-ok { color: var(--status-good); } .console-line .tag-warn { color: var(--status-warning); } .console-line .tag-fail { color: var(--status-critical); } .console-cursor { display: inline-block; width: 7px; height: 1em; background: var(--teal); vertical-align: text-bottom; animation: cursor-blink 1s step-end infinite; } @keyframes cursor-blink { 50% { opacity: 0; } }