/* ============================================================ Tyrann Mathieu Foundation - mobile responsive layer Loaded LAST in on every page. Desktop (>900px) is untouched except for hiding the mobile-only elements. Theme: black header #000000, white content, red accent #c8102e. ============================================================ */ /* ---- mobile-only elements: hidden on desktop ---- */ #tmHamburger { display: none; } #tmDonate { display: none; } #tmMobileNav { display: none; } #tmNavBackdrop { display: none; } @media screen and (max-width: 900px) { /* ---------- fluid chrome ---------- The desktop header is position:fixed at 155px tall with a fixed-width background image, and a 155px spacer row reserves its space. On a phone that wastes most of the viewport, so let it flow normally instead. */ html, body { overflow-x: hidden; } .header { position: static !important; height: auto !important; background-image: none !important; background-color: #000000 !important; padding: 10px 0 !important; } .headerHeight, .headerCell { height: auto !important; background-image: none !important; } .headerRow { width: 100% !important; height: auto !important; background-image: none !important; } .headerRow > tbody > tr > td { display: block; width: 100% !important; text-align: center; box-sizing: border-box; } .headerRow td[style*="border:none"] { padding: 4px 10px !important; } #imgBannerLogo { max-width: 210px; height: auto; display: block; margin: 0 auto; } /* the header holds the hamburger, so anchor it */ .header { position: relative !important; } /* hide the desktop CMS menu (and its unwired burger overlay) */ #mbmcpebul_table, [id^="mbmcpebul_table_burger"] { display: none !important; } /* The desktop "Connect With Us" strip is ~1100px wide (fixed-width inner tables) and cannot be made to fit; hide it and give the mobile header its own compact Donate button instead (added by tm-mobile.js). The inner table also carries height="155px", so clear that too. */ .header table[height="155px"] tr:first-child { display: none; } .header table[height="155px"] { height: auto !important; } .header td[style*="height:114px"] { height: auto !important; } #tmDonate { display: inline-block; margin: 8px auto 2px auto; padding: 9px 18px; background: #c8102e; color: #ffffff; border-radius: 4px; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } /* ---------- fluid content ---------- */ .contentTable, .contentTableFull { width: 100% !important; table-layout: auto; } .bigTable img { max-width: 100%; height: auto !important; } /* viewport units, not % - inside auto-layout tables a % width is circular against a cell that sizes itself from the embed, so it has no effect */ .bigTable iframe, .bigTable embed, .bigTable object, .bigTable video { width: calc(100vw - 44px) !important; max-width: calc(100vw - 44px) !important; } .bigTable iframe[src*="youtube"], .bigTable iframe[src*="youtu.be"], .bigTable iframe[src*="vimeo"] { height: auto !important; aspect-ratio: 16 / 9; } /* A sub-footer div on every page is styled margin-left:550px;width:550px, giving the whole page table a 1100px min-content width (which overflow-x:hidden was merely masking). Neutralise inline offsets and let such divs size to the viewport. */ .bigTable div[style*="margin-left"] { margin-left: 0 !important; } .bigTable div[style*="margin-right"] { margin-right: 0 !important; } .bigTable div[style*="width:"] { width: auto !important; max-width: 100% !important; } .bigTable [style*="width:"] { max-width: 100% !important; } .bigTable table[style*="width:"] { width: 100% !important; } .bigTable div[style*="width: 1200px"] { width: 100% !important; } .bigTable table[width], .bigTable td[width] { max-width: 100% !important; } .contentTable td, .contentTableFull td { word-wrap: break-word; } .homeCell, .footerCell { padding-left: 12px !important; padding-right: 12px !important; } h1 { font-size: 30px !important; line-height: 1.15 !important; } h2 { font-size: 22px !important; line-height: 1.2 !important; } /* Headings built as spans/divs with an inline font-size inherit the fixed body line-height, so once they wrap the lines overlap. Give oversized ones a proportional line-height and cap the largest so they still fit. */ .bigTable [style*="font-size: 60px"], .bigTable [style*="font-size: 50px"], .bigTable [style*="font-size: 48px"] { font-size: 32px !important; line-height: 1.15 !important; } .bigTable [style*="font-size: 40px"], .bigTable [style*="font-size: 36px"] { font-size: 28px !important; line-height: 1.15 !important; } .bigTable [style*="font-size: 30px"], .bigTable [style*="font-size: 25px"], .bigTable [style*="font-size: 24px"] { line-height: 1.25 !important; } /* .bigTable is height:100%, so on a short page the browser stretches the header row to fill the viewport, leaving a large black band. */ .bigTable { height: auto !important; min-height: 0 !important; } .headerCell { vertical-align: top !important; } /* The mission band paints a wide photo as a cell background with the copy offset 550px to sit clear of it. Once that offset is removed the dark text lands on the photo, so scale the photo and put the copy on a light panel. */ .subFooter1Cell { background-size: cover !important; background-position: center !important; } .subFooter1Cell div[style*="margin-left"] { background: rgba(255,255,255,0.88) !important; padding: 18px 16px !important; margin: 14px !important; border-radius: 6px; } .slideshowRow { height: auto !important; } .subFooter1Row, .subFooter2Row { height: auto !important; } } @media screen and (max-width: 700px) { /* stack multi-column content tables */ .contentTable table, .contentTable tbody, .contentTable tr, .contentTable td { display: block; width: 100% !important; box-sizing: border-box; } .contentTable td[width="25%"], .contentTable td[width="33%"], .contentTable td[width="50%"] { display: block; width: 100% !important; } /* once cells stack they keep their default left alignment, stranding fixed-width image tiles; center cells whose only content is an image */ .contentTable td > a:only-child > img:only-child, .contentTable td > img:only-child, .contentTableFull td > a:only-child > img:only-child, .contentTableFull td > img:only-child { display: block; margin-left: auto; margin-right: auto; } h1 { font-size: 26px !important; } /* photo gallery thumbs: 2 per row */ #vlightbox1 img, .photo-gallery img { width: 46vw !important; height: auto !important; margin: 4px; } } /* ============================================================ Mobile menu (hamburger + slide-in panel + backdrop) ============================================================ */ @media screen and (max-width: 900px) { #tmHamburger { display: block; position: absolute; top: 14px; right: 14px; width: 44px; height: 40px; padding: 8px 9px; background: transparent; border: 2px solid #c8102e; border-radius: 6px; cursor: pointer; z-index: 10010; } #tmHamburger span { display: block; height: 3px; width: 100%; background: #ffffff; border-radius: 2px; margin: 4px 0; } #tmNavBackdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 10020; } #tmNavBackdrop.show { opacity: 1; pointer-events: auto; } #tmMobileNav { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: 290px; max-width: 85vw; background: #111111; border-left: 4px solid #c8102e; transform: translateX(102%); transition: transform .28s ease; z-index: 10030; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 0 30px 0; box-sizing: border-box; } #tmMobileNav.open { transform: translateX(0); } #tmMobileNav .tm-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 14px 18px; border-bottom: 1px solid #333333; } #tmMobileNav .tm-nav-head img { width: 120px; height: auto; } #tmMobileNav .tm-nav-close { background: none; border: 0; color: #ffffff; font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 8px; } #tmMobileNav a.tm-link { display: block; padding: 14px 22px; color: #ffffff; text-decoration: none; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid #333333; } #tmMobileNav a.tm-link:hover, #tmMobileNav a.tm-link:active { background: #1e1e1e; color: #c8102e; } #tmMobileNav .tm-group { padding: 14px 22px 6px 22px; color: #c8102e; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; } #tmMobileNav a.tm-sub { display: block; padding: 9px 22px 9px 34px; color: #d5d5d5; text-decoration: none; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: .4px; } #tmMobileNav a.tm-sub:hover, #tmMobileNav a.tm-sub:active { color: #c8102e; } /* must out-specify "#tmMobileNav a.tm-sub { display:block }" above */ #tmMobileNav a.tm-sub.tm-collapsed { display: none !important; } #tmMobileNav .tm-more { display: block; width: calc(100% - 44px); margin: 4px 22px 0; padding: 8px 0; background: none; border: 0; color: #c8102e; text-align: left; cursor: pointer; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } #tmMobileNav .tm-nav-cta { padding: 18px 22px 6px 22px; text-align: center; } #tmMobileNav .tm-nav-cta a { display: block; padding: 12px 10px; border-radius: 4px; background: #c8102e; color: #ffffff; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; } #tmMobileNav .tm-nav-social { text-align: center; padding: 14px 0 0 0; } #tmMobileNav .tm-nav-social a { display: inline-block; margin: 0 8px; } #tmMobileNav .tm-nav-social img { width: 26px; height: auto; } body.tm-nav-open { overflow: hidden; } }