/* Custom styles, layered on top of the compiled Tailwind utilities (css/tailwind.css). Load order in : tailwind.css first, then this file. */ html { scroll-behavior: smooth; scroll-padding-top: 96px; interpolate-size: allow-keywords; } body { -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Same hero wash as x10marketing.com */ .hero-mesh { background: radial-gradient(60% 60% at 85% 5%, rgba(10,179,78,.14) 0%, rgba(10,179,78,0) 60%), radial-gradient(50% 50% at 5% 25%, rgba(59,130,246,.08) 0%, rgba(59,130,246,0) 60%), radial-gradient(55% 55% at 60% 100%, rgba(132,204,22,.10) 0%, rgba(132,204,22,0) 60%); } /* Dark features section: soft brand-green and teal glows behind the cards */ .night-glow { background: radial-gradient(45% 35% at 15% 0%, rgba(10,179,78,.20) 0%, rgba(10,179,78,0) 70%), radial-gradient(40% 30% at 90% 30%, rgba(20,184,166,.12) 0%, rgba(20,184,166,0) 70%), radial-gradient(50% 30% at 50% 100%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 70%); } .card-glow-green { background: radial-gradient(70% 60% at 100% 100%, rgba(10,179,78,.22), rgba(10,179,78,0) 70%), rgba(255,255,255,.035); } .card-glow-teal { background: radial-gradient(70% 60% at 0% 100%, rgba(20,184,166,.20), rgba(20,184,166,0) 70%), rgba(255,255,255,.035); } .card-glow-sun { background: radial-gradient(70% 60% at 100% 0%, rgba(245,166,35,.16), rgba(245,166,35,0) 70%), rgba(255,255,255,.035); } /* ---------- Header: full width at the top, a floating pill once scrolled ---------- */ .nav-shell { max-width: 80rem; border: 1px solid transparent; transition: max-width .4s cubic-bezier(.2,.8,.2,1), background-color .3s ease, box-shadow .3s ease, border-color .3s ease; } #site-header.is-scrolled .nav-shell { max-width: 54rem; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-color: rgba(30,37,34,.07); box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 30px rgba(16,24,40,.10); } #site-header.is-scrolled.is-dark .nav-shell { background: rgba(18,23,21,.72); border-color: rgba(255,255,255,.09); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .nav-link { color: #5C6B63; transition: color .2s ease; } .nav-link:hover { color: #1E2522; } .nav-name { color: #1E2522; transition: color .2s ease; } #site-header.is-dark .nav-link { color: rgba(255,255,255,.7); } #site-header.is-dark .nav-link:hover { color: #fff; } #site-header.is-dark .nav-name { color: #fff; } #site-header.is-dark #navToggle { color: #fff; } #site-header.is-dark #navToggle:hover { background: rgba(255,255,255,.08); } /* ---------- Phone mockup ---------- */ .phone { position: relative; border-radius: 3.1rem; padding: 11px; background: linear-gradient(145deg, #2c3330 0%, #151a18 45%, #262c29 100%); } .phone::before { /* side button hint */ content: ""; position: absolute; right: -3px; top: 150px; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: #222826; } .phone::after { content: ""; position: absolute; left: -3px; top: 120px; width: 3px; height: 38px; border-radius: 3px 0 0 3px; background: #222826; box-shadow: 0 56px 0 #222826; } .phone-screen { position: relative; aspect-ratio: 9 / 19.3; border-radius: 2.45rem; overflow: hidden; background: #F2F2F7; isolation: isolate; } .island { position: absolute; z-index: 30; left: 50%; top: 9px; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 999px; background: #0b0d0c; } .screen { /* each screen is opaque; the incoming one fades in on top, the old one drops out after */ position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity 0s linear .35s, visibility 0s linear .35s; } .screen.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity .35s ease; } /* A hairline separator like UIKit's */ .hairline { box-shadow: inset 0 -0.5px 0 rgba(60,60,67,.22); } /* iOS-style activity indicator */ .ios-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(60,60,67,.18); border-top-color: rgba(60,60,67,.6); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* The playing row's stop button pulses gently */ .playing-ring { animation: playing 1.6s ease-in-out infinite; } @keyframes playing { 0%, 100% { box-shadow: 0 0 0 0 rgba(13,107,199,.35); } 50% { box-shadow: 0 0 0 6px rgba(13,107,199,0); } } /* Recording mic ring (matches the app's red pulsing ring) */ .rec-ring { position: absolute; inset: -7px; border-radius: 999px; border: 5px solid rgba(255,59,48,.4); animation: rec 1.4s ease-in-out infinite; } @keyframes rec { 0%, 100% { transform: scale(.95); opacity: .9; } 50% { transform: scale(1.12); opacity: .2; } } /* Floating phrase cards around the hero phone */ .float-card { animation: float 7s ease-in-out infinite; } .float-card:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2s; } .float-card:nth-child(3n) { animation-duration: 9.5s; animation-delay: -4s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Listening waveform */ .wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; } .wave i { display: block; width: 2px; height: 100%; border-radius: 2px; background: currentColor; animation: wave 1s ease-in-out infinite; } .wave i:nth-child(2) { animation-delay: -.8s; } .wave i:nth-child(3) { animation-delay: -.6s; } .wave i:nth-child(4) { animation-delay: -.4s; } @keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } /* Language cycler in the "one phrasebook" card */ .cycle-text { transition: opacity .3s ease, transform .3s ease; } .cycle-text.is-out { opacity: 0; transform: translateY(6px); } /* Scroll reveal. Content stays visible without JS. */ .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Conversation demo turns */ .turn-in { animation: turnIn .35s cubic-bezier(.2,.8,.2,1) both; } @keyframes turnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* FAQ accordion: native
with a smooth open/close slide (same as x10marketing.com). Browsers without ::details-content just toggle instantly. */ .faq-item::details-content { block-size: 0; overflow: hidden; transition-property: block-size, content-visibility; transition-duration: .28s; transition-timing-function: ease; transition-behavior: allow-discrete; } .faq-item[open]::details-content { block-size: auto; } .faq-item summary::-webkit-details-marker { display: none; } @media (prefers-reduced-motion: reduce) { .float-card, .playing-ring, .rec-ring, .wave i, .ios-spinner, .turn-in { animation: none; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } .screen, .screen.is-active, .cycle-text { transition: none; transform: none; } .nav-shell { transition: none; } .faq-item::details-content { transition: none; } }