Hello, World!

:root{ --cream:#F3ECDD; --cream-2:#EBE1CC; --brown:#2A1B10; --brown-soft:#4A3221; --gold:#C9972E; --gold-light:#E3B75B; --red:#C6342A; --dusk:#1B2430; --dusk-2:#0F1620; --baja:#2E8A93; --baja-light:#7FCBD1; --safari:#8A7135; --safari-light:#C9A85C; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Fraunces', serif; background:var(--cream); color:var(--brown); -webkit-font-smoothing:antialiased; } .display{ font-family:'Poppins', sans-serif; font-style:italic; font-weight:800; } .mono{ font-family:'Space Mono', monospace; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } /* ---------- NAV ---------- */ header{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px 32px; } .badge{ width:56px; height:56px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; transform:rotate(-8deg); box-shadow:0 6px 18px rgba(0,0,0,0.35); flex-shrink:0; } .badge span{ font-family:'Poppins', sans-serif; font-style:italic; font-weight:700; color:#fff; font-size:13px; letter-spacing:0.5px; } header .drop-label{ font-family:'Space Mono', monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--cream); background:var(--brown); padding:8px 16px; border-radius:20px; } /* ---------- HERO / COUNTDOWN ---------- */ .hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px 80px; background:var(--brown); color:var(--cream); overflow:hidden; } .hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 15%, rgba(46,138,147,0.25) 0%, rgba(46,138,147,0) 40%), radial-gradient(circle at 82% 20%, rgba(138,113,53,0.3) 0%, rgba(138,113,53,0) 40%); } .hero-inner{ position:relative; z-index:2; max-width:760px; } .eyebrow{ font-family:'Space Mono', monospace; font-size:12px; letter-spacing:5px; text-transform:uppercase; color:var(--gold-light); margin-bottom:20px; } .hero h1{ color:var(--gold-light); font-size:clamp(42px, 8vw, 88px); line-height:0.95; text-shadow: 3px 4px 0 rgba(0,0,0,0.4); letter-spacing:-1px; } .hero p.sub{ font-family:'Fraunces', serif; font-style:italic; font-size:clamp(16px, 2.2vw, 21px); margin-top:26px; opacity:0.9; max-width:520px; margin-left:auto; margin-right:auto; } .countdown{ display:flex; gap:18px; justify-content:center; margin-top:52px; flex-wrap:wrap; } .countdown .unit{ background:rgba(255,255,255,0.06); border:1px solid rgba(227,183,91,0.35); border-radius:14px; padding:18px 22px; min-width:86px; } .countdown .num{ font-family:'Space Mono', monospace; font-weight:700; font-size:clamp(28px, 5vw, 42px); color:var(--cream); line-height:1; } .countdown .lbl{ font-family:'Space Mono', monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-light); margin-top:8px; } .cta{ display:inline-block; font-family:'Poppins', sans-serif; font-weight:700; font-style:italic; background:var(--red); color:#fff; padding:17px 42px; border-radius:40px; margin-top:44px; letter-spacing:0.5px; box-shadow:0 10px 24px rgba(198,52,42,0.45); transition:transform .2s ease; } .cta:hover{ transform:translateY(-2px); } /* ---------- PRODUCTS ---------- */ .products{ background:var(--cream); padding:100px 24px 60px; } .products-head{ text-align:center; max-width:600px; margin:0 auto 60px; } .products-head .kicker{ font-family:'Space Mono', monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--brown-soft); margin-bottom:14px; } .products-head h2{ font-size:clamp(28px, 4.5vw, 42px); line-height:1.15; } .products-head h2 .accent{ color:var(--red); font-style:italic; } .pair{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:32px; } .pcard{ border-radius:22px; padding:40px 34px; position:relative; overflow:hidden; } .pcard.baja{ background:linear-gradient(160deg, var(--baja) 0%, #1E5A61 100%); color:#fff; } .pcard.safari{ background:linear-gradient(160deg, var(--safari-light) 0%, var(--safari) 100%); color:var(--brown); } .pcard .inseam{ display:inline-block; font-family:'Space Mono', monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; background:rgba(255,255,255,0.25); padding:6px 14px; border-radius:20px; margin-bottom:22px; } .pcard h3{ font-family:'Poppins', sans-serif; font-style:italic; font-weight:800; font-size:clamp(26px, 3.5vw, 34px); margin-bottom:14px; } .pcard p{ font-size:15px; line-height:1.6; opacity:0.92; max-width:340px; } .pcard .price{ font-family:'Space Mono', monospace; font-weight:700; font-size:22px; margin-top:26px; } .pcard .swatch-row{ display:flex; gap:10px; margin-top:20px; } .pcard .swatch{ width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.6); } /* ---------- BUNDLE ---------- */ .bundle{ max-width:1080px; margin:52px auto 0; background:var(--brown); border-radius:24px; padding:52px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; color:var(--cream); position:relative; overflow:hidden; } .bundle::after{ content:"−20%"; position:absolute; right:-10px; top:-24px; font-family:'Poppins', sans-serif; font-style:italic; font-weight:800; font-size:140px; color:rgba(227,183,91,0.08); line-height:1; } .bundle-text{ position:relative; z-index:2; max-width:520px; } .bundle-text .kicker{ font-family:'Space Mono', monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-light); margin-bottom:12px; } .bundle-text h3{ font-family:'Poppins', sans-serif; font-style:italic; font-weight:800; font-size:clamp(24px, 3.5vw, 32px); line-height:1.2; } .bundle-text p{ margin-top:14px; opacity:0.85; font-size:15px; line-height:1.6; } .bundle-cta{ position:relative; z-index:2; text-align:center; } .bundle-cta .save-tag{ font-family:'Space Mono', monospace; font-weight:700; font-size:15px; color:var(--gold-light); margin-bottom:14px; display:block; } /* ---------- FOOTER CTA ---------- */ .final{ position:relative; background:linear-gradient(180deg, var(--dusk) 0%, var(--dusk-2) 100%); color:var(--cream); padding:100px 24px; text-align:center; margin-top:90px; } .final .tag{ font-family:'Poppins', sans-serif; font-style:italic; font-weight:800; color:var(--gold-light); font-size:clamp(26px, 5vw, 44px); text-shadow:2px 3px 0 rgba(0,0,0,0.4); } .final p{ max-width:460px; margin:18px auto 0; opacity:0.85; font-style:italic; } footer.site{ background:var(--dusk-2); color:var(--cream); text-align:center; padding:26px; font-family:'Space Mono', monospace; font-size:11px; letter-spacing:1.5px; opacity:0.5; } @media (max-width:760px){ .pair{ grid-template-columns:1fr; } .bundle{ flex-direction:column; text-align:center; } .bundle-text{ max-width:100%; } } </style> </head> <body> <header> <div class="badge"><span>Dilfies</span></div> <div class="drop-label mono">Drops Friday</div> </header> <section class="hero"> <div class="hero-inner"> <div class="eyebrow mono">Two New Shorts. One Drop.</div> <h1 class="display">SHOP<br>THE DROP</h1> <p class="sub">The Bajas and the Safaris — 4" inseam, built for the deck, dropping this Friday. Bundle both and save 20%.</p> <div class="countdown mono" id="countdown"> <div class="unit"><div class="num" id="cd-days">--</div><div class="lbl">Days</div></div> <div class="unit"><div class="num" id="cd-hours">--</div><div class="lbl">Hours</div></div> <div class="unit"><div class="num" id="cd-mins">--</div><div class="lbl">Mins</div></div> <div class="unit"><div class="num" id="cd-secs">--</div><div class="lbl">Secs</div></div> </div> <a href="#bundle" class="cta display">Get Notified</a> </div> </section> <section class="products"> <div class="products-head"> <div class="kicker mono">The Lineup</div> <h2 class="display">Two Fits. Same <span class="accent">4" Inseam.</span></h2> </div> <div class="pair"> <div class="pcard baja"> <span class="inseam mono">4" Inseam</span> <h3>The Bajas</h3> <p>Coastal color-blocked shorts built for the water — quick-dry, faded sunset tones, made to move from the boat to the bar.</p> <div class="swatch-row"> <div class="swatch" style="background:#7FCBD1;"></div> <div class="swatch" style="background:#E3B75B;"></div> <div class="swatch" style="background:#2A1B10;"></div> </div> <div class="price mono">$45</div> </div> <div class="pcard safari"> <span class="inseam mono">4" Inseam</span> <h3>The Safaris</h3> <p>Rugged khaki-toned shorts with a stripped-back utility look — built for long days, wherever the day takes you.</p> <div class="swatch-row"> <div class="swatch" style="background:#C9A85C;"></div> <div class="swatch" style="background:#4A3221;"></div> <div class="swatch" style="background:#F3ECDD;"></div> </div> <div class="price mono">$45</div> </div> </div> <div class="bundle" id="bundle"> <div class="bundle-text"> <div class="kicker mono">Bundle & Save</div> <h3 class="display">Buy Both. Save 20%.</h3> <p>Grab the Bajas and the Safaris together and drop from $116 to $92.80 — one pair for the water, one for everywhere else.</p> </div> <div class="bundle-cta"> <span class="save-tag">$92.80 <span style="opacity:0.5; text-decoration:line-through; font-weight:400;">$116</span></span> <a href="#" class="cta display">Shop The Bundle</a> </div> </div> </section> <section class="final"> <div class="tag display">Stay Salty. Look Good.</div> <p>Drops Friday. Limited run on both fits — once they're gone, they're gone.</p> </section> <footer class="site"> DILFIES  ·  @DILFIES_  ·  DILFIES.NET </footer> <script> // Countdown to Friday drop, 9:00 AM ET var dropDate = new Date("2026-07-24T09:00:00-04:00").getTime(); function updateCountdown(){ var now = new Date().getTime(); var diff = dropDate - now; if(diff <= 0){ document.getElementById('cd-days').textContent = "00"; document.getElementById('cd-hours').textContent = "00"; document.getElementById('cd-mins').textContent = "00"; document.getElementById('cd-secs').textContent = "00"; return; } var days = Math.floor(diff / (1000 * 60 * 60 * 24)); var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); var secs = Math.floor((diff % (1000 * 60)) / 1000); document.getElementById('cd-days').textContent = String(days).padStart(2,'0'); document.getElementById('cd-hours').textContent = String(hours).padStart(2,'0'); document.getElementById('cd-mins').textContent = String(mins).padStart(2,'0'); document.getElementById('cd-secs').textContent = String(secs).padStart(2,'0'); } updateCountdown(); setInterval(updateCountdown, 1000); </script> </body> </html> </div> <style class="transform-vars"> .fe-block-yui_3_17_2_1_1784638033306_6636 { --opacity: 100%; --translate-x: 0px; --translate-y: 0px; --rotation: 0deg; --scale-x: 100%; --scale-y: 100%; --skew-x: 0deg; --skew-y: 0deg; --origin-x: 50%; --origin-y: 50%; --block-transform: none; opacity: var(--opacity, 1); transform: var(--block-transform); transform-origin: var(--origin-x) var(--origin-y); } </style><style class="transform-overrides-vars"> </style> </div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1784638033306_7145"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-code code-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.code/73c5a2c8-2b67-4266-8188-39dfdde3317a_850/website.components.code.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.code/73c5a2c8-2b67-4266-8188-39dfdde3317a_850/website.components.code.visitor.js"]" data-block-type="1337" data-definition-name="website.components.code" data-sqsp-block="code" data-website-component-id="yui_3_17_2_1_1784638033306_7145" id="block-yui_3_17_2_1_1784638033306_7145"><div class="sqs-block-content"> <div class="sqs-code-container" data-localized="{"enableSafeModeButton":"Preview in safe mode","enableSafeModeText":"This block contains embedded scripts. Embedded scripts are disabled while you're logged in and editing your site.","enableSafeModeTitle":"Embedded Scripts","exitSafeModeButton":"Exit safe preview","exitSafeModeText":"Please view the page after logging out for accurate rendering.","exitSafeModeTitle":"Safe Preview","globalSafeMode":"Embedded Code: This block contains embedded code that has been disabled.","scriptDisabled":"Script Disabled"}" > </div> <style class="transform-vars"> .fe-block-yui_3_17_2_1_1784638033306_7145 { --opacity: 100%; --translate-x: 0px; --translate-y: 0px; --rotation: 0deg; --scale-x: 100%; --scale-y: 100%; --skew-x: 0deg; --skew-y: 0deg; --origin-x: 50%; --origin-y: 50%; --block-transform: none; opacity: var(--opacity, 1); transform: var(--block-transform); transform-origin: var(--origin-x) var(--origin-y); } </style><style class="transform-overrides-vars"> </style> </div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1784639373862_8520"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-code code-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.code/73c5a2c8-2b67-4266-8188-39dfdde3317a_850/website.components.code.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.code/73c5a2c8-2b67-4266-8188-39dfdde3317a_850/website.components.code.visitor.js"]" data-block-type="1337" data-definition-name="website.components.code" data-sqsp-block="code" data-website-component-id="yui_3_17_2_1_1784639373862_8520" id="block-yui_3_17_2_1_1784639373862_8520"><div class="sqs-block-content"> <div class="sqs-code-container" data-localized="{"enableSafeModeButton":"Preview in safe mode","enableSafeModeText":"This block contains embedded scripts. Embedded scripts are disabled while you're logged in and editing your site.","enableSafeModeTitle":"Embedded Scripts","exitSafeModeButton":"Exit safe preview","exitSafeModeText":"Please view the page after logging out for accurate rendering.","exitSafeModeTitle":"Safe Preview","globalSafeMode":"Embedded Code: This block contains embedded code that has been disabled.","scriptDisabled":"Script Disabled"}" > DOCTYPE html> <html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en-US" lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mens shorts 4 inch inseam quick dry Dilfies — Shop The Drop
Drops Friday
Two New Shorts. One Drop.

SHOP
THE DROP

The Bajas and the Safaris — 4" inseam, built for the deck, dropping this Friday. Bundle with anything else in the shop and save 20% on your entire order.

--
Days
--
Hours
--
Mins
--
Secs
Get Notified
The Lineup

Two Fits. Same 4" Inseam.

4" Inseam

The Bajas

Coastal color-blocked shorts built for the water — quick-dry, faded sunset tones, made to move from the boat to the bar.

$45
4" Inseam

The Safaris

Rugged khaki-toned shorts with a stripped-back utility look — built for long days, wherever the day takes you.

$45
Bundle & Save

Bundle Anything. Save 20%.

Grab a pair of Bajas or Safaris and add anything else from the Dilfies shop — get 20% off your entire order at checkout.

20% OFF Entire Order Shop The Drop
Stay Salty. Look Good.

Drops Friday. Limited run on both fits — once they're gone, they're gone.

DILFIES  ·  @DILFIES_  ·  DILFIES.NET

Hello, World!

Explore Our Services

Inquire Now

What We Offer

Basic Service

The Atlas Project →

Included

Initial Consultation

Brainstorming Session

Collaborative Planning

Customized Deliverables

Multiple Feedback Rounds

Actionable Recommendations

Post-Project Support

Intermediate Service

The Echo Project →

Included

Initial Consultation

Brainstorming Session

Collaborative Planning

Customized Deliverables

Multiple Feedback Rounds

Actionable Recommendations

Post-Project Support

Advanced Service

The Brightline Project →

Included

Initial Consultation

Brainstorming Session

Collaborative Planning

Customized Deliverables

Multiple Feedback Rounds

Actionable Recommendations

Post-Project Support

Recommended

“Their attention to detail and commitment to quality truly stood out. We’ve already recommended them to others.”

– Former Customer

Get In Touch

If you're interested in working with us, complete the form with a few details about your project. We'll review your message and get back to you within 48 hours.