/* 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);
}
}
Do justice to your business
Get a site people actually want to visit
I design and build intuitive websites with carbon footprint and user experience in mind. Expect a site that loads in milliseconds no matter the device, and a UX that keeps visitors from going round in circles.
Everything but the kitchen sink
Things I can help you with
See for yourself
Explore the work I'm most proud of
Not the skills you were looking for?
There's more I can do
I've worked across industries on everything from graphic design to copywriting, digital marketing, events, and communications.
Check out my marketing services or browse my full portfolio to get a feel for what's possible.
Principles
What counts in my work
Effortless updates
I use low-code and no-code platforms like Webflow and Framer to deliver beautiful, functional websites. This can often mean faster turnaround times, lower costs and a website that evolves as fast as your business.
Streak-free type
When a site's typography is off, you can feel it. It makes everything look a bit out of place. Not in my book. I pick and set the best font(s) to add depth to a concept, which in turns influences the shape of every site I bring to life.
Asynchronous first
Limiting synchronous work such as meetings, lets me deliver great results without sacrificing work-life balance. Plus, working remotely means I can partner with top talent and bring in extra expertise whenever needed.
Question everything
Asking questions lets me determine the best way to help each client. Questions make space for better solutions, and real progress happens when we stand in that space willing to rethink what's been done before.
Sensible media use
By sticking to functional elements and reducing decorative images, videos and animations, I don't overwhelm visitors, drain their battery, or consume all their data. This also ensures good SEO and top accessibility.
Have a question?
I got answers
It's awkward, isn't, to talk about money and how we do business? I got you. I've taken all those tricky questions and answered them in a page.
Process
How we get from 0 → 1
Align
Made it this far? You brave soul. If you're ready to find out how I can help, book a free informal chat and bring all your questions. No pressure to commit.
Kick off
If we're a good fit, I'll have you fill out a questionnaire to clarify the brief and request a 50% deposit. Then we'll hop on a kick-off meeting to map things out and get to work.
Revise
I'll update you as I make progress, and if the work doesn't live up to your vision, I'll make it right with a revision. Every contract includes at least one.
Exhale
Heave a sigh of relief. The work is done and you can start watching your business grow. Enjoyed working with me? Tell your mates. It would mean a lot!
Need a website?
Let's hop on a call
Book a quick intro to chat about your project and see if we're a good fit. No strings attached, pinky promise.
