/* ========================================================================== 9Tube — Premium theme (dark, Apple-style) Shared design system for landing + document pages Accent: iOS pink #ff375f · Font: system (San Francisco) ========================================================================== */ :root { --bg: #08080c; --bg-2: #0e0e15; --bg-3: #14141d; --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.09); --border-2: rgba(255, 255, 255, 0.14); --text: #f5f5f7; --text-dim: #a1a1ab; --text-mut: #6e6e78; --accent: #ff375f; --accent-2: #ff6b8a; --accent-3: #ff9d6c; --accent-soft: rgba(255, 55, 95, 0.14); --glow: rgba(255, 55, 95, 0.45); --radius: 22px; --radius-sm: 14px; --maxw: 1180px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Ambient background glows applied to of landing pages */ body.landing::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(60rem 60rem at 82% -8%, rgba(255, 55, 95, 0.22), transparent 60%), radial-gradient(50rem 50rem at 8% 12%, rgba(120, 80, 255, 0.12), transparent 55%), radial-gradient(70rem 40rem at 50% 108%, rgba(255, 55, 95, 0.1), transparent 60%), var(--bg); } body.landing::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); } a { color: var(--accent-2); text-decoration: none; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s; white-space: nowrap; } .btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 26px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .btn-ghost { color: var(--text); background: var(--surface); border-color: var(--border-2); backdrop-filter: blur(12px); } .btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); } /* App Store badge */ .appstore { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 20px; border-radius: 15px; background: #ffffff; color: #05050a; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.9); } .appstore:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -14px rgba(255, 55, 95, 0.5); } .appstore svg { width: 28px; height: 28px; flex: none; } .appstore .as-txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } .appstore .as-txt small { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.7; } .appstore .as-txt b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(10, 10, 16, 0.72); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--border); } .nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 18px; color: var(--text); } .brand img { height: 26px; width: auto; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { color: var(--text-dim); font-size: 14.5px; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 64px 0 40px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-2); background: var(--accent-soft); border: 1px solid rgba(255, 55, 95, 0.25); padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .hero h1 { font-size: clamp(2.6rem, 6vw, 4.35rem); line-height: 1.03; letter-spacing: -0.035em; font-weight: 800; margin: 0 0 20px; } .hero h1 .grad { background: linear-gradient(120deg, var(--accent-2) 10%, var(--accent) 55%, #ff9d6c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--text-dim); max-width: 33ch; margin: 0 0 32px; line-height: 1.55; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-qr { display: flex; align-items: center; gap: 12px; color: var(--text-mut); font-size: 13px; font-weight: 500; } .hero-qr img { width: 62px; height: 62px; border-radius: 12px; background: #fff; padding: 5px; } .hero-meta { margin-top: 30px; display: flex; gap: 26px; flex-wrap: wrap; color: var(--text-mut); font-size: 13.5px; } .hero-meta span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta svg { width: 16px; height: 16px; color: var(--accent); } /* Floating device cluster (CSS-framed screenshots) */ .phones { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; } .device { position: relative; border-radius: 42px; padding: 5px; background: linear-gradient(155deg, #3c3c48, #0a0a11 62%); box-shadow: 0 42px 70px -22px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.06); } .device img { display: block; width: 100%; border-radius: 37px; } .device.land { border-radius: 30px; } .device.land img { border-radius: 25px; } .phones .device { position: absolute; transition: transform 0.6s var(--ease); } .phones .dev-main { width: 256px; left: 50%; margin-left: -128px; top: 2px; z-index: 3; animation: floatM 6s ease-in-out infinite; } .phones .dev-l { width: 212px; left: 50%; margin-left: -250px; top: 48px; z-index: 2; transform: rotate(-8deg); animation: floatL 7s ease-in-out infinite; } .phones .dev-r { width: 212px; left: 50%; margin-left: 38px; top: 48px; z-index: 1; transform: rotate(8deg); animation: floatR 6.5s ease-in-out infinite 0.4s; } .phones::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -180px 0 0 -180px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 68%); filter: blur(34px); z-index: 0; } @keyframes floatM { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes floatL { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-12px); } } @keyframes floatR { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(13px); } } /* ---------- Sections ---------- */ .section { padding: 88px 0; position: relative; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .section-head .kicker { color: var(--accent-2); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; } .section-head h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; font-weight: 800; line-height: 1.08; margin: 14px 0 16px; } .section-head p { color: var(--text-dim); font-size: 1.1rem; margin: 0; } /* Views: 3 big cards */ .views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .view-card { position: relative; padding: 40px 32px; border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s; } .view-card::after { content: ""; position: absolute; top: -40%; right: -30%; width: 220px; height: 220px; background: radial-gradient(circle, var(--accent-soft), transparent 70%); opacity: 0; transition: opacity 0.4s; } .view-card:hover { transform: translateY(-6px); border-color: var(--border-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); } .view-card:hover::after { opacity: 1; } .view-ic { width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid rgba(255, 55, 95, 0.28); margin-bottom: 24px; } .view-ic img { width: 34px; height: 34px; } .view-card h3 { font-size: 1.4rem; letter-spacing: -0.02em; margin: 0 0 10px; font-weight: 700; } .view-card p { color: var(--text-dim); font-size: 0.98rem; margin: 0; } /* Features grid */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .feat { display: flex; align-items: center; gap: 16px; padding: 22px 22px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); transition: transform 0.35s var(--ease), background 0.35s, border-color 0.35s; } .feat:hover { transform: translateY(-4px); background: var(--surface-2); border-color: var(--border-2); } .feat-ic { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid rgba(255, 55, 95, 0.22); } .feat-ic img { width: 26px; height: 26px; } .feat b { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; } .feat span { display: block; color: var(--text-mut); font-size: 0.85rem; font-weight: 400; } /* Showcase gallery (framed screens) */ .gallery { display: flex; gap: 30px; overflow-x: auto; padding: 24px 24px 34px; scroll-snap-type: x mandatory; align-items: center; justify-content: safe center; -webkit-overflow-scrolling: touch; } .gallery::-webkit-scrollbar { height: 8px; } .gallery::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; } .gallery .device { flex: none; scroll-snap-align: center; transition: transform 0.4s var(--ease); } .gallery .device.port { width: 238px; } .gallery .device.land { width: 452px; } .gallery .device:hover { transform: translateY(-10px) scale(1.02); } /* CTA */ .cta-wrap { position: relative; } .cta { position: relative; text-align: center; padding: 72px 32px; border-radius: 32px; border: 1px solid var(--border-2); background: radial-gradient(40rem 20rem at 50% 0%, rgba(255, 55, 95, 0.22), transparent 65%), linear-gradient(180deg, var(--bg-3), var(--bg-2)); overflow: hidden; } .cta h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.03em; font-weight: 800; margin: 0 0 16px; } .cta p { color: var(--text-dim); font-size: 1.15rem; margin: 0 auto 32px; max-width: 42ch; } .cta-actions { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--border); padding: 56px 0 40px; margin-top: 20px; } .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; } .footer .brand { margin-bottom: 14px; } .footer-tag { color: var(--text-mut); font-size: 14px; max-width: 30ch; } .footer-links { display: flex; gap: 60px; flex-wrap: wrap; } .footer-col h5 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mut); margin: 0 0 16px; font-weight: 600; } .footer-col a { display: block; color: var(--text-dim); font-size: 14.5px; margin-bottom: 11px; transition: color 0.2s; } .footer-col a:hover { color: var(--accent-2); } .social { display: flex; gap: 12px; margin-top: 18px; } .social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); transition: all 0.3s var(--ease); } .social a:hover { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 24px -8px var(--glow); } .social svg { width: 18px; height: 18px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-mut); font-size: 13.5px; } /* ---------- Scroll reveal (only hidden when JS is active, so no-JS shows all) ---------- */ .reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .reveal { opacity: 0; transform: translateY(28px); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } /* ========================================================================== Document pages (About / Privacy / Terms / EULA) — dark article theme ========================================================================== */ body.doc-page { background: var(--bg); } body.doc-page::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(50rem 40rem at 85% -10%, rgba(255, 55, 95, 0.1), transparent 60%), var(--bg); } .doc-nav { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 16, 0.72); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--border); } .doc { max-width: 820px; margin: 0 auto; padding: 60px 24px 90px; font-size: 16px; color: var(--text-dim); } .doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { color: var(--text); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 2em 0 0.6em; scroll-margin-top: 84px; } .doc h1 { font-size: clamp(2rem, 4vw, 2.7rem); letter-spacing: -0.03em; margin-top: 0.2em; } .doc > h1:first-child, .doc > h2:first-child { font-size: clamp(2rem, 4.4vw, 2.7rem); letter-spacing: -0.03em; margin-top: 0; margin-bottom: 0.5em; } .doc h2 { font-size: 1.6rem; padding-top: 0.4em; } .doc h3 { font-size: 1.28rem; } .doc h4 { font-size: 1.1rem; } .doc p, .doc li { line-height: 1.75; } .doc a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(255, 107, 138, 0.35); transition: color 0.2s, border-color 0.2s; } .doc a:hover { color: var(--accent); border-color: var(--accent); } .doc strong { color: var(--text); font-weight: 600; } .doc ul, .doc ol { padding-left: 1.4em; } .doc li { margin: 0.4em 0; } .doc li::marker { color: var(--accent); } .doc hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; } .doc blockquote { margin: 1.4em 0; padding: 4px 20px; border-left: 3px solid var(--accent); color: var(--text-dim); background: var(--surface); border-radius: 0 10px 10px 0; } .doc table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.94em; } .doc th, .doc td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; } .doc th { background: var(--surface-2); color: var(--text); } .doc code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: 0.88em; color: var(--accent-2); } .doc pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px; overflow: auto; } .doc pre code { background: none; border: none; color: var(--text-dim); padding: 0; } .doc img { border-radius: 12px; margin: 1.2em 0; } .doc a.anchor { display: none !important; } /* hide markdown export anchor stubs */ .doc-hero { text-align: center; padding: 20px 0 8px; } .doc-hero .kicker { color: var(--accent-2); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } .doc-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 14px; font-weight: 500; } .doc-back:hover { color: var(--text); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 10px; } .hero .lead { max-width: none; margin-inline: auto; } .hero-actions, .hero-meta { justify-content: center; } .phones { height: 470px; margin-top: 20px; } .views { grid-template-columns: 1fr; } .features { grid-template-columns: repeat(2, 1fr); } .nav-links { display: none; } } @media (max-width: 560px) { .section { padding: 64px 0; } .features { grid-template-columns: 1fr; } .phones .dev-main { width: 216px; } .phones .dev-l, .phones .dev-r { display: none; } .hero-meta { gap: 16px; } .footer-links { gap: 32px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }