/* ===== fonts.css ===== */ /* * fonts.css * * Generated by public_html/fonts/fetch-fonts.sh - do not edit. * * Source: the Google Fonts CSS API, self-hosted so the faces ship inside * the CSS bundle instead of costing two extra origins and a serial hop. * Request: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&family=Kalam:wght@700&display=swap * * Metric-matched fallbacks for these families live in vanguard.css, which * is what keeps font-display: swap from shifting the page. */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('/fonts/fraunces-italic-latin.4af9c759c805.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/fraunces-normal-latin.48282a415ec2.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-normal-latin.c940764593d0.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/kalam-normal-latin.c1bc5092263c.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== normalize.cssz ===== */ /*! normalize.css v1.0.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ html, button, input, select, textarea { font-family: sans-serif; } /* * Addresses margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* * Addresses font sizes and margins set differently in IE 6/7. * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } /* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /* * Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* * Addresses styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /* * Addresses margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* * Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * Addresses CSS quotes not supported in IE 6/7. */ q { quotes: none; } /* * Addresses `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /* * Addresses inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /* * Addresses margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /* * Addresses paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /* * Corrects list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improves image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* * Corrects margin displayed oddly in IE 6/7. */ form { margin: 0; } /* * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. Corrects color not being inherited in IE 6/7/8/9. * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improves appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /* * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. * 4. Removes inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /* * Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to content-box in IE 8/9. * 2. Removes excess padding in IE 8/9. * 3. Removes excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* ===== site.cssz ===== */ /* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Chrome Frame prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ textarea.ViewTpl { visibility: hidden; display: none; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #1d8718 url('../img/bkgr/BackgroundLandscape.scale-100.jpg') no-repeat 100% 50%; background-size: cover; overflow: hidden; } body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-highlight: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } #mgnt-ui { overflow: scroll; height: 100%; } h1, h2, h3, h4, h5, p { color: #333; } .console { z-index: 1000; position: absolute; bottom: 0; } .main { width: 80%; max-width: 626px; margin: 0 auto; padding: 1em; z-index: 101; } .main.play-mash-online-free { max-width: 700px; background-color: #FFF; } .intro, .content { padding: .75em; border-radius: 8px; border: 1px solid #FFF; background-color: rgba(255, 255, 255, 0.6); z-index: 102; } .fb-comments { margin: 0 auto; } .widgets .widget { width: 80px; float: left; } #MASH.logo { max-width: 600px; width: 100%; height: 3em; background: transparent url('../img/logos/MASHPlusLogoText.scale-100.png') no-repeat 0 0; background-size: contain; } #store, #stores { width: 90%; max-width: 480px; margin: 0 auto; } #store .storeItem, #stores .storeItem { width: 45%; float: left; margin-right: 10px; margin-bottom: 10px; list-style-type: none; } #store .storeItem p, #stores .storeItem p { font-size: 75%; } #store .storeBtn, #stores .storeBtn { display: block; width: 100%; height: 60px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; } #store .storeItem p, #store .storeItem a { text-align: center; } #store .storeBtn { height: 80px; background-position: 50% 50%; } #store .storeItem:last-child, #stores .storeItem:last-child { margin-right: 0; } .storeBtn.iOS, .storeBtn#iOS { background-image: url("../img/buttons/Available_on_the_App_Store_Badge_135x40.svg"); } .storeBtn.GooglePlay, .storeBtn#GooglePlay { background-image: url("../img/buttons/Get_it_on_Google_Play_Badge.svg"); } .storeBtn.GoogleChromeWS, .storeBtn#GoogleChromeWS { background-image: url("../img/buttons/ChromeWebStore_BadgeWBorder_v2.svg"); } .storeBtn.Amazon, .storeBtn#Amazon { background-image: url("../img/buttons/Available_at_Amazon_Appstore.svg"); } .storeBtn.WindowsStore, .storeBtn#WindowsStore { background-image: url("../img/buttons/WindowsStore_badge_green.svg"); } .storeBtn.WindowsPhone, .storeBtn#WindowsPhone { background-image: url("../img/buttons/WindowsPhone_badge_blue.svg"); } .now-available-on-mas, #now-available-on-mas { width: 100%; max-width: 480px; margin: 0 auto; } .now-available-on-mas .storeBtn, #now-available-on-mas .storeBtn { display: block; width: 100%; height: 100px; margin-right: 10px; margin-bottom: 10px; background-position: 0 0; background-repeat: no-repeat; } .storeBtn.Mac, .storeBtn#Mac { background-image: url("../img/buttons/Download_on_the_Mac_App_Store_Badge_US-UK_165x40.svg"); background-position: 100px 50%; background-size: 70%; min-width: 338px; } #stores .storeBtn#Mac { background-position: 0 0; background-size: contain; min-width: 0; } .storeBtn.Mac .icon, .storeBtn#Mac .icon { background-image: url("../img/icons/MASH-for-Mac-icon@2x.png"); width: 100px; height: 100px; display: block; background-size: cover; } ul#store { padding-left: 0; } #store .storeItem { width: 100%; padding: 0; } #facebookLikeWidget { max-width: 100% !important; /*overflow: scroll;*/ } #play-on-facebook { padding: 1em; background-color: rgba(255,255,255,0.8); border-radius: 8px; margin-bottom: 1em; -webkit-box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5); box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5); } .iconBtn.Facebook { background: transparent url('../img/logos/f_logo.svg') no-repeat 0 0; background-size: 48px; display: block; padding-left: 64px; font-size: 200%; font-weight: bold; padding-bottom: .1em; text-decoration: none; } .promoted { padding: .25em 1em; background-color: rgba(174, 245, 255, 0.38); border-radius: 8px; -webkit-box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5); box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5); border: 2px solid #FFF; } .intro a:link { color: #317ffb; } .intro a:visited { color: #5664bf; } .intro a:hover { color: #3db6f2; } .intro a:active { color: #21670f; } #socialLinks a:link, #socialLinks a:visited, #socialLinks a:hover, #socialLinks a:active { color: rgb(9, 102, 163); } .sharable-pin img { width: 100%; height: auto; } .ogImage img { width: 100%; height: auto; } footer p { color: #FFF; font-size: 90%; font-weight: normal; } footer a:link { color: #FFF; text-decoration: none; } footer a:hover { text-decoration: underline; } footer a:visited { color: #FFF; text-decoration: none; } .play-mash-online-free footer p { color: #333; } .play-mash-online-free footer a:link { color: #333; text-decoration: none; } .play-mash-online-free footer a:visited { color: #333; text-decoration: none; } .play-mash-online-free footer a:hover { color: #333; text-decoration: underline; } /* Overthrow CSS: Enable overflow: auto on elements with overthrow class when html element has overthrow class too */ .overthrow-enabled .overthrow { overflow: auto; -webkit-overflow-scrolling: touch; } .scrollable { overflow: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-scrolling: touch; /*padding-right: 2em;*/ padding-bottom: 2em; } .scrollable * { -webkit-transform: translate3d(0,0,0); } button.basicButton { padding: 1em; border: 2px solid #FFF; color: #062954; font-weight: bold; font-size: 125%; background-color: #bdd8e2; } button.basicButton:hover { background-color: #7ecff1; } button.basicButton:active { background-color: #348bf4; color: #FFF; } .backButton { display: block; color: #FFF; font-size: 110%; font-weight: bold; text-decoration: none; width: 48px; height: 48px; background: transparent url('../img/skin/BackButton.scale-100.png') no-repeat 0 0; float: left; } .backButton:active { background-position: 0 -48px; outline: none; } .backButton:focus { outline: none; } .titleView { color: #FFF; font-size: 125%; float: left; margin-left: 10px; } #Dwellings { width: 100%; max-width: 500px; height: 192px; margin: 0 auto; background: transparent url('../img/dwellings/Dwellings-Flat.scale-100.png') no-repeat 0 100%; background-size: contain; z-index: 1; margin-top: 1em; } .controlsContainer { max-width: 580px; min-width: 280px; padding: 0 1em; margin-top: 1em; } .hbox .control { float: left; } #overlay { position: absolute; background: transparent url('../img/skin/transparent.png') repeat 0 0; width: 100%; height: 100%; z-index: 200; } .listControl { position: absolute; visibility: hidden; overflow: auto; border: 2px solid #333; background-color: #FFF; z-index: 300; } .listControlItem { background-color: #FFF; border-bottom: 1px solid #333; padding: 1em; } .listControlItem .titleLbl { color: #222; font-size: 125%; cursor: default; } .listControlItem:hover, .segmentedListControlItem .listControlItem:hover { background-color: #bdd8e2; } .listControlItem:active, .segmentedListControlItem .listControlItem:active { background-color: #7dcef3; } .segmentedListControlItem { width: 100%; padding: 0; } .segmentedListControlItem .listControlItem { float: left; width: 40%; padding: 5%; background-color: #d8e5e6; } .segmentedListControlItem .listControlItem.selected { background-color: #FFF; } .wordLblOuter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; opacity: 0; } label.wordLbl { color: #222222; } canvas.wordLblCanvas { position: absolute; } .adModule { position: absolute; z-index: 2000; width: 0; height: 0; background-color: #FEFEFE; } /* MS unit id: 109757 */ .adModule.ad_160x600 { width: 160px; height: 600px; } /* MS unit id: 109758 */ .adModule.ad_292x60 { width: 292px; height: 60px; } /* MS unit id: 109759 */ .adModule.ad_728x90 { width: 728px; height: 90px; } ul.full-width, ol.full-width { width: 100%; padding: 0; } ul.full-width li .section-leader-img { margin-left: 0; } li .section-leader-img { display: block; margin-left: -20px; width: 100%; height: auto; } @media screen and (max-width: 600px) { .desktop-specific { display: none; visibility: hidden; } .main { width: auto; padding-left: 10px; padding-right: 10px; } } /* Portrait */ @media screen and (orientation:portrait), screen and (-ms-view-state: fullscreen-portrait) { body { background: #1d8718 url('../img/bkgr/BackgroundPortrait.scale-100.jpg') no-repeat 50% 50%; background-size: cover; } } /* Landscape */ @media screen and (orientation:landscape), screen and (-ms-view-state: fullscreen-landscape) { body { background: #1d8718 url('../img/bkgr/BackgroundLandscape.scale-100.jpg') no-repeat 50% 50%; background-size: cover; } } @media screen and (max-width: 540px) and (orientation: portrait) { #stores .storeItem { float: left; width: 80%; } #stores .storeBtn { display: block; width: 100%; height: 80px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; } #MASH.logo { margin: 2% 0; height: 2em; } } /* Snapped */ @media screen and (max-width: 600px) and (orientation: portrait), screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5) { body { background: #1d8718 url('../img/bkgr/BackgroundSnapped.scale-100.jpg') no-repeat 50% 50%; background-size: cover; } .backButton { width: 72px; height: 72px; background: transparent url('../img/skin/BackButton.scale-180.png') no-repeat 0 0; background-size: cover; } .controlsContainer { max-width: 580px; min-width: 280px; margin: 0 auto; padding: 0 1em; } } @media screen and (max-height: 672px) { } @media screen and (max-height: 554px) { #Dwellings { display: none; visibility: hidden; } } @media screen and (min-width: 1280px) { #Dwellings { width: 100%; max-width: 1200px; height: 400px; margin: 0 auto; background: transparent url('../img/dwellings/Dwellings-Flat.scale-100.png') no-repeat 0 100%; background-size: contain; z-index: 1; margin-top: 1em; } } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .replaced { text-indent: 100%; white-space: nowrap; overflow: hidden; } .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. Theses examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* ===== site.supplement.css ===== */ /* Ensure html element allows bounce */ html { overflow-x: hidden !important; background-image: linear-gradient(to bottom, #2d84f8, #1d8718) !important; background-attachment: fixed !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; height: 100% !important; min-height: 100vh !important; min-height: 100dvh !important; width: 100% !important; width: 100vw !important; overscroll-behavior: contain !important; } /* Ensure body can scroll and background stays fixed */ body { overflow-y: scroll !important; overflow-x: hidden !important; background-image: url('https://mgnt-app-assets.s3.amazonaws.com/MASHPlus/site/img/bkgr/BackgroundLandscape.scale-100.jpg'), linear-gradient(to bottom, #2d84f8, #1d8718) !important; background-attachment: fixed !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; min-height: 100vh !important; min-height: 100dvh !important; width: 100% !important; } /* Content meta styling for author and date information */ .content-meta { margin: 10px 0; font-size: 0.9em; color: #666; line-height: 1.4; } .content-meta .date { display: inline-block; margin-right: 15px; } .content-meta .author { display: inline-block; font-style: italic; } .content-meta .date::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f133"; margin-right: 5px; } .content-meta .author::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f304"; margin-right: 5px; } /* Content area responsive styles */ .content { max-width: 960px; margin: 0 auto; padding: 20px; background: rgba(255, 255, 255, 0.95); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); line-height: 1.6; } .content header { margin-bottom: 30px; border-bottom: 2px solid #2d84f8; padding-bottom: 20px; } .content h1 { font-size: 2.5em; color: #2d84f8; margin-bottom: 10px; line-height: 1.2; } .content h2 { font-size: 1.8em; color: #1d8718; margin: 25px 0 15px 0; line-height: 1.3; } .content h3 { font-size: 1.4em; color: #333; margin: 20px 0 10px 0; line-height: 1.4; } .content p { margin-bottom: 15px; text-align: justify; } .content ul, .content ol { margin: 15px 0; padding-left: 30px; } .content li { margin-bottom: 8px; } .content a { color: #2d84f8; text-decoration: none; border-bottom: 1px solid transparent; transition: border-bottom-color 0.3s ease; } .content a:hover { border-bottom-color: #2d84f8; } .content strong { color: #1d8718; font-weight: bold; } .content em { font-style: italic; color: #666; } .content hr { border: none; border-top: 1px solid #ddd; margin: 30px 0; } /* Mobile responsive styles */ @media screen and (max-width: 768px) { .content { padding: 15px; margin: 10px; border-radius: 6px; } .content h1 { font-size: 2em; } .content h2 { font-size: 1.5em; } .content h3 { font-size: 1.2em; } .content ul, .content ol { padding-left: 20px; } } @media screen and (max-width: 480px) { .content { padding: 10px; margin: 5px; } .content h1 { font-size: 1.8em; } .content h2 { font-size: 1.3em; } .content h3 { font-size: 1.1em; } .content p { text-align: left; } .content ul, .content ol { padding-left: 15px; } .content-meta { font-size: 0.8em; } .content-meta .date, .content-meta .author { display: block; margin-bottom: 5px; } } /* Main layout responsive adjustments */ @media screen and (max-width: 768px) { .main { padding: 10px; } #MASH .logo { height: 2.5em; } .intro { padding: 15px; } .intro h1 { font-size: 1.8em; } .intro h2 { font-size: 1.3em; } .intro p { font-size: 0.95em; } } @media screen and (max-width: 480px) { .main { padding: 5px; } #MASH .logo { height: 2em; } .intro { padding: 10px; } .intro h1 { font-size: 1.5em; } .intro h2 { font-size: 1.1em; } .intro p { font-size: 0.9em; } .sub-pages ul { padding-left: 15px; } .sub-pages li { margin-bottom: 8px; } } footer a { font-weight: bold; } .content article a { text-decoration: underline; } /* ===== mash.css ===== */ #MASH.logo { font-size: 2em; margin: 0 0 0.67em 0; } .frosted-glass { background: var(--surface-frosted); border-radius: var(--radius); } .ogImage { width: 100%; max-width: 256px; height: auto; display: block; border-radius: 8px; overflow: hidden; } .game-instructions { margin-top: 10px; } .xpromo-container .inner-content { width: 100%; max-width: 500px; margin: 0 auto; padding: 10px; } /* ===== site.fixes.css ===== */ /* * site.fixes.css * * Targeted overrides for measured layout/perf defects on top of the legacy * S3 style.cssz bundle and site.supplement.css. Deliberately NOT wrapped in * @layer: layered styles always lose to unlayered CSS, and every rule here * has to beat the legacy bundle. * * Revert: remove the to this file from * _includes/common_scripts_and_styles.inc.php. This file can stay on disk. */ /* Fix 1: Store badges clip at narrow widths. site.cssz sets min-width: 338px on the Mac badge and tries to undo it with `#stores .storeBtn#Mac`, but the markup id is `store`, not `stores`, so that selector never matches. */ .stores .storeBtn#Mac, .stores .storeBtn.Mac { min-width: 0; } /* min() keeps auto-fit tracks from exceeding a narrow container */ #store, #stores { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); } .storeItem { box-sizing: border-box; } /* Fix 3: Make print work. The only print CSS today is the h5bp default inside the gzipped bundle. */ @media print { .top-navigation, .footer-container, .mash-share, .st-sticky-share-buttons, .sharethis-inline-share-buttons, .xpromo-container, .mash-download-ad, .newsletter-signup, .social-widgets, .widgets, #facebookLikeWidget { display: none !important; } /* Legacy h5bp appends href to every anchor. Keep it only where a URL is actually useful on paper. */ a[href]::after { content: none; } a[href^="http"]:not([href*="mashplus.com"])::after { content: " (" attr(href) ")"; font-size: 0.8em; } /* site.supplement.css sets these with !important */ html, body { background-image: none !important; background-color: #fff !important; } .content, .frosted-glass, .intro { background: none !important; box-shadow: none !important; backdrop-filter: none !important; } h1, h2, h3 { break-after: avoid; } img, li { break-inside: avoid; } } /* Fix 4: Stop applying the prose measure to the whole blog column. body.editorial .content-body { max-width: 68ch } caps the container, and blog article banner images fill the column, so a capped container would shrink them. The measure moves from the container to its text children. */ body#blog .content-body { max-width: none; } body#blog .content-body > :where(p, ol, ul, h3) { max-width: 68ch; } /* ===== mash.tokens.css ===== */ /* * mash.tokens.css * * Single token layer for MASHPlus. Unlayered on :root so custom properties * apply without fighting the legacy S3 bundle. Revert: remove this . */ :root { /* Type — editorial scale (320px → 1440px) */ --step--1: clamp(0.80rem, 0.74rem + 0.22vw, 0.94rem); --step-0: clamp(1.00rem, 0.92rem + 0.28vw, 1.13rem); --step-1: clamp(1.20rem, 1.10rem + 0.38vw, 1.40rem); --step-2: clamp(1.44rem, 1.28rem + 0.56vw, 1.75rem); --step-3: clamp(1.73rem, 1.50rem + 0.82vw, 2.19rem); --step-4: clamp(2.07rem, 1.73rem + 1.20vw, 2.74rem); --step-5: clamp(2.488rem, 1.846rem + 3.209vw, 4.735rem); /* Space — one scale for padding, margin, and gap */ --space-3xs: clamp(0.25rem, 0.232rem + 0.089vw, 0.313rem); --space-2xs: clamp(0.5rem, 0.464rem + 0.179vw, 0.625rem); --space-xs: clamp(0.75rem, 0.696rem + 0.268vw, 0.938rem); --space-s: clamp(1rem, 0.929rem + 0.357vw, 1.25rem); --space-m: clamp(1.5rem, 1.393rem + 0.536vw, 1.875rem); --space-l: clamp(2rem, 1.857rem + 0.714vw, 2.5rem); --space-xl: clamp(3rem, 2.786rem + 1.071vw, 3.75rem); --space-2xl: clamp(4rem, 3.714rem + 1.429vw, 5rem); --space-3xl: clamp(6rem, 5.571rem + 2.143vw, 7.5rem); /* Measure and rhythm */ --measure: 68ch; --leading-tight: 1.1; --leading-body: 1.6; --rhythm: 1.6em; /* Layout frame */ --gutter: var(--space-m); --content-max: 60rem; --radius: 8px; --radius-sm: 4px; --radius-lg: 14px; --duration: 0.2s; /* Brand colors — named, not resolved (visual pass picks accent) */ --brand-blue: #2d84f8; --brand-green: #1d8718; --accent-editorial: #b03a48; --ink: #1a1a1f; --ink-soft: #4a4a55; --rule: #e6e2da; --bg-card: #fbf8f3; --surface-frosted: rgba(255, 255, 255, 0.69); --surface-frosted-strong: rgba(255, 255, 255, 0.85); --focus-ring: var(--brand-blue); } /* Editorial pages alias crimson accent; swap --accent-editorial later for unified brand */ body.editorial { --accent: var(--accent-editorial); } /* ===== mash.components.css ===== */ /* * mash.components.css * * Shared layout components aliased to existing class names. Revert: remove this . */ /* ─── Card grids (one implementation, five names) ─────────────────────────── */ .feature-grid, .games-grid, .apps-grid, .printables-grid, .classic-grid, #store, #stores { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } #store, #stores { max-width: 100%; list-style: none; padding: 0; margin: var(--space-m) 0; } .apps-grid { padding-left: 0; margin-top: 0; } .printables-grid { max-width: 56.25rem; margin-inline: auto; } /* Categories page keeps 2-col classic cards */ .mash-categories-page .classic-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); } @media (max-width: 37.5rem) { .mash-categories-page .classic-grid { grid-template-columns: 1fr; } } /* ─── Shared card lift (aliased surfaces) ───────────────────────────────── */ :where( .feature-card, .game-card, .app-card, .printable-item, .classic-card, .storeItem ):is(a, li, div) { transition: transform var(--duration) ease, box-shadow var(--duration) ease, background var(--duration) ease; } :where(.game-card, .app-card, .storeItem):hover { transform: translateY(-4px); } :where(.feature-card):hover { transform: translateY(-2px); } :where(.storeItem):hover { transform: translateY(-2px); } /* ─── Focus ring (sitewide) ───────────────────────────────────────────────── */ :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } :where(.feature-card, .game-card, .app-card-link, .top-navigation a):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* ─── Frosted glass (single definition) ─────────────────────────────────── */ .frosted-glass { background: var(--surface-frosted); border-radius: var(--radius); } @media (prefers-reduced-transparency: reduce), (pointer: coarse) { .frosted-glass { background: rgba(255, 255, 255, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-reduced-transparency: no-preference) and (pointer: fine) { .frosted-glass { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } .content.frosted-glass { background: var(--surface-frosted-strong); } /* ─── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } :where(.feature-card, .game-card, .app-card, .storeItem):hover { transform: none; } } /* ===== nav.css ===== */ /* * nav.css — top navigation. Extracted from top_nav.inc.php. */ .top-navigation { background: rgba(255, 255, 255, 0.95); border-bottom: 2px solid var(--brand-blue); margin-bottom: var(--space-m); padding: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative; border-radius: var(--radius); } .hamburger-menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; position: absolute; top: 10px; right: 15px; font-size: 28px; color: var(--brand-blue); transition: color 0.3s ease; border-radius: 6px; } .hamburger-menu:hover { color: var(--brand-green); } .hamburger-icon, .close-icon { position: absolute; transition: opacity 0.3s ease, transform 0.3s ease; } .close-icon { opacity: 0; transform: rotate(90deg); } .hamburger-menu[aria-expanded="true"] .hamburger-icon { opacity: 0; transform: rotate(-90deg); } .hamburger-menu[aria-expanded="true"] .close-icon { opacity: 1; transform: rotate(0deg); } .top-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .top-navigation li { margin: 0; padding: 0; } .top-navigation a { display: block; padding: 15px 20px; color: var(--brand-blue); text-decoration: none; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease; border-bottom: 3px solid transparent; } .top-navigation a svg { display: inline-block; vertical-align: middle; width: 24px; height: 24px; fill: currentColor; } .top-navigation a:hover, .top-navigation a:focus { background-color: #f0f7ff; color: var(--brand-green); border-bottom-color: var(--brand-green); } .top-navigation a.active { background-color: #e0efff; color: var(--brand-green); border-bottom-color: var(--brand-green); font-weight: 600; } .top-navigation a:active { background-color: #e0efff; } @media (max-width: 64rem) { .top-navigation a { padding: 10px; } } @media (max-width: 37.5rem) { .hamburger-menu { display: flex; background-color: #ffffff; border-radius: 50%; padding: 10px; } .top-navigation { padding-bottom: 0; } .top-navigation .nav-menu { flex-direction: column; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease-out, opacity 0.3s ease-out; width: 100%; } .top-navigation .nav-menu.menu-open { max-height: 500px; opacity: 1; transition: max-height 0.3s ease-in, opacity 0.3s ease-in; border-radius: var(--radius); overflow: hidden; } .top-navigation a { width: 100%; text-align: center; border-bottom: 1px solid #e0e0e0; } .top-navigation li:first-child a { border-radius: 0; } .top-navigation li:last-child a { border-bottom: none; border-radius: 0 0 var(--radius) var(--radius); } } /* ===== footer.css ===== */ /* * footer.css — footer and dwellings. Extracted from footer_nav.inc.php. */ .footer-container { position: relative; } #footer { background-color: var(--brand-green); padding: 3em 2em 0 2em; } .footer-dwellings-container { background-image: linear-gradient(to top, var(--brand-green), var(--brand-green) 25%, transparent 25%); } #Dwellings { max-width: 62.5rem; background-size: contain; background-repeat: no-repeat; background-position: center bottom; margin: 0 auto; } #Dwellings.lazy-loaded { background-image: var(--bg-image); } .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); max-width: 62.5rem; margin: 0 auto var(--space-l); } .footer-column h4 { color: #fff; font-size: 0.75em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1em; padding-bottom: 0.5em; border-bottom: 2px solid rgba(255, 255, 255, 0.3); } .footer-column ul { list-style: none; margin: 0; padding: 0; } .footer-column li { margin: 0 0 0.6em; } .footer-column a { color: rgba(255, 255, 255, 0.76) !important; text-decoration: none; font-size: 0.95em; opacity: 0.9; transition: opacity 0.2s ease; } .footer-column a:hover { color: rgba(255, 255, 255, 1) !important; opacity: 1; text-decoration: underline; } .footer-bottom { text-align: center; padding-top: 1.5em; border-top: 1px solid rgba(255, 255, 255, 0.2); } .footer-bottom p { color: rgba(255, 255, 255, 0.7); font-size: 0.85em; margin: 0; } @media screen and (max-width: 48rem) { .footer-dwellings-container { background-image: linear-gradient(to top, var(--brand-green), var(--brand-green) 25%, transparent 25%); } .footer-nav { grid-template-columns: 1fr; gap: var(--space-m); } .footer-column { text-align: center; } .footer-column h4 { border-bottom: none; padding-bottom: 0; } } /* ===== pages.css ===== */ /* * pages.css * * Page-specific and shell overrides. Scoped by body id/class where possible. * Revert: remove this . */ /* ─── Legacy shell overrides (from common_scripts_and_styles.inc.php) ─────── */ .main { max-width: var(--content-max); } /* The legacy bundle sets `html, body { height: 100% }` and site.supplement.css gives body its own overflow, which makes body a scroll container fixed at viewport height. Body then scrolls the content while the viewport separately scrolls body's padding, so the page has two scrollbars. Scrolling belongs to the viewport: body keeps its intrinsic height and no overflow of its own. Horizontal overflow is still clipped because a non-visible overflow on the root element propagates to the viewport. */ html { overflow-y: auto !important; height: auto !important; min-height: 100% !important; } body { overflow: visible !important; height: auto !important; padding-top: 2em !important; padding-bottom: 4em !important; /* No background here: site.supplement.css puts one on body too, and Safari repaints an element's own `background-attachment: fixed` on every scroll frame instead of compositing it, which jitters on a page this long. The photo lives on ::before below instead, as a genuine `position: fixed` layer, which Safari composites properly. */ background: none !important; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: url('https://mgnt-app-assets.s3.amazonaws.com/MASHPlus/site/img/bkgr/BackgroundLandscape.scale-100.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Reproduce the content column that .main gave the hoisted site header/nav. .main is content-box, so its width is the width these children occupied. */ body > header, body > nav.top-navigation { inline-size: min(80%, var(--content-max)); margin-inline: auto; } /* Individual games inject a border-box reset, so .main's declared width includes its legacy padding instead of describing the content column. */ body:where(:has(.back-to-games)) > header, body:where(:has(.back-to-games)) > nav.top-navigation { inline-size: calc(min(80%, var(--content-max)) - 2em); } @media (max-width: 48rem) { body:where(:has(.back-to-games)) > header, body:where(:has(.back-to-games)) > nav.top-navigation { inline-size: calc(min(80%, var(--content-max)) - 20px); } } @media (max-width: 37.5rem) { body > header, body > nav.top-navigation { inline-size: auto; margin-inline: 10px; } } @media (max-width: 30rem) { body > header, body > nav.top-navigation { margin-inline: 5px; } } /* Logo sprite override (games, blog, etc.) */ #MASH.logo { max-width: 37.5rem; width: 100%; height: 3em; background: transparent url('//mgnt-app-assets.s3.amazonaws.com/MASHPlus/site/img/logos/MASHPlusLogoText.scale-100.png?v=20250828') no-repeat 0 0; background-size: contain; display: block; text-indent: -9999px; overflow: hidden; white-space: nowrap; text-align: left; margin: 0 0 0.67em 0; padding: 0; } /* Frosted panel padding variants */ .frosted-glass { padding: var(--space-m); } body#games .frosted-glass, body.editorial:not(#home) .intro.frosted-glass { padding: var(--space-m); margin-bottom: var(--space-m); } body#games .content.frosted-glass { padding: var(--space-s); } /* ─── Shared utilities ────────────────────────────────────────────────────── */ .intro { position: relative; } .gasns-m { width: 20rem; margin: 0 auto; padding: var(--space-2xs); } .gasns-r { width: auto; margin: 0 auto; padding: var(--space-2xs); } .xpromo-container { width: auto; overflow: hidden; } .responsive-ad-container { background-color: rgb(204, 208, 209); } .responsive-ad-container .inner-content ins { margin: 0 auto; } /* Google ad dimensions reserve space before the ad request to prevent CLS. */ .mashapp-responsive { width: 20rem; height: 3.125rem; min-height: 3.125rem; margin: 1.25rem auto; display: block; } @media (min-width: 31.25rem) { .mashapp-responsive { width: 29.25rem; height: 3.75rem; min-height: 3.75rem; } } @media (min-width: 50rem) { .mashapp-responsive { width: 100%; height: 5.625rem; min-height: 5.625rem; } } /* ─── Blog index (body#blog) ──────────────────────────────────────────────── */ body#blog .newsletter-signup { margin-top: var(--space-xl); min-height: 6.25rem; } /* ─── Games page (body#games) ─────────────────────────────────────────────── */ body#games .games-page { /* wrapper — no extra rules needed */ } body#games .games-grid { padding: var(--space-m) 0; } body#games .game-card { background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); overflow: hidden; text-decoration: none; color: inherit; display: block; } body#games .game-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); text-decoration: none; } body#games .game-card-image { width: 100%; height: 12.5rem; background-color: var(--brand-blue); background-image: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 100%); display: flex; align-items: center; justify-content: center; font-size: 4em; color: white; position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; } body#games .game-card-image-tic-tac-toe { background-image: url('/games/tic-tac-toe/TicTacToe.jpg'); } body#games .game-card-image-four-in-a-row { background-image: url('/games/four-in-a-row/FourInARow.jpg'); } body#games .game-card-image-dots-and-boxes { background-image: url('/games/dots-and-boxes/DotsAndBoxes-CardHeader.jpg'); } body#games .game-card-image-cootie-catcher { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } body#games .game-card-image-coloring { background-image: url('/games/coloring/thumbnails/shack.jpg'); } body#games .game-card-image-snowman { background-image: url('/games/snowman/SnowmanCardHeader.jpg'); } body#games .game-card-image-mash { background-image: url('/games/mash/MASH-Card-Header.jpg'); } body#games .game-card-image::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); opacity: 0; transition: opacity 0.3s ease; } body#games .game-card:hover .game-card-image::before { opacity: 1; } body#games .game-card-content { padding: var(--space-m); } body#games .game-card h3 { font-size: 1.5em; color: var(--brand-blue); margin-bottom: var(--space-2xs); border-bottom: 2px solid var(--brand-blue); padding-bottom: var(--space-2xs); } body#games .game-card p { color: #666; line-height: 1.6; margin: 0; text-align: left; } @media (max-width: 48rem) { body#games .game-card-image { height: 9.375rem; font-size: 3em; } } /* ─── Individual games ───────────────────────────────────────────────────── */ body:has(.back-to-games) { background-color: transparent; } body:has(.back-to-games) .xpromo-container { margin-top: 0.625rem; padding: 0.5rem !important; } .back-to-games { margin: 1.25rem auto; max-width: 75rem; padding: 0 1.25rem; } .back-to-games a { display: inline-block; padding: 0.625rem 1.25rem; background: var(--brand-blue); color: white; text-decoration: none; border-radius: 0.3125rem; font-size: 1em; transition: background 0.3s ease; } .back-to-games a:hover { background: #1d6fd8; text-decoration: none; } /* ─── Apps page ───────────────────────────────────────────────────────────── */ .apps-grid { padding-left: 0 !important; margin-top: 0 !important; } .app-card { background: rgba(255, 255, 255, 0.95); padding: var(--space-m); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; text-align: center; } .app-card-link { text-decoration: none; color: inherit; display: block; width: 100%; height: 100%; } .app-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .app-icon { width: 7.5rem; height: 7.5rem; object-fit: cover; margin-bottom: var(--space-s); } .app-name { font-size: 1.5em; color: #222 !important; margin: 0 0 12px 0; font-weight: 600; line-height: 1.2; } .app-description { color: #333; font-size: 0.95em; line-height: 1.5; margin: 0 0 var(--space-m) 0; flex-grow: 1; text-align: left !important; } .app-download-btn { display: inline-block; margin-top: var(--space-2xs); pointer-events: none; } .app-download-btn img { height: 2.5rem; width: auto; display: block; } body.editorial .intro h1 { margin-bottom: var(--space-m); } @media (max-width: 48rem) { .app-icon { width: 6.25rem; height: 6.25rem; } .app-name { font-size: 1.3em; } } @media (max-width: 30rem) { .app-card { padding: var(--space-s); } .app-icon { width: 5.625rem; height: 5.625rem; } .app-name { font-size: 1.2em; } .app-description { font-size: 0.9em; } } /* ─── Store download grid ─────────────────────────────────────────────────── */ #store .storeItem { padding-bottom: 1em; } .storeItem { background: rgba(255, 255, 255, 0.95); padding: var(--space-m); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: space-between; } .storeItem:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .storeItem.primary { background: rgba(255, 255, 255, 0.9); border: 2px solid #fff; } .storeItem.secondary { background: linear-gradient(135deg, rgba(45, 132, 248, 0.1), rgba(29, 135, 24, 0.1)); border: 2px solid rgba(45, 132, 248, 0.3); } .storeItem p { margin: 0 0 var(--space-s) 0; color: #333; font-size: 0.95em; line-height: 1.5; text-align: left; } .storeItem a { text-align: left; display: inline-block; } .storeBtn.Mac, .storeBtn#Mac { background-size: 75%; background-position: 50%; } @media (max-width: 48rem) { .storeItem { padding: var(--space-s); } } @media (max-width: 30rem) { .storeItem { padding: var(--space-s); } .storeItem p { font-size: 0.9em; } } /* ─── Printable page ──────────────────────────────────────────────────────── */ .printable-preview-img { width: 100%; height: auto; margin: 0 auto; display: block; } .download-button { display: inline-block; padding: 1.125rem 2.25rem; background: linear-gradient(135deg, #2ecc71 0%, #27ae60 50%, #229954 100%); color: #fff; text-decoration: none; border-radius: 12px; font-size: 1.125rem; font-weight: bold; box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; border: 2px solid rgba(255, 255, 255, 0.2); margin: var(--space-m) 0; } .download-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } .download-button:hover::before { left: 100%; } .download-button:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(46, 204, 113, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .download-button-content { display: flex; align-items: center; justify-content: center; gap: var(--space-s); position: relative; z-index: 1; } .pdf-icon { width: 1.75rem; height: 1.75rem; fill: #fff; } .printable-item { text-align: center; padding: var(--space-m); background: rgba(255, 255, 255, 0.5); } .printable-item:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .printable-item h2 { margin: 0 0 var(--space-s) 0; font-size: 1.25rem; color: #333; } .printable-item .printable-preview-img { border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .printable-item a:hover .printable-preview-img { transform: scale(1.02); } .printable-item .download-button { width: 100%; max-width: 17.5rem; padding: 0.875rem 1.5rem; font-size: 1rem; margin: var(--space-s) auto 0; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .download-button:hover .pdf-icon { animation: bounce 0.6s ease; } /* ─── MASH categories page ────────────────────────────────────────────────── */ .mash-categories-page .category-section { margin-bottom: 2.5rem; } .mash-categories-page .category-section h2 { border-bottom: 2px solid var(--brand-green); padding-bottom: 0.4em; margin-bottom: 1em; } .mash-categories-page .classic-card { background: linear-gradient(180deg, rgba(235, 254, 241, 0.65) 0%, rgba(211, 250, 224, 0.85) 100%); border: 2px solid #fff; padding: 1.2rem 1.4rem; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.12); } .mash-categories-page .classic-card h3 { font-size: 1.05em; margin: 0 0 0.4em; color: #1d5e1a; } .mash-categories-page .classic-card p { margin: 0; font-size: 0.95em; color: #334; } .mash-categories-page .cta-block, .hams-game-page .cta-block, .sham-game-page .cta-block { background: linear-gradient(180deg, rgba(174, 245, 255, 0.45) 0%, rgba(174, 245, 255, 0.75) 100%); border: 2px solid rgba(255, 255, 255, 0.95); border-radius: var(--radius); padding: 1.8rem 2rem; text-align: center; margin: 2.5rem 0; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.12); } .mash-categories-page .cta-block h2, .hams-game-page .cta-block h2, .sham-game-page .cta-block h2 { margin-top: 0; border: none; } .mash-categories-page .cta-buttons, .hams-game-page .cta-buttons, .sham-game-page .cta-buttons { display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; margin-top: var(--space-s); } .mash-categories-page .cta-btn, .hams-game-page .cta-btn, .sham-game-page .cta-btn { display: inline-block; padding: 0.75rem 1.6rem; border-radius: 2.5rem; font-weight: 600; font-size: 1em; text-decoration: none; } .mash-categories-page .cta-btn-primary, .hams-game-page .cta-btn-primary, .sham-game-page .cta-btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff !important; } .mash-categories-page .cta-btn-secondary, .hams-game-page .cta-btn-secondary, .sham-game-page .cta-btn-secondary { background: #fff; color: var(--brand-blue); border: 2px solid var(--brand-blue); } /* ─── How to play page ────────────────────────────────────────────────────── */ html.how-to-play-mash-page { overflow-x: clip; } @supports not (overflow: clip) { html.how-to-play-mash-page { overflow-x: visible; } } body.how-to-play-mash-page .main { overflow: visible; } .section-leader-img { width: 100%; height: auto; display: block; } body.how-to-play-mash-page .frosted-glass { padding: var(--space-m); } body.editorial .hero-header-img { border-radius: var(--radius-lg); box-shadow: 0 18px 48px -22px rgba(20, 20, 30, 0.38); margin-bottom: var(--space-l); aspect-ratio: 25 / 16; } body.editorial div.copy-holder > h1 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); margin: 0 0 0.6rem 0; } body.editorial div.copy-holder > h1 + h2 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--ink-soft); line-height: 1.3; margin: 0 0 1.5rem 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); text-wrap: balance; } body.editorial div.copy-holder > h1 + h2::before { content: none; } body.editorial div.copy-holder p.content-meta small, body.editorial div.copy-holder p.content-meta em { font-family: 'Inter', sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-style: normal; } body.editorial div.content ol > li { padding-left: 2.8rem; margin-top: var(--space-l); padding-bottom: 0.4em; } body.editorial div.content ol > li::before { top: 0.05em; } body.editorial div.content ol > li > p { margin-bottom: 0.8em; } body.editorial div.content ol > li > p:first-of-type { font-weight: 600; font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.15rem); margin-bottom: 0.6em; color: var(--ink); } body.editorial div.content ol > li > ul { margin-top: 0.8em; } body.editorial div.content ol > li > ul li p { margin-bottom: 0.2em; } body.editorial .section-leader-img:not(.hero-header-img) { border-radius: var(--radius); box-shadow: 0 12px 32px -18px rgba(20, 20, 30, 0.3); margin: 0.8rem 0 1.4rem; } body.editorial .how-to-play-mash-what-you-need, body.editorial .promoted.printable-mash-game { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 1.5rem 0 2rem; } body.editorial .how-to-play-mash-what-you-need p, body.editorial .promoted.printable-mash-game p { border-left: none; background: none; padding-left: 0; border-radius: 0; margin-bottom: 0.6em; } body.editorial .how-to-play-mash-what-you-need-title, body.editorial .promoted.printable-mash-game h3 { font-family: 'Fraunces', Georgia, serif; font-style: normal; color: var(--ink); font-size: 1.1rem; font-weight: 500; margin: 0 0 0.5rem; } body.editorial .promoted.printable-mash-game h3::before { content: none; } body.editorial #gasns-ph-01, body.how-to-play-mash-page .xpromo-container { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--rule); } body.how-to-play-mash-page .newsletter-signup { margin-top: 2.5rem; padding-top: var(--space-l); border-top: 1px solid var(--rule); } body.editorial .how-to-play-shell { display: grid; grid-template-columns: minmax(11.5rem, 15rem) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 2rem); align-items: start; max-width: min(90rem, 100%); margin-inline: auto; box-sizing: border-box; } body.editorial .how-to-play-main { min-width: 0; } body.editorial .page-toc-aside { position: sticky; top: 5rem; align-self: start; z-index: 2; margin-top: var(--space-l); max-height: calc(100vh - 6rem); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 52rem) { body.editorial .page-toc-aside { position: static; top: auto; z-index: auto; margin-top: 0; max-height: none; overflow: visible; align-self: stretch; } body.editorial .how-to-play-shell { grid-template-columns: 1fr; } } body.editorial nav.page-toc { margin: 0 0 2.25rem; padding: 1.25rem 1.35rem; border: 1px solid var(--rule); border-radius: var(--radius); background: color-mix(in oklab, var(--accent) 6%, transparent); } @media (min-width: 52.01rem) { body.editorial .page-toc-aside nav.page-toc { margin-bottom: 0; } } body.editorial .page-toc__title { margin: 0 0 0.85rem; font-family: 'Inter', sans-serif; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } body.editorial ul.page-toc__list, body.editorial ul.page-toc__sublist { margin: 0; padding-left: 0; list-style: none; } body.editorial ul.page-toc__list > li { margin: 0.45rem 0 0; } body.editorial ul.page-toc__list > li:first-child { margin-top: 0; } body.editorial ul.page-toc__sublist { margin: 0.35rem 0 0 0.85rem; padding-left: 0.85rem; border-left: 2px solid color-mix(in oklab, var(--accent) 45%, transparent); } body.editorial nav.page-toc a { font-family: 'Inter', sans-serif; font-size: var(--step-0); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (min-width: 52.01rem) { body.editorial .page-toc-aside nav.page-toc a { font-size: var(--step--1); line-height: 1.35; } } /* Play MASH online (body#PlayMASH) is styled in play.css. */ /* ===== vanguard.css ===== */ /* * vanguard.css * * Sitewide surface-elevation layer. This file deliberately loads after the * foundation styles so removing its single restores the previous UI. */ /* Font metric fallbacks keep the Google Fonts swap from moving the page. */ @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 95%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; } :root, body.editorial { --accent: #0d5ec8; --accent-bright: #2d84f8; --accent-wash: color-mix(in oklab, var(--accent) 5%, #fff); --surface-tray: color-mix(in oklab, var(--accent) 9%, #fff); --hairline: color-mix(in oklab, var(--accent) 14%, transparent); --shadow-tint: rgb(12 34 78 / 0.26); --focus-ring: var(--ink); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 180ms; --dur-base: 320ms; } /* Inline icons share one optical box and inherit color from their context. */ .mash-icon { display: inline-block; inline-size: 1em; block-size: 1em; flex: none; vertical-align: -0.125em; } /* The legacy bundle used Font Awesome private-use glyphs for article metadata. Masks keep those generated icons after the icon-font dependency is removed. */ .content-meta .date::before, .content-meta .author::before { content: ""; display: inline-block; inline-size: 1em; block-size: 1em; margin-inline-end: var(--space-3xs); vertical-align: -0.125em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .content-meta .date::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208 34h-26V24a6 6 0 0 0-12 0v10H86V24a6 6 0 0 0-12 0v10H48a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14M48 46h26v10a6 6 0 0 0 12 0V46h84v10a6 6 0 0 0 12 0V46h26a2 2 0 0 1 2 2v34H46V48a2 2 0 0 1 2-2m160 164H48a2 2 0 0 1-2-2V94h164v114a2 2 0 0 1-2 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208 34h-26V24a6 6 0 0 0-12 0v10H86V24a6 6 0 0 0-12 0v10H48a14 14 0 0 0-14 14v160a14 14 0 0 0 14 14h160a14 14 0 0 0 14-14V48a14 14 0 0 0-14-14M48 46h26v10a6 6 0 0 0 12 0V46h84v10a6 6 0 0 0 12 0V46h26a2 2 0 0 1 2 2v34H46V48a2 2 0 0 1 2-2m160 164H48a2 2 0 0 1-2-2V94h164v114a2 2 0 0 1-2 2'/%3E%3C/svg%3E"); } .content-meta .author::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m225.9 74.78-44.69-44.69a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h44.69a13.94 13.94 0 0 0 9.9-4.1L225.9 94.58a14 14 0 0 0 0-19.8M94.1 209.41a2 2 0 0 1-1.41.59H48a2 2 0 0 1-2-2v-44.69a2 2 0 0 1 .59-1.41L136 72.48 183.51 120ZM217.41 86.1 192 111.51 144.49 64l25.41-25.42a2 2 0 0 1 2.83 0l44.68 44.69a2 2 0 0 1 0 2.83'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='m225.9 74.78-44.69-44.69a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h44.69a13.94 13.94 0 0 0 9.9-4.1L225.9 94.58a14 14 0 0 0 0-19.8M94.1 209.41a2 2 0 0 1-1.41.59H48a2 2 0 0 1-2-2v-44.69a2 2 0 0 1 .59-1.41L136 72.48 183.51 120ZM217.41 86.1 192 111.51 144.49 64l25.41-25.42a2 2 0 0 1 2.83 0l44.68 44.69a2 2 0 0 1 0 2.83'/%3E%3C/svg%3E"); } /* editorial.css loads after this layer and otherwise restores its dot marker. */ html body.editorial article.content .content-meta .author::before { content: ""; margin-inline-end: var(--space-3xs); } /* Ensure the metric-adjusted fallback faces participate in the existing pair. */ html body.editorial :is(article.content, div.intro, div.content) { font-family: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } html body.editorial :is( article.content header h1, .content-body h2, div.content h2, .content-body h3, div.content h3, div.copy-holder > h1, div.copy-holder > h1 + h2 ) { font-family: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; } /* One radius for every page-level surface, whether the article carries it itself or wraps a frosted panel. Nested panels keep the smaller --radius. */ article.content:not(.frosted-glass) { border-radius: var(--radius-lg); background: color-mix(in oklab, var(--accent) 3%, #fff); box-shadow: 0 0 0 1px var(--hairline), 0 var(--space-m) var(--space-xl) calc(-1 * var(--space-s)) var(--shadow-tint); } /* The blog article shell sets its own inset. Elsewhere the legacy .content padding still applies. */ body#blog article.content:not(.frosted-glass) { padding: var(--space-s); } .frosted-glass { border-radius: var(--radius); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.62); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Pages where content and frosted-glass are the same node use one surface. */ article.content.frosted-glass, body#games .content.frosted-glass { border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--hairline), inset 0 1px 0 rgb(255 255 255 / 0.62), 0 var(--space-m) var(--space-xl) calc(-1 * var(--space-s)) var(--shadow-tint); } /* Navigation uses one contrast-safe action color. */ .top-navigation { border-bottom-color: var(--accent); box-shadow: 0 0 0 1px var(--hairline), 0 var(--space-2xs) var(--space-m) calc(-1 * var(--space-s)) var(--shadow-tint); } .top-navigation a, .hamburger-menu { color: var(--accent); transition: none; } .top-navigation a:hover, .top-navigation a:focus, .top-navigation a.active, .hamburger-menu:hover { color: var(--accent); background-color: var(--accent-wash); border-bottom-color: var(--accent); } .top-navigation a:active { background-color: color-mix(in oklab, var(--accent) 10%, #fff); } /* Sitewide surface holdouts get the same navy-tinted material language. */ :is(.game-card, .app-card, .storeItem, .printable-item, .classic-card), body#games .game-card { border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--hairline), 0 var(--space-s) var(--space-l) calc(-1 * var(--space-s)) var(--shadow-tint); } /* App cards stay planted while their icon moves. Game and store cards lift as one object, with a deeper shadow state that follows the raised surface. */ .app-card, .app-card:hover { transform: none; } :is(.game-card, .storeItem) { transition: transform var(--dur-base) var(--ease-spring); } :is(.game-card, .storeItem):hover, body#games .game-card:hover { transform: translateY(calc(-1 * var(--space-3xs))); box-shadow: 0 0 0 1px var(--hairline), 0 var(--space-m) var(--space-xl) calc(-1 * var(--space-s)) var(--shadow-tint); } .storeItem.primary, .storeItem.secondary { border: 0; background: var(--accent-wash); } /* Only the artless card gets a gradient; the rest keep their photography. */ body#games .game-card-image { background-color: var(--accent); } body#games .game-card-image-cootie-catcher { background-image: linear-gradient(135deg, var(--accent), var(--accent-bright)); } body#games .game-card h3 { color: var(--accent); border-bottom-color: var(--accent); } /* The apps grid is a