diff --git a/landing/partials/header.html b/landing/partials/header.html index 4c7e21f6a..93503584b 100644 --- a/landing/partials/header.html +++ b/landing/partials/header.html @@ -1,3 +1,6 @@ + + +
diff --git a/landing/polish.css b/landing/polish.css new file mode 100644 index 000000000..1b773025c --- /dev/null +++ b/landing/polish.css @@ -0,0 +1,567 @@ +/* ARSAS visual polish layer. + Loaded after styles.css so the product site can evolve without disturbing the + stable information architecture or workflow-specific styles. */ + +:root { + --font-sans: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; + --polish-text: #f7fbff; + --polish-muted: #bdccde; + --polish-subtle: #8fa5bd; + --polish-line: rgba(203, 228, 255, .14); + --polish-surface: rgba(10, 26, 47, .68); + --polish-surface-strong: rgba(15, 35, 61, .82); + --polish-shadow: 0 24px 70px rgba(0, 8, 25, .34); +} + +html { + font-family: var(--font-sans); + font-synthesis: none; +} + +body { + color: var(--polish-text); + font-family: var(--font-sans); + font-feature-settings: "liga" 1, "calt" 1, "cv11" 1; + font-kerning: normal; + font-optical-sizing: auto; + letter-spacing: -.008em; + line-height: 1.6; + background: + radial-gradient(circle at 12% 2%, rgba(56, 189, 248, .18), transparent 31rem), + radial-gradient(circle at 84% 18%, rgba(99, 102, 241, .14), transparent 34rem), + linear-gradient(180deg, #07111f 0%, #081528 46%, #07111f 100%); +} + +::selection { + color: #fff; + background: rgba(79, 120, 255, .62); +} + +p, li, figcaption { + text-wrap: pretty; +} + +h1, h2, h3, +.brand, +.btn, +.nav-links a, +.kicker, +.eyebrow, +.metric strong, +.footer-title { + font-family: var(--font-sans); +} + +h1, h2, h3 { + color: #fbfdff; + font-variation-settings: "wght" 720; +} + +h1 { + line-height: 1.045; + letter-spacing: -.048em; + font-weight: 760; +} + +h2 { + line-height: 1.08; + letter-spacing: -.04em; + font-weight: 730; +} + +h3 { + line-height: 1.22; + letter-spacing: -.024em; + font-weight: 680; +} + +.site-header { + background: rgba(6, 16, 30, .78); + border-bottom-color: rgba(197, 225, 255, .1); + box-shadow: 0 10px 30px rgba(0, 7, 20, .14); + backdrop-filter: blur(22px) saturate(160%); +} + +.nav-shell { + min-height: 76px; +} + +.brand { + gap: .68rem; + font-weight: 760; + letter-spacing: -.025em; +} + +.brand-mark { + width: 40px; + height: 40px; + border-radius: 13px; + box-shadow: 0 10px 30px rgba(59, 130, 246, .25); +} + +.brand small { + color: #8da3bc; + font-size: .78em; + font-weight: 520; + letter-spacing: -.01em; +} + +.nav-links { + gap: .18rem; +} + +.nav-links a { + color: #afc0d3; + font-size: .91rem; + font-weight: 610; + letter-spacing: -.012em; + transition: color .18s ease, background .18s ease, transform .18s ease, border-color .18s ease; +} + +.nav-links a:hover { + color: #f8fbff; + background: rgba(255, 255, 255, .075); + transform: translateY(-1px); +} + +.nav-links a[aria-current="page"] { + color: #fff; + background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.065)); + box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); +} + +.nav-cta { + padding: .72rem 1.05rem !important; + border: 1px solid rgba(172, 201, 255, .15) !important; + border-radius: 12px !important; + font-weight: 700 !important; + letter-spacing: -.015em; + box-shadow: 0 12px 30px rgba(70, 87, 235, .25), inset 0 1px 0 rgba(255,255,255,.16); +} + +.hero { + padding: 6.6rem 0 4.6rem; +} + +.hero-grid { + gap: clamp(3rem, 5vw, 4.8rem); +} + +.eyebrow { + padding: .46rem .78rem; + color: #d9f2ff; + background: rgba(32, 154, 220, .09); + border-color: rgba(104, 205, 255, .24); + font-size: .76rem; + font-weight: 720; + letter-spacing: .055em; + box-shadow: inset 0 1px 0 rgba(255,255,255,.04); +} + +.hero h1 { + max-width: 790px; + margin-top: 1.35rem; + font-size: clamp(3.2rem, 5vw, 4.55rem); +} + +.gradient-text { + background: linear-gradient(105deg, #eefaff 0%, #75d9ff 38%, #7b9dff 67%, #c595ff 100%); + background-clip: text; + -webkit-background-clip: text; + filter: saturate(1.05); +} + +.hero-copy { + max-width: 650px; + margin-top: 1.55rem; + color: var(--polish-muted); + font-size: clamp(1.05rem, 1.55vw, 1.18rem); + font-weight: 430; + line-height: 1.67; + letter-spacing: -.012em; +} + +.hero-actions, +.section-actions { + gap: .72rem; +} + +.btn { + min-height: 50px; + padding: .78rem 1.14rem; + border-color: rgba(202, 225, 255, .14); + border-radius: 13px; + background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045)); + font-weight: 680; + letter-spacing: -.015em; + box-shadow: inset 0 1px 0 rgba(255,255,255,.035); +} + +.btn:hover { + border-color: rgba(205, 229, 255, .27); + background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.06)); + box-shadow: 0 10px 28px rgba(0, 9, 28, .18), inset 0 1px 0 rgba(255,255,255,.055); + transform: translateY(-2px); +} + +.btn-primary { + background: linear-gradient(135deg, #337df2 0%, #5367e9 55%, #8b5cf6 100%); + box-shadow: 0 16px 38px rgba(66, 82, 232, .28), inset 0 1px 0 rgba(255,255,255,.18); +} + +.btn-primary:hover { + background: linear-gradient(135deg, #3d87fa 0%, #5c70ef 55%, #9565f7 100%); + box-shadow: 0 20px 44px rgba(66, 82, 232, .34), inset 0 1px 0 rgba(255,255,255,.2); +} + +.hero-proof { + margin-top: 1.5rem; + color: var(--polish-subtle); + font-size: .86rem; + letter-spacing: -.008em; +} + +.hero-window { + border-color: rgba(201, 227, 255, .17); + border-radius: 27px; + background: rgba(14, 31, 53, .72); + box-shadow: 0 36px 90px rgba(0, 8, 26, .43), 0 0 0 1px rgba(255,255,255,.025); + transform: perspective(1500px) rotateY(-3deg) rotateX(1.2deg); +} + +.hero-visual::before { + inset: 5% 1% -4%; + background: linear-gradient(135deg, rgba(56,189,248,.28), rgba(99,102,241,.24), rgba(139,92,246,.18)); + filter: blur(78px); +} + +.floating-chip { + padding: .66rem .82rem; + border-color: rgba(206, 230, 255, .16); + border-radius: 13px; + background: rgba(7, 20, 39, .9); + font-size: .78rem; + font-weight: 650; + letter-spacing: -.01em; + box-shadow: 0 16px 38px rgba(0, 5, 18, .35); +} + +.substation-scene { + border-color: rgba(132, 211, 252, .22); + border-radius: 28px; + box-shadow: 0 30px 78px rgba(0, 8, 25, .3), inset 0 1px 0 rgba(255,255,255,.025); +} + +.substation-copy h2 { + font-weight: 720; + letter-spacing: -.038em; +} + +.substation-copy p { + color: #c3d1e1; + line-height: 1.68; +} + +.metric-grid { + border-color: var(--polish-line); + background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.032)); + box-shadow: 0 18px 48px rgba(0, 8, 24, .16); +} + +.metric { + padding: 1.45rem 1.55rem; +} + +.metric strong { + color: #f9fcff; + font-size: 1.13rem; + font-weight: 690; + letter-spacing: -.025em; +} + +.metric span { + display: block; + margin-top: .2rem; + color: #8fa4bc; + line-height: 1.48; +} + +.section { + padding: 6.2rem 0; +} + +.section-tight { + padding: 4rem 0; +} + +.section-head { + max-width: 790px; + margin-bottom: 2.45rem; +} + +.kicker { + color: #55c8ff; + font-size: .76rem; + font-weight: 740; + letter-spacing: .09em; +} + +.section-head h2 { + margin-top: .72rem; + font-size: clamp(2.15rem, 4.35vw, 3.55rem); +} + +.section-head p { + max-width: 720px; + margin-top: 1.05rem; + color: var(--polish-muted); + font-size: 1.03rem; + line-height: 1.72; + letter-spacing: -.009em; +} + +.section-head.center p { + margin-inline: auto; +} + +.card, +.panel, +.comparison-panel { + border-color: rgba(199, 224, 255, .13); + background: linear-gradient(180deg, rgba(17, 36, 61, .7), rgba(8, 22, 42, .58)); + box-shadow: 0 16px 48px rgba(0, 8, 24, .13), inset 0 1px 0 rgba(255,255,255,.025); +} + +.card { + padding: 1.55rem; + border-radius: 22px; + transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; +} + +.card:hover { + border-color: rgba(114, 205, 255, .24); + background: linear-gradient(180deg, rgba(20, 43, 72, .76), rgba(9, 25, 46, .62)); + box-shadow: 0 22px 58px rgba(0, 8, 25, .2), inset 0 1px 0 rgba(255,255,255,.04); + transform: translateY(-3px); +} + +.card h3 { + font-size: 1.16rem; + font-weight: 680; +} + +.card p, +.card li, +.panel p, +.comparison-panel p, +.comparison-panel li { + color: #aebfd2; + line-height: 1.65; +} + +.callout { + border-color: rgba(96, 200, 255, .24); + background: + radial-gradient(circle at 8% 4%, rgba(56,189,248,.17), transparent 19rem), + radial-gradient(circle at 90% 80%, rgba(139,92,246,.11), transparent 20rem), + linear-gradient(135deg, rgba(31, 83, 150, .14), rgba(80, 46, 138, .09)); + box-shadow: 0 28px 72px rgba(0, 8, 25, .25); +} + +.page-hero { + padding: 5.8rem 0 3.4rem; +} + +.page-hero h1 { + max-width: 900px; + font-size: clamp(2.8rem, 5.6vw, 4.75rem); + letter-spacing: -.047em; +} + +.page-hero p { + max-width: 760px; + color: var(--polish-muted); + font-size: 1.08rem; + line-height: 1.72; +} + +.breadcrumbs { + color: #8ca0b8; + font-weight: 520; +} + +.prose { + max-width: 78ch; +} + +.prose h2 { + margin-top: 2.85rem; + font-size: clamp(1.85rem, 3vw, 2.2rem); + letter-spacing: -.035em; +} + +.prose h3 { + margin-top: 1.85rem; + font-weight: 680; +} + +.prose p, +.prose li { + color: #b5c5d7; + line-height: 1.76; + letter-spacing: -.006em; +} + +.prose code, +pre, +code { + font-family: var(--font-mono); +} + +.site-footer { + margin-top: 4.5rem; + padding: 3.5rem 0 2.8rem; + border-top-color: rgba(202, 226, 255, .11); + background: linear-gradient(180deg, rgba(4, 13, 25, .25), rgba(3, 10, 20, .6)); +} + +.footer-grid { + grid-template-columns: 1.35fr repeat(4, minmax(0, .72fr)); + gap: 2rem 1.5rem; +} + +.footer-brand p { + color: #8ea2ba; + line-height: 1.65; +} + +.footer-title { + color: #edf7ff; + font-weight: 720; + letter-spacing: .075em; +} + +.footer-links { + gap: .48rem; +} + +.footer-links a { + color: #8fa4bc; + font-size: .88rem; + line-height: 1.45; + transition: color .18s ease, transform .18s ease; +} + +.footer-links a:hover { + color: #f4f9ff; + transform: translateX(2px); +} + +.footer-bottom { + color: #758aa3; +} + +:where(a, button, input, select, textarea):focus-visible { + outline: 3px solid rgba(92, 200, 255, .72); + outline-offset: 3px; +} + +@media (max-width: 1080px) { + .nav-links a { + padding-inline: .68rem; + font-size: .88rem; + } +} + +@media (max-width: 980px) { + .hero { + padding-top: 5.3rem; + } + + .hero h1 { + max-width: 850px; + font-size: clamp(3rem, 8vw, 4.25rem); + } + + .footer-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .footer-brand { + grid-column: 1 / -1; + } +} + +@media (max-width: 760px) { + .nav-shell { + min-height: 72px; + } + + .nav-links { + top: 72px; + background: rgba(5, 15, 29, .98); + border-color: rgba(200, 225, 255, .14); + box-shadow: 0 24px 60px rgba(0, 7, 22, .38); + } + + .hero { + padding: 4.7rem 0 3.6rem; + } + + .hero h1 { + font-size: clamp(2.65rem, 12vw, 3.75rem); + letter-spacing: -.044em; + } + + .hero-copy { + font-size: 1.04rem; + } + + .section { + padding: 4.8rem 0; + } + + .section-tight { + padding: 3.5rem 0; + } + + .footer-grid { + grid-template-columns: 1fr; + } + + .footer-brand { + grid-column: auto; + } +} + +@media (max-width: 520px) { + .brand small { + display: none; + } + + .hero { + padding-top: 4rem; + } + + .hero h1 { + font-size: clamp(2.45rem, 13vw, 3.35rem); + } + + .eyebrow { + border-radius: 14px; + line-height: 1.4; + } + + .section-head h2 { + font-size: clamp(2rem, 10vw, 2.8rem); + } +} + +@media (prefers-reduced-motion: reduce) { + .card:hover, + .nav-links a:hover, + .footer-links a:hover { + transform: none; + } +}