/* * Hero (espazo-hero 3.1): a Cover block (core/cover) with a «Hero» block style — * is-style-espazo-hero-home homepage: grid and corner marks; * is-style-espazo-hero-page pages: grid. * and the settings of the «Hero» panel (inc/native.php, assets/editor.js), as classes on the block: * is-espazo-hero-photo-right|left the image on that side, 42 % wide, the overlay over it only, a dark gradient at * its bottom behind the band, and the colour --espazo-hero-text-bg (default navy) * behind the text; below 961 px, only the colour; * is-espazo-hero-no-grid without the grid; * is-espazo-hero-corners-on|off corner marks against the style's default. * Image, focal point, overlay (theme gradients hero-left|right|uniform), intensity, colour and height are the * block's own settings; this file holds only what the block has no setting for, the layer order and the layout of the * content inside the hero (which was in the theme). Colours and sizes from the theme presets. */ /* ——— Frame ——— */ /* The background shows only where there is no image or overlay: behind the text with the photo on one side, and when the featured image is missing. */ .is-style-espazo-hero-home, .is-style-espazo-hero-page { position: relative; overflow: hidden; color: var(--wp--preset--color--white, #fff); background-color: var(--espazo-hero-text-bg, var(--wp--preset--color--navy, #0D111E)); } /* Content above the grid and the corner marks, the whole height of the hero: the body takes the free space and the band stays at the bottom (the Cover would centre the content when it is shorter than the hero). */ .is-style-espazo-hero-home > .wp-block-cover__inner-container, .is-style-espazo-hero-page > .wp-block-cover__inner-container { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; } /* Full width of the content column (the constrained layout gives each child auto side margins, which in a flex column would shrink it to its content). */ .is-style-espazo-hero-home > .wp-block-cover__inner-container > *, .is-style-espazo-hero-page > .wp-block-cover__inner-container > * { width: 100%; box-sizing: border-box; } /* Contrast (full audit 29/09, B1-03/B1-04; João: reinforce the gradient): a darker band under the transparent header for the menu, and the uniform overlay below 1200 px. */ .is-style-espazo-hero-home > .wp-block-cover__background, .is-style-espazo-hero-page > .wp-block-cover__background { box-shadow: inset 0 calc(var(--espazo-header-h, 72px) + 56px) 64px -48px color-mix(in srgb, var(--wp--preset--color--navy, #0D111E) 70%, transparent); } @media (max-width: 1199px) { /* Below 1200 px the text reaches the light end of the side gradients (measured 29/09: lede 1.8:1 at 800 px, 3.9:1 at 1024 px), so they become the uniform one. The preset classes use !important, so the preset variables are redefined on the overlay instead of the property. */ .is-style-espazo-hero-home > .wp-block-cover__background, .is-style-espazo-hero-page > .wp-block-cover__background { --wp--preset--gradient--hero-left: var(--wp--preset--gradient--hero-uniform); --wp--preset--gradient--hero-right: var(--wp--preset--gradient--hero-uniform); } } /* 80 px grid over the image and the overlay (panel: Grid). */ .is-style-espazo-hero-home::after, .is-style-espazo-hero-page::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .06; background-image: linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); background-size: 80px 80px; } .wp-block-cover.is-espazo-hero-no-grid::after { content: none; } /* Corner marks (D20; on by default on the homepage, panel: Corner marks): 4 marks 24 px from the edges of the hero, the top ones 22 px under the header (and the highlight band, when there is one), the bottom ones 88 px from the bottom. 18 × 18 px, 1.5 px lines. Prototype HeroCornerMarks: top 144 px with the band (72 + 50 + 22), 96 without a highlight (72 + 24); the band is 50 px since espazo-banner 2.10.2 (it was 56, and 16 px gave the same 144; audit 30/09 F10/F11 — the 4 marks are drawn: the audit's capture had the bottom-left one under the cookie notice). */ .is-style-espazo-hero-home:not(.is-espazo-hero-corners-off)::before, .is-style-espazo-hero-page.is-espazo-hero-corners-on::before { content: ""; position: absolute; z-index: 2; pointer-events: none; top: calc(var(--espazo-header-h, 72px) + var(--espazo-banner-h, 0px) + 22px); right: 24px; bottom: 88px; left: 24px; --espazo-hero-mark: rgba(255, 255, 255, .35); background: linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) left top / 18px 1.5px no-repeat, linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) left top / 1.5px 18px no-repeat, linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) right top / 18px 1.5px no-repeat, linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) right top / 1.5px 18px no-repeat, linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) left bottom / 18px 1.5px no-repeat, linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) left bottom / 1.5px 18px no-repeat, linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) right bottom / 18px 1.5px no-repeat, linear-gradient(var(--espazo-hero-mark), var(--espazo-hero-mark)) right bottom / 1.5px 18px no-repeat; } /* Photo on one side (panel: Photo): the image takes 42 % of the width and the block's overlay covers it only; the text has --espazo-hero-text-bg behind it (the frame's background). Below 961 px, only that colour. */ .wp-block-cover.is-espazo-hero-photo-right > .wp-block-cover__image-background { left: auto; right: 0; width: 42%; } .wp-block-cover.is-espazo-hero-photo-left > .wp-block-cover__image-background { right: auto; left: 0; width: 42%; } @media (min-width: 961px) { .wp-block-cover.is-espazo-hero-photo-right > .wp-block-cover__background { left: auto; right: 0; width: 42%; } .wp-block-cover.is-espazo-hero-photo-left > .wp-block-cover__background { right: auto; left: 0; width: 42%; } .wp-block-cover.is-espazo-hero-photo-right h1 { max-width: 54%; } /* Above the hero h1 rule below. */ .wp-block-cover.is-style-espazo-hero-home:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left) h1 { font-size: clamp(44px, 6vw, 80px); } /* On the left, the text starts 48 px after the photo, from the edge of the 1240 px column. */ .wp-block-cover.is-espazo-hero-photo-left .espazo-hero__body { padding-left: max(0px, calc(42vw + 48px - (100vw - min(1240px, 100vw - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px))) / 2)); } } @media (max-width: 960px) { .wp-block-cover:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left) > :is(.wp-block-cover__image-background, .wp-block-cover__background) { display: none; } } /* The band over the photo: a dark gradient at the bottom of the photo, behind the band, so its text (72 % white, 12 px: needs 4.5:1) reads over any photo — over a white wall, 80 % navy gives about 6.5:1. It is drawn by the content box (above the photo and the grid, below its own text) and spans the photo's width: 42 % of the hero = 42 % of the content box plus 42 % of the side paddings. The corner marks go above it. */ @media (min-width: 961px) { .wp-block-cover:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left) > .wp-block-cover__inner-container::before { content: ""; position: absolute; z-index: -1; bottom: 0; height: 200px; pointer-events: none; width: calc(42% + (var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)) * .42); background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--navy, #0D111E) 80%, transparent) 72px, transparent); } .wp-block-cover.is-espazo-hero-photo-right > .wp-block-cover__inner-container::before { right: calc(-1 * var(--wp--style--root--padding-right, 0px)); } .wp-block-cover.is-espazo-hero-photo-left > .wp-block-cover__inner-container::before { left: calc(-1 * var(--wp--style--root--padding-left, 0px)); } .wp-block-cover:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left)::before { z-index: 3; } /* The same at the top, behind the transparent header (logo and menu over the photo). */ .wp-block-cover:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left) > .wp-block-cover__inner-container::after { content: ""; position: absolute; z-index: -1; top: 0; pointer-events: none; height: calc(var(--espazo-header-h, 72px) + var(--espazo-banner-h, 0px) + 48px); width: calc(42% + (var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)) * .42); background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--navy, #0D111E) 80%, transparent) var(--espazo-header-h, 72px), transparent); } .wp-block-cover.is-espazo-hero-photo-right > .wp-block-cover__inner-container::after { right: calc(-1 * var(--wp--style--root--padding-right, 0px)); } .wp-block-cover.is-espazo-hero-photo-left > .wp-block-cover__inner-container::after { left: calc(-1 * var(--wp--style--root--padding-left, 0px)); } } /* ——— Text on the dark hero ——— */ :is(.is-style-espazo-hero-home, .is-style-espazo-hero-page) :where(h1, h2, h3, h4) em { color: var(--wp--preset--color--green-400); background: none; padding: 0; } /* Section label: green without the plate (D24, prototype .spec-label--light), white with it. */ :is(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .is-style-spec-label { color: var(--wp--preset--color--green-400); } :is(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .is-style-spec-label[data-plate] { color: #fff; } :is(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .is-style-spec-label[data-plate]::before { background: var(--wp--preset--color--green-500); color: var(--wp--preset--color--navy); } /* ——— Content (was in the theme, assets/css/espazo.css; same specificity as there) ——— */ :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--espazo-header-h) + 96px); padding-bottom: 80px; } .is-style-espazo-hero-page .espazo-hero__body { padding-top: calc(var(--espazo-header-h) + 120px); padding-bottom: 96px; } /* W202 (06/10): the homepage text starts at least 24 px under the header's highlight (--espazo-banner-h, measured by espazo-banner). The green band wraps to 2–3 lines on phones (81–120 px, not the 50 px of one line) and covered the section label; on wider screens (one line, 46 px of room) nothing changes. */ .is-style-espazo-hero-home .espazo-hero__body { padding-top: max(calc(var(--espazo-header-h) + 96px), calc(var(--espazo-header-h) + var(--espazo-banner-h, 0px) + 24px)); } :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__body > * { margin-block: 0; } :is(.is-style-espazo-hero-home, .is-style-espazo-hero-page) h1 { margin-top: 32px; max-width: 1100px; color: #fff; } .is-style-espazo-hero-page h1 { margin-top: 28px; font-size: clamp(44px, 7vw, 88px); } :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__lede { margin-top: 32px !important; max-width: 620px; font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, .75); text-wrap: pretty; } .is-style-espazo-hero-page .espazo-hero__lede { margin-top: 28px !important; max-width: 640px; } /* .wp-block-buttons / .wp-block-group: above the core `:root :where(.is-layout-flex)` gap and flow margins, printed after this file. */ :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__ctas.wp-block-buttons { margin-top: 40px !important; gap: 12px; } :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__rail.wp-block-group { margin-top: 40px !important; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__rail .espazo-seal img { height: 112px !important; width: auto !important; } /* The size is the height. W209: Portugal Sou Eu seal with the white cut-out plate (over the photo), minimum 28 mm = 106 CSS px (brand manual, p. 24), so never below 112 px. */ /* W202 · phones (the width of the theme's fixed bar): tighter rhythm and a 17 px lede, so the title (4 lines from W201), the lede and the hero button fit above the fixed bar at 360 × 740 with the band open (measured: button ends at 636, bar at 642). After the h1, lede and buttons rules above: same specificity. */ @media (max-width: 760px) { .is-style-espazo-hero-home h1 { margin-top: 20px; } .is-style-espazo-hero-home .espazo-hero__lede { margin-top: 20px !important; } .is-style-espazo-hero-home .espazo-hero__ctas.wp-block-buttons { margin-top: 24px !important; } } @media (max-width: 480px) { .is-style-espazo-hero-home .espazo-hero__lede { font-size: 17px; } } @media (min-width: 1321px) { .is-style-espazo-hero-home .espazo-hero__body { position: relative; } .is-style-espazo-hero-home .espazo-hero__rail { position: absolute; right: 0; bottom: 80px; margin: 0 !important; align-items: flex-end; } .is-style-espazo-hero-home .espazo-hero__rail .espazo-seal img { height: 132px !important; width: auto !important; } .is-style-espazo-hero-home .espazo-hero__rail:has(.espazo-banner--card) .espazo-seal img { height: 112px !important; width: auto !important; } /* W209: the minimum of the seal (was 96 px). */ /* Photo on the left: the seal and the card over the photo, at the left of the column (mirror of the photo on the right, where they sit over the photo at the right), so they never meet the text. */ .wp-block-cover.is-espazo-hero-photo-left .espazo-hero__rail { right: auto; left: 0; align-items: flex-start; } } :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__band.wp-block-group { border-top: 1px solid rgba(255, 255, 255, .1); padding: 20px 0; gap: 12px 24px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } .is-style-espazo-hero-page .espazo-hero__band { position: relative; justify-content: flex-start !important; gap: 12px 32px; border-top-color: rgba(255, 255, 255, .15); } :where(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .espazo-hero__band > p { margin: 0; } .is-style-espazo-hero-page .espazo-hero__band::before { content: ""; position: absolute; inset: 0 -100vw; background: rgba(13, 17, 30, .35); z-index: -1; } /* Contrast of the metrics line (W178, full audit: «EST. 30.05.2008» gave 3.7:1 over a light metal plate of the photo at 1440 px; the text is 12 px, 72 % white, so it needs 4.5:1). Homepage, photo across the whole hero: a navy gradient behind the band, from nothing 56 px above it to 70 % navy at its top edge and down (the same pseudo-element and layer as the page hero's tint above: over the image, the overlay and the grid, under the text). Computed for a grey photo under the existing overlay: 70 % navy gives at least 4.59:1 even over pure white (60 %: 3.4:1), and ≥ 5.7:1 where the photo is 200/255. With the photo on one side the band already has its own 80 % gradient (above), and below 961 px the colour only. */ .is-style-espazo-hero-home:not(:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left)) .espazo-hero__band { position: relative; } /* The corner marks stay over that gradient (review 30/09), as in the variants with the photo on one side. */ .is-style-espazo-hero-home:not(.is-espazo-hero-corners-off):not(:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left))::before { z-index: 3; } .is-style-espazo-hero-home:not(:is(.is-espazo-hero-photo-right, .is-espazo-hero-photo-left)) .espazo-hero__band::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -56px -100vw 0; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--wp--preset--color--navy, #0D111E) 70%, transparent) 56px); } :is(.is-style-espazo-hero-home, .is-style-espazo-hero-page) .wp-block-button:not(.is-style-ghost-dark) .wp-block-button__link { color: var(--wp--preset--color--forest); } /* Editor (it gives every block position: relative): the rail keeps its place on the homepage. */ @media (min-width: 1321px) { .editor-styles-wrapper .is-style-espazo-hero-home .espazo-hero__rail.block-editor-block-list__block { position: absolute; } }