/* BRAN AGMEN site styles. Deliberately plain. The audience is a regional fire-safety directorate, a forestry directorate and a municipal administration, plus the occasional EU consortium coordinator - people who read a flashy site as a reason to be careful. Restraint is the design brief. No web fonts, no frameworks, no build step: one stylesheet, system fonts, and a page that renders before anything has finished loading. It also means the site has no third-party requests at all, which is what lets the privacy notice in the footer say "no tracking" without qualification. The palette is greys anchored on #202629, the dark tone the brand-kit logo already carries, so the mark sits in the page rather than on it. Every neutral is untinted; the ember is the flame in the mark and is the only accent. If you add a colour, add it as a token here rather than inline, and check it against the dark hero and the light bands both. */ :root { --ink: #1c1f21; --ink-soft: #565c60; --paper: #ffffff; --paper-alt: #f4f5f6; --slate: #333b40; --slate-deep: #202629; /* The deck's orange. It only clears WCAG AA against the dark backgrounds (5.4:1 on #202629) and fails badly on white at 2.9:1, so anything sitting on a light band uses --ember-deep: same hue, 4.6:1, passes. Check a new use against both before picking one. */ --ember: #f47421; --ember-deep: #c2550d; --line: #dcdfe1; --measure: 68ch; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); } /* Language switching. One class on decides which set of spans is shown. The [lang] spans are inline by default so they do not break sentences. */ .lang-bg [lang="en"] { display: none; } .lang-en [lang="bg"] { display: none; } .wrap { width: min(100% - 2.5rem, 62rem); margin-inline: auto; } .wrap.narrow { width: min(100% - 2.5rem, 42rem); } h1, h2, h3 { line-height: 1.2; color: var(--slate-deep); font-weight: 650; } h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); margin: 0 0 1rem; } h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0 0 1rem; } p { max-width: var(--measure); } a { color: var(--slate); } /* Header ------------------------------------------------------------------ */ .site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 10; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; } .brand { display: flex; align-items: center; gap: 0.55rem; } .brand-mark { display: block; height: 46px; width: auto; } .brand-words { display: flex; flex-direction: column; line-height: 1.12; } /* Sized against the 46px mark beside it - the point of setting the wordmark as text rather than using the brand kit's horizontal file is that these two can be balanced. Change one, look at the other. */ .brand-name { font-size: 1.7rem; font-weight: 600; letter-spacing: 0.005em; color: var(--slate-deep); } .brand-sub { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .lang-switch { display: flex; gap: 0.25rem; } .lang-switch button { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.7rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 3px; cursor: pointer; } .lang-switch button.is-active { background: var(--slate); border-color: var(--slate); color: #fff; } /* Hero -------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; background: var(--slate-deep) url("assets/hero.jpg") center/cover no-repeat; color: #eef0f1; } /* The looping film behind the title. It is decoration and nothing else: muted, not focusable, hidden from assistive technology, and never fetched on a narrow screen or for a visitor who has asked for reduced motion - both of those get the still the CSS above already paints. site.js attaches the source, so with scripting off nothing downloads at all. */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; } /* The veil is what keeps the headline readable over moving picture, and it has to be heavier than it would be over a still: the film cuts to a new scene every three seconds, so the contrast under the text changes six times a loop. It is sized for the brightest of the six, not the average. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(23,27,30,0.97) 0%, rgba(23,27,30,0.91) 45%, rgba(23,27,30,0.66) 100%); } .hero .wrap { position: relative; z-index: 2; } .hero h1 { color: #fff; } .hero .lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: #d4d8da; } .hero .lede strong { color: #fff; } .maturity { font-size: 0.93rem; color: #c2c9cc; border-left: 2px solid rgba(255, 255, 255, 0.28); padding-left: 0.9rem; margin: 1.6rem 0; } .maturity strong { color: #eef0f1; } .hero-meta { font-size: 0.9rem; color: #a8b0b4; margin-bottom: 1.8rem; } .btn { display: inline-block; font: inherit; font-weight: 600; padding: 0.7rem 1.4rem; border: 0; border-radius: 3px; background: var(--ember-deep); color: #fff; text-decoration: none; cursor: pointer; } .btn:hover { background: #a1450a; } /* Bands ------------------------------------------------------------------- */ .band { padding: clamp(2.2rem, 5vw, 3.6rem) 0; } .band.alt { background: var(--paper-alt); } /* Shared section furniture ------------------------------------------------ */ .section-lede { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 1.8rem; } h3.sub { font-size: 1.05rem; margin: 2.4rem 0 1rem; } /* A boundary line under a claim. Small, but never hidden: these are the sentences that make the numbers above them honest. */ .boundary { display: block; margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: 0.8rem; } .figure-note { margin-top: 2rem; padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font-size: 0.93rem; max-width: var(--measure); } .band.alt .figure-note { background: var(--paper-alt); } .figure-note .src { font-size: 0.82rem; color: var(--ink-soft); } /* Numbered steps and the operator flow ------------------------------------ */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .steps li { counter-increment: step; } .steps li::before { content: counter(step); display: block; font-weight: 700; color: var(--ember-deep); margin-bottom: 0.3rem; } .steps h3 { font-size: 1rem; margin: 0 0 0.3rem; } .steps p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); } .flow { list-style: none; counter-reset: flow; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .flow li { counter-increment: flow; flex: 1 1 9rem; padding: 0.7rem 0.9rem; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; font-size: 0.88rem; font-weight: 600; color: var(--slate-deep); } .band.alt .flow li { background: var(--paper-alt); } .flow li::before { content: counter(flow); display: block; font-size: 0.75rem; color: var(--ember-deep); } /* Detect / verify / plan -------------------------------------------------- */ .triad { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .triad h3 { font-size: 1.05rem; margin: 0 0 0.35rem; } .triad p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } /* The four states --------------------------------------------------------- */ .states { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .state { padding: 1.2rem; background: var(--paper-alt); border: 1px solid var(--line); border-top: 3px solid var(--slate); border-radius: 4px; } .band.alt .state { background: var(--paper); } .state.next { border-top-color: var(--ember-deep); } .state-tag { margin: 0 0 0.4rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); } .state.next .state-tag { color: var(--ember-deep); } .state h3 { font-size: 1rem; margin: 0 0 0.7rem; } .state ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--ink-soft); } .state li { margin-bottom: 0.35rem; } .state-foot { margin: 0.9rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); } /* Measured results -------------------------------------------------------- */ .results { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.5rem; } .result { margin: 0; } .result .big { margin: 0 0 0.4rem; font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 700; line-height: 1; color: var(--slate-deep); } .result .unit { font-size: 0.45em; color: var(--ink-soft); } .result figcaption { font-size: 0.95rem; } .result figcaption strong { color: var(--slate-deep); } /* The 2027 pilot ---------------------------------------------------------- */ .pilot-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .pilot-facts li { padding: 0.45rem 0.85rem; border: 1px solid var(--slate); border-radius: 100px; font-size: 0.87rem; font-weight: 600; color: var(--slate-deep); } .scorecard { list-style: none; counter-reset: sc; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .scorecard li { counter-increment: sc; } .scorecard li::before { content: "0" counter(sc); display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ember-deep); } .scorecard h4 { font-size: 0.97rem; margin: 0.2rem 0 0.25rem; color: var(--slate-deep); } .scorecard p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); } /* Form fields ------------------------------------------------------------- */ .field { margin-top: 1.1rem; } .field label { margin-top: 0; } .field.check { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; margin-top: 1.4rem; } .field.check label { font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); } .field.check input { margin-top: 0.3rem; } form { margin-top: 1.5rem; } label { display: block; margin-top: 1.1rem; font-weight: 600; font-size: 0.95rem; } input[type="text"], input[type="email"], textarea { width: 100%; font: inherit; margin-top: 0.35rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink); } input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 2px; } textarea { resize: vertical; } form .btn { margin-top: 1.4rem; } /* The honeypot must be unreachable for people without being display:none, which some bots specifically check for. Off-canvas and out of the tab order. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { margin-top: 1rem; font-weight: 600; min-height: 1.4rem; } .form-status.ok { color: var(--slate-deep); } .form-status.err { color: var(--ember-deep); } /* Footer ------------------------------------------------------------------ */ .site-footer { background: var(--slate-deep); color: #a8b0b4; padding: 2.2rem 0; font-size: 0.87rem; } .site-footer a { color: #d4d8da; } .imprint, .privacy { max-width: var(--measure); margin: 0.5rem 0 0; } .colophon { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-weight: 600; letter-spacing: 0.06em; font-size: 0.8rem; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* The concept-visualisation caption in the hero ---------------------------- */ .hero-caption { margin: 2.2rem 0 0; max-width: 52ch; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.82rem; line-height: 1.55; color: #a8b0b4; } .hero-caption .video-label { display: block; margin-bottom: 0.4rem; color: var(--ember); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } /* Back to top ------------------------------------------------------------- */ /* Visually hidden but still announced. Not display:none, which would take it out of the accessibility tree and leave the link with no name at all. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 20; display: flex; align-items: center; justify-content: center; /* 44px is the smallest comfortable touch target; do not shrink it to suit the icon, which is 18px and centred inside. */ width: 44px; height: 44px; border-radius: 3px; background: var(--slate-deep); color: #fff; text-decoration: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); transition: opacity 0.18s, transform 0.18s, background 0.15s; } .to-top:hover { background: var(--ember-deep); } .to-top svg { display: block; } /* Only hide it when there is scripting to bring it back. Without JS the rule below never applies and the link stays visible, which still works. */ .js .to-top { opacity: 0; visibility: hidden; transform: translateY(6px); } .js .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* Smooth only by consent. The reduce block above already kills the transitions. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }