/* ============================================================ Yani — BOLD FLAT / ELECTRIC theme Solid electric colors, crisp edges, hard offset shadows. No gradients, no glows. ============================================================ */ :root { --orange: #ff6a1a; /* electric orange (primary) */ --orange-deep: #e85400; --blue: #0a84ff; /* electric blue */ --cyan: #00c2ff; --green: #12c24a; /* electric green */ --red: #ff2d55; /* electric red */ --yellow: #ffc400; /* electric yellow */ --navy: #0e1b33; /* near-black navy: text + borders */ --primary: var(--orange); --bg: #ffffff; --bg-2: #f3f4f7; --surface: #ffffff; --surface-2: #f3f4f7; --border: #e5e7ee; --line: #0e1b33; /* strong border for bold elements */ --text: #0e1b33; --muted: #5b6472; --bot-bubble: #f3f4f7; --user-bubble: var(--orange); --nav-h: 68px; --radius: 16px; } :root[data-theme="dark"] { --bg: #0b1220; --bg-2: #0e1729; --surface: #121c30; --surface-2: #16223a; --border: #26324c; --line: #ffffff; --text: #eef2f9; --muted: #9fb0cc; --bot-bubble: #16223a; --user-bubble: var(--orange); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html.has-scroll-smooth { overflow: hidden; } /* Locomotive Scroll requires BOTH html and body hidden in smooth mode — without this, the real can still natively scroll independently of Locomotive's virtual transform, desyncing mouse-wheel input from the true scroll position (symptom: scrolling appears to "stick" before reaching the end of the page). */ html.has-scroll-smooth body { overflow: hidden; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } em { font-style: normal; color: var(--orange); } img { max-width: 100%; } /* ---------------- Preloader ---------------- */ .preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--navy); } .preloader-inner { text-align: center; } .pl-face { width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 18px; background: var(--orange); display: flex; align-items: center; justify-content: center; gap: 9px; animation: plFaceIn .5s ease both; } .pl-face span { width: 10px; height: 24px; border-radius: 5px; background: #fff; animation: eyeBlink 1.7s infinite ease-in-out; } .pl-face span:nth-child(2) { animation-delay: .2s; } .pl-word { font-size: clamp(2.8rem, 9vw, 4.2rem); font-weight: 800; letter-spacing: -1px; line-height: 1; } .pl-word i { font-style: normal; display: inline-block; opacity: 0; transform: translateY(-32px); animation: plDrop .6s cubic-bezier(.2,.9,.25,1) forwards; } .pl-word i:nth-child(1) { color: #f47b20; animation-delay: .15s; } /* Y */ .pl-word i:nth-child(2) { color: #35a94a; animation-delay: .27s; } /* a */ .pl-word i:nth-child(3) { color: #1e7bc4; animation-delay: .39s; } /* n */ .pl-word i:nth-child(4) { color: #e5202a; animation-delay: .51s; } /* i */ .pl-word i.pl-dot { color: #f9a825; animation-delay: .63s; } /* . */ .pl-tag { margin-top: 14px; font-size: .72rem; letter-spacing: 3px; color: #8ea0c0; opacity: 0; animation: plFade .5s .78s forwards; } .preloader-bar { width: 200px; height: 4px; margin: 24px auto 0; background: #23324f; border-radius: 999px; overflow: hidden; } .preloader-bar i { display: block; height: 100%; width: 0%; background: var(--orange); border-radius: 999px; transition: width .15s ease; } @keyframes plDrop { 0% { opacity: 0; transform: translateY(-32px); } 60% { opacity: 1; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes plFaceIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } @keyframes plFade { to { opacity: 1; } } @keyframes eyeBlink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(.15); } } /* ---------------- Custom cursor ---------------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); } .cursor-dot { width: 7px; height: 7px; background: var(--orange); opacity: 0; transition: opacity .3s; } .cursor-ring { width: 38px; height: 38px; border: 2px solid var(--orange); display: grid; place-items: center; opacity: 0; transition: width .2s, height .2s, background .2s, opacity .3s; } body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring { opacity: 1; } .cursor-ring.is-hover { width: 60px; height: 60px; background: var(--orange); border-color: var(--orange); } .cursor-label { font-size: .58rem; font-weight: 800; letter-spacing: .5px; color: #fff; opacity: 0; transition: opacity .2s; text-transform: uppercase; } .cursor-ring.is-hover .cursor-label { opacity: 1; } .cursor-ring.named:not(.is-hover) .cursor-label { opacity: 0; } @media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } } /* ---------------- Nav ---------------- */ .nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); padding: 0 clamp(14px, 3vw, 34px); background: var(--surface); border-bottom: 2px solid var(--navy); } :root[data-theme="dark"] .nav { border-bottom-color: var(--border); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-logo { height: 38px; width: auto; display: block; } :root[data-theme="dark"] .brand-logo { background: #fff; padding: 3px 6px; border-radius: 6px; } .brand-sep { width: 2px; height: 26px; background: var(--navy); } :root[data-theme="dark"] .brand-sep { background: var(--border); } .brand-name { font-weight: 800; font-size: 1.25rem; color: var(--navy); letter-spacing: .3px; } :root[data-theme="dark"] .brand-name { color: #fff; } .nav-links { display: flex; gap: 4px; } .nav-link { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--muted); transition: color .15s, background .15s; } .nav-link:hover { color: var(--orange); } .nav-link.is-active { color: #fff; background: var(--navy); } :root[data-theme="dark"] .nav-link.is-active { background: var(--orange); } .nav-actions { display: flex; align-items: center; gap: 10px; } .yantrix-badge img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--navy); transition: transform .15s; } :root[data-theme="dark"] .yantrix-badge img { border-color: var(--border); } .yantrix-badge:hover img { transform: rotate(-6deg) scale(1.06); border-color: var(--orange); } @media (max-width: 780px) { .nav { gap: 10px; padding: 0 14px; } .nav .nav-cta { display: none; } /* redundant — "Chat" is in the links */ .brand-name, .brand-sep { display: none; } /* logo alone is enough */ } @media (max-width: 430px) { .nav-links { gap: 2px; } .nav-link { padding: 7px 10px; font-size: .88rem; } .nav-actions { gap: 6px; } } /* ---------------- Buttons (flat, hard shadow) ---------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; border: 2px solid var(--navy); cursor: pointer; font: inherit; font-weight: 800; border-radius: 999px; padding: 11px 22px; transition: transform .12s, box-shadow .12s; } .btn:active { transform: translate(2px, 2px); box-shadow: none !important; } .btn-lg { padding: 15px 30px; font-size: 1.02rem; } .btn-primary { background: var(--orange); color: #fff; box-shadow: 4px 4px 0 var(--navy); } .btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--navy); } .btn-ghost { background: var(--surface); color: var(--navy); box-shadow: 4px 4px 0 var(--navy); } :root[data-theme="dark"] .btn-ghost { color: #fff; border-color: var(--border); box-shadow: 4px 4px 0 var(--border); } .btn-ghost:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--navy); } :root[data-theme="dark"] .btn-ghost:hover { box-shadow: 6px 6px 0 var(--border); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); background: var(--surface); color: var(--navy); width: 44px; height: 44px; border-radius: 12px; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; } :root[data-theme="dark"] .icon-btn { color: #fff; } .icon-btn:hover { border-color: var(--orange); color: var(--orange); } .icon-btn:active { transform: scale(.94); } .btn:focus-visible, .icon-btn:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } /* ---------------- Hero ---------------- */ .hero { position: relative; min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px clamp(20px, 5vw, 40px) 80px; overflow: hidden; background: var(--bg); } .hero-bg { position: absolute; inset: 0; z-index: 0; } /* solid flat decorative shapes (no blur) */ .orb { position: absolute; border-radius: 50%; } .orb--orange { width: 190px; height: 190px; left: 6vw; top: 26vh; background: var(--orange); opacity: .12; } .orb--blue { width: 150px; height: 150px; right: 8vw; top: 20vh; border: 10px solid var(--blue); opacity: .18; } .orb--green { width: 120px; height: 120px; left: 40vw; bottom: 8vh; background: var(--green); opacity: .12; border-radius: 24px; } @media (max-width: 720px) { .hero-bg { display: none; } } .hero-badges { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .float-badge { position: absolute; padding: 10px 18px; border-radius: 999px; font-size: .98rem; font-weight: 800; color: #fff; border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--navy); } .float-badge.b-orange { background: var(--orange); top: 24%; left: 12%; } .float-badge.b-blue { background: var(--blue); top: 30%; right: 13%; } .float-badge.b-green { background: var(--green); bottom: 24%; left: 17%; } @media (max-width: 720px) { .float-badge { display: none; } } .hero-inner { position: relative; z-index: 2; max-width: 900px; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: 2px; color: #fff; background: var(--blue); padding: 6px 14px; border-radius: 999px; margin: 0 0 20px; } .hero-title { font-size: clamp(3.4rem, 13vw, 9rem); line-height: .88; margin: 0 0 22px; font-weight: 800; letter-spacing: -2px; color: var(--navy); } :root[data-theme="dark"] .hero-title { color: #fff; } .hero-title .line { display: block; overflow: hidden; } .hero-title .line span { display: inline-block; } /* Multicolor "Yani." wordmark — DYPIU logo colours, ordered so no two clashing hues sit next to each other (green + red are split by blue). */ .hero-title .yani i { font-style: normal; } .hero-title .yani i:nth-child(1) { color: #f47b20; } /* Y — orange */ .hero-title .yani i:nth-child(2) { color: #35a94a; } /* a — green */ .hero-title .yani i:nth-child(3) { color: #1e7bc4; } /* n — blue */ .hero-title .yani i:nth-child(4) { color: #e5202a; } /* i — red */ .hero-title .yani i.dot { color: #f9a825; } /* . — gold */ .hero-sub { font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--muted); max-width: 640px; margin: 0 auto 32px; line-height: 1.6; } .hero-sub b { color: var(--navy); } :root[data-theme="dark"] .hero-sub b { color: #fff; } .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; } .scroll-cue span { width: 2px; height: 32px; background: var(--orange); animation: scrollLine 1.8s infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------------- Sections ---------------- */ .section { position: relative; padding: clamp(70px, 12vh, 140px) clamp(20px, 6vw, 80px); max-width: 1200px; margin: 0 auto; } .section-head { margin-bottom: 46px; } .section-head.center { text-align: center; } .section-title { font-size: clamp(2rem, 5.5vw, 3.5rem); font-weight: 800; letter-spacing: -1px; line-height: 1.05; margin: 8px 0 0; color: var(--navy); } :root[data-theme="dark"] .section-title { color: #fff; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .card { --c: var(--orange); background: var(--surface); border: 2px solid var(--navy); border-radius: 18px; padding: 26px; box-shadow: 5px 5px 0 var(--navy); transition: transform .15s, box-shadow .15s; } :root[data-theme="dark"] .card { border-color: var(--border); box-shadow: 5px 5px 0 var(--border); } .card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--c); border-color: var(--c); } .card-ic { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 16px; background: var(--c); } .card h3 { margin: 0 0 8px; font-size: 1.18rem; color: var(--navy); } :root[data-theme="dark"] .card h3 { color: #fff; } .card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .95rem; } .accent-orange { --c: var(--orange); } .accent-blue { --c: var(--blue); } .accent-green { --c: var(--green); } .accent-red { --c: var(--red); } .section--steps .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; } .step { --c: var(--orange); padding: 24px; border-radius: 16px; border: 2px solid var(--navy); background: var(--surface); box-shadow: 5px 5px 0 var(--c); } :root[data-theme="dark"] .step { border-color: var(--border); } .step-n { display: inline-block; font-size: .8rem; font-weight: 800; color: #fff; background: var(--c); padding: 4px 10px; border-radius: 6px; letter-spacing: 1px; } .step h3 { margin: 12px 0 6px; font-size: 1.12rem; color: var(--navy); } :root[data-theme="dark"] .step h3 { color: #fff; } .step p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; } .s-orange { --c: var(--orange); } .s-blue { --c: var(--blue); } .s-green { --c: var(--green); } .s-red { --c: var(--red); } .marquee-wrap { overflow: hidden; padding: 30px 0; background: var(--navy); } .marquee { display: inline-flex; gap: 26px; white-space: nowrap; font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 800; color: #fff; will-change: transform; } .marquee span:nth-child(4n+1) { color: var(--orange); } .marquee span:nth-child(4n+3) { color: var(--cyan); } .section--stats { text-align: center; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; } .stat b { display: block; font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; } .stat:nth-child(2) b { color: var(--blue); } .stat:nth-child(3) b { color: var(--green); } .stat:nth-child(4) b { color: var(--red); } .stat span { color: var(--muted); font-size: .95rem; } /* CTA band (solid navy block) */ .cta-band { padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 60px); } .cta-inner { max-width: 900px; margin: 0 auto; text-align: center; background: var(--navy); color: #fff; border-radius: 26px; padding: clamp(40px, 7vw, 72px); } .cta-inner h2 { font-size: clamp(1.9rem, 5.5vw, 3.4rem); font-weight: 800; margin: 0 0 14px; letter-spacing: -1px; } .cta-inner em { color: var(--yellow); } .cta-inner p { color: #b9c3d6; margin: 0 0 26px; } .cta-inner .btn-primary { box-shadow: 4px 4px 0 #000; } /* About hero */ .about-hero { position: relative; padding: clamp(70px, 12vh, 140px) clamp(20px, 6vw, 80px) 40px; max-width: 1000px; margin: 0 auto; text-align: center; } .about-title { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1.02; margin: 6px 0 22px; color: var(--navy); } :root[data-theme="dark"] .about-title { color: #fff; } .about-lead { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--muted); max-width: 720px; margin: 0 auto; line-height: 1.65; } .about-lead b { color: var(--orange); } /* ============================================================ CHAT PAGE ============================================================ */ .chatpage { padding: clamp(12px, 3vw, 26px); display: flex; justify-content: center; } .chat-shell { width: 100%; max-width: 860px; display: flex; flex-direction: column; height: calc(100dvh - var(--nav-h) - clamp(24px, 6vw, 52px)); background: var(--surface); border: 2px solid var(--navy); border-radius: 20px; box-shadow: 8px 8px 0 var(--navy); overflow: hidden; } /* Chat page: no site header/footer — the chat fills the whole viewport. */ /* height (not min-height) caps the page at the viewport, so .chat's own overflow-y:auto actually scrolls instead of the whole page growing taller with every new message. */ body.page-chat { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } /* min-height:0 overrides the flexbox default (min-height:auto), which would otherwise let this grow to fit its content instead of staying capped at the viewport — the actual cause of the chat page growing taller with every message instead of scrolling internally ("flexbugs #1"). */ body.page-chat > main { flex: 1; display: flex; min-height: 0; } .page-chat .chatpage { flex: 1; min-height: 0; } .page-chat .chat-shell { height: 100%; } .brand-link { text-decoration: none; color: inherit; } .topbar-right { display: flex; align-items: center; gap: 10px; } .topbar-home { width: 40px; height: 40px; } :root[data-theme="dark"] .chat-shell { border-color: var(--border); box-shadow: 8px 8px 0 var(--border); } .chat-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 2px solid var(--navy); background: var(--surface); } :root[data-theme="dark"] .chat-topbar { border-bottom-color: var(--border); } .brand-text h1 { font-size: 1.1rem; margin: 0; color: var(--navy); } :root[data-theme="dark"] .brand-text h1 { color: #fff; } .subtitle { margin: 2px 0 0; font-size: .76rem; color: var(--muted); } .avatar { width: 46px; height: 46px; border-radius: 12px; background: var(--navy); flex: none; } .chat-topbar .brand { gap: 12px; } .status { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 2px solid var(--border); white-space: nowrap; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa0ae; } .status--online .status-dot { background: var(--green); } .status--connecting .status-dot { background: var(--yellow); animation: pulse 1.2s infinite; } .status--offline .status-dot { background: var(--red); } @media (max-width: 380px) { .status .status-label { display: none; } } .chat { flex: 1; overflow-y: auto; padding: 20px 18px 10px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } .msg { display: flex; max-width: 100%; animation: rise .2s ease; } .msg--user { justify-content: flex-end; } .msg--bot { justify-content: flex-start; } .bubble { max-width: min(82%, 560px); padding: 12px 16px; border-radius: var(--radius); line-height: 1.5; font-size: .97rem; word-wrap: break-word; white-space: pre-wrap; } .msg--bot .bubble { background: var(--bot-bubble); border: 2px solid var(--border); border-bottom-left-radius: 5px; color: var(--text); } .msg--user .bubble { background: var(--user-bubble); color: #fff; border: 2px solid var(--navy); border-bottom-right-radius: 5px; } .bubble p { margin: 0; } .bubble .hint { margin-top: 8px; font-size: .82rem; color: var(--muted); } .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .72rem; color: var(--muted); } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 2px solid var(--border); } .translation { margin-top: 6px; font-size: .82rem; color: var(--muted); font-style: italic; cursor: pointer; } .speaking-tag { color: var(--orange); font-weight: 700; } .typing .bubble { display: inline-flex; gap: 5px; padding: 16px; } .typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); opacity: .5; animation: blink 1.2s infinite both; } .typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; } .suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .chip { border: 2px solid var(--border); background: var(--surface); color: var(--navy); padding: 9px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; cursor: pointer; transition: all .12s; } :root[data-theme="dark"] .chip { color: #fff; } .chip:hover { border-color: var(--orange); color: var(--orange); } .composer { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 2px solid var(--navy); background: var(--surface); } :root[data-theme="dark"] .composer { border-top-color: var(--border); } .composer-form { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: 5px 6px; } .disclaimer { margin: 0; text-align: center; font-size: .72rem; line-height: 1.4; color: var(--muted); } .composer-form:focus-within { border-color: var(--orange); } .input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 1rem; padding: 11px 8px; outline: none; min-width: 0; } .input::placeholder { color: var(--muted); } .send-btn { background: var(--orange); color: #fff; border-color: var(--orange); } .send-btn:hover { color: #fff; border-color: var(--orange); } .mic-btn.is-listening { background: var(--red); color: #fff; border-color: var(--red); animation: micPulse 1.2s infinite; } /* ---------------- Footer ---------------- */ .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 34px clamp(20px, 6vw, 60px); border-top: 2px solid var(--navy); background: var(--surface); } :root[data-theme="dark"] .site-footer { border-top-color: var(--border); } .foot-col { display: flex; align-items: center; gap: 14px; } .foot-dypiu { height: 46px; width: auto; } :root[data-theme="dark"] .foot-dypiu { background: #fff; padding: 4px 8px; border-radius: 6px; } .site-footer p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; } .foot-yantrix { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .84rem; } .foot-yantrix img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy); } :root[data-theme="dark"] .foot-yantrix img { border-color: var(--border); } .foot-yantrix b { color: var(--orange); } .foot-right { justify-content: flex-end; } /* Footer stacks + centers on phones/small tablets */ @media (max-width: 680px) { .site-footer { flex-direction: column; text-align: center; gap: 20px; padding: 28px 20px; } .foot-col, .foot-right { width: 100%; justify-content: center; } .foot-col { flex-direction: column; gap: 10px; } .site-footer p, .foot-yantrix { text-align: center; } } /* ---------------- Keyframes / motion ---------------- */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,85,.5); } 50% { box-shadow: 0 0 0 10px rgba(255,45,85,0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } html.has-scroll-smooth { overflow: auto; } }