/* GGF site stylesheet. Extracted verbatim from the approved v7 homepage on 10 August 2026 so
every page carries the identical Plan International header, giving widget and footer.
v7 remains the reference for this file: change it here, not in a page. */
/* THE GIVING SECTION. Reuses .themes, .sec-eyebrow, h2, .sec-intro, .btn-yellow, .figtag and
.note from brand.css. Colour logic follows the strongest Plan offices: selection is Plan
Blue, yellow belongs to the one CTA. Each new rule is annotated with its reason. */
/* Designations: the .themes strip IS the radio group. The blue fill follows the choice, so on
load it reads exactly like the mission strip with Annual giving (the default) filled. */
/* Above 860px the two money questions sit side by side across the full measure, so both are
answered at a glance (Plan Germany's layout) and the band keeps v1's deceleration. */
/* Money options: square blocks, grey keyline at rest (the hairline measured 1.1:1 on the tint
band, under the 3:1 non-text guideline, so it did not read as a control), Plan Blue when
chosen. Focus ring: yellow, not the "blue focus ring" this comment originally said (Matthew,
6 September 2026: "one can't be blue and one can't be yellow... use all yellow" — every other
control in the panel, .gp-opt/.gp-select/.tlink, already was; this was the one leftover). */
/* The custom amount, revealed when Other is chosen. 16px input so phones never zoom. */
#gv-go:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
/* One sentence of impact tied to the live selection, on the page's existing 3px yellow
"a claim you can check" device. */
.gv-note{font-size:13px;max-width:30em;margin-top:12px}
/* The dark closer: measure cap, and a quiet text link instead of a fourth donate button. */
#close p{max-width:34em;font-size:18px}
.tlink{color:#fff;font-weight:bold;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
.tlink:hover{text-decoration-thickness:3px}
.tlink:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.close-links{margin-top:28px}
/* Phones: the amount blocks form a tidy two-by-two, never a ragged wrap, and every button is
full-width (the standing rule: buttons the same size on every screen; scratch-v1-language
§6.12 ordered this for the system, so it belongs in brand.css once the module moves there). */
/* Matthew, 3 Aug: rounded edges across the page, stop the sharp corners. Plan's own strongest
fundraising sites already do this (Plan Canada: 28px pill buttons and rounded cards; Sweden's
header giving widget is a rounded pill), so it follows their live practice rather than the
manual's letter. Scoped here: brand.css is shared with v1, which stays as Maureen saw it. */
.btn,.gv-cta{border-radius:999px}
.themes .cell{border-radius:var(--r)}
img.bg{border-radius:0}
/* The Other row: full row, label above, input sized to the tier blocks, currency tag attached. */
/* ============================================================================
Matthew, 3 Aug: header, hero and footer rebuilt on the Sweden reference
(plansverige.org, studied live in Chrome; see scratch-sweden-reference.md).
Header and footer now bookend the page in the SAME Plan Blue object language,
the hero goes full-bleed with the words at the bottom, and the footer becomes
a real foundation footer: nav restate, contact, newsletter, giving rails.
============================================================================ */
/* The header is now fixed (it floats over the hero), so in-page anchors need an offset. */
html{scrollbar-gutter:stable} /* scroll-padding-top is set once, in the craft pass */
/* THE HEADER: Sweden's considered object. A floating rounded Plan Blue bar, always on,
no box-shadow (colour does the work against the page), carrying the official lockup,
the nav, and ONE ghost donate pill (2px white keyline, transparent fill). */
header.plan{position:fixed;top:12px;left:0;right:0;background:transparent;box-shadow:none;padding:0 12px}
header.plan .wrap{background:var(--plan-blue);border-radius:999px;height:68px;padding:0 16px 0 28px}
header.plan .plan-logo{height:46px}
nav.main a{font-size:15px}
.donate-pill{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:14.5px;color:#fff;text-decoration:none;
border:2px solid #fff;border-radius:999px;padding:10px 22px;white-space:nowrap;transition:background .18s,transform .16s var(--ease)}
.donate-pill:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.donate-pill:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:860px){
header.plan .wrap{height:58px;padding:0 8px 0 16px;gap:10px}
/* the lockup compresses but the Foundation's name STAYS legible: smaller official
logo, and the name wraps to two 13px lines instead of shrinking to nothing */
header.plan .plan-logo{height:30px}
.brandlock{gap:9px}
.brandlock .klh{height:26px}
.brandlock .ggf-name{font-size:13px;line-height:1.12;white-space:normal;max-width:6.6em}
.donate-pill{margin-left:auto;font-size:13.5px;padding:8px 14px}
.nav-toggle{margin-left:0}
/* the dropdown hangs from the floating pill: same blue, rounded to the page's card radius */
nav.main{left:12px;right:12px;top:calc(100% + 8px);border-radius:var(--r);overflow:hidden}
}
/* THE HERO: Sweden's geometry. The photograph fills the viewport edge to edge, the words
sit at the BOTTOM LEFT, two pill buttons under the lead. Face safety is COMPOSITION,
not luck, and each width band gets the bake whose geometry can prove it.
Above 860px: v7/img/hero-wide.jpg (the vetted girls-blue photograph refetched at its
5184px original size, Pexels id 19986547, then cropped) places the girl RIGHT of
centre, and every text measure below stops LEFT of her face (her head spans 43
percent of that frame, which is why phones cannot use it).
Portrait tablets, 561 to 860px: v7/img/hero-tablet.jpg, a 3:4 crop of the whole
vetted girls-two scene. BOTH girls are deliberately in frame (girls only, neither
sliced), and because the bake's aspect ratio is at least every portrait viewport's,
the full image height always shows, which PINS both faces between 12 and 35 percent
of the viewport, far above the words at ~65 percent.
Phones, up to 560px portrait: v7/img/hero-tall.jpg, the vetted girls-two frame from
x620 rightward. The second girl is out of frame except a fingernail-width sliver of
her dress at the far bottom-left (source x620-650, y1200-1410), which sits under the
.8+ scrim and the words block at every phone width; cropping past her dress (x660)
would put the seated girl's own head at the frame edge, the worse trade. */
.hero-editorial{min-height:100vh;min-height:100svh;padding:0} /* the generic section padding must not inflate the full-bleed hero */
.hero-editorial .bg{object-position:100% 30%}
/* Sweden's own inset: the hero words leave the 1180 grid and sit near the left edge
(plansverige.org insets them 13 to 100px). That buys the face-clearance margin AND the
words-at-the-bottom presence. Everything else on the page stays on the grid. */
.hero-editorial .wrap{max-width:none;padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px);padding-top:calc(var(--hdr) + 28px);padding-bottom:clamp(40px,6vh,72px);width:100%}
/* 4.5vw (not v1's 6.2vw): the longest line ("the smartest thing") then holds under half the
viewport, always clear of the girl's face at 56 percent of the frame. Still capped at the
full 78px display tier on wide screens. The lead is capped the same way: its em-measure
is fixed while the face position scales with the viewport, so 27em is the widest that
stays clear at 1280. The hero kicker moved into the impact stats band for the same
reason: it grew the hero past the viewport, which re-cropped the photograph and slid
the face left under the text at laptop heights (and it fell below the fold anyway). */
.hero h1{font-size:clamp(38px,4.5vw,78px);max-width:10.6em}
.hero .lead{max-width:27em}
@media(min-width:861px) and (max-width:1200px){ .hero .lead{max-width:24em} }
/* The scrim: v1's engineered horizontal gradient (alpha .78+ across the whole text column,
worst-case white behind still passes AA) plus Sweden's bottom lift under the buttons. */
.hero-editorial .scrim{background:
linear-gradient(0deg,rgba(6,26,42,.5) 0%,rgba(6,26,42,0) 42%),
linear-gradient(90deg,rgba(6,26,42,.92) 0%,rgba(6,26,42,.78) 45%,rgba(6,26,42,.5) 100%)}
/* Between 861 and 1200px a full-height hero would narrow the crop window and slide the
girl's face left into the text zone; capping the hero at the crop's own aspect keeps
the full width of the picture (and the face clear) at every window in the range. */
@media(min-width:861px) and (max-width:1200px){
.hero-editorial{min-height:calc(100vw/1.6)}
}
/* The kicker figure now lives in the stats band: four evidence figures, one pattern.
Wide screens only: an unscoped override here beats brand.css's OWN media queries (same
specificity, later sheet), which re-imposed four columns on phones and pushed the page
134px past a 390 viewport. Below 861px brand.css stacks the stats 2x2 then single file. */
@media(min-width:861px){ .stats{grid-template-columns:repeat(4,1fr)} }
/* Portrait tablet, 561 to 860px: the two-girl 3:4 bake. No vertical overflow at any
portrait aspect, so the faces cannot slide under the words: geometry first, then
verified by eye. object-position vertical is a no-op here on purpose. */
@media(max-width:860px) and (orientation:portrait){
.hero-editorial .bg{object-position:50% 50%}
/* the words start at 46 percent on the smallest portrait tablets (561x748, measured
live) and ~61 to 66 percent on iPads, so the ramp reaches .78 by 46 percent; both
faces bottom out at 34.7 percent, just above the ramp's start */
.hero-editorial .scrim{background:linear-gradient(180deg,rgba(6,26,42,.22) 0%,rgba(6,26,42,.3) 38%,rgba(6,26,42,.78) 46%,rgba(6,26,42,.94) 100%)}
.hero-editorial .wrap{padding-bottom:34px}
.hero .lead{margin:20px 0 26px}
}
/* Phone portrait, up to 560px: the tall crop, face top, words bottom. The girl's face
spans 21.4 to 37.6 percent of the tall bake's height; cover leaves vertical overflow,
and object-position 50% 60% lifts her face fully above the worst-case text start.
The type steps down here so the words block stays under ~470px tall: that is what
buys the face its clearance on 640px-tall Androids. Checked BY EYE at 360x640,
375x667, 390x844 and 430x932 (3 Aug). */
@media(max-width:560px) and (orientation:portrait){
.hero-editorial .bg{object-position:50% 60%}
/* The scrim is built from the BOTTOM in px because the words are bottom-anchored:
the measured worst-case first text line is 441px from the bottom (360 wide, with
the 374px tier below) and 436px at 375 to 430 wide, so alpha holds .8 through
444px, then falls fast so the ramp never climbs into her chin (the chin sits
473px from the bottom on a 360x640 viewport, the tightest case). */
.hero-editorial .scrim{background:linear-gradient(0deg,rgba(6,26,42,.94) 0,rgba(6,26,42,.86) 340px,rgba(6,26,42,.8) 444px,rgba(6,26,42,.3) 462px,rgba(6,26,42,.21) 100%)}
.hero-editorial .wrap{padding-bottom:26px}
.hero h1{font-size:33px;line-height:1.18}
.hero .lead{font-size:15.5px;margin:14px 0 20px}
/* the eyebrow holds ONE quiet line at 11px from 375px up (verified live) and wraps
to two lines on the 360-class tier below; the scrim and focal maths assume the
two-line worst case, so the code and the rendered truth match */
.hero .eyebrow{font-size:11px;letter-spacing:.09em;margin-bottom:14px}
.hero .eyebrow::before{display:none}
}
/* The 360-class tier. Measured live: at 360 wide the words block runs 493px tall and
the first line lands INSIDE the face band on a 640px viewport (the small-Android +
iPhone SE class the panel flagged). The compression is WIDTH-scoped because the
block's height is set by wrap count, not viewport height: a 360x700 screen needs it
as much as 360x640. Every .btn on the page compresses together, so buttons stay
identical to each other at any given width. Below ~340px the geometry cannot hold
(the face band alone is 24 percent of a 568px viewport); 320x568-class devices are
a documented limitation, not a silent one. */
@media(max-width:374px) and (orientation:portrait){
.hero h1{font-size:30px}
.hero .eyebrow{margin-bottom:10px}
.hero .lead{margin:10px 0 16px}
.hero-editorial .wrap{padding-bottom:20px}
.btn{padding:12px 22px;font-size:15.5px}
.cta-row{gap:10px}
}
/* THE FOOTER: the Sweden architecture in our tokens, six layers top to bottom: identity
row, hairline, nav restate (one BIG column + underlined columns), hairline, contact +
newsletter, then a full-width darker giving-rails strip. Same Plan Blue as the header:
the bookend. Every unknown value is a LABELLED placeholder in Georgia italic (the
page's caveat voice); never an invented number that could be mistaken for a real
bank detail, phone number or registration. */
footer.plan{padding:0;font-size:15px}
footer.plan .ft-main{padding:clamp(44px,6vw,72px) 0 clamp(32px,4vw,48px)}
footer.plan p{color:#fff} /* .9 white on Plan Blue measures 4.26:1, under AA; solid white passes */
/* flex-start, not space-between: on a wide screen space-between threw the strapline a thousand
pixels from the lockup, so the two halves of one identity read as unrelated. */
.ft-top{display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(28px,4vw,72px);flex-wrap:wrap;margin-bottom:38px}
.ft-lockup img{height:clamp(56px,6vw,76px);width:auto;display:block}
.ft-strap .strapline{margin-bottom:6px}
.ft-arm{font-size:14px}
.ft-rule{border:0;border-top:1px solid rgba(255,255,255,.3);margin:0}
/* FIVE PEER COLUMNS, one row. This was a two-column grid holding a three-column grid in one
cell and a two-column grid in the other, which squeezed the newsletter input to 107px so it
could not show its own placeholder, left 98px of empty blue under it, and gave five columns
of equal standing five different widths. The newsletter column keeps a wider minimum,
because it holds a form and the others hold lists. */
.ft-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr)) minmax(300px,1.5fr);
gap:clamp(22px,2.2vw,48px);padding:30px 0}
/* A column stuck at its content width pushed the document 44px sideways below about 366px,
which is an iPhone SE and any phone with Display Zoom on. */
.ft-col{min-width:0}
.ft-col h3{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:17px;color:#fff;margin:0 0 12px}
.ft-col a{display:block;color:#fff}
/* Emphasis, but not so much that a five-word label wraps inside its own column, and underlined:
the four largest items in the footer used to be the four that did not look clickable, while
every 15px item was underlined. That is the hierarchy upside down. */
.ft-col a.big{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:clamp(17px,1.15vw,20px);
line-height:1.35;padding:5px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.ft-col a.big:hover{text-decoration-thickness:2px}
.ft-col a.sm{font-size:15px;line-height:1.5;padding:5px 0;text-decoration:underline;text-underline-offset:3px}
.ft-col a.sm:hover{text-decoration-thickness:2px}
.ft-col a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.ft-col p{margin:0 0 8px;line-height:1.6;font-size:15px}
.ft-col p a{display:inline;text-decoration:underline;text-underline-offset:3px}
.ft-addr{font-size:14.5px}
.ft-contact p{margin:0 0 8px;line-height:1.6}
.tbc{font-family:Georgia,'Times New Roman',serif;font-style:italic}
.ft-news>p{margin:0 0 14px;max-width:34em}
/* Sweden's pill-in-pill newsletter form: a darker-blue rounded container, borderless
input, solid white pill button with Plan Blue text. */
.nl-pill{display:flex;align-items:center;background:var(--plan-blue-dk);border-radius:999px;padding:8px 8px 8px 24px;max-width:460px}
.nl-pill input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-size:16px;font-family:inherit;padding:10px 8px 10px 0;outline:none}
.nl-pill input::placeholder{color:rgba(255,255,255,.8)}
.nl-pill:focus-within{outline:3px solid #fff;outline-offset:2px}
.nl-btn{background:#fff;color:var(--plan-blue);border:0;border-radius:999px;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:15px;padding:12px 24px;cursor:pointer;transition:transform .16s var(--ease)}
.nl-btn:hover{transform:translateY(-1px)}
.nl-msg{margin-top:10px;font-size:14px;min-height:1.5em}
.rail{min-width:180px}
.rail-h{display:block;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:15px;color:#fff;margin-bottom:3px}
.rail .tbc{color:#fff;font-size:14.5px}
/* The visible caveat line under the social icons and the planned-pages column: the
Georgia voice every other unknown on the page already speaks. */
/* The closing legal microline, Sweden's org-number row equivalent. No border-top: the
background already steps from Plan Blue to the dark, and drawing a hairline on a colour
change is the third of the four dividing devices Matthew was looking at. */
.ft-legal{background:var(--plan-blue-dk);padding:15px 0}
.ft-legal p{margin:0;font-size:13.5px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:860px){
.ft-grid{grid-template-columns:1fr}
.ft-top{align-items:flex-start;flex-direction:column}
}
/* Matthew, from the screenshot: the "Your amount" label was centred over the field instead of
left-aligned, and the designation cards touched each other and were unequal. */
/* The three designation cards: separated, and identical in width and height. Grid gives equal
columns; stretch makes every card the height of the tallest, so no card is short. */
/* Trust marks: quiet, in a row, never competing with the button they reassure. */
/* Matthew: "we're using rounded corners, so the picture needs rounded corners also, we can't
have square and circles." Every inline photograph and the logo lockup now match the page's
rounded scale. The full-bleed hero stays square: a radius on an edge-to-edge image reads as a
rendering fault, not a decision. */
/* .plan-logo itself is gone from the markup (the header it belonged to was removed), but the
exclusion for it costs nothing to keep. :not(.lr-shot img), added earlier the same day to fix
a specificity fight this rule was winning against .lay-round's circular-photo crop, came back
out when .lay-round itself was removed a few hours later — see the ROUND comment near
.lay-split above. */
#case img,section img:not(.bg):not(.plan-logo){border-radius:var(--r)}
/* 11 September 2026: a photo dropped into a Section body (WordPress's own Image block) offers
exactly the two photo shapes already used elsewhere on the site, registered in
assets/inline-blocks.js as this block's only two style choices: "Square" is nothing more than
the soft corner every photo in a section already gets from the rule just above, so it needs no
CSS of its own; "Round" matches the circular crop People already uses for a portrait
(.is-portraits .reg-shot, a few hundred lines down). No third option, no arbitrary corner
radius: a photo added here can only ever end up looking like it belongs to this design. */
.wp-block-image.is-style-ggf-round img{border-radius:50%;aspect-ratio:1;object-fit:cover}
/* ── THE GIVING SECTION, REWORKED ──────────────────────────────────────────────
Matthew, from the browser: the third card looked cut off, the gaps between Currency, How
much and Your amount were unequal, and "How often" sat orphaned in a right-hand column while
the other questions ran full width. Measured: the four groups were 1100 / 514 / 514 / 1100 px
wide with 206px then 109px vertical gaps. That is three different rhythms in one form.
Now: ONE column, every question the same width, the same gap between each. A form should read
as a single descending sequence, not a grid puzzle. */
/* This restated rule silently KILLED the phone layout. The single-column rule for the designation
cards lives at line 291, inside @media(max-width:760px); a media query adds no specificity, so
three cards stayed in three columns at 63px each and the third label ran 25px off the right edge
of the page. Measured in a real 390px frame, not a headless window. Re-declare it AFTER. */
/* The sticky bar was covering the form it points at. Leave room for it, and let the page settle
back when it is gone. */
/* ── THE DUE-DILIGENCE PANEL (replaces the trust strip) ──────────────────────────────────────
Matthew, 3 Aug: "for the section that shows part of a plan international, the philanthropy
council, clear governance, where your money goes, you need to think of a much nicer way to
design that area."
Measured in Chrome first, and the numbers say exactly why it fell flat: four items, each
256 x 98px, transparent, identical weight. Four identical shapes cannot carry a hierarchy, so
the donor's credibility check read as a footnote under 170px of dead space. The 14px radius was
also landing on a 3px left RULE with nothing to round, bending it into a bracket that looked
like a rendering fault rather than a decision.
The redesign is not decoration. These are four different KINDS of answer and they should not
be four identical shapes:
Plan International is a badge -> show the official lockup as the evidence
The Council is people -> the lead card, and a route to meet them
Governance is a process -> a checked list of what is actually checked
After you give is a route -> three steps, joined by the page's own yellow rule
The section intro already promised "the questions serious donors ask first", so each card now
states its QUESTION above its answer. That turns a list into an argument, which is the form a
philanthropist doing due diligence actually reads, and it is Susanna's point about being a
different proposition to a philanthropist rather than a traditional charity.
Why the Council leads, filled and largest: Plan International already appears in the header
lockup, the hero eyebrow and the case section. The Council appears ONLY here on the homepage,
and Susanna has required it prominent since 14 July. The lead slot goes to the thing with
nowhere else to be. One filled card is not Maureen's "large flat colour panel" (Plan's red
child-marriage box) and filled Plan Blue already means "the one that leads" on this page:
the mission flagship cell and Annual giving both use it. Same language, not a new device. */
/* THE MASTHEAD SITS ON THE SAME 12 COLUMNS AS THE CARDS. It did not, and the headline's 16em cap
landed 38px past the lead card's right edge: a near-miss, which reads worse than either aligning
or plainly not aligning, and it left a 430 x 170px void in the top right while the grid below
ran the full width. Heading on 7, intro on the last 4, baselines aligned. */
.dd-head{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:start;margin-bottom:var(--s4)}
.dd-head .mh-a{grid-column:span 7}
.dd-head .mh-b{grid-column:9 / span 4}
#about h2{max-width:none;margin-bottom:0}
#about .sec-intro{max-width:none;margin-bottom:4px}
.dd{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
/* 1.5px var(--grey), not var(--line). This page already had this argument once and settled it:
the giving blocks measured a --line hairline at 1.1:1, under the 3:1 non-text guideline, and
switched to --grey so the card would read as an object. The first pass at this panel then used
--line anyway, which measured 1.23:1 on white, so three of the four cards were not cards at
all, they were faint outlines around floating text. One blue rectangle and three ghosts is
what "flat" looks like when every text contrast in the section passes.
Radius 14, not 18: 18 existed nowhere else in the system. .themes .cell and .gv-des .cell are
both 14, so this rejoins the page instead of inventing a token. */
.dd-card{border:1.5px solid var(--grey);border-radius:var(--r);padding:30px 32px;display:flex;
flex-direction:column;background:#fff}
.dd-council{grid-column:span 7}
.dd-plan{grid-column:span 5}
.dd-gov{grid-column:span 7}
.dd-after{grid-column:span 5;background:var(--paper-2)}
/* No hover lift. Three of these four are not clickable, and a card that rises and glows under the
cursor promises something it cannot do. Elevation-on-hover is also a Material habit; this page's
hover language is a background change on regions and a lift on buttons only. */
/* The question, carrying the page's own eyebrow device: a 22 x 3 yellow rule, the same object as
.sec-eyebrow::before. Without it these were generic small-caps captions, and yellow appeared in
the whole 1100 x 615 panel exactly twice, at 20 x 3px each. The brand's punctuation now marks
all four answers, which is the fastest possible read of "one family, and it is this page's".
It lives INSIDE the h3, so a screen reader hears "Who decides where it goes? The Philanthropy
Council" as one heading instead of four orphan questions floating before four headings. */
.dd-q{display:flex;align-items:center;gap:10px;font-family:'Poppins',Arial,sans-serif;
font-weight:700;font-size:13px;line-height:1.25;letter-spacing:.14em;text-transform:uppercase;
color:var(--grey);margin:0 0 12px}
.dd-q::before{content:"";width:22px;height:3px;border-radius:999px;background:var(--yellow);flex:none}
.dd-card h3{font-size:clamp(20px,1.75vw,25px);line-height:1.15;letter-spacing:-.01em;
color:var(--plan-blue);margin:0 0 12px}
/* The 7-column card gets a bigger answer as well as more room, so the width means something.
It also caps its measure: at 15.5px in a 7-column card the line ran to 79 characters. */
.dd-gov h3{font-size:clamp(22px,1.95vw,28px)}
.dd-card p{font-size:15.5px;line-height:1.62;color:var(--grey);margin:0;max-width:34em}
/* The lead card. Bigger type as well as a fill, because a colour change alone is emphasis by
paint; scale is emphasis by design. */
.dd-lead{background:var(--plan-blue);border-color:var(--plan-blue)}
/* Both of these are PURE white, not tinted, and that is a contrast decision rather than a taste
one. Measured: white at 74% over Plan Blue composites to #BDDAF2, which is 3.4:1 against the
card and fails WCAG AA for a 12.5px label; at 93% the body copy lands on 4.54:1, passing by a
margin too thin to defend. Pure white on Plan Blue is 4.95:1. The hierarchy is carried by size
and weight instead, which is how the hero already does it. */
.dd-lead .dd-q{color:#fff}
.dd-lead h3{color:#fff;font-size:clamp(25px,2.3vw,33px)}
.dd-lead p{color:#fff;font-size:17px;max-width:30em}
/* The caveat voice the rest of the page already uses for anything not yet confirmed (.tbc in the
footer, .note in brand.css): Georgia italic. The card promised "real names" and showed none,
which a philanthropist reads as a promise of specificity delivered as an empty blue rectangle.
Until GGF supply the Council, the page says so in its own convention rather than leaving an IOU. */
.dd-tbc{font-size:14px;margin-top:20px}
/* Pure white again, not 86%: tinted white over Plan Blue measures 4.07:1 at 14px and fails AA.
Georgia italic is doing the "this is a caveat" work, so the colour does not have to. */
.dd-lead .dd-tbc{color:#fff}
.dd-tbc{color:var(--grey)}
/* One link per card, pinned to the bottom so the cards agree on a baseline even at unequal
heights. The arrow is drawn, not typed: a glyph would render differently in every fallback. */
.dd-link{margin-top:auto;padding-top:14px;align-self:flex-start;display:inline-flex;align-items:center;
gap:9px;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:15px;
color:var(--plan-blue);text-decoration:none}
.dd-lead .dd-link{color:#fff}
.dd-link svg{width:17px;height:17px;transition:transform .2s var(--ease)}
.dd-link:hover svg{transform:translateX(4px)}
.dd-link:hover span{text-decoration:underline;text-underline-offset:4px}
.dd-link:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:var(--r-sm)}
/* The badge: the official lockup Daniela supplied, presented as the evidence rather than described
in a sentence. Left-aligned on the card's own text edge. The hairline that used to sit above it
is GONE: the card's content filled its row height almost exactly, so margin-top:auto had nothing
left to distribute and the rule landed 9px under a descender, where it read as an underline of
the paragraph rather than as a frame for the mark. Clearance does that job instead.
No radius: the lockup is a supplied asset and rounding its corners would be altering it. */
.dd-mark{margin-top:auto;padding-top:40px}
.dd .dd-card .dd-mark img{width:100%;max-width:214px;height:auto;display:block;border-radius:0}
/* Governance: what is checked, in the page's OWN list language (.feature-points in brand.css):
a hairline above each row and a 14 x 3 yellow rule at the left edge. The first pass used filled
blue discs with white check marks, which exist nowhere else on this page and made a governance
panel look like a SaaS pricing table. This also puts yellow into the composition three more
times. Items still to be confirmed by GGF carry the page's Georgia-italic caveat voice, so the
card never asserts an audit the footer says is pending two screens below. */
.dd-checks{list-style:none;margin:20px 0 0;padding:0}
.dd-checks li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--hairline);
font-size:15.5px;line-height:1.45;color:var(--ink)}
.dd-checks li::before{content:"";position:absolute;left:0;top:19px;width:14px;height:3px;
border-radius:999px;background:var(--yellow)}
.dd-checks .tbc{color:var(--grey)}
/* The three programme links (Girls in Leadership/Crisis/Innovation) are plain tags with no
class, the only links ever placed inside this list, so they fell straight through to the
browser's own blue-and-underline default instead of the site's own link styling, found live
7 Sep 2026. */
.dd-checks a{color:var(--plan-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dd-checks a:hover{color:var(--ink)}
.dd-checks a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}
/* The route a gift takes, rebuilt. The first pass set three pill-shaped Poppins-bold Plan Blue
labels joined by short yellow bars: character for character the page's own button shape, so it
read as three dead buttons 200px above a real donate call to action, and the bars read as em
dashes rather than as a route. Now it is a numbered editorial sequence on hairlines, which is
unmistakably not a control. */
.dd-route{list-style:none;margin:20px 0 0;padding:0;counter-reset:step}
.dd-route li{counter-increment:step;display:flex;gap:14px;align-items:baseline;
padding:11px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--ink)}
.dd-route li::before{content:"0" counter(step);font-family:'Poppins',Arial,sans-serif;
font-weight:700;font-size:13px;color:var(--plan-blue);letter-spacing:.06em;flex:none}
/* Tablet: the two 7-column cards go full width, the two 5-column ones pair. Phone: one column.
Verified at real widths in Chrome, not in a headless window that clamps at 500px. */
/* Tablet pairing, corrected. The first attempt kept the two 7-column cards full width and the two
5-column ones at half, but grid fills in source order, so each half-width card landed alone on
its own row with 344px of dead space beside it. Measured at a real 768px frame. The lead keeps
the full width it earns; the two middle cards pair; the closing card runs full width. */
@media(max-width:1000px){ .dd-head .mh-a,.dd-head .mh-b{grid-column:span 12} .dd-head{gap:14px;margin-bottom:40px}
.dd-council,.dd-after{grid-column:span 12} .dd-plan,.dd-gov{grid-column:span 6}
.dd-gov h3{font-size:clamp(20px,1.75vw,25px)} }
@media(max-width:700px){
.dd{gap:14px}
.dd-card{grid-column:span 12;padding:24px 22px}
}
@media(prefers-reduced-motion:reduce){ .dd-link svg{transition:none} }
/* ════════════════════════════════════════════════════════════════════════════════════════════
10 AUGUST. Matthew, from the browser, three faults and the Sweden menu pattern.
════════════════════════════════════════════════════════════════════════════════════════════ */
/* ── FAULT 1. "That image has two elements behind it. They're both very square instead of
rolling like the rest of the site, so it looks kind of funny."
Measured: .feature-media::before is a 92px yellow square at radius 0, ::after is a 64px square
with a 4px Plan Blue border at radius 0, and both sit behind a photograph rounded to 16px.
A hard corner poking out from behind a soft one reads as a rendering fault. They keep their
offsets and their job, they just stop being squares. */
.feature-media::before{border-radius:var(--r)}
.feature-media::after{border-radius:var(--r)}
/* ── FAULTS 2 AND 3. "The next section below it seems to be an overlap" and "the cards aren't
really very separate, they seem almost connected."
Measured: the mission strip is ONE grid with no gap (gap computed as "normal"), a square 1px
outer frame, 1px dividers between cells, and each cell carrying a 14px radius. So three cards
with rounded corners were butted edge to edge inside a square box. At every join a rounded
corner pulls away from the square frame and leaves a wedge, which is exactly what reads as two
boxes sitting on top of each other. Nothing actually overlaps: every section on this page butts
its neighbour at 0px, verified. The overlap is the corner geometry, not the layout.
Fix: make them what they already pretend to be. Real cards, real gaps, no frame, no dividers,
and the same 1.5px grey keyline the trust panel and the giving cards use. Scoped to #mission
so nothing else that borrows .themes is disturbed. */
#mission .themes{border:0;gap:18px;align-items:stretch}
#mission .themes .cell{border:1.5px solid var(--grey);border-radius:var(--r);border-right:1.5px solid var(--grey);
height:100%;transition:border-color .2s var(--ease)}
#mission .themes .cell:hover{background:transparent;border-color:var(--plan-blue)}
#mission .themes .flag{border-color:var(--plan-blue)}
#mission .themes .flag:hover{background:var(--plan-blue)}
@media(max-width:820px){ #mission .themes{grid-template-columns:1fr} }
/* ── THE HEADER IS PLAN INTERNATIONAL'S, NOT OURS ────────────────────────────────────────────
Matthew, 10 August: "I don't think you have got the top menu right... We need to use the
correct menu, but I want to keep the donate widget type of thing, so you need to integrate it
into it. Use the menu that thing there that Plan International wants us to use."
He is right, and the previous pass was a straight mistake: it replaced Plan's mandated header
with a floating three-pill cluster borrowed from plansverige.org. Sweden is a National
Organisation on its own platform. GGF is a site inside Plan's shared estate and inherits the
estate's header, which is not ours to redesign.
So this is measured off the LIVE GGF site (globalgirlsfoundation.org, Altis/WordPress, read
only), not invented:
header.site-header background #0072CE, position sticky, z-index 3, HEIGHT 100px, Arial
.menu-toggle 112 x 100 at the far left, a hamburger with the word "Menu" under it
nav links 16px / 700 / white, starting at x=127
a.top-logo 137 x 81, CENTRED (x=531 in a 1200 container)
.search-block 229 wide on the right, search plus "Plan's global sites"
a.btn.btn-type-3.btn-donate 112 x 40, radius 44px, background #FFD500, at x=1070
THE FINDING THAT MAKES THIS EASY: that last one is the yellow pill currently labelled
"Contact" on the live GGF site, and its classes are btn btn-type-3 btn-donate. It is the SAME
component the Dominican Republic site uses for its "Donar" button, which is the example Laura
sent to confirm a top-right donate button is possible. The component is already on the page.
We are relabelling it and hanging the giving widget off it, not asking for anything new. */
/* These three tokens were defined inside the header block that this pass replaced, and deleting
them silently broke the giving widget: every UNSELECTED chip fell back to transparent on white
with white text, so only the chosen option in each row was visible. Restored here, where they
belong, because they are used across the panel and not just by the header. */
:root{ --sw:cubic-bezier(.34,.34,.02,.97); --tint:#E0EEF9; --tint-ink:#005AA6; }
header.plan{position:sticky;top:0;left:auto;right:auto;background:var(--plan-blue);
box-shadow:none;padding:0;z-index:80}
header.plan .wrap{max-width:none;padding:0;background:transparent;border-radius:0;height:auto;display:block}
.ph-bar{position:relative;max-width:1200px;margin:0 auto;height:100px;padding:0 18px;
display:flex;align-items:center;gap:18px}
.ph-left{display:flex;align-items:center;gap:22px;min-width:0}
.ph-right{display:flex;align-items:center;gap:18px;margin-left:auto}
/* The menu toggle: the icon with the word Menu BESIDE it, per Matthew on 11 August. It was
stacked, icon above label, which is Plan's own arrangement, but with the three repeated nav
links gone from the bar there is room for a row, and a row reads as one control rather than
as two things. No fixed width any more: the button is as wide as the icon and the word. */
.ph-menu{height:100px;border:0;background:none;color:#fff;cursor:pointer;
display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;padding:0 8px 0 0}
.ph-menu .bars{position:relative;width:22px;height:12px;display:block}
.ph-menu .bars i{position:absolute;left:0;right:0;height:2px;border-radius:999px;background:#fff;
transition:transform .3s var(--sw),opacity .2s var(--sw)}
.ph-menu .bars i:nth-child(1){top:0} .ph-menu .bars i:nth-child(2){top:5px} .ph-menu .bars i:nth-child(3){top:10px}
.ph-menu[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.ph-menu[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.ph-menu[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.ph-menu span.lbl{font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:1}
.ph-menu:focus-visible,.ph-sites:focus-visible,.ph-search:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
/* .ph-nav has gone with the three links it held. They repeated menu items, and the menu now
carries every page on the site, so the bar was showing part of the same list twice. */
/* Centred absolutely, exactly as theirs is: x=531 in a 1200 container is dead centre. */
.ph-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;line-height:0}
/* object-fit:contain, because flex compression below 360px squeezed the parent brand mark
25.7% horizontally instead of letting it shrink evenly */
.ph-logo img{height:74px;width:auto;display:block;object-fit:contain}
.ph-logo:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.ph-sites{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;
font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;white-space:nowrap}
.ph-sites:hover{text-decoration:underline;text-underline-offset:4px}
.ph-sites svg,.ph-search svg{width:19px;height:19px;stroke:#fff;flex:none}
.ph-search{border:0;background:none;padding:6px;cursor:pointer;line-height:0}
/* THIRD-PARTY CSS BEGIN
Plan International's own donate component, reproduced from their live sites rather than
designed by us: measured identically on globalgirlsfoundation.org (labelled "Contact") and on
plan-international.org/republica-dominicana ("Donar"), which is the example Laura Barrington
sent on 7 August to show a top-right donate button in place. 40px tall, 44px radius, #FFD500,
Arial 16/700. The 44px radius is outside our own shape standard, and it stays 44px because it
is not ours to change. Fenced so the shape gate skips it and prints that it did. */
.btn-donate{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;
border:0;border-radius:44px;background:var(--yellow);color:var(--ink);cursor:pointer;
font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;white-space:nowrap;
text-decoration:none;transition:background .2s var(--sw),transform .16s var(--sw)}
.btn-donate:hover{background:#ffdf3d;transform:translateY(-1px)}
.btn-donate:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* The pill used to relabel itself to "Close" while the panel was open. Matthew, 14 August:
it "must always say Start Giving". So it does, open or shut; the panel has its own close. */
/* THIRD-PARTY CSS END
Everything below is ours and is checked by every guard. */
/* THE PANELS ARE DRAWERS. Matthew, 11 August: the giving dropdown floated at the right with a
gap and stopped mid-screen, which read as misplaced, and the menu panel was a different blue
from the header. Now: each panel is flush to its screen edge, runs from the bar to the bottom
of the viewport, and the menu is the header's own Plan Blue. */
.panel{position:fixed;top:100px;right:0;bottom:0;width:440px;max-width:100vw;z-index:2;
border-radius:0;padding:0 34px 34px;
overflow-y:auto;overscroll-behavior:contain;
visibility:hidden;opacity:0;transform:translateX(18px);transform-origin:top right;pointer-events:none;
transition:opacity .5s var(--sw),transform .5s var(--sw),visibility 0s linear .5s}
.panel.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;
transition:opacity .5s var(--sw),transform .5s var(--sw),visibility 0s}
html.no-js .panel:target{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:none}
.panel-give{background:#fff}
/* SAME blue as the bar it hangs from, so bar and panel read as one object. It was
--plan-blue-deep, a different navy, which is what read as "the colour is different". */
.panel-nav{background:var(--plan-blue);color:#fff;
right:auto;left:0;transform:translateX(-18px);transform-origin:top left}
.panel-nav.open{transform:none}
.panel::before{content:"";position:sticky;top:0;z-index:1;display:block;height:26px;
margin:0 -34px;background:inherit}
/* No backdrop-filter. A full-screen blur puts the entire page behind it on the compositor for
every frame, and forty-one copies of this div had accumulated on the homepage, so the browser
was compositing forty-one full-screen blurs. That is what Matthew was seeing when the page
flickered, arrived late and went blank as he scrolled. The duplicates are fixed at the source
and the blur has gone with them: a slightly deeper scrim reads the same and costs nothing. */
.hdr-scrim{position:fixed;inset:0;background:rgba(12,16,20,.55);
opacity:0;pointer-events:none;z-index:75;
transition:opacity .5s var(--sw)}
.hdr-scrim.on{opacity:1;pointer-events:auto}
/* Below the estate's own breakpoint the sites link goes into the menu, exactly as theirs does,
and the bar keeps only: menu, centred lockup, donate. (.ph-nav no longer exists: the three
links it held are in the menu, which is where the rest of the pages already were.) */
@media(max-width:1024px){
.ph-sites{display:none}
.ph-bar{height:82px;padding:0 12px}
.ph-menu{height:82px}
.ph-logo img{height:58px}
.panel{top:82px}
}
@media(max-width:560px){
.ph-bar{height:72px}
.ph-menu{height:72px;gap:0}
.ph-menu span.lbl{display:none}
/* The lockup is absolutely centred on wide screens, which takes it out of the flex flow. On a
phone that meant the giving button was painted straight over it: 24px of Plan International's
own logo covered at 375px, which is the width the Managing Director will open this at.
Back into the flow here, so the three items share the bar instead of stacking on each other,
and the browser guarantees they cannot overlap rather than the arithmetic happening to work. */
.ph-logo{position:static;transform:none;margin:0 auto;min-width:0}
.ph-right{margin-left:0}
.ph-logo img{height:44px;max-width:100%}
.btn-donate{height:36px;padding:0 16px;font-size:15px}
.panel{top:72px;width:100vw;padding:0 22px 26px}
.panel-nav{left:0;right:auto}
}
/* ── PANEL A: GIVING. The Ways to Give section, compressed into 365px of usable width.
Their order, which we adopt: how often, then what it funds, then how much. The designation is
the control that COLLAPSES, and it earns its place: as a select it can offer the two programme
areas by name, which the three-card version could not without a fourth and fifth card.
Maureen's order is preserved inside it: annual giving first. */
.gp-q{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;
text-transform:uppercase;color:var(--plan-blue);margin:0 0 6px;display:block}
/* Matthew, 6 September 2026: opening the panel meant scrolling to reach the amount and email
fields, and further still with a custom amount typed in. Measured live at 1440x900: the
choose step's fields needed 644px against 493px available, 151px of forced scroll before a
custom amount was even in the picture, 251px with one. None of these height cuts touch what
the fields ask for or how they behave, only the padding and gaps around them. */
/* min-width:0 because