feat: Revamped design - improved dark mode visibility, mobile UX fixes, updated trust signals
This commit is contained in:
Satyam
+202
-57
@@ -1,7 +1,55 @@
|
||||
/* === Font Imports === */
|
||||
/* Instrument Serif: "The Authority" — headlines, section titles, pull-quotes */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
|
||||
/* JetBrains Mono: "The Instrument" — data readouts, stat counters, HUD labels */
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
|
||||
/* Inter: "The Engineer" — body text, UI, navigation (already system-available, loaded for consistency) */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* === Base Layer: Global Resets & Defaults === */
|
||||
@layer base {
|
||||
:root {
|
||||
font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Crane SVG theme-aware stroke/fill tokens */
|
||||
--crane-line-strong: rgba(0, 0, 0, 0.22);
|
||||
--crane-line-medium: rgba(0, 0, 0, 0.14);
|
||||
--crane-line-subtle: rgba(0, 0, 0, 0.08);
|
||||
--crane-fill-surface: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Dark mode base for landing page */
|
||||
.dark {
|
||||
background-color: #09090b;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
|
||||
--crane-line-strong: rgba(255, 255, 255, 0.16);
|
||||
--crane-line-medium: rgba(255, 255, 255, 0.10);
|
||||
--crane-line-subtle: rgba(255, 255, 255, 0.06);
|
||||
--crane-fill-surface: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
/* === Utility Animations === */
|
||||
@layer utilities {
|
||||
.animate-in {
|
||||
animation-duration: 0.5s;
|
||||
@@ -21,13 +69,8 @@
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideInBottom {
|
||||
@@ -35,52 +78,173 @@
|
||||
transform: translateY(1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* === Scrollbar: Hidden Globally === */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
color: #1a1a1a;
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
/* Type 1: Invisible but copyable */
|
||||
/* Type 1: Invisible but copyable */
|
||||
|
||||
/* === Construction Design Elements === */
|
||||
|
||||
/* Permit stamp — "VERIFIED" / "INSPECTED" badge treatment */
|
||||
@layer components {
|
||||
.permit-stamp {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1.5px solid currentColor;
|
||||
padding: 3px 10px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
transform: rotate(-2deg);
|
||||
border-radius: 3px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.permit-stamp--accent {
|
||||
color: #3b82f6;
|
||||
border-color: rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
.permit-stamp--verified {
|
||||
color: #10b981;
|
||||
border-color: rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
.permit-stamp--danger {
|
||||
color: #ef4444;
|
||||
border-color: rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Shingle divider — overlapping parallelogram pattern mimicking roof shingles */
|
||||
@layer components {
|
||||
.shingle-divider {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
|
||||
linear-gradient(225deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
|
||||
linear-gradient(315deg, rgba(0,0,0,0.06) 25%, transparent 25%),
|
||||
linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%);
|
||||
background-size: 48px 20px;
|
||||
background-color: transparent;
|
||||
}
|
||||
.dark .shingle-divider {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
|
||||
linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
|
||||
linear-gradient(315deg, rgba(255,255,255,0.04) 25%, transparent 25%),
|
||||
linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%);
|
||||
background-size: 48px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Safety stripe — diagonal hazard pattern for urgent/warning elements */
|
||||
@layer components {
|
||||
.safety-stripe {
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 4px,
|
||||
rgba(245, 158, 11, 0.12) 4px,
|
||||
rgba(245, 158, 11, 0.12) 8px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* Measurement tick marks — ruler/tape aesthetic for stat counters */
|
||||
@layer components {
|
||||
.measure-ticks {
|
||||
background-image:
|
||||
repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1.5px, transparent 1.5px, transparent 24px),
|
||||
repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 6px);
|
||||
background-size: 100% 100%, 100% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom, bottom;
|
||||
}
|
||||
.dark .measure-ticks {
|
||||
background-image:
|
||||
repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 1.5px, transparent 1.5px, transparent 24px),
|
||||
repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 6px);
|
||||
}
|
||||
.measure-ticks-top {
|
||||
background-position: top, top;
|
||||
}
|
||||
}
|
||||
|
||||
/* Blueprint grid — combined background-image + background-size */
|
||||
@layer components {
|
||||
.blueprint-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
.dark .blueprint-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
|
||||
}
|
||||
.blueprint-grid-fine {
|
||||
background-image:
|
||||
linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px),
|
||||
linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
|
||||
background-size: 12px 12px, 12px 12px, 48px 48px, 48px 48px;
|
||||
}
|
||||
.dark .blueprint-grid-fine {
|
||||
background-image:
|
||||
linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px),
|
||||
linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile bottom sheet slide-up for Intelligence Map */
|
||||
@keyframes slideUpSheet {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Crane swing — gentle pendulum sway for suspended CTA card */
|
||||
@keyframes craneSwing {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(1.5deg); }
|
||||
75% { transform: rotate(-1.5deg); }
|
||||
}
|
||||
@layer components {
|
||||
.crane-swing {
|
||||
animation: craneSwing 4s ease-in-out infinite;
|
||||
transform-origin: top center;
|
||||
}
|
||||
.crane-swing:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Attribution (existing, preserved) === */
|
||||
@layer utilities {
|
||||
.attribution-ghost,
|
||||
.content-ref-x7,
|
||||
.sys-ref-x7,
|
||||
@@ -89,44 +253,25 @@ body,
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
font-size: 1px;
|
||||
/* Must have size to be selected */
|
||||
color: transparent;
|
||||
/* Text exists but is invisible */
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
/* Standard sr-only hide */
|
||||
white-space: nowrap;
|
||||
user-select: text;
|
||||
/* Critical */
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Type 2: Hidden until selected (General) */
|
||||
/* Type 2: Hidden until selected (General) */
|
||||
.attribution-reveal {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.attribution-reveal::selection {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Global Hidden Scrollbar (User Requested) */
|
||||
* {
|
||||
-ms-overflow-style: none;
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user