/* ============================================================================ Maeum — css/maeum.css UNLAYERED on purpose: every Web Awesome 3.14.0 rule sits in @layer (wa-native … wa-theme-overrides), so this file, loaded last, wins regardless of specificity. Never add the important flag here. Raw px only for hairlines. 1 colour tokens verbatim from docs/review/proposed-color-tokens.css 2 fluid root + type verbatim from docs/review/proposed-type-tokens.css (sections 2 and 3) 3 project tokens report §4.4 / §5.2 additions + the hero/decision tokens 4 band scopes .band-dark .band-about .band-about--light .band-contact (report §5.2) 5 base behaviour scroll padding, lists, media, address 6 recipes .band .band__inner .measure .lead .caps-heading .cta-caps .rule* .skip-link 7 header + nav .site-header .lockup .wordmark … .nav-toggle .site-nav (report §7.3) 8 hero .hero .hero--wash | .hero--scrim | .hero--panel, .hero__bg .hero__icon .hero__panel 9 sections frames, .portrait, .contact-grid, .contact__daisies 10 footer .site-footer .domains 11 placeholders wa-icon / wa-copy-button :not(:defined) 12 motion reduced-motion-gated smooth scroll + 150 ms colour transitions ========================================================================== */ /* ---------- 1. Colour tokens (verbatim) ---------- */ /* Maeum colour tokens for Web Awesome 3.14.0 (light scheme only; the site has no dark mode). Load AFTER webawesome.css / themes/default.css. Keep this file UNLAYERED so it beats the @layer wa-color-palette / wa-color-variant / wa-theme declarations regardless of specificity. Selector list is the one documented at https://webawesome.com/docs/customizing/ for light mode. */ :where(:root), .wa-light, .wa-dark .wa-invert { /* -- brand = sage (OKLCH hue 115.5). Consumers per styles/themes/default.css + button.styles.ts -- */ --wa-color-brand-95: #eff2e3; /* oklch(95.48% 0.0201 116.0) - brand-fill-quiet: hover/active bg of appearance=outlined|plain brand buttons; quiet callouts/badges */ --wa-color-brand-90: #e4e9cf; /* oklch(92.33% 0.0349 115.9) - brand-fill-normal (appearance=filled|filled-outlined bg) + brand-border-quiet */ --wa-color-brand-80: #c9cfa9; /* oklch(83.99% 0.0515 114.8) - brand-border-normal (appearance=filled-outlined border) */ --wa-color-brand-70: #aeb58a; /* oklch(75.64% 0.0594 115.4) - unused by the light theme (free for decorative sage: hero gradient, dividers on cream) */ --wa-color-brand-60: #878e61; /* oklch(62.93% 0.0640 115.5) - brand-border-loud (appearance=outlined border) + --wa-color-focus (every focus ring) */ --wa-color-brand-50: #676d40; /* oklch(51.81% 0.0656 114.9) - brand-fill-loud (appearance=accent bg, --wa-form-control-activated-color, wa-spinner --indicator-color) + core --wa-color-brand */ --wa-color-brand-40: #535930; /* oklch(44.80% 0.0615 115.8) - brand-on-quiet (outlined|plain label) + --wa-color-text-link + About band background */ --wa-color-brand-30: #414621; /* oklch(37.99% 0.0568 115.5) - brand-on-normal (filled|filled-outlined label) */ --wa-color-brand-20: #33371b; /* oklch(32.51% 0.0453 115.6) - unused by the light theme (dark-mode fill-normal; free for a deep sage accent) */ --wa-color-brand-10: #1e210d; /* oklch(23.87% 0.0348 116.1) - unused by the light theme (dark-mode fill-quiet) */ --wa-color-brand-05: #131407; /* oklch(18.58% 0.0247 112.3) - unused by the light theme; used here as the hero scrim colour */ --wa-color-brand: var(--wa-color-brand-50); /* core colour; variants/brand.css aliases it to the hue core, there is no sage hue so alias the tint directly */ --wa-color-brand-on: white; /* palettes/base.css rule: key tint 50 < 60 -> white; no --wa-color-brand-key exists, so state it literally */ /* -- neutral = warm grey (hue drifts 101 deg at 95 -> 78 deg at 05, i.e. from the cream to the ink) -- */ --wa-color-neutral-95: #f4f3e9; /* oklch(96.22% 0.0133 102.0) - surface-lowered + neutral-fill-quiet (outlined/plain neutral button hover) */ --wa-color-neutral-90: #e7e6dd; /* oklch(92.32% 0.0121 101.5) - surface-border + neutral-fill-normal + neutral-border-quiet (card/divider lines, filled neutral buttons) */ --wa-color-neutral-80: #cccbc3; /* oklch(84.06% 0.0110 100.9) - neutral-border-normal */ --wa-color-neutral-70: #b2b0a9; /* oklch(75.68% 0.0101 93.6) - unused by the light theme */ --wa-color-neutral-60: #918f89; /* oklch(64.99% 0.0091 91.5) - neutral-border-loud = --wa-form-control-border-color (input/select borders, outlined neutral buttons) */ --wa-color-neutral-50: #7b7872; /* oklch(57.35% 0.0098 84.6) - unused by the light theme (--wa-form-control-placeholder-color uses gray-50, see note) */ --wa-color-neutral-40: #5e5c56; /* oklch(47.47% 0.0098 91.6) - --wa-color-text-quiet + neutral-on-quiet (captions, hints, outlined/plain neutral labels) + core --wa-color-neutral */ --wa-color-neutral-30: #4a4742; /* oklch(39.92% 0.0092 80.7) - neutral-on-normal (filled neutral button labels) */ --wa-color-neutral-20: #363430; /* oklch(32.57% 0.0075 84.6) - neutral-fill-loud (appearance=accent neutral buttons bg) */ --wa-color-neutral-10: #211f1b; /* oklch(24.00% 0.0080 84.6) - --wa-color-text-normal (all body text, headings, form labels/values, tooltip bg) */ --wa-color-neutral-05: #151310; /* oklch(18.79% 0.0068 78.1) - overlay-modal + shadow colour source */ --wa-color-neutral: var(--wa-color-neutral-40); /* core colour (gray core is tint 40 in the default palette) */ --wa-color-neutral-on: white; /* key 40 < 60 -> white */ /* -- surfaces: the theme hard-codes white for default/raised, so these MUST be overridden directly -- */ --wa-color-surface-default: #f9f8f0; /* #f9f8f0 oklch(97.77% 0.0106 100.8) - page background (cream from the mock); also --wa-color-mix-active source and --wa-form-control-background-color */ --wa-color-surface-raised: #fcfbf6; /* #fcfbf6 oklch(98.75% 0.0067 97.3) - dialogs, dropdown menus, popovers, cards with appearance=raised (slightly lighter than the page) */ --wa-color-surface-lowered: var(--wa-color-neutral-95); /* #f4f3e9 oklch(96.22% 0.0133 102.0) - wells, code blocks, inset panels (= neutral-95, re-stated because the theme defines it as var(--wa-color-neutral-95) anyway) */ --wa-color-surface-border: var(--wa-color-neutral-90); /* #e7e6dd oklch(92.32% 0.0121 101.5) - surface dividers / card borders (= neutral-90, re-stated for clarity) */ } /* ---------- 2. Fluid root + type tokens (from docs/review/proposed-type-tokens.css; the two family stacks add the '… Fallback' faces declared in css/fonts.css, everything else verbatim; @font-face lives in css/fonts.css) ---------- */ /* 2. Fluid base. 1rem = 17 px @ 360 → 18 px @ 1440 (Utopia maths, see research notes). `rem` on is the user's default size, so text-size preferences and zoom still scale it. */ html { font-size: clamp(1.125rem, 1.0625rem + 0.2778vw, 1.25rem); /* 18 px @360 → 20 px @1440: the mock's 20 px body (feedback 2026-10-12) */ } /* 3. Token overrides, scoped exactly like Web Awesome's own theme so they apply in wa-invert bands. */ :where(:root), .wa-light, .wa-dark, .wa-invert { /* families + roles. Deliberate departure from proposed-type-tokens.css: the metric-matched '… Fallback' faces (css/fonts.css section 2) must sit right after the web font, otherwise they are never matched and the swap moves the layout (contract §4). */ --wa-font-family-heading: 'EB Garamond', 'EB Garamond Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --wa-font-family-longform: var(--wa-font-family-heading); --wa-font-family-body: 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --wa-font-weight-heading: var(--wa-font-weight-normal); /* 400: EB Garamond is used Regular only */ --wa-font-weight-longform: var(--wa-font-weight-normal); /* --wa-font-weight-action stays at WA's default (semibold = 500): button labels */ /* size ramp — --wa-font-size-m stays WA's calc(1rem * var(--wa-font-size-scale)) = 17–18 px. s/xs/2xs/3xs keep deriving from it (15/13/12/11 px). Only the four display steps are fluid: */ /* Sizes follow the mock (feedback 2026-10-12): multiples of the fluid root, so they scale 18 → 20 px with it. */ --wa-font-size-l: 1.35rem; /* 24.3 → 27 px leads, h4 (mock leads 26.7–28 px) */ --wa-font-size-xl: 1.35rem; /* 24.3 → 27 px h3 service titles (mock 26.7 px) */ --wa-font-size-2xl: 2.15rem; /* 38.7 → 43 px h2 (mock 42.7 px) */ --wa-font-size-3xl: 2.2rem; /* 39.6 → 44 px h1 (mock 42.7 px, uppercase) */ --wa-font-size-4xl: 2.8rem; /* unused by any element; kept so 5xl keeps deriving */ --wa-line-height-normal: 1.5; /* body (mock 1.35; 1.5 keeps the paragraphs readable at 20 px) */ /* 5xl is left alone: WA derives it as round(calc(4xl × 1.125 × 1.125)) and that still resolves. */ /* line-height tokens untouched: condensed 1.2 (h1–h6), normal 1.6 (body), expanded 2 */ /* project tokens — concepts Web Awesome has no word for (allowed by the design skill) */ --maeum-line-height-lead: 1.4; --maeum-tracking-caps-heading: 0.06em; /* uppercase H1 only */ --maeum-tracking-caps-ui: 0.08em; /* button labels, footer domains, city labels */ --maeum-measure: 48ch; /* ≈ 612 px at 20 px, the mock's ~600 px text column */ --maeum-font-size-button: 0.85rem; /* 15.3 → 17 px (mock service buttons 17.3 px) */ --maeum-font-size-button-hero: 0.9375rem; /* 16.9 → 18.75 px (mock hero buttons 18.7 px) */ --maeum-section-padding-block: clamp(var(--wa-space-3xl), 8vw, var(--wa-space-5xl)); /* 51 → 90 px */ --maeum-section-padding-inline: clamp(var(--wa-space-m), 4vw, var(--wa-space-2xl)); /* 17 → 45 px */ } /* ---------- 3. Project tokens on top (names verified in the report) ---------- */ :where(:root), .wa-light, .wa-dark, .wa-invert { --wa-border-radius-l: 1.5rem; /* hero panel (treatment C) only; photos are square-cornered (feedback 2026-10-12) */ --wa-button-transform-active: none; /* motion policy (report §4.5): no press-scale */ --header-h: 3.75rem; /* sticky header height = scroll-padding-top; .site-header pins min-block-size to it so anchors land flush (63.75 px @17 px root, 67.5 px @18 px) */ /* Mock palette (client feedback 2026-10-12: match the Canva mock's backgrounds, images and font colours). The accessible alternative from the Phase 1 report is noted on each token; DESIGN.md "Palette" shows the switch. */ --maeum-cream: #F9F8F0; /* page background; text on the sage bands and on the hero image */ --maeum-sage: #9AA37F; /* About band; h2/h3 on cream; service pill outline (accessible alt: brand-40 #535930) */ --maeum-sage-light: #C9CCAD; /* contact band + footer (accessible alt: brand-80 with ink text) */ --maeum-ink: #403F3E; /* body text on cream, exactly the mock's paragraph colour (9.86:1) */ --maeum-photo-wash-start: #FFFCEA; /* the mock's gradient rect under each photo, top-left … */ --maeum-photo-wash-end: #DDCD71; /* … to bottom-right; the photo sits on it with reduced opacity */ --maeum-photo-opacity: .78; /* photo over the gradient (the mock's "slight transparency") */ --maeum-radius-button: 0.875rem; /* ≈ 15 px: the mock's rounded-rectangle buttons (radius ≈ 27 % of a 54 px pill) */ --maeum-hero-ink: var(--maeum-cream); /* hero text + pill border/label (mock: cream straight on the silk image). Accessible alt: #2F3526 with --maeum-hero-wash: rgb(249 248 240 / .45) */ --maeum-hero-wash: transparent; /* treatment B wash, off to match the mock */ --maeum-hero-panel: rgb(249 248 240 / .8); /* treatment C panel */ --maeum-sage-mock: var(--maeum-sage); /* kept for .band-about--light */ --maeum-heading-color: var(--maeum-sage); /* h2/h3 on cream; light-text bands reset it to currentColor */ --wa-color-text-normal: var(--maeum-ink); /* mock body ink instead of neutral-10 */ } /* ---------- 4. Band scopes (report §5.2: composite tokens must be re-declared) ---------- */ /* Light-text bands: About (the mock's sage) and the hero scrim (treatment A). Cream text, cream outlined pills, a dark-olive focus ring (brand-30 reads on sage, the silk image and light sage alike). */ .band-dark, .hero--scrim { color: var(--maeum-cream); --wa-color-text-normal: var(--maeum-cream); --wa-color-text-quiet: var(--maeum-cream); --wa-color-text-link: var(--maeum-cream); --wa-color-focus: var(--wa-color-brand-30); /* #414621: 4.9:1 on #9AA37F */ --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); /* re-declare! */ --wa-color-brand-border-loud: var(--maeum-cream); /* outlined pill border */ --wa-color-brand-on-quiet: var(--maeum-cream); /* outlined pill label */ --wa-color-brand-fill-quiet: color-mix(in oklab, var(--maeum-cream) 14%, transparent); /* hover wash */ --maeum-heading-color: currentColor; } .band-about { background: var(--maeum-sage); } /* class="band band-dark band-about" — the mock's #9AA37F (report alt: brand-40) */ /* Alternative About band (contract §1): the mock's sage with dark text. Use "band band-about--light" instead of "band band-dark band-about". neutral-10 on #9AA37F = 6.20:1; brand-60 would be 1.30:1, so focus/link flip to ink. */ .band-about--light { background: var(--maeum-sage-mock); color: var(--wa-color-neutral-10); --wa-color-text-normal: var(--wa-color-neutral-10); --wa-color-text-quiet: var(--wa-color-neutral-10); --wa-color-text-link: var(--wa-color-neutral-10); --wa-color-focus: var(--wa-color-neutral-10); --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); } /* Contact band + footer: the mock's light sage with cream text over the daisies (report alt: brand-80 + ink text). */ .band-contact { background: var(--maeum-sage-light); color: var(--maeum-cream); --wa-color-text-normal: var(--maeum-cream); --wa-color-text-quiet: var(--maeum-cream); --wa-color-text-link: var(--maeum-cream); --wa-color-focus: var(--wa-color-brand-30); /* #414621: 5.6:1 on #C9CCAD */ --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); --wa-link-decoration-default: underline; /* kit default is a dotted underline; keep a solid one as the link affordance */ --maeum-heading-color: currentColor; } /* Headings on cream take the mock's sage; light-text bands reset the token above. */ h2, h3 { color: var(--maeum-heading-color); } /* Service pills on cream: sage outline + sage label like the mock (hover wash stays brand-95). */ #usluge { --wa-color-brand-border-loud: var(--maeum-sage); --wa-color-brand-on-quiet: var(--maeum-sage); } /* ---------- 5. Base behaviour (no second reset: only what native.css lacks) ---------- */ html { scroll-padding-top: var(--header-h); } @media (max-width: 47.99em) { /* No JS below 48em: the three links wrap under the lockup (measured 176 px at 360), too tall to keep sticky, so the header becomes a normal in-flow block and anchors land at the very top. */ html:not(.js) { --header-h: 0rem; } html:not(.js) .site-header { position: static; } } ul[role="list"] { list-style: none; padding-inline-start: 0; } ul[role="list"] > li { margin-inline-start: 0; } picture { display: block; } picture > img { display: block; } address { font-style: normal; } h1, h2, h3 { hyphens: manual; } p { /* needs */ hyphens: auto; hyphenate-limit-chars: 6 3 3; /* no 2-letter stubs ("po-trebe"); Chrome >= 109 */ -webkit-hyphenate-limit-before: 3; /* Safari equivalents; Firefox ignores all three and keeps its defaults */ -webkit-hyphenate-limit-after: 3; } /* ---------- 6. Recipes ---------- */ .band { position: relative; } .band__inner { max-inline-size: 72rem; margin-inline: auto; padding-block: var(--maeum-section-padding-block); padding-inline: var(--maeum-section-padding-inline); } .measure { max-inline-size: var(--maeum-measure); } /* The flank utility gives its content child `min-inline-size: var(--content-percentage, 50%)` (kit utilities/layout.css) and min-size beats max-size, so the 52ch cap would be defeated at >= 1280 px. Scoped to flank children only. */ [class*='wa-flank'] > .measure { min-inline-size: min(var(--content-percentage, 50%), var(--maeum-measure)); } .lead { /* hero + About leads: serif, l, 1.45, balanced */ font-family: var(--wa-font-family-heading); font-weight: var(--wa-font-weight-normal); font-size: var(--wa-font-size-l); line-height: var(--maeum-line-height-lead); text-wrap: balance; } .band-dark .lead, .hero--scrim .lead, .hero--wash .lead { font-weight: 450; } /* light-on-dark optical compensation (report §4.2) */ .caps-heading { text-transform: uppercase; letter-spacing: var(--maeum-tracking-caps-heading); } /* The four a.wa-button CTAs: uppercase + UI tracking; rounded rectangle like the mock (wa-pill removed from the markup). */ .cta-caps { text-transform: uppercase; letter-spacing: var(--maeum-tracking-caps-ui); padding-inline: var(--wa-space-l); border-radius: var(--maeum-radius-button); font-size: var(--maeum-font-size-button); } .hero .cta-caps { font-size: var(--maeum-font-size-button-hero); } .rule { display: block; background: currentColor; opacity: .7; } .rule--short { inline-size: 1px; block-size: var(--wa-space-xl); } /* the short vertical stroke under the H1 */ .rule--grow { flex: 1 1 var(--wa-space-2xl); block-size: 1px; } /* footer hairline between heart and domains */ /* Skip link: wa-visually-hidden hides it until focus; these rules take over when focused. */ .skip-link { position: fixed; inset-block-start: var(--wa-space-s); inset-inline-start: var(--wa-space-s); z-index: 20; padding: var(--wa-space-s) var(--wa-space-m); border-radius: var(--wa-border-radius-m); background: var(--wa-color-brand-40); color: var(--wa-color-brand-95); font-weight: var(--wa-font-weight-action); text-decoration: none; } /* ---------- 7. Header + navigation (report §7.3) ---------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 10; min-block-size: var(--header-h); /* equals html scroll-padding-top: no sliver of the previous band under the header after an anchor jump */ padding-block: var(--wa-space-xs); /* keeps the lockup/nav on the 72rem .band__inner column above 72rem + 2 × padding; identical below */ padding-inline: max(var(--maeum-section-padding-inline), calc(50% - 36rem + var(--maeum-section-padding-inline))); row-gap: var(--wa-space-m); background: var(--wa-color-surface-default); border-block-end: 1px solid var(--wa-color-surface-border); } /* Transparent over the hero (feedback 2026-10-12). With JS the header overlays the hero (negative margin equal to its own height) and is see-through with cream text until the hero's bottom edge passes under it; nav.js watches the hero with an IntersectionObserver and adds .is-solid, which restores the cream bar. The open phone menu also forces .is-solid. Without JS nothing here applies: the header stays the in-flow cream bar. */ .js .site-header { margin-block-end: calc(-1 * var(--header-h)); } .js .hero { padding-block-start: var(--header-h); } /* keep the hero content centred in the visible area */ .js .site-header:not(.is-solid) { background: transparent; border-block-end-color: transparent; color: var(--maeum-cream); --wa-color-text-normal: var(--maeum-cream); --wa-color-focus: var(--wa-color-brand-30); /* dark olive ring reads on the silk image */ --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); } .js .site-header:not(.is-solid) .lockup:hover, .js .site-header:not(.is-solid) .site-nav a:hover, .js .site-header:not(.is-solid) .site-nav a:focus-visible, .js .site-header:not(.is-solid) .nav-toggle:hover { color: var(--maeum-cream); } .js .site-header:not(.is-solid) .nav-toggle:hover { background: color-mix(in oklab, var(--maeum-cream) 14%, transparent); } .lockup { display: inline-flex; align-items: center; gap: var(--wa-space-s); color: var(--wa-color-text-normal); font-family: var(--wa-font-family-heading); line-height: 1; text-decoration: none; } .lockup:hover { color: var(--wa-color-brand-40); } .wordmark { font-size: 1.8rem; line-height: 1; letter-spacing: 0.01em; } /* 32 → 36 px; the lockup must fit the 3.75rem header */ .lockup-rule { inline-size: 1px; align-self: stretch; background: currentColor; opacity: .5; } .lockup-text { display: flex; flex-direction: column; gap: var(--wa-space-3xs); line-height: var(--wa-line-height-condensed); } .name { font-size: 1rem; letter-spacing: 0.05em; } /* 18 → 20 px (mock 28 px, scaled to the bar) */ .tagline { font-size: 0.85rem; letter-spacing: 0.04em; } /* 15.3 → 17 px (mock 20 px) */ .site-nav a { display: inline-block; padding: var(--wa-space-xs) var(--wa-space-2xs); color: var(--wa-color-text-normal); font-weight: var(--wa-font-weight-action); text-decoration: none; } .site-nav a:hover, .site-nav a:focus-visible { color: var(--wa-color-brand-40); text-decoration: underline; text-underline-offset: 0.2em; } .nav-toggle { display: none; } /* native.css spaces `button > wa-icon:has(+ *)` / `button > * + wa-icon` by 0.75em; the hidden xmark icon and the visually-hidden label still count as siblings, which would push the bars icon 7.5 px off-centre. */ .nav-toggle > wa-icon { margin-inline: 0; } .nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: inline-block; } @media (max-width: 47.99em) { .js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.625rem; block-size: 2.625rem; padding: 0; border: 1px solid currentColor; border-radius: var(--wa-border-radius-pill); background: transparent; color: var(--wa-color-text-normal); font-size: var(--wa-font-size-l); cursor: pointer; } .js .nav-toggle:hover { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-text-normal); } .js .site-nav { /* dropdown under the bar: opening never moves the page or the header height */ position: absolute; inset-inline: 0; inset-block-start: 100%; padding-inline: inherit; /* the header's gutter */ padding-block-end: var(--wa-space-s); background: var(--wa-color-surface-default); border-block-end: 1px solid var(--wa-color-surface-border); color: var(--maeum-ink); --wa-color-text-normal: var(--maeum-ink); } .js .site-nav[hidden] { display: none; } .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .js .site-nav a { display: block; padding-block: var(--wa-space-s); } .js .site-nav li + li { border-block-start: 1px solid var(--wa-color-surface-border); } html:not(.js) .site-nav[hidden] { display: block; } /* no JS: the `hidden` in the markup must not hide the nav */ } @media (min-width: 48em) { .site-nav[hidden] { display: block; } } @media (max-width: 47.99em) { /* phones: a smaller lockup so it shares one row with the toggle (header = --header-h) */ .wordmark { font-size: 1.55rem; } /* 27.9 px at the 18 px root */ .name { font-size: 0.85rem; } /* 15.3 px */ .tagline { font-size: 0.72rem; } /* 13 px */ .lockup-text { white-space: nowrap; } } @media (max-width: 22.49em) { /* < 360 px: drop the tagline so the row still fits at 320 px */ .tagline { display: none; } } /* ---------- 8. Hero ---------- */ .hero { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; min-block-size: 100vh; min-block-size: 100svh; } .hero__bg { position: absolute; inset: 0; z-index: -2; border-radius: 0; } .hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; /* native.css rounds images */ } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; } .hero .band__inner { max-inline-size: 48rem; } .hero__icon { font-size: var(--wa-font-size-2xl); } /* B (default): olive ink on a 45 % cream wash. The cream-surface pill defaults fail on the washed image (brand-60 border 2.21:1, brand-40 label 3.29:1 at the darkest sampled pixel), so border, label and focus use the ink. */ .hero--wash::before { background: var(--maeum-hero-wash); } .hero--wash, .hero--panel { color: var(--maeum-hero-ink); --maeum-heading-color: currentColor; --wa-color-text-normal: var(--maeum-hero-ink); --wa-color-focus: var(--wa-color-brand-30); /* dark olive reads on the silk image whatever the ink is */ --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); --wa-color-brand-border-loud: var(--maeum-hero-ink); --wa-color-brand-on-quiet: var(--maeum-hero-ink); --wa-color-brand-fill-quiet: color-mix(in oklab, var(--maeum-hero-ink) 10%, transparent); } /* A: cream text on a 50 % brand-05 scrim; the colour tokens come from the shared .band-dark rule above. */ .hero--scrim::before { background: color-mix(in srgb, var(--wa-color-brand-05) 50%, transparent); } /* C: frosted cream panel (add class "hero__panel" to the .band__inner div). */ .hero--panel .hero__panel { max-inline-size: 44rem; padding: var(--wa-space-2xl) var(--maeum-section-padding-inline); border-radius: var(--wa-border-radius-l); background: var(--maeum-hero-panel); -webkit-backdrop-filter: blur(var(--wa-space-s)); backdrop-filter: blur(var(--wa-space-s)); } @media (max-width: 29.99em) { /* ≤ 480 px: the two pills stack full-width at the body size */ .hero .wa-cluster { inline-size: 100%; } .hero .cta-caps { flex: 1 1 100%; font-size: var(--maeum-font-size-button-hero); /* native.css keeps a.wa-button nowrap at a fixed height; under a WCAG 1.4.12 text-spacing override the first label (304 px) no longer fits the 286 px column at 320 px, so let it wrap. Single line and 46 px otherwise. */ white-space: normal; text-wrap: balance; block-size: auto; min-block-size: var(--wa-form-control-height); padding-block: var(--wa-space-xs); } } /* ---------- 9. Sections ---------- */ /* The report's figures wrap the in a ; wa-frame only sizes direct img children. */ [class*='wa-frame'] > picture { inline-size: 100%; block-size: 100%; } [class*='wa-frame'] > picture > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; } /* The mock's photo treatment (feedback 2026-10-12): square corners, an opaque cream → mustard diagonal gradient underneath, and the photo at reduced opacity so the colour shows through. */ [class*='wa-frame'] { border-radius: 0; background: linear-gradient(135deg, var(--maeum-photo-wash-start), var(--maeum-photo-wash-end)); } [class*='wa-frame'] > picture > img { opacity: var(--maeum-photo-opacity); } /* Services photo (decision; overrides report §4.4 "3:2" for the side-by-side state only, inside §3.4's taller-crop option): beside the text the frame stretches to the text column's height, like the mock's tall photo spanning both service blocks; when the flank stacks, `aspect-ratio: auto` falls back to the img's intrinsic 3:2 (width/height attributes). No media query: the flank wraps between 1024 and 1150 px, where a width-gated ratio would be wrong. */ #usluge figure { aspect-ratio: auto; align-self: stretch; } #usluge figure img { object-position: 55% 50%; } /* keeps the plant and the armchair whole from 1150 to 1440 px */ #usluge figure { --maeum-photo-opacity: .72; } /* the mock washes the room photo harder than the portrait */ .portrait { max-inline-size: 30rem; /* ~2× sharpness from the 941 px source */ aspect-ratio: 941 / 1210; /* the photo's own ratio (client portrait, 2026-10-15); wa-frame:portrait's 9:16 box fitted the old 941×1672 mock export but would crop 28 % off this one */ margin-inline: 0; /* left-aligned with the text when it wraps under it (feedback 2026-10-12) */ --maeum-photo-opacity: .85; /* the portrait keeps a little more of its colour than the room */ } .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); } /* Contact + domains live in one