(.letter-space--2, .text-black-72 — the latter is a dark-mode
* custom property, so no dark-mode rule is needed).
*
* The gap ABOVE the heading is the theme's existing .section-about .s-desc margin-bottom
* (88px desktop / 60px <=1199 / 40px <=767), which used to separate the bio from the list
* directly; it is deliberately left alone so the bio still gets the template's full air and
* only the heading-to-list gap is set here (24px, 16px on mobile) — tighter than the bio's
* gap, so the heading reads as the list's own label rather than a second bio paragraph.
*
* `body` prefix for the same reason as the footer rules above: this stylesheet prints
* before the parent's tf-main.css, so an equal-specificity rule could lose the cascade.
*/
body .section-about .award-heading {
margin-bottom: 24px;
}
@media (max-width: 767px) {
body .section-about .award-heading {
margin-bottom: 16px;
}
}
/*
* Hero circular text — set in the logo's own type (client request 2026-09-13).
*
* The rotating ring around the GO badge is live text, not artwork: TF Intro prints an empty
*
and plugin-core's main.js splits that string into one
* per character, rotating each by 360/length about `transform-origin: 0 83px` (75px at the
* theme's own <=575px size). So everything below is ordinary typography and stays editable:
* Elementor -> TF Intro -> Content -> Circular Text.
*
* What was wrong: the theme uppercased the string and let it inherit the body size, so the ring
* read "THEGBENGAOBA.GBENGAOBA." while the client's logo reads "TheGbengaOba. GbengaOba." in
* mixed case. Font: the ring already renders in Inter, which is also the closer of the two
* families this site loads to the mark's letterforms — compared side by side against Apfel
* Grotezk (the heading font): Inter's narrow grotesque forms, double-storey 'a' and flat-barred
* 'G' match the logo, Apfel's wider, rounder forms do not. No new font is introduced.
*
* Size: measured off the logo, not guessed. In the mark the ring glyphs are 52px tall at a
* mid-band radius of 415px, i.e. glyph height = 0.125 x ring radius; the site's radius is 83px,
* so the cap height wants ~10.4px and Inter's cap height is 0.7275em -> 14px (75/83 of that at
* the <=575px ring).
*
* Spacing and the dot: characters are placed by equal angle, so per-character letter-spacing
* cannot move them — each span holds one character and the browser positions it by rotation.
* The spacing is therefore the string itself, which is why `curve_text` now carries a space
* after every dot ("TheGbengaOba. GbengaOba. …"), exactly as the logo's ring is set: the space
* is a real slot in the ring, and that is what gives the dot its air. Do NOT try to fix the
* spacing here with letter-spacing — it will do nothing.
*
* `body` prefix for the same reason as the other child rules: this stylesheet prints before the
* parent's tf-main.css, so an equal-specificity rule could lose the cascade.
*/
body.page-id-35 .section-intro .text-rotate .text span {
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
@media (max-width: 575px) {
body.page-id-35 .section-intro .text-rotate .text span {
font-size: 12.7px;
}
}
/*
* Footer logo slot — the disc and the mark inside it.
*
* The markup is printed by isak_child_footer_logo_mark() (functions.php), which sets
* --isak-f-logo-size inline from Appearance → Customize → Footer → "Footer logo size (px)".
*
* The size arrives as a custom property rather than an inline `width` so it can be re-read at a
* breakpoint. The parent's own mobile rule shrinks the disc to 40px
* (.tf-footer .f-logo { width:40px; height:40px } at <=767px, css/tf-main.css:7386), and the
* largest square that fits inside a 40px circle is 40 ÷ √2 ≈ 28px. An inline width could not be
* capped there without !important, and would also permanently outrank the parent's global
* `img, pre { height:auto; width:100% }`.
*
* The 48px fallback in each var() matches the control's default, so the geometry still holds if
* an image is ever printed without the property.
*
* Two parent rules have to be neutralised for the mark to reach the requested size at all,
* and the disc's padding box is smaller than the mark by design — the disc is 68px with
* padding:18px, i.e. a 32px content box, while the mark wants up to 48px. Measured on the live
* page: without these the mark rendered 32px no matter what the control said.
*
* 1. the wrapper is a flex item with the default flex-shrink:1, so it shrank to the 32px
* content box instead of taking the mark's width (flex:0 0 auto);
* 2. the parent's global `img { max-width: 100% }` (css/tf-main.css) then clamped the mark to
* that shrunken 32px box, silently overriding the explicit width (max-width:none).
*
* The wrapper is released at every breakpoint, not just below the parent's 20px mobile pin
* (css/tf-main.css:7392), so the mark is always centred inside the disc: a wrapper narrower than
* the mark would align the mark to the wrapper's left edge and hang it out to the right,
* off-centre, since the disc is padding, not clipping.
*
* `display: block` on the mark, and dropping the parent's 4px mobile padding-bottom, together
* take the mark off the text baseline. An inline image sits on the baseline and carries the
* strut's descender below it, so its wrapper is taller than the art and the art rides high or
* low inside the disc — measured 0.42px off-centre at 1440 and 1.66px at 390 before this. The
* parent's 4px nudge was compensating for exactly that gap on the old 20px mark; at 28px in a
* 40px disc it is also the difference between touching the circle and crossing it (28 ÷ √2 =
* 19.80 against a 20px radius).
*
* `body` prefix for the same reason as the footer rules above: this stylesheet prints before the
* parent's tf-main.css, so an equal-specificity rule could lose the cascade.
*/
body .tf-footer .f-logo .logo {
width: auto;
flex: 0 0 auto;
}
body .tf-footer .f-logo .logo img.image-switch {
display: block;
width: var(--isak-f-logo-size, 48px);
max-width: none;
height: auto;
}
@media (max-width: 767px) {
body .tf-footer .f-logo .logo {
padding-bottom: 0;
}
body .tf-footer .f-logo .logo img.image-switch {
width: min(var(--isak-f-logo-size, 48px), 28px);
}
}
/*
* Core Expertise (tf-tech-stack) — keep the icon chip circular.
*
* The chip (.wg-tech .tech_image, 64x64 with border-radius:50%) is a flex item inside
* .tech-infor, which the theme lays out as display:flex. It therefore inherits the default
* flex: 0 1 auto — shrink factor 1, no min-width floor — so when the row is too narrow the flex
* algorithm takes its share of the shortfall out of the chip's WIDTH while height stays 64px,
* and border-radius:50% draws a vertical ellipse. Measured at 390px before this rule: chips
* 45.97x64, 48.06x64, 47.73x64; 64x64 at 768px and above, which is why it only shows on mobile.
*
* This is NOT a size problem, which is why Elementor's responsive "Box Width/Height" control
* (icon_box_size, in the widget's own Content tab) does not fix it: a smaller mobile value just
* gives flex a smaller base to shrink — measured 38.31x52 at 52px. A shrink-proof floor is what
* is needed, hence flex-shrink:0; min-width:64px works identically. With it the chip stays 64x64
* at 390px, the text still fits and the page keeps no horizontal overflow.
*
* Scoped to the widget rather than to page 35: the squash is inherent to the widget's own flex
* row wherever it is used. Its sibling icon rules (glyph size/colour) live in the page's Elementor
* custom CSS in post 1215 — this is a theme-level layout guard, so it lives here where it is
* version-controlled and revertible with `git restore`.
*/
body .wg-tech .tech_image {
flex-shrink: 0;
}