:root { --bg:#111111; --surface:#191919; --surface-2:#242424; --ink:#f5f5f5; --muted:#a7a7a7; --line:#3c3c3c; --silver:#7A808A; --accent:#FF6A00; --shadow:0 24px 70px rgba(0,0,0,.34); }
:root.light { --bg:#f1f1f1; --surface:#fff; --surface-2:#e3e3e3; --ink:#111; --muted:#5f6267; --line:#c7c7c7; --silver:#626872; --shadow:0 24px 70px rgba(17,17,17,.12); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(circle at 82% -5%,#3a2115 0,transparent 30%),var(--bg); color:var(--ink); font-family:"Avenir Next","Trebuchet MS",sans-serif; min-height:100vh; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; }
.app-frame { max-width:1280px; margin:auto; padding:0 34px; } .nav { min-height:82px; display:flex; align-items:center; gap:34px; border-bottom:1px solid var(--line); } .wordmark { display:flex; align-items:center; gap:10px; font:700 18px "Amazon Ember",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; letter-spacing:.08em; white-space:nowrap; } .wordmark img { width:42px; height:42px; } .wordmark span { color:var(--accent); } nav { display:flex; gap:25px; flex:1; } nav a,.live-dot { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; } nav a:hover { color:var(--accent); } .nav-tools { display:flex; align-items:center; gap:18px; } .live-dot:before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; box-shadow:0 0 15px var(--accent); } .icon-button { width:32px; height:32px; border:1px solid var(--line); background:transparent; color:var(--ink); }
.eyebrow { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.2em; margin:0 0 16px; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Amazon Ember",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-weight:700; letter-spacing:-.01em; } h1 { font-size:clamp(47px,7vw,92px); line-height:.94; max-width:780px; margin-bottom:24px; } h2 { font-size:clamp(30px,4vw,52px); margin-bottom:15px; } h3 { font-size:24px; margin-bottom:8px; font-weight:500; } body { font-family:"Amazon Ember",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-weight:400; line-height:1.4; } .muted { color:var(--muted); line-height:1.4; }
.hero { padding:110px 0 80px; min-height:650px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:60px; } .hero-copy p:not(.eyebrow) { max-width:540px; font-size:17px; } .hero-actions { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; gap:28px; padding:14px 17px; border:1px solid var(--accent); background:var(--accent); color:#111; font-weight:800; } .button.secondary { background:transparent; color:var(--ink); border-color:var(--silver); } .button:hover { filter:brightness(1.12); }
.signal-board,.panel,.module-card { background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); } .signal-board { padding:24px; border-top:3px solid var(--accent); } .signal-line { display:flex; justify-content:space-between; gap:20px; padding:17px 0; border-bottom:1px solid var(--line); font-size:12px; } .signal-line strong { color:var(--silver); font-size:10px; letter-spacing:.1em; } .stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stat { padding:26px 0; display:grid; gap:7px; } .stat b { color:var(--accent); font:400 38px Georgia,serif; } .stat span,.tag { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.section { padding:105px 0; } .section-head { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:35px; } .section-head .muted { max-width:350px; } .module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .module-card { padding:26px; min-height:255px; position:relative; transition:transform .2s,border-color .2s; } .module-card:hover { transform:translateY(-4px); border-color:var(--accent); } .module-card h3 { margin-top:38px; } .module-card p { color:var(--muted); line-height:1.6; } .arrow { position:absolute; right:24px; bottom:22px; color:var(--accent); font-size:25px; }
.dashboard { padding:75px 0 110px; } .dash-top { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:46px; } .dash-top h1 { font-size:clamp(42px,6vw,74px); } .status-chip { border:1px solid var(--line); color:var(--silver); padding:10px 13px; font-size:10px; font-weight:800; white-space:nowrap; } .dash-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; } .panel { padding:25px; } .panel.tall { min-height:390px; } .panel-label { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .balance { color:var(--accent); font:400 clamp(48px,7vw,82px) Georgia,serif; margin:70px 0 18px; } .balance small { font-size:.45em; color:var(--silver); } .bar { height:4px; background:var(--surface-2); } .bar i { display:block; width:62%; height:100%; background:var(--accent); } .activity-row { display:grid; grid-template-columns:1fr auto auto; gap:15px; padding:17px 0; border-bottom:1px solid var(--line); font-size:13px; } .activity-row small { color:var(--muted); } .positive { color:var(--accent); } .sync-note { color:var(--silver); font-size:12px; margin-top:20px; } .route { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:35px; } .route-box { padding:18px; background:var(--surface-2); display:grid; gap:8px; } .route-box strong { font:400 25px Georgia,serif; } .route-box small { color:var(--muted); } .route-map { height:145px; margin-top:24px; background:linear-gradient(150deg,transparent 47%,var(--accent) 48%,var(--accent) 50%,transparent 51%),repeating-linear-gradient(30deg,var(--surface-2) 0 1px,transparent 1px 22px); }
.market-toolbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:26px; } .search { width:min(100%,320px); padding:13px 15px; background:var(--surface); border:1px solid var(--line); color:var(--ink); } .pos-layout { display:grid; grid-template-columns:1fr 330px; gap:18px; } .product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .product-card { background:var(--surface); border:1px solid var(--line); padding:14px; } .product-art { height:150px; display:grid; place-items:center; background:linear-gradient(135deg,#252525,#151515); color:var(--accent); font:400 48px Georgia,serif; margin-bottom:17px; } .product-card h3 { margin:5px 0 18px; } .product-meta { display:flex; justify-content:space-between; align-items:center; } .product-meta b { color:var(--accent); } .product-meta button { border:1px solid var(--accent); background:transparent; color:var(--accent); padding:7px 10px; } .cart-total { color:var(--accent); font:400 38px Georgia,serif; padding:25px 0; } .qr-box { min-height:155px; display:grid; place-items:center; background:#fff; margin-top:18px; color:#111; }
.product-badge,.cart-item small { display:block; color:var(--silver); font-size:11px; margin-bottom:12px; font-weight:400; } .cart-item { display:flex; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); } .cart-item strong { display:block; font-size:13px; } .quantity { display:flex; align-items:center; gap:7px; } .quantity button { width:25px; height:25px; border:1px solid var(--silver); background:transparent; color:var(--ink); } .quantity .remove { color:var(--accent); border-color:var(--accent); margin-left:4px; } .quantity span { min-width:18px; text-align:center; } .balance,.cart-total,.product-meta b,.stat b { font-variant-numeric:tabular-nums; font-weight:700; }
footer { display:flex; justify-content:space-between; gap:20px; padding:25px 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; } footer span:first-child { color:var(--accent); font-weight:800; letter-spacing:.12em; }
@media (max-width:760px) { .app-frame { padding:0 18px; } .nav { gap:15px; flex-wrap:wrap; padding:14px 0; } nav { order:3; flex-basis:100%; gap:14px; overflow:auto; } nav a { white-space:nowrap; font-size:9px; } .hero { grid-template-columns:1fr; padding:70px 0 55px; } .hero h1 { font-size:54px; } .stats,.module-grid,.dash-grid,.pos-layout { grid-template-columns:1fr; } .section { padding:65px 0; } .section-head,.dash-top { display:block; } .status-chip { display:inline-block; margin-top:20px; } .product-grid { grid-template-columns:1fr 1fr; } .product-art { height:110px; } footer { flex-direction:column; } }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(circle at 80% -5%,#153b3b 0,transparent 35%),var(--bg); color:var(--ink); font-family:"Avenir Next","Trebuchet MS",sans-serif; min-height:100vh; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } .app-frame { max-width:1280px; margin:auto; padding:0 34px; } .nav { min-height:82px; display:flex; align-items:center; gap:34px; border-bottom:1px solid var(--line); } .wordmark { font:700 21px Georgia,serif; letter-spacing:.08em; } .wordmark span { color:var(--lime); } nav { display:flex; gap:25px; flex:1; } nav a,.live-dot { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; } nav a:hover { color:var(--lime); } .nav-tools { display:flex; align-items:center; gap:18px; } .live-dot:before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--lime); margin-right:7px; box-shadow:0 0 15px var(--lime); } .icon-button { width:32px; height:32px; border:1px solid var(--line); background:transparent; color:var(--ink); } .eyebrow { color:var(--lime); font-size:10px; font-weight:900; letter-spacing:.2em; margin:0 0 16px; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Georgia,serif; font-weight:400; } h1 { font-size:clamp(47px,7vw,92px); line-height:.94; max-width:780px; margin-bottom:24px; letter-spacing:-.025em; } h2 { font-size:clamp(30px,4vw,52px); margin-bottom:15px; } h3 { font-size:24px; margin-bottom:8px; } .muted { color:var(--muted); line-height:1.6; } .hero { padding:110px 0 80px; min-height:650px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:60px; } .hero-copy p:not(.eyebrow) { max-width:540px; font-size:17px; } .hero-actions { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; gap:28px; padding:14px 17px; border:1px solid var(--lime); background:var(--lime); color:#102018; font-weight:900; font-size:12px; } .button.secondary { background:transparent; color:var(--ink); border-color:var(--line); } .button:hover { transform:translateY(-2px); } .signal-board { padding:24px; background:linear-gradient(145deg,var(--surface-2),var(--surface)); border:1px solid var(--line); box-shadow:var(--shadow); } .signal-line { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:14px 0; font-size:12px; } .signal-line strong { color:var(--lime); font-weight:500; } .stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stat { padding:26px 0; } .stat + .stat { border-left:1px solid var(--line); padding-left:25px; } .stat b { display:block; font:36px Georgia,serif; color:var(--lime); } .stat span { color:var(--muted); font-size:11px; } .section { padding:90px 0; } .section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; } .section-head p { max-width:360px; margin:0; } .module-grid,.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .module-card,.product-card { background:var(--surface); border:1px solid var(--line); padding:25px; min-height:240px; display:flex; flex-direction:column; transition:.2s; } .module-card:hover,.product-card:hover { border-color:var(--lime); transform:translateY(-4px); } .module-card .tag { color:var(--coral); font-size:12px; font-weight:900; margin-bottom:auto; } .module-card p { color:var(--muted); line-height:1.55; } .module-card .arrow { color:var(--lime); font-size:22px; } .dashboard { padding:65px 0 90px; } .dash-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:32px; } .dash-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:17px; } .panel { background:var(--surface); border:1px solid var(--line); padding:26px; } .panel.tall { min-height:390px; } .panel-label { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:28px; } .balance { font:55px Georgia,serif; margin:30px 0 12px; } .balance small { color:var(--muted); font:13px sans-serif; } .bar { height:8px; background:var(--surface-2); margin:25px 0; } .bar i { display:block; width:66%; height:100%; background:var(--cyan); } .activity-row { display:grid; grid-template-columns:1fr auto auto; gap:20px; border-top:1px solid var(--line); padding:17px 0; font-size:12px; } .positive { color:var(--lime); } .route { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:25px; } .route-box { padding:20px; border:1px solid var(--line); } .route-box strong { display:block; font:30px Georgia,serif; margin:8px 0; } .route-map { min-height:250px; background:linear-gradient(30deg,transparent 47%,var(--cyan) 48%,transparent 49%),linear-gradient(150deg,transparent 45%,var(--coral) 46%,transparent 47%),var(--surface-2); position:relative; overflow:hidden; } .route-map:after { content:"LIVE ROUTE"; position:absolute; top:24px; left:24px; border:1px solid var(--lime); padding:8px; color:var(--lime); font-size:10px; letter-spacing:.1em; } .pos-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:17px; } .market-toolbar { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:24px; } .search { border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:12px 14px; width:230px; } .product-grid { grid-template-columns:repeat(2,1fr); } .product-card { min-height:210px; } .product-art { height:105px; background:linear-gradient(135deg,var(--coral),var(--yellow)); margin:-25px -25px 20px; display:grid; place-items:center; font:40px Georgia,serif; color:#241b16; } .product-card:nth-child(2n) .product-art { background:linear-gradient(135deg,var(--cyan),var(--lime)); } .product-meta { display:flex; justify-content:space-between; align-items:end; margin-top:auto; } .product-meta b { font:22px Georgia,serif; } .product-meta button { border:1px solid var(--lime); background:transparent; color:var(--lime); padding:7px 10px; } .cart-total { font:42px Georgia,serif; margin:22px 0; } .qr-box { min-height:180px; display:grid; place-items:center; background:var(--surface-2); border:1px dashed var(--line); margin:20px 0; } .qr-box canvas { width:150px!important; height:150px!important; background:white; padding:8px; } .status-chip { color:var(--lime); font-size:11px; border:1px solid var(--line); padding:7px 10px; } footer { padding:25px 0; border-top:1px solid var(--line); color:var(--muted); display:flex; justify-content:space-between; font-size:11px; } footer span:first-child { color:var(--ink); font-weight:800; } @media(max-width:800px){.app-frame{padding:0 18px}.nav{gap:15px}.nav nav{display:none}.hero,.dash-grid,.pos-layout{grid-template-columns:1fr}.hero{padding:70px 0;min-height:auto}.module-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.stat+.stat{border-left:0;border-top:1px solid var(--line);padding-left:0}.section-head,.dash-top{display:block}.product-grid{grid-template-columns:1fr}.search{width:100%}.market-toolbar{display:block}.market-toolbar .button{margin-top:12px}footer{display:grid;gap:8px}}