/* =================================================================== PsyberCog Labs — Combined stylesheet (SCOPED) Built: 2025-09-15 19:41:15 Sources (order matters for cascade): 1) styles.css (site-wide theme/components) 2) styles.pure.css (scoped under .page-research) Note: Add class="page-research" to on the Research page. =================================================================== */ /* ===== Begin: styles.css ===== */ /* =================================================================== PsyberCog Labs — Combined stylesheet Built: 2025-09-15T03:46:42 Sources (order matters for cascade): 1) styles.css (site-wide theme/components) 2) style.css (About page & mobile menu; takes precedence) =================================================================== */ /* ===== Begin: styles.css ===== */ /* =========================== Brand & Theme =========================== */ :root{ --primary: #1A2A6C; /* Navy Blue */ --secondary: #F4A300; /* Golden Ochre */ --accent: #F4A300; /* Golden Ochre */ --success: #2E8B57; /* Emerald Green */ --bg: #0b1220; --panel: rgba(2,6,23,.5); --text: #e5e7eb; --muted: #94a3b8; --border: rgba(148,163,184,.25); --r-card: 20px; --r-button: 12px; } *{ box-sizing: border-box; } html, body { height: 100%; } body{ margin:0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: var(--text); background: radial-gradient(1200px 700px at 70% -10%, rgba(26,42,108,.25), transparent 70%), linear-gradient(180deg, #0b1220, #0b1220 200px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: #cbd5e1; text-decoration: none; } a:hover { color: #fff; } img { max-width: 100%; height: auto; display: block; } /* Hide GTM iframe when JS disabled */ .gtm-iframe{ display:none; visibility:hidden; } /* Layout helpers */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .px-page { padding-left: 1rem; padding-right: 1rem; } .py-tight { padding-top: .75rem; padding-bottom: .75rem; } .center { text-align: center; } .left { text-align: left; } .mb-sm{ margin-bottom: .75rem; } .mb-lg{ margin-bottom: 2rem; } .mb-xl{ margin-bottom: 3rem; } .mb-xxl{ margin-bottom: 4rem; } .w-100{ width:100%; } /* Typography */ h1,h2,h3,h4{ margin: 0 0 .75rem; } h1{ font-weight: 800; } h2.section-title{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); line-height: 1.15; } .section-subtitle{ color: var(--muted); max-width: 68ch; margin: 0 auto; } .h3{ font-size: 1.25rem; } .fw-700{ font-weight: 700; } .fw-800{ font-weight: 800; } .muted{ color: var(--muted); } .text-primary{ color: var(--accent); } /* =========================== Header / Nav =========================== */ .site-header .logo-img { height: 200px; width: auto; display: block; } .site-nav{ position: sticky; top: 0; z-index: 500; background: rgba(2,6,23,.65); -webkit-backdrop-filter: saturate(120%) blur(8px); backdrop-filter: saturate(120%) blur(8px); } .nav-inner{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .desktop-nav{ display: none; gap: 1rem; align-items: center; } .desktop-nav a{ padding: .5rem .75rem; border-radius: .5rem; color: #cbd5e1; } .desktop-nav a:hover{ background: rgba(255,255,255,.06); color: #fff; } .mobile-nav-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255,255,255,.2); border-radius: .75rem; background: transparent; color: #fff; } /* iOS-only fallback: disable header blur to stop overpainting above overlay */ @supports (-webkit-touch-callout: none) { .site-nav{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2,6,23,.95); } } /* =========================== Mobile menu overlay (top-level) =========================== */ /* Overlay menu — sits above everything, including sticky/blurred headers */ .mobile-menu, #mobileMenu{ position: fixed; inset: 0; /* top/left/right/bottom: 0 */ width: 100vw; height: 100dvh; /* handles Safari’s dynamic bars */ z-index: 2147483647; /* max practical z-index */ isolation: isolate; /* own stacking context */ transform: translateZ(0); /* force compositing on iOS */ will-change: opacity, transform; background: rgba(2, 6, 23, 0.92); -webkit-backdrop-filter: saturate(120%) blur(10px); /* Safari */ backdrop-filter: saturate(120%) blur(10px); display: none; /* toggle via .open */ } .mobile-menu.open, #mobileMenu.open { display: block; } /* Optional: neutralize header blur layering on iOS Safari */ @supports (-webkit-touch-callout: none) { .site-nav{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2,6,23,.95); } } /* Close button for mobile menu */ .mobile-close{ position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; width: 44px; height: 44px; /* finger-friendly target */ display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.08); color: #e5e7eb; z-index: 1; /* above menu contents */ } .mobile-close i{ font-size: 1.5rem; line-height: 1; } .mobile-close:active{ transform: scale(.98); } /* Safe-area padding so content isn't under the notch/home bar */ .mobile-menu-inner{ display: grid; gap: 1rem; max-width: 640px; margin: 0 auto; padding: calc(1.25rem + env(safe-area-inset-top)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); } .mobile-link{ display: block; padding: .875rem 1rem; border-radius: .75rem; color: #e5e7eb; } .mobile-link:hover{ background: rgba(255,255,255,.06); } .mobile-cta{ width: 100%; text-align: center; } /* Desktop breakpoint */ @media (min-width: 1024px){ .desktop-nav, .desktop-cta{ display: flex; } .mobile-nav-toggle{ display: none; } #mobileMenu{ display: none !important; } } /* =========================== Buttons & Inputs =========================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border:1px solid transparent; border-radius: var(--r-button); font-weight:600; cursor:pointer; text-align:center; } .btn-primary{ background: linear-gradient(180deg, var(--primary), #142058); color:#fff; border-color: rgba(255,255,255,.15); box-shadow: 0 6px 20px rgba(26,42,108,.25); } .btn-primary:hover{ filter: brightness(1.06); } .input, .textarea{ width: 100%; color: #e5e7eb; background: rgba(148,163,184,.08); border: 1px solid var(--border); border-radius: 12px; padding: .75rem 1rem; outline: none; } .input:focus, .textarea:focus{ border-color: #cbd5e1; } /* =========================== Hero =========================== */ .hero{ background-image:url('../img/bg.jpg'); background-size: cover; background-position: center; } .hero .content{ padding: clamp(3rem, 8vw, 6rem) 0; } .hero .hero-copy{ max-width: 48rem; } .hero h1{ font-size: clamp(1.9rem, 5vw + .2rem, 3.4rem); line-height: 1.1; text-wrap: balance; } .hero p{ font-size: clamp(1rem, 1.4vw + .4rem, 1.25rem); line-height: 1.5; max-width: 60ch; } .value-secondary{ color: var(--secondary); } .hero .stats{ display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.25rem; } .hero .stat{ background: rgba(255,255,255,.04); border: 1px solid var(--border); padding: .9rem 1rem; border-radius: 16px; } .hero .stat .value{ font-size: clamp(1.5rem, 5vw, 2.5rem); line-height: 1; } /* Breakpoints for hero stats */ @media (min-width: 640px){ .hero .stats{ grid-template-columns: repeat(2,1fr); } } @media (min-width: 1024px){ .hero .stats{ grid-template-columns: repeat(3,1fr); } } /* =========================== Sections =========================== */ .section-muted{ background: var(--panel); padding: 4rem 0; } .section-subtle{ background: rgba(255,255,255,.04); padding: 4rem 0; } section:not(.section-muted):not(.section-subtle):not(.hero){ padding: 4rem 0; } /* Cards grid */ .cards{ display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .card{ background: rgba(255,255,255,.04); border: 1px solid var(--border); padding: 1.25rem; border-radius: var(--r-card); transition: transform .2s ease, box-shadow .2s ease; } .card:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.25); } /* Icon pills */ .icon-box{ display:inline-flex; align-items:center; justify-content:center; width: 3rem; height: 3rem; border-radius: 12px; background: rgba(255,255,255,.06); margin: 0 0 .75rem; } .icon-box.primary i{ color: var(--primary); font-size: 3rem;} .icon-box.secondary i{ color: var(--secondary); font-size: 1.25rem; } .icon-box.sm{ width: 3rem; height: 3rem; } /* Split grid (text + image) */ .split{ display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } .image-wrap .img{ border-radius: var(--r-card); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.25); } .stack-md{ display: grid; gap: 1.25rem; } /* Check rows */ .check{ display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .dot{ width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items:center; background: rgba(255,255,255,.06); } .dot-primary i{ color: var(--accent); font-size: .9rem; } .dot-secondary i{ color: var(--success); font-size: .9rem; } /* Badges */ .badges{ display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; } .badge{ display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--border); padding: .5rem .75rem; border-radius: 999px; } .badge .box{ width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items:center; background: rgba(255,255,255,.06); } .badge i{ font-size: 1.1rem; color: var(--accent); } /* Responsive upgrades */ @media (min-width: 640px){ .cards{ grid-template-columns: repeat(2,1fr); } } @media (min-width: 1024px){ .cards{ grid-template-columns: repeat(3,1fr); } .split{ grid-template-columns: 1.1fr .9fr; } } /* =========================== Contact =========================== */ .contact-wrap{ background: rgba(2,6,23,.5); } .contact-grid{ display: grid; gap: 2rem; grid-template-columns: 1fr; } .contact-row{ display: flex; align-items: center; gap: 1rem; } .contact-card{ background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.25rem; } .form-grid{ display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .label{ display:block; margin-bottom: .35rem; color: #cbd5e1; } .field{ width: 100%; } @media (min-width: 640px){ .form-grid{ grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px){ .contact-grid{ grid-template-columns: 1.1fr .9fr; } } /* =========================== Footer =========================== */ .site-footer{ padding: 3rem 0; background: rgba(2,6,23,.65); border-top: 1px solid var(--border); } .footer-grid{ display: grid; gap: 2rem; grid-template-columns: 1fr; } .footer-title{ margin-bottom: .75rem; } .footer-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; } .footer-link{ color: #F4A300; } .footer-link:hover{ color: #fff; } .social a{ display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--border); } .social a:hover{ filter: brightness(1.08); } .social i{ color: #a8b3c7; font-size: 1.1rem; } .footer-bottom{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 1rem; } .footer-meta{ color: var(--muted); } .footer-links{ display: flex; gap: .75rem; flex-wrap: wrap; } @media (min-width: 1024px){ .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr 1.2fr; } } /* =========================== Utilities =========================== */ .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; } .newsletter{ display:flex; gap:.5rem; } .newsletter .input{ flex:1; } /* ===== End: styles.css ===== */ /* ===== Begin: style.css ===== */ /* === PsyberCog Labs - Global & About Page Styles (extracted from HTML) === If your project already has a base stylesheet, you can paste these into it. ------------------------------------------------------------------------- */ :root{ --navy:#1A2A6C; --teal:#0B4F6C; --gray:#5A5A5A; --ochre:#F4A300; --white:#F9F9F9; --green:#2E8B57; --card-bg: var(--teal); --text: var(--white); --muted: #c9d6df; --maxw: 1120px; } html,body{margin:0;padding:0} body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #0a2a39; color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a{color: var(--ochre); text-decoration: none;} a:hover{ text-decoration: underline; } /* Screen-reader-only 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; } /* Header / Nav */ .site-header{ position: sticky; top:0; z-index: 50; background: rgba(10,42,57,0.9); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.08); } .site-nav{ padding: 10px 0; } .nav-inner{ max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 12px; padding-inline: clamp(16px, 4vw, 28px); } .brand { display: inline-flex; align-items: center; gap: 10px; } .logo-img{ height: 150px; width: auto; display:block; } .desktop-nav{ display: none; margin-left: auto; gap: 18px; align-items: center; } .desktop-nav a{ color: var(--text); opacity: .9; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--text); font-weight:600; } .btn-primary{ background: var(--ochre); color:#111; border-color: transparent; } .desktop-cta{ display:none; } .mobile-nav-toggle{ margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.14); color: var(--text); border-radius: .75rem; padding:.5rem .6rem; font-size: 1.15rem; } /* Mobile menu */ .mobile-menu{ position: fixed; inset: 0; background: rgba(3, 18, 26, .75); display: none; } .mobile-menu.open{ display:block; } .mobile-menu-panel{ position: absolute; inset: 0 0 0 20%; background: #042332; padding: 20px; display: grid; grid-template-rows: auto 1fr; } @media (max-width: 640px){ .mobile-menu-panel{ inset: 0; } } .mobile-close{ justify-self: end; background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius:.6rem; padding:.4rem .6rem; } .mobile-menu-inner{ display: grid; gap: 10px; align-content: start; padding-top: 12px; } .mobile-link{ color: var(--text); padding:.65rem .6rem; border-radius:.6rem; } .mobile-link:hover{ background: rgba(255,255,255,.06); } /* Layout */ #content{ max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); padding-block: clamp(16px, 4vw, 28px); } .card{ background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: clamp(16px, 4vw, 28px); margin-block: clamp(14px, 3vw, 22px); } h1,h2,h3,h4{ line-height:1.25; margin: 0 0 .6em 0; } h2{ font-size: clamp(1.3rem, 1.2rem + 1.2vw, 2rem); color: var(--ochre); } h3{ font-size: clamp(1.1rem, 1rem + 1vw, 1.6rem); color: var(--ochre); } h4{ font-size: clamp(1rem, .95rem + .6vw, 1.25rem); color: var(--ochre); } p, li{ font-size: clamp(.98rem, .92rem + .3vw, 1.05rem); color: var(--white); } .muted{ color: var(--muted); } .center{ text-align: center; } /* Media */ .headshot-wrap{ display:grid; place-items:center; } .headshot{ width: clamp(160px, 42vw, 280px); height: auto; border-radius: 16px; display:block; box-shadow: 0 8px 24px rgba(0,0,0,.25); } /* Footer */ .site-footer{ border-top:1px solid rgba(255,255,255,0.08); margin-top: 32px; background: #061c28; } .footer-grid{ max-width: var(--maxw); margin: 0 auto; padding: 24px clamp(16px, 4vw, 28px); display: grid; gap: 24px; grid-template-columns: 1fr; } .footer-title{ margin: 0 0 .4rem 0; } .footer-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px;} .footer-link{ opacity: .9; } .footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); max-width: var(--maxw); margin: 0 auto; padding: 12px clamp(16px, 4vw, 28px); display:flex; gap:12px; justify-content: space-between; align-items:center; flex-wrap: wrap; } /* Social & newsletter (ex-inline) */ .gtm-iframe{ display:none; visibility:hidden; } .social { display:flex; gap:10px; margin-top:8px; } .social .ri-linkedin-fill { font-size:1.4rem; } .footer-intro { margin:0 0 8px 0; } .newsletter { display:flex; gap:8px; flex-wrap: wrap; } .input { flex:1; min-width: 200px; padding:.6rem .75rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--text); } .mobile-menu-inner .btn-primary { margin-top:8px; } /* Breakpoints */ @media (min-width: 900px){ .desktop-nav{ display: flex; } .desktop-cta{ display: inline-flex; } .mobile-nav-toggle{ display: none; } .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr 1fr; } } /* ===== End: style.css ===== */ /* Override: standardize inner spacing for cards */ .card{ padding:10px; } /* Override: remove inner padding and set LR margins to 50px */ .card{ padding:0; margin-left:50px; margin-right:50px; } /* Responsive tweak: narrow left/right margins on small screens */ @media (max-width: 640px){ .card { margin-left: 16px; margin-right: 16px; } } /* Small-screen comfort padding so text doesn't touch borders */ @media (max-width: 640px){ .card { padding: 8px; } } /* Ensure LR margins on tablet/desktop */ @media (min-width: 641px){ .card { margin-left: 50px; margin-right: 50px; } } /* ===== Final consolidated card spacing (authoritative) ===== */ .card { padding: 0; margin-left: 50px; margin-right: 50px; } @media (max-width: 640px){ .card { margin-left: 16px; margin-right: 16px; padding: 8px; } } @media (min-width: 641px){ .card { margin-left: 50px; margin-right: 50px; } } /* ===== Final: add sensible horizontal padding on all screens ===== */ /* Keep your earlier choice of zero top/bottom on desktop, but give text breathing room left/right */ @media (min-width: 641px){ .card { padding-inline: 24px; } /* ~1.5rem */ } /* On small screens keep existing comfort padding, but bias a bit more to the sides */ @media (max-width: 640px){ .card { padding-inline: 12px; } /* ~0.75rem */ } /* ===== Highest-priority card padding (specific override) ===== */ main#content .card { padding-left: 24px; padding-right: 24px; } @media (max-width: 640px){ /* On phones: generous sides + some top/bottom comfort */ main#content .card { padding: 8px 12px; } } @media (min-width: 641px){ /* On tablet/desktop: explicit sides (keep your chosen 0 top/bottom elsewhere, if set) */ main#content .card { padding-left: 24px; padding-right: 24px; } } /* ===== Final override: remove top/bottom padding on cards ===== */ main#content .card { padding-top: 0; padding-bottom: 0; } @media (max-width: 640px){ main#content .card { padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 12px; } } @media (min-width: 641px){ main#content .card { padding-top: 0; padding-bottom: 0; padding-left: 24px; padding-right: 24px; } } /* ===== Final override: top padding equals side padding; bottom remains 0 ===== */ @media (max-width: 640px){ main#content .card { padding-top: 12px; padding-right: 12px; padding-left: 12px; padding-bottom: 0; } } @media (min-width: 641px){ main#content .card { padding-top: 24px; padding-right: 24px; padding-left: 24px; padding-bottom: 0; } } /* ===== Final override: center the headshot image within the page/card ===== */ main#content img.headshot{ display: block; margin-left: auto; margin-right: auto; justify-self: center; /* if parent is grid */ align-self: center; /* if parent is grid/flex */ } /* INDEX — Service card width override */ .page-index .grid-3.cards { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); } /* Keep single column on small screens */ @media (max-width: 900px) { .page-index .grid-3.cards { grid-template-columns: 1fr; } } /* ===== Begin: styles.pure.css (scoped) ===== */ /* styles.pure.css — generated from Tailwind classes in research.html This file removes the Tailwind CDN dependency by encoding only the styles used. Color tokens */ :root {--color-primary: #1A2A6C; --color-secondary: #0B4F6C; --color-accent: #F4A300; --bg-body: #0f172a; --text-body: #f8fafc; --slate-800: #273449; /* match existing card border */ --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b;} /* Base */ .page-research, .page-research {margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg-body); color: var(--text-body);} /* Container utility (replaces max-w-7xl + mx-auto + px-6) */ .page-research .container {max-width: 80rem; /* 1280px */ margin-left: auto; margin-right: auto; padding-left: 1.5rem; /* 24px */ padding-right: 1.5rem;} /* Header */ .page-research .site-header {position: sticky; top: 0; z-index: 50; background: rgba(15, 23, 42, 0.95); /* bg-slate-900/95 */ border-bottom: 1px solid #1f2a3a; /* approx slate-800 */ backdrop-filter: saturate(180%) blur(8px);} .page-research .navbar {display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem;} .page-research .brand {display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: 1.5rem; /* text-2xl */ color: var(--color-accent); text-decoration: none;} .page-research .nav-links {display: none; align-items: center; gap: 2rem;} .page-research .nav-links a {color: #cbd5e1; /* text-slate-300 */ text-decoration: none;} .page-research .nav-links a:hover {color: #ffffff;} /* Responsive: show nav links from md (768px) */ @media (min-width: 768px) { .page-research .nav-links {display: flex;} } /* Buttons */ .page-research .btn-accent {background: var(--color-accent); color: #111827; /* near-black for contrast like text-white in original, but accent button used white text — keep dark text */ color: #ffffff; padding: .5rem 1.5rem; border-radius: .5rem; /* rounded-lg */ text-decoration: none; display: inline-block; transition: filter .2s ease;} .page-research .btn-accent:hover {filter: brightness(0.95);} .page-research .btn-primary {background: var(--color-accent); color: #111827; padding: .5rem .75rem; border-radius: .375rem; text-decoration: none;} .page-research .btn-outline {border: 1px solid var(--slate-600); color: #ffffff; padding: .5rem .75rem; border-radius: .375rem; text-decoration: none;} /* Section spacing */ .page-research .section {padding-top: 5rem; padding-bottom: 5rem;} .page-research .section-title {font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 3rem; text-align: center;} /* Grid (replaces grid md:grid-cols-2 lg:grid-cols-3 gap-8) */ .page-research .papers-grid {display: grid; grid-template-columns: 1fr; gap: 2rem; /* gap-8 */} @media (min-width: 768px) { .page-research .papers-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (min-width: 1024px) { .page-research .papers-grid {grid-template-columns: repeat(3, minmax(0, 1fr));} } /* Card & helpers — from inline CSS already present */ .page-research {background-color:#0f172a; color:#f8fafc; font-family:Inter, sans-serif;} .page-research .placeholder {background:#1e293b; border:2px dashed #334155; border-radius:12px; width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:#64748b;} .page-research .card {background:#0b1324; border:1px solid #273449; border-radius:16px; padding:1.5rem;} .page-research .badge {background:rgba(244,163,0,.15);color:#fde68a;border:1px solid rgba(244,163,0,.25);padding:.25rem .5rem;border-radius:.5rem;font-size:.75rem;} /* Additional tweaks */ .page-research .card h3 {font-size: 1.25rem; font-weight: 600;} .page-research .card p {color: var(--slate-500); margin: 0;} .page-research .card-actions {display: flex; gap: .75rem; margin-top: .75rem;} /* Footer */ .page-research .site-footer {background: #0b1324; /* similar to header backdrop */ border-top: 1px solid #1f2a3a; padding: 3rem 1rem; color: #94a3b8; /* text-slate-500 */ font-size: .875rem; /* text-sm */ text-align: center; margin-top: 5rem;} /* === Research page: widen container and cards (v2) === */ .page-research .container { max-width: 1600px; } .page-research .papers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* wider min */ } .page-research .card { max-width: 100%; } /* ——— About/Services page: mobile responsiveness overrides (no HTML edits) ——— */ /* Base tweaks that won't fight desktop */ .logo-img { height: 150px; width: auto; } /* Mobile-first */ @media (max-width: 767.98px) { /* Page title */ #services h1 { font-size: clamp(26px, 6vw, 36px); margin-top: 5px !important; /* corrects inline 'margin: top 5px;' */ margin-bottom: 8px !important; text-align: center !important; color: #F4A300; /* keeps brand accent */ } /* All the content cards currently using fixed 200px side margins */ #services section[style*="margin:24px 200px"] { margin: 16px 12px !important; /* replace fixed 200px with safe gutters */ padding: 16px !important; border-radius: 12px !important; } /* CTA button: full-width tap target */ .desktop-cta { display: inline-flex !important; width: 100% !important; justify-content: center !important; min-height: 44px !important; } /* Header/nav behavior */ .desktop-nav { display: none !important; } .mobile-nav-toggle { display: inline-flex !important; } /* Mobile menu layout (in case site CSS is missing) */ .mobile-menu { position: fixed; inset: 0; display: none; background: #11182780; z-index: 60; } .mobile-menu.open { display: block; } .mobile-menu-panel { width: min(90vw, 380px); height: 100%; margin-left: auto; background: #11182780; overflow: auto; padding: 16px; } .mobile-link, .mobile-menu-inner .btn { display: block; padding: 10px 12px; border-radius: 10px; } /* Footer stacks nicely on small screens */ .footer-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } .footer-bottom { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; } } /* Tablet and up: restore desktop nav and multi-column footer */ @media (min-width: 768px) { .desktop-nav { display: inline-flex !important; gap: 16px; } .mobile-nav-toggle { display: none !important; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } } style> :root { --accent:#F4A300; } * { box-sizing: border-box; } body { margin:0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Header / Nav */ .site-header .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; } .desktop-nav{ display:flex; gap:16px; } .mobile-nav-toggle{ display:none; border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; } @media (max-width: 1024px) { .site-header .nav-inner{ padding:12px; } } @media (max-width: 768px) { .desktop-nav{ display:none; } .mobile-nav-toggle{ display:inline-flex; } } /* Page Title */ h1.page-title{ color:var(--accent); margin:12px 16px 0; text-align:center; } /* Investor Card */ .invest-card{ margin:24px auto; padding:24px; border:1px solid #e5e7eb; border-radius:16px; max-width:1100px; width:calc(100% - 32px); } /* CTA row (replaces non-breaking spaces) */ .cta-row{ display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; margin:12px auto 24px; max-width:1100px; padding:0 16px; } .cta-row .btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:9999px; text-decoration:none; } .cta-row .btn-primary{ background:var(--accent); color:#111; font-weight:600; } /* Footer grid responsiveness */ .footer-grid{ display:grid; gap:24px; grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 900px) { .footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px) { .footer-grid{ grid-template-columns: 1fr; } } .footer-bottom{ display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap; } /* Guard against long inline spacing from */ .text-center{ white-space: normal; } /* Override the large inline margins on small screens without changing desktop layout */ @media (max-width: 768px) { section[style*="200px"] { margin:16px !important; padding:16px !important; } } style> /* =================================================================== PATCH — Contact Page: Mobile Responsiveness (non-breaking overrides) Scope: targets existing .contact-* classes without changing content/HTML Place this AFTER the original rules so it wins the cascade. =================================================================== */ {@media (max-width: 639.98px){ .contact-grid{ grid-template-columns: 1fr !important; gap: clamp(1rem, 3vw, 1.5rem); } .contact-row{ flex-direction: column; align-items: stretch; gap: .75rem; } .contact-card{ padding: clamp(.75rem, 3vw, 1rem); border-radius: 16px; } .form-grid{ grid-template-columns: 1fr !important; gap: 1rem; } .form-grid .field, .field, .input, .textarea{ width: 100%; font-size: 16px; /* prevents iOS zoom-on-focus */ line-height: 1.4; } .textarea{ min-height: 140px; resize: vertical; } .contact-actions, .form-actions{ display: grid; gap: .75rem; } .contact-actions .btn, .form-actions .btn, .contact-card .btn{ width: 100%; min-height: 44px; /* finger-friendly */ } /* Guard against long emails/URLs causing overflow */ .contact-card, .contact-row, .contact-grid{ overflow-wrap: anywhere; } /* Neutralize any inline/fixed width utility classes that might be present */ .field-group, [class*="half"], [class*="third"]{ width: 100% !important; } } /* Tablet enhancements */ @media (min-width: 640px) and (max-width: 1023.98px){ .contact-grid{ grid-template-columns: 1fr 1fr; } .form-grid{ grid-template-columns: 1fr 1fr; } /* Optional: if an element uses data-span="2", let it stretch across */ .form-grid [data-span="2"]{ grid-column: 1 / -1; } } /* Ensure no unintended overflow at any size */ .contact-wrap .container, .contact-wrap .content, .contact-grid, .contact-card{ min-width: 0; } /* Baseline touch-target comfort */ .input, .textarea, .btn{ min-height: 44px; } /* iOS-specific: keep form fonts >=16px to avoid zoom */ @media (max-width: 480px){ input, select, textarea{ font-size: 16px; } } /* Labels: readable and wrapped */ .label{ font-weight: 600; line-height: 1.3; } /* Branded focus outlines for accessibility */ .input:focus, .textarea:focus, .btn:focus-visible{ outline: 2px solid rgba(244,163,0,.6); /* uses --accent palette */ outline-offset: 2px; } /* Responsive embeds/maps used on contact pages */ .contact-map iframe, .contact-embed iframe{ width: 100%; max-width: 100%; height: min(60vh, 420px); border: 0; border-radius: 12px; } /* Icon + text rows */ .contact-row .icon{ flex: 0 0 auto; } .contact-row .text{ flex: 1 1 auto; } /* Safe-area padding when contact section spans full viewport */ @supports (padding: max(0px)){ .contact-wrap{ padding-block: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-bottom)); } } }