/* ============================================================================ HedgeGuard — Design System Faithful port of the approved Lovable design (tokens, type, spacing). Plain CSS so it drops into any stack (WordPress theme, block editor, etc.). ---------------------------------------------------------------------------- Fonts: Inter (display/body), Playfair Display (serif accent), JetBrains Mono (labels/numerics) — loaded in via Google Fonts. ========================================================================== */ :root { --radius: 0.375rem; /* Core palette (OKLCH, identical to Lovable export) */ --background: oklch(99.2% 0.002 80); --foreground: oklch(16% 0.015 250); --ink: oklch(16% 0.015 250); --ink-soft: oklch(45% 0.02 250); --surface: oklch(97% 0.004 80); --surface-elevated: oklch(99.6% 0.002 80); --card: oklch(99.6% 0.002 80); --primary: oklch(18% 0.025 255); --primary-foreground: oklch(99% 0.002 80); --secondary: oklch(96% 0.005 80); --muted: oklch(55% 0.02 250); --muted-foreground: oklch(50% 0.02 250); --accent: oklch(18% 0.025 255); --accent-foreground: oklch(99% 0.002 80); --accent-section: oklch(18% 0.025 255); --accent-section-fg: oklch(99% 0.002 80); --success: oklch(62% 0.16 152); --destructive: oklch(58% 0.22 27); --border: oklch(90% 0.008 250); --input: oklch(90% 0.008 250); --ring: oklch(50% 0.02 250); /* Brand green — institutional emerald, used as a recurring brand accent across eyebrows, dots, decorative strokes, and tinted highlights. Single value across light and dark for visual consistency. Distinct from --success (which stays a pure status indicator). */ --brand: oklch(58% 0.15 152); --brand-strong: oklch(50% 0.16 152); --brand-soft: oklch(95% 0.04 152); --brand-foreground: oklch(99.6% 0.002 80); /* Auto-inverting accent section — opposite contrast to .on-accent. In light mode this is a dark band (high drama on warm-white). In dark mode it becomes a light band (high drama on near-black). Use for sections that should always feel "loud" relative to the page. */ --flip-bg: oklch(14% 0.018 250); --flip-fg: oklch(98% 0.003 80); --flip-muted: oklch(72% 0.018 250); --flip-border: oklch(28% 0.012 250); /* Status colors used in the live-dashboard mock */ --emerald: oklch(62% 0.16 152); --emerald-strong: oklch(55% 0.17 152); --rose: oklch(63% 0.2 18); --amber: oklch(72% 0.16 70); --indigo: oklch(55% 0.18 270); --blue: oklch(52% 0.2 255); --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-serif: "Playfair Display", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --maxw: 80rem; /* max-w-7xl */ --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18); --shadow-lg: 0 10px 24px -8px rgba(15, 23, 42, 0.18); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); } /* ============================================================================ DARK MODE (full dark — matches the HedgeGuard application theme) Triggers: 1. [data-theme="dark"] on — explicit user toggle 2. prefers-color-scheme: dark — visitor's OS setting (default), unless the user has explicitly chosen light ([data-theme="light"]). Every component reads these variables, so no component rules change. ========================================================================== */ :root[data-theme="dark"] { --background: oklch(16% 0.012 250); --foreground: oklch(95% 0.005 80); --ink: oklch(95% 0.005 80); --ink-soft: oklch(72% 0.015 250); --surface: oklch(20% 0.012 250); --surface-elevated: oklch(23% 0.014 250); --card: oklch(23% 0.014 250); --primary: oklch(90% 0.01 250); --primary-foreground: oklch(14% 0.015 250); --secondary: oklch(24% 0.012 250); --muted: oklch(60% 0.018 250); --muted-foreground: oklch(63% 0.018 250); --accent: oklch(90% 0.01 250); --accent-foreground: oklch(14% 0.015 250); --accent-section: oklch(20% 0.014 255); --accent-section-fg: oklch(96% 0.005 80); --success: oklch(68% 0.14 152); --destructive: oklch(64% 0.19 27); --border: oklch(32% 0.012 250); --input: oklch(32% 0.012 250); --ring: oklch(63% 0.018 250); /* Brand green (unified across modes — single institutional emerald) */ --brand: oklch(58% 0.15 152); --brand-strong: oklch(65% 0.16 152); --brand-soft: oklch(24% 0.04 152); --brand-foreground: oklch(14% 0.015 250); /* Flip section in dark mode = LIGHT band (inverted contrast) */ --flip-bg: oklch(96% 0.005 80); --flip-fg: oklch(14% 0.015 250); --flip-muted: oklch(46% 0.02 250); --flip-border: oklch(85% 0.008 250); --emerald: oklch(68% 0.14 152); --emerald-strong: oklch(62% 0.15 152); --rose: oklch(67% 0.18 18); --amber: oklch(76% 0.15 70); --indigo: oklch(64% 0.16 270); --blue: oklch(62% 0.18 255); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 10px 24px -8px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: oklch(16% 0.012 250); --foreground: oklch(95% 0.005 80); --ink: oklch(95% 0.005 80); --ink-soft: oklch(72% 0.015 250); --surface: oklch(20% 0.012 250); --surface-elevated: oklch(23% 0.014 250); --card: oklch(23% 0.014 250); --primary: oklch(90% 0.01 250); --primary-foreground: oklch(14% 0.015 250); --secondary: oklch(24% 0.012 250); --muted: oklch(60% 0.018 250); --muted-foreground: oklch(63% 0.018 250); --accent: oklch(90% 0.01 250); --accent-foreground: oklch(14% 0.015 250); --accent-section: oklch(20% 0.014 255); --accent-section-fg: oklch(96% 0.005 80); --success: oklch(68% 0.14 152); --destructive: oklch(64% 0.19 27); --border: oklch(32% 0.012 250); --input: oklch(32% 0.012 250); --ring: oklch(63% 0.018 250); --brand: oklch(58% 0.15 152); --brand-strong: oklch(65% 0.16 152); --brand-soft: oklch(24% 0.04 152); --brand-foreground: oklch(14% 0.015 250); --flip-bg: oklch(96% 0.005 80); --flip-fg: oklch(14% 0.015 250); --flip-muted: oklch(46% 0.02 250); --flip-border: oklch(85% 0.008 250); --emerald: oklch(68% 0.14 152); --emerald-strong: oklch(62% 0.15 152); --rose: oklch(67% 0.18 18); --amber: oklch(76% 0.15 70); --indigo: oklch(64% 0.16 270); --blue: oklch(62% 0.18 255); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 10px 24px -8px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--background); color: var(--foreground); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; display: block; } /* ---------- Utility scaffolding ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } .font-display { font-family: var(--font-display); letter-spacing: -0.02em; } .font-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .font-mono { font-family: var(--font-mono); } .tnum { font-variant-numeric: tabular-nums; } .muted { color: var(--muted-foreground); } .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-strong); background: color-mix(in oklab, var(--brand) 10%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); padding: 0.25rem 0.625rem; border-radius: 0.125rem; } .hairline-grid { background-image: linear-gradient(to right, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px); background-size: 48px 48px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 0.125rem; padding: 1rem 1.75rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: transform 0.18s ease, opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease; font-family: var(--font-body); } .btn-primary { background: var(--accent); color: var(--accent-foreground); box-shadow: var(--shadow-lg); } .btn-primary:hover { transform: translateY(-2px); } .btn-outline { background: var(--surface-elevated); border-color: var(--border); color: var(--foreground); } .btn-outline:hover { background: var(--surface); } .btn-sm { padding: 0.625rem 1.25rem; box-shadow: var(--shadow-sm); } .btn-ghost { padding: 0.5rem 1rem; } .btn-ghost:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); } /* On dark (accent) sections */ .on-accent { background: var(--accent-section); color: var(--accent-section-fg); } .on-accent .btn-light { background: var(--background); color: var(--foreground); } .on-accent .btn-light:hover { opacity: 0.9; } .on-accent .btn-outline-light { border: 1px solid color-mix(in oklab, var(--accent-section-fg) 20%, transparent); color: var(--accent-section-fg); background: transparent; } .on-accent .btn-outline-light:hover { background: color-mix(in oklab, var(--accent-section-fg) 5%, transparent); } /* Auto-inverting accent — flips background/text to the OPPOSITE of the page. Light mode: dark band on warm-white page (dramatic contrast). Dark mode: light band on near-black page (dramatic contrast, inverted). Use sparingly between standard sections to give a page rhythm. */ .on-accent-flip { background: var(--flip-bg); color: var(--flip-fg); } .on-accent-flip .eyebrow { color: var(--brand); } .on-accent-flip h1, .on-accent-flip h2, .on-accent-flip h3 { color: var(--flip-fg); } .on-accent-flip p { color: color-mix(in oklab, var(--flip-fg) 75%, transparent); } .on-accent-flip .serif { color: color-mix(in oklab, var(--flip-fg) 65%, transparent); } .on-accent-flip .muted, .on-accent-flip .pretty { color: color-mix(in oklab, var(--flip-fg) 75%, transparent); } .on-accent-flip .cell, .on-accent-flip .feat-cell { background: color-mix(in oklab, var(--flip-fg) 4%, var(--flip-bg)); border-color: var(--flip-border); } .on-accent-flip .cell h3, .on-accent-flip .feat-cell h3 { color: var(--flip-fg); } .on-accent-flip .cell p, .on-accent-flip .feat-cell p { color: color-mix(in oklab, var(--flip-fg) 70%, transparent); } .on-accent-flip .cell .idx, .on-accent-flip .feat-cell .idx { color: color-mix(in oklab, var(--flip-fg) 55%, transparent); } .on-accent-flip .cell .more .lm, .on-accent-flip .cell .more .arrow { color: var(--brand); } .on-accent-flip .check-list li .b { background: var(--brand); } .on-accent-flip .btn-light { background: var(--flip-fg); color: var(--flip-bg); } .on-accent-flip .btn-outline-light { border: 1px solid color-mix(in oklab, var(--flip-fg) 25%, transparent); color: var(--flip-fg); background: transparent; } .on-accent-flip .btn-outline-light:hover { background: color-mix(in oklab, var(--flip-fg) 5%, transparent); } .on-accent-flip .divider-grid { background: var(--flip-border); } /* Soft brand-tinted surface — for hero badges, eyebrows-with-pill, callouts. */ .brand-tint { background: var(--brand-soft); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); } /* ---------- Header ---------- */ /* ========================= WORDPRESS MENU FIX ========================= */ .primary-nav .nav-menu{ display:flex; align-items:center; gap:1.75rem; } .primary-nav .menu-item{ position:relative; list-style:none; } .primary-nav .menu-item > a{ color:var(--muted-foreground); transition:color .18s ease; font-size:0.875rem; font-weight:500; display:inline-flex; align-items:center; gap:.3rem; text-decoration:none; } .primary-nav .menu-item > a:hover{ color:var(--foreground); } .nav-menu li.menu-item-has-children > a::after { content: "▾"; font-size: 20px; margin-left: 6px; display: inline-block; transition: transform 0.3s ease; } .nav-menu li.menu-item-has-children:hover > a::after { transform: rotate(60deg); } /* DROPDOWN */ .primary-nav .sub-menu{ position:absolute; top:calc(100% + .75rem); left:0; min-width:17rem; background:var(--surface-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-2xl); padding:.5rem; opacity:0; visibility:hidden; transform:translateY(4px); transition:all .18s ease; z-index:60; } .primary-nav .menu-item:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } .primary-nav .sub-menu li{ list-style:none; } .primary-nav .sub-menu a{ display:block; padding:.65rem .75rem; border-radius:.25rem; color:var(--foreground); font-size:.875rem; font-weight:500; transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), padding 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .primary-nav .sub-menu a:hover{ background:var(--surface); padding-left: 1.35rem; } .site-header { position: sticky; top: 0; z-index: 50; width: 100%; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter: blur(12px); } .header-inner { display: flex; height: 4rem; align-items: center; justify-content: space-between; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; } .brand .dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 0.125rem; background: var(--brand); } .nav-left { display: flex; align-items: center; gap: 2.5rem; } .primary-nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.875rem; font-weight: 500; } .primary-nav > .nav-item > a, .primary-nav > a { color: var(--muted-foreground); transition: color 0.18s ease; } .primary-nav > .nav-item > a:hover, .primary-nav > a:hover { color: var(--foreground); } .header-cta { display: flex; align-items: center; gap: 0.75rem; } .menu-toggle { display: none; background: none; border: none; padding: 0.5rem; border-radius: 0.125rem; cursor: pointer; color: var(--foreground); } /* Dropdown menus */ .nav-item { position: relative; } .nav-item > a { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; } .nav-item > a .chev { font-size: 0.6rem; transition: transform 0.2s ease; } .dropdown { position: absolute; top: calc(100% + 0.75rem); left: 0; min-width: 17rem; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 60; } .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-item:hover > a .chev { transform: rotate(180deg); } .dropdown a { display: block; padding: 0.65rem 0.75rem; border-radius: 0.25rem; color: var(--foreground); font-size: 0.875rem; font-weight: 500; transition: background-color 0.15s ease; } .dropdown a:hover { background: var(--surface); } .menu-subtext { display: block; font-size: 0.72rem; color: var(--muted-foreground); font-weight: 400; margin-top: 0.1rem; } /* ---------- Sections ---------- */ .section { border-bottom: 1px solid var(--border); } .section-pad { padding-top: 6rem; padding-bottom: 6rem; } .bg-surface { background: var(--surface); } .section-head { margin-bottom: 4rem; padding-bottom: 2rem; } .section-head h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); margin-top: 1rem; } .section-head p { margin-top: 1rem; color: var(--muted-foreground); line-height: 1.6; max-width: 36rem; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); padding-top: 5rem; padding-bottom: 6rem; } .hero .grid-bg { position: absolute; inset: 0; opacity: 0.3; pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem; align-items: center; } .hero-copy { grid-column: span 12; } .hero-visual { grid-column: span 12; } .badge-live { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 0.125rem; background: color-mix(in oklab, var(--brand) 10%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); margin-bottom: 1.75rem; } .badge-live .pulse { position: relative; display: flex; width: 0.5rem; height: 0.5rem; } .badge-live .pulse .ping { position: absolute; inset: 0; border-radius: 9999px; background: var(--emerald); opacity: 0.75; animation: ping 1.4s cubic-bezier(0,0,0.2,1) infinite; } .badge-live .pulse .core { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--emerald-strong); } .badge-live .label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-strong); } .hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; line-height: 1.02; } .hero h1 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--muted-foreground); } .hero-sub { margin-top: 2rem; font-size: 1.125rem; color: var(--muted-foreground); max-width: 32rem; line-height: 1.6; } .hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero-stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 28rem; } .hero-stats .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); } .hero-stats .v { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Live dashboard mock ---------- */ .terminal { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; } .terminal-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.75rem; display: flex; align-items: center; justify-content: space-between; } .terminal-bar .dots { display: flex; gap: 0.375rem; } .terminal-bar .dots span { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: var(--border); } .terminal-bar .title { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--muted-foreground); letter-spacing: 0.15em; } .terminal-bar .live { font-family: var(--font-mono); font-size: 10px; color: var(--emerald-strong); display: flex; align-items: center; gap: 0.375rem; } .terminal-bar .live span { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--emerald-strong); } .terminal-body { padding: 1.5rem; } .terminal-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .terminal-kpis .k { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; color: var(--muted-foreground); } .terminal-kpis .v { margin-top: 0.375rem; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; } .pos-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-radius: 0.25rem; background: var(--surface); border: 1px solid color-mix(in oklab, var(--border) 50%, transparent); margin-bottom: 0.5rem; } .pos-row .left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .pos-row .tk { width: 2.25rem; height: 2.25rem; border-radius: 0.25rem; display: grid; place-items: center; font-size: 10px; color: #fff; font-weight: 700; flex-shrink: 0; } .pos-row .nm { font-size: 0.75rem; font-weight: 700; } .pos-row .id { font-size: 10px; color: var(--muted-foreground); font-family: var(--font-mono); } .pos-row .right { text-align: right; flex-shrink: 0; } .pos-row .px { font-size: 0.75rem; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .pos-row .chg { font-size: 10px; font-family: var(--font-mono); } .up { color: var(--emerald-strong); } .down { color: var(--rose); } .spark { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .spark div { background: color-mix(in oklab, var(--accent) 10%, transparent); border-radius: 0.125rem; } /* ---------- Logo strip ---------- */ .logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 3rem; padding: 2.5rem 0; } .logo-strip .lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted-foreground); } .logo-strip .logo { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: color-mix(in oklab, var(--foreground) 60%, transparent); } /* ---------- Module grid (gap-px divider style) ---------- */ .divider-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); } .cols-3 { grid-template-columns: 1fr; } .cols-5 { grid-template-columns: 1fr; } .cell { background: var(--background); padding: 2rem; transition: background-color 0.18s ease; display: block; } .cell:hover { background: var(--surface); } .cell .idx { font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); letter-spacing: 0.18em; display: block; margin-bottom: 2rem; } .cell h3 { font-size: 1.25rem; margin-bottom: 0.75rem; } .cell p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; margin-bottom: 2rem; } .cell .more { display: flex; align-items: center; justify-content: space-between; } .cell .more .lm { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); } .cell .more .arrow { color: var(--accent); transition: transform 0.18s ease; } .cell:hover .more .arrow { transform: translateX(4px); } /* Industries (5-up) cells */ .cell-tall .idx { margin-bottom: 0; } .cell-tall h3 { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; } .cell-tall .arrow { display: inline-block; margin-top: 1.5rem; color: var(--accent); transition: transform 0.18s ease; } .cell-tall:hover .arrow { transform: translateX(4px); } /* ---------- Bridge / two-col feature ---------- */ .split { display: grid; gap: 3rem; align-items: start; grid-template-columns: 1fr; } .split .lead h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); margin-top: 1rem; } .split .lead h2 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--muted-foreground); } .split .lead p { margin-top: 1.25rem; color: var(--muted-foreground); line-height: 1.6; } .check-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; } .check-list li { display: flex; align-items: flex-start; gap: 0.75rem; } .check-list li .b { margin-top: 0.5rem; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--accent); flex-shrink: 0; } .flow-card { background: var(--background); border: 1px solid var(--border); padding: 2rem; border-radius: var(--radius); } .flow-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .flow-head .l { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); } .flow-head .r { font-family: var(--font-mono); font-size: 10px; color: var(--emerald-strong); } .flow-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .flow-step { position: relative; } .flow-step .box { border: 1px solid var(--border); background: var(--surface-elevated); border-radius: 0.125rem; padding: 1rem; } .flow-step .box .n { font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); letter-spacing: 0.15em; } .flow-step .box .t { margin-top: 0.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .flow-step .box .d { font-size: 11px; color: var(--muted-foreground); margin-top: 0.25rem; } .flow-metrics { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-family: var(--font-mono); } .flow-metrics > div { border-top: 1px solid var(--border); padding-top: 0.75rem; } .flow-metrics .k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); } .flow-metrics .v { margin-top: 0.25rem; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Middle office (accent bg) stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: color-mix(in oklab, var(--accent-foreground) 10%, transparent); border: 1px solid color-mix(in oklab, var(--accent-foreground) 10%, transparent); } .stat-cell { background: color-mix(in oklab, var(--accent-section-fg) 6%, var(--accent-section)); padding: 1.75rem; border: 1px solid color-mix(in oklab, var(--accent-section-fg) 10%, transparent); } .stat-cell .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklab, var(--accent-section-fg) 50%, transparent); } .stat-cell .v { margin-top: 1rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-cell .d { margin-top: 0.5rem; font-size: 0.75rem; color: color-mix(in oklab, var(--accent-section-fg) 60%, transparent); line-height: 1.55; } /* ---------- Compliance strip ---------- */ .compliance-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 3rem 0; } .compliance-strip .lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: var(--muted-foreground); } .compliance-strip .item { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: -0.01em; color: color-mix(in oklab, var(--foreground) 70%, transparent); } /* ---------- Accordion (FAQ / progressive disclosure) ---------- */ .accordion { border-top: 1px solid var(--border); } .acc-item { border-bottom: 1px solid var(--border); } .acc-trigger { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; text-align: left; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--foreground); letter-spacing: -0.01em; } .acc-trigger:hover { color: color-mix(in oklab, var(--foreground) 75%, var(--accent)); } .acc-trigger .pm { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; } .acc-trigger .pm::before, .acc-trigger .pm::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.25s ease, opacity 0.25s ease; } .acc-trigger .pm::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); } .acc-trigger .pm::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); } .acc-item.open .acc-trigger .pm::after { opacity: 0; transform: translateX(-50%) rotate(90deg); } .acc-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .acc-panel-inner { padding-bottom: 1.5rem; color: var(--muted-foreground); line-height: 1.7; font-size: 0.9375rem; max-width: 52rem; } .acc-panel-inner strong { color: var(--foreground); font-weight: 600; } /* ---------- Read-more (collapsible prose) ---------- */ .readmore { position: relative; } .readmore-body { overflow: hidden; transition: max-height 0.4s ease; } .readmore-body.clamped { max-height: 0; } .readmore-toggle { margin-top: 1rem; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; } .readmore-toggle .arr { transition: transform 0.25s ease; } .readmore-toggle.open .arr { transform: rotate(90deg); } /* ---------- Tabs (feature detail) ---------- */ .tabs { } .tab-list { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .tab-btn { flex: 1 1 auto; min-width: 8rem; background: var(--surface-elevated); border: none; cursor: pointer; padding: 0.85rem 1rem; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); border-right: 1px solid var(--border); transition: background-color 0.15s, color 0.15s; } .tab-btn:last-child { border-right: none; } .tab-btn[aria-selected="true"] { background: var(--accent); color: var(--accent-foreground); } .tab-panels { margin-top: 2rem; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fade-up 0.5s cubic-bezier(0.16,1,0.3,1) both; } /* ---------- Testimonials ---------- */ .quote-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .quote-cell { background: var(--background); padding: 2.5rem; } .quote-cell blockquote { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.5; letter-spacing: -0.01em; } .quote-cell .mark { font-family: var(--font-serif); font-style: italic; font-size: 2.5rem; line-height: 1; color: color-mix(in oklab, var(--brand) 50%, transparent); display: block; margin-bottom: 0.75rem; } .quote-cell .cite { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); } .on-accent-flip .quote-grid { background: var(--flip-border); border-color: var(--flip-border); } .on-accent-flip .quote-cell { background: var(--flip-bg); } .on-accent-flip .quote-cell .cite { color: color-mix(in oklab, var(--flip-fg) 55%, transparent); } .on-accent-flip .quote-cell blockquote { color: var(--flip-fg); } /* ============================================================ RESOURCE CARDS (Blog, Guides, Case Studies, Comparisons) ============================================================ */ /* Page-level resource hero — text aligned left at the standard content-container edge, with the readable measure (h1 + lede) constrained to ~56rem so paragraphs don't sprawl */ .resource-hero { padding: 7rem 0 4rem; position: relative; } .resource-hero .breadcrumb, .resource-hero > .wrap > .eyebrow { display: inline-block; } .resource-hero h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; margin-top: 1.25rem; max-width: 36rem; } .resource-hero h1 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .resource-hero .lede { margin-top: 1.5rem; font-size: 1.0625rem; color: var(--muted-foreground); max-width: 38rem; line-height: 1.6; } /* Card grid */ .resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.5rem; margin-top: 1rem; } /* Individual resource card */ .resource-card { display: flex; flex-direction: column; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; text-decoration: none; color: inherit; transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; min-height: 16rem; } .resource-card:hover { border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .resource-card .rc-cat { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-strong); background: color-mix(in oklab, var(--brand) 10%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); padding: 0.25rem 0.625rem; border-radius: 0.125rem; align-self: flex-start; } .resource-card .rc-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--foreground); margin-top: 1.25rem; } .resource-card .rc-summary { font-size: 0.9375rem; line-height: 1.55; color: var(--muted-foreground); margin-top: 0.875rem; } .resource-card .rc-meta { margin-top: auto; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); } .resource-card .rc-read { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--brand-strong); } .resource-card:hover .rc-read .arr { transform: translateX(3px); } .resource-card .rc-read .arr { transition: transform 0.18s; } /* Featured (lead) card — spans full width on its own row */ .resource-featured { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.25rem; text-decoration: none; color: inherit; transition: border-color 0.18s, box-shadow 0.18s; margin-bottom: 1.5rem; } .resource-featured:hover { border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: var(--shadow-lg); } .resource-featured .rc-cat { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-strong); background: color-mix(in oklab, var(--brand) 10%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); padding: 0.25rem 0.625rem; border-radius: 0.125rem; align-self: flex-start; justify-self: start; display: inline-block; } .resource-featured .rc-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--foreground); margin-top: 1.25rem; max-width: 38rem; } .resource-featured .rc-summary { font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); margin-top: 1rem; max-width: 42rem; } .resource-featured .rc-meta { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); } .resource-featured .rc-read { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--brand-strong); } .resource-featured:hover .rc-read .arr { transform: translateX(3px); } .resource-featured .rc-read .arr { transition: transform 0.18s; } .resource-featured .rc-featured-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.75rem; } /* Resources cross-nav at the bottom of each Resources page */ .resource-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 1.5rem; } .resource-nav a { background: var(--surface-elevated); padding: 1.5rem; text-decoration: none; color: var(--foreground); display: flex; flex-direction: column; gap: 0.5rem; transition: background 0.18s; } .resource-nav a:hover { background: color-mix(in oklab, var(--brand) 4%, var(--surface-elevated)); } .resource-nav a.is-active { background: color-mix(in oklab, var(--brand) 8%, var(--surface-elevated)); } .resource-nav .rn-eyebrow { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); } .resource-nav .rn-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--foreground); } /* FAQ page — category-grouped accordions */ .faq-group { margin-bottom: 2.5rem; } .faq-group:last-child { margin-bottom: 0; } .faq-group-title { margin-bottom: 1rem; } .faq-group-title .eyebrow { font-size: 11px; letter-spacing: 0.18em; } /* Featured testimonial card (used on Middle Office for Metori interview) */ .testimonial-feature { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(2rem, 4vw, 3.5rem); max-width: 52rem; margin: 0 auto; } .testimonial-feature .eyebrow { margin-bottom: 1.5rem; } .testimonial-feature .tf-quote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.015em; color: var(--foreground); margin: 0 0 2rem; padding: 0; border: none; font-style: normal; } .testimonial-feature .tf-quote strong { font-weight: 600; } .testimonial-feature .tf-body { display: flex; flex-direction: column; gap: 1rem; } .testimonial-feature .tf-body p { font-size: 1rem; line-height: 1.65; color: var(--muted-foreground); margin: 0; } .testimonial-feature .tf-body p strong { color: var(--foreground); font-weight: 600; } .testimonial-feature .tf-attr { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.2rem; } .testimonial-feature .tf-attr-name { font-size: 1rem; color: var(--foreground); } .testimonial-feature .tf-attr-role { font-size: 0.875rem; color: var(--muted-foreground); } .testimonial-feature .tf-attr-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted-foreground); margin-top: 0.4rem; } /* ---------- CTA band ---------- */ .cta-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cta-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: end; padding: 6rem 0; } .cta-grid h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); } .cta-grid p { margin-top: 1rem; max-width: 36rem; color: color-mix(in oklab, var(--accent-section-fg) 70%, transparent); } .cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-top: 5rem; padding-bottom: 3rem; } .footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-bottom: 5rem; } .footer-brand { grid-column: span 2; } .footer-brand .brand { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; } .footer-brand p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; max-width: 20rem; margin-top: 1rem; } .footer-col h4 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-bottom: 1.5rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; } .footer-col a { color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: color 0.15s; } .footer-col a:hover { color: var(--accent); } .footer-news p { font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 0.75rem; } .footer-news form { display: flex; border-bottom: 1px solid var(--border); padding: 0.5rem 0; } .footer-news input { background: transparent; border: none; font-size: 0.875rem; width: 100%; outline: none; color: var(--foreground); font-family: var(--font-body); } .footer-news button { background: none; border: none; cursor: pointer; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--foreground); } .footer-news button:hover { color: var(--accent); } .footer-bottom { padding-top: 2rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1rem; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); } .footer-bottom .links { display: flex; gap: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; } ul#menu-footer-bottom-menu{ display: flex; gap: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; } .footer-news .wpcf7-spinner { display: none; } .footer-news .wpcf7-submit { margin-top: 20px; } .footer-client-login { display: inline-flex; align-items: center; color: var(--foreground); font-weight: 600; padding-right: 0.875rem; margin-right: 0.875rem; gap: 0.4rem; text-decoration: none; border-right: 1px solid var(--border); transition: color 0.18s; } /* ---------- Page hero (interior pages) ---------- */ .page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); padding-top: 5rem; padding-bottom: 4rem; } .page-hero .grid-bg { position: absolute; inset: 0; opacity: 0.25; pointer-events: none; } .page-hero-inner { position: relative; max-width: 48rem; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.05; margin-top: 1rem; } .page-hero h1 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--muted-foreground); } .page-hero p { margin-top: 1.5rem; font-size: 1.0625rem; color: var(--muted-foreground); line-height: 1.65; } .breadcrumb { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); } .breadcrumb a:hover { color: var(--accent); } /* ---------- Feature list (interior) ---------- */ .feat-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); } .feat-cell { background: var(--background); padding: 2rem; } .feat-cell .idx { font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); letter-spacing: 0.18em; } .feat-cell h3 { margin-top: 1rem; font-size: 1.0625rem; } .feat-cell p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } /* ---------- Animations ---------- */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes fade-up { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } .delay-1 { animation-delay: 0.12s; } .delay-2 { animation-delay: 0.24s; } /* ---------- Mobile nav panel ---------- */ .mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--background); } .mobile-nav.open { display: block; } .mobile-nav .group { border-bottom: 1px solid var(--border); padding: 1rem 0; } .mobile-nav .group > span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); } .mobile-nav .group a { display: block; padding: 0.5rem 0; font-size: 0.9375rem; font-weight: 500; } .mobile-nav .actions { padding: 1rem 0; display: flex; flex-direction: column; gap: 0.75rem; } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .theme-toggle:hover { background: var(--surface); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* ============================================================ INLINE DIAGRAMS (schemas / flows on feature pages) ============================================================ */ .hg-diagram { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-elevated); padding: 2rem 1.5rem; } .hg-diagram svg { display: block; width: 100%; height: auto; } .hg-diagram .d-cap { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--muted-foreground); } .hg-diagram .d-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; fill: var(--foreground); } .hg-diagram .d-sub { font-family: var(--font-body); font-size: 12px; fill: var(--muted-foreground); } .hg-diagram .d-box-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: var(--foreground); } .hg-diagram .d-box-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; fill: var(--muted-foreground); } .hg-diagram .d-box { fill: var(--surface); stroke: var(--border); stroke-width: 1; } .hg-diagram .d-box-accent { fill: var(--accent-section); stroke: var(--accent-section); stroke-width: 1; } /* When the parent has class "accent-group", the text inside flips colors. Sibling selector .d-box-accent ~ .d-box-label doesn't work reliably across browsers, and descendant selector requires the to be the class holder AND the to not be the same node — so we use an explicit text class .d-text-on-accent / .d-text-sub-on-accent applied directly on the . */ .hg-diagram .d-text-on-accent { fill: var(--accent-section-fg); font-family: var(--font-display); font-size: 13px; font-weight: 600; } .hg-diagram .d-text-sub-on-accent { fill: color-mix(in oklab, var(--accent-section-fg) 70%, transparent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; } .hg-diagram .d-line { stroke: var(--muted-foreground); stroke-width: 1.5; } .hg-diagram .d-arrowhead { fill: var(--muted-foreground); } .hg-diagram .d-chip { stroke-width: 0; } .hg-diagram .d-chip-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: #fff; } .hg-diagram .d-footnote { font-family: var(--font-body); font-size: 12px; fill: var(--muted-foreground); } /* ---------- Page hero — split layout (visual to the right of H1) ---------- */ .page-hero-split { padding-top: 4rem; padding-bottom: 4rem; } .page-hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } .page-hero-copy { position: relative; max-width: 32rem; } .page-hero-copy h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 4.6vw, 3.25rem); font-weight: 700; line-height: 1.05; margin-top: 1rem; } .page-hero-copy h1 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--muted-foreground); } .page-hero-copy p { margin-top: 1.5rem; font-size: 1rem; color: var(--muted-foreground); line-height: 1.65; } /* ---------- OMS blotter mock (hero visual on OMS page) ---------- */ .oms-blotter { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .oms-toolbar { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 0.875rem; background: color-mix(in oklab, var(--foreground) 4%, var(--surface)); border-bottom: 1px solid var(--border); } .oms-dots { display: inline-flex; gap: 0.3rem; } .oms-dots i { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: color-mix(in oklab, var(--foreground) 18%, transparent); } .oms-toolbar-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-foreground); flex: 1; } .oms-toolbar-state { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--brand); } .oms-pulse { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 50%, transparent); animation: oms-pulse 1.8s cubic-bezier(0.16,1,0.3,1) infinite; } @keyframes oms-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 50%, transparent); } 70% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 0%, transparent); } } .oms-filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--foreground) 1.5%, var(--surface-elevated)); } .oms-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 0.125rem; border: 1px solid var(--border); color: var(--muted-foreground); background: transparent; } .oms-chip.is-on { color: var(--foreground); border-color: color-mix(in oklab, var(--foreground) 30%, transparent); background: color-mix(in oklab, var(--foreground) 4%, transparent); } .oms-chip.is-buy { color: var(--success); border-color: color-mix(in oklab, var(--success) 35%, transparent); background: color-mix(in oklab, var(--success) 8%, transparent); } .oms-chip.is-sell { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 35%, transparent); background: color-mix(in oklab, var(--destructive) 8%, transparent); } .oms-chip-sep { width: 1px; height: 1rem; background: var(--border); margin: 0 0.25rem; } .oms-table { font-size: 0.75rem; } .oms-th, .oms-tr { display: grid; grid-template-columns: 1.6fr 0.9fr 0.55fr 0.7fr 0.85fr 0.7fr; gap: 0; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--border); align-items: center; } .oms-th { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); } .oms-th .r, .oms-tr .r { text-align: right; } .oms-tr { color: var(--foreground); } .oms-tr:last-child { border-bottom: none; } .oms-tr .oms-muted { color: var(--muted-foreground); font-size: 0.72rem; } .oms-tr .r { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .oms-tr .oms-fill { color: var(--success); font-weight: 500; } .oms-tr .oms-partial { color: var(--amber); font-weight: 500; } .oms-tr .oms-pending { color: var(--muted-foreground); } .oms-tag { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; padding: 0.15rem 0.4rem; border-radius: 0.125rem; } .oms-tag.is-buy { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); } .oms-tag.is-sell { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 12%, transparent); } .oms-footstrip { display: flex; gap: 1.25rem; padding: 0.625rem 0.875rem; background: color-mix(in oklab, var(--foreground) 2.5%, var(--surface)); font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); letter-spacing: 0.05em; } .oms-footstrip b { font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; } /* ---------- Compliance rules list (hero visual on Risk & Compliance page) ---------- */ .rules-list { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .rules-toolbar { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 0.875rem; background: color-mix(in oklab, var(--foreground) 4%, var(--surface)); border-bottom: 1px solid var(--border); } .rules-actionbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--foreground) 1.5%, var(--surface-elevated)); } .rules-action { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 0.125rem; border: 1px solid var(--border); color: var(--muted-foreground); background: transparent; } .rules-action.is-on { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 40%, transparent); background: color-mix(in oklab, var(--brand) 8%, transparent); } .rules-search { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem; border-radius: 0.125rem; border: 1px solid var(--border); min-width: 7.5rem; } .rules-search-icon { font-size: 12px; color: var(--muted-foreground); transform: rotate(-12deg) translateY(-1px); } .rules-search-ph { font-family: var(--font-body); font-size: 11px; color: var(--muted-foreground); } .rules-table { font-size: 0.75rem; } .rules-th, .rules-tr { display: grid; grid-template-columns: 0.35fr 2.6fr 0.95fr 0.7fr; gap: 0; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--border); align-items: center; } .rules-th { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); } .rules-tr { color: var(--foreground); transition: background-color 0.15s; } .rules-tr:last-of-type { border-bottom: none; } .rules-tr .r-id { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted-foreground); } .rules-tr.is-warn { background: color-mix(in oklab, var(--amber) 12%, transparent); } .rules-tr.is-breach { background: color-mix(in oklab, var(--destructive) 11%, transparent); } .rules-tag { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; padding: 0.15rem 0.4rem; border-radius: 0.125rem; } .rules-tag.is-reg { color: var(--brand); background: color-mix(in oklab, var(--brand) 12%, transparent); } .rules-tag.is-stat { color: var(--amber); background: color-mix(in oklab, var(--amber) 14%, transparent); } .rules-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: 1px; } .rules-dot.is-ok { background: var(--success); } .rules-dot.is-warn { background: var(--amber); } .rules-dot.is-bad { background: var(--destructive); } .rules-tr .r-status { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.75rem; } /* ---------- Crypto multi-venue panel (hero visual on Crypto Support page) ---------- */ .crypto-panel { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .crypto-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); } .crypto-stat { padding: 0.85rem 1rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.3rem; } .crypto-stat:last-child { border-right: none; } .crypto-stat-k { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); } .crypto-stat-v { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); display: inline-flex; align-items: baseline; gap: 0.5rem; } .crypto-stat-v.is-pos { color: var(--success); } .crypto-stat-d { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--muted-foreground); letter-spacing: 0.04em; } .crypto-table { font-size: 0.78rem; } .crypto-th, .crypto-tr { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr 0.6fr; gap: 0; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--border); align-items: center; } .crypto-th { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); } .crypto-th .r, .crypto-tr .r { text-align: right; } .crypto-tr:last-of-type { border-bottom: none; } .crypto-tok { display: inline-flex; align-items: center; gap: 0.65rem; } .crypto-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.25rem; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; color: #fff; } .crypto-chip.is-btc { background: var(--amber); } .crypto-chip.is-eth { background: var(--indigo); } .crypto-chip.is-sol { background: oklch(58% 0.21 295); } /* purple */ .crypto-chip.is-usdt { background: var(--emerald-strong); } .crypto-chip.is-link { background: var(--blue); } .crypto-tok-name { display: inline-flex; flex-direction: column; line-height: 1.2; color: var(--foreground); font-weight: 600; } .crypto-tok-sub { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 500; color: var(--muted-foreground); } .crypto-venuemix { display: inline-flex; gap: 0.25rem; align-items: center; } .crypto-venue { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em; color: #fff; border: 1.5px solid var(--surface-elevated); margin-left: -0.35rem; /* slight overlap */ } .crypto-venue:first-child { margin-left: 0; } .crypto-venue.is-cex { background: oklch(50% 0.13 235); } /* Coinbase blue */ .crypto-venue.is-cex2 { background: oklch(72% 0.18 70); } /* Binance amber */ .crypto-venue.is-cust { background: oklch(42% 0.10 280); } /* Fireblocks purple */ .crypto-venue.is-cust2 { background: oklch(35% 0.08 250); } /* Anchorage dark navy */ .crypto-venue.is-defi { background: oklch(55% 0.16 200); } /* Aave teal */ .crypto-venue.is-defi2 { background: oklch(58% 0.18 340); } /* Uniswap pink */ .crypto-tr .r .crypto-num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--foreground); } .crypto-tr .r .crypto-sub { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); font-weight: 500; } .crypto-tr .r.is-pos { color: var(--success); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; } .crypto-tr .r.is-neg { color: var(--destructive); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; } .crypto-tr .r.crypto-flat { color: var(--muted-foreground); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---------- Holdings panel (hero visual on AMS page, mirrors image 1) ---------- */ .holdings-panel { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .holdings-table { font-size: 0.78rem; } .holdings-th, .holdings-group, .holdings-child { display: grid; grid-template-columns: 1.7fr 0.7fr 1fr 1.2fr; gap: 0; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--border); align-items: center; } .holdings-th { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); } .holdings-th .r, .holdings-group .r, .holdings-child .r { text-align: right; } .holdings-group { font-weight: 600; color: var(--foreground); background: color-mix(in oklab, var(--foreground) 2.5%, var(--surface-elevated)); } /* group's first column = chev + name, joined into one cell */ .holdings-group .hg-chev, .holdings-group .hg-name { display: inline; } .holdings-group .hg-chev { color: var(--muted-foreground); font-size: 9px; margin-right: 0.45rem; vertical-align: 1px; } .holdings-group .hg-name { color: var(--foreground); } .holdings-group .hg-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .holdings-group .hg-mute { color: var(--muted-foreground); } .holdings-group .is-neg { color: var(--destructive); } .holdings-group .hg-pct { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: flex-end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--foreground); font-weight: 600; } .holdings-group .hg-bar { display: inline-block; height: 0.4rem; width: 3rem; background: color-mix(in oklab, var(--border) 60%, transparent); border-radius: 0.125rem; position: relative; overflow: hidden; } .holdings-group .hg-bar::after { content: ""; position: absolute; inset: 0; width: var(--w, 0); background: var(--brand); border-radius: 0.125rem; } .holdings-child { padding-left: 2.5rem; background: var(--surface-elevated); color: var(--ink-soft); font-size: 0.72rem; } .holdings-child .hg-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .holdings-child .hg-mute { color: var(--muted-foreground); } /* ---------- Crypto multi-venue panel (hero visual on Crypto page) ---------- */ .crypto-panel { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .crypto-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--foreground) 1.5%, var(--surface-elevated)); } .crypto-stats > div { padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; border-right: 1px solid var(--border); } .crypto-stats > div:last-child { border-right: none; } .crypto-stats .cs-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); } .crypto-stats .cs-v { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground); } .crypto-stats .cs-v.is-pos { color: var(--success); } .crypto-stats .cs-v.is-neg { color: var(--destructive); } .crypto-table { font-size: 0.78rem; } .crypto-th, .crypto-tr { display: grid; grid-template-columns: 1.4fr 1fr 0.85fr 0.55fr; gap: 0; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--border); align-items: center; } .crypto-th { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); } .crypto-th .r, .crypto-tr .r { text-align: right; } .crypto-tr:last-of-type { border-bottom: none; } .ct-asset { display: inline-flex; align-items: center; gap: 0.55rem; } .ct-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.25rem; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: #fff; } .ct-chip.ct-btc { background: var(--amber); } .ct-chip.ct-eth { background: var(--indigo); } .ct-chip.ct-sol { background: color-mix(in oklab, var(--blue) 60%, var(--success)); } .ct-chip.ct-usdt { background: var(--emerald-strong); } .ct-chip.ct-link { background: var(--blue); } /* TradFi chip: muted neutral, visually distinct from saturated crypto chips */ .ct-chip.ct-tradfi { background: color-mix(in oklab, var(--foreground) 65%, var(--muted-foreground)); color: var(--surface-elevated); font-weight: 600; } .ct-name { color: var(--foreground); font-weight: 500; } .ct-venues { display: inline-flex; align-items: center; } .ct-venue { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; margin-left: -0.4rem; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--muted-foreground); } .ct-venue:first-child { margin-left: 0; } .ct-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--foreground); font-weight: 500; } .ct-pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; } .ct-pct.is-pos { color: var(--success); } .ct-pct.is-neg { color: var(--destructive); } .ct-pct.is-flat { color: var(--muted-foreground); } /* ---------- Brand frame (About hero — institutional stat block) ---------- */ .brand-frame { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .brand-stats { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--border); } .brand-stat { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; border-bottom: 1px solid var(--border); } .brand-stat:last-child { border-bottom: none; } .brand-stat .bs-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-foreground); } .brand-stat .bs-v { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--foreground); font-variant-numeric: tabular-nums; } .brand-stat .bs-note { font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.5; } .brand-values { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; background: color-mix(in oklab, var(--brand) 5%, var(--surface-elevated)); border-top: 1px solid var(--border); } .bv-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); margin-right: 0.4rem; } .bv-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: 0.125rem; background: color-mix(in oklab, var(--brand) 12%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent); color: var(--brand-strong); } /* ---------- Connectivity console (hero on Integrations page) ---------- */ .conn-panel { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .conn-table { font-size: 0.78rem; } .conn-section { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-foreground); padding: 0.55rem 0.875rem 0.35rem; background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); border-bottom: 1px solid var(--border); } .conn-row { display: grid; grid-template-columns: 1rem 1.6fr 0.9fr 0.6fr; gap: 0.5rem; padding: 0.55rem 0.875rem; border-bottom: 1px solid var(--border); align-items: center; } .conn-row:last-of-type { border-bottom: none; } .conn-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; } .conn-dot.is-ok { background: var(--success); box-shadow: 0 0 0 2px color-mix(in oklab, var(--success) 18%, transparent); } .conn-dot.is-warn { background: var(--amber); box-shadow: 0 0 0 2px color-mix(in oklab, var(--amber) 18%, transparent); } .conn-dot.is-bad { background: var(--destructive); box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent); } .conn-dot.is-pending { background: var(--muted-foreground); } /* Pulse variant for "issues" state (red, used in legacy-audit toolbar) */ .oms-pulse.is-bad { background: var(--destructive); box-shadow: 0 0 0 0 color-mix(in oklab, var(--destructive) 50%, transparent); animation: oms-pulse-bad 1.8s cubic-bezier(0.16,1,0.3,1) infinite; } @keyframes oms-pulse-bad { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--destructive) 50%, transparent); } 70% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--destructive) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--destructive) 0%, transparent); } } /* Resolution variant for footstrip — brand-tinted, signals "this is the fix" */ .oms-footstrip.is-resolution { background: color-mix(in oklab, var(--brand) 8%, var(--surface)); border-top: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); color: var(--brand-strong); } .oms-footstrip.is-resolution b { color: var(--brand-strong); } .conn-name { color: var(--foreground); font-weight: 500; } .conn-cat { font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); letter-spacing: 0.02em; } .conn-lat { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--foreground); text-align: right; } /* ---------- Diagram product-frame ---------- When .hg-diagram has .is-framed, it gets a toolbar at top, the SVG sits in a canvas below, and a footer strip below that. Makes diagrams read as another product surface, seamless with the hero visuals. */ .hg-diagram.is-framed { padding: 0; overflow: hidden; } .hg-diagram.is-framed .rules-toolbar { border-bottom: 1px solid var(--border); } .hg-diagram.is-framed .hg-diagram-canvas { padding: 1.5rem 1.25rem 0.5rem; } .hg-diagram.is-framed .hg-diagram-canvas svg { display: block; width: 100%; height: auto; } .hg-diagram.is-framed .oms-footstrip { border-top: 1px solid var(--border); } /* SVG element classes used inside framed diagrams */ .hg-diagram .d-int-name { font-family: var(--font-display); font-size: 12px; font-weight: 600; fill: var(--foreground); } .hg-diagram .d-int-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; fill: var(--muted-foreground); } .hg-diagram .d-int-lat { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--foreground); } .hg-diagram .d-status-ok { fill: var(--success); } .hg-diagram .d-status-warn { fill: var(--amber); } .hg-diagram .d-status-pending { fill: var(--muted-foreground); } /* Timeline elements */ .hg-diagram .d-timeline { stroke: var(--border); stroke-width: 2; } .hg-diagram .d-tick { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; fill: var(--muted-foreground); text-transform: uppercase; } /* Pills used at the bottom of the deployment timeline */ .hg-diagram .d-pill { fill: color-mix(in oklab, var(--brand) 10%, transparent); stroke: color-mix(in oklab, var(--brand) 25%, transparent); stroke-width: 1; } .hg-diagram .d-pill-text { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; fill: var(--brand-strong); text-transform: uppercase; } /* ---------- Comparison panel (hero on About page) ---------- */ .compare-panel { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .compare-table { font-size: 0.78rem; } .compare-th, .compare-tr { display: grid; grid-template-columns: 0.95fr 1fr 1fr; gap: 0; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); align-items: center; } .compare-th { background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); } .compare-col-us { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-strong); } .compare-col-them { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); } .compare-tr:last-of-type { border-bottom: none; } .compare-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); } .compare-us { font-weight: 600; color: var(--foreground); position: relative; padding-left: 1rem; } .compare-us::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.5rem; height: 0.5rem; border-radius: 50%; transform: translateY(-50%); background: var(--brand); } .compare-them { color: var(--muted-foreground); position: relative; padding-left: 1rem; } .compare-them::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.5rem; height: 0.5rem; border-radius: 50%; transform: translateY(-50%); background: color-mix(in oklab, var(--muted-foreground) 40%, transparent); } /* ---------- Values grid (mission section) ---------- */ .value-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-elevated); overflow: hidden; } .value-cell { padding: 1.5rem; border-bottom: 1px solid var(--border); } .value-cell:last-child { border-bottom: none; } .value-cell .value-idx { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 0.5rem; } .value-cell h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--foreground); } .value-cell p { font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); margin: 0; } /* Inside flip section the values grid uses flip-bg */ .on-accent-flip .value-grid { background: color-mix(in oklab, var(--flip-fg) 4%, var(--flip-bg)); border-color: var(--flip-border); } .on-accent-flip .value-cell { border-bottom-color: var(--flip-border); } .on-accent-flip .value-cell h3 { color: var(--flip-fg); } .on-accent-flip .value-cell p { color: color-mix(in oklab, var(--flip-fg) 70%, transparent); } /* ---------- Founders list ---------- */ .founder-list { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-elevated); overflow: hidden; } .founder-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); align-items: start; } .founder-row:last-child { border-bottom: none; } .founder-idx { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--brand-strong); padding-top: 0.2rem; } .founder-row h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--foreground); } .founder-row p { font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); margin: 0; } .on-accent-flip .founder-list { background: color-mix(in oklab, var(--flip-fg) 4%, var(--flip-bg)); border-color: var(--flip-border); } .on-accent-flip .founder-row { border-bottom-color: var(--flip-border); } .on-accent-flip .founder-row h3 { color: var(--flip-fg); } .on-accent-flip .founder-row p { color: color-mix(in oklab, var(--flip-fg) 70%, transparent); } /* ---------- Trust certifications grid ---------- */ .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 2rem; } .trust-cell { background: var(--surface-elevated); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .trust-mono { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-strong); padding: 0.25rem 0.5rem; background: color-mix(in oklab, var(--brand) 10%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); border-radius: 0.125rem; width: fit-content; } .trust-cell h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--foreground); } .trust-cell p { font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); margin: 0; } /* ============================================================ COMPARISON TABLE (About / Comparisons) ============================================================ */ .compare-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; background: var(--surface-elevated); } .compare-table { width: 100%; border-collapse: collapse; min-width: 540px; } .compare-table th, .compare-table td { text-align: left; padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--border); font-size: 0.9375rem; vertical-align: top; } .compare-table thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); background: var(--surface); } .compare-table thead th:nth-child(2) { color: var(--accent); } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table .rowlabel { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); white-space: nowrap; } .compare-table td.good { font-weight: 600; color: var(--foreground); } .compare-table td.good::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 0.125rem; background: var(--success); margin-right: 0.625rem; vertical-align: middle; } .compare-table td.bad { color: var(--muted-foreground); } .compare-table td.bad::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 0.125rem; background: color-mix(in oklab, var(--destructive) 55%, transparent); margin-right: 0.625rem; vertical-align: middle; } /* ============================================================ CONTACT FORM ============================================================ */ .contact-form { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-elevated); padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; } .contact-form .field { display: flex; flex-direction: column; gap: 0.5rem; } .contact-form label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-body); font-size: 0.9375rem; color: var(--foreground); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.875rem; width: 100%; transition: border-color 0.18s ease; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--ring); } .contact-form textarea { resize: vertical; } .contact-form .form-note { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.5; margin: 0; } /* single-column divider grid (lists of articles, values, case studies) */ .cols-1 { grid-template-columns: 1fr; } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(2, 1fr); } .cols-5 { grid-template-columns: repeat(2, 1fr); } .stat-grid { grid-template-columns: repeat(2, 1fr); } .quote-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: span 4; } .footer-bottom { flex-direction: row; justify-content: space-between; } .feat-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .menu-toggle { display: none; } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-5 { grid-template-columns: repeat(5, 1fr); } .hero-copy { grid-column: span 6; } .hero-visual { grid-column: span 6; } .split { grid-template-columns: 5fr 7fr; } .split.reverse { grid-template-columns: 6fr 6fr; } .page-hero-grid { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } .cta-grid { grid-template-columns: 1.4fr 1fr; } .cta-actions { justify-content: flex-end; } .footer-grid { grid-template-columns: repeat(12, 1fr); } .footer-brand { grid-column: span 4; } .footer-col { grid-column: span 2; } .footer-col.span2 { grid-column: span 2; } .feat-grid { grid-template-columns: repeat(3, 1fr); } .value-grid { grid-template-columns: repeat(3, 1fr); } .value-cell { border-bottom: none; border-right: 1px solid var(--border); } .value-cell:last-child { border-right: none; } .on-accent-flip .value-cell { border-right-color: var(--flip-border); } .trust-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1023px) { .primary-nav, .header-cta .btn, .header-cta .desktop-only { display: none; } .menu-toggle { display: inline-flex; } .footer-brand { grid-column: 1 / -1; } } /* ============================================================ ANIMATION PASS ============================================================ */ /* Scroll-reveal: elements fade up gently when they enter viewport. Slower duration, softer curve (out-quart), more travel for a more refined editorial feel. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Hero panel entrance — one-time on page load, slightly slower than scroll reveals */ .hero-entrance { opacity: 0; transform: translateY(14px) scale(0.99); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 150ms, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 150ms; will-change: opacity, transform; } .hero-entrance.is-visible { opacity: 1; transform: translateY(0) scale(1); } /* Hero copy entrance — fades in with a slight head-start so it leads the panel */ .hero-copy-entrance { opacity: 0; transform: translateY(16px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 50ms, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 50ms; will-change: opacity, transform; } .hero-copy-entrance.is-visible { opacity: 1; transform: translateY(0); } /* Subtle live indicators that feel "running" */ @keyframes hg-tick-blink { 0%, 90% { opacity: 1; } 95% { opacity: 0.35; } 100% { opacity: 1; } } .oms-toolbar-label::after, .rules-toolbar .oms-toolbar-label::after { /* No visual change for now; reserved for future tick indicator */ } /* Refined hover micro-interactions on text links in nav/footer */ .primary-nav a, .footer-links a { transition: color 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .dropdown a { transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), padding 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .dropdown a:hover { padding-left: 1.35rem; } /* Cards and CTAs already have transitions on their primary properties; this smooths transforms when they're combined */ .btn, .resource-card, .resource-featured, .feat-cell, .acc-trigger { transition-property: color, background, border-color, transform, box-shadow, opacity, padding; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } /* Accessibility: turn animations off when user prefers reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .hero-entrance, .hero-copy-entrance { opacity: 1 !important; transform: none !important; } } /* ============================================================ FREE TRIAL MODAL ============================================================ */ .hg-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 1.5rem; } .hg-modal.is-open { display: flex; } .hg-modal-backdrop { position: absolute; inset: 0; background: color-mix(in oklab, var(--foreground) 60%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: hg-modal-fade-in 0.22s ease-out; } .hg-modal-panel { position: relative; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); width: 100%; max-width: 30rem; padding: 2.5rem 2rem 2rem; animation: hg-modal-scale-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); max-height: calc(100vh - 3rem); overflow-y: auto; } @keyframes hg-modal-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes hg-modal-scale-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .hg-modal-close { position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted-foreground); transition: background 0.18s, color 0.18s; } .hg-modal-close:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); color: var(--foreground); } .hg-modal-body .eyebrow { margin-bottom: 1rem; } .hg-modal-body h2 { font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--foreground); } .hg-modal-lede { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.55; margin: 0.75rem 0 1.5rem; } .hg-trial-form { display: flex; flex-direction: column; gap: 1rem; } .hg-field { display: flex; flex-direction: column; gap: 0.4rem; } .hg-field > span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); } .hg-field input { font: inherit; font-family: var(--font-display); font-size: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.625rem 0.875rem; color: var(--foreground); transition: border-color 0.18s, background 0.18s; } .hg-field input:focus { outline: none; border-color: var(--brand); background: var(--surface-elevated); } .hg-form-actions { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .hg-form-actions .btn { width: 100%; justify-content: center; } .hg-form-note { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.5; text-align: center; } .hg-form-note a { color: var(--brand-strong); text-decoration: underline; } .hg-form-success { padding: 1.25rem; background: color-mix(in oklab, var(--brand) 8%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); border-radius: 0.375rem; font-size: 0.9375rem; line-height: 1.55; color: var(--foreground); } .hg-form-success strong { color: var(--brand-strong); } /* ============================================================ RESOURCES HERO REDESIGN ============================================================ */ /* Make the resource hero a two-column page-hero like the feature pages, with the "what's inside" framed library panel on the right */ .resource-hero.resource-hero-split { padding: 5.5rem 0 4rem; } .resource-hero-split .wrap { max-width: 80rem; display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: start; } @media (min-width: 1024px) { .resource-hero-split .wrap { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; } } .resource-hero-split .rh-copy { max-width: 36rem; } .resource-hero-split .rh-eyebrow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } .resource-hero-split .rh-numeral { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-foreground); } .resource-hero-split .breadcrumb { margin: 0; } .resource-hero-split h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; max-width: none; margin: 0 0 1.5rem; } .resource-hero-split h1 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .resource-hero-split .lede { font-size: 1.0625rem; color: var(--muted-foreground); line-height: 1.65; margin: 0 0 1.75rem; max-width: 32rem; } /* Library panel on the right of the hero — same product chrome as elsewhere */ .library-panel { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2xl); overflow: hidden; font-family: var(--font-display); } .library-stats { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--border); } .library-stats > div { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .library-stats > div:nth-child(even) { border-right: none; } .library-stats > div:nth-last-child(-n+2) { border-bottom: none; } .library-stats .ls-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); } .library-stats .ls-v { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground); font-variant-numeric: tabular-nums; } .library-section { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); padding: 0.65rem 1.25rem 0.35rem; background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); border-bottom: 1px solid var(--border); } .library-list { display: flex; flex-direction: column; } .library-row { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background 0.18s, padding-left 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .library-row:hover { background: color-mix(in oklab, var(--brand) 3%, var(--surface-elevated)); padding-left: 1.4rem; } .library-row:last-child { border-bottom: none; } .library-row .lr-title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--foreground); line-height: 1.35; } .library-row .lr-cat { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-strong); align-self: center; } /* Library panel footer */ .library-panel .oms-footstrip { border-top: 1px solid var(--border); } /* Discreet text link in the header — for "Client login" */ .hg-text-link { font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; padding: 0.5rem 0.75rem; transition: color 0.18s ease; } .hg-text-link:hover { color: var(--foreground); } /* ============================================================ ARTICLE PAGES (blog posts, individual) ============================================================ */ .article-hero { padding: 5.5rem 0 3rem; position: relative; } .article-hero .wrap { max-width: 48rem; } .article-hero .eyebrow { margin: 1.25rem 0 1rem; } .article-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1.5rem; } .article-lede { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.6; margin: 0 0 2rem; } .article-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted-foreground); } .article-meta strong { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--foreground); margin-right: 0.4rem; } /* Article body — readable measure, generous typography */ .article-body { max-width: 42rem; margin: 0 auto; color: var(--foreground); font-size: 1.0625rem; line-height: 1.75; } .article-body h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 3rem 0 1.25rem; color: var(--foreground); } .article-body h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 2rem 0 0.75rem; color: var(--foreground); } .article-body p { margin: 0 0 1.25rem; } .article-body p strong { color: var(--foreground); font-weight: 600; } .article-body ul, .article-body ol { margin: 0 0 1.5rem 1.5rem; padding: 0; } .article-body li { margin: 0 0 0.65rem; } .article-body li strong { color: var(--foreground); } .article-body a { color: var(--brand-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .article-body a:hover { text-decoration-thickness: 2px; } /* Pull quotes */ .article-pullquote { margin: 2.5rem -1.5rem; padding: 1.75rem 1.5rem 1.75rem 2rem; border-left: 3px solid var(--brand); background: color-mix(in oklab, var(--brand) 4%, transparent); border-radius: 0 0.375rem 0.375rem 0; } .article-pullquote p { font-family: var(--font-serif); font-style: italic; font-size: 1.375rem; line-height: 1.4; color: var(--foreground); margin: 0; } .article-pullquote cite { display: block; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted-foreground); margin-top: 0.875rem; font-weight: 500; } /* Inline callouts (e.g. "In the product") */ .article-callout { margin: 2.5rem 0; padding: 1.5rem 1.75rem; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 0.5rem; } .article-callout .eyebrow { margin-bottom: 0.75rem; font-size: 10px; } .article-callout p { margin: 0; font-size: 0.9375rem; line-height: 1.6; } /* ============================================================ CLIENT LOGIN (footer + Guides callout) ============================================================ */ /* Footer Client login — small, but visually distinct from Privacy/Terms/etc */ .footer-client-login { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--foreground); text-decoration: none; font-weight: 600; padding-right: 0.875rem; margin-right: 0.875rem; border-right: 1px solid var(--border); transition: color 0.18s ease; } .footer-client-login:hover { color: var(--brand-strong); } .footer-client-login .fcl-lock { font-size: 0.875em; } /* Existing client callout on Guides page */ .client-portal-callout { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; padding: 1.75rem 2rem; background: color-mix(in oklab, var(--brand) 5%, var(--surface-elevated)); border: 1px solid color-mix(in oklab, var(--brand) 20%, var(--border)); border-radius: var(--radius); } .client-portal-callout .cpc-icon { font-size: 1.75rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: var(--surface-elevated); border: 1px solid color-mix(in oklab, var(--brand) 25%, var(--border)); border-radius: 50%; } .client-portal-callout .cpc-content .eyebrow { margin-bottom: 0.5rem; } .client-portal-callout .cpc-content h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--foreground); } .client-portal-callout .cpc-content p { font-size: 0.9375rem; line-height: 1.55; color: var(--muted-foreground); margin: 0; max-width: 44rem; } .client-portal-callout .cpc-cta { align-self: center; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; } .client-portal-callout .cpc-arrow { transition: transform 0.2s; } .client-portal-callout .cpc-cta:hover .cpc-arrow { transform: translateX(3px); } @media (max-width: 760px) { .client-portal-callout { grid-template-columns: 1fr; text-align: left; } .client-portal-callout .cpc-cta { justify-self: start; } } /* ============================================================ RESOURCES HERO — DIFFERENTIATED PANEL CONTENTS ============================================================ */ /* ---------- BLOG: ranked most-read list ---------- */ .lib-rank-list { display: flex; flex-direction: column; } .lib-rank-row { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.875rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .lib-rank-row:hover { background: color-mix(in oklab, var(--brand) 4%, var(--surface-elevated)); padding-left: 1.4rem; } .lib-rank-row:last-child { border-bottom: none; } .lib-rank-row .lrr-num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--brand-strong); letter-spacing: -0.02em; line-height: 1.2; } .lib-rank-row .lrr-body { display: flex; flex-direction: column; gap: 0.25rem; } .lib-rank-row .lrr-cat { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--brand-strong); text-transform: uppercase; } .lib-rank-row .lrr-title { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--foreground); line-height: 1.35; } .lib-rank-row .lrr-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--muted-foreground); } /* ---------- GUIDES: quick-start checklist ---------- */ .lib-checklist { display: flex; flex-direction: column; } .lib-check-section { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); padding: 0.7rem 1.25rem 0.35rem; background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); border-bottom: 1px solid var(--border); } .lib-check-row { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; padding: 0.55rem 1.25rem; border-bottom: 1px solid var(--border); align-items: center; } .lib-check-row:last-child { border-bottom: none; } .lib-check-row .lcr-check { width: 1.125rem; height: 1.125rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--muted-foreground); } .lib-check-row.is-done .lcr-check { background: var(--brand); border-color: var(--brand); color: #fff; } .lib-check-row.is-active .lcr-check { background: color-mix(in oklab, var(--brand) 12%, transparent); border-color: var(--brand); } .lib-check-row.is-active .lcr-dot { width: 0.4rem; height: 0.4rem; background: var(--brand); border-radius: 50%; animation: hg-pulse-dot 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes hg-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } } .lib-check-row .lcr-text { font-size: 0.875rem; color: var(--foreground); font-weight: 500; } .lib-check-row:not(.is-done):not(.is-active) .lcr-text { color: var(--muted-foreground); } /* ---------- CASE STUDIES: outcomes stat block ---------- */ .lib-outcomes { display: flex; flex-direction: column; } .lib-outcome { padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.3rem; } .lib-outcome:last-child { border-bottom: none; } .lib-outcome .lo-figure { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.025em; color: var(--foreground); font-variant-numeric: tabular-nums; } .lib-outcome .lo-figure small { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--brand-strong); margin-left: 0.15rem; } .lib-outcome .lo-label { font-size: 0.875rem; color: var(--foreground); font-weight: 500; line-height: 1.4; } .lib-outcome .lo-attr { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted-foreground); } /* ---------- COMPARISONS: HG-vs-Legacy scoreboard ---------- */ .lib-scoreboard { display: flex; flex-direction: column; } .lib-sb-head { display: grid; grid-template-columns: 1fr 1fr 0.4fr 1fr; gap: 0.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--foreground) 2%, var(--surface-elevated)); } .lib-sb-head .lsh-label, .lib-sb-head .lsh-hg, .lib-sb-head .lsh-vs, .lib-sb-head .lsh-legacy { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); } .lib-sb-head .lsh-hg { color: var(--brand-strong); } .lib-sb-head .lsh-vs { text-align: center; } .lib-sb-row { display: grid; grid-template-columns: 1fr 1fr 0.4fr 1fr; gap: 0.5rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--border); align-items: center; } .lib-sb-row:last-child { border-bottom: none; } .lib-sb-row .lsr-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } .lib-sb-row .lsr-hg { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--brand-strong); } .lib-sb-row::before { content: ''; } .lib-sb-row .lsr-legacy { font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); } .lib-sb-head::after, .lib-sb-row::after { /* Visual "vs" separator dot in the middle column */ content: ''; width: 4px; height: 4px; background: var(--border); border-radius: 50%; justify-self: center; align-self: center; } .lib-sb-head { grid-template-columns: 1fr 1fr 0.4fr 1fr; } .lib-sb-head .lsh-vs { display: none; } /* ---------- FAQ: top questions stack ---------- */ .lib-questions { display: flex; flex-direction: column; } .lib-q-row { display: grid; grid-template-columns: 1.75rem 1fr 1.25rem; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; align-items: start; transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .lib-q-row:hover { background: color-mix(in oklab, var(--brand) 4%, var(--surface-elevated)); padding-left: 1.4rem; } .lib-q-row:last-child { border-bottom: none; } .lib-q-row .lqr-q { font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; font-weight: 700; color: var(--brand-strong); line-height: 1.25; } .lib-q-row .lqr-body { display: flex; flex-direction: column; gap: 0.25rem; } .lib-q-row .lqr-cat { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--brand-strong); text-transform: uppercase; } .lib-q-row .lqr-text { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--foreground); line-height: 1.35; } .lib-q-row .lqr-arrow { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 1rem; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease; align-self: center; } .lib-q-row:hover .lqr-arrow { color: var(--brand-strong); transform: translateX(3px); } /* ============================================================ FAQ — See also feature-page FAQs grid ============================================================ */ .faq-seealso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.25rem; } .faq-seealso-card { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.5rem; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .faq-seealso-card:hover { border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .faq-seealso-card .fsc-cat { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground); } .faq-seealso-card .fsc-count { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-strong); background: color-mix(in oklab, var(--brand) 10%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); padding: 0.2rem 0.55rem; border-radius: 0.125rem; align-self: flex-start; } .faq-seealso-card .fsc-preview { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--muted-foreground); font-style: italic; } .faq-seealso-card .fsc-cta { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-strong); display: inline-flex; align-items: center; gap: 0.4rem; } .faq-seealso-card .fsc-arrow { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .faq-seealso-card:hover .fsc-arrow { transform: translateX(4px); } .cols-1 { grid-template-columns: 1fr; } .cell h3 { transition: color .3s ease; } .cell:hover h3 { color: var(--foreground); } .cell h3, .cell .arrow { transition: all .3s ease; } .cell:hover h3, .cell:hover .idx, .cell:hover .arrow { color: var(--foreground); } .cell:hover p { color: var(--foreground); } a.btn.btn-ghost.desktop-only { border-color: var(--border); } /* ---------- Mobile Nav ---------- */ .mobile-nav{ display:none; border-top:1px solid var(--border); background:var(--background); } .mobile-nav.open{ display:block; height: 90vh; overflow: scroll; } button.menu-toggle { padding: 0; font-size: 25px; } .mobile-nav .mobile-menu{ margin:0; padding:0; list-style:none; } .mobile-nav .mobile-menu > li{ border-bottom:1px solid var(--border); padding:1rem 0; } .mobile-nav .mobile-menu > li:last-child{ border-bottom:0; } .mobile-nav .mobile-menu > li > a{ display:block; font-size:15px; font-weight:600; color:var(--foreground); } .mobile-nav .sub-menu{ list-style:none; margin:12px 0 0; padding:0; } .mobile-nav .sub-menu li{ padding:.45rem 0; } .mobile-nav .sub-menu a{ display:block; font-size:14px; font-weight:500; line-height:1.5; } .mobile-nav .menu-subtext{ display:block; margin-top:4px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted-foreground); } .mobile-nav .actions{ padding:1rem 0; display:flex; flex-direction:column; gap:.75rem; } .mobile-nav .actions .btn{ width:100%; justify-content:center; } .btn.btn-ghost.desktop-only { border-color: var(--border); display: inline-block; color: var(--brand-strong);background: color-mix(in oklab, var(--brand) 10%, transparent); border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(2, 1fr); } .cols-5 { grid-template-columns: repeat(2, 1fr); } .stat-grid { grid-template-columns: repeat(2, 1fr); } .quote-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: span 4; } .footer-bottom { flex-direction: row; justify-content: space-between; } .feat-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .menu-toggle { display: none; } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-5 { grid-template-columns: repeat(5, 1fr); } .hero-copy { grid-column: span 6; } .hero-visual { grid-column: span 6; } .split { grid-template-columns: 5fr 7fr; } .split.reverse { grid-template-columns: 6fr 6fr; } .page-hero-grid { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } .cta-grid { grid-template-columns: 1.4fr 1fr; } .cta-actions { justify-content: flex-end; } .footer-grid { grid-template-columns: repeat(12, 1fr); } .footer-brand { grid-column: span 4; } .footer-col { grid-column: span 2; } .footer-col.span2 { grid-column: span 2; } .feat-grid { grid-template-columns: repeat(3, 1fr); } .value-grid { grid-template-columns: repeat(3, 1fr); } .value-cell { border-bottom: none; border-right: 1px solid var(--border); } .value-cell:last-child { border-right: none; } .on-accent-flip .value-cell { border-right-color: var(--flip-border); } .trust-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1023px) { .primary-nav, .header-cta .btn, .header-cta .desktop-only { display: none; } .menu-toggle { display: inline-flex; } .footer-brand { grid-column: 1 / -1; } .hero-grid { display: block; } blockquote { margin: 0; } .compliance-strip { justify-content: center; } .wrap.cta-grid { padding-left: 20px; padding-right: 20px; } }