/* 1. Global Styles */
* {
position: relative; // 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%; // Restore default scaling for browsers
font-size: 16px; // Fallback px
font-size: 1rem; // Fallback rem
font-size: calc(0.625rem + 0.41666666666666663vw); // Responsive
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased; // Better text rendering on WebKit
-moz-osx-font-smoothing: grayscale; // Smoother fonts on macOS
text-rendering: optimizeLegibility;
}
img {
height: auto;
width: 100%; // Responsive images
}
/* Accessibility and Interactivity */
:focus:not(:focus-visible) {
outline: none;
}
[tabindex]:focus-visible,
input[type="file"]:focus-visible {
border: 0.125rem solid rgba(58, 64, 62, 0.75);
}
a {
cursor: pointer;
}
/* 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;
}
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});
}
}
}
@include size-classes(80, 90, 100, 200, 300, 400, 500, 600, 700);
/* 6. 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;
}
/* 7. 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
