. Brando renders each WPBakery row as a

, so that * rule inserts a 10px seam between the hero and the orange band and stops the * bands being full-bleed. Redesigned pages lay their own padding out instead. * Deliberately low specificity (one class + two elements): it only has to beat * the bare `section` rule, and must LOSE to the row components below. */ body.ft-redesign section { padding: 0; } /* Rows on inner pages have no hand-built layout of their own, so give them back * a little vertical rhythm (the homepage hero/band set their own padding). */ body.ft-redesign:not(.home) .entry-content > section { padding: 30px 0; } /* ...and Brando's own wrappers add a top offset above the first row. (Only the * margin: the inner-page header clearance below sets padding-top on * .entry-content, and a padding reset here would out-order it.) */ body.ft-redesign .parent-section, body.ft-redesign .entry-content { margin-top: 0; } /* ======================================================================= * Step 3 — Global chrome: base, type, header, footer * ===================================================================== */ /* ---- Base surface + body type ---------------------------------------- */ body.ft-redesign { background-color: var(--ft-bg-dark); color: var(--ft-text-muted); font-family: var(--ft-font-body); font-size: var(--ft-size-body); line-height: var(--ft-lh-body); /* Brando sets `antialiased`, which on macOS drops the stem darkening that * light-on-dark text relies on — with the Light body face that leaves * hairline strokes. `auto` restores the system rendering. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* WordPress' custom-background feature injects an inline * `body.custom-background{background:#fff}` in , AFTER this stylesheet and * at equal specificity, so it wins and whitens the page. Beat it with the extra * `.custom-background` class (higher specificity, no !important needed). */ body.ft-redesign.custom-background { background-color: var(--ft-bg-dark); } body.ft-redesign p, body.ft-redesign li, body.ft-redesign a, body.ft-redesign span, body.ft-redesign div { font-family: var(--ft-font-body); } /* Body copy in the mockup is noticeably larger than Brando's default * (mockup: 20px / 31px). Set on the content wrapper AND on the paragraphs: * Brando's columns carry their own small font-size, and a WPBakery text block * only gets a .wpb_text_column wrapper when it was given a class — plain text * blocks emit bare

s — so neither hook alone covers the page. */ body.ft-redesign .entry-content, body.ft-redesign .entry-content p, body.ft-redesign .entry-content li, body.ft-redesign .entry-content .wpb_column, body.ft-redesign .wpb_text_column, body.ft-redesign .wpb_text_column p, body.ft-redesign .wpb_text_column li { font-size: var(--ft-size-body); line-height: var(--ft-lh-body); } /* Brando leaves a 20px top margin on , which shows as a gap above the * full-bleed hero. */ body.ft-redesign { margin-top: 0; } /* ---- Headings / eyecatchers ------------------------------------------ */ body.ft-redesign h1, body.ft-redesign h2, body.ft-redesign h3, body.ft-redesign h4, body.ft-redesign h5, body.ft-redesign h6 { font-family: var(--ft-font-display); color: var(--ft-white); text-transform: uppercase; font-weight: 800; letter-spacing: .01em; line-height: 1.05; } body.ft-redesign h1 { font-size: var(--ft-size-h1); } body.ft-redesign h2 { font-size: var(--ft-size-h2); } /* Emphasis inside body copy is white (per mockup: bold key words) */ body.ft-redesign strong, body.ft-redesign b { color: var(--ft-white); font-weight: 700; } /* ---- Header / nav ---------------------------------------------------- * Brando already fixes the navbar (`position: fixed; top: 0; z-index: 20`) and * on scroll adds `.shrink`, which would repaint it white (`.shrink{background:#fff}`). * * TWO STATES, matching the mockup: * - At the top of the page the bar is TRANSPARENT. In the mockup the header is * part of the hero field: the blueprint grid and the flame ribbon run up * through it to the page edge. An opaque bar is the same colour as the hero, * so it looks identical — except it chops those decorations off at its lower * edge, which is why this is transparent rather than painted. * - Once scrolled (`.shrink`) it becomes a solid dark bar with a shadow, so the * menu stays readable over whatever is passing beneath it. That is the state * the "always visible, non-transparent menu" requirement is really about; * at the top there is nothing to be transparent against but the hero itself. * * The `!important` on both backgrounds beats Brando's `.shrink{background:#fff}`. */ body.ft-redesign .navbar.bg-white, body.ft-redesign .navbar.header-white { background-color: transparent !important; border: 0; box-shadow: none; } body.ft-redesign .navbar.shrink, body.ft-redesign .navbar.shrink.bg-white, body.ft-redesign .navbar.shrink.header-white { background-color: var(--ft-bg-dark) !important; box-shadow: 0 2px 16px rgba(0, 0, 0, .45); } /* The collapsed (hamburger) menu is a panel that opens over page content, so it * always needs a surface of its own — the transparent top state must not leave * the open menu see-through. */ @media (max-width: 991px) { body.ft-redesign .navbar-collapse.in, body.ft-redesign .navbar-collapse.collapsing, body.ft-redesign .navbar.menu-open, body.ft-redesign .navbar.menu-open.bg-white, body.ft-redesign .navbar.menu-open.header-white { background-color: var(--ft-bg-dark) !important; } } /* ---- Header geometry: ONE fixed height, in both scroll states -------- * Brando's `.shrink` collapses the bar on scroll — `.shrink .navigation-menu * { height: 60px !important }` — and an earlier pass here made that worse by * also shrinking the brand padding and the logo. The header must not resize as * you scroll, so both states are pinned to the same 112px band. The `!important` * is required only to beat Brando's own `!important` on that height. * (Only the geometry is pinned: the background still goes from transparent to * solid on scroll — see the two-state note above.) */ /* Desktop only: below the breakpoint this container also wraps the expanded * hamburger panel, so pinning its height there would box the open menu in. */ @media (min-width: 992px) { body.ft-redesign .navbar .navigation-menu, body.ft-redesign .navbar.shrink .navigation-menu { height: 112px !important; } } body.ft-redesign .navbar-brand, body.ft-redesign .navbar.shrink .navbar-brand { padding: 20px 0; height: auto; } /* Logo: keep the artwork's own aspect ratio. Brando caps it at `max-width: * 156px`, so setting a height alone squashed it — 774x241 (ratio 3.21) was * being drawn into a 156x72 box (ratio 2.17). Releasing max-width lets the * width follow the height. */ body.ft-redesign .navbar-brand img.logo, body.ft-redesign .navbar.shrink .navbar-brand img.logo { height: 72px; width: auto; max-width: none; max-height: none; object-fit: contain; } /* ---- Nav links: brand red, unchanged by scrolling ------------------- * Something in Brando's scrolled state was repainting the links white. Pin the * colour for both states so the menu never changes colour under you; white is * kept for hover/current as the interaction state. */ body.ft-redesign .navbar .navbar-nav > li > a, body.ft-redesign .navbar.shrink .navbar-nav > li > a { color: var(--ft-orange); } body.ft-redesign .navbar .navbar-nav > li > a:hover, body.ft-redesign .navbar .navbar-nav > li > a:focus, body.ft-redesign .navbar.shrink .navbar-nav > li > a:hover, body.ft-redesign .navbar.shrink .navbar-nav > li > a:focus, body.ft-redesign .navbar .navbar-nav > li.current-menu-item > a, body.ft-redesign .navbar.shrink .navbar-nav > li.current-menu-item > a { color: var(--ft-white); } /* In the transparent top state the hero's flame ribbon runs up behind the * links (orange on orange). A dark halo knocks the letters out of it; over the * plain dark hero it is invisible. The solid scrolled bar doesn't need it. */ body.ft-redesign .navbar:not(.shrink) .navbar-nav > li > a { text-shadow: 0 0 2px var(--ft-bg-dark), 0 0 8px var(--ft-bg-dark), 0 0 14px var(--ft-bg-dark); } /* `.shrink` also re-adds a hairline border; the scrolled bar separates itself * with the shadow instead. */ body.ft-redesign .navbar.shrink { border: 0 !important; } /* The opaque fixed bar would cover the top of the page (Brando adds no body * offset). Clear it on inner pages; the homepage hero sets its own top padding. * NOTE this clearance must go on `.entry-content`, NOT `.parent-section`: * Brando also tags that section `.no-padding`, which is `padding: 0 !important` * and silently beats any padding set here. */ body.ft-redesign:not(.home) .entry-content { padding-top: 150px; } /* Menu links: orange, body font, mockup size (~20px) and generous spacing. */ body.ft-redesign .navbar-nav > li > a { color: var(--ft-orange); font-family: var(--ft-font-body); font-size: var(--ft-size-nav); text-transform: none; font-weight: 400; } body.ft-redesign .navbar-nav > li > a:hover, body.ft-redesign .navbar-nav > li.current-menu-item > a { color: var(--ft-white); } /* The old design capped menu items at 5.5em, which wrapped every label onto two * lines; the mockup's nav is a single row of full-width labels. */ body.ft-redesign .menu-item { max-width: none; } body.ft-redesign .navbar-nav > li { margin: 10px 18px; } /* ---- Footer ---------------------------------------------------------- * In the mockup the footer is not a separate dark band: the orange section runs * all the way to the bottom of the page and the copyright line sits on it, * centred in white. Applied on every redesigned page so the whole site ends the * same way. Brando's `.footer-top` is empty here (no footer logo or socials) but * still reserves ~150px, so it is collapsed. */ body.ft-redesign footer.brando-footer, body.ft-redesign footer.brando-footer .footer-bottom { /* DEVIATION FROM THE MOCKUP, on purpose: the mockup runs the bright orange * to the bottom of the page, but its small white copyright line scores * 3.73 on #e8511c — below AA for normal text. The deeper orange takes the * same white to 5.00 (AA) and reads as a deliberate closing band, echoing * the deep-orange lip at the top of the band. */ background-color: var(--ft-orange-deep) !important; color: var(--ft-white); border: 0; } body.ft-redesign footer.brando-footer .footer-top { display: none; } body.ft-redesign footer.brando-footer .footer-bottom { padding: 26px 0; } body.ft-redesign footer.brando-footer span { color: var(--ft-white); } body.ft-redesign footer.brando-footer a { color: var(--ft-white); text-decoration: underline; } /* ======================================================================= * Step 4 — Layout rows + decorative motifs (hero + orange band) * Layout and decoration are driven entirely by the WPBakery row/column "Extra * class name" — no inline HTML in the page content. NOTE Brando's rows take a * `class` attribute, not WPBakery's stock `el_class`. * ===================================================================== */ /* ---- Hero row (dark: headline + copy column + eyecatcher) ------------ * Mockup: headline baseline ~191px from the top, copy ends at 619px, section * ends at 783px — i.e. roughly 170px of clearance above (which also has to * cover the ~76px fixed navbar) and 160px below. */ body.ft-redesign .ft-hero { position: relative; overflow: hidden; padding: 205px 0 160px; background: var(--ft-bg-dark); } /* Neutralise Brando's white content wrappers so the dark surface is continuous * (any orange band paints its own background). */ body.ft-redesign .parent-section, body.ft-redesign .entry-content, body.ft-redesign .parent-section > .container-fluid { background: transparent; } /* Only the h1 — WPBakery renders the hero headline as

, * and matching `.vc_custom_heading` here would also (more specifically) capture * the eyecatcher's own heading and shrink it back to h1 size. / body.ft-redesign .ft-hero h1 { font-size: var(--ft-size-h1); line-height: 1.03; margin: 0 0 .55em; } / Copy column: the 7/12 column already lands on the mockup's ~47%-of-viewport * measure, so it needs no extra cap (an `em` cap here would resolve against * Brando's small inherited column font-size and squeeze the column). * * Drop its left padding so the body copy starts on the SAME vertical line as * the headline. The h1 sits directly in the outer column, flush with the * container's content edge, while this inner WPBakery column adds its own 15px * — which indented the copy 15px past the headline. Zeroing it only on the left * keeps the column's width (and therefore the eyecatcher beside it) untouched. / body.ft-redesign .ft-hero-copy { padding-left: 0; } body.ft-redesign .ft-hero-copy p { margin-bottom: 1.4em; } / The mockup drops the CTA box ~46px below the top of the copy column. / body.ft-redesign .ft-hero-cta { margin-top: 46px; } body.ft-redesign .ft-hero-copy p:last-child { margin-bottom: 0; } / Flame ribbon — pours down from the top edge and disappears behind the * eyecatcher. This is the SUPPLIED ARTWORK, used byte-for-byte: * `assets/img/fire-ribbon.png` is an unmodified copy of `tmp/fire ribbon.png` * (518x837, artwork at x 16..517 / y 0..825). Don't crop, redraw or re-export * it — the framing below is done entirely in CSS so the file stays pristine. * * The ribbon's lower section turns right and runs off the artwork's right * edge; the mockup hides that behind the eyecatcher and shows only the clean * upper run (source y 0..660). So this element is a WINDOW onto the source * rather than a box the whole image is fitted into: `background-size` scales * the full 518x837 by 0.66 (342x553) and `background-position` slides it so * the top of the ribbon (source 16, 0) lands at the window's top-left. The * window is then sized to the upper run only — 68 x 436, i.e. source 103 x 660 * at that scale — which crops the right-turn out geometrically, not in the file. * * `transform-origin: 0 0` keeps the rotation pivot on that same point, so * left/top place the top of the ribbon directly. Verified against the mockup: * ribbon centres within ~5px at y = 144 / 200 / 250. / body.ft-redesign .ft-flame-ribbon::after { content: ""; position: absolute; top: -60px; left: 56%; width: 68px; height: 436px; transform: rotate(-20deg); transform-origin: 0 0; background-image: var(--ft-img-fire-ribbon, url("../img/fire-ribbon.png")); background-repeat: no-repeat; background-size: 342px 553px; / the full 518x837 source at 0.66 / background-position: -10.6px 0; / slide source x=16 to the window edge / / Dim the run that passes behind the transparent header, where it clashed with the orange menu links; full strength again below the 112px bar. The mask is in the element's own (pre-rotation) space, so the stops are distances ALONG the ribbon: the header's lower edge is ~183px along. / -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .4) 130px, #000 230px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .4) 130px, #000 230px); pointer-events: none; / Layer 0, like the grid: the mockup runs the ribbon BEHIND the eyecatcher, whose column is lifted to layer 1 by the .ft-grid-overlay rule. / z-index: 0; } / Thin angular accent line entering from the left edge, level with the headline * and running off-canvas at both ends (mask-tinted with the brand orange). * Hung off the inner .container, not the section: .ft-grid-overlay is on the * same section and already owns its ::before, and an element only has one. * The container is made `position: relative` by the grid-overlay rule below; * z-index -1 keeps the line behind the copy it passes under. / body.ft-redesign .ft-accent-lines > .container::before { content: ""; position: absolute; z-index: -1; left: calc(-1 var(--ft-gutter) - 30px); top: 40px; width: 360px; height: 440px; /* Hairline weight — in the mockup it reads as a faint construction line passing behind the opening paragraph, not as a graphic element. / background-color: rgba(232, 81, 28, .75); -webkit-mask: var(--ft-img-accent-lines, url("../img/accent-lines.svg")) no-repeat top left; mask: var(--ft-img-accent-lines, url("../img/accent-lines.svg")) no-repeat top left; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; z-index: 0; } / ---- Orange band row (photo + text box) ----------------------------- * The mockup's band opens with a ~30px lip of the deeper orange before the * bright field starts — drawn as a top border so it is always full-bleed. / body.ft-redesign .ft-orange-band, body.ft-split .entry-content > section.ft-band-start, body.ft-split .entry-content > section.ft-band-start ~ section { --ft-grid-line: rgba(255, 255, 255, .3); --ft-grid-dot: rgba(255, 255, 255, .62); } body.ft-redesign .ft-orange-band { position: relative; overflow: hidden; background: var(--ft-orange); border-top: 30px solid var(--ft-orange-deep); padding: 70px 0 90px; } body.ft-redesign .ft-orange-band, body.ft-redesign .ft-orange-band p, body.ft-redesign .ft-orange-band li, body.ft-redesign .ft-orange-band .wpb_text_column, body.ft-redesign .ft-orange-band strong { color: var(--ft-white); } / Photo: square-on in the mockup (an earlier pass rotated it — the mockup does * not), near-square crop, flush with the content gutter. / body.ft-redesign .ft-orange-band .ft-photo img { display: block; width: 100%; aspect-ratio: 567 / 520; object-fit: cover; max-width: 100%; height: auto; } body.ft-redesign .ft-orange-band .ft-photo .vc_figure, body.ft-redesign .ft-orange-band .ft-photo .vc_single_image-wrapper { display: block; width: 100%; } / Deep-orange text box (padding lands on the column div directly). / body.ft-redesign .ft-orange-band .ft-textbox { background: var(--ft-orange-deep); padding: 44px 46px; margin-bottom: 28px; } body.ft-redesign .ft-orange-band .ft-textbox p:last-child { margin-bottom: 0; } / ======================================================================= * Step 5 — Reusable components (usable on ANY page) * These opt in via a CSS class or the [ft_eyecatcher] shortcode, so leaving * them unscoped is safe — they only affect elements that request them. * ===================================================================== / / ---- Eyecatcher / CTA box + speech-bubble tail ---------------------- * Mockup: a BRIGHT orange block (#e8511c), ~290px tall, whose right edge bleeds * off the page, carrying a 64px headline and 44px date/place lines. All of its * text is large display type, so white on bright orange (contrast 3.75) clears * WCAG AA for large text — an earlier pass had darkened the box to keep small * body copy legible, which is no longer needed at these sizes. Any eyecatcher * that does carry normal-size copy should add .ft-eyecatcher--deep. / / NOTE the doubled-up selector. When this class is put on a WPBakery column, * js_composer's own `.vc_col-sm-5 { padding-left: 15px }` matches at the SAME * specificity and loads after this stylesheet, so a plain `.ft-eyecatcher` * padding silently lost and the box sat at 15px. `.wpb_column.ft-eyecatcher` * outranks it; the bare class keeps the [ft_eyecatcher] shortcode working. * * The right padding is deliberately small: the box bleeds off the right edge of * the page (see --bleed below), so there is already ~90px of orange past the * element's own edge — a full right padding on top of that would squeeze the * headline onto two lines. / .ft-eyecatcher, .wpb_column.ft-eyecatcher { position: relative; background: var(--ft-orange); padding: 48px 16px 56px 56px; } .ft-eyecatcher, .ft-eyecatcher p, .ft-eyecatcher strong { color: var(--ft-white); } body.ft-redesign .ft-eyecatcher h1, body.ft-redesign .ft-eyecatcher h2, body.ft-redesign .ft-eyecatcher h3, .ft-eyecatcher h1, .ft-eyecatcher h2, .ft-eyecatcher h3 { font-size: var(--ft-size-eyebrow); line-height: 1; margin: 0 0 .45em; color: var(--ft-white); } / The date / place lines under the headline. / body.ft-redesign .ft-eyecatcher .ft-eyecatcher-meta, body.ft-redesign .ft-eyecatcher .ft-eyecatcher-meta p, .ft-eyecatcher .ft-eyecatcher-meta, .ft-eyecatcher .ft-eyecatcher-meta p { font-family: var(--ft-font-display); font-size: var(--ft-size-eyemeta); font-weight: 800; line-height: 1.12; text-transform: uppercase; margin: 0; } / Deeper variant for boxes that hold normal-size body copy — white on #ce3818 * is 5.12, which clears AA for normal text. / .ft-eyecatcher--deep { background: var(--ft-orange-deep); } .ft-eyecatcher--deep::after { background-color: var(--ft-orange-deep); } / Bleed the box off the right edge of the page, as in the mockup. The box is a * floated, percentage-width WPBakery column, so a negative margin would not * widen it — instead paint the overhang as a strip hung off its right edge, * --ft-gutter wide (that being exactly the space outside the container). / .ft-eyecatcher--bleed::before { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--ft-bleed); background: inherit; } / Speech-bubble tail: a long hairline WHITE outlined dart pointing up-left away * from the box (the mockup's pointer is an outline, not a filled triangle). / .ft-eyecatcher::after { content: ""; position: absolute; left: -190px; bottom: -120px; width: 230px; height: 180px; background-color: var(--ft-white); -webkit-mask: var(--ft-img-speech-tail, url("../img/speech-tail.svg")) no-repeat top left; mask: var(--ft-img-speech-tail, url("../img/speech-tail.svg")) no-repeat top left; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } / Tail opt-out: [ft_eyecatcher tail="no"] or class="ft-eyecatcher--no-tail". / .ft-eyecatcher--no-tail::after { display: none; } / ---- Eindhoven city logo, used as the section transition ------------- * This mark is NOT decorative zigzag: it is the CITY OF EINDHOVEN's logo (three * stacked chevron bands), here in the campaign's fire gradient. Supplied as * artwork — `assets/img/eindhoven-logo.png` — so do not redraw, recolour or * "tidy" it; swap the file if a better master arrives. * * The mockup places it about a third of the way across the page, straddling the * dark/orange seam. Put the class on a zero-height row between the two sections; * the mark is drawn by the pseudo-element, overflows the row in both directions * and paints over the neighbouring sections (hence the z-index — the orange band * comes later in the DOM and would otherwise cover it). * * Box size = the PNG's intrinsic 207x312. The artwork inside it is 181x294 with * a little transparent padding (12px left, 9px top), which at 1:1 matches the * mockup's 180x292 mark exactly — so `left`/`top` below are offset by that * padding to land the visible artwork where the mockup puts it (456, -54 from * the seam). / .ft-ehv-divider { position: relative; z-index: 2; height: 0; min-height: 0; padding: 0; overflow: visible; } / The row exists only to carry this class. Its empty WPBakery column is still * a float, and a zero-height row cannot contain it — it escaped and squeezed * the following orange band (a BFC, via overflow:hidden) down to a sliver. / .ft-ehv-divider > { display: none; } .ft-ehv-divider::before { content: ""; position: absolute; left: 31.4%; top: -54px; width: 207px; height: 312px; background: var(--ft-img-ehv-logo, url("../img/eindhoven-logo.png")) no-repeat top left; background-size: contain; pointer-events: none; } /* ---- Blueprint dot-grid overlay ------------------------------------- * Thin light rules with a brighter node dot at each intersection, on ~267x178 * cells, anchored to the content gutter so the first column line runs down the * left edge of the content (as in the mockup). Drawn with CSS gradients rather * than a tiled SVG so the same rules recolour per surface through the tokens * (assets/img/dot-grid.svg is therefore no longer referenced). * Layer order: dots on top of lines. The dots layer is offset by half a cell * and centred in its tile so its centres land on the line intersections. / .ft-grid-overlay, body.ft-redesign:not(.ft-split):not(.home) .entry-content { position: relative; } body.ft-redesign:not(.ft-split):not(.home) .entry-content > section { position: relative; z-index: 1; } .ft-grid-overlay::before, body.ft-redesign:not(.ft-split):not(.home) .entry-content::before, body.ft-split .entry-content > section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, var(--ft-grid-dot) 0 var(--ft-grid-dot-size), transparent calc(var(--ft-grid-dot-size) + .5px)), linear-gradient(to right, var(--ft-grid-line) 0 1px, transparent 1px), linear-gradient(to bottom, var(--ft-grid-line) 0 1px, transparent 1px); background-size: var(--ft-grid-cell-x) var(--ft-grid-cell-y), var(--ft-grid-cell-x) var(--ft-grid-cell-y), var(--ft-grid-cell-x) var(--ft-grid-cell-y); background-position: calc(var(--ft-gutter) + var(--ft-grid-cell-x) / 2) calc(var(--ft-grid-cell-y) / 2), var(--ft-gutter) 0, var(--ft-gutter) 0; pointer-events: none; z-index: 0; } / keep the container's real content above the overlay (Brando wraps it in .container) / .ft-grid-overlay > div { position: relative; z-index: 1; } / ======================================================================= * Step 6 — Inner pages (brand/chrome pass, content structure kept) * Applies via the `ft-redesign` flag. Base surface/type/headings/header/footer * come from Step 3 (now flag-scoped). These rules cover the bits specific to * content pages: readable body copy, orange links, spacing, and keeping * sponsor/partner logos legible on the dark surface. * ===================================================================== / / Reading rhythm for content pages (size/line-height come from the tokens). / body.ft-redesign:not(.home) .wpb_text_column ul, body.ft-redesign:not(.home) .wpb_text_column ol { margin-bottom: 1rem; } / Content links: orange on the dark surface, white on hover. Hooked on * .entry-content as well as .wpb_text_column — Brando only emits the latter * when the text block was given a class, so most content links miss it and * fall back to Brando's grey. / body.ft-redesign .entry-content a, body.ft-redesign .wpb_text_column a { color: var(--ft-orange); text-decoration: none; } body.ft-redesign .entry-content a:hover, body.ft-redesign .entry-content a:focus, body.ft-redesign .wpb_text_column a:hover, body.ft-redesign .wpb_text_column a:focus { color: var(--ft-white); text-decoration: underline; } / ...but an orange link on an orange surface is invisible, so anything sitting * on the band, a text box or an eyecatcher gets an underlined white link. / body.ft-redesign .ft-orange-band a, body.ft-redesign .ft-textbox a, body.ft-redesign .ft-eyecatcher a { color: var(--ft-white); text-decoration: underline; } body.ft-redesign .ft-orange-band a:hover, body.ft-redesign .ft-textbox a:hover, body.ft-redesign .ft-eyecatcher a:hover { color: var(--ft-bg-dark); } / Sponsor / partner grid: every cell — a logo OR a logo-less name/heading — * sits in an IDENTICAL light-orange card (--ft-orange-light) so dark/black logos * stay legible on the dark surface and the grid reads evenly. Logos live in the 1/4-width columns * (vc_col-sm-3); wide content images (vc_col-sm-12) are left untouched. Scoped * to Over ons (5863) — the only page with logo grids. * * The card is applied PER content unit, not per column: one card per * `.wpb_single_image` (a `display:block` element, so the card fills the column * width — carding the inner `.vc_single_image-wrapper` instead let each card * shrink-wrap its logo, 112–263px, because Brando's `.vc_figure` is * inline-block). One column packs two logos (Vredesburo + De Kapel); this gives * them two separate equal cards rather than one clipped card. Text-only columns * (names without a logo) get a card on the column body via :has(). / body.page-id-5863 .vc_col-sm-3 .wpb_single_image, body.page-id-5863 .vc_col-sm-3:not(:has(.wpb_single_image)):has(.vc_custom_heading, [class="brando_text_"]) .wpd-innner-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 150px; margin: 0 0 20px; padding: 16px; box-sizing: border-box; background: var(--ft-orange-light); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); overflow: hidden; text-align: center; } /* Neutralise Brando's inline-block figure so the logo just centres in the card * and scales to fit (max-height = 150 − 2×16 padding). / body.page-id-5863 .vc_col-sm-3 .wpb_single_image .wpb_wrapper, body.page-id-5863 .vc_col-sm-3 .wpb_single_image .vc_figure, body.page-id-5863 .vc_col-sm-3 .wpb_single_image .vc_single_image-wrapper { display: block; width: auto; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } body.page-id-5863 .vc_col-sm-3 .wpb_single_image img { max-width: 100%; max-height: 118px; width: auto; height: auto; object-fit: contain; / Some logos have an opaque white background baked in (Dynamo .jpg, De Kapel * .webp); multiply lets that white take on the card colour instead of * showing as a white box. Transparent logos are unaffected. / mix-blend-mode: multiply; } / Text-only cells (names/headings without a logo): dark, centred, sized to the * card. Overrides the Step 3 white-uppercase heading colour + body muted colour, * which would be invisible on the light card. Hide Brando's vc_empty_space * spacers that otherwise push the content off-centre. / body.page-id-5863 .vc_col-sm-3 .wpd-innner-wrapper .vc_empty_space { display: none; } body.page-id-5863 .vc_col-sm-3 .vc_custom_heading, body.page-id-5863 .vc_col-sm-3 .vc_custom_heading a, body.page-id-5863 .vc_col-sm-3 [class="brando_text_"], body.page-id-5863 .vc_col-sm-3 [class="brando_text_"] { color: var(--ft-bg-dark); margin: 0; } body.page-id-5863 .vc_col-sm-3 .vc_custom_heading, body.page-id-5863 .vc_col-sm-3 .vc_custom_heading a, body.page-id-5863 .vc_col-sm-3 [class="brando_text_"] h5 { font-size: 1.05rem; line-height: 1.15; } body.page-id-5863 .vc_col-sm-3 [class="brando_text_"] { font-size: .8rem; line-height: 1.3; } body.page-id-5863 .vc_col-sm-3 [class="brando_text_"] p:empty { display: none; } / ======================================================================= * Step 6b — Split-background pages (homepage duotone look on inner pages) * Reproduces the front page's two-tone treatment — a dark, dot-grid "hero" * region on top and an orange band below. The band is tied to a real content * boundary, not a fixed share of the page: Brando renders each WPBakery * `[vc_row]` as a full-width `
`, so the row marked `class="ft-band-start"` * in the page content — plus every row after it — paints the full-bleed orange * band, while the rows above it keep the dark dot-grid surface. Boundary rows: * Over ons = "Partners"; FAQ = the accordion split at "Hoe kom ik aan een fakkel?". * ===================================================================== / / Dark surface with the blueprint grid on every row-section by default (the * base surface is --ft-bg-dark and the grid overlay is transparent, so the dark * shows through). The grid itself is the shared Step 5 overlay — see the * combined `::before` rule there — so these pages and the homepage draw exactly * the same grid at the same cell size and gutter offset. / body.ft-split .entry-content > section { position: relative; background: transparent; } body.ft-split .entry-content > section > div { position: relative; z-index: 1; } / Orange band: the marked boundary row + every following row-section. The * boundary row also carries the band's deep-orange top lip, matching the * homepage seam. / body.ft-split .entry-content > section.ft-band-start, body.ft-split .entry-content > section.ft-band-start ~ section { background: var(--ft-orange); } body.ft-split .entry-content > section.ft-band-start { border-top: 30px solid var(--ft-orange-deep); } / Above the boundary (dark surface) body copy is white so it does not vanish. / body.ft-split .wpb_text_column, body.ft-split .wpb_text_column p, body.ft-split .wpb_text_column li, body.ft-split .wpb_text_column span { color: var(--ft-white); } / Below it, copy sits DIRECTLY on the bright orange with no text box to soften * it, and white there is 3.73 — below AA for normal text. This resolves the * contrast finding left open in the design plan: dark ink on #e8511c is 4.53 * (AA) and keeps the band the mockup's colour. Headings go dark too, so the * band reads as one block rather than two inks. / body.ft-split .entry-content > section.ft-band-start, body.ft-split .entry-content > section.ft-band-start ~ section, body.ft-split .entry-content > section.ft-band-start :is(p, li, span, h1, h2, h3, h4, h5, h6), body.ft-split .entry-content > section.ft-band-start ~ section :is(p, li, span, h1, h2, h3, h4, h5, h6), body.ft-split .entry-content > section.ft-band-start .wpb_text_column, body.ft-split .entry-content > section.ft-band-start ~ section .wpb_text_column { color: var(--ft-bg-dark); } / ...except inside the light sponsor cards, which set their own dark ink, and * inside any deep-orange text box, which keeps white (5.00, AA). / body.ft-split .entry-content .ft-textbox, body.ft-split .entry-content .ft-textbox :is(p, li, span, strong, h1, h2, h3, h4, h5, h6), body.ft-split .entry-content .ft-eyecatcher, body.ft-split .entry-content .ft-eyecatcher :is(p, li, span, strong, h1, h2, h3, h4, h5, h6) { color: var(--ft-white); } / Emphasis on the band: white would drop below AA, so darken it instead. / body.ft-split .entry-content > section.ft-band-start :is(strong, b), body.ft-split .entry-content > section.ft-band-start ~ section :is(strong, b) { color: var(--ft-bg-dark); } / Links on the band follow the same logic (the white-link rule above targets * the same sections, so this must come after it). / body.ft-split .entry-content > section.ft-band-start a, body.ft-split .entry-content > section.ft-band-start ~ section a { color: var(--ft-bg-dark); text-decoration: underline; } body.ft-split .entry-content > section.ft-band-start a:hover, body.ft-split .entry-content > section.ft-band-start ~ section a:hover { color: var(--ft-white); } / ----------------------------------------------------------------------- * Migrated from Customizer "Additional CSS" (was theme_mod custom_css_post_id * 5355 on the parent `brando` stylesheet). Kept verbatim so the site renders * identically after the parent->child switch. Revisit/remove during restyle. * (Nav max-width override above intentionally supersedes .menu-item here on home.) * --------------------------------------------------------------------- / section { padding: 10px; } .menu-item { max-width: 5.5em; } .nav li { margin: 10px 10px; } .nav li a { vertical-align: top; } / ======================================================================= * Step 7 — Responsive * The mockup is a desktop artboard only, so the small-screen behaviour is an * extrapolation: the decorative layer thins out (it competes with the copy at * narrow widths), the grid cells shrink so they still read as a grid, the * eyecatcher stops bleeding off the edge, and the bands lose their big * desktop padding. * ===================================================================== / @media (max-width: 991px) { :root { --ft-container: 92vw; --ft-grid-cell-x: 150px; --ft-grid-cell-y: 110px; } body.ft-redesign .ft-hero { padding: 155px 0 80px; } body.ft-redesign .ft-orange-band { padding: 50px 0 60px; } body.ft-redesign .ft-orange-band .ft-textbox { padding: 28px 30px; } .ft-eyecatcher, .wpb_column.ft-eyecatcher { padding: 34px 20px 40px 34px; } / Below the desktop breakpoint the columns stack, so the CTA needs air above it rather than beside it. / body.ft-redesign .ft-hero-cta { margin-top: 40px; } / The flame ribbon and the accent line cross the copy once the columns stack — keep the band/hero readable and drop them. / body.ft-redesign .ft-flame-ribbon::after, body.ft-redesign .ft-accent-lines > .container::before { display: none; } / Scale the Eindhoven mark down (keeping its 207:312 ratio) and hold it near the left edge. Centring it once the columns stack drops it straight onto the middle of the band photo; over towards the gutter it reads as the same edge accent it is on desktop. / .ft-ehv-divider::before { left: 10%; width: 145px; height: 218px; top: -38px; } } @media (max-width: 767px) { / The bleed and the outlined tail both rely on space outside the content column, which no longer exists on a phone. / .ft-eyecatcher--bleed { margin-right: 0; } .ft-eyecatcher::after { display: none; } / Compact the header on phones (a 112px bar eats a third of the screen) and keep the headline clear of it. */ body.ft-redesign .navbar-brand { padding: 14px 0; } body.ft-redesign .navbar-brand img.logo { height: 52px; } body.ft-redesign .ft-hero { padding: 125px 0 60px; } body.ft-redesign:not(.home) .entry-content { padding-top: 110px; } body.ft-redesign .ft-orange-band { border-top-width: 18px; } body.ft-split .entry-content > section.ft-band-start { border-top-width: 18px; } }