/* ========================================================================== Dima Group - Base Reset, typography scale (the 9 Figma text styles), layout container. Depends on tokens.css being loaded first. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { margin: 0; padding: 0; list-style: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } /* is a wrapper, not a frame. Every framed image in this theme sets width and height to 100% so it fills the box that crops it. But dima_picture() emits a around the , and has no sizing of its own - it collapses to the image's intrinsic ratio. The image then fills the WRAPPER instead of the frame, and the difference shows as a band of empty ground. Measured before this rule: the service hero sat 190px short of its 786px frame, and each service support figure 116px short of its 440px frame. Only the templates whose image comes from a theme asset were affected - a WordPress featured image renders without the , which is why the one service that has its own photograph looked correct. */ .dima-service__hero > picture, .dima-service__support-figure > picture, .dima-project__hero-media > picture, .dima-projects__media > picture, .dima-about__photo > picture { display: block; width: 100%; height: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* -------------------------------------------------------------------------- 2. Document -------------------------------------------------------------------------- */ body { background-color: var(--dima-surface); color: var(--dima-text); font-family: var(--dima-font-body); font-size: var(--dima-font-size-body); font-weight: var(--dima-font-weight-body); line-height: var(--dima-line-height-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------------------------------------------------------------------------- 2b. Section grounds The Figma artboard fill is #FFFFFF and most sections are transparent, so the page ground is light and a section only opts OUT of it. Four zones do: .dima-section--dark ink-800 (#161616) - Home "our services" .dima-section--gold-dark gold-900 (#332A12) - the CTA band .dima-section--warm gold-50 (#FFFDF5) - projects bar, About certs .dima-ground--dark the header, mega menu and hero, which are not .dima-section blocks A modifier re-declares the semantic aliases LOCALLY. Custom properties inherit, so every component nested inside picks up the correct surface, text, border, accent, focus ring and logo treatment without knowing which ground it is standing on. Components must read the aliases and never a raw ramp step, or they stop adapting. -------------------------------------------------------------------------- */ .dima-section--light, .dima-ground--light { --dima-surface: var(--dima-color-ivory-50); --dima-surface-raised: var(--dima-color-gold-50); --dima-text: var(--dima-color-ink-700); --dima-text-heading: var(--dima-color-ink-800); --dima-text-muted: var(--dima-color-ink-400); --dima-border: rgba(22, 22, 22, 0.14); --dima-accent-on-ground: var(--dima-color-gold-700); /* Label colour for anything that FILLS with --dima-accent-on-ground. 5.53:1 on the gold-700 fill. Without this the filled button hover inverted to white-on-gold at 2.08:1 on the dark grounds. */ --dima-accent-contrast: var(--dima-color-ivory-50); --dima-focus-ring: var(--dima-color-gold-600); --dima-error-on-ground: var(--dima-color-error-600); --dima-logo-filter: none; background-color: var(--dima-surface); color: var(--dima-text); } .dima-section--warm, .dima-ground--warm { --dima-surface: var(--dima-color-gold-50); /* #FFFDF5 */ --dima-surface-raised: var(--dima-color-ivory-50); --dima-text: var(--dima-color-ink-700); --dima-text-heading: var(--dima-color-ink-800); --dima-text-muted: var(--dima-color-ink-400); --dima-border: rgba(22, 22, 22, 0.14); --dima-accent-on-ground: var(--dima-color-gold-700); /* Label colour for anything that FILLS with --dima-accent-on-ground. 5.53:1 on the gold-700 fill. Without this the filled button hover inverted to white-on-gold at 2.08:1 on the dark grounds. */ --dima-accent-contrast: var(--dima-color-ivory-50); --dima-focus-ring: var(--dima-color-gold-600); --dima-error-on-ground: var(--dima-color-error-600); --dima-logo-filter: none; background-color: var(--dima-surface); color: var(--dima-text); } .dima-section--dark, .dima-ground--dark { --dima-surface: var(--dima-color-ink-800); /* #161616 */ --dima-surface-raised: var(--dima-color-ink-850); --dima-text: var(--dima-color-ivory-100); /* #F7F4EC */ --dima-text-heading: var(--dima-color-ivory-50); --dima-text-muted: var(--dima-color-ink-300); --dima-border: rgba(247, 244, 236, 0.16); --dima-accent-on-ground: var(--dima-color-gold-300); /* Label colour for anything that FILLS with --dima-accent-on-ground. 9.63:1 on the gold-300 fill. Without this the filled button hover inverted to white-on-gold at 2.08:1 on the dark grounds. */ --dima-accent-contrast: var(--dima-color-ink-950); --dima-focus-ring: var(--dima-color-gold-200); --dima-error-on-ground: var(--dima-color-error-300); --dima-logo-filter: brightness(0) invert(1); background-color: var(--dima-surface); color: var(--dima-text); } .dima-section--gold-dark, .dima-ground--gold-dark { --dima-surface: var(--dima-color-gold-900); /* #332A12 */ --dima-surface-raised: var(--dima-color-gold-800); --dima-text: var(--dima-color-ivory-100); /* #F7F4EC */ --dima-text-heading: var(--dima-color-ivory-50); --dima-text-muted: var(--dima-color-gold-100); --dima-border: rgba(247, 244, 236, 0.16); --dima-accent-on-ground: var(--dima-color-gold-300); /* Label colour for anything that FILLS with --dima-accent-on-ground. 9.63:1 on the gold-300 fill. Without this the filled button hover inverted to white-on-gold at 2.08:1 on the dark grounds. */ --dima-accent-contrast: var(--dima-color-ink-950); --dima-focus-ring: var(--dima-color-gold-200); --dima-error-on-ground: var(--dima-color-error-300); --dima-logo-filter: brightness(0) invert(1); background-color: var(--dima-surface); color: var(--dima-text); } /* -------------------------------------------------------------------------- 3. Typography scale - the 9 Figma text styles Each class maps 1:1 to a named Figma text style. Bare element selectors are deliberately NOT styled to these values, so content authored in the block editor does not inherit display type by accident. -------------------------------------------------------------------------- */ .dima-display-h1 { font-family: var(--dima-font-display); font-size: var(--dima-font-size-display-h1); font-weight: var(--dima-font-weight-display-h1); line-height: var(--dima-line-height-display-h1); letter-spacing: var(--dima-letter-spacing-display-h1); } .dima-h2-section { font-family: var(--dima-font-display); font-size: var(--dima-font-size-h2-section); font-weight: var(--dima-font-weight-h2-section); line-height: var(--dima-line-height-h2-section); letter-spacing: var(--dima-letter-spacing-h2-section); } .dima-h2-emphasis { font-family: var(--dima-font-display); font-size: var(--dima-font-size-h2-emphasis); font-weight: var(--dima-font-weight-h2-emphasis); line-height: var(--dima-line-height-h2-emphasis); letter-spacing: var(--dima-letter-spacing-h2-emphasis); } /* FIGMA DEFECT (two separate issues inside one style): 1. font-family is "Playfair", not "Playfair Display" like every other heading style in the system. Suspected authoring slip in Figma. We do not load a second serif family for a suspected typo, so the declared family falls through to "Playfair Display" via --dima-font-display-h3. 2. line-height (28.8px) is SMALLER than font-size (32px). Any heading that wraps to two or more lines will render with overlapping, unreadable text. Both are reproduced verbatim below exactly as specified. Apply .dima-h3-subsection--safe-leading to any instance that can wrap, until design signs off on a corrected token. */ .dima-h3-subsection { font-family: var(--dima-font-display-h3); font-size: var(--dima-font-size-h3-subsection); font-weight: var(--dima-font-weight-h3-subsection); line-height: var(--dima-line-height-h3-subsection); letter-spacing: var(--dima-letter-spacing-h3-subsection); } /* Non-Figma opt-in escape hatch. Not part of the design system. */ .dima-h3-subsection--safe-leading { line-height: var(--dima-line-height-h3-subsection-safe); } .dima-h4-card-title { font-family: var(--dima-font-display); font-size: var(--dima-font-size-h4-card-title); font-weight: var(--dima-font-weight-h4-card-title); line-height: var(--dima-line-height-h4-card-title); letter-spacing: var(--dima-letter-spacing-h4-card-title); } .dima-body-large { font-family: var(--dima-font-body); font-size: var(--dima-font-size-body-large); font-weight: var(--dima-font-weight-body-large); line-height: var(--dima-line-height-body-large); } .dima-body { font-family: var(--dima-font-body); font-size: var(--dima-font-size-body); font-weight: var(--dima-font-weight-body); line-height: var(--dima-line-height-body); } .dima-eyebrow-label { font-family: var(--dima-font-body); font-size: var(--dima-font-size-eyebrow-label); font-weight: var(--dima-font-weight-eyebrow-label); line-height: var(--dima-line-height-eyebrow-label); letter-spacing: var(--dima-letter-spacing-eyebrow-label); text-transform: uppercase; } .dima-micro-button { font-family: var(--dima-font-body); font-size: var(--dima-font-size-micro-button); font-weight: var(--dima-font-weight-micro-button); line-height: var(--dima-line-height-micro-button); letter-spacing: var(--dima-letter-spacing-micro-button); text-transform: uppercase; } /* -------------------------------------------------------------------------- 3b. Headline emphasis Every major headline in Figma carries a characterStyleOverrides range: a short phrase set in Playfair Display SemiBold, gold, and (with a single exception) italic. The range is a inside the heading so the heading is still one text node for assistive tech. Colour is passed in per headline through --dima-emphasis-color, because the design uses a different gold step on each ground: hero gold-200 (#F6D64A), UPRIGHT - the only non-italic one about gold-400 (#C3A55D) projects gold-400 (#C3A55D) services gold-300 (#D9AE47) CTA gold-300 (#D9AE47), bold -------------------------------------------------------------------------- */ .dima-emphasis { font-family: var(--dima-font-display); font-weight: 600; /* SemiBold */ font-style: italic; color: var(--dima-emphasis-color, var(--dima-color-gold-400)); } /* Hero only: Figma sets this range SemiBold but NOT italic. */ .dima-emphasis--upright { font-style: normal; } /* CTA band only: Figma sets that range Bold Italic. */ .dima-emphasis--bold { font-weight: 700; } /* FIGMA DEFECT: the CTA band headline's emphasis range declares the family "Playfair" rather than "Playfair Display", the same authoring slip already documented for the h3-subsection text style in tokens.css. Reproduced verbatim through --dima-font-display-h3, whose fallback chain resolves it to Playfair Display - we do not ship a second serif family for a suspected typo. TODO(design): confirm whether this should be "Playfair Display". */ .dima-emphasis--playfair { font-family: var(--dima-font-display-h3); } /* -------------------------------------------------------------------------- 4. Layout The artboard is 1440px. The mega menu uses a 170px left gutter with 56px right padding, which is asymmetric. For a symmetric web container we take 1440 - (2 x 170) = 1100px as the content column and center it. Full-bleed designed sections use .dima-row instead: the 1328px content row the artboard actually draws, inside a 56px gutter, capped at the 1440px design width so nothing is ever scaled up past the size it was drawn at. -------------------------------------------------------------------------- */ .dima-container { width: 100%; max-width: var(--dima-layout-container); margin-inline: auto; padding-inline: var(--dima-space-4); } .dima-row { width: 100%; /* 1328 + 2 x 56 = 1440, the artboard width. */ max-width: calc(var(--dima-layout-row) + 2 * var(--dima-layout-row-gutter)); margin-inline: auto; padding-inline: var(--dima-layout-row-gutter); } /* Full-bleed sections keep their own background but center their content. */ .dima-section { padding-block: var(--dima-space-9); } .dima-stack { display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- 5. Accessibility helpers -------------------------------------------------------------------------- */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .dima-skip-link { position: absolute; left: var(--dima-space-3); top: var(--dima-space-3); z-index: 999; transform: translateY(-300%); background-color: var(--dima-color-gold-300); color: var(--dima-color-ink-950); padding: var(--dima-space-2) var(--dima-space-4); border-radius: 2px; transition: transform var(--dima-transition-fast); } .dima-skip-link:focus { transform: translateY(0); } /* Visible focus for every interactive element. Gold-200 (#F6D64A) on ink-900 (#0D0D0D) is roughly 13:1, well past the WCAG 2.2 non-text minimum of 3:1. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--dima-focus-ring); outline-offset: 3px; } /* -------------------------------------------------------------------------- 6. Editor-authored content -------------------------------------------------------------------------- */ .dima-entry-content > * + * { margin-block-start: var(--dima-space-4); } .dima-entry-content a { color: var(--dima-accent); text-decoration: underline; text-underline-offset: 3px; } .dima-entry-content h1 { font-family: var(--dima-font-display); font-size: var(--dima-font-size-h2-section); font-weight: var(--dima-font-weight-h2-section); line-height: var(--dima-line-height-h2-section); letter-spacing: var(--dima-letter-spacing-h2-section); } .dima-entry-content h2 { font-family: var(--dima-font-display); font-size: var(--dima-font-size-h2-emphasis); font-weight: var(--dima-font-weight-h2-emphasis); line-height: var(--dima-line-height-h2-emphasis); letter-spacing: var(--dima-letter-spacing-h2-emphasis); } .dima-entry-content h3 { font-family: var(--dima-font-display); font-size: var(--dima-font-size-h4-card-title); font-weight: var(--dima-font-weight-h4-card-title); line-height: var(--dima-line-height-h4-card-title); letter-spacing: var(--dima-letter-spacing-h4-card-title); } .dima-entry-content blockquote { border-inline-start: 2px solid var(--dima-accent); padding-inline-start: var(--dima-space-4); color: var(--dima-text); } .dima-entry-content :is(img, iframe, video) { height: auto; } /* -------------------------------------------------------------------------- 7. Search form -------------------------------------------------------------------------- */ .dima-search-form { display: flex; gap: var(--dima-space-2); align-items: stretch; max-width: 480px; } .dima-search-form__field { flex: 1 1 auto; min-width: 0; background-color: var(--dima-surface-raised); border: 1px solid var(--dima-border); color: var(--dima-text); padding: var(--dima-space-2) var(--dima-space-3); border-radius: 2px; } .dima-search-form__field::placeholder { color: var(--dima-text-muted); } /* -------------------------------------------------------------------------- Entrance choreography NOT FROM FIGMA - see the Motion block in tokens.css. The resting (hidden) state is scoped to .dima-motion-ready, a class that assets/js/motion.js adds to only after it has marked its targets and confirmed the visitor has not asked for reduced motion. With JavaScript off, the class never lands and every rule below is inert, so the page renders fully composed. Content is never hidden by CSS alone. --dima-reveal-step is set per element by the same script; it is the element's index within its group, capped, so siblings arrive in sequence rather than all at once. -------------------------------------------------------------------------- */ .dima-motion-ready .dima-reveal { opacity: 0; transform: translate3d(0, var(--dima-entrance-rise), 0); } .dima-motion-ready .dima-reveal { transition: opacity var(--dima-duration-entrance) var(--dima-ease-entrance), transform var(--dima-duration-entrance) var(--dima-ease-entrance); transition-delay: calc(var(--dima-reveal-step, 0) * var(--dima-stagger)); /* Promoted only while it is actually animating; the promotion is dropped again on .is-revealed so long pages do not hold dozens of layers. */ will-change: opacity, transform; } .dima-motion-ready .dima-reveal.is-revealed { opacity: 1; transform: none; will-change: auto; } /* Reduced motion: fade only. The rise and the stagger are what the preference is actually about, so both are dropped; the opacity change stays, because a crossfade does not cause the vestibular response that translation and parallax can. Elements still arrive rather than being hidden - the movement is what goes, not the mechanism. */ .dima-motion-ready.dima-motion-reduced .dima-reveal { transform: none; transition: opacity 320ms linear; transition-delay: 0s; will-change: opacity; } .dima-motion-ready.dima-motion-reduced .dima-reveal.is-revealed { transform: none; } /* Last resort. If the preference is switched on mid-session the script has already chosen its mode, so anything not yet revealed must still appear rather than stay invisible forever. */ @media ( prefers-reduced-motion: reduce ) { .dima-motion-ready .dima-reveal { transform: none; } .dima-motion-ready .dima-reveal:not( .is-revealed ) { transition-delay: 0s; } }