/* ── Global Section Space Master Control ────────────────── */ /* THE section spacing value for the whole site. Change this number and nothing else — style.css points here rather than keeping a second copy that could disagree with it. .occasion-banners-section is listed too because it is the one content section that does not carry .section-space. It was on its own 80px, so the two gaps either side of it came out 140 against everyone else's 120; sharing the declaration means it can never fall out of step again. */ .section-space { padding: 60px 0 !important; } @media (max-width: 991px) { /* .section-space step moved to the ladder at the end of this file. */ body:not(.admin-wrapper) { padding-top: var(--header-height, 75px) !important; } /* The gap under every section heading comes down with the section padding. .section-title-wrapper carries margin-bottom: 50px and had no mobile override at all, so a phone got the full desktop gap — and with the divider's own 14px above it that is about 66px of empty space between "Dievon Collections" and the first card. On a 700px screen that is a tenth of the viewport spent on nothing, repeated at every section. */ /* Country picker: swap to the code-only control where the row is tight. The header prints both because a over it is invisible at every width. */ @media (max-width: 991px) { .navbar-luxury .nav-actions .currency-selector-wrapper { height: 38px; } } /* Five controls on a narrow phone. ───────────────────────────────────────────────────────────────────────────── The row carried four; the country picker makes five, and at 38px boxes that is 195px of cluster against roughly 150px of clear space on a 320px screen — the bag ended up 32px off the right edge. Measured, not guessed: scrollWidth 353 against a 320 client width. The glyphs themselves are not the problem, the boxes around them are. 38px of box for a 20px icon is 9px of padding a side; at 30px it is 5, which is still a 30px target with 2px between them and reads no tighter because the drawn size does not change. */ @media (max-width: 420px) { .navbar-luxury .nav-action-item { width: 30px; } .navbar-luxury .nav-actions .dv-country-glyph { gap: 5px; padding: 0; } .navbar-luxury .nav-actions .dv-country-code { font-size: 11.5px; letter-spacing: 0.1em; margin-right: -0.1em; } } /* Narrower still: the wordmark gives up four pixels of height so the cluster keeps its targets rather than the other way round. */ /* Narrowest step: the code goes, the glyph stays. Five controls, a hamburger and the wordmark do not fit on a 320px screen with two extra characters in the row — and the footer states the country in full anyway. */ @media (max-width: 345px) { .navbar-luxury .nav-action-item { width: 27px; } /* No label here, so no type to keep clear of — the margin goes back. */ .navbar-luxury .nav-actions .dv-country-code { display: none; } .navbar-luxury .nav-actions .currency-selector-wrapper { margin-right: 0; } .navbar-luxury .dv-icon { width: 19px; height: 19px; } .navbar-luxury .logo img { height: 30px; } } /* ═════════════════════════════════════════════════════════════════════════ HOMEPAGE HERO on small screens — the words stay ON the banner ───────────────────────────────────────────────────────────────────────── This was two rows for a while: the photograph, then the copy on an ivory panel below it. That was the safe answer while the scrim was light, because a light wash cannot rescue dark type over a bright portrait crop. With the scrim dark the reason is gone. White type over black reads on any upload, at any crop, so the phone can do what the desktop does and what the live site has always done — the copy sits inside the banner. Live puts it at bottom-left, 5% in, and that is right for a portrait frame: the model occupies the middle of the crop and the quiet ground is underneath. So the panel keeps its full-bleed box and pushes its contents to the bottom, and the gradient turns through 90 degrees — bottom-up here, left-to-right on desktop — because that is where the words moved to. ═════════════════════════════════════════════════════════════════════════ */ @media (max-width: 991px) { /* 65vh is live's own hero height on a phone. The floor is for a short landscape viewport, where 65vh is not enough to hold the type and the buttons. */ .hero-slider-section { height: 65vh !important; min-height: 460px; } .slider-container, .slider-container.owl-loaded .owl-item, .slider-container.owl-loaded .slide { height: 100% !important; } .slide { position: relative; height: 100% !important; } /* object-position keeps the top of the frame: on a tall crop of a landscape upload it is the hem that should go, not the face. */ .slide-media { position: absolute; inset: 0; } .slide-img { object-position: center 18%; } /* Bottom-up, mirroring live's overlay — but held near full strength further up the frame than live holds it. ─────────────────────────────────────────────────────────────────────── Live only has to cover one line and one button at bottom:18%. This hero stacks an eyebrow, a headline, two lines of subtext and two buttons, and on a 390px screen that column is about 45% of the frame. So the scrim has to stay heavy to roughly 55% and only then fall away. The numbers are set for the worst ground there is, not for the banners uploaded today: a pure white studio shot. White type needs the ground at or below about 118 to clear 4.5:1, and 0.60 alpha over #fff gives 102. Every stop up to 55% is at or above that, so no upload can break it — which is the whole reason the scrim went dark in the first place. Above 78% it is almost gone, so the model's face keeps its own light. */ .slide-panel { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient( to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.76) 30%, rgba(0, 0, 0, 0.60) 55%, rgba(0, 0, 0, 0.22) 78%, rgba(0, 0, 0, 0.04) 100% ); padding: 0 var(--dv-gutter) clamp(54px, 13vw, 76px); pointer-events: none; } .slide-content { max-width: 100%; margin-left: 0; pointer-events: auto; } .hero-slider-section .slide-content h1, .hero-slider-section .slide-content h2 { font-size: clamp(30px, 8.5vw, 44px) !important; } .hero-slider-section .slide-content p { font-size: 13.5px; max-width: 30rem; margin-bottom: clamp(20px, 4vw, 28px); } /* Tablet has the width for two buttons side by side. A phone does not: "Explore Collection" at 10px with 0.18em tracking needs about 175px of line, and half of a 390px screen leaves 146px inside the padding — so the label was being clipped. Stacked below 640px, side by side above it. */ .slide-actions { gap: 10px; } .hero-slider-section .btn-hero-primary, .hero-slider-section .btn-hero-ghost { flex: 1 1 0; min-height: 46px; padding: 0 14px; font-size: 10px; } /* Room under the buttons for the pager. ───────────────────────────────────────────────────────────────────── The shared pager sits in the hero's bottom-right corner at every width. On a phone the CTA row reaches far enough right to meet it: measured at 320, 360, 390 and 430, "Explore Collection" ended about 10px inside the pill's top edge and the two drew over each other. Above 768 the row is nowhere near it, so this is a phone-only reservation. The clearance goes on the content, not the control — moving the pill instead would break the one thing this component is for, which is being in the same corner in every section. */ .hero-slider-section .slide-actions { margin-bottom: 34px; } /* The phone blackout is gone with the arrows it hid. The hero used to delete its navigation below 480px, leaving swipe as the only way through — which is invisible, unreachable by keyboard, and impossible on a switch. The shared pager stays at every width, like the other four. */ } /* Side by side and small, not two stacked bars. ─────────────────────────────────────────────────────────────────────────── Stacked full-width, the pair read as a bar bolted to the foot of the photograph rather than as two buttons on it. They fit in a row once the type gives up a little size and tracking: "Explore Collection" is 18 characters, and at 9.5px with 0.12em it measures about 139px inside its padding, against the 156px each button gets inside a 320px cap on a 390px screen. The cap is what keeps them off the gutters. */ @media (max-width: 640px) { .hero-slider-section .slide-actions { flex-direction: row; align-items: stretch; flex-wrap: nowrap; max-width: 320px; gap: 8px; } .hero-slider-section .btn-hero-primary, .hero-slider-section .btn-hero-ghost { flex: 1 1 0; min-width: 0; width: auto; /* 44, not the 40 this first shrank to. Narrower is what was asked for; shorter than a fingertip is not, and this is the banner's main call to action. The same floor the hero arrows carry. */ min-height: 44px; padding: 0 10px; font-size: 9.5px; letter-spacing: 0.12em; white-space: nowrap; } } /* Very narrow: the same column of type over a shorter frame, so it occupies a larger share of it and the scrim has to hold higher still. */ @media (max-width: 380px) { .slide-panel { background: linear-gradient( to top, rgba(0, 0, 0, 0.87) 0%, rgba(0, 0, 0, 0.80) 34%, rgba(0, 0, 0, 0.64) 62%, rgba(0, 0, 0, 0.24) 82%, rgba(0, 0, 0, 0.04) 100% ); } }