purely so global.js * can read its `min-width: 1024px` and learn the desktop breakpoint. But it is * a block-level element in the body flow, so that 1024px is also a *layout* * constraint: every page was 1024px wide on a 375px phone, giving the whole * site horizontal scroll — a direct Core Web Vitals and usability failure. * * Taking it out of flow off to the left keeps `getComputedStyle().minWidth` * reporting 1024px for the JS while removing it from the document width * (leftward overflow does not create scroll in LTR). * ====================================================================== */ #pp-breakpoint-desktop { position: absolute; left: -9999px; top: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; } /* * Fixed-size ad units are wider than a phone. Contain them in their own * scroll box rather than resizing the unit — the ad renders at its intended * dimensions and stays fully viewable, but it can no longer stretch the page. */ .adplus-slot-wrapper, [class^="adplus_adsense"], [class*=" adplus_adsense"] { max-width: 100%; /* * Both axes have to be named. Per the overflow spec, when one axis is not * `visible` the other computes to `auto` — so `overflow-x: auto` alone put * a vertical scrollbar on every unfilled ad slot. */ overflow-x: auto; overflow-y: hidden; } /* ========================================================================= * Accessibility * ====================================================================== */ /* Self-contained visually-hidden utility. The theme ships `.screen-reader-text`, but relying on another stylesheet for something that visibly breaks a button when absent is not a trade worth making. */ .gjc-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .gjc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 20px; background: var(--gjc-accent); color: var(--gjc-accent-ink); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--gjc-radius) 0; } .gjc-skip-link:focus { left: 0; outline: 3px solid #ffb703; outline-offset: 2px; } .gjc :is(a, button, [tabindex]):focus-visible { outline: 3px solid var(--gjc-accent); outline-offset: 2px; border-radius: 4px; } /* ========================================================================= * Reading progress * ====================================================================== */ .gjc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; background: transparent; pointer-events: none; } .gjc-progress__bar { display: block; height: 100%; width: 0; background: var(--gjc-accent); transition: width 90ms linear; } /* ========================================================================= * Key Facts answer block * ====================================================================== */ .gjc-facts { margin: 0 0 1.75rem; padding: 1.4rem 1.5rem 1.2rem; background: var(--gjc-surface-2); border: 1px solid var(--gjc-rule); border-left: 3px solid var(--gjc-seal); border-radius: 0; color: var(--gjc-ink); } .gjc-facts.is-expired { border-left-color: var(--gjc-warn); } /* --------------------------------------------------------------------------- * The register strip — the identifiers that place a notification. * * Rendered as one continuous ruled band rather than separate pills: these are * fields off a single record, not independent tags. * ------------------------------------------------------------------------ */ .gjc-record { display: flex; flex-wrap: wrap; /* * Items overlap their neighbour's border by 1px, so a wrapped row still * starts with a visible left edge instead of a floating one. The padding * gives that first -1px somewhere to go. */ padding-left: 1px; margin: 0 0 1.1rem; font-family: var(--gjc-display); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .gjc-record__item { padding: .35rem .75rem; border: 1px solid var(--gjc-rule); margin-left: -1px; margin-bottom: -1px; background: var(--gjc-paper); color: var(--gjc-muted); /* Long body names must not force the strip wider than the card. */ min-width: 0; overflow-wrap: anywhere; } .gjc-record__item b { color: var(--gjc-ink); font-weight: 800; } /* The advertisement number is the one identifier a candidate quotes back. */ .gjc-record__item--advt { border-left: 3px solid var(--gjc-stamp); margin-left: 0; background: var(--gjc-stamp-bg); color: var(--gjc-stamp); /* Above its neighbours so the stamp edge is never overlapped. */ position: relative; z-index: 1; } .gjc-record__item--advt b { color: var(--gjc-stamp); } /* --------------------------------------------------------------------------- * The pay-matrix scale. * * Only ~1 notification in 50 names a level, so this is an enhancement, never * a fixture — everything below assumes it may simply be absent. * ------------------------------------------------------------------------ */ .gjc-matrix { margin: 0 0 1.25rem; padding: 1rem 1.1rem .9rem; background: var(--gjc-paper); border: 1px solid var(--gjc-rule); border-left: 3px solid var(--gjc-seal); } .gjc-matrix__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; margin-bottom: .7rem; } .gjc-matrix__level { font-family: var(--gjc-display); font-weight: 800; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.01em; color: var(--gjc-seal); } .gjc-matrix__of { font-size: .9rem; color: var(--gjc-muted); } .gjc-matrix__scale { display: flex; gap: 3px; align-items: flex-end; } .gjc-matrix__scale i { flex: 1 1 0; min-width: 0; height: 18px; display: block; background: var(--gjc-rule); border-radius: 1px; } .gjc-matrix__scale i.is-below { background: #9fcb9f; } .gjc-matrix__scale i.is-here { height: 28px; background: var(--gjc-stamp); } .gjc-matrix__ticks { display: flex; gap: 3px; margin-top: .35rem; font-family: var(--gjc-display); font-weight: 700; font-size: .65rem; color: var(--gjc-muted); font-variant-numeric: tabular-nums; } .gjc-matrix__ticks span { flex: 1 1 0; min-width: 0; text-align: center; } .gjc-matrix__ticks span.is-here { color: var(--gjc-stamp); } .gjc-facts__title { margin: 0 0 .75rem; font-family: var(--gjc-display); font-size: 1.15rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; } .gjc-facts__notice { margin: 0 0 .85rem; padding: .55rem .75rem; background: rgba(180, 35, 24, .08); border-radius: 8px; color: var(--gjc-warn); font-size: .9rem; font-weight: 600; } .gjc-facts__list { margin: 0; display: grid; gap: 0; background: transparent; border: 0; border-radius: 0; } .gjc-facts__row { display: grid; grid-template-columns: minmax(9rem, 12.5rem) 1fr; gap: 0; background: transparent; border-bottom: 1px solid var(--gjc-rule); } .gjc-facts__row:last-child { border-bottom: 0; } .gjc-facts__row > dt, .gjc-facts__row > dd { margin: 0; padding: .75rem 0; font-size: .95rem; line-height: 1.5; } .gjc-facts__row > dt { font-family: var(--gjc-display); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gjc-muted); padding-right: 1.25rem; padding-top: .95rem; } .gjc-facts__row > dd { color: var(--gjc-ink); overflow-wrap: anywhere; /* Figures line up column-wise: this table is mostly numbers and dates. */ font-variant-numeric: tabular-nums; } .gjc-facts__deadline { font-weight: 700; color: var(--gjc-warn); } .gjc-facts .gjc-cta { margin-top: 1rem; } /* * Stack at 640px, not 480px: a 12.5rem label column against a wrapping value * is already unreadable in the 480–640 band. */ @media (max-width: 640px) { .gjc-facts { padding: 1.1rem 1rem 1rem; } .gjc-facts__row { grid-template-columns: 1fr; padding: .2rem 0; } .gjc-facts__row > dt { padding: .7rem 0 .15rem; font-size: .68rem; } .gjc-facts__row > dd { padding: 0 0 .7rem; } /* One chip per line reads as a record; two half-lines read as debris. */ .gjc-record { font-size: .66rem; } .gjc-record__item { flex: 1 0 100%; margin-left: 0; } .gjc-matrix { padding: .9rem .85rem .8rem; } .gjc-matrix__level { font-size: 1.25rem; } .gjc-matrix__scale { gap: 2px; } .gjc-matrix__ticks { gap: 2px; font-size: .6rem; } } /* ========================================================================= * Mock-test CTA * ====================================================================== */ .gjc-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gjc-gap); margin: 1.75rem 0; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, var(--gjc-accent) 0%, #1657c8 100%); border-radius: var(--gjc-radius); color: #fff; } .gjc-cta__body { flex: 1 1 16rem; min-width: 0; } .gjc-cta__kicker { margin: 0 0 .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .8; } .gjc-cta__title { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 700; line-height: 1.3; } .gjc-cta__text { margin: 0; font-size: .92rem; line-height: 1.5; opacity: .92; } .gjc-cta__button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.25rem; min-height: 44px; background: #fff; color: var(--gjc-accent); border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; } .gjc-cta__button:hover, .gjc-cta__button:focus { color: var(--gjc-accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .gjc-cta__ext { font-size: 1.05em; line-height: 1; } /* Inside the Key Facts box the CTA is secondary — tone it down. */ .gjc-cta--facts { margin: 1rem 0 0; padding: .85rem 1rem; background: var(--gjc-surface-2); border: 1px dashed var(--gjc-accent); color: var(--gjc-ink); } .gjc-cta--facts .gjc-cta__kicker { color: var(--gjc-accent); opacity: 1; } .gjc-cta--facts .gjc-cta__text { display: none; } .gjc-cta--facts .gjc-cta__button { background: var(--gjc-accent); color: var(--gjc-accent-ink); } .gjc-cta--facts .gjc-cta__button:hover, .gjc-cta--facts .gjc-cta__button:focus { color: var(--gjc-accent-ink); } @media (max-width: 560px) { .gjc-cta { flex-direction: column; align-items: stretch; text-align: left; } /* `flex-basis: 16rem` is a row-direction assumption: once the main axis is vertical it becomes a 256px minimum *height* and blows a gap open between the copy and the button. */ .gjc-cta__body { flex: 0 1 auto; } .gjc-cta__button { justify-content: center; width: 100%; } } /* ========================================================================= * Post-content practice section * ====================================================================== */ .gjc-practice { margin: 2rem 0; padding: 1.25rem; background: var(--gjc-surface); border: 1px solid var(--gjc-border); border-radius: var(--gjc-radius); } .gjc-practice__title { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 700; color: var(--gjc-ink); } .gjc-practice__links { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .92rem; } .gjc-practice__links a { color: var(--gjc-accent); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================= * Sticky mobile action bar * ====================================================================== */ .gjc-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; background: var(--gjc-surface-2); border-top: 1px solid var(--gjc-border); box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); padding-bottom: env(safe-area-inset-bottom, 0); transform: translateY(110%); transition: transform .25s ease; } .gjc-stickybar.is-visible { transform: translateY(0); } .gjc-stickybar__inner { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; max-width: 40rem; margin: 0 auto; } .gjc-stickybar__text { flex: 1 1 auto; margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--gjc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gjc-stickybar__button { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 42px; padding: .5rem 1.1rem; background: var(--gjc-accent); color: var(--gjc-accent-ink); border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none; } .gjc-stickybar__button:hover, .gjc-stickybar__button:focus { color: var(--gjc-accent-ink); } .gjc-stickybar__close { flex: 0 0 auto; width: 32px; height: 32px; border: 0; background: transparent; color: var(--gjc-ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 50%; } /* Desktop already has the in-page CTAs in view; the bar is a phone affordance. */ @media (min-width: 782px) { .gjc-stickybar { display: none; } } /* Keep the theme's back-to-top button clear of the bar. */ .gjc-stickybar.is-visible ~ .pp-back-to-top, body:has(.gjc-stickybar.is-visible) .pp-back-to-top { bottom: 74px; } /* ========================================================================= * Content ergonomics * ====================================================================== */ /* Notification posts are table-heavy and the tables are pasted at fixed pixel widths. Scroll them instead of letting them blow out the layout. */ .gjc-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.25rem 0; border: 1px solid var(--gjc-border); border-radius: 8px; background: linear-gradient(to right, var(--gjc-surface-2) 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), var(--gjc-surface-2) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .12), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .12), transparent) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .gjc-table-wrap > table { margin: 0; min-width: 100%; border-collapse: collapse; } .gjc-table-wrap:focus-visible { outline: 2px solid var(--gjc-accent); } .gjc-updated { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; font-size: .85rem; font-weight: 600; color: var(--gjc-ok); } .gjc-updated__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } /* The single H2 we inject into the body should read as part of the article, not as a shouty banner. */ .gjc-injected-heading { margin-top: 2rem; } /* ========================================================================= * Print — candidates print notifications constantly. * ====================================================================== */ @media print { .gjc-stickybar, .gjc-progress, .gjc-cta, .gjc-practice, .pp-back-to-top, .pp-sticky-top-wrapper, .pp-sidebar, #comments, .entry-actions { display: none !important; } html { scroll-padding-top: 0; } .gjc-facts { border: 1px solid #000; background: none; break-inside: avoid; } .gjc-table-wrap { overflow: visible; border: 0; background: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; } } @media (prefers-reduced-motion: reduce) { .gjc-progress__bar, .gjc-stickybar, .gjc-cta__button { transition: none; } } /* ========================================================================= * Mega menu * * Server-rendered from the live category tree. Desktop: hover/click panels * that span the container. Mobile: the bar collapses into an accordion behind * a "Browse jobs" button, because 82 categories will never fit a phone bar. * ====================================================================== */ /* * The bar hangs off `pixelpress_before_content_theme_area`, which renders * outside the theme's container — so by default it runs edge to edge while the * header card and the content above and below it are boxed, and the green * band reads as a separate element pasted over the page. * * The container width is a Customizer value that differs per site (this was * hardcoded to one install's 1182px, which is why it did not line up * anywhere else). `--gjc-container` is measured from the theme's own header * container at runtime; the fallback only applies before that lands or with * JavaScript off, and `100%` keeps a full-width layout full width. */ .gjc-mega { position: relative; z-index: 50; box-sizing: border-box; /* * `#page` is a column flex container, so this bar is a flex item. The auto * margins below cancel the default `align-self: stretch`, which would leave * the bar shrink-wrapped to the width of its own link text. An explicit * width gives the auto margins something definite to centre. */ width: 100%; max-width: var(--gjc-container, 100%); margin-left: auto; margin-right: auto; background: var(--gjc-mast, var(--gjc-accent)); color: var(--gjc-mast-ink, #fff); font-size: 14px; line-height: 1.3; } /* * Boxed layouts only: sit the bar against the header card above it. * * NOT `overflow: hidden`. The dropdown panels are absolutely positioned * children of this element and sit entirely below its 44px box, so clipping * the bar to round its corners clipped every panel out of existence — visible * in the layout tree, but unpainted and unhittable. Round the end links * instead, which contains the hover tint without establishing a clip. */ .gjc-mega--boxed { border-radius: 0 0 var(--gjc-radius, 10px) var(--gjc-radius, 10px); /* Stated explicitly, not merely omitted: the panels must be able to escape. */ overflow: visible; } .gjc-mega--boxed .gjc-mega__item:first-child .gjc-mega__link { border-bottom-left-radius: var(--gjc-radius, 10px); } .gjc-mega--boxed .gjc-mega__item:last-child .gjc-mega__link { border-bottom-right-radius: var(--gjc-radius, 10px); } .gjc-mega__inner { max-width: 100%; margin: 0 auto; padding: 0 15px; position: relative; box-sizing: border-box; } .gjc-mega__list { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding: 0; list-style: none; } .gjc-mega__item { position: static; } .gjc-mega__link { display: inline-flex; align-items: center; gap: .35rem; padding: .85rem .9rem; min-height: 44px; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; } .gjc-mega__link:hover, .gjc-mega__link:focus-visible, .gjc-mega__toggle[aria-expanded="true"] { background: rgba(0, 0, 0, .18); color: #fff; } .gjc-mega__icon { flex: 0 0 auto; width: 18px; height: 18px; opacity: .85; } .gjc-mega__icon--sm { width: 16px; height: 16px; } .gjc-mega__link:hover .gjc-mega__icon, .gjc-mega__toggle[aria-expanded="true"] .gjc-mega__icon { opacity: 1; } /* Icons inside panel links pick up the accent on hover with the text. */ .gjc-mega__links a .gjc-mega__icon { color: var(--gjc-accent); opacity: .7; } .gjc-mega__links a:hover .gjc-mega__icon { opacity: 1; } .gjc-mega__caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 2px; transition: transform .15s ease; } .gjc-mega__toggle[aria-expanded="true"] .gjc-mega__caret { transform: rotate(180deg); } .gjc-mega__item--mock .gjc-mega__link { color: #ffd166; } /* --- panels --- */ .gjc-mega__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--gjc-surface-2); color: var(--gjc-ink); border: 1px solid var(--gjc-border); border-top: 0; border-radius: 0 0 var(--gjc-radius) var(--gjc-radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); } .gjc-mega__panel[hidden] { display: none; } .gjc-mega__panel-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; padding: 1.4rem 1.5rem; } .gjc-mega__col { flex: 1 1 12rem; min-width: 0; } .gjc-mega__col--wide { flex: 2 1 26rem; } .gjc-mega__col--feature { flex: 1 1 15rem; } .gjc-mega__col-title { margin: 0 0 .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gjc-ink-soft); } .gjc-mega__links { margin: 0; padding: 0; list-style: none; } .gjc-mega__links--2 { columns: 2; } .gjc-mega__links--3 { columns: 3; } .gjc-mega__links--4 { columns: 4; } /* Cap column width so a full-width panel does not stretch short labels across half the screen. */ .gjc-mega__links--2, .gjc-mega__links--3, .gjc-mega__links--4 { column-width: 15rem; } .gjc-mega__links--2, .gjc-mega__links--3, .gjc-mega__links--4 { column-gap: 2rem; column-rule: 1px solid var(--gjc-border); } /* * In a multi-column list, `justify-content: space-between` pushes the count to * the far edge of its column, where it sits right against the next column's * labels and reads as a prefix. Keep the count next to the name it belongs to. */ .gjc-mega__links li { break-inside: avoid; } .gjc-mega__links a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem 0; color: var(--gjc-ink); text-decoration: none; font-size: .9rem; } .gjc-mega__links a:hover, .gjc-mega__links a:focus-visible { color: var(--gjc-accent); text-decoration: underline; text-underline-offset: 3px; } /* Multi-column lists: keep the label beside its icon/count instead of letting space-between fling them to opposite edges of a wide column. Declared after the base rule on purpose — equal specificity, so order wins. */ .gjc-mega__links--2 a, .gjc-mega__links--3 a, .gjc-mega__links--4 a { justify-content: flex-start; gap: .4rem; padding-right: .75rem; } .gjc-mega__count { flex: 0 0 auto; font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--gjc-ink-soft); } .gjc-mega__feature { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; } .gjc-mega__feature a { display: flex; gap: .6rem; align-items: flex-start; color: var(--gjc-ink); text-decoration: none; } /* * The thumbnail sits inside a dropdown, so it is capped hard in both axes — * `width`/`height` alone can be overridden by a theme rule, and the source * images are often tall logos (the Ashoka emblem is 44x65). `contain` keeps * them whole instead of scaling up and cropping to fill a square. */ .gjc-mega__thumb { flex: 0 0 auto; display: block; width: 56px; height: 56px; max-width: 56px; max-height: 56px; aspect-ratio: 1; object-fit: contain; background: var(--gjc-surface); border: 1px solid var(--gjc-border); border-radius: 8px; padding: 3px; box-sizing: border-box; } .gjc-mega__thumb--empty { display: grid; place-items: center; color: var(--gjc-ink-soft); opacity: .5; } .gjc-mega__thumb--empty svg { width: 24px; height: 24px; } .gjc-mega__feature-title { display: block; font-size: .85rem; font-weight: 600; line-height: 1.35; } .gjc-mega__feature-date { display: block; margin-top: .15rem; font-size: .72rem; color: var(--gjc-ink-soft); } .gjc-mega__feature a:hover .gjc-mega__feature-title { color: var(--gjc-accent); } .gjc-mega__all { flex: 1 0 100%; margin: 0; padding-top: .9rem; border-top: 1px solid var(--gjc-border); } .gjc-mega__all a, .gjc-mega__cta { color: var(--gjc-accent); font-weight: 700; font-size: .88rem; text-decoration: none; } .gjc-mega__all a:hover, .gjc-mega__cta:hover { text-decoration: underline; } .gjc-mega__note { margin: .9rem 0 0; } .gjc-mega__burger { display: none; } /* --- mobile --- */ @media (max-width: 900px) { .gjc-mega__inner { padding: 0; } .gjc-mega__burger { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .75rem 15px; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .gjc-mega__burger-bars, .gjc-mega__burger-bars::before, .gjc-mega__burger-bars::after { display: block; width: 18px; height: 2px; background: currentColor; content: ""; } .gjc-mega__burger-bars { position: relative; } .gjc-mega__burger-bars::before { position: absolute; top: -6px; } .gjc-mega__burger-bars::after { position: absolute; top: 6px; } .gjc-mega__list { display: none; flex-direction: column; /* * `flex-wrap: wrap` is inherited from the desktop bar. In a *column* * container with a capped height that makes the list wrap into extra * COLUMNS once the content is taller than max-height — items spill off * the right edge and the whole page gains horizontal scroll. Vertical * overflow must scroll here, not wrap. */ flex-wrap: nowrap; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--gjc-accent); } .gjc-mega__item { flex: 0 0 auto; width: 100%; } .gjc-mega__list.is-open { display: flex; } .gjc-mega__item { border-top: 1px solid rgba(255, 255, 255, .16); } .gjc-mega__link { width: 100%; justify-content: space-between; padding: .85rem 15px; white-space: normal; text-align: left; } .gjc-mega__panel { position: static; border: 0; border-radius: 0; box-shadow: none; } .gjc-mega__panel-inner { flex-direction: column; gap: 1rem; padding: .9rem 15px 1.2rem; } .gjc-mega__links--2, .gjc-mega__links--3, .gjc-mega__links--4 { columns: 2; column-width: auto; } .gjc-mega__col--feature { display: none; } } @media (max-width: 480px) { .gjc-mega__links--2, .gjc-mega__links--3, .gjc-mega__links--4 { columns: 1; } } @media print { .gjc-mega { display: none !important; } } /* ========================================================================= Single-post header — redesign ========================================================================= The theme's `entry-tpl-background-boxed-v2` header is built for a full-bleed featured image with the title floated over it: .pp-row-1 breadcrumb, in flow .pp-row-2 position:absolute; bottom:0; padding-top:120px ← the title That is a good design *when there is an image*. On this site 39 of the last 40 posts have none, so what actually renders is 120px of empty colour, a title block anchored to the bottom of a 46px row and therefore growing upward across the breadcrumb, and an empty quarter-width column holding the right-hand side open. `gjc-has-hero` / `gjc-no-hero` on says which case a page is, so the overlay layout is kept where it earns its keep and replaced with a normal flow header everywhere else. ====================================================================== */ /* --- No featured image: put the header back in flow --------------------- */ .gjc-no-hero .entry-media-row .pp-row-2 { /* `relative`, not `static`: the row still has to be the containing block for its own .pp-row-background. */ position: relative; top: auto; right: auto; bottom: auto; left: auto; padding-top: 0; padding-bottom: 0; } /* The min-height guard exists only to stop an absolute overlay overflowing its box. In flow there is nothing to guard against. */ .gjc-no-hero .entry-media-row, .gjc-no-hero .entry-media-row > .pp-row-inner, .gjc-no-hero .entry-media-row > .pp-row-inner > .pp-column { min-height: 0; } /* The template reserves a quarter of the header for a sidebar slot this layout never fills, so the title wraps early against dead space. `:empty` alone does not match it — the markup leaves a whitespace text node inside — so test for the absence of element children instead. */ .gjc-no-hero .entry-media-row .pp-row-2 .pp-column-1of4:empty, .gjc-no-hero .entry-media-row .pp-row-2 .pp-column-1of4:not(:has(*)) { display: none; } .gjc-no-hero .entry-media-row .pp-row-2 .pp-row-inner > .pp-column:first-child { width: 100%; max-width: 100%; flex: 1 1 100%; } /* --- Shared header styling (both cases) --------------------------------- */ .gjc .entry-media-row .entry-header { padding-top: 1.75rem; padding-bottom: 1.75rem; } .gjc .entry-media-row .entry-title { /* Fluid down to phones instead of a fixed "giga" size that eats four lines of a 375px screen. */ font-size: clamp(27px, 1.35rem + 2.1vw, 44px); line-height: 1.16; letter-spacing: -.015em; margin: .5rem 0 0; padding: 0; text-wrap: balance; } .gjc .entry-media-row .entry-subtitle { font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); font-weight: 500; line-height: 1.4; margin: .6rem 0 0; opacity: .82; } .gjc .entry-media-row .entry-before-title { margin: 0; } /* "in" reads as a sentence fragment in front of a row of chips. */ .gjc .entry-media-row .entry-categories-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .gjc .entry-media-row .entry-categories-inner { display: flex; flex-wrap: wrap; gap: .4rem; /* The template separates the links with bare commas in the markup. */ font-size: 0; } .gjc .entry-media-row .entry-category { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; line-height: 1.4; transition: background-color .15s ease, border-color .15s ease; } .gjc .entry-media-row .entry-category:hover, .gjc .entry-media-row .entry-category:focus-visible { background: rgba(255, 255, 255, .3); border-color: rgba(255, 255, 255, .55); text-decoration: none; } /* --- Breadcrumb --------------------------------------------------------- */ .gjc .entry-media-row .pp-breadcrumbs { position: relative; z-index: 4; padding-top: .35rem; padding-bottom: .35rem; } .gjc .entry-media-row .pp-breadcrumbs-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .gjc .entry-media-row .pp-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .15rem; margin: 0; padding: 0; } @media (max-width: 640px) { .gjc .entry-media-row .entry-header { padding-top: 1.1rem; padding-bottom: 1.25rem; } .gjc .entry-media-row .entry-category { font-size: .64rem; padding: .25rem .55rem; letter-spacing: .05em; } } /* ========================================================================= State archives ====================================================================== */ .gjc-state, .gjc-state-faq { box-sizing: border-box; /* * These hook onto `pixelpress_archive_before/after_main_collection`, which * fire outside the theme's `.pp-row-inner` container — so without this the * cards run edge to edge while everything around them is boxed. 1152px is * the theme's content width (1182px container less its 15px gutters). */ max-width: min(1152px, 100% - 30px); margin: 0 auto 1.75rem; padding: 1.5rem; background: var(--gjc-surface-2); border: 1px solid var(--gjc-border); border-radius: var(--gjc-radius); } .gjc-state-faq { margin-top: 2rem; margin-bottom: 1.5rem; } .gjc-state *, .gjc-state-faq * { box-sizing: border-box; } .gjc-state__title, .gjc-state-faq__title { margin: 0 0 .5rem; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--gjc-ink); } .gjc-state__lede { margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.6; color: var(--gjc-ink-soft); max-width: 62ch; } /* --- The numbers -------------------------------------------------------- */ .gjc-state__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 0 0 1.5rem; } .gjc-state__stat { padding: .8rem .9rem; background: var(--gjc-surface); border: 1px solid var(--gjc-border); border-radius: 10px; /* A hairline in the brand colour reads as a data card rather than a box. */ border-left: 3px solid var(--gjc-accent); } .gjc-state__stat dt { margin: 0 0 .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gjc-ink-soft); } .gjc-state__stat dd { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.15; color: var(--gjc-ink); font-variant-numeric: tabular-nums; } .gjc-state__stat dd time { font-size: 1rem; font-weight: 700; } /* --- Chip groups -------------------------------------------------------- */ .gjc-state__group { margin: 0 0 1.25rem; } .gjc-state__group h3 { margin: 0 0 .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gjc-ink-soft); } .gjc-state__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; } .gjc-state__chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .75rem; background: var(--gjc-surface); border: 1px solid var(--gjc-border); border-radius: 999px; color: var(--gjc-ink); font-size: .85rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .gjc-state__chips a:hover, .gjc-state__chips a:focus-visible { border-color: var(--gjc-accent); color: var(--gjc-accent); text-decoration: none; } .gjc-state__chips span { font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gjc-ink-soft); } /* --- FAQ ---------------------------------------------------------------- */ .gjc-state-faq__list { display: grid; gap: .5rem; margin: 1.1rem 0 0; } .gjc-state-faq__item { background: var(--gjc-surface); border: 1px solid var(--gjc-border); border-radius: 10px; overflow: hidden; } .gjc-state-faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; font-size: .95rem; font-weight: 700; line-height: 1.45; color: var(--gjc-ink); cursor: pointer; /* Replaced by the chevron below. */ list-style: none; } .gjc-state-faq__item summary::-webkit-details-marker { display: none; } .gjc-state-faq__item summary::after { content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; margin-top: .35rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .5; transition: transform .18s ease; } .gjc-state-faq__item[open] summary::after { transform: rotate(-135deg); } .gjc-state-faq__item summary:hover, .gjc-state-faq__item summary:focus-visible { color: var(--gjc-accent); } .gjc-state-faq__answer { padding: 0 1rem 1rem; border-top: 1px solid var(--gjc-border); padding-top: .85rem; } .gjc-state-faq__answer p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--gjc-ink-soft); max-width: 68ch; } /* --- Cross-links -------------------------------------------------------- */ .gjc-state-faq__nearby { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gjc-border); } .gjc-state-faq__nearby h3 { margin: 0 0 .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gjc-ink-soft); } .gjc-state-faq__nearby ul { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; } .gjc-state-faq__nearby a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid var(--gjc-border); border-radius: 999px; font-size: .82rem; color: var(--gjc-ink); text-decoration: none; } .gjc-state-faq__nearby a:hover, .gjc-state-faq__nearby a:focus-visible { border-color: var(--gjc-accent); color: var(--gjc-accent); } .gjc-state-faq__nearby span { font-size: .7rem; color: var(--gjc-ink-soft); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .gjc-state, .gjc-state-faq { padding: 1.1rem; } .gjc-state__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gjc-state__stat dd { font-size: 1.2rem; } } /* ========================================================================= Typography — mobile readability ========================================================================= The Customizer's generated stylesheet steps the root font size down by viewport: >= 1025px 15px 768-1023px 13px <= 767px 12px Everything inherits from that, so on a phone the body copy, the archive summaries and the notification text all render at 12px — well under the ~16px that mobile reading guidance (and Google's own mobile usability report) calls for, and the size at which most of this site's traffic reads it. Levelling the root at the desktop value keeps one type scale across all breakpoints instead of three, and because it is the *same* scale the desktop layout already uses, nothing needs re-testing beyond overflow. ====================================================================== */ @media only screen and (max-width: 1024px) { /* * `html:root` / `.gjc` rather than the bare element selectors the theme * uses. Matching its specificity exactly would leave this decided by * stylesheet order, and any concatenation or minification plugin on * production is free to change that — silently reverting mobile body copy * to 12px. One extra class-level token makes it deterministic. */ html:root, body.gjc, .gjc input, .gjc select, .gjc textarea { font-size: 15px; } } /* * Justified text needs hyphenation to work, and no browser hyphenates Hindi * or Indian English by default. On a 345px column it opens rivers of white * space between words — visible on every state archive. */ /* Prefixed for the same reason as the root size above: the theme's `text-align: justify` rule has identical specificity. */ .gjc .entry-content, .gjc .entry-summary, .gjc .archive-subtitle, .gjc .page-subtitle { text-align: start; } /* Body copy wants room to breathe more than the theme's 1.4 gives it. */ .gjc .entry-content, .gjc .entry-summary { line-height: 1.7; } .gjc .archive-subtitle, .gjc .page-subtitle { line-height: 1.6; } /* A term description that opens with a full-width map should not shove the first six words into a 40px gutter. */ .gjc .archive-subtitle img, .gjc .page-subtitle img { max-width: 100%; height: auto; } @media (max-width: 640px) { .gjc .archive-subtitle img, .gjc .page-subtitle img { display: block; float: none; margin: 0 auto 1rem; } /* Chips are the primary way into a category on a phone, so they get a real tap target rather than a 31px sliver. */ .gjc-state__chips a, .gjc-state-faq__nearby a { min-height: 40px; padding-top: .5rem; padding-bottom: .5rem; } } /* Post titles in a listing wrap to two or three lines on a phone; 1.1 packs the descenders of one line into the ascenders of the next. */ .gjc .pp-collection .entry-title, .gjc .pp-collection .entry-title a { line-height: 1.35; } .gjc-state__lede { font-size: max(.95rem, 15px); } /* ========================================================================= Type scale — small screens ========================================================================= The Customizer's generated scale inverts below 768px: body h1 h2 h3 desktop 17 21 20 18 (a scale) mobile 12 15 14 16 (h3 larger than h1 and h2) So on a phone — where most of this traffic is — an article's body copy is 12px and its section headings are *smaller* than its subsection headings. That is not a stylistic preference to respect; it is a bug in the generated stylesheet, and it affects every notification on the site. Restated below as a real scale. Prefixed with `.gjc` (added to ) so these win on specificity rather than on load order, which an optimisation plugin is free to change. ====================================================================== */ @media only screen and (max-width: 767px) { .gjc .pp-typography-xl, .gjc .pp-typography-xl p, .gjc .entry-content, .gjc .entry-content p { font-size: 16px; line-height: 1.7; } .gjc .pp-alpha, .gjc .entry-content h1, .gjc h1 { font-size: 26px; line-height: 1.22; } .gjc .pp-beta, .gjc .entry-content h2, .gjc h2 { font-size: 21px; line-height: 1.28; } .gjc .pp-gamma, .gjc .entry-content h3, .gjc h3 { font-size: 18px; line-height: 1.35; } .gjc .pp-delta, .gjc .entry-content h4, .gjc h4 { font-size: 16px; line-height: 1.4; } /* The single-post H1 has its own fluid rule and must keep it. */ .gjc .entry-media-row .entry-title { font-size: clamp(27px, 1.35rem + 2.1vw, 44px); line-height: 1.16; } /* Headings inside an article need space above them, not just below. */ .gjc .entry-content h2, .gjc .entry-content h3 { margin-top: 1.6em; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .gjc .pp-typography-xl, .gjc .pp-typography-xl p, .gjc .entry-content, .gjc .entry-content p { font-size: 16px; line-height: 1.7; } .gjc .pp-alpha, .gjc .entry-content h1, .gjc h1 { font-size: 28px; line-height: 1.2; } .gjc .pp-beta, .gjc .entry-content h2, .gjc h2 { font-size: 22px; line-height: 1.28; } .gjc .pp-gamma, .gjc .entry-content h3, .gjc h3 { font-size: 19px; line-height: 1.35; } } /* ========================================================================= Mobile header — reclaim the skin-switcher row ========================================================================= The header builder gives the phone three stacked rows: logo (77px), search (48px) and a third row (50px) whose only occupant is the 42px dark-mode toggle. That is 50px of above-the-fold space on every page, on the device most of this traffic uses, for one icon — and the row's own background fades against the one above it, so it reads as a rendering fault rather than a control. The toggle is lifted onto the search row instead. The row stays in the DOM (the header builder owns that markup) but no longer takes vertical space, and pointer events are handed back only to the toggle itself so the search field underneath keeps working. ====================================================================== */ @media only screen and (max-width: 767px) { .gjc .pp-hb-row-mobile.pp-hb-row-c { margin-top: -50px; height: 48px; pointer-events: none; /* The search row sits inside a sticky wrapper at z-index 60, so the toggle has to clear that or the row paints over it and eats the tap. */ position: relative; z-index: 61; } .gjc .pp-hb-row-mobile.pp-hb-row-c .pp-row-background { display: none; } .gjc .pp-hb-row-mobile.pp-hb-row-c .pp-bin-3 { height: 48px; pointer-events: auto; } .gjc .pp-hb-row-mobile.pp-hb-row-c .pp-drop-the-skin { /* 32px was under the 44px minimum tap target. */ height: 48px; min-width: 44px; } /* Keep the search field clear of the toggle now sitting over its row. */ .gjc .pp-hb-row-mobile.pp-hb-row-b .pp-bin-2 { padding-right: 46px; } } /* ========================================================================= Install prompt ========================================================================= The banner is built in JavaScript when the browser fires `beforeinstallprompt`, so it has to bring its own styling — nothing in the theme knows these class names. Without the rules below it renders as a bare div appended to : an icon, a line of overflowing text and two unstyled buttons sitting in the document flow. It is a bottom sheet rather than a top bar deliberately. A top bar pushes the page down after load, which is both a layout shift and an ambush; a sheet anchored to the bottom sits over the page, is out of the way of the header, and lands near the thumb on the phones that can actually install. ====================================================================== */ .gjc-install { position: fixed; z-index: 9999; /* * Viewport units, not percentages. The page overflows horizontally on * narrow phones (parent-theme and ad-plugin elements, not this module), and * that widens the containing block a fixed element resolves against — a * `50%`/`100%` banner then sizes to the overflow instead of the screen. * `vw` always tracks the real viewport. */ left: 50vw; bottom: 0; box-sizing: border-box; width: min(30rem, calc(100vw - 1.5rem)); /* Clear of the home indicator on notched phones. */ margin-bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon text" "actions actions"; gap: .2rem .85rem; align-items: start; padding: 1rem 1.1rem; background: var(--gjc-surface-2, #fff); color: var(--gjc-ink, #1a1f2b); border: 1px solid var(--gjc-border, #e2e6ee); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .22); opacity: 0; transform: translate(-50%, 130%); transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .28s ease; } .gjc-install * { box-sizing: border-box; } .gjc-install.is-in { opacity: 1; transform: translate(-50%, 0); } .gjc-install__icon { grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--gjc-accent, #008000); color: #fff; } .gjc-install__icon svg { width: 20px; height: 20px; display: block; } .gjc-install__text { grid-area: text; margin: 0; padding-top: .15rem; font-size: .92rem; font-weight: 500; line-height: 1.45; /* The string names the site, so it must wrap rather than clip. */ overflow-wrap: anywhere; } .gjc-install__actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .7rem; } .gjc-install__dismiss, .gjc-install__go { appearance: none; min-height: 44px; padding: .6rem 1.1rem; border-radius: 9px; font-size: .88rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; font-family: inherit; line-height: 1.2; transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; } .gjc-install__dismiss { border: 1px solid var(--gjc-border, #e2e6ee); background: transparent; color: var(--gjc-ink-soft, #5a6272); } .gjc-install__dismiss:hover, .gjc-install__dismiss:focus-visible { background: var(--gjc-surface, #f6f8fb); color: var(--gjc-ink, #1a1f2b); } .gjc-install__go { border: 1px solid var(--gjc-accent, #008000); background: var(--gjc-accent, #008000); color: #fff; } .gjc-install__go:hover, .gjc-install__go:focus-visible { opacity: .9; } .gjc-install__dismiss:focus-visible, .gjc-install__go:focus-visible { outline: 2px solid var(--gjc-accent, #008000); outline-offset: 2px; } /* The iOS variant has no action button — only the Share-sheet instruction — so the dismiss control should not sit alone against the right edge. */ .gjc-install__actions:has(> :only-child) { justify-content: flex-start; } @media (min-width: 480px) { .gjc-install { left: auto; right: 1rem; transform: translate(0, 130%); } .gjc-install.is-in { transform: translate(0, 0); } } /* Already installed: never advertise the thing the reader is looking at. */ @media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) { .gjc-install { display: none; } } @media (prefers-reduced-motion: reduce) { .gjc-install { transition: opacity .2s ease; transform: translate(-50%, 0); } @media (min-width: 480px) { .gjc-install { transform: none; } } } @media print { .gjc-install { display: none; } } /* Per-term badge in a links column — the state's own map, where it has one. Sized down hard and given a neutral plate so maps of wildly different aspect ratios and backgrounds still line up as a column of icons. */ /* Holds the slot open for states whose category has no map image. */ .gjc-mega__badge--blank { background: none; border-radius: 0; } .gjc-mega__badge { flex: 0 0 auto; width: 22px; height: 22px; max-width: 22px; max-height: 22px; object-fit: contain; border-radius: 4px; background: rgba(255, 255, 255, .06); box-sizing: border-box; } .gjc-mega__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------------------------- * State map icons in nav menus (the four prefooter columns). * * The images are term-description maps of wildly different aspect ratios, so * they are boxed into a fixed square and contained rather than cropped. * ------------------------------------------------------------------------ */ .gjc-state-ico { width: 20px; height: 20px; object-fit: contain; object-position: center; flex: 0 0 20px; margin-right: .5rem; vertical-align: middle; opacity: .75; transition: opacity .15s ease, transform .15s ease; } .gjc-state-ico__label { min-width: 0; } /* * Only links that actually received a map become flex lines, so no other menu * in the theme changes layout. Browsers without `:has()` keep the inline * layout, where `vertical-align: middle` on the image already reads correctly * — the flex version simply aligns multi-line labels better. */ a:has(> .gjc-state-ico) { display: flex; align-items: center; } a:hover > .gjc-state-ico, a:focus-visible > .gjc-state-ico { opacity: 1; transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .gjc-state-ico { transition: none; } a:hover > .gjc-state-ico { transform: none; } }