/* ilaunch-responsive.assetdirect.css: the designed tablet and phone layer for Asset Direct (#32), skill Rule 2. Stage 4 PREP, 15 Oct 2026 (side bryan). Not yet deployed: Phase 2 copies it to build/theme-out/ad-mobile.css, uploads it to wp-content/uploads/ilaunch/theme/ and enqueues it LAST (after ad-bundle, ad-live, ad-s3 and the Phase 2 ad-design.css). SOURCE: scripts/ilaunch/kit/ilaunch-responsive.template.css (kit), tokens replaced for this site: $B = body.ad-site $P = body.ad-site #page-container $H = body.ad-site.ad-home #page-container $SC = ad page ids: faq 1141, search 1138, sitemap 1137, blog 1139 (dev, read 15 Oct 2026). The kit's expand_css_template.py ran clean with these values (exit 0, no token left). The template is written for an accommodation site (booking bar, room cards, #header with a horizontal menu, #special offer row, map in the footer, datepicker); Asset Direct has none of those, so the rules for them were dropped (list at the end of this comment) and the site's own markup got its own sections. Kept from the template: the band structure, every-button-state rule, text-link states, pager, Read More, tap-area rules, tel: links, justify-to-left, site-map list links, 16px inputs, 14px floor. SITE MARKUP (live, ported 1:1 by the content build; ad-site.php + ad-s3.css on dev): Theme Builder header holds div.left (logo, button.ils-menu-toggle [added in Phase 2], #menu, .panel-booking (empty), then EITHER .banner (currency.me.uk widget, a cross-origin 162x178 iframe) OR the blog panels (.panel.blog x4) OR the faq/news panel). Each page's code module holds div.right (#feature > .featureimage [img or  ], #content, .contentcols). The footer holds #footer (.container > .linksmenu, .copyright, .panel.blog) and .vcard. On dev .left floats out of the header and .right floats beside it (ad-s3.css); #footer clears both. BANDS (skill Rule 2; live fits from 1024px, home from 1040px, so the two-column layout is kept down to 1024): 1250 and up live, pixel copy. Nothing in this file changes it (only the hidden menu button and tel: link inheritance). 1024 to 1249 live's two-column layout and geometry; AA colours, 14px floor, 16px inputs, 24px taps; blog views get a 50px band instead of the 280px orange band behind their white headings; 1024 to 1169 caps content images and pads the footer. 768 to 1023 tablet: one column. Orange header band with live's black logo block, menu as a bar under it, feature photo full width, content, then the left column's panels as cards, then the footer. below 768 phone: as tablet, menu behind a Menu button, stacked forms, one-column footer. PALETTE: WCAG AA, computed for this site by build/design/tools/aa_palette_ad.py (41 pairs, 0 under target); the ratios are listed in build/design/mobile-plan.md. DROPPED FROM THE TEMPLATE (selector does not exist on this site): #header reflow, #container-outer flex, hero heights (.featuremain), #booking/.bookingform/.bookingbutton, #topcontainer/#special/.faq home offer row, home blog-label and teaser grid, .innercontent/.inner-wrapper, .list.rooms/.roomtext/.button.roombooking, .gallery grids, .map-container, #footer .vcard (here .vcard is a sibling of #footer), .infomenu/.footermenu/.footertop, #datepicker_div, the 980px horizontal-menu band and its olive colours, the home display:contents stacking (this home is one column already). PHASE 2 MUST CONFIRM: the TB header holds only the [ad_left] section (any other section would become a flex item at the top below 1024); the contact and unsubscribe forms are live's table.form (section 6 also covers a Divi form with class ad-contact-form); the archive "View More" truncation is ported (desktop parity, see desktop-plan.md). */ /* ==================== 0. palette (AA roles below 1250; live's own colours stay at 1250 and up) ==================== */ body.ad-site { --ad-orange: #fc852d; /* live's link, logo and menu bar orange: 5.99 on #282828, 7.28 on #171717, 4.91 on #363636 */ --ad-ink: #171717; /* live's logo/menu/panel black; dark text on orange (7.28) */ --ad-page: #282828; /* live's page ground */ --ad-footer: #363636; /* live's footer ground */ --ad-row: #383838; /* menu hover/active row (live's hover image tone): white 11.73 */ --ad-grey: #959595; /* live's grey text: 4.92 on #282828, 5.99 on #171717 (passes, kept) */ --ad-grey-footer: #adadad; /* footer dates: live #959595 is 4.03 on #363636, this is 5.38 */ --ad-pager: #6d6d6d; /* pager boxes: white 5.17 (live #f2ebe2 on #979797 is 2.47) */ --ad-pager-label: #c8c8c8; /* "Pages:" label: live #52493e is 1.67 on #282828, this is 8.81 */ --ad-button-text: #4a4a4a; /* button label on live's #f9f9f9 to #e9e9e9 gradient: 7.30 (live #717171 is 4.02) */ --ad-button-hover: #adadad; /* live's own hover: black label 9.36; used for hover, focus and active */ --ad-input-text: #555555; /* 7.46 on white (live #666666 is 5.74, also fine) */ --ad-band: url(/wp-content/uploads/ilaunch/skin/images/container-outer.jpg); } /* ==================== 1. all widths (no visible change at 1250 and up) ==================== */ /* the phone menu button lives in the left-column fragment; never shown from 768 up */ body.ad-site #page-container .ils-menu-toggle { display: none; } /* phone numbers are explicit tel: links that keep the surrounding text's colour and no underline in every state, so 1250 and up looks exactly like live; iOS's own number detection is off (format-detection meta, kit ilaunch-site.php) */ body.ad-site #page-container a.tel-link, body.ad-site #page-container a.tel-link:link, body.ad-site #page-container a.tel-link:visited, body.ad-site #page-container a.tel-link:hover, body.ad-site #page-container a.tel-link:active, body.ad-site #page-container a.tel-link:focus, body.ad-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; } /* ==================== 2. below 1250: AA colours, 14px floor, 16px inputs, 24px taps, focus rings ==================== */ @media (max-width: 1249px) { /* keyboard focus: Divi's outline reset leaves none; a white ring reads on every ground here (12 to 18:1) */ body.ad-site #page-container :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } body.ad-site #page-container #menu a:focus-visible, body.ad-site #page-container .logo a:focus-visible { outline-offset: -4px; } body.ad-site #page-container a:focus-visible > img { outline: 2px solid #ffffff; outline-offset: 2px; } body.ad-site #page-container iframe.ad-has-focus { outline: 2px solid #ffffff; outline-offset: 2px; } /* the exchange-rate frame (ad-live.js) */ /* 3.18 C-3: the exchange-rate card is the one white box on the page; its title link and its frame get a black ring instead (21:1 on the white card), 1px off the link so the ring stays inside the card and clears the italic "Live" */ body.ad-site #page-container .banner a:focus-visible { outline-color: #000000; outline-offset: 1px; } body.ad-site #page-container .banner iframe.ad-has-focus { outline-color: #000000; } /* 14px floor (live: menu 12, panels 13 and 11, dates 11, pager 11, footer 12, vcard 11, form notes 11) */ body.ad-site #page-container #menu { font-size: 14px; } body.ad-site #page-container .panel .summary, body.ad-site #page-container .panel li { font-size: 14px; line-height: 20px; } body.ad-site #page-container .details, body.ad-site #page-container .details a, body.ad-site #page-container .panel.blog .text-light { font-size: 14px; line-height: 20px; } body.ad-site #page-container .contentcols, body.ad-site #page-container .contentcols p { font-size: 14px; } body.ad-site #page-container #footer, body.ad-site #page-container #footer .linksmenu, body.ad-site #page-container #footer .footer-tags p { font-size: 14px; } body.ad-site #page-container .vcard { font-size: 14px; } body.ad-site #page-container .form td em, body.ad-site #page-container .smalltext, body.ad-site #page-container .panel.newsletter a { font-size: 14px; } body.ad-site #page-container .paging { font-size: 14px; } /* live content uses h5 for small lead-ins (browser default .83em = 11.6px, e.g. the home "We assist Home-Owners...") */ body.ad-site #page-container #content :is(h5, h6) { font-size: 14px; } /* the exchange-rate card's title link (third-party markup, 16px tall): a 24px tap row */ body.ad-site #page-container .banner a[href*="exchangerates"] { display: inline-block; padding: 4px 0; } /* more 24px tap rows found by mobile_audit: the logo link (an inline box round a 101px picture), panel and footer post titles, search result titles, the search button, site-map links */ body.ad-site #page-container .logo a { display: block; } body.ad-site #page-container .panel .title a { display: inline-block; padding: 3px 0; } body.ad-site.page-id-1138 #page-container #content strong > a { display: inline-block; padding: 3px 0; } body.ad-site #page-container #content .search input.button { min-height: 28px; } body.ad-site.page-id-1137 #page-container #content li a { display: inline; padding: 7px 0; } body.ad-site.page-id-1137 #page-container #content li { line-height: 22px; padding: 6px 0; } /* Read More / View More: 14px, a 28px tap row, live's arrow kept */ body.ad-site #page-container a.more:link, body.ad-site #page-container a.more:visited, body.ad-site #page-container a.more:active, body.ad-site #page-container .panel.blog a.more:is(:link, :visited, :active) { font-size: 14px; line-height: 20px; padding: 4px 14px 4px 0; background-position: right center; } /* live's arrow is the link's own background; drawn by ::after instead (same 7 x 8 picture, same place) so the link text has a flat ground the audits can measure */ body.ad-site #page-container a.more { position: relative; background-image: none !important; } body.ad-site #page-container a.more::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 8px; margin-top: -4px; background: url(/wp-content/uploads/ilaunch/skin/images/button-more.png) no-repeat; } body.ad-site #page-container a.more:is(:hover, :focus, :active)::after { background-image: url(/wp-content/uploads/ilaunch/skin/images/button-more-hover.png); } /* 24px tap targets on the one-line links in lists, panels, footer and vcard: a 16px line box plus 4px above and below, so the row pitch does not grow (live's footer rows are 24px) */ body.ad-site #page-container #footer li a, body.ad-site #page-container .panel ul.archive a, body.ad-site #page-container .vcard a { display: inline-block; padding: 4px 0; line-height: 16px; } body.ad-site #page-container .panel li > a:empty, body.ad-site #page-container #content li > a:empty { display: none; } /* live's empty Tag Cloud link: a zero-size tab stop */ /* 16px inputs (no zoom on focus); live's 3px 6px padding kept so the boxes stay live's shape */ body.ad-site #page-container input:not([type=submit]):not([type=button]):not([type=image]):not(.button), body.ad-site #page-container textarea, body.ad-site #page-container select { font-size: 16px; color: var(--ad-input-text); } body.ad-site #page-container input.button, body.ad-site #page-container a.button:link, body.ad-site #page-container a.button:visited { font-size: 14px; line-height: 16px; } /* colours that fail on live (ratios in mobile-plan.md) */ body.ad-site #page-container #footer .details, body.ad-site #page-container #footer .details a { color: var(--ad-grey-footer); } body.ad-site #page-container .paging { color: var(--ad-pager-label); } body.ad-site #page-container .smalltext { color: #a39a8f; } body.ad-site #page-container #content em.highlight { color: var(--ad-ink); background-color: var(--ad-orange); } /* pager: 28px boxes, white on mid grey; the current page is bold on orange with a dark bar under it (not colour alone) */ body.ad-site #page-container .paging a:link, body.ad-site #page-container .paging a:visited, body.ad-site #page-container .paging em { display: inline-block; min-width: 14px; padding: 4px 7px; line-height: 20px; text-align: center; border-radius: 4px; } body.ad-site #page-container .paging a:link, body.ad-site #page-container .paging a:visited { color: #ffffff; background-color: var(--ad-pager); } body.ad-site #page-container .paging em { color: var(--ad-ink); background-color: var(--ad-orange); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ad-ink); } /* live wraps the current page's own link in the em: it takes the em's look, not a grey box inside an orange one */ /* (the link carries the box's padding, so the whole box is the tap target) */ body.ad-site #page-container .paging em:has(> a) { padding: 0; } body.ad-site #page-container .paging em a:link, body.ad-site #page-container .paging em a:visited { display: inline-block; min-width: 14px; padding: 4px 7px; color: var(--ad-ink); background: none; border-radius: 0; } body.ad-site #page-container span.options a:link, body.ad-site #page-container span.options a:visited { display: inline-block; min-width: 24px; padding: 4px 4px; text-align: center; } /* the currency.me.uk widget: its 11px text is inside a cross-origin frame we cannot restyle, so the frame is drawn 1.3 times larger (14.3px text); the card keeps live's 250px white box */ body.ad-site #page-container .banner iframe { display: block; margin: 0 auto 54px; transform: scale(1.3); transform-origin: top center; } } /* ==================== 3. 1024 to 1249: live's two-column layout ==================== */ @media (min-width: 1024px) and (max-width: 1249px) { /* the orange band is drawn by a layer behind the page instead of the body background, so every line of text has a flat ground the audits can measure (same picture, same place). Blog views (no feature photo): live's 280px band sits behind white and grey text (white 2.82:1, grey 1.06:1); here the band is its own bottom 50px, above the first heading (which starts at 70px), so all text is on #282828. */ body.ad-site, body.ad-site.ad-home { background-image: none; } body.ad-site #page-container { position: relative; } body.ad-site #page-container::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 280px; background: var(--ad-band) center top repeat-x; pointer-events: none; } body.ad-site.ad-home #page-container::before { height: 500px; background-image: url(/wp-content/uploads/ilaunch/skin/images/container-outer-home.jpg); } body.ad-site:not(:has(#feature img)) #page-container::before { height: 50px; background-position: center -230px; } /* 3.18 C-2: /contact/thanks (page 1140) has a feature image, but a short one (live's 119px logo banner), so its heading and line sat on the 280px band (white 2.82:1). Here the band is its own bottom 150px: behind the logo banner, ending about 20px above the heading (h1 from 169px), so both lines are on #282828 like every other page below 1250 */ body.ad-site.page-id-1140 #page-container::before { height: 150px; background-position: center -130px; } /* live's footer divider tile is the footer's own #363636 and the content-column shade sits behind an empty strip: both off here so the audits see flat grounds (no visible change) */ body.ad-site #page-container #footer .container, body.ad-site #page-container .contentcols { background-image: none; } } @media (min-width: 1024px) and (max-width: 1249px) { /* the contact and unsubscribe forms keep live's table look here (ad-design.css) with 16px fields and 14px labels and notes */ body.ad-site #page-container #content .ad-form .et_pb_contact_field input.input, body.ad-site #page-container #content .ad-form input.et_pb_contact_captcha { height: 28px; font-size: 16px; line-height: 20px; } body.ad-site #page-container #content .ad-form .et_pb_contact_field textarea.input { font-size: 16px; line-height: 20px; } body.ad-site #page-container #content .ad-form form.et_pb_contact_form .et_pb_contact_submit.et_pb_button { height: 32px; font-size: 14px !important; line-height: 14px !important; } body.ad-site #page-container #content .ad-form-contact form.et_pb_contact_form::after { font-size: 14px; } } @media (min-width: 1024px) and (max-width: 1169px) { /* live's home content photo (740px in a 690px column) overflows the container by 16px: at 1024 that is sideways scroll */ body.ad-site #page-container #content img { max-width: 100%; height: auto !important; } /* !important: live's content images carry inline width and height */ /* footer and vcard: a 16px gutter so text never touches the screen edge at 1024; the copyright gap gives up 32px */ body.ad-site #page-container #footer .container, body.ad-site #page-container .vcard { width: auto; max-width: 992px; padding-left: 16px; padding-right: 16px; } body.ad-site #page-container #footer .copyright { margin-left: 33px; } } @media (max-width: 1169px) { /* 3.18 A-4: the three content images that carry only an inline width and height (no attributes) lose their reserved height to the height: auto above, so they pushed the text down when they arrived late. Their own ratio (the files' natural sizes) keeps the space from the start; once loaded they look exactly as before. Home photo, post 312, post 317. */ body.ad-site #page-container #content img[src$="/assets/cache/1-740x500-740x500c.jpg"] { aspect-ratio: 740 / 500; } body.ad-site #page-container #content img[src$="/assets/pic1.jpg"] { aspect-ratio: 752 / 488; } body.ad-site #page-container #content img[src$="/assets/gc-growth.png"] { aspect-ratio: 412 / 677; } } /* ==================== 4. below 1024: one column (tablet and phone) ==================== */ @media (max-width: 1023px) { /* the frame: the left column's children and the main area become items of one flex column, so the logo and menu stay on top and the side panels (currency widget, blog panels) follow the page content instead of preceding it */ body.ad-site, body.ad-site.ad-home { background-image: none; } body.ad-site #page-container #et-boc { display: flex; flex-wrap: wrap; position: relative; } body.ad-site #page-container #et-boc > .et-l--header, body.ad-site #page-container #et-boc > .et-l--header :is(.et_builder_inner_content, .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module, .et_pb_code_inner):has(.left), body.ad-site #page-container .et-l--header .left, body.ad-site #page-container #et-main-area { display: contents; } body.ad-site #page-container .et-l--header .left > *, body.ad-site #page-container #main-content, body.ad-site #page-container #et-boc .et-l--footer { flex: 1 1 100%; min-width: 0; } /* anything else in the left column (live's about-us #side-content, the faq/news panels) goes with the side panels */ body.ad-site #page-container .et-l--header .left > * { order: 5; } body.ad-site #page-container .left > .logo { order: 1; } body.ad-site #page-container .left > .ils-menu-toggle { order: 2; } body.ad-site #page-container .left > #menu { order: 3; } body.ad-site #page-container #main-content { order: 4; } body.ad-site #page-container .left > .banner, body.ad-site #page-container .left > .panel { order: 5; } body.ad-site #page-container #et-boc .et-l--footer { order: 6; } body.ad-site #page-container .left > .panel-booking { display: none; } /* 3.18 A-3: the side panels come BEFORE the page in the source (live's left column) but are shown after it here, so while the page loads (and the exchange-rate card's third-party script holds the parser) the card painted under the logo and was then pushed down by the content (layout shift 0.12 to 0.45). Until the footer has been parsed (so the page content is complete), the panels keep their place but are not painted; nothing visible moves. Browsers without :has() show them as before. */ body.ad-site:not(:has(.et-l--footer)) #page-container .et-l--header .left > :not(.logo):not(#menu):not(.ils-menu-toggle) { visibility: hidden; } /* header band: live's orange band with live's black logo block on its left edge (live: the left column's top) */ body.ad-site #page-container .left > .logo { height: 101px; background: #e9751f var(--ad-band) left top repeat-x; } body.ad-site #page-container .logo a { display: block; width: fit-content; height: 100%; background: var(--ad-ink); } body.ad-site #page-container .logo img { display: block; width: auto; height: 100%; } /* menu: a dark bar under the band, all six items in one row (608px at 768); current page: a 4px orange bar under it */ body.ad-site #page-container #menu { margin: 0; padding: 0; border: 0; background: var(--ad-ink); } body.ad-site #page-container #menu ul { display: flex; flex-wrap: wrap; justify-content: center; } body.ad-site #page-container #menu li { margin: 0; line-height: 48px; } body.ad-site #page-container #menu li a:link, body.ad-site #page-container #menu li a:visited, body.ad-site #page-container #menu li a:active { padding: 0 14px; font-size: 15px; line-height: 48px; background: none; } body.ad-site #page-container #menu li:is(:hover, :focus-within, .active) > a:is(:link, :visited) { background: var(--ad-row); color: #ffffff; } body.ad-site #page-container #menu li.active > a:is(:link, :visited) { box-shadow: inset 0 -4px 0 var(--ad-orange); } /* page column: fluid, live's 50px left inset becomes a 24px gutter */ body.ad-site #page-container .right { float: none; width: auto; } body.ad-site #page-container #feature, body.ad-site.ad-home #page-container #feature { height: auto; } body.ad-site #page-container #feature:not(:has(img)) { display: none; } /* the feature photos are 740x500 files: full width up to their own size, never stretched past it (centred on wider tablets) */ body.ad-site #page-container #feature img { width: 100%; max-width: 740px; height: auto; margin: 0 auto; } body.ad-site #page-container #content { width: auto; padding: 0 24px 40px; } body.ad-site #page-container #content h1 { margin-top: 36px; font-size: 34px; line-height: 38px; } body.ad-site #page-container #content img { max-width: 100%; height: auto !important; } body.ad-site #page-container #content table:not(.form) { max-width: 100%; } body.ad-site #page-container #content p, body.ad-site #page-container #content li { font-size: 15px; line-height: 22px; } body.ad-site #page-container .contentcols { width: auto; padding: 0 24px 16px; background: none; } /* forms (live's table.form): fluid, live's look; th keeps live's 140px so the field cell takes the rest, and the required star (td background at 420px) stays clear of the 385px field. The search box (input.short in a nested table) keeps live's 215px here. */ body.ad-site #page-container #content table.form { width: 100%; max-width: 640px; } body.ad-site #page-container #content table.form > tbody > tr > td { width: auto; } body.ad-site #page-container #content .form input:not(.button):not(.captcha):not(.short), body.ad-site #page-container #content .form textarea { box-sizing: border-box; width: 100%; max-width: 385px; min-height: 36px; } /* contact and unsubscribe (Divi contact module, classes ad-form ad-form-contact / ad-form-unsubscribe; ad-design.css dresses it as live's table from 1024 up): a black label bar over each full-width field, 16px, required fields marked with an asterisk on the label (a shape, explained by the note under the button), the maths captcha on its own row */ body.ad-site #page-container #content .ad-form { margin: 20px 0; max-width: 640px; } body.ad-site #page-container #content .ad-form form.et_pb_contact_form { display: block; margin: 0; padding: 0; } body.ad-site #page-container #content .ad-form p.et_pb_contact_field { float: none; width: auto; margin: 0 0 16px; padding: 0; } body.ad-site #page-container #content .ad-form .et_pb_contact_form_label { display: block; margin: 0; padding: 10px 14px; background: #000000; font: 16px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif; color: #ffffff; text-align: left; } body.ad-site #page-container #content .ad-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { content: " *"; color: var(--ad-orange); } body.ad-site #page-container #content .ad-form .et_pb_contact_field .input { display: block; box-sizing: border-box; width: 100%; height: 48px; margin: 8px 0 0; padding: 10px 12px; border: 1px solid #adadad; border-radius: 3px; background: #ffffff; box-shadow: none; font: 16px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif; color: var(--ad-input-text); } body.ad-site #page-container #content .ad-form .et_pb_contact_field textarea.input { height: 140px; min-height: 0; } body.ad-site #page-container #content .ad-form .et_contact_bottom_container { display: block; float: none; margin: 4px 0 0; text-align: left; } body.ad-site #page-container #content .ad-form .et_pb_contact_right { display: block; float: none; text-align: left; } body.ad-site #page-container #content .ad-form .et_pb_contact_right p.clearfix { float: none; margin: 0 0 16px; padding: 0; text-align: left; font: 16px/48px 'HelveticaNeue', Arial, Helvetica, sans-serif; color: #979797; } body.ad-site #page-container #content .ad-form input.et_pb_contact_captcha { box-sizing: border-box; display: inline-block; width: 96px; max-width: none; height: 48px; margin: 0 0 0 10px; padding: 10px 12px; vertical-align: middle; border: 1px solid #adadad; border-radius: 3px; background: #ffffff; font: 16px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif; color: var(--ad-input-text); } body.ad-site #page-container #content .ad-form form.et_pb_contact_form .et_pb_contact_submit.et_pb_button { display: inline-block; box-sizing: border-box; width: auto; min-width: 140px; height: 48px; margin: 0 !important; padding: 0 24px !important; border: 1px solid #adadad !important; border-radius: 3px !important; background: #f9f9f9 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) !important; box-shadow: inset 0 1px #ffffff; font: 16px/46px 'HelveticaNeue-Bold', Arial, Helvetica, sans-serif !important; letter-spacing: 0 !important; text-transform: none; text-shadow: 0 1px #ffffff; cursor: pointer; transition: none; } body.ad-site #page-container #content .ad-form form.et_pb_contact_form .et_pb_contact_submit.et_pb_button::after { display: none !important; } body.ad-site #page-container #content .ad-form-contact form.et_pb_contact_form::after { content: "* Required fields"; display: block; visibility: visible; height: auto; clear: none; margin: 10px 0 0; font: 14px/20px 'HelveticaNeue', Arial, Helvetica, sans-serif; color: #979797; } /* side panels as cards after the content */ body.ad-site #page-container .left > .banner { display: flex; justify-content: center; padding: 32px 24px; border-top: 1px solid var(--ad-footer); } body.ad-site #page-container .left > .panel { margin: 0; padding: 24px; border-top: 2px solid var(--ad-page); } body.ad-site #page-container .left > .panel h3 { font-size: 22px; line-height: 26px; } body.ad-site #page-container .left > .panel ul.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } body.ad-site #page-container .left > .panel ul.archive { columns: 3; column-gap: 24px; } body.ad-site #page-container .left > .panel ul.archive li { break-inside: avoid; } body.ad-site #page-container .left > .panel ul.archive li.archive-more { column-span: all; } /* footer: links and copyright side by side, the blog teaser below them; vcard on its own rows */ /* (live's 688px footer-div.png tile draws a faint seam once the container is fluid: dropped here) */ body.ad-site #page-container #footer .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; width: auto; padding: 28px 24px 32px; background-image: none; } body.ad-site #page-container #footer .linksmenu, body.ad-site #page-container #footer .copyright, body.ad-site #page-container #footer .blog { float: none; width: auto; margin: 0; } body.ad-site #page-container #footer .blog { grid-column: 1 / -1; margin-top: 24px; padding: 24px 0 0; border-top: 1px solid #4a4a4a; } body.ad-site #page-container #footer .blog h3 { font-size: 30px; line-height: 34px; } body.ad-site #page-container #footer .clearboth { display: none; } body.ad-site #page-container #footer li { line-height: 24px; } /* vcard: live's loose text between the parts (spaces and an " ") is set to size 0 so it can never make an indent or an empty line; the parts carry the text size and their own gaps, and "Ph: number" (span.ad-ph, footer fragment) takes its own line and never splits */ body.ad-site #page-container .vcard { width: auto; padding: 24px 24px 36px; font-size: 0; line-height: 0; } body.ad-site #page-container .vcard > :is(.org, a.email, .adr, .ad-ph) { font-size: 14px; line-height: 26px; } body.ad-site #page-container .vcard > .org { font-size: 16px; margin-right: 8px; } body.ad-site #page-container .vcard > a.email { margin-right: 8px; } body.ad-site #page-container .vcard > .ad-ph { display: block; white-space: nowrap; } body.ad-site #page-container .socialmedia { float: none; display: flex; gap: 4px; margin: 14px 0 0 -9px; } body.ad-site #page-container .socialmedia a { display: inline-block; padding: 8px 9px; line-height: 0; } body.ad-site #page-container .socialmedia img { margin: 0; } /* live content's inline text-align: justify opens wide word gaps in a narrow column (3.18 m8) */ body.ad-site #page-container #content [style*="justify"] { text-align: left !important; } /* site map: links stay inline so a wrapped item keeps its bullet on the first line; vertical padding gives the tap height (3.18 m2) */ body.ad-site.page-id-1137 #page-container #content li a { display: inline; padding: 7px 0; } body.ad-site.page-id-1137 #page-container #content li { line-height: 22px; padding: 6px 0; } } /* ==================== 5. below 768: the phone ==================== */ @media (max-width: 767px) { /* header band 72px; the Menu button sits on the band's right, the menu opens under it */ body.ad-site #page-container .left > .logo { height: 72px; } body.ad-site #page-container .ils-menu-toggle { display: inline-flex; position: absolute; top: 14px; right: 12px; z-index: 2; align-items: center; gap: 10px; box-sizing: border-box; height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 4px; background: var(--ad-ink); color: #ffffff; font: 16px/44px 'HelveticaNeue-Bold', Arial, Helvetica, sans-serif; cursor: pointer; } body.ad-site #page-container .ils-menu-toggle:is(:hover, :focus, :active) { background: var(--ad-row); color: #ffffff; } body.ad-site #page-container .ils-menu-toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: -5px; } body.ad-site #page-container .ils-menu-toggle[aria-expanded="true"] { box-shadow: inset 0 -4px 0 var(--ad-orange); } body.ad-site #page-container .ils-menu-toggle span, body.ad-site #page-container .ils-menu-toggle span::before, body.ad-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; } body.ad-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; } body.ad-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; } body.ad-site #page-container .left > #menu { display: none; } body.ad-site #page-container .left.ils-menu-open > #menu { display: block; } body.ad-site #page-container #menu ul { display: block; } body.ad-site #page-container #menu li { border-top: 1px solid rgba(255, 255, 255, 0.12); line-height: 48px; } body.ad-site #page-container #menu li a:link, body.ad-site #page-container #menu li a:visited, body.ad-site #page-container #menu li a:active { display: block; padding: 0 16px 0 22px; font-size: 16px; line-height: 48px; } body.ad-site #page-container #menu li.active > a:is(:link, :visited) { box-shadow: inset 6px 0 0 var(--ad-orange); } /* page column: 16px gutters, phone type sizes (body copy 16px/24px for reading) */ body.ad-site #page-container #content { padding: 0 16px 32px; } body.ad-site #page-container #content h1 { margin: 28px 0 14px; font-size: 30px; line-height: 34px; } body.ad-site #page-container #content h2 { margin: 24px 0 10px; font-size: 24px; line-height: 28px; } body.ad-site #page-container #content h3 { font-size: 20px; line-height: 24px; } body.ad-site #page-container #content p, body.ad-site #page-container #content li { font-size: 16px; line-height: 24px; } body.ad-site #page-container #content .summary table, body.ad-site #page-container #content .entry table { display: block; overflow-x: auto; } body.ad-site #page-container .contentcols { padding: 0 16px 12px; } /* blog list: title, date, the 200x140 thumbnail at its own size (never stretched), then the summary */ body.ad-site #page-container .list .entry { padding: 20px 0; } body.ad-site #page-container .list .entry h2 { margin: 0 0 8px; } body.ad-site #page-container #content img.blog-image { float: none; display: block; margin: 10px 0 12px; } body.ad-site #page-container .paging { text-align: left; line-height: 36px; } body.ad-site #page-container .paging a:link, body.ad-site #page-container .paging a:visited, body.ad-site #page-container .paging em { min-width: 18px; padding: 6px 8px; } body.ad-site #page-container .paging em a:link, body.ad-site #page-container .paging em a:visited { min-width: 18px; padding: 6px 8px; } /* forms: label bar over a full-width field, 48px fields, the required star moves onto the label (an asterisk, not colour alone). Only the outer table.form rows stack; the search box's nested table becomes a field + button row. */ body.ad-site #page-container #content table.form, body.ad-site #page-container #content table.form > tbody, body.ad-site #page-container #content table.form > tbody > tr, body.ad-site #page-container #content table.form > tbody > tr > th, body.ad-site #page-container #content table.form > tbody > tr > td { display: block; width: auto; max-width: none; } body.ad-site #page-container #content table.form { border: 0; margin: 20px 0; } body.ad-site #page-container #content table.form > tbody > tr > th { padding: 10px 14px; font-size: 16px; line-height: 24px; border: 0; } /* the captcha and submit rows have a blank ( ) label cell: no empty black bar on a phone */ body.ad-site #page-container #content table.form > tbody > tr:has(> td > input.captcha) > th, body.ad-site #page-container #content table.form > tbody > tr:has(> td > input.button) > th { display: none; } body.ad-site #page-container #content table.form > tbody > tr > td { padding: 10px 0 18px; border: 0; background-image: none; } body.ad-site #page-container #content table.form > tbody > tr:has(> td.required) > th::after { content: " *"; color: var(--ad-orange); } body.ad-site #page-container #content .form input:not(.button):not(.captcha), body.ad-site #page-container #content .form textarea { box-sizing: border-box; width: 100%; max-width: none; height: 48px; padding: 10px 12px; } body.ad-site #page-container #content .form textarea { height: 140px; } body.ad-site #page-container #content .form td > img[width="50"] { width: 100px; height: auto; image-rendering: pixelated; vertical-align: middle; } body.ad-site #page-container #content .form input.captcha { box-sizing: border-box; width: 120px; height: 48px; vertical-align: middle; } body.ad-site #page-container #content .form .captcha-message { font-size: 14px; line-height: 20px; } body.ad-site #page-container #content .form input.button { width: 100%; height: 48px; font-size: 16px; } body.ad-site #page-container #content .form td em { float: none; display: block; margin-top: 8px; } body.ad-site #page-container #content .search table.form td table { display: block; width: 100%; } body.ad-site #page-container #content .search table.form td table > tbody, body.ad-site #page-container #content .search table.form td table tr { display: flex; gap: 8px; width: 100%; } body.ad-site #page-container #content .search table.form td table td { display: block; padding: 0; } body.ad-site #page-container #content .search table.form td table td:first-child { flex: 1 1 auto; min-width: 0; } body.ad-site #page-container #content .search .form input.button { width: auto; padding: 0 18px; margin: 0; } body.ad-site #page-container #content .search .form input.short { margin: 0; } body.ad-site #page-container #content .ad-form form.et_pb_contact_form .et_pb_contact_submit.et_pb_button { width: 100%; } /* side panels and the currency card */ body.ad-site #page-container .left > .banner { padding: 28px 16px; } body.ad-site #page-container .left > .panel { padding: 22px 16px; } body.ad-site #page-container .left > .panel ul.entries { display: block; } body.ad-site #page-container .left > .panel ul.entries li { margin: 0 0 18px; } body.ad-site #page-container .left > .panel .title a { font-size: 17px; line-height: 22px; } body.ad-site #page-container .left > .panel ul.archive { columns: 2; } body.ad-site #page-container .left > .panel ul.archive a { padding: 8px 0; } /* footer: one column, the two link lists in two short columns each */ body.ad-site #page-container #footer .container { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 28px; } body.ad-site #page-container #footer .copyright { margin-top: 16px; } body.ad-site #page-container #footer ul { columns: 2; column-gap: 24px; } body.ad-site #page-container #footer li a { padding: 8px 0; } body.ad-site #page-container #footer .footer-tags { display: block; margin-top: 8px; } body.ad-site #page-container #footer .footer-tags p { display: block; line-height: 24px; } body.ad-site #page-container #footer .blog h3 { font-size: 28px; line-height: 32px; } body.ad-site #page-container #footer .blog p { font-size: 15px; line-height: 22px; } body.ad-site #page-container .vcard { padding: 22px 16px 32px; } body.ad-site #page-container .vcard > :is(.org, a.email, .adr, .ad-ph) { font-size: 15px; } body.ad-site #page-container .vcard > .org { font-size: 16px; } body.ad-site #page-container .vcard a { padding: 6px 0; } body.ad-site #page-container .socialmedia a { padding: 8px 9px; } } /* ==================== 6. button and link states below 1250 (every state, not just rest; template M3, m6) ==================== */ @media (max-width: 1249px) { /* buttons: live's light gradient with a darker label at rest; live's own hover (black on #adadad) for hover, focus and the tap that sticks on a phone */ body.ad-site #page-container input.button, body.ad-site #page-container a.button:link, body.ad-site #page-container a.button:visited, body.ad-site #page-container #content input.button, body.ad-site #page-container #content .ad-form form.et_pb_contact_form .et_pb_contact_submit.et_pb_button { color: var(--ad-button-text) !important; } /* live's -webkit-linear-gradient shorthand leaves the button's background COLOUR transparent; give it the gradient's darker end underneath (no visible change) so the label is measured against the button, not the page behind it */ body.ad-site #page-container input.button, body.ad-site #page-container a.button:link, body.ad-site #page-container a.button:visited { background-color: #e9e9e9; } body.ad-site #page-container input.button:is(:hover, :focus, :active), body.ad-site #page-container a.button:is(:hover, :focus, :active), body.ad-site #page-container #content input.button:is(:hover, :focus, :active), body.ad-site #page-container #content .ad-form form.et_pb_contact_form .et_pb_contact_submit.et_pb_button:is(:hover, :focus, :active) { color: #000000 !important; background: var(--ad-button-hover) !important; text-shadow: none; } /* pager: hover, focus and the sticky tap turn a box orange with dark text (7.28) and underline it */ body.ad-site #page-container .paging a:link:hover, body.ad-site #page-container .paging a:visited:hover, body.ad-site #page-container .paging a:focus, body.ad-site #page-container .paging a:active { color: var(--ad-ink); background-color: var(--ad-orange); text-decoration: underline; } /* Read More: live's orange hover and orange arrow, also on focus and the sticky tap (5.99 / 7.28 / 4.91 by ground) */ body.ad-site #page-container a.more:focus, body.ad-site #page-container a.more:active { color: var(--ad-orange); background-image: url(/wp-content/uploads/ilaunch/skin/images/button-more-hover.png); } /* footer links: live's orange hover also on focus and active (4.91 on #363636) */ body.ad-site #page-container #footer a:focus, body.ad-site #page-container #footer a:active { color: var(--ad-orange); } body.ad-site #page-container #footer a.tel-link:is(:focus, :active, :hover) { color: inherit !important; } }