/* FitoNova site -- hand-written, no build step, no external requests. The sticky header: brand on the LEFT, controls (language switch, theme toggle, download button) on the RIGHT, and the solid button the whole site reuses. The section links are not in here any more -- owner's ruling, 2026-08-10: they live in the floating pill at the bottom of the viewport (`.dock`, further down this sheet), and the freed header centre is held for the PAGE links (/functii, /date, /firme) once those pages exist. One of the ordered sheets in public/css/; the load order in every page's IS the cascade, so a rule moved between files is a rule moved in the cascade. Owner's ruling 2026-08-10: no source file over 500 lines. */ /* --------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--paperfade); border-bottom: 1px solid var(--line); } /* The scroll progress bar. JS writes --progress (0..1) on this element and nothing else; the width is the stylesheet's business. */ .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--progress, 0) * 100%); background: var(--fill); transition: width 0.1s linear; } .hdr-row { /* The row ignores .wrap's 1240px cap on purpose (owner, 2026-08-10): brand hugs the LEFT edge of the viewport, tools the RIGHT, with only .wrap's 32px gutter between them and the glass. */ max-width: none; display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; } .brand { display: flex; align-items: center; gap: 10px; } /* One mark per theme. These carry the .brand img specificity deliberately: a bare `.brand img { display: block }` outranks a lone class and shows both variants at once. */ .brand img.mark-light { display: var(--mark-l); } .brand img.mark-dark { display: var(--mark-d); } .wordmark { font: 600 26px/1 "Barlow Condensed", sans-serif; letter-spacing: -0.01em; } .w-fito { color: var(--ink); } .w-nova { color: var(--grn); } /* The PAGE links, in the centre the section links vacated on 2026-08-10. /functii, /date and /firme exist now, so the held space is spent as the ruling said it would be: section links in the dock, page links here. Two `margin-left: auto` in one flex row is what centres it -- the free space splits between the nav and the tools, so the pill of page links sits between the brand and the controls without a grid or a magic width. */ .hdr-pages { margin-left: auto; display: flex; align-items: center; gap: 2px; } /* 36px, not the dock's 44: this set only ever shows at 900px and up, where it is a pointer target, and 36 is exactly what the solid button beside it measures. It is also load-bearing geometry -- the header's height is hero.css's `--hdrh`, and the hero subtracts it to end at the fold, so a taller row here would push the hero band 8px past the screen. */ .hdr-pages a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; white-space: nowrap; font: 500 15px/1 "Barlow", sans-serif; color: var(--ink); border-bottom: 2px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .hdr-pages a:hover { color: var(--acc); } /* The page you are on names itself, and not by colour alone: aria-current is the announcement and the rule underneath is the sighted half of it. */ .hdr-pages a[aria-current] { color: var(--acc); border-bottom-color: var(--acc); } .hdr-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; } .langs { display: flex; gap: 1px; } .langs > * { font: 600 12px/1 "Barlow", sans-serif; letter-spacing: 0.08em; padding: 7px 8px; color: var(--mut); } .langs > a:hover { color: var(--acc); } .langs > [aria-current] { background: var(--fill); color: var(--onacc); } /* js/core.js drops the theme button in here; the slot holds its geometry so the header does not jump when the script lands. */ .theme-slot { display: flex; align-items: center; min-width: 34px; min-height: 30px; } .theme-slot button { cursor: pointer; display: flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--line2); padding: 7px 11px; color: var(--ink); font: 500 12px/1 "Barlow", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; } .theme-slot button:hover { border-color: var(--acc); color: var(--acc); } /* The glyph. Both of these were invisible until 2026-08-10: js/core.js writes the two elements with a viewBox and no width/height, so each one sized itself as `auto` -- which for a replaced SVG means 100% of a containing block that has no height of its own. Height resolved to 0 and the button rendered its word with nothing beside it. The size belongs to the stylesheet, so it is set here rather than in the script's markup string. */ .theme-slot svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; } /* One glyph per theme, and the same four-block switch the brand marks use: the sun is the light theme's own mark, the moon the dark one's. The button names the theme it is IN (aria-label names the action), so the glyph agrees with the word beside it. */ .theme-slot .i-sun { display: var(--mark-l); } .theme-slot .i-moon { display: var(--mark-d); } .btn-solid { display: inline-flex; align-items: center; font: 600 14px/1 "Barlow", sans-serif; padding: 11px 18px; background: var(--fill); color: var(--onacc); } .btn-solid:hover { background: var(--fill2); color: var(--onacc); } /* -------------------------------------------------------- the section dock */ /* The four section links used to sit in the header's centre and vanish under 1020px, which is where a reader most needs them. Owner's ruling 2026-08-10: they become a floating pill, bottom-centre of the viewport, present at EVERY width and with JS off -- it is markup and this rule, nothing else. The scroll-spy follows them here (js/core.js looks for `.dock` first), so the `.is-active` vocabulary is unchanged. Blueprint grammar like everything else: square corners, panel ground, one hairline. It sits under the header's z-index 60 and over everything else, so a sticky header still wins where they would meet. */ .dock { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 55; max-width: calc(100vw - 20px); background: var(--paperfade); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line2); box-shadow: var(--shadow); } /* The scroller, not the pill: the border and the shadow stay put while the labels slide, so a narrow screen shows a pill with more inside it rather than a pill running off the edge. */ .dock-in { display: flex; align-items: center; gap: 2px; overflow-x: auto; max-width: 100%; padding: 0 4px; } .dock a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; white-space: nowrap; font: 500 15px/1 "Barlow", sans-serif; color: var(--ink); border-bottom: 2px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .dock a:hover { color: var(--acc); } .dock a.is-active { color: var(--acc); border-bottom-color: var(--acc); } /* On paper the pill is a control, not content. */ @media print { .dock { display: none; } } /* ------------------------------------------------------------ responsive */ /* Phone. The header stays ONE row -- brand on the left, the language switch and the theme toggle on the right -- because the three of them fit and a second sticky row would cost a tenth of the viewport on every page. What does not fit is the "download" button: brand + langs + theme + button measures ~413px inside a 335px content box, in all three languages. It comes out here rather than being shrunk past legibility -- the hero's own Play badge sits full-width 30px below it, the pricing band carries a second, and the footer a third, so nothing is lost but the duplicate. Everything that stays grows to a 44px target: the langs and the toggle were 26px and 28px tall, which is a miss waiting to happen on glass. */ @media (max-width: 560px) { .hdr-row { gap: 12px; padding-top: 6px; padding-bottom: 6px; } .brand { min-height: 44px; } .wordmark { font-size: 23px; } .hdr-tools { gap: 4px; } .langs > * { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; } .theme-slot { min-height: 44px; } .theme-slot button { justify-content: center; min-width: 44px; min-height: 44px; padding: 7px 12px; } /* The label goes, not the button: js/core.js keeps an aria-label on it, so the icon-only control still names itself to a screen reader. */ .theme-slot .theme-label { display: none; } .hdr-tools .btn-solid { display: none; } /* The dock keeps all four labels at 375 -- they measure ~300px together, inside a 355px pill -- and the scroller behind them covers the languages whose words are longer. Nothing is abbreviated: an initial-only tab bar would be four guesses in a row. */ .dock { bottom: 10px; max-width: calc(100vw - 16px); } .dock a { padding: 0 11px; font-size: 14px; } } /* Every solid button on a phone owes a 44px target; 11px of padding on a 14px line gave 36. */ @media (max-width: 768px) { .btn-solid { padding: 15px 20px; } } /* The page links come out of the header before they can shove the language switch off the row: brand + three page links + langs + theme + button measures past a 900px content box in the longest of the three languages. Nothing is lost by hiding them, because the same three links sit in a column of their own in the footer of EVERY page -- that is the deal that makes this safe, exactly as the download button's is (it comes out at 560 because the hero, the pricing band and the footer each carry one). */ @media (max-width: 900px) { .hdr-pages { display: none; } }