/* ========================================================================== EUROMIG — the theme stylesheet. One file, one request, no @import chain, no build step. Organised in the order a browser reads it and a person reasons about it: 1 Design tokens 2 Reset and base elements 3 Accessibility utilities 4 Layout containers 5 Site header 6 Primary navigation (six levels) 7 Language switcher 8 Site footer 9 Entries and migrated content 10 Components: buttons, forms, cards, badges, tables, pagination 11 Post-type surfaces 12 Homepage 13 Page and service hierarchy 14 Editorial 15 Responsive and motion CASE 11.1 REFACTORED THIS FILE RATHER THAN APPENDING TO IT. Twelve of the fifteen sections were replaced in place, so a refined rule sits where the rule it supersedes used to be and the file gained no second copy of anything. Three components MOVED to where they belonged — the section header and the accent button out of 12 into 10, the brand mark into 10 as a component both navy surfaces share — and two rules were deleted outright rather than overridden: the `:nth-of-type(even)` band that tinted every second homepage section, and the unlabelled gold border on a featured listing. There is no override layer, no numeric WordPress id in a selector, and no rule that contradicts an earlier one. `!important` appears NINE times: - four in the reduced-motion block; - three holding the two visually-hidden utilities in place — a screen-reader label that a component rule could otherwise reveal is a defect, not a style preference; - TWO added by CASE 11.3, both in section 9, both on the same rule, and both there for a reason no selector can solve: five migrated tables carry `style="width: …px; height: …px"` in their stored markup, an inline style outranks every author rule, and rewriting stored content is out of scope for this project. They are named at the point of use. CASE 11.3 ALSO REMOVED A TOKEN RATHER THAN OVERRIDING IT. `--em-measure` (66ch) is gone from section 1, and the three rules that used it — in sections 4, 10 and 13 — were rewritten where they stand. Nothing was piled at the end of the file. Every `ch` value that survives is on a HEADING, a LEAD, an EXCERPT or the footer statement — a single short line that would read as an accident if it ran the full 1,204px. Not one is on `.entry-content` or on generic page content, which is the distinction CASE 11.3 draws. ========================================================================== */ /* ========================================================================== 0 INTER TIGHT — SELF-HOSTED Rasmus Andersson's Inter Tight, under the SIL Open Font License 1.1. The licence travels with the files, in `assets/fonts/OFL.txt`, because the OFL requires it of a redistributed copy. THERE IS NO EXTERNAL REQUEST. No Google Fonts stylesheet, no gstatic, no font loader script: the files are in this theme and the browser fetches them from this origin. Split by `unicode-range` rather than shipped as one file, which is what makes a self-hosted variable font cheap on a bilingual site: an English page downloads the Latin roman and nothing else; a Russian page downloads the Cyrillic roman. Neither pays for the other's alphabet, and neither pays for Greek or Vietnamese, which are not shipped at all. One variable axis, weight 100-900, so every weight this design uses comes out of the same file. `font-display: swap` keeps text readable while it loads, and the fallback stack below is metric-similar enough that the swap is not a jolt. ========================================================================== */ /* latin, normal — 44872 bytes */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic, normal — 16996 bytes */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-cyrillic-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext, normal — 89800 bytes */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-ext-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* cyrillic-ext, normal — 26660 bytes */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-cyrillic-ext-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* latin, italic — 47912 bytes */ @font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic, italic — 17856 bytes */ @font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext, italic — 95128 bytes */ @font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* cyrillic-ext, italic — 27916 bytes */ @font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-cyrillic-ext-italic.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* ========================================================================== 1 DESIGN TOKENS — EUROMIG BUSINESS The visual reference the client supplied is a business-consultancy theme. What actually makes that reference work is not a colour or a photograph: it is SCALE and AIR. Its headings are three to four times its body size, its sections breathe, its components are large, and it almost never uses a border where whitespace would do. So this candidate is built on a wider type range than anything before it in this project — 5.3:1 from metadata to display — a single-tier white header, and a 1300px composition grid. ========================================================================== */ :root { /* -------------------------------------------------------------------- Brand. MEASURED in CASE 10 from the authoritative logo: 50.3% of its opaque pixels are #ffbe00 and 41.5% are #001c72. The rule the whole file obeys is unchanged and non-negotiable: gold is 1.66:1 on white, so it is a SURFACE and an ACCENT, never text on white. Gold carries dark ink; never the reverse. -------------------------------------------------------------------- */ --em-color-brand: #001c72; /* 14.90:1 on white */ --em-color-brand-dark: #001350; --em-color-brand-tint: #eaeef8; --em-color-brand-wash: #f5f7fc; --em-color-accent: #ffbe00; --em-color-accent-hover: #ffcd33; --em-color-accent-ink: #16181d; /* 10.67:1 on the accent */ --em-color-accent-soft: #fff4d1; /* Neutrals. Every pair used for text clears WCAG AA. */ --em-color-text: #14161b; /* 18.4:1 on white */ --em-color-text-muted: #545c6b; /* 6.9:1 on white */ --em-color-bg: #ffffff; --em-color-surface: #f6f8fb; --em-color-surface-strong: #e8ecf3; --em-color-border: #e2e6ed; --em-color-border-strong: #c3cad6; /* * TABLES ONLY, and named separately because human review named the VALUE: * "content table borders must use #eee". It is lighter and more neutral * than `--em-color-border`, which is very slightly blue; on a table of 73 * rows that difference is the whole character of the grid. * * It is a 1.19:1 line on white. That is correct for a rule — it separates * without competing — and it carries no text, so no contrast minimum * applies to it. */ --em-color-table-border: #eeeeee; /* Ink on the navy ground, named once. */ --em-color-on-brand: #ffffff; --em-color-on-brand-muted: rgba(255, 255, 255, 0.8); --em-color-on-brand-faint: rgba(255, 255, 255, 0.6); --em-color-on-brand-line: rgba(255, 255, 255, 0.18); --em-color-on-brand-wash: rgba(255, 255, 255, 0.07); /* Status. */ --em-color-success: #146c43; --em-color-warning: #8a5200; --em-color-danger: #b3261e; --em-color-on-status: #ffffff; /* -------------------------------------------------------------------- Type — Inter Tight, self-hosted, section 0. The fallback stack is metric-similar so the `font-display: swap` handover is not a jolt. No Google Fonts, no CDN, no loader script. -------------------------------------------------------------------- */ --em-font-sans: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; --em-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* * THE SCALE. 13px to 69px at 1440, a range of 5.3:1. * * Inter Tight is narrower than a system UI face at the same size, which is * the point: a 69px headline in Inter Tight occupies roughly the width of a * 62px system heading, so the scale can be more confident without the line * breaking earlier. Every step is a clamp, so a phone compresses the scale * rather than switching to a second one. */ --em-text-xs: 0.8125rem; /* 13px */ --em-text-sm: 0.9375rem; /* 15px */ --em-text-base: 1.125rem; /* 18px — body */ --em-text-md: 1.1875rem; /* 19px */ --em-text-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); /* 19 → 23px */ --em-text-lg: clamp(1.375rem, 1.1rem + 1.05vw, 1.9375rem); /* 22 → 31px — h3/card */ --em-text-xl: clamp(1.875rem, 1.35rem + 2.05vw, 3.125rem); /* 30 → 50px — h2 */ --em-text-2xl: clamp(2.125rem, 1.5rem + 2.5vw, 3.5rem); /* 34 → 56px — page h1 */ --em-text-display: clamp(2.5rem, 1.6rem + 3.9vw, 4.3125rem); /* 40 → 69px — home h1 */ --em-text-nav: 1rem; --em-text-button: 1rem; --em-weight-regular: 400; --em-weight-medium: 500; --em-weight-semibold: 600; --em-weight-bold: 700; --em-leading-tight: 1.06; --em-leading-snug: 1.28; --em-leading-normal: 1.62; --em-leading-loose: 1.78; --em-tracking-tight: -0.022em; --em-tracking-wide: 0.1em; /* Spacing — a 4px base. */ --em-space-1: 0.25rem; --em-space-2: 0.5rem; --em-space-3: 0.75rem; --em-space-4: 1rem; --em-space-5: 1.5rem; --em-space-6: 2rem; --em-space-7: 3rem; --em-space-8: 4rem; --em-space-9: 6rem; /* * Section rhythm. CASE 11.3 CUT THIS SCALE BY ROUGHLY 43 PER CENT. * * CASE 11.2 separated sections by about 120px at each edge, on the theory * that generosity is what makes a page read as premium. Human review of * the built page disagreed with the theory: "too white, too vertically * large", and "more businesses in less vertical space". * * The measured cost was concrete. Four homepage sections at 120px top and * bottom is 960 pixels of nothing, which at a 1000px viewport is a whole * screen the visitor scrolls past to reach the next fact. * * So the scale is smaller but still a SCALE: three steps, each still fluid, * still 1.55:1 from the smallest to the largest, so the rhythm survives * even though the absolute values do not. Compaction is a change of * spacing, never of type size — nothing here makes the text smaller. * * sm 32 → 44px (was 48 → 72) * md 44 → 68px (was 64 → 120) * lg 56 → 88px (was 80 → 152) */ --em-section-sm: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); --em-section-md: clamp(2.75rem, 2.1rem + 2.6vw, 4.25rem); --em-section-lg: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem); /* * Layout. * * `--em-measure: 66ch` USED TO LIVE HERE AND IS GONE. * * It capped `.entry-content` at about 687 real pixels — inside a column * that offered 1204 at 1440, and 868 on a page with a sidebar. Every * migrated page therefore set its text in just over half the width it had * been given, and every legacy table had to scroll sideways inside a box * narrower than the table. Human review asked for the cap to be removed; * section 4 now gives generic content the whole of its column. * * What replaces it is NOT a smaller cap. `--em-measure-lede` is for short * standalone paragraphs that are not body content — an archive * description, the 404 sentence, a section lead — where a single line * running the full 1204px would read as a mistake. It is never applied to * `.entry-content`. * * `--em-container` stays at 1300px: inside CASE 11.3's 1280–1360 * recommendation, aligned with the header grid, and the only global width * limit in the theme. It is now the ONLY width limit in the theme. * * `--em-container-narrow` (900px) and `--em-container-reading` (46rem) went * with the measure. Between them they capped a page body, a homepage * introduction and every single article, and each was the same instruction * under a different name. A token nothing uses is a token somebody will * use again by accident. */ --em-container: 1300px; --em-measure-lede: 60ch; --em-gutter: clamp(1.25rem, 4vw, 3rem); --em-masthead-height: 5.5rem; --em-header-height: 5.5rem; --em-admin-bar-height: 0px; /* Surface treatment. Softer and larger than the baseline's. */ --em-radius-sm: 4px; --em-radius: 10px; --em-radius-lg: 18px; --em-radius-xl: 28px; --em-shadow-sm: 0 1px 2px rgba(20, 22, 27, 0.05), 0 2px 6px rgba(20, 22, 27, 0.05); --em-shadow: 0 4px 12px rgba(20, 22, 27, 0.06), 0 12px 32px rgba(20, 22, 27, 0.07); --em-shadow-lg: 0 12px 40px rgba(0, 28, 114, 0.14); /* Interaction. */ --em-focus-ring: 3px solid var(--em-color-brand); --em-focus-offset: 2px; --em-duration: 180ms; --em-easing: cubic-bezier(0.2, 0, 0.2, 1); --em-z-header: 100; --em-z-submenu: 110; } /* ========================================================================== 2 RESET AND BASE ELEMENTS Scoped to the front end by the enqueue, so nothing here can reach wp-admin and disturb the Corporate Sales editor. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--em-color-bg); color: var(--em-color-text); font-family: var(--em-font-sans); font-size: var(--em-text-base); line-height: var(--em-leading-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--em-space-4); color: var(--em-color-brand); font-weight: var(--em-weight-semibold); line-height: var(--em-leading-tight); text-wrap: balance; } /* * Tracking tightens as size grows, which is what keeps a 48px heading from * reading as loose beside 17px body copy set at its natural spacing. Applied * to the two display sizes only — pulling 19px type together makes it harder * to read, and it makes Cyrillic noticeably harder. */ h1, h2 { letter-spacing: var(--em-tracking-tight); } h1 { font-size: var(--em-text-2xl); } h2 { font-size: var(--em-text-xl); } h3 { font-size: var(--em-text-lg); } h4 { font-size: var(--em-text-md); } h5, h6 { font-size: var(--em-text-base); } p, ul, ol, dl, table, figure, blockquote, pre { margin: 0 0 var(--em-space-4); } :where(p, li) { text-wrap: pretty; } a { color: var(--em-color-brand); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover, a:focus-visible { color: var(--em-color-brand-dark); } ul, ol { padding-left: var(--em-space-5); } li + li { margin-top: var(--em-space-1); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } figure { margin-inline: 0; } figcaption { margin-top: var(--em-space-2); color: var(--em-color-text-muted); font-size: var(--em-text-sm); } blockquote { margin-inline: 0; padding: var(--em-space-3) var(--em-space-5); border-left: 4px solid var(--em-color-accent); background-color: var(--em-color-surface); color: var(--em-color-text); } blockquote > :last-child { margin-bottom: 0; } hr { height: 0; margin: var(--em-space-6) 0; border: 0; border-top: 1px solid var(--em-color-border); } code, kbd, samp, pre { font-family: var(--em-font-mono); font-size: 0.9em; } code { padding: 0.1em 0.35em; border-radius: var(--em-radius-sm); background-color: var(--em-color-surface-strong); } pre { overflow-x: auto; padding: var(--em-space-4); border: 1px solid var(--em-color-border); border-radius: var(--em-radius); background-color: var(--em-color-surface); tab-size: 4; } pre code { padding: 0; background: none; } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--em-space-2) var(--em-space-3); border-bottom: 1px solid var(--em-color-border); text-align: left; vertical-align: top; } th { font-weight: var(--em-weight-semibold); } thead th { border-bottom-width: 2px; border-bottom-color: var(--em-color-border-strong); } iframe, embed, object { max-width: 100%; } /* -------------------------------------------------------------------------- Focus. The outline is never removed without a replacement. `:focus-visible` keeps it off for mouse clicks and on for keyboard use; the `:focus` fallback below it covers browsers that do not support the newer selector. -------------------------------------------------------------------------- */ :focus { outline: var(--em-focus-ring); outline-offset: var(--em-focus-offset); } :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: var(--em-focus-ring); outline-offset: var(--em-focus-offset); } /* ========================================================================== 3 ACCESSIBILITY UTILITIES ========================================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link.screen-reader-text:focus { position: fixed !important; top: calc(var(--em-admin-bar-height) + var(--em-space-2)); left: var(--em-space-2); z-index: 1000; width: auto; height: auto; padding: var(--em-space-2) var(--em-space-4); clip-path: none; border-radius: var(--em-radius); background-color: var(--em-color-bg); box-shadow: var(--em-shadow-lg); color: var(--em-color-brand); font-weight: var(--em-weight-semibold); text-decoration: none; } /* The skip target must not show a permanent outline when focused by script. */ .site-main:focus { outline: none; } .site-main:focus-visible { outline: var(--em-focus-ring); outline-offset: calc(var(--em-focus-offset) * -1); } /* ========================================================================== 4 LAYOUT ONE grid, not several. Every full-width surface — the header's two tiers, the hero, each homepage section, the page body and the footer — puts its content inside `.site-container`, so the logo, the first navigation label, the headline, the first card and the first footer column all begin on the same vertical line at every width. Human review found the old page "composed from separate blocks"; that was the cause. ========================================================================== */ .site-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .site-container { width: 100%; max-width: var(--em-container); margin-inline: auto; padding-inline: var(--em-gutter); } /* * Templates own their own top spacing, because each opens with a surface that * already has some: a hero, a page header or an article header. Only the three * post-type singles begin straight into content, and they say so. */ .site-main { flex: 1 0 auto; padding-block: 0 var(--em-section-md); } /* * `--sales-single` LEFT THIS GROUP IN CASE 12. The rule gives a template that * opens straight into content some room to breathe, which is still right for * a consultant and a real-estate record. A Sales listing no longer opens into * content: it opens into its own tinted header, which supplies its own * padding, and the two together were leaving a white strip between the site * header and the listing header. */ .site-main--consultant-single, .site-main--realestate-single { padding-top: var(--em-section-sm); } /* * The marketplace and a listing both start with a full-bleed tinted band, so * the main element contributes nothing at the top and nothing at the bottom — * the footer follows the last section directly. */ .site-main--marketplace, .site-main--sales-single { padding-block: 0; } .site-main--home { padding-bottom: 0; } /* -------------------------------------------------------------------------- THE CONTENT WIDTH CONTRACT. ONE RULE, STATED ONCE: content fills the column it was given, and the COLUMN decides how wide that is. `.site-container` caps the composition at 1300px, the page grid decides how much of it the article gets, and nothing inside the article narrows it again. This replaces three rules that each imposed a reading measure of their own — `.entry-content` at 66ch, `.entry--page`/`.entry--single` at `min(66ch, 900px)`, and `.page-layout .entry-content` at 66ch again in section 13. The result was that a page with a sidebar and a page without both set their text at the same 687 pixels, and the sidebar page's extra 181px of column simply stayed empty. READABILITY IS NOT ABANDONED — it moves to where it belongs. Line height, paragraph spacing, heading rhythm and list spacing do that work in section 9 for migrated content and in section 14 for long-form articles. What is gone is the single blunt instrument that also broke every table. -------------------------------------------------------------------------- */ .entry-content { width: 100%; max-width: none; } /* * NOT `.entry-content`. These two are single short paragraphs that introduce a * listing page — one sentence each — and a sentence set across 1204 pixels * reads as an accident rather than as a decision. The cap is on them * specifically and is documented here as intentional. */ .archive-description, .error-404__message { max-width: var(--em-measure-lede); } .page-header { margin-bottom: var(--em-space-6); } .page-title { margin-bottom: var(--em-space-2); } .section-title { margin-top: var(--em-space-7); padding-bottom: var(--em-space-3); border-bottom: 2px solid var(--em-color-accent); font-size: var(--em-text-lg); } /* ========================================================================== 5 SITE HEADER — EUROMIG BUSINESS ONE ROW. That is the most visible difference from the baseline, and it is the thing the supplied reference does that the previous design could not: a white masthead about 88px tall carrying the wordmark, the whole navigation and the language control on a single line. It fits now because two things changed. Inter Tight at 16px is materially narrower than the 17px system stack it replaces, and the language control is two flags rather than two spelled-out language names — together roughly 190px of the row given back, which is what six root items needed. The structure is in `header.php` rather than here: branding, navigation and the utility cluster are siblings in one flex row, so nothing is lifted onto the row by negative margin. ========================================================================== */ .site-header { position: sticky; top: var(--em-admin-bar-height); z-index: var(--em-z-header); border-bottom: 1px solid var(--em-color-border); background-color: var(--em-color-bg); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--em-space-3) var(--em-space-5); min-height: var(--em-masthead-height); padding-block: var(--em-space-3); } /* The wordmark does not shrink; the utility cluster gives way instead. */ .site-branding { flex: 0 0 auto; min-width: 0; margin-right: auto; } .site-logo, .custom-logo { display: block; width: auto; max-height: 2rem; } .site-title { margin: 0; font-size: var(--em-text-lg); font-weight: var(--em-weight-bold); letter-spacing: var(--em-tracking-tight); } .site-title a { text-decoration: none; } .site-header__utility { display: flex; flex: 0 0 auto; align-items: center; gap: var(--em-space-3); } .menu-placeholder { margin: 0; padding-block: var(--em-space-3); font-size: var(--em-text-sm); } /* -- Small screens: the navigation is a panel below the row --------------- */ .site-header__nav { flex-basis: 100%; order: 3; min-width: 0; } @media (min-width: 62rem) { .site-logo, .custom-logo { max-height: 2.5rem; } .site-header__inner { flex-wrap: nowrap; gap: var(--em-space-6); min-height: 5.5rem; } /* * On the row, between the wordmark and the flags, and pushed to the right * so the navigation ends where the language control begins rather than * floating in the middle of the available space. */ .site-header__nav { flex: 0 1 auto; flex-basis: auto; order: 0; } } /* ========================================================================== 6 PRIMARY NAVIGATION — EUROMIG BUSINESS Authored mobile-first AND no-JS-first, exactly as CASE 10 built it. The walker, the markup, the disclosure buttons, their `aria-controls` pairs and `assets/js/navigation.js` are untouched: sixty-three items per language, six levels deep, usable with the keyboard and usable with scripting off. What changed is that at desktop the roots sit ON THE WHITE MASTHEAD instead of on a navy strip of their own, and the current section is marked by a gold rule under the label rather than by a bar on a coloured ground. ========================================================================== */ .menu, .sub-menu { margin: 0; padding: 0; list-style: none; } .menu li + li { margin-top: 0; } .menu-item { position: relative; } .menu-item__link { display: block; padding: var(--em-space-3); color: var(--em-color-text); font-weight: var(--em-weight-medium); text-decoration: none; } .menu-item__link:hover, .menu-item__link:focus-visible { color: var(--em-color-brand); text-decoration: underline; } /* A navigation label with no public route. Not a link, and not pretending. */ .menu-item__link--static { color: var(--em-color-text-muted); cursor: default; } .menu-item__link--static:hover { text-decoration: none; } .menu-item.current-menu-item > .menu-item__link, .menu-item.current_page_item > .menu-item__link { color: var(--em-color-brand); font-weight: var(--em-weight-semibold); box-shadow: inset 3px 0 0 var(--em-color-accent); } .menu-item.current-menu-ancestor > .menu-item__link, .menu-item.current-menu-parent > .menu-item__link, .menu-item.current_page_ancestor > .menu-item__link { color: var(--em-color-brand); font-weight: var(--em-weight-semibold); } /* Depth is expressed as indentation in the stacked layout. */ .sub-menu .menu-item__link { padding-left: calc(var(--em-space-3) + var(--em-space-4)); } .sub-menu .sub-menu .menu-item__link { padding-left: calc(var(--em-space-3) + var(--em-space-4) * 2); } .sub-menu .sub-menu .sub-menu .menu-item__link { padding-left: calc(var(--em-space-3) + var(--em-space-4) * 3); } .sub-menu .sub-menu .sub-menu .sub-menu .menu-item__link { padding-left: calc(var(--em-space-3) + var(--em-space-4) * 4); } .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .menu-item__link { padding-left: calc(var(--em-space-3) + var(--em-space-4) * 5); } .submenu-toggle, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--em-space-2); border: 1px solid transparent; background: none; color: inherit; cursor: pointer; font: inherit; } .submenu-toggle { position: absolute; top: 0; right: 0; width: 2.75rem; height: 2.75rem; border-radius: var(--em-radius); } .submenu-toggle__icon { width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-15%, -15%); transition: transform var(--em-duration) var(--em-easing); } .submenu-toggle[aria-expanded="true"] .submenu-toggle__icon { transform: rotate(-135deg) translate(-15%, -15%); } .menu-toggle { min-height: 2.75rem; padding: var(--em-space-2) var(--em-space-4); border-color: var(--em-color-border-strong); border-radius: var(--em-radius); font-size: var(--em-text-sm); font-weight: var(--em-weight-semibold); letter-spacing: 0.03em; text-transform: uppercase; } .menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--em-color-brand); color: var(--em-color-brand); } .menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after { display: block; width: 1.25rem; height: 2px; background-color: currentColor; } .menu-toggle__icon { position: relative; } .menu-toggle__icon::before, .menu-toggle__icon::after { position: absolute; left: 0; content: ""; } .menu-toggle__icon::before { top: -6px; } .menu-toggle__icon::after { top: 6px; } /* -------------------------------------------------------------------------- NO JAVASCRIPT — everything visible, nothing that needs a script to open. -------------------------------------------------------------------------- */ html:not(.js) .menu-toggle, html:not(.js) .submenu-toggle { display: none; } html:not(.js) .site-header__nav { padding-block: var(--em-space-4); border-top: 1px solid var(--em-color-border); } /* -- With JavaScript, small screens --------------------------------------- */ .js .site-header__nav { display: none; } .js .site-header__nav.is-open { display: block; padding-block: var(--em-space-3) var(--em-space-5); border-top: 1px solid var(--em-color-border); } .js .sub-menu { display: none; } .js .menu-item.is-open > .sub-menu { display: block; } /* -- With JavaScript, desktop --------------------------------------------- */ @media (min-width: 62rem) { .js .site-header__nav { display: block; padding-block: 0; border-top: 0; } .js .menu-toggle { display: none; } .js .menu--primary { display: flex; flex-wrap: nowrap; align-items: center; } .js .menu--primary > .menu-item > .menu-item__link { display: flex; align-items: center; padding: var(--em-space-3) var(--em-space-4); color: var(--em-color-text); font-size: var(--em-text-nav); font-weight: var(--em-weight-medium); letter-spacing: -0.004em; white-space: nowrap; } .js .menu--primary > .menu-item > .menu-item__link:hover, .js .menu--primary > .menu-item:hover > .menu-item__link, .js .menu--primary > .menu-item:focus-within > .menu-item__link { color: var(--em-color-brand); text-decoration: none; } /* The gold marker, under the label, on the masthead's own white. */ .js .menu--primary > .menu-item > .menu-item__link::after { position: absolute; right: var(--em-space-4); bottom: -2px; left: var(--em-space-4); height: 3px; background-color: transparent; content: ""; transition: background-color var(--em-duration) var(--em-easing); } .js .menu--primary > .menu-item:hover > .menu-item__link::after, .js .menu--primary > .menu-item:focus-within > .menu-item__link::after, .js .menu--primary > .menu-item.current-menu-item > .menu-item__link::after, .js .menu--primary > .menu-item.current-menu-ancestor > .menu-item__link::after, .js .menu--primary > .menu-item.current_page_item > .menu-item__link::after, .js .menu--primary > .menu-item.current_page_ancestor > .menu-item__link::after { background-color: var(--em-color-accent); } .js .menu--primary > .menu-item.current-menu-item > .menu-item__link, .js .menu--primary > .menu-item.current_page_item > .menu-item__link, .js .menu--primary > .menu-item.current-menu-ancestor > .menu-item__link, .js .menu--primary > .menu-item.current-menu-parent > .menu-item__link, .js .menu--primary > .menu-item.current_page_ancestor > .menu-item__link { box-shadow: none; color: var(--em-color-brand); font-weight: var(--em-weight-semibold); } .js .menu--primary > .menu-item > .menu-item__link--static { color: var(--em-color-text-muted); } .js .menu--primary .menu-item-has-children > .menu-item__link { padding-right: var(--em-space-6); } .js .menu--primary .sub-menu { position: absolute; z-index: var(--em-z-submenu); min-width: 17rem; max-width: min(24rem, 90vw); padding: var(--em-space-3) 0; border: 1px solid var(--em-color-border); border-radius: var(--em-radius-lg); background-color: var(--em-color-bg); box-shadow: var(--em-shadow); } .js .menu--primary .sub-menu .menu-item__link { font-size: var(--em-text-sm); } .js .menu--primary > .menu-item > .sub-menu { top: calc(100% + 0.5rem); left: 0; } .js .menu--primary .sub-menu .sub-menu { top: calc(var(--em-space-3) * -1); left: 100%; } .js .menu--primary .sub-menu.is-flipped { left: auto; right: 100%; } .js .menu--primary > .menu-item > .sub-menu.is-flipped { left: auto; right: 0; } .js .menu--primary .sub-menu .menu-item__link { padding-left: var(--em-space-5); padding-right: var(--em-space-6); } .js .menu--primary .menu-item:hover > .sub-menu, .js .menu--primary .menu-item:focus-within > .sub-menu, .js .menu--primary .menu-item.is-open > .sub-menu { display: block; } .js .menu--primary .submenu-toggle { width: 2rem; height: 2rem; } .js .menu--primary > .menu-item > .submenu-toggle { top: 50%; right: var(--em-space-1); transform: translateY(-50%); } .js .menu--primary .sub-menu .menu-item-has-children > .submenu-toggle .submenu-toggle__icon { transform: rotate(-45deg) translate(-15%, -15%); } .js .menu--primary .sub-menu .menu-item-has-children > .submenu-toggle[aria-expanded="true"] .submenu-toggle__icon { transform: rotate(135deg) translate(-15%, -15%); } } /* * Between 62rem and 78rem the six roots plus the wordmark and the flags are a * few pixels tight. The roots give up padding before anything wraps, which is * far less visible than a wrapped menu and keeps the one-row promise. */ @media (min-width: 62rem) and (max-width: 78rem) { .js .menu--primary > .menu-item > .menu-item__link { padding-inline: var(--em-space-2); font-size: var(--em-text-sm); } .js .menu--primary > .menu-item > .menu-item__link::after { right: var(--em-space-2); left: var(--em-space-2); } .js .menu--primary .menu-item-has-children > .menu-item__link { padding-right: var(--em-space-5); } } /* ========================================================================== 7 LANGUAGE SWITCHER — EUROMIG BUSINESS FLAGS. Two local SVG files in this theme — not emoji, which render as a different picture on every platform and as nothing at all on some, and not a third-party icon set, which would be an external request and a licence. Each flag is drawn at its own true ratio: the Union Flag is 1:2, the Russian tricolour 2:3. They share a height rather than a box, because forcing both into one box would mean cropping or distorting a national flag. ACCESSIBILITY. A flag is a country, not a language, and an image carries no accessible name. Every entry keeps the language's own native name as REAL TEXT in a visually-hidden span — real text rather than `aria-label`, because it survives a stylesheet that fails to load. The image is `alt=""` and `aria-hidden`, so the name is announced exactly once. ========================================================================== */ .language-switcher__list { display: flex; align-items: center; gap: var(--em-space-1); margin: 0; padding: 0; list-style: none; } .language-switcher__item { margin: 0; } .language-switcher__item + .language-switcher__item { margin-top: 0; } .language-switcher__label { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: var(--em-space-2); border: 1px solid transparent; border-radius: var(--em-radius); text-decoration: none; transition: border-color var(--em-duration) var(--em-easing), background-color var(--em-duration) var(--em-easing), opacity var(--em-duration) var(--em-easing); } .language-switcher__flag { display: block; width: auto; height: 0.9375rem; border-radius: 2px; /* A hairline, so a flag with a white band keeps its edge on white. */ box-shadow: 0 0 0 1px rgba(20, 22, 27, 0.16); } /* * An unselected language is legible but quiet, and comes fully forward on * hover or focus. Opacity alone would fail contrast if it carried text; it * carries only a flag, and the accessible name is unaffected by it. */ a.language-switcher__label { opacity: 0.55; } a.language-switcher__label:hover, a.language-switcher__label:focus-visible { background-color: var(--em-color-surface); opacity: 1; } .language-switcher__item.is-current .language-switcher__label { border-color: var(--em-color-brand); opacity: 1; } /* No translation exists. Shown, plainly not on offer, and not a link. */ .language-switcher__item.is-unavailable .language-switcher__label { cursor: not-allowed; opacity: 0.3; } .language-switcher__item.is-unavailable .language-switcher__flag { filter: grayscale(1); } /* ========================================================================== 8 SITE FOOTER — EUROMIG BUSINESS A LIGHT footer with a narrow navy bar under it, rather than the full navy sitemap the baseline used. Navigation is easier to read on a neutral ground, and the dark band is reserved for the one line that is genuinely closing matter: the name, the year and the language control. No contact block. The telephone numbers, addresses and bank details all live on the Contacts page, and a second copy in a template is a second thing to maintain. ========================================================================== */ .site-footer { flex-shrink: 0; margin-top: 0; border-top: 1px solid var(--em-color-border); background-color: var(--em-color-surface); color: var(--em-color-text); } .site-footer a { color: var(--em-color-text); text-decoration: none; } .site-footer a:hover, .site-footer a:focus-visible { color: var(--em-color-brand); text-decoration: underline; } .site-footer__inner { display: grid; gap: var(--em-space-6); padding-block: var(--em-section-sm) var(--em-space-6); } .site-footer__brand .site-branding { margin-bottom: var(--em-space-4); } /* * No white plate here, and none needed: the footer ground is light, so the * wordmark's navy half reads as it does in the header. */ .site-footer__brand .site-logo, .site-footer__brand .custom-logo { max-height: 2.75rem; } .site-footer__statement { max-width: 34ch; margin: 0 0 var(--em-space-4); color: var(--em-color-text-muted); font-size: var(--em-text-base); line-height: var(--em-leading-normal); } .site-footer__action { margin: 0; } .site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--em-space-5); } .site-footer__heading { margin: 0 0 var(--em-space-4); color: var(--em-color-brand); font-size: var(--em-text-sm); font-weight: var(--em-weight-semibold); letter-spacing: var(--em-tracking-wide); text-transform: uppercase; } /* * A HEADING THAT IS ALSO A LINK IS A CONTROL, and this one was 19 pixels tall * — under the 24px WCAG 2.5.8 asks of a target that is not inside a sentence. * The `inline` exception does not apply to a column heading. Padding rather * than a larger type size, so the footer keeps the height CASE 11.3 just took * out of it. */ .site-footer__heading a { display: inline-block; padding-block: var(--em-space-3); margin-block: calc(var(--em-space-3) * -1) 0; color: var(--em-color-brand); } .site-footer__links { margin: 0; padding: 0; list-style: none; font-size: var(--em-text-sm); line-height: var(--em-leading-snug); } /* * 8px between links rather than 12. Four groups of five links is 20 rows; the * change takes 80 pixels off the footer and the rows are still 15px text on a * 1.28 leading, which keeps each one comfortably above a 24px target. */ .site-footer__links li + li { margin-top: var(--em-space-2); } .site-footer__links a { color: var(--em-color-text-muted); } /* -- The closing bar ------------------------------------------------------ */ .site-footer__bar { border-top: 3px solid var(--em-color-accent); background-color: var(--em-color-brand); color: var(--em-color-on-brand); } .site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--em-space-3) var(--em-space-5); padding-block: var(--em-space-4); } .site-footer__bar a { color: var(--em-color-on-brand); } .site-footer__bar a:hover, .site-footer__bar a:focus-visible { color: var(--em-color-accent); } .site-footer__bar :focus-visible { outline-color: var(--em-color-accent); } .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--em-space-2) var(--em-space-4); margin: 0; color: var(--em-color-on-brand-muted); font-size: var(--em-text-sm); } .site-footer__name { color: var(--em-color-on-brand); font-weight: var(--em-weight-semibold); } /* The flags invert on the navy bar. */ .site-footer__bar .language-switcher__label { min-width: 2.5rem; min-height: 2.5rem; } .site-footer__bar a.language-switcher__label:hover, .site-footer__bar a.language-switcher__label:focus-visible { background-color: var(--em-color-on-brand-wash); } .site-footer__bar .language-switcher__item.is-current .language-switcher__label { border-color: var(--em-color-accent); } @media (min-width: 62rem) { .site-footer__inner { grid-template-columns: minmax(15rem, 20rem) 1fr; column-gap: var(--em-space-8); padding-block: var(--em-section-sm) var(--em-space-6); } } /* ========================================================================== 9 ENTRIES AND MIGRATED CLASSIC CONTENT Years of hand-written HTML live in `post_content`. None of it is rewritten at render time — these rules make it behave. ========================================================================== */ .entry + .entry, .entry + .post-navigation { margin-top: var(--em-space-7); } .entry-header { margin-bottom: var(--em-space-5); } .entry-meta { color: var(--em-color-text-muted); font-size: var(--em-text-sm); } .entry-meta > * + * { margin-left: var(--em-space-3); } .entry-image { display: block; margin-bottom: var(--em-space-5); } .entry-image img { border-radius: var(--em-radius); } .entry-content > :last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- READING RHYTHM. This is the half of the 66ch removal that is easy to forget. A wider column is harder to read at the same leading, because the eye has further to travel to find the start of the next line — so the leading goes up, the space between paragraphs goes up, and the headings get a stronger step, exactly as CASE 11.3 TASK 4 requires. None of it makes the text smaller: body copy stays at 18px. -------------------------------------------------------------------------- */ .entry-content { line-height: var(--em-leading-loose); } .entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote, .entry-content figure { margin-bottom: var(--em-space-5); } .entry-content li + li { margin-top: var(--em-space-2); } .entry-content ul, .entry-content ol { padding-left: var(--em-space-6); } /* * A clear step at each level, and more air above a heading than below it, so a * heading belongs to what follows rather than floating between two blocks. */ .entry-content h2 { margin-top: var(--em-space-8); margin-bottom: var(--em-space-4); font-size: var(--em-text-lg); letter-spacing: var(--em-tracking-tight); line-height: var(--em-leading-snug); } .entry-content h3 { margin-top: var(--em-space-7); margin-bottom: var(--em-space-3); font-size: var(--em-text-md); line-height: var(--em-leading-snug); } .entry-content h4, .entry-content h5, .entry-content h6 { margin-top: var(--em-space-6); margin-bottom: var(--em-space-3); } /* Classic alignment classes, still in the stored HTML. */ .alignleft { float: left; margin: 0 var(--em-space-5) var(--em-space-4) 0; } .alignright { float: right; margin: 0 0 var(--em-space-4) var(--em-space-5); } .aligncenter { display: block; margin-inline: auto; } .alignnone { margin-bottom: var(--em-space-4); } .entry-content::after { display: table; clear: both; content: ""; } /* Captions and galleries, in both the old and the html5 markup. */ .wp-caption { max-width: 100%; margin-bottom: var(--em-space-4); } .wp-caption img { border-radius: var(--em-radius); } .wp-caption-text, .wp-caption .wp-caption-text { margin-top: var(--em-space-2); color: var(--em-color-text-muted); font-size: var(--em-text-sm); text-align: center; } .gallery { display: flex; flex-wrap: wrap; gap: var(--em-space-3); margin-bottom: var(--em-space-5); } .gallery-item { flex: 1 1 8rem; margin: 0; text-align: center; } .gallery-columns-2 .gallery-item { flex-basis: calc(50% - var(--em-space-3)); } .gallery-columns-3 .gallery-item { flex-basis: calc(33.333% - var(--em-space-3)); } .gallery-columns-4 .gallery-item { flex-basis: calc(25% - var(--em-space-3)); } /* -------------------------------------------------------------------------- MIGRATED TABLES. THE ROOT CAUSE OF THE SCROLLBARS HUMAN REVIEW REPORTED, in full, because it was one rule doing two unintended things. The rule that used to stand here was: .entry-content table { display: block; max-width: 100%; overflow-x: auto } `display: block` stops a table being a table — it becomes a box with the rows laid out inside it — and `overflow-x: auto` makes that box scroll. Two consequences followed, and both were visible on `/contacts/`: 1. HORIZONTAL. The stored markup of page 192 opens with ``. Inside a `.entry-content` capped at 66ch — 687 pixels — a 956-pixel box must scroll. Removing the cap (section 4) removes this cause outright. 2. VERTICAL, and this is the one that was not obvious. CSS says that when one overflow axis is not `visible`, the other computes to `auto` too. So `overflow-x: auto` silently made `overflow-y: auto` as well, and the inline `height: 467px` then clipped a table whose real content is about 1,345 pixels tall. The measured result was 878 pixels of content behind an internal vertical scrollbar — bank details, opening hours and the e-mail address among them. THE FIX IS NOT `overflow: hidden`. That would hide the scrollbar and keep the clipping, which CASE 11.3's own status rule calls a BLOCKED outcome. The table is made a table again, told to use the width it now has, and released from the stored height. `!important` APPEARS TWICE BELOW AND ONLY TWICE. An inline `style` attribute outranks every author selector, so `width` and `height` on that one element cannot be reached any other way — not by specificity, not by order. The alternatives were rewriting stored `post_content`, which this case forbids, or a PHP filter that re-parses every page's HTML on every request. Two declarations, named, in the rule that owns tables, is the smaller cost. Nothing else in this section uses it. -------------------------------------------------------------------------- */ .entry-content table { display: table; width: 100% !important; /* beats style="width: 956px" on 5 legacy tables */ max-width: 100%; height: auto !important; /* beats style="height: 467px" — the vertical clip */ table-layout: auto; border-collapse: collapse; border-spacing: 0; float: none; /* legacy align="left" on 3 tables */ margin-bottom: var(--em-space-5); font-size: var(--em-text-sm); line-height: var(--em-leading-snug); overflow: visible; white-space: normal; } /* * `table-layout: auto` treats a `width` attribute as a hint, so the 1,090 * legacy `td width="…"` values still influence the proportions of a table * without being able to force one wider than its column. `overflow-wrap` * covers the long IBANs and SWIFT codes in the Contacts table, which are * single unbreakable tokens. */ .entry-content th, .entry-content td { max-width: 100%; padding: var(--em-space-3) var(--em-space-4); border: 1px solid var(--em-color-table-border); vertical-align: top; overflow-wrap: anywhere; word-break: normal; } .entry-content th { background-color: var(--em-color-surface); font-weight: var(--em-weight-semibold); text-align: left; } .entry-content caption { margin-bottom: var(--em-space-2); color: var(--em-color-text-muted); font-size: var(--em-text-sm); text-align: left; } /* * Legacy `` inside a cell. The attributes are * presentational hints, so ordinary declarations beat them; what matters is * that a 300-pixel photograph in a narrow column shrinks with the column * instead of forcing it open. */ .entry-content td img, .entry-content th img { max-width: 100%; height: auto; } /* * A table that genuinely cannot fit — 73 rows of four columns of Lithuanian * job titles, at 320 pixels — may still be handed a scrolling parent by the * stored markup. The wrapper keeps working for that case; nothing in the * theme creates one. */ .table-scroll { max-width: 100%; overflow-x: auto; } .table-scroll > table { width: 100%; } /* Old fixed-width iframes and embeds. */ .entry-content iframe, .entry-content embed, .entry-content object, .entry-content video { max-width: 100%; } .entry-content iframe[src*="youtube"], .entry-content iframe[src*="youtu.be"], .entry-content iframe[src*="vimeo"] { aspect-ratio: 16 / 9; width: 100%; height: auto; } /* Long unbroken URLs in old content must not push the page wide. */ .entry-content a { overflow-wrap: anywhere; } .no-results { padding: var(--em-space-6); border: 1px solid var(--em-color-border); border-radius: var(--em-radius); background-color: var(--em-color-surface); } .plugin-notice { padding: var(--em-space-3) var(--em-space-4); border-left: 4px solid var(--em-color-warning); background-color: var(--em-color-surface); color: var(--em-color-text); } /* ========================================================================== 10 COMPONENTS ========================================================================== */ /* -- The no-image treatment ---------------------------------------------- */ /* * A listing with no photograph. Not a grey rectangle and not a collapsed card: * the brand ground at the same ratio as a photograph, carrying a quiet * diagonal rule pattern in the accent colour. * * IT IS NOT THE BASELINE'S CONCENTRIC-RING MARK. That graphic belonged to the * design this candidate replaces, and reusing it here would blur the one thing * the comparison is for. The rules are two repeating gradients — no file, no * request, nothing to load — and they say nothing, which is why the element * that carries them is empty and `aria-hidden`. */ .card__mark { position: absolute; inset: 0; overflow: hidden; background-color: var(--em-color-brand); background-image: repeating-linear-gradient(135deg, rgba(255, 190, 0, 0.16) 0 1px, transparent 1px 14px), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 28px); pointer-events: none; } /* -- Buttons ------------------------------------------------------------- */ /* * Sized as controls, not as links with a background. 2.875rem of height at * every breakpoint clears the 44px touch target with room to spare, and the * primary and secondary weights are far enough apart that the secondary reads * as a choice rather than as something switched off. */ /* * Larger than the baseline's, because the reference's are: a call to action on * a consultancy homepage is a component, not a styled link. */ .button, button.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--em-space-2); min-height: 3rem; padding: var(--em-space-3) var(--em-space-6); border: 2px solid transparent; border-radius: var(--em-radius); font-family: inherit; font-size: var(--em-text-button); font-weight: var(--em-weight-semibold); line-height: var(--em-leading-snug); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--em-duration) var(--em-easing), border-color var(--em-duration) var(--em-easing), color var(--em-duration) var(--em-easing); } /* The hero's pair, sized to carry the composition beneath a 69px headline. */ .button--large { min-height: 3.5rem; padding-inline: var(--em-space-7); font-size: var(--em-text-base); } .button--primary { border-color: var(--em-color-brand); background-color: var(--em-color-brand); color: var(--em-color-on-brand); } .button--primary:hover, .button--primary:focus-visible { border-color: var(--em-color-brand-dark); background-color: var(--em-color-brand-dark); color: var(--em-color-on-brand); } .button--secondary { border-color: var(--em-color-brand); background-color: transparent; color: var(--em-color-brand); } .button--secondary:hover, .button--secondary:focus-visible { background-color: var(--em-color-brand-tint); color: var(--em-color-brand-dark); } .button--accent { border-color: var(--em-color-accent); background-color: var(--em-color-accent); color: var(--em-color-accent-ink); } .button--accent:hover, .button--accent:focus-visible { border-color: var(--em-color-accent-hover); background-color: var(--em-color-accent-hover); color: var(--em-color-accent-ink); } /* * A text action. It keeps the button's vertical size so that a row mixing the * two does not look ragged, and it carries an arrow rather than an underline — * the arrow marks it as a route onward instead of a footnote. */ .button--text { min-height: 2.5rem; padding-inline: 0; border-color: transparent; background: none; color: var(--em-color-brand); font-size: var(--em-text-base); text-decoration: none; } .button--text::after { content: "\2192"; font-weight: var(--em-weight-regular); transition: transform var(--em-duration) var(--em-easing); } .button--text:hover, .button--text:focus-visible { color: var(--em-color-brand-dark); text-decoration: underline; } .button--text:hover::after { transform: translateX(3px); } .button[disabled], .button.is-disabled, button[disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* -- Section headers ----------------------------------------------------- */ /* * One heading device for the whole site: a short gold rule, an optional * eyebrow, the heading, and an optional lead held to a reading measure. Used * by every homepage section, so their headings cannot drift apart. */ /* * No rule across the top. The baseline used a gold hairline above every * heading; at this scale and this section rhythm the space does the separating, * and an eyebrow above the heading gives the section its label. */ .section-header { margin-bottom: var(--em-section-sm); } .section-header--centred { max-width: 46rem; margin-inline: auto; text-align: center; } .section-header--centred .section-header__lead { margin-inline: auto; } .section-header__eyebrow { margin: 0 0 var(--em-space-3); color: var(--em-color-text-muted); font-size: var(--em-text-xs); font-weight: var(--em-weight-semibold); letter-spacing: var(--em-tracking-wide); text-transform: uppercase; } .section-header--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--em-space-4) var(--em-space-6); } /* A heading and one sentence, not body copy — see `--em-measure-lede`. */ .section-header--split > :first-child { max-width: var(--em-measure-lede); } .section-header__title { max-width: 20ch; margin: 0; font-size: var(--em-text-xl); font-weight: var(--em-weight-bold); letter-spacing: var(--em-tracking-tight); line-height: var(--em-leading-tight); } .section-header--centred .section-header__title { max-width: none; } .section-header__lead { max-width: 56ch; margin: var(--em-space-3) 0 0; color: var(--em-color-text-muted); font-size: var(--em-text-base); line-height: var(--em-leading-normal); } .section-header__action { flex: 0 0 auto; } /* -- Form primitives ----------------------------------------------------- */ /* * The look of a form, ready for CASE 13 to attach a real one to. There is no * form here that submits anywhere, and there is no handler in the theme. */ .form-field { margin-bottom: var(--em-space-4); } label, .form-label { display: block; margin-bottom: var(--em-space-2); font-size: var(--em-text-sm); font-weight: var(--em-weight-medium); } input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], select, textarea { width: 100%; max-width: 100%; min-height: 2.875rem; padding: var(--em-space-3); border: 1px solid var(--em-color-border-strong); border-radius: var(--em-radius); background-color: var(--em-color-bg); color: var(--em-color-text); font-family: inherit; font-size: var(--em-text-base); line-height: var(--em-leading-snug); } textarea { min-height: 8rem; resize: vertical; } input:hover, select:hover, textarea:hover { border-color: var(--em-color-brand); } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--em-color-danger); } .form-help { margin-top: var(--em-space-1); color: var(--em-color-text-muted); font-size: var(--em-text-sm); } .form-error { margin-top: var(--em-space-1); color: var(--em-color-danger); font-size: var(--em-text-sm); font-weight: var(--em-weight-medium); } .form-choice { display: flex; align-items: flex-start; gap: var(--em-space-2); } .form-choice input[type="checkbox"], .form-choice input[type="radio"] { width: auto; min-height: 0; margin-top: 0.3em; accent-color: var(--em-color-brand); } .form-choice label { margin-bottom: 0; font-weight: var(--em-weight-regular); } /* -- Search form --------------------------------------------------------- */ .search-form { max-width: 34rem; margin-bottom: var(--em-space-5); } .search-form__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .search-form__controls { display: flex; gap: var(--em-space-2); } .search-form__input { flex: 1 1 auto; min-width: 0; } .search-form__submit { flex: 0 0 auto; } /* -- Cards --------------------------------------------------------------- */ /* * ONE information hierarchy, in this order and no other: picture, status, * name, price, sector. Human review found the CASE 11 card competing with * itself — four text sizes inside 300 pixels, uppercase metadata as small as * the badge, and a price that landed at a different height in every column. * * The fixes are structural. The media has a fixed ratio so a row of cards is a * row rather than a staircase; the status badge moved ONTO the picture, which * removed a whole text row from the body; the title is clamped to two lines; * and the price is pinned to the bottom of the body with the sector beneath it * on a rule, so prices align across a row whatever the titles did. */ .card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--em-color-border); border-radius: var(--em-radius-lg); background-color: var(--em-color-bg); transition: border-color var(--em-duration) var(--em-easing), box-shadow var(--em-duration) var(--em-easing), transform var(--em-duration) var(--em-easing); } .card:hover, .card:focus-within { border-color: transparent; box-shadow: var(--em-shadow); transform: translateY(-3px); } .card__media { position: relative; overflow: hidden; background-color: var(--em-color-surface-strong); } /* * 3:2 rather than 3:2-or-whatever-the-file-is. The source images are a genuine * mixture — 275x183 photographs beside 1654x1654 renders — and a shared ratio * with `object-fit: cover` is the only thing that makes six of them read as one * component. Nothing is stretched: cover crops, it never distorts. */ .card__media img, .card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; } .card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--em-space-3); padding: var(--em-space-6); } .card__title { margin: 0; font-size: var(--em-text-lg); font-weight: var(--em-weight-semibold); line-height: var(--em-leading-snug); letter-spacing: -0.008em; } .card__title a { text-decoration: none; } .card__title a:hover, .card__title a:focus-visible { text-decoration: underline; } .card__meta { display: flex; flex-wrap: wrap; gap: var(--em-space-2) var(--em-space-3); margin: 0; color: var(--em-color-text-muted); font-size: var(--em-text-sm); } .card__meta > * + * { margin-left: 0; } .card__excerpt { color: var(--em-color-text); font-size: var(--em-text-sm); line-height: var(--em-leading-normal); } .card__excerpt p:last-child { margin-bottom: 0; } .card__price { margin: auto 0 0; } .card__actions { display: flex; flex-wrap: wrap; gap: var(--em-space-2); margin-top: auto; padding-top: var(--em-space-2); } /* * A card with no picture. Not a grey rectangle and not a collapsed card: the * brand mark on the brand ground, at the same ratio as a photograph, so a row * containing one still reads as a row. */ .card__media--empty { position: relative; aspect-ratio: 3 / 2; background-color: var(--em-color-brand); } /* -- Badges -------------------------------------------------------------- */ /* * The status TEXT always comes from the domain layer. These rules colour a * token the plugin emitted; they encode no business meaning of their own. */ .badge { display: inline-block; padding: 0.3em 0.75em; border-radius: var(--em-radius-sm); background-color: var(--em-color-surface-strong); color: var(--em-color-text); font-size: var(--em-text-xs); font-weight: var(--em-weight-semibold); letter-spacing: 0.04em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; } .badge.is-available, .badge.is-re-status-0 { background-color: var(--em-color-success); color: var(--em-color-on-status); } .badge.is-reserved, .badge.is-re-status-2 { background-color: var(--em-color-warning); color: var(--em-color-on-status); } .badge.is-sold, .badge.is-re-status-1 { background-color: var(--em-color-danger); color: var(--em-color-on-status); } .badge.is-coming-soon, .badge.is-re-status-3 { background-color: var(--em-color-accent); color: var(--em-color-accent-ink); } /* -- Prices -------------------------------------------------------------- */ .price { color: var(--em-color-brand); font-size: var(--em-text-lg); font-weight: var(--em-weight-bold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .price--unspecified { color: var(--em-color-text-muted); font-size: var(--em-text-base); font-weight: var(--em-weight-medium); } /* -- Facts tables -------------------------------------------------------- */ .facts-table th { width: 40%; color: var(--em-color-text-muted); font-weight: var(--em-weight-medium); } /* -- Pagination and post navigation -------------------------------------- */ .pagination { margin-top: var(--em-space-8); } /* * TWO MARKUP SHAPES, ONE LOOK. Core's `the_posts_pagination()` emits * `.nav-links` and `.page-numbers`; the marketplace builds its own control, * because it paginates the plugin's result set rather than the main query and * has to work on a page route as well as an archive route. Rather than write a * second visual language for it, its class names join these rules. */ .pagination .nav-links, .pagination__list { display: flex; flex-wrap: wrap; gap: var(--em-space-2); align-items: center; margin: 0; padding: 0; list-style: none; } .pagination__item { margin: 0; } .pagination .page-numbers, .pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding-inline: var(--em-space-3); border: 1px solid var(--em-color-border); border-radius: var(--em-radius); font-size: var(--em-text-sm); font-weight: var(--em-weight-medium); text-decoration: none; } .pagination a.page-numbers:hover, .pagination a.page-numbers:focus-visible, a.pagination__link:hover, a.pagination__link:focus-visible { border-color: var(--em-color-brand); background-color: var(--em-color-brand-tint); } .pagination .page-numbers.current, .pagination__link.is-current { border-color: var(--em-color-brand); background-color: var(--em-color-brand); color: var(--em-color-on-brand); font-weight: var(--em-weight-semibold); } .pagination__item--gap { padding-inline: var(--em-space-2); color: var(--em-color-text-muted); } .pagination .page-numbers.dots { border-color: transparent; } .post-navigation { margin-top: var(--em-space-8); padding-top: var(--em-space-6); border-top: 1px solid var(--em-color-border); } .post-navigation .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--em-space-5); } .post-navigation a { text-decoration: none; } .post-nav__direction { display: block; margin-bottom: var(--em-space-1); color: var(--em-color-text-muted); font-size: var(--em-text-xs); text-transform: uppercase; letter-spacing: var(--em-tracking-wide); } .post-nav__title { font-size: var(--em-text-base); font-weight: var(--em-weight-medium); text-decoration: underline; } .page-links { margin-top: var(--em-space-5); font-weight: var(--em-weight-medium); } /* ========================================================================== 11 POST-TYPE SURFACES ========================================================================== */ .post-list, .listing-grid, .consultant-grid { display: grid; gap: var(--em-space-6); } .post-list { grid-template-columns: 1fr; } .listing-grid, .consultant-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); } /* * The marketplace renders its grid as a LIST, because twelve businesses are a * list of twelve businesses and a screen reader should be told how many there * are before reading the first. The list semantics cost nothing visually. */ .listing-grid { margin: 0; padding: 0; list-style: none; } .listing-grid__item { display: flex; margin: 0; } .listing-grid__item > .card { width: 100%; } .post-list--search { gap: var(--em-space-6); } .entry--search .entry-title { font-size: var(--em-text-lg); } .entry-meta__type { display: inline-block; padding: 0.2em 0.6em; border-radius: var(--em-radius-sm); background-color: var(--em-color-surface-strong); font-size: var(--em-text-xs); text-transform: uppercase; letter-spacing: 0.04em; } /* -- The listing card ---------------------------------------------------- */ /* * The badge sits on the picture. That is one fewer row of text in the body, * and it puts the single most decisive fact — whether this business can still * be bought — where the eye already is. */ .sales-card__status { position: absolute; top: var(--em-space-3); left: var(--em-space-3); z-index: 1; margin: 0; } .sales-card__status .badge { box-shadow: 0 1px 3px rgba(22, 24, 29, 0.35); } /* Three lines, then an ellipsis. Titles here run from 9 to 96 characters. */ .sales-card .card__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; font-size: var(--em-text-md); } .sales-card .card__excerpt { display: -webkit-box; overflow: hidden; color: var(--em-color-text-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* * The excerpt takes the slack, so the price lands on the same line across a * row whatever the title length or an extra note did to one card. */ .sales-card__body .card__excerpt { flex: 1 1 auto; } .sales-card .card__price { padding-top: var(--em-space-1); } /* * Sector and country, on a rule, below the price. Small, but no longer the * same size as the badge it used to sit beside — it is the least important * line on the card and now looks like it. */ .sales-card__terms { gap: var(--em-space-1) var(--em-space-3); margin-top: var(--em-space-3); padding-top: var(--em-space-3); border-top: 1px solid var(--em-color-border); color: var(--em-color-text-muted); font-size: var(--em-text-xs); letter-spacing: 0.03em; text-transform: uppercase; } /* Only between the two, never in front of a country that stands alone. */ .sales-card__activity + .sales-card__country::before { margin-right: var(--em-space-3); color: var(--em-color-border-strong); content: "\2022"; } /* * `is_featured` no longer draws anything. It was a gold border with no label, * which told a visitor nothing and read in a row of six as a rendering fault. * The flag still does its real job — it floats a listing to the front of the * homepage teaser — which is ordering, not decoration. */ .sales-meta, .realestate-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--em-space-3); } .sales-meta > * + *, .realestate-meta > * + * { margin-left: 0; } /* -- Consultants --------------------------------------------------------- */ .consultant-card { flex-direction: row; align-items: flex-start; gap: var(--em-space-4); padding: var(--em-space-5); } .consultant-card .card__body { padding: 0; } .consultant-card__media { flex: 0 0 6rem; border-radius: var(--em-radius); } .consultant-card .consultant-card__photo { aspect-ratio: 1 / 1; object-fit: cover; } .consultant-card__contact { margin: 0; padding: 0; list-style: none; font-size: var(--em-text-sm); } .consultant-grid .consultant-card { flex-direction: column; } .consultant-grid .consultant-card__media { flex-basis: auto; width: 100%; } /* ========================================================================== 12 HOMEPAGE — EUROMIG BUSINESS Large sections, generous rhythm, and one tinted band. The reference the client supplied works because its sections are big and its components are big; the composition below follows that, using only content this site actually publishes. ========================================================================== */ .home-section { padding-block: var(--em-section-md); } .home-section--tinted { background-color: var(--em-color-surface); } /* -------------------------------------------------------------------------- Hero — statement left, capability panel right. The right column is a designed CONTENT block rather than a photograph, because there is no photograph this site can honestly put there: all 27 landscape images wide enough belong to a named listing, consultant or article, and downloading stock is prohibited. -------------------------------------------------------------------------- */ /* * THE HERO GROUND. Human review: "the homepage currently feels too white", * and the hero was the largest white surface on it — 720 pixels of #ffffff * with a navy panel floating in the middle of it. * * What is here is three layers of CSS and nothing else. No image is requested, * no file is added to the theme, and the whole treatment costs zero bytes of * transfer beyond the rule itself: * * 1. a page-wide wash from #f4f6fb at the top to #ffffff at the bottom, so * the hero has a ground and the section under it still starts on white; * 2. a wide, very soft navy glow behind the top right, which is where the * capability panel sits — it gives the panel something to sit ON; * 3. a small gold wash at the bottom left, under the actions, at 10 %. * * The decorative layer in `::before` is a set of PARALLEL DIAGONAL RULES at * 116°, one pixel wide, 68 pixels apart, in navy at 5.5 % — measured at * roughly 1.04:1 against the wash, which is at the edge of visible and is the * point. Routes across a map, not a target: nothing here is concentric, * nothing radiates from a centre, and nothing marks a place. The mask fades * the rules out before they reach the headline, so they never cross the H1. * * The whole layer is `pointer-events: none` and sits at `z-index: -1` inside * an isolated stacking context, so it cannot intercept a click and cannot * escape the section. */ .home-hero { position: relative; z-index: 0; isolation: isolate; overflow: hidden; padding-block: var(--em-section-md); background-image: radial-gradient(70rem 34rem at 78% -14%, rgba(0, 28, 114, 0.085) 0%, rgba(0, 28, 114, 0) 62%), radial-gradient(38rem 24rem at 2% 112%, rgba(255, 190, 0, 0.10) 0%, rgba(255, 190, 0, 0) 60%), linear-gradient(178deg, #f4f6fb 0%, #f7f8fb 48%, #ffffff 100%); } .home-hero::before { position: absolute; z-index: -1; inset: 0; background-image: repeating-linear-gradient( 116deg, rgba(0, 28, 114, 0.055) 0 1px, rgba(0, 28, 114, 0) 1px 68px ); -webkit-mask-image: linear-gradient(102deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(102deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 0) 100%); content: ""; pointer-events: none; } .home-hero__inner { display: grid; gap: var(--em-space-7); align-items: center; } .home-hero__eyebrow { display: flex; align-items: center; gap: var(--em-space-3); margin: 0 0 var(--em-space-4); color: var(--em-color-brand); font-size: var(--em-text-xs); font-weight: var(--em-weight-semibold); letter-spacing: var(--em-tracking-wide); text-transform: uppercase; } .home-hero__eyebrow::before { flex: 0 0 auto; width: 2.25rem; height: 3px; background-color: var(--em-color-accent); content: ""; } /* * The H1 is still the largest thing on the site and still the widest step in * the scale. It is 62px at 1440 rather than 69, on a 1.02 leading rather than * 1.06 — about 40 pixels off a three-line headline, taken from the space * between the lines rather than from the words. The 15ch cap is what keeps it * to three lines; it is a headline, not body copy. */ .home-hero__title { max-width: 15ch; margin: 0 0 var(--em-space-4); color: var(--em-color-brand); font-size: clamp(2.375rem, 1.55rem + 3.6vw, 3.875rem); font-weight: var(--em-weight-bold); letter-spacing: var(--em-tracking-tight); line-height: 1.02; } .home-hero__lead { max-width: 52ch; margin: 0 0 var(--em-space-5); color: var(--em-color-text-muted); font-size: var(--em-text-lead); line-height: var(--em-leading-normal); } .home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--em-space-3); } /* -- The capability panel -------------------------------------------------- */ .home-hero__panel { position: relative; overflow: hidden; padding: clamp(1.25rem, 0.95rem + 1.2vw, 1.875rem); border-radius: var(--em-radius-xl); background-color: var(--em-color-brand); color: var(--em-color-on-brand); box-shadow: var(--em-shadow-lg); } /* * A single soft gold wash in the corner. Not a motif, not a mark, and * deliberately not the concentric-ring graphic this design replaces — just * enough light to stop a large navy rectangle reading as flat. */ .home-hero__panel::before { position: absolute; top: -30%; right: -20%; width: 26rem; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 190, 0, 0.22) 0%, rgba(255, 190, 0, 0) 62%); content: ""; pointer-events: none; } .capabilities { position: relative; margin: 0; padding: 0; list-style: none; } /* * 12px above and below each row rather than 24. Four rows, so the panel loses * 96 pixels; the rows are still 46px tall, which is above the 44px this * project holds every control to, and neither the label nor the note gets * smaller. */ .capabilities__item { display: flex; gap: var(--em-space-4); margin: 0; padding-block: var(--em-space-3); } .capabilities__item + .capabilities__item { border-top: 1px solid var(--em-color-on-brand-line); } .capabilities__item:first-child { padding-top: 0; } .capabilities__index { flex: 0 0 auto; color: var(--em-color-accent); font-size: var(--em-text-sm); font-weight: var(--em-weight-semibold); font-variant-numeric: tabular-nums; line-height: 1.6; } .capabilities__text { display: block; min-width: 0; } .capabilities__label { display: block; color: var(--em-color-on-brand); font-size: var(--em-text-md); font-weight: var(--em-weight-semibold); line-height: var(--em-leading-snug); } .capabilities__note { display: block; color: var(--em-color-on-brand-muted); font-size: var(--em-text-sm); line-height: var(--em-leading-snug); } .home-hero__stat { position: relative; display: flex; align-items: baseline; gap: var(--em-space-3); margin-top: var(--em-space-4); padding-top: var(--em-space-4); border-top: 1px solid var(--em-color-on-brand-line); color: var(--em-color-on-brand); text-decoration: none; } .home-hero__stat::after { color: var(--em-color-accent); content: "\2192"; transition: transform var(--em-duration) var(--em-easing); } .home-hero__stat:hover::after { transform: translateX(4px); } .home-hero__stat-figure { color: var(--em-color-accent); font-size: var(--em-text-lg); font-weight: var(--em-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; } .home-hero__stat-label { max-width: 20ch; color: var(--em-color-on-brand-muted); font-size: var(--em-text-sm); line-height: var(--em-leading-snug); } .home-hero :focus-visible, .home-hero__panel :focus-visible { outline-color: var(--em-color-accent); } /* -- The Home page's own body, when it has one --------------------------- */ .home-intro { padding-block: var(--em-section-md); } /* * NO `max-width` HERE EITHER. This element carries the class `entry-content`, * so a 46rem cap on it would have been the 66ch rule under another name — the * exact thing CASE 11.3 removed. It is empty today (both Home pages are * routing anchors with no body), and the moment an editor writes one it gets * the same full column every other page's content gets. */ .home-intro__body { font-size: var(--em-text-md); line-height: var(--em-leading-loose); } /* -------------------------------------------------------------------------- Services — three substantial modules. Raised surfaces with real padding, not three lists under a heading. The gold rule at the top fills across on hover, which is the one piece of motion on the page and is decoration rather than information. -------------------------------------------------------------------------- */ .service-grid { display: grid; grid-template-columns: 1fr; gap: var(--em-space-6); margin: 0; padding: 0; list-style: none; } .service { position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--em-color-border); border-radius: var(--em-radius-lg); background-color: var(--em-color-bg); transition: border-color var(--em-duration) var(--em-easing), box-shadow var(--em-duration) var(--em-easing), transform var(--em-duration) var(--em-easing); } .service::before { position: absolute; top: 0; left: 0; width: 3.5rem; height: 4px; background-color: var(--em-color-accent); content: ""; transition: width var(--em-duration) var(--em-easing); } .service:hover, .service:focus-within { border-color: transparent; box-shadow: var(--em-shadow); transform: translateY(-3px); } .service:hover::before, .service:focus-within::before { width: 100%; } /* * `--em-color-border-strong` USED TO COLOUR THIS, and it is a border colour: * #c3cad6 is 1.65:1 on white, which is correct for a hairline and not for a * numeral somebody might try to read. It is decorative — `aria-hidden` in the * template, and the order it states is already the order of the cards — but * "decorative" is not a licence for text nobody can see. * * #8b96a8 is 3.24:1, past the 3:1 that WCAG asks of large text, and this is * 19px bold. Still recessive; now legible. */ .service__index { display: block; margin-bottom: var(--em-space-2); color: #8b96a8; font-size: var(--em-text-md); font-weight: var(--em-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; } .service__title { margin: 0 0 var(--em-space-4); font-size: var(--em-text-lg); letter-spacing: var(--em-tracking-tight); line-height: var(--em-leading-snug); } .service__title a { text-decoration: none; } .service__title a:hover, .service__title a:focus-visible { text-decoration: underline; } .service__links { flex: 1 1 auto; margin: 0 0 var(--em-space-4); padding: 0; list-style: none; font-size: var(--em-text-sm); } .service__links li { margin: 0; } .service__links li + li { margin-top: 0; } /* * 9px above and below rather than 12. Five rows a card, three cards, so 90 * pixels off the section — and a row is still 15px text on a 1.28 leading * inside a 37px box, which stays a comfortable pointer target. It is not * reduced further: CASE 11.3 asks for compaction and says in the same breath * not to make the links cramped. */ .service__links a { display: block; padding-block: 0.5625rem; border-bottom: 1px solid var(--em-color-border); color: var(--em-color-text-muted); line-height: var(--em-leading-snug); text-decoration: none; } .service__links a:hover, .service__links a:focus-visible { color: var(--em-color-brand); } .service__more { margin: 0; } /* -------------------------------------------------------------------------- THE MARKETPLACE — a compact carousel. WHAT THIS REPLACES. CASE 11.2 gave the section one feature listing at 16:10 with two ordinary cards stacked beside it: three businesses in about 760 pixels of page. Human review asked for "more businesses in less vertical space" and named the mechanism — a Swiper carousel with roughly six listings and several cards visible at once. So it is now six listings in one row, four of them on screen at 1440, in a single card height. The listings and their order are unchanged: the same `euromig_sales_query()` call with the same "available" filter, the same plugin-side ordering, the same photograph-first presentation ordering the theme applied before. Only the number requested moved, from three to six. THE SLIDER IS AN ENHANCEMENT, NEVER A GATE. Every rule that depends on Swiper is written against Swiper's own class names, and the `html:not(.js)` block at the end of this component turns the track back into an ordinary responsive grid of all six cards. Nothing is hidden by default and nothing needs script to be reachable. -------------------------------------------------------------------------- */ .sales-carousel { position: relative; } /* * Swiper's core stylesheet already gives `.swiper` `overflow: hidden` and its * wrapper `display: flex`. This element carries BOTH class names — the * vendor's, so the library recognises it, and the theme's, so the theme has * something to address that is not the vendor's. * * The negative margin and matching padding let a card's hover shadow spill * past the track edge without being clipped, and pull the first card back to * the container's own left edge so the section still lines up with the * heading above it. */ .sales-carousel__viewport { margin-inline: calc(var(--em-space-2) * -1); padding-inline: var(--em-space-2); padding-block: var(--em-space-2); } .sales-carousel__track { margin: 0; padding: 0; list-style: none; } /* `height: auto` on the slide, `100%` on the card: a row of equal cards. */ .sales-carousel__slide { height: auto; } .sales-carousel__slide > .card { height: 100%; } /* -- The controls -------------------------------------------------------- */ /* * Real `