/* ========================================================================== JYO — shared house style Used by every page (homepage now; Life Sciences and Health later). Colour and type below follow the JYO Corporate Visual Identity One-Pager v3 (confirmed corporate palette + typography). This is the source of truth — edit values here to change the whole site at once, but do not introduce colours outside the approved system. JYO Health intentionally does not yet use the approved Indian Bride palette here — that is reserved for the Health page itself (Step 5). On this parent homepage, Health stays within the shared neutral system until that page is built. ========================================================================== */ :root { /* Core corporate palette — confirmed, Visual Identity One-Pager v3 */ --deep-indigo: #272466; /* primary / authority */ --midnight-indigo: #17163d; /* depth / dark fields */ --champagne-gold: #c9a46a; /* premium accent — used sparingly, decorative only */ --mineral-blue: #657c9b; /* science / technology — Life Sciences accent */ --soft-stone: #d9d7d2; /* neutral structure — larger fills only */ --warm-ivory: #faf8f4; /* primary background */ --coral: #ff887a; /* Indian Bride "Energy / Vitality" — Health accent, used only in the network motif for now */ /* Working tokens derived from the palette above */ --ink: var(--midnight-indigo); --ink-soft: #45445e; /* secondary text — meets AA on warm ivory */ --paper: var(--warm-ivory); --line: #b3aea0; /* visible hairline, drawn from soft stone */ --line-faint: var(--soft-stone); --ls-primary: var(--deep-indigo); --health-primary: var(--ink); /* neutral until Indian Bride palette is applied at Step 5 */ /* Type — Visual Identity One-Pager v3 */ --font-display: "DM Serif Display", Georgia, "Times New Roman", serif; --font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Spacing scale */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --container-width: 1180px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; /* Sticky-footer pattern: the box is always at least viewport-tall by default even when a page (e.g. the short /health/ placeholder) has little content, which otherwise strands the footer mid-screen with a large empty gap below it. Making body a column flex container with main allowed to grow keeps the footer anchored to the bottom of the viewport instead. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; color: var(--ink); } p { margin: 0; } /* Respect reduced-motion preferences throughout the site */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible { outline: 2px solid var(--deep-indigo); outline-offset: 3px; border-radius: 2px; } /* ---------- layout helpers ---------- */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-3); } .skip-link { position: absolute; left: -999px; top: auto; background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 0 0 6px 0; z-index: 100; font-size: 0.9rem; } .skip-link:focus { left: 0; top: 0; } /* ---------- site header ---------- */ .site-header { border-bottom: 1px solid var(--line-faint); } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); } .wordmark { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.12em; color: var(--ink); } .wordmark img { width: 20px; height: auto; } /* ---------- navigation: single hamburger menu, all breakpoints ---------- */ .site-nav { position: relative; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-toggle-bar { display: block; width: 22px; height: 1.5px; background: var(--deep-indigo); border-radius: 1px; } .nav-toggle:hover .nav-toggle-bar, .nav-toggle:focus-visible .nav-toggle-bar { opacity: 0.7; } .nav-toggle:focus-visible { outline: 2px solid var(--deep-indigo); outline-offset: 3px; border-radius: 2px; } .nav-panel { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: var(--paper); border: 1px solid var(--line-faint); border-radius: 4px; box-shadow: 0 10px 30px rgba(23, 22, 61, 0.1); padding: var(--space-2); z-index: 60; opacity: 0; transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease; } .nav-panel.is-open { opacity: 1; transform: translateY(0); } .nav-panel ul { display: flex; flex-direction: column; } .nav-panel li + li { border-top: 1px solid var(--line-faint); } .nav-panel a { display: block; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 0.75em 0.35em; transition: color 0.15s ease; } .nav-panel a:hover, .nav-panel a:focus-visible { color: var(--deep-indigo); } /* ---------- hero ---------- */ .hero { padding-top: var(--space-5); padding-bottom: var(--space-4); text-align: center; } @media (max-width: 720px) { .hero { padding-top: var(--space-3); padding-bottom: var(--space-2); } } .hero .mark { width: clamp(72px, 22vw, 116.3px); height: auto; margin: 0 auto var(--space-3); } .hero .tagline { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--ink-soft); max-width: 34ch; margin: 0 auto; } /* ---------- pathways ---------- */ .pathways-section { position: relative; overflow: hidden; /* clips the off-canvas edge of the network motifs below */ } /* Restrained nodes-and-connections motif, echoing the shared icon's own node/connector detail. One shape (#jyo-network), reused and mirrored: cool mineral blue on the Life Sciences side, Energy/Vitality coral on the Health side. Each motif lives inside its own pathway block (not the section) so it stays correctly paired with that pathway whether the two sit side by side (desktop) or stacked (mobile). Deliberately low-opacity and partly off-canvas — a supporting texture, not an illustration. */ .network-motif { position: absolute; top: 50%; width: 300px; height: auto; opacity: 0.55; pointer-events: none; z-index: -1; } .network-motif--ls { left: -110px; color: var(--mineral-blue); transform: translateY(-50%); } .network-motif--health { right: -110px; color: var(--coral); transform: translateY(-50%) scaleX(-1); } @media (max-width: 720px) { /* Reposition rather than merely shrink: tuck each motif into its own bottom corner, mostly off-canvas, so it reads as a quiet flourish behind the CTA rather than crossing the paragraph text — the same treatment already used on the Life Sciences and Health hero motifs. */ .network-motif { top: auto; bottom: -20px; width: 140px; opacity: 0.28; } .network-motif--ls { left: -40px; transform: none; } .network-motif--health { right: -40px; transform: scaleX(-1); } } .pathways { display: grid; grid-template-columns: 1fr; gap: 0; padding-bottom: var(--space-6); position: relative; } @media (min-width: 720px) { .pathways { grid-template-columns: 1fr 1px 1fr; gap: var(--space-5); } } .pathway-divider { border-top: 1px solid var(--line); margin: var(--space-4) 0; } @media (min-width: 720px) { .pathway-divider { border-top: none; border-left: 1px solid var(--line); margin: 0; height: 100%; } } .pathway { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) 0; transition: opacity 0.18s ease; } .pathway:hover, .pathway:focus-visible { opacity: 0.86; } .pathway-kicker { font-size: clamp(1.5rem, 3vw, 1.8rem); margin-bottom: 0.15em; } .pathway-tagline { font-style: italic; font-family: var(--font-display); color: var(--ink-soft); font-size: 1.05rem; } .pathway-desc { color: var(--ink-soft); font-size: 0.86rem; letter-spacing: 0.05em; text-transform: uppercase; margin-top: var(--space-1); } .pathway-cta { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid var(--line); transition: border-color 0.15s ease, color 0.15s ease; } .pathway-cta .arrow { transition: transform 0.15s ease; } .pathway:hover .pathway-cta, .pathway:focus-visible .pathway-cta { border-color: var(--champagne-gold); } .pathway:hover .pathway-cta .arrow, .pathway:focus-visible .pathway-cta .arrow { transform: translateX(3px); } .pathway--ls .pathway-kicker { color: var(--ls-primary); } .pathway--health .pathway-kicker { color: var(--health-primary); } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line-faint); } .footer-inner { padding-top: var(--space-3); padding-bottom: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: space-between; color: var(--ink-soft); font-size: 0.85rem; letter-spacing: 0.01em; } .footer-inner a { color: var(--ink-soft); transition: color 0.15s ease; } .footer-inner a:hover { color: var(--deep-indigo); }