/* ============================================================ Wance landing — Glaciar Mobile-first. One vertical rhythm token (--section-y). ============================================================ */ /* Base page colour lives on ONLY. The global .bg-canvas sits at z-index:-1, and an opaque background would paint over it — so body stays transparent and html provides the full-viewport Tinta/Hielo behind the canvas. */ html { background: var(--bg); transition: background-color 0.35s ease; } body { width: 100%; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: transparent; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--on-accent); } /* ---------- Focus ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 50%; top: -64px; transform: translateX(-50%); z-index: 200; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); padding: 10px 18px; border-radius: var(--r-pill); font-weight: 600; transition: top 0.2s var(--ease); } .skip-link:focus { top: 12px; } /* ---------- Layout primitives ---------- */ /* Sections stay fully transparent so the global constellation canvas reads uniformly across the whole page — no per-section tint that would create a brightness "seam" against the transparent ridge dividers / hero. The base page colour (Tinta/Hielo) lives on , behind the canvas. */ .section { padding-block: var(--section-y); } .section--alt { background: transparent; } .section__inner, .nav__inner, .hero__inner, .cta__inner, .footer__inner, .footer__bottom { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section__head { max-width: var(--maxw-text); margin-inline: auto; text-align: center; } .section__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.02em; color: var(--text); } .section__sub { margin-top: 16px; font-size: var(--fs-lead); color: var(--text-muted); } .section__sub--left { margin-inline: 0; } /* ---------- Eyebrow ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.6; } .section__head .eyebrow { margin-bottom: 18px; } .eyebrow--beta { color: var(--text-muted); } .eyebrow--beta::before { display: none; } .beta-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 22%, transparent); } /* soft pulsing ring (transform + opacity only) */ .beta-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--warm); animation: pulseRing 2.6s ease-out infinite; } .accent-word { color: var(--accent); } /* ---------- Brand ---------- */ .brand { display: inline-flex; align-items: center; color: var(--text); } .brand__logo { display: block; height: 26px; width: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 600; border-radius: var(--r-md); cursor: pointer; white-space: nowrap; transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .btn .icon { width: 18px; height: 18px; } .btn--sm { padding: 9px 16px; font-size: 0.9rem; } .btn--lg { padding: 14px 26px; font-size: 1rem; } .btn--warm { background: var(--warm); color: var(--warm-text); box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--warm) 70%, transparent); } .btn--warm:hover { background: var(--warm-hover); transform: translateY(-2px); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--warm) 82%, transparent); } .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); } .btn--ghost:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--accent) 55%, transparent); } /* ---------- Icon button / toggles ---------- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease); } .icon-btn:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); } .icon-btn .icon { width: 18px; height: 18px; } .icon--sun { display: none; } [data-theme="light"] .icon--moon { display: none; } [data-theme="light"] .icon--sun { display: block; } .lang-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; } .lang-toggle__sep { color: var(--text-faint); } .lang-toggle__btn { background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 2px 4px; border-radius: 4px; letter-spacing: 0.04em; transition: color 0.18s var(--ease); } .lang-toggle__btn:hover { color: var(--text-muted); } .lang-toggle__btn[aria-pressed="true"] { color: var(--accent); font-weight: 600; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), backdrop-filter 0.25s var(--ease); } .nav.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--border); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; } .nav__links { display: none; } .nav__actions { display: flex; align-items: center; gap: 22px; } .nav__actions .nav__signin { display: none; } /* header lang + theme controls: same components as the footer, grouped. Hidden on mobile (they live in the footer there) — shown from the tablet breakpoint, alongside the nav links and Sign in. */ .nav__utils { display: none; } @media (min-width: 768px) { .nav__utils { display: inline-flex; align-items: center; gap: 12px; } } /* animated center-out underline on nav links */ .nav__link { position: relative; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 0.25s var(--ease); } .nav__link:hover::after { transform: scaleX(1); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 1rem + 6vw, 5rem); padding-bottom: clamp(3rem, 1.5rem + 5vw, 5rem); } .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* interactive "flashlight" constellation — a GLOBAL fixed canvas behind every section. pointer-events:none so all buttons/links stay clickable through it. */ .bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; /* behind content, above the html/body base colour */ pointer-events: none; display: block; } /* light backing for headline legibility — kept soft so the aura still reads through on the left (the bold headline survives a faint scrim). */ .hero__scrim { position: absolute; inset: 0; background: linear-gradient( 100deg, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 38%, transparent) 30%, transparent 56% ); } @media (max-width: 1023px) { /* text is full-width on small screens → gentler, bottom-weighted scrim only */ .hero__scrim { background: linear-gradient( 180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, transparent 45% ); } } .hero__inner { position: relative; z-index: 1; } .hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.03em; color: var(--text); } .hero__title span { display: block; } .hero__lead { max-width: 38ch; font-size: var(--fs-lead); color: var(--text-muted); } .lead--desktop { display: none; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; } .hero__cta .btn { flex: 1 1 auto; } /* hero code visual */ .hero__visual { margin-top: 40px; } /* ---------- Editor / code card ---------- */ .editor { --ed-bg: #090E1B; background: var(--ed-bg); border: 1px solid rgba(143, 163, 184, 0.16); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-float); } /* the hero code window feels "touchable": subtle lift + brighter edge glow */ .hero__visual .editor { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .hero__visual .editor:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); } .editor__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #0C1322; border-bottom: 1px solid rgba(143, 163, 184, 0.12); } .editor__dot { width: 11px; height: 11px; border-radius: 50%; } .editor__dot--r { background: #FF5F57; } .editor__dot--y { background: #FEBC2E; } .editor__dot--g { background: #28C840; } .editor__file { margin-left: 8px; font-family: var(--font-mono); font-size: 0.76rem; color: #6B7C93; } .editor__body { margin: 0; padding: 18px 20px; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.85; color: #C7D5E6; overflow-x: auto; } .editor__body code { font-family: inherit; } /* syntax (editor-local, stays dark in both themes) */ .t-kw { color: #6FD3F5; } .t-st { color: #7FE0A6; } .t-fn { color: #F2B45C; } .t-cm { color: #5C7088; font-style: italic; } .t-pn { color: #8294AC; } .t-nm { color: #B8A6F0; } .t-pr { color: #4CC9F0; } .t-ok { color: #5FD08A; } /* ---------- Module strip ---------- */ .strip { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); border-block: 1px solid var(--border); padding-block: 22px; } .strip__label { display: block; text-align: center; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; } .strip__track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .strip__row { display: flex; align-items: center; gap: 0; width: max-content; animation: marquee 28s linear infinite; font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-muted); } /* spacing lives inside each item (uniform trailing margin incl. the last of each copy) so translateX(-50%) tiles the copies seamlessly — no end flick */ .strip__row li { display: flex; align-items: center; margin-right: 56px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Ridge divider (signature) ---------- */ .ridge-divider { height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26' fill='none'%3E%3Cpolyline points='0,20 30,6 60,20 90,6 120,20' stroke='%234CC9F0' stroke-opacity='0.22' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center; opacity: 0.9; } /* ============================================================ SERVICES (cards) ============================================================ */ .cards { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 16px; } .card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-glow); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); transition: transform 0.2s var(--ease), background 0.2s var(--ease); } .card:hover .card__icon { transform: scale(1.08) rotate(-3deg); background: var(--accent-border); } .card__icon svg { width: 22px; height: 22px; } .card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--text); } .card__desc { font-size: 0.95rem; color: var(--text-muted); } .card--soon { position: relative; } .card--soon .card__icon { opacity: 0.72; } .card__badge { position: absolute; top: 18px; right: 18px; padding: 3px 10px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; white-space: nowrap; } /* ============================================================ WHY (differentiators) ============================================================ */ .why { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 16px; } .why__item { padding: 30px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); border-top: 2px solid var(--accent); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.35s ease; } .why__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); border-color: var(--accent-border); } .why__num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); letter-spacing: 0.1em; } .why__title { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin: 14px 0 10px; color: var(--text); } .why__desc { color: var(--text-muted); } /* ============================================================ CODE SPLIT (code + cli sections) ============================================================ */ .code-split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } /* min-width:0 lets the grid children shrink below their content's intrinsic width, so the terminal's own overflow-x:auto scrolls internally instead of pushing the page wide on narrow viewports. */ .code-split__text, .code-split__editor { min-width: 0; } .code-split__text .eyebrow { margin-bottom: 16px; } .code-split__text .section__title { text-align: left; } .checks { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; } .check { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-weight: 500; } .check__i { flex-shrink: 0; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; } /* ============================================================ CTA ============================================================ */ .cta { padding-block: var(--section-y); } .cta__inner { position: relative; overflow: hidden; text-align: center; padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--gutter); background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent-deep) 28%, transparent), transparent 70%), var(--surface); border: 1px solid var(--accent-border); border-radius: var(--r-xl); } .cta__ridge { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; opacity: 0.5; } .cta__title { position: relative; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; color: var(--text); } .cta__sub { position: relative; margin: 16px auto 0; max-width: 48ch; color: var(--text-muted); font-size: var(--fs-lead); } .cta__buttons { position: relative; margin-top: 30px; display: flex; flex-direction: column; gap: 12px; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--border); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-bottom: 28px; background: transparent; } .footer__inner { display: flex; flex-direction: column; gap: 36px; } .footer__tagline { margin-top: 14px; color: var(--text-muted); max-width: 28ch; } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .footer__h { font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 14px; } .footer__col { display: flex; flex-direction: column; gap: 10px; } .footer__link { color: var(--text-muted); transition: color 0.18s var(--ease); width: fit-content; } .footer__link:hover { color: var(--accent); } .footer__bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; align-items: center; } .footer__copy { font-size: 0.85rem; color: var(--text-faint); text-align: center; } .footer__bottom-actions { display: flex; align-items: center; gap: 12px; } /* Below 768px the footer bottom stacks and centers directly under the floating HUMAN/AGENT toggle; add clearance so the lang/theme controls never sit beneath it. (At >=768px the footer bottom is a row with the controls on the right, clear of the centered toggle.) */ @media (max-width: 767px) { .footer { padding-bottom: 76px; } } /* ============================================================ Reveal animation ============================================================ */ /* Entrance transform lives only while hidden (:not(.is-visible)) so that once an element is revealed nothing pins `transform` — leaving hover lifts free to work even when the same element is both .reveal and .card/.why__item. */ .reveal { opacity: 0; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal:not(.is-visible) { transform: translateY(22px); } .reveal.is-visible { opacity: 1; } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } /* directional reveals — enter from the sides (used on the code split sections) */ .reveal--left:not(.is-visible) { transform: translateX(-30px); } .reveal--right:not(.is-visible) { transform: translateX(30px); } /* ============================================================ Motion — keyframes, hero ambiance, code typing, theme switch (only transform & opacity are animated in loops → GPU compositor) ============================================================ */ @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.8); opacity: 0; } } @keyframes clIn { to { opacity: 1; transform: none; } } /* hero code: line-by-line entrance on initial load (JS sets per-line delay) */ .editor__body code .cl { display: block; } .editor__body code.is-typing .cl { opacity: 0; transform: translateY(4px); animation: clIn 0.4s var(--ease) forwards; } /* smooth light/dark switch on large surfaces — targeted, never transition:all */ body, .section--alt, .cta, .footer { transition: background-color 0.35s ease, color 0.35s ease; } /* ============================================================ Responsive ============================================================ */ @media (min-width: 768px) { .nav__links { display: flex; align-items: center; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%); } .nav__inner { position: relative; } .nav__link { font-size: 0.92rem; color: var(--text-muted); transition: color 0.18s var(--ease); } .nav__link:hover { color: var(--text); } .nav__actions .nav__signin { display: inline; font-size: 0.92rem; font-weight: 600; color: var(--text-muted); transition: color 0.18s var(--ease); } .nav__actions .nav__signin:hover { color: var(--text); } .hero__cta .btn { flex: 0 0 auto; } .lead--desktop { display: block; } .lead--mobile { display: none; } .cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } .card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 22px; } .card--wide .card__icon { flex-shrink: 0; } .why { grid-template-columns: repeat(3, 1fr); gap: 18px; } .cta__buttons { flex-direction: row; justify-content: center; } .footer__inner { flex-direction: row; justify-content: space-between; } .footer__cols { grid-template-columns: repeat(3, auto); gap: 64px; } .footer__bottom { flex-direction: row; justify-content: space-between; } } @media (min-width: 1024px) { .hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero__visual { margin-top: 0; } .hero__content { gap: 26px; } .cards { grid-template-columns: repeat(3, 1fr); } .code-split { grid-template-columns: 1fr 1fr; gap: 56px; } .code-split--reverse .code-split__text { order: 2; } } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal--left, .reveal--right { opacity: 1; transform: none; transition: none; } .strip__row { animation: none; } .btn, .card, .icon-btn { transition: none; } .btn:hover, .card:hover, .why__item:hover { transform: none; } /* kill pulses + code typing (the canvas draws a static frame via JS) */ .beta-dot::after { animation: none; } .editor__body code.is-typing .cl { opacity: 1; transform: none; animation: none; } } /* ============================================================ Legal pages (privacy / terms) — long-form prose ============================================================ */ .legal { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); } .legal__inner { max-width: var(--maxw-text); margin-inline: auto; } /* Anti-flash: when a Spanish visitor loads a legal page, the head script marks pending and hides the (English-by-default) content until js/legal.js translates it and removes the flag. visibility keeps layout, so no reflow. */ html.i18n-pending .legal__inner { visibility: hidden; } .legal__head { margin-bottom: 48px; } .legal__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-snug); letter-spacing: -0.02em; color: var(--text); } .legal__meta { margin-top: 12px; color: var(--text-muted); font-size: var(--fs-body); } .legal__body h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); color: var(--text); margin-top: 44px; margin-bottom: 14px; } .legal__body h2:first-child { margin-top: 0; } .legal__body p, .legal__body li { color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); } .legal__body p { margin-bottom: 16px; } .legal__body ul { margin: 0 0 16px; padding-left: 1.25em; list-style: disc; } .legal__body li { margin-bottom: 8px; } .legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal__body a:hover { color: var(--accent-deep); } .legal__body strong { color: var(--text); font-weight: 600; } /* Draft warning banner + inline notes for legal pages still under review */ .legal__warning { margin-bottom: 40px; padding: 18px 20px; border: 1px solid var(--warm); border-left-width: 4px; border-radius: var(--r-md); background: rgba(245, 158, 11, 0.10); color: var(--text); } .legal__warning strong { color: var(--warm); font-weight: 700; } .legal__warning p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); } .legal__warning p + p { margin-top: 8px; } .legal__note { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--warm); border-radius: var(--r-sm); background: rgba(245, 158, 11, 0.08); color: var(--text-muted); font-size: 0.95rem; line-height: var(--lh-body); } .legal__body h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); margin-top: 26px; margin-bottom: 10px; } .legal__body blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid var(--border-strong); color: var(--text-muted); } .legal__body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--border); } .legal__body code { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--text); } .legal__body ul ul { margin-top: 8px; margin-bottom: 0; } /* ============================================================ Coming-soon row (2-up, capped) — services section ============================================================ */ .soon-row { margin-top: 44px; } .soon-row__label { display: block; margin-bottom: 16px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .cards--duo { margin-top: 0; } @media (min-width: 1024px) { .cards--duo { grid-template-columns: repeat(2, 1fr); max-width: 760px; } } /* ============================================================ Agent-compatibility logo marquee (insforge-style brand lockups) one white wordmark lockup per item, logo-only, no ▲ separator ============================================================ */ .strip__row--logos li { margin-right: 52px; } .strip__row--logos li::before { content: none; } /* drop the ▲ accent mark */ .agent-logo { flex-shrink: 0; height: 50px; width: auto; display: block; /* lockups ship with a baked 0.6 group opacity — leave it for the muted look */ transition: filter 0.2s var(--ease); } .strip__row--logos li:hover .agent-logo { filter: brightness(1.6); } /* lockups ship white-filled; flip them dark on the light theme */ [data-theme="light"] .agent-logo { filter: invert(1); } [data-theme="light"] .strip__row--logos li:hover .agent-logo { filter: invert(1) brightness(0.5); } /* ============================================================ HUMAN / AGENT view toggle + raw-markdown view Floating pill (insforge-style). The AGENT view renders the raw text of /index.md — the file is the source, this is only a view. ============================================================ */ .view-toggle { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--border-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-float); } .view-toggle__btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: none; border-radius: var(--r-pill); background: transparent; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: color 0.18s var(--ease), background 0.18s var(--ease); } .view-toggle__btn .icon { width: 15px; height: 15px; } .view-toggle__btn:hover { color: var(--text); } .view-toggle__btn.is-active { background: var(--accent-soft); color: var(--accent); } .view-toggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* AGENT view — full-viewport raw markdown */ .agent-view { position: fixed; inset: 0; z-index: 150; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 92px; /* clear the floating toggle */ } .agent-view[hidden] { display: none; } .agent-view__bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px var(--gutter); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); } .agent-view__url::before { content: '# '; color: var(--text-faint); } .agent-view__raw { color: var(--accent); text-decoration: none; } .agent-view__raw:hover { text-decoration: underline; } .agent-view__body { max-width: 820px; margin: 0 auto; padding: 34px var(--gutter) 48px; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.72; color: var(--text); white-space: pre-wrap; word-break: break-word; } body.agent-active { overflow: hidden; } @media (max-width: 600px) { .view-toggle { bottom: 14px; } .view-toggle__btn { padding: 8px 13px; font-size: 0.74rem; } .agent-view__body { font-size: 0.8rem; } } @media (prefers-reduced-motion: reduce) { .view-toggle__btn { transition: none; } }