77 lines
1.7 KiB
CSS
77 lines
1.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bartle&family=BBH+Sans+Bogle&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
/* Base styles */
|
|
body {
|
|
background-color: #0a0a0a;
|
|
color: #fff;
|
|
font-family: 'BBH Sans Bogle', sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'BBH Sans Bartle', sans-serif;
|
|
letter-spacing: +0.07em;
|
|
}
|
|
|
|
span {
|
|
letter-spacing: +0.08em;
|
|
}
|
|
|
|
|
|
/* Topographic line pattern */
|
|
.topo-lines {
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 50px,
|
|
rgba(255, 255, 255, 0.03) 50px,
|
|
rgba(255, 255, 255, 0.03) 51px
|
|
),
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 50px,
|
|
rgba(255, 255, 255, 0.03) 50px,
|
|
rgba(255, 255, 255, 0.03) 51px
|
|
);
|
|
}
|
|
|
|
.topo-lines-dense {
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 20px,
|
|
rgba(255, 255, 255, 0.02) 20px,
|
|
rgba(255, 255, 255, 0.02) 21px
|
|
),
|
|
repeating-linear-gradient(
|
|
-45deg,
|
|
transparent,
|
|
transparent 20px,
|
|
rgba(255, 255, 255, 0.02) 20px,
|
|
rgba(255, 255, 255, 0.02) 21px
|
|
);
|
|
}
|
|
|
|
/* Sharp borders and hover effects */
|
|
.sharp-border {
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: #000;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.sharp-border:hover {
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Grid overlay effect */
|
|
.grid-overlay {
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
}
|