/* --------------------------------------------------------------------------
Shared foundation. Every rule here is a constraint the previous four builds
proved necessary, not a style choice -- the look of each site comes from its
own tokens file, loaded after this one.
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; }
/* a 1px border on a max-width:100% image overflows a 320px viewport by 2px --
the only thing that overflowed the whole of the previous job */
img { box-sizing: border-box; }
a { color: inherit; }
table { max-width: 100%; }
/* Skip link: visually hidden but keyboard-reachable. The 1x1+clip pattern is
deliberate -- the mobile audit skips clipped elements rather than counting
this as a failed tap target, which is what it is not. */
.skip {
/* left:0, not -1px. The clip below is what hides this link; the negative
offset was belt-and-braces and it put one pixel outside the viewport,
which the mobile audit correctly reported as horizontal overflow on a
page whose layout did not absorb it. The hiding does not need it. */
position: absolute; left: 0; top: 0; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
background: #fff; color: #000; z-index: 999;
/* NO padding in the hidden state. With box-sizing:border-box a 1px box
with 10px/16px padding still lays out at 32x20 -- the link was not
hidden at all, and the mobile audit reported it as a failed tap target
on every page. Padding belongs to the focused state, which is the only
state anyone sees. */
padding: 0;
}
.skip:focus {
width: auto; height: auto; clip: auto; clip-path: none;
padding: 10px 16px; left: 0;
}
/* missing-image fallback, wired in js/site.js */
img.img-missing {
background: repeating-linear-gradient(135deg,#efece6 0 10px,#e6e2d8 10px 20px);
min-height: 40px; object-fit: contain;
}
@media (max-width: 900px) {
/* iOS Safari zooms the whole page when a focused control is under 16px.
Name the CLASSES the stylesheet uses, not just the element types -- a
bare `input` selector loses on specificity to any `.field` rule and the
fix ships inert. That happened on the previous job. */
input, select, textarea, button,
.field, .field2, input[type="text"], input[type="email"], input[type="tel"] {
font-size: 16px;
}
input, select, textarea, button { min-height: 44px; }
/* every tap target reaches 44x44 */
nav a, .nav a, footer a, .btn { min-height: 44px; display: inline-flex;
align-items: center; }
/* a.tap is stamped at build time by mark_tap_targets(): a link that is the
whole of its or
. min-WIDTH too -- an inline-flex box shrinks to
its text, and "Bonjing" is 60px wide however tall it is. */
a.tap { min-height: 44px; min-width: 44px; display: inline-flex;
align-items: center; }
.also li { margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* --------------------------------------------------------------------------
The winette2 theme's own style.css ships untouched above this file. What
follows exists because the crawl did NOT capture the theme's responsive
stylesheet: every archived page asks for style.responsive.css and the
archive contains one theme file, style.css. Without this block the site is
a fixed-width desktop layout on a phone.
Everything here is inside a media query, so the desktop rendering is the
theme's, unchanged.
-------------------------------------------------------------------------- */
@media (max-width: 1000px) {
/* Artisteer lays this theme out on a stack of containers with hard pixel
widths -- #main and .sheet at 875px, everything inside at 851px. Written
against what the browser reports, not against what the class names
suggest: the outermost container is `div#main`, an ID, and the first
version of this block targeted `.main`, a class that matches nothing
here and would have lost on specificity if it did. Measured at 320px:
875px wide in a 320px viewport, 555px of overflow on all 36 pages. */
/* `body { min-width: 875px }` -- the theme puts the floor on the BODY, so
releasing every child of it changed nothing at all. Found by reading the
stylesheet for the number the browser reported, rather than by adding
more selectors to the list below. */
html, body { min-width: 0 !important; overflow-x: hidden; }
#main, .sheet, .nav, .header, .shapes, .layout-wrapper, .content-layout,
.content-layout-row, .layout-cell, .footer, .postcontent, .article,
.art-postcontent, .box, .block {
width: auto !important; max-width: 100% !important;
min-width: 0 !important; float: none !important;
box-sizing: border-box;
}
#main, .sheet { margin: 0 !important; }
.sheet { padding: 0 12px !important; }
.header { height: auto !important; }
.header .logo, .header-inner, .headline, .slogan {
position: static !important; width: auto !important; height: auto !important;
}
/* the decorative absolutely-positioned corner graphics have nothing to
decorate once the fixed width is gone */
.shapes { display: none !important; }
.nav ul.hmenu, ul.hmenu, .nav ul.menu {
display: flex !important; flex-wrap: wrap; gap: 2px;
padding: 0 !important; margin: 0 !important; width: auto !important;
}
ul.hmenu li, .nav ul.menu li {
float: none !important; list-style: none; width: auto !important;
}
ul.hmenu li a, .nav ul.menu li a, .footer a {
display: inline-flex !important; align-items: center;
min-height: 44px; min-width: 44px; padding: 0 10px;
width: auto !important;
}
img, .postcontent img, .article-content img {
max-width: 100% !important; height: auto !important;
float: none !important; display: block; margin: 12px auto;
}
table { display: block; overflow-x: auto; }
/* Tap targets, named from what the audit measured at 320px: the
previous/next links on every attachment page (19px tall), the post-title
link in .postheader (38px), and the centred caption links. Nothing here
is precautionary. */
.navigation a, .postheader a, .postcontent p.center a,
.postmetadataheader a, .alw-plan a, .also a, a.tap {
display: inline-flex !important; align-items: center;
min-height: 44px; min-width: 44px;
}
/* the theme's credit line is set at 10px, under the 12px floor a phone
needs; it is the only text on the site below it */
.footer-text span, .page-footer, .page-footer * { font-size: 12px !important; }
}
/* the plan's H2 outline, appended below each archived page's own copy */
.alw-plan { margin: 24px 0 8px; }
.alw-plan h2 { margin-top: 26px; }
.alw-plan ul { padding-left: 20px; }
.alw-rates { list-style: none; padding-left: 0; }
.alw-rates li { padding: 6px 0; border-bottom: 1px dotted #cfd8e6; }
.alw-note { padding: 10px 0; }
.also ul { list-style: none; padding-left: 0; }
.also li { display: inline-block; margin: 0 14px 6px 0; }