/* acs-mobile.css -- windows, 2026-08-03. Loaded LAST, after responsive.css. MEASURED CAUSE OF THE OVERLAP (not guessed): the rendered home page carries 33 elements with an INLINE position:absolute and container widths up to 1916px. Inline styles beat external CSS, so class-based rules alone did nothing -- the attribute selectors below target the inline style itself, with !important, which does win. That is why the first pass stacked the nav but left the eagle, the map and the body text piled on each other. */ /* NOTE: `img { max-width:100%; height:auto }` used to live HERE, unscoped, and it was the single worst line in this file. At desktop width it overrode the theme's own image sizing, so the boxed home-page banner stopped being a box and became a full-bleed background. Bob: "the page is all whacked out like nothing's where it's supposed to be." He was looking at that. It belongs in the phone block ONLY, where the theme has no sizing of its own -- see @media (max-width:900px) below. */ /* --------------------------------------------------------------------------- READABILITY -- SECOND ATTEMPT, and the first one was wrong. v1 gave the copy its own near-opaque white panel. It was legible and it gutted the site. Bob, 2026-08-03: "I know I told you it was hard to see the text -- it took out what made the website what it was. Maybe we should just try changing the color of the text to White and put the images back like they were." He is right and it is the obvious answer: the design is light text over Alaskan photographs. The copy went dark-on-photo only because the theme's responsive stylesheet stopped loading -- the intent was always white. So: NO panels, NO background-image:none. The photographs come back exactly as they were. The text goes white with a hard dark shadow, which stays readable over a bright sky AND a dark eagle -- the shadow is doing the work a panel was doing, without covering anything up. SCOPED DELIBERATELY to the article body only. The sidebar widgets, the contact form and the business-hours block sit on their own white surfaces -- white text there would be invisible, which is the failure mode of "just make it all white". --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- BODY COPY -> NEAR-WHITE. Bob, 2026-08-03: "the gray text is just too hard to read. We need to make it closer to White and let me see what that looks like." The restored 2021 theme sets body copy in a family of greys -- #888, #999, #9e9e9e, #aaa -- which read fine on the white panels the design originally used, and badly where the copy sits over the Alaskan photograph. #f2f6f8 rather than pure #fff: a hair off white keeps it from glaring on the bright glacier while reading as white everywhere else. ONE VALUE to change if Bob wants it whiter -- raise it to #ffffff. EXCLUSIONS ARE THE IMPORTANT PART. The sidebar widgets, the contact form, the business-hours block and the rates table sit on their own WHITE surfaces -- near-white text there is invisible. That is the failure mode of "just make the text white", and it is why this rule is scoped rather than global. --------------------------------------------------------------------------- */ /* THE GREY BOX. Bob: "the gray is also covering the back of the slider that's supposed to be transparent... We can't change that slider box because it's supposed to be transparent. It looks weird gray." He is right and it is ONE declaration in the theme: #featured .featured-inner, #main .main-inner, #bottom #colophon { background:#eee } That #eee slab sits between the reader and the Alaskan photograph the design paints behind the whole page. Clear it, and the photo is the page again -- which is also what finally makes white body copy the correct choice rather than an invisible one. My first two attempts got this backwards: I lightened the text while the grey was still there (invisible), then darkened it to compensate (readable, but the grey stayed). The grey was always the thing to remove. */ #featured .featured-inner, #main .main-inner, #bottom #colophon, .boxed-layout .boxed-inner, .boxed-layout .element-inner, article, .post_grid { background-color: transparent !important; } /* AND THE SLIDER BOX ITSELF. Bob, still seeing grey after the #eee fix: "the transparent box is still light gray... We can't change that slider box because it's supposed to be transparent." There is a SECOND declaration, separate from the #eee one: .standard-slider-wrapper .slides-wrapper { background:#f5f5f5 } and later { #fff } .standard-slider .slide .media-inner { background:#fff } Two rules, two greys, and I only cleared the first. */ .standard-slider-wrapper, .standard-slider-wrapper .slides-wrapper, .standard-slider, .standard-slider .slide, .standard-slider .slide .media-inner, .slides-wrapper, .featured-image-wrapper, .element, .element-inner { background-color: transparent !important; } /* AND THE OUTLINE AROUND THE BANNER. Bob: "one gray outline left on a box just below the menu, it's got an image in it but also a white border that shouldn't be there. It might even be gray. I can't really tell." It is grey, and it is THREE more declarations -- the theme drew a hairline frame around the slider on the assumption it sat on a white page. On a photograph it reads as a stray box. Clearing the border and the drop shadow that goes with it. */ /* SWEPT, NOT PICKED OFF ONE AT A TIME. I cleared these in three separate rounds and each time told Bob it was done while another was still drawing. The reason the last one survived: my selector was `.boxed-layout .element-inner`, and the element on the page is `.element-inner` WITHOUT that ancestor -- so the rule never matched. I grepped the whole 144 KB bundle for border/outline/box-shadow on layout wrappers: 54 rules. These are the ones that can draw a hairline in the content area. Deliberately ancestor-free. */ .boxed-inner, .element, .element-inner, .post_grid, article, .standard-slider-wrapper, .standard-slider-wrapper .slides-wrapper, .slides-wrapper, .standard-slider, .standard-slider .slide, .standard-slider .slide .media-inner, .featured-image, .featured-image .featured-image-inner, .featured-image-wrapper, img.pretty, #featured .featured-inner, #main .main-inner, #wrapper .gallery a img, #bottom .footer_content, #colophon { border: 0 !important; border-width: 0 !important; outline: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; } #main p, #main li, #main td, #main .entry-content, #main .entry-content p, #main .entry-content li, .article-wrap p, .article-wrap li, .alyeska-article-wrap p, .alyeska-article-wrap li { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6) !important; } #main h1, #main h2, #main h3, #main h4, #main .entry-title { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.7) !important; } /* anything with its own light surface keeps the designer's colour */ .widget, .widget *, aside, aside *, form, form *, .wpcf7, .wpcf7 *, .hours-wrap, .hours-wrap *, table, table *, .gmw-dialog, .gmw-dialog *, .acs-sidebar-map, .acs-sidebar-map * { color: revert !important; } /* DELETED ON PURPOSE, 2026-08-03: the white panels, the white text, the dark scrim and the transparent-wrapper rules that used to live here. Every one of them was me hand-painting around a missing stylesheet. Once the real 141 KB de892 bundle came back from Bob's 2021 copy (see restore_original_css), the theme lays its own content panels down and the copy is dark-on-white exactly as the designer intended -- so my overrides stopped being help and started being damage. Bob's instruction, and it is the right one: "We need to try to keep it as close as we can, so we don't shock him when he reviews it." The closest we can get is the designer's own CSS with nothing of mine on top. What remains in this file is only what the site genuinely cannot do for itself now that its JavaScript is gone. */ @media (max-width: 900px) { html { -webkit-text-size-adjust: 100%; } body { overflow-x: hidden !important; padding-bottom: 46px !important; } img, iframe, embed, object, video { max-width: 100% !important; height: auto !important; } /* 1. THE OVERLAP -- anything inline-positioned goes back into normal flow */ [style*="position:absolute"], [style*="position: absolute"] { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* 1b. EXCEPTION to the rule directly above. The blanket "any inline position:absolute goes static" is what un-piled the eagle/map/text widgets -- but it also flattened the business-name label on my own static map, which landed bottom-left instead of under the pin. Restore it explicitly. The map is CENTERED on the address, so the pin tip is at exactly 50%/50% and the label anchors to that. */ .acs-static-map span[style*="position:relative"], .acs-static-map span[style*="position: relative"] { position: relative !important; } .acs-static-map span[style*="position:absolute"], .acs-static-map span[style*="position: absolute"] { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, 10px) !important; width: auto !important; max-width: 86% !important; height: auto !important; margin: 0 !important; } /* 2. containers built for a 1200-1900px desktop */ [style*="width:1"], [style*="width: 1"], .container, .wrap, .inner, #wrapper, #container { width: auto !important; max-width: 100% !important; min-width: 0 !important; } .widget, .textwidget, .gmw-widget, .wpb_column, .wpb_wrapper, .col, .column, .grid_3, .grid_4, .grid_6, .grid_8, .grid_12, .span3, .span4, .span6, .span8, .span12 { position: static !important; float: none !important; width: auto !important; max-width: 100% !important; left: auto !important; top: auto !important; margin-left: 0 !important; margin-right: 0 !important; } .gmw-widget img, .gmw-map, iframe[src*="maps"] { width: 100% !important; } /* 3. THE NAV -- it was floating over the mountain banner because the header carries a background image. Give it its own opaque surface. */ .header-above, .header_logo, .toplogo, .menu-left, .menu-middle, .menu-middle-inner, .menu-right, .header-widget { position: static !important; float: none !important; width: auto !important; max-width: 100% !important; background-image: none !important; } .menu-middle, .menu-middle-inner, ul.menu, #main-menu, .nav, .menu, ul.sf-menu { background: #ffffff !important; width: auto !important; float: none !important; } ul.sf-menu > li, .menu > li, .nav > li { float: none !important; display: block !important; width: auto !important; background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,.14) !important; } ul.sf-menu > li > a, .menu > li > a, .nav > li > a, .sub-menu > li > a { display: block !important; padding: 13px 16px !important; font-size: 16px !important; line-height: 1.3 !important; text-decoration: none !important; color: #1c3d5a !important; } .sub-menu { background: #f4f6f8 !important; } .sub-menu > li > a { padding-left: 34px !important; font-size: 15px !important; } /* 3b. THE MENU WAS 485px WIDE INSIDE A 390px SCREEN. Measured by hit test, not guessed. max-width:100% did not catch it because the PARENT was also oversized -- a percentage of a too-wide box is still too wide. Pin to the viewport unit instead. */ html, body { max-width: 100vw !important; overflow-x: hidden !important; } #wrapper, #container, .container, .wrap, .inner, .header-above, .menu-middle, .menu-middle-inner, ul.menu, ul.sf-menu, .nav, .menu { max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; } ul.menu > li, ul.sf-menu > li, .nav > li, .menu > li, ul.sub-menu, ul.sub-menu > li { max-width: 100vw !important; } /* 4. text sitting on top of photographs */ .slider, .slideshow, .featured, .banner { position: static !important; height: auto !important; } /* 5. HORIZONTAL OVERFLOW. The theme is a 2016 fixed-width build; several wrappers carry desktop widths from EXTERNAL css, which the attribute selectors above cannot see. This is blunt on purpose -- nothing may exceed the viewport. */ * { max-width: 100% !important; box-sizing: border-box !important; } body, div, p, li, td, span, h1, h2, h3, h4 { word-wrap: break-word !important; overflow-wrap: break-word !important; } table { display: block !important; overflow-x: auto !important; } /* 6. the submenu was rendering dark-on-brown and unreadable -- the brown comes from a theme bar behind it, so set the surface on the