/* --- /styles/hea_style.css (organized, dark-mode ready) --- */ /* ========================= 1) Design tokens ========================= */ /* --- /styles/hea_tokens.css — single source of truth --- */ /* hea_style.css — use canonical tokens; keep only shims/extras */ :root{ /* Legacy aliases so old selectors keep working */ --brand-color-primary: var(--brand1); --brand-color-secondary: var(--brand2); --brand-color-accent: var(--brand-accent); } /* If you *must* force a theme with .light/.dark, do it without redefining values. Prefer adding a class on and styling components by class, not by tokens. */ /* Example (no token duplication): */ /* :root.dark .page-header { background: linear-gradient(120deg,#243b55,#141e30); } :root.light .page-header { background: linear-gradient(120deg,#4b6cb7,#182848); } */ /* ========================= 2) Reset & Global ========================= */ *{ margin:0; padding:0; box-sizing:border-box; } html,body{ height:100%; display:flex; flex-direction:column; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; } body{ flex:1; font-size:1em; background: var(--bg); color: var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } main{ flex:1; text-align:center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================= 3) Utilities & Buttons ========================= */ .glow-hover:hover{ box-shadow:0 0 10px rgba(255,95,109,.3); } .btn{ background:var(--brand-color-accent); color:#fff; } .btn.brand{ background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; border:none; padding:12px 24px; border-radius:8px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.2); } .tabs button.active{ background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; } /* Focus visibility */ a:focus-visible, button:focus-visible, .cta-button:focus-visible, .catalog-btn:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; } /* Mobile-friendly bottom CTA spacing */ .cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:40px 0 60px; text-align:center; } /* Make stacked CTAs breathe + be tappable on mobile */ @media (max-width: 520px){ .cta{ flex-direction: column; /* ✅ stack vertically */ align-items: stretch; gap: 12px; } .cta .catalog-btn{ width: 100%; /* ✅ full width buttons */ text-align: center; box-sizing: border-box; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } .ico{ filter:grayscale(100%) brightness(.8); opacity:.8; } /* ========================= 4) Header / Banners ========================= */ .hea-header{ border-top:4px solid var(--brand-color-primary); } .hea_intro_banner{ flex-shrink: 0; background: radial-gradient(ellipse 90% 80% at 10% 55%, rgba(255, 90, 100, 0.52), transparent 50%), radial-gradient(ellipse 100% 90% at 75% 25%, rgba(255, 195, 113, 0.40), transparent 50%), radial-gradient(ellipse 60% 50% at 50% 110%, rgba(255, 120, 70, 0.22), transparent 56%), linear-gradient(180deg, #030508 0%, #060810 100%); color:#fff; text-align:center; padding:60px 20px; margin-bottom:40px; border-radius:0 0 16px 16px; min-height: 400px; min-height: min(520px, calc(100svh - 92px)); display: grid; align-content: center; } .hea_intro_banner h1{ font-size:2.8rem; margin-bottom:20px; text-shadow:0 2px 5px rgba(0,0,0,.3); } .hea_intro_banner p{ font-size:1.2rem; max-width:800px; margin:0 auto; line-height:1.6; text-shadow:0 2px 4px rgba(0,0,0,.2); } @media (max-width:620px){ .hea_intro_banner{ min-height:280px; } .hea_intro_banner h1{ font-size:2rem; } } /* ========================= 5) Intro / Containers / Headings / Text ========================= */ .intro-header{ display:flex; align-items:center; gap:20px; max-width:1000px; margin:0 auto; padding:40px 20px; } .intro-text{ color:#fff; flex:1; } .intro-text h1{ font-size:2.5rem; margin:0 0 12px; } .intro-text p{ font-size:1.2rem; } .logo-large{ height:160px; width:auto; } .logo-small{ height:120px; width:auto; } /* ========================= Global HEA log console ========================= */ .logbox { background: var(--terminal-bg); color: var(--terminal-fg); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; text-align: left; min-height: 120px; max-height: 360px; overflow-y: auto; resize: vertical; margin-top: 1rem; /* Scrollbar styling for all logboxes */ scrollbar-width: thin; scrollbar-color: var(--muted) transparent; /* Reserve the vertical scrollbar gutter up front: when log lines stream in and the scrollbar appears mid-stream, the sudden content-width shrink re-wraps pre-wrap lines and Chromium can keep a stale raster of one line — painted ~2x wide, clipped at the box edge, with a phantom horizontal scrollbar (seen 2026-08-12 on publish logs). A stable gutter means the width never changes, so the re-wrap/desync never triggers. */ scrollbar-gutter: stable; } .logbox::-webkit-scrollbar { height: 8px; width: 8px; } .logbox::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--muted) 45%, transparent); border-radius: 999px; } /* Each log entry inside the box */ .logbox .log-entry { margin-bottom: 0.15rem; animation: fadeIn 0.3s ease-in; } /* Emoji colorization */ .log-ok { color: var(--terminal-fg); } .log-fail { color: var(--terminal-err); } .log-warn { color: var(--terminal-warn); } /* Optional muted icon treatment (used on some public pages to keep visuals calmer). */ .hea-muted-icon{ display: inline-block; margin-right: .35em; filter: grayscale(1) saturate(0) brightness(1.05); opacity: .82; } .hea-container{ background: var(--surface); max-width:1000px; width:100%; margin:0 auto; padding:10px; flex:1; display:flex; flex-direction:column; } /* ✅ Align ALL page bodies with the same width/padding as the sticky header */ .hea-container{ max-width: var(--page-w); margin-inline: auto; padding: 10px var(--app-pad); width: 100%; background: transparent; /* important: don't paint a white column */ } /* If you want a “card page” feel on some pages, opt-in explicitly */ .hea-container.is-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } /* ========================================================= Public pages: cap MAIN width on large screens - Keep .hea-container wide so hero/banner can breathe - But make
readable (prevents “too wide” paragraphs/grids) ========================================================= */ :root{ /* Tune to taste: 980–1120px usually feels great */ --main-max-w: 1040px; } /* Default: constrain main content */ .hea-container > main{ width: 100%; max-width: var(--main-max-w); margin-inline: auto; } /* Optional: if some pages put sections outside
, cap them too */ .hea-container > section{ max-width: var(--main-max-w); margin-inline: auto; } /* Do NOT constrain header/footer/banner/CTA areas */ .hea-container > header, .hea-container .hea_intro_banner, .hea-container .platform-hero, .hea-container .nh-hero, .hea-container .build-hero, .hea-container .trust-hero, .hea-container .hea-page-cta-band, .hea-container .hp-band, .hea-container .hp-defn-band, .hea-container .hp-outcomes-strip, .hea-container .hp-trust-strip, .hea-container .trusted-infra, .hea-container .hp-cinema, .hea-container > #hea-footer-placeholder, .hea-container > .hea-footer{ max-width: none; } /* Catalog (and any other page you want) can opt into wide main */ body.layout-wide .hea-container > main, body.layout-wide .hea-container > section{ max-width: none; } main h1{ font-size:2.8rem; margin-bottom:20px; } main h2{ font-size:1.8rem; margin-bottom:12px; } main h3{ margin-bottom:10px; font-size:1.3rem; color:var(--ink); } main p{ text-align:center; font-size:1.05rem; color:var(--muted); margin:0 auto 32px; line-height:1.6; max-width:800px; } /* Lists */ main ul{ list-style-position:inside; padding-left:40px; margin:12px 0; } main ul li{ display:flex; align-items:flex-start; gap:8px; margin:.5em 0; font-size:1.05em; text-align:left; } main ul li::marker{ color:#666; font-weight:700; } main ol{ counter-reset:step; list-style:none; padding-left:40px; margin:12px 0; } main ol li{ counter-increment:step; display:flex; align-items:flex-start; margin:.75em 0; font-size:1.1em; } main ol li::before{ content:counter(step) "."; font-weight:700; margin-right:12px; color:var(--ink); min-width:1.5em; text-align:right; } /* Links in intro blocks */ .intro h2{ font-size:1.8rem; margin-bottom:12px; } .intro p{ font-size:1.05rem; color:var(--muted); margin-bottom:32px; line-height:1.6; max-width:800px; margin-left:auto; margin-right:auto; text-align:center; } .intro a, .PrivacyTerrms a, .PrivacyTerms a{ color:inherit; text-decoration:underline; font-weight:500; } .intro a:hover, .PrivacyTerrms a:hover, .PrivacyTerms a:hover{ opacity:.85; } /* ========================= 6) Cards (catalog + generic) ========================= */ .hea-list{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; } .hea-card, .features .card, .hea-catalog-card, .cta-card, .hea-list-row, .hea-info-panel, .chat-section, .chat-popup{ background: var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow-sm); color: var(--ink); } .hea-card{ padding:20px; width:300px; text-align:left; transition:transform .2s ease-in-out; } .hea-card:hover{ transform:translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.10); } .hea-card h2{ margin-top:0; font-size:1.4rem; color:var(--brand-color-primary); } .hea-card p{ font-size:.95rem; color:var(--muted); margin:10px 0; } /* Home page value cards: center icon + title + text */ .hea-value-cards .hea-card { text-align: center; position: relative; padding-top: 4.5rem; } .hea-value-cards .hea-card[data-step]::before { content: attr(data-step); position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.78rem; font-weight: 800; background: linear-gradient(135deg, var(--brand1, #ff5f6d), var(--brand2, #ffc371)); color: #fff; letter-spacing: 0.02em; } .hea-value-cards .hea-card h3 { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 0 0 .5rem; line-height: 1.25; font-size: 1.15rem; } /* Tighten paragraph width for nicer rhythm */ .hea-value-cards .hea-card p { max-width: 32ch; margin: 0 auto; line-height: 1.55; } .hea-meta{ font-size:.85rem; color:var(--muted); line-height:1.4; margin-top:8px; } .hea-actions{ margin-top:15px; } .hea-actions a{ display:inline-block; margin-right:10px; font-size:.9rem; text-decoration:none; color:var(--brand-color-primary); font-weight:500; } .hea-actions a:hover{ text-decoration:underline; } .features{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin:0 auto 40px; max-width:960px; } .features .card{ padding:20px; width:280px; text-align:center; } .features .card h3{ margin-bottom:10px; font-size:1.3rem; color:var(--ink); } .catalog-btn{ background:var(--brand-color-primary); color:#fff; text-decoration:none; padding:12px 24px; border-radius:8px; font-weight:600; display:inline-block; } .catalog-btn:hover{ opacity:.92; } /* Catalog grid cards */ .hea-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 220px)); justify-content:center; gap:1.5rem; padding:2rem clamp(16px, 4vw, 80px); } .hea-catalog-card{ padding:1rem; width:100%; min-height:0; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; transition:transform .3s ease; } .hea-catalog-card:hover{ transform:translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.10); } .hea-card-avatar{ width:60px; height:60px; border-radius:50%; object-fit:cover; margin-bottom:.5rem; } .hea-catalog-card h3{ margin:.3rem 0 .2rem; font-size:1.05rem; color:var(--brand-color-primary); font-weight:700; } .hea-catalog-card p{ max-height:7.3em; font-size:.85rem; color:var(--muted); margin:0 0 .5rem; flex-grow:1; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; } .hea-catalog-chat-btn{ background:linear-gradient(135deg,var(--brand-color-secondary),var(--brand-color-primary)); color:#fff; padding:.4rem 1rem; font-size:.85rem; border-radius:999px; text-decoration:none; font-weight:600; margin-top:auto; align-self:center; } .hea-catalog-chat-btn:hover{ opacity:.95; } .hea-catalog-preview-link{ font-size:.75rem; color:var(--muted); text-decoration:none; font-weight:500; white-space:nowrap; } .hea-catalog-preview-link:hover{ color:var(--brand-color-primary); } .hea-card-actions{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-top:auto; } /* --- Catalog title + layout hardening --- */ .hea-catalog-card{ position:relative; overflow:hidden; } /* keep paint inside rounded card */ .hea-catalog-card h3{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; min-width:0; } .hea-catalog-card .hea-tooltip-wrapper{ flex:0 0 auto; } /* tooltip icon shouldn't consume width */ .hea-catalog-card > div:first-of-type{ display:flex; align-items:center; gap:.4rem; width:100%; min-width:0; } /* List view: same safeguards */ .hea-list-row{ position:relative; overflow:hidden; } .hea-list-center h3{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; min-width:0; } .hea-list-center > div:first-child{ display:flex; align-items:center; gap:.4rem; min-width:0; } .hea-list-center .hea-tooltip-wrapper{ flex:0 0 auto; } /* Tooltips must not affect layout & are themed */ .hea-tooltip-wrapper{ position:relative; } .hea-tooltip-wrapper .hea-tooltip{ position:absolute; left:50%; top:1.6rem; transform:translateX(-50%); pointer-events:none; z-index:30; /* theme */ background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; white-space: nowrap; max-width: 260px; white-space: normal; word-break: break-word; } /* CTA card — full-width banner above the catalog grid */ .cta-card{ grid-column:1 / -1; border:2px dashed #ddd; /* fallback */ border:2px dashed color-mix(in oklab, var(--line) 80%, var(--ink)); display:grid; grid-template-columns:1fr auto; align-items:center; gap:.35rem 2rem; padding:1.1rem 1.75rem; width:auto; min-height:0; text-align:left; } .cta-card h2{ grid-column:1; grid-row:1; margin:0; font-size:1.12rem; font-weight:800; color:var(--ink); } .cta-card p{ grid-column:1; grid-row:2; margin:0; font-size:.9rem; line-height:1.45; color:var(--muted); max-width:52ch; } .cta-button{ grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end; flex-shrink:0; white-space:nowrap; background:linear-gradient(135deg,var(--brand-color-primary),var(--brand-color-secondary)); color:#fff; padding:10px 20px; border-radius:8px; font-weight:600; text-decoration:none; } .cta-button:hover{ opacity:.95; } @media (max-width:640px){ .cta-card{ grid-template-columns:1fr; gap:.75rem; padding:1.1rem 1.25rem; text-align:center; } .cta-card h2, .cta-card p{ grid-column:1; max-width:none; } .cta-card p{ grid-row:2; } .cta-button{ grid-column:1; grid-row:3; justify-self:center; } } /* List row style */ .hea-list-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem 1rem; width:100%; min-height:80px; max-width:850px; margin:0 auto .8rem; } .hea-list-left .hea-list-avatar{ width:48px; height:48px; flex-shrink:0; margin:0; } .hea-list-avatar{ border-radius:50%; object-fit:cover; background:var(--surface-2); border:1px solid var(--line); } .hea-card-avatar{ background:var(--surface-2); border:1px solid var(--line); } .hea-list-center{ flex-grow:1; min-width:0; /* allow long titles to shrink/ellipsis instead of pushing CTA off-card */ text-align:left; } .hea-list-center h3{ font-size:.9rem; margin:0 0 2px; } .hea-list-center p{ font-size:.7rem; color:var(--muted); margin:0; } .hea-list-right{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:.25rem; } .hea-list-right .hea-chat-btn{ padding:.2rem .6rem; font-size:.7rem; } /* Beta pill */ .pill{ display:inline-block; margin-left:8px; border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:12px; } .pill.beta{ border-color:rgba(255,122,0,.35); color:#c25d00; background:rgba(255,122,0,.08); text-transform:uppercase; letter-spacing:.02em; font-weight:800; } /* ========================= 7) Page Header / Sections ========================= */ /* .page-header removed — legacy npayen.com style, now handled per-page */ html{ scroll-behavior:smooth; } .hea-section{ text-align:center; max-width:720px; margin:2rem auto; } .hea-section h2{ font-size:1.8rem; margin-bottom:.5rem; color:var(--ink); } .hea-value-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin:2rem 0; } /* ========================= 8) Chat Layout ========================= */ .hea-colored-wrapper{ background:linear-gradient(90deg,var(--brand1),var(--brand2)); border-radius:20px; box-shadow:0 6px 24px rgba(0,0,0,.08); padding:2.5rem 1rem; margin:.5rem auto 2rem; max-width:1200px; color:#fff; } .hea-section-title{ text-align:center; font-size:2rem; color:#fff; margin-bottom:2rem; } .hea-main-wrapper{ display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:2rem; } .hea-info-panel{ padding:2rem; max-width:480px; text-align:center; flex:1; min-width:300px; } .hea-info-panel img{ max-width:100%; height:auto; object-fit:contain; display:block; margin:0 auto 1rem; } .hea-avatar-hea-page{ width:80px; height:80px; border-radius:50%; object-fit:cover; display:block; margin-bottom:1rem; } .hea-summary{ font-size:1rem; line-height:1.6; color:var(--muted); } .hea-subtitle{ font-size:1rem; color:var(--muted); } /* Chat panels */ .chat-section, .chat-section-bis{ padding:1.5rem; max-width:600px; flex:1; min-width:300px; display:flex; flex-direction:column; } .chat-section-bis{ padding:0; } .chat-popup{ max-width:600px; width:100%; padding:1rem; } .chatbox{ border:1px solid var(--line); border-radius:8px; padding:1rem; height:400px; overflow-y:auto; background: var(--surface-2); margin-bottom:1rem; text-align:left; } #chatbox p{ margin:.25rem 0; line-height:1.5; white-space:pre-wrap; } .user-message,.bot-message{ margin:.3rem 0; padding:.4rem .8rem; border-radius:8px; max-width:90%; white-space:pre-wrap; } .user-message{ background: var(--user-bubble); align-self:flex-end; } .bot-message{ background: var(--agent-bubble); align-self:flex-start; } .chat-input-row{ display:flex; align-items:center; gap:.5rem; } #user-input{ width:70%; padding:.6rem; font-size:1rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease; } #user-input:focus{ border-color: color-mix(in oklab, var(--brand1) 50%, var(--line)); outline:none; box-shadow:0 0 0 3px var(--ring); } #send-button{ padding:.6rem 1.2rem; font-size:1rem; background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; border:none; border-radius:8px; cursor:pointer; transition:opacity .2s ease; } #send-button:hover{ opacity:.95; } /* Mobile stacking */ @media (max-width:768px){ .hea-main-wrapper{ flex-direction:column; align-items:center; } .hea-info-panel, .chat-section{ max-width:100%; width:100%; } } /* ========================= 9) Integration Guide / Misc ========================= */ .integration-demo{ padding:2rem; max-width:1000px; margin:0 auto; } .mock-site-box{ border:2px dashed #ddd; /* fallback */ border:2px dashed color-mix(in oklab, var(--line) 80%, var(--ink)); padding:2rem; text-align:center; font-size:1.5rem; color:var(--muted); margin-bottom:2rem; background:var(--surface-2); border-radius:12px; } .integration-guide{ background: color-mix(in oklab, var(--brand-color-secondary) 20%, var(--surface)); border-left:4px solid var(--brand-color-secondary); padding:1rem; margin-bottom:2rem; border-radius:8px; } .integration-guide h3{ margin-top:0; color:var(--brand-color-primary); } .integration-guide code{ display:block; background:var(--surface); padding:.75rem 1rem; margin:.5rem 0 1rem; font-size:.85rem; color:var(--ink); border:1px solid var(--line); border-radius:6px; white-space:pre-line; } .integration-demo iframe{ border:1px solid var(--line); border-radius:8px; width:100%; height:400px; margin-top:1rem; } /* Login */ .button-login{ width:100%; padding:.75rem; margin-top:1rem; background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; border:none; border-radius:8px; font-weight:700; font-size:1rem; cursor:pointer; } .button-login:hover{ opacity:.95; } .error{ color:#ff5a5a; font-size:.9rem; margin-top:1rem; } /* Loading widget */ chat-loading{ display:flex; flex-direction:column; align-items:center; padding:2rem; color:var(--brand1); font-size:1rem; animation:fadeIn .3s ease-in; } .spinner{ width:40px; height:40px; border:4px solid #e5e5e5; /* fallback */ border:4px solid color-mix(in oklab, var(--line) 70%, var(--ink)); border-top:4px solid var(--brand1); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:1rem; } @keyframes spin{ 0%{ transform:rotate(0) } 100%{ transform:rotate(360deg) } } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } /* Widget chat */ #chat-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; margin-right:.6rem; flex-shrink:0; background:var(--surface); box-shadow:0 0 4px rgba(0,0,0,.1); } .hea-chat-title{ display:flex; align-items:center; font-weight:700; font-size:1rem; color:#fff; } /* ========================= 10) Tables / Compare ========================= */ .hea-compare-table{ margin-top:2rem; overflow-x:auto; } .hea-compare-table table{ width:100%; border-collapse:collapse; font-size:.95rem; border-radius:8px; overflow:hidden; background:var(--surface); color:var(--ink); box-shadow:0 0 6px rgba(0,0,0,.05); } .hea-compare-table th, .hea-compare-table td{ border:1px solid var(--line); padding:14px 18px; text-align:left; } .hea-compare-table th{ background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; font-size:1rem; text-shadow:0 1px 2px rgba(0,0,0,.2); } .hea-compare-table tbody tr:nth-child(even){ background:var(--surface-2); } /* Professional capability matrix variant (brand-aligned). */ .hea-compare-table--pro{ margin-top:2rem; overflow-x:auto; border:1px solid var(--border); border-radius:18px; padding:12px; background:var(--surface); box-shadow:var(--shadow-lg); } .hea-compare-table--pro table{ min-width:780px; width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); } .hea-compare-table--pro caption{ caption-side:top; text-align:left; font-weight:700; color:var(--ink); padding:0 0 .75rem .15rem; } .hea-compare-table--pro thead th{ color:#fff; font-weight:700; letter-spacing:.02em; text-shadow:none; border-right:1px solid color-mix(in oklab, var(--surface) 24%, var(--brand2) 76%); border-bottom:1px solid color-mix(in oklab, var(--border) 52%, var(--brand1) 48%); background:linear-gradient(90deg, var(--brand1), var(--brand2)); } .hea-compare-table--pro thead th:last-child{ border-right:none; } .hea-compare-table--pro thead th:nth-child(2){ background: linear-gradient( 90deg, color-mix(in oklab, var(--brand1) 90%, var(--brand2) 10%), color-mix(in oklab, var(--brand2) 88%, var(--brand1) 12%) ); } .hea-compare-table--pro th, .hea-compare-table--pro td{ border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 16px; text-align:left; vertical-align:middle; } .hea-compare-table--pro td:last-child, .hea-compare-table--pro th:last-child{ border-right:none; } .hea-compare-table--pro tbody tr:last-child td{ border-bottom:none; } .hea-compare-table--pro tbody td:first-child{ font-weight:650; color:var(--ink); background:color-mix(in oklab, var(--surface-2) 88%, var(--surface) 12%); } .hea-compare-table--pro tbody tr:nth-child(even) td{ background:color-mix(in oklab, var(--surface) 96%, var(--surface-2) 4%); } .hea-compare-table--pro tbody td:nth-child(2){ background:color-mix(in oklab, var(--surface) 88%, var(--brand1) 12%); box-shadow:inset 2px 0 0 color-mix(in oklab, var(--brand1) 70%, var(--surface) 30%); font-weight:600; } .hea-compare-table--pro tbody tr:nth-child(even) td:nth-child(2){ background:color-mix(in oklab, var(--surface) 84%, var(--brand2) 16%); } .hea-compare-table--pro tbody tr.section-row td{ font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in oklab, var(--ink) 75%, var(--brand1) 25%); background:color-mix(in oklab, var(--surface-2) 72%, var(--brand1) 28%) !important; box-shadow:none !important; } .hea-compare-table--pro tbody tr:hover td{ background:color-mix(in oklab, var(--surface) 88%, var(--surface-2) 12%); } .hea-compare-table--pro tbody tr:hover td:nth-child(2){ background:color-mix(in oklab, var(--surface) 82%, var(--brand2) 18%); } .hea-cmp-sprite{ position:absolute; width:0; height:0; overflow:hidden; } .hea-compare-table--pro .ico{ display:inline-flex; align-items:center; justify-content:center; width:1.05em; height:1.05em; margin-right:.35em; vertical-align:-0.12em; color:color-mix(in oklab, var(--ink) 62%, var(--muted) 38%); opacity:.9; filter:none; } .hea-compare-table--pro .ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .hea-compare-table--pro .cmp-yes{ display:inline-flex; align-items:center; justify-content:center; width:0.95em; height:0.95em; min-width:0.95em; margin-right:.35em; vertical-align:-0.1em; border-radius:999px; font-weight:800; color:color-mix(in oklab, var(--brand1) 72%, var(--ink) 28%); } .hea-compare-table--pro .cmp-yes svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } @media (max-width:900px){ .hea-compare-table--pro{ border-radius:14px; padding:10px; } .hea-compare-table--pro th, .hea-compare-table--pro td{ padding:12px 12px; font-size:.92rem; } } /* ========================= 11) Responsive ========================= */ @media (max-width:768px){ .hea-list{ flex-direction:column; align-items:center; } .hea-card{ width:90%; } } /* ========================= 12) View Toggle Icons ========================= */ .view-toggle-icons{ position:absolute; top:1.5rem; right:1.5rem; display:flex; gap:.5rem; z-index:100; } .hidden{ display:none !important; } .toggle-icon{ width:28px; height:28px; cursor:pointer; opacity:.75; transform:scale(1.05); transition:opacity .2s ease; } .toggle-icon:hover{ opacity:1; transform:scale(1.05); } @media (max-width:768px){ .toggle-icon{ width:22px; height:22px; } .view-toggle-icons{ top:.5rem; right:.5rem; gap:.3rem; } } /* ========================= 13) Catalog search bar (theme-aware) ========================= */ #heaSearchWrap{ background: transparent; } #heaSearch{ background: var(--surface); border: 1px solid var(--line); color: var(--ink); height: 44px; border-radius: 12px; } /* --- Catalog card name centering fix --- */ .hea-catalog-card { text-align: center; } .hea-catalog-card h3 { margin: 0.6em 0 0.4em; font-weight: 700; text-align: center; width: 100%; } .hea-catalog-card img.hea-card-avatar { display: block; margin: 0 auto 0.5em; } .hea-catalog-card p { text-align: center; } /* ========================= Footer (sober + elegant) ========================= */ .hea-footer{ margin-top: auto; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); } .hea-footer{ position: relative; } .hea-footer::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background: linear-gradient(90deg, var(--brand1), var(--brand2)); opacity: .35; pointer-events:none; } .hea-footer-legal{ max-width: 1100px; margin: 0 auto; padding: 14px 18px 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); } .hea-footer-legal a{ color: var(--muted); text-decoration: none; transition: color .2s ease; } .hea-footer-legal a:hover{ color: var(--ink); } .hea-footer-inner{ max-width: 1100px; margin: 0 auto; padding: 10px 18px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.82rem; } .hea-footer-left, .hea-footer-right{ display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hea-footer a{ color: var(--muted); text-decoration: none; text-underline-offset: 2px; transition: color .2s ease; } .hea-footer a:hover{ color: var(--ink); text-decoration: underline; } .hea-footer-dot{ opacity: 0.45; } .hea-footer-right{ justify-content: flex-end; } .hea-footer-right a{ white-space: nowrap; } .hea-footer-social{ display: inline-flex; align-items: center; gap: 6px; } .hea-footer-social-link{ width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: none; background: transparent; color: var(--muted); transition: color .2s ease; } .hea-footer-social-link:hover{ text-decoration: none; color: var(--ink); } .hea-footer-social-link:focus-visible{ outline: 2px solid var(--ring); outline-offset: 2px; } .hea-footer-social-icon{ width: 14px; height: 14px; display: block; fill: currentColor; } /* Mobile: stack neatly */ @media (max-width: 720px){ .hea-footer-inner{ flex-direction: column; align-items: center; text-align: center; } .hea-footer-left, .hea-footer-right{ justify-content: center; } } /* ── Footer live status indicator ── */ .hea-footer-status{ display: inline-flex; align-items: center; gap: 5px; } .hea-footer-status-dot{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; transition: background .4s ease, box-shadow .4s ease; } .hea-footer-status-dot[data-status="operational"]{ background: var(--ok); box-shadow: 0 0 0 0 rgba(22,163,74,.4); animation: hea-footer-pulse 2.5s infinite; } .hea-footer-status-dot[data-status="degraded"]{ background: var(--warn); } .hea-footer-status-dot[data-status="outage"]{ background: var(--fail); } @keyframes hea-footer-pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(22,163,74,.35); } 50%{ box-shadow: 0 0 0 4px rgba(22,163,74,0); } } /* ── Extended Footer Navigation ── */ .hea-footer-nav{ padding: 48px 24px 32px; border-bottom: 1px solid var(--line); } .hea-footer-nav-inner{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; } .hea-footer-nav-heading{ font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand1); margin: 0 0 14px; } .hea-footer-nav-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .hea-footer-nav-col li a{ font-size: 0.88rem; color: var(--muted); text-decoration: none; transition: color .2s ease; } .hea-footer-nav-col li a:hover{ color: var(--ink); } @media (max-width: 720px){ .hea-footer-nav-inner{ grid-template-columns: repeat(2, 1fr); gap: 28px 24px; } .hea-footer-nav{ padding: 32px 20px 24px; } } @media (max-width: 400px){ .hea-footer-nav-inner{ grid-template-columns: 1fr; } } .foundry-hero { /* default: hidden, only shown via JS when a job is active */ display: none; margin: 0 0 1.25rem; padding: .85rem 1rem; border-radius: 18px; border: 1px solid #262626; background: radial-gradient(circle at top left, #111827 0%, #020617 55%); align-items: center; gap: 1rem; overflow: hidden; position: relative; color: #f9fafb; } .foundry-hero--active { display: flex; } .foundry-hero-main { position: relative; z-index: 1; max-width: 70%; } .foundry-hero-label { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; border: 1px solid rgba(248, 250, 252, 0.1); background: rgba(0,0,0,0.35); color: #e5e7eb; } .foundry-hero-title { margin-top: .4rem; font-size: 1.1rem; font-weight: 700; color: #f9fafb; } .foundry-hero-sub { margin-top: .2rem; font-size: .85rem; color: #e5e7eb; } .foundry-hero-spinner { margin-left: auto; width: 80px; height: 80px; flex: 0 0 80px; opacity: .85; } .foundry-hero-spinner img { width: 100%; height: 100%; object-fit: contain; animation: heaFoundrySwirl 1.4s linear infinite; } /* Tiny meta spinner, off by default */ .meta-spinner { display: none; width: 18px; height: 18px; } .meta-spinner--active { display: inline-flex; align-items: center; justify-content: center; } .meta-spinner img { width: 100%; height: 100%; object-fit: contain; animation: heaFoundrySpinSmall 1.1s linear infinite; opacity: .9; } @keyframes heaFoundrySwirl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes heaFoundrySpinSmall { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* HEA Foundry hero link (base = dark mode) */ .foundry-hero-link { margin-left: auto; font-size: 0.88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: #ff5f6d; /* brand pink */ cursor: pointer; white-space: nowrap; } .foundry-hero-link:hover { color: #ffc371; /* orange on hover */ } /* Disabled state if we don't have IDs yet */ .foundry-hero-link--disabled { opacity: 0.5; cursor: default; pointer-events: none; } /* Light mode: pink → orange → white gradient, white label pill, black label text, white main text, pink link */ @media (prefers-color-scheme: light) { #heaFoundryHero.foundry-hero--active { background: linear-gradient( 90deg, #ff5f6d 0%, #ffc371 45%, #fff8f3 100% ); border-color: rgba(15, 23, 42, 0.08); color: #ffffff; } #heaFoundryHero .foundry-hero-title { color: #ffffff; } #heaFoundryHero .foundry-hero-sub { color: rgba(255, 255, 255, 0.85); } #heaFoundryHero .foundry-hero-label { background: #ffffff; border-color: rgba(15, 23, 42, 0.08); color: #111827; /* black-ish text on pill */ } #heaFoundryHero .foundry-hero-link { color: #ff5f6d; /* brand pink */ } #heaFoundryHero .foundry-hero-link:hover { color: #d9485c; } }