/* ============================================================ ObligationSign.com — Global Stylesheet Design language: institutional dark, blueprint grid, gold accent, JetBrains Mono labels, DM Serif headings ============================================================ */ /* ── TOKENS ─────────────────────────────────────────────── */ :root { --ink: #0c1220; --deep: #0a0f1a; --slate: #151d30; --steel: #2a3550; --dim: #5a6d8a; --muted: #7b8ba6; --silver: #9ba8c2; --light: #e4e9f2; --white: #ffffff; --accent: #c8a44e; --accent-dim: #a8893e; --red: #d4605e; --green: #4ade80; --blue: #5e8fd4; --purple: #9b72cf; --border: rgba(42, 53, 80, 0.6); --surface: rgba(21, 29, 48, 0.6); --grid-line: rgba(42, 53, 80, 0.16); } /* ── RESET ───────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── BASE ────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } /* Global base styles — scoped to inner pages only. The landing page (index.html) uses Tailwind utilities on and these would conflict with Tailwind class selectors. Inner pages have a bare tag with no utility classes. */ body:not(.font-body) { font-family: 'Inter', sans-serif; background-color: var(--ink); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; color: var(--light); line-height: 1.65; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; position: relative; } /* ── TYPOGRAPHY (inner pages only) ───────────────────────── */ body:not(.font-body) h1, body:not(.font-body) h2, body:not(.font-body) h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--white); line-height: 1.15; letter-spacing: -0.01em; } body:not(.font-body) h1 { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 700; } body:not(.font-body) h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 0.5em; } body:not(.font-body) h4 { font-size: 1.25rem; margin-bottom: 0.4em; } body:not(.font-body) h3 { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.85em; } body:not(.font-body) h5 { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.6em; } body:not(.font-body) p { font-size: 0.975rem; color: var(--silver); max-width: 72ch; line-height: 1.75; } .lead { font-size: 1.15rem; color: var(--light); line-height: 1.6; margin-bottom: 1.5rem; max-width: 68ch; } body:not(.font-body) a { color: var(--accent); text-decoration: none; transition: color 0.15s; } body:not(.font-body) a:hover { color: var(--white); } body:not(.font-body) strong, body:not(.font-body) b { color: var(--white); font-weight: 600; } body:not(.font-body) em { color: var(--silver); font-style: italic; } body:not(.font-body) code { font-family: 'JetBrains Mono', monospace; font-size: 0.8em; color: var(--accent); background: rgba(200,164,78,0.1); padding: 0.1em 0.35em; border-radius: 2px; } body:not(.font-body) blockquote { border-left: 3px solid var(--accent); padding: 0.75rem 1.5rem; margin: 1.5rem 0; color: var(--silver); font-style: italic; background: rgba(200,164,78,0.04); max-width: 70ch; } body:not(.font-body) blockquote p { font-size: 1rem; color: inherit; max-width: none; } /* ── LAYOUT ──────────────────────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .container-narrow { max-width: 860px; margin: 0 auto; padding: 0 2rem; } /* Full-width section wrapper */ .section { padding: 5rem 0; } .section + .section { border-top: 1px solid var(--border); } /* Every other section gets a very slight background lift */ .section-alt { background: linear-gradient(180deg, rgba(21,29,48,0.3) 0%, transparent 100%); } /* ── NAVIGATION ──────────────────────────────────────────── */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 0 1.25rem; height: 80px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(25, 31, 49, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: fixed; top: 0; left: 0; right: 0; z-index: 200; } .navbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(123,208,255,0.5), transparent); } .navbar a.logo, .navbar a.logo:hover { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: 1.15rem; color: #dce1fb; display: flex; align-items: center; gap: 0; text-decoration: none; } .navbar a.logo span { color: rgba(123,208,255,0.6); } .logo-dot { display: inline-block; width: 8px; height: 8px; background: #7bd0ff; border-radius: 50%; margin-left: 1rem; animation: pulse-dot 2s ease-in-out infinite; } .nav-links { display: flex; gap: 1.5rem; align-items: center; } .navbar .nav-links a { font-family: 'Space Grotesk', sans-serif; font-size: 0.625rem; font-weight: 700; color: rgba(220,225,251,0.5); text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.2s; text-decoration: none; } .navbar .nav-links a:hover { color: #7bd0ff; } .navbar .nav-links a.active { color: #7bd0ff; } .navbar .nav-links .nav-cta, .navbar .nav-links a.nav-cta { background: linear-gradient(90deg, #7bd0ff, #4edea3); color: #05080f; font-family: 'Space Grotesk', sans-serif; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; padding: 0.65rem 1.6rem; border-radius: 2px; border: none; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .navbar .nav-links .nav-cta:hover, .navbar .nav-links a.nav-cta:hover { color: #05080f; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(123,208,255,0.25); } .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: rgba(220,225,251,0.6); background: none; border: none; transition: color 0.15s; } .menu-toggle:hover { color: #7bd0ff; } /* ── HERO SECTION ────────────────────────────────────────── */ .hero { position: relative; text-align: center; padding: 6rem 2rem 5rem; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(200,164,78,0.12) 0%, transparent 70%); pointer-events: none; } .hero > * { position: relative; } .hero h1 { margin-bottom: 1.25rem; } .hero .lead { margin: 0 auto 2.25rem; } .hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; text-align: center; max-width: 100%; margin: 0 auto 0.85em; } /* Inner page hero — for non-home pages */ .page-hero { position: relative; padding: 5rem 2rem 3rem; border-bottom: 1px solid rgba(99,230,255,0.08); overflow: hidden; background: linear-gradient(180deg, rgba(21,29,48,0.5) 0%, rgba(5,8,15,0.0) 100%); } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 20% 30%, rgba(123,208,255,0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 80% at 80% 60%, rgba(200,164,78,0.04) 0%, transparent 70%); pointer-events: none; } .page-hero > * { position: relative; } .page-hero h2 { margin-bottom: 0.5rem; } .page-hero .breadcrumb { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .page-hero .breadcrumb a { color: var(--dim); } .page-hero .breadcrumb a:hover { color: var(--accent); } /* ── PANELS / CARDS ──────────────────────────────────────── */ .panel { background: linear-gradient(180deg, rgba(25,31,49,0.6) 0%, rgba(12,18,32,0.8) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(69,70,77,0.2); padding: 1.75rem; position: relative; box-shadow: 0 4px 24px -4px rgba(0,0,0,0.4); transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s; } .panel:hover { box-shadow: 0 8px 32px -4px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,230,255,0.08); border-color: rgba(99,230,255,0.15); transform: translateY(-2px); } .panel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(123,208,255,0.3), transparent 60%); } .panel::after { content: ''; position: absolute; inset: 1px; border: 1px solid rgba(255,255,255,0.03); pointer-events: none; border-radius: inherit; } .panel h4 { color: var(--white); margin-bottom: 0.6rem; } .panel p { font-size: 0.9rem; color: var(--silver); max-width: none; } /* Coloured panels */ .panel-blue { border-color: rgba(94,143,212,0.4); background: rgba(94,143,212,0.07); } .panel-blue::before { border-color: var(--blue); } .panel-red { border-color: rgba(212,96,94,0.4); background: rgba(212,96,94,0.07); } .panel-red::before { border-color: var(--red); } .panel-green { border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.06); } .panel-green::before { border-color: var(--green); } .panel-purple { border-color: rgba(155,114,207,0.4); background: rgba(155,114,207,0.07); } .panel-purple::before { border-color: var(--purple); } .panel-gold { border-color: rgba(200,164,78,0.45); background: rgba(200,164,78,0.07); } .panel-gold::before { border-color: var(--accent); } /* ── CALLOUT BLOCKS ──────────────────────────────────────── */ .callout { padding: 1.1rem 1.4rem; border-left: 3px solid var(--accent); background: rgba(200,164,78,0.06); margin: 1.5rem 0; } .callout.callout-blue { border-color: var(--blue); background: rgba(94,143,212,0.07); } .callout.callout-green { border-color: var(--green); background: rgba(74,222,128,0.06); } .callout.callout-red { border-color: var(--red); background: rgba(212,96,94,0.07); } .callout.callout-purple { border-color: var(--purple); background: rgba(155,114,207,0.07); } .callout p { font-size: 0.9rem; color: var(--light); max-width: none; } .callout h5 { margin-bottom: 0.3rem; } /* ── GATE ROWS ───────────────────────────────────────────── */ .gate-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); background: var(--slate); margin-bottom: 3px; transition: background 0.15s, border-color 0.15s; } .gate-row:hover { background: rgba(200,164,78,0.05); border-color: rgba(200,164,78,0.3); } .gate-row.pass { border-left: 3px solid var(--green); } .gate-row.fail { border-left: 3px solid var(--red); } .gate-verdict { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 700; } .gate-verdict.pass { color: var(--green); } .gate-verdict.fail { color: var(--red); } .gate-verdict.pending { color: var(--muted); } .gate-fields { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--silver); margin-top: 0.4rem; line-height: 1.6; } .gate-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; padding-top: 0.1rem; min-width: 2.5rem; } .gate-body { flex: 1; } .gate-body h5 { margin-bottom: 0.2rem; } .gate-body p { font-size: 0.88rem; max-width: none; } .gate-status { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.25em 0.6em; border-radius: 2px; flex-shrink: 0; align-self: flex-start; } .gate-status.pass { background: rgba(74,222,128,0.2); color: var(--green); } .gate-status.fail { background: rgba(212,96,94,0.2); color: var(--red); } /* ── BADGES / TAGS ───────────────────────────────────────── */ .badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--steel); padding: 0.3em 0.7em; background: rgba(26,32,53,0.8); color: var(--silver); border-radius: 2px; } .badge-gold { border-color: var(--accent); color: var(--accent); background: rgba(200,164,78,0.1); } .badge-blue { border-color: var(--blue); color: var(--blue); background: rgba(94,143,212,0.1); } .badge-green { border-color: var(--green); color: var(--green); background: rgba(74,222,128,0.1); } .badge-red { border-color: var(--red); color: var(--red); background: rgba(212,96,94,0.1); } .badge-purple { border-color: var(--purple); color: var(--purple); background: rgba(155,114,207,0.1); } /* ── TRUST STRIP ─────────────────────────────────────────── */ .trust-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ── STAT / METRIC ───────────────────────────────────────── */ .metric-label { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; } .metric-val { font-family: 'Space Grotesk', sans-serif; font-size: 2.4rem; color: var(--white); line-height: 1; letter-spacing: 0; } .metric-val.gold { color: var(--accent); } .metric-val.green { color: var(--green); } .metric-val.blue { color: var(--blue); } .metric-val.red { color: var(--red); } /* ── STAT ROW ────────────────────────────────────────────── */ .stat-row { display: flex; gap: 0; border: 1px solid var(--border); overflow: hidden; } .stat-cell { flex: 1; padding: 1.5rem 2rem; border-right: 1px solid var(--border); position: relative; } .stat-cell:last-child { border-right: none; } .stat-cell::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.4; } /* ── DIVIDER ─────────────────────────────────────────────── */ .divider { height: 1px; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: 0.3; margin: 3rem 0; } /* ── TABLES ──────────────────────────────────────────────── */ body:not(.font-body) table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } body:not(.font-body) thead tr { background: rgba(21,29,48,0.8); } body:not(.font-body) th { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--steel); white-space: nowrap; } body:not(.font-body) td { padding: 0.75rem 1rem; color: var(--silver); border-bottom: 1px solid rgba(45,54,82,0.35); line-height: 1.5; vertical-align: top; } body:not(.font-body) td:first-child { color: var(--light); font-weight: 500; } body:not(.font-body) tbody tr:hover { background: rgba(200,164,78,0.03); transition: background .15s; } body:not(.font-body) td.yes { color: var(--green); font-weight: 500; } body:not(.font-body) td.no { color: var(--dim); } body:not(.font-body) td.partial{ color: var(--accent); } /* Row group headers in tables */ tr.tgroup td { background: rgba(21,29,48,0.9); color: var(--muted); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; padding: 0.5rem 1rem; border-bottom: none; } /* ── TERMINAL BOX ────────────────────────────────────────── */ .terminal-box { background: rgba(5,8,15,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(99,230,255,0.1); border-top: 2px solid rgba(99,230,255,0.2); border-radius: 12px; padding: 1.25rem 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #9bb9ff; line-height: 1.7; overflow-x: auto; position: relative; } .terminal-box::before { content: '● ● ●'; position: absolute; top: 0.5rem; left: 1rem; font-size: 0.5rem; color: rgba(123,208,255,0.3); letter-spacing: 0.4em; } .terminal-box .key { color: var(--silver); } .terminal-box .str { color: var(--accent); } .terminal-box .num { color: var(--blue); } .terminal-box .kw { color: var(--purple); } .terminal-box .cmt { color: var(--dim); font-style: italic; } /* ── GRID HELPERS ────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .cols-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; } /* ── PROSE — for documentation pages ────────────────────── */ .prose { max-width: 780px; line-height: 1.8; } .prose p { color: var(--light); font-size: 0.95rem; margin-bottom: 1rem; max-width: none; } .prose h2 { font-size: 1.9rem; margin-top: 3rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .prose h3 { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 2.5rem; margin-bottom: 0.5rem; } .prose h4 { font-size: 1.1rem; margin-top: 1.75rem; margin-bottom: 0.4rem; } .prose ul, .prose ol { padding-left: 0; list-style: none; margin: 1rem 0 1.25rem; } .prose ul li { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; color: var(--light); font-size: 0.95rem; } .prose ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent); font-family: 'JetBrains Mono', monospace; } .prose ol { counter-reset: prose-ol; } .prose ol li { padding: 0.4rem 0 0.4rem 2rem; position: relative; color: var(--light); font-size: 0.95rem; counter-increment: prose-ol; } .prose ol li::before { content: counter(prose-ol) '.'; position: absolute; left: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--accent); font-weight: 700; top: 0.55rem; } .prose strong { color: var(--white); } .prose code { font-size: 0.82em; } .prose blockquote { margin: 2rem 0; } .prose table { margin: 1.5rem 0; } /* Doc section anchors */ .doc-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .doc-section:first-of-type { border-top: none; margin-top: 1.5rem; padding-top: 0; } .section-anchor { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--dim); letter-spacing: 0.15em; text-transform: uppercase; display: block; margin-bottom: 0.6rem; } /* Normative / spec metadata bar */ .doc-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--border); margin-bottom: 2rem; } /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.8rem 1.6rem; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; border-radius: 0; white-space: nowrap; } .btn:hover { background: var(--accent); color: var(--ink); } .btn-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); } .btn-primary:disabled, .btn-primary[disabled] { background: var(--steel); border-color: var(--steel); color: var(--muted); opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-ghost { border-color: var(--border); color: var(--silver); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; } /* ── FOOTER ──────────────────────────────────────────────── */ .footer { margin-top: 6rem; border-top: 1px solid var(--border); padding: 2.5rem 2rem; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--dim); letter-spacing: 0.05em; background: rgba(10,15,26,0.5); } .footer a { color: var(--dim); margin: 0 0.6rem; transition: color 0.15s; text-decoration: none; } .footer a:hover { color: #7bd0ff; } .footer-links { margin-top: 1rem; } /* ── VERTICAL NAV (docs sidebar) ─────────────────────────── */ .doc-nav { position: sticky; top: 80px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; } .doc-nav h5 { margin-bottom: 0.75rem; } .doc-nav ul { list-style: none; } .doc-nav ul li a { display: block; padding: 0.45rem 0.75rem; color: var(--dim); border-left: 2px solid var(--border); font-size: 0.7rem; transition: color 0.15s, border-color 0.15s; } .doc-nav ul li a:hover, .doc-nav ul li a.active { color: var(--accent); border-color: var(--accent); } /* ── STEP INDICATORS ─────────────────────────────────────── */ .steps { counter-reset: step-counter; list-style: none; } .steps li { counter-increment: step-counter; display: flex; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); } .steps li:last-child { border-bottom: none; } .steps li::before { content: counter(step-counter); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; color: var(--accent); background: rgba(200,164,78,0.1); border: 1px solid rgba(200,164,78,0.3); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .steps .step-body h4 { font-size: 1rem; margin-bottom: 0.25rem; } .steps .step-body p { font-size: 0.88rem; } /* ── CHECKLIST ───────────────────────────────────────────── */ .checklist { list-style: none; } .checklist li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.4rem 0; font-size: 0.9rem; color: var(--silver); } .checklist li .ck { color: var(--green); font-weight: 700; flex-shrink: 0; } .checklist li .cx { color: var(--dim); flex-shrink: 0; } /* ── VERIFY / LOG LIVE INDICATOR ─────────────────────────── */ .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-dot 2s ease-in-out infinite; margin-right: 0.4rem; vertical-align: middle; } @keyframes pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--green); } 50% { opacity: 0.6; box-shadow: 0 0 12px var(--green); } } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .cols-sidebar { grid-template-columns: 1fr; } .doc-nav { position: static; } } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .stat-row { flex-direction: column; } .stat-cell { border-right: none; border-bottom: 1px solid var(--border); } .hero { padding: 4rem 1.5rem 3rem; } .page-hero { padding: 2.5rem 1.5rem 2rem; } .container, .container-narrow { padding: 0 1.25rem; } .section { padding: 3rem 0; } .navbar { padding: 0 1.25rem; } .nav-links { display: none; flex-direction: column; position: fixed; top: 80px; left: 0; right: 0; background: rgba(5,8,15,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1.5rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.05); gap: 1rem; z-index: 199; } .navbar .nav-links a { font-size: 0.7rem; color: rgba(220,225,251,0.6); } .navbar .nav-links a:hover, .navbar .nav-links a.active { color: #7bd0ff; } .navbar .nav-links .nav-cta { display: inline-block; text-align: center; } .nav-links.show { display: flex; } .menu-toggle { display: block; } } @media (min-width: 769px) and (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2,1fr); } } /* ============================================================ OBLIGATIONSIGN — COMPATIBILITY LAYER Safe drop-in patch. No HTML changes required. ============================================================ */ body { background-color: var(--ink); color: var(--light); } .container, .container-narrow { width: 100%; max-width: 1200px; margin: 0 auto; } a { text-decoration: none; } a:hover { text-decoration: none; } /* navbar / nav-links overrides removed — definitive rules are above */ .hero { background-color: var(--ink); } .hero p, .hero .lead { margin-left: auto; margin-right: auto; } .btn { display: inline-block; cursor: pointer; } .btn-primary { background: var(--accent); color: var(--ink); } .btn-primary:hover { background: var(--accent-dim); } .nav-links.show { display: flex !important; } img, svg, video { max-width: 100%; height: auto; } .hero h1 { text-wrap: balance; } table { display: block; overflow-x: auto; } /* ============================================================ ENHANCED HOMEPAGE / AGTS CLEARINGHOUSE LAYER Append after existing stylesheet ============================================================ */ /* ── EXTENDED TOKENS ──────────────────────────────────────── */ :root { --cyan: #63e6ff; --cyan-strong: #22d3ee; --cyan-deep: #0891b2; --cyan-soft: rgba(99, 230, 255, 0.12); --gold-soft: rgba(200,164,78,0.12); --green-soft: rgba(74,222,128,0.12); --red-soft: rgba(212,96,94,0.12); --surface-2: rgba(12, 18, 32, 0.72); --surface-3: rgba(21, 29, 48, 0.88); --surface-glass: linear-gradient(180deg, rgba(21,29,48,0.82) 0%, rgba(12,18,32,0.94) 100%); --glow-cyan: 0 0 0 1px rgba(99,230,255,0.12), 0 12px 40px rgba(34,211,238,0.10); --glow-gold: 0 0 0 1px rgba(200,164,78,0.14), 0 12px 40px rgba(200,164,78,0.08); --shadow-soft: 0 10px 40px rgba(0,0,0,0.32); --radius-lg: 18px; --radius-xl: 24px; } /* ── GLOBAL POLISH ────────────────────────────────────────── */ body { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), radial-gradient(circle at 50% -10%, rgba(99,230,255,0.06), transparent 35%), radial-gradient(circle at 85% 10%, rgba(200,164,78,0.05), transparent 28%); background-size: 48px 48px, 48px 48px, auto, auto; } /* ── NAV ENHANCEMENT (no-op — main nav rules are now definitive) ── */ /* ── HERO REBUILD ─────────────────────────────────────────── */ .hero { padding: 7.5rem 2rem 5.5rem; text-align: center; isolation: isolate; background-color: var(--ink); } .hero-eyebrow { color: var(--accent); opacity: 0.95; margin-bottom: 1.1rem; } .hero-kicker { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; margin: 0 auto 1.4rem; border: 1px solid rgba(99,230,255,0.18); border-radius: 999px; background: rgba(99,230,255,0.06); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); } .hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); flex-shrink: 0; } .hero .hero-subhead { max-width: 44ch; margin: 0 auto 0.75rem; font-size: clamp(1.04rem, 2vw, 1.2rem); line-height: 1.5; color: var(--accent); font-weight: 500; } .hero .hero-proofline { max-width: 60ch; margin: 0 auto 2rem; color: var(--silver); font-size: 0.97rem; line-height: 1.75; } /* ── HERO PANEL ──────────────────────────────────────────── */ .hero-panel { max-width: 1080px; margin: 2rem auto 2rem; padding: 1.4rem; border: 1px solid rgba(99,230,255,0.14); border-radius: var(--radius-xl); background: var(--surface-glass); box-shadow: var(--shadow-soft), var(--glow-cyan); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); text-align: left; } .hero-panel-inner { display: flex; flex-direction: column; gap: 1rem; } /* ── GATE STRIP ──────────────────────────────────────────── */ .gate-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.9rem; } @media (max-width: 860px) { .gate-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 580px) { .gate-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px) { .gate-strip { grid-template-columns: 1fr; } } .gate-chip { position: relative; padding: 0.85rem 0.8rem 0.8rem; border: 1px solid rgba(99,230,255,0.14); border-radius: 12px; background: linear-gradient(180deg, rgba(99,230,255,0.05) 0%, rgba(21,29,48,0.85) 100%); overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .gate-chip:hover { transform: translateY(-2px); border-color: rgba(99,230,255,0.28); box-shadow: var(--glow-cyan); } .gate-chip::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent 75%); } .gate-chip .gate-num { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.45rem; } .gate-chip .gate-title { font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700; line-height: 1.25; color: var(--white); margin: 0 0 0.35rem; } .gate-chip .gate-copy { font-size: 0.78rem; line-height: 1.55; color: var(--silver); } /* ── PROTOCOL RAIL ───────────────────────────────────────── */ .protocol-rail { display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: center; padding: 0.75rem 0.9rem; border: 1px solid rgba(200,164,78,0.16); border-radius: 12px; background: rgba(200,164,78,0.06); overflow-x: auto; } .protocol-node, .protocol-arrow { white-space: nowrap; flex-shrink: 0; } .protocol-node { display: inline-flex; align-items: center; min-height: 34px; padding: 0.45rem 0.75rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; background: rgba(15,22,36,0.7); font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light); } .protocol-node.primary { border-color: rgba(99,230,255,0.24); color: var(--cyan); background: rgba(99,230,255,0.08); } .protocol-node.secure { border-color: rgba(79,168,114,0.28); color: var(--green); background: rgba(79,168,114,0.08); } .protocol-arrow { color: var(--dim); font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; opacity: 0.75; } /* ── SECURITY / TRUST SIDEBAR ────────────────────────────── */ .security-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (max-width: 560px) { .security-stack { grid-template-columns: 1fr; } } .security-card { position: relative; padding: 0.9rem 1rem 0.85rem; border: 1px solid rgba(0,212,255,.1); border-radius: 14px; background: linear-gradient(180deg, rgba(21,29,48,0.65) 0%, rgba(15,22,36,0.82) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .security-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 72%); opacity: 0.8; border-radius: 14px 14px 0 0; } .security-card h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; } .security-card p { max-width: none; font-size: 0.82rem; line-height: 1.6; color: var(--silver); margin: 0; } /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { border-radius: 999px; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-strong) 100%); border-color: rgba(99,230,255,0.5); color: #041018; box-shadow: 0 10px 28px rgba(34,211,238,0.18); } .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #8cefff 0%, #4adbf5 100%); border-color: rgba(99,230,255,0.62); color: #041018; } .btn-ghost { border-color: rgba(99,230,255,0.22); color: var(--cyan); background: rgba(99,230,255,0.05); } .btn-ghost:hover { border-color: rgba(99,230,255,0.38); background: rgba(99,230,255,0.10); color: var(--white); } /* ── TRUST STRIP / BADGES ────────────────────────────────── */ .trust-strip { gap: 0.75rem; border-top: 1px solid rgba(99,230,255,0.10); border-bottom: 1px solid rgba(99,230,255,0.10); } .badge { border-radius: 999px; padding: 0.42em 0.8em; border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); } .badge-blue { border-color: rgba(99,230,255,0.24); color: var(--cyan); background: rgba(99,230,255,0.08); } .badge-gold { background: rgba(200,164,78,0.10); } .badge-green { background: rgba(74,222,128,0.10); } /* ── GATE ROW UPGRADE ────────────────────────────────────── */ .gate-row { border-radius: 14px; border-color: rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(12,18,32,0.82) 100%); } .gate-row:hover { background: linear-gradient(180deg, rgba(99,230,255,0.05) 0%, rgba(12,18,32,0.86) 100%); border-color: rgba(99,230,255,0.16); } .gate-label { color: var(--cyan); } .gate-status.pass { background: rgba(74,222,128,0.14); } .gate-status.fail { background: rgba(212,96,94,0.14); } /* ── CALLOUTS ────────────────────────────────────────────── */ .callout { border-left-width: 2px; border-radius: 0 16px 16px 0; background: linear-gradient(180deg, rgba(200,164,78,0.08) 0%, rgba(255,255,255,0.015) 100%); } /* ── PANEL EVOLUTION ─────────────────────────────────────── */ .panel { border-radius: var(--radius-lg); } .panel:hover { border-color: rgba(99,230,255,0.15); box-shadow: var(--shadow-soft), var(--glow-cyan); } .panel-blue { background: linear-gradient(180deg, rgba(99,230,255,0.06) 0%, rgba(12,18,32,0.90) 100%); } /* ── TABLE UPGRADE ───────────────────────────────────────── */ table { border-radius: 16px; overflow: hidden; } thead tr { background: rgba(99,230,255,0.04); } tbody tr:hover { background: rgba(99,230,255,0.03); } /* ── FOOTER ──────────────────────────────────────────────── */ .footer { border-top: 1px solid rgba(99,230,255,0.10); background: linear-gradient(180deg, rgba(10,15,26,0.74) 0%, rgba(10,15,26,0.94) 100%); } .footer a:hover { color: var(--cyan); } /* ── RESPONSIVE HERO ─────────────────────────────────────── */ @media (max-width: 768px) { .hero { padding: 5.25rem 1.25rem 3.5rem; } .hero-panel { padding: 1rem; border-radius: 20px; } .protocol-rail { flex-wrap: wrap; } } /* ── PROOF STATUS ────────────────────────────────────────── */ .proof-status { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.8rem; border: 1px solid rgba(74,222,128,0.18); border-radius: 999px; background: rgba(74,222,128,0.07); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); } /* ================================================================ LANDING PAGE — animations, effects, HUD components Extracted from index.html inline styles for maintainability. ================================================================ */ /* ── KEYFRAME ANIMATIONS ────────────────────────────────────── */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes reverse-spin-slow { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .animate-spin-slow { animation: spin-slow 8s linear infinite; } .animate-reverse-spin-slow { animation: reverse-spin-slow 6s linear infinite; } @keyframes pulse-fast { 0%, 100% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 10px #7bd0ff); } 50% { opacity: 0.6; filter: brightness(1) drop-shadow(0 0 2px #7bd0ff); } } .animate-pulse-fast { animation: pulse-fast 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes scroll-v { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes counter-glow { 0%, 100% { text-shadow: 0 0 8px rgba(123,208,255,0.3); } 50% { text-shadow: 0 0 20px rgba(123,208,255,0.6); } } @keyframes line-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 2px currentColor); } 50% { filter: drop-shadow(0 0 6px currentColor); } } /* ── BACKGROUND EFFECTS ─────────────────────────────────────── */ .data-stream-bg { background-image: linear-gradient(rgba(123, 208, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 208, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; } .particle-stream-fast { position: absolute; width: 1px; background: linear-gradient(to bottom, transparent, #7bd0ff, transparent); opacity: 0.4; animation: scroll-v linear infinite; } /* ── GLASS & GLOW ───────────────────────────────────────────── */ .glass-panel { background: rgba(25, 31, 49, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(69, 70, 77, 0.15); } .text-glow { text-shadow: 0 0 80px rgba(123, 208, 255, 0.15); } .cta-gradient { background: linear-gradient(135deg, #7bd0ff, #008abb); } .counter-glow { animation: counter-glow 3s ease-in-out infinite; } .svg-glow line, .svg-glow path { animation: line-glow-pulse 4s ease-in-out infinite; } /* ── PIPELINE DIAGRAM ──────────────────────────────────────── */ .pipeline-scroll-container { -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(99,230,255,0.2) transparent; } .pipeline-scroll-container::-webkit-scrollbar { height: 4px; } .pipeline-scroll-container::-webkit-scrollbar-track { background: transparent; } .pipeline-scroll-container::-webkit-scrollbar-thumb { background: rgba(99,230,255,0.2); border-radius: 2px; } .pipeline-svg { width: 100%; height: auto; display: block; } @media (max-width: 768px) { .pipeline-svg { width: 900px; min-width: 900px; } } /* ── LAPTOP MOCKUP ─────────────────────────────────────────── */ .laptop-frame { position: relative; max-width: 100%; margin: 0 auto; perspective: 1200px; } .laptop-screen { position: relative; border-radius: 12px 12px 0 0; border: 2px solid rgba(99,230,255,0.15); border-bottom: none; background: #0a0f1a; box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 20px 60px -10px rgba(0,0,0,0.6), 0 0 80px -20px rgba(99,230,255,0.12); overflow: hidden; } .laptop-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); } .laptop-url-bar { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(220,225,251,0.4); background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; padding: 3px 10px; letter-spacing: 0.02em; } .laptop-viewport { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .laptop-dashboard-img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; } .laptop-gradient-fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,15,0.7) 0%, transparent 30%), linear-gradient(to bottom, rgba(5,8,15,0.3) 0%, transparent 8%); pointer-events: none; } .scanline-overlay { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(99,230,255,0.015) 2px, rgba(99,230,255,0.015) 4px ); pointer-events: none; animation: scanline-drift 8s linear infinite; } .data-pulse-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 600px 200px at 20% 40%, rgba(99,230,255,0.06), transparent), radial-gradient(ellipse 400px 300px at 80% 60%, rgba(78,222,163,0.04), transparent); pointer-events: none; animation: data-pulse 6s ease-in-out infinite; } @keyframes scanline-drift { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } } @keyframes data-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .laptop-base { position: relative; height: 14px; background: linear-gradient(180deg, rgba(30,36,54,1) 0%, rgba(20,26,42,1) 100%); border-radius: 0 0 4px 4px; border: 1px solid rgba(255,255,255,0.06); border-top: 1px solid rgba(99,230,255,0.1); } .laptop-base::after { content: ''; position: absolute; bottom: -6px; left: 15%; right: 15%; height: 6px; background: linear-gradient(180deg, rgba(20,26,42,0.8), transparent); border-radius: 0 0 50% 50%; } .laptop-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: rgba(255,255,255,0.06); border-radius: 0 0 4px 4px; } @media (max-width: 768px) { .laptop-screen { border-radius: 8px 8px 0 0; } .laptop-toolbar { padding: 6px 10px; } .laptop-url-bar { font-size: 7px; padding: 2px 6px; } .laptop-base { height: 10px; } .laptop-notch { width: 50px; height: 3px; } } /* ── SCROLL REVEAL ──────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].revealed { opacity: 1; transform: translateY(0); } [data-reveal-delay="1"] { transition-delay: 0.12s; } [data-reveal-delay="2"] { transition-delay: 0.24s; } [data-reveal-delay="3"] { transition-delay: 0.36s; } [data-reveal-delay="4"] { transition-delay: 0.48s; } [data-reveal-delay="5"] { transition-delay: 0.60s; } /* ── HUD TELEMETRY METRICS ──────────────────────────────────── */ .hud-metric { background: rgba(5, 8, 15, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(123, 208, 255, 0.12); padding: 12px 16px; } .hud-metric-gold { background: rgba(5, 8, 15, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(200, 164, 78, 0.15); padding: 12px 16px; } /* ── REDUCED MOTION ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .animate-spin-slow, .animate-reverse-spin-slow, .animate-pulse-fast, .particle-stream-fast, .counter-glow, .svg-glow line, .svg-glow path { animation: none; } [data-reveal] { opacity: 1; transform: none; transition: none; } animate, animateMotion { display: none; } } /* ================================================================ LANDING PAGE — MOBILE RESPONSIVENESS ================================================================ */ /* ── Small screens (≤768px) ─────────────────────────────────── */ @media (max-width: 768px) { .hud-metric, .hud-metric-gold { padding: 10px 12px; } .hud-metric .text-lg, .hud-metric-gold .text-lg { font-size: 1rem; } }