/* ========================================================================== OECS Regional Eye Health Strategy Project — Shared Stylesheet -------------------------------------------------------------------------- This ONE file controls the look of every page on the site. Edit the colour or font values in the ":root" section below and the change will apply everywhere automatically. ========================================================================== */ /* ----- Brand fonts ----- */ /* The site is set to use TRENDA. Trenda is a paid font, so the free look-alike "Poppins" (loaded from Google Fonts in each page's ) is used automatically until you install Trenda. HOW TO ACTIVATE TRENDA (if you have a license): 1. Create a folder called "fonts" next to the css folder. 2. Copy your licensed Trenda .woff2 files into it. 3. Remove the comment marks around the three blocks below and make sure the file names match yours. That's it — the whole site switches to Trenda automatically. @font-face { font-family: "Trenda"; src: url("../fonts/Trenda-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Trenda"; src: url("../fonts/Trenda-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Trenda"; src: url("../fonts/Trenda-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } */ /* ----- Brand colours & design tokens ----- */ :root { /* Your brand colours */ --navy: #192851; /* headings, footer, primary text accents */ --blue: #649cd3; /* links, buttons, highlights */ --gold: #fec357; /* small accents, underlines, callouts */ --grey: #c1c5ca; /* borders, dividers */ /* Supporting tints (light versions of brand colours for backgrounds) */ --blue-tint: #eef5fc; --gold-tint: #fff7e8; --ink: #23304d; /* main body text — softer than pure black */ --ink-light: #5a6579; /* secondary text */ --white: #ffffff; /* Type */ --font-display: "Trenda", "Poppins", "Segoe UI", Arial, sans-serif; --font-body: "Trenda", "Poppins", "Segoe UI", Arial, sans-serif; /* Layout */ --max-width: 1120px; --radius: 14px; --shadow: 0 6px 24px rgba(25, 40, 81, 0.10); --shadow-hover: 0 12px 32px rgba(25, 40, 81, 0.16); } /* ----- Reset & base ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; /* 17px — comfortable reading size */ line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* ----- Headings ----- */ h1, h2, h3 { font-family: var(--font-display); color: var(--navy); line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); font-weight: 600; } h3 { font-size: 1.25rem; font-weight: 600; } p { margin: 0 0 1.1em; } /* ----- Links ----- */ a { color: #6f9ad3; text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--navy); } /* Visible keyboard focus ring — important for accessibility */ a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ----- Skip link (hidden until focused with the keyboard) ----- */ .skip-link { position: absolute; left: -9999px; background: var(--navy); color: var(--white); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0; z-index: 100; } .skip-link:focus { left: 0; top: 0; } /* ========================================================================== HEADER & NAVIGATION ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--grey); } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Site name / logo area */ .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--navy); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; } .brand:hover { color: var(--navy); } .brand-mark { flex-shrink: 0; } .brand span small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; color: var(--ink-light); letter-spacing: 0.04em; text-transform: uppercase; } /* Navigation links */ .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; } .site-nav a { display: block; padding: 0.55rem 0.9rem; border-radius: 999px; text-decoration: none; color: var(--navy); font-weight: 500; font-size: 0.95rem; } .site-nav a:hover { background: var(--blue-tint); } /* Highlights the page you're currently on */ .site-nav a[aria-current="page"] { background: var(--navy); color: var(--white); } /* Mobile menu button (hidden on desktop) */ .nav-toggle { display: none; background: none; border: 2px solid var(--navy); border-radius: 10px; padding: 0.45rem 0.8rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--navy); cursor: pointer; } /* ========================================================================== PAGE LAYOUT HELPERS ========================================================================== */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } .section { padding: 4rem 0; } .section--tint { background: var(--blue-tint); } /* Small coloured label above headings (an "eyebrow") */ .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3d7bb8; margin-bottom: 0.75rem; } /* Gold underline flourish used beneath key headings */ .underline-accent { display: block; width: 64px; height: 5px; border-radius: 999px; background: var(--gold); margin-top: 0.75rem; } .lead { font-size: 1.2rem; color: var(--ink-light); max-width: 46em; } /* ========================================================================== HOME PAGE HERO ========================================================================== */ .hero { position: relative; color: var(--white); overflow: hidden; } .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Navy overlay so white text stays readable on the photo */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 40, 81, 0.55) 0%, rgba(25, 40, 81, 0.75) 100%); z-index: 1; } .hero-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: 7rem 1.25rem 8rem; text-align: center; } .hero h1 { color: var(--white); max-width: 20em; margin-inline: auto; } .hero .tagline { font-size: clamp(1.1rem, 2.5vw, 1.35rem); color: #eaf2fb; max-width: 44em; margin: 1rem auto 2rem; } .hero .eyebrow { color: var(--gold); } /* Buttons */ .btn { display: inline-block; padding: 0.85rem 1.75rem; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--gold); color: var(--navy); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .btn-primary:hover { color: var(--navy); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); } .btn-ghost { background: rgba(255, 255, 255, 0.14); color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.7); } .btn-ghost:hover { color: var(--white); background: rgba(255, 255, 255, 0.24); } .hero-buttons { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; } /* Decorative concentric "iris" rings — the site's signature motif */ .iris { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); z-index: 1; pointer-events: none; } .iris--1 { width: 420px; height: 420px; right: -120px; top: -120px; } .iris--2 { width: 620px; height: 620px; right: -220px; top: -220px; } .iris--3 { width: 300px; height: 300px; left: -110px; bottom: -140px; border-color: rgba(254, 195, 87, 0.35); } /* ========================================================================== CARD GRID (home page navigation cards) ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .nav-card { display: flex; flex-direction: column; gap: 0.6rem; background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); padding: 1.75rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .nav-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--blue); color: var(--ink); } .nav-card h3 { margin: 0; } .nav-card .card-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--blue-tint); display: grid; place-items: center; margin-bottom: 0.4rem; } .nav-card .card-link { margin-top: auto; font-weight: 600; color: #6f9ad3; } .nav-card:hover .card-link { color: var(--navy); } /* ========================================================================== TWO-COLUMN "FEATURE" LAYOUT (image + text) ========================================================================== */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .feature img { border-radius: var(--radius); box-shadow: var(--shadow); } /* ========================================================================== PHOTO GRID (About page) ========================================================================== */ .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2rem; } .photo-grid figure { margin: 0; } .photo-grid img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .photo-grid figcaption { font-size: 0.9rem; color: var(--ink-light); margin-top: 0.5rem; } /* ========================================================================== PARTNER CARDS (About page) ========================================================================== */ .partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .partner-card { background: var(--white); border: 1px solid var(--grey); border-left: 6px solid var(--blue); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--shadow); } .partner-card h3 { font-size: 1.1rem; } .partner-card p { font-size: 0.95rem; color: var(--ink-light); margin-bottom: 0.9rem; } .partner-card a { font-weight: 600; } /* ========================================================================== REUSABLE COMPONENT 1: Power BI dashboard embed -------------------------------------------------------------------------- To add a dashboard: copy a whole
block in explore.html and paste your Power BI embed URL into the iframe's src. ========================================================================== */ .dashboard-embed { background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 2.5rem; } .dashboard-embed .dashboard-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--grey); background: var(--blue-tint); } .dashboard-embed h3 { margin: 0 0 0.2rem; } .dashboard-embed .dashboard-header p { margin: 0; font-size: 0.95rem; color: var(--ink-light); } /* Keeps the iframe at a 16:9 shape on every screen size */ .dashboard-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #f4f6f9; } .dashboard-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Placeholder shown before real dashboards are added */ .dashboard-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ink-light); padding: 2rem; } /* ========================================================================== REUSABLE COMPONENT 2: Resource / download card -------------------------------------------------------------------------- To add a PDF: copy a whole
  • block in insights.html, update the title, description, file link and file size. ========================================================================== */ .resource-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .resource-card { display: flex; gap: 1.1rem; background: var(--white); border: 1px solid var(--grey); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; } .resource-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .resource-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; background: var(--gold-tint); display: grid; place-items: center; } .resource-card h3 { font-size: 1.05rem; margin-bottom: 0.25rem; } .resource-card p { font-size: 0.93rem; color: var(--ink-light); margin-bottom: 0.7rem; } .resource-meta { font-size: 0.8rem; color: var(--ink-light); display: block; margin-top: 0.4rem; } .resource-card .download-link { font-weight: 600; } /* "Coming soon" note styling */ .notice { background: var(--gold-tint); border: 1px solid #f3d79a; border-radius: var(--radius); padding: 1.1rem 1.4rem; font-size: 0.98rem; color: #6b5628; margin-top: 2rem; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background: var(--navy); color: #cfd8ea; margin-top: 4rem; padding: 3rem 0 2rem; font-size: 0.95rem; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; } .site-footer h2 { color: var(--white); font-size: 1.05rem; margin-bottom: 0.8rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 0.5rem; } .site-footer a { color: #aec6e8; } .site-footer a:hover { color: var(--white); } .footer-bottom { max-width: var(--max-width); margin: 2.5rem auto 0; padding: 1.25rem 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.85rem; color: #93a5c8; } /* ========================================================================== GENTLE ANIMATIONS -------------------------------------------------------------------------- Elements with class "reveal" fade up as they scroll into view. The JavaScript in js/main.js adds the "visible" class when appropriate. ========================================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Respect visitors who turn animations off in their device settings */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .btn, .nav-card, .resource-card { transition: none; } } /* ========================================================================== RESPONSIVE ADJUSTMENTS — tablet and mobile ========================================================================== */ @media (max-width: 900px) { .card-grid, .partner-grid { grid-template-columns: 1fr 1fr; } .feature { grid-template-columns: 1fr; gap: 2rem; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .section { padding: 3rem 0; } .hero-inner { padding: 4.5rem 1.25rem 5.5rem; } .card-grid, .partner-grid, .photo-grid, .resource-list, .footer-inner { grid-template-columns: 1fr; } /* Mobile menu: nav collapses behind a Menu button */ .nav-toggle { display: inline-block; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--grey); box-shadow: var(--shadow); padding: 0.75rem 1.25rem 1.25rem; } .site-nav.open { display: block; } .site-nav ul { flex-direction: column; gap: 0.25rem; } .site-nav a { padding: 0.8rem 1rem; border-radius: 10px; } }