/* TinyRL Landing Page Styles */ :root { --bg: #080c10; --bg-alt: #0d1318; --bg-soft: #141c24; --bg-card: #0c1419; --border: #1a2730; --border-glow: rgba(20, 203, 168, 0.3); --text: #f0f6f8; --text-dim: #8ba4b4; --text-muted: #5d7585; --accent: #14cba8; --accent-light: #2ee8c0; --accent-dark: #0d9980; --accent-grad: linear-gradient(135deg, #0ef6cc 0%, #14cba8 50%, #0d9980 100%); --accent-grad-vibrant: linear-gradient(135deg, #11f0e0 0%, #14cba8 40%, #0dca8a 100%); --surface: #0a1216; --glow-sm: 0 0 20px -5px rgba(20, 203, 168, 0.4); --glow-md: 0 0 40px -10px rgba(20, 203, 168, 0.35); --glow-lg: 0 0 80px -20px rgba(20, 203, 168, 0.3); --gradient: var(--accent-grad); --radius: 16px; --radius-sm: 8px; --radius-lg: 24px; --shadow: 0 4px 24px -6px rgba(0,0,0,.5), 0 2px 8px -3px rgba(0,0,0,.4); --shadow-lg: 0 20px 50px -15px rgba(0,0,0,.6); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-feature-settings: "liga" 1, "tnum" 1, "kern" 1; } /* Explicit theme overrides (user toggle sets data-theme on ) */ :root[data-theme="dark"] { --bg: #0b1115; --bg-alt: #121c22; --bg-soft: #18252d; --border: #1f3039; --text: #ecf5f7; --text-dim: #9ab5c1; --surface: #0f191e; --shadow: 0 4px 18px -4px rgba(0,0,0,.4),0 2px 6px -2px rgba(0,0,0,.4); } @media (prefers-color-scheme: light) { :root { --bg: #f5f7f9; --bg-alt: #ffffff; --bg-soft: #eef2f4; --border: #d8e1e5; --text: #1c2d33; --text-dim: #5a6c75; --shadow: 0 4px 14px -4px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.08); } .feature-card, .example-item, .code-card { background:#ffffff; border-color:#d8e1e5; } .site-header { background: rgba(255,255,255,.85); } .button.secondary { background:#e2eef0; border-color:#c0d6dc; } .button.secondary:hover { background:#d5e5e9; } .meta span { background:#e2eef0; border-color:#c0d6dc; color:#137461; } .streaming { background: linear-gradient(180deg,#eef4f6,#e7eff2 60%,#dde7eb); } .site-footer { background:#eef4f6; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin:0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* Prevent horizontal scroll on small screens */ html, body { max-width: 100%; overflow-x: hidden; } /* Lock body scroll when mobile nav is open */ body.no-scroll { overflow: hidden; position: fixed; width: 100%; height: 100%; } /* Touch device optimizations */ body.touch-device button, body.touch-device a { -webkit-tap-highlight-color: rgba(20, 203, 168, 0.2); } /* Ensure anchor jumps account for fixed header height */ main section[id] { scroll-margin-top: calc(var(--header-h, 64px) + 16px); } /* Ensure all containers respect viewport width */ .inner { max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* Make sure code blocks don't cause horizontal scroll */ pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; } /* Light mode removed - TinyRL is dark-first */ img{max-width:100%;display:block} a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(8, 12, 16, 0.85); border-bottom: 1px solid rgba(30, 50, 60, 0.5); padding-top: env(safe-area-inset-top); transition: var(--transition); } .site-header.is-scrolled { background: rgba(8, 12, 16, 0.95); box-shadow: 0 4px 30px -5px rgba(0,0,0,.5), 0 0 40px -10px rgba(20,203,168,0.1); border-bottom-color: rgba(20, 203, 168, 0.15); } .site-header .inner { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding: .85rem 1.5rem; } .logo-group { display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:1.2rem; text-decoration: none; color: inherit; } .logo-group:hover, .logo-group:focus { text-decoration: none; } .logo { width:36px; height:36px; filter: drop-shadow(0 0 8px rgba(20,203,168,0.3)); } .brand { background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; letter-spacing: -0.01em; } .main-nav { display:flex; gap:1.75rem; align-items:center; margin-left:auto; } .main-nav a { font-size:.9rem; font-weight: 500; color: var(--text-dim); transition: var(--transition); position: relative; } .main-nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent-grad); transition: width 0.3s ease; } .main-nav a:hover::after { width: 100%; } .main-nav a[href="#streaming"] { white-space:nowrap; } .main-nav a:hover { color: var(--text); text-decoration: none; } .main-nav .icon-link { color: var(--text-dim); transition: var(--transition); display: flex; align-items: center; padding: 0.5rem; border-radius: var(--radius-sm); gap: 0.5rem; } .main-nav .icon-link::after { display: none; } .main-nav .icon-link-text { display: none; } .main-nav .icon-link:hover { color: var(--accent); background: rgba(20, 203, 168, 0.1); } .nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding: 0.5rem; border-radius: var(--radius-sm); transition: var(--transition); min-width: 44px; min-height: 44px; } .nav-toggle:hover { background: var(--bg-soft); } .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .main-nav a.active { color: var(--text); position:relative; } .main-nav a.active:after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background: var(--accent-grad); border-radius:2px; } /* Mobile nav overlay */ .nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 40; opacity: 0; transition: opacity 0.3s ease; } .nav-overlay.active { display: block; opacity: 1; } /* Theme toggle */ .header-actions { display:flex; align-items:center; } .theme-toggle { background: var(--bg-soft); border:1px solid var(--border); color: var(--text-dim); padding:.55rem .7rem; border-radius: var(--radius-sm); cursor:pointer; font-size:.85rem; line-height:1; transition: var(--transition); } .theme-toggle:hover, .theme-toggle:focus { color: var(--text); border-color: var(--accent); outline:none; } .theme-toggle[aria-pressed="true"] { background: var(--accent-grad); color:#06251f; border-color: transparent; } /* Visible focus for accessibility */ :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .button { --btn-bg: rgba(20, 40, 50, 0.8); --btn-color: var(--text); --btn-border: var(--border); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .9rem 1.4rem; border-radius: var(--radius-sm); border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-color); font-weight: 600; font-size: .95rem; line-height: 1; box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3); transition: var(--transition); transform: translateY(0); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; min-height: 48px; touch-action: manipulation; -webkit-user-select: none; user-select: none; backdrop-filter: blur(8px); position: relative; } .button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%); opacity: 0; transition: var(--transition); } .button:hover::before { opacity: 1; } .button:hover { border-color: var(--accent); color: var(--text); text-decoration:none; transform: translateY(-2px); box-shadow: 0 8px 24px -4px rgba(20,203,168,.25), var(--glow-sm); } .button:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; } .button.primary { background: var(--accent-grad); color: #041a16; border-color: transparent; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,0.2); } .button.primary:hover { filter: brightness(1.1); box-shadow: 0 8px 30px -6px rgba(20,203,168,.5), 0 0 20px -5px rgba(20,203,168,.4); transform: translateY(-3px); } .button.primary:active { filter: brightness(0.95); } .button.secondary { background: rgba(20, 60, 70, 0.6); border-color: rgba(20, 203, 168, 0.3); backdrop-filter: blur(12px); } .button.secondary:hover { background: rgba(20, 80, 90, 0.7); border-color: var(--accent); } .button.small { padding:.6rem 1rem; font-size:.8rem; min-height: 40px; } .button.large { padding: 1.1rem 2rem; font-size: 1.1rem; min-height: 56px; letter-spacing: 0.01em; } .hero { padding: 2rem 1.5rem 4rem; padding-top: calc(var(--header-h, 64px) + 2rem); padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); padding-bottom: max(4rem, env(safe-area-inset-bottom)); background: radial-gradient(ellipse 80% 60% at 50% 120%, rgba(20,203,168,.2), transparent), radial-gradient(ellipse 60% 50% at 20% 20%, rgba(14,246,204,.12), transparent), radial-gradient(ellipse 50% 40% at 80% 30%, rgba(13,153,128,.15), transparent), linear-gradient(180deg, var(--bg) 0%, #0a1216 100%); position: relative; overflow: hidden; width: 100%; max-width: 100vw; box-sizing: border-box; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; } /* Animated gradient orbs */ .hero::before { content: ""; position: absolute; width: 600px; height: 600px; top: -200px; right: -100px; background: radial-gradient(circle, rgba(20,203,168,.15) 0%, transparent 70%); animation: float 20s ease-in-out infinite; pointer-events: none; } .hero::after { content: ""; position: absolute; width: 400px; height: 400px; bottom: -100px; left: -50px; background: radial-gradient(circle, rgba(14,246,204,.1) 0%, transparent 70%); animation: float 15s ease-in-out infinite reverse; pointer-events: none; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; animation: bounce 2s ease-in-out infinite; opacity: 0.7; transition: opacity 0.3s ease; } .scroll-indicator:hover { opacity: 1; } .scroll-indicator svg { animation: bounce-arrow 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } } @keyframes bounce-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (max-width: 768px) { .scroll-indicator { bottom: 1.5rem; } } .inner { max-width:1200px; margin:0 auto; padding: 0 1.5rem; } .hero .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; } @media (max-width: 960px) { .hero .grid { grid-template-columns: 1fr; gap: 2rem; } } .hero-copy { width: 100%; max-width: 100%; box-sizing: border-box; } .hero-copy h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; max-width: 100%; } .gradient { background: var(--accent-grad-vibrant); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(20,203,168,0.35)); } /* Section h2 with inline gradient spans */ .section h2 .gradient { background: var(--accent-grad-vibrant); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; } .tagline { font-size: 1.05rem; color: var(--text-dim); max-width: 500px; line-height: 1.55; overflow-wrap: break-word; word-wrap: break-word; } .meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; width: 100%; max-width: 100%; } .meta span { padding: .4rem .7rem; background: linear-gradient(135deg, rgba(20, 60, 70, 0.6), rgba(15, 40, 50, 0.5)); border: 1px solid rgba(20, 203, 168, 0.25); border-radius: 999px; color: var(--accent-light); font-weight: 600; white-space: nowrap; flex-shrink: 0; backdrop-filter: blur(8px); transition: var(--transition); } .meta span { position: relative; } .meta span:hover { border-color: var(--accent); box-shadow: var(--glow-sm); z-index: 10; } .hero .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; justify-content: flex-start; width: 100%; max-width: 100%; } .code-card { background: linear-gradient(145deg, #0a1216 0%, #080c10 100%); border: 1px solid rgba(30, 55, 65, 0.6); border-radius: var(--radius); padding: 0; font-family: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.45; position: relative; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.03); max-height: none; overflow: hidden; max-width: 100%; width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .code-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: rgba(20, 30, 40, 0.8); border-bottom: 1px solid rgba(30, 55, 65, 0.5); flex-shrink: 0; min-height: 40px; box-sizing: border-box; } .code-dot { width: 10px; height: 10px; min-width: 10px; min-height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; } .code-dot:first-child { background: #ff5f57; } .code-dot:nth-child(2) { background: #ffbd2e; } .code-dot:nth-child(3) { background: #28ca41; } .code-title { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; flex-shrink: 0; } .code-card pre { margin: 0; padding: 1rem; overflow: visible; } .code-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(20,203,168,0.3), transparent); } .code-sample { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre; word-wrap: normal; max-width: 100%; display: block; color: #c5dde6; } /* Syntax highlighting hints */ .code-sample .comment { color: #5d7a8c; font-style: italic; } .code-sample .keyword { color: #14cba8; } .code-sample .string { color: #e6b450; } .code-sample .number { color: #f0a0c0; } .section { padding: 4rem 1.5rem; position:relative; } .section.alt { background: var(--bg-alt); } .section h2 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin: 0 0 1rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); display: inline-block; position: relative; } .section h2::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 60px; height: 3px; background: var(--accent-grad); border-radius: 2px; box-shadow: var(--glow-sm); } /* Fallback when background-clip text unsupported */ .no-bgclip .section h2, .no-bgclip .examples h2, .no-bgclip .streaming h2, .no-bgclip .embedded h2, .no-bgclip .cta-final h2 { background:none; color: var(--text); } .section p { max-width: 860px; line-height: 1.6; color: var(--text-dim); font-size: 1rem; } .section-intro { font-size: 1.1rem !important; margin-bottom: 2rem !important; color: var(--text-dim); max-width: 700px; } .features p { font-size: 1rem; line-height: 1.65; margin-bottom: 1.25rem; color: var(--text-dim); max-width: 100%; } .features .cards-grid { display:grid; gap:1.25rem; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); margin-top: 0.5rem; } .feature-card { background: linear-gradient(145deg, rgba(15, 25, 32, 0.9), rgba(10, 18, 22, 0.95)); border: 1px solid rgba(30, 50, 60, 0.5); padding: 1.25rem 1.25rem; border-radius: var(--radius); display: flex; flex-direction: column; gap: .6rem; position: relative; overflow: hidden; transition: var(--transition); transform: translateY(0); backdrop-filter: blur(10px); } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(20,203,168,0.5), transparent); opacity: 0; transition: var(--transition); } .feature-card:hover { transform: translateY(-6px); border-color: rgba(20,203,168,.4); box-shadow: var(--shadow-lg), var(--glow-md); } .feature-card:hover::before { opacity: 1; } .feature-card:after { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 80% 80% at 80% 20%, rgba(20,203,168,.08), transparent); opacity:0; pointer-events:none; transition: var(--transition); } .feature-card:hover:after { opacity: 1; } .feature-icon { font-size: 1.25rem; margin-right: 0.5rem; display: inline; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .feature-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; display: flex; align-items: center; } .feature-card p { font-size: .85rem; color: var(--text-dim); line-height: 1.5; } /* Examples Section */ .examples { background: radial-gradient(ellipse 60% 40% at 80% 20%, rgba(20,203,168,0.08), transparent), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); border-top: 1px solid rgba(20, 203, 170, 0.15); border-bottom: 1px solid rgba(20, 203, 170, 0.15); } .examples h2 { margin-bottom: 1.5rem; font-size: clamp(1.75rem, 3.5vw, 2.2rem); text-align: left; color: var(--text); } .examples .example-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 1rem 0 2rem 0; } .example-item { background: linear-gradient(145deg, rgba(12, 20, 26, 0.95), rgba(8, 12, 16, 0.98)); border: 1px solid rgba(30, 50, 60, 0.5); padding: 1.25rem; border-radius: var(--radius); font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 0.85rem; line-height: 1.5; position: relative; transition: var(--transition); overflow: hidden; backdrop-filter: blur(8px); } .example-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .example-item:hover { border-color: rgba(20,203,168,0.5); transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--glow-md); } .example-item:hover::before { transform: scaleX(1); } .example-item h4 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; color: var(--accent); font-family: var(--font-family); display: flex; align-items: center; gap: 0.5rem; } .example-item h4::before { content: '⚡'; font-size: 0.9rem; opacity: 0.8; } .example-item pre { margin: 0; background: rgba(20, 203, 170, 0.05); border: 1px solid rgba(20, 203, 170, 0.2); border-radius: 6px; padding: 0.85rem; overflow-x: auto; } .example-item code { color: var(--text); font-size: 0.75rem; } .more-examples { margin-top: 2rem; font-size: 0.9rem; text-align: center; padding: 0.85rem 1.25rem; background: rgba(20, 203, 170, 0.03); border: 1px dashed rgba(20, 203, 170, 0.25); border-radius: 8px; color: var(--text-dim); } .more-examples a { color: var(--accent); font-weight: 600; text-decoration: none; transition: var(--transition); } .more-examples a:hover { text-decoration: underline; } /* Streaming RL Section */ .streaming { background: radial-gradient(ellipse 80% 50% at 0% 50%, rgba(20, 203, 170, 0.12), transparent), radial-gradient(ellipse 60% 40% at 100% 30%, rgba(14, 200, 180, 0.08), transparent), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); border-top: 1px solid rgba(20, 203, 170, 0.2); border-bottom: 1px solid rgba(20, 203, 170, 0.2); position: relative; overflow: hidden; } .streaming::before { content: ''; position: absolute; width: 500px; height: 500px; top: -150px; left: -100px; background: radial-gradient(circle, rgba(20, 203, 170, 0.1), transparent 70%); animation: float 18s ease-in-out infinite; pointer-events: none; } .streaming .inner { position: relative; z-index: 1; } .streaming h2 { font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin-bottom: 1rem; color: var(--text); } .streaming p { font-size: 1rem; line-height: 1.65; margin-bottom: 1.25rem; color: var(--text-dim); max-width: 100%; } .streaming-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 2rem 0; } .stream-feature { background: linear-gradient(145deg, rgba(12, 20, 26, 0.95), rgba(8, 14, 18, 0.98)); border: 1px solid rgba(30, 55, 65, 0.5); border-radius: var(--radius); padding: 1.25rem; transition: var(--transition); position: relative; overflow: hidden; } .stream-feature::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-grad); transform: scaleX(0); transition: transform 0.4s ease; } .stream-feature:hover { border-color: rgba(20,203,168,0.4); transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--glow-md); } .stream-feature:hover::before { transform: scaleX(1); } .stream-feature h4 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .stream-feature p { font-size: 0.9rem; color: var(--text-dim); margin: 0; line-height: 1.5; } .streaming ul.bullets { list-style: none; padding: 0; margin: 2.5rem 0; display: grid; gap: 1.25rem; max-width: 650px; } .bullets li { background: linear-gradient(145deg, rgba(12, 20, 26, 0.9), rgba(8, 14, 18, 0.95)); padding: 1.25rem 1.5rem; border: 1px solid rgba(30, 55, 65, 0.5); border-radius: var(--radius-sm); font-size: 1rem; position: relative; transition: var(--transition); display: flex; align-items: center; gap: 0.85rem; word-break: break-word; overflow-wrap: anywhere; } .bullets li:hover { border-color: rgba(20,203,168,0.4); transform: translateX(8px); box-shadow: var(--glow-sm); } /* Two-column variant */ .bullets.two-col { display: grid; grid-template-columns: 1fr; /* mobile */ gap: 1rem 1.25rem; width:100%; max-width: 1000px; } @media (min-width: 760px) { .bullets.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Ensure two-col inside streaming section isn't constrained by earlier max-width */ .streaming .bullets.two-col { max-width:1000px; } @media (max-width: 640px) { .bullets.two-col { grid-template-columns: 1fr; } } .bullets li::before { content: '→'; color: var(--accent); font-weight: bold; font-size: 1.2rem; flex-shrink: 0; } .bullets li:hover { border-color: var(--accent); background: rgba(20, 203, 170, 0.05); transform: translateX(5px); } @media (hover: none) { .bullets li:hover { transform: none; } } .bullets.compact li { font-size: 0.85rem; padding: 0.75rem 1rem; } .inline-link { font-weight: 600; color: var(--accent); text-decoration: none; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; } .inline-link:hover { text-decoration: underline; } /* Embedded Section */ .embedded { background: linear-gradient(135deg, rgba(20, 203, 170, 0.05), transparent); border-top: 1px solid rgba(20, 203, 170, 0.1); border-bottom: 1px solid rgba(20, 203, 170, 0.1); } .embedded h2 { font-size: 2rem; margin-bottom: 1rem; color: var(--text); } .embedded p { font-size: 1rem; line-height: 1.55; margin-bottom: 1rem; color: var(--text-dim); max-width: 100%; } .deployment-spectrum { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; } .deployment-tier { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; transition: var(--transition); } .deployment-tier:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(20, 203, 170, 0.15); } .deployment-tier h4 { color: var(--accent); font-size: 1.05rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .deployment-tier p { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.75rem; line-height: 1.45; } .deployment-tier strong { color: var(--text); font-weight: 600; } .micro-features, .edge-features { list-style: none; padding: 0; margin: 0; } .micro-features li, .edge-features li { background: rgba(20, 203, 170, 0.05); border: 1px solid rgba(20, 203, 170, 0.2); border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--text-dim); position: relative; padding-left: 1.5rem; } .micro-features li::before, .edge-features li::before { content: '•'; color: var(--accent); font-weight: bold; position: absolute; left: 0.5rem; } .embedded .columns { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2rem; } /* Ensure grid items can shrink so long lines don't force overflow */ .embedded .columns, .embedded .columns > * { min-width: 0; } /* Keep bullets and code within the viewport width */ .embedded .columns .bullets { max-width: 100%; } .embedded .columns pre, .embedded .columns code { max-width: 100%; overflow-x: auto; } /* Extra safety: lock to one column on narrow phones */ @media (max-width: 700px) { .embedded .columns { grid-template-columns: 1fr; gap: 1.5rem; } } .embedded h4 { color: var(--accent); font-size: 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .embedded h4::before { content: '⚙️'; font-size: 1rem; } .embedded pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; font-size: 0.8rem; line-height: 1.4; overflow-x: auto; margin-top: 0.75rem; } /* Wrap long commands on ultra-narrow screens to avoid page overflow */ @media (max-width: 480px) { .embedded pre, .embedded code { white-space: pre-wrap; word-break: break-word; } } /* CTA Final Section */ .cta-final { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(20,203,168,.18), transparent), radial-gradient(ellipse 50% 40% at 30% 20%, rgba(14,200,180,.08), transparent), linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); border-top: 1px solid rgba(20, 203, 170, 0.2); text-align: center; padding: 5rem 1.5rem; position: relative; overflow: hidden; } .cta-final::before { content: ''; position: absolute; width: 600px; height: 600px; bottom: -300px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(20,203,168,0.15), transparent 60%); pointer-events: none; animation: pulse 8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; } 50% { transform: translateX(-50%) scale(1.1); opacity: 1; } } .cta-final .inner { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; } .cta-final h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; color: var(--text); text-align: center; font-weight: 800; letter-spacing: -0.02em; } .cta-final p { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 2rem; max-width: 550px; text-align: center; line-height: 1.55; } .cta-row { display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; } .cta-row .button.large { padding: 1.15rem 2.25rem; font-size: 1.15rem; border-radius: var(--radius-sm); text-align: center; display: inline-flex; align-items: center; justify-content: center; min-width: 220px; } @media (max-width: 640px) { .cta-row { flex-direction: column; gap: 1rem; align-items: center; } .cta-row .button { width: 100%; max-width: 280px; justify-content: center; } } .center { text-align:center; } .site-footer { background: linear-gradient(180deg, var(--bg) 0%, #050810 100%); border-top: 1px solid rgba(20, 203, 168, 0.15); padding: 5rem 1.5rem 3rem; padding-bottom: calc(3rem + env(safe-area-inset-bottom)); position: relative; } .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(20,203,168,0.4), transparent); } .footer-grid { display: grid; gap: 3rem; grid-template-columns: 2fr repeat(3, 1fr); max-width: 1200px; margin: 0 auto; } .footer-brand { max-width: 280px; } .footer-brand .logo-group { margin-bottom: 1rem; } .footer-brand .logo { filter: drop-shadow(0 0 6px rgba(20,203,168,0.3)); } .site-footer h4 { margin: 0 0 1.25rem; font-size: .75rem; letter-spacing: .1em; font-weight: 700; text-transform: uppercase; color: var(--accent); } .site-footer p, .site-footer li, .site-footer a { font-size: .9rem; line-height: 1.6; color: var(--text-dim); } .site-footer a { display: inline-block; padding: 0.3rem 0; transition: var(--transition); position: relative; } .site-footer a:hover { color: var(--accent); text-decoration: none; } .site-footer .dim { color: var(--text-muted); font-size: 0.85rem; } ul { list-style:none; padding:0; margin:0; } ul li { margin:0 0 .5rem; } .dim { color: var(--text-muted); } /* Mobile footer improvements */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } @media (max-width: 640px) { .site-footer { padding: 3.5rem 1.25rem 2.5rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); } .footer-grid { gap: 2rem; grid-template-columns: 1fr 1fr; } .site-footer h4 { font-size: .7rem; } .site-footer p, .site-footer li, .site-footer a { font-size: .85rem; } } @media (max-width: 400px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 768px) { /* Use CSS var header height to align the off-canvas menu with the actual header */ :root { --header-h: 60px; } .site-header .inner { padding-right: max(1.25rem, env(safe-area-inset-right)); padding-left: max(1.25rem, env(safe-area-inset-left)); } .main-nav { position: fixed; top: var(--header-h); right: 0; background: rgba(13, 22, 26, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-direction: column; align-items: stretch; padding: 1.5rem max(1.25rem, env(safe-area-inset-right)); min-width: 260px; max-width: 320px; width: 75vw; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: translateX(100%); transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow: auto; -webkit-overflow-scrolling: touch; z-index: 45; box-shadow: -4px 0 20px rgba(0,0,0,0.3); } .main-nav.open { transform: translateX(0); } .nav-toggle { display: flex; align-items: center; justify-content: center; } .main-nav a { display: block; width: 100%; padding: 1rem 0.5rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.08); transition: var(--transition); } .main-nav a:hover { background: rgba(20, 203, 168, 0.1); } .main-nav a:last-of-type { border-bottom: none; } .main-nav .button { width: 100%; text-align: center; margin-top: 1rem; border-bottom: none; padding: 0.9rem 1rem; } .main-nav .icon-link { margin-top: 0.5rem; padding: 0.9rem 1rem; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .main-nav .icon-link-text { display: inline; font-weight: 600; } } /* Lock background scroll when mobile nav is open */ @media (max-width: 768px) { body.no-scroll { overflow: hidden; } } /* Quick Start */ .quickstart { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 4rem 0; padding: 3rem 2rem; } .quickstart h2 { text-align: center; margin-bottom: 3rem; font-size: 2.5rem; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .quick-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1rem; } .qs-block { background: var(--bg); border: 1px solid var(--border); padding: 1.5rem; border-radius: 8px; font-size: 0.85rem; position: relative; transition: var(--transition); overflow: hidden; } .qs-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient); opacity: 0; transition: var(--transition); } .qs-block:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(20, 203, 170, 0.15); } .qs-block:hover::before { opacity: 1; } .qs-block h3 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 0.5rem; } .qs-block h3::before { content: '▶'; font-size: 0.8rem; opacity: 0.7; } .qs-block pre { margin: 0; background: rgba(20, 203, 170, 0.05); border: 1px solid rgba(20, 203, 170, 0.2); border-radius: 6px; padding: 1rem; font-size: 0.85rem; line-height: 1.4; overflow-x: auto; } .qs-block code { color: var(--text); } /* Skip Link */ .skip-link { position:absolute; top:-40px; left:0; background:#000; color:#fff; padding:.5rem 1rem; z-index:100; border-radius:0 0 4px 0; transition: var(--transition); } .skip-link:focus { top:0; } /* Medium screens (tablets) */ /* Desktop: give the hero (first section) more side breathing room */ @media (min-width: 1024px) { .hero { /* keep top/bottom the same, expand only the horizontal padding */ padding-left: clamp(2rem, 6vw, 5rem); padding-right: clamp(2rem, 6vw, 5rem); } } @media (max-width: 980px) and (min-width: 501px) { .hero .cta-row .button { min-width: 150px; flex: 0 0 auto; } .hero .grid { gap: 2rem; } } /* Mobile Improvements */ @media (max-width: 860px) { .hero { padding: 1.5rem 1rem 3rem; padding-top: calc(var(--header-h, 64px) + 2.5rem); height: auto; min-height: auto; overflow: visible; align-items: flex-start; } .hero .grid { grid-template-columns: 1fr; gap: 1.75rem; } .hero-copy h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.2; overflow-wrap: break-word; word-wrap: break-word; } .hero-copy { text-align: left; max-width: 100%; } .hero .cta-row { flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; } .hero .cta-row .button { width: 100%; max-width: 100%; min-width: auto; padding: .75rem 1rem; font-size: .85rem; justify-content: center; text-align: center; } .hero-visual { order: 3; } .code-card { font-size: .65rem; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; width: 100%; max-width: calc(100vw - 2rem); box-sizing: border-box; } .code-header { padding: 0.6rem 0.75rem; gap: 0.4rem; } .code-dot { width: 8px; height: 8px; min-width: 8px; min-height: 8px; } .code-title { font-size: 0.6rem; } .tagline { font-size: .95rem; line-height: 1.4; max-width: 100%; } .meta { gap: .5rem; } .meta span { font-size: .65rem; padding: .3rem .5rem; } } @media (max-width:500px) { .hero { padding: 1rem .75rem 2.5rem; padding-top: calc(var(--header-h, 60px) + 2rem); height: auto; min-height: auto; overflow: visible; } .hero-copy h1 { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.25; letter-spacing: -.3px; } .hero .cta-row { flex-direction: column; align-items: stretch; gap: 0.6rem; width: 100%; } .hero .cta-row .button { width: 100%; max-width: 100%; min-width: auto; padding: .7rem .8rem; font-size: .8rem; } .tagline { font-size: .9rem; } .hero .grid { gap: 1rem; } .section { padding: 3rem .75rem; } .inner { padding: 0 .25rem; max-width: 100%; } .meta { gap: .4rem; margin-top: 1rem; } .meta span { font-size: .6rem; padding: .25rem .45rem; } .code-card { font-size: .6rem; padding: .65rem .75rem; margin: 0; } } /* Replace previous 768px block adjustments for other sections with refined queries */ @media (max-width: 800px) { .quick-grid, .features .cards-grid, .example-grid, .embedded .columns, .streaming-features, .deployment-spectrum { grid-template-columns:1fr; } .example-grid { gap:1.35rem; } .quickstart { margin:2rem 0; padding:2rem 1.1rem; } .quickstart h2, .examples h2, .streaming h2, .embedded h2, .cta-final h2 { font-size: clamp(1.6rem, 5vw, 2rem); } .features h2 { font-size: clamp(1.6rem, 5vw, 2rem); } .qs-block, .example-item { padding:1.15rem; } .deployment-tier { padding:1.15rem; } .streaming .bullets { gap:.9rem; } /* Improve code blocks on tablet/mobile */ .example-item pre { font-size: 0.75rem; } } /* Ultra-small phones */ @media (max-width: 380px) { .site-header .inner { padding: .5rem .75rem; } .logo { width: 26px; height: 26px; } .brand { font-size: .95rem; } .hero { padding: 1rem .5rem 2rem; padding-top: calc(var(--header-h, 60px) + 1.75rem); height: auto; min-height: auto; overflow: visible; } .hero-copy h1 { font-size: clamp(1.4rem, 8vw, 1.8rem); letter-spacing: -.2px; line-height: 1.3; } .code-card { font-size: .55rem; padding: .55rem .65rem; margin: 0; max-width: 100%; } .meta { gap: .35rem; margin-top: .8rem; } .meta span { padding: .2rem .4rem; font-size: .55rem; } .section { padding: 2.5rem .5rem; } .inner { padding: 0 .25rem; max-width: 100%; } .nav-toggle { font-size: 1.3rem; padding: 0.4rem; } .main-nav { min-width: 200px; max-width: 280px; width: 85vw; padding: 1rem; } .main-nav a { padding: 0.85rem 0.4rem; font-size: 0.95rem; } .tagline { font-size: .85rem; line-height: 1.4; } .hero .cta-row .button { padding: .65rem .75rem; font-size: .75rem; } } /* Scroll animations */ @media (prefers-reduced-motion: no-preference) { .feature-card, .example-item, .qs-block, .stream-feature, .deployment-tier { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.7s ease-out forwards; } .feature-card:nth-child(1) { animation-delay: 0.1s; } .feature-card:nth-child(2) { animation-delay: 0.15s; } .feature-card:nth-child(3) { animation-delay: 0.2s; } .feature-card:nth-child(4) { animation-delay: 0.25s; } .feature-card:nth-child(5) { animation-delay: 0.3s; } .feature-card:nth-child(6) { animation-delay: 0.35s; } .hero-copy { animation: fadeInUp 0.8s ease-out; } .hero-visual { animation: fadeInUp 0.8s ease-out 0.2s both; } /* Subtle scale animation for hero gradient text */ .gradient { animation: gradientShine 3s ease-in-out infinite; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes gradientShine { 0%, 100% { filter: drop-shadow(0 0 30px rgba(20,203,168,0.4)) brightness(1); } 50% { filter: drop-shadow(0 0 40px rgba(20,203,168,0.6)) brightness(1.05); } } /* Touch hover states */ @media (hover: hover) { .feature-card:hover, .example-item:hover, .stream-feature:hover { cursor: pointer; } } @media (hover: none) { .feature-card:active, .example-item:active, .stream-feature:active { transform: scale(0.98); transition-duration: 0.1s; } } /* Print styles: simplify for docs capture */ @media print { body { background:#fff; color:#000; } .site-header, .nav-toggle, .theme-toggle, .cta-row, .code-card:before { display:none !important; } a { color:#000; text-decoration:underline; } .section { page-break-inside: avoid; } } /* Performance: content-visibility for off-screen sections */ .section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 500px; } /* Ensure focus indicators are visible for keyboard navigation */ a:focus-visible, button:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Reduced motion: disable all animations and transitions */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .scroll-indicator { display: none; } .hero::before, .hero::after, .streaming::before, .cta-final::before { animation: none; } } /* ===== iPhone-specific fixes ===== */ /* iPhone SE (320px), iPhone 12/13 mini (375px) */ @media screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2) { .hero-copy h1 { font-size: 1.5rem; line-height: 1.25; } .tagline { font-size: 0.875rem; line-height: 1.5; } .meta { flex-wrap: wrap; gap: 0.4rem; } .meta span { font-size: 0.6rem; padding: 0.3rem 0.5rem; } .code-card { font-size: 0.6rem; border-radius: 12px; } .code-card pre { padding: 0.75rem; } .code-header { padding: 0.5rem 0.75rem; } .hero .cta-row .button { font-size: 0.85rem; padding: 0.8rem 1rem; min-height: 48px; } .section h2 { font-size: 1.5rem; } .feature-card { padding: 1rem; } .feature-card h3 { font-size: 1rem; } .feature-card p { font-size: 0.85rem; } } /* Standard iPhone (390px-428px) - iPhone 12/13/14/15 */ @media screen and (min-width: 376px) and (max-width: 430px) and (-webkit-min-device-pixel-ratio: 2) { .hero-copy h1 { font-size: 1.75rem; line-height: 1.2; } .tagline { font-size: 0.95rem; } .code-card { font-size: 0.65rem; } .code-card pre { padding: 0.85rem; } .meta span { font-size: 0.65rem; } } /* Fix for iOS Safari's 100vh including address bar - only on touch devices */ @supports (-webkit-touch-callout: none) { @media (pointer: coarse) and (max-width: 1024px) { .hero { height: auto; min-height: auto; overflow: visible; } .hero .grid { min-height: auto; } .hero-visual { max-width: 100%; overflow-x: auto; } } } /* Ensure proper touch handling for iOS */ @media (pointer: coarse) { .button, .main-nav a, .nav-toggle, .feature-card, .meta span { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Larger touch targets for iOS */ .main-nav a { min-height: 44px; display: flex; align-items: center; } .nav-toggle { min-width: 44px; min-height: 44px; } }