/* Aperture site header — utility bar, masthead, primary nav. Values from docs/aperture-preview/aperture-article.html. Everything is scoped under .tsp-hd, and the tokens are declared there rather than on :root so this cannot alter the theme's own styles if the header is switched off. The prototype simply hid search below 900px and had no mobile menu, because a fixed-width mockup never needed one. A real header does, so the primary nav collapses behind a toggle instead of disappearing. */ .tsp-hd{ --tsp-red:#C8102E; --tsp-ink:#16181F; --tsp-muted:#676E7B; --tsp-hairline:#E8E5DE; --tsp-wash:#F6F4EF; /* v1.10.314: follow the global editorial shell, not --tsp-wrap. --tsp-wrap is declared on .tsp-art-wrap, which the header is never inside, so this always fell back to 1200px and the masthead stayed 1200 wide at every viewport. Proved by the logo's left edge: (1366-1200)/2+20=103, (1920-1200)/2+20=380, (2560-1200)/2+20=700 -- exactly where it was measured. Once the content shells started growing above 1440, content ran 170px past the nav at 1920 and 300px at 2560, which is the "extends beyond the menu on the 24-inch monitor" report. --tsp-shell is 1200 below 1536, so 1366/1440 are untouched. */ --tsp-hd-wrap:var(--tsp-shell,1200px); background:#fff; color:var(--tsp-ink); } .tsp-hd *{box-sizing:border-box} /* v1.10.49: the prototype gutters every row at 20px, not 24px. */ .tsp-hd__wrap{max-width:var(--tsp-hd-wrap);margin-inline:auto;padding-inline:var(--tsp-gutter,20px)} .tsp-hd a{text-decoration:none;color:inherit} .tsp-hd ul{list-style:none;margin:0;padding:0} /* Utility bar */ /* v1.10.49: matched to the prototype's .util / .date / .u-right. The links were uppercase 600 at 11.5px against the prototype's plain 12px, which read as a row of small-caps labels rather than the quiet utility links it draws. */ .tsp-hd__utility{background:var(--tsp-ink);color:#cfd2da;font-family:var(--tsp-font-ui);font-size:12px} .tsp-hd__utility .tsp-hd__wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap} .tsp-hd__tagline{color:#aeb3bd;letter-spacing:.2px} .tsp-hd__util-menu{display:flex;align-items:center;gap:16px} .tsp-hd__util-menu a{color:#cfd2da} .tsp-hd__util-menu a:hover,.tsp-hd__util-menu a:focus-visible{color:#fff} /* Masthead */ .tsp-hd__masthead .tsp-hd__wrap{display:flex;align-items:center;gap:20px;padding-top:16px;padding-bottom:16px} .tsp-hd__logo{display:flex;align-items:center;gap:12px;flex:none} /* v1.10.321 — a DEFINITE height, so the masthead does not reflow on load. The logo markup carries width="2166" height="513" while CSS displays it at 236x56. max-height is not a definite height, so until the bitmap decoded the browser laid the image out from its ATTRIBUTE width and rendered it 1229px wide. Column 1 is minmax(300px,auto), so it inflated to 1228.59px and the banner track collapsed to 0px; when the image finished it snapped back to 236px and the banner jumped into place. Measured on a throttled 1920 load: t=10104ms tracks 1228.59px 0px 159.406px logo img rendered 1229 t=16385ms tracks 300px 928.59px 159.406px logo img rendered 236 ROOT CAUSE: the logo is lazy-loaded by Smush -- class=lazyload, data-src, and inline --smush-placeholder-width:2166px. Smush sizes the placeholder from that variable, so the img rendered at 2166px, clamped by the container to 1229px, and width:auto never got a say. Feeding Smush its own variable the DESIGNED width, plus a definite max-width, makes the box deterministic from frame one. The height still comes from the attribute ASPECT RATIO (2166/513) at first paint -- 56 * 4.2242 = 236px -- so the track is 300px from the very first frame. object-fit keeps it undistorted if a narrow breakpoint constrains the width. The is-scrolled rule still wins, because max-height:34px clamps a 56px height. */ .tsp-hd__logo{--tsp-logo-w:236px} .tsp-hd__logo-img{--smush-placeholder-width:var(--tsp-logo-w);max-height:56px;height:56px;width:auto;max-width:var(--tsp-logo-w);object-fit:contain;display:block} .tsp-hd__nib{width:44px;height:44px;border-radius:50%;background:var(--tsp-red);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex:none} .tsp-hd__word-wrap{display:flex;flex-direction:column} .tsp-hd__word{font-family:var(--tsp-font-ui);font-weight:800;font-size:26px;letter-spacing:-.5px;line-height:1.1;text-transform:uppercase} .tsp-hd__word-b{color:var(--tsp-red)} .tsp-hd__strap{font-family:var(--tsp-font-ui);font-size:9.5px;letter-spacing:.28em;color:var(--tsp-muted);text-transform:uppercase;margin-top:2px} /* v1.10.49: the prototype's .search is the bordered pill ITSELF, holding a magnifier and the field — not a bare input. Ours styled the input directly, so there was no icon, the box ran to 560px instead of 420px, and it sat wherever the flex row left it rather than centred. */ .tsp-hd__search{flex:1;display:flex;align-items:center;gap:8px;background:var(--tsp-wash);border:1px solid var(--tsp-hairline);border-radius:999px;padding:9px 16px;color:var(--tsp-muted);max-width:420px;margin:0 auto;min-width:0} .tsp-hd__search:focus-within{border-color:var(--tsp-muted)} .tsp-hd__search-icon{width:15px;height:15px;flex:0 0 auto} /* v1.10.50: the prototype's search text is not styled at all — it inherits `body{font-family:var(--sans);font-size:15px;line-height:1.5}`. Ours pinned 14px with the input's default `normal` leading, which made the pill about 6px shorter than the prototype's 42.5px (22.5 text + 18 padding + 2 border). The size and the leading are BOTH needed: an input does not inherit line-height from an ancestor the way the prototype's text node does. */ /* v1.10.55 — these declarations are scoped `.tsp-hd .tsp-hd__search input` rather than `.tsp-hd__search input` ON PURPOSE, and the extra class is load bearing. Blocksy's main.min.css carries a blanket form rule whose selector is `input:is([type="text"],[type="search"],…)`. `:is()` takes the specificity of its most specific argument — an attribute selector — so that computes to (0,1,1): exactly the same as one class plus one type. A specificity tie is broken by source order, and the theme stylesheet is enqueued after ours, so the theme won and the field rendered as a 40px white rounded box sitting inside our pill. Adding the `.tsp-hd` ancestor takes ours to (0,2,1), which wins outright without `!important` and without touching a single input outside the header. Every property below is one Blocksy sets in that rule — height, padding, border-width/style/colour, border-radius, background-color, appearance. They are neutralised explicitly rather than by a shorthand reset, so it stays obvious what is being answered and why. */ .tsp-hd .tsp-hd__search input{flex:1 1 0%;min-width:0;height:auto;padding:0;border:0;border-radius:0;background-color:transparent;background-image:none;box-shadow:none;-webkit-appearance:none;appearance:none;font-family:var(--tsp-font-ui);font-size:15px;line-height:1.5;color:var(--tsp-ink)} /* Blocksy also restyles the focus state (border colour and a ring). The pill already shows focus via :focus-within, so the inner field stays flat. */ .tsp-hd .tsp-hd__search input:focus, .tsp-hd .tsp-hd__search input:focus-visible{height:auto;padding:0;border:0;border-radius:0;background-color:transparent;box-shadow:none;outline:none} /* The prototype draws its placeholder text in --muted. A browser's default placeholder is a lighter grey than that, and Firefox also applies its own opacity, so both are set explicitly. Typed text stays --ink: the prototype never shows a filled field, and muted input text would be the wrong call. */ .tsp-hd .tsp-hd__search input::placeholder{color:var(--tsp-muted);opacity:1} /* type=search carries browser furniture the prototype has none of — WebKit's clear (×) button and its own appearance quirks. */ .tsp-hd .tsp-hd__search input::-webkit-search-cancel-button, .tsp-hd .tsp-hd__search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none} /* v1.10.48: the prototype's .btn-sub is a 6px rounded rectangle, not a pill — the 40px radius made it read as a second తెలుగు pill rather than the masthead's call to action. Metrics follow .btn-sub: 600 13px, padding 8px 16px. */ /* margin-left:auto is what puts Subscribe on the container's right edge, which is what lines it up with the తెలుగు pill in the row below — both then sit against the same 1200px/20px gutter. Without it the search box's max-width left slack that parked Subscribe short of the edge. */ .tsp-hd__sub{margin-left:auto;background:var(--tsp-red);font-family:var(--tsp-font-ui);font-weight:600;font-size:13px;padding:8px 16px;border-radius:6px;white-space:nowrap;flex:none} .tsp-hd__sub:hover,.tsp-hd__sub:focus-visible{background:#9C0F27} /* Mobile toggle — hidden on desktop, where the nav is always visible. */ .tsp-hd__toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--tsp-hairline);border-radius:8px;background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center} .tsp-hd__bars,.tsp-hd__bars::before,.tsp-hd__bars::after{display:block;width:20px;height:2px;background:var(--tsp-ink);position:relative} .tsp-hd__bars::before,.tsp-hd__bars::after{content:'';position:absolute;left:0} .tsp-hd__bars::before{top:-6px} .tsp-hd__bars::after{top:6px} /* Primary nav */ .tsp-hd__primary{border-top:1px solid var(--tsp-hairline);border-bottom:3px solid var(--tsp-red)} /* v1.10.49: the prototype spaces nav items with the links' own padding (13px 14px) and a 2px gap, so the hover/current target covers the full row height. Ours used a 28px gap on padding-less links, which made the bar taller and the hit areas smaller than they look. */ .tsp-hd__primary .tsp-hd__wrap{display:flex;align-items:center;gap:2px} .tsp-hd__primary-menu{display:flex;align-items:center;gap:2px;flex-wrap:wrap} .tsp-hd__primary-menu a{display:block;padding:13px 14px;font-family:var(--tsp-font-ui);font-weight:600;font-size:14px;color:var(--tsp-ink)} .tsp-hd__primary-menu a:hover,.tsp-hd__primary-menu a:focus-visible{color:var(--tsp-red)} /* WordPress marks the live section with these classes — the prototype's hardcoded .active equivalent, driven by real state. */ .tsp-hd__primary-menu .current-menu-item>a,.tsp-hd__primary-menu .current-menu-ancestor>a,.tsp-hd__primary-menu .current_page_item>a{color:var(--tsp-red)} /* v1.10.322 — min-width reserves the pill so the Telugu webfont swap cannot move the header. The label is Telugu script in Noto Sans Telugu; before that face arrives the fallback renders it 84px wide and afterwards 77px, and this pill sits in the masthead grid's third track, which is auto-sized. Measured on a throttled 1920 load, the track went 159.406px -> 151.516px on swap and dragged the banner's right edge with it. Reserving the WIDER of the two states costs 7px of padding and removes the movement entirely. */ .tsp-hd__te{margin:6px 0 6px auto;background:var(--tsp-red);padding:6px 16px;border-radius:8px;font-size:14px;font-family:var(--tsp-font-ui);font-weight:600;white-space:nowrap;min-width:84px;text-align:center} .tsp-hd__te:hover,.tsp-hd__te:focus-visible{background:#9C0F27} /* v1.10.48 — THE white-text fix. Both buttons are anchors, so `.tsp-hd a` above (one class + one type = 0,0,1,1) outranked their own `color:#fff` (one class = 0,0,1,0) and painted them --tsp-ink on red. The তెలుగు pill's :hover rule was specific enough to win, which is why it was dark at rest and white on hover. Qualifying by `a` raises these to 0,0,2,1 so the colour sticks in every state. Kept as a colour-only rule on purpose: folding it back into the layout blocks would also outrank the mobile margin overrides. */ .tsp-hd a.tsp-hd__sub, .tsp-hd a.tsp-hd__te{color:#fff} /* Sub-menus: hover on desktop, always-open list on mobile. */ .tsp-hd__primary-menu li{position:relative} .tsp-hd__primary-menu .sub-menu{position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid var(--tsp-hairline);box-shadow:0 6px 18px rgba(0,0,0,.08);padding:6px 0;display:none;z-index:99} /* .tsp-hd__open is the click-toggled state the script adds for a trigger whose href goes nowhere; hover and focus-within keep working exactly as before. */ .tsp-hd__primary-menu li:hover>.sub-menu,.tsp-hd__primary-menu li:focus-within>.sub-menu,.tsp-hd__primary-menu li.tsp-hd__open>.sub-menu{display:block} /* Escape sets this. It has to come last and match the focus-within rule's weight, because Escape returns focus to the trigger -- which is inside the item, so :focus-within would otherwise reopen what was just dismissed. */ .tsp-hd__primary-menu li.tsp-hd__closed>.sub-menu{display:none} .tsp-hd__primary-menu .sub-menu a{display:block;padding:8px 16px;font-size:14px;font-weight:500} /* Without a caret, MORE looks like a section that simply fails to navigate. Sized well below the label so it reads as punctuation, and rotated on open so the state is visible to a mouse and to a keyboard tab alike. `em` keeps the arrow proportional as the nav's own font-size steps down on narrow widths. */ .tsp-hd__primary-menu .menu-item-has-children>a::after{ content:"";display:inline-block;vertical-align:middle; width:.36em;height:.36em;margin-left:.42em;margin-top:-.22em; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);transition:transform .18s ease; } .tsp-hd__primary-menu .menu-item-has-children:hover>a::after, .tsp-hd__primary-menu .menu-item-has-children:focus-within>a::after{transform:rotate(-135deg);margin-top:.06em} /* v1.10.50: the prototype does NOT drop the search on narrow widths — its `.search{order:3;flex:1 1 100%;max-width:none}` wraps it onto its own full-width row below the logo and Subscribe. Ours deleted it outright, which removed site search from every phone. Matched to the prototype instead. (The prototype expresses this with @container, not @media, because it is a device-frame mock; a real header keys off the viewport.) */ @media (max-width:900px){ .tsp-hd__toggle{display:flex} .tsp-hd__masthead .tsp-hd__wrap{flex-wrap:wrap;gap:12px} .tsp-hd__search{order:3;flex:1 1 100%;max-width:none;margin:0} .tsp-hd__primary{display:none} .tsp-hd__primary.is-open{display:block} .tsp-hd__primary .tsp-hd__wrap{flex-direction:column;align-items:stretch;gap:0;padding-top:8px;padding-bottom:12px} .tsp-hd__primary-menu{flex-direction:column;align-items:stretch;gap:0} .tsp-hd__primary-menu>li>a{display:block;padding:12px 0;border-bottom:1px solid var(--tsp-hairline)} .tsp-hd__primary-menu .sub-menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 14px} .tsp-hd__te{margin:12px 0 0;text-align:center} .tsp-hd__utility .tsp-hd__wrap{justify-content:center;text-align:center;padding-top:8px;padding-bottom:8px} } @media (max-width:600px){ .tsp-hd__wrap{padding:0 16px} .tsp-hd__word{font-size:21px} .tsp-hd__nib{width:38px;height:38px;font-size:17px} /* The prototype keeps Subscribe at every width — `.mast .btn-sub` stays `margin-left:auto` in its narrow block — and hides the tagline instead, which is what actually frees the room. Ours had it the other way round. */ .tsp-hd__tagline{display:none} } /* v1.10.65 - utility bar rebuilt to the v2.2 prototype: date left, links + social right, ~36px tall. v1.10.257 - the weather reading and the separator that belonged to it are gone; the left cluster is the date alone and reflows on the existing inline-flex, with no compensating margin anywhere. */ .tsp-hd__utility .tsp-hd__wrap{min-height:36px;padding-top:0;padding-bottom:0} .tsp-hd__util-left,.tsp-hd__util-right{display:inline-flex;align-items:center;gap:12px;min-width:0} .tsp-hd__date{color:#cfd2da;white-space:nowrap;display:inline-flex;align-items:center} /* v1.10.194 — the date is set with a glyph, not bare text: a calendar before it. Drawn as a CSS mask tinted with `currentColor` (the technique blocks.css already uses for its icons) rather than as inline SVG or a font. That keeps it in step with the bar's text colour instead of adding a second colour to maintain, and it needs no markup change. v1.10.257: the location pin that paired with this went with the weather. */ .tsp-hd__date::before{ content:""; flex:0 0 auto; width:13px;height:13px; margin-right:7px; background-color:currentColor; opacity:.8; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } .tsp-hd__date::before{ -webkit-mask-image: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='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E"); mask-image: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='16' rx='2.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E"); } /* Circular social buttons. The translucent wash sits on whatever the bar's background is, so it needs no second colour token to stay in step with it. */ .tsp-hd__socials{display:inline-flex;align-items:center;gap:8px} /* v1.10.72: the base rule is element-agnostic so a linked and a placeholder are pixel-identical — the two states must be indistinguishable, which is the whole point of showing the set before the URLs exist. `.tsp-hd .tsp-hd__social` is (0,2,0), enough to beat `.tsp-hd a{color:inherit}` at (0,1,1) for the anchor case without a separate override. */ .tsp-hd .tsp-hd__social{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.10);color:#cfd2da;transition:background .15s ease,color .15s ease,transform .15s ease} .tsp-hd__social svg{width:11px;height:11px;fill:currentColor} .tsp-hd .tsp-hd__social:hover,.tsp-hd .tsp-hd__social:focus-visible{background:rgba(255,255,255,.22);color:#fff;transform:translateY(-1px)} /* The placeholder keeps the hover look so the row behaves consistently, but the cursor stays default: an I-beam or pointer would promise a click it cannot honour. */ .tsp-hd .tsp-hd__social.is-placeholder{cursor:default} @media (prefers-reduced-motion:reduce){.tsp-hd .tsp-hd__social{transition:none}.tsp-hd .tsp-hd__social:hover{transform:none}} /* Below 782px the three text links go; the date and the social icons stay, which is the prototype's behaviour. Hidden rather than wrapped: a second line would double the row height and push the masthead down. */ @media (max-width:782px){ .tsp-hd__util-menu{display:none} .tsp-hd__utility .tsp-hd__wrap{justify-content:space-between} } /* ========================================================================== v1.10.74 — middle row matched to the v2.2 prototype. These are the PLUGIN's masthead elements. Blocksy's [data-row="middle"] is in the DOM but measures display:none / h=0 because the Aperture header hides the theme header outright, so restyling it would change nothing visible. Families stay on var(--tsp-font-ui) rather than the literal "Inter" the brief names: the token resolves to the project's Poppins stack, and hardcoding a family here would be the one thing typography.css exists to prevent. ========================================================================== */ .tsp-hd__masthead .tsp-hd__wrap{gap:26px;padding-top:16px;padding-bottom:16px;padding-inline:26px} /* Search: 39px tall, 8px corners, capped at 420 but free to shrink with the row (flex:1 1 0 + min-width:0 — without min-width a flex item refuses to go below its content width and the row overflows instead of the field narrowing). */ .tsp-hd__search{flex:1 1 0;min-width:0;max-width:420px;margin:0;gap:8px;height:39px;padding:9px 14px;border-radius:8px;background:var(--tsp-wash,#f6f4ef);border:1px solid var(--tsp-hairline,#e8e5de)} .tsp-hd .tsp-hd__search input{font-size:13px;font-weight:400;line-height:1.2;color:var(--tsp-ink,#16181f)} .tsp-hd .tsp-hd__search input::placeholder{color:var(--tsp-muted,#676E7B);opacity:1} /* The pill takes the focus ring for the whole control. The inner input's own outline is removed only because this replaces it — never left with neither. */ .tsp-hd__search:focus-within{border-color:var(--tsp-muted,#676E7B);box-shadow:0 0 0 3px rgba(22,24,31,.08)} /* Subscribe: 13px/700, 10px 20px, 6px corners -> ~99x40. */ .tsp-hd__sub{margin-left:auto;font-size:13px;font-weight:700;padding:10px 20px;border-radius:6px} .tsp-hd .tsp-hd__sub:focus-visible{outline:2px solid var(--tsp-ink,#16181f);outline-offset:2px} /* తెలుగు: now a masthead sibling of Subscribe — white, hairline border, ink text. margin-left is reset because it inherited the nav row's auto, which in the masthead would shove it away from Subscribe instead of beside it. */ /* v1.10.75 — Subscribe is gone from the header; తెలుగు becomes the filled red button and STAYS WHERE IT WAS, at the right edge of the row. `margin-left:auto` is the load-bearing line. Subscribe carried it before, and with Subscribe removed the button would otherwise collapse leftward to sit against the search field. Inheriting the auto margin is what keeps తెలుగు at the same right edge (row right minus the 26px gutter) and turns the gap left by Subscribe into plain whitespace, which is the requested result. Colours reuse the tokens Subscribe used — the same `--tsp-red` and the same #9C0F27 hover — rather than restating a second crimson that could drift. */ /* v1.10.607 — an edition selector, not a call to action. The solid red pill this replaces carried more weight than the masthead it sat in: full --tsp-red behind white 600, which is the treatment Subscribe and Apply Now get. Switching edition is a utility and belongs beside Search at Search's volume. COLOUR ONLY. THE GEOMETRY IS NOT TOUCHED, AND THAT IS DELIBERATE. The first draft of this patch restated `.tsp-hd__search`'s 39px/8px-radius field geometry here, on the assumption that the field was the neighbour to align with. It is not. Measured on staging: at >=901px this control is 38px tall with a 999px radius, and the Search beside it is a 38px CIRCLE — the v1.10.194 pairing, whose own note records that the two were sized to one optical height on purpose. `.tsp-hd .tsp-hd__te` further down this file owns that geometry and, being later at equal specificity, wins anyway; restating 39px here would have left a dead declaration in the file and a comment that lied about the composition. So this block sets the SKIN — ground, border, ink, icon — and leaves height, radius, padding and type to the rules that already own them. A pill beside a circle is the existing pairing; the defect was never its shape. THE GROUND IS THE SEARCH CIRCLE'S GROUND, and v1.10.609 corrects this. v1.10.607 shipped it white with a visible --tsp-hairline ring. That was wrong, and the owner reported it as a stray white button. The partner control is not a white ring: `.tsp-hd .tsp-hd__utils .tsp-hd__search` below is a FILLED #F1F1F1 circle whose border is set to the same #F1F1F1 — its own note records that choice, "a FILLED light circle with no ring, not a white circle outlined in the hairline", with the border kept in the box only so hover can bring a ring back without the control shifting. So a white pill with a hairline ring beside it did exactly what that note warns against, and broke the v1.10.194 pairing these two controls have had since it was approved. This now takes the same fill, the same border-matches-fill trick and the same hover pair (#E8E8E8 / #D8D8D8). The two utilities read as one set again. v1.10.611 — AND THE OWNER'S DECISION IS RED. The grey above was the right answer to the wrong question: both v1.10.607's white and v1.10.609's grey were attempts to make this control quiet, and quiet is not what is wanted. It is the brand's own switch and it carries the brand's colour. So the ground is `--tsp-red` — the logo red, the token, not a second crimson that can drift — with the hover on `--tsp-dark-red` the header already uses for its other red controls. What is KEPT from the last three patches is everything that was not about colour: the drawn globe (now white, following `currentColor` as it always did), the wrapped label so 320 can drop the word without dropping the accessible name, the 24px/44px targets, and the counterpart URL logic, which was never touched. The pairing note above still holds and is now satisfied a different way: the search circle is a filled control with no ring, and so is this. They match in construction — filled, ringless, one optical height — and differ in colour, which is the point. */ .tsp-hd__masthead .tsp-hd__te{ margin:0 0 0 auto; display:inline-flex; align-items:center; gap:8px; box-sizing:border-box; background:var(--tsp-red,#C8102E); border:1px solid var(--tsp-red,#C8102E); white-space:nowrap; cursor:pointer; transition:border-color .15s,background-color .15s; } .tsp-hd__masthead a.tsp-hd__te{color:#fff} /* The header's existing red hover, the one the kicker chips and the old pill have always used — not a new shade. */ .tsp-hd__masthead a.tsp-hd__te:hover, .tsp-hd__masthead a.tsp-hd__te:focus-visible{ background:var(--tsp-dark-red,#9C0F27); border-color:var(--tsp-dark-red,#9C0F27); color:#fff; } .tsp-hd__masthead a.tsp-hd__te:active{background:#8A0D22;border-color:#8A0D22} /* v1.10.611 — back to the ink outline, because the control is red again. While this was grey it borrowed `.tsp-hd__search:focus-within`'s ring, `0 0 0 3px rgba(22,24,31,.08)`. On a red fill that ring is 8% ink over #C8102E and is effectively invisible — a keyboard reader would have had no focus indicator at all. The 2px ink outline with a 2px offset is what this control used before v1.10.607 and what the kicker chips use: it sits OUTSIDE the red, so it is legible against both the fill and the white header. */ .tsp-hd__masthead a.tsp-hd__te:focus-visible{ outline:2px solid var(--tsp-ink,#16181f); outline-offset:2px; box-shadow:none; } /* Mobile: the inline search field and Subscribe come out below 782px. v1.10.106 — తెలుగు now STAYS on mobile, immediately left of the hamburger, so a reader can switch edition without opening the menu. It is the SAME element that serves desktop (DOM order is already logo -> search -> తెలుగు -> toggle), so nothing is duplicated and there is no second URL to keep in sync — the markup is untouched apart from its aria-label. */ @media (max-width:782px){ .tsp-hd__masthead .tsp-hd__wrap{gap:16px;padding-inline:16px} .tsp-hd__search{display:none} .tsp-hd__sub{display:none} /* The row must never break to a second line: `flex-wrap:wrap` is inherited from the 900px block, where it exists to drop the SEARCH field onto its own row. Search is display:none here, so wrapping can only ever push the hamburger down and make the header taller. nowrap forbids that. */ .tsp-hd__masthead .tsp-hd__wrap{flex-wrap:nowrap} /* The logo is `flex:none` by default and the custom logo renders 236px wide at its 56px cap. At 390px that leaves 358px of content box for 236 + 16 + pill + 16 + 44 — it does not fit, and an unshrinkable logo would force the overflow onto the hamburger. Letting the logo shrink (and only shrink, via `0 1 auto`) yields exactly what is needed and nothing more: at 768px there is room for its full width, so it is not touched there at all. Scaling the logo beats a hardcoded mobile height, which would have to be re-guessed for every future logo. */ .tsp-hd__logo{flex:0 1 auto;min-width:0} .tsp-hd__logo-img{max-width:100%;min-width:0} /* `margin-left:auto` on తెలుగు pushes the PAIR to the right edge; the toggle must then give its own auto margin up, or the free space would split between them and leave the two controls stranded apart. */ .tsp-hd__masthead .tsp-hd__te{display:inline-flex;align-items:center;justify-content:center;margin:0 0 0 auto;min-width:44px;min-height:44px;height:auto;padding:0 12px;border-radius:8px;line-height:1} .tsp-hd__toggle{margin-left:0;flex:none} } /* v1.10.615 — at 359 and below the WORD stays; only the geometry tightens. Until now this width hid the label and let the globe stand in for it. With the globe gone there is nothing to stand in, so hiding the word would leave an empty red square — the control would be unfindable on the narrowest phone, which is the screen with the least room to hunt on. So the label is kept and the box is trimmed around it instead: less padding, a step down in type, and no width floor. The 44px min-height still carries the tap target, which is what the floor was actually protecting. */ @media (max-width: 359.98px) { .tsp-hd__masthead .tsp-hd__te{ min-width:0; padding:0 9px; font-size:11.5px; letter-spacing:0; } } /* ========================================================================== v1.10.77 — typography system: header components. Sizes only; no layout, colour or dimension changes. ========================================================================== */ /* §4 Primary navigation — 12px/600, 0.4px, uppercase. Deliberately not heavier: at 12px an uppercase 700 reads as shouting across nine items. */ .tsp-hd__primary-menu a{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase} /* §5 Utility bar — 11px/500, 1.4 leading. Not uppercased: these are ordinary links, and §29 reserves uppercase for navigation, labels and kickers. */ .tsp-hd__utility{font-size:11px} .tsp-hd__date,.tsp-hd__util-menu a{font-size:11px;font-weight:500;line-height:1.4;text-transform:none;letter-spacing:normal} /* §6 Search — 13px/400. Dimensions untouched. */ .tsp-hd .tsp-hd__search input{font-size:13px;font-weight:400;line-height:1.4} /* §7 తెలుగు button — Telugu face first so the script renders in Noto rather than falling through Inter's fallback chain. Placement, colour, size, URL all unchanged. */ .tsp-hd__masthead .tsp-hd__te{font-family:'Noto Sans Telugu',var(--ts-font-ui);font-size:13px;font-weight:600} /* v1.10.79 — three corrections against the revised brief and one measured defect. 1. Nav 12px -> 13px. The revised brief specifies 13px/600 (the earlier pass said 12px). Letter-spacing stays 0.4px, within the 0.35–0.4 range. 2. Utility bar 11px -> 12px: "keep 12px rather than reducing it to 11px". 3. Section headings measured 600 in the browser, not the specified 700 — a rule elsewhere was winning at equal specificity. Qualifying with the block wrapper takes these to (0,2,1) so the weight actually lands. */ .tsp-hd__primary-menu a{font-size:13px} .tsp-hd__utility{font-size:12px} .tsp-hd__date,.tsp-hd__util-menu a{font-size:12px} /* ========================================================================== v1.10.108 — mobile masthead, section 2 of the mobile build. Composition (v1.10.350, owner request): [hamburger] logo [telugu][search] The language control moved from the far left to the right of the logo, so the two utilities read as one group and search stays the end of the row. Ordered with `order`, not with markup: `.tsp-hd__utils` is display:contents here, so all four controls are direct flex children of the masthead row and the visual sequence is a property of this block alone. Nothing is duplicated, nothing is positioned, and the DOM order still reads logo -> utilities -> toggle, which is the order a screen reader and the Tab key follow. Placed at the end of the file so plain selectors win on load order; every rule is inside the mobile media block, so desktop is untouched. ========================================================================== */ @media (max-width:782px){ /* NOTE — no `position:sticky` here, deliberately. Blocksy sets `overflow-x:hidden` on , which makes body a scrolling box and stops sticky descendants from ever pinning: measured at 390px, a sticky masthead scrolled away to top=-547. Overriding the theme's overflow-x is not free — it exists to mask horizontal overflow elsewhere and removing it can expose a sideways scroll on pages this build has not audited. The sticky/condensed header is therefore section 4's job, where it can be done with `position:fixed` plus a spacer and verified on its own. */ .tsp-hd__masthead .tsp-hd__wrap{gap:8px;padding-inline:12px} /* Explicit order, so the visual row no longer depends on search being hidden — it is visible again below, as an icon. */ .tsp-hd__toggle{order:1;margin:0;flex:0 0 auto} .tsp-hd__logo{order:2;flex:1 1 auto;min-width:0;justify-content:center} .tsp-hd__masthead .tsp-hd__te{order:3;margin:0;flex:0 0 auto} /* The pill loses 4px of side padding on phones, and the logo takes it. Measured at 320 with the new order: the wordmark ends at x=256 and the pill starts at x=264, so a solid red shape sits 8px from the end of SCOPE and the two read as one mass. The row has no slack to give -- 44 + 66 + 44 of controls, three 8px gaps and two 12px gutters is the whole 320 -- so the space has to come from somewhere, and 16px of side padding on a 5-glyph label is the one place with any to spare. The tap target is unaffected in the dimension that matters: the pill stays 44px tall and ~58px wide, and the label keeps its 13px size. Because the logo is flex:1 1 auto it absorbs the freed width automatically -- no per-width rule, no margin on the brand. */ .tsp-hd__masthead .tsp-hd__te{padding-inline:12px} .tsp-hd__masthead .tsp-hd__search{order:4} /* Search collapses to a 44px icon. This mirrors the pattern the site already uses on desktop (the Customizer's min-901px block): the input overlays the icon transparently and expands into a panel on focus, so there is no new markup and no JS. 16px on the input because iOS zooms the whole page when a focused field is smaller. */ .tsp-hd__masthead .tsp-hd__search{display:flex;flex:0 0 44px;width:44px;height:44px;max-width:none;min-width:0;margin:0;padding:0;align-items:center;justify-content:center;position:relative;overflow:visible;background:transparent;border:0;border-radius:999px} .tsp-hd__masthead .tsp-hd__search .tsp-hd__search-icon{position:relative;z-index:1;pointer-events:none;width:22px;height:22px;color:var(--tsp-ink,#16181f)} .tsp-hd .tsp-hd__masthead .tsp-hd__search input[type="search"]{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;opacity:0;border:0;border-radius:999px;background:transparent;box-shadow:none;cursor:pointer;font-size:16px;transition:width .2s ease} .tsp-hd .tsp-hd__masthead .tsp-hd__search input[type="search"]:focus{top:52px;width:calc(100vw - 24px);max-width:340px;height:44px;opacity:1;padding:0 14px;background:#fff;border:1px solid var(--tsp-hairline,#E8E5DE);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.14);z-index:5;cursor:text} } /* v1.10.109 — utility-bar social icons come out on phones. They render 22x22, which is half the 44px touch floor, and the utility bar is only 36px tall — padding them up to 44 would make the bar taller and eat the first screen, which is the opposite of what the mobile build is for. Hiding them loses nothing: the footer carries the same four networks (plus WhatsApp) at full size. This is a deliberate departure from the prototype, which draws them at 15px in `.util .soc` — that would fail the same audit. */ @media (max-width:782px){ .tsp-hd__utility .tsp-hd__socials{display:none} } /* ========================================================================== v1.10.116 — condensed sticky masthead on phones (deferred from v1.10.108). position:FIXED, not sticky. Blocksy sets overflow-x:hidden on , which makes body a scrolling box and stops sticky descendants pinning at all — measured, a sticky masthead scrolled away to top:-547 at 390px. Overriding the theme's overflow-x was rejected: it masks horizontal overflow elsewhere and removing it can expose sideways scroll on unaudited pages. Fixed positioning takes the row out of flow, which would collapse the document by its height and jump the page under the reader's thumb. header.js measures the row's natural height and publishes it as --tsp-hd-mast-h; the same value is reserved here as padding on .tsp-hd, so the document height never changes and nothing moves. header.js adds `is-scrolled` past 200px and removes it below 160px. The 40px of hysteresis is deliberate: at a single threshold, a header that shrinks can pull the document back under the threshold, grow, and oscillate. ========================================================================== */ @media (max-width:782px){ .tsp-hd.is-scrolled{padding-top:var(--tsp-hd-mast-h,84px)} .tsp-hd.is-scrolled .tsp-hd__masthead{ position:fixed; top:0;left:0;right:0; /* Below the drawer (1300) and the tab bar (1200): neither shares screen space with it, and the drawer must cover it when open. */ z-index:1100; background:#fff; box-shadow:0 6px 18px rgba(20,24,31,.08); } /* The admin bar is fixed at 46px on phones for logged-in editors; without this the condensed row hides underneath it. */ .admin-bar .tsp-hd.is-scrolled .tsp-hd__masthead{top:46px} /* Condensed: ~52px instead of ~84px. Only padding and the logo cap change, and the reserved space above is the FULL height, so shrinking cannot move the page. */ .tsp-hd.is-scrolled .tsp-hd__masthead .tsp-hd__wrap{padding-top:6px;padding-bottom:6px} .tsp-hd.is-scrolled .tsp-hd__logo-img{max-height:34px} /* The utility bar is deliberately left alone. It is already scrolled off screen at the 200px threshold, so hiding it buys nothing — and inside the 160-200px hysteresis band a hidden-but-still-occupying bar would show as a white strip while scrolling back up. */ } /* A reader who asked for less motion still gets the header, without the shadow fading in and out. */ @media (max-width:782px) and (prefers-reduced-motion:reduce){ .tsp-hd.is-scrolled .tsp-hd__masthead{transition:none} } /* ========================================================================== v1.10.120 — utility-bar tap targets reach the 24px floor (WCAG 2.5.8). Measured at 1422px: the About / Careers / Contact links computed 14.8px tall (display:inline, no padding) and the social buttons 22x22. Both are under the 24px minimum. Grown with box size, NOT font size: the bar's 11–12px type is the v2.2 prototype's and is deliberate, and the audit is about the hit area, not the text. min-height on an inline-flex anchor grows the target around the same glyphs. The 36px bar absorbs this without moving: 24 < 36, and the row is centred, so the masthead below it does not shift. Verified — the bar stays 36px. Desktop only, deliberately. Below 782px `.tsp-hd__util-menu` is already display:none and v1.10.109 hides `.tsp-hd__socials`, so there is nothing to grow on a phone; scoping to min-width keeps this away from the mobile rules the touch-target work already settled at 44px. ========================================================================== */ @media (min-width:783px){ .tsp-hd__util-menu a{display:inline-flex;align-items:center;min-height:24px} /* (0,2,0) to match the base rule at line 188, plus later source order. */ .tsp-hd .tsp-hd__social{width:24px;height:24px} } /* ========================================================================== v1.10.184 — CAREERS BANNER AS REAL MARKUP, AND THE MASTHEAD ROW MOVES HOME This block replaces four Customizer rules that between them owned the masthead. They are removed from wp-custom-css on staging as part of this change; what each did, and where it went: [13] @media(min-width:901px) — painted the banner as a background image on `.tsp-hd__wrap::after`, set the flex order of logo/తెలుగు/search, sized the search to a 40px circle and expanded its input on focus. -> the banner is now markup (see `careers_banner()`); the order, circle and focus-expand behaviour are re-stated below. [14] @media(901–1099px) — hid the banner in that range. -> kept as a container-free width rule below; the banner still stands down where the row cannot hold it. [33] @media(min-width:1100px) — `position:absolute` on తెలుగు and search to lift them out of the masthead and pin them over the nav row, with hand-tuned top/right offsets. Its own comment admits the reason: "the template cannot be re-ordered from CSS alone." -> NOT reproduced. The controls stay in their own row as normal flex children, which is what the markup already describes. Absolute positioning against a `calc(100% + 6px)` offset is exactly the brittle hack this pass exists to remove. [34] @media(901–1099px) — `margin-left:auto` on తెలుగు to un-strand it once [14] hid the ad. -> superseded; the row is flex-end aligned below. No `!important` anywhere here: with the Customizer rules gone there is nothing left to out-rank. ========================================================================== */ /* `.tsp-hd .tsp-hd__careers`, not the bare class: `.tsp-hd a{color:inherit}` at line 24 is (0,1,1) and beat a (0,1,0) `color:#fff`, so the lead line inherited the masthead's ink and rendered #16181F on a #16181F panel — invisible, while the roles line and "we're hiring" showed because they set their own colour. (0,2,0) is the same remedy this file already documents for `.tsp-hd__social`. */ .tsp-hd .tsp-hd__careers{ display:none; /* shown from 1100px; see the tier below */ align-items:center; gap:18px; min-width:0; padding:12px 16px; border-radius:8px; background:var(--ts-ink,#16181F); color:#fff; text-decoration:none; line-height:1.3; } .tsp-hd__careers-body{min-width:0} .tsp-hd__careers-lead{ display:block; font-family:var(--ts-ui,inherit); font-size:15px; font-weight:700; letter-spacing:.01em; } /* The one warm accent the old artwork had, kept as type rather than pixels. */ .tsp-hd__careers-hiring{color:var(--ts-gold,#E8B44A);font-weight:800} .tsp-hd__careers-roles{ display:block; margin-top:3px; font-family:var(--ts-ui,inherit); font-size:11.5px; color:rgba(255,255,255,.72); /* The roles line is the first thing to give when the row narrows. */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tsp-hd__careers-cta{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:6px; background:#fff; color:var(--ts-red,#C8102E); font-family:var(--ts-ui,inherit); font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; } .tsp-hd__careers:hover .tsp-hd__careers-cta, .tsp-hd__careers:focus-visible .tsp-hd__careers-cta{background:var(--ts-red,#C8102E);color:#fff} .tsp-hd__careers:focus-visible{outline:2px solid var(--ts-red,#C8102E);outline-offset:3px} .tsp-hd__careers-arrow{transition:transform .18s ease} .tsp-hd__careers:hover .tsp-hd__careers-arrow{transform:translateX(2px)} @media (prefers-reduced-motion:reduce){ .tsp-hd__careers-arrow{transition:none} .tsp-hd__careers:hover .tsp-hd__careers-arrow{transform:none} } /* Masthead row composition. Migrated from Customizer [13]: same orders, same 40px control, stated here instead. The banner takes the middle and the two controls sit at the end — no absolute positioning, so the row is still one flex line and the tab order still follows the DOM. */ @media (min-width:901px){ .tsp-hd__masthead .tsp-hd__wrap{display:flex;align-items:center;gap:20px} .tsp-hd__masthead .tsp-hd__logo{order:1;flex:0 0 auto} .tsp-hd__masthead .tsp-hd__careers{order:2;flex:1 1 auto;margin-inline:auto} .tsp-hd__masthead .tsp-hd__te{order:3;margin:0;flex:0 0 auto} .tsp-hd__masthead .tsp-hd__search{ order:4;flex:0 0 40px;width:40px;height:40px;max-width:none; margin:0;padding:0;justify-content:center;border-radius:999px; position:relative;overflow:visible; } /* Search expands on focus — migrated verbatim in behaviour from [13]. */ .tsp-hd .tsp-hd__search .tsp-hd__search-icon{position:relative;z-index:1;pointer-events:none} .tsp-hd .tsp-hd__search input[type="search"]{ position:absolute;top:0;right:0;width:40px;height:40px;padding:0;opacity:0; border:0;border-radius:999px;background:transparent;cursor:pointer;transition:width .2s ease; } .tsp-hd .tsp-hd__search input[type="search"]:focus{ top:48px;right:0;width:320px;opacity:1;padding:0 16px;background:#fff; border:1px solid var(--tsp-hairline,#E3E5E8);border-radius:8px; box-shadow:0 10px 26px rgba(0,0,0,.14);z-index:5;cursor:text; } } @media (prefers-reduced-motion:reduce){ .tsp-hd .tsp-hd__search input[type="search"]{transition:none} } /* The banner needs a real measure before it earns its place. Below 1100px the logo, two controls and a two-line banner cannot share a line without the roles line collapsing to nothing — which is why Customizer [14] hid the image at 901–1099px. Same threshold, same decision, stated once. */ @media (min-width:1100px){ .tsp-hd__masthead .tsp-hd__careers{display:flex} } /* ========================================================================== v1.10.186 — Careers banner composition, and the active-section underline. THE CTA WAS NOT FLOATING BY CHOICE. Measured at 1600: the banner is 742px wide with 16px padding, so 710px of content box, but body (457) + gap (18) + CTA (130) fills only 605. `.tsp-hd__careers-body` had no `flex-grow`, and the row has no `justify-content`, so the pair packed at the start and left 105px of dead space to the RIGHT of "Apply now" — which is exactly why the button read as detached from its own banner rather than as a right-hand action area. Letting the body take the free space pushes the CTA to the right edge and hands the roles line the width it was short of, fixing both complaints with one property rather than by nudging paddings. ========================================================================== */ .tsp-hd .tsp-hd__careers-body{flex:1 1 auto} /* Internal spacing: a little more air at the sides and between the two text lines. Vertical padding is deliberately unchanged — the banner is 61px and the masthead 93px, and this pass must not give that back. */ .tsp-hd .tsp-hd__careers{padding:12px 20px} .tsp-hd__careers-roles{margin-top:4px} /* ACTIVE SECTION UNDERLINE. Measured: the current item was red but had NO underline at all — no border, no box-shadow, no pseudo-element. `text-decoration` is used rather than an `::after`, because the brief asks for a rule "approximately matching the text width" and that is precisely what a text decoration measures; a pseudo-element pinned to the link box would span its padding instead and need the padding value repeated here to fake the inset. The full-width red rule under the row is left alone: it says "masthead", while this says "you are here", and the brief keeps them as two different signals. */ @media (min-width:901px){ .tsp-hd__primary-menu .current-menu-item > a, .tsp-hd__primary-menu .current_page_item > a, .tsp-hd__primary-menu .current-menu-ancestor > a{ color:var(--ts-red,#C8102E); text-decoration:underline; text-decoration-color:var(--ts-red,#C8102E); text-decoration-thickness:2px; text-underline-offset:7px; } } /* ========================================================================== v1.10.187 — ONE SHARED DESKTOP GRID, so తెలుగు and Search can sit in the primary row while remaining a SINGLE pair of controls. THE BLOCKER, precisely: the controls live in the masthead's wrap and the menu in the primary row's wrap. Two sibling boxes, each with its own `max-width/margin-inline/padding-inline`, so nothing in one can participate in the other's layout. Duplicating the form and the language link would have "solved" it and is exactly what must not happen. THE FIX: at desktop the row wrappers are dissolved with `display:contents`, which makes their children direct grid items of `.tsp-hd`, and the grid then places them into whichever row the design wants. One DOM, one search form, one language link, no JavaScript, no absolute positioning. WHICH SIDE DISSOLVES, AND WHY IT IS DESKTOP: - `.tsp-hd__masthead` is pinned with `position:fixed` by the phone sticky header. A fixed box cannot also be `display:contents` — dissolving on mobile would have deleted the sticky header. Desktop has no sticky. - Mobile's `☰ LOGO తెలుగు ⌕` is already satisfied by plain flow, so the tighter contract is the one left untouched. WHAT IS NOT DISSOLVED: `