/* =================================================================================== Global Stylesheet for johnmerlino.com © 2018 John Merlino Colors Gold - #FFDD9C BG - #333 Intro Primary text - #fff Secondary text - #999 =================================================================================== */ /* Setup * reset.css is applied to all pages -----------------------------------------------------------------------------------*/ ul.no-style, ul.no-style li { list-style: none; padding: 0; margin: 0; } .group:after { content: ""; display: table; clear: both; } /* Element Styles -----------------------------------------------------------------------------------*/ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #fff; font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } h1 { font-size: 32px; line-height: 1.1; color: #333; font-weight: 600; margin: 1.2em 0 0.8em; } h2 { font-size: 28px; line-height: 1.1; color: #333; font-weight: 600; margin: 0.5em 0; } h3 { font-size: 18px; line-height: 1.1; color: #333; font-weight: 600; margin: 0.5em 0; } h4 { } h5 { } h6 { font-size: 14px; line-height: 1.1; color: #333; font-weight: 400; margin: 0; } p { font-size: 18px; line-height: 1.5; color: #646464; margin: 0.5em 0; } .dark_mode h1, .dark_mode h2, .dark_mode h3, .dark_mode h6 { color: #fff; } .dark_mode p { color: rgba(255,255,255,0.8); } @media only screen and (max-width : 413px) { h1 { font-size: 28px; } h2 { font-size: 24px; } p { font-size: 16px; } } @media only screen and (min-width : 769px) { h1 { font-size: 42px; } h2 { font-size: 30px; } h3 { font-size: 20px; } h6 { font-size: 14px; } p { font-size: 20px; } } a { text-decoration: none; } a:hover { text-decoration: underline; } /* Intro & Menu */ body.intro { background: #3D3D3D; } .intro h1, .intro h2, .intro h3, .intro h4, .intro h5 { color: #fff; } .intro p { } .intro a { color: #FFDD9C; } .intro a:hover { color: #FDC965; } .intro header { background: #3C3C3C; } .intro header .jm_logo { } .intro header #svg-logo-fill { fill: #FFDD9C; } .landing_intro { background-color: #333; } .landing_intro h3 { color: #999; } .landing_intro a:hover, .selected_products a:hover { text-decoration: none; } .selected_products h4 { font-weight: 600; } .selected_products, .selected_products .product { background-color: #333; } .selected_products .product:nth-child(odd) { background-color: #3D3D3D; } .selected_products .name { font-weight: 700; color: #FFDD9C; } .selected_products .desc { font-weight: 600; color: rgba(255,255,255,0.5); } .selected_products .date { color: rgba(255,255,255,0.6); font-size: 16px; font-weight: 300; text-align: right; } .selected_products .product, .selected_products .product_name, .selected_products .name, .selected_products .desc { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .product a { color: #333; } .product a:hover { color: #646464; } .dark_mode.product a { color: #fff; } .dark_mode.product a:hover { color: rgba(255,255,255,0.7); } .product_keypoints h2 { color: #fff; } .product_keypoints li { color: #fff; } .intro footer { background-color: #333; } .intro footer .group { background-color: #3d3d3d; } .intro footer .contact_links a { color: #FFDD9C; } .intro footer .copyright p { color: #888; } .product footer { } .product footer .group { background-color: #f8f8f8; } .product footer .contact_links a { color: #a6a6a6; } .product footer .copyright p { color: #aaa; } /* Workable */ body#workable { background: #EEF1F1; } body#workable header #svg-logo-fill { fill: #fff; } /* Katch */ body#katch .product_keypoints { background: #f4f4f4; } body#katch .product_keypoints h2, body#katch .product_keypoints li { color: #646464; } /* Perch */ body#perch { background: #ECEDE7; } /* Seen */ body#seen .product_keypoints { background: #f4f4f4; } body#seen .product_keypoints h2, body#seen .product_keypoints li { color: #646464; } /* Motorman */ body#motorman { background: #333; } body#motorman footer .group { background: #3d3d3d; } /* Page Layout - Optimized for large mobile screens -----------------------------------------------------------------------------------*/ /* Default Header */ header { position: relative; height: 46px; padding: 0; } header .jm_logo { width: 20px; } header .ico_back { display: block; width: 24px; height: 14px; background: url('../images/ui/ico_back_arrow.png') no-repeat left top; background-size: 24px 14px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } header .ico_back:hover { opacity: 0.6 } header.landing .jm_logo { margin: 0 auto; padding-top: 14px; } header.sub_page .jm_logo { position: absolute; top: 14px; right: 20px; display: block; } header.sub_page .ico_back { position: absolute; top: 16px; left: 20px; z-index: 10; } header .scroll { display: none; } @media only screen and (min-width : 769px) { header { position: fixed; width: 100%; height: 70px; z-index: 100; } header.landing { position: absolute; } header.landing .jm_logo { padding-top: 27px; } header.sub_page { overflow: hidden; } header.sub_page .default { position: absolute; top: 0; left: 0; right: 0; height: 70px; z-index: 8; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } header.sub_page .scroll { position: absolute; top: 70px; left: 0; right: 0; height: 70px; z-index: 9; display: block; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } header.sub_page.scrolling .default { top: -70px; } header.sub_page.scrolling .scroll { top: 0px; } header.sub_page .ico_back { top: 28px; left: 50px; } header.sub_page .jm_logo { position: relative; top: 27px; right: 0; margin: 0 auto; } header.sub_page .page_title { display: block; width: 100%; text-align: center; line-height: 68px; color: #fff; font-size: 20px; font-weight: 600; } } /* Landing */ .landing_intro { padding: 100px 20px 100px; } .landing_intro h3 { width: 100%; font-size: 24px; line-height: 1.2; margin: 0 0 6px 0; } .landing_intro h1 { width: 100%; font-size: 33px; line-height: 1.2; margin: 0; } .selected_products { } .selected_products h4 { margin: 0; padding: 0 20px 20px; } .selected_products .product { display: block; padding: 0 20px; } .selected_products .product_name { padding: 20px 0 24px; } .selected_products .ico_arrow { display: none; } .selected_products .name { display: block; font-size: 27px; line-height: 22px; margin-bottom: 5px; } .selected_products .desc { display: block; font-size: 16px; } .selected_products .detail { display: none; } /* Footer */ footer { padding-top: 130px; } footer .group { padding: 30px 20px; } footer .contact_links { } footer .contact_links a { font-weight: 600; margin-right: 20px; } footer .copyright { margin: 20px 0 0; } footer .copyright p { font-size: 14px; } @media only screen and (min-width : 769px) { .landing_intro { padding: 160px 50px 120px; } .landing_intro h3 { width: 60%; font-size: 26px; } .landing_intro h1 { width: 60%; font-size: 44px; } #nav_product_workable:hover { background-color: #AB6BC7; box-shadow: 0 0 20px 0 rgba(0,0,0,0.30); z-index: 10; position: relative; } #nav_product_perch:hover { background-color: #DCA7AD; box-shadow: 0 0 20px 0 rgba(0,0,0,0.30); z-index: 10; position: relative; } #nav_product_wiwo:hover { background-color: #202B4F; box-shadow: 0 0 20px 0 rgba(0,0,0,0.30); z-index: 10; position: relative; } #nav_product_katch:hover { background-color: #FA6349; box-shadow: 0 0 20px 0 rgba(0,0,0,0.30); z-index: 10; position: relative; } #nav_product_seen:hover { background-color: #020202; box-shadow: 0 0 20px 0 rgba(0,0,0,0.30); z-index: 10; position: relative; } #nav_product_mitro:hover { background-color: #020202; box-shadow: 0 0 20px 0 rgba(0,0,0,0.30); z-index: 10; position: relative; } #nav_product_motorman:hover { background-color: #D9A61D; box-shadow: 0 0 20px 0 rgba(0,0,0,0.30); z-index: 10; position: relative; } .selected_products h4 { padding: 0 50px 20px; } .selected_products .product { height: 94px; padding: 0 50px; } .selected_products .product_name { clear: left; padding: 30px 0 34px; position: relative; overflow: hidden; } .selected_products .ico_arrow { display: block; opacity: 0; width: 24px; height: 14px; position: absolute; top: 39px; left: -20px; background: url('../images/ui/ico_forward_arrow.png') no-repeat left top; background-size: 24px 14px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .selected_products .name { font-size: 26px; display: inline; } .selected_products .desc { font-size: 26px; display: inline; } .selected_products .detail { position: relative; display: block; width: 100px; height: 100%; float: right; } .selected_products .date { opacity: 1; padding-top: 38px; } .selected_products .graphic { opacity: 0; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity 0.1s 0s ease-out; -moz-transition: opacity 0.1s 0s ease-out; -o-transition: opacity 0.1s 0s ease-out; transition: opacity 0.1s 0s ease-out; } .selected_products .product:hover .product_name { padding-left: 36px; } .selected_products .product:hover .ico_arrow { left: 0; opacity: 1; } .selected_products .product:hover .name { color: #fff; } .selected_products .product:hover .desc { color: rgba(255,255,255,0.6); } .selected_products .product:hover .date { opacity: 0; } .selected_products .product:hover .graphic { opacity: 1; -webkit-transition: opacity 0.1s 0s ease-out; -webkit-transition: opacity 0.2s 0.1s ease-out; -moz-transition: opacity 0.2s 0.1s ease-out; -o-transition: opacity 0.2s 0.1s ease-out; transition: opacity 0.2s 0.1s ease-out; } #nav_product_workable .graphic:before { content: ''; display: block; width: 60px; height: 60px; margin: 17px auto; background: url('../images/products/workable/workable_app_icon.png') no-repeat center center; background-size: 60px 60px; } #nav_product_perch .graphic:before { content: ''; display: block; width: 64px; height: 51px; margin: 21px auto; background: url('../images/products/perch/perch_logo.png') no-repeat center center; background-size: 64px 51px; } #nav_product_wiwo .graphic:before { content: ''; display: block; width: 77px; height: 18px; margin: 38px auto; background: url('../images/products/wiwo/wiwo_logo.png') no-repeat center center; background-size: 77px 18px; } #nav_product_katch .graphic:before { content: ''; display: block; width: 100px; height: 88px; margin: 46px auto; background: url('../images/products/katch/klyde_default.png') no-repeat center center; background-size: 100px 88px; } #nav_product_seen .graphic:before { content: ''; display: block; width: 90px; height: 37px; margin: 28px auto; background: url('../images/products/seen/seen_logo.png') no-repeat center center; background-size: 90px 37px; } /* #nav_product_mitro .graphic:before { content: ''; display: block; width: 100px; height: 88px; margin: 46px auto; background: url('../images/products/katch/klyde_default.png') no-repeat center center; background-size: 100px 88px; } */ #nav_product_motorman .graphic:before { content: ''; display: block; width: 72px; height: 51px; margin: 22px auto; background: url('../images/products/motorman/motorman_hat.png') no-repeat center center; background-size: 72px 51px; } footer { /*padding-top: 180px;*/ } footer .group { padding: 30px 50px; } footer .contact_links { float: left; width: 60%; } footer .copyright { float: right; width: 40%; text-align: right; margin: 0; } footer .copyright p {margin: 0; } } @media only screen and (min-width : 1200px) { .landing_intro { padding: 180px 80px 160px; } .landing_intro h3 { font-size: 40px; } .landing_intro h1 { font-size: 60px; } .selected_products h4 { padding: 0 80px 20px; } .selected_products .product { padding: 0 80px; } footer { /*padding-top: 200px;*/ } footer .group { padding: 30px 80px; } } /* Section Templates -----------------------------------------------------------------------------------*/ /* Section - Body Text - Default */ .text_default { width: 100%; padding: 0 20px; margin: 40px 0; text-align: left; box-sizing: border-box; } .text_default .callout { padding: 30px 0; } .text_default .callout h2 { color: #666; text-align: center; line-height: 1.3; } @media only screen and (max-width : 413px) { .text_default { padding: 0 12px; } } @media only screen and (min-width : 769px) { .text_default { width: 600px; padding: 0; margin: 50px auto; } } /* Sections .image_size_a: Image - Size A - within default column .image_size_b: Image - Size B - slight larger than default column .image_size_c: Image - Size C - oversized relative to default column .image_size_d: Image - Size D - fullscreen */ .image_size_a, .image_size_b, .image_size_c { width: 100%; margin: 80px 0; padding: 0 12px; box-sizing: border-box; } .image_size_d { width: 100%; margin: 60px 0; padding: 0; box-sizing: border-box; } .white_bg { background: #fff; padding: 20px 0 10px; margin: 100px 0; box-sizing: border-box; } @media only screen and (max-width : 413px) { .image_size_a, .image_size_b, .image_size_c { padding: 0 6px; } } @media only screen and (min-width : 700px) { .image_size_a { width: 600px; margin: 60px auto; } .image_size_b { width: 700px; margin: 60px auto; } } @media only screen and (min-width : 1200px) { .image_size_c { width: 1000px; margin: 90px auto; } } .screens_2up { margin: 0 0 30px; } .screens_2up img { display: block; float: left; width: 45%; margin: 0 2.5% 0 2.5%; } .screens_2up_bleed { width: 100%; } .screens_2up_bleed img { display: block; margin: 0; width: 100%; box-sizing: border-box; } @media only screen and (min-width : 502px) { .screens_2up { width: 500px; margin: 0 auto 50px; } .screens_2up_bleed { width: 500px; margin: 0 auto 20px; } } @media only screen and (min-width : 900px) { .screens_2up { width: 100%; margin: 0 0 50px; } .screens_2up_bleed { width: 100%; margin: 0; } .screens_2up_bleed img { display: block; float: left; width: 50%; margin: 0; } } /* Logos Page */ .logo_grid { width: 100%; padding: 0; box-sizing: border-box; } .logo_item { width: 100%; } @media only screen and (min-width : 500px) { .logo_grid { width: 360px; margin: 0 auto; } .logo_item { margin: 0 0 30px 0; } } @media only screen and (min-width : 700px) { .logo_grid { width: 100%; } .logo_item { width: 33.33%; float: left; margin: 0; position: relative; } .logo_item img { filter: none; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); opacity: 0.5; transition: all 300ms ease } .logo_item img:hover { filter: none; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); opacity: 1; } /* Registration Marks */ .reg_marks { z-index: 10; position: absolute; width: 19px; height: 19px; background: transparent url('../images/ui/ico_cross.png') no-repeat left top; background-size: 19px 19px; } .top_right { top: -10px; right: -9px; } .bottom_right { bottom: -10px; right: -9px; } } @media only screen and (min-width : 1200px) { .logo_grid { width: 1080px; margin: 0 auto; } .logo_item { width: 360px; } } /* Key Points - Goals, Milestones */ .product_keypoints .group { margin: 0 20px; padding: 20px 0 36px; } .product_keypoints h2 { } .product_keypoints ul { margin-top: 10px; } .product_keypoints ul li { font-size: 18px; line-height: 1.4; margin-bottom: 16px; padding-left: 25px; background: url('../images/ui/ico_forward_arrow.png') no-repeat left 8px; background-size: 17px 10px; /* 24px 14px */ } .product_keypoints ul li.dark { background: url('../images/ui/ico_forward_arrow_dark.png') no-repeat left 8px; background-size: 17px 10px; } @media only screen and (min-width : 700px) { .product_keypoints .group { width: 600px; margin: 0 auto; padding: 44px 0 52px; } .product_keypoints h2 { } .product_keypoints ul { margin-top: 20px; } .product_keypoints ul li { font-size: 23px; margin-bottom: 20px; padding-left: 40px; background-position: 4px 10px; background-size: 24px 14px; } .product_keypoints ul li.dark { background-position: 2px 10px; background-size: 24px 14px; } } /* Product Details */ .project_details { padding: 0 20px; margin: 50px 0; text-align: left; } .project_details h3 { border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 12px; margin-bottom: 24px; } .dark_mode .project_details h3 { border-color: rgba(255,255,255,0.25); } .project_details h6 { font-weight: 600; margin-bottom: 7px; } .project_details p { font-size: 14px; margin: 4px 0; } .project_details .col_1, .project_details .col_2, .project_details .col_3 { width: 100%; margin-bottom: 30px; } @media only screen and (max-width : 413px) { .project_details { padding: 0 12px; } } @media only screen and (min-width : 610px) { .project_details { width: 600px; margin: 100px auto 40px; } .project_details .col_1, .project_details .col_2, .project_details .col_3 { width: 33.33%; float: left; } } /* Page Specific -----------------------------------------------------------------------------------*/ /* Workable, Perch, wiwo, Katch */ #workable header, #perch header, #wiwo header, #katch header, #seen header, #motorman header, #logos header { background: #3c3c3c; } /* Product Intro */ .product_intro { width: 100%; padding: 130px 0 135px; margin-bottom: 50px; box-sizing: border-box; } .perch_screenshots img { display: block; margin-bottom: 16px; } .wiwo_screenshots img { display: block; margin-bottom: 16px; box-shadow: 0 0 12px 0 rgba(0,0,0,0.10); } .katch_screenshots img { display: block; margin-bottom: 16px; } /* workable */ #workable .product_intro { background: #333 url('../images/products/workable/product_intro_bg.jpg') no-repeat center center; background-size: cover; } .workable_logo { background: url('../images/products/workable/workable_logo.png') no-repeat left top; background-size: 200px 37px; width: 200px; height: 37px; margin: 0 auto 20px; } .workable_tagline { width: 300px; color: rgba(255,255,255,0.8); font-size: 20px; margin: 0 auto; text-align: center; } #workable .product_keypoints { background: #AB6BC7; } /* wiwo */ #wiwo .product_keypoints { background: #00A1DD; } #wiwo .product_intro { background: #32447B url('../images/products/wiwo/product_intro_bg.jpg') no-repeat center center; background-size: cover; } .wiwo_logo { background: url('../images/products/wiwo/wiwo_logo.png') no-repeat left top; background-size: 160px 37px; width: 160px; height: 37px; margin: 0 auto 20px; } .wiwo_tagline { width: 100%; color: rgba(255,255,255,1); font-size: 20px; line-height: 1.4; text-align: center; padding: 0 20px; box-sizing: border-box; } /* perch */ #perch .product_intro { background: #DCA7AD url('../images/products/perch/product_intro_bg.jpg') no-repeat center center; background-size: cover; } #perch .perch_logo { width: 67px; height: 52px; background: url('../images/products/perch/perch_logo.png') no-repeat left top; background-size: 67px 52px; margin: 30px auto 40px; } /* katch */ #katch .product_intro { background: #FA6349; padding: 42px 0 80px; } /*#katch .klyde_default { width: 144px; height: 125px; background: url('../images/products/katch/klyde_default.png') no-repeat left top; background-size: 144px 125px; margin: 44px auto 0; }*/ #katch .klyde_default { width: 297px; height: 88px; background: url('../images/products/katch/klyde_horizontal.png') no-repeat left top; background-size: 297px 88px; margin: 40px auto 0; } #katch .klyde_illos { margin-bottom: 0; } #katch .klyde_illos img { display: block; } #katch .product_keypoints { margin-top: 0; } /* seen */ #seen .product_intro { padding: 0; } #seen .product_intro .illo_wrap { width: 100%; } #seen .product_intro #illo { } .seen_event_demo_1 iframe { height: 200px; } #mobile_screens { background-color: #000; } /* motorman */ #motorman .product_intro { background: #202020 url('../images/products/motorman/product_intro_bg.jpg') no-repeat center center; background-size: cover; } .motorman_project_header { width: 90%; text-align: center; margin: 0 auto; } #motorman .product_intro { margin-bottom: 0; } #motorman .image_size_d { margin: 0 0 60px; } #motorman .screens_2up_bleed img { border: 3px solid #333; } /* Logos */ #logos .product_intro { padding: 80px 0 60px; margin-bottom: 0; text-align: center; } #logos .product_intro h2 { } @media only screen and (min-width : 769px) { #workable header, #wiwo header, #katch header, #perch header { background: rgba(0,0,0,0.1); -webkit-transition: background 0.2s ease-out; -moz-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; transition: background 0.2s ease-out; } #workable header.scrolling, #wiwo header.scrolling, #katch header.scrolling, #perch header.scrolling { background: #3c3c3c; } #wiwo .product_intro, #workable .product_intro { padding: 250px 0 185px; margin-bottom: 80px; } #perch .product_intro { padding: 300px 0 220px; margin-bottom: 80px; } #katch .product_intro { padding: 130px 0 120px; margin-bottom: 80px; } .workable_logo { background-size: 286px 53px; width: 286px; height: 53px; } .wiwo_logo { background-size: 199px 46px; width: 199px; height: 46px; } .wiwo_tagline { width: 600px; font-size: 26px; margin: 0 auto; padding: 0; } #perch .perch_logo { background-size: 134px 104px; width: 134px; height: 104px; margin: 100px auto 70px; } .perch_screenshots img, .katch_screenshots img, .wiwo_screenshots img { float: left; width: 48%; margin-bottom: 26px; } .perch_screenshots img.odd, .katch_screenshots img.odd, .wiwo_screenshots img.odd { margin-right: 2%; } #seen .product_intro .illo_wrap { width: 700px; margin: 0 auto; padding: 20px 0 0 0; } .seen_event_demo_1 iframe { height: 400px; } .motorman_project_header { width: 640px; } .motorman_project_header p { font-size: 24px; } #logos .product_intro { padding: 120px 0 100px; } } @media only screen and (min-width : 1150px) { #seen .product_intro .illo_wrap { width: 1100px; } .seen_event_demo_1 iframe { height: 610px; } } /* Screen Breakpoints -----------------------------------------------------------------------------------*/ /* Small mobile screens only */ @media only screen and (max-width : 413px) { } /* Tablet screens and larger */ @media only screen and (min-width : 769px) { } /* Desktop screens and larger */ @media only screen and (min-width : 1200px) { } /* Large desktop screens and larger */ @media only screen and (min-width : 1600px) { } /* Check on mobile @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) { body { -webkit-font-smoothing: subpixel-antialiased; } } */