Exploration, recipe R2

Award hero with deadline: more options

Decided: C — built as .hs-award-hero, see components

How does an award page open, so a visitor sees what the award is, how much, who can apply, the next deadline, and one way to apply?

Content is real. Copy comes from the live pages on 2026-10-14 (hs_mcp). The deadline is computed in your browser with the same rule as the live php_code: this month’s deadline day, or next month’s after it passes. The deadline day is not always the 28th: the 17 php_code award pages use the 8th (1), 14th (4), 21st (6) and 28th (6). Amounts are $1,000, $2,000 or $5,000. Application URLs other than Study Abroad are placeholders (#apply-url).

How to read a frame. Desktop is a 1240×760 viewport, scaled to fit. Mobile is a 375×700 viewport with a 64px mock header. Both frames scroll. The line under each phone is a live check: does the deadline and the Apply button end above the 700px fold?

Option	Idea	House style
A. Today	Navy panel with the amount as the heading, cream deadline card	Breaks several rules (reference only)
B. Head + facts panel	Shared page head, facts panel in the next band	Fits (previous recommendation)
C. Overlap	Navy hero; a white deadline card hangs into the next band	Bends: hero on a conversion page, shadow on a panel
D. Ticket	Facts as a ticket body; the stub holds the deadline and Apply	Bends: a component inside the page head
E. Honor plate	Cream plate band drawn as a certificate, centred	Bends: plate outside recognition, centred head
F. Facts strip	The shared page head with one hairline strip of facts under the H1	Bends lightly: one strip added to the page head
G. Calendar leaf + apply bar	A month-page date leads; a sticky bar keeps deadline and Apply on screen	Bends: second Apply button (never visible at once)

A. Award page today

Reference

A navy panel leads with the amount as its heading; a cream card on the right holds the next deadline and a navy Apply button.

Desktop

Mobile 375 × 700

Spec

Panel: #162351 flat, radius 12px, padding clamp(20px, 3.2vw, 36px); amount Arial 700 clamp(44px, 5vw, 60px) white, as an h2
Card: #FFFDF5, 5px #FAF053 top border, radius 9px; date Arial 700 clamp(26px, 2.8vw, 34px); navy button, radius 6px
Contrast: Lead #F0F3FC on #162351 13.6:1; date on cream 14.8:1
Pros: Amount and deadline are both big and above the fold. Visitors know it today.
Cons: The amount is the heading and the award name is in a sentence. Arial, not the brand fonts. #162351 is not a brand colour. The Apply button is navy, so the page has no gold action. A back link sits above the hero.
Rules: Breaks: not the page head; amount as heading; #162351; cream card; gold bar as decoration; navy primary

B. Page head + facts panel

Previous recommendation

The shared page head stays as it is; a white facts panel opens the next band.

Desktop

Mobile 375 × 700

Spec

Head: .hs-page-head on soft: eyebrow, H1 with the gold rule, lead, Apply + text link
Facts: .hs-award-facts: white, 1px --hs-line, radius 8px; label 13px slate; value Mukta 600 22px ink; one column, then one row from 48rem
Contrast: Lead slate on soft 5.9:1; values ink on white 13.0:1; labels slate on white 6.2:1
Pros: No new rules. Every award page is a sibling of every other page.
Cons: The facts sit apart from the title, in a band of their own, so the hero itself says nothing about money or dates. On a phone the deadline falls near or under the fold. The panel reads as a data table, not as an award.
Rules: Fits house style

C. Overlap: navy hero, deadline card

Decided: C

A navy hero names the award and its facts; a white deadline card with the one gold button hangs half into the next band.

Desktop

Mobile 375 × 700

Spec

Hero: .hs-band--navy (--hs-ground-navy over flat navy); H1 white, max-inline-size: 22ch, no rule; facts as <dl>: label 13px/600/0.12em white 86%, value Mukta 600 16px white; amount Didot 700 32px white
Card: white, radius 8px, box-shadow: var(--hs-shadow-dialog); date Mukta 600 28px navy; margin-block-end: -48px from 62rem (-32px on a phone); column 22rem
Next band: pads back the overlap; from 62rem its text stops 22rem + 48px short of the right edge
Contrast: Lead and labels white 86% on navy 6.4:1 at the lightest corner, 11.2:1 at the darkest; date navy on white 12.4:1
Pros: The strongest “this is an award” moment. The deadline and Apply are one object. The overlap ties the hero to the content below.
Cons: A second hero style for one page family. Navy heroes are for acquisition pages. The card needs a shadow to float. The overlap needs care in the next band for 20 pages.
Rules: Bends: hero instead of the page head on a conversion page; shadow on a panel (dialog shadow)

D. Ticket

The facts are printed as one ticket under the H1: the body says what you get and who can apply, the stub says when and holds Apply.

Desktop

Mobile 375 × 700

Spec

Ticket: white, 1px --hs-line, radius 8px, overflow: clip; body facts in a row (max 14rem each), amount Didot 700 36px navy; stub 18rem
Perforation: 2px dashed --hs-line-strong; two 22px soft circles with a 1px line border cut the edge at both ends
Phone: stub first (order: -1), perforation under it; body facts in two columns
Contrast: Labels slate on white 6.2:1; values ink 13.0:1; date navy 12.4:1; lead slate on soft 5.9:1
Pros: One object holds every fact. The stub is the action part, so the deadline and Apply are always together. Takes 2 to 5 facts in one row.
Cons: “Ticket” can read as an event or a raffle, which is the wrong register for an honor. Notches are decoration. The lead moves under the ticket.
Rules: Bends: a component inside the page head; lead after the facts

E. Honor plate

The award opens on the cream plate inside a double-rule certificate frame, centred, so the page reads as an honor before it reads as a form.

Desktop

Mobile 375 × 700

Spec

Band: .hs-band--plate (#FAF3E9); eyebrow gold ink; H1 centred with the honor-gold rule
Frame: box-shadow: inset 0 0 0 1px plate-line, inset 0 0 0 6px plate, inset 0 0 0 7px plate-line, radius 8px; padding 48px 32px (24px 16px on a phone)
Facts: only amount and date sit on the certificate: Didot 700 36px navy (26px on a phone), label under the value, 13px gold ink, a plate-line hairline between; the other facts go in one 14px line under the button (label ink 600, value plate-muted)
Contrast: Lead ink on plate 11.8:1; labels gold ink on plate 5.4:1; figures navy on plate 11.3:1; terms plate-muted on plate 5.4:1
Pros: Lands “I earned this” and “this organization matters”. Distinct from every utility page. The figures are big without being gold.
Cons: Tall on a phone: the button sits close to the fold. Eligibility drops to small print under the button. Centred text is harder to scan. The action-gold button and the honor-gold rule sit in one view.
Rules: Bends: plate is for recognition only; page head is left-aligned and soft

F. Facts strip in the page head

Recommended

The shared page head, with one hairline strip of facts directly under the H1: amount, next deadline, who can apply, membership.

Desktop

Mobile 375 × 700

Spec

Head: .hs-page-head unchanged: eyebrow, H1 with the gold rule, lead, Apply + text link
Strip: <dl>, margin-block-start: 16px; 1px --hs-line-strong rule above and below (inset shadows); items split by 1px hairlines, padding 12px 32px, max 16rem each
Values: amount and date Mukta 600 22px navy; other values Mukta 600 16px ink; note 14px slate; label 13px/600/0.12em slate
Phone: 2-column grid with hairlines; an odd last item spans both columns
Contrast: Labels slate on soft 5.9:1; values ink on soft 12.2:1; figures navy on soft 11.7:1
Pros: Smallest change to the shared head, so every award page stays a sibling. Facts sit next to the title they describe. Takes 2 to 5 facts and long titles without a layout change. No new surface, no shadow.
Cons: Quieter than A or C: the amount is not a big number. With 5 facts the strip is 3 rows on a phone.
Rules: Bends lightly: “nothing else in the page head”; proposes an award-page exception

G. Calendar leaf + sticky apply bar

The deadline leads as a month-page leaf with a day count; when the head’s Apply button scrolls away, a bar with the leaf and Apply stays on screen.

Desktop (scroll the frame to see the bar)

Mobile 375 × 700 (scroll)

Spec

Leaf: 56px wide, white, 1px --hs-line-strong, radius 8px; month strip navy, 12px/600/0.12em white; day Didot 700 28px navy; aria-hidden (the <time> beside it carries the date)
Countdown: “14 days left” 14px slate; at 3 days or less a warning pill (#8A6D1A on #FDF7D6, 4.5:1); on the day: “Closes today”
Bar: white, 0 -1px 0 line + dialog shadow; phone: fixed bottom; from 62rem: fixed under the 72px header with the award name; small button 40px; shown only when the head’s Apply button has scrolled out of view (an IntersectionObserver in production)
Contrast: Date navy on soft 11.7:1; countdown slate on soft 5.9:1; bar text ink on white 13.0:1
Pros: The deadline is never more than a glance away on a long page (live pages run 10+ bands). The leaf says “monthly” without words.
Cons: A day count goes stale in the page cache and adds urgency, which is close to sales register. The bar competes with the yellow membership banner and the accessibility button. Amount and eligibility drop to the lead and the next band.
Rules: Bends: a second Apply button (never visible with the first); sticky UI

Recommendation

Recommendation: F, with G’s calendar leaf as an optional deadline cell later

F keeps the shared page head and puts the facts directly under the H1, inside the hero. That fixes the two problems with B: the facts no longer sit in a separate band, and on a phone the deadline is in the first screen with every content set. It is the smallest visual change from the head that every other page uses, it needs no shadow, no new ground and no second button, and the same strip takes 2 to 5 facts and the longest title (John Young) without a layout change.

C is the strongest single moment and the best choice if award pages should feel like campaign pages. It costs a second hero style and a shadowed panel. E is the most on-message (“I earned this”) but tall on a phone and bends the plate rule. D and G are useful parts more than heroes: the leaf (G) could replace the deadline value in F’s strip; the sticky bar is worth a test only after the hero ships.

To adopt F, add one line to VISUAL.md “Page head”: an award page may carry one facts strip between the H1 and the lead. Then move the strip to components/award-facts.css as a modifier (.hs-award-facts--strip), so B’s panel and F’s strip share one block.

How to produce the deadline without php_code

The rule is one number per award: the deadline day (8, 14, 21 or 28). Every option above needs the same two strings: a <time datetime> with the next date, and the rule (“the 28th of every month”). Options, simplest first:

Copy only. Print the rule (“Rolling: the 28th of every month”) and no date. Fully static, works in hs_html_page today. Cost: the visitor does the date maths; the hero loses the concrete date.
Small input filter in hs_core. The editor writes <time data-hs-deadline-day="28">the 28th of every month</time>. A filter (hook_filter_info) finds the attribute and writes the next date and datetime. The fallback text inside the element still reads correctly if the filter is off, and the validator sees plain HTML. Trap: D7 caches filtered text in cache_filter, so the filter must declare 'cache' => FALSE, which turns off caching for the whole text format. Use a dedicated format, or option 4.
Token. A custom token, for example [hs-award:next-deadline:28], via hook_token_info() / hook_tokens(), rendered by a token filter on the hs_html_page format. Same cache trap as option 2, and tokens in body text are less obvious to editors than an element with fallback text.
Field + theme hook. Add fields for deadline day, amount and application URL (on hs_html_page, or a small scholarship type), and render the hero from a theme hook in preprocess, not from the body. Computed at render time, outside cache_filter; the body keeps no logic. Best fit for 17 to 20 pages that share one hero: the facts strip is generated, so every award page stays consistent.
Client-side enhancement. Ship option 1 or 2 markup and let 10 lines of JavaScript compute the date and the day count from data-hs-deadline-day. Immune to every cache, including the anonymous page cache. Crawlers and no-JS visitors see the rule, which is still a correct answer. This is the only safe way to show a day count (option G).

All server options share one cache issue: the anonymous page cache can serve last month’s date after the deadline passes, as the live php_code page can today. Set the page cache lifetime under one day on these pages, or pair the server date with option 5. Use the site timezone, as the live code does, and show the date for the whole deadline day.