/* 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);
}
}
Need something done?
Fill in the form below
Let me know what you need and I'll get back to you soon.
If you prefer, you can also get in touch the fashionable way at francesco@nevernotready.club
