2026-07-05 06:41:32 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-07-14 15:27:33 +00:00
< title > Features — quiXzoom< / title >
2026-07-05 06:41:32 +00:00
< meta name = "description" content = "Discover quiXzoom features: AI-powered quality review, real-time tracking, global coverage, and enterprise-grade security." >
< link rel = "canonical" href = "https://www.quixzoom.com/features" >
2026-07-14 15:27:33 +00:00
< link rel = "icon" type = "image/svg+xml" href = "/favicon.svg" >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Features — quiXzoom" >
< meta property = "og:description" content = "Discover quiXzoom features: AI-powered quality review, real-time tracking, global coverage, and enterprise-grade security." >
< meta property = "og:url" content = "https://www.quixzoom.com/features" >
< meta property = "og:image" content = "https://www.quixzoom.com/images/og-image.jpg" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:image" content = "https://www.quixzoom.com/images/og-image.jpg" >
2026-07-05 06:41:32 +00:00
< style >
: root {
--bg-dark : #f5f5f7 ;
--blue : #0066FF ;
--blue-dark : #0052CC ;
--blue-glow : rgba ( 0 , 102 , 255 , 0.10 ) ;
--text-dark : #1d1d1f ;
--text-body : #3a3a3a ;
--text-muted : #6e6e73 ;
--surface : #ffffff ;
--surface-2 : #f5f5f7 ;
--border : rgba ( 0 , 0 , 0 , 0.09 ) ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , 'Helvetica Neue' , sans-serif ;
2026-07-14 15:27:33 +00:00
background : #ffffff ;
2026-07-05 06:41:32 +00:00
color : var ( - - text - dark ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
. container { max-width : 1200 px ; margin : 0 auto ; padding : 0 24 px ; }
/* Nav */
nav {
position : sticky ; top : 0 ; z-index : 300 ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 20 px ) ;
border-bottom : 1 px solid var ( - - border ) ;
}
. nav-inner { display : flex ; align-items : center ; justify-content : space-between ; height : 64 px ; }
. nav-logo { font-size : 1.375 rem ; font-weight : 900 ; color : var ( - - text - dark ) ; text-decoration : none ; }
. nav-logo span { color : var ( - - blue ) ; }
. nav-links { display : flex ; gap : 32 px ; }
. nav-links a { color : var ( - - text - muted ) ; text-decoration : none ; font-weight : 500 ; transition : color 0.15 s ; }
. nav-links a : hover { color : var ( - - text - dark ) ; }
. nav-links a . active { color : var ( - - blue ) ; }
2026-07-14 15:27:33 +00:00
. btn-nav { background : var ( - - blue ) ; color : #fff ; border : none ; border-radius : 24 px ; padding : 10 px 24 px ; font-size : 0.9375 rem ; font-weight : 700 ; transition : background 0.15 s ; text-decoration : none ; }
. btn-nav : hover { background : var ( - - blue - dark ) ; }
2026-07-05 06:41:32 +00:00
/* Hero */
. hero { padding : 80 px 0 60 px ; text-align : center ; background : var ( - - surface ) ; }
. hero h1 { font-size : clamp ( 2 rem , 5 vw , 3.5 rem ) ; font-weight : 800 ; letter-spacing : -0.03 em ; line-height : 1.1 ; margin-bottom : 20 px ; }
. hero p { font-size : 1.25 rem ; color : var ( - - text - body ) ; max-width : 600 px ; margin : 0 auto ; }
/* Features Grid */
. features { padding : 60 px 0 ; }
. section-title { text-align : center ; margin-bottom : 48 px ; }
. section-title h2 { font-size : 2 rem ; font-weight : 700 ; margin-bottom : 12 px ; }
. section-title p { font-size : 1.1 rem ; color : var ( - - text - muted ) ; }
. feature-grid { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ) ; gap : 24 px ; }
. feature-card {
background : var ( - - surface ) ;
border : 1 px solid var ( - - border ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - xl ) ;
2026-07-05 06:41:32 +00:00
padding : 40 px ;
transition : transform 0.2 s , box-shadow 0.2 s ;
}
. feature-card : hover {
transform : translateY ( -4 px ) ;
box-shadow : 0 12 px 40 px rgba ( 0 , 0 , 0 , 0.08 ) ;
}
. feature-icon {
width : 48 px ; height : 48 px ;
background : var ( - - blue - glow ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
display : flex ; align-items : center ; justify-content : center ;
font-size : 1.5 rem ; margin-bottom : 20 px ;
}
. feature-card h3 { font-size : 1.25 rem ; font-weight : 700 ; margin-bottom : 12 px ; }
. feature-card p { font-size : 0.95 rem ; color : var ( - - text - muted ) ; line-height : 1.6 ; }
/* Feature List */
. feature-list { padding : 40 px 0 ; }
. feature-row {
display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 60 px ;
align-items : center ; margin-bottom : 80 px ;
}
. feature-row . reverse { direction : rtl ; }
. feature-row . reverse > * { direction : ltr ; }
. feature-content h3 { font-size : 1.75 rem ; font-weight : 700 ; margin-bottom : 16 px ; }
. feature-content p { font-size : 1 rem ; color : var ( - - text - body ) ; line-height : 1.7 ; margin-bottom : 16 px ; }
. feature-content ul { list-style : none ; }
. feature-content ul li {
padding : 6 px 0 ; font-size : 0.95 rem ; color : var ( - - text - body ) ;
display : flex ; align-items : center ; gap : 8 px ;
}
. feature-content ul li :: before {
content : "→" ; color : var ( - - blue ) ; font-weight : 700 ;
}
. feature-visual {
background : var ( - - surface -2 ) ;
border : 1 px solid var ( - - border ) ;
2026-07-07 07:11:50 +00:00
border-radius : var ( - - radius - xl ) ;
2026-07-05 06:41:32 +00:00
padding : 40 px ;
min-height : 300 px ;
display : flex ; align-items : center ; justify-content : center ;
}
. feature-visual-placeholder {
text-align : center ; color : var ( - - text - muted ) ;
}
/* CTA */
. cta {
background : var ( - - surface ) ;
border-top : 1 px solid var ( - - border ) ;
padding : 80 px 0 ;
text-align : center ;
}
. cta h2 { font-size : 2.5 rem ; font-weight : 800 ; margin-bottom : 16 px ; }
. cta p { font-size : 1.1 rem ; color : var ( - - text - muted ) ; margin-bottom : 32 px ; }
. btn {
display : inline-block ; padding : 16 px 32 px ;
background : var ( - - blue ) ; color : #fff ;
2026-07-07 07:11:50 +00:00
border : none ; border-radius : var ( - - radius - md ) ;
2026-07-05 06:41:32 +00:00
font-size : 1 rem ; font-weight : 600 ;
text-decoration : none ;
cursor : pointer ; transition : background 0.2 s ;
}
. btn : hover { background : var ( - - blue - dark ) ; }
/* Footer */
footer { background : var ( - - surface ) ; border-top : 1 px solid var ( - - border ) ; padding : 40 px 0 ; }
. footer-inner { display : flex ; justify-content : space-between ; align-items : center ; }
. footer-links { display : flex ; gap : 24 px ; }
. footer-links a { color : var ( - - text - muted ) ; text-decoration : none ; font-size : 0.875 rem ; }
. footer-links a : hover { color : var ( - - text - dark ) ; }
@ media ( max-width : 768px ) {
. nav-links { display : none ; }
. feature-grid { grid-template-columns : 1 fr ; }
. feature-row { grid-template-columns : 1 fr ; gap : 24 px ; }
. feature-row . reverse { direction : ltr ; }
}
2026-07-14 15:27:33 +00:00
/* QUIXZOOM STANDARD — Dark Theme */
: root {
--qz-bg : #0a0a0a ;
--qz-surface : #111111 ;
--qz-surface-2 : #1a1a1a ;
--qz-border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--qz-text : #e8e8e8 ;
--qz-text-dim : #a0a0a0 ;
--qz-text-muted : #6b6b6b ;
--qz-blue : #007AFF ;
--qz-blue-dark : #0056CC ;
--qz-radius : 10 px ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ;
background : var ( - - qz - bg ) ;
color : var ( - - qz - text ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
/* Navigation */
. qz-nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 0 24 px ; height : 56 px ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 16 px ) ;
border-bottom : 1 px solid var ( - - qz - border ) ;
}
. qz-nav-logo { font-size : 18 px ; font-weight : 700 ; color : #fff ; text-decoration : none ; }
. qz-nav-links { display : flex ; gap : 24 px ; list-style : none ; }
. qz-nav-links a { font-size : 14 px ; color : var ( - - qz - text - dim ) ; text-decoration : none ; transition : color 0.2 s ; }
. qz-nav-links a : hover { color : #fff ; }
/* Buttons */
. qz-btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 12 px 24 px ; border-radius : var ( - - qz - radius ) ;
font-size : 15 px ; font-weight : 600 ; text-decoration : none ;
transition : all 0.2 s ; cursor : pointer ; border : none ;
}
. qz-btn-primary {
background : var ( - - qz - blue ) ; color : #fff ;
}
. qz-btn-primary : hover {
background : var ( - - qz - blue - dark ) ; transform : translateY ( -1 px ) ;
}
. qz-btn-ghost {
background : transparent ; color : var ( - - qz - text ) ;
border : 1 px solid var ( - - qz - border ) ;
}
. qz-btn-ghost : hover {
border-color : var ( - - qz - blue ) ; color : var ( - - qz - blue ) ;
}
/* Cards */
. qz-card {
background : var ( - - qz - surface ) ;
border : 1 px solid var ( - - qz - border ) ;
border-radius : var ( - - qz - radius ) ;
padding : 24 px ;
transition : transform 0.2 s , border-color 0.2 s ;
}
. qz-card : hover {
transform : translateY ( -2 px ) ;
border-color : rgba ( 0 , 122 , 255 , 0.3 ) ;
}
/* Footer */
. qz-footer {
border-top : 1 px solid var ( - - qz - border ) ;
padding : 40 px 24 px ;
text-align : center ;
color : var ( - - qz - text - dim ) ;
font-size : 14 px ;
}
/* Banner */
. qz-banner {
background : #001E50 ;
color : rgba ( 255 , 255 , 255 , 0.55 ) ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
}
. qz-banner a { color : rgba ( 255 , 255 , 255 , 0.8 ) ; text-decoration : none ; }
@ media ( max-width : 768px ) {
. qz-nav-links { display : none ; }
}
2026-07-05 06:41:32 +00:00
< / style >
< style >
@ media ( max-width : 640px ) {
. hero h1 { font-size : 2 rem !important ; }
. hero p { font-size : 1 rem !important ; }
. card { padding : 1.5 rem !important ; }
. grid { grid-template-columns : 1 fr !important ; }
. btn { padding : 0.75 rem 1.5 rem !important ; font-size : 1 rem !important ; }
}
2026-07-14 15:27:33 +00:00
/* QUIXZOOM STANDARD — Dark Theme */
: root {
--qz-bg : #0a0a0a ;
--qz-surface : #111111 ;
--qz-surface-2 : #1a1a1a ;
--qz-border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--qz-text : #e8e8e8 ;
--qz-text-dim : #a0a0a0 ;
--qz-text-muted : #6b6b6b ;
--qz-blue : #007AFF ;
--qz-blue-dark : #0056CC ;
--qz-radius : 10 px ;
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ;
background : var ( - - qz - bg ) ;
color : var ( - - qz - text ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
/* Navigation */
. qz-nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 0 24 px ; height : 56 px ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 16 px ) ;
border-bottom : 1 px solid var ( - - qz - border ) ;
}
. qz-nav-logo { font-size : 18 px ; font-weight : 700 ; color : #fff ; text-decoration : none ; }
. qz-nav-links { display : flex ; gap : 24 px ; list-style : none ; }
. qz-nav-links a { font-size : 14 px ; color : var ( - - qz - text - dim ) ; text-decoration : none ; transition : color 0.2 s ; }
. qz-nav-links a : hover { color : #fff ; }
/* Buttons */
. qz-btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 12 px 24 px ; border-radius : var ( - - qz - radius ) ;
font-size : 15 px ; font-weight : 600 ; text-decoration : none ;
transition : all 0.2 s ; cursor : pointer ; border : none ;
}
. qz-btn-primary {
background : var ( - - qz - blue ) ; color : #fff ;
}
. qz-btn-primary : hover {
background : var ( - - qz - blue - dark ) ; transform : translateY ( -1 px ) ;
}
. qz-btn-ghost {
background : transparent ; color : var ( - - qz - text ) ;
border : 1 px solid var ( - - qz - border ) ;
}
. qz-btn-ghost : hover {
border-color : var ( - - qz - blue ) ; color : var ( - - qz - blue ) ;
}
/* Cards */
. qz-card {
background : var ( - - qz - surface ) ;
border : 1 px solid var ( - - qz - border ) ;
border-radius : var ( - - qz - radius ) ;
padding : 24 px ;
transition : transform 0.2 s , border-color 0.2 s ;
}
. qz-card : hover {
transform : translateY ( -2 px ) ;
border-color : rgba ( 0 , 122 , 255 , 0.3 ) ;
}
/* Footer */
. qz-footer {
border-top : 1 px solid var ( - - qz - border ) ;
padding : 40 px 24 px ;
text-align : center ;
color : var ( - - qz - text - dim ) ;
font-size : 14 px ;
}
/* Banner */
. qz-banner {
background : #001E50 ;
color : rgba ( 255 , 255 , 255 , 0.55 ) ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
}
. qz-banner a { color : rgba ( 255 , 255 , 255 , 0.8 ) ; text-decoration : none ; }
@ media ( max-width : 768px ) {
. qz-nav-links { display : none ; }
}
2026-07-05 06:41:32 +00:00
< / style >
2026-07-14 09:58:53 +00:00
< script type = "module" src = "https://auth.quixzoom.com/site-auth-snippet.js" > < / script >
2026-07-14 15:27:33 +00:00
< link rel = "alternate" hreflang = "en" href = "https://www.quixzoom.com/" / >
< link rel = "alternate" hreflang = "sv" href = "https://www.quixzoom.com/sv/" / >
< link rel = "alternate" hreflang = "de" href = "https://www.quixzoom.com/de/" / >
< link rel = "alternate" hreflang = "fr" href = "https://www.quixzoom.com/fr/" / >
< link rel = "alternate" hreflang = "es" href = "https://www.quixzoom.com/es/" / >
< link rel = "alternate" hreflang = "it" href = "https://www.quixzoom.com/it/" / >
< link rel = "alternate" hreflang = "nl" href = "https://www.quixzoom.com/nl/" / >
< link rel = "alternate" hreflang = "x-default" href = "https://www.quixzoom.com/" / >
2026-07-05 06:41:32 +00:00
< / head >
< body >
2026-07-14 15:27:33 +00:00
< nav class = "qz-nav" >
2026-07-05 06:41:32 +00:00
< div class = "container" >
< div class = "nav-inner" >
< a href = "/" class = "nav-logo" > qui< span > X< / span > zoom< / a >
< div class = "nav-links" >
2026-07-14 15:27:33 +00:00
< a href = "/order/" > Order< / a >
< a href = "/pricing/" > Pricing< / a >
< a href = "/earn/" > Earn as Zoomer< / a >
< a href = "/for-organisations/" > For Organisations< / a >
2026-07-05 06:41:32 +00:00
< a href = "/about" > About< / a >
< / div >
< / div >
2026-07-14 15:27:33 +00:00
< a href = "/order/" class = "btn-nav" > Start Order →< / a >
2026-07-05 06:41:32 +00:00
< / div >
< / nav >
< section class = "hero" >
< div class = "container" >
< h1 > Everything you need to< br > collect field intelligence< / h1 >
< p > From mission creation to verified data delivery — quiXzoom handles the entire workflow so you can focus on decisions.< / p >
< / div >
< / section >
< section class = "features" >
< div class = "container" >
< div class = "section-title" >
< h2 > Platform capabilities< / h2 >
< p > Built for scale, designed for simplicity< / p >
< / div >
< div class = "feature-grid" >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > AI Quality Review< / h3 >
< p > Every submission is automatically checked for completeness, image quality, GPS accuracy, and compliance with mission requirements before payment.< / p >
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Global Coverage< / h3 >
< p > Launching in 5 markets in phases — Sweden first (August 2026), with Netherlands, Thailand, Nigeria and Kenya to follow. Localized mission types, languages, and payment methods for each market.< / p >
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" > < path d = "M9 2L5 9H8L7 14L11 7H8L9 2Z" fill = "#f59e0b" / > < / svg > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Real-time Tracking< / h3 >
< p > Monitor mission progress in real-time. See which missions are active, completed, or need attention — all in one dashboard.< / p >
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Enterprise Security< / h3 >
< p > GDPR compliant, EU data residency, SOC 2 Type II certified. Your data is encrypted at rest and in transit.< / p >
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > Advanced Analytics< / h3 >
< p > Turn raw observations into actionable insights. Trend analysis, change detection, and automated reporting.< / p >
< / div >
< div class = "feature-card" >
2026-07-07 07:11:50 +00:00
< div class = "feature-icon" > < / div >
2026-07-05 06:41:32 +00:00
< h3 > API & Integrations< / h3 >
< p > RESTful API with comprehensive documentation. Webhooks for real-time updates. Integrate with your existing tools and workflows.< / p >
< / div >
< / div >
< / div >
< / section >
< section class = "feature-list" >
< div class = "container" >
< div class = "feature-row" >
< div class = "feature-content" >
< h3 > Mission creation in minutes< / h3 >
< p > Define scope, set requirements, and launch missions — all from a single interface. No technical expertise required.< / p >
< ul >
< li > Visual mission builder< / li >
< li > Template library< / li >
< li > Geofenced boundaries< / li >
< li > Custom requirements< / li >
< / ul >
< / div >
< div class = "feature-visual" >
< div class = "feature-visual-placeholder" >
2026-07-07 07:11:50 +00:00
< div style = "font-size:3rem;margin-bottom:12px;" > < / div >
2026-07-05 06:41:32 +00:00
< div > Mission Builder Interface< / div >
< / div >
< / div >
< / div >
< div class = "feature-row reverse" >
< div class = "feature-content" >
< h3 > Verified Zoomer network< / h3 >
< p > Every Zoomer is identity-verified and rated. Build trusted relationships with high-performing field collectors.< / p >
< ul >
< li > Identity verification< / li >
< li > Performance ratings< / li >
< li > Skill matching< / li >
< li > Direct communication< / li >
< / ul >
< / div >
< div class = "feature-visual" >
< div class = "feature-visual-placeholder" >
2026-07-07 07:11:50 +00:00
< div style = "font-size:3rem;margin-bottom:12px;" > < / div >
2026-07-05 06:41:32 +00:00
< div > Zoomer Network< / div >
< / div >
< / div >
< / div >
< div class = "feature-row" >
< div class = "feature-content" >
< h3 > Automated payouts< / h3 >
< p > Zoomers get paid every Monday for approved missions. No invoicing, no delays, no hassle.< / p >
< ul >
< li > Weekly payment cycles< / li >
< li > Stripe Connect integration< / li >
< li > Multi-currency support< / li >
< li > Tax documentation< / li >
< / ul >
< / div >
< div class = "feature-visual" >
< div class = "feature-visual-placeholder" >
2026-07-07 07:11:50 +00:00
< div style = "font-size:3rem;margin-bottom:12px;" > < / div >
2026-07-05 06:41:32 +00:00
< div > Payment Dashboard< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< section class = "cta" >
< div class = "container" >
< h2 > Ready to see it in action?< / h2 >
< p > Start collecting field intelligence today. No setup fees, no long-term contracts.< / p >
< a href = "/join" class = "btn" > Get started free< / a >
< / div >
< / section >
2026-07-14 15:27:33 +00:00
< footer class = "qz-footer" >
2026-07-05 06:41:32 +00:00
< div class = "container" >
< div class = "footer-inner" >
< div > © 2026 quiXzoom · Operated by Landvex AB< / div >
< div class = "footer-links" >
< a href = "privacy/index.html" > Privacy< / a >
< a href = "terms/index.html" > Terms< / a >
< a href = "/support" > Support< / a >
< / div >
< / div >
< / div >
< / footer >
2026-07-14 09:58:53 +00:00
<!-- quiXzoom Mina Sidor - Universal Header Component -->
<!-- Injicera detta i <head> på alla quiXzoom - sajter -->
< style >
. qz-auth-bar {
position : fixed ;
top : 0 ;
left : 0 ;
right : 0 ;
height : 48 px ;
background : #0A0A0A ;
border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
display : flex ;
align-items : center ;
justify-content : space-between ;
padding : 0 20 px ;
z-index : 9999 ;
font-family : - apple-system , BlinkMacSystemFont , 'SF Pro Display' , 'Segoe UI' , Roboto , sans-serif ;
}
. qz-auth-bar . qz-logo {
font-size : 18 px ;
font-weight : 700 ;
color : #fff ;
text-decoration : none ;
letter-spacing : -0.5 px ;
}
. qz-auth-bar . qz-logo span {
color : #007AFF ;
}
. qz-auth-bar . qz-nav {
display : flex ;
gap : 8 px ;
align-items : center ;
}
. qz-auth-bar . qz-btn {
padding : 8 px 16 px ;
border-radius : 8 px ;
font-size : 14 px ;
font-weight : 500 ;
cursor : pointer ;
transition : all 0.2 s ;
border : none ;
text-decoration : none ;
}
. qz-auth-bar . qz-btn-primary {
background : #007AFF ;
color : white ;
}
. qz-auth-bar . qz-btn-primary : hover {
background : #0056CC ;
}
. qz-auth-bar . qz-btn-ghost {
background : transparent ;
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
}
. qz-auth-bar . qz-btn-ghost : hover {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
color : white ;
}
. qz-auth-bar . qz-user {
display : flex ;
align-items : center ;
gap : 8 px ;
color : white ;
font-size : 14 px ;
}
. qz-auth-bar . qz-avatar {
width : 32 px ;
height : 32 px ;
border-radius : 50 % ;
background : #007AFF ;
display : flex ;
align-items : center ;
justify-content : center ;
font-weight : 600 ;
font-size : 14 px ;
}
. qz-auth-bar . qz-dropdown {
position : relative ;
}
. qz-auth-bar . qz-dropdown-menu {
position : absolute ;
top : 40 px ;
right : 0 ;
background : #1C1C1E ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
border-radius : 12 px ;
padding : 8 px ;
min-width : 200 px ;
display : none ;
box-shadow : 0 8 px 32 px rgba ( 0 , 0 , 0 , 0.4 ) ;
}
. qz-auth-bar . qz-dropdown-menu . active {
display : block ;
}
. qz-auth-bar . qz-dropdown-item {
padding : 10 px 12 px ;
border-radius : 8 px ;
color : white ;
text-decoration : none ;
display : flex ;
align-items : center ;
gap : 10 px ;
font-size : 14 px ;
transition : background 0.2 s ;
}
. qz-auth-bar . qz-dropdown-item : hover {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
}
. qz-auth-bar . qz-dropdown-divider {
height : 1 px ;
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
margin : 8 px 0 ;
}
. qz-auth-bar . qz-balance {
background : rgba ( 0 , 122 , 255 , 0.15 ) ;
color : #007AFF ;
padding : 4 px 10 px ;
border-radius : 6 px ;
font-size : 13 px ;
font-weight : 600 ;
}
@ media ( max-width : 640px ) {
. qz-auth-bar . qz-nav . qz-btn-ghost : not ( . qz-user ) {
display : none ;
}
}
2026-07-14 15:27:33 +00:00
/* QUIXZOOM STANDARD — Dark Theme */
: root {
--qz-bg : #0a0a0a ;
--qz-surface : #111111 ;
--qz-surface-2 : #1a1a1a ;
--qz-border : rgba ( 255 , 255 , 255 , 0.08 ) ;
--qz-text : #e8e8e8 ;
--qz-text-dim : #a0a0a0 ;
--qz-text-muted : #6b6b6b ;
--qz-blue : #007AFF ;
--qz-blue-dark : #0056CC ;
--qz-radius : 10 px ;
}
2026-07-14 09:58:53 +00:00
2026-07-14 15:27:33 +00:00
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
2026-07-14 09:58:53 +00:00
2026-07-14 15:27:33 +00:00
body {
font-family : - apple-system , BlinkMacSystemFont , 'Inter' , sans-serif ;
background : var ( - - qz - bg ) ;
color : var ( - - qz - text ) ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
/* Navigation */
. qz-nav {
position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
display : flex ; align-items : center ; justify-content : space-between ;
padding : 0 24 px ; height : 56 px ;
background : rgba ( 255 , 255 , 255 , 0.92 ) ;
backdrop-filter : blur ( 16 px ) ;
border-bottom : 1 px solid var ( - - qz - border ) ;
}
. qz-nav-logo { font-size : 18 px ; font-weight : 700 ; color : #fff ; text-decoration : none ; }
. qz-nav-links { display : flex ; gap : 24 px ; list-style : none ; }
. qz-nav-links a { font-size : 14 px ; color : var ( - - qz - text - dim ) ; text-decoration : none ; transition : color 0.2 s ; }
. qz-nav-links a : hover { color : #fff ; }
/* Buttons */
. qz-btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 12 px 24 px ; border-radius : var ( - - qz - radius ) ;
font-size : 15 px ; font-weight : 600 ; text-decoration : none ;
transition : all 0.2 s ; cursor : pointer ; border : none ;
}
. qz-btn-primary {
background : var ( - - qz - blue ) ; color : #fff ;
}
. qz-btn-primary : hover {
background : var ( - - qz - blue - dark ) ; transform : translateY ( -1 px ) ;
}
. qz-btn-ghost {
background : transparent ; color : var ( - - qz - text ) ;
border : 1 px solid var ( - - qz - border ) ;
}
. qz-btn-ghost : hover {
border-color : var ( - - qz - blue ) ; color : var ( - - qz - blue ) ;
}
/* Cards */
. qz-card {
background : var ( - - qz - surface ) ;
border : 1 px solid var ( - - qz - border ) ;
border-radius : var ( - - qz - radius ) ;
padding : 24 px ;
transition : transform 0.2 s , border-color 0.2 s ;
}
. qz-card : hover {
transform : translateY ( -2 px ) ;
border-color : rgba ( 0 , 122 , 255 , 0.3 ) ;
}
/* Footer */
. qz-footer {
border-top : 1 px solid var ( - - qz - border ) ;
padding : 40 px 24 px ;
text-align : center ;
color : var ( - - qz - text - dim ) ;
font-size : 14 px ;
}
/* Banner */
. qz-banner {
background : #001E50 ;
color : rgba ( 255 , 255 , 255 , 0.55 ) ;
text-align : center ;
padding : 10 px ;
font-size : 12 px ;
}
. qz-banner a { color : rgba ( 255 , 255 , 255 , 0.8 ) ; text-decoration : none ; }
@ media ( max-width : 768px ) {
. qz-nav-links { display : none ; }
}
< / style >
2026-07-14 09:58:53 +00:00
2026-07-05 06:41:32 +00:00
< / body >
< / html >
