diff --git a/css/main.css b/css/main.css index 949bfff7..8eeaacd6 100644 --- a/css/main.css +++ b/css/main.css @@ -43,6 +43,7 @@ @import 'pages/_hub.css'; @import 'pages/_legal.css'; @import 'pages/_gallery.css'; +@import 'pages/_press.css'; /* Loaded last so the shared filter bar wins over per-page chip styles. */ @import 'pages/_filterbar.css'; \ No newline at end of file diff --git a/css/pages/_press.css b/css/pages/_press.css new file mode 100644 index 00000000..e53cabc0 --- /dev/null +++ b/css/pages/_press.css @@ -0,0 +1,143 @@ +/* ========================================================================== + Press / media page + Reuses the FAQ hero (.faq-page/.faq-hero/.faq-lead) and the shared design + tokens: ink #101828, muted #475467, hairline #EAECF0, teal accent #2D738C. + ========================================================================== */ +.press-page .faq-body { + max-width: 960px; + display: block; +} + +/* Two-up intro cards: enquiries + fact sheet */ +.press-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; + margin-bottom: 48px; +} +.press-card { + border: 1px solid #EAECF0; + border-radius: 12px; + background: #FFFFFF; + padding: 28px; + transition: box-shadow 0.2s ease, border-color 0.2s ease; +} +.press-card:hover { + border-color: #D0DEE3; + box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06); +} +.press-card h2 { font-size: 20px; color: #101828; margin: 0 0 10px; } +.press-card > p { color: #475467; font-size: 15px; line-height: 26px; margin: 0 0 20px; } + +/* Fact sheet */ +.press-facts { list-style: none; margin: 0; padding: 0; } +.press-facts li { + display: flex; + gap: 12px; + padding: 12px 0; + border-bottom: 1px solid #EAECF0; + font-size: 15px; + line-height: 22px; +} +.press-facts li:last-child { border-bottom: 0; padding-bottom: 0; } +.press-facts .k { flex: 0 0 42%; color: #475467; font-weight: 600; } +.press-facts .v { flex: 1; color: #101828; } +.press-facts a, .press-logos a, .press-note a { + color: #2D738C; font-weight: 600; text-decoration: none; +} +.press-facts a:hover, .press-logos a:hover, .press-note a:hover { text-decoration: underline; } + +/* Logo download grid (inside the enquiries card) */ +.press-logos { margin: 24px 0 0; border-top: 1px solid #EAECF0; padding-top: 20px; } +.press-logos h3 { font-size: 14px; color: #475467; margin: 0 0 12px; font-weight: 600; } +.logo-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; +} +.logo-swatch { + display: flex; + flex-direction: column; + gap: 8px; + text-decoration: none; + border: 1px solid #EAECF0; + border-radius: 10px; + padding: 12px; + transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; +} +.logo-swatch:hover { + border-color: #D0DEE3; + box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06); + transform: translateY(-1px); +} +.logo-shot { + display: flex; + align-items: center; + justify-content: center; + height: 46px; + border-radius: 6px; + background: #F5FAFB; +} +.logo-shot img { max-height: 26px; width: auto; } +.logo-swatch--dark .logo-shot { background: #101828; } +.logo-cap { font-size: 12px; color: #475467; font-weight: 600; text-align: center; } + +/* Section heading, matched to .faq-cat h2 */ +.press-h { + font-size: 22px; + color: #101828; + margin: 0 0 8px; + padding-bottom: 10px; + border-bottom: 1px solid #EAECF0; +} +.press-web-intro { color: #475467; font-size: 15px; line-height: 24px; margin: 0 0 24px; } +.press-group-h { font-size: 15px; font-weight: 700; color: #2D738C; letter-spacing: 0.02em; margin: 24px 0 12px; } + +/* Coverage list */ +.press-list { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 12px; } +.press-list li { + border: 1px solid #EAECF0; + border-radius: 12px; + background: #FFFFFF; + padding: 18px 20px; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 12px; + transition: box-shadow 0.2s ease, border-color 0.2s ease; +} +.press-list li:hover { + border-color: #D0DEE3; + box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06); +} +.press-list a.title { font-weight: 600; font-size: 16px; color: #101828; text-decoration: none; } +.press-list a.title:hover { color: #2D738C; } +.press-badge { + font-size: 12px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: #2D738C; + background: #EAF3F5; + border-radius: 999px; + padding: 4px 10px; +} +.press-list .host { color: #98A2B3; font-size: 13px; } +.press-list .desc { flex-basis: 100%; margin: 6px 0 0; color: #475467; font-size: 14px; line-height: 22px; } + +/* Closing note, matched to .faq-contact panel */ +.press-note { + background: #F5FAFB; + border: 1px solid #EAECF0; + border-radius: 16px; + padding: 24px; + color: #475467; + font-size: 15px; + line-height: 26px; +} + +@media (max-width: 768px) { + .press-grid { grid-template-columns: 1fr; gap: 16px; } + .press-card { padding: 22px; } + .press-facts .k { flex-basis: 48%; } +} diff --git a/en/about-us/index.html b/en/about-us/index.html index 97d2f4a5..87d41f36 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -436,6 +436,7 @@

Organisation

About us Timeline and milestones + Press & media Contact us