/* ============================================================ HUMENTA — Human Intelligence. AI Powered. Design System & Styles ============================================================ */ /* --- Fonts --- Self-hosted (see /fonts/fonts.css, loaded + preloaded from each page ). No render-blocking third-party request. */ /* --- Design Tokens --- */ :root { /* Backgrounds — Kinetic */ --bg-deep: #050505; --bg-surface: rgba(255, 255, 255, 0.035); --bg-surface-hover: rgba(255, 255, 255, 0.07); --bg-glass: rgba(5, 5, 5, 0.72); /* Accents — Kinetic (hot orange → pink → violet) */ --accent-human: #ff6a00; --accent-human-light: #ff8c33; --accent-ai: #7c3aed; --accent-ai-light: #a78bfa; --accent-bridge: linear-gradient(100deg, #ff6a00 0%, #ff2d78 48%, #7c3aed 100%); --accent-bridge-hover: linear-gradient(100deg, #ff8c33 0%, #ff5c96 48%, #a78bfa 100%); /* CTA surfaces need dark text at >= 4.5:1 on EVERY stop; the #7c3aed end of --accent-bridge only reaches ~3.4:1, so buttons use these lighter stops (worst stop #ff5c96 ~= 6.8:1 against #0a0a0a). */ --accent-bridge-cta: linear-gradient(100deg, #ff8c33 0%, #ff5c96 48%, #a78bfa 100%); --kinetic-glow: rgba(255, 45, 120, 0.35); /* Text */ --text-primary: #f5f0eb; --text-secondary: rgba(245, 240, 235, 0.7); /* 0.5 keeps "muted" tone while clearing WCAG AA (4.5:1) for body text on --bg-deep */ --text-muted: rgba(245, 240, 235, 0.5); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.1); --border-accent: rgba(255, 106, 0, 0.28); /* Spacing */ --section-gap: clamp(80px, 10vw, 140px); --container-max: 1200px; --container-padding: clamp(20px, 5vw, 40px); /* Radius — Kinetic (sharp) */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 4px; --radius-full: 4px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 200ms; --duration-normal: 400ms; --duration-slow: 800ms; } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-deep); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; } /* --- Typography --- */ .serif { font-family: 'Instrument Serif', Georgia, serif; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: clamp(2.5rem, 6vw, 5rem); } h2 { font-size: clamp(2rem, 4vw, 3.5rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); } h4 { font-size: clamp(1rem, 1.5vw, 1.25rem); } .text-gradient { background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Fallbacks so gradient-clipped text never vanishes: - browsers without background-clip:text - text selection (transparent fill = invisible highlight) - print (gradients drop out) */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .text-gradient, .nav__logo-h { -webkit-text-fill-color: currentColor; color: var(--accent-human-light); background: none; } } .text-gradient::selection, .nav__logo-h::selection { -webkit-text-fill-color: var(--text-primary); color: var(--text-primary); } .text-gradient::-moz-selection, .nav__logo-h::-moz-selection { -webkit-text-fill-color: var(--text-primary); color: var(--text-primary); } @media print { .text-gradient, .nav__logo-h { -webkit-text-fill-color: currentColor !important; color: #be123c !important; background: none !important; } } .text-muted { color: var(--text-secondary); } /* --- Layout --- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .section { padding: var(--section-gap) 0; position: relative; } .section-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-human); margin-bottom: 1rem; } .section-title { margin-bottom: 1.5rem; } .section-subtitle { color: var(--text-secondary); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 640px; line-height: 1.7; } /* ============================================================ §1 — NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 var(--container-padding); transition: background var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), padding var(--duration-normal) var(--ease-out); } .nav--scrolled { background: var(--bg-glass); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 1px 0 var(--border-subtle), 0 8px 32px rgba(0, 0, 0, 0.3); } .nav__inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; transition: height var(--duration-normal) var(--ease-out); } .nav--scrolled .nav__inner { height: 60px; } .nav__logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 0.15em; } .nav__logo-h { background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav__link { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-out); position: relative; } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent-bridge); transition: width var(--duration-normal) var(--ease-out); } .nav__link:hover { color: var(--text-primary); } .nav__link:hover::after { width: 100%; } .nav__cta { font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.5rem; border-radius: var(--radius-full); background: var(--accent-bridge); color: var(--bg-deep); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .nav__cta:hover { opacity: 0.9; transform: translateY(-1px); } /* Mobile nav toggle */ .nav__toggle { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; } .nav__toggle span { width: 100%; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-fast); } .nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.active span:nth-child(2) { opacity: 0; } .nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ §2 — HERO ============================================================ */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; padding: 120px var(--container-padding) 60px; overflow: hidden; } /* Animated gradient mesh background */ .hero__mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__mesh::before, .hero__mesh::after { content: ''; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.4; animation: mesh-float 12s ease-in-out infinite alternate; } .hero__mesh::before { width: 600px; height: 600px; background: var(--accent-human); top: -15%; left: -10%; } .hero__mesh::after { width: 500px; height: 500px; background: var(--accent-ai); bottom: -10%; right: -10%; animation-delay: -6s; animation-direction: alternate-reverse; } .hero__mesh-center { position: absolute; width: 400px; height: 400px; border-radius: 50%; filter: blur(100px); opacity: 0.2; background: var(--accent-ai-light); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: mesh-pulse 8s ease-in-out infinite; } @keyframes mesh-float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 40px) scale(1.15); } } @keyframes mesh-pulse { 0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.2); } } /* Perf: full-viewport 100–120px blurs + continuous animation are GPU-heavy and hurt LCP/INP on mobile. Drop the blur radius and freeze motion below 768px — the ambient glow is preserved, the repaint cost is not. */ @media (max-width: 768px) { .hero__mesh::before, .hero__mesh::after { filter: blur(70px); animation: none; opacity: 0.3; } .hero__mesh-center { display: none; } .page-hero__mesh::before, .page-hero__mesh::after { filter: blur(75px); } } .hero__content { position: relative; z-index: 1; max-width: 800px; } .hero__tagline { font-size: clamp(0.8rem, 1.2vw, 0.95rem); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-human); margin-bottom: 1.5rem; } .hero__title { margin-bottom: 1.5rem; } .hero__title .serif { display: block; font-weight: 400; font-style: italic; font-size: 0.85em; opacity: 0.9; } .hero__description { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--text-secondary); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; } .hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; padding: 0.875rem 2rem; border-radius: var(--radius-full); transition: all var(--duration-normal) var(--ease-out); } .btn--primary { background: var(--accent-bridge); color: var(--bg-deep); } .btn--primary:hover { transform: translateY(-2px); } .btn--ghost { border: 1px solid var(--border-subtle); color: var(--text-primary); background: var(--bg-surface); backdrop-filter: blur(8px); } .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.15); background: var(--bg-surface-hover); transform: translateY(-2px); } /* ============================================================ §2b — LOGO MARQUEE ============================================================ */ .marquee-section { padding: 3rem 0; position: relative; overflow: hidden; } .marquee-label { text-align: center; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2rem; } .marquee { display: flex; gap: 3rem; animation: marquee-scroll 40s linear infinite; width: max-content; } .marquee:hover { animation-play-state: paused; } .marquee__item { font-size: 0.95rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: color var(--duration-fast) var(--ease-out); display: flex; align-items: center; gap: 0.5rem; letter-spacing: 0.02em; } .marquee__item:hover { color: var(--text-secondary); } .marquee__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-human); opacity: 0.4; flex-shrink: 0; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Edge fades */ .marquee-section::before, .marquee-section::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .marquee-section::before { left: 0; background: linear-gradient(to right, var(--bg-deep), transparent); } .marquee-section::after { right: 0; background: linear-gradient(to left, var(--bg-deep), transparent); } /* ============================================================ §3 — WHY HUMENTA (MANIFESTO) ============================================================ */ .manifesto { border-top: 1px solid var(--border-subtle); } .manifesto__content { max-width: 720px; margin: 0 auto; } .manifesto__block { margin-bottom: 2.5rem; } .js .manifesto__block { opacity: 0; transform: translateY(30px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .js .manifesto__block.visible { opacity: 1; transform: translateY(0); } .manifesto__text { font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.8; color: var(--text-secondary); } .manifesto__highlight { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.3; color: var(--text-primary); } .manifesto__anchor { text-align: center; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--border-subtle); } .manifesto__anchor h2 { font-size: clamp(2rem, 4vw, 3rem); } .manifesto__anchor p { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--text-secondary); margin-top: 0.75rem; } /* ============================================================ §4 — SERVICES (BENTO GRID) ============================================================ */ .services { border-top: 1px solid var(--border-subtle); } .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 3rem; } .service-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; transition: all var(--duration-normal) var(--ease-out); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-bridge); opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); } .service-card:hover { background: var(--bg-surface-hover); border-color: rgba(255, 255, 255, 0.1); transform: translateY(-4px); } .service-card:hover::before { opacity: 1; } .service-card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; background: rgba(255, 106, 0, 0.08); border: 1px solid rgba(255, 106, 0, 0.12); } .humenta-icon { width: 24px; height: 24px; object-fit: contain; transition: transform var(--duration-fast) var(--ease-out); } .service-card:hover .humenta-icon { transform: scale(1.1); } .service-card:nth-child(2) .service-card__icon { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.12); } .service-card:nth-child(3) .service-card__icon { background: rgba(255, 140, 51, 0.08); border-color: rgba(255, 140, 51, 0.12); } .service-card:nth-child(4) .service-card__icon { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.12); } .service-card:nth-child(5) .service-card__icon { background: rgba(255, 106, 0, 0.06); border-color: rgba(124, 58, 237, 0.1); } .service-card__title { margin-bottom: 0.75rem; font-size: 1.25rem; } .service-card__text { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; } .service-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .service-card__tag { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); color: var(--text-muted); } /* ============================================================ §5 — HOW WE WORK (PROCESS) ============================================================ */ .process { border-top: 1px solid var(--border-subtle); } .process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; position: relative; } /* Connecting line */ .process__steps::before { content: ''; position: absolute; top: 36px; left: calc(16.66% + 24px); right: calc(16.66% + 24px); height: 2px; background: var(--accent-bridge); opacity: 0.3; } .process__step { text-align: center; position: relative; } .process__number { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; position: relative; z-index: 1; } .process__step:nth-child(1) .process__number { background: rgba(255, 106, 0, 0.15); color: var(--accent-human); border: 1px solid rgba(255, 106, 0, 0.25); } .process__step:nth-child(2) .process__number { background: linear-gradient(135deg, rgba(255, 106, 0, 0.1), rgba(124, 58, 237, 0.1)); color: var(--text-primary); border: 1px solid rgba(255, 45, 120, 0.2); } .process__step:nth-child(3) .process__number { background: rgba(124, 58, 237, 0.15); color: var(--accent-ai-light); border: 1px solid rgba(124, 58, 237, 0.25); } .process__title { margin-bottom: 0.75rem; } .process__text { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; max-width: 320px; margin: 0 auto; } /* ============================================================ §6 — RESULTS ============================================================ */ .results { border-top: 1px solid var(--border-subtle); } .results__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; } .result-card { text-align: center; padding: 2rem 1rem; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-subtle); } .result-card__number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; margin-bottom: 0.5rem; background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .result-card__label { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.4; } .results__logos { margin-top: 4rem; } /* ============================================================ §7 — CTA ============================================================ */ .cta-section { text-align: center; position: relative; overflow: hidden; } .cta-section__bg { position: absolute; inset: 0; background: var(--accent-bridge); opacity: 0.06; border-radius: var(--radius-lg); } .cta-section .container { position: relative; z-index: 1; padding-top: var(--section-gap); padding-bottom: var(--section-gap); border-top: 1px solid var(--border-subtle); } .cta-section__title { max-width: 680px; margin: 0 auto 1rem; } .cta-section__subtitle { color: var(--text-secondary); font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.7; } /* ============================================================ §8 — FOOTER ============================================================ */ .footer { border-top: 1px solid var(--border-subtle); padding: 3rem 0 2rem; } .footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } .footer__logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; } .footer__links { display: flex; gap: 2rem; list-style: none; } .footer__link { font-size: 0.875rem; color: var(--text-muted); transition: color var(--duration-fast); } .footer__link:hover { color: var(--text-primary); } .footer__copy { width: 100%; text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); } /* ============================================================ SCROLL REVEAL ANIMATION ============================================================ */ /* Progressive enhancement: only hide reveal elements when JS is present. Without JS (or if script.js fails), content stays visible. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .js .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } .reveal-delay-5 { transition-delay: 500ms; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .results__grid { grid-template-columns: repeat(2, 1fr); } .process__steps { grid-template-columns: 1fr; gap: 2.5rem; } .process__steps::before { display: none; } } @media (max-width: 880px) { .nav__links { position: fixed; inset: 0; background: var(--bg-deep); flex-direction: column; justify-content: center; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal); } .nav__links.active { opacity: 1; visibility: visible; } .nav__links .nav__link { font-size: 1.25rem; } .nav__toggle { display: flex; position: relative; z-index: 1001; } } @media (max-width: 768px) { .nav__links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-deep); flex-direction: column; justify-content: center; gap: 2rem; opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal); } .nav__links.active { opacity: 1; visibility: visible; } .nav__links .nav__link { font-size: 1.25rem; } .nav__toggle { display: flex; position: relative; z-index: 1001; } .services__grid { grid-template-columns: 1fr; } .results__grid { grid-template-columns: repeat(2, 1fr); } .hero { min-height: auto; padding-top: 140px; padding-bottom: 40px; } .footer__inner { flex-direction: column; text-align: center; } .footer__links { flex-wrap: wrap; justify-content: center; } } @media (max-width: 480px) { .results__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .result-card { padding: 1.25rem 0.75rem; } .hero__ctas { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; max-width: 300px; } } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .reveal, .js .reveal, .manifesto__block, .js .manifesto__block { opacity: 1; transform: none; } .marquee { animation: none; } } /* Focus visible for keyboard nav */ :focus-visible { outline: 2px solid var(--accent-human); outline-offset: 3px; border-radius: 2px; } /* ============================================================ SHARED COMPONENTS — multi-page architecture (added for /platform, /services, /work, /about, /contact, /insights) ============================================================ */ /* --- Skip link (a11y) --- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 0.75rem 1.25rem; background: var(--accent-human); color: var(--bg-deep); font-weight: 600; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* --- Active nav state --- */ .nav__link[aria-current="page"] { color: var(--text-primary); } .nav__link[aria-current="page"]::after { width: 100%; } /* --- Buttons: size + variants --- */ .btn--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; } .btn--block { width: 100%; justify-content: center; } /* --- Generic utility --- */ .lead { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.7; color: var(--text-secondary); max-width: 720px; } .center { text-align: center; margin-left: auto; margin-right: auto; } .section--divider { border-top: 1px solid var(--border-subtle); } .manifesto__highlight--lg { font-size: clamp(1.75rem, 3.5vw, 2.75rem); } .marquee--reverse { animation-duration: 50s; animation-direction: reverse; } /* --- Spacing scale (replaces ad-hoc inline margins/padding) --- */ .u-mt-sm { margin-top: 1rem; } .u-mt-md { margin-top: 1.25rem; } .u-mt-lg { margin-top: 2rem; } .u-mt-xl { margin-top: 2.5rem; } .u-mt-2xl { margin-top: 4rem; } .u-mb-md { margin-bottom: 1.25rem; } .u-pt-0 { padding-top: 0; } .u-pt-lg { padding-top: 2rem; } .u-border-top-0 { border-top: none; } /* --- Layout / a11y utilities --- */ .u-measure { max-width: 760px; } .u-text-center { text-align: center; } .u-justify-start { justify-content: flex-start; } .u-min-80vh { min-height: 80vh; } .u-offscreen { position: absolute; left: -9999px; } /* --- Small text utilities --- */ .u-prose { color: var(--text-secondary); line-height: 1.8; } .u-fineprint { margin-top: 2rem; color: var(--text-muted); font-size: 0.85rem; } .u-fineprint a { color: var(--accent-human); } .u-price-unit { font-size: 1rem; font-weight: 500; } .u-price-lg { font-size: 1.5rem; } /* Book "feature split" heading (About + Insights) */ .feature-split__title { font-size: clamp(1.5rem, 3.2vw, 2.25rem); margin: 0.75rem 0 1rem; } /* Newsletter field fills the row (was an inline flex:1;min-width on the field) */ .newsletter-form .field { flex: 1; min-width: 220px; } .eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-human); } /* ============================================================ INNER PAGE HERO ============================================================ */ .page-hero { position: relative; padding: clamp(130px, 18vh, 200px) 0 clamp(50px, 7vw, 90px); overflow: hidden; border-bottom: 1px solid var(--border-subtle); } .page-hero__mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .page-hero__mesh::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(130px); opacity: 0.22; background: var(--accent-ai); top: -30%; right: -8%; } .page-hero__mesh::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(120px); opacity: 0.18; background: var(--accent-human); bottom: -40%; left: -6%; } .page-hero__inner { position: relative; z-index: 1; max-width: 820px; } .page-hero__title { margin: 0.75rem 0 1.25rem; } .page-hero__title { font-size: clamp(2.25rem, 5vw, 4rem); } /* --- Breadcrumbs --- */ .breadcrumbs { font-size: 0.8rem; color: var(--text-muted); } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .breadcrumbs a { color: var(--text-muted); transition: color var(--duration-fast); } .breadcrumbs a:hover { color: var(--text-secondary); } .breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; opacity: 0.5; } .breadcrumbs [aria-current="page"] { color: var(--accent-human); } /* ============================================================ HUMENTA OS — PLATFORM ECOSYSTEM ============================================================ */ .os-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 3rem; } .os-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.75rem; transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); overflow: hidden; } .os-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.12); background: var(--bg-surface-hover); } .os-card__layer { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ai-light); padding: 0.2rem 0.6rem; border-radius: var(--radius-full); background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.18); margin-bottom: 1rem; } .os-card__name { font-size: 1.2rem; margin-bottom: 0.5rem; } .os-card__name .text-gradient { font-weight: 800; } .os-card__text { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; } .os-card__meta { margin-top: 1rem; font-size: 0.78rem; color: var(--text-muted); } /* Layered OS diagram band */ .os-stack { margin-top: 3.5rem; display: grid; gap: 1rem; } .os-stack__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(255, 106, 0, 0.04), rgba(124,58,237,0.04)); } .os-stack__label { min-width: 160px; font-weight: 700; color: var(--text-primary); } .os-stack__items { color: var(--text-secondary); font-size: 0.92rem; } /* ============================================================ SERVICE FRAMEWORKS (named) ============================================================ */ .framework { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--border-subtle); } .framework__name { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; } .framework__name h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); } .framework__index { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 1.5rem; color: var(--accent-human); opacity: 0.7; } .framework__tagline { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; } .framework__list { list-style: none; display: grid; gap: 0.85rem; } .framework__list li { position: relative; padding-left: 1.75rem; color: var(--text-secondary); line-height: 1.6; } .framework__list li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-bridge); } .framework__proof { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.75rem; } .framework__proof h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-human); margin-bottom: 1rem; } .framework__proof-stat { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.92rem; } .framework__proof-stat:last-child { border-bottom: none; } .framework__proof-stat span:last-child { color: var(--text-primary); font-weight: 700; } .framework__brands { margin-top: 1.25rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; } /* ============================================================ WORK / CASE STUDY INDEX CARDS ============================================================ */ .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .work-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } .work-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.12); background: var(--bg-surface-hover); } .work-card__sector { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.75rem; } .work-card__client { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .work-card__headline { color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem; flex: 1; } .work-card__metrics { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .work-card__metric strong { display: block; font-size: 1.4rem; font-weight: 800; background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .work-card__metric span { font-size: 0.75rem; color: var(--text-muted); } .work-card__link { font-weight: 600; font-size: 0.9rem; color: var(--accent-human); display: inline-flex; gap: 0.4rem; transition: gap var(--duration-fast); } .work-card:hover .work-card__link { gap: 0.7rem; } /* ============================================================ CASE STUDY DETAIL ============================================================ */ .cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-subtle); } .cs-meta__item span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.35rem; } .cs-meta__item strong { font-size: 1rem; color: var(--text-primary); font-weight: 600; } .cs-body { max-width: 760px; } .cs-block { padding: clamp(2.5rem,5vw,4rem) 0; border-top: 1px solid var(--border-subtle); } .cs-block h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.25rem; } .cs-block p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.25rem; } .cs-block p:last-child { margin-bottom: 0; } .cs-block ul { list-style: none; display: grid; gap: 0.85rem; margin-top: 1rem; } .cs-block ul li { position: relative; padding-left: 1.75rem; color: var(--text-secondary); line-height: 1.6; } .cs-block ul li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-bridge); } .cs-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .cs-result { text-align: center; padding: 1.75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .cs-result strong { display: block; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1; margin-bottom: 0.5rem; background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cs-result span { font-size: 0.85rem; color: var(--text-secondary); } .quote { border-left: 3px solid var(--accent-human); padding: 0.5rem 0 0.5rem 1.75rem; margin: 2rem 0; } .quote p { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; color: var(--text-primary); font-weight: 500; } .quote footer { margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted); } /* ============================================================ FOUNDERS / TEAM ============================================================ */ .founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.5rem; margin-top: 3rem; } .founder-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; } .founder-card__avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: var(--bg-deep); background: var(--accent-bridge); margin-bottom: 1.25rem; } .founder-card__photo { width: 112px; height: 112px; border-radius: var(--radius-md); object-fit: cover; margin-bottom: 1.25rem; border: 1px solid var(--border-subtle); } .founder-card__name { font-size: 1.3rem; margin-bottom: 0.25rem; } .founder-card__role { font-size: 0.85rem; color: var(--accent-human); font-weight: 600; margin-bottom: 1rem; } .founder-card__bio { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.5rem; margin-top: 3rem; } .testimonial { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; } .testimonial__quote { font-size: 1.02rem; line-height: 1.7; color: var(--text-primary); flex: 1; } .testimonial__quote::before { content: '\201C'; font-family: 'Instrument Serif', Georgia, serif; font-size: 2.5rem; color: var(--accent-human); line-height: 0; display: block; margin-bottom: 0.5rem; } .testimonial__author { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .testimonial__badge { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 106, 0, 0.12); border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: var(--accent-human); flex-shrink: 0; } .testimonial__name { font-size: 0.9rem; font-weight: 600; } .testimonial__title { font-size: 0.78rem; color: var(--text-muted); } /* ============================================================ TRUST / SECURITY BADGES ============================================================ */ .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.25rem; margin-top: 3rem; } .trust-item { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.5rem; } .trust-item__icon { font-size: 1.4rem; margin-bottom: 0.75rem; } .trust-item h3 { font-size: 1.05rem; margin-bottom: 0.5rem; } .trust-item p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; } /* ============================================================ PRICING / ENGAGEMENT TIERS ============================================================ */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.5rem; margin-top: 3rem; } .tier { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; } .tier--featured { border-color: var(--border-accent); background: linear-gradient(160deg, rgba(255, 106, 0, 0.06), rgba(124,58,237,0.05)); } .tier__flag { position: absolute; top: -0.75rem; left: 2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); background: var(--accent-bridge); color: var(--bg-deep); } .tier__name { font-size: 1.3rem; margin-bottom: 0.5rem; } .tier__price { font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.5rem; } .tier__price strong { font-size: 1.9rem; font-weight: 800; color: var(--text-primary); display: block; } .tier__desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; } .tier__list { list-style: none; display: grid; gap: 0.65rem; margin-bottom: 1.75rem; flex: 1; } .tier__list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; } .tier__list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-human); font-weight: 700; } /* ============================================================ INSIGHTS / ARTICLE CARDS ============================================================ */ .article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.5rem; margin-top: 3rem; } .article-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.75rem; transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); } .article-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.12); } .article-card__tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ai-light); margin-bottom: 0.75rem; } .article-card__title { font-size: 1.2rem; margin-bottom: 0.6rem; line-height: 1.3; } .article-card__excerpt { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.65; flex: 1; } .article-card__meta { margin-top: 1.25rem; font-size: 0.78rem; color: var(--text-muted); } /* Featured insight (book) */ .feature-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 3rem); margin-top: 3rem; } .feature-split__visual { aspect-ratio: 3 / 4; border-radius: var(--radius-md); background: linear-gradient(160deg, #1a1430, #2a1c14); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: 0.75rem; } .feature-split__visual .badge-book { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--text-primary); line-height: 1.2; } .feature-split__visual .badge-pub { font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); } .feature-split__visual .book-cover { max-width: min(78%, 280px); height: auto; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55)); } /* ============================================================ NEWSLETTER + CONTACT FORM ============================================================ */ .form { display: grid; gap: 1.25rem; max-width: 640px; margin-top: 2.5rem; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .field { display: grid; gap: 0.5rem; } .field label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); } .field label .req { color: var(--accent-human); } .field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.85rem 1rem; transition: border-color var(--duration-fast), background var(--duration-fast); } .field textarea { resize: vertical; min-height: 130px; } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--border-accent); background: var(--bg-surface-hover); } .field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .field--error input, .field--error select, .field--error textarea { border-color: #ef4444; } .field__error { font-size: 0.78rem; color: #f87171; display: none; } .field--error .field__error { display: block; } .form__note { font-size: 0.8rem; color: var(--text-muted); } .form__status { padding: 1rem 1.25rem; border-radius: var(--radius-md); font-size: 0.9rem; display: none; } .form__status--success { display: block; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: #86efac; } .form__status--error { display: block; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; } .form__status a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .newsletter-form { display: flex; gap: 0.75rem; max-width: 480px; margin-top: 1.5rem; flex-wrap: wrap; } .newsletter-form input { flex: 1; min-width: 200px; } /* Contact split layout */ .contact-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .contact-aside { display: grid; gap: 1.5rem; } .contact-aside__card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.75rem; } .contact-aside__card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; } .contact-aside__card p, .contact-aside__card a { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } .contact-aside__card a:hover { color: var(--accent-human); } /* ============================================================ CTA BAND (reusable) ============================================================ */ .cta-band { position: relative; text-align: center; overflow: hidden; border-top: 1px solid var(--border-subtle); } .cta-band__bg { position: absolute; inset: 0; background: var(--accent-bridge); opacity: 0.06; } .cta-band .container { position: relative; z-index: 1; padding-top: var(--section-gap); padding-bottom: var(--section-gap); } .cta-band h2 { max-width: 700px; margin: 0 auto 1rem; } .cta-band p { max-width: 540px; margin: 0 auto 2.5rem; color: var(--text-secondary); font-size: clamp(1rem,1.5vw,1.25rem); line-height: 1.7; } /* ============================================================ FOOTER (expanded multi-column) ============================================================ */ .footer--lg { padding-top: clamp(3rem, 6vw, 5rem); } .footer__cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; margin-bottom: 3rem; } /* Pages with a Legal column carry five columns; the base grid has four tracks, which wraps the fifth onto its own row on desktop. */ .footer__cols:has(> .footer__col:nth-child(5)) { grid-template-columns: 1.5fr repeat(4, 1fr); } .footer__brand-tag { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-top: 1rem; max-width: 280px; } .footer__col h3, .footer__col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 1.25rem; } .footer__col ul { list-style: none; display: grid; gap: 0.75rem; } .footer__col a { font-size: 0.9rem; color: var(--text-secondary); transition: color var(--duration-fast); } .footer__col a:hover { color: var(--text-primary); } /* ============================================================ RESPONSIVE — shared components ============================================================ */ @media (max-width: 900px) { .framework { grid-template-columns: 1fr; } .feature-split { grid-template-columns: 1fr; } .feature-split__visual { max-width: 280px; } .contact-split { grid-template-columns: 1fr; } .footer__cols, .footer__cols:has(> .footer__col:nth-child(5)) { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } .footer__cols, .footer__cols:has(> .footer__col:nth-child(5)) { grid-template-columns: 1fr; } .os-stack__label { min-width: 100%; } } /* SVG icons are sized via .humenta-icon (defined above). */ .trust-item__icon { line-height: 0; } /* ============================================================ HUMENTA OS — INTERACTIVE FLOW (homepage #platform-teaser) The 5-layer "compounding loop". Works without JS (all panels visible, stacked); JS upgrades it to an auto-advancing, keyboard-driven ARIA tablist. ============================================================ */ .os-flow { margin-top: 3rem; } .os-flow__hint { font-size: 0.82rem; color: var(--text-muted); text-align: center; margin-bottom: 1.75rem; } /* --- Rail + nodes (the stepper) --- */ .os-flow__rail { position: relative; } .os-flow__track { position: absolute; left: 10%; right: 10%; top: 21px; height: 2px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; } .os-flow__track-fill { display: block; height: 100%; width: calc(var(--os-progress, 0) * 100%); background: var(--accent-bridge); transition: width var(--duration-slow) var(--ease-out); } .os-flow__nodes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; } .os-flow__node { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.5rem 0.25rem; text-align: center; border-radius: var(--radius-md); color: var(--text-muted); transition: color var(--duration-normal) var(--ease-out); } .os-flow__node:hover { color: var(--text-secondary); } .os-flow__dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-deep); border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 4px var(--bg-deep); transition: border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .os-flow__node-layer { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .os-flow__node-name { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); } /* Active node */ .os-flow__node[aria-selected="true"] { color: var(--text-primary); } .os-flow__node[aria-selected="true"] .os-flow__dot { background: var(--accent-bridge); border-color: transparent; transform: scale(1.15); } .os-flow__node[aria-selected="true"] .os-flow__node-name { color: var(--text-primary); } .os-flow__node[aria-selected="true"] .os-flow__dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent-ai-light); opacity: 0; animation: os-pulse 2.4s var(--ease-out) infinite; } /* --- Panels --- */ .os-flow__panels { margin-top: 2rem; } .os-flow__panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); } /* JS present: show only the active panel */ .js .os-flow__panel:not(.is-active) { display: none; } .js .os-flow__panel.is-active { animation: os-panel-in var(--duration-normal) var(--ease-out); } /* No JS: stack all panels */ html:not(.js) .os-flow__panel + .os-flow__panel { margin-top: 1rem; } .os-flow__panel-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; } .os-flow__panel-name { font-size: clamp(1.3rem, 2.4vw, 1.75rem); } .os-flow__panel-name .text-gradient { font-weight: 800; } .os-flow__panel-text { color: var(--text-secondary); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.75; max-width: 640px; } .os-flow__panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); } .os-flow__feeds { font-size: 0.92rem; color: var(--text-secondary); } .os-flow__feeds strong { color: var(--text-primary); font-weight: 700; } .os-flow__feeds-arrow { color: var(--accent-human); font-weight: 700; margin-right: 0.25rem; } .os-flow__stat { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent-ai-light); padding: 0.3rem 0.75rem; border-radius: var(--radius-full); background: rgba(124, 58, 237, 0.1); border: 1px solid rgba(124, 58, 237, 0.18); white-space: nowrap; } @keyframes os-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes os-pulse { 0% { opacity: 0.5; transform: scale(0.8); } 70%, 100% { opacity: 0; transform: scale(1.7); } } @media (max-width: 640px) { .os-flow__node-name { display: none; } .os-flow__node-layer { font-size: 0.6rem; } .os-flow__track { top: 18px; } .os-flow__panel-foot { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .os-flow__node[aria-selected="true"] .os-flow__dot::after { animation: none; } .js .os-flow__panel.is-active { animation: none; } .os-flow__track-fill { transition: none; } } /* ============================================================ HUMENTA SELECT — managed executive and expert service ============================================================ */ .select-hero .page-hero__inner { max-width: 900px; } .select-answer { max-width: 820px; } .select-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; } .select-hero__note { max-width: 700px; margin-top: 1.25rem; color: var(--text-muted); font-size: 0.86rem; line-height: 1.65; } .select-home-callout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.65fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; } .select-home-callout__list { padding: 2rem; background: linear-gradient(145deg, rgba(255, 106, 0, 0.045), rgba(124, 58, 237, 0.055)); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .select-home-callout__list > p { margin-bottom: 1.25rem; color: var(--accent-ai-light); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .select-home-callout__list ul { display: grid; gap: 0.85rem; list-style: none; } .select-home-callout__list li { position: relative; padding-left: 1.4rem; color: var(--text-secondary); font-size: 0.92rem; } .select-home-callout__list li::before { content: ''; position: absolute; top: 0.52em; left: 0; width: 7px; height: 7px; border-radius: 2px; background: var(--accent-bridge); } .select-proof-strip { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .select-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; } .select-proof-grid > div { min-width: 0; padding: 1.5rem; border-right: 1px solid var(--border-subtle); } .select-proof-grid > div:last-child { border-right: 0; } .select-proof-grid strong { display: block; margin-bottom: 0.45rem; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1; background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .select-proof-grid span { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.5; } .select-proof-note { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.78rem; text-align: right; } .select-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; } .select-service-card { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 2rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } .select-service-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent-bridge); opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); } .select-service-card:hover { transform: translateY(-4px); border-color: var(--border-accent); background: var(--bg-surface-hover); } .select-service-card:hover::before { opacity: 1; } .select-service-card__type { margin-bottom: 1.25rem; color: var(--accent-human); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .select-service-card h3 { margin-bottom: 1rem; font-size: clamp(1.25rem, 2.5vw, 1.65rem); } .select-service-card p { color: var(--text-secondary); font-size: 0.94rem; line-height: 1.72; } .select-service-card__link { margin-top: auto; padding-top: 1.75rem; color: var(--text-primary); font-size: 0.86rem; font-weight: 700; } .select-service-card__link span { color: var(--accent-human); } .mandate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3rem; padding: 1px; background: var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .mandate-card { min-height: 205px; padding: 1.75rem; background: var(--bg-deep); } .mandate-card h3 { margin-bottom: 0.75rem; font-size: 1.12rem; } .mandate-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; } .select-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3rem; } .select-process__step { position: relative; padding: 1.75rem; background: linear-gradient(145deg, rgba(255, 106, 0, 0.035), rgba(124, 58, 237, 0.035)); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .select-process__step > span { display: block; margin-bottom: 2rem; color: var(--accent-human); font-family: 'Instrument Serif', Georgia, serif; font-size: 1.4rem; font-style: italic; } .select-process__step h3 { margin-bottom: 0.75rem; font-size: 1.1rem; } .select-process__step p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; } .select-evidence__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } .select-source-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.5rem; } .select-source-links a { color: var(--accent-human-light); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 4px; } .select-source-links a:hover { color: var(--text-primary); } .select-trust-card { padding: 2rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .select-trust-card__label { margin-bottom: 1rem; color: var(--accent-ai-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .select-trust-card h3 { margin-bottom: 1rem; } .select-trust-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; } .select-trust-card a { display: inline-block; margin-top: 1.5rem; color: var(--text-primary); font-size: 0.86rem; font-weight: 700; } .select-trust-card a span { color: var(--accent-human); } .trigger-list { display: grid; margin-top: 3rem; border-top: 1px solid var(--border-subtle); } .trigger-list__item { display: grid; grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--border-subtle); } .trigger-list__item strong { color: var(--text-primary); } .trigger-list__item span { color: var(--text-secondary); line-height: 1.65; } .select-faq-layout { display: grid; grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .select-faq { border-top: 1px solid var(--border-subtle); } .select-faq > div { padding: 1.5rem 0; border-bottom: 1px solid var(--border-subtle); } .select-faq dt { margin-bottom: 0.55rem; color: var(--text-primary); font-size: 1.05rem; font-weight: 700; } .select-faq dd { color: var(--text-secondary); font-size: 0.94rem; line-height: 1.75; } .select-form-header { max-width: 760px; } .form__note a { color: var(--accent-human-light); text-decoration: underline; text-underline-offset: 3px; } /* Shared layout for focused Select cluster pages. */ .select-detail-hero .page-hero__inner { max-width: 900px; } .select-detail-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .select-detail-nav a { padding: 0.55rem 0.8rem; color: var(--text-secondary); font-size: 0.8rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .select-detail-nav a:hover { color: var(--text-primary); border-color: var(--border-accent); } .select-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: start; } .select-detail-body { min-width: 0; max-width: 760px; } .select-detail-body h2 { margin: 3rem 0 1rem; font-size: clamp(1.55rem, 3vw, 2.35rem); text-transform: none; letter-spacing: -0.025em; line-height: 1.15; } .select-detail-body h2:first-child { margin-top: 0; } .select-detail-body h3 { margin: 2rem 0 0.75rem; font-size: 1.2rem; } .select-detail-body p { margin-bottom: 1.25rem; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.82; } .select-detail-body ul { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; list-style: none; } .select-detail-body li { position: relative; padding-left: 1.6rem; color: var(--text-secondary); line-height: 1.7; } .select-detail-body li::before { content: ''; position: absolute; top: 0.58em; left: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-bridge); } .select-detail-body a { color: var(--accent-human-light); text-decoration: underline; text-underline-offset: 3px; } .select-comparison { max-width: 100%; margin: 2rem 0; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .select-comparison table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--bg-surface); } .select-comparison th, .select-comparison td { padding: 1rem; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; font-size: 0.86rem; line-height: 1.6; } .select-comparison thead th { color: var(--text-primary); background: rgba(255, 255, 255, 0.035); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .select-comparison tbody th { color: var(--text-primary); font-weight: 700; } .select-comparison td { color: var(--text-secondary); } .select-comparison tr:last-child th, .select-comparison tr:last-child td { border-bottom: 0; } .select-comparison:focus-visible { outline-offset: 4px; } .select-detail-aside { position: sticky; top: 92px; display: grid; gap: 1rem; } .select-detail-aside__card { padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .select-detail-aside__card h2, .select-detail-aside__card h3 { margin-bottom: 0.75rem; font-size: 1rem; text-transform: none; letter-spacing: -0.01em; } .select-detail-aside__card p, .select-detail-aside__card li { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.65; } .select-detail-aside__card ul { display: grid; gap: 0.55rem; list-style: none; } .select-detail-aside__card .btn { margin-top: 1rem; width: 100%; justify-content: center; } @media (max-width: 980px) { .select-home-callout { grid-template-columns: 1fr; } .select-service-grid, .mandate-grid { grid-template-columns: repeat(2, 1fr); } .select-process { grid-template-columns: repeat(2, 1fr); } .select-proof-grid { grid-template-columns: repeat(2, 1fr); } .select-proof-grid > div:nth-child(2) { border-right: 0; } .select-proof-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-subtle); } .select-detail-layout { grid-template-columns: 1fr; } .select-detail-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .select-service-grid, .mandate-grid, .select-process, .select-evidence__layout, .select-faq-layout { grid-template-columns: 1fr; } .select-service-card { min-height: 0; } .select-proof-note { text-align: left; } .trigger-list__item { grid-template-columns: 1fr; gap: 0.35rem; } .select-detail-aside { grid-template-columns: 1fr; } } @media (max-width: 480px) { .select-proof-grid { grid-template-columns: 1fr; } .select-proof-grid > div { border-right: 0; border-bottom: 1px solid var(--border-subtle); } .select-proof-grid > div:last-child { border-bottom: 0; } .select-hero__actions .btn { width: 100%; justify-content: center; } } /* ============================================================ KINETIC DISPLAY TREATMENT (promoted from design lab → production) Oversized uppercase display, sharp geometry, punchy buttons, and the full-bleed scrolling headline band. ============================================================ */ .btn { border-radius: 3px; } .hero__title, .section-title, .page-hero__title { letter-spacing: -0.04em; line-height: 0.94; font-weight: 800; } .hero__title--kinetic { font-size: clamp(3.2rem, 11vw, 9rem); text-transform: uppercase; line-height: 0.9; } .section-title { font-size: clamp(2rem, 5vw, 4rem); text-transform: uppercase; } .section-label, .hero__tagline { font-weight: 800; letter-spacing: 0.25em; } .btn--primary { background: var(--accent-bridge-cta); color: #0a0a0a; font-weight: 800; box-shadow: 0 0 40px var(--kinetic-glow); } .btn--primary:hover { box-shadow: 0 0 60px var(--kinetic-glow); transform: translateY(-2px); } .nav__cta { background: var(--accent-bridge-cta); color: #0a0a0a; } /* Full-bleed scrolling headline band (homepage hero) */ .kinetic-band { width: 100vw; margin-left: calc(-50vw + 50%); margin-top: 3rem; overflow: hidden; border-block: 1px solid var(--border-subtle); padding: 1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .kinetic-band__track { display: flex; width: max-content; animation: kinetic-scroll 26s linear infinite; } .kinetic-band__track span { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap; padding-right: 0.4em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5); } @keyframes kinetic-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .kinetic-band__track { animation: none; } } /* ============================================================ INSIGHTS — ARTICLE PAGES ============================================================ */ .article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted); } .article-meta .article-card__tag { margin: 0; } .article-body { max-width: 720px; padding: clamp(2.5rem, 5vw, 4rem) 0; } .article-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: none; letter-spacing: -0.02em; margin: 2.5rem 0 1rem; } .article-body h3 { font-size: 1.15rem; margin: 2rem 0 0.75rem; } .article-body p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.25rem; } .article-body ul, .article-body ol { margin: 0 0 1.25rem 0; display: grid; gap: 0.7rem; list-style: none; } .article-body ul li, .article-body ol li { position: relative; padding-left: 1.75rem; color: var(--text-secondary); line-height: 1.7; } .article-body ul li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-bridge); } .article-body ol { counter-reset: art-ol; } .article-body ol li::before { counter-increment: art-ol; content: counter(art-ol) '.'; position: absolute; left: 0; color: var(--accent-human); font-weight: 700; } .article-body a { color: var(--accent-human); text-decoration: underline; text-underline-offset: 3px; } .article-body a:hover { color: var(--accent-human-light); } .article-body strong { color: var(--text-primary); } .article-body blockquote { border-left: 3px solid var(--accent-human); padding: 0.5rem 0 0.5rem 1.5rem; margin: 2rem 0; } .article-body blockquote p { font-size: 1.2rem; color: var(--text-primary); font-weight: 500; margin: 0; } /* Key-stat callout */ .article-stat { display: grid; gap: 0.35rem; margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .article-stat strong { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.1; background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .article-stat span { font-size: 0.9rem; color: var(--text-secondary); } /* FAQ block */ .article-faq { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-subtle); } .article-faq h2 { margin-top: 0; } .article-faq dt { font-weight: 700; color: var(--text-primary); margin: 1.5rem 0 0.4rem; font-size: 1.05rem; } .article-faq dd { color: var(--text-secondary); line-height: 1.75; } /* Author box */ .author-box { display: flex; gap: 1.25rem; align-items: center; margin-top: 3rem; padding: 1.5rem 1.75rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .author-box img { width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; } .author-box__name { font-weight: 700; } .author-box__role { font-size: 0.85rem; color: var(--accent-human); font-weight: 600; margin: 0.1rem 0 0.35rem; } .author-box__bio { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; } .author-box__bio a { color: var(--accent-human); } /* Read-next */ .read-next { border-top: 1px solid var(--border-subtle); padding-top: 2.5rem; margin-top: 1rem; } .read-next h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 1.5rem; } /* ============================================================ PRESS / MEDIA KIT ============================================================ */ .press-block { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--border-subtle); } .press-block > .container > h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: uppercase; margin-bottom: 0.5rem; } .press-lead { color: var(--text-secondary); max-width: 680px; line-height: 1.7; margin-bottom: 2rem; } /* Copy-to-use boilerplate */ .boiler { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; } .boiler h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-human); margin-bottom: 0.75rem; } .boiler p { color: var(--text-secondary); line-height: 1.75; } /* Fast facts */ .facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; } .fact { padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } .fact strong { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1; margin-bottom: 0.35rem; background: var(--accent-bridge); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .fact span { font-size: 0.82rem; color: var(--text-secondary); } /* Logo download tiles */ .brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .brand-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .brand-tile { display: flex; align-items: center; justify-content: center; padding: 2rem; min-height: 130px; background: #0d0d10; } .brand-tile--light { background: #f5f0eb; } .brand-tile img { max-width: 78%; max-height: 64px; } .brand-tile--mark img { max-width: 64px; max-height: 64px; } .brand-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--border-subtle); } .brand-card__foot span { font-size: 0.82rem; color: var(--text-secondary); } .brand-card__dl { display: flex; gap: 0.75rem; } .brand-card__dl a { font-size: 0.78rem; font-weight: 700; color: var(--accent-human); text-transform: uppercase; letter-spacing: 0.04em; } .brand-card__dl a:hover { color: var(--accent-human-light); } /* Color swatches */ .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .swatch { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .swatch__chip { height: 84px; } .swatch__meta { padding: 0.75rem 0.9rem; } .swatch__name { font-size: 0.85rem; font-weight: 600; } .swatch__hex { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; } .swatch--gradient .swatch__chip { background: var(--accent-bridge); } /* Do / Don't */ .dosdonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .dd { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; } .dd h3 { font-size: 0.95rem; margin-bottom: 1rem; } .dd--do h3 { color: #34d399; } .dd--dont h3 { color: #f87171; } .dd ul { list-style: none; display: grid; gap: 0.6rem; } .dd li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } .dd--do li::before { content: '✓'; position: absolute; left: 0; color: #34d399; font-weight: 700; } .dd--dont li::before { content: '✕'; position: absolute; left: 0; color: #f87171; font-weight: 700; }