.elementor-kit-7{--e-global-color-primary:#0F2A52;--e-global-color-secondary:#6B7280;--e-global-color-text:#111827;--e-global-color-accent:#1D6FE0;--e-global-color-fd26660:#C9A227;--e-global-color-033abaa:#E8C766;--e-global-color-083232b:#E8F1FC;--e-global-color-b362777:#D6382C;--e-global-color-0270874:#FFFFFF;--e-global-color-8b19d11:#F7F9FC;--e-global-color-3a0d3c4:#E5E7EB;--e-global-typography-primary-font-family:"Source Serif 4";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --montlior-navy:#0F2A52; --montlior-blue:#1D6FE0; --montlior-gold:#C9A227; --gold-bright:#E8C766; --ink:#111827; --meta-grey:#6B7280; --blue-tint:#E8F1FC; --breaking-red:#D6382C; --paper:#FFFFFF; --alt-surface:#F7F9FC; --rule:#E5E7EB; --font-masthead:Playfair Display; --font-headline:Source Serif 4; --font-body:Inter; --font-kicker:Archivo; } /* Start custom CSS *//* Montlior News design tokens — the fluid type and space scales the whole site reads from. Change a value here and every heading, gap and padding that uses it follows, at every screen width. SELECTOR NOTE — why `.elementor .e-con.montlior-*` and not just `.montlior-*`: Elementor emits every global class as `.elementor .montlior-x` (specificity 0,2,0) in a stylesheet loaded AFTER this one, so a plain `.montlior-x` here loses. Adding `.e-con` — the class every Elementor container already carries — puts these rules at 0,3,0 so the layout wins. For the same reason child .elementor-kit-7s name `.e-con` explicitly rather than `> *`, which the CSS parser rewrites in a way that stops pseudo-element rules matching at all. */ :root { --step--1: clamp(0.72rem, 0.685rem + 0.18vw, 0.845rem); --step-0: clamp(0.95rem, 0.915rem + 0.18vw, 1.075rem); --step-1: clamp(1.08rem, 1.019rem + 0.31vw, 1.29rem); --step-2: clamp(1.27rem, 1.148rem + 0.61vw, 1.7rem); --step-3: clamp(1.52rem, 1.322rem + 0.99vw, 2.21rem); --step-4: clamp(1.86rem, 1.51rem + 1.75vw, 3.08rem); --step-5: clamp(2.2rem, 1.72rem + 2.4vw, 3.88rem); --sp-1: clamp(0.25rem, 0.23rem + 0.1vw, 0.32rem); --sp-2: clamp(0.5rem, 0.46rem + 0.2vw, 0.64rem); --sp-3: clamp(0.75rem, 0.69rem + 0.3vw, 0.96rem); --sp-4: clamp(1rem, 0.92rem + 0.4vw, 1.28rem); --sp-5: clamp(1.5rem, 1.38rem + 0.6vw, 1.92rem); --sp-6: clamp(2.25rem, 2.07rem + 0.9vw, 2.88rem); --sp-7: clamp(3.4rem, 3.1rem + 1.4vw, 4.4rem); --wrap-max: 1360px; --wrap-gutter: clamp(1rem, 3.5vw, 2.5rem); --measure: 65ch; --kicker-tracking: 0.1em; --navy-soft: rgba(15, 42, 82, .12); /* Font stacks. Elementor stores one family name per font token and drops any font-family declaration that carries a fallback list, so the fallbacks are restored here. Redefining the same token names means every widget and global class keeps using var(--font-*) and gains the fallbacks for free. */ --font-masthead: "Playfair Display", "Source Serif 4", Georgia, serif; --font-headline: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-kicker: "Archivo", "Inter", "Segoe UI", sans-serif; } /* Base typography. Elementor leaves the document in the parent theme's 16px system font, and every text widget then carries its own family and size — which looks right until something measures in `ch` or `em`. The in-article advertisement is capped at 65ch and came out 134px narrower than the original for exactly that reason. So the body is set to the paper's own body face and fluid size, as the custom theme sets it, and anything without an explicit size inherits something correct. */ body { font-family: var(--font-body); font-size: var(--step-0); font-weight: 400; line-height: 1.55; color: var(--ink); background-color: var(--paper); } h1, h2, h3, h4 { font-family: var(--font-headline); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; } /* Loop containers ship with 10px of side padding, which quietly narrows every grid inside them — the section-block columns came out 6.7px short of the original until this was zeroed. The newspaper grids supply all their own spacing, so no loop on this site wants padding. */ .elementor .e-con.e-collection-loop-base { padding: 0; } /* -------------------------------------------------------------------------- Lead package — hero | two seconds | headline list -------------------------------------------------------------------------- */ .elementor .e-con.montlior-lead-second-grid > * + * { border-top: 1px solid var(--rule); padding-top: var(--sp-4); } @container leadzone (min-width: 620px) { .elementor .e-con.montlior-lead-package { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero hero" "second list"; } .elementor .e-con.montlior-lead-hero { grid-area: hero; } .elementor .e-con.montlior-lead-second { grid-area: second; } .elementor .e-con.montlior-lead-second-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .elementor .e-con.montlior-lead-second-grid > * + * { border-top: 0; padding-top: 0; border-left: 1px solid var(--rule); padding-left: var(--sp-4); } .elementor .e-con.montlior-lead-list { grid-area: list; border-top: 3px solid var(--montlior-navy); padding-top: var(--sp-3); } } @container leadzone (min-width: 1000px) { .elementor .e-con.montlior-lead-package { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero second list"; } .elementor .e-con.montlior-lead-hero { border-right: 1px solid var(--rule); padding-right: var(--sp-5); } .elementor .e-con.montlior-lead-second-grid { grid-template-columns: minmax(0, 1fr); } .elementor .e-con.montlior-lead-second-grid > * + * { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--sp-4); } .elementor .e-con.montlior-lead-list { border-top: 0; padding-top: 0; border-left: 1px solid var(--rule); padding-left: var(--sp-5); } } /* -------------------------------------------------------------------------- Section block — one lead story beside a stack of three -------------------------------------------------------------------------- */ @container secblock (min-width: 560px) { .elementor .e-con.montlior-section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .elementor .e-con.montlior-section-grid > *:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); padding-bottom: var(--sp-4); } } @container secblock (min-width: 920px) { .elementor .e-con.montlior-section-grid { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); grid-template-areas: "lead c1" "lead c2" "lead c3"; } .elementor .e-con.montlior-section-grid > *:first-child { grid-area: lead; border-bottom: 0; padding-bottom: 0; border-right: 1px solid var(--rule); padding-right: var(--sp-4); } .elementor .e-con.montlior-section-grid > *:nth-child(2) { grid-area: c1; } .elementor .e-con.montlior-section-grid > *:nth-child(3) { grid-area: c2; border-top: 1px solid var(--rule); padding-top: var(--sp-4); } .elementor .e-con.montlior-section-grid > *:nth-child(4) { grid-area: c3; border-top: 1px solid var(--rule); padding-top: var(--sp-4); } } /* One loop, two card shapes. Every cell in a section block carries the same widgets; the FIRST cell is the lead story and the rest become compact cards. That is what lets a single loop template drive the whole block — publish a new story in the section and it leads automatically, with no second template to keep in step. */ .elementor .e-con.montlior-story-cell { container-type: inline-size; min-width: 0; } .elementor .e-con.montlior-section-grid > *:not(:first-child) .montlior-frame { aspect-ratio: 1 / 1; } .elementor .e-con.montlior-section-grid > *:not(:first-child) .montlior-headline { font-size: var(--step-1); } .elementor .e-con.montlior-section-grid > *:not(:first-child) .montlior-standfirst { display: none; } .elementor .e-con.montlior-section-grid > *:not(:first-child) .montlior-meta > *:nth-child(n+2) { display: none; } /* Compact card: thumbnail beside the headline once ITS OWN cell is wide enough, stacked below that, so the thumbnail is never reduced to a postage stamp. Each cell is its own container, exactly as the original. */ @container (min-width: 400px) { .elementor .e-con.montlior-section-grid > *:not(:first-child) .e-con.montlior-story { display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr); align-items: start; gap: var(--sp-3); } } /* Lead story turns horizontal — picture left, words right — once its own cell is wide enough to carry both. Stacking it instead costs roughly 300px of height per section block, which is what pushed the first page of the conversion a third taller than the original. */ @container (min-width: 660px) { .elementor .e-con.montlior-section-grid > *:first-child .e-con.montlior-story { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; } } /* -------------------------------------------------------------------------- Content + rail. The rail drops under the stories when the page column is too narrow to carry both. The advertisement — and only the advertisement — sticks, so its brand line and call to action stay in view instead of being pushed off screen along with the whole rail. -------------------------------------------------------------------------- */ @container page (min-width: 960px) { .elementor .e-con.montlior-with-rail { grid-template-columns: minmax(0, 2.55fr) minmax(0, 1fr); } .elementor .e-con.montlior-rail > .montlior-ad-rail { position: sticky; top: 76px; } } /* -------------------------------------------------------------------------- Billboard advertisement: on a wide unit the copy sits over the creative's empty third behind a navy gradient; narrower than that the ultrawide artwork crops to 16:9 instead of becoming an unreadable sliver. -------------------------------------------------------------------------- */ @container (min-width: 620px) { .elementor .e-con.montlior-ad-media { grid-area: 1 / 1; } .elementor .e-con.montlior-ad-copy { grid-area: 1 / 1; width: min(50%, 32rem); background: linear-gradient(90deg, rgba(15, 42, 82, 0.88) 0%, rgba(15, 42, 82, 0.72) 62%, rgba(15, 42, 82, 0) 100%); padding-right: clamp(2rem, 6cqi, 5rem); } } @container (max-width: 619px) { /* !important so it still beats the per-creative aspect-ratio set on the widget itself — each creative carries its own true ratio. */ .elementor .e-con.montlior-ad-media { aspect-ratio: 16 / 9 !important; } } .elementor .montlior-ad-inner:hover .montlior-ad-cta { border-bottom-color: #fff; } /* -------------------------------------------------------------------------- Odds and ends CSS controls cannot reach from a widget panel. -------------------------------------------------------------------------- */ /* Advertisement carousel: a native horizontal scroller with snap points, so it is swipeable with no JavaScript at all. The scrollbar is hidden because the snap points already say there is more to see. */ .elementor .montlior-ad-viewport::-webkit-scrollbar { display: none; } /* Breaking-news ticker. The headline list is published twice and the track slides exactly half its width, so the loop is seamless with no JavaScript. It pauses on hover and on keyboard focus, and stops entirely for anyone who has asked for reduced motion — where it becomes a plain scroller. */ .elementor .montlior-breaking-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: breaking-pulse 1.6s ease-in-out infinite; } .elementor .e-con.montlior-ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .elementor .e-con.montlior-ticker-track { animation: montlior-ticker-scroll 52s linear infinite; } .elementor .e-con.montlior-ticker:hover .montlior-ticker-track, .elementor .e-con.montlior-ticker:focus-within .montlior-ticker-track { animation-play-state: paused; } @keyframes montlior-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--mn-ticker-distance, 50%))); } } .elementor .montlior-ticker-item::after { content: ""; width: 5px; height: 5px; background: var(--navy-soft); rotate: 45deg; flex: none; } @media (prefers-reduced-motion: reduce) { .elementor .e-con.montlior-ticker-track { animation: none; } .elementor .e-con.montlior-ticker { overflow-x: auto; } } /* Atomic grid containers default to two equal rows, which silently doubles the height of any grid whose content is a single row — it made the footer 400px taller than it should be. */ .elementor .e-con.e-grid-base { grid-template-rows: auto; } /* Most Read numerals. Elementor's style engine keeps a literal `content` string but strips `content: counter(...)`, so the ranking numbers have to be declared here rather than on the global class — without this the numeral never renders and the headline falls into the 2ch counter column and wraps one letter per line. */ .elementor .e-con.montlior-mostread-list { counter-reset: mostread; } .elementor .e-con.montlior-mostread-list > * { counter-increment: mostread; } .elementor .e-con.montlior-mostread-list > .e-con::before { content: counter(mostread); position: static; font-family: var(--font-headline); font-weight: 700; font-size: var(--step-3); line-height: 0.9; color: var(--montlior-blue); font-variant-numeric: lining-nums; } /* Headline list. The global loop-padding reset above would otherwise strip the rhythm out of these rows, so the spacing is restated at a specificity that beats it. The kicker is sized against the body step, as in the original, not against its own already-reduced font size. */ .elementor .e-con.montlior-headline-list > .e-con { padding-block: var(--sp-3); border-bottom: 1px solid var(--rule); } .elementor .e-con.montlior-headline-list > .e-con:first-child { padding-top: 0; } .elementor .e-con.montlior-headline-list > .e-con:last-child { border-bottom: 0; padding-bottom: 0; } .elementor .e-con.montlior-headline-list .montlior-kicker { font-size: calc(var(--step-0) * 0.72); } /* Utility-bar search icon. Elementor strips `<`, `>` and `#` out of a data URI, which left the original inline SVG malformed and invisible. The glyph is percent-encoded here and painted as a mask over currentColor, so it also picks up the link's hover colour for free. */ .elementor a.montlior-utility-search::before { content: ""; width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / contain no-repeat; } /* Advertisement slider controls. The arrows and the dot rail are real widgets; the script in Elementor > Custom Code wires them to the scroller and builds one dot per slide. */ .elementor .e-con.montlior-ad-viewport { scroll-behavior: smooth; } .elementor .montlior-ad-nav::before { content: ""; width: 13px; height: 13px; flex: none; background-color: currentColor; -webkit-mask: var(--mn-chevron) center / contain no-repeat; mask: var(--mn-chevron) center / contain no-repeat; } .elementor .montlior-ad-nav-prev { --mn-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E"); } .elementor .montlior-ad-nav-next { --mn-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); } .elementor .montlior-ad-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--rule); cursor: pointer; transition: background 0.2s ease, width 0.2s ease; } .elementor .montlior-ad-dot[aria-selected="true"] { background: var(--montlior-navy); width: 18px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .elementor .e-con.montlior-ad-viewport { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- Declarations Elementor's style engine silently DROPS from a global class. Every one of these was written into the class and is simply absent from the emitted stylesheet — margins and single-side borders are the usual casualties. The missing `margin-bottom` on the section head is what left each block's rule sitting flat against its lead photograph. These are restated here, where raw CSS is stored verbatim. Checked against the generated CSS, not assumed: if you edit the matching value in the Elementor class editor and nothing changes, the declaration is being dropped again and belongs in this block. -------------------------------------------------------------------------- */ .elementor .e-con.montlior-section-head { margin-bottom: var(--sp-4); } .elementor .montlior-mostread-title { margin-bottom: var(--sp-2); border-bottom: 3px solid var(--montlior-navy); } .elementor .montlior-ad-cta { margin-top: 0.5em; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.45); } .elementor .montlior-opinion-title { margin-block: 0.15em 0.35em; } .elementor .e-con.montlior-ad { margin-block: var(--sp-6); border-top: 1px solid var(--rule); } .elementor .e-con.montlior-ad-rail { margin-block: 0; border-top: 1px solid var(--rule); } /* Section navigation: a horizontally scrollable strip at every width, never a hamburger. The auto margins centre it while it fits and release it to scroll when it does not, which is how the original behaves on a phone. */ .elementor .montlior-section-nav .elementor-nav-menu, .elementor .e-con .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap; } /* -------------------------------------------------------------------------- Ticker travel. The track must be as wide as its content or translateX(-50%) moves half a CONTAINER width instead of half the headline list — which is what made the marquee crawl, and crawl worse on a narrow screen. Elementor containers default to width:100% in a stylesheet loaded after the kit CSS, so this needs the extra .e-con to win. The script then sets an exact pixel distance, which is immune to the problem entirely. -------------------------------------------------------------------------- */ .elementor .e-con.montlior-ticker-track { width: max-content; } /* -------------------------------------------------------------------------- Condensed masthead: slides down once the nameplate scrolls away, carrying the mark, the sections and search. Hidden by transform rather than display, so it animates and stays out of the layout. -------------------------------------------------------------------------- */ /* Ticker pause control. One glyph swapped through a custom property rather than two stacked icons: the button reports its state in aria-pressed and the mask follows it. Hidden until the script runs, because without JavaScript there is nothing to pause. */ .elementor .montlior-ticker-pause { --mn-pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E"); } .elementor .montlior-ticker-pause[aria-pressed="true"] { --mn-pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E"); } .elementor .montlior-ticker-pause::before { content: ""; width: 11px; height: 11px; flex: none; background-color: currentColor; -webkit-mask: var(--mn-pause-icon) center / contain no-repeat; mask: var(--mn-pause-icon) center / contain no-repeat; } .elementor .e-con.montlior-ticker.is-paused .montlior-ticker-track { animation-play-state: paused; } .elementor .e-con.montlior-condensed { transform: translateY(-105%); transition: transform 0.25s ease; } .elementor .e-con.montlior-condensed.is-visible { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .elementor .e-con.montlior-condensed { transition: none; } } .elementor .montlior-condensed-logo img { width: 34px; height: 34px; border-radius: 7px; } .elementor .e-con.montlior-condensed-nav .elementor-nav-menu { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .elementor .e-con.montlior-condensed-nav .elementor-nav-menu::-webkit-scrollbar { display: none; } .elementor .e-con.montlior-condensed-nav .elementor-nav-menu a.elementor-item { display: block; padding: 0.85em clamp(0.55em, 1.4vw, 1.1em); color: #fff; text-decoration: none; font-family: var(--font-kicker); font-size: var(--step--1); font-weight: 600; line-height: 1.167; text-transform: uppercase; letter-spacing: var(--kicker-tracking); white-space: nowrap; } .elementor .e-con.montlior-condensed-nav .elementor-nav-menu a.elementor-item:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; } .elementor .e-con.montlior-condensed-nav .elementor-nav-menu a.elementor-item.elementor-item-active { box-shadow: inset 0 -3px 0 var(--montlior-blue); } .elementor a.montlior-condensed-search::before { content: ""; width: 17px; height: 17px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / contain no-repeat; } /* The live badge pulse. */ @keyframes breaking-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .elementor .montlior-live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: breaking-pulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .elementor .montlior-live-badge::before { animation: none; } } /* Newsletter field: the focus ring sits on the border, not outside it. */ .elementor .montlior-newsletter-input:focus-visible { outline-offset: 0; } /* ========================================================================== ARTICLE PAGE (Theme Builder → Single Post) ========================================================================== */ /* Centring an article column is a margin, and margins are the declaration Elementor's style engine drops most reliably — see the block above. */ .elementor .e-con.montlior-article-col { margin-inline: auto; } .elementor .e-con.montlior-article-body { margin-inline: auto; } .elementor .e-con.montlior-article-hero { margin-block: var(--sp-4); } .elementor .e-con.montlior-byline-row { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .elementor .montlior-figcaption { border-bottom: 1px solid var(--rule); } /* Article prose. the_content() arrives inside a widget, so the rhythm of the piece has to be addressed through the wrapper Elementor puts around it rather than on the body container — the paragraphs are grandchildren, not children. Everything here is the shape of EDITORIAL markup (a dropcap, a pull quote, a subheading), which is why it is declared once for the site instead of per widget: there is no widget to select. */ /* The Post Content widget has NO inner wrapper — the_content()'s paragraphs are its direct children — and nothing has zeroed their browser default margins, which on a blockquote are 40px a side. The original theme's reset did that globally; here it has to be said for the prose. */ .elementor .montlior-article-prose * { margin: 0; } /* Same for a journalist's biography, which is also Post Content: the browser's paragraph margin has to go before the profile column measures correctly. */ .elementor .montlior-profile-bio * { margin: 0; } .elementor .montlior-profile-bio > * + * { margin-top: var(--sp-3); } .elementor .montlior-article-prose > * + * { margin-top: var(--sp-4); } .elementor .montlior-article-prose a { color: var(--montlior-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } .elementor .montlior-article-prose a:hover { color: var(--montlior-navy); } .elementor .montlior-article-prose h2 { font-family: var(--font-headline); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); font-size: var(--step-2); margin-top: var(--sp-5); } .elementor .montlior-article-prose h3 { font-family: var(--font-headline); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); font-size: var(--step-1); margin-top: var(--sp-4); } .elementor .montlior-article-prose ul, .elementor .montlior-article-prose ol { padding-left: 1.2em; } .elementor .montlior-article-prose .dropcap::first-letter { font: 700 3.4em/0.78 var(--font-headline); color: var(--montlior-navy); float: left; padding: 0.06em 0.12em 0 0; } .elementor .montlior-article-prose .pull-quote { border-left: 4px solid var(--montlior-blue); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); margin-block: var(--sp-5); } .elementor .montlior-article-prose .pull-quote p { font: italic 600 var(--step-2) var(--font-headline); line-height: 1.35; color: var(--montlior-navy); } .elementor .montlior-article-prose .pull-quote cite { display: block; margin-top: var(--sp-2); font: 500 var(--step--1) var(--font-body); color: var(--meta-grey); } .elementor .montlior-article-prose figure { margin-block: var(--sp-4); } .elementor .montlior-article-prose figcaption { font: 400 var(--step--1) var(--font-body); color: var(--meta-grey); padding-top: var(--sp-2); } /* Related story and author card: boxes whose outer margins and single-side accent rule both get stripped from a global class. */ .elementor .e-con.montlior-related-box { margin-block: var(--sp-5); border-left: 4px solid var(--montlior-navy); } .elementor .e-con.montlior-author-card { margin-block: var(--sp-5); } .elementor .montlior-author-bio { margin-top: var(--sp-1); } .elementor .e-con.montlior-tag-row { margin-block: var(--sp-5); } /* Chip rows. The chips in a tag row or a journalist's beats ARE the record's own data — there is no version of them a designer could place by hand — so they arrive from one dynamic field. The chip itself is styled here, which keeps it adjustable in Site Settings without touching the plugin. */ .elementor .montlior-chip-row a { display: inline-block; font: 500 var(--step--1) var(--font-body); color: var(--montlior-navy); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.4em 1em; } .elementor .montlior-chip-row a:hover, .elementor .montlior-chip-row a:focus-visible { background: var(--blue-tint); border-color: var(--montlior-blue); } /* Share row. One mask per service over currentColor, for the same reason the search glyph is a mask: Elementor strips the angle brackets and hashes out of an inline SVG data URI, and a mask inherits the button's hover colour for free. */ .elementor .montlior-share-link::before { content: ""; width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: var(--mn-share-icon) center / contain no-repeat; mask: var(--mn-share-icon) center / contain no-repeat; } .elementor .montlior-share-x { --mn-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23.2 22h-6.3l-4.9-6.4L6.4 22H3.3l7.3-8.3L1.2 2h6.4l4.4 5.9L18.9 2Zm-1.1 18h1.7L7.7 3.8H5.8L17.8 20Z'/%3E%3C/svg%3E"); } .elementor .montlior-share-facebook { --mn-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.6-1.6h1.7V4.2c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.4H7.4V14h2.7v8h3.4Z'/%3E%3C/svg%3E"); } .elementor .montlior-share-email { --mn-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } .elementor .montlior-share-copy { --mn-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5'/%3E%3Cpath d='M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7L12.5 19'/%3E%3C/svg%3E"); } /* The copy button reports success in place, so it needs no toast. */ .elementor .montlior-share-copy.is-copied { background-color: var(--blue-tint); border-color: var(--montlior-blue); color: var(--montlior-blue); } /* ========================================================================== SECTION ARCHIVE (Theme Builder → Archive) ========================================================================== */ .elementor .e-con.montlior-section-header { border-bottom: 3px solid var(--montlior-navy); margin-bottom: var(--sp-5); } .elementor .montlior-section-intro { margin-top: var(--sp-2); } .elementor .e-con.montlior-section-lead-zone { margin-bottom: var(--sp-6); } /* Card grid. auto-fit rather than a fixed column count, so ONE loop serves the full-width band under an article and the narrower column beside the rail without a second template. grid-auto-rows is reset because a loop layout ships with 1fr rows, which stretches every card to the tallest. */ .elementor .e-con.montlior-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: auto; gap: var(--sp-5) var(--sp-4); } /* Pagination: Elementor's loop offers Previous/Next, and these are the original's chips. The widget ships with its own padding and top margin, which would stack on top of the band's. */ .elementor .e-con.montlior-pagination { margin-block-start: 0; padding-inline: 0; } /* The rail newsletter's navy cap rule, over the hairline border on the class. */ .elementor .e-con.montlior-rail-newsletter { border-top: 3px solid var(--montlior-navy); } .elementor .montlior-rail-newsletter-title { margin-bottom: var(--sp-1); } .elementor .montlior-rail-newsletter-note { margin-bottom: var(--sp-3); } /* ========================================================================== JOURNALIST PROFILE (Theme Builder → Single: Journalist) ========================================================================== */ @container page (min-width: 760px) { .elementor .e-con.montlior-profile-head { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; } } .elementor .e-con.montlior-profile-latest { margin-block: var(--sp-6); } .elementor .montlior-profile-meta strong { color: var(--montlior-navy); font-weight: 600; } /* Result list: a hairline between rows, and each row its own container so the thumbnail moves beside the headline on ITS OWN width — the same list runs in the full page column on a profile and in the narrow one on search. */ .elementor .e-con.montlior-result-item { container-type: inline-size; border-bottom: 1px solid var(--rule); } @container (min-width: 480px) { .elementor .e-con.montlior-result-card { grid-template-columns: 132px minmax(0, 1fr); align-items: start; } } /* -------------------------------------------------------------------------- Archive river: lead story, advertisement, then the rest of the section. All three come from ONE query — the lead IS the newest story — so the loop is made transparent with display:contents and its cells become items of the grid that also holds the advertisement and the pager. `order` then places them in the newspaper's order. The alternative, two loops, renders the same page of stories twice and hides half of it. A Loop with display:contents has no box of its own, so padding or a background set on the LOOP does nothing — style the grid around it instead. -------------------------------------------------------------------------- */ .elementor .e-con.montlior-archive-river { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); grid-auto-rows: auto; gap: var(--sp-5) var(--sp-4); } .elementor .e-con.montlior-archive-river > .e-collection-loop-base, .elementor .e-con.montlior-archive-river > .e-collection-loop-base > .e-collection-loop-layout-base { display: contents; } .elementor .e-con.montlior-archive-river > .montlior-ad { grid-column: 1 / -1; order: 1; /* The row gap is the CARD gap; the lead and the advertisement sit a step further apart, exactly as the original's margins do. */ margin-block: 0 calc(var(--sp-6) - var(--sp-5)); } .elementor .e-con.montlior-archive-river > .e-collection-loop-base > .e-pagination-base { grid-column: 1 / -1; order: 3; } .elementor .e-con.montlior-archive-river > .e-collection-loop-base > .e-collection-loop-empty-state-base { grid-column: 1 / -1; order: 2; } /* Every cell is a card... */ .elementor .e-con.montlior-archive-river .e-con.montlior-story-cell { order: 2; } .elementor .e-con.montlior-archive-river .montlior-headline { font-size: var(--step-1); } .elementor .e-con.montlior-archive-river .montlior-standfirst { display: none; } .elementor .e-con.montlior-archive-river .montlior-meta > *:nth-child(n+2) { display: none; } /* ...except the first story of the first page, which leads. `body:not(.paged)` is how the original behaves: page two onwards is a uniform river, with no second story promoted to a lead it did not earn. */ body:not(.paged) .elementor .e-con.montlior-archive-river .e-con.montlior-story-cell:first-child { grid-column: 1 / -1; order: 0; margin-bottom: calc(var(--sp-6) - var(--sp-5)); } body:not(.paged) .elementor .e-con.montlior-archive-river .e-con.montlior-story-cell:first-child .montlior-headline { font-size: var(--step-3); } body:not(.paged) .elementor .e-con.montlior-archive-river .e-con.montlior-story-cell:first-child .montlior-standfirst { display: block; } body:not(.paged) .elementor .e-con.montlior-archive-river .e-con.montlior-story-cell:first-child .montlior-meta > * { display: revert; } @container (min-width: 660px) { body:not(.paged) .elementor .e-con.montlior-archive-river .e-con.montlior-story-cell:first-child .e-con.montlior-story { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; } } /* ========================================================================== SEARCH RESULTS (Theme Builder → Search Results) ========================================================================== */ .elementor .e-con.montlior-search-hero { border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-5); } .elementor .montlior-search-h1 { margin-bottom: var(--sp-3); } .elementor .montlior-results-meta { margin-bottom: var(--sp-4); } .elementor .montlior-results-meta strong { color: var(--ink); } /* -------------------------------------------------------------------------- Margins Elementor drops from the advertisement widths that centre themselves, and the journalist contact links. -------------------------------------------------------------------------- */ .elementor .e-con.montlior-ad-inarticle { margin-inline: auto; } .elementor .e-con.montlior-ad-centred { margin-inline: auto; max-width: 420px; } .elementor .montlior-profile-meta a { color: var(--montlior-blue); } /* A profile row with nothing in it prints its own label and stops — so the row goes when its value does. This is what lets one template serve a journalist who has an award and one who has not. */ .elementor .e-con.montlior-profile-meta-row:not(:has(.montlior-profile-meta-value:not(:empty))) { display: none; } /* An empty dynamic field still renders its element, and in a grid an empty row still costs a gap — so a story that has not been revised does not pay 2px for the "Updated" line it is not showing. */ .elementor .e-con.montlior-byline-times p:empty { display: none; } /* Elementor keeps the unavailable pager control in the markup and marks it .e--disabled; the original simply does not print one, so page one shows "Next" alone and the last page shows "Previous" alone. */ .elementor .e-con.montlior-pagination .e--disabled { display: none; } /* -------------------------------------------------------------------------- Article fixes found in side-by-side review against the original. -------------------------------------------------------------------------- */ /* Share glyphs sat in the top-left of their circles. Every Elementor container's ::before is already position:absolute with inset:0, so giving one a width and a height pins it to the corner instead of stretching it. auto margins against a zeroed inset centre it exactly, and no longer depend on the flex box behaving. */ .elementor .e-con.montlior-share-link::before { position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; } /* The related headline is a link inside the article body, and in the original every link in the body is blue. Scoping the body link colour to the prose widget left this one in ink. */ .elementor .montlior-related-title { color: var(--montlior-blue); } .elementor .montlior-related-title:hover, .elementor .montlior-related-title:focus-visible { color: var(--montlior-navy); } /* A writer with no journalist profile — the Newsdesk, agency copy — has no portrait, and the original prints no face at all rather than a placeholder. Elementor's Image widget has no "hide when empty", so the fallback avatar is recognised by its source and the circle goes with it. */ .elementor .e-con.montlior-byline-face:has(img[src*="gravatar"]) { display: none; } /* Same rule for the author card, which the original omits entirely when there is no profile to describe. */ .elementor .e-con.montlior-author-card:has(.montlior-author-bio:empty) { display: none; } /* Opinion and analysis set their standfirst in the headline serif, italic — the columnist's voice rather than the reporter's, and one template still serves both. The section is read off the breadcrumb's own link, because WordPress does NOT put a category class on the body of a single post: that comes from post_class() on the article, which an Elementor container has no reason to carry. */ .elementor .e-con.montlior-article-header:has(.montlior-breadcrumb a[href*="/category/opinion"]) .montlior-article-standfirst { font-family: var(--font-headline); font-style: italic; } /* -------------------------------------------------------------------------- STANDARD PAGE (Theme Builder → Single Page) About, Advertise, Careers, Live Coverage and the legal pages all run through one template on their own content, as in the original. "Editorial Standards", "Corrections" and "Contact" are anchor sections inside About, not pages of their own — which is why the footer links carry a #fragment. -------------------------------------------------------------------------- */ .elementor .montlior-prose-body * { margin: 0; } .elementor .montlior-prose-body > * + * { margin-top: var(--sp-3); } .elementor .montlior-prose-body h2 { font-family: var(--font-headline); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; font-size: var(--step-2); color: var(--montlior-navy); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--rule); } .elementor .montlior-prose-body h3 { font-family: var(--font-headline); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; font-size: var(--step-1); color: var(--ink); margin-top: var(--sp-4); } .elementor .montlior-prose-body ul, .elementor .montlior-prose-body ol { padding-left: 1.2em; } .elementor .montlior-prose-body li + li { margin-top: var(--sp-2); } .elementor .montlior-prose-body a { color: var(--montlior-blue); text-underline-offset: 3px; } .elementor .montlior-prose-body a:hover { color: var(--montlior-navy); } /* A page with no excerpt must not leave the header's gap behind it. */ .elementor .montlior-section-intro:empty { display: none; } /* -------------------------------------------------------------------------- ABOUT PAGE (built as an Elementor page, not a template over stored HTML) Every line of it is a widget the client can select and edit — headings are Heading widgets, body copy is Paragraph widgets, portraits are Image widgets. Only the things a widget panel cannot say live here. -------------------------------------------------------------------------- */ /* The prose rhythm: the original spaces siblings rather than giving every block a margin of its own, so the first one sits flush with the column. */ .elementor .e-con.montlior-prose > * + * { margin-top: var(--sp-3); } /* Bullets are one widget each, so the marker is drawn rather than inherited from a