/* Carino DICOM landing page — Carino workshop dark theme (gold on near-black). Tuned to be compact: downloads sit in the hero, tech details collapse. Same value-rendering policy as the dashboard (see the top of pacs/web/styles.css): prose wraps at spaces (word-break: normal + overflow-wrap: break-word), paths and URLs are the one class allowed to break mid-token (overflow-wrap: anywhere), and shell commands scroll inside their own box rather than wrap. `word-break: break-all` is never used — a value cut at an arbitrary character is a value read wrong. */ :root { --accent: #eab308; --bg: #050505; --bg-2: #0d0d0d; --panel: #111; --border: #262626; --text: #f5f5f5; --muted: #8a8a8a; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* Surplus height: how much taller this viewport is than the point where the page stops being short of room. Measured, not guessed — the hero has 48px of slack at 1280×720 and 37px at 390×844, so those must not grow at all, while 1699×1252 wastes 571px and 1920×1080 wastes 410px. Every size below is written as `base + --tall × rate`, which is zero under 900px tall and therefore leaves every short screen exactly as it was. It is a calc rather than a media query because a breakpoint would step: any vh expression steep enough to be worth having above 900px is already too steep below it, so switching between them jumps the whole hero at one pixel of resize. This form is continuous — at exactly 900px the surplus is 0px and both sides agree. */ --tall: max(0px, 100vh - 900px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* One screen: the hero takes whatever height the navbar leaves and sits its content at the top of it, so the page reads as composed rather than as a page that ran out. `min-height` and `margin` rather than a fixed 100dvh and `justify-content: center` — both of those clip the top of the content when it does not fit, and this has to degrade into an ordinary scrolling page on a short screen, at 200% zoom, or in a locale that runs long. */ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.55; min-height: 100dvh; display: flex; flex-direction: column; } .hero { flex: 1 0 auto; display: flex; } /* Anchored to the top, not centred. Centring put 288px of nothing between the navbar and the mark on a 1252px-tall screen, which reads as a page that has come loose from its own header. Surplus height now collects at the bottom, where it is quiet, and the hero's top padding sets the gap. */ .hero > .wrap { margin-block: 0 auto; width: min(1040px, 90%); } a { color: var(--accent); } .wrap { width: min(1040px, 90%); margin: 0 auto; } .gold { color: var(--accent); } .btn { display: inline-block; font-family: var(--mono); font-size: min(1.05rem, calc(.8rem + var(--tall) * .009)); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; text-decoration: none; cursor: pointer; padding: min(19px, calc(9px + var(--tall) * .026)) min(32px, calc(16px + var(--tall) * .04)); border-radius: 7px; border: 1px solid var(--border); color: var(--muted); background: transparent; transition: .15s; } .btn.ghost:hover { color: var(--accent); border-color: var(--accent); } /* ---- hero (compact, holds the downloads) ---- */ /* The whole page is this one block now, so it is sized against the viewport rather than against its own content: everything scales down together on a short screen instead of the last row falling off the bottom. The clamps are what make a 768px laptop and a 1080p monitor both work without a media query per element. Nothing is pinned to 100vh and nothing forbids scrolling — a reader at 200% zoom, or in a locale whose lede runs long, still gets a scrollbar rather than losing the bottom of the page. */ /* Leaner than it was, to pay for the EKG beside the mark. Now that the wrap is top-anchored this padding is also the gap under the navbar, so it does position something — it is the only thing holding the mark off the header, and it still gives ground on a short screen, which is the moment the page would rather spend pixels on content than on its own margins. Measured at 1024×600, where the trim gives back what the animation takes. */ .hero { padding: min(72px, calc(clamp(12px, 2.4vh, 46px) + var(--tall) * .07)) 0 clamp(10px, 2vh, 34px); text-align: center; background: radial-gradient(1100px 360px at 50% -12%, rgba(234,179,8,.10), transparent 70%); } /* The EKG above the headline. Sized off the viewport HEIGHT rather than its width — height is the scarce dimension on this page, so the one new block on it shrinks with the thing it competes against. `width: auto` + the viewBox's own 5:1 ratio keeps the trace undistorted at every size, and overflow stays visible so the pulse's glow is not clipped by the box. Motion is decoration here, and a reader who has asked their system for less of it gets the static trace: the shape carries the meaning, the sweep only carries the mood. */ /* Mark above the trace, the heartbeat reading as its underline. Stacked rather than in a row, so unlike the row version the logo does cost height — the mark plus the gap, which is why the gap is kept tight and only opens up on a screen with height to spare. The trace runs wider than the mark at every size (5:1 against a square) and that is the point: a broad line under a compact letter, not two objects the same width. */ .hero-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(34px, calc(9px + var(--tall) * .05)); margin: 0 auto min(56px, calc(clamp(3px, .7vh, 12px) + var(--tall) * .11)); } .hero-mark .mark { width: auto; display: block; height: min(136px, calc(clamp(19px, 3.5vh, 44px) + var(--tall) * .21)); } .ekg { display: block; margin: 0; width: auto; aspect-ratio: 5 / 1; overflow: visible; height: min(72px, calc(clamp(16px, 3vh, 38px) + var(--tall) * .10)); } .ekg polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; } .ekg .trace { stroke: var(--accent); stroke-width: 2; opacity: .12; } .ekg .pulse { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 22 120; filter: drop-shadow(0 0 6px rgba(234,179,8,.9)); animation: ekg 1.5s linear infinite; } @keyframes ekg { from { stroke-dashoffset: 142; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .ekg .pulse { animation: none; stroke-dasharray: none; } } /* No heartbeat on a phone. It is the widest thing in the hero at 5:1, so on a 390px screen it is either hairline-thin or it sets the width of everything above the fold, and a phone is the one place this page was already scrolling. The mark takes the space instead and grows into it — a logo reads at a glance where a 25px trace does not. Removed rather than hidden with visibility, so it gives its height back. */ @media (max-width: 640px) { .ekg { display: none; } .hero-mark .mark { height: clamp(46px, 13vw, 78px); } } .hero h1 { line-height: 1.1; font-weight: 800; letter-spacing: -.01em; font-size: min(3.6rem, calc(clamp(1.6rem, 3.6vw + .4vh, 2.7rem) + var(--tall) * .035)); margin: 0 0 min(64px, calc(clamp(8px, 1.5vh, 16px) + var(--tall) * .11)); } .lede { color: #d4d4d4; max-width: min(820px, calc(660px + var(--tall) * .35)); font-size: min(1.32rem, calc(clamp(.92rem, .55rem + .5vh, 1.05rem) + var(--tall) * .012)); margin: 0 auto min(52px, calc(clamp(12px, 2.4vh, 26px) + var(--tall) * .07)); } .lede abbr { text-decoration: underline dotted var(--muted); cursor: help; } .lede em { color: var(--text); font-style: normal; border-bottom: 1px solid var(--accent); } /* download chips */ .downloads { display: flex; justify-content: center; flex-wrap: wrap; gap: min(30px, calc(14px + var(--tall) * .04)); } .dl-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: min(226px, calc(150px + var(--tall) * .09)); padding: min(30px, calc(14px + var(--tall) * .028)) min(46px, calc(22px + var(--tall) * .04)); border-radius: 11px; text-decoration: none; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel), #0a0a0a); color: var(--text); transition: .16s; } .dl-btn:hover { border-color: var(--accent); transform: translateY(-2px); } .dl-btn b { font-size: min(1.42rem, calc(1.02rem + var(--tall) * .013)); } .dl-btn .fmt { font-family: var(--mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* A release carrying two architectures for one OS turns that chip from a link into a box with one link per arch in the format slot — a link cannot nest inside a link, so the chip itself stops being the hit target and the arch names become it. They have to look like it: the slot is 0.68rem, which is small enough that colour alone would not read as "press this". */ .dl-btn .fmt a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(234,179,8,.45); } .dl-btn .fmt a:hover { border-bottom-color: currentColor; } .dl-btn.recommended .fmt a { color: #3a2c00; border-bottom-color: rgba(58,44,0,.5); } .dl-btn .rec { display: none; } .dl-btn.recommended { border-color: var(--accent); background: var(--accent); color: #050505; box-shadow: 0 10px 30px rgba(234,179,8,.22); } .dl-btn.recommended .fmt { color: #3a2c00; } .dl-btn.recommended .rec { display: block; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #050505; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; white-space: nowrap; } /* Above the buttons now, so it reads as their label rather than as a footnote. The number itself is gold: it is the one thing in the line worth reading, and the word "Version" is only there to say what the number is. */ .version { margin: 0 0 min(28px, calc(clamp(7px, 1.2vh, 14px) + var(--tall) * .035)); font-family: var(--mono); font-size: min(1rem, calc(.78rem + var(--tall) * .008)); color: var(--muted); } .version strong { color: var(--accent); font-size: .92rem; letter-spacing: .02em; } .version a { color: var(--accent); } .dl-manual { margin: min(38px, calc(clamp(9px, 1.6vh, 18px) + var(--tall) * .05)) 0 0; } .dl-all { margin: min(24px, calc(clamp(6px, 1vh, 10px) + var(--tall) * .035)) 0 0; font-size: min(1.02rem, calc(.82rem + var(--tall) * .008)); } /* A language the manual has not been written in yet. app.js puts this on the manual button when it is about to hand a non-English reader the English page. The marker is decoration, so it lives here rather than inside the label — otherwise it is a translated string somebody has to remember to remove. */ .btn.soon { opacity: .62; } .btn.soon::after { content: " · EN"; font-family: var(--mono); font-size: .72em; opacity: .8; } .btn.soon:hover { opacity: 1; } .dl-all a { color: var(--accent); text-decoration: none; } .dl-all a:hover { text-decoration: underline; } /* Server: a