/* Theme Name: LSE Hellenic Conference 2027 Theme URI: https://lsehellenicconference.com Author: LSE Hellenic Conference Author URI: https://lsehellenicconference.com Description: Institutional block theme for the LSE Hellenic Conference 2027. Carries the conference design system: eight colour tokens, Playfair Display and Inter self-hosted, hairline rules and kicker labels, with a dark mode that does not flash on load. Requires at least: 6.6 Tested up to: 6.8 Requires PHP: 8.1 Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: lse-hellenic-2027 Tags: block-theme, full-site-editing, accessibility-ready, custom-colors, custom-menu, editor-style */ /* ========================================================================== Design tokens Light is the default. Dark is applied two ways: automatically from the operating system, and manually via data-theme on (set before paint by the inline script in functions.php, so there is no flash). ========================================================================== */ :root { --navy: #0a2342; --hellenic: #1b4fa0; --accent-blue: #2e86c1; --metal: #b08d57; --page: #f7f9fc; --ink: #1a1a1a; --ink-2: #4a5568; --hairline: #d4dce7; /* Semantic roles. These are what components use, so a theme switch only has to move these, never the eight brand tokens above. */ --heading: var(--navy); --band: var(--navy); --surface: #ffffff; --btn: var(--hellenic); --btn-hover: #173f80; --field-bg: #ffffff; --accent: var(--accent-blue); --shell: 1180px; --rule: 1px solid var(--hairline); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page: #0a1524; --ink: #e8eef7; --ink-2: #a3b4c9; --hairline: #22334a; --heading: #f4f8fd; --band: #081c33; --surface: #0f2136; --btn: #2f6fbf; --btn-hover: #3b82d4; --field-bg: #0f2136; --hellenic: #8bb8ee; --accent-blue: #6fb0e2; --metal: #c9a468; color-scheme: dark; } } :root[data-theme="dark"] { --page: #0a1524; --ink: #e8eef7; --ink-2: #a3b4c9; --hairline: #22334a; --heading: #f4f8fd; --band: #081c33; --surface: #0f2136; --btn: #2f6fbf; --btn-hover: #3b82d4; --field-bg: #0f2136; --hellenic: #8bb8ee; --accent-blue: #6fb0e2; --metal: #c9a468; color-scheme: dark; } /* ========================================================================== Base ========================================================================== */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--page); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; margin: 0; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .serif { font-family: "Playfair Display", Georgia, "Times New Roman", serif; color: var(--heading); font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; } h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } h3 { font-size: 1.3rem; } a { color: var(--hellenic); text-underline-offset: 3px; } a:hover { color: var(--accent-blue); } /* ========================================================================== Layout primitives: shell, hairline rules, kicker labels ========================================================================== */ .shell, .wp-block-group.alignwide, .is-layout-constrained > .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; } .rule-top { border-top: var(--rule); } .rule-bottom { border-bottom: var(--rule); } .kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; } /* Banded sections stay navy in both themes. */ .band { background: var(--band); color: #ffffff; } .band h1, .band h2, .band h3 { color: #ffffff; } .band .kicker { color: var(--accent-blue); } .stat-numeral { font-family: "Playfair Display", Georgia, serif; color: var(--metal); line-height: 1; } /* ========================================================================== Buttons ========================================================================== */ .wp-block-button__link, .btn { display: inline-block; font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; padding: 13px 26px; border-radius: 2px; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .wp-block-button__link, .btn-primary { background: var(--btn); color: #ffffff; } .wp-block-button__link:hover, .btn-primary:hover { background: var(--btn-hover); color: #ffffff; } .btn-outline { background: transparent; color: var(--heading); border: 1px solid var(--hairline); } .btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); } /* ========================================================================== Header, navigation, theme toggle ========================================================================== */ .site-header { background: var(--surface); border-bottom: var(--rule); position: relative; z-index: 20; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; } .site-title { font-family: "Playfair Display", Georgia, serif; font-size: 19px; margin: 0; } .site-title a { color: var(--heading); text-decoration: none; } .site-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .site-nav a { color: var(--ink); font-size: 15px; text-decoration: none; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--hellenic); } .theme-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--hairline); border-radius: 2px; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 13px; padding: 7px 12px; } .theme-toggle:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } @media (max-width: 900px) { .site-header__inner { flex-wrap: wrap; } .site-nav ul { flex-wrap: wrap; gap: 14px; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--band); color: rgba(255, 255, 255, 0.78); font-size: 14px; margin-top: 64px; } .site-footer a { color: #ffffff; } .site-footer .kicker { color: var(--accent-blue); } /* ========================================================================== Forms and cards ========================================================================== */ input[type="text"], input[type="email"], input[type="search"], textarea, select { background: var(--field-bg); border: 1px solid var(--hairline); border-radius: 2px; color: var(--ink); font: inherit; font-size: 15px; padding: 11px 13px; width: 100%; } input:focus, textarea:focus, select:focus { border-color: var(--accent-blue); outline: 2px solid transparent; box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.18); } .card-grid { display: grid; gap: 32px 40px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .person-card__photo { aspect-ratio: 1 / 1; border-radius: 2px; object-fit: cover; width: 100%; } .person-card__name { color: var(--heading); font-family: "Playfair Display", Georgia, serif; font-size: 18px; margin: 14px 0 2px; } .person-card__title { color: var(--ink-2); font-size: 14px; margin: 0; } /* Accessibility */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; word-wrap: normal !important; } :where(a, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Statistics band, matching the original site. */ .band { background: var(--band); color: #ffffff; } .band .kicker { color: var(--accent-blue); } .band p, .band .stat-label { color: rgba(255, 255, 255, 0.85); } .band em { color: rgba(255, 255, 255, 0.7); } .stat-grid { display: grid; gap: 40px; margin-top: 32px; } @media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } } .stat-numeral { font-family: "Playfair Display", Georgia, "Times New Roman", serif; color: var(--metal); font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; margin: 0; } .stat-label { margin: 12px 0 0; font-size: 15px; } /* Brand mark: the conference name, with 2027 beneath it in metal, as the original renders it. */ .brand { display: flex; flex-direction: column; line-height: 1; } .brand .wp-block-site-title, .brand__name { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 600; line-height: 1; margin: 0; } .brand .wp-block-site-title a, .brand__name a { color: var(--heading); text-decoration: none; } .brand__year { margin: 2px 0 0; color: var(--metal); }