/* ============================================================ seemant.org — site.css All design tokens live here as CSS custom properties. Mirrors the Divi theme settings from et_divi (aa_options). ============================================================ */ /* ── Self-hosted fonts ────────────────────────────────────── */ /* Preload strategy (add in layout ): EVERY page: abeezee-400-n, nunito-sans-400-n, average-sans-400-n, open-sans-400-n HOMEPAGE only: share-tech-400-n, lora-400-n, oswald-400-n Archivo and Nunito (plain) appear only in Google Fonts @font-face declarations — never in actual font-family rules — so they are deliberately NOT self-hosted. */ /* ABeeZee — headings (preload every page) */ @font-face { font-family: 'ABeeZee'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/abeezee-400-n.woff2') format('woff2'); } @font-face { font-family: 'ABeeZee'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/abeezee-400-i.woff2') format('woff2'); } /* Nunito Sans — body (preload every page) */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/nunito-sans-300-n.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-400-n.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-400-i.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/nunito-sans-600-n.woff2') format('woff2'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/nunito-sans-700-n.woff2') format('woff2'); } /* Average Sans — primary navigation (preload every page) */ @font-face { font-family: 'Average Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/average-sans-400-n.woff2') format('woff2'); } /* Share Tech — hero decorative large text (preload homepage only) */ @font-face { font-family: 'Share Tech'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/share-tech-400-n.woff2') format('woff2'); } /* Open Sans — buttons, inline content (preload every page) */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/open-sans-300-n.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/open-sans-400-n.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/open-sans-400-i.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/open-sans-600-n.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/open-sans-700-n.woff2') format('woff2'); } /* Lora — story/blog serif body (preload homepage only; load on post pages) */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lora-400-n.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/lora-400-i.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/lora-500-n.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/lora-600-n.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/lora-600-i.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lora-700-n.woff2') format('woff2'); } /* Oswald — uppercase labels (preload homepage only) */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/oswald-300-n.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/oswald-400-n.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/oswald-500-n.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/oswald-600-n.woff2') format('woff2'); } /* ── Design tokens ────────────────────────────────────────── */ :root { /* Colors */ --color-accent: #0083e8; --color-accent-alt: #2ea3f2; --color-link: #2c8ae8; --color-link-hover: #1a6aba; --color-text: #161616; --color-heading: #1c1c1c; --color-bg: #ffffff; /* Header */ --color-header-bg: #ffffff; /* Footer */ --color-footer-bg: rgba(10, 10, 43, 0.94); --color-footer-text: #b2b2b2; --color-footer-heading: #ffffff; --color-footer-link: #b2b2b2; --color-footer-link-hover: #ffffff; --color-footer-bar-bg: rgba(0, 0, 0, 0.56); /* Buttons */ --color-btn-bg: #02489a; --color-btn-bg-hover: #3980f9; --color-btn-text: #ffffff; /* Font families */ --font-body: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif; --font-heading: 'ABeeZee', Helvetica, Arial, Lucida, sans-serif; --font-nav: 'Average Sans', Helvetica, Arial, Lucida, sans-serif; --font-hero: 'Share Tech', Helvetica, Arial, Lucida, sans-serif; --font-content: 'Open Sans', Helvetica, Arial, Lucida, sans-serif; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-label: 'Oswald', Helvetica, Arial, Lucida, sans-serif; /* Font sizes */ --font-size-base: 16px; --font-size-nav: 16px; --font-size-widget-header: 20px; --font-size-small: 14px; --font-size-btn: 15px; /* Line heights */ --line-height-base: 1.7em; --line-height-tight: 1.2em; --line-height-mid: 1.5em; /* Letter spacing */ --letter-spacing-nav: -1px; --letter-spacing-btn: 5px; --letter-spacing-label: 3px; /* Layout */ --header-height: 92px; --header-height-fixed: 40px; --content-max-width: 1080px; --content-width-pct: 80%; --row-padding: 2% 0; --section-padding: 54px 0; --footer-padding-top: 60px; /* Border radius */ --radius-btn: 100px; --radius-card: 4px; } /* ── Reset / base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background-color: var(--color-bg); } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-link); text-decoration: none; } a:hover { color: var(--color-link-hover); } /* ── Typography ───────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); line-height: var(--line-height-tight); margin-top: 0; margin-bottom: 0.5em; font-weight: 400; } p { margin-top: 0; margin-bottom: 1em; } /* ── Layout helpers ───────────────────────────────────────── */ .container { width: var(--content-width-pct); max-width: var(--content-max-width); margin-inline: auto; position: relative; } .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } /* ── Header ───────────────────────────────────────────────── */ #main-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: var(--color-header-bg); height: var(--header-height); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); transition: height 0.2s ease, box-shadow 0.2s ease; } #main-header.et-fixed-header { height: var(--header-height-fixed); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .et_menu_container { display: flex; align-items: center; height: 100%; } .logo_container { display: flex; align-items: center; flex-shrink: 0; } .logo_container a { display: flex; align-items: center; } #logo { height: var(--header-height); width: auto; max-height: 100%; transition: height 0.2s ease; } #main-header.et-fixed-header #logo { height: var(--header-height-fixed); } /* ── Primary navigation ───────────────────────────────────── */ #et-top-navigation { display: flex; align-items: center; margin-left: auto; height: 100%; } #top-menu-nav { height: 100%; } #top-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; height: 100%; } #top-menu > .menu-item > a { font-family: var(--font-nav); font-size: var(--font-size-nav); font-weight: 700; letter-spacing: var(--letter-spacing-nav); color: var(--color-text); padding: 0 18px; height: 100%; display: flex; align-items: center; transition: color 0.2s ease; } #top-menu > .menu-item > a:hover, #top-menu > .menu-item.current-menu-item > a { color: var(--color-accent); } /* Dropdown */ #top-menu .sub-menu { position: absolute; top: 100%; left: 0; list-style: none; margin: 0; padding: 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); min-width: 200px; z-index: 100; display: none; } #top-menu .menu-item-has-children { position: relative; } #top-menu .menu-item-has-children:hover > .sub-menu { display: block; } #top-menu .sub-menu .menu-item a { font-family: var(--font-nav); font-size: var(--font-size-small); font-weight: 700; letter-spacing: var(--letter-spacing-nav); color: var(--color-text); padding: 10px 20px; display: block; transition: color 0.2s ease, background 0.2s ease; } #top-menu .sub-menu .menu-item a:hover { color: var(--color-accent); background: #f5f5f5; } /* Search and mobile nav hidden per Divi custom CSS */ #et_top_search { display: none !important; } #et_mobile_nav_menu { display: none; } /* ── Page body offset for fixed header ────────────────────── */ #page-container { padding-top: var(--header-height); } /* ── Buttons ──────────────────────────────────────────────── */ .btn, .et_pb_button { display: inline-block; font-family: var(--font-content); font-size: var(--font-size-btn); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-btn); color: var(--color-btn-text); background-color: var(--color-btn-bg); border: none; border-radius: var(--radius-btn); padding: 16px 32px; cursor: pointer; transition: background-color 0.3s ease, border-radius 0.3s ease; text-decoration: none; } .btn:hover, .et_pb_button:hover { background-color: var(--color-btn-bg-hover); color: var(--color-btn-text); } /* ── Footer ───────────────────────────────────────────────── */ #main-footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); } .footer-widgets { padding: var(--footer-padding-top) 0 40px; } .footer-widgets h4 { font-family: var(--font-body); font-size: var(--font-size-widget-header); font-weight: 700; color: var(--color-footer-heading); text-transform: none; margin-bottom: 1em; letter-spacing: 0; } .footer-widgets p, .footer-widgets address { font-size: var(--font-size-base); line-height: var(--line-height-mid); color: var(--color-footer-text); font-style: normal; } .footer-widgets a { color: var(--color-footer-link); transition: color 0.2s ease; } .footer-widgets a:hover { color: var(--color-footer-link-hover); } /* Footer quick-nav menu */ #footer_menu .menu-item a, #footer_menu .menu-item { color: #fff !important; } /* Footer bottom bar */ .footer-bottom { background-color: var(--color-footer-bar-bg); padding: 14px 0; font-size: var(--font-size-small); color: var(--color-footer-text); } .footer-bottom a { color: var(--color-footer-text); } .footer-bottom .footer-social { display: flex; justify-content: flex-end; gap: 12px; list-style: none; margin: 0; padding: 0; } /* ── Mobile nav drawer ────────────────────────────────────── */ .mobile_menu_bar { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--color-text); padding: 8px; } .mobile-nav-drawer { background: #fff; border-top: 1px solid #eee; padding: 1rem 0; } .mobile-nav-drawer ul { list-style: none; margin: 0; padding: 0; } .mobile-nav-drawer li a { display: block; padding: 10px 5%; font-family: var(--font-nav); font-weight: 700; color: var(--color-text); border-bottom: 1px solid #f0f0f0; } .mobile-nav-drawer li ul { padding-left: 1.5rem; } /* ── Page hero banner ─────────────────────────────────────── */ .page-hero { position: relative; min-height: 300px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; } .page-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .page-hero-content { position: relative; z-index: 1; color: #fff; padding: 3rem 5%; } .page-hero-content h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 0.5rem; } .post-date { font-size: 0.9rem; opacity: 0.85; } /* ── Page content area ────────────────────────────────────── */ .page-content-wrap { padding: 60px 0 80px; } .page-body, .post-body { font-family: var(--font-content); font-size: 1rem; line-height: 1.8; color: #333; max-width: 860px; margin: 0 auto; } .page-body img, .post-body img { border-radius: var(--radius-card); margin: 1.5rem 0; max-width: 100%; } .page-body h2, .post-body h2 { font-size: 1.6rem; margin-top: 2rem; } .page-body h3, .post-body h3 { font-size: 1.3rem; margin-top: 1.5rem; } /* ── Blog grid ────────────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .blog-card { border: 1px solid #e8e8e8; border-radius: var(--radius-card); overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: box-shadow 0.2s; } .blog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); } .blog-card-img-link img { width: 100%; height: 200px; object-fit: cover; display: block; margin: 0; } .blog-card-body { padding: 1.2rem; } .blog-card-title { font-size: 1.1rem; margin-bottom: 0.5rem; } .blog-card-title a { color: var(--color-heading); } .blog-card-title a:hover { color: var(--color-accent); } .blog-card-date { display: block; font-size: 0.82rem; color: #888; margin-bottom: 0.5rem; } .post-categories { margin-bottom: 1.5rem; } .cat-badge { display: inline-block; background: var(--color-accent); color: #fff; font-size: 0.78rem; padding: 3px 10px; border-radius: 100px; margin-right: 6px; } .post-nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #eee; } .btn--small { font-size: 12px; padding: 10px 20px; letter-spacing: 3px; } .btn--outline { background: transparent; border: 2px solid var(--color-btn-bg); color: var(--color-btn-bg); } .btn--outline:hover { background: var(--color-btn-bg); color: #fff; } /* ── Contact form ─────────────────────────────────────────── */ .contact-form { max-width: 620px; margin: 2rem 0; } .form-group { margin-bottom: 1.4rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.92rem; } .form-group input, .form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid #ccc; border-radius: 4px; font-family: var(--font-content); font-size: 1rem; transition: border-color 0.2s; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); } .form-success { background: #e6f4ea; border: 1px solid #4caf50; border-radius: 4px; padding: 1rem 1.2rem; color: #2e7d32; margin-bottom: 1.5rem; } .form-error { background: #fdecea; border: 1px solid #f44336; border-radius: 4px; padding: 1rem 1.2rem; color: #c62828; margin-bottom: 1.5rem; } /* ── Footer nav list ──────────────────────────────────────── */ #footer_menu ul { list-style: none; margin: 0; padding: 0; } #footer_menu ul li { margin-bottom: 0.5em; } #footer_menu ul li a { color: var(--color-footer-link); } #footer_menu ul li a:hover { color: var(--color-footer-link-hover); } /* ── Footer grid ──────────────────────────────────────────── */ .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } /* ── Hero slider ──────────────────────────────────────────── */ .hero-slider { position: relative; width: 100%; height: 70vh; min-height: 400px; max-height: 700px; overflow: hidden; background: #000; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.8s ease; } .hero-slide.active { opacity: 1; } .hero-prev, .hero-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0,0,0,0.3); border: none; color: rgba(255,255,255,0.85); font-size: 1.6rem; padding: 12px 18px; cursor: pointer; border-radius: 2px; transition: background 0.2s; } .hero-prev:hover, .hero-next:hover { background: rgba(0,0,0,0.6); } .hero-prev { left: 15px; } .hero-next { right: 15px; } .hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); background: transparent; cursor: pointer; padding: 0; transition: background 0.2s; } .hero-dots button[aria-selected="true"] { background: #fff; } /* ── Home sections ────────────────────────────────────────── */ .home-section { padding: 70px 0; } .home-section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1.2rem; } .section-eyebrow { font-family: var(--font-label); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 3px; color: var(--color-accent); margin-bottom: 0.5rem; font-weight: 600; } /* About section */ .home-about { background: #fff; } .home-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .home-about-image img { border-radius: var(--radius-card); width: 100%; } /* Vision section */ .home-vision { background: #0a0a2b; color: #ddd; } .home-vision h2, .home-vision h3, .home-vision p { color: #ddd; } .home-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .home-vision-image img { border-radius: var(--radius-card); width: 100%; } .vision-label { font-family: var(--font-label); font-size: 1.2rem; color: #fff; letter-spacing: 3px; font-weight: 500; text-transform: uppercase; margin-bottom: 0.5rem; } .vision-divider { border: none; border-top: 3px solid rgba(255,255,255,0.2); margin: 1.5rem 0; } /* Focus areas */ .home-focus { background: #f9f9f9; } .focus-subtitle { font-size: 1rem; color: #555; max-width: 700px; margin-bottom: 2.5rem; } .focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .focus-item { text-align: center; padding: 1.5rem; background: #fff; border-radius: var(--radius-card); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .focus-icon { width: 50px; height: 50px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; } .focus-icon img { max-width: 100%; } .focus-item h4 { font-size: 1rem; margin-bottom: 0; } /* Ponds section */ .home-ponds { background: #fff; } .home-ponds-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: center; } .home-ponds-image img { border-radius: 50%; width: 100%; max-width: 340px; aspect-ratio: 1; object-fit: cover; } .home-ponds-text h3 { font-size: 1.6rem; font-weight: 600; color: #000; margin-bottom: 1rem; } /* Programmes */ .home-programmes { background: linear-gradient(135deg, #051937 0%, #0a3060 100%); color: #fff; } .home-programmes h2 { color: #fff; } .programmes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; } .programme-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-card); padding: 2rem; text-align: center; } .programme-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1.5rem; } /* Impact counters */ .home-impact { background: #f5f5f5; } .impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; } .impact-item { text-align: center; padding: 2rem; background: #fff; border-radius: var(--radius-card); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .impact-number { font-family: var(--font-label); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; color: var(--color-accent); line-height: 1; margin-bottom: 0.5rem; } .impact-label { font-size: 0.9rem; color: #555; line-height: 1.4; } /* Founder section */ .home-founder { background: #fff; border-top: 1px solid #eee; } .founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .founder-text h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--color-accent); margin-bottom: 0.5rem; } .founder-image { position: relative; } .founder-image img { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: 4px; } .founder-image::before { content: ''; position: absolute; top: 1.5rem; right: -1.5rem; bottom: -1.5rem; left: 1.5rem; background: #d8d8d8; z-index: 0; border-radius: 4px; } /* Stories section */ .home-stories { background: #f9f9f9; } .stories-carousel { position: relative; overflow: hidden; margin-top: 2rem; border-radius: var(--radius-card); } .stories-track { display: flex; transition: transform 0.45s ease; } .story-card { min-width: 100%; flex-shrink: 0; background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.07); display: flex; flex-direction: row; } .story-card > a:first-child { display: block; flex: 0 0 40%; max-width: 400px; } .story-card img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; margin: 0; } .story-card-body { padding: 2rem; flex: 1; display: flex; flex-direction: column; justify-content: center; } .story-card-body h3 { font-size: 1.2rem; margin-bottom: 0.75rem; } .story-card-body h3 a { color: var(--color-heading); } .story-card-body h3 a:hover { color: var(--color-accent); } .story-card-body p { margin-bottom: 1rem; } .stories-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; } .stories-prev, .stories-next { background: var(--color-accent); color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; } .stories-prev:hover, .stories-next:hover { background: var(--color-primary); } .stories-dots { display: flex; gap: 0.5rem; } .stories-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: #ccc; padding: 0; cursor: pointer; transition: background 0.2s; } .stories-dots button.active { background: var(--color-accent); } /* Partners */ .home-partners { background: #fff; overflow: hidden; } .partners-ticker-wrap { overflow: hidden; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .partners-ticker { display: flex; gap: 3rem; align-items: center; width: max-content; animation: ticker 30s linear infinite; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .partner-logo img { height: 60px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(40%); opacity: 0.8; transition: filter 0.2s, opacity 0.2s; margin: 0; } .partner-logo img:hover { filter: grayscale(0); opacity: 1; } /* ── Utility ──────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 980px) { :root { --header-height: 66px; } #et-top-navigation #top-menu-nav { display: none; } #et_mobile_nav_menu { display: block; margin-left: auto; } .container { width: 92%; } .home-about-grid, .home-vision-grid, .home-ponds-grid, .founder-grid { grid-template-columns: 1fr; gap: 2rem; } .home-vision-image { order: 1; } .home-vision-text { order: 0; } .focus-grid { grid-template-columns: repeat(2, 1fr); } .programmes-grid { grid-template-columns: 1fr; } .impact-grid { grid-template-columns: repeat(2, 1fr); } .story-card { flex-direction: column; } .story-card > a:first-child { flex: none; max-width: none; } .story-card img { min-height: 200px; height: 200px; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-slider { height: 50vw; min-height: 250px; } .hero-prev, .hero-next { font-size: 1.1rem; padding: 8px 12px; } } @media (max-width: 480px) { :root { --font-size-base: 15px; } .focus-grid { grid-template-columns: 1fr; } .impact-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } }