/* ════════════════════════════════════════════════════════════════════ FG-CMS — 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. When a per-site theme feature ships, only the :root values change — blocks adapt for free. ════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces — cream-on-near-black with taupe accents (Farmanigroup palette, derived from the six hexagons in the FG logo). */ --color-bg: #ffffff; /* page background */ --color-surface: #f9f6f3; /* cream wash: pullquotes, callout panels */ --color-dark-bg: #1a1714; /* warm near-black dark sections */ --color-on-dark: #f9f6f3; /* text on dark surfaces */ /* Foreground / ink */ --color-fg: #1a1714; /* primary body + headlines */ --color-fg-muted: #3f3c35; /* secondary body text */ --color-muted: #8a827c; /* labels, footers, eyebrows */ /* Taupe accent ladder — primary first, then lightening through the logo hexagons. Use --color-accent for CTAs and emphasis; the lighter rungs are for backgrounds, badges, dividers, decorative fills. */ --color-accent: #625B58; /* primary taupe (CTAs, emphasis) */ --color-accent-soft: #867773; /* button hover + italic title accents */ --color-accent-3: #A18884; --color-accent-4: #B29D98; --color-accent-5: #C4B3AE; --color-accent-6: #D7CBC6; /* lightest taupe — decorative only */ /* Borders */ --color-border: #e5e0dc; /* hairline */ --color-border-soft: #C4B3AE; /* softer taupe divider */ /* Typography — system fonts only; no Google Fonts loader. */ --font-display: Georgia, 'Times New Roman', serif; --font-body: Georgia, 'Times New Roman', serif; --font-eyebrow: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Spacing — used by sections and grids. */ --space-section-y: 80px; --space-section-x: 72px; } /* ── 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: 300; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } /* ── Inline links added via the editor's rich-text toolbar ── sanitize_inline_html() stamps class="cms-inline-link" on every it emits. Reset browser + parent styling on those so the visual underline comes from the the toolbar wraps them in — the U button can then toggle underline on/off cleanly. Block-authored links (CTAs, nav, footer, brand cards) carry their own class and aren't affected by this rule. */ a.cms-inline-link { color: inherit; font-weight: inherit; text-decoration: none; cursor: pointer; } a.cms-inline-link:hover { opacity: 0.7; } /* ── 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; } .nav-logo img { height: 36px; display: block; } .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; } /* Hamburger toggle: hidden on desktop, surfaces in the ≤900px breakpoint below. Three stacked bars; rotates into an X when nav.is-open. */ .nav-hamburger { display: none; width: 36px; height: 36px; padding: 0; background: none; border: none; cursor: pointer; position: relative; } .nav-hamburger span { position: absolute; left: 7px; right: 7px; height: 1.5px; background: var(--color-fg, #1a1714); transition: transform 0.2s, opacity 0.2s, top 0.2s; } .nav-hamburger span:nth-child(1) { top: 11px; } .nav-hamburger span:nth-child(2) { top: 17px; } .nav-hamburger span:nth-child(3) { top: 23px; } nav.site-nav.is-open .nav-hamburger span:nth-child(1) { top: 17px; transform: rotate(45deg); } nav.site-nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; } nav.site-nav.is-open .nav-hamburger span:nth-child(3) { top: 17px; transform: rotate(-45deg); } /* Language switcher (visible only when AVAILABLE_LANGS has > 1 entry) */ .lang-switcher { position: relative; } .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: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 20px; } .section-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); font-weight: 300; line-height: 1.05; margin-bottom: 48px; } .section-title em { font-style: italic; color: var(--color-accent-soft); } .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