/* ============================================================= DTFtransfers site header — shared by the front door (/) and /create-account so the two pages cannot drift apart. Ported from the store theme's sections/dtf-header.liquid. --site-max below is the page container width; the blue panel aligns its copy to the same token. The header MARKUP stays inline in each page on purpose: the nav links must be in the HTML for crawlers, and a JS-injected header would visibly pop in. Edit both pages when the nav changes. ============================================================= */ :root{ --blue:#0177C4; --blue-dark:#0177c4; --blue-soft:rgba(1,119,196,.1); --ink:#0d1422; --ink2:#475569; --ink3:#7c8aa0; --line:#e6ebf2; --bg:#f7f9fc; --card:#fff; --ok:#0f9d58; --step-0:clamp(1rem,.95rem + .25vw,1.125rem); --step-1:clamp(1.15rem,1.05rem + .5vw,1.5rem); --step-2:clamp(1.45rem,1.2rem + 1.1vw,2.1rem); --step-3:clamp(2rem,1.5rem + 2.6vw,3.6rem); --sp-s:clamp(.75rem,.5rem + 1vw,1.25rem); --sp-m:clamp(1.25rem,.9rem + 1.75vw,2.5rem); --sp-l:clamp(2.25rem,1.5rem + 3.5vw,4.5rem); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* page container width — the blue auth panel aligns its copy to this too (dtf-auth-panel.css reads var(--site-max)), so ONE change moves both */ --site-max:87.5rem; /* 1400px */ } .wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto;} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;text-decoration:none;border-radius:11px;cursor:pointer;border:0;min-height:44px;padding:10px 18px;font-size:15px;white-space:nowrap;} .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px -10px rgba(1,119,196,.65);} .btn-primary:hover{background:#015C99;} .btn-ghost{background:none;color:var(--ink);border:1px solid var(--line);} .btn-ghost:hover{border-color:var(--blue);color:var(--blue-dark);} /* ---------- header ---------- */ .hd{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);} /* wrap at EVERY width, not just in the 760-989 band below: with five menu items the row can also run out of room just above 990 (measured 54px of page overflow at 990, 24px at 1024). Wrapping is inert while everything fits, so this costs nothing at desktop and means another nav item can never push the page into horizontal scroll. */ .hd-in{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.5rem);min-height:64px;flex-wrap:wrap;} .hd-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto;padding-block:8px;} .hd-logo img.mark{width:clamp(28px,2rem + .4vw,34px);height:auto} .hd-logo img.word{height:clamp(18px,1rem + .5vw,23px);width:auto} .hd-logo img.full{height:clamp(30px,1.6rem + .8vw,40px);width:auto} .hd-nav{display:flex;gap:2px;margin-right:auto;flex-wrap:wrap;min-width:0;} /* Desktop takes the store's clamp too, not sell.*'s old 38-46. Keeping the old desktop value while the sub-1024 band moved to the store's flat 24px turned the 1024 boundary into a 24 -> 41px jump (measured), which is a bigger step than either site had before. The store steps 24 -> ~33 here, so copying its whole ladder is what actually removes the seam. */ .hd-logo .brandmark{height:clamp(30px,1.7rem + .6vw,36px);width:auto;display:block;} /* mega menu — matches sections/dtf-header.liquid on the store theme (NOD-HEADER-HANDOFF) */ .dtfhd-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;flex-wrap:wrap;} .dtfhd-item{position:relative;} /* Type matched to dtftransfers.com's header, from Justin's measured spec (2026-08-12, live at 1440): the store's stack, 12.6px at >=1280 via its own clamp, 650/#475569, line-height 1.4. The family is pinned explicitly because this page's body font is not the store's system stack, and inheriting it is exactly how the two headers drifted. */ .dtfhd-toplink{display:inline-flex;align-items:center;gap:clamp(3px,.5vw,6px); padding:9px clamp(7px,2.2vw - 16px,12px);border-radius:9px; font-family:-apple-system,"system-ui","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; font-size:clamp(11.25px,.54vw + 5.76px,12.6px);font-weight:650; letter-spacing:normal;line-height:1.4; color:var(--ink2,#475569);text-decoration:none;white-space:nowrap; transition:color .15s ease,background-color .15s ease;} .dtfhd-item.open>.dtfhd-toplink,.dtfhd-toplink:hover,.dtfhd-toplink:focus-visible{ color:var(--blue-dark,#0177c4);background:var(--blue-soft,rgba(1,119,196,.1));} /* placeholder top-level item: looks native, but nothing to click yet — so no pointer and no hover highlight (both promise an action). Two classes beat .dtfhd-toplink:hover on its own. */ .dtfhd-sheethead{display:none;} .dtfhd-toplink--inert{cursor:default;} .dtfhd-toplink--inert:hover,.dtfhd-toplink--inert:focus-visible{color:var(--ink2);background:none;} .dtfhd-caret{opacity:.55;transition:transform .18s ease;flex:0 0 auto;} .dtfhd-item.open .dtfhd-caret{transform:rotate(180deg);} .dtfhd-item.has-panel::after{content:'';position:absolute;top:100%;left:-16px;right:-16px;height:16px;} /* CLOSED panels are invisible (visibility:hidden) but STILL LAID OUT, so they count toward the page's scrollWidth: centred on the last item, the 240px Support panel hung past the viewport and put the whole page into horizontal scroll (54px at 990, 63px at 760 — appeared as soon as a 5th menu item pushed Support further right). Park closed panels anchored to their item's RIGHT edge, where they can never reach past the container. Where a panel sits while closed doesn't matter: openItem() zeroes --shift, measures, and clamps it on open, and the .open rule below restores the centred geometry. */ .dtfhd-panel{position:absolute;top:calc(100% + 10px);left:auto;right:0; transform:translateX(var(--shift,0px)) translateY(-6px); background:#fff;border:1px solid var(--line,#e6ebf2);border-radius:14px; box-shadow:0 12px 40px -12px rgba(13,20,34,.22);padding:10px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:150;} .dtfhd-item.open>.dtfhd-panel{opacity:1;visibility:visible;pointer-events:auto; left:50%;right:auto; transform:translateX(calc(-50% + var(--shift,0px))) translateY(0);} .dtfhd-panel--cards{width:min(360px,calc(100vw - 24px));} .dtfhd-panel--links{min-width:240px;} /* merged DTF + UV mega panel: two .dtfhd-card columns with an eyebrow, one-line pitch and a gradient rule per family. Brand tokens come from dtf-palette.css on the pages that load it; the literal fallbacks are the same values so the panel cannot render blue anywhere else. */ .dtfhd-panel--mega{width:min(720px,calc(100vw - 24px));padding:16px 6px;} /* 720, not 660: at 660 the Transfers-by-Size title plus the Most-popular pill need ~20px more than the column offers and the pill wraps under the title */ .dtfhd-mega{display:grid;grid-template-columns:1fr 1fr;} .dtfhd-mcol{min-width:0;padding:0 14px;} .dtfhd-mcol+.dtfhd-mcol{border-left:1px solid var(--line,#e6ebf2);} .dtfhd-mhead{margin:2px 10px 3px;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;} .dtfhd-mhead--dtf{color:var(--brand-eyebrow,#E4550A);} .dtfhd-mhead--uv{color:var(--brand-pink,#FF2E86);} .dtfhd-msub{margin:0 10px 10px;font-size:12.5px;line-height:1.4;color:var(--ink2,#475569);} .dtfhd-mrule{display:block;height:2px;border-radius:2px;margin:0 10px 10px;} .dtfhd-mrule--dtf{background:linear-gradient(90deg,var(--brand-orange,#FF8A2B),var(--brand-red,#FF394C));} .dtfhd-mrule--uv{background:linear-gradient(90deg,var(--brand-red,#FF394C),var(--brand-pink,#FF2E86));} /* title + "Most popular" pill share a row in the mega panel (the stacked badge is the old single-column look) */ .dtfhd-card-trow{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;} .dtfhd-card-trow .dtfhd-card-badge{margin-bottom:0;} .dtfhd-cards{display:grid;grid-template-columns:1fr;gap:4px;} .dtfhd-card{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px; text-decoration:none;transition:background-color .12s ease;min-width:0;} .dtfhd-card:hover,.dtfhd-card:focus-visible{background:var(--blue-soft,rgba(1,119,196,.1));} .dtfhd-card-img{flex:0 0 auto;width:64px;height:64px;border-radius:10px; background:var(--bg,#f7f9fc);border:1px solid var(--line,#e6ebf2);overflow:hidden;} .dtfhd-card-img img{width:100%;height:100%;object-fit:cover;display:block;} .dtfhd-card-body{display:flex;flex-direction:column;gap:2px;min-width:0;} .dtfhd-card-badge{align-self:flex-start;font-size:9px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--blue-dark,#0177c4); background:var(--blue-soft,rgba(1,119,196,.1));padding:2px 6px;border-radius:4px;margin-bottom:1px;} .dtfhd-card-title{font-size:13.5px;font-weight:700;color:var(--ink,#0d1422);line-height:1.25;} .dtfhd-card-sub{font-size:12px;color:var(--ink2,#475569);line-height:1.35;} .dtfhd-links{list-style:none;margin:0;padding:2px;} .dtfhd-linkrow{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:600; color:var(--ink2,#475569);text-decoration:none;white-space:nowrap; transition:color .12s ease,background-color .12s ease;} .dtfhd-linkrow:hover,.dtfhd-linkrow:focus-visible{ color:var(--blue-dark,#0177c4);background:var(--blue-soft,rgba(1,119,196,.1));} @media (prefers-reduced-motion:reduce){.dtfhd-panel,.dtfhd-caret{transition:none;}} /* tablet band: logo + 4 menu items + the phone block exceed one row until ~1120px — wrap the menu onto its own centered second row instead of overflowing the viewport */ @media(min-width:760px) and (max-width:1119px){ .hd-in{flex-wrap:wrap;row-gap:2px;padding-block:8px;} .hd-nav{order:3;flex-basis:100%;justify-content:center;margin-right:0;} .dtfhd-menu{flex-wrap:wrap;justify-content:center;} } .hd-cta{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;} .hd-nav + .hd-cta{margin-left:0;} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;text-decoration:none;border-radius:11px;cursor:pointer;border:0;min-height:44px;padding:10px 18px;font-size:15px;white-space:nowrap;} .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px -10px rgba(1,119,196,.65);} .btn-primary:hover{background:#015C99;} .btn-ghost{background:none;color:var(--ink);border:1px solid var(--line);} .btn-ghost:hover{border-color:var(--blue);color:var(--blue-dark);} .btn-big{padding:14px 28px;font-size:clamp(15px,.9rem + .3vw,17px);border-radius:13px;} /* phones: the nav IS the drawer (off-canvas left, slides in under body.dtfhd-navopen). It stays rendered but visibility:hidden while closed, so nothing is focusable off-screen and nothing counts toward scrollWidth. Styled in the drawer block further down. */ /* header auth links (front door): highlight mirrors the active card tab */ .hd-auth{display:inline-flex;align-items:center;font-weight:700;font-size:13.5px;line-height:1; color:#0D1422;text-decoration:none;padding:10px 12px;border-radius:999px;white-space:nowrap;} .hd-auth:hover,.hd-auth:focus-visible{color:var(--brand-link,#D9481A);background:none;} .dtfhd-toplink.is-on{color:var(--blue-dark);background:var(--blue-soft);} /* the ACTIVE auth link keeps only the colour shift: the tinted pill read as an orange glow stuck on Sign In after a tap (Justin 2026-08-01) */ .hd-auth{-webkit-tap-highlight-color:transparent;} .hd-auth.is-on{color:#0D1422;background:none;} /* active tab shows no state on the link at all (Justin 2026-08-01) */ /* the Sign up half of the pair wears the brand gradient; declared after the hover rule so the gradient wins on hover too (equal specificity, later declaration) */ .hd-auth--primary,.hd-auth--primary:hover,.hd-auth--primary:focus-visible,.hd-auth--primary.is-on{ color:#fff;padding:11px 17px;border-radius:999px; background:var(--grad-brand,linear-gradient(135deg,#FF8A2B 0%,#FF394C 100%)); box-shadow:0 8px 18px -8px rgba(255,57,76,.55);} .hd-auth--primary:hover{filter:brightness(1.05);} /* the in-sheet copy of the pair exists only on phones; desktop shows the .hd-cta pair instead */ .dtfhd-item--auth{display:none;} /* match the dtftransfers.com store header (dtf-header.liquid): container, bar, logo */ .hd-in{width:min(100% - clamp(1.25rem,4vw,3rem),var(--site-max));gap:clamp(.25rem,1vw,1rem);min-height:62px;} /* logo size for every width under 1024 comes from the dtftransfers ladder below */ /* Logo, mobile + tablet: dtftransfers.com's exact ladder (Justin 2026-08-12, "make sure the mobile logo in header is the same on sell.dtf as it is on DTF"). Measured on the store at 390px: dtf-logo-horizontal.svg rendering 144.648 x 24 in a 144.6 x 40 link box. The artwork is already identical — nod-logo.svg is a byte-for-byte copy of that file — so only the size differed, and only because a ladder of shrink rules had accumulated to make room for the Sign in / Sign up pair and the handset icon, all of which are gone. One step per breakpoint, the same three the store uses, so the two headers can't drift apart again. Desktop (>=1024) deliberately keeps ITS OWN larger size — see the note there. */ @media(max-width:1023.98px){ .hd-in{gap:.35rem;} .hd-logo .brandmark{height:24px;} } @media(max-width:389px){ .hd-logo .brandmark{height:21px;} } @media(max-width:340px){ .hd-logo .brandmark{height:19px;} } /* ---- Talk-to-a-rep phone block ---- Desktop: two-line text, top line cross-fading between "Talk to a rep" and "Wait Time: 0 min". The two tops stack in one GRID CELL (grid-area 1/1), so the container sizes itself to the wider of the two and nothing jumps when they trade places - absolute positioning here would need a hand-tuned width. Phones swap the whole block for a bare handset icon button. */ .dtfhd-rep{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none;color:var(--ink,#0d1422);} .dtfhd-rep-icon{display:none;} .dtfhd-rep-body{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;} .dtfhd-rep-tops{display:grid;justify-items:start;} .dtfhd-rep-top{grid-area:1/1;display:inline-flex;align-items:center;white-space:nowrap; font-size:12.5px;font-weight:600;color:var(--ink,#0d1422); animation:dtfhdRepFade 8s ease-in-out infinite;} /* same keyframes, opposite phase: -4s starts B mid-cycle, exactly where A is faded out */ .dtfhd-rep-top--b{opacity:0;animation-delay:-4s;} .dtfhd-rep-num{font-size:15.5px;font-weight:800;letter-spacing:.01em;color:var(--ink,#0d1422);font-variant-numeric:tabular-nums;} .dtfhd-rep:hover .dtfhd-rep-num,.dtfhd-rep:focus-visible .dtfhd-rep-num{color:var(--blue-dark,#0177c4);} .dtfhd-rep-dot{width:8px;height:8px;border-radius:50%;background:var(--ok,#0f9d58);margin-right:7px;flex:0 0 auto; animation:dtfhdRepPulse 2s ease-out infinite;} /* each state holds ~3.4s, fades over ~0.6s */ @keyframes dtfhdRepFade{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}} /* the ring fades to ITS OWN hue at alpha 0 - fading to transparent interpolates through black */ @keyframes dtfhdRepPulse{0%{box-shadow:0 0 0 0 rgba(15,157,88,.45)}70%{box-shadow:0 0 0 6px rgba(15,157,88,0)}100%{box-shadow:0 0 0 0 rgba(15,157,88,0)}} @media(prefers-reduced-motion:reduce){ /* animation:none leaves the base opacities: A visible, B hidden - a static first state */ .dtfhd-rep-top,.dtfhd-rep-dot{animation:none;} } /* 760-989 wraps the nav onto its own row, and below 760 hides it entirely - in both bands nothing to the left carries margin-right:auto any more, so the rep block pins itself */ @media(max-width:989px){.dtfhd-rep{margin-left:auto;}} @media(max-width:759px){ /* The bare handset is gone (Justin 2026-08-11): phones show the SAME talk-to-a-rep block the desktop bar carries, so the number and wait time are readable without opening the drawer. The Sign in / Sign up pair that used to own this edge was removed, which is what freed the room. Type steps down at the two narrow breakpoints below so burger + logo + block still hold one line at 320px. */ .dtfhd-rep{display:inline-flex;margin-left:auto;} .dtfhd-rep-top{font-size:11.5px;} .dtfhd-rep-num{font-size:14.5px;} } /* ---- phones: the burger ---- Below 760 the rule above hides .hd-nav outright and nothing revealed it, so every nav item was unreachable on a phone (Justin 2026-07-29: "where is the hamburger menu on ipad / iphone?"). iPad portrait is untouched: the 760-989 band wraps the nav onto its own row and needs no burger. The sheet reuses the SAME .dtfhd-item.open accordion the desktop panels use, so there is no parallel mobile nav to keep in sync. */ .dtfhd-burger{display:none;} @media(max-width:759px){ .dtfhd-burger{ display:inline-grid;place-items:center;flex:0 0 auto; width:44px;height:44px;padding:0;border:0;border-radius:10px; background:none;color:var(--ink,#0d1422);cursor:pointer; } .dtfhd-burger:hover{background:var(--blue-soft,rgba(255,57,76,.1));color:var(--blue-dark,#D9481A);} /* If a page DOES carry .hd-cta, drop its own margin-left:auto: two auto margins would split the free space between them and strand the CTA mid-bar. This way the CTA follows the logo and the burger still takes the right edge. */ /* .hd-nav + .hd-cta (two classes) outweighs a bare .hd-cta, which is why the pair sat next to the logo instead of flush right - match its specificity */ .hd-nav + .hd-cta,.hd-cta{margin-left:auto;margin-right:0;gap:2px;} .dtfhd-burger svg{display:block;} /* ---- the drawer: EXACT port of sections/dtf-header.liquid's mobile drawer from the Justin 7-23 staging theme (widths, paddings, and type sizes copied verbatim). ---- */ .hd-nav{ display:flex;flex-direction:column; position:fixed;top:0;left:0;bottom:0;z-index:200; width:min(86vw,24rem);margin-right:0;flex-wrap:nowrap; background:#fff; padding:0 0 calc(4px + env(safe-area-inset-bottom,0px)); transform:translateX(-100%);visibility:hidden; transition:transform .22s ease,visibility .22s; overflow-y:auto;overscroll-behavior:contain; } body.dtfhd-navopen .hd-nav{transform:translateX(0);visibility:visible;} body.dtfhd-navopen{overflow:hidden;} /* The scrim lives on .hd, NOT body: .hd is position:sticky with a z-index, i.e. its own stacking context, so the drawer's z-index only counts INSIDE it. A body-level scrim at any z sits above the whole header subtree - which painted the dim OVER the drawer and swallowed its taps. Inside .hd's context the drawer (200) beats the scrim (150), and the bar's own content dims beneath it like the reference. */ body.dtfhd-navopen .hd::after{content:'';position:fixed;inset:0;background:rgba(13,20,34,.45);z-index:150;} .dtfhd-sheethead{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto; padding:14px 16px 12px 20px;border-bottom:1px solid var(--line,#e6ebf2);} .dtfhd-sheethead span{font-size:15px;font-weight:800;color:var(--ink,#0d1422);} .dtfhd-sheetclose{display:inline-grid;place-items:center; width:44px;height:44px;border:0;border-radius:10px;background:none; color:var(--ink,#0d1422);cursor:pointer;padding:0;} .dtfhd-sheetclose svg{width:20px;height:20px;} .dtfhd-menu{display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap; flex:1 1 auto;min-height:0;padding:8px 10px;} .dtfhd-item{width:100%;} .dtfhd-menu>.dtfhd-item+.dtfhd-item{border-top:1px solid var(--line,#e6ebf2);} .dtfhd-item.has-panel::after{content:none;} .dtfhd-toplink{width:100%;justify-content:space-between;gap:10px; padding:14px 10px;border-radius:10px;font-size:15px;font-weight:700; color:var(--ink,#0d1422);white-space:normal;} .dtfhd-item.open>.dtfhd-toplink{color:var(--blue-dark,#D9481A);background:none;} .dtfhd-caret{opacity:.55;} .dtfhd-panel{position:static;transform:none;opacity:1;display:none; width:auto;min-width:0;max-width:none;border:0;border-radius:0;box-shadow:none;padding:0;} .dtfhd-item.open>.dtfhd-panel{display:block;visibility:visible;pointer-events:auto; background:none;padding:0 4px 12px;} .dtfhd-linkrow{white-space:normal;font-size:14px;font-weight:600;color:var(--ink2,#475569); padding:10px 8px;border-radius:8px;} /* the transfers mega inside the drawer: families stack, the column divider becomes a hairline */ .dtfhd-mega{grid-template-columns:1fr;} .dtfhd-mcol{padding:0;} .dtfhd-mcol+.dtfhd-mcol{border-left:0;border-top:1px solid var(--line,#e6ebf2);margin-top:12px;padding-top:12px;} /* foot: Sign Up over Sign In (column reverses the DOM order), then the phone number */ .dtfhd-item--auth{margin-top:auto;display:flex;flex-direction:column-reverse;gap:8px; border-top:1px solid var(--line,#e6ebf2);padding:14px 10px 2px;} .dtfhd-item--auth .hd-auth{width:100%;justify-content:center;padding:13px;font-size:15px; border-radius:999px;border:1.5px solid #E2E6EE;color:var(--ink,#0d1422);} .dtfhd-item--auth .hd-auth--primary{padding:14px;border:0;color:#fff;} /* The drawer's phone block is the SAME talk-to-a-rep widget the desktop bar carries - pulsing green dot, the "Talk to a rep" / "Wait Time" cross-fade, the number underneath (Justin 2026-08-11). It sits directly under Support / My Account and reads left-aligned with the nav items above it, not centered like the bare number it replaced. The display:inline-flex here is what re-reveals it: the phone-width rule further up sets .dtfhd-rep{display:none} for the bar, and this longer selector out-specifies it. */ } /* ---- phone bar one-liner (Justin 2026-08-03): the pair + handset must share the row with the burger and logo. LAST in the file on purpose - the drawer block above re-declares .hd-cta .hd-auth at equal specificity, so source order is the only thing that wins. ---- */ /* 760-989: the nav wraps to its own row, leaving the logo and the phone block alone on row one. The block used to take a fixed 14px offset because the Sign up / Sign in pair sat before it and owned the auto margin; with the pair and the handset both gone (2026-08-11) it needs that auto margin itself, or it hugs the logo with the whole row empty to its right. */ @media(min-width:760px) and (max-width:1119px){ .dtfhd-rep{margin-left:auto;} } /* Desktop: the phone block's right edge lines up with the right edge of the SIGN-UP FORM (Justin 2026-08-12). That line is not the container edge: dtf-auth-panel.css already pins the auth CARD to the container's right edge, and the card then insets its contents by its own padding, so the tabs and fields end one padding-width short of it. Matching that padding here puts the number directly above where the form ends. This supersedes the 2026-08-11 tweak that parked the block next to the menu: back then the Sign up / Sign in pair had just been removed and the block was stranded mid-row with nothing to relate to. It has something to relate to now. .hd-nav keeps the base margin-right:auto, which is what pushes the block to the end of the row in the first place. */ @media(min-width:1120px){ .dtfhd-rep{margin-left:auto;margin-right:clamp(1.5rem, 1rem + 2.5vw, 2.5rem);} } /* Phone bar, narrow end: the rep block replaced the handset, so it is the widest thing on the right. Step it down with the logo instead of letting the row wrap (Justin 2026-08-11). */ @media(max-width:389px){ .dtfhd-rep-top{font-size:11px;} .dtfhd-rep-num{font-size:13.5px;} .dtfhd-rep-dot{width:7px;height:7px;margin-right:5px;} } @media(max-width:340px){ .dtfhd-rep-top{font-size:10.5px;} .dtfhd-rep-num{font-size:12.5px;} }