/* ========================================================================== Shared "YoRHa" design system, loaded on every page. Page stylesheets (home.css, events.css, ...) read these variables and must not redefine them. The look is a flat blue-white paper desktop in the spirit of the NieR:Automata UI: a faint line-art layer, a row of equal flat tabs on top, thin dashed chevron bands, windows with a dark blue title strip and a pale body, hairline borders, no shadows, no gradients, no radius. Everything sits on an 8px grid with one gutter (--yh-g). Palette (one token set, six section tints): paper / ink the bluish white-grey base and the dark blue ink light blue sky / video tint (--yh-blue) green sage from the video hills (--yh-green) ONE contrast --yh-accent, a vibrant blue (hue 215-230, never violet); swap this single variable (and --yh-accent-ink / --yh-accent-hi / -deep) to recolour every active mark and primary button. ONE alarm --yh-danger (+ -ink / -hi / -wash / -deep), a brick red: errors, destructive buttons and danger states only. Pure CSS and inline SVG; the only bundled assets are the fonts in /fonts (OFL, see public/fonts/LICENSES.md), the sig pictogram sprite and the home video: no CDNs. ========================================================================== */ /* ---------- type: Inter Tight (a tight neo-grotesk, one variable file per subset, light to semibold for titles) and JetBrains Mono, each as a latin + cyrillic subset, so Russian text never falls back ---------- */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-tight-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-tight-latin-wght-normal.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; } /* the ruble sign (the donation totals), one glyph cut from Inter Tight's latin-ext subset, so it matches the letters */ @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-tight-currency-wght-normal.woff2") format("woff2"); unicode-range: U+20BD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.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; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/jetbrains-mono-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin-700-normal.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; } :root { /* ---- YoRHa palette ---- */ --yh-paper: #e3e9ef; /* the page */ --yh-paper-hi: #f4f7fa; /* a window lying on it, input fill */ --yh-paper-bright: #f8fafc; /* /account: the page lifted towards white */ --yh-dots-quiet: #e6ebf0; /* /account: the dotted texture, a tone off the bright paper (1.15:1) */ --yh-ink-deep: #2d4059; /* /account: soft text, 10:1 on the plates */ --yh-plate-note: #eef2f6; /* /account: a note's plate */ --yh-paper-lo: #d0d9e2; /* list rows, tabs, bars */ --yh-paper-deep: #b8c4d1; /* hairline fills, track of a scrollbar */ --yh-paper-top: #fafcfd; /* an input under the pointer */ --yh-ink: #1e3049; /* text, borders, title strips */ --yh-ink-soft: #3f5272; /* secondary text (>= 5:1 on paper and on the rows) */ --yh-ink-mute: #71819b; /* hairlines and quiet icons (>= 3:1 on paper) */ --yh-blue: #bcd3e6; /* sky tint */ --yh-blue-deep: #5f8fc0; --yh-green: #a9bd98; /* sage tint */ --yh-green-deep: #6f8c5e; --yh-green-ink: #3a5a30; --yh-accent: #1f5cf0; /* THE contrast colour: change it here (+ the two below) */ --yh-accent-ink: #1a4bc8; /* the accent as small text on paper (>= 4.5:1) */ --yh-accent-hi: #6f9bff; /* the accent as a mark on the dark ink (>= 3:1) */ --yh-on-accent: #ffffff; /* text on a filled accent (>= 5:1) */ --yh-accent-deep: #10286a; /* the deepest blue: the dark end of the glossy picker */ --yh-accent-lit: #8cadff; /* the vivid blue the home chrome turns while the big button is lit: tabs, status strip (ink on it >= 5:1) */ --yh-accent-wash: #d3e0ff; /* its pale wash: the paper round the footer and the account tab, the frame plate */ /* the DANGER family: a clear brick / signal red (hue 8-12, orange-leaning: never pink or magenta). Only errors, destructive buttons and danger states use it (the error rows, a field that failed validation, the admin delete, "убрать"): tests/palette.test.js checks both the hues and where it is used. The accent blue stays "active / primary". */ --yh-danger: #c4361f; /* the mark / border / fill of a danger state (white on it 5.4:1) */ --yh-danger-ink: #a82a15; /* danger as small text on paper, panels and rows (>= 4.9:1) */ --yh-danger-hi: #ff8466; /* danger as a mark on the dark ink (>= 5:1) */ --yh-danger-wash: #fbe6e1; /* the error row's fill */ --yh-danger-deep: #6a1608; /* error text on that wash (>= 10:1) */ --yh-g: clamp(12px, 2.2vw, 32px); /* the one gutter */ /* ---- motion: the NieR vocabulary. Stepped (steps()) or short snappy curves, 120-260ms, never bouncy ---- */ --yh-t-fast: 140ms; /* a bullet flips, a bar slides */ --yh-t-mid: 240ms; /* a button's fill sweep */ --yh-t-wipe: 360ms; /* a title strip or a window wipes open */ --yh-stagger: 50ms; /* the delay between the rows of a cascade (40-60ms) */ --yh-snap: cubic-bezier(0.2, 0.9, 0.25, 1); /* ---- pixel texture: 4x4 Bayer ordered dither, baked into three small SVG tiles (pixels on the grid) ---- edge 8x6 ink pixels hanging under a title strip, dissolving into the window body (2px pixels) fade 16x32 paper pixels fading the top of the scene into the page (4px pixels, the video's own grain) ramp 64x8 a left-to-right ramp of accent-blue pixels on an ink strip (2px pixels) */ --yh-dz-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' shape-rendering='crispEdges'%3E%3Cpath fill='%231e3049' d='M0 0h2v2h-2zM2 0h2v2h-2zM4 0h2v2h-2zM6 0h2v2h-2zM2 2h2v2h-2zM6 2h2v2h-2zM4 4h2v2h-2z'/%3E%3C/svg%3E"); --yh-dz-fade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32' shape-rendering='crispEdges'%3E%3Cpath fill='%23e3e9ef' d='M0 0h4v4h-4zM4 0h4v4h-4zM8 0h4v4h-4zM12 0h4v4h-4zM0 4h4v4h-4zM4 4h4v4h-4zM12 4h4v4h-4zM0 8h4v4h-4zM8 8h4v4h-4zM12 8h4v4h-4zM4 12h4v4h-4zM12 12h4v4h-4zM0 16h4v4h-4zM8 16h4v4h-4zM4 20h4v4h-4zM8 24h4v4h-4z'/%3E%3C/svg%3E"); /* ---- type ---- */ --yh-font: "Segoe UI", "Frutiger", "Frutiger Linotype", "Myriad Pro", "Trebuchet MS", Tahoma, sans-serif; --hud-display: "Inter Tight", "Helvetica Neue", Arial, "Segoe UI", sans-serif; --hud-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace; /* the three tiny window controls (minimise, maximise, close) as one drawn SVG: hairline glyphs, no boxes, for title strips that are plain headings */ --ax-controls: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='21' viewBox='0 0 69 21'%3E%3Cg fill='none' stroke='%23f4f7fa' stroke-width='1.200' shape-rendering='crispEdges'%3E%3Cpath d='M9 14h8'/%3E%3Crect x='32.500' y='6.500' width='8' height='8'/%3E%3Cpath d='M52 6l9 9M61 6l-9 9'/%3E%3C/g%3E%3C/svg%3E"); /* the line-art layer: two pairs of huge circle arcs and long diagonal hairlines crossing the whole screen, ~8% ink, structural not decorative */ --yh-lineart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%231e3049' stroke-width='1.200'%3E%3Cg stroke-opacity='.13'%3E%3Ccircle cx='-60' cy='380' r='560'/%3E%3Ccircle cx='1720' cy='1010' r='780'/%3E%3C/g%3E%3Cg stroke-opacity='.08'%3E%3Ccircle cx='-60' cy='380' r='576'/%3E%3Ccircle cx='1720' cy='1010' r='796'/%3E%3Cpath d='M-140 150L1010 1010M-40 -60L1210 880M330 -90L1600 760M820 -80L1600 520'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* a dashed chevron band: dots on a line, a small V between them (tile 28x12) */ --yh-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cg fill='none' stroke='%231e3049' stroke-width='1' shape-rendering='crispEdges'%3E%3Cpath d='M0 1.500h28' stroke-dasharray='1 3' stroke-opacity='.75'/%3E%3Cpath d='M10.500 5l3.500 4 3.500-4'/%3E%3C/g%3E%3Cpath d='M0 7.500h1M27 7.500h1' stroke='%231e3049' stroke-opacity='.6'/%3E%3C/svg%3E"); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--yh-font); line-height: 1.6; color: var(--th-ink); background-color: var(--th-bg); } /* the line-art layer: fixed to the viewport, under everything, click-through */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--yh-lineart) center / cover no-repeat; pointer-events: none; } /* Keyboard focus: a square 2px ink ring (>= 3:1 on every paper tone); dark surfaces switch to paper below. */ :focus-visible { outline: 2px solid var(--yh-ink); outline-offset: 2px; } /* No entrance animation of any more (it was a 320 ms fade + 14px slide): it is the page transition's job (the rise below, or its fallback cover), and a second motion on the body ran again the moment the browser's own transition ended - the page "came in twice". Never give an animation or a transform that stays: a filled-forwards transform (even an identity) would make the containing block of position:fixed (the events modal would be page-sized). */ /* ========================================================================== Colour themes. (head-open.ejs) switches one small set of custom properties. Every theme shares the blue-white base and the ink; a theme only changes the section TINT (the status strip, the title-strip bullet, the dark fill of the active tab) and nudges the paper: sky (home) blue . meadow (events) green . sign (transparency) plain slate . cobalt (submit / vote / my submissions / edit) deeper blue . cyan (contact + auth) blue-green . classic (admin) plain blue-grey --th-bg / --th-bg2 page paper / lighter paper --th-panel window body fill --th-soft list rows, tabs, bars --th-ink / -soft text on the paper and panels --th-accent-ink tint as text --th-accent hover fill of a tab --th-on-accent text on the ink / accent --th-chrome-a / ink title strip fill and its text --th-tint / --th-tint-deep status strip fill / bullets and rules --th-rule hairline Every text pair is >= 4.5:1 (checked in tests/hud-header.test.js). ========================================================================== */ :root, body.theme-sky { --th-bg: #e3e9ef; --th-bg2: #f4f7fa; --th-panel: #eef2f6; --th-soft: #d3dde8; --th-ink: #1e3049; --th-ink-soft: #3f5272; --th-accent: #2b4f9e; --th-accent-ink: #1a4bc8; --th-on-accent: #f4f7fa; --th-chrome-a: #1e3049; --th-chrome-ink: #f4f7fa; --th-tint: #bcd3e6; --th-tint-deep: #5f8fc0; --th-rule: rgba(30, 48, 73, 0.34); } body.theme-meadow { --th-bg: #e3ebe9; --th-bg2: #f3f7f5; --th-panel: #edf3f0; --th-soft: #d2dfd8; --th-ink: #1e3049; --th-ink-soft: #3f5272; --th-accent: #3a5a30; --th-accent-ink: #2f5a24; --th-on-accent: #f4f7fa; --th-chrome-a: #1e3049; --th-chrome-ink: #f4f7fa; --th-tint: #a9bd98; --th-tint-deep: #6f8c5e; --th-rule: rgba(30, 48, 73, 0.34); } body.theme-sign { --th-bg: #e4e9ee; --th-bg2: #f4f6f9; --th-panel: #eef1f5; --th-soft: #d5dce6; --th-ink: #1e3049; --th-ink-soft: #3f5272; --th-accent: #2c4268; --th-accent-ink: #2c4268; --th-on-accent: #f4f7fa; --th-chrome-a: #1e3049; --th-chrome-ink: #f4f7fa; --th-tint: #cbd5e2; --th-tint-deep: #7387a3; --th-rule: rgba(30, 48, 73, 0.34); } body.theme-cobalt { --th-bg: #e1e8f0; --th-bg2: #f2f6fa; --th-panel: #ecf1f7; --th-soft: #d0dbe8; --th-ink: #1e3049; --th-ink-soft: #3f5272; --th-accent: #2b4f9e; --th-accent-ink: #1a4bc8; --th-on-accent: #f4f7fa; --th-chrome-a: #1e3049; --th-chrome-ink: #f4f7fa; --th-tint: #b3cdea; --th-tint-deep: #5a8bc4; --th-rule: rgba(30, 48, 73, 0.34); } body.theme-cyan { --th-bg: #e2eaee; --th-bg2: #f3f7f9; --th-panel: #edf2f5; --th-soft: #d1dee3; --th-ink: #1e3049; --th-ink-soft: #3f5272; --th-accent: #2c5a62; --th-accent-ink: #22565e; --th-on-accent: #f4f7fa; --th-chrome-a: #1e3049; --th-chrome-ink: #f4f7fa; --th-tint: #b4d4d6; --th-tint-deep: #5f9aa0; --th-rule: rgba(30, 48, 73, 0.34); } body.theme-classic { --th-bg: #e3e8ed; --th-bg2: #f4f6f8; --th-panel: #eef1f4; --th-soft: #d2d9e1; --th-ink: #1e3049; --th-ink-soft: #3f5272; --th-accent: #1e3049; --th-accent-ink: #1e3049; --th-on-accent: #f4f7fa; --th-chrome-a: #1e3049; --th-chrome-ink: #f4f7fa; --th-tint: #d0d9e2; --th-tint-deep: #8696ab; --th-rule: rgba(30, 48, 73, 0.38); } /* themed page scrollbar (the viewport takes it from ) */ html:has(body.theme-sky) { scrollbar-color: #5f8fc0 #d3dde8; } html:has(body.theme-meadow) { scrollbar-color: #6f8c5e #d2dfd8; } html:has(body.theme-sign) { scrollbar-color: #7387a3 #d5dce6; } html:has(body.theme-cobalt) { scrollbar-color: #5a8bc4 #d0dbe8; } html:has(body.theme-cyan) { scrollbar-color: #5f9aa0 #d1dee3; } html:has(body.theme-classic) { scrollbar-color: #8696ab #d2d9e1; } /* the portfolio one-pager (/events, ): the tones of its five sections. Four of them are palette tones (white, dark grey, the grey-blue of LORE and, inside it, the Win9x light blue); two are the owner's named section colours: SUNCYCLE yellow (hue ~54) and DISCORD blurple (hue ~235). tests/palette.test.js allows exactly those four tokens (--pf-bg-yellow, --pf-dots-yellow, --pf-bg-blurple, --pf-dots-blurple) outside the blue / green family and keeps everything else forbidden. events.css reads them; tests/portfolio-page.test.js checks that neighbours differ and that the text on each tone is >= 4.5:1 (white on the blurple is 4.61:1: the text there is white, never lighter or thinner). --pf-soft-* is the quiet text / rule colour on a tone, --pf-dots-* the tone of the dot texture (portfolio-dots.js lays it over the section; the dots keep text and quiet text readable, worst case included, see tests/portfolio-effects.test.js). The dark section's dots are LIGHTER than its ground (a light dot on #2b2b2b), the others darker. */ body.page-portfolio { --pf-bg-yellow: #eeda41; --pf-hdr-blue: #017eff; /* the blue of the SUNCYCLE 3 text (dates, the "no registration" line) */ --pf-hdr-sky: #7da9d9; /* the header of /events: the owner's swatch (the sky blue of the art's top edge) */ --pf-hdr-ink: #08121f; /* the ink on the header: 7.7:1 */ --pf-bg-white: var(--yh-paper-hi); --pf-bg-blurple: #5865f2; --pf-bg-dark: #2b2b2b; --pf-bg-lore: #c3cad2; --pf-fg-blurple: #ffffff; --pf-soft-dark: #c4ccd6; --pf-dots-yellow: #d9c537; --pf-dots-white: #c5cbd3; --pf-dots-blurple: #505de0; --pf-dots-dark: #4a4a4a; --pf-dots-lore: #aeb7c3; /* the old-Windows taskbar of /events (events.css, "the footer"): the face, bevel and light-blue strip tones of the LORE window (.pf-win) */ --pf-task-face: #dfe5ec; --pf-task-hi: #ffffff; --pf-task-shade: #8493a4; --pf-task-lo: #5d6a79; --pf-task-lit: #b3c5db; /* the bar itself: a dusty steel blue (grey-leaning, not the site's bright accent) with a lit top edge of the same hue family */ --pf-task-bar: #98abc3; --pf-task-edge: #d0dbe8; } /* ========================================================================== The header: one slim frame on every page (the portfolio look of /events, /contact and /submit). The wordmark is the link home, in the top row before the tabs; the tabs are pxpush link buttons (a thin rule on top, the label at the left, an arrow at the right, a fill that rises on hover, a quick letter scramble: public/js/header-roll.js or the page's own script); under them the status strip (hairline rules, no fill) and the account chip. There is no title / subtitle / back row and no dashed band: the page's own

carries its title. Markup: views/partials/header.ejs, hud-top.ejs, nav.ejs.
is a grid of: logo | tabs / status strip | account chip; .hud-top and .hud-main only group the markup (display: contents). The header takes the colour of the page it sits on, so header and page read as ONE surface. It reads these custom properties of ; the defaults below are the theme's page paper, a page that sits on another colour sets them on its body class (events.css: the yellow of SUNCYCLE; contact.css: the navy; submit.css: the dark band of the picker; home.css: the scene's sky): --hdr-bg the colour of the page under the header (what every text below is measured against) --hdr-paint what the header actually paints: transparent on the paper pages (so the line-art layer runs on behind it), the page colour itself where the page is a flat colour --hdr-fg wordmark, tab labels, account name, status text, focus ring (>= 4.5:1 on --hdr-bg) --hdr-soft the quiet text (the account chip; >= 4.5:1 on --hdr-bg) --hdr-line the hairlines: the tabs' top rules, the strip's rules, the chip's rule --hdr-fill / --hdr-fill-fg the fill that rises behind a hovered tab and the current tab, and the text over it --hdr-hover the wordmark on hover (>= 4.5:1 on --hdr-bg) --hdr-led the lit square of an open status --hdr-cta-ring a hairline round the bright-blue call-to-action tab where the blue would melt into the page (dark headers) tests/header-colours.test.js computes every pair for every page. ========================================================================== */ /* The header's METRICS: the one place that sizes it (tests/header-geometry.test.js: no page stylesheet sets a size, a gap, a padding or a margin on a header selector, nor redefines these tokens; the pages only choose COLOURS, in the --hdr-* custom properties below). The home page's header (home.css) lays the same parts out on its stage grid with these same tokens. */ :root { --hdr-pad-t: 10px; /* above the tab row */ --hdr-pad-b: 12px; /* under the status strip */ --hdr-col-gap: 12px; /* between the wordmark, the tabs / strip and the chip */ --hdr-tab-h: 34px; /* a tab */ --hdr-tab-gap: 4px; /* between two tabs */ --hdr-tab-px: 10px; --hdr-tab-fs: 11.52px; /* px, not rem: the home page scales the root size on big screens, the header must not change with it */ --hdr-logo-fs: clamp(1rem, 1.6vw, 1.25rem); --hdr-row-gap: 6px; /* between the tab row and the strip / the chip */ --hdr-strip-h: 28px; /* the status strip and the chip: one height, one centre line */ --hdr-bar-py: 4px; --hdr-bar-gap: 2px 14px; --hdr-bar-fs: 11.2px; --hdr-chip-w: 360px; /* the account chip: the same width for a guest, a member and an admin; a long address is clipped */ --hdr-chip-gap: 10px; --hdr-chip-pl: 12px; --hdr-chip-fs: 11.52px; --hdr-btn-px: 12px; /* the logout button */ --hdr-gap: 8px; /* the header's lower edge to the page's own first block (.hud-fill, auth, ledger) */ } body { --hdr-bg: var(--th-bg); --hdr-paint: transparent; --hdr-fg: var(--th-ink); --hdr-soft: var(--th-ink-soft); --hdr-line: var(--th-ink); --hdr-fill: var(--th-ink); --hdr-fill-fg: var(--th-on-accent); --hdr-hover: var(--th-accent-ink); --hdr-led: var(--yh-accent); --hdr-cta-ring: transparent; /* The footer takes the page's colour the same way (see "The footer" below). By default it reads the header's own properties (a var() on resolves against the body's computed values, so a page that sets --hdr-* gets its footer for free); a page whose footer is not the header's colour (home, /events) sets --ftr-* itself. */ --ftr-bg: var(--hdr-bg); --ftr-paint: var(--hdr-paint); --ftr-fg: var(--hdr-fg); --ftr-soft: var(--hdr-soft); --ftr-edge: var(--yh-ink-mute); --ftr-plate: var(--ftr-bg); --ftr-fill: var(--hdr-fill); --ftr-fill-fg: var(--hdr-fill-fg); --ftr-mark: var(--hdr-hover); } .site-header { position: relative; z-index: 10; /* below the lightbox of /events and the pop-ups */ } .hud-top, .hud-main { display: contents; } .site-header--compact { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--hdr-chip-w); grid-template-areas: "logo nav nav" "bar bar chip"; align-items: start; column-gap: var(--hdr-col-gap); width: 100%; max-width: none; margin: 0; padding: var(--hdr-pad-t) var(--yh-g) var(--hdr-pad-b); background: var(--hdr-paint); color: var(--hdr-fg); } /* the wordmark, in the top row */ .header-logo { grid-area: logo; align-self: center; margin-right: 4px; padding: 0 16px 0 0; color: var(--hdr-fg); font-family: var(--hud-display); font-size: var(--hdr-logo-fs); font-weight: 300; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none; white-space: nowrap; } .header-logo:hover { color: var(--hdr-hover); } /* tabs: pxpush link buttons. From 1100px up the row never wraps (guest, member and admin: up to 7 tabs): the tabs shrink together and clip if they ever must. Below that the row wraps into more rows. */ .header-nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: var(--hdr-tab-gap); min-width: 0; } @media (min-width: 1100px) { .header-nav { flex-wrap: nowrap; } } .header-nav a { position: relative; flex: 0 1 9rem; display: flex; align-items: center; justify-content: space-between; min-width: 0; min-height: var(--hdr-tab-h); padding: 0 var(--hdr-tab-px); border-top: 1px solid var(--hdr-line); background: var(--hdr-plate, none); color: var(--hdr-fg); font-family: var(--hud-mono); font-size: var(--hdr-tab-fs); letter-spacing: 0.04em; line-height: 1.2; text-decoration: none; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: clip; isolation: isolate; transition: color 0.12s ease; } .header-nav a::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; background: var(--hdr-fill); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.1s ease-in-out; } .header-nav a::after { content: "\2197\FE0E"; content: "\2197\FE0E" / ""; flex: none; margin-left: 8px; transition: transform 0.2s ease; } .header-nav a:hover, .header-nav a:focus-visible { color: var(--hdr-fill-fg); } .header-nav a:hover::before, .header-nav a:focus-visible::before { transform: scaleY(1); transform-origin: 50% 100%; transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .header-nav a:hover::after, .header-nav a:focus-visible::after { transform: translate(2px, -2px); } .header-nav a[aria-current="page"] { background: var(--hdr-fill); color: var(--hdr-fill-fg); } .header-nav a[aria-current="page"]::before { background: var(--hdr-fill); } /* keyboard focus on any header control: a 2px ring in the header's text colour (>= 4.5:1 on its own colour, whatever the page) */ .site-header--compact :focus-visible { outline: 2px solid var(--hdr-fg); outline-offset: 1px; } /* the account chip: avatar mark + "welcome, name" + logout, at the right end of the status strip's row */ .hud-chip { grid-area: chip; display: flex; align-items: center; gap: var(--hdr-chip-gap); box-sizing: border-box; width: var(--hdr-chip-w); min-width: 0; min-height: var(--hdr-strip-h); margin-top: var(--hdr-row-gap); padding: 0 0 0 var(--hdr-chip-pl); border-left: 1px solid var(--hdr-line); background: var(--hdr-plate, none); color: var(--hdr-soft); font-family: var(--hud-mono); font-size: var(--hdr-chip-fs); line-height: 1.2; } .hud-chip__avatar { flex: none; width: 22px; height: 22px; } .hud-chip__avatar .av-ring { fill: none; stroke: var(--hdr-fg); stroke-width: 1.6; } .hud-chip__avatar .av-body { fill: var(--hdr-fg); stroke: none; } .hud-chip--guest .hud-chip__avatar .av-body { fill: var(--hdr-soft); } /* logged in: the account button, a compact square-edged link to /account: a small avatar circle (the e-mail's first letter, filled with the header's fill colour) and the word «аккаунт»; hover / current page: the same fill sweep colours as the tabs and the logout button (the circle inverts). The address stays beside it as quiet text. */ .hud-chip__account { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--hdr-strip-h); padding: 0 10px 0 3px; border: 1px solid var(--hdr-fg); background: transparent; color: var(--hdr-fg); font-family: var(--hud-mono); font-size: var(--hdr-chip-fs); line-height: 1.2; text-decoration: none; text-transform: uppercase; transition: background-color 0.12s ease, color 0.12s ease; } .hud-chip__avatar--initial .av-ring { fill: var(--hdr-fill); stroke: var(--hdr-fg); stroke-width: 1.6; } .hud-chip__avatar .av-initial { fill: var(--hdr-fill-fg); font-family: var(--hud-mono); font-size: 16px; font-weight: 700; } .hud-chip__account + .hud-chip__text .header-account { color: var(--hdr-soft); font-weight: 400; } .hud-chip__account:hover, .hud-chip__account:focus-visible, .hud-chip__account[aria-current="page"] { background: var(--hdr-fill); color: var(--hdr-fill-fg); } .hud-chip__account:hover .av-ring, .hud-chip__account:focus-visible .av-ring, .hud-chip__account[aria-current="page"] .av-ring { fill: var(--hdr-fill-fg); stroke: var(--hdr-fill-fg); } .hud-chip__account:hover .av-initial, .hud-chip__account:focus-visible .av-initial, .hud-chip__account[aria-current="page"] .av-initial { fill: var(--hdr-fill); } .hud-chip__text { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-account { color: var(--hdr-fg); font-weight: 700; } .header-logout-form { display: inline; flex: none; } .header-logout-btn { min-height: var(--hdr-strip-h); padding: 0 var(--hdr-btn-px); border: 1px solid var(--hdr-fg); border-radius: 0; background: transparent; color: var(--hdr-fg); font-family: var(--hud-mono); font-size: var(--hdr-chip-fs); line-height: 1.2; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .header-logout-btn:hover, .header-logout-btn:focus-visible { background: var(--hdr-fill); color: var(--hdr-fill-fg); } /* admins only: the small square button at the very end of the tabs, a wrench (nav.ejs). It keeps the tab's top rule and fill, loses the arrow, and sits at the right end of the row. */ .header-nav a.header-nav__admin { flex: none; justify-content: center; width: 34px; margin-left: auto; padding: 0; border: 1px solid var(--hdr-line); } .header-nav a.header-nav__admin::after { display: none; } .header-nav__admin svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: miter; } /* status strip: real data, date at the right, between two hairlines (no fill unless a page gives --hdr-plate: it is the page's own colour) */ .hud-bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; gap: var(--hdr-bar-gap); box-sizing: border-box; min-height: var(--hdr-strip-h); margin: var(--hdr-row-gap) 0 0; padding: var(--hdr-bar-py) 0; border-top: 1px solid var(--hdr-line); border-bottom: 1px solid var(--hdr-line); background: var(--hdr-plate, none); color: var(--hdr-fg); font-family: var(--hud-mono); font-size: var(--hdr-bar-fs); letter-spacing: 0.04em; line-height: 1.5; } .hud-bar__sep { color: var(--hdr-fg); } .hud-bar__item { display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap; } .hud-bar__led { flex: none; width: 7px; height: 7px; border: 1px solid var(--hdr-fg); background: transparent; } .hud-bar__item--on .hud-bar__led { background: var(--hdr-led); } .hud-bar__date { margin-left: auto; white-space: nowrap; } /* tablets and phones: the account chip gets its own row above the status strip */ @media (max-width: 899px) { .site-header--compact { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo nav" "chip chip" "bar bar"; } .hud-chip { width: auto; padding: 0; border-left: 0; } } /* phones: the wordmark, the tab grid, the chip and the strip stack */ @media (max-width: 719px) { .site-header--compact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "nav" "chip" "bar"; padding-top: 8px; } .header-logo { padding-bottom: 4px; } .header-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); } .header-nav a.header-nav__admin { grid-column: 1 / -1; justify-self: end; margin-left: 0; } .hud-bar { gap: 2px 10px; } .hud-bar__date { margin-left: 0; } } /* dashed chevron band, above the footer */ .site-footer::before { content: ""; display: block; height: 12px; background: var(--yh-band) left center / 28px 12px repeat-x; pointer-events: none; } /* ---------- short pages: the footer rests on the bottom edge of the viewport ---------- is a viewport-high flex column and the page's content wrapper takes the spare height (home, the meadow events page and the .hud-fill pages set their own height; this rule has zero specificity so their flex / width rules win). */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } :where(body) > :where(main, .events-explorer, .container) { flex: 1 0 auto; width: 100%; } /* ---------- footer: the dashed band, one mono status line at the left, a row of small icon links at the right ---------- Five square icon-only links (28-32px: --ico), a hairline border in the muted ink, the same gap everywhere. The row shares the status line's centre line. Each link has an aria-label + title. The footer is one surface with the header and the page, read from custom properties like the header's --hdr-*: --ftr-bg the colour under the footer's text and icons (what every pair below is measured against; opaque where the footer lies fixed under the content) --ftr-paint what the footer paints (transparent on the paper pages, so the line-art runs on behind it) --ftr-fg the status line's name, the icons, the focus ring (>= 4.5:1 on --ftr-bg) --ftr-soft the quiet status text (>= 4.5:1 on --ftr-bg) --ftr-edge the hairline of an icon square (>= 3:1) --ftr-plate the colour behind an icon square (--ftr-bg unless the icons sit on plates of their own: the band, the home video) --ftr-fill / --ftr-fill-fg the sweep that fills an icon on hover and its icon colour over it (>= 4.5:1) --ftr-mark the // separators They default to the header's properties above, so the footer already matches on every page; home.css (the video), events.css (the Windows taskbar of /events) and submit.css (the band) set their own. tests/header-colours.test.js computes every pair per page. */ .site-footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 40px; padding: 0 var(--yh-g) 12px; background: var(--ftr-paint); color: var(--ftr-fg); } .site-footer::before { flex: 1 0 100%; margin: 0 0 10px; } .site-footer .hud-status { margin-right: auto; min-width: 0; overflow-wrap: anywhere; color: var(--ftr-soft); } .hud-status__user { color: var(--ftr-fg); font-weight: 700; } .hud-status__sep { color: var(--ftr-mark); font-weight: 700; } .site-footer__privacy { color: var(--ftr-soft); font-size: 0.72rem; text-decoration: underline; text-underline-offset: 3px; } .site-footer__privacy:hover, .site-footer__privacy:focus-visible { color: var(--ftr-fg); } .social-links { --ico: 30px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: var(--ico); height: var(--ico); border: 1px solid var(--ftr-edge); background: transparent; color: var(--ftr-fg); text-decoration: none; /* the hover fill is the stepped sweep of the motion kit (end of this sheet) */ --yh-base: var(--ftr-plate); --yh-sw: var(--ftr-fill); --yh-fg-hover: var(--ftr-fill-fg); } .social-links svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; } .social-links svg .ico-fill { fill: currentColor; stroke: none; } .social-links a:focus-visible { outline: 2px solid var(--ftr-fg); outline-offset: 2px; } /* ========================================================================== Window (used by every inner page's content): a dark blue title strip with the tab name, the path and a small square close mark, a pale body with a hairline border.
события /events закрыть
... scrolls ...
(no
/