/* ========================================================================== JANARIX — THE RESPONSIVE LAYER Loaded third, after janarix.css and janarix-visual.css. WHY THIS IS A SEPARATE FILE, and not more rules bolted onto the other two: The first two files describe how the site LOOKS. This one describes how a layout CHANGES SHAPE between a desktop, a tablet and a phone. Those are different jobs, and keeping them apart means you can read this one file to see every place the site behaves differently on a phone, rather than hunting through eleven separate media queries in two other files. It follows the same convention janarix-visual.css already set: delete the one line from a page and the page reverts to the plainer version, intact. Nothing here changes the desktop design. Every rule sits inside a max-width media query, so above 780px this file is inert. Every colour, radius, shadow and type size is an existing token — no new palette. ------------------------------------------------------------------ A The rail grids that become a swipe on a phone B The compact chooser "Which one is you", six options at a glance C Section rhythm heading and spacing density on a phone D The footer two columns rather than one long column E Touch and access target sizes, focus, reduced motion ------------------------------------------------------------------ */ /* ========================================================================== A. THE RAIL ========================================================================== A set of cards that means something BECAUSE the cards sit side by side — JANARIX 15 / 30 / 45, the three power stations — loses that meaning when it is stacked. The endurance line on those cards was drawn to scale precisely so 22, 45 and 67 hours read as three different lengths. Stacked on a phone those three bars end up nine hundred pixels apart and the comparison, which is the whole point of the section, is gone. So below 780px the grid becomes a horizontal rail: one card at a time, the next one showing at the edge, snapping as you swipe. HOW TO USE IT: add data-rail to an existing .grid. Nothing else. The desktop grid rules are untouched and still do the work above 780px.
USE IT ONLY where the cards are genuine peers you would want to compare. A list of six different things you might be is not that, and it gets the compact grid in section B instead. A rail hides what is off-screen, which is fine for "which size" and wrong for "which one is you". ON NOT BREAKING THE PAGE: the rail bleeds to both screen edges so the peeking card reads as deliberate rather than as a card that got cut off. That is done with a negative inline margin exactly equal to .wrap's padding, which brings the rail's border box out to the edge of .wrap and NO FURTHER. The page itself never scrolls sideways. There is no overflow-x: hidden anywhere holding this together. */ /* --- The rail's own furniture ------------------------------------------- A count and a hint, so somebody who does not swipe still knows there is more, plus a dot that tracks where they are. Built by js/rails.js so a rail can never end up with a stale card count after somebody edits the cards. THIS ONE RULE SITS OUTSIDE THE MEDIA QUERY ON PURPOSE. The nav element is added to the page at every width; it is the .is-live class, set only when the script confirms the rail genuinely scrolls, that shows it. If the hidden state lived inside the phone media query, the element would fall back to a plain visible
on desktop and print three stray dots under the price cards. It did exactly that until this was moved out. --- */ .rail-nav { display: none; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; } @media (max-width: 780px) { [data-rail] { /* Cancel .wrap's gutter to reach the screen edge, then put it back as padding so the first card still lines up with the heading above it. */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); grid-auto-flow: column; grid-auto-columns: min(78%, 310px); /* leaves the next card peeking */ grid-template-columns: none; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; /* a swipe past the end does not drag the page or trigger back */ -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Room for the cards' own lift shadow and for the "Most homes choose this" badge, which is positioned to sit above its card. Without this the overflow container would clip both. */ padding-block: 14px; margin-block: -14px; } [data-rail]::-webkit-scrollbar { display: none; } [data-rail] > * { scroll-snap-align: start; /* A grid item in a scroll container will happily shrink below its content. These stop that. */ min-width: 0; height: auto; } /* A card in a rail is read one at a time rather than compared at a glance, so it can afford to be a little quieter than it is on a wall of three. This is the only place the rail touches card styling. */ [data-rail] .sys { padding: 22px 20px; } [data-rail] .sys-note { min-height: 0; } .rail-nav.is-live { display: flex; } .rail-dots { display: flex; gap: 2px; } /* The dot you SEE is 7px. The thing you TAP is 24 by 24, which is the smallest target WCAG 2.2 accepts. Done with a box that is transparent apart from its ::before, rather than by hanging a hit area off a 7px button, so the target is the element itself and shows up correctly in an accessibility tree. */ .rail-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; } .rail-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-day-2); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .night .rail-dot::before, .night-deep .rail-dot::before { background: var(--rule-night-2); } .rail-dot.is-on::before { background: var(--volt-deep); transform: scale(1.25); } .night .rail-dot.is-on::before, .night-deep .rail-dot.is-on::before { background: var(--volt); } .rail-hint { font-size: var(--fs-xs); color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; } .night .rail-hint, .night-deep .rail-hint { color: var(--on-night-3); } .rail-hint svg { width: 15px; height: 15px; } } /* Between 560 and 780 there is room for a wider card without losing the peek, which stops a 720px tablet showing one card marooned in space. */ @media (min-width: 561px) and (max-width: 780px) { [data-rail] { grid-auto-columns: min(56%, 340px); } } /* --- data-rail="wide" --------------------------------------------------- For a pair of long, content-heavy cards rather than a row of short ones: the two platform cards on the systems page run to about 1,250px each, and squeezing those into a 310px column only makes them taller. A wide card gives the content room and still shows an edge of the next one, which is all the peek has to do. The trade is deliberate: a short card wants a clear peek because you are comparing at a glance, and a long card wants width because you are reading it. */ @media (max-width: 780px) { [data-rail="wide"] { grid-auto-columns: min(92%, 420px); } } @media (min-width: 561px) and (max-width: 780px) { [data-rail="wide"] { grid-auto-columns: min(76%, 480px); } } /* ========================================================================== B. THE COMPACT CHOOSER — "Which one is you?" ========================================================================== Six options, each a doorway to a different page. This is the one section on the home page where the reader is looking for THEMSELVES, so every option has to be visible at once. A rail would hide four of the six, and an accordion would make you open six things to find out what they are. So on a phone it becomes two columns. Six full-width cards at 272px each become six half-width cards, and the section goes from two and a half screens to well under one. NOTHING IS TRUNCATED. An earlier version of this clamped the explanation to three lines with an ellipsis. That was wrong, and it was wrong in a way worth writing down: two of the three choosers are built from plain .card divs rather than from .door links, so there was no page to tap through to and the cut text could not be read at all. Hiding words behind an ellipsis with no way to reach them is deleting content, whatever it looks like in a screenshot. The two columns are the saving; the words stay. */ @media (max-width: 780px) { [data-chooser] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } [data-chooser] .door-art { min-height: 0; gap: 10px; padding: 14px 14px 12px; } [data-chooser] .door-art-top { gap: 8px; align-items: center; } [data-chooser] .door-art h3 { font-size: .9375rem; line-height: 1.2; } [data-chooser] .door-ico svg { width: 30px; } [data-chooser] .door-art .who { font-size: .625rem; letter-spacing: .1em; line-height: 1.3; } [data-chooser] .door-body { padding: 12px 14px 14px; } [data-chooser] .door-body .ex { font-size: .8125rem; line-height: 1.45; } /* The label stays. Each one says something different — "See the three sizes" against "See battery-only options" — and replacing six specific labels with one generic arrow would cost the reader more than the twenty pixels it saves. It is set to sit on one line at this width and allowed to wrap on a very narrow phone rather than being truncated. */ [data-chooser] .door .go { padding-top: 12px; font-size: .8125rem; gap: 6px; align-items: flex-start; } [data-chooser] .door .go svg { margin-top: 3px; } } /* The same treatment for the choosers built from plain .card stock rather than from .door cards — "You rent a condo or apartment" on the battery page, and the six kinds of custom job on the heavy-industry page. Same reasoning: six short options you are scanning for yourself in, so all six need to be reachable without six screens of scrolling. */ @media (max-width: 780px) { [data-chooser] > .card { padding: 16px 15px; } [data-chooser] > .card h3 { font-size: .9375rem; line-height: 1.2; } [data-chooser] > .card p { font-size: .8125rem; line-height: 1.45; margin-top: 7px; } [data-chooser] > .card .ico { width: 26px; height: 26px; } } /* Below 380px two columns of this card get genuinely cramped, so it goes back to one — but a short one, with the explanation dropped to a single line. A 320px phone is the only place this applies. */ @media (max-width: 379px) { [data-chooser] { grid-template-columns: minmax(0, 1fr); gap: 10px; } [data-chooser] .door { display: grid; grid-template-columns: 1fr auto; } [data-chooser] .door-art { grid-column: 1 / -1; } } /* ========================================================================== C. SECTION RHYTHM ON A PHONE ========================================================================== Not "make everything smaller". The heading sizes and section padding were set for a 1440px window where a heading has a whole column to itself. On a 390px screen the same values spend a third of the viewport before the first word of content, and that is what makes a long page feel endless even when the content is good. These are measured reductions to the vertical furniture around content, with the content itself untouched. */ @media (max-width: 780px) { /* Section padding. --sec already clamps down to 52px; on a phone the band boundaries read perfectly well at 44, and eleven bands on the home page makes that 176px back. */ .section { padding-block: 44px; } .section-sm { padding-block: 32px; } /* The gap between a section heading and its content. On desktop this is a considered pause; on a phone it is a hole. */ .head, .head-split { gap: 12px; margin-bottom: 22px; } .head-split .lead { margin-top: 2px; } /* Section headings. h2 is clamped for the desktop column width and comes out taller than it needs to be on a phone, where it is already the widest thing on screen. SCOPED DELIBERATELY. This has to reach the heading that titles a band and nothing else. Card titles on the catalogue and the blog are h2 as well — they sit directly under those pages' h1, so any other level would skip one — and a bare `.section h2` swept them up too and set a product name in 28px. That put 626px back onto the catalogue on a phone. The selectors below match the two places a band heading actually lives: on its own inside .wrap, or inside a .head block. */ .section > .wrap > h2, .section > .wrap > div > h2, /* split layouts put the heading in a column */ .section-sm > .wrap > h2, .head h2, .head-split h2 { font-size: clamp(1.6rem, 7.2vw, 2rem); line-height: 1.12; } /* Leads sit at reading size rather than at display size. */ .lead { font-size: 1rem; line-height: 1.55; } } /* ========================================================================== D. THE FOOTER ========================================================================== The two-column phone footer was already here, in section 20 of janarix.css, and nothing was added to duplicate it. What was wrong was the density of the links inside those columns. */ /* The footer link lists are the densest thing on the site on a phone: an 18px line box with a 10px gap, which is a 28px pitch for eighteen links sitting one under another. That is a mis-tap waiting to happen and it is under the 24px WCAG 2.2 asks for. The links get vertical padding rather than a bigger font, so the type size and the footer's look are unchanged and only the finger target grows. The list gap comes down by the same amount the padding adds, so the footer does not get taller for it. */ @media (max-width: 780px) { .foot ul { gap: 0; } .foot li > a { display: block; padding-block: 3px; min-height: 24px; } .foot-contact li + li { margin-top: 12px; } .foot-contact a { display: inline-block; padding-block: 3px; min-height: 24px; } .foot-social { gap: 2px 18px; } .foot-social a { display: inline-block; padding-block: 3px; min-height: 24px; } .foot-legal a, .foot-copy a { display: inline-block; padding-block: 3px; } } /* ========================================================================== E. TOUCH, AND THINGS THAT MUST STILL WORK ========================================================================== */ @media (max-width: 780px) { /* A rail is a horizontal gesture living inside a vertical page. Letting the browser own both axes is what makes it feel native; touch-action none here would fight the page scroll. */ [data-rail] { touch-action: pan-x pan-y; } /* Focus must stay visible when a card is scrolled to by keyboard. The rail scrolls its focused child into view on its own because of scroll-snap-align plus the browser's focus scrolling. */ [data-rail] > *:focus-visible, [data-rail] a:focus-visible { outline: 2px solid var(--volt-deep); outline-offset: 3px; } .night [data-rail] > *:focus-visible, .night [data-rail] a:focus-visible { outline-color: var(--volt); } } /* Snapping is motion. Somebody who has asked for less of it still gets the rail — it is the layout, not a decoration — but it stops sliding and simply jumps, and the dots stop animating. */ @media (prefers-reduced-motion: reduce) { [data-rail] { scroll-behavior: auto; } .rail-dot::before { transition: none; } .rail-dot.is-on::before { transform: none; } }