/** Shopify CDN: Minification failed Line 875:3 Unexpected "!" **/ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap'); @import url('https://use.typekit.net/pes1awk.css'); /* ══════════════════════════════════════════════════════════════════════ DAKUTX — shared stylesheet Goes in the theme's Assets folder as dkx.css Every DAKUTX section links this one file, so the whole site's type, spacing and colour live here. Change something here and it changes on every page at once. THE TYPE COLOUR IS ON LINE 21. That one value drives every piece of text on every DAKUTX section, light backgrounds and dark. It is here rather than in the theme customiser because a theme update can wipe customiser settings, and this file survives. ══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap'); .dkx, .dkx *, .dkx *::before, .dkx *::after { box-sizing: border-box; } /* The type colour sits on :root rather than on .dkx, because the header is the theme's own markup and lives outside .dkx. One definition, used in both. */ :root { --dkx-type: #919996; /* The heading weight lives here too, not just on .dkx. The header is the theme's own markup and sits outside .dkx, so a var() defined only there resolves to nothing and the whole declaration is thrown away silently. That is why the nav and the login button stayed at their normal weight twice, even with !important on them. */ --dkx-weight-head: 700; /* Same reason as the weight above. The footer is the theme's own markup and lives outside .dkx, so anything it needs has to resolve at :root. These are redefined on .dkx as well, which is harmless: the nearer definition wins inside a section and this one covers the header and footer. */ --dkx-dark: #141414; --dkx-mono: 'lores-12', 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; --dkx-logo: 'lores-15-narrow', 'lores-12', sans-serif; --dkx-size-mono: 12px; --dkx-rule-dark: #2e2e2e; } .dkx { --dkx-rule: #e2e2e2; /* hairlines on light backgrounds */ --dkx-rule-dark: #2e2e2e; /* hairlines on dark backgrounds */ --dkx-paper: #ffffff; --dkx-stone: #f4f4f2; --dkx-dark: #141414; /* Mono, used for the small utility type: eyebrows, kickers, buttons, the vertical rail, the arrow links and the sources note. Everything at headline and body size stays on the main face. */ --dkx-mono: 'lores-12', 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; --dkx-logo: 'lores-15-narrow', 'lores-12', sans-serif; /* Side margins. Two things control them and they apply at different widths. The gutter is the space at the edge of a narrow screen. --dkx-max caps the content on a wide one, and past that width it is the cap doing the work, not the gutter. Both moved together so the margins grow at every size. */ /* Corner radius on the boxed cards. One value, so every rounded thing on the site matches. */ --dkx-radius: 14px; --dkx-gutter: clamp(28px, 5.75vw, 83px); --dkx-max: 1280px; /* ── HEADING WEIGHT, TRACKING AND LEADING ── All three move together. Heavy type wants tight letter-spacing and tight leading or it looks bloated. Light type wants both opened up or it looks like it is falling apart. Change all three, not one. Heavy: weight 800, tracking -0.04em, leading 0.95 Medium: weight 500, tracking -0.02em, leading 1.05 Light: weight 300, tracking 0em, leading 1.15 Very light: weight 200, tracking 0.01em, leading 1.2 Available weights: 100 200 300 400 500 600 700 800 Leading is a multiple of the type size. 1.0 means lines sit exactly one type-height apart, which is why 0.95 looks stacked and 1.2 looks airy. */ --dkx-track-head: -0.045em; /* Body tracking. Looser than the heads, because tight tracking on a long line costs more in readability than it buys in look. */ --dkx-track-body: -0.012em; --dkx-lead-head: 1.05; /* Leading for the smaller headings, h3 and h4, where they wrap to a second line. The big heads can sit at 0.95 because they are usually one or two words; a wrapping sub-head needs a fraction more, but far less than the 1.4 these were each carrying separately. */ --dkx-lead-sub: 1.08; /* Leading for the short display lines: statements, standfirsts, the eyebrow. These are set in caps more often than not, and caps have no descenders, so the gap a normal leading leaves between two lines reads as a hole. */ --dkx-lead-display: 1.0; /* ── THE TYPE SCALE ── One value per role. Every rule below points at one of these rather than carrying its own number, so a size change happens here and nowhere else. h1 the hero headline. Once per page, at the top h2 a section heading h3 every column heading, a route category, a stat figure body every piece of running text mono every small utility label: eyebrows, buttons, numbers, the rail h1, h2 and h3 all take --dkx-weight-head, so they move together. Body is the only thing at 400, which is what separates a h3 from the paragraph under it even where the sizes are close. */ --dkx-size-h1: clamp(40px, 8vw, 116px); --dkx-size-h2: clamp(32px, 5vw, 64px); --dkx-size-h3: clamp(17px, 1.9vw, 22px); --dkx-size-h4: 16px; /* body size, head weight. The quietest heading. */ --dkx-body-size: 16px; --dkx-size-mono: 12px; /* One leading for every piece of running text, the same way there is one size. Every paragraph rule points at this rather than carrying its own number, so tightening the body is one change here. */ --dkx-lead-body: 1.15; font-family: 'helvetica-neue-lt-pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: var(--dkx-type); -webkit-font-smoothing: antialiased; text-align: left; overflow-x: hidden; /* clip, not hidden, where supported: hidden turns this into a scroll box, and nothing inside a scroll box can stick to the screen, which is what stopped the problem band holding in place. */ overflow-x: clip; } /* ── RESET. Deliberately excludes div and span: an element selector like ".dkx div" outranks a single class like ".dkx-cats", which would strip the padding off every section. Every layout rule below is written as ".dkx .dkx-name" so it wins on specificity regardless. ── */ .dkx h1, .dkx h2, .dkx h3, .dkx h4, .dkx p, .dkx ul, .dkx li, .dkx a, .dkx em, .dkx strong, .dkx figure { font-family: inherit; margin: 0; padding: 0; letter-spacing: var(--dkx-track-body); text-transform: none; border: 0; background: none; float: none; max-width: none; color: inherit; list-style: none; } .dkx h1, .dkx h2, .dkx h3 { font-weight: var(--dkx-weight-head); line-height: 1; } .dkx p { font-weight: 400; } .dkx a { text-decoration: none; color: inherit; } .dkx em { font-style: italic; } .dkx strong { font-weight: 600; } .dkx img { display: block; max-width: 100%; height: auto; } /* ══ CONTAINERS ══ */ .dkx .dkx-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .dkx .dkx-wrap { max-width: var(--dkx-max); margin: 0 auto; padding-left: var(--dkx-gutter); padding-right: var(--dkx-gutter); } /* ══ BACKGROUNDS — set per section in the customiser ══ */ .dkx .bg-paper { background: var(--dkx-paper); } .dkx .bg-stone { background: var(--dkx-stone); } .dkx .bg-dark { background: var(--dkx-dark); } /* Lighter black. Rendered with bg-dark as well, so every dark-section rule applies, and only the ground changes. Two blacks side by side separate sections without a line. */ .dkx .bg-dark.bg-graphite { background: #1e1e20; } .dkx .bg-dark .dkx-rule-line { border-color: var(--dkx-rule-dark); } /* ══ VERTICAL RHYTHM — set per section in the customiser ══ */ .dkx .pad-s { padding-top: clamp(84px, 9vw, 140px); padding-bottom: clamp(84px, 9vw, 140px); } .dkx .pad-m { padding-top: clamp(128px, 15vw, 244px); padding-bottom: clamp(128px, 15vw, 244px); } .dkx .pad-l { padding-top: clamp(180px, 23vw, 380px); padding-bottom: clamp(180px, 23vw, 380px); } .dkx .pad-xl { padding-top: clamp(240px, 31vw, 528px); padding-bottom: clamp(240px, 31vw, 528px); } /* Butt a section straight against its neighbour. Set per section, and after the pad rules so it wins without needing !important. */ .dkx .pad-top-none { padding-top: 0 !important; } .dkx .pad-bottom-none { padding-bottom: 0 !important; } .dkx .rule-below { border-bottom: 1px solid var(--dkx-rule); } .dkx .bg-dark.rule-below { border-bottom-color: var(--dkx-rule-dark); } /* ══ SHARED TYPE SCALE ══ */ .dkx .dkx-eyebrow { line-height: var(--dkx-lead-display); font-family: var(--dkx-mono); font-size: var(--dkx-size-mono); font-weight: 400; letter-spacing: 0.21em; text-transform: uppercase; margin-bottom: 28px; opacity: 0.85; } .dkx .dkx-h1 { font-size: var(--dkx-size-h1); font-weight: var(--dkx-weight-head); line-height: var(--dkx-lead-head); letter-spacing: var(--dkx-track-head); } .dkx .dkx-h2 { font-size: var(--dkx-size-h2); font-weight: var(--dkx-weight-head); line-height: var(--dkx-lead-head); letter-spacing: var(--dkx-track-head); margin-bottom: 28px; } /* Headline lines. Each line of the hero headline is its own block carrying its own alignment, so these rules are per line rather than per headline. Justified is the one worth explaining. text-align: justify widens the spaces between words, and these lines are usually a single word with no spaces in them, so it does nothing at all. dkx-hero.liquid puts every character in its own element instead, and space-between shares the slack out between them. Tracking is zeroed on a justified line because those gaps are doing that job now; leaving it on adds an extra gap after the last letter and pushes the line past the right edge. Line spacing is set per hero from the customiser, as an inline style on the h1, so it is not in here. */ .dkx .dkx-h1-lines { display: block; width: 100%; } .dkx .dkx-h1-lines .dkx-h1-line { display: block; } .dkx .dkx-h1-lines .al-left { text-align: left; } .dkx .dkx-h1-lines .al-center { text-align: center; } .dkx .dkx-h1-lines .al-right { text-align: right; } .dkx .dkx-h1-lines .al-justify { display: flex; justify-content: space-between; letter-spacing: 0; } /* keeps a real space at full width, for a line like MADE TO ORDER */ .dkx .dkx-h1-lines .al-justify > span { white-space: pre; } /* Under about 600px a word spread across the full width leaves gaps wide enough to read as separate letters, so a justified line sets normally instead. */ @media (max-width: 600px) { .dkx .dkx-h1-lines .al-justify { display: block; letter-spacing: var(--dkx-track-head); } .dkx .dkx-h1-lines .al-justify > span { display: inline; white-space: normal; } } /* size-m used to be a second, smaller section heading. One head size means it now matches the standard one. The control is left in place so existing sections do not break. */ .dkx .dkx-h2.size-m { font-size: var(--dkx-size-h2); } /* Standfirsts. The opening line under a heading, the sentence under the chips, the hero paragraph and the statements in the top columns. Body size, head weight, so they lead into the section without becoming another heading. */ /* Ledes run at h3, the same size as the What-we-make subheading, so every opening line on the page is set at one size rather than three. */ .dkx .dkx-lede { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-display); max-width: 560px; } .dkx .dkx-body { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); } .dkx .dkx-body + .dkx-body { margin-top: 26px; } .dkx .dkx-body p + p { margin-top: 26px; } .dkx .dkx-small { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); opacity: 0.8; } /* ══ HERO ══ */ /* The hero already sits inside .dkx-bleed, which takes it to the window edges, so it does not need to bleed again itself. */ /* Where the headline block sits against the pictures. Bottom is the default and what the hero has always done; the other two are set per section. */ .dkx .dkx-hero { position: relative; width: 100%; display: flex; align-items: flex-end; overflow: hidden; /* Everything in the hero sits on top of a photograph, so it takes white rather than the site's grey. Scoped to the hero, so the rest of the page is untouched. */ color: #ffffff; } .dkx .dkx-hero.textv-top { align-items: flex-start; } .dkx .dkx-hero.textv-middle { align-items: center; } .dkx .dkx-hero.textv-bottom { align-items: flex-end; } /* The top and bottom padding on the inner block is there to hold the text off the edges. Centred, it fights the centring, so it comes off. */ .dkx .dkx-hero.textv-middle .dkx-hero-in { padding-top: 0; padding-bottom: 0; } .dkx .dkx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* Video sits one layer above the still and below the shade, so the image shows through until the video is actually playing. Full width, natural height. It is not cropped to fit the hero box: it spans the width and takes whatever height its own proportions give it. If that comes up shorter than the hero, the still image simply shows below it, which is why the image is worth setting even when a video is used. */ .dkx .dkx-hero-vid { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; z-index: 1; pointer-events: none; } .dkx .dkx-hero-vid video { width: 100%; height: auto; display: block; } .dkx .dkx-hero-shade { position: absolute; inset: 0; z-index: 2; } .dkx .dkx-hero-in { position: relative; z-index: 3; width: 100%; padding-top: 80px; padding-bottom: clamp(44px, 6vw, 76px); } .dkx .dkx-kicker { font-family: var(--dkx-mono); font-size: var(--dkx-size-mono); font-weight: 400; letter-spacing: 0.21em; line-height: var(--dkx-lead-sub); text-transform: uppercase; max-width: 390px; margin-bottom: 22px; } /* Mono, and tracking back to normal with it. The head tracking is negative, which pulls a monospace face into itself and undoes the even spacing that is the whole point of it. */ /* The main face, not the mono, but at the kicker's size so the two lines in the hero sit at the same scale. */ .dkx .dkx-hero-sub { margin-top: 26px; max-width: 520px; font-weight: 500; letter-spacing: 0.21em; font-size: var(--dkx-size-mono); line-height: var(--dkx-lead-display); } /* The SVG headline rules that used to sit here have been removed. Nothing referenced .dkx-fit or .dkx-fitline, and the comment described an approach the markup never used, which made it look like the live implementation. The real headline rules are under SHARED TYPE SCALE above. */ .dkx .dkx-rail { position: absolute; top: 0; height: 100%; display: flex; align-items: center; z-index: 4; right: calc(var(--dkx-gutter) - 4px); } .dkx .dkx-rail span { font-family: var(--dkx-mono); writing-mode: vertical-rl; font-size: var(--dkx-size-mono); font-weight: 400; /* Doubles the gap either side of the separators. In a monospace face a space is one character wide, so adding 1em makes it two. Rail only; the horizontal mono keeps its normal word spacing. */ word-spacing: 1em; letter-spacing: 0.21em; text-transform: uppercase; opacity: 0.8; } @media (max-width: 1000px) { .dkx .dkx-rail { display: none; } } /* The rail sits inside the right-hand gutter, which is also where the headline stops, so long lines ran straight into the vertical type. When a rail is set, the hero's content column stops short of it. Only above 1000px, because the rail is hidden below that and the extra space would be wasted. */ @media (min-width: 1001px) { .dkx .dkx-hero.has-rail .dkx-wrap { padding-right: calc(var(--dkx-gutter) + 54px); } } /* ══ REVEAL ON SCROLL ══ Both classes below are added by dkx.js. Nothing is hidden by CSS on its own, so if that file never loads the page still reads normally. Hiding content behind JavaScript that might not run is how a page ends up blank. */ .dkx-anim .dkx-r { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .dkx-anim .dkx-r.dkx-in { opacity: 1; transform: none; } /* The body copy in each image row rises as one block, and so does the ecosystem's opening paragraph. Both rise further and more slowly than headings, so the words seem to surface after the heading has landed. */ .dkx-anim .dkx .dkx-ed-body.dkx-r, .dkx-anim .dkx .dkx-orbit-foot.dkx-r { transform: translateY(40px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); } .dkx-anim .dkx .dkx-ed-body.dkx-r.dkx-in, .dkx-anim .dkx .dkx-orbit-foot.dkx-r.dkx-in { opacity: 1; transform: none; } .dkx-anim .dkx .dkx-orbit-leg.dkx-r { transform: translateY(40px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); } .dkx-anim .dkx .dkx-orbit-leg.dkx-r.dkx-in { opacity: 1; transform: none; } /* The stacked points dissolve against the scroll rather than on a trigger, so they are driven by dkx.js frame by frame. Nothing is hidden unless that script has run and said so, or a page with no JavaScript would be a blank band. */ .dkx-fade [data-dkx-fade] { will-change: opacity, transform; } /* Belt and braces: the script already bails out on this setting, but if the preference is switched on after load the rules stop applying too. */ @media (prefers-reduced-motion: reduce) { .dkx-anim .dkx-r, .dkx-anim .dkx-r.dkx-in { opacity: 1; transform: none; transition: none; } } /* Marks above a column heading. Stroke only, no fill, inheriting the text colour so they work on white, off-white and near-black alike. 1.25px reads as a drawn line rather than a UI icon at this size. */ .dkx .dkx-mark { display: block; width: 38px; height: 38px; margin-bottom: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: butt; stroke-linejoin: miter; overflow: visible; } .dkx .dkx-col.type-s .dkx-mark { width: 32px; height: 32px; margin-bottom: 18px; } /* A statement. Sub-head size, written as a paragraph, for a section that is one sentence and nothing else. */ /* A statement. Sub-head size, written as a paragraph, for a section that is one sentence and nothing else. */ .dkx .dkx-statement { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-display); max-width: 780px; } /* Centred sections. The max-widths that hold a line to a readable measure are set from the left, so they have to be centred too, or the text centres inside a block still sitting against the left edge. */ .dkx .dkx-wrap.align-centre { text-align: center; } .dkx .dkx-wrap.align-centre .dkx-statement, .dkx .dkx-wrap.align-centre .dkx-lede, .dkx .dkx-wrap.align-centre .dkx-body { margin-left: auto; margin-right: auto; } /* ══ SPLIT STATEMENT ══ Two columns of large type facing each other across a centre line. The left column is set right-aligned and the right column left-aligned, so both blocks meet at the gutter instead of starting from the same edge. The gutter is the gap, and it has to be wide enough that the two sides read as separate phrases rather than one run-on line. Grid handles that: two equal columns with a gap between, so the meeting point stays centred whatever the line lengths are. */ .dkx .dkx-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 56px); align-items: baseline; } .dkx .dkx-split-row + .dkx-split-row { margin-top: clamp(8px, 1vw, 18px); } .dkx .dkx-split-l { text-align: right; } .dkx .dkx-split-r { text-align: left; } .dkx .dkx-split-l, .dkx .dkx-split-r { font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-head); } .dkx .dkx-split.size-h1 .dkx-split-l, .dkx .dkx-split.size-h1 .dkx-split-r { font-size: var(--dkx-size-h1); } .dkx .dkx-split.size-h2 .dkx-split-l, .dkx .dkx-split.size-h2 .dkx-split-r { font-size: var(--dkx-size-h2); } .dkx .dkx-split.size-h3 .dkx-split-l, .dkx .dkx-split.size-h3 .dkx-split-r { font-size: var(--dkx-size-h3); } /* The right column carries less weight so the pair reads as term and meaning rather than two competing halves. */ .dkx .dkx-split-r { opacity: 0.55; } /* On a phone two columns of big type leaves neither side room, so the stack goes single file and both sides set from the left. */ @media (max-width: 749px) { .dkx .dkx-split-row { grid-template-columns: 1fr; gap: 0; } .dkx .dkx-split-l, .dkx .dkx-split-r { text-align: left; } .dkx .dkx-split-row + .dkx-split-row { margin-top: clamp(18px, 4vw, 32px); } } /* ══ FEATURE ══ A centred line with a picture or video running the full width beneath it. The words sit in their own band above the media rather than over it, so the type never has to fight a photograph for contrast. */ .dkx .dkx-feature-words { display: flex; flex-direction: column; justify-content: center; text-align: center; margin-bottom: clamp(48px, 6vw, 96px); } .dkx .dkx-feature-media { position: relative; width: 100%; overflow: hidden; } .dkx .dkx-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transform: translateY(var(--dkx-par, 0px)) scale(var(--dkx-zoom, 1)); } /* A parallax image has to be taller than its frame or drifting it reveals an edge. The extra height is split above and below so the starting position is still centred. JS only sets --dkx-par; the zoom stays in CSS so the two transforms compose instead of overwriting each other. */ .dkx .dkx-feature-img.dkx-parallax { /* Overscan is set per image by the script, from its own strength, so a gentle parallax does not carry the same oversized picture as a strong one. */ height: calc(100% + var(--dkx-over, 30%)); top: calc(var(--dkx-over, 30%) / -2); will-change: transform; } /* Video sits over the still, so the image is what shows until it plays. */ .dkx .dkx-feature-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; } .dkx .dkx-feature-vid video { width: 100%; height: 100%; object-fit: cover; } /* ══ CENTRE SPLIT HERO ══ Two big words on one line, with their small text on opposite sides of it. Three rows across two columns: row 1 kicker, right-aligned | (empty) row 2 first word, right | second word, left row 3 (empty) | paragraph, left Putting both words in the same grid row is what keeps them on one line regardless of length, and it is why this cannot be done by stacking blocks. The columns meet at the centre, so the words face each other across it. */ /* The gap between the two words is a real gutter, set from the customiser. It is what lets the right edge of the left stack line up with the end of the left word, and the left edge of the right stack line up with the start of the right one. Too small and the words read as one string. */ .dkx .dkx-split-hero { display: grid; width: 100%; grid-template-columns: 1fr 1fr; column-gap: var(--sh-gap, 6%); } .dkx .dkx-split-hero .sh-kicker { grid-column: 1; grid-row: 1; text-align: right; } .dkx .dkx-split-hero .sh-a { grid-column: 1; grid-row: 2; text-align: right; } .dkx .dkx-split-hero .sh-b { grid-column: 2; grid-row: 2; text-align: left; } .dkx .dkx-split-hero .sh-sub { grid-column: 2; grid-row: 3; text-align: left; } /* The two words take the hero size; the small text takes the mono treatment the kicker and paragraph already use elsewhere, so nothing new is introduced. */ /* The two words are h2, the stacks either side are h3, per the layout brief. Both stacks keep their line breaks, so a four-line stack stays four lines. */ .dkx .dkx-split-hero .sh-a, .dkx .dkx-split-hero .sh-b { font-size: var(--dkx-size-h2); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); } .dkx .dkx-split-hero .sh-kicker, .dkx .dkx-split-hero .sh-sub { font-size: var(--dkx-size-h4); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: 0.95; text-transform: uppercase; white-space: pre-line; } /* Where each stack sits against the word next to it. The kicker stack hangs from the bottom of its row so it stays tight under the top of the word, and the paragraph stack sits at the top of its row for the same reason. */ .dkx .dkx-split-hero .sh-kicker { align-self: end; margin-bottom: 10px; } .dkx .dkx-split-hero .sh-sub { align-self: start; margin-top: 10px; } .dkx .dkx-split-hero .sh-a, .dkx .dkx-split-hero .sh-b { align-self: baseline; } /* On a phone two columns of hero type leaves neither word room, so it stacks and everything sets from the left. */ @media (max-width: 749px) { .dkx .dkx-split-hero { grid-template-columns: 1fr; } .dkx .dkx-split-hero .sh-kicker, .dkx .dkx-split-hero .sh-a, .dkx .dkx-split-hero .sh-b, .dkx .dkx-split-hero .sh-sub { grid-column: 1; text-align: left; } .dkx .dkx-split-hero .sh-kicker { grid-row: 1; } .dkx .dkx-split-hero .sh-a { grid-row: 2; } .dkx .dkx-split-hero .sh-b { grid-row: 3; } .dkx .dkx-split-hero .sh-sub { grid-row: 4; } } /* h4. Body size at head weight and head tracking, so it is told apart from the paragraph under it by weight alone rather than by getting bigger. */ .dkx .dkx-h4 { font-size: var(--dkx-size-h4); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-body); } /* Words over the picture. The stack becomes the positioning context, the media fills it, and the words sit on top centred both ways. The scrim is a wash over the picture and under the words. Type on a photograph fails when the picture happens to be light exactly where the words are, and no amount of choosing a colour fixes that on every image. A scrim does, and it is a slider because how much you need depends entirely on the photograph. */ .dkx .dkx-feature-stack { position: relative; } .dkx .dkx-feature-stack .dkx-feature-media { margin: 0; } .dkx .dkx-feature-stack .dkx-feature-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,var(--dkx-scrim, 0.25)); pointer-events: none; } .dkx .dkx-feature-stack .dkx-feature-words { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; } .dkx .dkx-feature-stack.tone-light .dkx-feature-words { color: #ffffff; } .dkx .dkx-feature-stack.tone-dark .dkx-feature-words { color: var(--dkx-dark); } /* A dark scrim under near-black type would fight it, so that pairing lightens. */ .dkx .dkx-feature-stack.tone-dark .dkx-feature-media::after { background: rgba(255,255,255,var(--dkx-scrim, 0.25)); } /* A texture layer behind a section's content. Its own element rather than a CSS background, so opacity applies to the picture alone and leaves the type at full strength. Position relative on the parent is what keeps it contained. */ .dkx .has-bg-image { position: relative; overflow: hidden; } .dkx .has-bg-image > *:not(.dkx-bgimg) { position: relative; z-index: 1; } .dkx .dkx-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: var(--dkx-bgimg-opacity, 0.3); pointer-events: none; transform: translateY(var(--dkx-par, 0px)); } /* Same overscan rule as the feature image: a drifting picture needs more height than its frame or it shows an edge. The script sizes it from the strength. */ .dkx .dkx-bgimg.dkx-parallax { height: calc(100% + var(--dkx-over, 30%)); top: calc(var(--dkx-over, 30%) / -2); will-change: transform; } /* Text colour per section, for a section sitting over a dark texture or a dark background where the site grey disappears. */ .dkx .tone-light { color: #ffffff; } .dkx .tone-dark { color: var(--dkx-dark); } /* ══ CHIPS — the category strip ══ */ .dkx .dkx-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; } .dkx .dkx-chips span { font-size: var(--dkx-body-size); font-weight: 600; letter-spacing: -0.015em; border: 1px solid var(--dkx-rule); border-radius: 2px; padding: 9px 16px; } .dkx .bg-dark .dkx-chips span { border-color: var(--dkx-rule-dark); } /* ══ FRAME — one box around a whole column row ══ Different job to the existing "box" setting, which draws a card per column. This draws a single container behind all of them, so three outcomes read as one statement rather than three separate claims. Two treatments. The outlined one keeps the page background and separates with a hairline, which suits a row that sits directly under another section. The solid one is pure black with the stacked shadow the route cards use, for when the row needs to stop the page. */ /* The box breaks out past the text column, and takes that same distance back as padding, so the words inside still start on the page's own margin. The pull is always smaller than the gutter, so it can never reach the screen edge. */ .dkx .dkx-frame { --dkx-out: clamp(18px, 2.6vw, 52px); border-radius: 24px; margin-left: calc(var(--dkx-out) * -1); margin-right: calc(var(--dkx-out) * -1); padding: clamp(72px, 7.5vw, 130px) calc(clamp(44px, 4.8vw, 84px) + var(--dkx-out)); } .dkx .dkx-frame.frame-line { border: 1px solid var(--dkx-rule); background: transparent; } .dkx .bg-dark .dkx-frame.frame-line { border-color: var(--dkx-rule-dark); } /* Pure #000 rather than --dkx-dark. The page's near-black is #141414, and against it a #141414 box would vanish, so the frame takes the one tone the palette does not otherwise use. */ .dkx .dkx-frame.frame-solid { background: #000; color: var(--dkx-paper); border: 0; box-shadow: 0 1px 2px rgba(20,20,20,0.06), 0 10px 26px rgba(20,20,20,0.10), 0 28px 56px rgba(20,20,20,0.08); } /* Raised frame. Same three-shadow stack as the route cards and the raised columns, so a box here reads as the same kind of object as a box anywhere else on the page. The eyebrow above it stays outside the box, because it labels the box rather than belonging to it. */ .dkx .dkx-frame.frame-raised { background: var(--dkx-paper); border: 0; box-shadow: 0 1px 2px rgba(20,20,20,0.05), 0 8px 20px rgba(20,20,20,0.06), 0 24px 48px rgba(20,20,20,0.05); } .dkx .bg-dark .dkx-frame.frame-raised { background: rgba(255,255,255,0.045); box-shadow: none; } .dkx .dkx-frame.frame-solid .dkx-col, .dkx .dkx-frame.frame-solid h3, .dkx .dkx-frame.frame-solid p { color: var(--dkx-paper); } /* The marks take currentColor, so they invert with the text and need no rule. */ @media (max-width: 700px) { .dkx .dkx-frame { padding: 26px 22px; } } /* ══ WHAT WE MAKE — heading list left, subheading right ══ A second layout for DKX Chips. The categories stop being a row of pills and become the heading itself, one per line, with the explaining sentence set beside them rather than underneath. Column split mirrors DKX About so the two sections line up down the page. Leading is pulled tighter than a normal heading. At h2 size a list of five single words at standard leading spreads far enough that it stops reading as one block and starts reading as five separate headings. */ /* Centred, not top-aligned. The left column is five lines of h2 and the right is two short paragraphs, so aligning both to the top leaves the sentence stranded against the first category with a long drop under it. Centring sits it against the middle of the list, which is where the eye already is. */ .dkx .dkx-makes-grid { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr); gap: clamp(48px, 7vw, 120px); } @media (max-width: 900px) { .dkx .dkx-makes-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; } } .dkx .dkx-makes-list { font-size: var(--dkx-size-h2); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: 1.06; margin: 0; } /* The right column starts on the same optical line as the first category, not at the top of the eyebrow above it. */ .dkx .dkx-makes-sub { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-display); max-width: 340px; } .dkx .dkx-makes-sub + .dkx-makes-note { margin-top: 26px; } .dkx .dkx-makes-note { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); max-width: 340px; } .dkx .dkx-chips-foot { margin-top: 40px; font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); font-size: var(--dkx-size-h3); line-height: var(--dkx-lead-display); max-width: 620px; } /* ══ THREE-UP — repeating columns, three sizes ══ Row gap is deliberately larger than column gap. When four columns wrap onto two rows, an equal gap makes the two rows read as one block; a wider row gap keeps them separate. ══ */ /* The row gap was set when these sections were always a single row, so it was really separating one section from the next. Now that six blocks wrap to two rows it is separating rows within one idea, and wants to be much closer to the column gap than to the section spacing. */ .dkx .dkx-grid { display: grid; column-gap: clamp(32px, 5vw, 76px); row-gap: clamp(56px, 6vw, 96px); } .dkx .dkx-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .dkx .dkx-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .dkx .dkx-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .dkx .dkx-grid.cols-3, .dkx .dkx-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .dkx .dkx-grid { grid-template-columns: 1fr !important; row-gap: 104px; } } .dkx .dkx-grid-head { margin-bottom: clamp(96px, 11vw, 190px); } /* When the head is an eyebrow on its own, with no heading and no opening line, the full gap is measured against type that is not there. Half of it puts the label back in contact with what it labels. Same clamp, every value halved, so it scales identically rather than drifting apart at one screen width. */ .dkx .dkx-grid-head.head-eyebrow-only { margin-bottom: clamp(48px, 5.5vw, 95px); } /* Inside a box the head is already held by the box's own padding, so the full section gap would open a hole between the heading and what it introduces. */ .dkx .dkx-frame .dkx-grid-head { margin-bottom: clamp(44px, 4.6vw, 72px); } /* Section wordmark. Height is set from the nav's own type size rather than a round number, so the two stay locked together if that size ever changes. The 0.72 is cap height: the file is all capitals with nothing above or below them, so matching its height to the full font size would draw it noticeably larger than the letters in the menu beside it. */ .dkx .dkx-secmark { display: block; font-family: var(--dkx-logo); font-size: calc(var(--dkx-size-mono) * 1.728); font-weight: 400; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: clamp(60px, 6.4vw, 104px); opacity: 0.85; } /* A heading that sits inside the grid and spans every column, so one section can carry two headed groups of columns under a single eyebrow and a single background image. Splitting that into two sections is what made a shared background impossible: two sections are siblings, each clipping its own image to its own height, so the picture restarted halfway down. Top margin is larger than the bottom one. The heading belongs to the columns under it, so it needs to sit away from the group above and close to its own. */ .dkx .dkx-grid-break { grid-column: 1 / -1; margin-top: clamp(120px, 13vw, 200px); margin-bottom: calc(clamp(96px, 11vw, 190px) - clamp(16px, 1.6vw, 24px)); } /* ── COLUMN BOXES — a second level of hierarchy, sitting on top of whatever background the section itself is set to. Filled boxes always pick the opposite tone to the surface they sit on, so a box never disappears into its own background. ── */ .dkx .dkx-col.card-fill, .dkx .dkx-col.card-raised, .dkx .dkx-col.card-line { padding: clamp(24px, 2.6vw, 38px); border-radius: 2px; } .dkx .dkx-col.card-fill { background: var(--dkx-stone); } .dkx .bg-stone .dkx-col.card-fill { background: var(--dkx-paper); } .dkx .bg-dark .dkx-col.card-fill { background: rgba(255,255,255,0.055); } .dkx .dkx-col.card-line { border: 1px solid var(--dkx-rule); } /* Raised card. Same three-shadow stack as the route cards, so a column here and a doorway card there read as the same object on the page. One shadow alone sits either too tight to register as depth or too wide to look sharp, which is why it is a hairline contact shadow, a mid one for the lift and a wide faint one for the ambient light. No border: with a shadow separating the card from the page, a line as well is belt and braces. Radius is --dkx-radius, not the 2px the other two card styles use, because this one is copying the routes and they run at the full radius. */ .dkx .dkx-col.card-raised { background: var(--dkx-paper); border: 0; border-radius: var(--dkx-radius); box-shadow: 0 1px 2px rgba(20,20,20,0.05), 0 8px 20px rgba(20,20,20,0.06), 0 24px 48px rgba(20,20,20,0.05); } /* On a near-black ground a shadow cannot be seen, so the card lifts its own surface instead. Same fallback the routes use. */ .dkx .bg-dark .dkx-col.card-raised { background: rgba(255,255,255,0.045); box-shadow: none; } .dkx .bg-dark .dkx-col.card-line { border-color: var(--dkx-rule-dark); } /* boxes carry their own padding, so the gap between them tightens */ .dkx .dkx-grid.boxed { column-gap: clamp(16px, 1.6vw, 24px); row-gap: clamp(16px, 1.6vw, 24px); } @media (max-width: 700px) { .dkx .dkx-grid.boxed { row-gap: 20px; } } /* 0.3pt. Browsers work in px, and 0.3pt is 0.4px, which is a true hairline on a retina screen and the thinnest line that still renders on a standard one. */ .dkx .dkx-col.topline { border-top: 0.4px solid currentColor; padding-top: 20px; } /* a rule above the heading INSIDE a box, rather than above the box itself */ .dkx .dkx-col.card-fill.topline, .dkx .dkx-col.card-raised.topline, .dkx .dkx-col.card-line.topline { border-top: 0; } .dkx .dkx-col.card-fill.topline h3, .dkx .dkx-col.card-raised.topline h3, .dkx .dkx-col.card-line.topline h3 { border-top: 0.4px solid currentColor; padding-top: 18px; } .dkx .dkx-col h3 { margin-bottom: 12px; } .dkx .dkx-col.type-l h3 { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-head); margin-bottom: 14px; } .dkx .dkx-col.type-l p { font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); } /* one step heavier than the display headings, since 19px needs more weight than 64px does to read as a heading at all */ /* Sub-heads sit at body size and are told apart by weight rather than scale. Medium against the body's normal, on the same baseline rhythm. */ .dkx .dkx-col.type-m h3 { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-sub); } .dkx .dkx-col.type-m p { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); } .dkx .dkx-col.type-s h3 { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); margin-bottom: 12px; } .dkx .dkx-col.type-s p { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); } /* ══ STAT BAND — heading left, figures right ══ */ .dkx .dkx-band-grid { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(56px, 9vw, 152px); } @media (max-width: 900px) { .dkx .dkx-band-grid { grid-template-columns: 1fr; gap: 64px; } } /* The other arrangement: heading above, figures in a row underneath, laid out exactly like a Columns section so the two can sit on the same page and read as one system rather than two. Same intro spacing, same column gap, and the dividing lines come off because Columns does not use them. */ .dkx .dkx-band-grid.layout-above { grid-template-columns: 1fr; gap: 0; } .dkx .dkx-band-grid.layout-above > :first-child { margin-bottom: clamp(96px, 11vw, 190px); } .dkx .dkx-band-grid.layout-above .dkx-band-lede { max-width: 560px; } .dkx .dkx-band-grid.layout-above .dkx-stats { grid-template-columns: repeat(4, 1fr); column-gap: clamp(32px, 5vw, 76px); } .dkx .dkx-band-grid.layout-above .dkx-stat { padding: 0; border: 0; } .dkx .dkx-band-grid.layout-above .dkx-stat:nth-child(even) { padding-left: 0; } @media (max-width: 900px) { .dkx .dkx-band-grid.layout-above .dkx-stats { grid-template-columns: repeat(2, 1fr); row-gap: 56px; } } @media (max-width: 700px) { .dkx .dkx-band-grid.layout-above .dkx-stats { grid-template-columns: 1fr; row-gap: 48px; } } /* Matched to .dkx-orbit-foot and .dkx-lede. All three are an opening line under a heading, so they are one size. This one had its own smaller value, which is why the entry-problem paragraph read lighter than the orbit line under it. */ .dkx .dkx-band-lede { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-display); max-width: 560px; } /* Two across is right for four figures. With three it leaves a row of two and a widow, so an odd count stacks instead. The divider rules go with it, because a right-hand border on a single column is a line down the middle of nothing. */ .dkx .dkx-stats { display: grid; grid-template-columns: 1fr 1fr; } .dkx .dkx-stats.count-1, .dkx .dkx-stats.count-3 { grid-template-columns: 1fr; } /* Stacked, every rule written for the two-column grid has to be undone, not just the column count. Three of them were showing: · nth-child(even) adds 28px of left padding, which indented the middle item against the two either side of it · nth-last-child(-n+2) removes the bottom border from the last two items, correct for the last row of a two-column grid, so stacked it left exactly one line under the first item and none under the others · the right-hand divider, which has nothing to divide in a single column All of it comes off, and the measure narrows so a point is a readable width rather than the full half of the section. */ .dkx .dkx-stats.count-1 .dkx-stat, .dkx .dkx-stats.count-3 .dkx-stat { border: 0; padding: 0 0 clamp(64px, 7vw, 112px) 0; max-width: 340px; } .dkx .dkx-stats.count-1 .dkx-stat:last-child, .dkx .dkx-stats.count-3 .dkx-stat:last-child { padding-bottom: 0; } .dkx .dkx-stat { padding: 44px 44px 44px 0; border-bottom: 1px solid var(--dkx-rule); } .dkx .bg-dark .dkx-stat { border-bottom-color: var(--dkx-rule-dark); } .dkx .dkx-stat:nth-child(odd) { border-right: 1px solid var(--dkx-rule); } .dkx .bg-dark .dkx-stat:nth-child(odd) { border-right-color: var(--dkx-rule-dark); } .dkx .dkx-stat:nth-child(even) { padding-left: 28px; padding-right: 0; } .dkx .dkx-stat:nth-last-child(-n+2) { border-bottom: none; } .dkx .dkx-stat-num { font-size: var(--dkx-size-h2); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: 1; margin-bottom: 10px; } .dkx .dkx-stat p { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); opacity: 0.8; } /* The one deliberate exception to the scale. A sources line is a citation rather than running text, and it is meant to sit quietly under the figures it supports. */ .dkx .dkx-sources { margin-top: 56px; font-size: 11px; line-height: var(--dkx-lead-body); max-width: 780px; opacity: 0.6; } @media (max-width: 520px) { .dkx .dkx-stats { grid-template-columns: 1fr; } .dkx .dkx-stat, .dkx .dkx-stat:nth-child(odd), .dkx .dkx-stat:nth-child(even) { padding: 22px 0; border-right: none; border-bottom: 1px solid var(--dkx-rule); } .dkx .bg-dark .dkx-stat { border-bottom-color: var(--dkx-rule-dark); } .dkx .dkx-stat:last-child { border-bottom: none; } } /* ══ ROUTES — the doorway cards ══ */ /* Separate cards rather than a joined grid. The gap does the separating, so the grid drops the shared background and border that used to draw the dividing lines between them. */ .dkx .dkx-routes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 28px); margin-top: clamp(72px, 9vw, 132px); } /* Four across needs two steps down, not one. Going straight from four columns to one leaves the tablet width with columns too narrow to hold "Labels & Designers" on a single line, which is where the set stops reading as a row. */ /* Six cards on the Programs page sit three across, two rows. */ .dkx .dkx-routes-grid.dkx-routes-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1080px) { .dkx .dkx-routes-grid, .dkx .dkx-routes-grid.dkx-routes-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .dkx .dkx-routes-grid, .dkx .dkx-routes-grid.dkx-routes-3 { grid-template-columns: 1fr; } } /* Three shadows rather than one. A single shadow either sits too tight to read as depth or too wide to read as sharp. Stacking a hairline contact shadow, a mid one for the lift and a wide faint one for the ambient light is what makes it look like an object on a surface instead of a box with grey behind it. The border comes off: with a shadow doing the separating, a line as well reads as belt and braces. */ .dkx .dkx-route { background: var(--dkx-paper); padding: clamp(30px, 2.5vw, 44px); border: 0; border-radius: var(--dkx-radius); display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; box-shadow: 0 1px 2px rgba(20,20,20,0.05), 0 8px 20px rgba(20,20,20,0.06), 0 24px 48px rgba(20,20,20,0.05); transition: box-shadow 0.28s ease, transform 0.28s ease; } /* On the near-black background a shadow is invisible, so the card separates with a faint lift in its own surface instead. */ .dkx .bg-dark .dkx-route { box-shadow: none; background: rgba(255,255,255,0.045); } /* Lifts on hover. 2px is enough to register and small enough not to shove the text about. */ .dkx .dkx-route:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,20,20,0.06), 0 14px 30px rgba(20,20,20,0.09), 0 34px 64px rgba(20,20,20,0.07); } .dkx .bg-dark .dkx-route:hover { transform: translateY(-2px); background: rgba(255,255,255,0.075); box-shadow: none; } .dkx .dkx-route-num { font-family: var(--dkx-mono); font-size: var(--dkx-size-mono); font-weight: 400; letter-spacing: 0.21em; margin-bottom: 16px; opacity: 0.75; } .dkx .dkx-route h3 { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-sub); margin-bottom: 14px; } .dkx .dkx-route p { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); margin-bottom: 40px; } .dkx .dkx-go { font-family: var(--dkx-mono); font-size: var(--dkx-size-mono); font-weight: 400; letter-spacing: 0.21em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; transition: gap 0.18s ease; } .dkx .dkx-route:hover .dkx-go { gap: 14px; } /* ══ ABOUT — heading left, prose right ══ */ .dkx .dkx-about-grid { display: grid; align-items: start; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(56px, 8vw, 140px); } @media (max-width: 900px) { .dkx .dkx-about-grid { grid-template-columns: 1fr; gap: 48px; } } .dkx .dkx-worn { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--dkx-rule); } .dkx .bg-dark .dkx-worn { border-top-color: var(--dkx-rule-dark); } .dkx .dkx-worn .dkx-eyebrow { margin-bottom: 14px; } .dkx .dkx-worn-list { display: flex; flex-wrap: wrap; gap: 6px 0; } .dkx .dkx-worn-list span { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); } .dkx .dkx-worn-list span:not(:last-child)::after { content: '\00a0\00b7\00a0\00a0'; font-weight: 400; opacity: 0.55; } /* ══ CTA ══ */ .dkx .dkx-cta-in { text-align: center; } .dkx .dkx-cta-in .dkx-h2 { text-align: center; } .dkx .dkx-cta-in p { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); max-width: 520px; margin: 0 auto 56px; text-align: center; } .dkx .dkx-btn { font-family: var(--dkx-mono); display: inline-block; background: var(--dkx-paper); color: var(--dkx-dark); font-size: var(--dkx-size-mono); font-weight: 400; letter-spacing: 0.21em; text-transform: uppercase; padding: 17px 40px; border-radius: 2px; } .dkx .dkx-btn:hover { background: #e6e6e4; } .dkx .bg-paper .dkx-btn, .dkx .bg-stone .dkx-btn { background: var(--dkx-dark); color: var(--dkx-paper); } .dkx .bg-paper .dkx-btn:hover, .dkx .bg-stone .dkx-btn:hover { background: #2e2e2e; } /* ══ HEADER NAV ══ The only rules in this file that reach outside .dkx, and a deliberate exception. The nav belongs to the theme's own header, not to a DKX section. It is kept here rather than edited into the theme's own stylesheet for two reasons. Those files are built and minified, so an edit is unreadable and easily lost. And everything this project changes then stays in one file that is pushed and reverted together. The underline is not a border. The theme sets text-decoration: underline permanently on the label and then switches text-decoration-color to reveal it, so removing the decoration itself is what takes it off. The extra class in the selector is there to out-rank the theme's own rule without !important. Both header variants are covered because the theme ships two and only one is active at a time. */ !important is deliberate here and only here. These rules override a built, minified theme stylesheet, and the theme sets the underline on one element and then reveals it by changing text-decoration-color on three others, so winning on specificity alone proved unreliable. Both the decoration and its colour are killed, on both the link and its inner label, because the theme uses different ones in its two header variants. The hover underline is left alone. It is drawn as a separate line element rather than a text decoration, so it still works. */ .header-menu-new .header-menu__item, .header-menu-new .header-menu__item-text, .header-menu-new .header-menu__item:hover .header-menu__item-text, .header-menu-new .header-menu__item--active .header-menu__item-text, .header-menu-new .header-menu__item.is-active .header-menu__item-text, .header-menu .header-menu__item, .header-menu .header-menu__item-text { text-decoration: none !important; text-decoration-color: transparent !important; } /* The theme draws the nav underline two different ways and only removing one of them left the lines on screen. This is the second: a 1px element sitting 6px under the label, normally invisible and revealed by opacity. Removing the element rather than hiding it, so nothing can turn it back on. */ /* The client login button, matched to the menu beside it: same colour, same weight, same caps, one step smaller again so it reads as secondary. */ .clientlogin, .clientlogin.client, .clientlogin.customer { color: var(--dkx-type) !important; font-weight: var(--dkx-weight-head) !important; text-transform: uppercase; font-size: 0.8em; border-color: var(--dkx-type) !important; /* A literal rather than --dkx-radius, because that is defined on .dkx and the header sits outside it. 3px reads as softened rather than as a pill. */ border-radius: 3px; } /* And the nav takes the same grey as the rest of the type, rather than the theme's near-black. */ .header-menu-new .header-menu__item, .header-menu .header-menu__item, .header-menu-new .header-menu__item-text, .header-menu .header-menu__item-text { color: var(--dkx-dark) !important; text-transform: uppercase; /* !important on the weight too. Without it the theme's own rule was winning and the menu stayed at its normal weight. */ font-weight: var(--dkx-weight-head) !important; /* Relative, so it tracks whatever the theme sets rather than a fixed size. */ font-size: 0.9em; } .header-menu .header-menu__item-text::after, .header-menu-new .header-menu__item-text::after, .header-menu .header-menu__item--active .header-menu__item-text::after, .header-menu-new .header-menu__item--active .header-menu__item-text::after { display: none !important; } /* ══ TEXTURE ══ Fine grain over a flat background. Generated by an SVG turbulence filter held in a data URI, so it costs no request, tiles without a seam and stays sharp on any screen. An uploaded noise tile would band on a large flat area and would need a second file to serve retina. It sits on ::after with pointer-events off, above the background image layer and under the text. Opacity is deliberately very low: at anything above about 0.05 it stops reading as paper and starts reading as dirt on the screen. */ .dkx .textured { position: relative; } .dkx .textured::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.075; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Dark grounds get their own frequency, arrived at by bracketing two failures. At 0.85 the pattern is single-pixel speckle, which on black is the definition of sensor noise. At 0.018 it is cloud-scale blotches with nothing fine in them. 0.3 with three octaves sits between: visible as surface, too fine to read as weather. Tile drops to 300px to match, since a finer pattern needs a smaller tile before the repeat becomes visible. It also runs hotter than the light version, at 0.12 against 0.075. Screen on black adds light to nothing, so it needs more to register than multiply does against white. */ .dkx .bg-dark.textured::after { mix-blend-mode: screen; opacity: 0.085; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23d)'/%3E%3C/svg%3E"); background-size: 300px 300px; } /* The wrap has to out-rank the grain, or the texture lies over the type. */ .dkx .textured > .dkx-wrap { position: relative; z-index: 1; } /* ══ ORBIT — one centre, four capabilities around it ══ Slide 4 of the deck. The idea only survives if manufacturing is visibly one of four rather than the headline, and a plain row cannot say that: a row has no centre for anything to be in orbit around. So it is a 3x3 grid with the core in the middle and the four points at twelve, three, six and nine o'clock. Block order sets position, so reordering in the customiser moves them round the clock. The ring is a bordered circle on a pseudo-element rather than an SVG. It has to sit behind the type and scale with the box, and a border-radius circle does both without a file or a viewBox to keep in sync. */ .dkx .dkx-orbit { position: relative; width: 100%; margin: clamp(56px, 6vw, 96px) auto 0; aspect-ratio: 1.45; } /* The ring and the four labels are placed from the same two numbers. The ring is inset 13%, so its edge sits at 13% and 87%, and each label is centred on one of those points. That is the whole fix: before, the labels were in grid cells and the ring was a separate centred circle, so they could only line up by accident. Each label carries the section's own background colour, which masks the ring behind it. That is what produces the arc-with-gaps look in the deck, without having to draw four separate arcs and keep their end points in sync. */ /* A tilted ellipse, as in the deck, rather than a circle. Every number below comes out of one parametric equation, not from nudging things until they looked right. The ellipse has semi-axes a = 0.35 and b = 0.245 of the container width, tilted 12 degrees anticlockwise. A point on it at angle t sits at x = a·cos(t)·cos(-12) - b·sin(t)·sin(-12) y = a·cos(t)·sin(-12) + b·sin(t)·cos(-12) and the four labels are that equation solved at t = 270, 0, 90 and 180. Which is why they are at odd-looking percentages: on a tilted ellipse the top of the shape is not above the centre, it is up and slightly left. The vertical figures also carry a x1.45 factor, because the container is 1.45 times wider than it is tall and a percentage of height is not the same distance as a percentage of width. */ .dkx .dkx-orbit::before { content: ''; position: absolute; left: 50%; top: 50%; width: 74%; height: 71%; transform: translate(-50%, -50%) rotate(-12deg); border: 2px solid var(--dkx-rule); border-radius: 50%; pointer-events: none; } .dkx .bg-dark .dkx-orbit::before { border-color: var(--dkx-rule-dark); } .dkx .dkx-orbit-core, .dkx .dkx-orbit-point { position: absolute; transform: translate(-50%, -50%); text-align: center; } .dkx .dkx-orbit-core { left: 50%; top: 50%; width: min(52%, 330px); } .dkx .dkx-orbit-mark { display: block; font-family: var(--dkx-logo); font-size: clamp(30px, 3.92vw, 60px); font-weight: 400; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; margin: 0 auto clamp(16px, 1.6vw, 24px); } .dkx .dkx-orbit-name { font-size: var(--dkx-size-h2); font-weight: var(--dkx-weight-head); letter-spacing: 0.02em; line-height: 1; margin-bottom: 18px; } .dkx .dkx-orbit-centre { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); opacity: 0.9; } /* The fill has to stay: it is what breaks the ring so the label is legible on it. The outline is what stops that fill reading as a solid block sitting on a line. */ /* Ellipses, not rounded rectangles. An ellipse only contains a rectangle about 0.7 of its own width and height, so the horizontal padding has to roughly double or the last letter of a long label sits outside the curve. That extra width is also why the ring came in from 77% to 74%: at the old size the side labels ran off the edge of the container. Border is 1.5px against the ring's 2px. Matching them would make the label read as a break in the line rather than an object sitting on it. */ /* Now circles, with one word to a line. A circle wide enough for the longest single word, Manufacturing, fits every label once the words are stacked. */ .dkx .dkx-orbit-point { width: clamp(150px, 18%, 164px); aspect-ratio: 1; padding: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dkx-paper); border: 1.5px solid var(--dkx-rule); } .dkx .bg-stone .dkx-orbit-point { background: var(--dkx-stone); } .dkx .bg-dark .dkx-orbit-point { background: var(--dkx-dark); border-color: var(--dkx-rule-dark); } /* Bold body rather than h3. At h3 the labels compete with the section heading above, and every extra character pushes the ring wider. */ .dkx .dkx-orbit-point h3 { font-size: var(--dkx-body-size); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-sub); margin-bottom: 0; } /* Solved at t = 270, 0, 90, 180. The top and bottom two are pulled 1.5% toward the centre for the same reason as before: at the end of an axis the curve runs away from the label across its width, so sitting the box on the single tangent point puts the line out through the corners. */ .dkx .dkx-orbit-point.pos-1 { left: 44.9%; top: 16.8%; } .dkx .dkx-orbit-point.pos-2 { left: 86.2%; top: 38.8%; } .dkx .dkx-orbit-point.pos-3 { left: 55.1%; top: 83.2%; } .dkx .dkx-orbit-point.pos-4 { left: 13.8%; top: 61.2%; } /* Below 900px the clock face stops working. Absolute positioning comes off, the square container comes off, and it becomes an ordinary stack with the centre first. The ring goes because there is nothing left to orbit. */ @media (max-width: 900px) { .dkx .dkx-orbit { aspect-ratio: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 34px; } .dkx .dkx-orbit::before { display: none; } .dkx .dkx-orbit-path { display: none !important; } .dkx .dkx-orbit-point { aspect-ratio: auto !important; display: block !important; } .dkx .is-orbiting .dkx-orbit-point, .dkx .is-orbiting .dkx-orbit-point h3 { animation: none !important; } .dkx .dkx-orbit-core, .dkx .dkx-orbit-point { position: static; transform: none; width: auto; max-width: 420px; background: transparent; padding: 0; } .dkx .dkx-orbit-core { order: -1; } } .dkx .dkx-orbit-foot { margin-top: 22px; font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-display); max-width: 560px; } /* Below 900px the clock face stops working: the side points squeeze to nothing long before the layout actually breaks. It becomes one column, centre first, and the ring comes off because there is no longer anything to orbit. */ @media (max-width: 900px) { .dkx .dkx-orbit { grid-template-columns: 1fr; gap: 40px; } .dkx .dkx-orbit::before { display: none; } .dkx .dkx-orbit-path { display: none !important; } .dkx .dkx-orbit-point { aspect-ratio: auto !important; display: block !important; } .dkx .is-orbiting .dkx-orbit-point, .dkx .is-orbiting .dkx-orbit-point h3 { animation: none !important; } .dkx .dkx-orbit-core, .dkx .dkx-orbit-point.pos-1, .dkx .dkx-orbit-point.pos-2, .dkx .dkx-orbit-point.pos-3, .dkx .dkx-orbit-point.pos-4 { grid-column: 1; grid-row: auto; } .dkx .dkx-orbit-core { order: -1; } } /* The worn-by line under the orbit. Same dot separator the old about-section list used, so it reads as the same object moved rather than a new one. */ .dkx .dkx-orbit-worn { margin-top: clamp(48px, 5vw, 78px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--dkx-rule); text-align: center; } .dkx .bg-dark .dkx-orbit-worn { border-top-color: var(--dkx-rule-dark); } .dkx .dkx-orbit-worn .dkx-eyebrow { margin-bottom: 16px; } .dkx .dkx-orbit-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; } .dkx .dkx-orbit-names span { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); } .dkx .dkx-orbit-names span:not(:last-child)::after { content: '\00a0\00b7\00a0\00a0'; font-weight: 400; opacity: 0.55; } /* The legend under the orbit. The ring gives the shape, this gives the detail. Numbers rather than a repeated heading alone, so a reader can match a column back to its point on the circle without counting round it. */ /* The ring is drawn from the centre of the grid outwards, so at some widths its lower edge sits below the bottom label. The gap has to clear the circle, not just the text, which is why it is roughly double what a normal row would take. */ .dkx .dkx-orbit-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(104px, 11vw, 180px); } @media (max-width: 1080px) { .dkx .dkx-orbit-legend { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .dkx .dkx-orbit-legend { grid-template-columns: 1fr; } } .dkx .dkx-orbit-leg-n { font-family: var(--dkx-mono); font-size: var(--dkx-size-mono); font-weight: 400; letter-spacing: 0.21em; opacity: 0.55; margin-bottom: 12px; } .dkx .dkx-orbit-leg h3 { font-size: var(--dkx-size-h3); font-weight: var(--dkx-weight-head); letter-spacing: var(--dkx-track-head); line-height: var(--dkx-lead-sub); margin-bottom: 10px; } .dkx .dkx-orbit-leg .dkx-mark { width: 32px; height: 32px; margin-bottom: 16px; } /* The legend icons carry more parts than a tick, so they draw one piece at a time rather than all at once. Each path waits a little longer than the last, which is what makes the machine or the globe assemble itself. */ .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp { transition-duration: 0.55s; } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(1) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 0ms); } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(2) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 180ms); } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(3) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 330ms); } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(4) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 470ms); } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(5) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 600ms); } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(6) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 720ms); } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(7) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 830ms); } .dkx-anim .dkx .dkx-orbit-leg .dkx-mark.is-drawn .dkx-dp:nth-child(8) { transition-delay: calc(var(--dkx-draw-delay, 0ms) + 930ms); } .dkx .dkx-orbit-leg p { font-size: var(--dkx-body-size); line-height: var(--dkx-lead-body); opacity: 0.85; } /* The labels keep a solid fill, because it is the only thing stopping the ring running straight through the words. Making them see-through would show the texture and the line, and the line is the problem. So instead of removing the fill, the fill gets the same grain the section has. Same frequency, same tile, same opacity, same blend. The box then reads as a piece of the background rather than a panel sitting on it, which is what "transparent" was actually after. */ .dkx .textured .dkx-orbit-point::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 50%; opacity: 0.075; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .dkx .bg-dark.textured .dkx-orbit-point::before { opacity: 0.085; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23d)'/%3E%3C/svg%3E"); background-size: 300px 300px; } /* the label text has to sit above its own grain */ .dkx .dkx-orbit-point h3 { position: relative; z-index: 1; } /* ══ FOOTER ══ The second place in this file that reaches outside .dkx, and for the same reason as the header nav: the footer belongs to the theme, not to a DKX section, and keeping the override here means everything this project changes is pushed and reverted as one file. The theme writes its footer colours as inline custom properties on the