/* Mobile portrait only. Desktop rules in mesh.css / anim.css stay untouched. Activated when has class "mobile" (see mesh.js). */ .mobile, .mobile body { overflow: hidden; width: 100%; height: 100%; } .mobile #wrapper { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 100%; overflow: hidden; } .mobile #scroller { position: absolute; z-index: 1; width: 100%; height: auto; } .mobile section { width: 100%; overflow: hidden; box-sizing: border-box; } .mobile h1, .mobile h2, .mobile p { left: 40px; width: calc(100vw - 64px); margin-left: 0; max-width: none; } .mobile h1 { font-size: 34px; top: 52px; line-height: 1.1; } .mobile h1.static { left: 40px; margin-left: 0; width: auto; top: 52px; font-size: 34px; } .mobile p { font-size: 16px; line-height: 1.35; left: 40px; top: 108px; width: calc(100vw - 64px); } .mobile .element { left: 40px; top: 98px; margin-left: 0; width: calc(100vw - 64px); } .mobile section > .element:has(> h2) ~ .element:has(> h2) { top: 132px; } .mobile .element:has(> p) { top: 176px; } .mobile section > .element:has(> h2) ~ .element:has(> h2) ~ .element:has(> p) { top: 200px; } .mobile .element h2 { left: 0; font-size: 26px; width: 100%; line-height: 1.15; } .mobile .element p { position: relative; top: 0; left: 0; width: 100%; font-size: 16px; line-height: 1.4; margin-bottom: 8px; } .mobile .button { width: 44px; height: 44px; margin-left: -22px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); background-size: 44px 44px; border-radius: 4px; -webkit-tap-highlight-color: transparent; } .mobile #menu { top: max(8px, env(safe-area-inset-top, 0px)); left: 4px; } .mobile #menu div { width: 10px; height: 22px; margin-bottom: 6px; -webkit-tap-highlight-color: transparent; } .mobile #menu #menuHighlight { width: 10px; height: 22px; } /* doyou0 — Do You ? */ .mobile #doyou0 > h1 { left: 40px; margin-left: 0; width: auto; top: 52px; padding-left: 0; box-sizing: content-box; } .mobile #doyou0 > p { top: 108px; } .mobile #doyou0 span.element { width: auto; margin: 0; } .mobile #doyou0 span.element:nth-child(1) { font-size: 36px; left: 14%; top: 70%; } .mobile #doyou0 span.element:nth-child(2) { font-size: 96px; left: 68%; top: 20%; } .mobile #doyou0 span.element:nth-child(3) { font-size: 150px; left: 52%; top: 56%; } /* doyou1 — camera + polaroids */ .mobile #doyou1 .photo { left: 50%; top: 40%; width: 168px; height: 168px; margin: 0; margin-left: -84px; background-size: contain; background-repeat: no-repeat; } .mobile #doyou1 .photoflash { left: 0; top: 0; width: 100%; height: 100%; margin: 0; background: -webkit-radial-gradient(50% 46%, circle farthest-side, #FFFFFF 30px, rgba(255, 255, 255, 0.35) 70px, rgba(255, 255, 255, 0) 150px); background: radial-gradient(circle at 50% 46%, #FFFFFF 30px, rgba(255, 255, 255, 0.35) 70px, rgba(255, 255, 255, 0) 150px); } .mobile #doyou1 div .element { width: 132px; height: 99px; margin: 0; } .mobile #doyou1 div .element:nth-child(1) { left: calc(100vw - 152px); right: auto; top: 34%; font-size: inherit; } .mobile #doyou1 div .element:nth-child(2) { left: 18px; top: 50%; font-size: inherit; } .mobile #doyou1 div .element:nth-child(3) { left: 36px; top: 64%; font-size: inherit; } .mobile #doyou1 div .element div { border-width: 6px; border-radius: 6px; margin-left: -3px; margin-top: -3px; } /* doyou2 — TV + dog run */ .mobile #doyou2 .horiz, .mobile #doyou2 .tv { left: 50%; top: 46%; width: 218px; margin: 0; margin-left: -121px; margin-top: 0; } .mobile #doyou2 .horiz { height: 122px; margin: 0; overflow: hidden; } .mobile #doyou2 .dog-scene { width: 218px; height: 122px; background-size: 872px 122px; -webkit-animation-name: dog-run-m; animation-name: dog-run-m; } .mobile #doyou2 .tv { width: 238px; margin-left: -119px; margin-top: -10px; } .mobile #doyou2 .tv-bezel { width: 218px; height: 122px; border-width: 10px; border-radius: 8px; } .mobile #doyou2 .tv-neck { width: 28px; height: 13px; } .mobile #doyou2 .tv-base { width: 104px; height: 8px; } @-webkit-keyframes dog-run-m { to { background-position: -872px 0; } } @keyframes dog-run-m { to { background-position: -872px 0; } } /* doyou3 — speaker + notes */ .mobile #doyou3 .speakerMount { left: 50%; top: 44%; width: 200px; height: 200px; margin: 0; margin-left: -100px; background-size: 200px 200px; background-repeat: no-repeat; } .mobile #doyou3 .speaker { background-size: 200px 200px; background-repeat: no-repeat; } .mobile #doyou3 .note1, .mobile #doyou3 .note2 { left: 50%; top: 44%; margin-top: 70px; } .mobile #doyou3 .note1 { width: 38px; height: 48px; margin-left: -19px; background-size: contain; background-repeat: no-repeat; } .mobile #doyou3 .note2 { width: 48px; height: 47px; margin-left: -24px; background-size: contain; background-repeat: no-repeat; } @-webkit-keyframes fly-northeast-m { 0% { -webkit-transform: translate(24px, -12px); opacity: 0; } 20% { opacity: 1; } 100% { -webkit-transform: translate(150px, -70px); opacity: 0; } } @-webkit-keyframes fly-east-m { 0% { -webkit-transform: translate(24px, 0); opacity: 0; } 20% { opacity: 1; } 100% { -webkit-transform: translate(150px, -16px); opacity: 0; } } @-webkit-keyframes fly-southeast-m { 0% { -webkit-transform: translate(24px, 12px); opacity: 0; } 20% { opacity: 1; } 100% { -webkit-transform: translate(150px, 70px); opacity: 0; } } @-webkit-keyframes fly-northwest-m { 0% { -webkit-transform: translate(-24px, -12px); opacity: 0; } 20% { opacity: 1; } 100% { -webkit-transform: translate(-150px, -80px); opacity: 0; } } @-webkit-keyframes fly-west-m { 0% { -webkit-transform: translate(-24px, 0); opacity: 0; } 20% { opacity: 1; } 100% { -webkit-transform: translate(-150px, 16px); opacity: 0; } } @-webkit-keyframes fly-southwest-m { 0% { -webkit-transform: translate(-24px, 12px); opacity: 0; } 20% { opacity: 1; } 100% { -webkit-transform: translate(-150px, 70px); opacity: 0; } } @keyframes fly-northeast-m { 0% { transform: translate(24px, -12px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(150px, -70px); opacity: 0; } } @keyframes fly-east-m { 0% { transform: translate(24px, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(150px, -16px); opacity: 0; } } @keyframes fly-southeast-m { 0% { transform: translate(24px, 12px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(150px, 70px); opacity: 0; } } @keyframes fly-northwest-m { 0% { transform: translate(-24px, -12px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-150px, -80px); opacity: 0; } } @keyframes fly-west-m { 0% { transform: translate(-24px, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-150px, 16px); opacity: 0; } } @keyframes fly-southwest-m { 0% { transform: translate(-24px, 12px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-150px, 70px); opacity: 0; } } .mobile .fly-northeast { -webkit-animation-name: fly-northeast-m; animation-name: fly-northeast-m; } .mobile .fly-east { -webkit-animation-name: fly-east-m; animation-name: fly-east-m; } .mobile .fly-southeast { -webkit-animation-name: fly-southeast-m; animation-name: fly-southeast-m; } .mobile .fly-northwest { -webkit-animation-name: fly-northwest-m; animation-name: fly-northwest-m; } .mobile .fly-west { -webkit-animation-name: fly-west-m; animation-name: fly-west-m; } .mobile .fly-southwest { -webkit-animation-name: fly-southwest-m; animation-name: fly-southwest-m; } /* doyou9 — lock / server */ .mobile #doyou9 .secure { left: 50%; top: 44%; width: 160px; height: 160px; margin: 0; margin-left: -80px; background-size: contain; background-repeat: no-repeat; background-image: url('../images/secure-server-128.png'); } /* Short phones: keep artifacts from colliding with copy */ @media (max-height: 700px) { .mobile #doyou1 .photo { top: 48%; width: 140px; height: 140px; margin-left: -70px; } .mobile #doyou1 div .element:nth-child(1) { top: 36%; } .mobile #doyou1 div .element:nth-child(2) { top: 54%; } .mobile #doyou1 div .element:nth-child(3) { top: 68%; } .mobile #doyou2 .horiz, .mobile #doyou2 .tv { top: 50%; } .mobile #doyou3 .speakerMount, .mobile #doyou3 .note1, .mobile #doyou3 .note2 { top: 48%; } .mobile #doyou9 .secure { top: 50%; } } @media (max-width: 360px) { .mobile h1, .mobile h1.static, .mobile #doyou0 > h1 { font-size: 30px; } .mobile .element h2 { font-size: 24px; } .mobile #doyou2 .horiz { width: 196px; height: 110px; margin: 0; } .mobile #doyou2 .dog-scene { width: 196px; height: 110px; background-size: 784px 110px; -webkit-animation-name: dog-run-m-sm; animation-name: dog-run-m-sm; } .mobile #doyou2 .tv { width: 214px; margin-left: -107px; } .mobile #doyou2 .tv-bezel { width: 196px; height: 110px; border-width: 9px; } .mobile #doyou3 .speakerMount { width: 176px; height: 176px; margin-left: -88px; background-size: 176px 176px; } .mobile #doyou3 .speaker { background-size: 176px 176px; } } @-webkit-keyframes dog-run-m-sm { to { background-position: -784px 0; } } @keyframes dog-run-m-sm { to { background-position: -784px 0; } }