/* ADMEbio — Article 06 scoped article styles. (ARTICLE-06-PREVIEW-1) * * Article 06 reuses the APPROVED values of Articles 01-05 verbatim -- the 900px centred column, * the type scale, the gold table header, the figure frame, the quick-answer callout, the CTA and * the reference list -- so the series reads as one design rather than six. The ONLY differences * from Article 05's stylesheet are the scope class and the component prefix. If the approved look * changes, update this file to match it rather than letting it drift. * * EVERY rule is scoped under .article-06. There are no bare element selectors, because basic.css * is global and an unscoped `h2{}` or `table{}` here would reach the shared header, the navbar and * every other page. Articles 01-05 are untouched by this file. * * COLOURS ARE REUSED, NOT INVENTED. Each value was read out of assets/css/basic.css: * #eeb800 the brand gold .btn-s3 background-color, .bg-red * #0071bb the site blue used 9x in basic.css * #333 #666 #ddd #eee #f4f4f4 basic.css neutrals * #fcf8e3 #faebcc the theme's notice fill/border * * ACCESSIBLE CTA FROM THE START. The button label is #333 on the brand gold, not the site's * white-on-gold. White on #eeb800 measures 1.83:1 and fails WCAG AA at 15px bold (15px bold is NOT * "large text", which needs >=18.66px bold or >=24px). #333 on the same gold measures 6.91:1, and * 5.75:1 on the #d9a800 hover. This is the correction Articles 02-05 adopted, applied here from the * first build. The global .btn-s3 and Article 01 still use white on gold and are deliberately * untouched -- correcting those is an estate-wide brand change, not this article's business. * DO NOT "restore" this to #fff for consistency with basic.css. * * NO @media QUERIES, DELIBERATELY. The storefront has no viewport meta and .container is a fixed * 1008px, so a component-level breakpoint fires on a narrow device while the container around it * is still 1008px. Measured on Article 02: injecting a viewport meta raised horizontal overflow * from 28px to 633px at 375px wide, because the container never becomes fluid. Reflow here is * container-driven only, exactly as Articles 01-05. */ /* ---- the article column -------------------------------------------------------------- */ .article-06{max-width:900px;width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box; padding:18px 16px 40px;color:#333;font-size:15px;line-height:1.72;} /* basic.css line 7 zeroes the margin on every heading and p; restore it inside the article only, or headings collapse onto the block that follows them. */ .article-06 h1, .article-06 h2, .article-06 h3, .article-06 p, .article-06 ul, .article-06 ol{margin:0 0 14px;} /* No standfirst: the H1 already asks the question, and a subtitle restating it was removed from Article 02 for that reason. The H1's bottom margin carries the gap instead. */ .article-06 h1{font-size:32px;line-height:1.22;color:#0071bb;margin:6px 0 18px;font-weight:bold;} .article-06 h2{font-size:23px;line-height:1.3;color:#0071bb;margin:34px 0 12px;font-weight:bold; padding-bottom:7px;border-bottom:2px solid #eee;} /* h3 carries no rule and a smaller step, so the FAQ questions and any sub-points read as subordinate rather than as further top-level sections. */ .article-06 h3{font-size:17px;line-height:1.35;color:#333;margin:22px 0 7px;font-weight:bold;} .article-06 a{color:#0071bb;text-decoration:none;} .article-06 a:hover{text-decoration:underline;} /* basic.css line 11 sets ol,ul{list-style:none} globally, so the checklist and bullet lists lose their bullets and the references lose their numbers -- while the body cites [1]..[3]. Markers are restored here only, which is how the theme already handles it elsewhere. */ .article-06 ul,.article-06 ol{padding-left:24px;} .article-06 ul li{list-style-type:disc;} .article-06 ol.a06-refs{list-style-type:decimal;} .article-06 ol.a06-refs li{list-style-type:decimal;} .article-06 li{margin-bottom:7px;} .article-06 .a06-fineprint{font-size:13px;color:#666;font-style:italic;} .article-06 .a06-scope{font-size:13.5px;color:#666;margin:0 0 20px;} /* ---- quick answer: the direct-answer block, gold accent ------------------------------- */ /* Same treatment as Articles 01 and 02's key-point callout, reused rather than restyled. */ .article-06 .a06-quick{background:#f4f4f4;border-left:4px solid #eeb800;padding:14px 18px;margin:0 0 22px;} .article-06 .a06-quick p{margin:0;} .article-06 .a06-quick strong{color:#0071bb;} /* ---- development-only notice (never rendered on Production) --------------------------- */ .article-06 .a06-devnote{background:#fcf8e3;border:1px solid #faebcc;color:#8a6d3b; padding:9px 14px;margin:0 0 18px;font-size:13px;} /* ---- tables: the theme's look, with a gold header ------------------------------------- */ .article-06 .a06-table-wrap{overflow-x:auto;max-width:100%;margin:0 0 22px;} .article-06 .a06-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;} .article-06 .a06-table th{background:#eeb800;color:#333;text-align:left;padding:9px 11px; font-weight:bold;border:1px solid #e0ad00;vertical-align:bottom;} .article-06 .a06-table td{padding:9px 11px;border:1px solid #ddd;vertical-align:top;} /* Row headers keep scope="row" for screen readers, but must LOOK like an ordinary first column: without this the gold rule above paints the whole column and the table reads as two header bands. Same decision as Articles 02 and 03. */ .article-06 .a06-table tbody th{background:transparent;color:#333;font-weight:bold; text-align:left;padding:9px 11px;border:1px solid #ddd;vertical-align:top;} .article-06 .a06-table tbody tr:nth-child(even) td, .article-06 .a06-table tbody tr:nth-child(even) th{background:#f9f9f9;} /* ---- figures -------------------------------------------------------------------------- */ /* The image fills the figure and is capped at 100%, so inside the 1008px site container it renders near 870px. overflow-x:auto is a safety net: if the figure is ever placed somewhere narrower it scrolls rather than forcing the PAGE to scroll. The figcaption sits OUTSIDE that scrolling box on purpose. */ .article-06 .a06-fig{max-width:100%;box-sizing:border-box;margin:0 0 24px;padding:12px;border:1px solid #ddd;background:#fff;} .article-06 .a06-fig-scroll{overflow-x:auto;} .article-06 .a06-fig-scroll:focus{outline:2px solid #0071bb;outline-offset:2px;} .article-06 .a06-fig-img{display:block;width:100%;height:auto;max-width:100%;margin:0 auto;} .article-06 .a06-fig figcaption{font-size:13px;line-height:1.55;color:#666;margin:11px 2px 0;} .article-06 .a06-fig figcaption a{color:#0071bb;} .article-06 .a06-fig-full{display:inline-block;margin-top:6px;font-weight:bold;} /* ---- call to action -------------------------------------------------------------------- */ .article-06 .a06-cta{background:#f4f4f4;border:1px solid #ddd;border-top:3px solid #eeb800; padding:22px 24px;margin:30px 0;} .article-06 .a06-cta h2{margin-top:0;border-bottom:none;padding-bottom:0;} /* color:#333 is the accessible choice documented in this file's header. Not a mistake. */ .article-06 .a06-btn{display:inline-block;margin:8px 10px 0 0;padding:0 18px;min-height:34px; line-height:34px;border-radius:4px;font-size:15px;font-weight:bold;text-transform:uppercase; text-decoration:none;color:#333;background-color:#eeb800;border:1px solid #ffdd66;} .article-06 .a06-btn:hover{background-color:#d9a800;text-decoration:none;} .article-06 .a06-btn-alt{color:#0071bb;background:#fff;border:1px solid #0071bb;} .article-06 .a06-btn-alt:hover{background:#f4f4f4;} /* ---- references ----------------------------------------------------------------------- */ .article-06 .a06-refs{font-size:13.5px;color:#666;} .article-06 .a06-refs li{margin-bottom:10px;} /* ================================================================================================ ARTICLE-06-MOBILE-1 — page-scoped responsive opt-in. REV 2 after owner review (2026-10-12). WHY THIS IS SAFE. Every rule below is reached only through this stylesheet, and this stylesheet is loaded only by Insights::elisa_troubleshooting(). No other route, and no shared file, is touched. Reverting this block restores the page exactly. WHY `body .container` AND NOT `.container`. basic.css line 62 is `.container{width:1008px}`. This stylesheet is injected through $head_extra, which header.php emits at line 41 -- BEFORE the stylesheets at line 60. An equal-specificity rule here would therefore LOSE to basic.css. The `body` prefix makes it (0,1,1) against basic.css's (0,1,0), so it wins on specificity and does not depend on load order at all. DESKTOP IS UNCHANGED, BY CONSTRUCTION. `width:auto` + `max-width:1008px` + the inherited `margin:0 auto` computes to exactly 1008px at any viewport >= 1024px. Everything else lives inside a max-width media query. Verified by a byte-identical 1440px screenshot. ============================================================================================= */ body .container{width:auto;max-width:1008px;} /* ---- below desktop: fluid page, single-row navigation ------------------------------------ */ @media (max-width:1023px){ body .container{padding-left:16px;padding-right:16px;} /* NAVIGATION — REV 3: a real expandable hamburger menu. basic.css sets .main-menu{white-space:nowrap} with floated items, so it cannot wrap. REV 1 let it wrap (three ragged rows, rejected); REV 2 made it one horizontal scroller, which cost submenu access. REV 3 collapses it behind a labelled toggle and opens it as a vertical menu, so the second-level links come back. HOW IT WORKS, WITH NO JAVASCRIPT. _blocks/navbar.php now carries a checkbox and its label, both INLINE display:none so every other route is untouched. This stylesheet -- which loads only on Article 06 -- overrides those inline styles with !important, which is the only way to beat an inline style. `.nav-toggle:checked ~ .main-menu` then reveals the menu. THE CHECKBOX STAYS FOCUSABLE HERE. It is hidden by clipping, NOT by display:none, so it keeps its place in the tab order and screen readers announce it as "Menu, checkbox" with its checked state. display:none would have removed it from the tab order entirely. */ /* the visible control */ body .nav-toggle-label{display:block !important;padding:11px 16px;color:#fff;font-size:15px; font-weight:bold;text-transform:uppercase;cursor:pointer;user-select:none;line-height:1.2;} body .nav-toggle-label .nav-toggle-bars{font-size:19px;vertical-align:-2px;margin-right:6px;} /* the state holder: visually hidden but still focusable and announced */ body .nav-toggle{display:block !important;position:absolute;width:1px;height:1px;padding:0; margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* visible keyboard focus, since the control itself is the label */ body .nav-toggle:focus + .nav-toggle-label{outline:2px solid #fff;outline-offset:-2px;} body .nav-toggle:focus:not(:focus-visible) + .nav-toggle-label{outline:none;} body .nav-toggle:focus-visible + .nav-toggle-label{outline:2px solid #fff;outline-offset:-2px;} /* collapsed by default, revealed when the checkbox is checked */ body .main-menu{display:none;white-space:normal;} body .nav-toggle:checked ~ .main-menu{display:block;border-top:1px solid rgba(0,0,0,.12);} /* vertical rows instead of the desktop float row */ body .main-menu > li{float:none;display:block;position:relative;} body .main-menu > li > a{display:block;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.08);} /* SECOND-LEVEL LINKS ARE KEPT. basic.css hides .submenu-toggle by default and only reveals it inside a (hover:none) and (pointer:coarse) query, so on a narrow NON-touch window it would stay hidden and the submenus would be unreachable. Revealing it by WIDTH here makes it work for touch, mouse and keyboard alike. common.js already binds the click (slideToggle), so no JavaScript change is needed -- it sets an inline display on ul.n2, which is why .n2 only needs its position corrected rather than its display forced. */ body .main-menu .submenu-toggle{display:block !important;position:absolute;top:0;right:0; width:52px;height:45px;margin:0;background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.08);color:#333;cursor:pointer;font-size:0;z-index:2;} body .main-menu .submenu-toggle::after{content:"\25BE";font-size:17px;line-height:45px;} /* the desktop dropdown is position:absolute; inline it so it pushes the menu open instead */ body .main-menu .n2{position:static !important;border:0;box-shadow:none;background:#fbfbfb; min-width:0;padding:0;} body .main-menu .n2 > li{display:block;padding-right:0;} body .main-menu .n2 a{padding:10px 16px 10px 30px;white-space:normal;font-size:14px;} body .main-menu .n3{position:static !important;border:0;box-shadow:none;background:#f4f4f4;} body .main-menu .n3 a{padding-left:46px;} body .main-menu .submenu-toggle-icon{position:absolute;right:8px;} /* The navbar row opens with an EMPTY .col-1-4 spacer (` `) that only exists to indent the menu under the desktop logo column. Once the header columns are stacked it becomes a full-width blank row above the menu, so it is removed here. */ body .container.bg-red .col-1-4{display:none;} /* Scroll affordance: a short fade in the navbar's own gold (#eeb800, basic.css line 126) so the row reads as scrollable rather than as text that has been cut off. */ body .container.bg-red .col-3-4{position:relative;} body .container.bg-red .col-3-4::after{content:"";position:absolute;top:0;right:0; width:26px;height:100%;pointer-events:none; background:linear-gradient(to right,rgba(238,184,0,0),#eeb800);} /* The header search box is a fixed 515px (basic.css line 262), wider than a phone. */ body .search-box{width:100%;max-width:100%;box-sizing:border-box;} } /* ---- tablet and below: compact header, compact footer ------------------------------------ */ @media (max-width:767px){ /* HEADER. .logo is a FIXED 240px (basic.css line 234) inside a .col-1-4, which is 80px at 320px, so the logo escapes its column and collides with the search panel. Stacking the columns fixes the collision; the rest of this block is the REV 2 tightening the owner asked for -- the search field, account and cart stay, they just stop being crowded. */ body .header [class*="col-"]{width:100%;float:none;} body .header .topbar{float:none;} body .header .logo{margin-left:auto;margin-right:auto;height:64px;background-size:contain;} body .header .topbar{text-align:center;font-size:12px;line-height:1.7;} body .header .search-box{margin:6px 0;} /* FOOTER — REV 2. REV 1 stacked every column full width, which made the footer very tall. Two columns keeps every link and the contact details while roughly halving the height. The footer mixes .col-1-4 AND .col-1-5 and floats one right, so the wide col-3-12/col-9-12 wrappers are unstacked first and only the inner link columns are paired. */ body .footer{padding:1em;} body .footer .col-3-12, body .footer .col-9-12{width:100%;float:none;} /* The link columns are floated, and floats align to the bottom of the previous float, which left ragged vertical gaps between the two columns. A 2-track grid on their parent packs them top-aligned instead. The float is cleared on the children so it cannot interfere. */ body .footer .col-9-12{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;} body .footer .col-9-12 > [class*="col-"], body .footer .col-9-12 > div{width:auto;float:none;padding-right:0;} body .footer ._inner-r-15-p{padding-right:0;} body .footer ._h4{font-size:14px;line-height:1.6;} body .footer li{font-size:12px;line-height:1.65;} body .footer img{max-width:120px;height:auto;} body .footer .foot-tpps{float:none;} body .footer .separator{clear:both;} } /* ---- phone: article typography, and Table 1 as stacked cards ----------------------------- */ @media (max-width:640px){ .article-06 h1{font-size:26px;line-height:1.25;margin:4px 0 14px;} .article-06 h2{font-size:20px;margin:26px 0 10px;} .article-06 h3{font-size:16px;} .article-06 ul,.article-06 ol{padding-left:20px;} .article-06 .a06-btn{display:block;text-align:center;padding-top:12px;padding-bottom:12px;} /* TABLE 1 AS CARDS — REV 2. A three-column table cannot be read at 375px; the owner saw it clipped. Each ROW becomes a card: the row header is the card's title bar and each cell is labelled with its column heading, taken from data-label in the view. SEMANTICS ARE PRESERVED, deliberately. Changing `display` on table elements drops the implicit table roles from the accessibility tree in several browsers, so the view carries EXPLICIT role="table|rowgroup|row|columnheader|rowheader|cell" to keep them. is visually hidden by clipping rather than display:none, so the column headers stay in the accessibility tree and scope="col"/scope="row" still associate. The stays visible. No scientific text is changed, hidden or reordered. */ .article-06 .a06-table-wrap{overflow-x:visible;} /* The caption loses its table-caption context once the table is display:block and collapses into a narrow column, one word per line. Put it back to a normal full-width block. */ .article-06 .a06-table caption{display:block;width:auto;text-align:left;margin:0 0 12px;} .article-06 .a06-table, .article-06 .a06-table tbody, .article-06 .a06-table tr, .article-06 .a06-table th, .article-06 .a06-table td{display:block;width:auto;} .article-06 .a06-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .article-06 .a06-table tr{border:1px solid #ddd;border-radius:6px;overflow:hidden; margin:0 0 14px;background:#fff;} .article-06 .a06-table tbody th{background:#eeb800;color:#333;font-weight:bold; padding:10px 12px;border:0;font-size:14px;} .article-06 .a06-table td{border:0;border-top:1px solid #eee;padding:10px 12px;} .article-06 .a06-table td::before{content:attr(data-label);display:block;font-weight:bold; font-size:11px;color:#666;text-transform:uppercase; letter-spacing:.04em;margin:0 0 3px;} /* the desktop zebra striping would fight the card background */ .article-06 .a06-table tbody tr:nth-child(even) td{background:#fff;} .article-06 .a06-table tbody tr:nth-child(even) th{background:#eeb800;} } /* ---- very narrow (<=360px) --------------------------------------------------------------- */ @media (max-width:360px){ body .container{padding-left:12px;padding-right:12px;} .article-06 h1{font-size:23px;} body .footer .col-9-12{grid-template-columns:1fr;} }