/* GenesisL1 · the header, phone menu and footer of genesisl1.com, for the Broccoli page.
   These are the site's own rules (styles.css and styles-dark.css) as the browser reads
   them on the main pages, with the custom properties they use, light and dark. */
.site-header,.mobile-menu,.site-footer{--acid:#e6eef8;--acid-rgb:230, 238, 248;--blue:#245cae;--blue-rgb:36, 92, 174;--display:"IBM Plex Sans", "Inter Display", "Inter", "Helvetica Neue", Arial, sans-serif;--header-h:78px;--ink:#11161d;--line:rgba(17, 22, 29, 0.095);--line-strong:rgba(17, 22, 29, 0.18);--max:1640px;--mono:"DM Mono", "SFMono-Regular", Consolas, monospace;--muted:#626b77;--paper:#ffffff;font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.58;color:#11161d;-webkit-font-smoothing:antialiased}
:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .mobile-menu,:root[data-theme="dark"] .site-footer{--ink:#e1e8f3;--line:rgba(226,233,242,0.095);--line-strong:rgba(226,233,242,0.18);--muted:#b2bcca;--paper:#0b0f15;color:#e1e8f3}
:where(.site-header,.mobile-menu,.site-footer) *{box-sizing:border-box}
:where(.site-header,.mobile-menu,.site-footer) a{color:inherit;text-decoration:none}
:where(.site-header) button{font:inherit;color:inherit}
body.menu-open{overflow:hidden}
.site-header { position: sticky; top: 0px; z-index: 1000; height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 0px clamp(20px, 3.2vw, 62px); border-bottom: 1px solid var(--line); background: rgba(247, 249, 251, 0.84); backdrop-filter: blur(20px) saturate(130%); transition: background 0.3s, box-shadow 0.3s; }
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.94); box-shadow: rgba(7, 17, 29, 0.06) 0px 12px 44px; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-logo { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--line-strong), 0 8px 22px rgba(7,17,29,.08); }
.brand-name { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; }
.brand-version { padding-left: 12px; border-left: 1px solid var(--line-strong); color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: 0.14em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 42px); }
.desktop-nav a,
.header-docs { position: relative; color: rgb(37, 49, 64); font-size: 14px; font-weight: 600; }
.desktop-nav a::after { content: ""; position: absolute; left: 0px; right: 100%; bottom: -10px; height: 1px; background: var(--blue); transition: right 0.25s; }
.desktop-nav a:hover::after,
.desktop-nav a.is-active::after { right: 0px; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 58px; padding: 0px 24px; border: 1px solid transparent; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; transition: transform 0.22s, box-shadow 0.22s, background 0.22s, color 0.22s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 0px 17px; gap: 10px; font-size: 13px; }
.button-paper { color: var(--ink); background: var(--acid); border-color: rgba(7, 17, 29, 0.22); box-shadow: 0 10px 28px rgba(var(--acid-rgb),.24), inset 0 -1px 0 rgba(7,17,29,.12); }
.button-paper:hover { color: rgb(255, 255, 255); background: var(--blue); border-color: var(--blue); box-shadow: 0 15px 34px rgba(var(--blue-rgb),.26); }
.button-dark { background: var(--ink); color: rgb(255, 255, 255); box-shadow: rgba(7, 17, 29, 0.12) 0px 8px 24px; }
.button-dark:hover { box-shadow: rgba(7, 17, 29, 0.18) 0px 14px 32px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; width: max-content; font-size: 14px; font-weight: 700; border-bottom: 1px solid currentcolor; padding-bottom: 3px; transition: gap 0.2s, color 0.2s; }
.text-link:hover { gap: 14px; color: var(--blue); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; padding: 0px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; }
.menu-toggle span { width: 18px; height: 1px; background: currentcolor; transition: transform 0.3s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu { display: none; }
.site-footer { position: relative; z-index: 2; }
.site-footer { width: min(100%,var(--max)); margin: 0px auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; padding: 70px clamp(28px, 4.8vw, 80px) 30px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--paper); }
.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-logo { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--line-strong), 0 12px 30px rgba(7,17,29,.08); }
.footer-brand div { display: flex; flex-direction: column; gap: 6px; }
.footer-brand strong { font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -0.025em; }
.footer-brand span { color: var(--muted); font-size: 13px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-links div { display: flex; flex-direction: column; gap: 10px; }
.footer-links span { margin-bottom: 8px; color: var(--muted); font: 400 8px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.footer-links a { width: max-content; font-size: 14px; font-weight: 600; }
.footer-links a:hover { color: var(--blue); }
.footer-legal { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 50px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line-strong); color: var(--muted); font: 400 9px/1.6 var(--mono); }
.footer-legal p { max-width: 860px; margin: 0px; }
.footer-legal a { color: var(--ink); }
@media (max-width: 1280px) {
.site-header { grid-template-columns: 1fr auto; }
}
@media (max-width: 1280px) {
.header-actions { gap: 12px; }
}
@media (max-width: 1280px) {
.desktop-nav { display: none; }
}
@media (max-width: 1024px) {
.header-docs { display: none; }
}
@media (max-width: 1024px) {
.menu-toggle { display: flex; }
}
@media (max-width: 1024px) {
.mobile-menu { display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 900; padding: 40px 24px 24px; background: var(--paper); transform: translateY(-105%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); visibility: hidden; }
}
@media (max-width: 1024px) {
.mobile-menu.is-open { transform: none; visibility: visible; }
}
@media (max-width: 1024px) {
.mobile-menu nav { display: flex; flex-direction: column; }
}
@media (max-width: 1024px) {
.mobile-menu nav a { display: flex; justify-content: space-between; padding: 24px 0px; border-bottom: 1px solid var(--line-strong); font-family: var(--display); font-size: clamp(38px, 8vw, 72px); line-height: 1.02; letter-spacing: -0.032em; text-transform: none; font-weight: 400; }
}
@media (max-width: 1024px) {
.mobile-menu nav span { font: 400 9px/1 var(--mono); color: var(--muted); }
}
@media (max-width: 1024px) {
.mobile-menu-foot { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; justify-content: space-between; color: var(--muted); font: 400 8px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
}
@media (max-width: 1024px) {
.site-footer { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
.footer-legal { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
.site-header { padding: 0px 16px; }
}
@media (max-width: 720px) {
.brand-logo { width: 38px; height: 38px; }
}
@media (max-width: 720px) {
.mobile-menu nav a { padding: 18px 0px; }
}
@media (max-width: 720px) {
.brand-version,
.site-header .button-small { display: none; }
}
@media (max-width: 720px) {
.header-actions { gap: 10px; }
}
@media (max-width: 720px) {
.site-footer { padding: 60px 20px 24px; gap: 60px; }
}
@media (max-width: 720px) {
.footer-links { grid-template-columns: 1fr 1fr; }
}
.site-header,
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.94); border-bottom-color: rgba(17, 22, 29, 0.1); }
.site-header.is-scrolled { box-shadow: rgba(17, 22, 29, 0.055) 0px 12px 38px; }
.desktop-nav a,
.header-docs { color: rgb(47, 55, 66); }
.button-paper { color: var(--ink); background: rgb(255, 255, 255); border-color: var(--line-strong); box-shadow: rgba(17, 22, 29, 0.06) 0px 8px 22px; }
.button-paper:hover { color: rgb(255, 255, 255); background: var(--ink); border-color: var(--ink); box-shadow: rgba(17, 22, 29, 0.14) 0px 14px 30px; }
.button-dark { background: var(--ink); }
.site-footer { background: rgb(255, 255, 255); }
@media (max-width: 1024px) {
.mobile-menu { background: rgb(255, 255, 255); }
}
@media (max-width: 720px) {
.mobile-menu { overflow-y: auto; padding-bottom: 100px; }
}
@media (max-width: 720px) {
.mobile-menu nav a { padding: 14px 0px; font-size: clamp(30px, 9.5vw, 46px); }
}
@media (max-height: 720px) and (max-width: 1024px) {
.mobile-menu-foot { display: none; }
}
.desktop-nav { gap: clamp(16px, 1.55vw, 28px); }
.desktop-nav a { font-size: 13px; }
.ecosystem-page-body .site-header { grid-template-columns: 1fr auto 1fr; }
.desktop-nav a,
.header-docs { font-size: 15px; }
.brand-version { font-size: 11px; }
.text-link { font-size: 15px; }
.footer-brand span { font-size: 14px; line-height: 1.6; }
.footer-links a { font-size: 13px; }
.footer-legal { font-size: 12px; }
.footer-legal p { font-size: 13px; line-height: 1.65; }
.site-header { grid-template-columns: auto minmax(0px, 1fr) auto; gap: clamp(22px, 2.2vw, 40px); padding-inline: clamp(22px, 3.4vw, 64px); }
.brand { white-space: nowrap; }
.brand-version { white-space: nowrap; }
.desktop-nav { min-width: 0px; justify-content: center; gap: clamp(16px, 1.65vw, 30px); white-space: nowrap; }
.desktop-nav a,
.header-docs,
.header-actions .button-small { white-space: nowrap; }
.desktop-nav a,
.header-docs { font-size: 14px; }
.header-actions { gap: 12px; white-space: nowrap; }
@media (max-width: 1450px) {
.brand-version { display: none; }
}
@media (max-width: 1450px) {
.desktop-nav { gap: 16px; }
}
@media (max-width: 1450px) {
.desktop-nav a,
.header-docs { font-size: 13px; }
}
@media (max-width: 1240px) {
.site-header { grid-template-columns: 1fr auto; }
}
@media (max-width: 1240px) {
.desktop-nav { display: none; }
}
@media (max-width: 1240px) {
.menu-toggle { display: flex; }
}
.site-header { gap: 18px; grid-template-columns: minmax(210px, 0.9fr) auto minmax(250px, 0.9fr); }
.brand,
.brand-name,
.brand-version,
.desktop-nav a,
.header-docs,
.header-actions .button-small { white-space: nowrap; }
.desktop-nav { gap: clamp(14px, 1.35vw, 25px); }
.header-actions { gap: 12px; }
.desktop-nav a,
.header-docs { font-size: 14px; }
.brand-version { font-size: 10px; letter-spacing: 0.12em; }
@media (max-width: 1500px) {
.header-docs { display: none; }
}
@media (max-width: 1500px) {
.site-header { grid-template-columns: minmax(190px, 0.8fr) auto minmax(210px, 0.8fr); }
}
@media (max-width: 1500px) {
.desktop-nav { gap: 14px; }
}
@media (max-width: 1500px) {
.header-actions .button-small { padding: 0px 14px; }
}
@media (max-width: 1260px) {
.site-header { grid-template-columns: 1fr auto; }
}
@media (max-width: 1260px) {
.desktop-nav { display: none; }
}
@media (max-width: 1260px) {
.header-docs { display: none; }
}
@media (max-width: 1280px) {
.menu-toggle { position: relative; z-index: 1002; display: flex !important; }
}
@media (max-width: 1280px) {
.mobile-menu { display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 1000; padding: 24px clamp(18px, 4vw, 32px) 32px; background: rgb(255, 255, 255); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-105%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility linear 0.32s; visibility: hidden; pointer-events: none; }
}
@media (max-width: 1280px) {
.mobile-menu.is-open { transform: translateY(0px); visibility: visible; pointer-events: auto; transition-delay: 0s; }
}
@media (max-width: 1280px) {
.mobile-menu nav { display: flex; flex-direction: column; }
}
@media (max-width: 1280px) {
.mobile-menu nav a { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 16px; min-height: 58px; padding: 12px 0px; border-bottom: 1px solid var(--line-strong); font-family: var(--display); font-size: clamp(23px, 3.8vw, 34px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; overflow-wrap: anywhere; }
}
@media (max-width: 1280px) {
.mobile-menu nav span { align-self: start; padding-top: 0.35em; font: 400 9px/1 var(--mono); white-space: nowrap; }
}
@media (max-width: 1280px) {
.mobile-menu-foot { display: none !important; }
}
@media (max-width: 600px) {
.mobile-menu { padding-top: 12px; }
}
@media (max-width: 600px) {
.mobile-menu nav a { min-height: 54px; padding: 10px 0px; font-size: clamp(22px, 6.5vw, 29px); }
}
.text-link [aria-hidden="true"] { font-family: var(--mono); font-variant-emoji: text; font-style: normal; line-height: 1; }
.text-link [aria-hidden="true"] { font-family: var(--mono); font-variant-emoji: text; font-style: normal; line-height: 1; }
:root[data-theme="dark"] .site-header { border-bottom: 1px solid rgba(226, 233, 242, 0.094); background: rgba(14, 18, 24, 0.84); }
:root[data-theme="dark"] .site-header.is-scrolled { background: rgba(11, 15, 21, 0.94); box-shadow: rgba(0, 0, 0, 0.133) 0px 12px 44px; }
:root[data-theme="dark"] .brand-logo { background: rgb(11, 15, 21); box-shadow: rgba(0, 0, 0, 0.396) 0px 0px 0px 1px, rgba(0, 0, 0, 0.176) 0px 8px 22px; }
:root[data-theme="dark"] .brand-version { border-left: 1px solid rgba(226, 233, 242, 0.18); color: rgb(178, 188, 202); }
:root[data-theme="dark"] .desktop-nav a,
:root[data-theme="dark"] .header-docs { color: rgb(203, 218, 238); }
:root[data-theme="dark"] .desktop-nav a::after { background: rgb(36, 92, 174); }
:root[data-theme="dark"] .button-paper { color: rgb(225, 232, 243); background: rgb(20, 24, 30); border-color: rgba(226, 233, 242, 0.22); box-shadow: rgba(230, 238, 248, 0.027) 0px 10px 28px, rgba(0, 0, 0, 0.263) 0px -1px 0px inset; }
:root[data-theme="dark"] .button-paper:hover { color: rgb(11, 15, 21); background: rgb(36, 92, 174); border-color: rgb(36, 92, 174); box-shadow: rgba(36, 92, 174, 0.208) 0px 15px 34px; }
:root[data-theme="dark"] .button-dark { background: rgb(227, 232, 240); color: rgb(11, 15, 21); box-shadow: rgba(0, 0, 0, 0.263) 0px 8px 24px; }
:root[data-theme="dark"] .button-dark:hover { box-shadow: rgba(0, 0, 0, 0.396) 0px 14px 32px; }
:root[data-theme="dark"] .text-link:hover { color: rgb(156, 195, 253); }
:root[data-theme="dark"] .menu-toggle { border: 1px solid rgba(226, 233, 242, 0.094); }
:root[data-theme="dark"] .site-footer { border-left: 1px solid rgba(226, 233, 242, 0.094); border-right: 1px solid rgba(226, 233, 242, 0.094); background: rgb(11, 15, 21); }
:root[data-theme="dark"] .footer-logo { background: rgb(11, 15, 21); box-shadow: rgba(0, 0, 0, 0.396) 0px 0px 0px 1px, rgba(0, 0, 0, 0.176) 0px 12px 30px; }
:root[data-theme="dark"] .footer-brand span { color: rgb(178, 188, 202); }
:root[data-theme="dark"] .footer-links span { color: rgb(178, 188, 202); }
:root[data-theme="dark"] .footer-links a:hover { color: rgb(156, 195, 253); }
:root[data-theme="dark"] .footer-legal { border-top: 1px solid rgba(226, 233, 242, 0.18); color: rgb(178, 188, 202); }
:root[data-theme="dark"] .footer-legal a { color: rgb(225, 232, 243); }
@media (max-width: 1024px) {
:root[data-theme="dark"] .mobile-menu { background: rgb(11, 15, 21); }
}
@media (max-width: 1024px) {
:root[data-theme="dark"] .mobile-menu nav a { border-bottom: 1px solid rgba(226, 233, 242, 0.18); }
}
@media (max-width: 1024px) {
:root[data-theme="dark"] .mobile-menu nav span { color: rgb(178, 188, 202); }
}
@media (max-width: 1024px) {
:root[data-theme="dark"] .mobile-menu-foot { color: rgb(178, 188, 202); }
}
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .site-header.is-scrolled { background: rgba(11, 15, 21, 0.94); border-bottom-color: rgba(226, 233, 242, 0.1); }
:root[data-theme="dark"] .site-header.is-scrolled { box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 38px; }
:root[data-theme="dark"] .desktop-nav a,
:root[data-theme="dark"] .header-docs { color: rgb(204, 214, 228); }
:root[data-theme="dark"] .button-paper { color: rgb(225, 232, 243); background: rgb(11, 15, 21); border-color: rgba(226, 233, 242, 0.18); box-shadow: rgba(0, 0, 0, 0.133) 0px 8px 22px; }
:root[data-theme="dark"] .button-paper:hover { color: rgb(11, 15, 21); background: rgb(227, 232, 240); border-color: rgb(225, 232, 243); box-shadow: rgba(0, 0, 0, 0.31) 0px 14px 30px; }
:root[data-theme="dark"] .button-dark { background: rgb(227, 232, 240); }
:root[data-theme="dark"] .site-footer { background: rgb(11, 15, 21); }
@media (max-width: 1024px) {
:root[data-theme="dark"] .mobile-menu { background: rgb(11, 15, 21); }
}
@media (max-width: 1280px) {
:root[data-theme="dark"] .mobile-menu { background: rgb(11, 15, 21); }
}
@media (max-width: 1280px) {
:root[data-theme="dark"] .mobile-menu nav a { border-bottom: 1px solid rgba(226, 233, 242, 0.18); }
}