/* ===================================================== Startup Agadir — Universal static-page shell Shared by /pages/*.html, /resources/*.html, /orgs/*.html Matches the React SPA nav, footer and Three.js scene Localised palette: Moroccan flag — green #006233 / gold #C9A227 / red #C1272D ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap'); /* ── Theme tokens ─────────────────────────────────── */ :root { --as-bg: #f6fbf6; --as-bg2: #eaf4ec; --as-panel: rgba(255,255,255,0.88); --as-line: rgba(15,118,110,0.20); --as-text: #0d1f15; --as-muted: #4d5e54; --as-nav-bg: rgba(255,255,255,0.86); --as-tile-bg: rgba(248,255,250,0.94); --as-link: #0F766E; --as-link-2: #C1272D; --as-gold: #C9A227; } [data-theme='dark'] { --as-bg: #060d10; --as-bg2: #0d1c1a; --as-panel: rgba(10,22,18,0.86); --as-line: rgba(43,181,106,0.22); --as-text: #ecfdf5; --as-muted: #94a3a0; --as-nav-bg: rgba(5,12,10,0.84); --as-tile-bg: rgba(8,18,15,0.85); --as-link: #2BB56A; --as-link-2: #ff7b7b; --as-gold: #e2bb3a; } /* ── Body theming for shell pages ─────────────────── */ /* Body MUST be transparent so the fixed `#as-shell-canvas` (z-index:-1) is actually visible. Page background colour is moved to below. Without this, _styles.css sets `body { background: var(--bg) }` which paints over the canvas and the 3D scene is invisible. */ html { background: var(--as-bg); } [data-theme="dark"] html, html[data-theme="dark"] { background: var(--as-bg); } body.as-shell-body { background: transparent !important; color: var(--as-text); transition: color 0.25s ease; } /* Re-paint top-level wrappers transparent too — _styles.css gives
a 78%-opaque tint that would still hide the canvas. We use a much subtler translucent panel so long-form content stays readable while the 3D scene shows through. */ body.as-shell-body main { background: color-mix(in srgb, var(--as-panel) 72%, transparent) !important; } /* ── Hide legacy shell elements ───────────────────── */ header.topbar, footer.site-footer, body > #as-bg-canvas:not(#as-shell-canvas), body > .skip, body > #progress-top, body > .back-top { /* superseded by #as-scroll-top (with progress ring) */ display: none !important; } body > footer:not(#as-shell-footer):not(.site-footer) { display: none !important; } /* ── Canvas background ─────────────────────────────── */ #as-shell-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.85; /* slightly tempered so long-form text stays readable */ pointer-events: none; } /* ── Skip link ─────────────────────────────────────── */ .as-skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .as-skip:focus { left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem 1rem; background: var(--as-link); color:#fff; border-radius:.5rem; z-index: 2000; } /* ── Nav bar ──────────────────────────────────────── */ #as-shell-nav { position: sticky; top: 0; z-index: 1000; border-bottom: 2px solid #0F766E; background: var(--as-nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 4px 24px rgba(15,23,42,0.10); } .as-nav-inner { width: min(1440px, calc(100% - 2rem)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; } .as-nav-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; transition: transform 0.25s ease; min-width: 0; } .as-nav-brand:hover { transform: scale(1.03); } .as-nav-brand .as-brand-rocket { width: 44px; height: 44px; display: block; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(15,118,110,0.35)); animation: asRocketTakeoff 3s ease-in-out infinite; } @media (min-width: 640px) { .as-nav-brand .as-brand-rocket { width: 56px; height: 56px; } } @keyframes asRocketTakeoff { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .as-brand-text { display: inline-flex; flex-direction: column; line-height: 1.05; letter-spacing: -0.01em; min-width: 0; } /* Stacked "Startup" / "Agadir" on xs; side-by-side lockup on ≥sm */ .as-brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; } @media (min-width: 640px) { .as-brand-lockup { flex-direction: row; align-items: baseline; gap: 0.35rem; } } .as-brand-agadir, .as-brand-startups { display: inline-block; font-family: 'Poppins', system-ui, sans-serif; font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; /* Solid colour fallback: if -webkit-background-clip:text isn't supported, these stay readable instead of disappearing into the page. */ color: #006233; background-image: linear-gradient(90deg, #006233 0%, #006233 60%, #2BB56A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .as-brand-startups { color: #C1272D; background-image: linear-gradient(90deg, #C1272D 0%, #C1272D 60%, #8a0e22 100%); } @media (min-width: 480px) { .as-brand-agadir, .as-brand-startups { font-size: 1.15rem; } } @media (min-width: 640px) { .as-brand-agadir, .as-brand-startups { font-size: 1.5rem; } } [data-theme="dark"] .as-brand-agadir { color: #2BB56A; background-image: linear-gradient(90deg, #2BB56A 0%, #2BB56A 50%, #6dd49a 100%); } [data-theme="dark"] .as-brand-startups { color: #ff5560; background-image: linear-gradient(90deg, #ff5560 0%, #ff5560 50%, #C1272D 100%); } .as-brand-sub { display: none; font-family: 'Poppins', system-ui, sans-serif; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--as-muted); margin-top: 0.15rem; } @media (min-width: 640px) { .as-brand-sub { display: block; } } /* Vertical flag-bar separator */ .as-brand-flagbar { display: none; width: 3px; height: 36px; overflow: hidden; border-radius: 999px; flex-shrink: 0; } .as-brand-flagbar span { display: block; height: 33.33%; width: 100%; } .as-brand-flagbar .b1 { background:#006233; } .as-brand-flagbar .b2 { background:#C9A227; } .as-brand-flagbar .b3 { background:#C1272D; } @media (min-width: 640px) { .as-brand-flagbar { display: block; } } /* ── Primary nav links ─────────────────────────────── */ .as-nav-links { display: none; flex-wrap: wrap; align-items: center; gap: 0.32rem; flex: 1; justify-content: center; } @media (min-width: 820px) { .as-nav-links { display: flex; } } .as-nav-links a { border: 1.5px solid rgba(0,98,51,0.30); border-radius: 999px; padding: 0.32rem 0.72rem; font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--as-text); text-decoration: none; transition: all 0.18s ease; } .as-nav-links a:hover { background: linear-gradient(90deg, #006233, #004a26); color: #fff; border-color: transparent; transform: translateY(-1px); } /* ── More dropdown ─────────────────────────────────── */ .as-nav-more { position: relative; } .as-nav-more-btn { display: flex; align-items: center; gap: 0.28rem; border: 1.5px solid rgba(193,39,45,0.30); border-radius: 999px; padding: 0.32rem 0.72rem; font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--as-text); background: transparent; cursor: pointer; transition: all 0.18s ease; } .as-nav-more-btn:hover { background: rgba(193,39,45,0.08); } .as-nav-more-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 176px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--as-line); border-radius: 14px; background: var(--as-panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,0.22); overflow: hidden; z-index: 1001; } .as-nav-more-menu.open { display: block; } .as-nav-more-menu a { display: block; padding: 0.52rem 1rem; font-family: 'Poppins', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-text); text-decoration: none; transition: background 0.15s; } .as-nav-more-menu a:hover { background: rgba(0,98,51,0.10); color: var(--as-link); } /* ── Nav tools ─────────────────────────────────────── */ .as-nav-tools { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .as-tool-btn { border: 1px solid var(--as-line); border-radius: 999px; padding: 0.38rem 0.7rem; font-family: 'Poppins', sans-serif; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--as-text); background: rgba(43,181,106,0.10); cursor: pointer; transition: background 0.15s; white-space: nowrap; } .as-tool-btn:hover { background: rgba(43,181,106,0.22); } /* ── Hamburger ─────────────────────────────────────── */ .as-hamburger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--as-line); border-radius: 10px; background: rgba(43,181,106,0.08); color: var(--as-text); cursor: pointer; transition: background 0.15s; } .as-hamburger:hover { background: rgba(43,181,106,0.20); } @media (min-width: 820px) { .as-hamburger { display: none; } } /* ── Mobile menu ───────────────────────────────────── */ .as-mobile-menu { display: none; flex-direction: column; padding: 0.5rem 0.75rem 0.75rem; border-top: 1px solid var(--as-line); background: var(--as-nav-bg); gap: 0.15rem; } .as-mobile-menu.open { display: flex; } .as-mobile-menu a { display: block; padding: 0.5rem 0.7rem; font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--as-text); text-decoration: none; border-radius: 10px; transition: background 0.15s; } .as-mobile-menu a:hover { background: rgba(0,98,51,0.10); color: var(--as-link); } /* ── Footer ────────────────────────────────────────── */ #as-shell-footer { border-top: 1px solid var(--as-line); background: var(--as-panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 2.5rem 0 0; margin-top: 3rem; font-family: 'Poppins', sans-serif; } .as-footer-inner { width: min(1440px, calc(100% - 2rem)); margin: 0 auto; } .as-footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--as-line); } @media (max-width: 900px) { .as-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .as-footer-grid { grid-template-columns: 1fr; } } /* Brand column */ .as-footer-brand-link { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.02rem; font-weight: 800; text-decoration: none; margin-bottom: 0.6rem; } .as-footer-brand-link img { width: 36px; height: 36px; } .as-footer-brand-name { background: linear-gradient(90deg, #006233, #C1272D); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; } .as-footer-tagline { font-size: 0.83rem; color: var(--as-muted); max-width: 270px; line-height: 1.65; margin: 0 0 0.9rem; } .as-footer-socials { display: flex; gap: 0.45rem; } .as-footer-socials a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--as-line); border-radius: 999px; color: var(--as-muted); text-decoration: none; font-size: 0.8rem; font-weight: 700; opacity: 0.62; cursor: not-allowed; } /* Nav column */ .as-footer-nav-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } @media (max-width: 900px) { .as-footer-nav-col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .as-footer-nav-col { grid-template-columns: repeat(3, 1fr); } } .as-footer-group h3 { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--as-text); margin: 0 0 0.6rem; } .as-footer-group ul { list-style: none; padding: 0; margin: 0; } .as-footer-group li { margin: 0.28rem 0; } .as-footer-group a { font-size: 0.8rem; font-weight: 500; color: var(--as-muted); text-decoration: none; transition: color 0.15s; } .as-footer-group a:hover { color: var(--as-link); } /* Newsletter column */ .as-footer-newsletter-col h3 { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--as-text); margin: 0 0 0.45rem; } .as-footer-newsletter-col p { font-size: 0.82rem; color: var(--as-muted); margin: 0 0 0.7rem; line-height: 1.55; } .as-news-form { display: flex; flex-direction: column; gap: 0.4rem; } @media (min-width: 480px) { .as-news-form { flex-direction: row; } } .as-news-input-wrap { position: relative; flex: 1; } .as-news-input-wrap svg { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--as-muted); pointer-events: none; } .as-news-form input { width: 100%; padding: 0.52rem 0.65rem 0.52rem 2.1rem; border: 1px solid var(--as-line); border-radius: 12px; background: var(--as-tile-bg); color: var(--as-text); font-family: 'Poppins', sans-serif; font-size: 0.84rem; box-sizing: border-box; } .as-news-form input:focus { outline: none; border-color: var(--as-link); } .as-news-form button { padding: 0.52rem 0.95rem; border: 0; border-radius: 12px; background: linear-gradient(90deg, #006233, #C1272D); color: #fff; font-family: 'Poppins', sans-serif; font-size: 0.84rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: filter 0.15s, transform 0.15s; } .as-news-form button:hover { filter: brightness(1.1); transform: translateY(-1px); } .as-news-subscribed { display: flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(0,98,51,0.32); background: rgba(0,98,51,0.06); color: #006233; padding: 0.52rem 0.75rem; border-radius: 12px; font-size: 0.82rem; font-weight: 700; } [data-theme='dark'] .as-news-subscribed { color: #4ade80; background: rgba(43,181,106,0.12); } /* Footer bottom */ .as-footer-bottom { padding: 1.1rem 0 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; } .as-footer-copyright { font-size: 0.8rem; color: var(--as-muted); margin: 0; } .as-footer-legal { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .as-footer-legal a { font-size: 0.76rem; color: var(--as-muted); text-decoration: none; transition: color 0.15s; } .as-footer-legal a:hover { color: var(--as-link); } /* ── Scroll-to-top ─────────────────────────────────── */ /* Sits ABOVE `.page-actions` (which is at bottom:1rem, ~50px tall) on resource pages so the print / share / copy / find buttons remain reachable. On pages without that bar it just floats slightly higher than usual — visually neutral. */ #as-scroll-top { position: fixed; right: 1rem; bottom: 4.5rem; width: 48px; height: 48px; border: 1px solid rgba(43,181,106,0.4); border-radius: 999px; background: rgba(255,255,255,0.94); color: #006233; display: grid; place-items: center; cursor: pointer; z-index: 60; opacity: 0; transition: opacity 0.22s ease, border-color 0.15s; pointer-events: none; } #as-scroll-top.visible { opacity: 1; pointer-events: auto; } [data-theme='dark'] #as-scroll-top { background: rgba(7,16,12,0.88); color: #4ade80; border-color: rgba(43,181,106,0.38); } #as-scroll-top svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; } #as-scroll-top .as-ring-bg { stroke: rgba(43,181,106,0.22); stroke-width: 3; fill: none; } #as-scroll-top .as-ring { stroke: #006233; stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; transition: stroke-dashoffset 0.12s linear; } [data-theme='dark'] #as-scroll-top .as-ring { stroke: #2BB56A; } #as-scroll-top:hover { border-color: #2BB56A; } .as-scroll-arrow { font-size: 1.15rem; line-height: 1; font-weight: 900; } /* ── 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; } /* ── Reduced motion ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ── Focus ring ─────────────────────────────────────── */ :focus-visible { outline: 2px solid #2BB56A; outline-offset: 2px; border-radius: 6px; } /* ── Print ──────────────────────────────────────────── */ @media print { #as-shell-canvas, #as-shell-nav, #as-shell-footer, #as-scroll-top { display: none !important; } body.as-shell-body { background: #fff !important; color: #000; } }