/* ============================================================ responsive.css — Desktop polish + full mobile/tablet support Drop this file in alongside style.css / layout.css and link it LAST in so it overrides the old fixed-pixel rules. ============================================================ */ /* ── 0. Box-sizing reset (safe to add globally) ─────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── 1. Root fluid container ────────────────────────────── */ #main { width: 100%; max-width: 980px; margin: 0 auto; text-align: left; } /* ── 2. HEADER ──────────────────────────────────────────── */ #header { height: auto; /* was fixed 570px — breaks on narrow screens */ overflow: visible; } /* Logo row: keep logo + badges together, allow wrap */ .logo { padding: 20px 16px 4px 16px; position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; } .logo > a img { max-width: 260px; height: auto; } /* "OPEN WEEKENDS" starburst — was absolute with pixel offsets */ .starburst { position: static; /* pull out of old absolute flow */ font-size: 14px; font-weight: bold; color: #bff3ff; background: #116a83; border-radius: 4px; padding: 4px 10px; white-space: nowrap; align-self: center; margin-left: auto; } /* Phone call badge */ .call { position: static; font-size: 15px; font-weight: bold; color: #fff; background: #438ea3; border-radius: 4px; padding: 4px 10px; white-space: nowrap; align-self: center; } .call a { color: #fff; text-decoration: none; } /* ── 3. NAVIGATION ──────────────────────────────────────── */ .menu-left, .menu-right { background: none; /* bg images stay but we neutralise broken pixel positioning */ } .menu { width: 100%; overflow: hidden; } .menu ul { display: flex; flex-wrap: wrap; overflow: visible; width: 100%; } .menu li { float: none; padding: 14px 18px; font-size: 1.1em; background-image: none; /* remove separator gif that misaligns on narrow viewports */ border-right: 1px solid rgba(255,255,255,0.08); } .menu li:last-child { border-right: none; } /* Bitcoin icon: stop it from pushing into other elements */ .bitcoin { position: static; display: inline-block; margin: 8px 8px 0 0; vertical-align: middle; } .googleplus { position: static; display: inline-block; margin: 8px 4px 0 0; vertical-align: middle; } /* ── 4. HERO / SLIDER ──────────────────────────────────── */ .container { display: flex; flex-wrap: wrap; width: 100%; overflow: visible; } /* Slider: was fixed 670 × 371 px */ .header-img { width: 100%; max-width: 670px; flex: 1 1 320px; } .anythingSlider { width: 100% !important; height: auto !important; min-height: 180px; overflow: hidden; position: relative; } .anythingSlider .wrapper { width: 100% !important; height: auto !important; position: relative; } .anythingSlider .wrapper ul { display: flex; width: 100% !important; position: relative; } .anythingSlider ul li { width: 100% !important; height: auto !important; flex-shrink: 0; } .anythingSlider ul li img { width: 100%; height: auto; display: block; object-fit: cover; } /* Header sidebar box */ .header-box { width: 100%; max-width: 310px; flex: 1 1 260px; background-color: #438ea3; } .header-box .indent { padding: 30px 20px 28px 24px; } /* ── 5. MAIN CONTENT COLUMNS ─────────────────────────────── */ /* The old layout uses fixed-px .col-1/2/3 — make them fluid */ .main-content .indent { padding: 28px 24px 40px 24px; } /* Remove pixel-based background-position dividers (they break on fluid widths) */ .main-content .divider, .main-content .divider1, .row .divider, .row1 .divider, .row1 .divider1 { background-image: none !important; } /* All column classes → fluid flex children by default */ .col-1, .col-2, .col-3 { float: none; width: 100%; min-width: 0; } /* Re-introduce side-by-side at tablet+ for specific page layouts */ @media (min-width: 680px) { .container, .container1 { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; } /* page1 main-content: 3 columns */ #page1 .main-content .col-1 { flex: 0 0 22%; } #page1 .main-content .col-2 { flex: 0 0 36%; } #page1 .main-content .col-3 { flex: 1 1 0; } /* page1 .row: 2 columns */ #page1 .row .col-1 { flex: 0 0 55%; } #page1 .row .col-2 { flex: 1 1 0; } /* page1 .row1: 2 columns */ #page1 .row1 .col-1 { flex: 0 0 40%; } #page1 .row1 .col-2 { flex: 1 1 0; } /* page2 */ #page2 .col-1 { flex: 0 0 24%; } #page2 .col-2 { flex: 1 1 0; } #page2 .row1 .col-1 { flex: 0 0 36%; } #page2 .row1 .col-2 { flex: 0 0 36%; } #page2 .row1 .col-3 { flex: 1 1 0; } /* page3 */ #page3 .main-content .col-1 { flex: 0 0 22%; } #page3 .main-content .col-2 { flex: 0 0 36%; } #page3 .main-content .col-3 { flex: 1 1 0; } #page3 .row .col-1 { flex: 0 0 55%; } #page3 .row .col-2 { flex: 1 1 0; } #page3 .row1 .col-1 { flex: 0 0 45%; } #page3 .row1 .col-2 { flex: 1 1 0; } /* page4 */ #page4 .main-content .col-1 { flex: 0 0 22%; } #page4 .main-content .col-2 { flex: 0 0 36%; } #page4 .main-content .col-3 { flex: 1 1 0; } #page4 .row1 .col-1 { flex: 0 0 60%; } #page4 .row1 .col-2 { flex: 1 1 0; } /* page5 / page6 */ #page5 .main-content .col-1, #page6 .main-content .col-1 { flex: 0 0 26%; } #page5 .row .col-1, #page6 .row .col-1 { flex: 0 0 55%; } #page5 .row .col-2, #page6 .row .col-2 { flex: 1 1 0; } #page5 .row1 .col-1, #page6 .row1 .col-1 { flex: 0 0 45%; } #page5 .row1 .col-2, #page6 .row1 .col-2 { flex: 1 1 0; } } /* Add a hairline separator between columns instead of broken pixel bg-images */ @media (min-width: 680px) { .col-1 + .col-2, .col-2 + .col-3 { border-left: 1px solid rgba(0,0,0,0.08); padding-left: 24px; } .row1 .col-1 + .col-2 { border-left: 1px solid rgba(255,255,255,0.08); } } /* col padding helpers → percentage-based */ .col-pad { padding-right: 5%; } .col-pad1 { padding-right: 4%; } .row .col-pad { padding-right: 4%; } .row1 .col-pad, .row1 .col-pad1 { padding-right: 4%; } /* ── 6. ROW SECTIONS ─────────────────────────────────────── */ .row .indent { padding: 24px 24px 20px 24px; } .row1 .indent { padding: 18px 24px 16px 24px; } /* row-bg: the decorative right-bg image can overflow on narrow screens */ .row-bg { background-size: auto; background-position: right bottom; } /* ── 7. IMAGES — never overflow parent ───────────────────── */ img { max-width: 100%; height: auto; } .imgindent { margin: 0 16px 12px 0; float: left; } .imgindent1 { margin: 0 12px 12px 0; float: left; } /* ── 8. CONTACT FORM ─────────────────────────────────────── */ #contact-form input, #contact-form textarea, .input, textarea { width: 100%; max-width: 340px; box-sizing: border-box; } /* ── 9. FOOTER ───────────────────────────────────────────── */ #footer { height: auto; padding: 12px 16px 12px 16px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } #footer span { flex: 1 1 auto; } #footer address { width: 100%; font-style: normal; font-size: 0.9em; line-height: 1.6em; color: #6a6a6a; margin-top: 4px; } /* ── 10. HAMBURGER (already in mobile-nav.js — style it here) ── */ .hamburger { display: none; /* hidden on desktop */ background: none; border: none; cursor: pointer; padding: 8px; position: absolute; top: 12px; right: 12px; z-index: 1100; } .hamburger span { display: block; width: 26px; height: 3px; background: #fff; margin: 5px 0; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile nav overlay */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(30, 30, 30, 0.97); z-index: 1050; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .mobile-nav-overlay.open { display: flex; } .mobile-nav-overlay a { color: #d0d0d0; font-size: 1.4em; text-transform: uppercase; text-decoration: none; letter-spacing: 0.06em; } .mobile-nav-overlay a:hover, .mobile-nav-overlay a.current { color: #60b6cb; } .mobile-nav-close { position: absolute; top: 18px; right: 20px; background: none; border: none; color: #fff; font-size: 2em; cursor: pointer; line-height: 1; } /* ============================================================ TABLET 768 – 979 px ============================================================ */ @media (max-width: 979px) { #main { width: 100%; } .logo { padding: 16px 16px 4px 16px; } .header-img { max-width: 100%; flex: 1 1 100%; } .header-box { max-width: 100%; flex: 1 1 100%; } .header-box .indent { padding: 24px 20px; } .anythingSlider, .anythingSlider .wrapper { height: auto !important; } } /* ============================================================ MOBILE ≤ 767 px ============================================================ */ @media (max-width: 767px) { /* Show hamburger, hide desktop nav */ .hamburger { display: block; } .menu-left, .menu-right, .menu { display: none; } /* Logo area */ .logo { padding: 12px 50px 8px 12px; /* right gap for hamburger button */ gap: 6px; } .logo > a img { max-width: 200px; } .starburst { font-size: 11px; padding: 3px 7px; } .call { font-size: 13px; padding: 3px 7px; } /* Hero: stack slider + box */ .container { flex-direction: column; } .header-img, .header-box { max-width: 100%; flex: 1 1 100%; } .header-box .indent { padding: 20px 16px; } .header-box strong { font-size: 1.6em; } /* Content sections */ .main-content .indent, .row .indent, .row1 .indent { padding: 20px 16px; } h1 { font-size: 1.5em; } h2 { font-size: 1.8em; } h3 { font-size: 1.8em; } h4 { font-size: 1.5em; } /* Columns stack vertically */ .col-1, .col-2, .col-3 { width: 100% !important; float: none !important; padding-right: 0 !important; margin-bottom: 24px; } /* Remove column border dividers on mobile */ .col-1 + .col-2, .col-2 + .col-3 { border-left: none; padding-left: 0; } /* Float helpers: un-float on mobile to prevent overlap */ .left, .right { float: none !important; display: block; } .imgindent, .imgindent1 { float: none; margin: 0 0 12px 0; display: block; } /* Contact form */ #contact-form input, #contact-form textarea, .input, textarea { width: 100%; max-width: 100%; } /* Footer */ #footer { flex-direction: column; text-align: left; padding: 14px 16px; } #footer > div[style*="float:right"] { float: none !important; margin-top: 8px; } /* Slider arrows: hide on very small screens to avoid overlap */ .anythingSlider .arrow { display: none; } /* Row link buttons */ .row .link { font-size: 0.95em; } /* Address block */ .adress { font-size: 1.2em; } } /* ============================================================ VERY SMALL ≤ 400 px ============================================================ */ @media (max-width: 400px) { .logo > a img { max-width: 160px; } h1 { font-size: 1.3em; } h2 { font-size: 1.5em; } .menu li { padding: 10px 12px; font-size: 0.95em; } }