styles.css

/* Same design system as hacknitra.sk (web/src/styles/global.css): brand blue,
   white and signal green, Barlow Condensed 900 headings, Courier New body.
   The colours are fixed by the brand guidelines, so the page stays light even
   in dark mode. Fonts are self-hosted, so no request goes to a third party. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/barlow-condensed-latin-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* č, ď, ľ, ň, š, ť and ž live in latin-ext. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/barlow-condensed-latin-ext-900.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue: #0a23c3;
  --green: #00ff87;
  --ink: #000;
  --bg: #fff;
  --fg: var(--blue);
  --font-head: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Courier New', Courier, 'Liberation Mono', monospace;
  --hdr: 80px; /* sticky header, including its border */

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--hdr) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

p {
  margin: 0 0 1em;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.005em;
}

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--blue);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Shared pieces (as on hacknitra.sk) ---------- */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

/* Green highlighter behind section titles. */
.hl {
  padding: 0.02em 0.22em 0.07em;
  background: var(--green);
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.btn {
  display: inline-block;
  padding: 0.78em 1.25em 0.82em;
  border: 3px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.btn:hover {
  border-color: var(--green);
  background: var(--green);
  color: #000;
}
.btn.on-blue {
  border-color: var(--green);
  background: var(--green);
  color: #000;
}
.btn.on-blue:hover {
  border-color: #fff;
  background: #fff;
  color: var(--blue);
}

.skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 50;
}
.skip:focus {
  top: 12px;
}

.sec-title {
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}

/* ---------- Header ---------- */

.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  border-bottom: 2px solid rgb(255 255 255 / 0.34);
  background: var(--blue);
  color: #fff;
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 78px;
}
.top .logo img {
  width: auto;
  height: 48px;
}
.top .btn {
  margin-left: auto;
  padding: 0.7em 1.05em 0.74em;
  font-size: 1.15rem;
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(48px, 9vw, 120px) 0 clamp(40px, 7vw, 96px);
  background: var(--blue);
  color: #fff;
}
.hero h1 {
  max-width: 14ch;
  color: #fff;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.012em;
}
.byline {
  margin: clamp(16px, 2.6vw, 30px) 0 0;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 3.3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.3;
}
.byline span {
  padding: 0.04em 0.3em 0.1em;
  background: var(--green);
  color: #000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Dates and contact, set like the stats row on hacknitra.sk. */
.stats {
  padding: clamp(16px, 3vw, 34px) 0;
  border-bottom: 3px solid var(--blue);
}
.stats dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
}
.stats dl > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 6px clamp(12px, 2vw, 28px);
  border-left: 3px solid var(--blue);
}
.stats dl > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.stats dd {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 4.6vw, 4.2rem);
  font-weight: 900;
  line-height: 0.95;
  white-space: nowrap;
}
.stats dd a {
  text-decoration: none;
}
.stats dd a:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 4px;
}
.stats dt {
  margin-top: clamp(4px, 0.6vw, 8px);
  font-size: 1rem;
}

.lede {
  max-width: 62ch;
  margin-top: clamp(40px, 6vw, 72px);
}
.lede p:last-child {
  margin-bottom: 0;
}

/* ---------- Table of contents ---------- */

.toc {
  margin-top: clamp(56px, 8vw, 104px);
}
.toc ol {
  columns: 2;
  column-gap: clamp(24px, 5vw, 72px);
}
.toc li {
  break-inside: avoid;
}
.toc a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0 13px;
  border-top: 2px solid var(--blue);
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 900;
  line-height: 1.05;
  text-decoration: none;
}
.toc-n {
  flex: none;
  min-width: 2ch;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: bold;
}
.toc-label {
  margin-left: -0.12em;
  padding: 0.02em 0.12em 0.07em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.toc a:hover .toc-label {
  background: var(--green);
  color: var(--ink);
}

/* ---------- Policy sections: outlined number like the timeline years ---------- */

main {
  margin-top: clamp(56px, 8vw, 104px);
}

.part {
  display: grid;
  grid-template-columns: clamp(110px, 15vw, 220px) minmax(0, 1fr);
  gap: 0 clamp(16px, 3vw, 40px);
}
.part + .part {
  margin-top: clamp(56px, 8vw, 104px);
}

.num {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--hdr) + 16px);
  align-self: start;
  margin: 0;
  color: transparent;
  font-family: var(--font-head);
  font-size: clamp(4.2rem, 11vw, 9rem);
  font-weight: 900;
  line-height: 0.8;
  -webkit-text-stroke: 2px var(--blue);
}

.body > * {
  max-width: 68ch;
}
/* The organisation cards may use the full column. */
.body > .parties {
  max-width: 920px;
}
.body h2 {
  margin-bottom: clamp(18px, 2.4vw, 28px);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
}
.body h3 {
  margin: clamp(28px, 3.4vw, 40px) 0 10px;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
}
.body h2 + h3 {
  margin-top: 0;
}
.body a:hover {
  background: var(--green);
  color: var(--ink);
}

/* List bullets: the green squares of the timeline. */
.body ul {
  margin: 0 0 1em;
}
.body li {
  position: relative;
  margin-bottom: 0.35em;
  padding-left: 26px;
}
.body li::before {
  content: '';
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 11px;
  height: 11px;
  border: 3px solid var(--blue);
  background: var(--green);
}

/* Facts participants act on: deadlines, what is optional, where to write. */
mark {
  padding: 0.05em 0.2em 0.08em;
  background: var(--green);
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Section 1: the two organisations, set like the contact block on hacknitra.sk */
.parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: 32px;
}
.party {
  padding: clamp(22px, 2.8vw, 32px);
  background: var(--blue);
  color: #fff;
}
.party-role {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 0.92rem;
}
.body .party h3 {
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  color: #fff;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
}
.fields {
  display: grid;
  gap: 14px;
}
.fields dt {
  color: rgb(255 255 255 / 0.75);
  font-size: 0.85rem;
  font-weight: bold;
}
.fields dd {
  overflow-wrap: anywhere;
}

/* Section 4: legal bases, set like the formats list */
.bases {
  margin: 0 0 1.4em;
}
.bases > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 6px 28px;
  align-items: baseline;
  padding: 16px 0 18px;
  border-top: 3px solid var(--blue);
}
.bases > div:last-child {
  border-bottom: 3px solid var(--blue);
}
.ref {
  display: block;
  margin-bottom: 4px;
  font-size: 0.88rem;
}
.bases strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 900;
  line-height: 1;
}

/* Section 11 */
.postal {
  padding-left: 16px;
  border-left: 6px solid var(--green);
}

/* Registration texts */
.form-panel {
  padding: clamp(18px, 3vw, 32px);
  border: 3px solid var(--blue);
}
.body .form-panel h3:first-child {
  margin-top: 0;
}
.form-panel p:last-child {
  margin-bottom: 0;
}
.note {
  margin-top: 16px;
  font-size: 0.92rem;
}

/* ---------- Contact ---------- */

.contact {
  margin-top: clamp(72px, 10vw, 136px);
  padding: clamp(56px, 8vw, 104px) 0;
  background: var(--blue);
  color: #fff;
}
.contact .grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
}
.contact .sec-title {
  margin: 0;
}
.contact .big {
  margin: 22px 0 0;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 900;
  line-height: 0.98;
  overflow-wrap: anywhere;
}
.contact .big a {
  text-decoration: none;
}
.contact .big a:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 6px;
}
.contact address {
  font-size: 0.95rem;
  font-style: normal;
}

/* ---------- Follow bar (static footer here) ---------- */

.follow-bar {
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 3px solid var(--blue);
  background: var(--green);
  color: #000;
}
.follow-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.follow-bar .follow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}
.follow-bar .btn {
  padding: 0.62em 1em 0.66em;
  font-size: 1.15rem;
  white-space: nowrap;
}
.follow-bar .btn:hover {
  border-color: var(--blue);
  background: #fff;
  color: var(--blue);
}

.social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.social svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .part {
    grid-template-columns: minmax(0, 1fr);
  }
  .num {
    position: static;
    margin-bottom: 14px;
    font-size: clamp(3.6rem, 16vw, 5.4rem);
  }
}

@media (max-width: 860px) {
  .stats dl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 14px;
  }
  .stats dl > div:last-child {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }
  .contact .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .toc ol {
    columns: 1;
  }
}

@media (max-width: 640px) {
  .bases > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  body {
    font-size: 16px;
  }
  .body {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
  }
  .follow-bar .txt {
    display: none;
  }
}

/* ---------- Print / save as PDF ---------- */

@media print {
  :root {
    --blue: #000;
    --green: #ddd;
  }
  .skip,
  .top,
  .toc,
  .follow-bar {
    display: none;
  }
  .hero,
  .contact {
    padding: 0 0 24px;
    background: none;
    color: #000;
  }
  .hero h1 {
    color: #000;
    font-size: 2.8rem;
  }
  .party {
    border: 2px solid #000;
    background: none;
    color: #000;
  }
  .body .party h3,
  .party-role,
  .fields dt {
    color: #000;
  }
  .num {
    position: static;
    color: #000;
    font-size: 2.2rem;
    -webkit-text-stroke: 0;
  }
  .part {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
  .part + .part {
    margin-top: 32px;
  }
  mark,
  .hl,
  .byline span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  h2,
  h3 {
    break-after: avoid;
  }
  .party,
  .form-panel,
  .bases > div {
    break-inside: avoid;
  }
}