/* ==========================================================================
barakaissabu.com — front-end layer
Article cards, video facade, photo marquee, and the site-wide motion.
Everything that moves uses transform and opacity only. Animating anything
else (height, top, width) forces the browser to re-lay-out the page on every
frame, which is where scroll jank comes from.
Palette and type are the Astra globals already in use on the site — this
file introduces no new colours and no new fonts. The brand colour is
Signature Orange #F7941E from 00-shared/assets/brand-guidelines.md, and
since 2026-08-11 it is what Astra's own palette holds in slot 0, with
Interaction Orange #F18508 in slot 1.
Named --brk-orange rather than something role-based because this orange is
the one non-negotiable brand constant, not a slot that gets reassigned.
Note --brk-accent is already taken, by the Instrument Serif accent face in
baraka-type.css.
--brk-orange-rgb carries the same colour as a bare "r, g, b" triplet so the
translucent variants below can be derived from one place instead of being
restated as literals. If the orange ever changes, both lines change together
and nothing else does.
========================================================================== */
/* ==========================================================================
0 · Brand tokens
There used to be a block here forcing --ast-global-color-0/1 to Signature
Orange, because Astra's palette still held the inherited gold and the REST
API cannot reach it. Removed 2026-08-11: the palette itself now holds
#F7941E and #F18508, so Astra and Elementor emit orange on their own and
the override had nothing left to override.
That matters beyond tidiness. While the override existed, the Customizer
showed one colour and the site rendered another — the same class of drift
that started this work, pointed the other way. Astra's palette is the
theme's source of truth again, so a colour picked in the Customizer from
now on is matched against the swatch the site actually uses.
========================================================================== */
:root {
--brk-orange: #F7941E;
--brk-orange-rgb: 247, 148, 30;
/* Astra global colour 1 — hover and current-page states. Mirrored here for
completeness; the front-end layer leans on Astra's own rules for those,
so nothing in this file reads it yet. */
--brk-orange-deep: #F18508;
--brk-black: #000;
--brk-panel: #131313;
--brk-panel-hi: #1b1b1b;
--brk-line: rgba(255, 255, 255, 0.12);
--brk-line-hi: rgba(var(--brk-orange-rgb), 0.55);
--brk-text: rgba(255, 255, 255, 0.8);
--brk-text-dim: rgba(255, 255, 255, 0.52);
--brk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--brk-reveal-duration: 0.8s;
}
/* ==========================================================================
1 · Scroll reveal
The .brk-anim class is added to by JavaScript. Without it nothing is
ever hidden, so a visitor with JS blocked, or one whose script fails to
load, still sees a complete page rather than a black rectangle.
========================================================================== */
.brk-anim .brk-reveal {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition:
opacity var(--brk-reveal-duration) var(--brk-ease),
transform var(--brk-reveal-duration) var(--brk-ease);
transition-delay: var(--brk-delay, 0s);
}
.brk-anim .brk-reveal.is-in {
opacity: 1;
/* Reset to none rather than translate3d(0,0,0): a lingering transform makes
the element a containing block, which quietly breaks position: fixed and
position: sticky for anything inside it. */
transform: none;
}
/* ==========================================================================
2 · Header — fixed, and it earns a background once you scroll
Astra renders the transparent header at position: absolute. Fixed keeps the
identical resting position while letting the nav follow the reader down.
========================================================================== */
.site-header#masthead {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
transition: background-color 0.4s var(--brk-ease), box-shadow 0.4s var(--brk-ease);
}
.brk-header-scrolled .site-header#masthead {
background-color: rgba(0, 0, 0, 0.82);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
box-shadow: 0 1px 0 var(--brk-line-hi), 0 12px 32px rgba(0, 0, 0, 0.45);
}
.brk-header-scrolled .site-header#masthead .ast-primary-header-bar {
transition: min-height 0.4s var(--brk-ease), padding 0.4s var(--brk-ease);
}
/* An open mobile drawer inside a fixed header can run off the bottom of a
short screen with no way to reach the last item. */
.site-header#masthead .ast-mobile-header-wrap {
max-height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
}
/* The mobile menu panel was white, and every link inside it is white.
Astra prints background-color:#ffffff on .ast-mobile-header-content while
the menu links read --ast-global-color-2, which is also #ffffff. Verified on
the live page with the drawer open: eight links, seven of them white on
white, and only the current page visible — in the accent, on white, at
2.28:1. The panel was never restyled when the rest of the site went dark.
Set to the same panel colour the cards and the footer use, so the drawer
belongs to the site rather than to the theme default. The #masthead prefix
outranks Astra's two-class selector, so no !important is needed. */
.site-header#masthead .ast-mobile-header-wrap .ast-mobile-header-content,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
background-color: var(--brk-panel);
}
/* The close button is only printed for the popup-drawer layout, which this
header does not currently use — but it is #3a3a3a, which would be near
invisible against the panel above if the header layout ever changes. */
.ast-mobile-popup-drawer.active .menu-toggle-close {
color: var(--brk-text);
}
/* Nav: an orange rule sweeping in from the left, and staying put on the current
page. Uses a pseudo-element so it never affects layout. */
.main-header-menu .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-item > .menu-link {
position: relative;
}
.main-header-menu .menu-item > .menu-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.35em;
height: 1px;
background: var(--brk-orange);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.42s var(--brk-ease);
}
.main-header-menu .menu-item > .menu-link:hover::after,
.main-header-menu .menu-item > .menu-link:focus-visible::after,
.main-header-menu .current-menu-item > .menu-link::after {
transform: scaleX(1);
}
/* ==========================================================================
3 · Hero
========================================================================== */
/* The name, eyebrow, quote and social row arrive in sequence rather than all
at once. Scoped to the front page so no other hero inherits it. */
.brk-anim body.home .elementor > .elementor-element:first-child .elementor-widget {
animation: brk-hero-in 1.1s var(--brk-ease) both;
}
.brk-anim body.home .elementor > .elementor-element:first-child .elementor-widget:nth-child(1) { animation-delay: 0.15s; }
.brk-anim body.home .elementor > .elementor-element:first-child .elementor-widget:nth-child(2) { animation-delay: 0.32s; }
.brk-anim body.home .elementor > .elementor-element:first-child .elementor-widget:nth-child(3) { animation-delay: 0.52s; }
.brk-anim body.home .elementor > .elementor-element:first-child .elementor-widget:nth-child(4) { animation-delay: 0.7s; }
@keyframes brk-hero-in {
from { opacity: 0; transform: translate3d(0, 26px, 0); }
to { opacity: 1; transform: none; }
}
/* Elementor builds the background slideshow in JavaScript, so between first
paint and the handler running the hero would be a black rectangle. This
paints the first slide immediately underneath it; the slideshow then covers
it with the same photograph and the swap is invisible.
KEEP IN SYNC: this must stay the first entry of HERO_SLIDES in
patch_home_batch8.py. */
body.home .elementor > .elementor-element:first-child {
background-image: url("/wp-content/uploads/2026/05/775A2762-1.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* --- Hero slideshow: continuous drift, soft dissolve ---------------------
Timings here are tied to the slideshow settings on page 769: 6000ms per
slide, 2400ms crossfade, so one photograph's visible life is about 10.8s.
Change those and these want revisiting. */
/* Elementor's Ken Burns scales to 1.3 over 20s on the active slide and 10s
when idle. The duration is what matters: if the zoom finishes before the
next photograph arrives, the hero sits perfectly still for the remainder,
and that stillness is what reads as a slideshow instead of as movement.
18s against a ~10.8s life means the zoom only ever gets about 60% of the
way, so it is still travelling when the dissolve begins and the motion
never visibly stops. Linear on purpose — an eased zoom accelerates and
slows, which the eye reads as a pulse rather than a drift. The idle
duration is matched so the outgoing photograph drifts back at the same
slow rate instead of visibly rewinding underneath the incoming one. */
.elementor-background-slideshow__slide__image.elementor-ken-burns {
transition-duration: 18s !important;
transition-timing-function: linear !important;
}
.elementor-background-slideshow__slide__image.elementor-ken-burns--active {
transition-duration: 18s !important;
}
/* The dissolve itself. Swiper crossfades both slides on the same curve and
they composite over black, so at the moment both sit near half opacity the
hero dims by roughly a quarter. A pronounced ease-in-out crosses that
midpoint fast, which is what keeps the dip from being seen as a dark pulse
in the middle of every transition. */
.elementor-background-slideshow__slide {
transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}
/* The slideshow layer sits above the CSS fallback image, so let it arrive
rather than appear: without this the first photograph pops in the instant
Swiper initialises. */
.elementor-background-slideshow {
animation: brk-slideshow-in 1.2s var(--brk-ease) both;
}
@keyframes brk-slideshow-in {
from { opacity: 0; }
to { opacity: 1; }
}
.brk-scrollcue {
position: absolute;
left: 50%;
bottom: 34px;
z-index: 3;
display: block;
width: 22px;
height: 34px;
margin-left: -11px;
border: 1px solid var(--brk-line-hi);
border-radius: 12px;
background: none;
cursor: pointer;
padding: 0;
}
.brk-scrollcue::after {
content: "";
position: absolute;
left: 50%;
top: 7px;
width: 3px;
height: 6px;
margin-left: -1.5px;
border-radius: 2px;
background: var(--brk-orange);
animation: brk-cue 2.1s var(--brk-ease) infinite;
}
@keyframes brk-cue {
0%, 100% { transform: translateY(0); opacity: 1; }
60% { transform: translateY(12px); opacity: 0; }
61% { transform: translateY(0); opacity: 0; }
}
/* ==========================================================================
4 · Section headings — an orange rule that draws itself
Scoped to icon-box titles, which is what every section label on this site
already is (ABOUT ME, LIVE & STUDIO, NEXT TOURS…).
========================================================================== */
.elementor-widget-icon-box .elementor-icon-box-title {
position: relative;
display: inline-block;
padding-bottom: 0.42em;
}
.elementor-widget-icon-box .elementor-icon-box-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--brk-orange), rgba(var(--brk-orange-rgb), 0));
transform-origin: left center;
transition: transform 1s var(--brk-ease) 0.2s;
/* Drawn by default. Only a section that is genuinely waiting to be
revealed holds it back — so a heading that never gets a reveal (above
the fold, JS off, reduced motion) still gets its rule. */
transform: scaleX(1);
}
.brk-anim .brk-reveal:not(.is-in) .elementor-widget-icon-box .elementor-icon-box-title::after {
transform: scaleX(0);
}
/* ==========================================================================
5 · Images — a slow push-in on hover, inside a clipped frame
Confined to images inside Elementor page content, so the site logo and any
header or footer imagery are untouched.
========================================================================== */
.elementor .elementor-widget-image .elementor-widget-container {
overflow: hidden;
}
.elementor .elementor-widget-image img {
display: block;
transition: transform 1.1s var(--brk-ease), filter 1.1s var(--brk-ease);
will-change: transform;
}
.elementor .elementor-widget-image:hover img {
transform: scale(1.045);
}
/* ==========================================================================
6 · Buttons — orange wipes in from the left
The hero quote is built as a button widget rather than a text block, so it
is explicitly opted out below; a quotation should not behave like a control.
========================================================================== */
.elementor-button-link.elementor-button {
position: relative;
overflow: hidden;
z-index: 0;
transition: color 0.4s var(--brk-ease), border-color 0.4s var(--brk-ease);
}
.elementor-button-link.elementor-button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--brk-orange);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.45s var(--brk-ease);
}
.elementor-button-link.elementor-button:hover::before,
.elementor-button-link.elementor-button:focus-visible::before {
transform: scaleX(1);
}
.elementor-button-link.elementor-button:hover,
.elementor-button-link.elementor-button:focus-visible {
color: #000;
border-color: var(--brk-orange);
}
/* The hero quotation — opt out entirely. */
.elementor-element-1e9bf5c .elementor-button::before {
display: none;
}
.elementor-element-1e9bf5c .elementor-button:hover,
.elementor-element-1e9bf5c .elementor-button:focus-visible {
color: inherit;
}
/* ==========================================================================
7 · Article cards
========================================================================== */
.brk-writing {
width: 100%;
}
.brk-writing__heading {
margin: 0 0 1.6rem;
font-size: clamp(1.6rem, 3vw, 2.4rem);
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
}
.brk-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
/* Two posts fill a two-column row rather than leaving a third of the row
empty. */
.brk-writing--pair .brk-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.brk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 680px) {
.brk-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.brk-card {
position: relative;
background: var(--brk-panel);
border: 1px solid var(--brk-line);
border-radius: 4px;
overflow: hidden;
transition:
transform 0.5s var(--brk-ease),
border-color 0.5s var(--brk-ease),
background-color 0.5s var(--brk-ease),
box-shadow 0.5s var(--brk-ease);
}
.brk-card:hover,
.brk-card:focus-within {
transform: translateY(-6px);
border-color: var(--brk-line-hi);
background: var(--brk-panel-hi);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
}
.brk-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.brk-card__link:focus-visible {
outline: 2px solid var(--brk-orange);
outline-offset: 3px;
}
.brk-card__frame {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #0a0a0a;
}
/* height is forced past WordPress's and Astra's blanket `img { height: auto }`,
which otherwise collapses the fill and leaves the photo floating at the top
of its frame. */
.brk-card__img {
width: 100%;
height: 100% !important;
object-fit: cover;
display: block;
transition: transform 0.9s var(--brk-ease);
}
.brk-card:hover .brk-card__img {
transform: scale(1.06);
}
/* A post with no featured image gets a typographic tile. A grey placeholder
box reads as something failing to load. */
.brk-card__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 25%, rgba(var(--brk-orange-rgb), 0.16), transparent 62%),
var(--brk-panel);
}
.brk-card__placeholder span {
font-size: 5rem;
line-height: 1;
font-weight: 700;
color: var(--brk-orange);
opacity: 0.55;
}
.brk-card__body {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 22px 22px 24px;
flex: 1 1 auto;
}
.brk-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
font-size: 0.72rem;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--brk-text-dim);
}
.brk-card__cat {
color: var(--brk-orange);
}
.brk-card__mins::before,
.brk-card__date::before {
content: "·";
margin-right: 0.75rem;
color: var(--brk-line);
}
.brk-card__title {
font-size: 1.22rem;
line-height: 1.32;
font-weight: 600;
color: #fff;
}
.brk-card__excerpt {
font-size: 0.95rem;
line-height: 1.62;
color: var(--brk-text);
}
.brk-card__cta {
margin-top: auto;
padding-top: 0.4rem;
font-size: 0.8rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--brk-orange);
}
.brk-arrow::before {
content: "→";
display: inline-block;
margin-left: 0.5em;
transition: transform 0.42s var(--brk-ease);
}
.brk-card:hover .brk-arrow::before,
.brk-textlink:hover .brk-arrow::before,
.brk-textlink:focus-visible .brk-arrow::before {
transform: translateX(6px);
}
/* The lead card: used when there are too few posts to fill a row. */
@media (min-width: 861px) {
.brk-card--lead {
grid-column: 1 / -1;
}
.brk-card--lead .brk-card__link {
flex-direction: row;
align-items: stretch;
}
.brk-card--lead .brk-card__frame {
flex: 0 0 52%;
aspect-ratio: auto;
}
.brk-card--lead .brk-card__body {
justify-content: center;
padding: 40px 44px;
gap: 0.9rem;
}
.brk-card--lead .brk-card__title {
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}
.brk-card--lead .brk-card__excerpt {
font-size: 1.02rem;
}
/* In a grid card the call to action is pinned to the bottom so every card
in a row lines up. In the lead card the text block is vertically
centred, and pinning would strand the link a long way beneath it. */
.brk-card--lead .brk-card__cta {
margin-top: 0.6rem;
}
}
.brk-writing__all {
margin: 1.9rem 0 0;
}
.brk-textlink {
display: inline-block;
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brk-orange);
text-decoration: none;
border-bottom: 1px solid rgba(var(--brk-orange-rgb), 0.35);
padding-bottom: 3px;
transition: border-color 0.35s var(--brk-ease);
}
.brk-textlink:hover,
.brk-textlink:focus-visible {
color: var(--brk-orange);
border-color: var(--brk-orange);
}
/* ==========================================================================
8 · Video facade
========================================================================== */
/* Capped rather than full-bleed. At full container width a 16:9 poster is over
700px tall on a laptop, which turns the whole screen into one video and
makes the sections either side feel like afterthoughts. */
.brk-video {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
.brk-video__trigger {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 1px solid var(--brk-line);
border-radius: 4px;
overflow: hidden;
background: #000;
cursor: pointer;
aspect-ratio: 16 / 9;
transition: border-color 0.5s var(--brk-ease), box-shadow 0.5s var(--brk-ease);
}
.brk-video__trigger:hover,
.brk-video__trigger:focus-visible {
border-color: var(--brk-line-hi);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
}
.brk-video__poster {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.82;
transition: transform 1.1s var(--brk-ease), opacity 0.5s var(--brk-ease);
}
.brk-video__trigger:hover .brk-video__poster,
.brk-video__trigger:focus-visible .brk-video__poster {
transform: scale(1.035);
opacity: 1;
}
.brk-video__play {
position: absolute;
left: 50%;
top: 50%;
width: 84px;
height: 84px;
margin: -42px 0 0 -42px;
border-radius: 50%;
background: var(--brk-orange);
box-shadow: 0 0 0 0 rgba(var(--brk-orange-rgb), 0.45);
transition: transform 0.45s var(--brk-ease);
animation: brk-pulse 2.8s ease-out infinite;
}
/* Play triangle, drawn rather than shipped as an asset. */
.brk-video__play::after {
content: "";
position: absolute;
left: 52%;
top: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 13px 0 13px 21px;
border-color: transparent transparent transparent #000;
}
.brk-video__trigger:hover .brk-video__play,
.brk-video__trigger:focus-visible .brk-video__play {
transform: scale(1.09);
}
@keyframes brk-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--brk-orange-rgb), 0.4); }
70% { box-shadow: 0 0 0 26px rgba(var(--brk-orange-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--brk-orange-rgb), 0); }
}
.brk-video__frame {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
display: block;
border-radius: 4px;
}
.brk-video__caption {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 1rem;
margin-top: 0.95rem;
}
.brk-video__title {
font-size: 1rem;
color: #fff;
}
.brk-video__credit {
font-size: 0.78rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--brk-text-dim);
}
/* ==========================================================================
9 · Photo marquee
Two identical tracks side by side, translated -50%: at the end of the
animation the second track sits exactly where the first began, so the loop
has no visible seam.
========================================================================== */
.brk-marquee {
width: 100%;
overflow: hidden;
/* Fades the strip into the black page at both ends instead of cutting the
photographs off against a hard edge. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brk-marquee__rail {
display: flex;
width: max-content;
animation: brk-drift var(--brk-marquee-speed, 70s) linear infinite;
}
.brk-marquee:hover .brk-marquee__rail,
.brk-marquee:focus-within .brk-marquee__rail {
animation-play-state: paused;
}
.brk-marquee__track {
display: flex;
gap: 18px;
padding-right: 18px;
}
.brk-marquee__item {
margin: 0;
flex: 0 0 auto;
width: 320px;
height: 214px;
overflow: hidden;
border-radius: 3px;
filter: grayscale(1) contrast(1.05);
transition: filter 0.6s var(--brk-ease), transform 0.6s var(--brk-ease);
}
.brk-marquee__item:hover {
filter: none;
transform: scale(1.03);
}
.brk-marquee__img {
width: 100%;
height: 100% !important;
object-fit: cover;
display: block;
}
@keyframes brk-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 680px) {
.brk-marquee__item { width: 220px; height: 147px; }
}
/* ==========================================================================
9b · Press kit (EPK)
========================================================================== */
.brk-presskit__note {
margin: 0 0 1.4rem;
max-width: 62ch;
color: var(--brk-text);
line-height: 1.65;
}
.brk-presskit__all {
margin: 0 0 2rem;
}
/* A real button, styled here rather than left to Elementor's atomic default —
which renders a stock blue that belongs to no part of this site. */
.brk-btn {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.85rem 1.6rem;
border: 1px solid var(--brk-orange);
border-radius: 3px;
background: transparent;
color: var(--brk-orange);
font-size: 0.82rem;
letter-spacing: 0.13em;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.4s var(--brk-ease), color 0.4s var(--brk-ease);
}
.brk-btn:hover,
.brk-btn:focus-visible {
background: var(--brk-orange);
color: #000;
}
.brk-btn__meta {
font-size: 0.72rem;
letter-spacing: 0.08em;
opacity: 0.75;
}
.brk-presskit__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
/* Cards are as tall as their photograph, so they must not stretch to match
the tallest in the row. */
align-items: start;
}
@media (max-width: 1024px) { .brk-presskit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .brk-presskit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.brk-press {
margin: 0;
}
.brk-press__link {
display: block;
text-decoration: none;
color: inherit;
}
.brk-press__link:focus-visible {
outline: 2px solid var(--brk-orange);
outline-offset: 3px;
}
/* No forced aspect ratio here, unlike the article cards. These eight are a
mix of landscape and portrait, and a press photo cropped to fit a grid is a
press photo a picture editor can't judge — they need to see the frame as
shot. Ragged card heights are the honest trade. */
.brk-press__frame {
display: block;
position: relative;
overflow: hidden;
border: 1px solid var(--brk-line);
border-radius: 3px;
background: #0a0a0a;
line-height: 0;
transition: border-color 0.45s var(--brk-ease);
}
/* height: auto has to be forced: WordPress and Astra both ship a blanket
`img { height: auto }` that otherwise wins here. */
.brk-press__img {
width: 100%;
height: auto !important;
display: block;
transition: transform 0.9s var(--brk-ease), opacity 0.45s var(--brk-ease);
}
/* The photograph itself is the download, so it has to say so on hover —
otherwise the only clue is the cursor. */
.brk-press__hover {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: var(--brk-orange);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.4s var(--brk-ease);
}
.brk-press__link:hover .brk-press__frame,
.brk-press__link:focus-visible .brk-press__frame {
border-color: var(--brk-line-hi);
}
.brk-press__link:hover .brk-press__img,
.brk-press__link:focus-visible .brk-press__img {
transform: scale(1.05);
}
.brk-press__link:hover .brk-press__hover,
.brk-press__link:focus-visible .brk-press__hover {
opacity: 1;
}
.brk-press__meta {
display: flex;
flex-wrap: wrap;
gap: 0.2rem 0.7rem;
margin-top: 0.6rem;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--brk-text-dim);
}
.brk-press__credit {
flex-basis: 100%;
color: var(--brk-orange);
}
/* ==========================================================================
9c · Elementor's newer "atomic" widgets
The EPK is built with e-image / e-button, which share none of the classes
the older widgets use, so every rule above silently skipped them.
========================================================================== */
.elementor .elementor-widget-e-image img,
.elementor [class*="e-image"] img {
transition: transform 1.1s var(--brk-ease);
}
.elementor .elementor-widget-e-image:hover img,
.elementor [class*="e-image"]:hover img {
transform: scale(1.045);
}
/* Elementor's atomic button ships a stock blue. Bring it onto the palette. */
.elementor a.e-button-base,
.elementor button.e-button-base {
background: transparent !important;
border: 1px solid var(--brk-orange) !important;
color: var(--brk-orange) !important;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background-color 0.4s var(--brk-ease), color 0.4s var(--brk-ease);
}
.elementor a.e-button-base:hover,
.elementor a.e-button-base:focus-visible,
.elementor button.e-button-base:hover,
.elementor button.e-button-base:focus-visible {
background: var(--brk-orange) !important;
color: #000 !important;
}
/* ==========================================================================
9d · Inner-page banners get the same slow push-in as the home hero
Every page other than the front page opens on a fixed photograph with a
title over it. Elementor already uses ::before on these for the dark
overlay, so the drifting copy of the image goes on ::after at z-index -1:
above the container's own background, below the overlay and the title.
background-image: inherit picks up whichever photo the page already uses,
so this needs no per-page configuration and no URLs hardcoded here.
========================================================================== */
.brk-anim body:not(.home) .elementor > .elementor-element:first-child {
overflow: hidden;
}
.brk-anim body:not(.home) .elementor > .elementor-element:first-child::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: inherit;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
animation: brk-banner-drift 26s linear both;
}
@keyframes brk-banner-drift {
from { transform: scale(1.02); }
to { transform: scale(1.14); }
}
/* ==========================================================================
10 · /writing/ archive
========================================================================== */
/* Astra styles this element as #primary, so a class on its own loses the
specificity contest and the page ends up jammed under the fixed header. */
#primary.brk-archive-wrap {
max-width: 1240px;
margin: 0 auto;
padding: clamp(120px, 13vw, 190px) 20px 90px;
}
.brk-archive__head {
margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
max-width: 680px;
}
.brk-eyebrow {
margin: 0 0 0.6rem;
font-size: 0.76rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brk-orange);
}
/* Signature Orange, which is also what every other page title on the site is:
Astra sets h1–h6 to --ast-global-color-0 and only the home hero overrides it
to white. This rule used to force #fff, which made /writing/ the exception
rather than the rule. 9.21:1 on the page background — AAA. */
.brk-archive__title {
margin: 0 0 1rem;
font-size: clamp(2.2rem, 6vw, 3.6rem);
line-height: 1.08;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--brk-orange);
}
.brk-archive__intro {
margin: 0;
font-size: 1.05rem;
line-height: 1.7;
color: var(--brk-text);
}
.brk-archive__empty {
color: var(--brk-text-dim);
}
.brk-pagination {
margin-top: 3rem;
}
.brk-pagination ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.brk-pagination a,
.brk-pagination span {
display: block;
padding: 0.55rem 0.95rem;
border: 1px solid var(--brk-line);
border-radius: 3px;
font-size: 0.85rem;
color: var(--brk-text);
text-decoration: none;
transition: border-color 0.35s var(--brk-ease), color 0.35s var(--brk-ease);
}
.brk-pagination a:hover,
.brk-pagination a:focus-visible {
border-color: var(--brk-orange);
color: var(--brk-orange);
}
.brk-pagination .current {
border-color: var(--brk-orange);
color: var(--brk-orange);
}
/* ==========================================================================
11 · Reduced motion
Off means off — but it must also mean VISIBLE. A reveal that leaves elements
at opacity 0 with the transition removed hands this reader a blank page,
which is a worse outcome than the animation they were avoiding.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.brk-anim .brk-reveal,
.brk-anim .brk-reveal.is-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.brk-anim body.home .elementor > .elementor-element:first-child .elementor-widget {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.elementor-widget-icon-box .elementor-icon-box-title::after {
transform: scaleX(1) !important;
transition: none !important;
}
.brk-marquee__rail,
.brk-video__play,
.brk-scrollcue::after,
.brk-anim body:not(.home) .elementor > .elementor-element:first-child::after {
animation: none !important;
}
/* A static strip still needs to not be a horizontally overflowing mess. */
.brk-marquee {
overflow-x: auto;
}
.elementor .elementor-widget-image img,
.brk-card,
.brk-card__img,
.brk-video__poster,
.brk-marquee__item,
.brk-arrow::before,
.elementor-button-link.elementor-button::before,
.main-header-menu .menu-item > .menu-link::after {
transition: none !important;
}
.elementor .elementor-widget-image:hover img,
.elementor [class*="e-image"]:hover img,
.brk-card:hover,
.brk-card:hover .brk-card__img,
.brk-press__link:hover .brk-press__img,
.brk-marquee__item:hover {
transform: none !important;
}
}
/* ==========================================================================
12 · Site logo — the animated Issabu Orbit seal in the header
Added 2026-08-10 as the horizontal "Baraka Issabu" lockup, when the header's
branding slot had been empty since launch. Replaced 2026-08-23 with the
Issabu house seal — the Orbit — rendered as an inline animated SVG, icon
only, no wordmark. Spec: 00-shared/assets/design-system/issabu-house-seal/
orbit/brand-kit.md.
Why inline SVG and not an ![]()
: the mark animates. A PNG can't, an animated
GIF would band the orange and can't inherit currentColor, and a