/* --- /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; } /* 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 / Footer / Banners ========================= */ .hea-header{ border-top:4px solid var(--brand-color-primary); } footer.hea-footer{ padding:2rem 1rem; text-align:center; background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; border-radius:20px; font-size:1rem; box-shadow:0 6px 16px rgba(0,0,0,.1); text-shadow:0 1px 2px rgba(0,0,0,.2); } footer.hea-footer a{ color:inherit; text-decoration:underline; font-weight:500; } footer.hea-footer a:hover{ opacity:.85; } .hea_intro_banner{ background:linear-gradient(120deg,var(--brand1),var(--brand2)); color:#fff; text-align:center; padding:60px 20px; margin-bottom:40px; border-radius:0 0 16px 16px; } .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:600px){ .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; } .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); } .hea-container{ background: var(--surface); max-width:1000px; width:100%; margin:0 auto; padding:10px; flex:1; display:flex; flex-direction:column; } 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(-5px); } .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; /* override the default left */ } .hea-value-cards .hea-card h3 { display: flex; /* stack emoji above text cleanly */ flex-direction: column; align-items: center; gap: .35rem; margin: 0 0 .5rem; line-height: 1.25; } /* (Optional) make the emoji feel like an icon */ .hea-value-cards .hea-card h3::first-line { font-size: 1.6rem; } /* Tighten paragraph width for nicer rhythm */ .hea-value-cards .hea-card p { max-width: 26ch; margin: 0 auto; } .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); } .cta{ text-align:center; margin:40px 0 60px; } .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:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; padding:2rem 1rem; } .hea-catalog-card{ padding:1rem; width:220px; min-height:330px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; transition:transform .3s ease; } .hea-catalog-card:hover{ transform:translateY(-5px); } .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; } /* --- 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 (with color-mix fallback) */ .cta-card{ border:2px dashed #ddd; /* fallback */ border:2px dashed color-mix(in oklab, var(--line) 80%, var(--ink)); text-align:center; padding:1rem; width:300px; min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; } .cta-button{ 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; } /* 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; 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; } .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{ text-align:center; padding:60px 20px; color:#fff; margin-bottom:40px; background:linear-gradient(120deg, #4b6cb7, #182848); } .page-header h1{ font-size:2.5rem; margin-bottom:10px; } .page-header p{ font-size:1.2rem; max-width:800px; margin:0 auto; } 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); } /* ========================= 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; } /* Canonical footer style – centered on all layouts */ footer.hea-footer, .hea-footer { margin-top: auto; padding: 12px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); /* Hard centering */ display: flex; justify-content: center; align-items: center; text-align: center; } /* Remove default

margin so it doesn't shift the text */ .hea-footer p { margin: 0; }