/* ========================================================================== barakaissabu.com — typography layer Replaces the Astra defaults (Fjalla One display / Raleway body) with a three-family editorial system: Playfair Display 900 display headings, uppercase, tight Instrument Serif ital the accent word inside a heading, and lead paragraphs Space Grotesk navigation, eyebrows, labels, body, UI Loaded as a separate stylesheet on purpose. baraka.css says in its own header that it introduces no new fonts, and keeping that true means this whole direction can be pulled by removing one wp_enqueue_style call rather than by unpicking rules out of a 1,100-line file. WHY !important ON font-family: the site has two competing type systems below this one — Astra's dynamic CSS (printed inline in , so it can land after this file) and Elementor's global typography (printed per page, with generated selectors of unpredictable specificity). Chasing both with selector weight means guessing at load order on every page. font-family is a safe declaration to force: it inherits, it triggers no layout mode change, and it cannot cascade into a broken box like a forced width or position could. The one other exception is documented at .brk-chapter__rule in section 7. ========================================================================== */ :root { --brk-display: "Playfair Display", "Times New Roman", serif; --brk-accent: "Instrument Serif", Georgia, serif; --brk-ui: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Display tracking is negative because Playfair at 900 sets very open by default, and the reference look depends on the caps packing tightly. */ --brk-display-tracking: -0.035em; --brk-display-leading: 0.88; /* Eyebrow tracking is the opposite extreme — the small uppercase labels only read as labels when they are spaced right out. */ --brk-label-tracking: 0.28em; } /* ========================================================================== 1 · Base families ========================================================================== */ body, button, input, select, textarea, .ast-button, .elementor-widget-text-editor, .elementor-widget-icon-box .elementor-icon-box-description { font-family: var(--brk-ui) !important; } h1, h2, h3, h4, h5, h6, .site-title, .elementor-heading-title, .elementor-widget-icon-box .elementor-icon-box-title, .entry-title { font-family: var(--brk-display) !important; } /* ========================================================================== 2 · Display headings Applied to the section and hero headings — the ones that carry the page. Deliberately NOT applied to article titles: see section 6. A 60-character essay title set in 900-weight caps with 0.88 leading stops being a title and becomes a wall, which is a thing the reference site never has to solve because it has no long-form content. ========================================================================== */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-icon-box .elementor-icon-box-title, .brk-display { font-weight: 900; text-transform: uppercase; letter-spacing: var(--brk-display-tracking); line-height: var(--brk-display-leading); } /* Playfair's caps have tall, thin serifs that collide with a tight line-height when a heading wraps. Trim a little of the top gap back. */ .elementor-widget-heading .elementor-heading-title, .brk-display { text-wrap: balance; } /* ========================================================================== 3 · The accent word The signature move of the reference: one word inside an all-caps display heading drops to lowercase italic serif. It is what stops a wall of caps reading as shouting — the eye lands on the italic and the line gets a sentence's worth of emphasis out of a single word. Authoring: wrap the word in *asterisks* in the Elementor heading field and baraka_type_accent() in the mu-plugin converts it. Nothing to hand-code. ========================================================================== */ .brk-em { font-family: var(--brk-accent) !important; font-weight: 400; font-style: italic; text-transform: none; /* Instrument Serif runs small against Playfair 900 at the same font-size, and its italic sits slightly high. Both corrected here so the accent word sits on the same optical baseline as the caps around it. */ font-size: 1.06em; letter-spacing: 0; padding-right: 0.04em; } /* On orange-on-dark the accent word reads better with the orange than against it — the italic is thin enough that the full orange at display size vibrates. */ .brk-em--orange { color: var(--brk-orange); } /* ========================================================================== 4 · Eyebrows, labels, nav — the Space Grotesk layer ========================================================================== */ .brk-eyebrow, .brk-label, .brk-chapter__num, .brk-stat__label, .brk-card__meta, .brk-archive__meta { font-family: var(--brk-ui) !important; font-weight: 600; font-size: 0.72rem; letter-spacing: var(--brk-label-tracking); text-transform: uppercase; } .main-header-menu a, .ast-header-break-point .main-header-menu a, .elementor-widget-button .elementor-button-text { font-family: var(--brk-ui) !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.82rem; } /* ========================================================================== 5 · Lead paragraphs Instrument Serif is a display serif — lovely at 20px and above, tiring below it. So it gets the opening paragraph of a section and nothing else. ========================================================================== */ .brk-lead, .brk-archive__intro { font-family: var(--brk-accent) !important; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.5; letter-spacing: 0.005em; } /* ========================================================================== 6 · Long-form reading Article titles and article bodies are held back from the display treatment on purpose. Titles keep Playfair but at 700 and sentence case, so they stay readable at any length. Bodies stay in Space Grotesk, sized up slightly with a generous measure — a 1,500-word essay is a different job from a hero. ========================================================================== */ /* Astra's dynamic stylesheet sets .entry-title to a fixed 26px, and separately sets bare h2/h3/h4 (which .entry-content headings inherit, since nothing below used to override font-size) to 70px/60px/40px Fjalla One caps. Net effect: the real article title rendered smaller than its own subheadings. The rules below give the title the size a title needs and pull the in-article headings back down to signpost scale. */ .entry-title, .brk-card__title, .brk-archive__card-title { font-weight: 700; text-transform: none; letter-spacing: -0.015em; line-height: 1.12; } .entry-title { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; } .entry-content, .brk-article__body { font-family: var(--brk-ui) !important; font-size: 1.06rem; line-height: 1.75; letter-spacing: 0.001em; } .entry-content p { margin-bottom: 1.35em; } /* Headings inside an article are display-family but restrained — they are signposts in a text, not section titles on a landing page. */ .entry-content h2, .entry-content h3, .entry-content h4 { font-weight: 700; text-transform: none; letter-spacing: -0.01em; line-height: 1.2; margin-top: 2.2em; } .entry-content h2 { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; } .entry-content h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important; } .entry-content h4 { font-size: clamp(1rem, 1.5vw, 1.2rem) !important; margin-top: 1.6em; } /* ========================================================================== 7 · Chapter markers — "I · The Music" The reference numbers its sections in roman and gives each one a name. It costs almost nothing and it turns a scrolling page into something with an order to it, which is exactly what a single-page artist site needs. ========================================================================== */ .brk-chapter { display: flex; align-items: baseline; gap: 0.7em; margin-bottom: 1.1rem; color: var(--brk-orange); } .brk-chapter__num { font-variant-numeric: lining-nums; } .brk-chapter__name { font-family: var(--brk-accent); font-style: italic; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--brk-text); } .brk-chapter__rule { flex: 1 1 auto; height: 1px; /* Longhand, literal colours, and forced. * * The shorthand form of this — background: linear-gradient(90deg, * var(--brk-line-hi), …) — matched the element and still computed to * `none` on the live page, and so did a literal gradient set inline * without a priority. The same declaration with !important applies * correctly, and a plain background-color applies either way, so * something in the stack is forcing background-image on this element. * Enumerating the stylesheets didn't find the culprit; this is the one * declaration in the file allowed to shout, and it is a 1px decorative * rule, so the cost of being wrong about the cause is nil. */ background-image: linear-gradient(90deg, rgba(var(--brk-orange-rgb), 0.55), rgba(var(--brk-orange-rgb), 0)) !important; /* baseline-aligned flex children collapse a zero-content box, so give the rule something to sit on. */ align-self: center; } /* ========================================================================== 8 · Stat row ========================================================================== */ .brk-stats { display: flex; flex-wrap: wrap; gap: clamp(1.8rem, 5vw, 4.5rem); margin: 0; padding: 0; list-style: none; } .brk-stat { min-width: 0; } .brk-stat__label { display: block; margin-bottom: 0.35rem; color: var(--brk-text-dim); font-size: 0.66rem; } .brk-stat__value { display: block; font-family: var(--brk-display); font-weight: 900; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: #fff; } .brk-stat__value .brk-em { font-size: 1em; color: var(--brk-orange); } /* ========================================================================== 8b · Home page display scale The reference sets its section headings at 70–100px against this site's 40px, and that gap — not the typeface — is what makes them land. Scoped to the home page because that is what was asked for; lifting the `body.home` off these three rules applies it site-wide. Sizes are vw-based rather than fixed so the headings keep their proportion to the page instead of stepping down at one breakpoint. The clamp floor is what stops a phone getting 28px headings; the ceiling stops a 27" monitor getting headings taller than the viewport. ========================================================================== */ body.home .elementor-widget-heading .elementor-heading-title, body.home .elementor-widget-icon-box .elementor-icon-box-title { font-size: clamp(2.6rem, 7vw, 5.5rem); } /* Individual widgets are addressed by Elementor's own per-element class, .elementor-element-. NOT by #id — Elementor writes that id into a data-id attribute, not an id attribute, so `#b097460` silently matches nothing and whatever generic rule sits below it wins instead. */ /* The hero carries the page, so it gets the largest step. "BARAKA ISSABU" is 13 characters and still holds one line at this size in a 1260px container; below that it wraps, which is the same thing the reference does. */ body.home .elementor-element-b097460 .elementor-heading-title { font-size: clamp(3rem, 10.5vw, 8.5rem); } /* Three groups that must NOT scale up. Each is supporting type, and at display size they stop supporting anything — the hero alone would have three competing headlines and no hierarchy left. */ /* Hero eyebrow, above the name. */ body.home .elementor-element-4cf36f2 .elementor-heading-title { font-size: clamp(0.85rem, 1.5vw, 1.15rem); letter-spacing: var(--brk-label-tracking); font-weight: 700; } /* The subtitle under the testimonial. */ body.home .elementor-element-b19ee89 .elementor-heading-title { font-size: clamp(1.1rem, 2.2vw, 1.75rem); letter-spacing: 0.02em; } /* The tour-date row is a table of small facts, not a headline. */ body.home .elementor-element-32da1e9 .elementor-heading-title, body.home .elementor-element-2725d5c .elementor-heading-title, body.home .elementor-element-2547d7e .elementor-heading-title { font-size: clamp(1.05rem, 1.9vw, 1.5rem); } /* Display type needs the room under it that 40px type did not. The orange rule sits on this padding, so it moves down with the heading rather than colliding with the descenders. */ body.home .elementor-widget-icon-box .elementor-icon-box-title { padding-bottom: 0.3em; margin-bottom: 0.5em; } /* ========================================================================== 9 · Mobile Playfair Display is a good deal wider than Fjalla One at the same size, so headings that used to fit on one line now wrap. Rather than fight that, the tracking relaxes slightly and the leading opens up — a wrapped display heading at 0.88 leading on a narrow screen reads as one solid block. ========================================================================== */ @media (max-width: 768px) { :root { --brk-display-tracking: -0.02em; --brk-display-leading: 0.94; } .brk-stats { gap: 1.6rem 2.4rem; } } /* ========================================================================== 10 · Loading font-display: swap is set on the Google Fonts request, so the first paint uses the fallbacks listed in the custom properties. Times New Roman for the display face is a deliberate choice over a generic sans: it is a serif with roughly the right colour on the page, so the swap is a change of face rather than a change of texture. ========================================================================== */