301 lines
6.6 KiB
CSS
301 lines
6.6 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
/* Blueprint color palette - warm cream paper with blue ink */
|
|
--background: oklch(0.97 0.01 85);
|
|
--foreground: oklch(0.25 0.02 250);
|
|
--card: oklch(0.95 0.015 85);
|
|
--card-foreground: oklch(0.25 0.02 250);
|
|
--popover: oklch(0.96 0.01 85);
|
|
--popover-foreground: oklch(0.25 0.02 250);
|
|
--primary: oklch(0.45 0.15 250);
|
|
--primary-foreground: oklch(0.98 0.01 85);
|
|
--secondary: oklch(0.92 0.02 85);
|
|
--secondary-foreground: oklch(0.35 0.08 250);
|
|
--muted: oklch(0.90 0.015 85);
|
|
--muted-foreground: oklch(0.45 0.04 250);
|
|
--accent: oklch(0.55 0.12 30);
|
|
--accent-foreground: oklch(0.98 0.01 85);
|
|
--destructive: oklch(0.55 0.2 25);
|
|
--destructive-foreground: oklch(0.98 0.01 85);
|
|
--border: oklch(0.75 0.06 250);
|
|
--input: oklch(0.92 0.02 85);
|
|
--ring: oklch(0.45 0.15 250);
|
|
--radius: 0.125rem;
|
|
|
|
/* Blueprint specific */
|
|
--grid-color: oklch(0.75 0.08 250 / 0.3);
|
|
--sketch-color: oklch(0.35 0.12 250);
|
|
--annotation-color: oklch(0.50 0.15 30);
|
|
}
|
|
|
|
@theme inline {
|
|
--font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", "Fira Code", monospace;
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--radius-sm: calc(var(--radius) - 1px);
|
|
--radius-md: var(--radius);
|
|
--radius-lg: calc(var(--radius) + 2px);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: var(--font-sans);
|
|
/* Blueprint grid paper background */
|
|
background-image:
|
|
linear-gradient(var(--grid-color) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
background-position: -1px -1px;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
::selection {
|
|
background: oklch(0.45 0.15 250 / 0.25);
|
|
color: oklch(0.20 0.02 250);
|
|
}
|
|
}
|
|
|
|
/* Sketch/hand-drawn border effect */
|
|
.sketch-border {
|
|
position: relative;
|
|
border: 2px solid var(--sketch-color);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.sketch-border::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -3px;
|
|
border: 1px solid var(--sketch-color);
|
|
border-radius: 3px;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Blueprint card styling */
|
|
.blueprint-card {
|
|
background: oklch(0.96 0.01 85 / 0.9);
|
|
border: 1.5px solid var(--sketch-color);
|
|
border-radius: 2px;
|
|
box-shadow:
|
|
3px 3px 0 oklch(0.45 0.15 250 / 0.1),
|
|
inset 0 0 0 1px oklch(0.45 0.15 250 / 0.05);
|
|
}
|
|
|
|
/* Node/diagram point styling */
|
|
.node-point {
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 2px solid var(--sketch-color);
|
|
border-radius: 50%;
|
|
background: var(--background);
|
|
}
|
|
|
|
.node-point.filled {
|
|
background: var(--sketch-color);
|
|
}
|
|
|
|
/* Connection lines */
|
|
.connection-line {
|
|
stroke: var(--sketch-color);
|
|
stroke-width: 1.5;
|
|
stroke-dasharray: 4 2;
|
|
fill: none;
|
|
}
|
|
|
|
.connection-line.solid {
|
|
stroke-dasharray: none;
|
|
}
|
|
|
|
/* Annotation styling */
|
|
.annotation {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--annotation-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
.annotation::before {
|
|
content: "// ";
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Section label - like blueprint labels */
|
|
.section-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0.75rem;
|
|
background: var(--sketch-color);
|
|
color: var(--background);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Handwritten-style text */
|
|
.handwritten {
|
|
font-family: "Caveat", "Comic Sans MS", cursive;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Fade in animation */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
}
|
|
|
|
/* Stagger animation delays */
|
|
.stagger-1 { animation-delay: 0.1s; }
|
|
.stagger-2 { animation-delay: 0.2s; }
|
|
.stagger-3 { animation-delay: 0.3s; }
|
|
.stagger-4 { animation-delay: 0.4s; }
|
|
.stagger-5 { animation-delay: 0.5s; }
|
|
|
|
/* Cursor blink for typing effect */
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
.cursor-blink::after {
|
|
content: "|";
|
|
animation: blink 1s step-end infinite;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
/* Graph/chart styling */
|
|
.graph-axis {
|
|
stroke: var(--sketch-color);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.graph-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.65rem;
|
|
fill: var(--muted-foreground);
|
|
}
|
|
|
|
/* Tag/label styling */
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 1px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--muted-foreground);
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.tag.primary {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
background: oklch(0.45 0.15 250 / 0.08);
|
|
}
|
|
|
|
/* Dimension lines (like architectural drawings) */
|
|
.dimension-line {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dimension-line::before,
|
|
.dimension-line::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
/* Crosshatch pattern for backgrounds */
|
|
.crosshatch {
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 4px,
|
|
oklch(0.45 0.15 250 / 0.03) 4px,
|
|
oklch(0.45 0.15 250 / 0.03) 5px
|
|
);
|
|
}
|
|
|
|
/* Hover lift effect */
|
|
.hover-lift {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 4px 4px 0 oklch(0.45 0.15 250 / 0.15);
|
|
}
|
|
|
|
/* Link styling */
|
|
a.blueprint-link {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed var(--primary);
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
a.blueprint-link:hover {
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
/* Status indicators */
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid currentColor;
|
|
}
|
|
|
|
.status-dot.active {
|
|
background: currentColor;
|
|
}
|