/* ========================================================================== Gralika — "Playful Pop" (design 1A) -------------------------------------------------------------------------- One page, two snap panels (landing / games) and a footer bar that is pinned on screen at all times. Tokens below come straight from the design handoff. ========================================================================== */ :root{ /* --- palette ------------------------------------------------------- */ --navy:#123A6B; /* headings, ink, primary labels */ --navy-deep:#0e2748; /* footer background */ --teal:#17AEA6; /* Equations */ --coral:#F65D7E; /* Time, accents, links */ --yellow:#F6B62A; /* Logic, the byline */ --green:#5CB82E; /* Movement, primary CTA */ --paper:#FBFAF6; /* page background */ --muted:#5c6a86; --muted-2:#6b7893; --foot-muted:#5f7ba0; --foot-text:#9fb4d0; /* category tint pairs: soft background + saturated text */ --eq-bg:#e2f5f3; --eq-fg:#17AEA6; --time-bg:#fde4ea; --time-fg:#F65D7E; --mov-bg:#e8f5e0; --mov-fg:#4a9e22; --logic-bg:#fbf0d5;--logic-fg:#c9971a; --new-bg:#dcecfb; --new-fg:#1c74b8; --pct-bg:#fdeadd; --pct-fg:#c2601b; --neg-bg:#ece7fb; --neg-fg:#6b4fc7; /* --- shape --------------------------------------------------------- */ --r-pill:26px; --r-card:16px; --r-hero:18px; --r-chip:16px; --card-line:1px solid rgba(18,58,107,.05); --sh-card:0 8px 20px -10px rgba(18,58,107,.25); --sh-hero:0 12px 26px -12px rgba(18,58,107,.35); --sh-cta:0 8px 18px -4px rgba(92,184,46,.5); --sh-nav:0 4px 14px rgba(18,58,107,.08); /* --- type ---------------------------------------------------------- */ --display:"Fredoka","Rubik","Segoe UI",system-ui,-apple-system,sans-serif; --body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif; /* --- frame --------------------------------------------------------- Desktop: a fixed sidebar on the left, no top bar. Phones flip these (see the media query at the foot of the sidebar section) to a top bar with no side column. Everything else positions off these two tokens. */ --side-w:clamp(200px,14vw,248px); --top-h:0px; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;height:100%} body{ font-family:var(--body); background:var(--paper); color:var(--navy); -webkit-font-smoothing:antialiased; overflow:hidden; /* the scroller below owns the scrolling */ } img{display:block;max-width:100%} a{color:var(--coral);text-decoration:none} a:hover{color:var(--navy)} h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;color:var(--navy)} /* language visibility — everything marked [data-lang] shows only under the matching , so the page is right before any script runs */ html[lang="uk"] [data-lang="en"]{display:none !important} html[lang="en"] [data-lang="uk"]{display:none !important} /* the contact block is Ukrainian-only */ html[lang="en"] [data-uk-only]{display:none !important} .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,3vw,44px)} /* ========================================================================== Sidebar -------------------------------------------------------------------------- Fixed navy column on the left holding the brand, section links, the language switch and the contact block. The main area (scroller + game view) starts at --side-w, so a game fills the whole right of the screen. ========================================================================== */ .side{ position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:40; background:var(--navy-deep);color:#fff; display:flex;flex-direction:column; padding:22px 18px;gap:20px;overflow:hidden; } .side-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .side-brand{display:flex;align-items:center;color:#fff} .side-brand:hover{color:#fff} /* the full lockup image fills the column width */ .side-brand img{width:100%;max-width:204px;height:auto;display:block} /* hamburger — phone only */ .side-toggle{ display:none;width:42px;height:42px;flex:0 0 auto;cursor:pointer; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06); border-radius:12px;padding:0;align-items:center;justify-content:center; } .side-toggle span,.side-toggle span::before,.side-toggle span::after{ content:"";display:block;width:18px;height:2px;border-radius:2px;background:#fff;position:relative; } .side-toggle span::before{position:absolute;top:-6px} .side-toggle span::after{position:absolute;top:6px} /* the stack of nav + language + contact */ .side-menu{ flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;overflow-y:auto; } .side-nav{display:flex;flex-direction:column;gap:6px} .side-nav a{ display:flex;align-items:center;gap:12px; font-family:var(--display);font-weight:500;font-size:16px;color:#c8d6ea; padding:11px 14px;border-radius:13px; transition:background .16s,color .16s; } .side-nav a svg{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .side-nav a:hover{color:#fff;background:rgba(255,255,255,.07)} .side-nav a.active{color:#fff;background:rgba(92,184,46,.22)} .side-nav a.active svg{color:var(--green)} /* --- language switch ------------------------------------------------- */ .lang{ display:inline-flex;align-items:center;gap:5px;align-self:flex-start; background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14); border-radius:22px;padding:3px; } .lang button{ display:flex;align-items:center;gap:7px; font-family:var(--display);font-weight:500;font-size:13px;color:#9fb0c9; background:none;border:0;cursor:pointer; padding:6px 13px 6px 7px;border-radius:17px; transition:background .16s,color .16s; } .lang button:hover{color:#fff} .lang button[aria-current="true"]{background:#fff;color:var(--navy);font-weight:600} .flag{ position:relative;width:20px;height:20px;border-radius:50%;overflow:hidden; flex:0 0 auto;display:inline-block;border:1px solid rgba(255,255,255,.35); } .flag-ua{background:linear-gradient(#2f77c9 0 50%,var(--yellow) 50% 100%)} .flag-en{background:repeating-linear-gradient(#b22234 0 2px,#fff 2px 4px)} .flag-en::after{content:"";position:absolute;top:0;left:0;width:10px;height:9px;background:#3c3b6e} /* --- contact, pinned to the bottom of the column --------------------- */ .side-contact{margin-top:auto;display:flex;flex-direction:column;gap:14px; padding-top:18px;border-top:1px solid rgba(255,255,255,.1)} /* the photo sits on top, larger, with the name and role centred beneath it */ .side-author{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px} .side-author-text{min-width:0} .side-author .name{ font-family:var(--display);font-weight:600;font-size:15px;color:#fff; display:block;line-height:1.2; } .side-author .byline{ font-weight:700;font-size:11px;color:var(--yellow);letter-spacing:.01em; display:block;line-height:1.3;margin-top:3px; } .messengers{display:flex;flex-direction:column;gap:8px} .messenger{ display:flex;align-items:center;gap:10px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); padding:9px 14px;border-radius:12px;color:#fff; font-family:var(--display);font-weight:500;font-size:13px; transition:background .16s,transform .14s; } .messenger:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-1px)} .messenger img{width:17px;height:17px;flex:0 0 auto} .portrait{ width:78px;height:78px;border-radius:50%;flex:0 0 auto;object-fit:cover; border:2px solid rgba(255,255,255,.22);background:#1b3c66; display:flex;align-items:center;justify-content:center;overflow:hidden; font-family:var(--display);font-weight:600;font-size:27px;color:var(--foot-text); } /* the author photo fills the circle; it is square, so nothing is cropped */ .portrait img{width:100%;height:100%;object-fit:cover;display:block} /* --- phones: sidebar becomes a top bar with a drop-down menu --------- */ @media (max-width:820px){ :root{ --side-w:0px; --top-h:58px; /* fallback for older browsers */ --top-h:calc(58px + env(safe-area-inset-top,0px)); } .side{ top:0;left:0;right:0;bottom:auto;width:auto;height:var(--top-h); flex-direction:row;align-items:center;gap:12px; padding:0 16px; /* fallback for older browsers */ padding:env(safe-area-inset-top,0px) calc(16px + env(safe-area-inset-right,0px)) 0 calc(16px + env(safe-area-inset-left,0px)); overflow:visible; box-shadow:0 4px 16px rgba(14,39,72,.18); } .side-head{flex:1} .side-brand img{width:auto;max-width:none;height:38px} .side-toggle{display:flex} .side-menu{ position:absolute;top:var(--top-h);left:0;right:0; background:var(--navy-deep);flex:none;gap:16px; padding:14px 16px 20px;overflow-y:auto; max-height:calc(100vh - var(--top-h)); /* fallback for older browsers */ max-height:calc(100dvh - var(--top-h)); border-top:1px solid rgba(255,255,255,.08); box-shadow:0 16px 26px rgba(14,39,72,.28); display:none; } .side.open .side-menu{display:flex} .side-nav a{font-size:17px} .side-contact{margin-top:0} } /* ========================================================================== The scroller — two snap panels filling the area right of the sidebar ========================================================================== */ .scroller{ position:fixed;top:var(--top-h);left:var(--side-w);right:0;bottom:0; overflow-y:auto;overflow-x:hidden; scroll-snap-type:y mandatory; scroll-behavior:smooth; overscroll-behavior-y:contain; } .panel{ min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex;flex-direction:column; /* "safe" keeps the top of the content reachable when a panel outgrows the viewport — plain centring would push it above the scroll origin */ justify-content:safe center; padding:clamp(28px,5vh,64px) 0; } /* When a panel is taller than the viewport, forcing a snap would trap the reader mid-content — relax to proximity on short screens. */ @media (max-height:720px),(max-width:760px){ .scroller{scroll-snap-type:y proximity} } /* --- panel dots ------------------------------------------------------ */ .dots{ position:fixed;right:16px;top:50%;transform:translateY(-50%); z-index:35;display:flex;flex-direction:column;gap:9px; } .dots a{ width:9px;height:9px;border-radius:50%; background:rgba(18,58,107,.18);transition:background .2s,transform .2s; } .dots a:hover{background:rgba(18,58,107,.4)} .dots a.active{background:var(--green);transform:scale(1.3)} @media (max-width:820px){.dots{display:none}} /* ========================================================================== Landing panel ========================================================================== */ /* The landing content is a comfortable reading column, centred in the wide area to the right of the sidebar. */ .hero{max-width:780px} .hero-h1{ font-size:clamp(32px,4vw,50px);line-height:1.08;letter-spacing:-.01em; margin:0 0 14px; } .hero-h1 em{font-style:normal;color:var(--coral)} .hero-sub{ font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--muted); margin:0 0 24px; } /* featured card: artwork on top at its native 16:9, tinted chips underneath */ .featured{ display:block;border-radius:var(--r-hero);overflow:hidden; box-shadow:var(--sh-hero);border:1px solid rgba(18,58,107,.06); transition:transform .18s ease,box-shadow .22s ease; } .featured:hover{transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(18,58,107,.42)} .featured img{width:100%;aspect-ratio:16 / 9;object-fit:cover;object-position:center} .featured .chips{display:flex;flex-wrap:wrap;gap:7px;padding:13px 14px;background:#fff} .chip{ font-family:var(--display);font-weight:600;font-size:11.5px; padding:5px 12px;border-radius:var(--r-chip);white-space:nowrap; } .chip.new{background:var(--new-bg);color:var(--new-fg)} .chip.mov{background:var(--mov-bg);color:var(--mov-fg)} .chip.eq {background:var(--eq-bg); color:var(--eq-fg)} .chip.pct{background:var(--pct-bg);color:var(--pct-fg)} .chip.neg{background:var(--neg-bg);color:var(--neg-fg)} .chip.logic{background:var(--logic-bg);color:var(--logic-fg)} .cta-row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap} .btn{ font-family:var(--display);font-size:14px;border-radius:var(--r-pill); padding:11px 22px;border:0;cursor:pointer;white-space:nowrap; transition:transform .15s ease,box-shadow .2s ease; } .btn:hover{transform:translateY(-2px)} .btn-play{font-weight:600;color:#fff;background:var(--green);box-shadow:var(--sh-cta)} .btn-play:hover{color:#fff} .btn-ghost{font-weight:500;color:var(--navy);background:#fff;border:1.5px solid #e5e9f0;padding:11px 20px} .btn-ghost:hover{color:var(--navy);border-color:#d3dae6} /* ========================================================================== Games panel ========================================================================== */ .panel-title{font-size:clamp(22px,3vw,28px);margin:0 0 4px} .panel-sub{font-size:13.5px;color:var(--muted-2);margin:0 0 16px} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .filter{ font-family:var(--display);font-weight:500;font-size:12px; padding:6px 14px;border-radius:var(--r-chip);border:0;cursor:pointer; transition:filter .15s,transform .12s; } .filter:hover{transform:translateY(-1px);filter:brightness(.97)} .filter.all{color:var(--navy);background:#eaeef5} .filter.eq {color:var(--eq-fg); background:var(--eq-bg)} .filter.mov{color:var(--green);background:var(--mov-bg)} .filter.pct{color:var(--pct-fg);background:var(--pct-bg)} .filter.neg{color:var(--neg-fg);background:var(--neg-bg)} /* the selected state has to out-rank the per-category colours above, so it is declared last at the same specificity */ .filter[aria-pressed="true"]{font-weight:600;color:#fff;background:var(--navy)} /* -------------------------------------------------------------------------- Game cards — poster tiles -------------------------------------------------------------------------- Each card is a 16:9 art panel (the games' native art ratio) above a body. auto-fit + minmax lets the row hold as many tiles as fit while capping each one at ~420px, so on a 1080p screen (and larger) the cards stay a poster size instead of stretching. See the note handed to the client for the exact proportions. -------------------------------------------------------------------------- */ .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,420px)); gap:clamp(18px,1.8vw,28px); justify-content:start;align-items:start; } @media (max-width:520px){.grid{grid-template-columns:1fr}} .card{ display:flex;flex-direction:column; background:#fff;border-radius:var(--r-card);border:var(--card-line); overflow:hidden;box-shadow:var(--sh-card); transition:transform .18s ease,box-shadow .22s ease; } .card:hover{transform:translateY(-4px);box-shadow:0 16px 30px -12px rgba(18,58,107,.34)} .card.clickable{cursor:pointer} /* the whole card opens its game */ .card[hidden]{display:none !important} /* Both game cards are supplied at ~1.14:1 (the Solve the World card can't be cropped — its title sits in the bottom banner), so the grid uses that ratio. The landing hero card (.featured) stays 16:9 as a wide banner. */ .card-art{aspect-ratio:1341 / 1173;overflow:hidden;position:relative;flex:0 0 auto} .card-art img{width:100%;height:100%;object-fit:cover;object-position:center} /* stand-in art panel for a game with no illustration yet */ .card-art.art-eq{ display:grid;place-items:center; background:radial-gradient(120% 120% at 30% 20%,#e8faf7 0%,var(--eq-bg) 60%,#d3efec 100%); } .card-glyph{font-size:clamp(56px,7vw,84px);line-height:1;filter:drop-shadow(0 6px 12px rgba(18,58,107,.16))} .card-body{ display:flex;flex-direction:column;flex:1; padding:clamp(15px,1.4vw,20px) clamp(16px,1.5vw,22px) clamp(16px,1.5vw,20px); } .card-title{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,21px);color:var(--navy)} .card-meta{font-size:12.5px;font-weight:700;margin-top:3px} .card-meta.mov{color:var(--green)} .card-meta.eq{color:var(--eq-fg)} .card-meta.pct{color:var(--pct-fg)} .card-meta.neg{color:var(--neg-fg)} .card-desc{font-size:14.5px;line-height:1.5;color:var(--muted);margin:10px 0 0;flex:1} .pill-play{ align-self:flex-start;margin-top:16px; font-family:var(--display);font-weight:600;font-size:14px;color:#fff; background:var(--green);padding:10px 22px;border-radius:var(--r-pill); white-space:nowrap;box-shadow:var(--sh-cta); transition:transform .15s ease,box-shadow .2s ease; } .pill-play:hover{color:#fff;transform:translateY(-2px)} /* ========================================================================== Game view — a game runs here, inside the app -------------------------------------------------------------------------- It covers the panels but stops short of the nav and the footer, so both stay visible and usable the whole time you are playing. ========================================================================== */ .game-view{ position:fixed;top:var(--top-h);left:var(--side-w);right:0;bottom:0; z-index:38;background:var(--paper); display:flex;flex-direction:column; /* a small, even margin all round — the game renders a touch smaller and sits balanced in the space rather than pressed to the edges */ padding:clamp(16px,4vh,46px) clamp(16px,2.2vw,44px); } .game-view[hidden]{display:none} .game-frame{ flex:1;width:100%;min-height:0;border:0;display:block; background:var(--paper); } @media (max-width:620px){ /* full-bleed: the game gets the whole area below the top bar, insets and all — each game already manages its own internal padding. */ .game-view{ padding:0; /* fallback for older browsers */ padding-bottom:env(safe-area-inset-bottom,0px); } } /* ========================================================================== Phone touch targets -------------------------------------------------------------------------- A handful of controls fall under the ~44px comfortable-tap minimum at this width. Padding/min-height only — colours, radii and fonts are untouched. ========================================================================== */ @media (max-width:820px){ .filter{ display:inline-flex;align-items:center;justify-content:center; min-height:44px; } .lang button{min-height:44px} .messenger{min-height:44px} .pill-play{ display:inline-flex;align-items:center;justify-content:center; min-height:44px; } .side-toggle{width:44px;height:44px} } /* honour reduced-motion preferences everywhere */ @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} .scroller{scroll-behavior:auto} }