/* ════════════════════════════════════════════════════════════════════ Awards for Humanity — shared design system ──────────────────────────────────────────────────────────────────── Tokens, resets, nav, generic section chrome, buttons, animations. Block-specific styles live alongside each block. ──── THEMING DISCIPLINE ──── Block CSS must reference the tokens declared on :root below. Never hard-code hex colours or font-family strings inside block CSS. ════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces — white page with cream as the alternating-section wash. Editorial / award-program look: pure-white surfaces, strong black type, gold reserved for the brand logo, eyebrow rules, and link-hover. */ --color-bg: #ffffff; /* page background */ --color-surface: #ffffff; /* (formerly cream) — kept token, now white */ --color-dark-bg: #0a0a0a; /* near-black for the rare dark section */ --color-on-dark: #ffffff; /* text on dark surfaces */ /* Foreground / ink — confident near-black across body and headings. #0a0a0a reads a hair softer than pure #000 on LED screens without losing the "strong black" feel. */ --color-fg: #0a0a0a; --color-fg-muted: #4a4a4a; /* secondary body text */ --color-muted: #0a0a0a; /* eyebrows — black, set apart by tracking */ /* Gold accent ladder — restrained. --color-accent is reserved for the few intentional moments (italic emphasis, eyebrow rules, link hover). Lighter rungs are kept for legacy callers. */ --color-accent: #8B6F47; /* Antique Gold — softer brand accent */ --color-accent-soft: #C8970A; /* Logo Gold — used only for the logo */ --color-accent-3: #6B5439; /* Dark Gold — deep emphasis */ --color-accent-4: #B89A5A; /* mid gold tint */ --color-accent-5: #D8C28A; /* pale gold tint */ --color-accent-6: #EBDCB8; /* lightest gold tint */ /* Borders — neutral hairlines, no cream tint */ --color-border: #e6e6e6; --color-border-soft: #ededed; /* Typography — Google Sans everywhere (headlines + body), with Tai Heritage Pro reserved exclusively for the Roman numerals on award cards. Loaded via @font-face in shared/fonts.html. */ --font-display: 'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-eyebrow: 'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-numeral: 'Tai Heritage Pro', Georgia, 'Times New Roman', serif; /* Spacing — more architectural breathing room for the new look. */ --space-section-y: 112px; --space-section-x: 80px; } /* ── Reset ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } /* ── Nav ───────────────────────────────────────────────────────────── */ nav.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; background: rgba(255,255,255,0.97); transition: background 0.3s; } nav.site-nav.scrolled { background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 12px rgba(0,0,0,0.06); } .nav-logo a.nav-logo-link { display: inline-flex; align-items: center; text-decoration: none; } /* ── Brand mark ── reusable typographic logo: a gold ring + the stacked "AWARDS FOR / HUMANITY" wordmark in Tai Heritage Pro. Per-context size is set via CSS custom properties below. */ .brand-mark { display: inline-flex; align-items: center; gap: var(--bm-gap, 12px); text-decoration: none; color: var(--color-accent-soft); /* Logo Gold #C8970A */ } .brand-mark__ring { display: block; width: var(--bm-ring, 48px); height: var(--bm-ring, 48px); border: var(--bm-border, 3px) solid currentColor; border-radius: 50%; flex-shrink: 0; } .brand-mark__wordmark { font-family: var(--font-numeral); /* Tai Heritage Pro */ font-size: var(--bm-text, 14px); font-weight: 400; line-height: 1; letter-spacing: 0.01em; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; } .brand-mark__wordmark > span { display: block; } /* Nav context: compact mark */ .nav-logo .brand-mark { --bm-ring: 44px; --bm-border: 3px; --bm-text: 14px; --bm-gap: 12px; } /* Footer context: larger mark */ .block-footer .brand-mark { --bm-ring: 96px; --bm-border: 6px; --bm-text: 28px; --bm-gap: 22px; } /* Narrow viewports: drop the wordmark from the nav, ring only */ @media (max-width: 640px) { .nav-logo .brand-mark__wordmark { display: none; } } .nav-links { display: flex; gap: 32px; list-style: none; } .nav-links a { font-family: var(--font-eyebrow); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #333333; text-decoration: none; transition: color 0.2s; } .nav-links a:hover { color: var(--color-fg); } .nav-right { display: flex; align-items: center; gap: 14px; } /* Language switcher (visible only when AVAILABLE_LANGS has > 1 entry). nav.php emits one per language as siblings inside .lang-switcher. Inline pill layout — no dropdown. */ .lang-switcher { display: inline-flex; align-items: center; gap: 4px; } .lang-switcher .lang-option { display: inline-flex; align-items: center; width: auto; padding: 6px 10px; font-family: var(--font-eyebrow); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); background: none; border: 1px solid transparent; text-decoration: none; transition: color 0.2s, border-color 0.2s; } .lang-switcher .lang-option:hover { color: var(--color-accent); } .lang-switcher .lang-option.active { color: var(--color-accent); border-color: var(--color-border-soft); } .lang-btn { display: flex; align-items: center; gap: 6px; font-family: var(--font-eyebrow); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #333333; background: none; border: 1px solid var(--color-border-soft); padding: 7px 12px; cursor: pointer; transition: border-color 0.2s; white-space: nowrap; line-height: 1; } .lang-btn:hover { border-color: var(--color-fg); } .lang-btn svg { width: 9px; height: 9px; transition: transform 0.2s; } .lang-btn.open svg { transform: rotate(180deg); } .lang-dropdown { position: absolute; top: calc(100% + 5px); right: 0; background: var(--color-bg); border: 1px solid var(--color-border); min-width: 130px; z-index: 999; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .lang-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); } .lang-option { display: flex; align-items: center; gap: 9px; padding: 10px 14px; cursor: pointer; width: 100%; font-family: var(--font-eyebrow); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #666666; background: none; border: none; text-align: left; transition: background 0.12s, color 0.12s; text-decoration: none; } .lang-option:hover { background: var(--color-surface); color: var(--color-fg); } .lang-option.active { color: var(--color-fg); font-weight: 700; } /* ── Section primitives ────────────────────────────────────────────── */ section { padding: var(--space-section-y) var(--space-section-x); } /* ── Compact vertical rhythm ── Override every block's top/bottom padding to a much tighter value so pages don't drift apart visually. Uses higher specificity than the per-block rules (`body section.block` vs `.block-statement`) so it always wins without needing !important. Adjacent-sibling rules like `.block-team + .block-team` and `.block-title + .block-paragraph` keep their tighter overrides (specificity is also (0,2,0) ≥ ours). To add deliberate spacing between blocks, drop in the `spacer` block. */ body section.block { padding-top: clamp(20px, 3vh, 36px); padding-bottom: clamp(20px, 3vh, 36px); } /* The fixed public nav sits at z-index 100 across the top ~76px of the viewport. The first block on each page must clear it, otherwise its eyebrow/title hide under the nav. Higher specificity than the global compact rule above (the :first-child pseudo-class bumps specificity) so this wins for the first block only. */ main > section.block:first-child { padding-top: clamp(96px, 13vh, 140px); } .section-label { font-family: var(--font-eyebrow); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 14px; } /* Short black stroke before each eyebrow — anchors the inscription. */ .section-label::before { content: ''; display: inline-block; width: 28px; height: 2px; background: var(--color-fg); } .section-title { font-family: var(--font-display); font-size: clamp(48px, 7vw, 100px); font-weight: 900; line-height: 0.95; margin-bottom: 40px; letter-spacing: -0.035em; } .section-title em { font-style: italic; color: var(--color-accent); font-weight: 900; } .rule { width: 48px; height: 1px; background: var(--color-border-soft); margin-bottom: 32px; } /* Sections with dark backgrounds invert text colour. */ .section--dark { background: var(--color-dark-bg); } .section--dark .section-title { color: var(--color-on-dark); } .section--dark .section-title em { color: rgba(255,255,255,0.5); } .section--dark .section-label { color: rgba(255,255,255,0.4); } .section--surface { background: var(--color-surface); } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn-primary, .btn-outline { font-family: var(--font-eyebrow); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; display: inline-block; } .btn-primary { padding: 14px 36px; background: var(--color-accent); color: var(--color-on-dark); border: none; transition: background 0.2s; } .btn-primary:hover { background: var(--color-accent-soft); } .btn-outline { padding: 13px 36px; background: transparent; color: var(--color-on-dark); border: 1px solid rgba(255,255,255,0.5); transition: border-color 0.2s, color 0.2s; } .btn-outline:hover { border-color: rgba(255,255,255,0.9); } /* Outline variant on light backgrounds */ .section--surface .btn-outline, .btn-outline.on-light { color: var(--color-fg); border-color: var(--color-fg); } .section--surface .btn-outline:hover, .btn-outline.on-light:hover { background: var(--color-fg); color: var(--color-on-dark); } /* ── Preserve user-entered line breaks in every editable text field ── Every CMS-rendered text element carries a [data-field] attribute. The default `white-space: normal` collapses newlines (and the blank lines users type between paragraphs) into single spaces, silently discarding their formatting on save+reload. `pre-line` preserves newlines as visible breaks while still collapsing accidental double-spaces inside a sentence. Applies to the public site AND the editor (data-field is rendered in both). */ [data-field] { white-space: pre-line; } /* ── External link indicator ──────────────────────────────────────── */ /* Any gets a small ↗ glyph appended via CSS so the pseudo-element doesn't get caught by contenteditable in the editor. Suppressed on button-like CTAs where the icon would clash with the button shape — buttons still get target="_blank" set in the markup. */ a[data-external]::after { content: ' \2197'; /* north-east arrow */ display: inline-block; margin-left: 2px; font-size: 0.78em; vertical-align: super; opacity: 0.6; text-decoration: none; } a.btn-primary[data-external]::after, a.btn-outline[data-external]::after { content: none; } /* ── Scroll reveal (desktop only) ──────────────────────────────────── */ @media (hover: hover) { .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s, transform 0.7s; } .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } } @media (hover: none) { .reveal { opacity: 1; transform: none; } } /* ── Editor chrome — hidden by default ── These classes are emitted server-side by block render.php files (e.g. the "+ Add" button at the end of every list grid, the "× Close details" button inside exhibitions cards). The editor's stylesheet (editor.css) provides their visible styling in edit mode and is loaded LATER in the cascade, so its rules win for /edit.php. On the public site editor.css isn't loaded; without these defaults the buttons would render with browser-default