/* 1. Global Styles */
* {
position: relative; // Set default position for all elements
}
:root {
// Custom properties for text sizes
--text-size-80: 0.878rem;
--text-size-90: 0.937rem;
--text-size-100: 1rem;
--text-size-200: 1.067rem;
--text-size-300: 1.138rem;
--text-size-400: 1.215rem;
--text-size-500: 1.296rem;
--text-size-600: 1.383rem;
--text-size-700: 1.476rem;
}
/* 2. Base Font and Responsive Sizing */
html {
font-size: 100%; // Default size
font-size: 16px; // Fallback
font-size: calc(0.625rem + 0.41666666666666663vw); // Responsive
}
body {
line-height: 1.5;
}
img {
height: auto;
width: 100%; // Responsive images
}
/* 3. Typography */
p,
.dbb_stats {
margin: 0;
letter-spacing: -0.01em;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin: 0;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.022em;
}
strong, .bold-text {
font-variation-settings: "wght" 650;
}
// Nested heading size and small text
h1, .h1 { font-size: var(--text-size-700); }
h2, .h2 { font-size: var(--text-size-600); }
h3, .h3 { font-size: var(--text-size-500); }
h4, .h4 { font-size: var(--text-size-400); }
h5, .h5 { font-size: var(--text-size-300); }
h6, .h6 { font-size: var(--text-size-200); }
small, .small { font-size: var(--text-size-90); }
/* 4. Mixin for Repeated Styles */
@mixin size-classes($sizes...) {
@each $size in $sizes {
.text-size-#{$size} {
font-size: var(--text-size-#{$size});
}
}
}
// Use the mixin to generate font size classes
@include size-classes(80, 90, 100, 200, 300, 400, 500, 600, 700);
/* 5. Lightbox Styles */
.w-lightbox-backdrop {
font-family: inherit;
letter-spacing: inherit;
color: #ccc;
background: #000000e6;
font-size: var(--text-size-100);
font-weight: 400;
line-height: inherit;
}
.w-lightbox-frame,
.w-lightbox-thumbnail {
border-radius: 4px;
overflow: hidden;
}
.w-lightbox-caption {
height: auto;
width: 100%;
padding: 1.5em;
white-space: normal;
}
/* 6. Additional Class Styling */
.dbb {
font-family: inherit;
transform: scale(0.8);
text-align: center;
width: 100%;
height: 100%;
padding: 0;
border-radius: 2px;
border: 1px solid #ccc;
background-color: transparent !important;
color: #ccc;
}
.dbb_stats {
font-size: var(--text-size-80) !important;
font-family: "Inter Variable", sans-serif;
font-variation-settings: "wght" 350;
}
/* 7. Gradient and Arrow Styles */
.gradient-to-green {
z-index: 3;
background: rgb(0, 0, 0);
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 60%, rgba(19, 53, 40, 1) 100%);
}
.left-arrow, .right-arrow, .w-slider-arrow-right {
z-index: 4;
}
/* Focus styles */
input:focus, textarea:focus, .w-input:focus, .w-select:focus {
outline: none;
border-color: #00f;
}
/* 8. Media Queries */
@media screen and (max-width: 1920px) {
html {
font-size: calc(0.625rem + 0.41666666666666674vw);
}
}
@media screen and (max-width: 1440px) {
html {
font-size: calc(0.8126951092611863rem + 0.20811654526534862vw);
}
}
@media screen and (max-width: 320px) {
html {
font-size: calc(0.8121077405857741rem + 0.6276150627615062vw);
}
}
Grow with peers who get it
Learn skills. Break barriers. Get work done
Join facilitated workshops, body-doubling hours, and planning sessions for folks who see the world askew. Plan, work, push through and get organized. Side by side.
We're launching soon
Join the waitlist to get invited first
I won't send you spam, I promise. And if you find the events aren’t for you when the deets come through, you're 100% free to unsubscribe.
Focus hours for everyone
Here is what you can expect
.png){kind=small}