/* ========================================================================== CAIRN Trust Fabric — Design System & Stylesheet Identity: Slate (#0A0E11), Seam Amber (#E8823C), Verified Mint (#7FD4C1) Typography: Archivo (display), Instrument Sans (body), IBM Plex Mono (data) ── THE 2026-09-07 DIRECTION ───────────────────────────────────────────── Every vendor in this category ships navy-and-teal, and so did this site. The ground is now a cool slate and the accent is a molten amber, spent in ONE place: the boundary. Mint is reserved for verified states and is never decoration. The device the design is built on is the SEAM -- a vertical rule with the request on one side and the decision on the other. That is the product as a layout, and it is why the accent belongs to the boundary rather than to buttons in general. The token NAMES are unchanged on purpose. `--color-cairn-blue` is amber now, which reads oddly here and correctly everywhere else: 74 uses of --color-stone-grey and 55 of --border-glass move with one edit instead of with a rename that would have touched every file on the site. ========================================================================== */ /* The @import that used to sit here re-requested the two families the in every page's already loads, and an @import inside a stylesheet is discovered only after that stylesheet has parsed -- a second render-blocking round trip for fonts the browser was already fetching. The is the one copy. Removed 2026-09-06. */ :root { /* Core Brand Palette */ --bg-deep-space: #0a0e11; --bg-space-dark: #05080a; --bg-surface: #11171b; --bg-surface-elevated: #182027; --bg-surface-card: rgba(17, 23, 27, 0.72); --bg-surface-glass: rgba(10, 14, 17, 0.82); --bg-input: #131a1f; /* Accent & Status Colors */ --color-cairn-blue: #e8823c; --color-cairn-blue-hover: #ffa259; --color-cairn-blue-light: #ffa259; --color-cairn-blue-dim: rgba(232, 130, 60, 0.15); --color-cairn-glow: rgba(232, 130, 60, 0.35); --color-teal-signal: #7fd4c1; --color-teal-dim: rgba(127, 212, 193, 0.12); --color-teal-glow: rgba(127, 212, 193, 0.3); --color-teal-border: rgba(127, 212, 193, 0.4); --color-violet-flow: #b08cff; --color-violet-dim: rgba(176, 140, 255, 0.15); --color-stone-grey: #87959c; --color-stone-dark: #5b686e; --color-glacier: #edf1f2; --color-glacier-dim: #b6c2c7; /* Borders & Dividers */ --border-glass: rgba(255, 255, 255, 0.07); --border-glass-hover: rgba(232, 130, 60, 0.5); --border-card: rgba(135, 149, 156, 0.16); --border-highlight: rgba(232, 130, 60, 0.4); /* The 10 Pillar Design System Colors */ --pillar-cairn: #3f8bf7; --pillar-path: #36cfc9; --pillar-beacon: #ffc53d; --pillar-compass: #b37feb; --pillar-atlas: #40a9ff; --pillar-forge: #ff7a45; --pillar-crucible: #f759ab; --pillar-accelerator: #00e599; --pillar-fleet: #13c2c2; --pillar-settings: #597ef7; /* Typography */ --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Geometry & Shadows */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 9999px; /* ── TYPE SCALE ─────────────────────────────────────────────────────────── One scale. Before this there were 45 distinct font sizes across the CSS and the pages -- twelve of them between 0.72rem and 0.95rem, which is not a scale but twelve separate decisions that no two components agreed on. It is what makes a page feel slightly off without a reader being able to say why: the small type is never quite the same small type twice. The values are taken from the distribution that was already in use, so the migration moved 72 of 149 declarations by nothing at all and the largest movement anywhere is 2.4px on two single-use headings. See scripts/migrate-type-scale.mjs for the full drift table. `scripts/check-typography.mjs` fails the build on any raw font-size that is not one of these. The CAIRN application has enforced the same rule on itself for months -- "one scale, one weight set, one tracking set" -- and it caught a stray letter-spacing the day this was written. The shop window should hold to what the product does. */ --text-2xs: 0.72rem; --text-xs: 0.8rem; --text-sm: 0.88rem; --text-base: 0.95rem; --text-md: 1.05rem; --text-lg: 1.2rem; --text-xl: 1.5rem; --text-2xl: 1.75rem; --text-3xl: 2rem; --text-4xl: 2.3rem; --text-5xl: 2.75rem; --text-display: 3.25rem; /* Fluid heading sizes, deliberately not snapped: these are ranges, and replacing a range with a fixed step removes the behaviour rather than tidying it. */ /* Reduced from a 3.8rem cap with A1. The new headline is two sentences and twelve words against the old one's eight, and at 3.8rem in a 1.15fr column it set as three lines with "do." alone on the third. A clamp is a range, so the fix belongs in the range and not in a one-off override. */ --text-fluid-hero: clamp(2.25rem, 3.9vw, 3.25rem); --text-fluid-section: clamp(1.8rem, 3.2vw, 2.5rem); --text-fluid-lead: clamp(1.25rem, 2vw, 1.5rem); --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5); --shadow-elevated: 0 20px 40px -15px rgba(4, 6, 8, 0.8); --shadow-glow-blue: 0 0 35px rgba(232, 130, 60, 0.22); --shadow-glow-teal: 0 0 30px rgba(127, 212, 193, 0.22); --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ── THE ICON BASE ───────────────────────────────────────────────────────── Marks are inline SVG from a per-page sprite (scripts/icons.mjs). Sized in `em` so they scale with the type beside them and so the handful of rules that used to set `font-size` on an `` keep working unchanged. This lives HERE, in the sheet every page loads, and not in hybrid_additions.css -- which only two of the six pages load. It spent one render in the wrong file and the licensing matrix came out as a column of 300x150 circles, because an SVG with no width rule takes its intrinsic size. */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.135em; flex-shrink: 0; } /* Nothing on this site should ever be wider than the box it is in. The gallery spent its life as a 186px ribbon for want of this one rule. */ img, svg, video { max-width: 100%; } /* Base Resets */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* `body` already carried overflow-x: hidden and it was not enough: the scrolling element here is `html`, so the decorative `.ambient-glow-mesh` pushed the document 100px wider than the viewport and the page scrolled sideways. Harmless-looking on a desktop, and on a phone it is the thing that makes a site feel unfinished. */ overflow-x: hidden; font-size: 16px; background-color: var(--bg-deep-space); color: var(--color-glacier); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } body { line-height: 1.65; background: var(--bg-deep-space); min-height: 100vh; position: relative; overflow-x: hidden; color: var(--color-glacier-dim); } /* Background Ambient Lighting & Grid */ .bg-grid-pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse 80% 60% at 50% 10%, #000 70%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 10%, #000 70%, transparent 100%); pointer-events: none; z-index: 0; } .ambient-glow-top { position: absolute; width: 900px; height: 600px; background: radial-gradient(circle, rgba(232, 130, 60, 0.18) 0%, rgba(176, 140, 255, 0.08) 40%, rgba(10, 14, 17, 0) 70%); top: -150px; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 0; filter: blur(40px); } .ambient-glow-mesh { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(127, 212, 193, 0.1) 0%, rgba(232, 130, 60, 0.05) 50%, transparent 70%); top: 30%; right: -100px; pointer-events: none; z-index: 0; filter: blur(50px); } /* Typography & Headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-glacier); letter-spacing: -0.025em; } h1 { font-size: var(--text-fluid-hero); font-weight: 700; letter-spacing: -0.035em; } h2 { font-size: var(--text-fluid-section); letter-spacing: -0.025em; } h3 { font-size: var(--text-fluid-lead); } h4 { font-size: var(--text-lg); } p { color: var(--color-stone-grey); font-size: var(--text-md); line-height: 1.7; } a { color: var(--color-cairn-blue-light); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: #ffb478; } code, pre { font-family: var(--font-mono); } /* Container & Layout */ .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; } .section-spacing { padding: 5.5rem 0; } .section-title-wrap { text-align: center; max-width: 760px; margin: 0 auto 3.5rem auto; } .section-title { margin-bottom: 1rem; } .section-subtitle { font-size: var(--text-md); color: var(--color-stone-grey); } /* Brand Text Highlights & Badges */ .text-gradient { background: linear-gradient(135deg, #ffffff 0%, #ffd0a6 50%, #8fdcca 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-blue { color: var(--color-cairn-blue-light); } .text-teal { color: var(--color-teal-signal); } .status-pill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 1rem; border-radius: var(--radius-pill); background: rgba(232, 130, 60, 0.12); border: 1px solid rgba(232, 130, 60, 0.3); color: #ffd0a6; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.25rem; } .status-pill-teal { background: var(--color-teal-dim); border-color: var(--color-teal-border); color: var(--color-teal-signal); } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-teal-signal); box-shadow: 0 0 10px var(--color-teal-signal); animation: pulse-animation 2s infinite; } .pulse-dot-blue { background-color: var(--color-cairn-blue-light); box-shadow: 0 0 10px var(--color-cairn-blue-light); } @keyframes pulse-animation { 0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(127, 212, 193, 0.7); } 70% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 8px rgba(127, 212, 193, 0); } 100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(127, 212, 193, 0); } } /* Header & Navigation Bar (Uniform Scale & Placement) */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(10, 14, 17, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-glass); transition: all var(--transition-normal); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; } .header-logo-img { height: 44px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); transition: opacity var(--transition-fast); } .header-logo-img:hover { opacity: 0.92; } .nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } gap: 1.75rem; list-style: none; } .nav-link { font-size: var(--text-base); font-weight: 400; color: var(--color-stone-grey); padding: 0.35rem 0.5rem; position: relative; transition: color var(--transition-fast); } .nav-link:hover, .nav-link.active { color: var(--color-glacier); } .nav-link.active::after { content: ''; position: absolute; bottom: -6px; left: 0.5rem; right: 0.5rem; height: 2px; background: var(--color-cairn-blue-light); border-radius: 2px; box-shadow: 0 0 8px var(--color-cairn-blue); } .header-actions { display: flex; align-items: center; gap: 0.85rem; } .mobile-toggle-btn { display: none; background: transparent; border: 1px solid var(--border-glass); color: var(--color-glacier); font-size: var(--text-lg); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer; } /* Button System */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); padding: 0.68rem 1.4rem; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); text-decoration: none; border: none; outline: none; } .btn-primary { background: linear-gradient(135deg, #e8823c 0%, #c96a2c 100%); color: #ffffff; box-shadow: 0 4px 18px rgba(232, 130, 60, 0.35); border: 1px solid rgba(255, 255, 255, 0.15); } .btn-primary:hover { background: linear-gradient(135deg, #ffa259 0%, #e8823c 100%); box-shadow: 0 6px 24px rgba(232, 130, 60, 0.55); transform: translateY(-1px); color: #ffffff; } .btn-secondary { background: var(--bg-surface-elevated); color: var(--color-glacier); border: 1px solid var(--border-glass); } .btn-secondary:hover { background: #15315b; border-color: rgba(232, 130, 60, 0.4); color: #ffffff; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--color-stone-grey); border: 1px solid var(--border-glass); } .btn-outline:hover { background: rgba(255, 255, 255, 0.05); color: var(--color-glacier); border-color: var(--color-stone-grey); } .btn-teal { background: linear-gradient(135deg, #7fd4c1 0%, #0d9488 100%); color: #0a0e11; font-weight: 700; box-shadow: 0 4px 18px rgba(127, 212, 193, 0.3); } .btn-teal:hover { background: linear-gradient(135deg, #2dd4bf 0%, #7fd4c1 100%); box-shadow: 0 6px 24px rgba(127, 212, 193, 0.5); color: #0a0e11; transform: translateY(-1px); } /* Hero Section */ .hero-section { padding-top: 140px; padding-bottom: 5rem; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3rem; align-items: center; } .hero-content { display: flex; flex-direction: column; } .hero-title { margin-bottom: 1.25rem; } .hero-desc { font-size: var(--text-lg); color: var(--color-stone-grey); margin-bottom: 2rem; max-width: 580px; } .hero-cta-group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } /* 1-Click Install Command Pill */ .install-command-wrap { display: inline-flex; align-items: center; background: rgba(11, 29, 56, 0.7); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 0.4rem 0.6rem 0.4rem 1rem; font-family: var(--font-mono); font-size: var(--text-sm); color: #ffd0a6; max-width: 480px; } .install-command-wrap .cmd-prefix { color: var(--color-teal-signal); margin-right: 0.5rem; user-select: none; } .install-command-wrap code { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-copy-cmd { background: transparent; border: none; color: var(--color-stone-grey); padding: 0.35rem 0.65rem; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .btn-copy-cmd:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-glacier); } /* Hero Right: 3D Cairn Stage & Interactive Canvas */ .hero-stage { position: relative; display: flex; align-items: center; justify-content: center; } .hero-cairn-container { position: relative; width: 100%; max-width: 480px; height: 440px; display: flex; align-items: center; justify-content: center; } .hero-mesh-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .hero-3d-cairn-img { width: 280px; height: auto; position: relative; z-index: 2; filter: drop-shadow(0 20px 40px rgba(232, 130, 60, 0.45)); animation: float-cairn 6s ease-in-out infinite; } @keyframes float-cairn { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } } .floating-telemetry-pill { position: absolute; background: rgba(10, 14, 17, 0.85); border: 1px solid var(--border-glass-hover); backdrop-filter: blur(12px); padding: 0.5rem 1rem; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-glacier); display: flex; align-items: center; gap: 0.6rem; z-index: 3; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .pill-top-right { top: 30px; right: 0px; } .pill-bottom-left { bottom: 40px; left: -10px; } /* Core Trio Pillar Cards (Branding Board) */ .trio-cards-section { padding-bottom: 4.5rem; } .trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pillar-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 2rem; backdrop-filter: blur(16px); transition: all var(--transition-normal); position: relative; overflow: hidden; } .pillar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(232, 130, 60, 0.6), transparent); opacity: 0; transition: opacity var(--transition-normal); } .pillar-card:hover { transform: translateY(-4px); border-color: rgba(232, 130, 60, 0.35); box-shadow: var(--shadow-glow-blue); } .pillar-card:hover::before { opacity: 1; } .pillar-icon-box { width: 58px; height: 58px; border-radius: var(--radius-md); background: transparent; border: none; display: flex; align-items: center; justify-content: center; color: var(--color-cairn-blue-light); font-size: var(--text-xl); margin-bottom: 1.25rem; } .pillar-icon-box img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(63, 139, 247, 0.35)); transition: transform var(--transition-normal); } .pillar-card:hover .pillar-icon-box img { transform: scale(1.08); } .pillar-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: 0.5rem; } .pillar-tagline { color: var(--color-teal-signal); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; margin-bottom: 0.75rem; } .pillar-desc { font-size: var(--text-base); color: var(--color-stone-grey); } /* Target Enterprise Sectors Bar */ .sectors-bar { background: rgba(10, 14, 17, 0.6); border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass); padding: 1.75rem 0; backdrop-filter: blur(8px); } .sectors-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.15rem; } .sectors-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--color-stone-grey); text-transform: uppercase; text-align: center; width: 100%; } .sectors-list { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; } .sector-chip { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--text-sm); font-weight: 400; color: var(--color-glacier); } .sector-chip .icon { color: var(--color-cairn-blue-light); } /* Interactive Trust Fabric Status Dashboard */ .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; } .dashboard-card { background: var(--bg-surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 2rem; backdrop-filter: blur(20px); position: relative; display: flex; flex-direction: column; } .dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-glass); } .dashboard-title-group { display: flex; align-items: center; gap: 0.75rem; } .metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .metric-box { background: rgba(10, 14, 17, 0.6); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1rem; text-align: center; } .metric-value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-teal-signal); line-height: 1.1; display: flex; align-items: center; justify-content: center; gap: 0.35rem; } .metric-label { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-stone-grey); margin-top: 0.35rem; } /* Trust Graph Canvas Display */ .trust-graph-wrapper { position: relative; width: 100%; height: 280px; border-radius: var(--radius-md); background: rgba(5, 8, 10, 0.7); border: 1px solid var(--border-glass); overflow: hidden; display: flex; align-items: center; justify-content: center; } #trust-graph-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Interactive Developer Terminal Window */ .dev-window { background: var(--bg-space-dark); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); } .dev-window-header { background: rgba(10, 14, 17, 0.9); padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-glass); } .window-dots { display: flex; gap: 6px; } .dot { width: 10px; height: 10px; border-radius: 50%; } .dot-red { background-color: #ef4444; } .dot-yellow { background-color: #f59e0b; } .dot-green { background-color: #10b981; } .dev-tabs { display: flex; gap: 0.5rem; } .dev-tab-btn { background: transparent; border: none; color: var(--color-stone-grey); font-family: var(--font-mono); font-size: var(--text-xs); padding: 0.35rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); } .dev-tab-btn:hover { color: var(--color-glacier); background: rgba(255, 255, 255, 0.05); } .dev-tab-btn.active { color: #ffffff; background: rgba(232, 130, 60, 0.3); border: 1px solid rgba(232, 130, 60, 0.4); } .dev-window-body { padding: 1.5rem; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.7; color: #b6c2c7; min-height: 290px; overflow-y: auto; } .code-line { display: flex; gap: 1rem; } .line-num { color: var(--color-stone-dark); user-select: none; width: 20px; text-align: right; } .token-comment { color: #64748b; font-style: italic; } .token-cmd { color: #8fdcca; font-weight: 600; } .token-flag { color: #a78bfa; } .token-string { color: #fde047; } .token-key { color: #87959c; } .token-pass { color: var(--color-teal-signal); font-weight: 600; } /* The 4-Tier Cairn Architecture Section */ .arch-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; } .cairn-layers-visual { display: flex; flex-direction: column; gap: 1rem; } .cairn-layer-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; cursor: pointer; transition: all var(--transition-normal); position: relative; } .cairn-layer-card:hover, .cairn-layer-card.active { border-color: rgba(232, 130, 60, 0.5); background: rgba(15, 35, 65, 0.8); transform: translateX(6px); box-shadow: 0 4px 20px rgba(232, 130, 60, 0.2); } .cairn-layer-card.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-cairn-blue-light); border-radius: 4px 0 0 4px; } .layer-badge { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; color: var(--color-teal-signal); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.25rem; } .layer-title { font-size: var(--text-md); font-weight: 700; margin-bottom: 0.35rem; } .layer-desc { font-size: var(--text-sm); color: var(--color-stone-grey); } /* 6-Tier Verification Assurance Ladder */ .ladder-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .ladder-step { background: var(--bg-surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1.5rem 1rem; text-align: center; position: relative; transition: all var(--transition-normal); } .ladder-step:hover { transform: translateY(-4px); border-color: var(--color-teal-signal); box-shadow: var(--shadow-glow-teal); } .ladder-step-num { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; color: var(--color-teal-signal); margin-bottom: 0.5rem; } .ladder-step-title { font-size: var(--text-base); font-weight: 700; margin-bottom: 0.5rem; } .ladder-step-status { display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0.2rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-teal-dim); color: var(--color-teal-signal); border: 1px solid var(--color-teal-border); } /* Ecosystem Integrations Grid */ .ecosystem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .eco-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1.5rem; transition: all var(--transition-normal); } .eco-card:hover { border-color: rgba(232, 130, 60, 0.4); transform: translateY(-3px); } .eco-icon { font-size: var(--text-3xl); color: var(--color-cairn-blue-light); margin-bottom: 1rem; } .eco-title { font-size: var(--text-md); font-weight: 700; margin-bottom: 0.35rem; } .eco-desc { font-size: var(--text-sm); color: var(--color-stone-grey); } /* GitHub & Download Release Section */ .download-card-wrap { background: linear-gradient(135deg, rgba(10, 14, 17, 0.95) 0%, rgba(10, 14, 17, 0.98) 100%); border: 1px solid rgba(232, 130, 60, 0.35); border-radius: var(--radius-lg); padding: 3.5rem; backdrop-filter: blur(20px); position: relative; overflow: hidden; box-shadow: var(--shadow-glow-blue); } .download-content-box { max-width: 820px; margin: 0 auto; text-align: center; } .download-cta-group { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; margin-bottom: 2rem; } .download-verify-note { background: rgba(5, 8, 10, 0.65); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1.25rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; margin-top: 1.5rem; flex-wrap: wrap; } .download-verify-text { font-size: var(--text-sm); color: var(--color-stone-grey); flex: 1; } .download-verify-text strong { color: var(--color-glacier); } /* Enterprise Lead Capture Modal */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 8, 10, 0.85); backdrop-filter: blur(12px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1.5rem; } .modal-overlay.active { display: flex; } .modal-box { background: var(--bg-surface); border: 1px solid rgba(232, 130, 60, 0.4); border-radius: var(--radius-lg); max-width: 540px; width: 100%; padding: 2.5rem; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); } .modal-close-btn { font-family: var(--font-body); position: absolute; top: 1.25rem; right: 1.25rem; background: transparent; border: none; color: var(--color-stone-grey); font-size: var(--text-lg); cursor: pointer; } .modal-close-btn:hover { color: var(--color-glacier); } .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-glacier); margin-bottom: 0.4rem; } .form-input, .form-select, .form-textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); padding: 0.75rem 1rem; color: var(--color-glacier); font-family: var(--font-body); font-size: var(--text-base); outline: none; transition: border-color var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-cairn-blue-light); box-shadow: 0 0 0 3px rgba(232, 130, 60, 0.2); } /* Site Footer */ /* ── THE FOOTER WAS A THIRD OF A SCREEN OF NOTHING ──────────────────────── 4.5rem of padding, a 3.5rem gap under the grid, another 3rem between columns and a 32px mark rendering at its natural size because the height was set inline on one page and not on the others. On a 1440px screen it occupied ~540px to carry twelve links. Halved throughout, and the mark is now 22px and set HERE rather than inline, so it is the same size on all five pages. */ .site-footer { background: var(--bg-space-dark); border-top: 1px solid var(--border-glass); padding: 2.75rem 0 1.5rem 0; position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-mark img { height: 22px; width: auto; display: block; } .footer-brand p { margin-top: 0.85rem; font-size: var(--text-sm); line-height: 1.6; max-width: 300px; color: var(--color-stone-grey); } .footer-col-title { font-size: var(--text-2xs); font-weight: 600; color: var(--color-glacier); margin-bottom: 0.85rem; text-transform: uppercase; letter-spacing: 0.11em; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .footer-links a { color: var(--color-stone-grey); font-size: var(--text-sm); transition: color var(--transition-fast); } .footer-links a:hover { color: var(--color-glacier); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: var(--text-2xs); color: var(--color-stone-dark); } /* Responsive Media Queries */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-content { align-items: center; } .hero-cta-group { justify-content: center; } .hero-cairn-container { margin: 0 auto; } .trio-grid { grid-template-columns: 1fr; } .dashboard-grid { grid-template-columns: 1fr; } .ladder-grid { grid-template-columns: repeat(3, 1fr); } .ecosystem-grid { grid-template-columns: repeat(2, 1fr); } .download-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } /* ── THE HEADER COLLAPSES BEFORE IT OVERFLOWS, NOT AFTER ────────────────── The nav only became a hamburger below 768px while the header needed 1139px to lay out (748 nav + 186 logo + 206 actions). Every window between 769 and about 1180 therefore rendered an over-full header, and adding a "Register" link was what pushed it over on a normal laptop. Two changes together: the nav is six destinations rather than eight items -- the two that went were homepage anchors, which pointed at nothing on the other five pages -- and the collapse now happens at 1024px, above the width the remaining items need rather than far below it. */ @media (max-width: 1024px) { .nav-links { display: none; position: absolute; top: 74px; left: 0; width: 100%; background: rgba(10, 14, 17, 0.98); flex-direction: column; padding: 1.5rem; border-bottom: 1px solid var(--border-glass); } .nav-links.open { display: flex; } .mobile-toggle-btn { display: block; } .ladder-grid { grid-template-columns: 1fr 1fr; } .ecosystem-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .arch-grid { grid-template-columns: 1fr; } } /* ========================================================================== Secondary Pages & Sub-Component Styling (Dark Glassmorphic Theme) ========================================================================== */ /* Legacy Button Compatibility Aliases */ .btn-oxide { background: linear-gradient(135deg, #e8823c 0%, #c96a2c 100%); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 18px rgba(232, 130, 60, 0.35); } .btn-oxide:hover { background: linear-gradient(135deg, #ffa259 0%, #e8823c 100%); box-shadow: 0 6px 24px rgba(232, 130, 60, 0.55); transform: translateY(-1px); color: #ffffff; } .text-oxide { color: var(--color-teal-signal); } .badge-authority, .article-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); background: var(--color-teal-dim); border: 1px solid var(--color-teal-border); color: var(--color-teal-signal); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; } /* Compliance Page Styles */ .compliance-hero-card { background: var(--bg-surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 3rem; backdrop-filter: blur(20px); margin-bottom: 2.5rem; } .compliance-overview-box { background: rgba(5, 8, 10, 0.75); border-left: 4px solid var(--color-teal-signal); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin-top: 1.5rem; color: var(--color-glacier-dim); font-size: var(--text-md); } .framework-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 2rem; backdrop-filter: blur(16px); transition: border-color var(--transition-normal); } .framework-card:hover { border-color: rgba(232, 130, 60, 0.4); } .framework-title-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-glass); } .framework-badge-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal-signal); background: var(--color-teal-dim); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--color-teal-border); } .compliance-table-wrap { overflow-x: auto; margin-top: 1.25rem; } .compliance-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); text-align: left; } .compliance-table th { background: rgba(10, 14, 17, 0.8); color: var(--color-glacier); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-glass); } .compliance-table td { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--color-stone-grey); } .compliance-table tr:hover td { background: rgba(232, 130, 60, 0.05); color: var(--color-glacier); } /* Bento Grid & ADR Cards (Docs Page) */ .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .bento-card, .adr-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1.75rem; backdrop-filter: blur(16px); transition: all var(--transition-normal); display: flex; flex-direction: column; } .bento-card:hover, .adr-card:hover { border-color: rgba(232, 130, 60, 0.45); transform: translateY(-3px); box-shadow: var(--shadow-glow-blue); } .adr-filter-btn { background: var(--bg-surface-elevated); border: 1px solid var(--border-glass); color: var(--color-stone-grey); font-family: var(--font-mono); font-size: var(--text-xs); padding: 0.45rem 0.95rem; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--transition-fast); } .adr-filter-btn:hover, .adr-filter-btn.active { background: rgba(232, 130, 60, 0.25); border-color: var(--color-cairn-blue-light); color: var(--color-glacier); } /* Financial & Enterprise Grid */ .finsec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .finsec-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 2rem 1.75rem; backdrop-filter: blur(16px); transition: all var(--transition-normal); } .finsec-card:hover { border-color: rgba(232, 130, 60, 0.4); transform: translateY(-2px); } .finsec-card-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-pure-white); margin-bottom: 1rem; letter-spacing: -0.01em; } .finsec-card-desc { font-size: var(--text-base); line-height: 1.68; color: var(--color-stone-grey); } /* UI Gallery Styles */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .gallery-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition-normal); } .gallery-card:hover { border-color: rgba(232, 130, 60, 0.45); transform: translateY(-4px); box-shadow: var(--shadow-glow-blue); } .gallery-card img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--border-glass); } .gallery-card-body { padding: 1.5rem; } /* Book Companion Page Styles */ .book-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center; } .book-cover-stage { display: flex; justify-content: center; } .book-cover-image { max-width: 320px; border-radius: var(--radius-md); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7); border: 1px solid var(--border-glass); } /* Seven Pillars Architecture Styles */ .pillar-pipeline-container { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 2.25rem; backdrop-filter: blur(16px); } .pipeline-header { margin-bottom: 1.75rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-glass); padding-bottom: 1rem; } .pipeline-tag { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--color-glacier); text-transform: uppercase; } .pipeline-flow-list { display: flex; flex-direction: column; gap: 1rem; } .pipeline-step { display: grid; grid-template-columns: 190px 40px 1fr; align-items: center; background: rgba(10, 14, 17, 0.7); border: 1px solid var(--border-glass); padding: 1.1rem 1.4rem; border-radius: var(--radius-md); transition: all var(--transition-fast); position: relative; overflow: hidden; } .pipeline-step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--step-color, var(--color-cairn-blue)); opacity: 0.85; } .pipeline-step:hover { border-color: var(--step-color, rgba(232, 130, 60, 0.6)); background: rgba(10, 14, 17, 0.95); transform: translateX(4px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); } .pipeline-badge { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--badge-color, #ffb478); background: var(--badge-bg, rgba(232, 130, 60, 0.15)); border: 1px solid var(--badge-border, rgba(232, 130, 60, 0.3)); padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.65rem; letter-spacing: 0.05em; transition: all var(--transition-fast); } .pipeline-badge-icon { width: 22px; height: 22px; flex-shrink: 0; display: block; } /* Pillar Signature Badge Modifiers */ .badge-cairn { --badge-color: #ffd0a6; --badge-bg: rgba(63, 139, 247, 0.14); --badge-border: rgba(63, 139, 247, 0.38); --step-color: var(--pillar-cairn); } .badge-path { --badge-color: #5cdbd3; --badge-bg: rgba(54, 207, 201, 0.14); --badge-border: rgba(54, 207, 201, 0.38); --step-color: var(--pillar-path); } .badge-beacon { --badge-color: #ffd666; --badge-bg: rgba(255, 197, 61, 0.14); --badge-border: rgba(255, 197, 61, 0.38); --step-color: var(--pillar-beacon); } .badge-compass { --badge-color: #d3adf7; --badge-bg: rgba(179, 127, 235, 0.14); --badge-border: rgba(179, 127, 235, 0.38); --step-color: var(--pillar-compass); } .badge-atlas { --badge-color: #69c0ff; --badge-bg: rgba(64, 169, 255, 0.14); --badge-border: rgba(64, 169, 255, 0.38); --step-color: var(--pillar-atlas); } .badge-forge { --badge-color: #ff9c6e; --badge-bg: rgba(255, 122, 69, 0.14); --badge-border: rgba(255, 122, 69, 0.38); --step-color: var(--pillar-forge); } .badge-crucible { --badge-color: #ff85c0; --badge-bg: rgba(247, 89, 171, 0.14); --badge-border: rgba(247, 89, 171, 0.38); --step-color: var(--pillar-crucible); } .badge-accelerator { --badge-color: #5cf2bd; --badge-bg: rgba(0, 229, 153, 0.14); --badge-border: rgba(0, 229, 153, 0.38); --step-color: var(--pillar-accelerator); } .badge-fleet { --badge-color: #36cfc9; --badge-bg: rgba(19, 194, 194, 0.14); --badge-border: rgba(19, 194, 194, 0.38); --step-color: var(--pillar-fleet); } .badge-settings { --badge-color: #85a5ff; --badge-bg: rgba(89, 126, 247, 0.14); --badge-border: rgba(89, 126, 247, 0.38); --step-color: var(--pillar-settings); } /* Inline Pillar Mark utilities */ .inline-pillar-mark { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; margin-right: 0.35rem; flex-shrink: 0; } .pillar-map-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); background: rgba(10, 14, 17, 0.85); border: 1px solid var(--border-glass); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-glacier); margin-right: 0.4rem; margin-bottom: 0.35rem; } .pillar-map-tag .inline-pillar-mark { margin-right: 0; vertical-align: middle; } .pipeline-arrow { color: var(--color-stone-grey); font-size: var(--text-base); text-align: center; } .pipeline-info { display: flex; flex-direction: column; gap: 0.2rem; padding-left: 0.5rem; } .pipeline-info strong { color: #fff; font-size: var(--text-md); font-weight: 600; } .pipeline-info span { color: var(--color-stone-grey); font-size: var(--text-sm); line-height: 1.45; } .enforcement-philosophy-card { background: rgba(5, 8, 10, 0.6); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1.5rem; margin-top: 1.75rem; } .text-red { color: #f87171; } .text-gold { color: #facc15; } /* Gartner & UI Gallery Pillar Showcase Styles */ .gartner-pillar-card { background: var(--bg-surface-card); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 2.25rem; display: grid; /* minmax(0, …), not bare fr: see the note above `img { max-width }`. */ grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5rem; align-items: flex-start; position: relative; overflow: hidden; transition: all var(--transition-normal); backdrop-filter: blur(16px); } .gartner-pillar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pillar-color, var(--color-cairn-blue)); } .gartner-pillar-card:hover { border-color: var(--pillar-color, rgba(232, 130, 60, 0.5)); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transform: translateY(-3px); } .pillar-showcase-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-glass); } .pillar-squircle-preview { width: 72px; height: 72px; flex-shrink: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); background: #070c18; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.08); } .pillar-squircle-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .pillar-header-text { flex: 1; } .pillar-showcase-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.03em; color: var(--pillar-color, var(--color-glacier)); margin-bottom: 0.2rem; display: flex; align-items: center; gap: 0.75rem; } .gartner-pillar-role { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--color-glacier-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } .pillar-palette-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-glacier-dim); background: rgba(255, 255, 255, 0.05); padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--border-glass); } .pillar-palette-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pillar-color, #ffa259); box-shadow: 0 0 6px var(--pillar-color, #ffa259); } .gartner-pillar-desc { font-size: var(--text-base); line-height: 1.7; color: var(--color-glacier-dim); } .gartner-pillar-desc p { margin-bottom: 0.9rem; } .pillar-format-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.25rem; } .pillar-format-tag { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0.2rem 0.55rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); color: var(--color-stone-grey); } .pillar-format-tag.highlight { color: var(--pillar-color, #ffb478); border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); } .executive-caption-box { background: rgba(10, 14, 17, 0.9); border: 1px solid var(--border-glass); border-left: 3px solid var(--pillar-color, var(--color-teal-signal)); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; margin-bottom: 0.75rem; } .executive-caption-title { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; color: var(--pillar-color, var(--color-teal-signal)); text-transform: uppercase; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.4rem; } .executive-caption-text { font-size: var(--text-sm); color: var(--color-glacier-dim); line-height: 1.5; } /* Master 10-Pillar Visual Banner */ .pillar-master-banner { background: linear-gradient(180deg, rgba(13, 21, 39, 0.9) 0%, rgba(7, 12, 24, 0.98) 100%); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; margin-bottom: 3.5rem; box-shadow: var(--shadow-card); } .pillar-master-image { max-width: 780px; width: 100%; border-radius: var(--radius-md); margin: 1.5rem auto 0 auto; display: block; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7); border: 1px solid var(--border-glass); } @media (max-width: 900px) { .gartner-pillar-card { grid-template-columns: 1fr; gap: 1.75rem; } } @media (max-width: 768px) { .pipeline-step { grid-template-columns: 1fr; gap: 0.75rem; } .pipeline-arrow { display: none; } .pipeline-info { padding-left: 0; } } /* ========================================================================== Book Page Styles ========================================================================== */ .book-hero { padding-top: 140px; padding-bottom: 5rem; position: relative; overflow: hidden; } @media (max-width: 768px) { .book-hero { padding-top: 100px; padding-bottom: 3rem; } .book-hero-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================================================== NIST AI RMF 1.0 Realization Grid ========================================================================== */ .nist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1.5rem; } .nist-card { background: var(--bg-surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 1.75rem; backdrop-filter: blur(16px); transition: all var(--transition-normal); display: flex; flex-direction: column; } .nist-card:hover { border-color: rgba(232, 130, 60, 0.45); box-shadow: var(--shadow-glow-blue); transform: translateY(-2px); } .nist-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-glass); flex-wrap: wrap; } .nist-title-group { display: flex; align-items: center; gap: 0.6rem; } .nist-func-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0.03em; } .nist-func-icon { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)); transition: transform var(--transition-normal); } .nist-card:hover .nist-func-icon { transform: scale(1.12); } .nist-code-badge { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-teal-dim); border: 1px solid var(--color-teal-border); color: var(--color-teal-signal); font-weight: 600; } .nist-pillar-badge { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-cairn-blue-dim); border: 1px solid rgba(232, 130, 60, 0.4); color: var(--color-cairn-blue-light); font-weight: 400; } .nist-card-summary { font-size: var(--text-base); color: var(--color-glacier-dim); line-height: 1.6; margin-bottom: 1.25rem; } .nist-controls-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; padding: 0; margin: 0; } .nist-control-item { display: flex; align-items: flex-start; gap: 0.65rem; font-size: var(--text-sm); color: var(--color-stone-grey); line-height: 1.55; } .nist-control-item .icon { color: var(--color-teal-signal); margin-top: 0.25rem; font-size: var(--text-sm); flex-shrink: 0; } .nist-control-item strong { color: var(--color-glacier); } @media (max-width: 900px) { .nist-grid { grid-template-columns: 1fr; } } /* ========================================================================== Vertical License vs Capabilities Matrix Grid ========================================================================== */ .license-matrix-wrap { margin-top: 2rem; } .license-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; align-items: stretch; } @media (min-width: 1280px) { .license-grid { grid-template-columns: repeat(5, 1fr); } } .license-card { background: var(--bg-surface-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 2.25rem 1.6rem; backdrop-filter: blur(16px); display: flex; flex-direction: column; justify-content: space-between; transition: all var(--transition-normal); position: relative; } .license-card:hover { transform: translateY(-4px); border-color: rgba(232, 130, 60, 0.5); box-shadow: var(--shadow-glow-blue); } .license-card.featured { background: linear-gradient(180deg, rgba(15, 35, 65, 0.9) 0%, rgba(10, 14, 17, 0.98) 100%); border: 1.5px solid var(--color-teal-signal); box-shadow: 0 0 35px rgba(127, 212, 193, 0.2); transform: scale(1.02); z-index: 2; } .license-card.featured:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 0 45px rgba(127, 212, 193, 0.35); } .license-featured-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); /* The accent, not mint: mint means "verified" everywhere else on this site, and this is the tier a buyer is being pointed at. */ background: var(--color-cairn-blue); color: #0a0e11; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.85rem; border-radius: var(--radius-pill); box-shadow: 0 4px 12px rgba(127, 212, 193, 0.4); white-space: nowrap; } .license-header { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-glass); } .license-tier-badge { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--color-teal-dim); border: 1px solid var(--color-teal-border); color: var(--color-teal-signal); display: inline-block; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .license-tier-badge.blue { background: var(--color-cairn-blue-dim); border-color: rgba(232, 130, 60, 0.4); color: var(--color-cairn-blue-light); } .license-tier-badge.muted { background: rgba(255, 255, 255, 0.06); border-color: var(--border-glass); color: var(--color-stone-grey); } .license-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-glacier); margin-bottom: 0.35rem; } .license-tagline { font-size: var(--text-sm); color: var(--color-stone-grey); line-height: 1.5; min-height: 2.6rem; } .license-cta { margin: 1.25rem 0 1.5rem 0; } .license-cta .btn { width: 100%; justify-content: center; padding: 0.75rem 1rem; font-size: var(--text-sm); } .license-features-title { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-glacier-dim); margin-bottom: 0.85rem; } .license-features-list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; padding: 0; margin: 0; flex-grow: 1; } .license-feature-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--text-sm); line-height: 1.45; } .license-feature-item.included { color: var(--color-glacier-dim); } .license-feature-item.included .icon { color: var(--color-teal-signal); font-size: var(--text-xs); margin-top: 0.25rem; flex-shrink: 0; } .license-feature-item.highlighted { color: var(--color-glacier); font-weight: 600; } .license-feature-item.highlighted .icon { color: var(--color-teal-signal); font-size: var(--text-sm); margin-top: 0.25rem; flex-shrink: 0; } .license-feature-item.disabled { color: var(--color-stone-dark); } .license-feature-item.disabled .icon { color: var(--color-stone-dark); font-size: var(--text-2xs); margin-top: 0.25rem; flex-shrink: 0; } .license-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-glass); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-stone-grey); } /* ========================================================================== FAQ & Knowledge Hub Component (SEO / GEO Optimized) ========================================================================== */ .faq-section { position: relative; z-index: 2; } .faq-container { max-width: 880px; margin: 0 auto; } .faq-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; } .faq-item { background: var(--bg-surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all var(--transition-normal); overflow: hidden; } .faq-item:hover { border-color: rgba(232, 130, 60, 0.4); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .faq-item[open] { border-color: var(--border-highlight); background: var(--bg-surface-elevated); } .faq-summary { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.5rem; cursor: pointer; user-select: none; font-family: var(--font-heading); font-size: var(--text-md); font-weight: 600; color: var(--color-glacier); list-style: none; } .faq-summary::-webkit-details-marker { display: none; } .faq-summary-text { display: flex; align-items: center; gap: 0.75rem; } .faq-summary-icon { color: var(--color-teal-signal); font-size: var(--text-sm); width: 1.25rem; text-align: center; flex-shrink: 0; } .faq-toggle-arrow { color: var(--color-stone-grey); font-size: var(--text-sm); transition: transform var(--transition-normal), color var(--transition-normal); flex-shrink: 0; margin-left: 1rem; } .faq-item[open] .faq-toggle-arrow { transform: rotate(180deg); color: var(--color-teal-signal); } .faq-answer { padding: 0 1.5rem 1.4rem calc(1.5rem + 1.25rem + 0.75rem); font-size: var(--text-base); line-height: 1.75; color: var(--color-glacier-dim); border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 0.85rem; } .faq-answer p { margin-bottom: 0.75rem; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer ul { padding-left: 1.25rem; margin: 0.5rem 0 0.75rem 0; } .faq-answer li { margin-bottom: 0.35rem; color: var(--color-stone-grey); } .faq-answer strong { color: var(--color-glacier); } .faq-answer code { font-family: var(--font-mono); font-size: var(--text-xs); background: rgba(15, 23, 42, 0.6); padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--color-teal-signal); border: 1px solid rgba(127, 212, 193, 0.2); } /* ========================================================================== MERGED FROM css/hybrid_additions.css — 2026-09-07 ========================================================================== There were two stylesheets and only index.html loaded the second one. Four pages out of five were therefore missing every rule in it, silently, and the failure mode is invisible: an unstyled element does not error, it just looks slightly wrong in a way nobody can name. It had already cost twice. `.icon` went in there on 2026-09-06 and the licensing matrix rendered as a column of 300x150 circles because nothing matched. The gallery and book rules went in there on 2026-09-07 and did nothing at all on the two pages they were written for. Twice is a pattern, so the split is gone rather than the link being added to four more pages. One stylesheet cannot be loaded by some pages and not others. ========================================================================== */ /* ========================================================================== CAIRN Trust Fabric — Unified Styling Additions (hybrid_additions.css) Strictly adheres to: - Typography: Plus Jakarta Sans (headings, body), IBM Plex Mono (code, data) - Layout: Uniform 1240px container width across all sections - Palette: Deep Space (#0a0e11), Cairn Blue (#E8823C), Trust Teal (#7FD4C1), Gold Accent (#E5A93C) ========================================================================== */ /* Hero Title Accent Highlights (Matching Plus Jakarta Sans Font Family) */ .hero-title-unified { font-family: var(--font-heading); font-size: var(--text-fluid-hero); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; color: var(--color-glacier); margin-bottom: 1.25rem; } .text-gold-accent { color: #E5A93C; font-weight: 700; } .text-teal-accent { color: var(--color-teal-signal); font-weight: 700; } /* Conviction Callout Quote */ .conviction-quote-unified { border-left: 3px solid var(--color-teal-signal); padding: 0.75rem 1.25rem; margin: 1.75rem 0; font-family: var(--font-body); font-style: italic; font-size: var(--text-md); line-height: 1.6; color: var(--color-glacier); background: rgba(127, 212, 193, 0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* Hero Telemetry Strip */ .hero-telemetry-strip-unified { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; padding-top: 1.5rem; margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .telemetry-item-unified { display: flex; align-items: baseline; gap: 0.35rem; font-family: var(--font-mono); font-size: var(--text-2xs); white-space: nowrap; } .telemetry-value-unified { font-weight: 700; font-size: var(--text-base); color: var(--color-glacier); } .telemetry-label-unified { color: var(--color-stone-grey); } /* Problem Section Contrast Cards */ .problem-contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; max-width: 1000px; margin: 0 auto; } .contrast-box { background: var(--bg-surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-md); padding: 2rem; backdrop-filter: blur(12px); transition: transform var(--transition-fast), border-color var(--transition-fast); } .contrast-box:hover { transform: translateY(-2px); } .contrast-box-highlight { border-color: rgba(127, 212, 193, 0.35); background: rgba(17, 23, 27, 0.85); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(127, 212, 193, 0.03); } .contrast-badge-flawed { display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #F87171; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); padding: 0.25rem 0.6rem; border-radius: 4px; margin-bottom: 0.85rem; } .contrast-badge-verified { display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-teal-signal); background: var(--color-teal-dim); border: 1px solid var(--color-teal-border); padding: 0.25rem 0.6rem; border-radius: 4px; margin-bottom: 0.85rem; } .contrast-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: var(--color-glacier); margin-bottom: 0.6rem; } .contrast-desc { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--color-stone-grey); } @media (max-width: 768px) { .problem-contrast-grid { grid-template-columns: 1fr; } } /* ── REFUSAL SPECIMENS ────────────────────────────────────────────────────── Real output, set as evidence rather than as decoration. This replaced a "governance simulator" whose logs were hardcoded strings — "[COMPASS LOG] Hashed audit trail entry #09843", "executed in 12ms" — none of which had happened. On a product whose proposition is that its records can be trusted, an invented record on the marketing page was the worst thing the site carried. Everything in these blocks is copied verbatim from a running CAIRN. That is the point, and it is also why they are styled as terminal output and not as prose: a reader should be able to tell at a glance that they are looking at what the product said, not at what a copywriter said it says. */ .refusal-specimen { background: var(--bg-space-dark); border: 1px solid var(--border-card); border-left: 3px solid var(--color-teal-signal); border-radius: var(--radius-md); padding: 1.15rem 1.35rem; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.75; color: var(--color-glacier-dim); overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .refusal-specimen .refusal-verdict { color: var(--color-teal-signal); font-weight: 600; } .refusal-specimen .refusal-remedy { color: var(--color-glacier); } .refusal-caption { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-stone-grey); margin-bottom: 0.6rem; /* Two lines of caption on one card and one on its neighbour left the two blocks starting at different heights. A fixed two-line box keeps the tops aligned without shortening any caption. */ min-height: 2.6em; line-height: 1.3; display: flex; align-items: flex-end; } .specimen-grid { display: grid; /* TWO columns, not auto-fit. `auto-fit, minmax(340px, 1fr)` gave three columns on a desktop, so four specimens of very different lengths sat as an uneven row of three with the fourth orphaned underneath, and the longest one squeezed into the narrowest measure. Four items want two columns. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2rem; align-items: start; } @media (max-width: 900px) { .specimen-grid { grid-template-columns: 1fr; } } /* The caption is a label for the block beneath it, so it must not wrap into two lines and then sit closer to the block above. */ .specimen-grid > div { min-width: 0; } /* ── THE TWO PATHS ───────────────────────────────────────────────────────── An enterprise reviewer and a developer on one laptop want opposite proofs. The reviewer wants the register and the mapping; the developer wants to see it run, and wants to be told the awkward parts before they meet them. Presenting one download for both left the second audience with nothing addressed to them. */ .path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.75rem; margin-top: 2.5rem; text-align: left; } .path-card { background: var(--bg-surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; } .path-card h3 { font-size: var(--text-lg); margin-bottom: 0.35rem; } .path-card .path-for { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-teal-signal); margin-bottom: 0.9rem; } .path-card ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem 0; display: flex; flex-direction: column; gap: 0.6rem; } .path-card li { font-size: var(--text-sm); color: var(--color-glacier-dim); line-height: 1.6; padding-left: 1.4rem; position: relative; } .path-card li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-cairn-blue-light); } .path-card .path-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.75rem; } .path-honesty { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-glass); font-size: var(--text-2xs); line-height: 1.7; color: var(--color-stone-grey); } /* ── THE CHAIN VERIFIER ──────────────────────────────────────────────────── The product surface, above the fold, doing the one thing that cannot be faked: recomputing hashes over a real bundle in the reader's own browser. Styled as instrument rather than as marketing — mono, tabular, a progress bar that actually tracks work. It replaced a decorative 3D render in the hero position, which is a fair trade: the render said "trust product" and this says "here is the trust, check it". */ .chain-verifier { background: var(--bg-space-dark); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 1.35rem 1.5rem; font-family: var(--font-mono); max-width: 720px; } .chain-verifier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .chain-verifier-title { font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-stone-grey); } .chain-status { font-size: var(--text-md); font-weight: 600; line-height: 1.4; } .chain-status-working { color: var(--color-glacier-dim); } .chain-status-ok { color: var(--color-teal-signal); } .chain-status-broken { color: #ffc53d; } .chain-progress { height: 3px; background: rgba(255, 255, 255, 0.07); border-radius: var(--radius-pill); overflow: hidden; margin: 0.9rem 0; } .chain-progress-bar { height: 100%; width: 0; background: var(--color-teal-signal); transition: width 0.12s linear; } .chain-detail { font-size: var(--text-2xs); line-height: 1.7; color: var(--color-stone-grey); min-height: 3.4em; } .chain-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; } .chain-btn { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.04em; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--border-glass); background: transparent; color: var(--color-glacier-dim); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .chain-btn:hover { border-color: var(--color-teal-border); color: var(--color-glacier); } /* ── THE CLAIMS REGISTER ─────────────────────────────────────────────────── Set as a reference document rather than as marketing: one column, generous measure, status carried by a chip and a left border so the failures are as scannable as the successes. A page that made the Partial rows harder to find than the Works rows would be a highlight reel with a register's typography. */ .reg-summary { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--bg-surface-card); font-family: var(--font-mono); font-size: var(--text-2xs); } .reg-total { font-size: var(--text-md); color: var(--color-glacier); } .reg-total strong { font-size: var(--text-xl); } .reg-counts { display: flex; gap: 1rem; flex-wrap: wrap; } .reg-count { color: var(--color-stone-grey); } .reg-count strong { color: var(--color-glacier); } .reg-count-works strong { color: var(--color-teal-signal); } .reg-count-partial strong { color: #ffc53d; } .reg-count-roadmap strong { color: var(--color-cairn-blue-light); } .reg-count-never strong { color: var(--color-stone-grey); } .reg-reconciled { margin-left: auto; color: var(--color-stone-grey); } .reg-why { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--color-cairn-blue); background: var(--bg-surface-card); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.75; color: var(--color-stone-grey); max-width: 820px; } .reg-section { margin-top: 3rem; } .reg-section h2 { font-size: var(--text-xl); margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border-card); } .reg-rows { display: flex; flex-direction: column; gap: 0.9rem; } .reg-row { border: 1px solid var(--border-card); border-left: 3px solid var(--color-stone-dark); border-radius: var(--radius-md); padding: 1rem 1.25rem; background: var(--bg-surface-card); } .reg-row.reg-works { border-left-color: var(--color-teal-signal); } .reg-row.reg-partial { border-left-color: #ffc53d; } .reg-row.reg-roadmap { border-left-color: var(--color-cairn-blue-light); } .reg-row.reg-never { border-left-color: var(--color-stone-dark); } .reg-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .reg-row-head h3 { font-size: var(--text-base); font-weight: 600; color: var(--color-glacier); margin: 0; line-height: 1.5; } .reg-status { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); white-space: nowrap; border: 1px solid var(--border-glass); color: var(--color-stone-grey); } .reg-status-works { color: var(--color-teal-signal); border-color: var(--color-teal-border); } .reg-status-partial { color: #ffc53d; border-color: rgba(255, 197, 61, 0.4); } .reg-status-roadmap { color: var(--color-cairn-blue-light); border-color: var(--border-highlight); } .reg-impl, .reg-notes { margin-top: 0.6rem; font-size: var(--text-2xs); line-height: 1.75; color: var(--color-stone-grey); } .reg-impl code, .reg-notes code { font-family: var(--font-mono); /* No font-size: inline code inherits the row it sits in. A relative size here would be a fifteenth distinct value, which is how the 45 started. */ color: var(--color-glacier-dim); } .reg-notes { padding-top: 0.6rem; border-top: 1px solid var(--border-glass); } /* ── THE HEADER HAD NO NAVIGATION ON A PHONE ─────────────────────────────── Found 2026-09-06 by measuring, not by looking. At 375px the header row lays out to 471px: the brand lockup is 186px, and the Contact button, the GitHub button and the hamburger are laid out after it. The hamburger's left edge sat at x=429 on a 375px viewport, 96px past the right of the screen, and because the page clips horizontal overflow there was no scrollbar to reveal it. So the mobile toggle rendered, was enabled, was wired in main.js — and could not be touched. Every nav link on the site is inside `.nav-links`, which is `display: none` below 1024px and only opens from that button. A visitor on a phone had the homepage and nothing else. The 2026-09-06 header fix moved the collapse from 768px to 1024px and measured the DESKTOP row at 917px. It measured the wrong end: widening the breakpoint makes the hamburger appear EARLIER, and nothing had ever measured what the row costs once it does. The fix drops the GitHub icon (it is in the footer, and in the download section, on every page) and tightens the lockup and the gutter. Measured after: 331px on a 375px viewport. */ @media (max-width: 640px) { .container { padding: 0 1rem; } .site-header .nav-wrap { height: 64px; } .site-header .header-logo-img { height: 32px; } .site-header .header-actions { gap: 0.5rem; } /* The GitHub link, not the Contact button: a first-time visitor on a phone is more likely to want to reach a person than a repository, and the repository is linked twice more on the page below. */ .site-header .header-actions .btn-outline { display: none; } .site-header .header-actions .open-demo-btn { padding: 0.5rem 0.85rem; font-size: var(--text-xs); } .nav-links { top: 63px; } } /* The open mobile panel sat at `z-index: auto` inside a header that establishes its own stacking context via `backdrop-filter`. It resolved on top, but only by document order, and its 0.98 background left the hero heading faintly legible through the menu. Both are cheap to state outright. */ @media (max-width: 1024px) { .nav-links.open { z-index: 1001; background: var(--bg-deep-space); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75); } } /* ========================================================================== W4 — THE DESIGN PASS, 2026-09-06 ========================================================================== The critique this answers, in one line each: 1. ONE TEXTURE FOR 7,200px. Eight sections, every one of them: pill, title, subtitle, grid of boxes on a dark rectangle. Nothing changes, so nothing is emphasised, so a reader skims. The page now has three surfaces — SPACE (the default dark), PAPER (light, for the register extract) and INK (near-black, type only, for the refusals). Two changes of tempo in a long page is not decoration; it is the only way a long page has emphasis. 2. THE HIERARCHY WAS INVERTED. The loudest thing on the page was a marketing headline; the most credible things — the refusals and the register — were small mono in dark boxes. PAPER and INK exist to swap that round: the evidence gets the biggest surfaces on the page and the argument gets to be quiet. 3. IT LOOKED LIKE THE CATEGORY. Glassmorphic cards, pulsing dots and a floating render are what every vendor in this segment ships. What none of them ship is a page that opens with what the product cannot do. That is the design as much as it is the copy — hence `.register-extract`, which is set as a reference document rather than as a feature grid. */ :root { /* PAPER — a warm off-white, not a white. A pure white next to #0a0e11 reads as a broken stylesheet; this reads as paper. */ --paper-bg: #f1eee8; --paper-bg-raised: #f8f6f2; --paper-ink: #131b25; --paper-ink-soft: #4f5964; --paper-rule: rgba(19, 27, 37, 0.13); --paper-rule-strong: rgba(19, 27, 37, 0.28); /* INK — below the page's own background. The refusals section drops out of the surrounding surface rather than sitting on it. */ --ink-bg: #010509; } /* ── SURFACE: PAPER — CURRENTLY UNUSED ───────────────────────────────────── The one section that used this, `#register-extract`, was removed on 2026-09-06 with register.html: the homepage is a commercial surface and a list of what the product cannot do belongs behind an evaluation conversation. The rules are KEPT, and that is a decision rather than an oversight. Paper was half of W4's structural argument — the page had one texture for 7,200px, and two changes of tempo is what gives a long page emphasis. With this section gone there is one break left (INK, under the refusals), and the page is flatter than it was. The surface is content-neutral and would work under the assurance ladder or the two-ways-in section without carrying any of the copy that was removed with it. If a light section is never wanted, delete from here to "SURFACE: INK" — about 150 lines — rather than leaving it to rot quietly. */ /* ── SURFACE: PAPER ───────────────────────────────────────────────────────── */ .section-paper { position: relative; z-index: 1; background: var(--paper-bg); color: var(--paper-ink); padding: 7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .section-paper .container { max-width: 1040px; } .paper-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-ink-soft); padding-bottom: 0.9rem; border-bottom: 1px solid var(--paper-rule-strong); margin-bottom: 2.5rem; } .paper-title { font-size: var(--text-fluid-section); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--paper-ink); max-width: 20ch; margin-bottom: 1.5rem; } .paper-lede { font-size: var(--text-md); line-height: 1.75; color: var(--paper-ink-soft); max-width: 62ch; } .paper-lede strong { color: var(--paper-ink); font-weight: 600; } /* The tally. Three figures, checked by `npm run metrics:check` like every other number on this page — see data/site-metrics.json. */ .paper-tally { display: flex; flex-wrap: wrap; gap: 2.75rem; margin: 2.75rem 0 3.5rem; padding-top: 2rem; border-top: 1px solid var(--paper-rule); } .paper-tally-item { display: flex; flex-direction: column; gap: 0.3rem; } .paper-tally-value { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: 400; line-height: 1; color: var(--paper-ink); font-variant-numeric: tabular-nums; } .paper-tally-label { font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-ink-soft); } /* Measured against --paper-bg: 7.0:1 for the red and 5.3:1 for the amber, so both clear AA at the 2xs size these labels are set in. The amber started at #8a6a10 and came in at 4.37:1 — under the bar, and invisible to anyone choosing it by eye. */ .paper-tally-item.is-never .paper-tally-value { color: #8a3324; } .paper-tally-item.is-partial .paper-tally-value { color: #7a5c0a; } /* ── THE REGISTER EXTRACT ─────────────────────────────────────────────────── */ .register-extract { border-top: 1px solid var(--paper-rule-strong); } .register-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 1.75rem; padding: 1.6rem 0; border-bottom: 1px solid var(--paper-rule); } .register-row-status { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.09em; text-transform: uppercase; padding-top: 0.28rem; } .register-row-status.is-never { color: #8a3324; } .register-row-status.is-partial { color: #7a5c0a; } .register-row-claim { font-size: var(--text-md); font-weight: 600; line-height: 1.45; color: var(--paper-ink); letter-spacing: -0.005em; } .register-row-limit { grid-column: 2; font-size: var(--text-sm); line-height: 1.7; color: var(--paper-ink-soft); margin-top: 0.5rem; max-width: 68ch; } .register-row-limit code { font-family: var(--font-mono); font-size: var(--text-xs); background: rgba(19, 27, 37, 0.06); border-radius: 4px; padding: 0.08em 0.35em; } .paper-outro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.75rem; } .paper-note { font-size: var(--text-sm); line-height: 1.7; color: var(--paper-ink-soft); max-width: 54ch; } .paper-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--text-base); font-weight: 600; color: var(--paper-ink); text-decoration: none; padding: 0.8rem 1.4rem; border: 1px solid var(--paper-rule-strong); border-radius: var(--radius-sm); transition: background var(--transition-fast), border-color var(--transition-fast); } .paper-link:hover { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper-bg); } @media (max-width: 700px) { .section-paper { padding: 4.5rem 0; } .register-row { grid-template-columns: 1fr; gap: 0.5rem; } .register-row-limit { grid-column: 1; } .paper-tally { gap: 1.75rem; } } /* ── SURFACE: INK ─────────────────────────────────────────────────────────── */ .section-ink { position: relative; z-index: 1; background: var(--ink-bg); padding: 7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .section-ink .container { max-width: 1040px; } .ink-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-teal-signal); margin-bottom: 2rem; } .ink-title { font-size: var(--text-fluid-section); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; max-width: 24ch; margin-bottom: 1.25rem; } .ink-lede { font-size: var(--text-md); line-height: 1.75; color: var(--color-stone-grey); max-width: 64ch; } @media (max-width: 700px) { .section-ink { padding: 4.5rem 0; } } /* ── RHYTHM ───────────────────────────────────────────────────────────────── */ /* Section headers were a pill, a title and a subtitle, centred, at identical spacing eight times over. Left-aligning the ones that carry an argument and holding the lede to a real measure is most of what separates a page that reads from a page that is scanned. */ .section-title-wrap.is-left { text-align: left; margin-left: 0; margin-right: 0; } .section-title-wrap.is-left .section-subtitle { margin-left: 0; margin-right: 0; max-width: 64ch; } /* ── FOOTER: WORDS WHERE TRADEMARKS USED TO BE ────────────────────────────── */ .footer-social { display: flex; gap: 1.25rem; margin-top: 0.9rem; } .footer-social a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); color: var(--color-stone-grey); text-decoration: none; transition: color var(--transition-fast); } .footer-social a:hover { color: var(--color-glacier); } /* ========================================================================== THE GATE — 2026-09-07 ========================================================================== One device carries the direction: a vertical SEAM with the request on one side and the decision on the other. That is the product as a layout, and it is why the amber belongs to the boundary rather than to buttons in general. This replaces `.specimen-grid`, four static boxes headed "what a refusal looks like". The evidence is the same and the frame is the opposite: not a list of what CAIRN stops, but a demonstration of how every action is decided, opening on one that is allowed. */ /* ── THE HERO CANVAS ────────────────────────────────────────────────────── Sits behind both hero columns. Requests come in on the left, the seam falls in the gutter, and the mark stands on the far side of it. */ #gate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; } .hero-section { position: relative; overflow: hidden; } /* ── SCENARIO CHIPS ───────────────────────────────────────────────────── */ .gate-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } .gate-chip { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-stone-grey); background: var(--bg-surface); border: 1px solid var(--border-card); border-radius: var(--radius-pill); padding: 0.45rem 0.95rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.55rem; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .gate-chip:hover { color: var(--color-glacier); border-color: var(--color-stone-grey); } .gate-chip[aria-pressed="true"] { color: var(--color-glacier); border-color: var(--color-cairn-blue); background: var(--color-cairn-blue-dim); } .gate-chip .gate-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--color-cairn-blue); } .gate-chip[data-verdict="allowed"] .gate-dot { background: var(--color-teal-signal); } /* ── THE STAGE ────────────────────────────────────────────────────────── */ .gate-stage { display: grid; grid-template-columns: 1fr 1px 1.25fr; background: var(--bg-surface); border: 1px solid var(--border-card); border-radius: var(--radius-sm); overflow: hidden; min-height: 19rem; } .gate-side { padding: 1.5rem clamp(1.1rem, 2.4vw, 1.9rem); display: grid; align-content: start; gap: 1rem; } .gate-label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-stone-dark); } /* The seam itself. The one place the accent is spent at full strength. */ .gate-seam { position: relative; background: var(--border-card); } .gate-seam::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 0; background: var(--color-cairn-blue); box-shadow: 0 0 18px 3px var(--color-cairn-blue); } .gate-stage.is-firing .gate-seam::after { animation: gate-strike 720ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } @keyframes gate-strike { 0% { top: 50%; height: 0; opacity: 0; } 25% { opacity: 1; } 60% { top: 0; height: 100%; opacity: 1; } 100% { top: 0; height: 100%; opacity: 0.42; } } .gate-req { display: grid; gap: 0.55rem; font-family: var(--font-mono); font-size: var(--text-xs); } .gate-req-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; align-items: baseline; } .gate-req-row span:first-child { color: var(--color-stone-dark); } .gate-req-row span:last-child { color: var(--color-glacier-dim); word-break: break-word; } .gate-req-row b { color: var(--color-glacier); font-weight: 600; } .gate-track { position: relative; height: 2px; background: var(--border-card); border-radius: 2px; overflow: hidden; margin-top: 0.4rem; } .gate-track i { position: absolute; inset-block: 0; left: -32%; width: 32%; background: linear-gradient(90deg, transparent, var(--color-cairn-blue)); opacity: 0; } .gate-stage.is-firing .gate-track i { animation: gate-run 620ms cubic-bezier(0.5, 0, 0.3, 1) forwards; } @keyframes gate-run { 0% { left: -32%; opacity: 1; } 100% { left: 100%; opacity: 1; } } /* ── THE VERDICT ──────────────────────────────────────────────────────── */ .gate-verdict { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.01em; padding: 0.45rem 0.95rem; border-radius: var(--radius-sm); border: 1px solid var(--color-cairn-blue); color: var(--color-cairn-blue); background: var(--color-cairn-blue-dim); justify-self: start; transform-origin: left center; } .gate-verdict[data-kind="allowed"] { border-color: var(--color-teal-signal); color: var(--color-teal-signal); background: var(--color-teal-dim); } .gate-stage.is-firing .gate-verdict { animation: gate-stamp 380ms cubic-bezier(0.2, 1.5, 0.4, 1) 640ms both; } @keyframes gate-stamp { 0% { transform: scale(1.5); opacity: 0; filter: blur(3px); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } } .gate-timing { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-stone-grey); font-variant-numeric: tabular-nums; } .gate-timing b { color: var(--color-glacier); font-weight: 600; } .gate-output { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.75; color: var(--color-glacier-dim); white-space: pre-wrap; overflow-x: auto; margin: 0; min-height: 8rem; } .gate-output .gate-v { color: var(--color-cairn-blue); font-weight: 600; } .gate-output .gate-ok { color: var(--color-teal-signal); font-weight: 600; } .gate-output .gate-fix { color: var(--color-stone-grey); } .gate-caret { display: inline-block; width: 7px; height: 1em; background: var(--color-cairn-blue); vertical-align: -0.15em; animation: gate-blink 1s steps(2) infinite; } @keyframes gate-blink { 50% { opacity: 0; } } /* ── THE LEDGER ───────────────────────────────────────────────────────── */ .gate-ledger { margin-top: 1.5rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background: var(--bg-surface); overflow: hidden; } .gate-ledger-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border-card); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-stone-grey); } .gate-ledger-head .gate-actions { margin-left: auto; display: flex; gap: 0.5rem; } .gate-mini { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--border-card); background: transparent; color: var(--color-glacier-dim); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); } .gate-mini:hover { color: var(--color-glacier); border-color: var(--color-stone-grey); } .gate-rows { max-height: 15rem; overflow-y: auto; } .gate-row { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem; align-items: center; padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--border-glass); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-stone-grey); animation: gate-row-in 340ms ease both; } @keyframes gate-row-in { from { opacity: 0; transform: translateY(-6px); } } .gate-row:last-child { border-bottom: 0; } .gate-row .gate-n { color: var(--color-stone-dark); font-variant-numeric: tabular-nums; } .gate-row .gate-what { color: var(--color-glacier-dim); } .gate-row .gate-hash { color: var(--color-stone-dark); } .gate-row .gate-badge { color: var(--color-cairn-blue); } .gate-row[data-kind="allowed"] .gate-badge { color: var(--color-teal-signal); } .gate-row.is-broken { background: var(--color-cairn-blue-dim); } .gate-row.is-broken .gate-hash { color: var(--color-cairn-blue); } .gate-foot { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border-card); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-stone-grey); } .gate-foot.is-ok { color: var(--color-teal-signal); } .gate-foot.is-bad { color: var(--color-cairn-blue); } .gate-empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--color-stone-dark); font-family: var(--font-mono); font-size: var(--text-xs); } @media (max-width: 900px) { .gate-stage { grid-template-columns: 1fr; } .gate-seam { height: 1px; } .gate-stage.is-firing .gate-seam::after { animation: none; top: 0; height: 100%; opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .gate-stage.is-firing .gate-seam::after, .gate-stage.is-firing .gate-track i, .gate-stage.is-firing .gate-verdict, .gate-row, .gate-caret { animation: none; } } /* ── THE MARK, BROUGHT INTO THE PALETTE ─────────────────────────────────── The cairn artwork is a blue PNG and the ground is now slate and amber, so the mark read as a leftover from the previous design rather than as the brand. Rotated into the accent rather than redrawn: the artwork is the brand asset, and replacing it with an approximation to fix a colour would trade a real mark for a copy of one. 221 degrees (the old Cairn Blue) to 25 (the seam) is a 164 degree rotation. Saturation is lifted slightly because a hue rotation flattens it. */ .header-logo-img, .hero-3d-cairn-img, .footer-mark img, .dashboard-card img[alt="Stacked Cairn Layers"] { filter: hue-rotate(164deg) saturate(1.12); } .hero-3d-cairn-img { filter: hue-rotate(164deg) saturate(1.12) drop-shadow(0 20px 40px rgba(232, 130, 60, 0.32)); } .dashboard-card img[alt="Stacked Cairn Layers"] { filter: hue-rotate(164deg) saturate(1.12) drop-shadow(0 15px 30px rgba(232, 130, 60, 0.3)); } /* On a phone the hero copy is full-width and centred, so the packets crossed the paragraph and read as strikethrough. On desktop they pass behind a left-hand text column and never touch it. Faded where the collision is real rather than removed, because the motion is the point of the hero. */ @media (max-width: 900px) { #gate-canvas { opacity: 0.3; } } @media (max-width: 620px) { #gate-canvas { opacity: 0.18; } } /* ========================================================================== GALLERY & BOOK — 2026-09-07 ========================================================================== */ /* ── THE PILLAR INDEX ───────────────────────────────────────────────────── Ten long sections with no way to skip is a page people leave. */ .gallery-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); } .pillar-index { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 1.75rem; border-top: 1px solid var(--border-card); } .pillar-index a { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; color: var(--color-stone-grey); text-decoration: none; border: 1px solid var(--border-card); border-radius: var(--radius-pill); padding: 0.35rem 0.8rem; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .pillar-index a:hover, .pillar-index a:focus-visible { color: var(--color-glacier); border-color: var(--color-cairn-blue); background: var(--color-cairn-blue-dim); } /* ── THE CAPTION BELONGS UNDER THE PICTURE ──────────────────────────────── "WHAT AM I LOOKING AT?" sat ABOVE the screenshots in a bordered box, so a reader was told what they were about to see and then had to hold it in mind while they looked. A caption is read against the thing it describes. Moved with `order` rather than by moving the markup: the column is already a flex container, and reordering ten blocks of hand-written HTML to achieve what one declaration does is how a page acquires ten slightly different blocks. */ .gartner-pillar-visual .executive-caption-box { order: 2; background: transparent; border: 0; border-top: 1px solid var(--border-card); border-radius: 0; padding: 0.9rem 0 0 0; margin-bottom: 0; } .executive-caption-title { font-weight: 600; } /* The pillar hue is the section's identity; it does not need to also be the caption's rule and its title colour and its card border. Kept on the card edge, dropped here, so the amber stays the only accent that means anything. */ .gartner-pillar-visual .executive-caption-title { color: var(--color-stone-grey); } .gartner-pillar-visual img { border-radius: var(--radius-sm); border: 1px solid var(--border-card); box-shadow: var(--shadow-card); } .gartner-pillar-card { scroll-margin-top: 90px; } /* ── THE BOOK PAGE ──────────────────────────────────────────────────────── The cover is the only real image on the page and it was one of three things competing at the same weight. */ .book-hero-grid { align-items: center; } .book-cover-stage img { border-radius: var(--radius-sm); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); } .book-quote { border-left: 2px solid var(--color-cairn-blue); padding: 0.25rem 0 0.25rem 1.25rem; font-size: var(--text-md); line-height: 1.7; color: var(--color-glacier-dim); max-width: 54ch; } .book-meta { display: flex; flex-wrap: wrap; gap: 1.75rem; padding-top: 1.5rem; margin-top: 1.75rem; border-top: 1px solid var(--border-card); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-stone-grey); } .book-meta b { display: block; font-size: var(--text-base); font-weight: 600; color: var(--color-glacier); letter-spacing: -0.01em; } /* The cover is a 2958x2050 render capped at 320px in a 458px column, so the one real image on the page sat smaller than the paragraph beside it. It is the reason a reader is here. */ .book-cover-stage .book-cover-image { width: 100%; max-width: 460px; height: auto; }