/* 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);
}
}
Need something done?
Fill in the form below
Let me know what you need and I'll get back to you soon. Or if you prefer, you can get in touch the fashionable way at [email protected]
