/* ============================================================================= NvfSite — the whole stylesheet. HOW THIS IS ORGANISED, and why it matters more than any rule in it: 1. TOKENS the palette and the scale, as custom properties. Nothing below this layer states a colour or a spacing literal. 2. BASE bare elements: body, headings, links, form controls. 3. LAYOUT the primitives that position things: container, grid. 4. COMPONENTS the named parts: header, card, button, switches, banner. 5. RESPONSIVE the width tiers — and see WIDTH below for why they are last and why they are mostly token declarations. The rule that keeps it uniform: **a change of appearance is a change of TOKEN.** If you find yourself typing a hex value or a rem below layer 1, the token you need does not exist yet — add it there, then use it. That is what makes a brand pass a small edit to one block rather than a search across a stylesheet. THEMING. Light is the default. Dark arrives two ways and they are deliberately ordered: the visitor's system preference applies on its own, and an explicit choice — stored server-side in a cookie and rendered as data-theme on — overrides it in both directions. A visitor on a dark machine who asks for light gets light; that is why the media query excludes an explicit light choice rather than simply coming first. WIDTH. Section 5 holds every layout breakpoint, and it works the same way: a tier RE-DECLARES TOKENS rather than restating rules. Almost nothing below layer 1 knows that a breakpoint exists, which is what stops the responsive behaviour being spread across the components it affects. ============================================================================= */ /* ── 1. TOKENS ────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* Surfaces and text */ --bg: #f6f8fa; --surface: #ffffff; --surface-2: #eef1f4; --border: #dde3ea; --text: #1d2733; --text-muted: #46586d; --text-faint: #5d6b78; /* The header band — its own token, because it is not the page surface and does not follow it into dark. */ --header-bg: #12263a; --header-text: #ffffff; --header-text-muted: #cfd8e3; --header-line: #3d5a78; /* Interactive */ --btn-bg: #12263a; --btn-hover: #1d3a55; --btn-text: #ffffff; --link: #1a4f7a; --link-hover: #12263a; --accent: #7fb2e5; --focus: #7fb2e5; --danger: #b3261e; --notice-bg: #fdf6e3; --notice-text: #8a6d1a; /* The values a WIDTH changes — every one of them a literal that used to sit in the rule that consumed it. They are named here so section 5 can move the layout by re-declaring tokens, and so the component rules stay unaware that more than one width exists. Their defaults ARE the desktop design. */ --container-pad: 1.2rem; --page-gap: var(--space-7); --card-pad: var(--space-6); --header-gap: var(--space-5); --header-pad: var(--space-4); --nav-gap: 1.1rem; /* Room held below the page for the consent banner, which is fixed to the bottom of the window and would otherwise sit on top of the footer — including on top of the cookie policy it is asking about. */ --consent-reserve: 4.5rem; /* The h1 has never been sized here — it took the browser's 2em. Stated now because a fixed heading is the wrong size on a narrow screen, and a token that does not exist cannot be moved. */ --h1-size: 2rem; /* Scale — spacing, radius, measure */ --space-1: .15rem; --space-2: .3rem; --space-3: .55rem; --space-4: .9rem; --space-5: 1.4rem; --space-6: 1.6rem; --space-7: 2.5rem; --radius: .5rem; --radius-sm: .3rem; /* One width for header, content and footer — this is what makes the page read as a single column rather than a bar with a page under it. Sized off the HEADER, which is the widest thing the page has to fit: brand + eight navigation items + two switches. Below about 68rem the navigation starts wrapping on a laptop. */ --container: 70rem; /* …but a line of prose is not the header. Text that runs the full 70rem is around 120 characters, well past comfortable reading, so body copy inside a card keeps its own measure. Card grids are unaffected — their columns are already narrow. */ --measure: 58rem; /* Centred text wants a shorter line than left-aligned text does — the eye has to find the start of each line rather than return to a fixed edge. Used by the hero. */ --measure-tight: 46rem; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Dark palette. Declared twice on purpose — once for the system preference and once for the explicit choice — because a media query and an attribute selector cannot be combined into one rule. Keep the two blocks identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0f1620; --surface: #172230; --surface-2: #1f2c3c; --border: #2a3949; --text: #e6edf5; --text-muted: #a9bacb; --text-faint: #93a3b3; --header-bg: #0b111a; --header-text: #ffffff; --header-text-muted: #b6c6d6; --header-line: #33506e; --btn-bg: #2d4f73; --btn-hover: #3a6493; --btn-text: #eaf2fb; --link: #8ec5f0; --link-hover: #b6dcfa; --danger: #f2b8b5; --notice-bg: #2a2415; --notice-text: #e6cd8a; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1620; --surface: #172230; --surface-2: #1f2c3c; --border: #2a3949; --text: #e6edf5; --text-muted: #a9bacb; --text-faint: #93a3b3; --header-bg: #0b111a; --header-text: #ffffff; --header-text-muted: #b6c6d6; --header-line: #33506e; --btn-bg: #2d4f73; --btn-hover: #3a6493; --btn-text: #eaf2fb; --link: #8ec5f0; --link-hover: #b6dcfa; --danger: #f2b8b5; --notice-bg: #2a2415; --notice-text: #e6cd8a; } /* ── 2. BASE ──────────────────────────────────────────────────────────────── */ /* iOS Safari enlarges body text when a page is turned to landscape, which changes the size relationships every other rule here was chosen against. The page is readable at its declared size; it does not need the help. */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); margin: 0; color: var(--text); background: var(--bg); /* A word longer than its column has to break somewhere. Without this it simply leaves the box and takes the page's width with it — a single long word is enough to make every page on the site scroll sideways. Greek compounds, the registry number and an email address are all long enough to do it. */ overflow-wrap: break-word; } h1, h2, h3 { line-height: 1.25; } h1 { font-size: var(--h1-size); } p { line-height: 1.6; } /* No image ships with the site today. This is the rule that stops the first one being a bug report: an image wider than its column would otherwise widen the page rather than fit into it. */ img { max-width: 100%; height: auto; } /* Body links. Without this they fall back to the browser default, which is off-key against the palette in light and close to unreadable on a dark surface. The underline stays: colour alone is not a distinction everyone can see. */ a { color: var(--link); text-underline-offset: .15em; } a:hover { color: var(--link-hover); } code { background: var(--surface-2); padding: .1rem .35rem; border-radius: .25rem; } label { font-weight: 600; } input, textarea { width: 100%; max-width: 28rem; padding: .45rem var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--text); } button { background: var(--btn-bg); color: var(--btn-text); border: 0; border-radius: var(--radius-sm); padding: var(--space-3) 1.3rem; font: inherit; cursor: pointer; } button:hover { background: var(--btn-hover); } dt { font-weight: 600; margin-top: .7rem; } dd { margin: 0; } /* One focus treatment for everything focusable — a keyboard user should never have to guess which control the browser is on. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* ── 3. LAYOUT ────────────────────────────────────────────────────────────── */ /* The single column shared by header, main and footer. */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); box-sizing: border-box; } main.container { margin-block: var(--page-gap); } /* Auto-fitting card grid. Deliberately not named for a count — it held three items and now holds four. THE `min()` IS NOT DECORATION, and it is the reason this needs no breakpoint of its own. A bare `minmax(13rem, 1fr)` is a FLOOR: told to fit into less than the floor, the track does not shrink — it overflows, and takes the whole page's width with it. `min(13rem, 100%)` says "13rem, or all of the room there is, whichever is smaller", so the column collapses instead of escaping. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem; } /* The same grid for cells that carry a paragraph rather than a phrase. The minimum is the point: a wider floor means fewer columns, and a short paragraph in a 15rem column is a dozen lines of two words each. Sized so four cells land as two rows of two rather than one row of four. This is the grid the floor was measured on: at 390px wide the 24rem track was 384px inside a 335px column, and /Industries scrolled sideways by 39px — 109px at 320px. Nothing about the page looked wrong; the whole document was simply wider than the screen. */ .grid-roomy { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); } /* Centre the heading inside each cell. For grids whose headings are short LABELS — a word or two — where a centred head reads as a title sitting over its text. Not the default: a multi-word sector name centred over a six-line paragraph detaches from the copy it belongs to, which is why the sector and service grids keep their headings left. */ .grid-center-heads h3 { text-align: center; } /* ── 4. COMPONENTS ────────────────────────────────────────────────────────── */ /* Header ------------------------------------------------------------------ */ header { background: var(--header-bg); color: var(--header-text); } .header-inner { display: flex; align-items: center; gap: var(--header-gap); padding-block: var(--header-pad); flex-wrap: wrap; } /* Stated explicitly: the brand is a link now, and the generic link colour would paint it mid-blue on a dark header. */ .brand { font-weight: 700; font-size: 1.05rem; color: var(--header-text); text-decoration: none; white-space: nowrap; } .brand:hover { color: var(--header-text); text-decoration: underline; } nav { display: flex; gap: var(--nav-gap); flex: 1; /* WRAPPING IS WHAT BROKE THIS HEADER, so it is off. Asked to fit into less room than it needs, a wrapping nav gives each link its own row — the header stood 245px tall on a 390px screen, six rows deep, with the switches stranded in the middle of the column. Section 5 replaces that state with a menu rather than trying to make the row narrower. `min-width: 0` is load-bearing next to `flex: 1`. A flex item's automatic minimum is its CONTENT, so without this the nav refuses to shrink and shoves the switches off the edge instead of scrolling — the overflow below would never engage. */ flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } /* A LINK IN THE HEADER BAND — the navigation and both switch menus dress the same, and used to say so three times. One rule, so a change to the band's link colour is one edit and cannot half-land. */ nav a, .switch-menu a, .switch-menu button { color: var(--header-text-muted); text-decoration: none; } nav a:hover, .switch-menu a:hover, .switch-menu button:hover { color: var(--header-text); } nav a { white-space: nowrap; position: relative; } nav a.active { color: var(--header-text); border-bottom: 2px solid var(--accent); } /* The text is 21px tall, which is under the 24px minimum a pointer target is held to. Grown with a transparent overlay rather than with padding, because padding would move the header on every screen to fix something only a finger notices. */ nav a::after { content: ""; position: absolute; inset: -.3rem 0; } .header-tools { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; } /* Menu switches (language, theme) ------------------------------------------ One component, two instances. Both show the CURRENT value and list the alternatives on open. A third switch should reuse this rather than invent a fourth shape. Opening and closing is native
. site.js adds only what
will not do — closing when the visitor clicks away — so the component still works with the script blocked. */ .switch { position: relative; } .switch summary { color: var(--header-text-muted); cursor: pointer; list-style: none; font-size: .9rem; border: 1px solid var(--header-line); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); white-space: nowrap; } .switch summary::-webkit-details-marker { display: none; } .switch summary::after { content: " ▾"; font-size: .7rem; } .switch[open] summary, .switch summary:hover { color: var(--header-text); background: var(--header-line); } .switch-menu { position: absolute; right: 0; top: 110%; background: var(--header-bg); border: 1px solid var(--header-line); border-radius: var(--radius-sm); min-width: 8rem; z-index: 20; overflow: hidden; } /* Colour and underline come from the header-band rule above; what is left here is what makes these rows rather than links. */ .switch-menu a, .switch-menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 0; padding: .45rem .8rem; font: inherit; cursor: pointer; } .switch-menu a:hover, .switch-menu button:hover { background: var(--header-line); } .switch-menu form { margin: 0; } /* The navigation toggle IS a switch — same summary chrome, and the script that closes a switch on an outside click or Escape already finds it, because it looks for `details.switch` and this is one. What it does not have is a value to show, so the caret that means "there is a list under this" goes. It carries no width rules here at all: it is invisible until section 5 has a reason for it, which is the only place a menu button belongs. */ .nav-toggle { display: none; } .nav-toggle summary::after { content: none; } /* Card -------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); margin-bottom: var(--space-5); } /* Direct children only: prose keeps a readable measure while the card itself keeps the full width. The GRID shares that measure too. Without it a card of prose and a card of grid cells start their content at different left edges — the paragraph inset, the grid flush to the padding — and stacked down a page that reads as ragged even when nothing on it is wrong. Centred as a BLOCK, with the text inside still left-aligned. The capping is what makes this necessary: a 58rem paragraph left-aligned inside a 66rem card sits off-axis under a centred heading, and two capped paragraphs — one centred, one not — start at visibly different left edges. Every capped block is centred, so the question cannot come up per page. */ .card > p, .card > ul, .card > dl, .card > .grid { max-width: var(--measure); margin-inline: auto; } /* The hero is the one centred block on the site — a masthead, not body copy. It is what makes the motto read as a mark rather than a sentence someone left at the top of the page. Only the home page carries `.hero`; every other page's tagline stays left-aligned with the text it introduces. The centring has to re-centre the measure too: `.card > p` caps these paragraphs, and a capped block without an auto inline margin sits left inside a centred parent, which reads as a mistake rather than a choice. */ .hero { text-align: center; } .hero h1 { margin: .2rem 0; } .hero > p { max-width: var(--measure-tight); margin-inline: auto; } /* Section headings are centred, everywhere --------------------------------- The DEFAULT, not an opt-in — a card title is centred because it is a card title, so no page has to remember to ask and no two pages can disagree. A page's subtitle rides with its heading: the tagline directly after an h1 is part of the masthead, and leaving it left while the title centres reads as a miss rather than a choice. Body copy is deliberately NOT centred. Centred prose costs the reader the fixed left edge they return to on every line, and that cost grows with each line — which is exactly backwards for the longest text on the page. Headings INSIDE a grid are untouched: they are direct children of the grid cell, not of the card, and they sit above left-aligned copy in a narrow column where a centred heading would look unbalanced. */ .card > h1, .card > h2 { text-align: center; } /* Sub-headings — a group label above a list, or a named item within a section. On the same axis as the title above them, with room to breathe so the break between groups is visible without a rule or a box. Direct children only, again: an h3 inside a grid cell belongs to its cell, not to the card, and stays left-aligned with the copy beneath it. */ .card > h3 { text-align: center; margin-top: var(--space-6); } .card > h1 + .tagline { text-align: center; } /* Centre a whole block — heading, text and button — for a masthead or a closing prompt, where there is little text and it is meant to be read as a unit. */ .center { text-align: center; } .center > p, .center > ul, .center > dl { margin-inline: auto; } /* A trailing "read on" link, centred so a section closes on the same axis it opened on. */ .section-link { text-align: center; margin-top: var(--space-5); } /* A form is a narrow column, and a narrow column pinned to the left edge of a wide card reads as a mistake — more so under a centred heading. The column is centred; the fields inside it stay left-aligned, because a centred label above a centred input is harder to scan, not easier. The width matches the fields exactly, so the column has no empty margin of its own. */ .form-narrow { max-width: 28rem; margin-inline: auto; text-align: left; } .form-narrow input, .form-narrow textarea { max-width: none; } .form-narrow button { display: block; margin-inline: auto; margin-top: var(--space-5); } /* Short centred copy — a contact page, a confirmation — reads better on a shorter line than a page of prose does. */ .card-narrow > p { max-width: var(--measure-tight); } /* The motto is a brand mark, not a sentence — it sits with the name, above the tagline. */ .motto { color: var(--text); font-weight: 600; letter-spacing: .02em; margin: 0 0 .8rem; } .tagline { color: var(--text-muted); font-size: 1.1rem; } .status { color: var(--text-faint); font-weight: 400; font-size: .85rem; } .validation { color: var(--danger); font-size: .85rem; } .pending { color: var(--notice-text); background: var(--notice-bg); padding: .05rem .4rem; border-radius: .25rem; } /* Call to action ---------------------------------------------------------- */ .cta { display: inline-block; background: var(--btn-bg); color: var(--btn-text); padding: var(--space-3) 1.3rem; border-radius: var(--radius-sm); text-decoration: none; } /* Stated explicitly because `a:hover` out-specifies `.cta` — without this, hovering a call to action repaints its label in the link colour, on a dark button. */ .cta:hover { background: var(--btn-hover); color: var(--btn-text); } /* Footer ------------------------------------------------------------------ */ footer { text-align: center; color: var(--text-faint); font-size: .85rem; margin: var(--space-7) 0 var(--space-5); } footer a { color: var(--text-faint); } footer a:hover { color: var(--text); } /* Consent banner ---------------------------------------------------------- */ .consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--header-bg); color: var(--header-text-muted); padding: .8rem var(--space-5); display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .9rem; } .consent form { display: inline-flex; gap: var(--space-3); margin: 0; } .consent .decline { background: transparent; border: 1px solid #7a8fa5; color: var(--header-text-muted); } /* The same choice, offered again on the cookie policy page — on a light card rather than the dark banner, so it cannot borrow the banner's styling. Both options stay visible and the active one is marked, because a control that hides its own state leaves the visitor guessing whether their last choice registered. The current setting is a marker, not a button to press again. */ .choice { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); } .choice button[aria-pressed="true"] { background: transparent; color: var(--text-muted); border: 1px solid var(--border); cursor: default; } .choice button[aria-pressed="true"]::before { content: "\2713\00a0"; } .choice button[aria-pressed="false"]:hover { background: var(--btn-hover); } /* Utilities --------------------------------------------------------------- */ /* Honeypot: off-screen rather than display:none, which some bots skip. */ .hp { position: absolute; left: -9999px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text); padding: .5rem 1rem; z-index: 10; } .skip:focus { left: .5rem; } /* Only while the banner is on screen, which is why the class is rendered rather than assumed — reserving this space permanently would leave a gap under every page for a question already answered. */ body.has-consent { padding-bottom: var(--consent-reserve); } /* ── 5. RESPONSIVE ────────────────────────────────────────────────────────── */ /* FOUR TIERS: x-small < 22em the narrowest phones — the header's top line splits small < 48em phones and small tablets — the navigation becomes a menu medium 48em – 64em the row returns, on tightened gaps large >= 64em everything above this line; there is nothing to write HOW A TIER IS WRITTEN: it re-declares TOKENS. Structural rules appear only where a width genuinely changes the SHAPE of something rather than its size — which is the menu, the split header line, and nothing else. That is what keeps the components above unaware that more than one width exists. THE NUMBERS ARE LITERALS, AND HAVE TO BE. A media query condition is resolved before custom properties are, so `@media (max-width: var(--small))` does not fail loudly — it simply never matches. A TIER MUST EARN ITS NUMBER. This section said "three, and only three" when it was written, which was one tier too confident rather than wrong in principle: the bar is that a width changes the SHAPE of something, and x-small clears it — below it the top line cannot hold the wordmark and the controls together at all. The rule the old wording was reaching for still stands, so it is restated: a breakpoint added because something looked slightly better is how a stylesheet ends up with seven of them. Name what changes shape, or do not add the number. `em` rather than `px`, so the tiers move with a visitor who has set a larger default text size — who is precisely the visitor the row stops fitting for first. WHAT THE SMALL TIER IS FOR, stated because the numbers above do not say it: with a wrapping navigation this header gave each link a row of its own and stood 245px tall on a 390px screen, six rows deep, the language and appearance switches stranded in the middle of the column. The answer is not a narrower row. It is that below this width the links are a menu, and above it they are a row that cannot wrap. */ @media (max-width: 47.99em) { :root { --container-pad: 1rem; --page-gap: var(--space-5); --card-pad: var(--space-5); --header-pad: var(--space-3); /* Never bigger than the desktop size and never small enough to stop being a masthead; the middle term carries it between the two. */ --h1-size: clamp(1.6rem, 6vw, 2rem); /* The banner stacks down here, so it stands taller. */ --consent-reserve: 9rem; } /* THE MENU — the one place a width changes a shape. The toggle appears and the navigation waits to be asked for. `~` is what joins them: the panel is the toggle's SIBLING, so opening one reveals the other with no script at all and nothing a browser might not have. The cost is that MARKUP ORDER IS NOW LOAD-BEARING — a navigation moved above its toggle is a menu that silently stops opening, which is why a test holds that order. */ .nav-toggle { display: block; } nav { display: none; order: 1; } /* The brand takes the slack on the top line, so the toggle and the switches sit together at the end of it rather than trailing the wordmark. */ .brand { flex: 1; } .nav-toggle[open] ~ nav { display: flex; flex-direction: column; flex-basis: 100%; gap: 0; margin-top: var(--space-3); border-top: 1px solid var(--header-line); /* A column cannot overflow sideways, so the row's escape hatch is noise here — and left on, it clips the focus ring of whichever link is focused. */ overflow-x: visible; } /* Rows, not links: a target a thumb can find, and a line to tell one from the next. The overlay that grows the desktop hit area is removed rather than inherited — here the padding IS the target, and two overlapping targets are worse than the small one they replaced. */ .nav-toggle[open] ~ nav a { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--header-line); } .nav-toggle[open] ~ nav a::after { content: none; } /* The current page keeps its accent, moved to the edge the rows share. An underline would read as one more separator. */ .nav-toggle[open] ~ nav a.active { border-bottom: 1px solid var(--header-line); box-shadow: inset .2rem 0 0 var(--accent); } /* Both switches, and the toggle with them: a summary sized for a pointer is not sized for a finger. */ .switch summary { padding: var(--space-3) var(--space-4); } /* Stacked, because the text and two buttons side by side leave the buttons a few characters wide. */ .consent { flex-direction: column; gap: var(--space-3); text-align: center; } } /* THE NARROWEST PHONES — where the top line stops being one line. Below about 350px the wordmark, the menu button and both switches cannot share a row, so the switches wrap under them and sit bunched at the left with the whole right half of the line empty, which reads as a mistake rather than a break. They are given the line properly instead: it is theirs, and they take its full width — language at the leading edge, appearance at the trailing one. The header then reads as two lines with something at each end of both, which is the shape it already had on one line. 22em (352px) rather than a device's width, and just ABOVE where the top line actually gives out: at 360px — the width a great many Android phones report — the controls still fit beside the wordmark, and forcing them down there would spend a line of a small screen to fix something that was not wrong. */ @media (max-width: 22em) { .header-tools { flex-basis: 100%; justify-content: space-between; } } /* The row returns, and on this tier it needs the room: the gaps are what let the LONGER language hold one line here — measured, at 768px, where English fit and Greek did not. A range query, so the desktop tier keeps its own spacing exactly. */ @media (min-width: 48em) and (max-width: 63.99em) { :root { --header-gap: 1rem; --nav-gap: .8rem; } }