/* Bilateral Navigator — portal stylesheet, shared by every service. Palette and metrics are the demo files' in tmp/, kept verbatim so the two can be compared side by side. The demo hardcodes Croatia and Sweden as `hr`/`se`; here the two sides are `c1`/`c2`, because the Library renders any pair. */ :root{ --navy:#0E1F33; --navy-deep:#091625; --navy-panel:#132A44; --navy-card:#10233B; --sky:#4FB8E7; --sky-soft:#9AD4F0; --c1-ink:#7FA3DD; --c2-ink:#29ADE4; --sim-c1:#2F5D9E; --sim-c2:#00A0E2; --text:#E7F0F7; --text-soft:#A9BDCF; --line:rgba(79,184,231,.16); --stripe:rgba(255,255,255,.045); --radius:14px; --shadow:0 12px 32px rgba(4,12,22,.5); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html,body{overflow-x:hidden;max-width:100vw} body{font-family:'Albert Sans',system-ui,sans-serif;background:var(--navy); color:var(--text);min-height:100vh} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:var(--sky);text-decoration:none} img{max-width:100%} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } /* Barely-there scrollbars, everywhere. */ *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent} *::-webkit-scrollbar{width:5px;height:5px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px} *::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)} /* ===== topbar ===== */ .topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center; gap:14px;padding:12px 22px;background:rgba(9,22,37,.93); backdrop-filter:blur(9px);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:baseline;gap:7px;white-space:nowrap;font-size:15px} .brand b{font-weight:800} .brand span{color:var(--sky);font-weight:600} .topnav{font-size:12.5px;color:var(--text-soft);white-space:nowrap;min-width:0; overflow:hidden;text-overflow:ellipsis} .topnav a{color:var(--text-soft)} .topnav a:hover{color:var(--text)} .topnav .sep{opacity:.5;margin:0 8px} /* ===== flag disc ===== */ .cflag{display:inline-flex;width:18px;height:18px;border-radius:50%; overflow:hidden;flex:0 0 auto;background:#28466B; box-shadow:0 0 0 1px rgba(255,255,255,.22)} .cflag img{width:100%;height:100%;object-fit:cover} .cflag.big{width:24px;height:24px} .cflag.sm{width:15px;height:15px} /* ===== page frame ===== */ .wrap,.subwrap{max-width:1220px;margin:0 auto;padding:28px 20px 80px} .pv-foot{max-width:1220px;margin:0 auto;padding:16px 20px 40px;font-size:12px; color:var(--text-soft);border-top:1px solid var(--line);line-height:1.6} @media (max-width:640px){.wrap,.subwrap{padding:20px 12px 60px}} /* ===== index: heading ===== */ .flags{display:flex;gap:8px;margin-bottom:14px} .flags .cflag{width:34px;height:34px} h1{font-size:clamp(26px,4vw,44px);font-weight:800;line-height:1.1;margin-bottom:10px} h1 span{color:var(--sky)} .lede{font-family:'Source Serif 4',serif;font-size:16.5px;line-height:1.65; color:var(--text-soft);max-width:730px} .hint{margin-top:10px;font-size:12px;color:var(--text-soft)} /* ===== index: ten square flip tiles ===== */ .chgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px} @media(min-width:900px){.chgrid{grid-template-columns:repeat(5,1fr);gap:18px}} .tile{position:relative;aspect-ratio:1/1;perspective:1100px;cursor:pointer} .flip{position:absolute;inset:0;transform-style:preserve-3d; transition:transform .6s cubic-bezier(.22,1,.36,1)} .tile.flipped .flip{transform:rotateY(180deg)} @media(hover:hover){.tile:hover .flip{transform:rotateY(180deg)}} /* Focus is not gated on hover: a Tab key exists on touch hardware too, and without this the next tab stop after the tile is a link on the hidden back face. */ .tile:focus-within .flip{transform:rotateY(180deg)} .face{position:absolute;inset:0;backface-visibility:hidden; -webkit-backface-visibility:hidden;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line)} /* A chapter with no opener picture keeps the tile, on a flat panel ground. */ .front{background:var(--navy-panel)} .front img{width:100%;height:100%;object-fit:cover;display:block} .front::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(9,22,37,.03),rgba(9,22,37,.42) 52%,rgba(9,22,37,.95))} /* The menu title standard, shared with the service matrix (.mtile .lab): the number sits in a fixed-width right-aligned column so chapter 10 lines up with the single digits beside it, a hairline separates it from the title, and the title breaks across two lines. Replaces a stacked "CHAPTER 01" that spent a line on a word every tile repeated. */ .front .fl{position:absolute;left:12px;right:12px;bottom:11px;z-index:2; display:flex;align-items:center;gap:9px} .front .n{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600; color:var(--sky-soft);line-height:1;flex:0 0 auto; font-variant-numeric:tabular-nums;min-width:2ch;text-align:right} .front .vr{flex:0 0 auto;width:1px;align-self:stretch;background:var(--sky-soft); opacity:.5} .front .cn{font-size:clamp(13.5px,1.5vw,19px);font-weight:800;line-height:1.15; min-width:0;color:var(--text);text-shadow:0 2px 12px rgba(0,0,0,.65)} .front .cn w{display:block} /* The connector in a title like "Communication & Media" is greyed so the two real words carry the weight. */ .amp{color:rgba(255,255,255,.42);font-weight:700} .front .turn{position:absolute;top:10px;right:11px;z-index:2;font-size:15px; color:#fff;opacity:.8} .back{transform:rotateY(180deg);background:linear-gradient(160deg,#123457,#0a1a2e); display:flex;flex-direction:column;padding:9px} .back .bh{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--sky);font-weight:800;margin-bottom:4px;line-height:1.15;flex:0 0 auto} .back .bl{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-height:0; justify-content:safe center;overflow:auto} .back a{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:7px; font-size:clamp(10px,1.05vw,13px);font-weight:600;color:var(--text); line-height:1.12;transition:background .15s} .back a:hover,.back a:focus-visible{background:rgba(79,184,231,.16);outline:none} .back a .d{width:5px;height:5px;border-radius:50%;background:var(--sky);flex:0 0 auto} /* ===== section: sub-head ===== */ .sub-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap; padding-bottom:20px;border-bottom:1px solid var(--line)} .sub-head h1{font-size:clamp(24px,3.4vw,40px);font-weight:800;margin:6px 0 8px} /* B1 of the prototype's 2026-08-30 change set: the header is the badge and the title, and the title column carries no width floor. `flex:1 1 0` with `min-width:0` is what lets a long title WRAP inside its own column instead of pushing the header wider; the old `min-width:240px` forced the whole title block onto its own line under the badge on a narrow phone. Two lines of title beside the badge is the intended look. The `.flagpair` and `.signrow` rules that stood here went with the markup B1 removed. */ .sub-head .headtitle{flex:1 1 0;min-width:0} .sub-head .headtitle h1{margin:0} .outcome{font-family:'Source Serif 4',serif;font-style:italic;font-size:16px; color:var(--text-soft);max-width:680px;line-height:1.6} .outcome mark{background:none;color:var(--sky);font-style:normal;font-weight:600} /* B2: the third-country paragraph now closes the page under the similarity chart, where it is a paragraph of its own rather than part of the header block. The prototype writes this as `.closenote+.outcome`; here every element is wrapped in a `.pv-el`, so the chart's `.closenote` is not the outcome's sibling and the rule is hung on the position instead. */ main>.outcome{margin-top:16px} .section-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--sky);font-weight:700;margin:34px 0 13px} /* ===== section: similarity ring ===== */ .headviz{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto} .ring{flex:0 0 auto;width:96px;height:96px;position:relative} .ring svg{width:100%;height:100%;transform:rotate(-90deg)} .ring .track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:8} .ring .arc{fill:none;stroke:var(--sky);stroke-width:8;stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)} .ring .val{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;font-family:'IBM Plex Mono',monospace;font-weight:600; font-size:19px;color:#fff} .ring .val small{font-size:12px;color:var(--sky);margin-left:1px} @media (max-width:640px){.headviz{flex-direction:row;align-items:center;gap:14px}} /* ===== section: two-column layout ===== */ .sublayout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px; align-items:start;margin-top:4px} .pv-el{min-width:0} .rail .section-label{margin-top:0} /* ===== section: reader card ===== */ .reader{background:var(--navy-card);border:1px solid var(--line); border-radius:var(--radius);padding:22px 24px} .prose{font-family:'Source Serif 4',serif;font-size:15.5px;line-height:1.72;color:#D5E2ED} .prose p+p,.prose .more p{margin-top:12px} .pv-h3{font-size:16px;font-weight:800;margin-bottom:10px} /* Open by default so the page reads with the script blocked; library.js adds .folded on load and .expanded on click. */ .reader.folded .more,.narr.folded .more{display:none} .reader.folded.expanded .more,.narr.folded.expanded .more{display:block;margin-top:12px} .linkbtn{margin-top:13px;color:var(--sky);font-weight:700;font-size:13px; display:none;align-items:center;gap:6px} .reader.folded>.linkbtn,.narr.folded>.linkbtn{display:inline-flex} .linkbtn:hover{text-decoration:underline} .linkbtn .chev{transition:transform .25s;display:inline-block} .reader.expanded>.linkbtn .chev,.narr.expanded .linkbtn .chev{transform:rotate(180deg)} @media (max-width:1020px){ /* align-items:stretch is REQUIRED. The base .sublayout rule sets align-items:start for the two-column grid, and in a flex column that same declaration stops the children stretching: .rail collapses to its content width (58px measured in WebKit) and the image strip shows two thirds of one thumbnail. Chromium stretches regardless, which is why this only ever showed on iPhone. The prototype's _tools/fix_mobile_rail.py. */ .sublayout{display:flex;flex-direction:column;align-items:stretch; /* B3 of the 2026-08-30 change set: the rail moves above the text here, so the gallery sits directly on top of the Introduction heading. The 30px column gap plus the 34px heading margin left 64px of air between a strip of thumbnails and the first line of reading. Halved, on both halves -- the heading half is the rule below. */ gap:15px} /* Named by position, not by wrapper class. The renderer's own wrapper is `.pv-el` and the prototype has a bare `.section-label`; hanging the rule on either one alone means a template change on the other side silently restores the 34px. Both forms are covered. */ .sublayout>main>:first-child .section-label:first-child, .sublayout>main>.section-label:first-child{margin-top:17px} .rail{order:-1;min-width:0;max-width:100%;width:100%;align-self:stretch} } /* ===== section: image rail ===== */ .thumbs{display:flex;flex-direction:column;gap:13px} .thumb{border-radius:12px;overflow:hidden;background:var(--navy-card); border:1px solid var(--line);text-align:left; transition:transform .25s ease,border-color .25s ease;flex:0 0 auto} .thumb:hover,.thumb:focus-visible{transform:translateY(-3px);border-color:var(--sky)} /* Two frames, because the pictures come in two shapes: the RESIZED_V derivative is 536x720 and the RESIZED_H one 720x521. One 3/4 frame for both meant `cover` cut a landscape photo down to 54% of its width. `.h` is set from the picture's `format` (see el/images.html.j2), so the frame matches the file and nothing is lost. Custom uploads that follow neither shape are still cover-cropped into whichever frame their format names. */ .thumb .ph{aspect-ratio:536/720;position:relative;display:block} .thumb .ph.h{aspect-ratio:720/521} .thumb .ph .phimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Whose picture this is. Top left over the photograph, above the image but below nothing else -- the thumb has no other overlay. The ring is what keeps an 18px flag legible against an arbitrary photograph. */ .thumb .cc{position:absolute;top:9px;left:9px;z-index:1;display:block} .thumb .cc .cflag{width:18px;height:18px;box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.55)} .thumb .tt{display:block;padding:8px 11px;font-size:11.5px;font-weight:600; line-height:1.35;color:var(--text)} .thumb.selected{border-color:var(--sky);box-shadow:0 0 0 1px var(--sky)} /* The caption is in the markup so it is readable without JavaScript. Once the script runs the viewer shows it in full, so the rail hides it. */ .thumb .tcap{display:block;padding:0 11px 9px;font-size:11px;line-height:1.4; color:var(--text-soft)} .js .thumb .tcap{display:none} /* ===== section: image viewer popup ===== A fixed panel, vertically centred in the viewport, whose right edge tracks the image rail's left edge through `--vx` (library.js measures the rail). It used to be an in-flow panel above the two columns, which meant opening a thumb from halfway down a long section threw the reader back to the top of the page. Nothing scrolls now. With the script blocked the panel is never filled and `.open` never added, so it stays invisible and inert and the rail's own `.tcap` captions carry the text instead (see `.js .thumb .tcap`). */ .viewer{position:fixed;z-index:70;top:50%;right:var(--vx,20px); transform:translateY(-50%) scale(.97);transform-origin:100% 50%; opacity:0;pointer-events:none; transition:opacity .28s ease,transform .28s cubic-bezier(.22,1,.36,1)} .viewer.open{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)} /* The dimmed page behind the popup. A pseudo-element rather than a node: there is nothing to keep in sync, and a click on it reports `.viewer` itself as the target (pseudo-element boxes hit-test as their originator), which is how library.js separates a backdrop click from a click on the panel. */ .viewer.open::before{content:'';position:fixed;inset:0;z-index:-1; background:rgba(4,10,18,.62);backdrop-filter:blur(2px)} /* The panel is shaped by the picture, like the rail's frames above: `--ar` and `--wmax` hold the two shapes and library.js flips them by adding `.h` from the thumb's data-fmt. Landscape gets the wider cap since 400px would leave it only 290px tall. Width follows the viewport height as well as the cap, not a flat --wmax: a 400px-wide portrait panel stands 537px tall, and a vertically centred panel that tall overflows a short window at both ends, where an in-flow one merely got scrolled past. The third term keeps a wide panel off the left edge — --vx is the gap the popup keeps from the right (see .viewer), so it is also how much room is left. The vh line is the fallback for browsers without svh — a dropped `width` would collapse the panel, since .big's img is positioned. */ .viewer-in{--ar:.744;--wmax:400px;position:relative; width:min(var(--wmax),calc((100vh - 48px) * var(--ar)), calc(100vw - var(--vx,20px) - 24px)); width:min(var(--wmax),calc((100svh - 48px) * var(--ar)), calc(100vw - var(--vx,20px) - 24px)); border-radius:var(--radius);overflow:hidden;border:1px solid var(--sky); box-shadow:var(--shadow)} .viewer-in.h{--ar:1.382;--wmax:560px} .viewer-in .big{aspect-ratio:var(--ar);position:relative;display:block} .viewer-in .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vcap{position:absolute;left:0;right:0;bottom:0;z-index:2;max-height:40%; overflow-y:auto;background:linear-gradient(180deg,rgba(4,10,18,0),rgba(4,10,18,.78) 26%); padding:16px 14px 10px} .vcap .vt{font-size:13.5px;font-weight:800;color:#fff;line-height:1.3} .vcap .vd{font-size:11px;color:#D9E6F0;line-height:1.5;margin-top:4px} .vclose{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px; border-radius:50%;background:rgba(4,10,18,.6);color:#fff;font-size:14px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.3)} .vclose:hover{background:rgba(4,10,18,.85)} @media (max-width:1020px){ /* align-items:flex-start, because the row holds both frames now: the default stretch would give a 104px-wide landscape card the height of a portrait one and leave the difference blank under the photo. */ .thumbs{flex-direction:row;align-items:flex-start; overflow-x:auto;overflow-y:hidden;padding-bottom:8px; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; touch-action:pan-x;scroll-snap-type:x proximity} .thumb{flex:0 0 104px;scroll-snap-align:start} .thumb .tt{display:none} .thumb:hover,.thumb:focus-visible{transform:none} /* The rail is above the main column here, so "left of the images" has no meaning: centre the popup instead. --vx is left unread. */ .viewer{right:auto;left:50%;transform:translate(-50%,-50%) scale(.97); transform-origin:50% 50%} .viewer.open{transform:translate(-50%,-50%) scale(1)} .viewer-in{width:min(var(--wmax),calc(100vw - 32px), calc((100vh - 48px) * var(--ar))); width:min(var(--wmax),calc(100vw - 32px), calc((100svh - 48px) * var(--ar)))} } /* ===== section: table ===== .trow0, .thead and .trowbtn share one column template so the three stay aligned; the responsive rules below drop Source, then Year, from all of them at once. */ .tblwrap{background:var(--navy-card);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden} .tscroll{overflow-x:auto} .trow0,.thead,.trowbtn{display:grid;gap:2px;align-items:center;padding:0 12px; grid-template-columns:minmax(200px,1fr) 74px 24px 30px 24px 74px 38px 48px 20px} .trow0{background:var(--navy-deep);padding-top:10px;padding-bottom:2px} .trow0 .t-title{font-weight:800;font-size:14px;color:#fff} .trow0 .t-cty{font-weight:800;font-size:14px;letter-spacing:.02em; display:inline-flex;align-items:center;gap:7px} .trow0 .t-cty.c1{grid-column:2/4;justify-content:flex-end;color:var(--c1-ink)} .trow0 .t-cty.c2{grid-column:5/7;justify-content:flex-start;color:var(--c2-ink)} .thead{background:var(--navy-deep);font-size:10px;letter-spacing:.08em; text-transform:uppercase;font-weight:700;color:var(--text-soft)} .thead>span{padding:7px 0 9px;text-align:center} .thead .h-ind{text-align:left} .tgroup{padding:9px 16px 5px;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--sky);font-weight:700; background:rgba(79,184,231,.06);border-top:1px solid var(--line)} .trow{border-top:1px solid rgba(255,255,255,.05)} .trow.tint .trowbtn{background:var(--stripe)} .trowbtn{width:100%;text-align:left;padding-top:8px;padding-bottom:8px; transition:background .2s} .trowbtn:hover:not(.noexpand){background:rgba(79,184,231,.09)!important} .trowbtn:focus-visible{outline:2px solid var(--c2-ink);outline-offset:-2px} /* A row with nothing to expand into is rendered as a plain div (see table.html.j2), not a