:root { --bg: #0c0c0e; --bg-alt: #131316; --text: #f2f0ea; --text-dim: #9a978f; --accent: #ffcc33; --ua-blue: #0057b7; --ua-yellow: #ffd700; --tile-border: #232226; --radius: 10px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; } body { min-height: 100vh; display: flex; flex-direction: column; } /* ---------- header ---------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 5vw, 56px); } .logo { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: 0.04em; } .logo-link { color: inherit; text-decoration: none; } .lang-toggle { position: relative; display: flex; align-items: center; width: 92px; height: 36px; padding: 3px; background: linear-gradient(90deg, var(--ua-blue) 50%, var(--ua-yellow) 50%); border: 1px solid var(--tile-border); border-radius: 999px; cursor: pointer; font-family: inherit; } .lang-option { flex: 1; z-index: 1; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; transition: color 0.25s ease; pointer-events: none; } .lang-option[data-value="en"] { color: #ffffff; } .lang-option[data-value="uk"] { color: #1a1a1a; } .lang-toggle[data-lang="en"] .lang-option[data-value="en"], .lang-toggle[data-lang="uk"] .lang-option[data-value="uk"] { color: #0c0c0e; } .lang-thumb { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); background: #ffffff; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.25s ease; } .lang-toggle[data-lang="uk"] .lang-thumb { transform: translateX(100%); } /* ---------- main / tagline ---------- */ main { flex: 1; padding: 0 clamp(20px, 5vw, 56px) 28px; } .tagline { margin: 0 0 18px; color: var(--text-dim); font-size: clamp(14px, 1.6vw, 17px); } /* ---------- grid ---------- */ .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; /* On the homepage (6 cols x 4 rows, square tiles), cap the grid's width based on viewport height so 4 rows of tiles plus the header/tagline/ footer chrome fit without scrolling on shorter screens — width is the free variable here since tiles are square (aspect-ratio 1/1), so capping width also caps the height the grid takes up. Falls back to full width on tall/narrow viewports where that's not the constraint. */ max-width: min(100%, calc(150vh - 340px)); margin: 0 auto; } @media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); max-width: 100%; } } /* clickable tiles render as instead of
— reset link styling and make sure it still behaves as a normal block grid item */ a.tile { display: block; color: inherit; text-decoration: none; } /* smaller version of the grid used at the top of tile-N.html pages, so people can browse to other tiles without leaving the detail page. Deliberately kept at 6 columns (same as the main homepage grid, not its own 8/4 column count) — tiles 9/10/15/16 are laid out as a 2x2 block that only lines back up into one image at exactly 6 columns, so this mini strip needs to match the homepage's column count or the montage falls apart when browsing from a tile-N.html page. Below 1100px the homepage grid itself drops columns (and the montage is no longer aligned there either), so there's nothing to stay in sync with — this strip instead keeps 6 columns and a small max-width all the way down, so it stays a compact nav strip instead of ballooning into oversized tiles that push the actual page content below the fold. */ .grid--mini { grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 420px; margin: 0 auto 28px; } @media (max-width: 480px) { .grid--mini { grid-template-columns: repeat(4, 1fr); max-width: 280px; } } /* Mini-grid tiles are far too small (~90px) for overlay text or fallback captions to stay legible, so all custom text overlays (front and back — e.g. the "Coming soon" placeholders) and the fallback caption are hidden in this strip; full text still shows normally on the homepage grid and in the profile section. */ .grid--mini .tile-overlay, .grid--mini .text-overlay .tile-caption { display: none; } @media (max-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ---------- tile ---------- */ .tile { aspect-ratio: 1 / 1; perspective: 1000px; } .tile-inner { position: relative; width: 100%; height: 100%; border-radius: var(--radius); } .tile-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: var(--radius); border: 1px solid var(--tile-border); overflow: hidden; display: flex; align-items: flex-end; padding: 12px; } /* Each face gets its own explicit resting/flipped angle rather than relying on a rotated parent + a locally-rotated child cancelling out. That nested-rotation composition is the "textbook" flip-card recipe, but some browser/GPU combos mis-render the settled 360deg state (the back face only flashes into view mid-transition, never staying visible) — almost certainly a floating point / compositing quirk. Rotating each face directly to an explicit target avoids relying on that cancellation entirely and is more broadly reliable. */ .tile-front { transform: rotateY(0deg); background: linear-gradient(150deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35)), linear-gradient(135deg, hsl(var(--h1), 62%, 40%), hsl(var(--h2), 62%, 22%)); } .tile-inner.flipped .tile-front { transform: rotateY(180deg); } /*