A dangerous moment: Britain’s far right grows bolder

The following elements are initially hidden (opacity set to 0): interactive content sections, grid layouts, furniture wrappers, and specific header components for articles and features. Once the interactive content is fully loaded, these elements become visible with a smooth fade-in transition lasting 0.3 seconds.

Additionally, the Guardian Headline Full font family is defined with multiple weights and styles (light, regular, medium, semibold, each in normal and italic variants). The font files are sourced from the Guardian’s asset servers in WOFF2, WOFF, and TTF formats for broad browser compatibility.The Guardian uses a custom font called “Guardian Headline Full” in various weights and styles, including light, semibold, bold, and black, each with regular and italic versions. These fonts are available in WOFF2, WOFF, and TTF formats from their asset server. Additionally, they use “Guardian Titlepiece” in bold for specific elements.The Guardian Headline Full font family includes several styles, each available in multiple formats. The regular style has a weight of 400 and normal style. The italic version also has a weight of 400 but an italic style. The medium style has a weight of 500 and normal style, with its italic counterpart at the same weight and italic style. The semibold style has a weight of 600 and normal style, and its italic version matches that weight with italic style. The bold style has a weight of 700 and normal style, and the bold italic version has the same weight with italic style. The black style has a weight of 900 and normal style, with its italic version at the same weight and italic style. Each style is provided in WOFF2, WOFF, and TrueType formats from the specified URLs.@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf’) format(‘truetype’);
font-weight: 900;
font-style: normal;
}

@font-face {
font-family: ‘Guardian Headline Full’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf’) format(‘truetype’);
font-weight: 900;
font-style: italic;
}

@font-face {
font-family: ‘Guardian Titlepiece’;
src: url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2’) format(‘woff2’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff’) format(‘woff’),
url(‘https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf’) format(‘truetype’);
font-weight: 700;
font-style: normal;
}

#article-body > div .content–interactive-grid,
.content–interactive > div .content–interactive-grid,
#comment-body .content–interactive-grid,
[data-gu-name=body] .content–interactive-grid,
#feature-body .content–interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
“media”
“title”
“headline”
“standfirst”
“lines”
“meta”
“body”;
}

@media (min-width: 30em) {
#article-body > div .content–interactive-grid figure.element–immersive figcaption,
.content–interactive > div .content–interactive-grid figure.element–immersive figcaption,
#comment-body .content–interactive-grid figure.element–immersive figcaption,
[data-gu-name=body] .content–interactive-grid figure.element–immersive figcaption,
#feature-body .content–interactive-grid figure.element–immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}

@media (min-width: 46.25em) {
#article-body > div .content–interactive-grid,
.content–interactive > div .content–interactive-grid,
#comment-body .content–interactive-grid,
[data-gu-name=body] .content–interactive-grid,
#feature-body .content–interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
“title”
“headline”
“standfirst”
“media”
“lines”
“meta”
“body”;
}

#article-body > div .content–interactive-grid #maincontent,
.content–interactive > div .content–interactive-grid #maincontent,
#comment-body .content–interactive-grid #maincontent,
[data-gu-name=body] .content–interactive-grid #maincontent,
#feature-body .content–interactive-grid #maincontent {
padding-right: 80px;
}
}

@media (min-width: 61.25em) {
#article-body > div .content–interactive-grid,
.content–interactive > div .content–interactive-grid,
#comment-body .content–interactive-grid,
[data-gu-name=body] .content–interactive-grid,
#feature-body .content–interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
“title right-column”
“headline right-column”
“standfirst right-column”
“media right-column”
“lines right-column”
“meta right-column”
“body right-column”
“. right-column”;
}

@media (min-width: 71.25em) {
#article-body > div .content–interactive-grid,
.content–interactive > div .content–interactive-grid,
#comment-body .content–interactive-grid,
[data-gu-name=body] .content–interactive-grid,
#feature-body .content–interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
“title border headline right-column”
“. border standfirst right-column”
“. border media right-column”
“. border body right-column”
“. border”;
}
}This appears to be a block of CSS code, likely from a website’s stylesheet. It includes styling rules for various elements such as grid layouts, fonts, padding, and margins. The code specifies how content should be displayed across different screen sizes and devices, including adjustments for iOS and Android. It also references custom fonts like “Guardian Headline” and includes media queries for responsive design.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format(“truetype”);
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format(“truetype”);
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format(“truetype”);
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format(“woff2”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format(“woff”),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format(“truetype”);
font-weight: 700;
font-style: normal;
}The Guardian Headline Full font includes bold italic, black, and black italic styles, with each available in WOFF2, WOFF, and TTF formats from the Guardian’s asset server. The Guardian Titlepiece font is available in bold style with the same file formats.

For interactive content columns, the layout adjusts based on screen width:
– On screens 71.25em and wider, the left margin is 160px; at 81.25em and above, it increases to 240px.
– Atom elements have a maximum width of 620px, or 100% on screens under 46.24em.
– Showcase elements adjust from full width on small screens to 620px at 46.25em and above, and 860px at 71.25em and above.
– Immersive elements have a max width of 1100px, with responsive adjustments for positioning and width on different screen sizes, expanding to 1260px at 81.25em and above.

Paragraphs and lists are limited to 620px in width. A vertical border appears on the left of the column at 71.25em and above. Atom elements have consistent vertical spacing, with adjusted margins when following paragraphs.The main column for interactive content limits inline elements to a maximum width of 620 pixels. For screens wider than 61.25em, inline figures are also capped at 620 pixels.

Several color variables are defined for styling elements like datelines, headers, captions, and featured content. Interactive content areas have no padding around atomic elements.

Specific rules apply to the first paragraph following certain elements or horizontal rules, adding a 14-pixel top padding. The first letter of these paragraphs is styled with a large, bold, uppercase drop cap using specified fonts and colors.

Horizontal rules followed by paragraphs do not add extra top padding. Showcase elements in various content containers have caption styling applied.The element has a static position and a width of 100%, with a maximum width of 620 pixels. For immersive elements, the width adjusts to the full viewport width minus the scrollbar width.

On screens up to 71.24em wide, immersive elements have a maximum width of 978 pixels, and their captions have 10 pixels of horizontal padding. For screens between 30em and 71.24em, captions have 20 pixels of horizontal padding. Between 46.25em and 61.24em, immersive elements max out at 738 pixels. Below 46.24em, immersive elements shift left by 10 pixels and lose right margin. Between 30em and 46.24em, the left margin increases to 20 pixels, and captions get 20 pixels of horizontal padding.

For screens 61.25em and wider, a grid layout is used with defined columns and rows. Headlines have a top border, meta sections have top padding, and standfirst text has adjusted margins and styling. Links in standfirst are underlined with a specific color that changes on hover. The first paragraph in standfirst has a top border and bottom padding, which is removed at 71.25em and above.

Figures in the grid have a left margin of -10 pixels, and inline elements max out at 630 pixels. At 71.25em and above, the grid columns and rows adjust, meta sections get a top border via a pseudo-element, and standfirst paragraphs lose their top borders.The CSS code defines styles for a layout wrapper, adjusting grid structure, typography, spacing, and responsive behavior across different screen sizes. It includes rules for elements like headlines, metadata, captions, and images, with specific properties for positioning, colors, and visibility. Media queries modify these styles for various breakpoints to ensure proper display on mobile, tablet, and desktop devices.This CSS code sets styles for mobile articles. It adjusts colors, spacing, and typography for iOS and Android devices, including dark mode support. Headers are hidden, labels are styled with specific fonts and colors, and headlines are set to 32px with bold weight and dark text.On iOS and Android devices, images within article containers are positioned relatively, with a top margin of 14px and a left offset of -10px. Their width adjusts to the viewport width minus the scrollbar width, and their height scales automatically.

For these images, the inner elements, images, and links have a transparent background. Their width also matches the viewport width minus the scrollbar width, and their height adjusts automatically.

The standfirst section in these containers has top and bottom padding of 4px and 24px respectively, with a right margin of -10px.

Text within the standfirst uses the Guardian Headline or similar serif font family.

Links inside the standfirst, including those within list items, follow the same styling.For Android devices, links in the comment article container’s standfirst section are styled with a specific color, an underline 6px below the text, and no background image or bottom border. On hover, links in the standfirst of feature, standard, and comment articles on both iOS and Android change the underline color to match the pillar color.

The meta section in these article types has no margin on both platforms. Author-related text and links in the meta section use the pillar color for text. The meta misc section is also targeted but no specific styling is defined in this snippet.For iOS and Android devices, the following CSS rules apply:

– SVG icons in the meta section of feature, standard, and comment articles use the new pillar color for strokes.
– The caption button in showcase elements is displayed as a flex container, centered with 5px padding, 28px width and height, and positioned 14px from the right.
– The article body has 12px padding on the left and right.
– Non-thumbnail, non-immersive images in the article body have no margin, a width calculated as 100% of the viewport minus 24px and scrollbar width, and auto height. Their captions have no padding.
– Immersive images span the full viewport width minus the scrollbar width.
– Blockquotes with the “quoted” class in the article body prose have a before pseudo-element.For iOS and Android devices, the styling of quoted text and links in article bodies is adjusted. The color of the quote symbol uses the new pillar color. Links are styled with the primary pillar color, underlined with a 6px offset, and the underline color matches the header border. On hover, the underline changes to the new pillar color.

In dark mode, the background of article headers becomes dark gray (#1a1a1a). Labels use the new pillar color, headlines adopt the header border color, and standfirst text and author links also use the header border color.For iOS and Android devices, the author byline text and links in standard and comment articles are styled with the new pillar color. Icons in the meta section of feature, standard, and comment articles use the same color for their stroke. Showcase image captions in these articles use the dateline color. Quoted text blocks in the article body are also set to the new pillar color. The main content areas of feature, standard, and comment articles have a dark background applied. Additionally, the first letter after certain elements in feature articles receives special styling.This appears to be a CSS selector targeting the first letter of paragraphs in specific containers on iOS and Android devices, particularly when they follow certain elements like `.element-atom` or sign-in gates. The selector applies styling to the first letter of these paragraphs across various article and comment sections.On Android devices, the first letter of a paragraph following specific elements in various article containers will be styled with a custom color variable, defaulting to white if the variable is not set.This CSS code applies specific styling for iOS and Android devices on The Guardian website. It adjusts padding, margins, font sizes, and colors for elements like article containers, headlines, captions, and labels. Dark mode support is included with custom color variables. A unique background color (#fff4f2) is set for weekend essay articles, and a decorative book icon is positioned in the header. The layout uses grid templates for larger screens and includes responsive adjustments for different device widths.This CSS code defines styles for a webpage layout, adjusting elements like headers, headlines, and meta information based on screen size. For example, it hides certain labels on wider screens, sets header heights, and adjusts font sizes and spacing for headlines and other text elements. It also includes hover effects for links and headlines, such as underlining with specific thickness and offset. The styles are applied within a container classed as “furniture-wrapper” and use media queries to change properties at different breakpoints.For the main media and elements with the attribute `data-gu-name=”media”` within the furniture wrapper, set their position to relative.

On screens at least 61.25em wide, position these elements in the grid area named “portrait”.

For direct child divs of these elements, set their position to relative.

For any span that directly follows a div within these elements, display it as a block.

For figure elements inside these containers:
– Set their height to 100% and remove the left margin.
– For images and captions within these figures:
– Set their width to the viewport width minus 40px and the scrollbar width (if present), with auto height.
– Add a left margin of 20px and vertical padding of 10px.
– For captions specifically, add a bottom margin of 10px and padding of 10px.
– Before each figure, insert a decorative background image:
– The image spans the viewport width minus 20px and the scrollbar width.
– It is centered, does not repeat, and covers the area.
– Position it absolutely at the top, 10px from the left, matching the figure’s height.

On screens at least 46.25em wide:
– Images in figures have a fixed width of 670px, auto height, a left margin of 5px, and padding of 15px top/bottom and 10px left/right.
– The decorative background spans 700px and is shifted 10px left.
– Captions are 650px wide, with a left margin of 15px, bottom margin of 15px, and padding of 15px top/bottom and 10px left/right.

On screens at least 61.25em wide:
– Figures have a left margin of 10px.
– The decorative background is 470px wide.
– Images and captions are 450px wide with no left margin.
– Images have vertical padding of 10px and no horizontal padding.
– Captions have a bottom margin of 10px.

On screens at least 71.25em wide:
– The decorative background is 550px wide.
– Images are 520px wide with a left margin of 5px and padding of 10px top/bottom and 5px left/right.
– Captions are 510px wide with a left margin of 10px and bottom margin of 10px.

On screens at least 81.25em wide:
– The decorative background is 630px wide.
– Images are 600px wide with vertical padding of 15px.
– Captions are 600px wide with a left margin of 5px and bottom margin of 15px.

For the caption button within these elements:
– Position it 15px from the right and 20px from the bottom.
– On screens at least 46.25em wide, move it to 45px right and 30px bottom.
– On screens at least 61.25em wide, reset to 15px right and 20px bottom.
– On screens at least 71.25em wide, adjust to 20px right.
– No additional changes for 81.25em and above.The provided CSS code defines styles for a webpage layout, including:

– Positioning and appearance of media captions and placeholders.
– Styling for interactive content columns, such as drop caps, headings, and background colors.
– Responsive adjustments for different screen sizes and devices.
– Dark and light mode support with specific color schemes and image assets.
– Custom styles for iOS and Android devices, including font weights and background colors.This CSS code defines styles for iOS and Android devices. It sets primary colors, adjusts background colors based on light or dark mode preferences, and defines grid layouts for article containers. It also includes specific styling for article titles, labels, and GIF containers, ensuring consistent appearance and responsive design across different screen sizes.For Android devices, set the width and height of GIF containers and their images within article furniture to 70px.

Hide all white-themed book GIFs on both iOS and Android across feature, standard, and comment articles.

In dark mode, hide the regular book GIFs and show the white-themed ones instead for better visibility.For Android devices, the following elements are set to display as a block:
– `.gif-container.book-gif-white` within `.title-and-gif-wrapper`
– `img.book-gif-white` within `.gif-container` in `.title-and-gif-wrapper` for feature, standard, and comment article containers.

On both iOS and Android, a horizontal line is added below `.title-and-gif-wrapper` in feature, standard, and comment article containers. This line spans the full viewport width, is 1px tall, has a light gray background, and is positioned at the bottom with a slight left offset.

For screens wider than 61.25em:
– The `.title-and-gif-wrapper` is placed in the “title” grid area.
– The horizontal line below it is reduced to half the viewport width.

In dark mode:
– The horizontal line’s background color changes to a darker gray.

For screens wider than 61.25em:
– The `.portrait-mainmedia__headline-wrapper` is placed in the “headline” grid area for feature, standard, and comment article containers on both iOS and Android.

For iOS, the following elements in feature and standard article containers have specific styling:
– `h1.headline`
– `.meta__byline` and its child `.byline`
– Links within `.meta__byline`For iOS and Android devices, the headline and byline text in article containers are styled with a 36px font size, normal style, medium weight, and 115% line height. The byline text color is set to a specific red (#c70000) by default, using a CSS variable if available. In dark mode, the byline color changes to a darker orange (#c74600) with important priority to override other styles.This CSS code hides the avatar in the byline for iOS and Android devices across different article types. It also adjusts the headline to have no bottom margin or padding, sets the byline text to italic while keeping the author’s name in normal style, and configures the main media container to have an automatic height with a 4:5 aspect ratio and transparent background. Additionally, it ensures the figure element inside the main media takes up the full height, removes the left margin, and positions its inner elements at the top left.For iOS and Android devices, images within article containers are styled to have a transparent background, visible overflow, and no padding. The images are set to a width of the viewport minus 40 pixels, with a left margin of 20 pixels and a top margin of 25 pixels. In some cases, the top margin is adjusted to 13 pixels. Captions for these images are set to an automatic height.For iOS and Android devices, the caption text in comment articles is displayed as a block with no maximum height, positioned relatively, and uses a gray color defined by the variable –captionText.

On screens wider than 46.25em, images in figure elements within main media sections of feature, standard, and comment articles have their maximum width removed. A pseudo-element before each figure spans almost the full viewport width with a small margin. Images inside these figures are sized to fit the viewport minus margins and are positioned with left and top spacing.

At 61.25em and above, the pseudo-element width adjusts to half the viewport minus margins and scrollbar width, if present. Images resize to half the viewport width with adjusted margins and automatic height.

Starting at 71.25em, the pseudo-element shifts slightly upward.

From 81.25em onward, further adjustments apply, though the details are cut off in the provided text.For iOS and Android devices, the following CSS rules apply to images within article containers:

– For figure elements with the class “element”, the pseudo-element `:before` is positioned 20 pixels to the left.
– Images inside these figures have a width calculated as 50% of the viewport width minus 90 pixels and the scrollbar width (if present), with a left margin of 12 pixels, automatic height, a top margin of -10 pixels, and a top padding of 21 pixels.

In dark mode, the `:before` pseudo-element uses a white frame image as its background.

For the first image in a figure (with class “is-first-image”), the `:before` pseudo-element spans the full viewport width minus 20 pixels and the scrollbar width, aligned to the left edge. The image itself also spans this full width, with no left margin and 10 pixels of padding.

On larger screens (min-width: 61.25em), the first image adjusts to a width of 50% of the viewport width minus 30 pixels and the scrollbar width.For iOS and Android devices, the following CSS rules apply to the main media images in feature, standard, and comment article containers:

On screens at least 61.25em wide, the first image element has a maximum width of 620px and full height. A pseudo-element before the image spans 50% of the viewport width minus 20px and the scrollbar width, aligned to the left with full height.

On screens at least 81.25em wide, the image width is set to 50% of the viewport width minus 70px and the scrollbar width, with a left margin of 5px, auto height, a negative top margin of 10px, and top padding of 21px. The pseudo-element before the image is shifted 20px to the left.

On screens at least 46.25em wide, the caption button is positioned 45px from the bottom.

The main media container itself has a grid area named “portrait,” a maximum width of 620px, and auto height on screens at least 61.25em wide.For iOS and Android devices, the following CSS rules apply to figure elements within article containers:

– The figure element is positioned relatively with no top margin.
– The inner figure container is positioned absolutely, 15px from the top and 20px from the left, with a width equal to the viewport width minus 40px and an automatic height.
– Images inside the inner figure container take up the full width and height, using object-fit: cover to maintain aspect ratio.
– The caption button is positioned 24px from the right and 20px from the bottom.

For screens wider than 46.25em:
– The inner figure container has a fixed width of 680px, automatic height, and is positioned 10px from the top and left.
– The caption button is positioned 25px from the bottom.

For screens wider than 61.25em:
– The figure element’s width is set to half the viewport width minus 20px and the scrollbar width (if present).

Additionally, standfirst elements within the furniture wrapper of article containers on iOS and Android follow the same styling rules.For the .standfirst class within .furniture-wrapper, set the top margin to 0 and add 8px of top padding and 10px of right padding.

On iOS and Android devices, hide the :before pseudo-element of .standfirst in feature, standard, and comment article containers.

Also, for these containers on iOS and Android, style the inner elements of .standfirst (paragraphs, links, and list items) with a 20px font size, normal style, medium weight, 115% line height, and no bottom padding.

For screens wider than 61.25em, position .standfirst in the grid area named “standfirst” for the same article types on iOS and Android.

Remove top padding from the .meta class in these containers on both operating systems.

For the .meta__published element within .meta, set its position to relative and add a bottom border using an :after pseudo-element. This border should be a full-viewport-width, 1px solid line in color #dcdcdc, positioned absolutely at the bottom and offset 10px to the left.For iOS and Android devices, when the screen width is at least 61.25em, the meta information in feature, standard, and comment article containers is displayed as a block in the grid area. The published date element in the meta section gets an after-element with a width of 50vw.

At a minimum width of 81.25em, the miscellaneous meta elements in these containers have no left margin.

In dark mode, the after-element for the published date in the meta section uses a background color of #606060.

On iOS and Android, the before-elements for meta and keyline in feature, standard, and comment article containers are hidden. Rich link elements in these containers are also not displayed. The cutout container in the comment header is hidden with high priority.

The article and feature body sections on iOS and Android have a background color defined by the variable –weekend-essay-bg, defaulting to #fff4f2, and a top margin of 6px. Horizontal rules within these sections are also styled.For iOS and Android devices, the horizontal rule (hr) in the article and feature body sections is styled to be 1 pixel high, with no border, a 3-pixel bottom margin, a light gray background color, a width of 150 pixels, no left margin, and a top margin of 48 pixels.

The first letter of the first paragraph after an hr or the first paragraph without a span in the article or feature body is styled with a specific font family, a light font weight, a large font size of 111 pixels, a line height of 92 pixels, floated to the left, set to uppercase, with box-sizing set to border-box, an 8-pixel right margin, aligned to the top of the text, and colored using a CSS variable for drop caps or a secondary pillar color.

Headings (h2) containing strong or bold text in the article or feature body are given a medium font weight.

In dark mode, the hr background color changes to a darker gray, and the first letter after an hr uses a different color variable (with a fallback to #ff5943). Links within paragraphs have their underlines removed.

The first letter of the first paragraph after an element with the class “element-atom” in the article or feature body uses a medium font weight.

In comment sections or elements with the data attribute “data-gu-name=body,” the first letter of the first paragraph after an “element-atom” or sign-in gate uses a light font weight and has no top padding.

Headings (h2) are styled with a dark red color, a 28-pixel font size, normal font style, light font weight, normal line height, and margins of 28 pixels on top and bottom with 8 pixels on the bottom.

On Android, the element with the ID “cutout-container” is hidden.

In dark mode, the headline wrapper for portrait main media uses a repeating linear gradient for its background. In comment sections or elements with “data-gu-name=body,” the first letter of paragraphs that are not the first one uses white color. Headings (h2) in comment sections or “data-gu-name=body” elements are also styled accordingly.The Bell Hotel in Epping has a long history, dating back to its construction as a coaching inn in the 16th century. It once served travelers passing through the historic Essex market town on their way to London, 15 miles to the southwest. Though it has always been a hub for outsiders, they haven’t always been welcome—the small green common opposite was once named after a beacon that, according to local lore, was built to warn of invasions.

Today, the hotel is wrapped in unattractive 1960s extensions that have stripped it of much of its original charm. Set near farmland and a cricket pitch, the unassuming building has now become the unlikely center of a potential political crisis.

This follows a high court ruling this week that the Home Office’s use of the Bell Hotel to house asylum seekers violated planning laws. Epping Forest District Council challenged the government after the hotel became a flashpoint for anti-refugee protests. The unrest began after an Ethiopian man staying there was arrested and charged with the alleged sexual assault of a 14-year-old girl.

Local protesters and the Conservative-led council are celebrating the ruling, but the implications of relocating the hotel’s 140 male residents to unknown locations could be far-reaching. Dozens of other local authorities—some also facing protests—are considering similar legal challenges. This could disrupt the government’s entire asylum system, and one insider admitted this week that the Home Office has been left “reeling.”

While the case hinges on planning law, many see it as a broader victory. This comes after a tense summer marked by thousands of people crossing the Channel in small boats, anti-migrant protests in over 40 locations, and rising nationalist and anti-refugee rhetoric from politicians and media outlets.

Although there hasn’t been widespread rioting like last summer—which was sparked by the murder of three girls in Southport and false rumors that the perpetrator was a Muslim asylum seeker—communities braced for further protests this weekend. A campaign to fly the St. George and Union Jack flags gained momentum across the country, framed as patriotism but experienced by many as intimidation. Anti-extremist groups Hope Not Hate and Stand Up to Racism say the seemingly spontaneous campaign was actually organized by well-known far-right figures.

“We are in a dangerous moment,” says Lewis Nielsen, an anti-fascist officer at Stand Up to Racism. He argues that in the context of increased far-right protests and inflammatory political rhetoric, “Operation Raise the Colours was never about flags—it’s about giving confidence to racists and fascists to target refugees and migrants.”

Saturday’s protests largely passed without major incident. While there were clashes between demonstrators and police in some areas, they did not escalate to the level of civil unrest seen last summer. Still, refugee and minority communities are facing real consequences, illustrated by numerous small but frightening incidents. In Redcar, North Yorkshire, a Black man filmed playing with his white granddaughters was racially abused and falsely accused of being a pedophile after a far-right activist amplified the video online. In east Belfast, vigilantes have been targeting dark-skinned men, shouting abuse and demanding to see their identification.

In a Guardian column on Friday, Enver Solomon, chief executive of the Refugee Council, noted that some food banks that previously served all individuals are now…People in need were now turning away those they perceived as “foreigners.” He also described meeting a man from Africa in his 60s in north-east England who had been attacked by a group of men—his arm was broken—and was too afraid to leave his home.

This came shortly after Keir Starmer said strict immigration controls were needed to prevent Britain from becoming an “island of strangers.” Solomon wrote: “Those who have worked with refugees for decades tell me they have never known a time when the hostility has been so strong and the environment so toxic.” Other refugee charities have had to set up safe rooms or even close their offices due to death threats and intimidation.

Starmer has since said he “deeply regrets” his “island of strangers” comment, but there has been little sign of a broader shift in tone. This week, his spokesperson appeared to endorse a flag-raising campaign, describing the prime minister as a “patriot” who believes people should “absolutely” fly flags.

Meanwhile, Conservative leader Kemi Badenoch claimed women are afraid to walk in parks for fear of being harassed by refugee men “lurking in bushes.” Shadow minister Robert Jenrick, seen as a potential future party leader, has been photographed at anti-migrant rallies attended by known far-right members and attaching flags to lamp-posts in defiance of councils that asked for them not to be placed on public infrastructure. Reform UK leader Nigel Farage called for widespread protests outside hotels housing new arrivals.

Paul Jackson, a history professor at the University of Northampton who studies far-right extremism, says: “What I find concerning is that this is creating an opportunity for the far right to grow. We’ve seen Labour politicians support concerns about protests at migration hotels, leaning into populist right-wing rhetoric. We’ve seen Reform politicians strongly legitimize these concerns.

“There’s a lot of worry about the far right feeling emboldened, and the lack of mainstream political voices offering a different perspective on migration. It would be good to see more moral leadership rather than pandering.”

Jackson points to several factors behind the current situation, including the rise of Donald Trump in the US. A key issue, he says, is the collapse in public trust in government responses to asylum and migration.

“We’ve seen a breakdown in trust in government policymaking on migration over the last generation, partly because mainstream politicians have failed to speak truthfully on this issue.”

Sunder Katwala, director of the thinktank British Future, which studies public attitudes on immigration and national identity, highlights the absence of government voices pushing back against the protests.

“The Labour government is much quieter about racism this year compared to last, because it doesn’t want to accidentally sound like it’s criticizing people with legitimate concerns,” he says. “The mainstream right and centre-left have stopped drawing clear boundaries, and I think Reform, the Conservatives, and sometimes the government are now crossing the line because they’re unwilling to criticize anyone, no matter what they say.”

Katwala notes that there has been no repeat of last year’s violence at protests, which have mostly been small, and points to polling showing that a similar proportion of people have “a lA majority of people in the UK express little or no sympathy for those crossing the Channel. Polls also show that similar numbers believe the UK should accept fewer refugees as think it should take more, though the proportion welcoming refugees has declined since 2023, according to YouGov.

While politics may be shifting to the right and anti-immigration voices may be growing louder, Katwala notes that long-term trends in British society show a strong movement toward tolerance across ethnic and religious lines—significantly more so than in other parts of Europe or the US.

One of the most powerful voices on this issue has been the family of Bebe King, one of the girls murdered in Southport. They condemned the “despicable” actions of far-right groups that attempted to exploit their tragedy for political gain. Speaking to the Guardian earlier this month, Bebe’s grandfather, Michael Weston King, urged ministers to reconsider plans to change the law to include suspects’ ethnicity, calling it an “apparent kowtowing to the likes of Farage and Reform,” which he described as “extremely disappointing, though perhaps not surprising.”

Katwala suggests that a significant silent majority remains tolerant and welcoming toward refugees, but ongoing dysfunction in the asylum system undermines this support. “Chaos isn’t good for advocates of refugee protection,” he says. “The left in this debate has a clear interest in the government demonstrating it can manage asylum while still accepting refugees.”

He adds, “The government must address the visible lack of control in the Channel and in the hotels where asylum seekers are housed. Failure to do so not only poses political risks but also threatens the principle of refugee protection itself.”

—

Contact us about this story

The best public interest journalism relies on firsthand accounts from informed sources. If you have information to share on this topic, you can contact us confidentially using the methods below.

Secure Messaging in the Guardian app
The Guardian app includes a secure messaging feature for submitting tips. Messages are end-to-end encrypted and hidden within routine app activity, making it difficult for anyone to detect that you are communicating with us.

If you don’t have the Guardian app, you can download it (iOS/Android) and select ‘Secure Messaging’ from the menu.

SecureDrop, instant messengers, email, telephone, and post
If you can safely use the Tor network without being monitored, you can send messages and documents via our SecureDrop platform.

For more details on secure contact methods and their pros and cons, visit theguardian.com/tips.

Illustration: Guardian Design / Rich Cousins

Was this helpful?
Thank you for your feedback.

This article was amended on 24 August 2025. The man charged over the alleged sexual assault of a 14-year-old girl is Ethiopian, not Syrian as previously stated.

Frequently Asked Questions
Frequently Asked Questions About Britains Far Right Growing Bolder

1 What is the far right in Britain
The far right refers to political groups and movements that hold extreme nationalist antiimmigrant and often racist views They typically oppose diversity and promote ideas of racial or cultural purity

2 Why is the far right growing bolder in Britain
Factors include economic uncertainty concerns about immigration social media amplification of extreme views and a sense that mainstream politics isnt addressing these issues effectively

3 What are some examples of farright groups in Britain
Groups like the British National Party Britain First and the English Defence League are wellknown though some have evolved or splintered into newer organizations

4 How does the far right attract supporters
They often use simplified messages blaming immigrants or minorities for societal problems exploit fears about identity and culture and leverage social media to spread their ideas

5 Is farright activity illegal in Britain
Not all farright activity is illegal but actions inciting hatred violence or discrimination based on race religion or other protected characteristics can be criminal under UK law

6 What impact does the far right have on communities
It can increase tensions foster division and sometimes lead to hate crimes intimidation or violence against minority groups

7 How can I recognize farright rhetoric or propaganda
Look for messages that scapegoat certain groups promote us vs them thinking use dehumanizing language or call for extreme actions against minorities

8 What should I do if I encounter farright activity or hate speech
Report it to authorities like the police or organizations such as Hope Not Hate or Tell MAMA Avoid engaging directly if it feels unsafe

9 Are farright views common in Britain
While most people reject extremism polls show some sympathy for certain farright ideas especially around immigration However support for violent extremism remains marginal

10 How is the government addressing the rise of the far right
Measures include monitoring groups enforcing hate crime laws funding counterextremism programs and working with communities to build resilience

11 Can farright ideas influence mainstream politics
Yes sometimes mainstream parties adopt tougher stances

Related Posts