@font-face{font-family:'GanCLM';src:url(/assets/gan-clm.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
@font-face{font-family:'Heebo';src:url(/assets/heebo-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
@font-face{font-family:'Heebo';src:url(/assets/heebo-600.woff2) format('woff2');font-weight:600 900;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
:root{
--lime:#aad93d;
--green:#3e741e;
--green-dark:#2c5117;
--green-soft:#eef5d8;
--orange:#e38a22;
--orange-dark:#a45613;
--navy:#2c5117;
--muted:#54751f;
--paper-line:#dcd9b8;
--image-line:#a7b793;
--amber:#fdf3d8;
--amber-line:#e8d49c;
--band:#3e741e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--lime);overflow-x:hidden;overflow-x:clip}
body{min-width:280px}
.ek{direction:rtl;text-align:right;min-height:100vh;color:var(--navy);font-family:'Heebo',Arial,'Segoe UI',sans-serif;line-height:1.68;background:var(--lime)}
.ek img{max-width:100%}
.ek a{color:inherit;text-decoration:none}
.skip-link{position:fixed;z-index:1000;top:8px;right:8px;transform:translateY(-160%);padding:11px 14px;background:#fff;color:var(--navy);border:2px solid var(--navy);font-weight:700}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #1b4762;outline-offset:3px}
/* Content action buttons; navigation is defined only in site-nav.css. */
.flash-btn{display:inline-flex;align-items:center;justify-content:center;color:#fff!important;font:700 15px/1.15 'GanCLM',Arial,sans-serif;text-align:center;text-shadow:0 2px 0 #5c7d1a,0 1px 3px rgba(20,50,0,.45);background:url(/assets/login/btn-green-slab.png) center/100% 100% no-repeat;filter:drop-shadow(0 4px 5px rgba(30,60,0,.28));transition:filter .15s,transform .12s}
.flash-btn:hover{filter:drop-shadow(0 5px 6px rgba(30,60,0,.33)) brightness(1.08);transform:translateY(-1px)}
.flash-btn:active{filter:drop-shadow(0 2px 3px rgba(30,60,0,.3)) brightness(.96);transform:translateY(2px)}
/* Original 1200px palms and cream-paper website shell. */
.scene{direction:ltr;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:143px 860px 197px;align-items:start}
.palm{display:block;width:100%;height:auto}
.paper{direction:rtl;position:relative;min-width:0;background:url(/ekoloko/website/common/images/main_iw.jpg) no-repeat top center,url(/ekoloko/website/common/images/tileable_iw.jpg) repeat-y top center;background-size:100% auto,100% auto}
.paper-in{position:relative;padding:31px 48px 34px}
.tear{display:block;width:100%;height:auto}
.Title{margin:0 0 10px;color:var(--navy);font:700 27px/1.28 'GanCLM',Arial,sans-serif}
.sec{padding:27px 0;border-top:1px solid var(--paper-line)}
.sec p{margin:0 0 13px;font-size:15px;line-height:1.82}
.sec p:last-child{margin-bottom:0}
.sec a:not(.flash-btn){color:#2f6486;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.section-title{font-size:24px;margin-bottom:6px}
.section-title::before{content:"";display:inline-block;width:25px;height:18px;margin-inline-end:9px;vertical-align:-2px;background:url(/assets/login/leaf.png) center/contain no-repeat}
.section-lede{color:var(--muted);font-size:14px!important;line-height:1.7!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Hero: authentic Flash stage, intentionally without modern browser chrome. */
.hero{text-align:center;padding:3px 0 25px}
.hero-title{font-size:30px;margin:0 0 6px;text-shadow:0 1px 0 #fff}
.hero-copy{max-width:650px;margin:0 auto 18px;color:var(--muted);font-size:15px;line-height:1.75}
.flash-stage-wrap{width:100%;margin:0 auto;border:1px solid #8fa77b;background:var(--lime);box-shadow:0 12px 24px -12px rgba(24,56,79,.62);overflow:hidden}
.jungle{position:relative;width:100%;aspect-ratio:960/600;overflow:hidden}
.fs{position:absolute;top:0;left:0;width:960px;height:600px;direction:ltr;transform:scale(var(--fs-scale,1));transform-origin:0 0;background:url(/assets/login/flash/stage.png) 0 0/960px 600px no-repeat}
.fsb{position:absolute;display:block;padding:0;border:0;overflow:hidden;color:transparent;font-size:0;line-height:0;background-repeat:no-repeat;background-position:center;background-size:100% 100%}
.fs-login{left:457px;top:239px;width:151px;height:68px;background-image:url(/assets/login/flash/btn-login-up.png)}
.fs-login:hover,.fs-login:focus-visible{background-image:url(/assets/login/flash/btn-login-over.png)}
.fs-login:active{background-image:url(/assets/login/flash/btn-login-down.png)}
.fs-register{left:534px;top:337px;width:191px;height:79px;background-image:url(/assets/login/flash/btn-register-up.png)}
.fs-register:hover,.fs-register:focus-visible{background-image:url(/assets/login/flash/btn-register-over.png)}
.fs-register:active{background-image:url(/assets/login/flash/btn-register-down.png)}
.fs-forgot{left:644px;top:234px;width:157px;height:21px;background-image:url(/assets/login/flash/btn-forgot-up.png)}
.fs-forgot:hover,.fs-forgot:focus-visible{background-image:url(/assets/login/flash/btn-forgot-over.png)}
.fs-forgot:active{background-image:url(/assets/login/flash/btn-forgot-down.png)}
.fs-shop{left:147px;top:119px;width:154px;height:108px;background-image:url(/assets/login/flash/leaf-shop-up.png)}
.fs-shop:hover,.fs-shop:focus-visible{background-image:url(/assets/login/flash/leaf-shop-over.png)}
.fs-mall{left:226px;top:223px;width:154px;height:108px;background-image:url(/assets/login/flash/leaf-mall-up.png)}
.fs-mall:hover,.fs-mall:focus-visible{background-image:url(/assets/login/flash/leaf-mall-over.png)}
.fs-ecocode{left:74px;top:247px;width:154px;height:108px;background-image:url(/assets/login/flash/leaf-ecocode-up.png)}
.fs-ecocode:hover,.fs-ecocode:focus-visible{background-image:url(/assets/login/flash/leaf-ecocode-over.png)}
.fs-ecocard{left:129px;top:372px;width:151px;height:110px;background-image:url(/assets/login/flash/leaf-ecocard-up.png)}
.fs-ecocard:hover,.fs-ecocard:focus-visible{background-image:url(/assets/login/flash/leaf-ecocard-over.png)}
.fs-ravcard{left:283px;top:363px;width:133px;height:89px;background-image:url(/assets/login/flash/leaf-ravcard-up.png)}
.fs-ravcard:hover,.fs-ravcard:focus-visible{background-image:url(/assets/login/flash/leaf-ravcard-over.png)}
.fs-input{position:absolute;width:117px;height:17px;padding:0 2px;border:0;border-radius:0;background:transparent;color:#fff;font:bold 13px/17px Arial,sans-serif;direction:ltr;text-align:left;caret-color:#fff}
.fs-input:focus{outline:1px solid rgba(255,255,255,.72);outline-offset:1px}
.fs-user{left:518px;top:170px}
.fs-pass{left:518px;top:209px}
.fs-cb{position:absolute;width:24px;height:28px;margin:0;appearance:none;-webkit-appearance:none;border:0;cursor:pointer;background:url(/assets/login/flash/cb-off.png) center/24px 28px no-repeat}
.fs-cb:checked{background-image:url(/assets/login/flash/cb-on.png)}
.fs-cb-user{left:484px;top:170px}
.fs-cb-pass{left:484px;top:209px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 17px;margin-top:13px}
/* 228 wide with 14px of side padding leaves 200px of line, and the longest label
the platform detection can write — "הורדה מומלצת ל־Windows" — measures 193px at
this font. At 188/18 it had 152px and broke across two lines inside the slab
art at every width from 431px up. */
.hero-actions .flash-btn{width:228px;height:62px;padding:0 14px 4px}
.hero-actions .browser-play{background-image:url(/assets/login/btn-green-slab.png);text-shadow:0 2px 0 #5c7d1a,0 1px 3px rgba(20,50,0,.45);filter:drop-shadow(0 4px 5px rgba(30,60,0,.28))}
/* Discord actions keep the original game-slab architecture, recolored purple. */
.hero-actions .discord-btn{width:204px;gap:8px;border:0;border-radius:0;background:transparent url(/assets/login/btn-blurple-slab.png) center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 4px 5px rgba(36,42,112,.34));text-shadow:0 2px 0 #3c45a5,0 1px 3px rgba(24,28,70,.5)}
.hero-actions .discord-btn:hover{filter:drop-shadow(0 5px 6px rgba(36,42,112,.4)) brightness(1.08);transform:translateY(-1px)}
.hero-actions .discord-btn:focus-visible{outline-color:#fff;box-shadow:0 0 0 4px rgba(88,101,242,.38)}
.hero-actions .discord-btn:active{filter:drop-shadow(0 2px 3px rgba(36,42,112,.34)) brightness(.94);transform:translateY(2px)}
.discord-btn svg{flex:0 0 auto}
.sec a[href*="discord.gg"]{color:#5865f2!important;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.footrow a[href*="discord.gg"]{display:inline;color:#fff!important;font-weight:700;text-decoration:none;text-underline-offset:3px}
.footrow a[href*="discord.gg"]:hover,.footrow a[href*="discord.gg"]:focus-visible{color:#fff!important;text-decoration:underline}
.download-meta{width:100%;margin:0;color:var(--muted);font-size:12.5px;font-weight:700}
/* Supporting actions stay within the original Ekoloko green system. */
.hero-extra{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;gap:10px 18px;margin-top:16px}
.hero-extra .hero-service{width:214px;height:70px;padding:0 20px 4px;gap:9px;font-size:16.5px;white-space:nowrap;background-image:url(/assets/login/btn-green-slab.png);text-shadow:0 2px 0 var(--green-dark),0 1px 3px rgba(20,50,0,.45)}
.hero-service svg{-webkit-flex:0 0 auto;flex:0 0 auto}
/* Native-looking editorial sections using the original paper and game art. */
.story-split{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:center}
.story-tuki{position:relative;min-height:210px;display:grid;place-items:center;background:url(/assets/login/leaf-panel-clean.png) center/contain no-repeat}
.story-tuki img{width:205px;height:auto;filter:drop-shadow(0 8px 5px rgba(24,56,79,.2))}
.original-list{margin:12px 0 0;padding:0 21px 0 0}
.original-list li{margin:6px 0;font-size:14px;line-height:1.65}
.download-list{margin-top:9px;border-top:1px solid rgba(167,183,147,.72)}
.download-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 184px;gap:19px;align-items:center;padding:15px 0;border-bottom:1px dashed var(--paper-line)}
.download-row h3{margin:0;color:var(--navy);font:700 20px/1.25 'GanCLM',Arial,sans-serif}
.download-row p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.download-row.is-recommended::after{content:"מתאים למכשיר הזה";position:absolute;top:-10px;inset-inline-start:4px;padding:1px 10px 3px;color:#fff;background:#e38a22;border:2px solid #fff;border-radius:13px;font:700 12px/1.35 'GanCLM',Arial,sans-serif;box-shadow:0 1px 3px rgba(70,40,10,.3)}
.download-row .flash-btn{justify-self:end;width:184px;height:60px;padding:0 12px 4px}
.download-row[data-download-platform="android"] .flash-btn,.download-row[data-download-platform="browser"] .flash-btn{background-image:url(/assets/login/btn-orange-slab.png);text-shadow:0 2px 0 #a45613,0 1px 3px rgba(65,25,0,.4)}
.games-stage{position:relative;margin-top:16px;padding:18px 18px 13px;background:#8eb72c url(/assets/login/lime-tex.jpg) center/320px auto;border:4px solid #fff7c7;outline:1px solid #779527;box-shadow:0 5px 10px rgba(24,56,79,.18)}
.games-stage::before{content:"";position:absolute;z-index:2;top:-48px;inset-inline-end:12px;width:105px;height:81px;background:url(/assets/home/mobile-games/tuki.png) center/contain no-repeat;pointer-events:none}
.game-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.game-shot{margin:0;background:#fff9d7;border:3px solid #fff;padding:4px;box-shadow:0 2px 5px rgba(20,55,45,.3)}
/* height:auto is load-bearing. The ![]()
carries width="1136" height="640" so the
browser can reserve the box before the file arrives, and that attribute is a
presentational hint on `height` — which beats aspect-ratio, because
aspect-ratio only computes a dimension that nothing else set. Without this the
shot is drawn 640px tall at every width and object-fit:cover crops a vertical
sliver out of a 16:9 screenshot: sky at the top, empty ground in the middle,
the 2014 watermark cut off at the bottom. Measured 324x640 at 390px and
218x640 at 1440px before the fix. */
.game-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid #7f9b55}
.game-shot figcaption{padding:6px 4px 2px;color:var(--navy);font:700 15px/1.25 'GanCLM',Arial,sans-serif;text-align:center}
.install-steps{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:9px}
.install-steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.65}
.step-no{flex:0 0 28px;width:28px;height:28px;margin-top:1px;display:grid;place-items:center;color:#fff;background:url(/assets/login/leaf.png) center/contain no-repeat;font:bold 12px/1 Arial,sans-serif;text-shadow:0 1px 2px #285010}
.original-note{margin-top:16px;padding:11px 14px;background:var(--amber);border:1px solid var(--amber-line);color:#6f5416;font-size:13.5px;line-height:1.7}
.original-note b{color:#7c5a10}
.faq-list{margin-top:10px;border-top:1px solid rgba(167,183,147,.72)}
.faq-list details{padding:11px 0;border-bottom:1px dashed var(--paper-line)}
.faq-list summary{cursor:pointer;color:var(--navy);font:700 17px/1.45 'GanCLM',Arial,sans-serif}
.faq-list summary::marker{color:#6ca72c}
.faq-list details p{margin:8px 0 2px;padding-inline-start:24px;color:#3f566d;font-size:14px;line-height:1.75}
.more-help{margin-top:14px!important}
/* Original torn footer. */
/* The landing footer now wears the same bar as the header (--eko-chrome in
site-nav.css). It used to be transparent white-on-lime, which is why the
top and the bottom of the page did not match. The bar itself is
full-bleed; only its contents stay on the 1200px measure. */
/* The bars are painted like the "כניסה למשחק" slab, not merely in its hue:
the same three face stops read out of btn-green-slab.png (#c9d55f / #a9bb44 /
#9baf3a, its four most common pixels) under the same bright top lip the slab
carries. No dark edge line at either end — the slab's outline reads as a black
rule once it spans the full width.
Bar text keeps the button's own white + heavy dark text-shadow, which is the
only reason white is legible on this green at all: measured, white is ~2:1
here. That is how the button already ships across the site; swap the two
`#fff` values below for `#24410f` if the bars should meet AA on their own.
html:root, not :root, because site-nav.css declares --eko-chrome in its own
:root and loads after this file; the extra element bumps specificity so the
landing page wins without touching the shared file (login.html keeps its own
flat #AAD93D override). */
html:root{
--eko-chrome:
linear-gradient(180deg,rgba(255,255,255,.38) 0 2px,rgba(255,255,255,0) 3px),
linear-gradient(180deg,#c9d55f 0%,#a9bb44 55%,#9baf3a 100%);
--eko-chrome-edge:transparent;
}
.ek .site-header,.ek .footrow{text-shadow:0 2px 0 #5c7d1a,0 1px 3px rgba(20,50,0,.45)}
.footrow{max-width:none;margin:0;padding:15px max(16px,4vw) 20px;text-align:center;background:var(--eko-chrome,linear-gradient(180deg,#467d24,#315f19));border-top:0}
.footrow>*{max-width:1200px;margin-inline:auto}
.footerLinks{color:#fff!important;font-style:oblique;font-size:13px}
.footerLinks:hover{text-decoration:underline}
.footerSep{margin:0 7px;color:#fff;opacity:.75;font-size:12px}
.footerText{display:block;margin-top:8px;color:#fff;font-size:12.5px;line-height:1.65}
@media(max-width:1239px){
.scene{grid-template-columns:1fr;max-width:860px}
.scene>.palm{display:none}
.paper-in{padding:27px clamp(16px,5vw,48px) 31px}
}
@media(max-width:720px){
.hero-title{font-size:26px}
.hero-copy{font-size:14px}
.story-split{grid-template-columns:1fr}
.story-tuki{min-height:165px;order:-1}
.story-tuki img{width:165px}
.game-strip{grid-template-columns:1fr}
.game-shot img{aspect-ratio:16/8.5}
.games-stage::before{top:-38px;width:82px;height:64px}
.download-row{grid-template-columns:1fr;gap:8px;padding:17px 0}
.download-row .flash-btn{justify-self:start;width:176px;height:58px}
/* One column means the badge's top:-10px lands on the dashed border it shares
with the row above, so on a phone the chip reads as a recommendation for the
previous platform. Inside its own row, and on the inline end, where the
right-aligned h3 cannot reach it. */
.download-row.is-recommended::after{top:4px;inset-inline-start:auto;inset-inline-end:2px}
/* 25px of line box is not a target a thumb can hit, and the FAQ is the main
thing anyone touches on this page. The padding moves from the details to the
summary, so the row keeps its height and the target grows to 45px. */
.faq-list details{padding:2px 0}
.faq-list summary{padding-block:10px}
.sec .browser-cta .browser-cta-download{display:inline-flex;align-items:center;min-height:44px}
}
/* The three hero slabs are 228+228+204 = 660 plus two gaps. The paper is 691 wide
at 768px, so the gap has to come down to keep them on one row there; above
900px there is 764px of paper and the wider gap stays. */
@media(max-width:900px){
.hero-actions{gap:8px 12px}
}
/* The two service slabs are 214px wide, so a pair plus the gap needs 446px of
paper. The paper runs out of that at about 500px of viewport, and the pair
would wrap to two lines while still being drawn at full size — one middle tier
here shrinks them instead, before the 430px tier shrinks them again. */
@media(max-width:520px){
.hero-extra .hero-service{width:182px;height:62px;padding:0 14px 3px;gap:7px;font-size:15px}
}
@media(max-width:430px){
.paper-in{padding-inline:12px}
.hero-title{font-size:23px}
.hero-copy{margin-bottom:13px}
/* 165px of slab cannot hold "הורדה מומלצת ל־Windows" on one line, so the pair
sat side by side with both labels broken across two lines and the Discord
slab alone underneath — a ragged 2+1. One slab per row at a width the longest
label fits is both calmer and easier to hit. */
.hero-actions{gap:7px 8px}
.hero-actions .flash-btn{width:min(266px,100%);height:54px;font-size:14px}
.hero-actions .discord-btn{width:min(266px,100%);gap:6px;padding-inline:12px}
.hero-extra{gap:5px 9px;margin-top:9px}
.hero-extra .hero-service{width:165px;height:56px;padding:0 11px 3px;gap:6px;font-size:14px}
.section-title{font-size:21px}
.sec p{font-size:14px}
.games-stage{padding:12px 10px 10px}
.footerSep{margin:0 4px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
/* Compact paper notice: it uses the original site's paper texture and leaf art. */
.browser-cta{position:relative;margin:12px 0 0;padding:21px 25px;overflow:hidden;border:1px solid #a9b77f;outline:3px solid #fff7c7;background:#fbf3d3 url(/ekoloko/website/common/images/tileable_iw.jpg) repeat;box-shadow:0 5px 10px rgba(24,56,79,.16);text-align:right}
.browser-cta::before{content:"";position:absolute;inset-block-start:-9px;inset-inline-start:-8px;width:76px;height:60px;background:url(/assets/login/leaf.png) center/contain no-repeat;opacity:.3;pointer-events:none;transform:rotate(-18deg)}
.browser-cta-copy{position:relative;z-index:1;max-width:650px}
.browser-cta-copy .Title{margin:7px 0 8px;font-size:25px}
.browser-cta-copy p{max-width:625px;margin:0 0 9px;color:var(--muted);font-size:15px;line-height:1.7}
.browser-cta-copy .browser-cta-note{color:#415c37!important;font-size:14px!important}
.browser-badge{display:inline-block;padding:3px 9px 4px;border:1px solid #dceab1;background:#759a37;color:#fff;font:700 13px/1.35 'GanCLM',Arial,sans-serif;text-shadow:0 1px 1px rgba(35,70,5,.58)}
.browser-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;margin-top:14px}
.browser-cta .flash-btn{width:196px;height:58px;padding:0 16px 4px}
.sec .browser-cta .browser-cta-download{color:#486c30!important;font-size:14px;font-weight:800;text-decoration:none;text-underline-offset:3px;border-bottom:1px dotted currentColor}
.sec .browser-cta .browser-cta-download:hover,.sec .browser-cta .browser-cta-download:focus-visible{color:#274d1d!important;border-bottom-style:solid}
@media(max-width:620px){.browser-cta{margin-top:10px;padding:18px 16px}.browser-cta-copy .Title{font-size:22px}.browser-cta-actions{gap:8px 14px}.browser-cta .flash-btn{width:180px;height:56px}.browser-cta-copy p{font-size:14px}}
/* Navigation intentionally lives only in site-nav.css. */
.android-download{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:center;padding:28px 24px;border:1px solid var(--paper-line);background:var(--green-soft)}
.download-kicker{display:inline-block;margin-bottom:5px;color:var(--orange-dark);font-weight:800}.download-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;padding:0;list-style:none;font-size:13px;font-weight:700;color:var(--green-dark)}.download-facts li::before{content:'✓';margin-inline-end:5px;color:var(--green)}
.android-download-button{width:210px;height:64px;padding:0 18px 4px;background-image:url(/assets/login/btn-orange-slab.png);text-shadow:0 2px 0 var(--orange-dark)}
@media(max-width:620px){.android-download{grid-template-columns:1fr;padding:22px 16px}.android-download-button{justify-self:center}}
/* ===========================================================================
Original Ekoloko website chrome — added 2026-08-31
Spec: docs/superpowers/specs/2026-08-31-ekoloko-index-original-chrome-design.md
index.html no longer loads site-nav.css, so everything the shared navigation
used to paint is redefined here from the original assets. Geometry follows
chat/styles.css, which is the already-verified implementation of this header.
=========================================================================== */
/* --navy shipped as #2c5117, a green. The original site text is #18384f.
--eko-chrome exists only because .footrow reads
var(--eko-chrome, ); with site-nav.css gone the fallback
would paint a modern green bar where the original footer was plain lime. */
html:root{
--lime:#abd93f;
--navy:#18384f;
--muted:#4a6076;
--band:linear-gradient(180deg,#18384e 0%,#295f83 10%,#326486 45%,#2c5a78 70%,#224d6a 88%,#1d435d 100%);
--eko-chrome:transparent;
--eko-chrome-edge:transparent;
}
/* bg_ext.jpg is 8x242 and carries the blue menu band itself: lime to y=93,
rule #18384F at y=95, gradient peaking #326485 near y=110, #173750 at y=138,
lime again from y=140. Repeating it on x reproduces the original band across
the full viewport at the original position and gradient. Nothing is redrawn,
so there is no separate band element. */
html,body{background:var(--lime) url(/ekoloko/website/common/images/bg_ext.jpg) repeat-x top center}
.ek{background:transparent;color:var(--navy);font-family:Arial,'Segoe UI',sans-serif}
/* Original type: one .Title size for page and section headings, body at 15px. */
.Title,.hero-title,.section-title{margin-bottom:10px;color:var(--navy);font-family:Arial,'Segoe UI',sans-serif;font-size:24px;font-weight:bold;line-height:1.28}
.section-title{margin-bottom:6px}
.sec p,.hero-copy,.section-lede{font-size:15px}
.download-row h3,.faq-list summary{font-family:Arial,'Segoe UI',sans-serif}
.game-shot img{border:1px solid #a7b793}
/* --- Header: original 1200px strip, 154px tall ---------------------------- */
.top{position:relative;height:154px;overflow:hidden;
background-image:url(/ekoloko/website/common/images/header_left.jpg),url(/ekoloko/website/common/images/header_right.jpg);
background-repeat:no-repeat,no-repeat;
background-position:calc(50% - 600px) top,calc(50% + 453px) top;
background-size:93px 154px,147px 154px}
.top-in{position:relative;max-width:1200px;height:100%;margin:0 auto}
.site-brand{position:absolute;z-index:2;top:4px;inset-inline-start:34px;display:block;width:200px}
.top-logo{position:static;display:block;width:200px;height:auto;filter:drop-shadow(0 2px 4px rgba(24,56,79,.28))}
/* 861px of sprites inside the 880px the original menu leaves between the two
header edges. The strip reads right-to-left like the rest of the page, so
"מידע להורים" sits nearest the reader and "יצירת קשר" last — the same order
the previous header rendered, and the only order that reads correctly in
Hebrew. */
.top-nav{position:absolute;z-index:20;top:87px;inset-inline-start:170px;inset-inline-end:150px;height:59px;
display:flex;direction:rtl;align-items:flex-start;justify-content:center;background:transparent;border:0}
.nav-item{height:59px;flex:0 0 auto}
.nav-item>a{display:block;height:59px;color:transparent;font:0/0 a;white-space:nowrap;text-indent:-9999px;
overflow:hidden;background-repeat:no-repeat;background-position:center top;transition:none}
/* The outline is not optional decoration: _over and _up differ only in shading,
which is not a focus signal for anyone driving the page from the keyboard. */
.nav-item>a:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* The file names in assets/menu do not match their contents — fun-1_up.png
reads "הורים", parents-1_up.png reads "חלוצים", contact-1_up.png reads
"בלוג אקולוקו". Verified by eye; the mapping below is the corrected one. */
.nav-item[data-m="parents"]>a{width:138px;background-image:url(/assets/menu/fun-1_up.png)}
.nav-item[data-m="parents"]>a:hover,.nav-item[data-m="parents"]>a:focus-visible{background-image:url(/assets/menu/fun-2_over.png)}
.nav-item[data-m="parents"]>a:active{background-image:url(/assets/menu/fun-3_down.png)}
.nav-item[data-m="fun"]>a{width:138px;background-image:url(/assets/menu/pioneers-1_up.png)}
.nav-item[data-m="fun"]>a:hover,.nav-item[data-m="fun"]>a:focus-visible{background-image:url(/assets/menu/pioneers-2_over.png)}
.nav-item[data-m="fun"]>a:active{background-image:url(/assets/menu/pioneers-3_down.png)}
.nav-item[data-m="pioneers"]>a{width:158px;background-image:url(/assets/menu/parents-1_up.png)}
.nav-item[data-m="pioneers"]>a:hover,.nav-item[data-m="pioneers"]>a:focus-visible{background-image:url(/assets/menu/parents-2_over.png)}
.nav-item[data-m="pioneers"]>a:active{background-image:url(/assets/menu/parents-3_down.png)}
.nav-item[data-m="help"]>a{width:112px;background-image:url(/assets/menu/blog-1_up.png)}
.nav-item[data-m="help"]>a:hover,.nav-item[data-m="help"]>a:focus-visible{background-image:url(/assets/menu/blog-2_over.png)}
.nav-item[data-m="help"]>a:active{background-image:url(/assets/menu/blog-3_down.png)}
.nav-item[data-m="blog"]>a{width:182px;background-image:url(/assets/menu/contact-1_up.png)}
.nav-item[data-m="blog"]>a:hover,.nav-item[data-m="blog"]>a:focus-visible{background-image:url(/assets/menu/contact-2_over.png)}
.nav-item[data-m="blog"]>a:active{background-image:url(/assets/menu/contact-3_down.png)}
.nav-item[data-m="contact"]>a{width:133px;background-image:url(/assets/menu/help-1_up.png)}
.nav-item[data-m="contact"]>a:hover,.nav-item[data-m="contact"]>a:focus-visible{background-image:url(/assets/menu/help-2_over.png)}
.nav-item[data-m="contact"]>a:active{background-image:url(/assets/menu/help-3_down.png)}
/* --- Footer: original lime, no bar --------------------------------------- */
.footrow{background:transparent;border-top:0}
/* --- 1200-1239px: keep the original stage whole ---------------------------- */
/* homepage.css collapses .scene and drops the palms below 1240px, which would
have stripped the palms from the 1200px reference width where the 1200px
stage fits exactly. overflow-x:clip already absorbs the ~15px a scrollbar
takes, so the stage is restored from 1200px up. */
@media(min-width:1200px){
.scene{max-width:1200px;grid-template-columns:143px 860px 197px}
.scene>.palm{display:block}
}
/* --- Below 1200px: the 1200px stage stops fitting -------------------------- */
/* The header edges are pinned to calc(50% ± …) and would be sliced, so they go
with the palms; dropping the nav insets leaves the full width for the 861px
of sprites. */
@media(max-width:1199px){
.top{background-image:none}
.top-nav{inset-inline:0;padding:0 10px}
}
/* --- Below 900px: the sprites stop fitting ------------------------------- */
/* 861px of fixed-width art cannot be made to fit, and wrapping it inside a
154px box would drop it onto .scene. Same markup, no JavaScript: the art is
dropped and the Hebrew link text that was always in the DOM is revealed on
the original band, which is now in normal flow. Because .top and .top-nav
are static here, .scene starts after them and overlap is impossible.
!important is needed on width and background-image only because the
[data-m] rules above are more specific than .nav-item>a. */
@media(max-width:899px){
html,body{background-image:none}
.top{height:auto;overflow:visible}
.top-in{height:auto;max-width:100%;padding:8px 0 0;text-align:center}
.site-brand{position:static;inset:auto;width:190px;margin:0 auto}
.top-logo{width:190px}
.top-nav{position:static;inset:auto;height:auto;margin-top:8px;padding:4px 6px;
direction:rtl;flex-wrap:wrap;justify-content:center;background:var(--band)}
.nav-item{height:auto}
.nav-item>a{width:auto!important;height:auto;padding:0 13px;overflow:visible;
color:#fff;font:bold 15px/40px Arial,'Segoe UI',sans-serif;text-indent:0;
background-image:none!important;text-shadow:0 1px 2px rgba(10,35,55,.45)}
.nav-item>a:hover,.nav-item>a:focus-visible{background-image:none!important;text-decoration:underline}
}