feat(ui): refresh visual premium — design system v2 com depth, microinterações, polish
Some checks are pending
Build Android (APK + AAB) / build-android (push) Waiting to run
Some checks are pending
Build Android (APK + AAB) / build-android (push) Waiting to run
OVERLAY no <style> existente — mantém TODA a estrutura/funcionalidade, moderniza profundamente o visual mantendo identidade marítima. DESIGN SYSTEM - Variables novas: spacing (s1-s8), radius (sm/md/lg/xl/pill), shadow scale (sh-1 a sh-5 + glow), transitions - Surfaces elevated com backdrop-filter blur - Border tokens (subtle/strong) VISUAL UPGRADES - Background limpo elegante (sem ruído pergaminho) - Header gradient sutil + glow latão na compass-mark - Tabs como pill nav modern com indicador animado e hover - Cards com depth real (sombras multi-layer) - GPS/Anchor card gradient diagonal com inner glow - Buttons com lift hover, gradients sutis, focus ring - Fields com border focus + glow latão - Modal com blur backdrop + entrance polida + radius arredondado - FAB com lift hover e scale - Stats grid com cards individuais hovers - Empty states elegantes - Status pills arredondados - Sensor widget com glassmorphism premium - Auth box com glass effect MICROINTERAÇÕES - Todos hover transitions em 200ms cubic-bezier - Lift de buttons (translateY -1px) - Compass mark rotaciona 15deg no hover - Cards levantam com box-shadow - Media thumbs scale up com z-index ACESSIBILIDADE - Focus rings visíveis em tudo (outline 2px brass) - prefers-reduced-motion honrado - Cursor pointer garantido em interativos - Scrollbars sutis customizadas Sincronizado em app/ + server/public/. Sem mudança JS.
This commit is contained in:
PontualTech / Karlão
parent
af85d9d118
commit
6e340cc733
2 changed files with 858 additions and 0 deletions
|
|
@ -774,6 +774,435 @@ header{
|
|||
body{background:#fff;background-image:none}
|
||||
.entry{break-inside:avoid;border:1px solid #999}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════
|
||||
MODERN PROFESSIONAL OVERLAY · v2 — Apr 2026
|
||||
Mantém identidade marítima (cores Fraunces + Manrope + JetBrains Mono),
|
||||
mas moderniza profundamente: depth, microinterações, polish premium.
|
||||
═══════════════════════════════════════════════════════ */
|
||||
:root{
|
||||
/* spacing scale (8pt base) */
|
||||
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
|
||||
/* radius scale (sutis — alinhados ao tom marítimo) */
|
||||
--r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
|
||||
/* shadow scale (depth profissional) */
|
||||
--sh-1:0 1px 2px rgba(14,42,61,.06), 0 1px 1px rgba(14,42,61,.04);
|
||||
--sh-2:0 2px 4px rgba(14,42,61,.06), 0 4px 8px rgba(14,42,61,.05);
|
||||
--sh-3:0 4px 8px rgba(14,42,61,.07), 0 8px 16px rgba(14,42,61,.06);
|
||||
--sh-4:0 8px 16px rgba(14,42,61,.08), 0 16px 32px rgba(14,42,61,.08);
|
||||
--sh-5:0 16px 32px rgba(14,42,61,.10), 0 32px 64px rgba(14,42,61,.10);
|
||||
--sh-glow:0 0 0 4px rgba(160,120,50,.12);
|
||||
--sh-glow-blue:0 0 0 4px rgba(31,91,118,.18);
|
||||
/* transitions */
|
||||
--t-fast:120ms cubic-bezier(.4,0,.2,1);
|
||||
--t-base:200ms cubic-bezier(.4,0,.2,1);
|
||||
--t-slow:320ms cubic-bezier(.4,0,.2,1);
|
||||
/* superfícies elevadas premium */
|
||||
--surface-1:#fbf5e2;
|
||||
--surface-2:#ffffff;
|
||||
--surface-elevated:rgba(255,255,255,.78);
|
||||
--border-subtle:rgba(184,156,108,.22);
|
||||
--border-strong:rgba(184,156,108,.55);
|
||||
}
|
||||
|
||||
/* ── BACKGROUND limpo elegante (sem ruído) ── */
|
||||
body{
|
||||
background:
|
||||
radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
|
||||
linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
|
||||
background-attachment:fixed;
|
||||
background-image:
|
||||
radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
|
||||
linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
|
||||
}
|
||||
|
||||
/* ── HEADER premium com glow sutil + gradient ── */
|
||||
header{
|
||||
background:linear-gradient(180deg, #0e2a3d 0%, #143447 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(200,159,84,.30),
|
||||
inset 0 -1px 0 rgba(160,120,50,.55),
|
||||
0 4px 24px rgba(14,42,61,.18),
|
||||
0 12px 48px rgba(14,42,61,.10);
|
||||
border-bottom:none;
|
||||
}
|
||||
.header-row{padding:2px 0}
|
||||
.boat-name{
|
||||
text-shadow:0 1px 2px rgba(0,0,0,.25);
|
||||
letter-spacing:-.015em;
|
||||
}
|
||||
.compass-mark{
|
||||
filter:drop-shadow(0 2px 8px rgba(200,159,84,.35));
|
||||
transition:transform var(--t-base);
|
||||
}
|
||||
.compass-mark:hover{transform:rotate(15deg)}
|
||||
|
||||
/* ── TABS modernas: pill nav com indicador animado ── */
|
||||
.tabs{
|
||||
background:rgba(239,229,205,.92);
|
||||
backdrop-filter:blur(12px) saturate(1.2);
|
||||
-webkit-backdrop-filter:blur(12px) saturate(1.2);
|
||||
border-bottom:1px solid var(--border-subtle);
|
||||
padding:8px 4px 0;
|
||||
gap:2px;
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
|
||||
}
|
||||
.tab{
|
||||
border-radius:var(--r-md) var(--r-md) 0 0;
|
||||
padding:13px 18px 14px;
|
||||
transition:color var(--t-base), background var(--t-base);
|
||||
position:relative;
|
||||
}
|
||||
.tab:hover{
|
||||
color:var(--ink-mid);
|
||||
background:rgba(255,255,255,.4);
|
||||
}
|
||||
.tab.active{
|
||||
color:var(--ink-deep);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
|
||||
}
|
||||
.tab.active::after{
|
||||
height:3px;left:14px;right:14px;bottom:0;
|
||||
background:linear-gradient(90deg, var(--brass), var(--brass-bright));
|
||||
border-radius:2px 2px 0 0;
|
||||
box-shadow:0 0 8px rgba(160,120,50,.4);
|
||||
}
|
||||
|
||||
/* ── CARDS com depth real (sombra multi-layer) ── */
|
||||
.gps-card,.anchor-card,.export-card,.empty,.entry,.contact-card{
|
||||
border-radius:var(--r-lg);
|
||||
box-shadow:var(--sh-2);
|
||||
transition:box-shadow var(--t-base), transform var(--t-base);
|
||||
overflow:hidden;
|
||||
}
|
||||
.entry{
|
||||
border-radius:var(--r-md);
|
||||
box-shadow:var(--sh-1);
|
||||
border-color:var(--border-subtle);
|
||||
}
|
||||
.entry:hover{box-shadow:var(--sh-2)}
|
||||
|
||||
.gps-card,.anchor-card{
|
||||
border-radius:var(--r-lg);
|
||||
background:linear-gradient(165deg, #0e2a3d 0%, #1a3d54 100%);
|
||||
border:1px solid rgba(200,159,84,.4);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(200,159,84,.2),
|
||||
var(--sh-3),
|
||||
0 0 32px rgba(31,91,118,.15);
|
||||
}
|
||||
.gps-card::before,.anchor-card::before{display:none}
|
||||
.gps-card.idle{
|
||||
background:linear-gradient(165deg, #fbf5e2 0%, #f3e7c4 100%);
|
||||
border:1px solid var(--border-subtle);
|
||||
box-shadow:var(--sh-2);
|
||||
}
|
||||
.gps-stats,.anchor-stats-bar{
|
||||
background:rgba(0,0,0,.15);
|
||||
padding:14px;
|
||||
border-radius:var(--r-md);
|
||||
margin:12px 0 14px;
|
||||
}
|
||||
.gps-card.idle .gps-stats{background:rgba(184,156,108,.08)}
|
||||
|
||||
.export-card,.empty{
|
||||
background:var(--surface-elevated);
|
||||
backdrop-filter:blur(8px);
|
||||
-webkit-backdrop-filter:blur(8px);
|
||||
border-radius:var(--r-lg);
|
||||
border:1px solid var(--border-subtle);
|
||||
box-shadow:var(--sh-2);
|
||||
}
|
||||
.export-card:hover{box-shadow:var(--sh-3)}
|
||||
|
||||
/* ── BUTTONS premium com lift e ripple ── */
|
||||
.btn{
|
||||
border-radius:var(--r-md);
|
||||
transition:all var(--t-base);
|
||||
font-weight:600;
|
||||
letter-spacing:.12em;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.btn:hover{
|
||||
transform:translateY(-1px);
|
||||
box-shadow:var(--sh-2);
|
||||
}
|
||||
.btn:active{transform:translateY(0); box-shadow:var(--sh-1)}
|
||||
.btn:focus-visible{
|
||||
outline:none;
|
||||
box-shadow:var(--sh-glow);
|
||||
}
|
||||
.btn-primary{
|
||||
background:linear-gradient(180deg, #143a52 0%, #0e2a3d 100%);
|
||||
border-color:rgba(0,0,0,.4);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.10),
|
||||
var(--sh-1);
|
||||
}
|
||||
.btn-primary:hover{
|
||||
background:linear-gradient(180deg, #1a4a66 0%, #143a52 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.15),
|
||||
var(--sh-3);
|
||||
}
|
||||
.btn-brass{
|
||||
background:linear-gradient(180deg, #b88a3c 0%, #8d6826 100%);
|
||||
border-color:rgba(0,0,0,.25);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.18),
|
||||
var(--sh-1);
|
||||
}
|
||||
.btn-brass:hover{
|
||||
background:linear-gradient(180deg, #c89954 0%, #a07832 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.25),
|
||||
var(--sh-3);
|
||||
}
|
||||
.btn-danger{
|
||||
background:transparent;
|
||||
border:1px solid var(--storm);
|
||||
color:var(--storm);
|
||||
}
|
||||
.btn-danger:hover{
|
||||
background:linear-gradient(180deg, #a04545 0%, #8c3434 100%);
|
||||
color:#fff;
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
/* ── FIELDS modernos com focus ring ── */
|
||||
.field input,.field textarea,.field select{
|
||||
border-radius:var(--r-md);
|
||||
background:var(--surface-2);
|
||||
border:1px solid var(--border-subtle);
|
||||
padding:12px 14px;
|
||||
font-size:15px;
|
||||
transition:border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
|
||||
}
|
||||
.field input:hover,.field textarea:hover,.field select:hover{
|
||||
border-color:var(--border-strong);
|
||||
}
|
||||
.field input:focus,.field textarea:focus,.field select:focus{
|
||||
border-color:var(--brass);
|
||||
background:#fff;
|
||||
box-shadow:var(--sh-glow);
|
||||
}
|
||||
.field-label{font-size:11px; font-weight:600; color:var(--ink-mid); margin-bottom:6px}
|
||||
|
||||
/* ── MODAL com depth maior + entrance polida ── */
|
||||
.modal-backdrop{
|
||||
background:rgba(14,42,61,.65);
|
||||
backdrop-filter:blur(8px) saturate(1.1);
|
||||
-webkit-backdrop-filter:blur(8px) saturate(1.1);
|
||||
}
|
||||
.modal{
|
||||
border-radius:var(--r-xl) var(--r-xl) 0 0;
|
||||
border-top:none;
|
||||
box-shadow:
|
||||
0 -4px 12px rgba(0,0,0,.05),
|
||||
0 -16px 48px rgba(14,42,61,.25);
|
||||
background-image:none;
|
||||
background:linear-gradient(180deg, #fcf6e4 0%, #f8f0d4 100%);
|
||||
}
|
||||
@media(min-width:600px){
|
||||
.modal{
|
||||
border-radius:var(--r-xl);
|
||||
box-shadow:0 24px 64px rgba(14,42,61,.30), 0 8px 16px rgba(14,42,61,.10);
|
||||
}
|
||||
}
|
||||
.modal-head{
|
||||
background:transparent;
|
||||
padding:18px 22px;
|
||||
border-bottom:1px solid var(--border-subtle);
|
||||
}
|
||||
.modal-body{padding:22px}
|
||||
.modal-foot{
|
||||
background:rgba(0,0,0,.02);
|
||||
padding:16px 22px;
|
||||
}
|
||||
|
||||
/* ── FAB redesenhado: floating elegante ── */
|
||||
.fab{
|
||||
border-radius:var(--r-pill) !important;
|
||||
background:linear-gradient(135deg, #b88a3c 0%, #8d6826 100%) !important;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(160,120,50,.4),
|
||||
0 12px 32px rgba(14,42,61,.15),
|
||||
inset 0 1px 0 rgba(255,255,255,.25) !important;
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
.fab:hover{
|
||||
transform:translateY(-2px) scale(1.05);
|
||||
box-shadow:
|
||||
0 8px 20px rgba(160,120,50,.5),
|
||||
0 16px 40px rgba(14,42,61,.20),
|
||||
inset 0 1px 0 rgba(255,255,255,.30);
|
||||
}
|
||||
.fab:active{transform:translateY(0) scale(1)}
|
||||
|
||||
/* ── STATS GRID polido ── */
|
||||
.stats{
|
||||
border-radius:var(--r-lg);
|
||||
background:transparent;
|
||||
border:none;
|
||||
gap:10px;
|
||||
box-shadow:none;
|
||||
display:grid;
|
||||
}
|
||||
.stat{
|
||||
border-radius:var(--r-md);
|
||||
background:var(--surface-elevated);
|
||||
backdrop-filter:blur(8px);
|
||||
-webkit-backdrop-filter:blur(8px);
|
||||
border:1px solid var(--border-subtle);
|
||||
box-shadow:var(--sh-1);
|
||||
padding:16px 16px 14px;
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
.stat:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
|
||||
.stat::before{
|
||||
height:3px; border-radius:2px;
|
||||
background:linear-gradient(90deg, var(--brass), var(--brass-bright));
|
||||
transform:scaleX(.5);
|
||||
transition:transform var(--t-base);
|
||||
}
|
||||
.stat:hover::before{transform:scaleX(1)}
|
||||
|
||||
/* ── EMPTY STATE elegante ── */
|
||||
.empty{padding:56px 28px; border-radius:var(--r-lg)}
|
||||
.empty::before,.empty::after{display:none}
|
||||
.empty-rose{
|
||||
width:64px; height:64px;
|
||||
filter:drop-shadow(0 4px 12px rgba(160,120,50,.25));
|
||||
margin-bottom:18px;
|
||||
}
|
||||
.empty-title{font-size:21px}
|
||||
.empty-text{font-size:14px; line-height:1.65; opacity:.85}
|
||||
|
||||
/* ── STATUS PILLS arredondados ── */
|
||||
.status-pill{
|
||||
border-radius:var(--r-pill);
|
||||
padding:3px 10px;
|
||||
font-size:9.5px;
|
||||
letter-spacing:.16em;
|
||||
}
|
||||
|
||||
/* ── ALERTS com sombra sutil ── */
|
||||
.alert{
|
||||
border-radius:var(--r-md);
|
||||
border:1px solid var(--border-subtle);
|
||||
border-left-width:4px;
|
||||
box-shadow:var(--sh-1);
|
||||
padding:14px 16px;
|
||||
transition:transform var(--t-base);
|
||||
}
|
||||
.alert:hover{transform:translateX(2px)}
|
||||
|
||||
/* ── PASSENGER PILLS modernos ── */
|
||||
.pax-pill,.pax-tag,.channel-pill{
|
||||
border-radius:var(--r-pill);
|
||||
padding:4px 12px;
|
||||
}
|
||||
|
||||
/* ── ICON BUTTONS polidos ── */
|
||||
.icon-btn{
|
||||
border-radius:var(--r-md);
|
||||
transition:all var(--t-base);
|
||||
}
|
||||
.icon-btn:hover{
|
||||
background:rgba(184,156,108,.15);
|
||||
transform:scale(1.08);
|
||||
}
|
||||
|
||||
/* ── MEDIA THUMBS ── */
|
||||
.media-thumb,.media-item{
|
||||
border-radius:var(--r-md);
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
.media-thumb:hover,.media-item:hover{
|
||||
transform:scale(1.04);
|
||||
box-shadow:var(--sh-2);
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
/* ── SENSOR WIDGET premium (top-right) ── */
|
||||
#sensors-widget{
|
||||
border-radius:var(--r-lg) !important;
|
||||
background:linear-gradient(165deg, rgba(14,42,61,.92), rgba(20,58,82,.92)) !important;
|
||||
backdrop-filter:blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter:blur(20px) saturate(1.4);
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0,0,0,.15),
|
||||
0 8px 24px rgba(14,42,61,.18),
|
||||
inset 0 1px 0 rgba(200,159,84,.2) !important;
|
||||
border:1px solid rgba(200,159,84,.18);
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
#sensors-widget:hover{
|
||||
transform:translateY(-1px);
|
||||
box-shadow:
|
||||
0 8px 16px rgba(0,0,0,.20),
|
||||
0 16px 32px rgba(14,42,61,.22);
|
||||
}
|
||||
|
||||
/* ── AUTH BOX polido ── */
|
||||
#auth-box{
|
||||
background:linear-gradient(165deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
|
||||
backdrop-filter:blur(8px);
|
||||
-webkit-backdrop-filter:blur(8px);
|
||||
border-radius:var(--r-md);
|
||||
padding:14px;
|
||||
margin-top:14px !important;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-top:1px solid var(--border-subtle) !important;
|
||||
}
|
||||
|
||||
/* ── CURSOR pointer em interativos críticos ── */
|
||||
.tab,.btn,.fab,.icon-btn,.media-btn,.media-thumb,.media-item,.alert,
|
||||
.entry-actions button,.modal-head button,.pax-tag button{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
/* ── FOCUS visible global ── */
|
||||
*:focus-visible{
|
||||
outline:2px solid var(--brass);
|
||||
outline-offset:2px;
|
||||
border-radius:var(--r-sm);
|
||||
}
|
||||
|
||||
/* ── REDUCED MOTION (accessibility) ── */
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
*,*::before,*::after{
|
||||
animation-duration:.01ms !important;
|
||||
animation-iteration-count:1 !important;
|
||||
transition-duration:.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── LARGE SCREENS: mais respiro ── */
|
||||
@media(min-width:780px){
|
||||
.container{padding:32px 24px 96px}
|
||||
.stats{grid-template-columns:repeat(4,1fr)}
|
||||
}
|
||||
|
||||
/* ── SCROLLBAR sutil (Firefox + WebKit) ── */
|
||||
*{scrollbar-width:thin; scrollbar-color:var(--brass) transparent}
|
||||
::-webkit-scrollbar{width:8px; height:8px}
|
||||
::-webkit-scrollbar-track{background:transparent}
|
||||
::-webkit-scrollbar-thumb{background:rgba(160,120,50,.35); border-radius:var(--r-pill)}
|
||||
::-webkit-scrollbar-thumb:hover{background:rgba(160,120,50,.55)}
|
||||
|
||||
/* ── TYPOGRAPHY refinement ── */
|
||||
.boat-name{font-size:26px}
|
||||
.entry-title{font-size:20px; line-height:1.25}
|
||||
.modal-head h3{font-size:20px}
|
||||
.empty-title{margin-bottom:6px}
|
||||
|
||||
/* ── SECTION HEADER sutilmente refinado ── */
|
||||
.section-header h2{font-size:11px; font-weight:600; color:var(--ink-mid)}
|
||||
|
||||
/* ── TOOLBAR refinada ── */
|
||||
.toolbar{gap:10px; margin-bottom:18px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -774,6 +774,435 @@ header{
|
|||
body{background:#fff;background-image:none}
|
||||
.entry{break-inside:avoid;border:1px solid #999}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════
|
||||
MODERN PROFESSIONAL OVERLAY · v2 — Apr 2026
|
||||
Mantém identidade marítima (cores Fraunces + Manrope + JetBrains Mono),
|
||||
mas moderniza profundamente: depth, microinterações, polish premium.
|
||||
═══════════════════════════════════════════════════════ */
|
||||
:root{
|
||||
/* spacing scale (8pt base) */
|
||||
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
|
||||
/* radius scale (sutis — alinhados ao tom marítimo) */
|
||||
--r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
|
||||
/* shadow scale (depth profissional) */
|
||||
--sh-1:0 1px 2px rgba(14,42,61,.06), 0 1px 1px rgba(14,42,61,.04);
|
||||
--sh-2:0 2px 4px rgba(14,42,61,.06), 0 4px 8px rgba(14,42,61,.05);
|
||||
--sh-3:0 4px 8px rgba(14,42,61,.07), 0 8px 16px rgba(14,42,61,.06);
|
||||
--sh-4:0 8px 16px rgba(14,42,61,.08), 0 16px 32px rgba(14,42,61,.08);
|
||||
--sh-5:0 16px 32px rgba(14,42,61,.10), 0 32px 64px rgba(14,42,61,.10);
|
||||
--sh-glow:0 0 0 4px rgba(160,120,50,.12);
|
||||
--sh-glow-blue:0 0 0 4px rgba(31,91,118,.18);
|
||||
/* transitions */
|
||||
--t-fast:120ms cubic-bezier(.4,0,.2,1);
|
||||
--t-base:200ms cubic-bezier(.4,0,.2,1);
|
||||
--t-slow:320ms cubic-bezier(.4,0,.2,1);
|
||||
/* superfícies elevadas premium */
|
||||
--surface-1:#fbf5e2;
|
||||
--surface-2:#ffffff;
|
||||
--surface-elevated:rgba(255,255,255,.78);
|
||||
--border-subtle:rgba(184,156,108,.22);
|
||||
--border-strong:rgba(184,156,108,.55);
|
||||
}
|
||||
|
||||
/* ── BACKGROUND limpo elegante (sem ruído) ── */
|
||||
body{
|
||||
background:
|
||||
radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
|
||||
linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
|
||||
background-attachment:fixed;
|
||||
background-image:
|
||||
radial-gradient(ellipse 1200px 800px at 50% -200px, #f8eed5 0%, transparent 60%),
|
||||
linear-gradient(180deg, #efe5cd 0%, #e7d9b6 100%);
|
||||
}
|
||||
|
||||
/* ── HEADER premium com glow sutil + gradient ── */
|
||||
header{
|
||||
background:linear-gradient(180deg, #0e2a3d 0%, #143447 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(200,159,84,.30),
|
||||
inset 0 -1px 0 rgba(160,120,50,.55),
|
||||
0 4px 24px rgba(14,42,61,.18),
|
||||
0 12px 48px rgba(14,42,61,.10);
|
||||
border-bottom:none;
|
||||
}
|
||||
.header-row{padding:2px 0}
|
||||
.boat-name{
|
||||
text-shadow:0 1px 2px rgba(0,0,0,.25);
|
||||
letter-spacing:-.015em;
|
||||
}
|
||||
.compass-mark{
|
||||
filter:drop-shadow(0 2px 8px rgba(200,159,84,.35));
|
||||
transition:transform var(--t-base);
|
||||
}
|
||||
.compass-mark:hover{transform:rotate(15deg)}
|
||||
|
||||
/* ── TABS modernas: pill nav com indicador animado ── */
|
||||
.tabs{
|
||||
background:rgba(239,229,205,.92);
|
||||
backdrop-filter:blur(12px) saturate(1.2);
|
||||
-webkit-backdrop-filter:blur(12px) saturate(1.2);
|
||||
border-bottom:1px solid var(--border-subtle);
|
||||
padding:8px 4px 0;
|
||||
gap:2px;
|
||||
box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
|
||||
}
|
||||
.tab{
|
||||
border-radius:var(--r-md) var(--r-md) 0 0;
|
||||
padding:13px 18px 14px;
|
||||
transition:color var(--t-base), background var(--t-base);
|
||||
position:relative;
|
||||
}
|
||||
.tab:hover{
|
||||
color:var(--ink-mid);
|
||||
background:rgba(255,255,255,.4);
|
||||
}
|
||||
.tab.active{
|
||||
color:var(--ink-deep);
|
||||
background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
|
||||
}
|
||||
.tab.active::after{
|
||||
height:3px;left:14px;right:14px;bottom:0;
|
||||
background:linear-gradient(90deg, var(--brass), var(--brass-bright));
|
||||
border-radius:2px 2px 0 0;
|
||||
box-shadow:0 0 8px rgba(160,120,50,.4);
|
||||
}
|
||||
|
||||
/* ── CARDS com depth real (sombra multi-layer) ── */
|
||||
.gps-card,.anchor-card,.export-card,.empty,.entry,.contact-card{
|
||||
border-radius:var(--r-lg);
|
||||
box-shadow:var(--sh-2);
|
||||
transition:box-shadow var(--t-base), transform var(--t-base);
|
||||
overflow:hidden;
|
||||
}
|
||||
.entry{
|
||||
border-radius:var(--r-md);
|
||||
box-shadow:var(--sh-1);
|
||||
border-color:var(--border-subtle);
|
||||
}
|
||||
.entry:hover{box-shadow:var(--sh-2)}
|
||||
|
||||
.gps-card,.anchor-card{
|
||||
border-radius:var(--r-lg);
|
||||
background:linear-gradient(165deg, #0e2a3d 0%, #1a3d54 100%);
|
||||
border:1px solid rgba(200,159,84,.4);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(200,159,84,.2),
|
||||
var(--sh-3),
|
||||
0 0 32px rgba(31,91,118,.15);
|
||||
}
|
||||
.gps-card::before,.anchor-card::before{display:none}
|
||||
.gps-card.idle{
|
||||
background:linear-gradient(165deg, #fbf5e2 0%, #f3e7c4 100%);
|
||||
border:1px solid var(--border-subtle);
|
||||
box-shadow:var(--sh-2);
|
||||
}
|
||||
.gps-stats,.anchor-stats-bar{
|
||||
background:rgba(0,0,0,.15);
|
||||
padding:14px;
|
||||
border-radius:var(--r-md);
|
||||
margin:12px 0 14px;
|
||||
}
|
||||
.gps-card.idle .gps-stats{background:rgba(184,156,108,.08)}
|
||||
|
||||
.export-card,.empty{
|
||||
background:var(--surface-elevated);
|
||||
backdrop-filter:blur(8px);
|
||||
-webkit-backdrop-filter:blur(8px);
|
||||
border-radius:var(--r-lg);
|
||||
border:1px solid var(--border-subtle);
|
||||
box-shadow:var(--sh-2);
|
||||
}
|
||||
.export-card:hover{box-shadow:var(--sh-3)}
|
||||
|
||||
/* ── BUTTONS premium com lift e ripple ── */
|
||||
.btn{
|
||||
border-radius:var(--r-md);
|
||||
transition:all var(--t-base);
|
||||
font-weight:600;
|
||||
letter-spacing:.12em;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.btn:hover{
|
||||
transform:translateY(-1px);
|
||||
box-shadow:var(--sh-2);
|
||||
}
|
||||
.btn:active{transform:translateY(0); box-shadow:var(--sh-1)}
|
||||
.btn:focus-visible{
|
||||
outline:none;
|
||||
box-shadow:var(--sh-glow);
|
||||
}
|
||||
.btn-primary{
|
||||
background:linear-gradient(180deg, #143a52 0%, #0e2a3d 100%);
|
||||
border-color:rgba(0,0,0,.4);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.10),
|
||||
var(--sh-1);
|
||||
}
|
||||
.btn-primary:hover{
|
||||
background:linear-gradient(180deg, #1a4a66 0%, #143a52 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.15),
|
||||
var(--sh-3);
|
||||
}
|
||||
.btn-brass{
|
||||
background:linear-gradient(180deg, #b88a3c 0%, #8d6826 100%);
|
||||
border-color:rgba(0,0,0,.25);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.18),
|
||||
var(--sh-1);
|
||||
}
|
||||
.btn-brass:hover{
|
||||
background:linear-gradient(180deg, #c89954 0%, #a07832 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,.25),
|
||||
var(--sh-3);
|
||||
}
|
||||
.btn-danger{
|
||||
background:transparent;
|
||||
border:1px solid var(--storm);
|
||||
color:var(--storm);
|
||||
}
|
||||
.btn-danger:hover{
|
||||
background:linear-gradient(180deg, #a04545 0%, #8c3434 100%);
|
||||
color:#fff;
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
/* ── FIELDS modernos com focus ring ── */
|
||||
.field input,.field textarea,.field select{
|
||||
border-radius:var(--r-md);
|
||||
background:var(--surface-2);
|
||||
border:1px solid var(--border-subtle);
|
||||
padding:12px 14px;
|
||||
font-size:15px;
|
||||
transition:border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
|
||||
}
|
||||
.field input:hover,.field textarea:hover,.field select:hover{
|
||||
border-color:var(--border-strong);
|
||||
}
|
||||
.field input:focus,.field textarea:focus,.field select:focus{
|
||||
border-color:var(--brass);
|
||||
background:#fff;
|
||||
box-shadow:var(--sh-glow);
|
||||
}
|
||||
.field-label{font-size:11px; font-weight:600; color:var(--ink-mid); margin-bottom:6px}
|
||||
|
||||
/* ── MODAL com depth maior + entrance polida ── */
|
||||
.modal-backdrop{
|
||||
background:rgba(14,42,61,.65);
|
||||
backdrop-filter:blur(8px) saturate(1.1);
|
||||
-webkit-backdrop-filter:blur(8px) saturate(1.1);
|
||||
}
|
||||
.modal{
|
||||
border-radius:var(--r-xl) var(--r-xl) 0 0;
|
||||
border-top:none;
|
||||
box-shadow:
|
||||
0 -4px 12px rgba(0,0,0,.05),
|
||||
0 -16px 48px rgba(14,42,61,.25);
|
||||
background-image:none;
|
||||
background:linear-gradient(180deg, #fcf6e4 0%, #f8f0d4 100%);
|
||||
}
|
||||
@media(min-width:600px){
|
||||
.modal{
|
||||
border-radius:var(--r-xl);
|
||||
box-shadow:0 24px 64px rgba(14,42,61,.30), 0 8px 16px rgba(14,42,61,.10);
|
||||
}
|
||||
}
|
||||
.modal-head{
|
||||
background:transparent;
|
||||
padding:18px 22px;
|
||||
border-bottom:1px solid var(--border-subtle);
|
||||
}
|
||||
.modal-body{padding:22px}
|
||||
.modal-foot{
|
||||
background:rgba(0,0,0,.02);
|
||||
padding:16px 22px;
|
||||
}
|
||||
|
||||
/* ── FAB redesenhado: floating elegante ── */
|
||||
.fab{
|
||||
border-radius:var(--r-pill) !important;
|
||||
background:linear-gradient(135deg, #b88a3c 0%, #8d6826 100%) !important;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(160,120,50,.4),
|
||||
0 12px 32px rgba(14,42,61,.15),
|
||||
inset 0 1px 0 rgba(255,255,255,.25) !important;
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
.fab:hover{
|
||||
transform:translateY(-2px) scale(1.05);
|
||||
box-shadow:
|
||||
0 8px 20px rgba(160,120,50,.5),
|
||||
0 16px 40px rgba(14,42,61,.20),
|
||||
inset 0 1px 0 rgba(255,255,255,.30);
|
||||
}
|
||||
.fab:active{transform:translateY(0) scale(1)}
|
||||
|
||||
/* ── STATS GRID polido ── */
|
||||
.stats{
|
||||
border-radius:var(--r-lg);
|
||||
background:transparent;
|
||||
border:none;
|
||||
gap:10px;
|
||||
box-shadow:none;
|
||||
display:grid;
|
||||
}
|
||||
.stat{
|
||||
border-radius:var(--r-md);
|
||||
background:var(--surface-elevated);
|
||||
backdrop-filter:blur(8px);
|
||||
-webkit-backdrop-filter:blur(8px);
|
||||
border:1px solid var(--border-subtle);
|
||||
box-shadow:var(--sh-1);
|
||||
padding:16px 16px 14px;
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
.stat:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
|
||||
.stat::before{
|
||||
height:3px; border-radius:2px;
|
||||
background:linear-gradient(90deg, var(--brass), var(--brass-bright));
|
||||
transform:scaleX(.5);
|
||||
transition:transform var(--t-base);
|
||||
}
|
||||
.stat:hover::before{transform:scaleX(1)}
|
||||
|
||||
/* ── EMPTY STATE elegante ── */
|
||||
.empty{padding:56px 28px; border-radius:var(--r-lg)}
|
||||
.empty::before,.empty::after{display:none}
|
||||
.empty-rose{
|
||||
width:64px; height:64px;
|
||||
filter:drop-shadow(0 4px 12px rgba(160,120,50,.25));
|
||||
margin-bottom:18px;
|
||||
}
|
||||
.empty-title{font-size:21px}
|
||||
.empty-text{font-size:14px; line-height:1.65; opacity:.85}
|
||||
|
||||
/* ── STATUS PILLS arredondados ── */
|
||||
.status-pill{
|
||||
border-radius:var(--r-pill);
|
||||
padding:3px 10px;
|
||||
font-size:9.5px;
|
||||
letter-spacing:.16em;
|
||||
}
|
||||
|
||||
/* ── ALERTS com sombra sutil ── */
|
||||
.alert{
|
||||
border-radius:var(--r-md);
|
||||
border:1px solid var(--border-subtle);
|
||||
border-left-width:4px;
|
||||
box-shadow:var(--sh-1);
|
||||
padding:14px 16px;
|
||||
transition:transform var(--t-base);
|
||||
}
|
||||
.alert:hover{transform:translateX(2px)}
|
||||
|
||||
/* ── PASSENGER PILLS modernos ── */
|
||||
.pax-pill,.pax-tag,.channel-pill{
|
||||
border-radius:var(--r-pill);
|
||||
padding:4px 12px;
|
||||
}
|
||||
|
||||
/* ── ICON BUTTONS polidos ── */
|
||||
.icon-btn{
|
||||
border-radius:var(--r-md);
|
||||
transition:all var(--t-base);
|
||||
}
|
||||
.icon-btn:hover{
|
||||
background:rgba(184,156,108,.15);
|
||||
transform:scale(1.08);
|
||||
}
|
||||
|
||||
/* ── MEDIA THUMBS ── */
|
||||
.media-thumb,.media-item{
|
||||
border-radius:var(--r-md);
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
.media-thumb:hover,.media-item:hover{
|
||||
transform:scale(1.04);
|
||||
box-shadow:var(--sh-2);
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
/* ── SENSOR WIDGET premium (top-right) ── */
|
||||
#sensors-widget{
|
||||
border-radius:var(--r-lg) !important;
|
||||
background:linear-gradient(165deg, rgba(14,42,61,.92), rgba(20,58,82,.92)) !important;
|
||||
backdrop-filter:blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter:blur(20px) saturate(1.4);
|
||||
box-shadow:
|
||||
0 4px 12px rgba(0,0,0,.15),
|
||||
0 8px 24px rgba(14,42,61,.18),
|
||||
inset 0 1px 0 rgba(200,159,84,.2) !important;
|
||||
border:1px solid rgba(200,159,84,.18);
|
||||
transition:transform var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
#sensors-widget:hover{
|
||||
transform:translateY(-1px);
|
||||
box-shadow:
|
||||
0 8px 16px rgba(0,0,0,.20),
|
||||
0 16px 32px rgba(14,42,61,.22);
|
||||
}
|
||||
|
||||
/* ── AUTH BOX polido ── */
|
||||
#auth-box{
|
||||
background:linear-gradient(165deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
|
||||
backdrop-filter:blur(8px);
|
||||
-webkit-backdrop-filter:blur(8px);
|
||||
border-radius:var(--r-md);
|
||||
padding:14px;
|
||||
margin-top:14px !important;
|
||||
border:1px solid var(--border-subtle);
|
||||
border-top:1px solid var(--border-subtle) !important;
|
||||
}
|
||||
|
||||
/* ── CURSOR pointer em interativos críticos ── */
|
||||
.tab,.btn,.fab,.icon-btn,.media-btn,.media-thumb,.media-item,.alert,
|
||||
.entry-actions button,.modal-head button,.pax-tag button{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
/* ── FOCUS visible global ── */
|
||||
*:focus-visible{
|
||||
outline:2px solid var(--brass);
|
||||
outline-offset:2px;
|
||||
border-radius:var(--r-sm);
|
||||
}
|
||||
|
||||
/* ── REDUCED MOTION (accessibility) ── */
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
*,*::before,*::after{
|
||||
animation-duration:.01ms !important;
|
||||
animation-iteration-count:1 !important;
|
||||
transition-duration:.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── LARGE SCREENS: mais respiro ── */
|
||||
@media(min-width:780px){
|
||||
.container{padding:32px 24px 96px}
|
||||
.stats{grid-template-columns:repeat(4,1fr)}
|
||||
}
|
||||
|
||||
/* ── SCROLLBAR sutil (Firefox + WebKit) ── */
|
||||
*{scrollbar-width:thin; scrollbar-color:var(--brass) transparent}
|
||||
::-webkit-scrollbar{width:8px; height:8px}
|
||||
::-webkit-scrollbar-track{background:transparent}
|
||||
::-webkit-scrollbar-thumb{background:rgba(160,120,50,.35); border-radius:var(--r-pill)}
|
||||
::-webkit-scrollbar-thumb:hover{background:rgba(160,120,50,.55)}
|
||||
|
||||
/* ── TYPOGRAPHY refinement ── */
|
||||
.boat-name{font-size:26px}
|
||||
.entry-title{font-size:20px; line-height:1.25}
|
||||
.modal-head h3{font-size:20px}
|
||||
.empty-title{margin-bottom:6px}
|
||||
|
||||
/* ── SECTION HEADER sutilmente refinado ── */
|
||||
.section-header h2{font-size:11px; font-weight:600; color:var(--ink-mid)}
|
||||
|
||||
/* ── TOOLBAR refinada ── */
|
||||
.toolbar{gap:10px; margin-bottom:18px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue