/* 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);
}
}
Services FAQs
Prices, terms, and how I do business
How much does a website cost?
What are your rates for copy and marketing?
Do prices change based on project size?
Do you offer concessions?
What happens after the intro?
How do you quote projects?
Can you work to a deadline?
What if I'm worried about email overload?