/* ========================================================================== message.css — "The Address" layout, shared by the Chairman's and Co-Chairs' message pages (from design/cochairs-b.html, Direction B). The message as a stage moment: dark ceremonial hero, numbered movements, the appeal delivered as a red band. Every value is a token from the booklet system in tokens.css. ========================================================================== */ /* --- Hero: the booklet cover, full bleed. -------------------------------- */ .address-hero { background: linear-gradient(160deg, var(--primary), var(--primary-deep)); color: #fff; text-align: center; padding: var(--space-9) var(--space-5) var(--space-8); } .address-hero__seal { margin: 0 auto var(--space-5); display: block; } .address-hero__tag { font-size: var(--step--1); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; /* Gold on --primary/--primary-deep is 5.08:1 — the only dark grounds where the booklet gold is allowed to carry text. */ color: var(--gold-light); margin-bottom: var(--space-3); } .address-hero h1 { color: #fff; font-size: var(--display-lg); margin-bottom: var(--space-3); } .address-hero__sub { color: rgba(255,255,255,0.85); font-size: var(--step-0); margin: 0; } /* --- Movements: numbered sections. --------------------------------------- */ .movement { padding-block: var(--space-8); } .movement--warm { background: var(--surface-warm); } .movement__inner { max-width: var(--container-tight); margin-inline: auto; padding-inline: var(--space-5); } .movement__head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); } .movement__ordinal { font-family: var(--font-display); font-weight: 600; font-size: var(--step-5); line-height: 1; color: var(--gold-bright); flex: none; /* Decorative: the heading carries the meaning. */ user-select: none; } .movement__head h2 { font-size: var(--display-sm); margin: 0; } /* Body copy is justified — these pages are formal addresses and read as printed ones. hyphens is not optional alongside it: --prose is 68ch and narrows to a phone column, where justifying without word breaking opens white rivers. is set in _Layout, so the browser has the language it needs to hyphenate. The -webkit- prefix stays: unprefixed hyphens only landed in Safari 17. */ .movement p { color: var(--ink-muted); max-width: var(--prose); text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .movement strong { color: var(--ink); } /* The mentors named in movement 2 of the Management Team's message: one per line, bold as the organisers supplied it, each on a thin gold rule so ten names read as a list rather than a wall of bold text. */ .mentor-list { list-style: none; margin: var(--space-4) 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); } .mentor-list li { padding-left: var(--space-4); border-left: 3px solid var(--gold-bright); line-height: var(--leading-snug); } .mentor-list strong { font-weight: 650; } /* Salutation block, before the movements begin. */ .salutation { padding-block: var(--space-8); text-align: center; } .salutation__inner { max-width: var(--prose); margin-inline: auto; padding-inline: var(--space-5); } .salutation .lede { margin-bottom: var(--space-3); } .salutation__johar { font-family: var(--font-display); font-size: var(--step-3); color: var(--accent); margin: 0 0 var(--space-5); } /* --- The appeal: a red proclamation band. -------------------------------- */ .appeal { background: var(--accent); color: #fff; padding-block: var(--space-8); text-align: center; } .appeal__inner { max-width: var(--container-tight); margin-inline: auto; padding-inline: var(--space-5); } .appeal h2 { color: #fff; font-size: var(--display-sm); margin-bottom: var(--space-4); } .appeal p { color: rgba(255,255,255,0.92); max-width: var(--prose); margin-inline: auto; } .appeal p strong { color: #fff; } .appeal .btn { margin-top: var(--space-5); } /* White-on-red button, the Home CTA-band inversion. */ .btn--light { background: #fff; color: var(--accent); border-color: #fff; } .btn--light:hover { background: var(--surface-warm); color: var(--accent-deep); } /* --- Signature, on the sunk surface so it reads as the closing plate. ----- */ .signoff-plate { background: var(--surface-sunk); padding-block: var(--space-8); } .signoff-plate__inner { max-width: var(--container-tight); margin-inline: auto; padding-inline: var(--space-5); } .signoff-plate__valediction { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink); margin-bottom: var(--space-6); } .signatories { display: grid; gap: var(--space-6); } @media (min-width: 560px) { .signatories { grid-template-columns: 1fr 1fr; } } .signatory { border-top: 1px solid var(--line-strong); padding-top: var(--space-3); display: flex; align-items: center; gap: var(--space-4); } /* A portrait where one has been supplied, initials where it has not. The photographs are collected separately from the build, so a missing file must read as ordinary rather than as a fault. */ .signatory__avatar { flex: 0 0 auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-pill); background: linear-gradient(160deg, var(--primary-tint), var(--gold-tint)); } .signatory__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .signatory__avatar > span { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--primary-deep); letter-spacing: var(--tracking-wide); } .signatory__ident { min-width: 0; } .signatory__name { font-weight: 700; color: var(--ink); margin: 0; } .signatory__role { font-size: var(--step--1); color: var(--ink-muted); margin: 0; }