/* European Sovereignty Monitor One stylesheet, compiled by hand, no build step. Tokens first, then layout. Dark mode is a data-theme attribute on , set before first paint by default.hbs and toggled by js/theme.js. The system preference is the default on a first visit. */ :root { --paper: #f2f2f3; --ink: #1d1f20; --ink-head: #15171a; --ink-body: #2c2c2c; --muted: #5d5d60; --faint: #7a7a7d; --quiet: #98989b; --hair: #d4d4d7; --hair-soft: #e0e0e3; --edge: #b7b7ba; --steel: #5980a6; --steel-deep: #416180; --steel-dark: #1d2d3d; --up: #1a7f37; --down: #cf222e; --both: #bc4c00; --none: #7a7a7d; --head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --measure: 68ch; --gutter: 44px; } [data-theme="dark"] { --paper: #14171a; --ink: #f2f2f3; --ink-head: #f2f2f3; --ink-body: #dcdcdf; --muted: #98989b; --faint: #b7b7ba; --quiet: #7a7a7d; --hair: #33363a; --hair-soft: #26292c; --edge: #424244; --steel: #5980a6; --steel-deep: #94bce3; --up: #3fb950; --down: #f85149; --both: #d29922; --none: #b7b7ba; } /* Both faces are self hosted. See assets/fonts/README.md for the four files. */ @font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink-body); font: 400 17px/1.62 var(--body); text-wrap: pretty; } img { max-width: 100%; height: auto; } ::selection { background: rgba(89,128,166,.24); } a { color: var(--steel-deep); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--head); color: var(--ink-head); margin: 0; } /* ---------- header ---------- */ .site-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 66px; padding: 0 var(--gutter); border-bottom: 1px solid var(--ink); position: sticky; top: 0; background: var(--paper); z-index: 10; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-name { font: 700 17px/1 var(--head); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); } .mark { width: 22px; height: 22px; border: 1.5px solid var(--ink); flex: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .mark i { display: block; background: var(--steel); } .mark i:first-child { grid-area: 1 / 1; } .mark i:last-child { grid-area: 2 / 2; } .site-nav { display: flex; gap: 26px; margin-left: auto; } .nav-link { font: 500 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .nav-link:hover { color: var(--steel-deep); } .head-tools { display: flex; align-items: center; gap: 16px; } .lang-switch { display: flex; border: 1px solid var(--edge); } .lang { font: 500 11px/1 var(--body); letter-spacing: .1em; padding: 6px 9px; color: var(--muted); text-decoration: none; } .lang.is-current { background: var(--ink); color: var(--paper); font-weight: 600; } .lang.is-pending { color: var(--quiet); opacity: .55; } a.lang:hover { background: var(--hair-soft); color: var(--ink); } .theme-toggle { width: 26px; height: 26px; padding: 0; border: 1px solid var(--edge); background: none; display: flex; cursor: pointer; } .half { flex: 1; } .half-light { background: var(--paper); } .half-dark { background: var(--ink); } .theme-toggle:hover { border-color: var(--steel); } /* ---------- buttons ---------- */ .btn { display: inline-block; font: 600 11.5px/1 var(--body); letter-spacing: .11em; text-transform: uppercase; padding: 11px 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--steel); border-color: var(--steel); color: #f2f2f3; } .btn-primary:hover { background: var(--steel-deep); border-color: var(--steel-deep); color: #f2f2f3; } .btn-secondary { color: var(--steel-deep); border-color: var(--edge); background: none; } .btn-secondary:hover { border-color: var(--steel); color: var(--ink); } /* ---------- shared blocks ---------- */ .site-main { padding: 0 var(--gutter); } .kicker { font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--steel-deep); margin: 0; } .section-title { font: 700 20px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 14px; margin: 0 0 22px; } .quiet { font-size: 13.5px; line-height: 1.55; color: var(--faint); } .blueprint { position: relative; } .hero { padding: 64px 0 0; } .hero-title { font: 700 74px/.98 var(--head); max-width: 16ch; margin: 18px 0 0; } .hero-lede { font-size: 21px; line-height: 1.5; color: var(--muted); max-width: 60ch; margin: 22px 0 0; } .latest, .tracked, .datasets, .signup, .marker-key { padding: 52px 0 0; } .latest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .issue-card { border: 1px solid var(--edge); padding: 22px 24px 24px; } .issue-card.is-primary { border-color: var(--ink); } .card-kicker { font: 600 11.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--steel-deep); margin: 0; } .card-title { font: 700 34px/1.06 var(--head); margin: 14px 0 0; } .card-title a { color: inherit; text-decoration: none; } .card-title a:hover { color: var(--steel-deep); } .card-excerpt { font-size: 16.5px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; } .card-meta { display: flex; gap: 16px; font: 500 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 16px 0 20px; } .cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); } .cells-2 { grid-template-columns: 1fr 1fr; } .cell { background: var(--paper); padding: 20px 18px; } .cell h3 { font: 600 21px/1.15 var(--head); margin: 9px 0 8px; } .cell p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; } .cell-no { font: 700 13px/1 var(--head) !important; letter-spacing: .16em; color: var(--faint); } .cell-host { font: 500 11px/1 var(--body) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--faint) !important; } /* ---------- the marker key ---------- */ .marker-key { max-width: var(--measure); } .key-title { font: 700 14px/1 var(--head); letter-spacing: .18em; text-transform: uppercase; border-top: 2px solid var(--ink); padding-top: 14px; } .key-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .key-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; } .mk { display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 28px; font: 400 15px/28px Arial, Helvetica, sans-serif; border: 1px solid currentColor; } .mk-up { color: var(--up); } .mk-down { color: var(--down); } .mk-both { color: var(--both); } .mk-none { color: var(--none); } /* Inline markers in the prose, coloured by theme.js after load. Colour only: the glyph keeps the surrounding weight so a bold lead-in stays bold. */ .mk-i { font-style: normal; } /* The net, on the scoreboard and on each section count. */ .esm-score-net { font-weight: 700 !important; color: var(--ink-head) !important; } .esm-section-count .esm-net { color: var(--muted) !important; } .esm-section-count .esm-net b { color: var(--ink-head) !important; } /* ---------- archive rows ---------- */ .page-head { padding: 46px 0 0; } .page-title { font: 700 54px/1 var(--head); } .page-lede { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 62ch; margin: 12px 0 0; } .issue-list { margin-top: 34px; border-top: 2px solid var(--ink); } .issue-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 90px; gap: 0 28px; padding: 22px 0; border-bottom: 1px solid var(--hair); text-decoration: none; align-items: start; color: inherit; } .issue-row:hover { background: var(--hair-soft); } .row-date { font: 700 24px/1 var(--head); color: var(--ink-head); } .row-title { display: block; font: 600 27px/1.14 var(--head); color: var(--ink-head); max-width: 36ch; } .row-excerpt { display: block; font-size: 15.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; max-width: 64ch; } .row-meta { font: 500 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: right; } /* ---------- article ---------- */ .post { padding: 52px 0 0; } .post-head { max-width: var(--measure); } .post-title { font: 700 62px/1.02 var(--head); margin: 16px 0 0; max-width: 24ch; } .post-lede { font-size: 21px; line-height: 1.5; color: var(--muted); margin: 20px 0 0; } .post-meta { display: flex; gap: 22px; font: 500 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); } .post-head .lang-switch { margin-top: 18px; width: max-content; } /* Prose is native Ghost content, so this is where issue typography lives now. It replaces the inline styles the build script used to write. */ .gh-content { margin-top: 34px; max-width: var(--measure); } .gh-content > * { margin: 0 0 24px; } .gh-content p { font-size: 17px; line-height: 1.62; color: var(--ink-body); } .gh-content h2 { font: 700 22px/1.1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 46px; } .gh-content h3 { font: 600 27px/1.18 var(--head); margin-top: 34px; max-width: 34ch; } .gh-content h4 { font: 600 19px/1.25 var(--head); margin-top: 26px; } .gh-content ul, .gh-content ol { padding-left: 22px; } .gh-content li { margin-bottom: 8px; } .gh-content blockquote { border-left: 2px solid var(--steel); padding-left: 20px; color: var(--muted); } .gh-content hr { border: 0; border-top: 1px solid var(--hair); } .gh-content figure img { border: 1px solid var(--hair); } .gh-content figcaption { font-size: 13.5px; color: var(--faint); margin-top: 8px; } /* Required by gscan even with card_assets: true, because these are layout rather than card chrome. They break the measure while still respecting the gutter. */ .gh-content .kg-width-wide { width: min(1060px, calc(100vw - (var(--gutter) * 2))); max-width: none; } .gh-content .kg-width-full { width: calc(100vw - (var(--gutter) * 2)); max-width: none; } .gh-content .kg-width-full img { width: 100%; } /* ---------- the two cards the build script writes ---------- */ /* Both arrive as HTML cards. They carry their own inline styles so they survive in email, where no theme CSS reaches. These rules restyle them on the web only. Keep the class names in step with the build script. */ .esm-score { border: 1px solid var(--ink) !important; background: none !important; padding: 18px 22px 22px !important; margin: 34px 0 !important; max-width: var(--measure); } .esm-score .esm-score-title { font: 700 17px/1 var(--head) !important; letter-spacing: .17em; text-transform: uppercase; color: var(--ink) !important; } .esm-score .esm-score-n { font: 700 58px/.86 var(--head) !important; color: var(--ink-head) !important; } .esm-score .esm-score-label { font: 600 11px/1.35 var(--body) !important; letter-spacing: .11em; text-transform: uppercase; color: var(--muted) !important; } .esm-score-up { color: var(--up) !important; } .esm-score-down { color: var(--down) !important; } .esm-score-both { color: var(--both) !important; } .esm-score-none { color: var(--none) !important; } .esm-section-count { display: flex !important; gap: 13px; align-items: baseline; font-size: 11px !important; margin: 0 0 24px !important; } .esm-section-count b { font: 700 15px/1 var(--head) !important; color: var(--ink-head) !important; } /* ---------- footer, error, pagination ---------- */ .site-foot { margin-top: 60px; border-top: 1px solid var(--ink); padding: 26px var(--gutter) 34px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .foot-note { font-size: 13px; line-height: 1.6; color: var(--faint); max-width: 46ch; margin: 0; } .foot-nav { display: flex; gap: 30px; } .foot-nav a { font: 500 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .foot-nav a:hover { color: var(--steel-deep); } .error { padding: 90px 0; max-width: 46ch; } .error-code { font: 700 96px/.86 var(--head); color: var(--ink-head); margin: 0; } .error-lede { font-size: 19px; line-height: 1.5; color: var(--muted); margin: 14px 0 22px; } .error-actions { display: flex; gap: 10px; flex-wrap: wrap; } .pagination { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0 40px; font: 500 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } /* ---------- narrow ---------- */ @media (max-width: 900px) { :root { --gutter: 20px; } .site-head { height: auto; padding: 12px var(--gutter); flex-wrap: wrap; position: static; } .site-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; } .hero-title { font-size: 46px; } .post-title { font-size: 40px; } .page-title { font-size: 38px; } .latest-grid, .cells, .cells-2 { grid-template-columns: 1fr; } .issue-row { grid-template-columns: 1fr; gap: 8px; } .row-meta { text-align: left; } .site-foot { flex-direction: column; gap: 20px; } } @media print { .site-head, .site-foot, .theme-toggle, .lang-switch, .pagination { display: none; } body { background: #fff; color: #000; } } /* ============================================================================ The issue layout: main record left, rail right. Added after the first pass, which produced a one-column page and left a rail-shaped hole down the right side. ============================================================================ */ .issue-layout { display: grid; grid-template-columns: minmax(0, 760px) 268px; gap: 60px; align-items: start; padding: 52px 0 0; } .issue-main { min-width: 0; } .issue-main .post-head, .issue-main .gh-content, .issue-main .marker-key { max-width: none; } .alt-edition { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--hair); padding: 14px 16px; margin: 24px 0 0; font-size: 15px; color: var(--muted); } .alt-edition a { font: 600 12px/1 var(--body); letter-spacing: .11em; text-transform: uppercase; color: var(--steel-deep); border: 1px solid var(--edge); padding: 9px 13px; text-decoration: none; } .alt-edition a:hover { border-color: var(--steel); color: var(--ink); } /* the rail */ .issue-rail { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 26px; } .rail-title { font: 600 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin: 0; } .rail-note { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; } .rail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .btn-block { display: block; text-align: center; } .rail-datasets { border: 1px solid var(--edge); padding: 18px 16px; } .rail-datasets .rail-title { border-bottom: 0; padding-bottom: 0; font: 700 14px/1.1 var(--head); letter-spacing: .16em; color: var(--ink); } .rail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); text-decoration: none; } .rail-row:last-child { border-bottom: 0; } .rail-row > span:first-child { font: 600 14.5px/1.3 var(--body); color: var(--ink); } .rail-row:hover > span:first-child { color: var(--steel-deep); } .rail-tag { font: 500 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); white-space: nowrap; } .rail-prev { display: block; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); text-decoration: none; } .rail-prev:last-child { border-bottom: 0; } .rail-prev-date { display: block; font: 500 11px/1 var(--body); letter-spacing: .13em; color: var(--steel-deep); } .rail-prev-title { display: block; font: 600 16px/1.22 var(--head); color: var(--ink); margin-top: 6px; } .rail-prev:hover .rail-prev-title { color: var(--steel-deep); } /* The contents card, written into the body by the build script and moved in here by theme.js. It carries inline styles so it still reads as a list in the inbox; these rules override them on the web, which is why they are !important. */ .esm-contents { margin: 0 !important; padding: 0 !important; border: 0 !important; } .esm-contents ol, .esm-contents ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } .esm-contents li { margin: 0 !important; } .esm-contents a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); font: 600 14.5px/1.3 var(--body) !important; color: var(--ink) !important; text-decoration: none !important; } .esm-contents li:last-child a { border-bottom: 0; } .esm-contents a:hover { color: var(--steel-deep) !important; } .esm-contents .esm-contents-n { font: 500 13px/1 var(--body) !important; color: var(--faint) !important; } /* The editor's note, and every section lede: the paragraph immediately after a section heading sets one step larger. It is a general rule, so a note is just prose under a heading and needs no card, no field and no template change. */ .gh-content h2 + p { font-size: 19px; line-height: 1.6; } /* the scoreboard card, second pass: coloured rule above each column, glyphs in the bar */ .esm-score .esm-score-rule { height: 5px !important; } .esm-score .esm-score-cmp { font: 500 11.5px/1 var(--body) !important; letter-spacing: .13em; text-transform: uppercase; color: var(--faint) !important; } .esm-score .esm-score-bar td, .esm-score .esm-score-bar div { color: #ffffff !important; font: 400 11px/24px Arial, Helvetica, sans-serif !important; } @media (max-width: 1100px) { .issue-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; } .issue-rail { position: static; top: auto; } } @media print { .issue-rail, .alt-edition { display: none; } .issue-layout { display: block; } }