/* Globals =========================================== */ :root { --shadow: #777; --canvas: rgb(238, 238, 240); --surface: #fff; --surface-2: #f4f5f6; --inset: #f8f8f8; --header: #fff; --header-surface: rgba(26, 30, 31, 0.93); --text: #222; --muted: #777; --extra-juice: rgb(87, 177, 255); --faint: #8a929b; --on-contrast: #fff; --contrast-surface: #222; --bright: #fafafa; --warn: rgb(224, 107, 0); --danger: #b33; --border: #d4d7da; --border-soft: rgba(0, 0, 0, 0.08); --border-faint: #d0d7dd; --accent-strong: #17627f; --accent: rgb(240, 100, 0); --teal: #0aa5c1; --accent-hover: #e06b00; --message-surface: #f1f3f5; --customer-message-surface: #e6f0f7; --message-border: #d0d7dd; --page-surface: #fff; --empty-canvas: #fafafa; --panel-surface: rgba(26, 30, 31, 0.03); --panel-border: #e3e3e3; --header-border: #5c92b1; --footer-surface: #1a1e1f; --footer-bottom-surface: #101415; --footer-link: #ddd; --footer-link-hover: #fff; --footer-bottom-link-hover: #57b1ff; --footer-heading: #959595; --menu-surface: rgb(244, 244, 246); --menu-border: rgb(200, 200, 200); --menu-divider: rgb(231, 231, 233); --control-surface: #fcfcfc; --control-border: #ddd; --control-hover-border: #aaa; --control-focus-border: #aaa; --control-focus-shadow: none; --caption-text: #777; --caption-shadow: 0 1px 0 #fff; --theme-toggle-border: #aeb4ba; --theme-toggle-text: #59636d; --theme-toggle-hover-border: currentColor; --theme-toggle-hover-text: #303841; } * { margin: 0px; padding: 0px; text-indent: 0px; font-family: Lato, Raleway, Verdana, Helvetica, sans-serif; text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always; font-weight: 500; /* font-size: 16px; */ letter-spacing: 0px; list-style-type: none; word-wrap: break-word; } img { border: 0; } a { text-decoration: none; font-weight: 700; color: inherit; cursor:pointer; } #your-hubs a { color: #333; } ul#ui-id-1.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content.tagit-autocomplete { z-index: 101; } .tagit-new .ui-widget-content.ui-autocomplete-input { min-width: 300px; } .tagit { max-width: 550px; } a:hover, a.terms-link { color: var(--accent-hover); } /* Ron said this is okay */ .contentBox a { color: var(--accent); } .contentBox a:hover { text-decoration: underline; } .contentBox .newsHolder a, .contentBox .photoHolder a, .contentBox .rowItem a { font-weight: 530px; color: var(--text); } .contentBox .contentBoxFooter a:hover { text-decoration: none; } .contentBox .toggleLink a { color: var(--text); } .contentBox p, .contentBox span { font-family: Lato, Raleway, helvetica, sans-serif; } body { color: var(--text); background: var(--canvas); width: 100%; margin: 0px; padding: 0px; min-width: 1000px; } body.empty { background: var(--empty-canvas); } body.wide-body { min-width: 1200px; } .empty-result { text-align:center; margin: 50px; } #main-flash div { display: none; } #head-flash { height: 0; overflow: hidden; opacity: 0; background: rgb(26, 30, 31); background: rgba(26, 30, 31,0.93); } .flash { box-shadow: 0 0 6px var(--shadow); box-shadow: 0 0 6px rgba(0,0,0,0.3); background: rgb(230,230,230); background: rgba(255,255,255,0.9); position: fixed; z-index: 1000; top: 0px; left: 0px; padding: 19px 25px; text-align: center; width: 100%; opacity: 1; cursor: pointer; border: none; overflow: hidden; } .flash p { font-size: 22px; line-height: 22px; margin: 0; } .flash p img { padding-bottom: 7px; } .flash.notice p { color: #28b; } .flash.error { background: var(--danger); } .flash.error p { color: var(--on-contrast); } .flash.other { color: var(--on-contrast); } .signup-hero-copy h1.pricing-header { color: var(--on-contrast); margin: 0 auto 15px auto; line-height: 1.3em; } .spokt-sprite { background: url("/assets/spokt-sprite-4c0b2ade.png"); } input[type=tel], input[type="text"], textarea, input[type="password"] { padding: 5px; outline:none; background: var(--control-surface); border: solid 1px var(--control-border); border-radius: 3px; font-size: 16px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } textarea { line-height: 24px; } input[type=tel]:hover, input[type=tel]:focus, input[type="text"]:focus, textarea:focus, input[type="password"]:focus, input[type="text"]:hover, textarea:hover, input[type="password"]:hover { background: var(--control-surface); border: solid 1px var(--control-hover-border); } .payment-warning { background: #ffeee4; border: solid 1px #c44; /* background: #fdc;*/ border-radius: 10px; overflow: hidden; padding-bottom: 25px; width: 80%; margin: 0 auto 25px; } .payment-warning p.pay-for-hub { text-align: center; padding: 0; } .payment-warning p.pay-for-hub a { color: #fdc; line-height: 14px; text-transform: uppercase; background-color: #c44; border-radius: 21px; padding: 7px 15px 9px; } .payment-warning p.pay-for-hub a:hover { color: #ffe; text-decoration: none; background-color: #a00; } .payment-warning h1 { background: #c44; padding: 5px; margin: 0 0 10px 0; text-align: center; font-size: 18px; color: var(--bright); font-weight: 400; margin:0; font-size: 24px; line-height: 40px; text-transform: uppercase; } .payment-warning p { padding: 15px 15px; color: #800; text-align: center; } .removeLink { text-decoration: none; color: #955; font-weight: 900; } .removeLink:hover { color: #c44; } .addResponseLink { line-height: 32px; } input[type="text"]#search { font-size: 12px; padding: 3px; background: #eee; } input[type="file"] { font-size: 14px; margin-top: 5px; } #pageWrap { width: 100%; margin: 0 auto; position: relative; } .clearing { clear: both; display: block; border: 0; padding: 0; margin: 0; line-height: 0px; } .clearingIE { clear: both; display: block; border: 0; padding: 0; margin: 0; line-height: 1px;font-size: 1px; height: 0px; } .clearing-top { height: 0; font-size: 1px; margin: 0; clear: left; line-height: 1px; } .clearfix:after {content:"\0020";display:block;height:1px;clear:both;visibility:hidden;overflow:hidden;} .contentWrap { width: 1100px; margin: 20px auto 15px; position: relative; } body.wide-body .contentWrap { width: 1150px; } body.wide-body .contentBox { width: 920px; } body.wide-body .contentBox .hub-block-title.small-block { width: 890px; } body.wide-body .contentBox .member-list-tools.hub-block-title.small-block { width: 870px; } body.wide-body #header .inner { width: 1190px; } #header .inner *, #footerWrap a, #footerWrap span { font-family: "Raleway", helvetica, sans-serif; } .leftNav a { font-family: "Raleway", helvetica, sans-serif; } .contentBox { position:relative; min-height: 340px; width: 860px; padding: 15px; border-radius: 8px; border: solid 1px rgb(220,221,217); border: none; background: var(--panel-surface); box-shadow: none; border: solid 1px var(--panel-border); } .desktop.wide-body .contentBox { margin-left: 15px; } .contentBox.no-nav { margin: 0 auto; } .sequential-nav { margin-bottom: 35px; grid-column: 2; min-width: 0; } .sequential-nav-boundary { margin: 5px 0; width: 100%; } .sequential-nav-inner { position: relative; } .search-q { width:550px; } .postMeta { z-index: 10; font-size: 12px; position: relative; right: 13px; margin-top: -30px; color: var(--muted); font-weight: 400; position: relative; } .postMeta { text-align: left; width: auto; margin-left: 67px; display: block; right: 0; margin-bottom: 0px; } .postMeta a { display: inline-block; } .postMeta .post-meta__actions .meta-glyph { opacity: .5; } .replyPost:hover .postMeta .post-meta__actions .meta-glyph, .rootPost:hover .postMeta .post-meta__actions .meta-glyph { opacity: 1; } .meta-tooltip { width: 20px; height: 20px; display: block; position: relative; text-align: center; top: -5px; } .meta-glyph { background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -235px -46px; display: block; width: 20px; height: 20px; position: relative; top: 0; left: 0; } .meta-tooltip p { display: none; position: absolute; bottom: 29px; text-align: center; padding: 5px; min-width: 110px; font-size: 11px; text-transform: uppercase; font-weight: 600; color: var(--on-contrast); background: #f06b1f; border-radius: 4px; margin: 0; margin-left: -50px; line-height: 1.2em; } .meta-tooltip:hover p { display: block; } .books-link.meta-tooltip:hover p { bottom: 20px; } .meta-tooltip p a { color: var(--on-contrast); text-align: left; font-weight: 600; } .feature-photo.meta-tooltip .meta-glyph { background-position: -407px -126px; } .edit-post-button.meta-tooltip .meta-glyph { background-position: -235px -46px; } .viewers-link.meta-tooltip .meta-glyph { background-position: -282px -46px; } .btnEdit.meta-tooltip .meta-glyph { background-position: -235px -46px; } .deleteLink.meta-tooltip .meta-glyph { background-position: -325px -46px; } .reply-link.meta-tooltip .meta-glyph { position: relative; background-position: -367px -46px; } .download-link.meta-tooltip .meta-glyph { position: relative; background-position: -499px -47px; } /* Book icon and hover state. */ .books-link.meta-tooltip .meta-glyph { position: relative; background-position: -280px -124px; } .books-link.meta-tooltip:hover .meta-glyph { position: relative; background-position: -280px -164px; } /* Book Meta Tool Tip */ .meta-tooltip p a { color: var(--on-contrast); font-weight: 600; font-size: 11px; width: 100%; } .books-link.meta-tooltip p { min-width: 131px; margin-left: -55px; background-color: rgba(15, 150, 180, 0.95);} .books-link.meta-tooltip p a:hover { font-weight: 900; } .feature-photo.meta-tooltip .meta-glyph { background-position: -407px -126px; } .books-link.meta-tooltip p .add-post-to-book { text-align: center; width: 100%; } .postMeta a.screen-reader-link { height: 1px; width: 1px; opacity: 0.1; overflow: hidden; margin: -3px; padding:0; } .edit_book { margin: 50px 0 10px 70px; width: 350px; } .edit_book input[type="text"] { width: 340px; } #book_book_ids_to_absorb_ { width: 350px; } .edit_book .button-row { margin: 10px 0 20px 0; padding-bottom: 20px; } .edit_book .button-row.hr { border-bottom: solid 1px #ccc; } .edit_book .txt12 { margin-top: 4px; } .edit_book .txt16 { margin: 12px 0; color: #333; } .edit_book .txt16 strong { font-weight: 600; color: #333; } .rotate-left.meta-tooltip .meta-glyph { background-position: -407px -46px; } .rotate-right.meta-tooltip .meta-glyph { background-position: -453px -46px; } div.meta-data strong { width: 110px; display: inline-block; } .view-options { text-align: right; padding: 0 0 15px 0; } .view-options a { margin-right: 20px; padding: 5px; } /* Book List */ .book-list { width: 100%; } .book { padding: 20px 0 0 24px; position: relative; width: 212px; height: 310px; } .book a, .book div { z-index: 30; position: relative; } .book-list .book .book-graphic { position: absolute; top: 0; left: 0; height: 220px; z-index: 3; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: 2px -259px; width: 212px; padding: 20px 0 0 24px; } .book-list.display-as-list .book .book-graphic { background: none; display:none; } .book-list .book .cover-photo { border-radius: 5px; width: 150px; height: 90px; margin: 55px 0 0 30px; text-align: center; overflow: hidden; } .book-list .book.no-photo .cover-photo { background: #333; box-shadow: inset 0 0 10px var(--contrast-surface); } .book-list .book.no-photo .book-title { background:none; } .book-list .book .cover-photo .no-photo { padding: 26px 5px; text-transform: uppercase; color: var(--muted); } .book-list .book .cover-photo img { border-radius: 0px; margin: 0 auto; max-width: 150px; } .book-list .book .book-title { margin: 2px 18px 15px 18px; height: 60px; text-align: center; } .book-list .book .book-title a { color: #eee; } .book-list .book .book-title a:hover { text-decoration: none; } .book-list .book-meta { padding: 0px; text-align: center; min-height: 38px; font-size: 13px; } .book-list a.see-all { text-align: center; display:block; margin-top: 13px; color: #444; text-transform: uppercase; font-weight: 600; } /* .book .cover-photo .S { display: block; height: 90px; overflow: hidden; } */ .book .cover-photo .S img { margin-top:-34px; border-radius: 4px; } .book-list.display-as-list .book { width: auto; padding: 8px; height: 36px; } .book-list.display-as-list .book .cover-photo.no-photo { display:none; } .book-list.display-as-list .book .book-title { margin: 0; height: auto; width: 300px; text-align: left; } .book-list.display-as-list .book .book-meta { margin: 0; height: auto; width: 250px; } .book-list.display-as-list .book .book-title a { color: #555; } .book-list.display-as-list .book.alternate-item { background: #efefef; } .book-meta-box { position: relative; width: 260px; margin-top: 30px; } .book-meta-box .book { padding: 60px 10px 10px 50px; width: 219px; height: 237px; } .book-meta-box .book .book-title { text-align: center; font-weight: 700; margin: 7px 0; } .book-meta-box .book .see-all { position:absolute; bottom: 12px; right: 12px; margin: 0 auto; display:block; font-size: 12px; text-transform: uppercase; } .book-meta-box .book-stats { margin-top: 10px; font-size: 13px; text-transform: uppercase; line-height: 1.4em; } ul#ui-id-1.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content.tagit-autocomplete { max-height: 250px; overflow-y: scroll; } .site-row * { color: var(--on-contrast); font-weight: 500; } .site-row .site-row-element { padding: 4px;} .site-row .site-name { width: 290px; } .site-row .site-price { width: 90px; text-align: right; } .site-row .import-checkbox { width: 180px; text-align: center; } .site-row .site-total { width: 70px; text-align: right; } .site-row.header { text-align: center; text-transform: uppercase; font-size: 15px; } .site-row.total * , .site-row.header * { font-weight: 700; } .signup-hero-copy h1.site-total { color: var(--on-contrast); font-weight: 300; margin: 0 12px; padding: 0; line-height: 50px; } .signup-hero-copy-inner .mayflower p { font-weight: 400; font-size: 17px; } .mayflower-signup-steps { z-index: 10; margin-bottom: 50px; position: relative; font-size: 13px; font-weight: 500; color: #ddd; text-transform: uppercase; line-height: 1.5em; padding: 15px; width: 100%; text-align: center; margin: 0 auto; color: var(--text); background: rgba(0,0,0,0.0); margin-top: -40px; padding: 20px 0 0px 0; margin-bottom: 30px; } .mayflower-signup-steps * { color: var(--text); font-weight: 500; font-size: 18px; } .signup-step-container { width: 280px; } .signup-step-container * { color: var(--text); text-align: center; line-height: 1.3em; } .signup-step-container h6 { font-size: 53px; border: solid 2px var(--text); border-radius: 50px; width: 75px; height: 75px; font-weight: 300; margin: 0 auto 15px auto; } .signup-step-container h6 span { display: block; font-size: inherit; width: 100%; height: 100%; font-weight: inherit; } .signup-step-container.step-3 h6 span { position: relative; top: -5px; } .signup-step-container p { font-size: 18px; } .signup-step-arrow { width: 40px; height: 40px; margin-top: 20px; background: url(<%= asset_path 'spokt-sprite-new.png' %>) no-repeat; background-position: -606px -44px; margin-left: -15px; margin-right: -15px; } .step-1-current .step-2, .step-1-current .step-3, .step-1-current .arrow-1, .step-1-current .arrow-2 { opacity: 0.3; } .step-2-current .step-3, .step-2-current .arrow-2 { opacity: 0.3; } .mayflower-details-paragraph { text-align: center; margin-top: 15px;margin-bottom: 20px; color: var(--on-contrast); text-shadow: 0 0 20px rgba(0,0,0,0.2); } .step-pay-mayflower .mayflower-details-paragraph { display: none; } .site-row.header .site-name { text-align: left; } .distinct-row { border-bottom: dashed 1px #888; padding: 7px 0; } .checkout-button-wrap { margin-top: 30px; } .migrations-status-list .distinct-row { border-bottom: none; border-top: dashed 1px #888; } .migrations-status-list .site-row.header { margin-bottom: 6px; } .migrations-status-list form.button_to { position:static; } .migrations-status-list p a { color: #eee; text-decoration: underline; } .migration-notes { width: 100%; padding: 20px; } .site-row .site-status { width: 130px; text-align: center; } .site-row .site-next-step { width: 150px; text-align: right; } .feature-photo.meta-tooltip:hover .meta-glyph { background-position: -407px -166px; } .edit-post-button.meta-tooltip:hover .meta-glyph { background-position: -235px -91px; } .viewers-link.meta-tooltip:hover .meta-glyph { background-position: -282px -91px; } .btnEdit.meta-tooltip:hover .meta-glyph { background-position: -235px -91px; } .deleteLink.meta-tooltip:hover .meta-glyph { background-position: -325px -91px; } .reply-link.meta-tooltip:hover .meta-glyph { position: relative; background-position: -367px -91px; } .rotate-left.meta-tooltip:hover .meta-glyph { background-position: -407px -91px; } .rotate-right.meta-tooltip:hover .meta-glyph { background-position: -453px -91px; } .download-link.meta-tooltip:hover .meta-glyph { position: relative; background-position: -499px -92px; } a.download-link:hover { color: #f06b1f; text-decoration: none; } .rotate-right.meta-tooltip p, .rotate-left.meta-tooltip p { background: #1f7cf0; } .reply-link.meta-tooltip { width: auto; padding: 0 3px 3px 3px; border-radius: 4px; top: -4px; border: solid 1px transparent; } .reply-link.meta-tooltip p { display: block; position: relative; top: 0; left: 0; background: none; color: #9d9d9d; width: auto; min-width: 0; margin: 0; padding-right: 0; font-weight: 500; } .reply-link.meta-tooltip:hover { color: var(--on-contrast); border: solid 1px #f06b1f; } .reply-link.meta-tooltip:hover p { color: #f06b1f; } .customer-notes { max-height: 235px; overflow: scroll; background: rgba(36, 40, 41,0.03); padding: 5px; border: solid 1px #e3e3e3; margin-bottom: 30px; } .customer-notes-wrapper { background-color: rgba(255, 235, 0, 0.20); } .customer-note { border-bottom: dotted 1px #ddd; margin-bottom: 12px; } .note-meta { color: #aaa; font-size: 12px; } .new_customer_note { margin-bottom: 30px; } .new_customer_note label { text-transform: uppercase; margin-bottom: 8px; font-weight: 600; display: block; } .customer-notes .message-row { display: flex; flex-wrap: wrap; gap: 5px; } .customer-notes .message-row .message { width: 155px; font-size: 10px; } .customer-notes .message-row .message span { color: #aaa;} .customer-notes .message-row .message.message-subject { width: 220px; overflow: hidden; height: 14px; } .post-time { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 21px; cursor: default; } .post-time span.poster-name { font-size: 12px; font-weight: 600; color: #707070; line-height: 21px; } .post-time span { font-size: inherit; font-weight: inherit; color: inherit; } .postMeta a { font-size: 13px; font-weight: 300; text-decoration: none; color: #999; padding: 3px; } .postMeta a:hover { font-weight: 500; } .postMeta a.deleteLink:hover { color: rgb(200,0,0);} .postMeta ul { display:inline; width: 0px; } .postMeta ul li { display: none; } .postMeta ul li.icon-graphic { display: block; background: url(<%= asset_path 'spokt-sprite.png' %>) no-repeat; width: 15px; height: 16px; display: inline-block; cursor: pointer; border:none; } .postMeta ul li.icon-graphic:hover { background-position: -18px 0; } .postMeta ul.active li.icon-graphic { background-position: -36px 0; position: absolute; top: 0px; right: 0px; padding:0; } .postMeta ul.active { position:absolute; right: 0; top:0; background: var(--menu-surface); padding: 10px 0 12px; width: 97px; height: auto; z-index: 90; border: solid 1px var(--menu-border); } .postMeta ul.active li { display: block; text-align: center; border-bottom:solid 1px var(--menu-divider); padding: 5px 0; margin: 0px 10px; } .postMeta ul.active li.icon-graphic { border:none; margin: 0; } .postMeta ul li span.spokt-sprite { display:inline-block; width: 16px; height: 16px; opacity: 0.7; } .postMeta ul li span.rotate-left { background-position: -53px 2px; } .postMeta ul li span.rotate-right { background-position: -69px 2px; } .postMeta ul li a:hover span.spokt-sprite { opacity: 1; } .profileTabs { display: block; clear: both; margin-bottom: 15px; margin-top: 10px; text-align: center; } .profileTabs a { display: inline-block; margin: 0 5px; padding: 8px; background: rgb(102,139,167); color: var(--on-contrast); width: 29%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 16px; line-height: 24px; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: 500; } .profileTabs a.active { background: rgb(42,79,97); } .profileTabs a:hover { background: rgb(30,70,90); text-decoration: none; } .tab-links { padding: 0px; line-height: 40px; font-size: 18px; border: solid 1px #d9dddf; border-width: 0 0px 1px 0px; margin-top: 30px; width: 720px; margin-left: -15px; padding: 30px 0 0 30px; display: block; clear: both; margin-top: 0; top: 0; position: relative; margin-bottom: 30px; } .tab-link { background: #f3f3f3; text-shadow: 1px 0 1px var(--on-contrast); position: relative; top: 2px; height: 38px; line-height: 40px; padding: 0 12px; border: none; border-top-left-radius: 10px; border-top-right-radius: 10px; margin-left: 10px; } .contentBox a.tab-link { color: #555; } a.tab-link:hover { color: #000; text-decoration: none; } .tab-link.selected { background: rgb(249, 249, 249); text-shadow: none; border: solid 1px #d9dddf; border-width: 1px 1px 0px 1px; } .wide-pref-select { border: solid 1px #ccc; background: none; -webkit-appearance: none; height: 38px; width: 380px; padding: 0 15px; } .select-row { margin-right: 100px; margin-top: 20px; } .delete-membership-link { font-size: 12px; text-transform: uppercase; } .prefPane h2 { font-size: 18px; margin: 10px 5px 10px 5px;} p.majorMessage { text-align: center; font-size: 62px; font-weight: 100; color: #597192; margin-top: 45px; } .contentBox h1 { font-weight: 600; margin: 5px 5px 15px 5px;} /* SILVER BOX (Forms, etc.) */ .silverBoxWrapper { margin: 3px auto 0 auto; width: 708px; } .silverBoxTop { width: 708px; display: block; } .silverBoxBottom { width: 708px; height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; display: block; } .silverBoxPad { padding: 15px 15px 0 15px; min-height: 200px; } #encoding_video_message { padding: 10px; margin: 10px 5px; font-size: 20px; line-height: 29px; } #encoding_video_message div { font-size: 20px; line-height: 29px; } #encoding_video_message.error div { color: #c66; } #encoding_video_message.error div.error-heading { text-align:center;color:#eee; border-radius:5px; background: #C66;padding: 10px; font-weight:300; } #encoding_video_message.error div.error-message { margin: 0 auto; margin: 10px 0; } .video-list-message { min-height: 55px; line-height: 55px; color: #aaa; } .video-list-message.error { color: #aaa; } .videoItem a:hover { text-decoration: none; color: #ccc; } /* BODY CONTENT BG (Dark gradient bg for forms, posts, etc.) */ .darkGradBGHeadLeft { height: 42px; line-height: 42px; margin-right: 6px; width: 7px; flex: 0 0 auto; } .darkGradBGHead { height: 42px; line-height: 46px; font-size: 18px; margin-top: 6px; width: 733px; margin-left: -3px; position: relative; overflow: hidden; display: flex; align-items: center; } .darkGradBGHead span { font-size: inherit; } .contentBoxHeaderLink1 { height: 42px; line-height: 42px; padding: 0 12px; color: var(--on-contrast); border: solid #444; border-width: 0 1px 1px 1px; } .darkGradBGHeadRight { height: 42px; line-height: 46px; padding: 0 12px; color: var(--on-contrast); margin-left: auto; order: 1; } .darkGradBGBorder { height: 1px; line-height: 1px; font-size: 1px; border: solid 1px #666; border-width: 1px 0px 0px 0px; position: absolute; top: 0px; display: block; width: 727px; margin-left: 3px; } a.accent:hover { color: var(--accent-hover); } .darkGradBGWrap { width: 733px; position: relative; } .darkGradBGTop { width: 733px; display: block; padding-top: 6px; } .darkGradBGBottom { width: 733px; height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; margin-bottom: -5px; display: block; } /* POST TITLE */ .postTitleTextBox { width: 95%; font-size: 24px; margin: 10px 0 5px; } .darkGradBGHeadRight a.orangeLink { color: #ccc; text-decoration: none; } .darkGradBGHeadRight a.orangeLink:hover { color: #ea8a35; text-decoration: underline; } form.edit_post_title { display:none; } /* CENTER LINES / SPACER LINES */ .centerLineLight { line-height: 1px; font-size: 1px; height: 1px; width: 90%; margin: 7px auto; background: var(--surface); border-top: solid 1px #dfdfdf; overflow: hidden; } /* Phase 20: .errorTxtBox and .sizeLinks are leftovers of the pre-redesign splash pages; no template, helper or script writes either class. */ /* ACCEPT INVITATION.aspx ===========================================*/ #theBox1, #theBox2, #theBox3 { display: none; } #theBoxBtn1, #theBoxBtn2, .loginHelpTxt1, .loginHelpTxt2 { display: block; } /* Phase 20: the logInAs / signUpAs pair lived in home/_login_top.html.erb, the unreferenced splash login - the class went with the template in Phase 19. */ .spoktLoginBtn { width: 165px; height: 50px; margin: 0 auto; } /* Phase 20: the about-tower row (.aboutHeaderTxt, .aboutTxtHolder, .aboutTxtBody, .learnMoreLink, .learnMoreLink2) has no markup behind it. */ .also_post_to { padding: 0 3px 3px 3px; display: block; width: 245px; text-align: left; overflow: hidden; } /* Phase 20: the question-button tooltips (.questionBtn, .qb2) went with the help popovers they were written for; nothing writes those classes. */ .signup-box .signup-steps-wrapper .errorMessage, .errorMessage { color: #c22;} .errorExplanation { color: #c22; } #errorExplanation ul li { color: var(--on-contrast); } .errorBox, #errorExplanation { padding: 10px; background: rgba(155,0,0,0.7); margin-bottom: 20px; color: var(--on-contrast); border-radius: 5px; } .errorBox, #errorExplanation h2,.errorExplanation p, .errorExplanation li { color: var(--on-contrast);} #errorExplanation li { margin-left:5px; } /* Phase 20: no page produced the About Tower row any more, and the -moz pseudo-class made this whole selector list invalid in WebKit and Blink anyway. */ /* Phase 20: greybox pair and the two splash widths - no markup produces them. */ #alternate_contact { margin-top: 5px; } #alternate_contact li { height:28px; padding-bottom: 4px; } #alternate_contact li img { height:28px;position:relative; top:8px;margin-right:5px; } /* Phase 20: /contact is inquiries#new and nothing in it, or anywhere else, produces .contact-us-side-bar. */ /* WEB FORM ===============================================*/ /* Phase 20: the hand-rolled form framework (.formHolder, .formHolderBlue, .formRow, .formLabel, .formElement, .formInput, .formBtn, .formBumper, .formAsterisk, .formError, #mainCol .formHolder h2) has no markup behind it either - forms use .hubFormLabel/.hubFormInput and .form-row now. Kept .login-checkbox-label because it carries no layout, only spacing. */ .login-checkbox-label { text-align:left; padding:7px 1px; width: 180px; } /* HUB FORMS =========================================== */ .hubFormLabel { width: 130px; text-align: right; margin-right: 5px; font-size: 16px; } .hubFormInput { margin-top: 5px; clear: right; } .hubFormInputFlash { margin-top: 0px; clear: right; } .orange em { color:#ea8a35; } .contentBoxHeader em { font-size: 18px; } .contentBoxHeader strong { font-size: inherit; font-weight: 600; } *.blue, *.blue a { color: rgb(100,137,165); } .blue a:hover { background: #ffa; color: #0c5184; } .light, .light a { color: #999; } .light a:hover, span.light a:hover { color: #444; background: #ffa; } .light span { text-decoration: none; } .dark, .dark a { color: #272727; } .error, .error a { color: #f00; } .txt10 { font-size: 10px; } .txt11 { font-size: 11px; } .txt12 { font-size: 12px; } .txt13 { font-size: 13px; } .txt14 { font-size: 14px; } .txt15 { font-size: 15px; } .txt16 { font-size: 16px; } .txt17 { font-size: 17px; } .txt18 { font-size: 18px; } .txt20 { font-size: 20px; } .txt21 { font-size: 21px; } /* Phase 20: duplicate declaration. */ .bold { font-weight: bold; } .lh16 { line-height: 16px; } .lh18 { line-height: 18px; } .lh20 { line-height: 20px; } .lh21 { line-height: 21px; } .lh23 { line-height: 23px; } h2 { font-weight: 600; margin-bottom:8px; } .center, .centered { text-align: center; } .u { text-decoration: underline; } .strong, strong, b, .strong *, strong *, b * { font-weight: 600; } em, i, em *, i * { font-style: italic; } .underline { text-decoration: underline; } .highlight:hover { background: #ffa; color: #444; } .justify { text-align: justify; } #spinner { background:url("/assets/ajax-loader-22270925.gif"); width:31px; height:31px; margin:25px auto; } #spinner.gray { background:url("/assets/ajax-arrows-blue-gray-4170a32f.gif"); width: 0px; height: 0px; margin: 0px 5px 0 5px; display:inline-block; } #spinner.gray.visible { background:url("/assets/ajax-arrows-blue-gray-4170a32f.gif"); width: 16px; height: 16px; margin: 0px 5px 0 5px; display:inline-block; } /* Header =========================================== */ #headerWrap { border-bottom: solid 1px var(--header-border); background: var(--header-surface); margin-bottom: 10px; width: 100%; height: 60px; } #headerBoundary { width: 960px; margin: 0 auto 0 auto; height: 60px; overflow: visible; position:relative;} #headerLogo a { width: 164px; height: 64px; text-shadow: 0px 1px 0 #555;font-size: 38px; color: var(--bright); font-weight: 400; position:absolute; margin-top: 5px; left: 25px; text-indent: -5000000px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-size: 1200px 800px; background-position: -23px -40px; zoom: 0.8; width: 200px; } #headerCap { width: 33px; height: 64px; } .linkHolder { position: absolute; right: 25px; height: 32px; padding: 0 10px 0 10px;background: rgb(234, 234, 236);border: solid 1px rgb(212,212,217); border-top: none; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .photoViewer .linkHolder { border-color: #bfbfbf; } .flushLinks { display: inline-block; height: 18px; clear: none; cursor: default; color: #999; } .flushLinks * { font-size: 14px; line-height: 34px; color: #597192; } .flushLinks a { cursor: pointer; text-decoration: none; font-weight: 500; } div.flushLinks span, .update { padding: 8px; margin: 0px; } div.flushLinks a, .update { padding: 8px; margin: 0px; } div.hub-chooser-set { display:none; } #flash { color: #28b; background: #ffb; padding: 4px 7px; border: solid 2px #ff0; font-size: 16px; margin: 0px auto 6px auto; line-height: 32px; text-align:center; } #errorMessage { color: #28b; background: #ffb; padding: 4px 7px; border: solid 2px #ff0; font-size: 16px; margin: 0px auto 6px auto; line-height: 32px; text-align:center; } #announcement_bar { background: #ffc url("/assets/announceBG2-94d2dc90.png"); padding: 0px 0px; border-bottom: solid 1px #ff2; font-size: 20px; position: fixed; line-height: 52px; height: 52px; text-align:center; z-index:96; width:100%; -moz-box-shadow: 0px 0px 8px #999; -webkit-box-shadow: 0px 0px 8px #999; box-shadow: 0px 0px 8px #999; } #announcement_bar.scroll-away { position: absolute; } #announcement_bar.is-dismissing { height: 0; overflow: hidden; border-bottom-width: 0; transition: height 300ms ease, border-bottom-width 300ms ease; } #announcement_bar.not-ignorable .dismiss { visibility: hidden; } #announcement_bar .dismiss:hover { background: #f00; } #announcement_bar .dismiss { background: #d00; color: var(--on-contrast); font-size: 31px; position: absolute; top:8px; right:25px; height:34px; width:34px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 0; padding: 0; line-height: 30px; text-align: center; margin: 0 auto; font-weight: 600; font-family: helvetica, arial; cursor: pointer; } #announcement_bar_padding { height:51px; overflow: hidden; transition: height 300ms ease; } #announcement_bar_padding.is-dismissing { height: 0; } #announcement_bar a { color: #2785D5; font-size: 16px; } #announcement_bar a.learn-more { display: block; background: #49f; color: var(--on-contrast); position:absolute; right: 64px; width: 120px; top: 8px; border-radius: 4px; height: 34px; line-height: 34px; } #announcement_bar a.learn-more:hover { background: #27d; } .flash .dismiss { display: none; } /* homePage main Column =========================================== */ h1.homeHeader { font-size: 45px; font-weight: 400; text-shadow: 1px 1px 2px var(--bright); color: #666; } .homeStep { width: 300px; height: 300px; margin: 15px 18px 15px 0; padding:0; position:relative; background: #eaeaea; border-radius: 20px; border: solid 1px #dde; } .homeStep * { position:absolute; top:0; left:0; text-align: center; } .homeStep .bg { color: #ececed; text-shadow: 1px 0 10px rgba(110,137,155,0.15), -1px 0 10px rgba(120,137,155,0.15); font-weight: 600; height: 312px; width: 312px; font-size: 355px; line-height: 275px; z-index: 50; } .homeStep .banner { top:148px; height: 45px; padding: 5px 10px; background: rgb(100,137,165); opacity: 0.8; font-weight: 500; text-shadow: 0 1px 0 #888; color: var(--bright); z-index: 60; font-size: 17px; } .homeStep h2 { display:block; width: 294px; top: 100px; font-weight: 500; color: #ea8a35; font-size: 38px; opacity: 0.95; z-index: 70; text-shadow: 1px 1px 1px #eaeaea, -1px -1px 1px #eaeaea; } .demoVideoLink { background: var(--muted); border-radius: 15px; width: 385px; height: 68px; margin-top: 15px; position:relative; } .demoVideoLink * { color: #eee; position:absolute; } .demoVideoLink h2 { top: 7px; left: 102px; font-weight: 500; font-size: 22px; } .demoVideoLink .videoGraphic { top: 12px; left: 20px; font-size: 65px; line-height: 42px; } .demoVideoLink .blurb { font-size: 15px; top: 35px; left: 120px; } .demoVideoLink .chevron { top: 15px; right: 10px; font-weight: 900;font-size: 41px;line-height: 41px; text-shadow: 1px 0px 0px #444; } /* Phase 20: .signUpLink was the old splash CTA; the signup CTA now uses .big-button / .signup-cta. */ .demoHubBox { background: var(--muted); border-radius: 15px; width: 220px; position: relative; margin-top:25px; color: #eee; padding: 3px 0 8px 0; } .demoHubBox h3 { color: #eee; margin: 10px; font-weight: 500; font-size: 15px; text-align: center; border-bottom: solid 1px #999; } .demoHubForm { padding-top: 73px; margin: 0 auto; width: 268px; } .loginBtn { display: block; margin: 15px auto; text-align: center; } .forgotPswd { display: block; margin: 0px auto; text-align: center; } .FPSignupBtn { margin: 0 auto; display: block; width: 327px; height: 140px; } /* New Home/splash Page =========================================== */ /* Phase 19: .homePageLogin, #homeLogin and .forgot_password styled the splash login in home/_login_top.html.erb, which no template rendered. */ .inputField { height: 17px; background: transparent; } .main_title {font-size: 33px; padding:10px 0 0 0; } .under-main-title { padding: 0 2px ; } label.check-label span a { font-size: 15px; } .paragraphs { padding: 10px; } .paragraphs p { margin-top:10px; } .paragraphs h4 { font-size: 18px;color:var(--on-contrast);font-weight:normal; } div.hub_usage_background { height: 10px; border: solid 1px #eee; border-color: #1F82C6; width: 350px; margin: 0 auto; border-radius: 5px; overflow: hidden; } div.hub_usage_indicator { height: 10px; color: #eee; width:600px; background:url("/assets/hubUsageBar_03b2-a6ab1748.gif") no-repeat; background: #3C8EC7; background: #1F82C6; radius: 5px; } div.hub_usage_background.capacity-70-percent-full, div.hub_usage_background.capacity-80-percent-full { border-color: #fa4; } div.hub_usage_background.capacity-90-percent-full, div.hub_usage_background.capacity-100-percent-full { border-color: #c44; } .capacity-70-percent-full div.hub_usage_indicator, .capacity-80-percent-full div.hub_usage_indicator { background: #fa4; } .capacity-90-percent-full div.hub_usage_indicator, .capacity-100-percent-full div.hub_usage_indicator { background: #c44; } /* LEFTNAV =========================================== */ li { vertical-align: bottom; } li.clearing { height:0px; } .leftNav { width: 180px; position: relative; padding: 0px; overflow: hidden; border-radius: 8px; border: solid 1px rgb(220,221,217); padding-top: 0px; } .linkFull, .linkPart { width: 180px; height: 38px; position: relative; margin-bottom: 0px; overflow: hidden; } .leftNav a { text-shadow: 0 1px 0 var(--on-contrast); height: 40px; line-height: 38px; display: block; text-indent: 10px; color: #597192; font-size: 17px; font-weight: 400; } .leftNav .linkFull a.mainLink { width: 180px; } .leftNav .linkFull a.mainLink:hover { color: var(--accent-hover); } .leftNav .linkPart a.mainLink { width: 137px; } .leftNav .linkPart a.mainLink:hover { color: var(--accent-hover); } .leftNav span { display: none; text-decoration: none; } .leftNav a.linkAdd:hover span.orange { background: #ddd; background-position: -189px; position: absolute; left: 0; display: block; height: 28px; line-height: 28px; width: 117px; text-indent: 14px; font-size: 17px; font-weight: 600; } .leftNav a.linkAdd { text-align: center; width: 43px; height: 38px; font-size: 28px; font-weight: 500; text-indent:0; } .leftNav a.linkAdd:hover { color: var(--accent-hover); } .leftNav a.linkNext { line-height: 1.15em;} .linkBorder { height: 1px; line-height: 1px; font-size: 1px; background: rgb(225,225,235); display: block; margin: 0 2px 0 2px; overflow: hidden; vertical-align: bottom; } .LNTop { width: 180px; height: 55px; } .LNTop span { padding: 8px 14px 0 14px; display: block; } .LNBtm { width: 180px; padding: 0px; margin: 0px; } .LNBtm a { margin: 0 auto; padding: 1px; position: relative; top: 7px; display: block; width: 100px; height: 100px; border: solid 1px #ccc; border-radius: 100px; overflow: hidden; } .LNBtm a.avatar img { display: block; width: 103%; height: auto; margin-left: -1px; margin-top: -1px; } .LNBtm a.avatar { background: #333; background: transparent; border-radius: 100px; margin: 10px auto 20px; display: block; color: #888; font-size: 30px; line-height: 75px; font-weight: 200; text-align: center; text-indent: 0; text-shadow: none; } .form {margin: 0pt 0pt 10px 6px; font-size: 20px; color: rgb(68, 68, 68); line-height: 23px; text-align: left;text-decoration:none;} .fieldWithErrors { display:inline; } .fieldWithErrors input { color: red; } div.alsoPostToHeader { color: #28c; padding: 4px 7px; margin: 0 0 1px 10px; line-height: 32px; } .also_post_to label { font-size: 14px; } /* HUB HOME =========================================== */ .contentBoxHeader { position:relative; padding: 0 0 0 10px; height: 38px; line-height: 40px; font-size: 18px; border-bottom: solid 1px #c7cbcd; } .toggleLink { position:absolute; top: 0px; height: 38px; line-height: 40px; padding: 0 12px; border:none; border-top-left-radius: 0px; border-top-right-radius: 0px; } #unread_link { right: 132px; } #recent_link { right: 0px; } #oldest_first { right: 0px; } #newest_first { right: 118px; } .contentBoxHeader .last-activity-header { position: absolute; right: 10px; top: 0px; font-size: 15px; } .toggleLink { background: rgb(240,240,241); text-shadow: 1px 0 1px var(--on-contrast); border-top-right-radius: 10px; border-top-left-radius: 10px;} .toggleLink.selected { background: rgb(249, 249, 249); text-shadow: none; } #unread_link.selected { right: 130px; } #newest_first.selected { right: 116px; } #oldest_first.selected, div#recent_link.selected { border: solid 1px #c7cbcd; border-width: 1px 1px 0px 1px; } #newest_first.selected, div#unread_link.selected { border: solid 1px #c7cbcd; border-width: 1px 1px 0px 1px; } .newsHolder { width: 500px; display: block; margin: 10px 0 0 0; border-radius: 0px; overflow: hidden; } .photoHolder { width: 340px; display: block; margin: 0; text-align: left; border-radius: 10px; } .fullWideHolder { clear: both; display: block; margin: 7px 0px 0 0px; border-radius: 10px; } .contentBoxFooter { height: 30px; border-top: solid 1px #c7cbcd; padding: 7px 10px 0 10px; } .contentBoxFooter a, a.add-hub-link { text-decoration: none; border-radius: 20px; padding: 3px 10px; } .contentBoxFooter a:hover, a.add-hub-link:hover { color: #333; text-shadow: 1px 0 1px var(--on-contrast); background: rgb(231,237,242); } .memberAvatar { background: #333; color: #bbb; font-weight: 400; font-size: 16px; line-height: 32px; width: 30px; height: 30px; overflow: hidden; border-radius: 20px; text-align: center; margin-right: 7px; text-transform: uppercase; border: solid 1px #ccc; background: transparent; width: auto; height: auto; } .memberAvatar a { width: 30px; height: 30px; display: block; padding: 0px; margin: 1px; border-radius: 20px; overflow: hidden; } .memberAvatar img { width: 100%; height: auto; top: 0; left: 0; position: relative; margin: 0; padding: 0; border-radius: 50%; } .memberName a { font-size: 13px; line-height: 28px; } .lastActivity { font-size: 13px; line-height: 28px; } /* .hubMemberRow .avatarExtraSmall { width: 25px; height: 25px;padding:0; padding-right: 5px; } */ .summaryTitle { display: block; } .summaryTitle a { text-decoration: none; display: block; } .summaryTitle a:hover { text-decoration: none; } .summaryTitle { margin-bottom: 4px; } div#post-viewers.newsHolder { margin-left: 0; } #post-viewers .rowItem a { position:absolute; top: 7px; left: 10px;} #post-viewers .rowItem { padding-left: 40px; line-height: 28px; } .contentBoxFooter div { height: 40px; width:auto; } .contentBoxFooter div.total-unviewed { margin-right: 75px; } .rowItem { padding: 6px 9px; position:relative; } .newsHolder .rowItem div, #your-hubs .rowItem div { font-size: 13px; } .alternateItem { background: rgb(240, 240, 241); } /* SAFARI TEXT SHADOWS */ .shadow { text-shadow: #666666 5px 5px 5px; } p { line-height: 1.8em; margin-bottom: 7px; } .URMsg { text-align: center; padding: 20px; font-size:22px; } .URMsg p, .URMsg p a, .URMsg a { font-size:22px; line-height: 44px; } .URMsg a { color: #049; } .seqNav { display:inline; padding: 10px 0 5px 0; } .seqNav a { text-decoration: none; color: var(--bright); background: rgb(92,129,157); border-radius: 25px; padding: 4px 15px 6px; } .seqNav a:hover { background: rgb(72,109,147); } .seqNav.next { position: relative; margin: 0 auto; width: 300px; display: block; clear: none; text-align: center; } .seqNav.next a { background: #f06b20; } form#new_invitation input[type=text] { width: 92%; } div.value.invite-email-error { font-size: 13px; margin-bottom: 15px; text-transform: uppercase; font-weight: 700; color: red; margin-top: 5px; } /* In Place Editor ============================================ .darkGradBGHead span { font-size: 18px; } .in_place_editor_field { padding:8px;} .orange span { color: #ea8a35; } */ /* Phase 20: dead for the same reason as .formElement above - there is no .formElement inside #new_to_spokt. */ /* viewPost.aspx & ucPostViewer.ascx =========================================== */ /* SILVER BOX (FOR POSTS ONLY!!!) */ .rootPostHolderWrapper { margin: 0; position: relative; } .rootPostHolderTop { display: block; } .rootPostHolderBottom { height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; display: block; } .rootPostHolderPad { padding: 17px 15px 0 15px; position: relative; overflow: hidden; margin-bottom: -8px; } .rootPostHolder .unviewed .postText p { font-weight:600; color: #333; } .postText img { max-width: 100%; } .unviewed .postText p, .unviewed .postText p * { font-weight:500; color: #333; } .unviewed .postText p strong { font-weight: 700; } .rootPostHolder .unviewed { border-left: solid 6px #f77500; border-top-left-radius: 7px; border-bottom-left-radius: 7px; margin-left: -7px; } .unviewed-count.unviewed a { color:var(--accent-hover); text-shadow: 0 1px #ddd; } .unviewed-count.unviewed a:hover { color:#c05b00; } .rootPost, .replyPost .rootPostHolderWrapper { margin: 0; position: relative; } .replyPost .rootPostHolderWrapperRight { display: block; } .replyPost .rootPostHolderTop { display: block; } .replyPost .rootPostHolderTopRight { display: block; } .replyPost .rootPostHolderBottom { height: 15px; line-height: 1px; font-size: 1px; margin: 0 auto; display: block; position: relative; overflow: hidden; margin-top: -6px; } .replyPost { border-top:solid 1px #e8e8e8; padding-top: 9px; position: relative; } .postText a, .unviewed .postText a { font-size: 15px;font-weight:600; } .postText blockquote { padding: 7px 10px 7px 10px; line-height: 20px; color: #556; margin-left: 2px; border: solid 4px #dfdfdf; border-width: 0 4px 0 4px; background: rgba(239,239,239,0.5); } .postText blockquote cite { text-align: right; display: block; padding-right: 10px; } .postText blockquote cite::before { content: ' '; display: block; } .postText code { font-family: monaco, "courier new", "courier new", monospace; white-space:pre-wrap; font-size: 13px; line-height: 14px; } .unviewed .new-status-light { content: " "; width: 10px; height: 10px; border-radius: 10px; position: absolute; margin-top: 20px; left: -9px; background: rgba(114, 189, 235, 1); border: solid 1px var(--on-contrast); box-shadow: 0 0 0px 1px rgba(114, 189, 235,0); } .status-light-line { width: 30px; height: 1px; background: rgba(114, 189, 235, 1); top: 5px; position: absolute; left: 0; display: none; } /*.unviewed .avatarImage .pic { display: block; border-radius: 40px; border: solid 1px white; box-shadow: 0 0 0 1px rgba(114, 189, 235, 0); }*/ .avatarImage { overflow: none; } #recent-feed .thread { border: solid 1px rgba(90,90,90,0.3); margin-bottom: 30px; border-radius: 10px; padding: 7px 0; width: 600px;} #recent-feed .meta-tooltip { display:none; } #recent-feed .reply-link.meta-tooltip { display: inline-flex; align-items: center; gap: 2px; } #recent-feed .replyPost { padding: 9px 0 0 15px; } #recent-feed .unviewed .new-status-light { left: 6px; } .nested { position: relative; } .nested .nested .nested { position: static; } .nested .replyPost { position: relative; } .nested .replyHolder .replyHolder { margin-left: 20px; -webkit-transition: margin-left 0.5s linear; -moz-transition: margin-left 0.5s linear; -ms-transition: margin-left 0.5s linear; -o-transition: margin-left 0.5s linear; transition: margin-left 0.5s linear; } .nested.only-so-deep .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder .replyHolder { margin-left: 0; } .spinner img { position: absolute; left: 160px; top: 8px;} .spinner {display:none;} .post_photo {margin-bottom: 8px; position:relative;} .replace-photo { margin-bottom: 8px; } #member_list, .hub-settings { width:100%; clear: both; margin: 5px auto 20px auto; } body.wide-body .contentBox #member_list { width: 100%; } #member_list th, .hub-settings th { font-size: 14px; text-transform: uppercase; color: #555; font-weight: 700; } #member_list tbody tr:hover, .hub-settings tbody tr:hover { background: var(--surface); } #member_list td, .hub-settings td { font-size: 14px; padding: 8px 0; border-top: dotted 1px #ddd; } #member_list td .left a , .hub-settings td .left a { border-radius: 40px; overflow: hidden; display: block; position: relative; height: 25px; width: 25px; padding: 0; margin: 0; border: 0; } #member_list td .left a img.avatarExtraSmall { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; position: relative; top: 0; left: 0; } #member_list td .left { margin: 0 10px 0 10px; } #member_list *, .hub-settings * { font-size: 14px; line-height: 25px; } #member_list tbody, .hub-settings tbody { padding: 5px 0; } .invite-powers { margin: 0 0 0 10px; } #profilePane .invite-powers { margin: 10px 0 10px 40px; } .invite-powers input[type=radio] { width: 20px; margin-right: 0px; margin-left: 20px; -webkit-appearance: radio; } .kick-power { width: 78px; } th.list-user-name, td.list-user-name { padding-left: 46px; width: 170px; } th.email-column, td.email-column { width: 250px; } th.address-column, td.address-column { width: 220px; } th.phone-column, td.phone-column { width: 110px; } th.joined-column, td.joined-column { width: 90px; } #member-list-container a { color: #184076; } #member-list-container a:hover { color: var(--accent); } #member-list-container tbody.membership-list td { vertical-align: top; font-size: 13px; padding: 4px 6px; } #member-list-container th { padding: 4px 6px; } #member-list-container tbody.membership-list td a { font-size: 12px; } .contentBox .member-list-tools.hub-block-title.small-block { border-top: solid 1px #ddd; padding: 10px 35px; background: #f4f4f4; border-radius: 0; width: 828px; display: flex; align-items: center; gap: 10px; } .wide-body .contentBox .member-list-tools.hub-block-title.small-block { border-top: none; background: #ddd; width: 890px; } .contentBox .member-list-tools .btn { height: 16px; padding: 7px 12px 6px 12px; line-height: 16px; color: var(--muted); } .contentBox .member-list-tools a:hover.btn { text-decoration: none; } .contentBox .member-list-tools a.download-csv { order: 1; margin-left: auto; padding-top: 2px; color: var(--muted); } .contentBox .member-list-tools form { color: var(--muted); } a.download span.icon { display:inline-block; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -368px -122px; display: inline-block; width: 20px; height: 20px; position: relative; top: 2px; left: 0; } a:hover.download span.icon { background-position: -368px -162px; } a:hover.download { color: var(--accent); text-decoration: none; } .page-selector { margin-left: 5px; } .postAvatar, .poster { width: 55px; min-height: 38px; margin: 0 8px 0 0; display: block; color: #444; font-size: 13px; text-align: center; line-height: 18px; position: relative; } .poster img { margin: 0 auto; clear: both; width: 100px; display: block; } .replyName { font-size: 11px; color: var(--on-contrast); } .postBody { width: auto; padding: 0 0 23px 0; left: 6px; overflow: hidden; position: relative; min-height: 20px; margin-bottom: 0px; margin-left: 60px; margin-right: 15px; position: relative; min-height: 35px; } .postLinks { position: relative; margin-top: -14px; display: block; } .replyPost .replyWindow .postLinks { right: 14px; } /* Phase 20: the reply composer writes .big-button for these actions, so a.btnAddReply never matched; a.btnEdit is still used and keeps its rule in mobile.css (now that the empty selector list there is gone). */ .saveBtn { display: block; } a.cancelBtn { display: block; margin-left: 5px; font-weight: normal; } input.btnPost { display: block; } .searchBoxHolder { position: relative; top: -2px; right: -12px; display: inline; } /* Phase 20: a.postViewers and span.deletePost are not written by any template - the post viewer uses .linkHolder and .photo-viewer-link instead. */ .searchBox { position: absolute; right: 55px; top: 11px;} .loginU, .loginP { position: absolute; top: 11px;} .loginU { right: 175px; } #remember-this img { max-height: 180px; } #remember-this .remember-photo { height: 180px; } #remember-this .contentBoxFooter { position:relative; } #remember-this .contentBoxFooter .reply-spinner.visible { left: 10px; top: 8px; } a.btn.clear-button { height: 15px; line-height: 17px; } /* PHOTOPOST PAGE =========================================== */ /* Image Shadow */ /* smallCol =========================================== */ .postText { font-size: 17px; line-height: 1.5em; margin-bottom: 15px; } .postText h3 { font-size: 24px; margin: 8px 0 12px 0; font-weight: 500; } .GSBtn a { width: 641px; height: 149px; margin: 10px auto; display: block; clear: both; } /* SEARCH PAGE ===============================================*/ .search-field { margin-bottom: 5px; } .search-form select { border: solid 1px #ddd; border-radius: 3px; width: 560px; } a.show-advanced-search { display:block; padding: 10px; color: #666; } .searchResultBox b { color: #000; background: #ffa; background: rgba(255,255,000, 0.4);font-weight: 600; padding: 0 3px 0 3px; border-radius: 3px; } .searchLink.right { color: #F8610C;} .searchResult { border-radius: 5px; border: solid 1px #ddd; display:block; margin: 20px 8px 0 10px; padding: 12px; width:195px; height:300px; overflow:hidden; position: relative; } .searchResult .search-header { width: 219px; height: 146px; overflow: hidden; margin-left: -12px; margin-top: -12px; } /* this will hightlight search terms */ .searchResult em.old { background: rgba(0,115,255, 0.05); font-weight: 600; font-style: normal; font-size: inherit; border-radius: 15px; border: solid 1px #cef; padding: 1px 4px; margin: 1px -5px; } .searchResult em { font-weight: 600; font-style: normal; font-size: inherit; } .post-result .search-header, .poll-result .search-header { background: url("/assets/search-result-no-image-f8e2e71a.png") no-repeat; } .search-image { width: 219px; height: 146px; display: block; overflow: hidden; } .search-image img { width: 219px; margin: -35px 0 0 0; } .searchResult h3.summaryTitle a { margin: 12px 0 0; font-size: 14px; color: #334; font-weight: 700; text-transform: uppercase; } .searchResult .posted-by { margin: 0px; font-size: 11px; color: #999; text-transform: uppercase; } .searchResult .excerpt { margin: 0px; overflow: hidden; margin-top: 10px; font-size: 13px; color: var(--muted); height: 80px; } .excerpt a { font-size: 12px; } .searchResult .view-post { padding: 30px 0 12px 0; display: block; position: absolute; bottom: 0; width: 100%; left: 0px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgb(249, 249, 249) 36%); } .searchResult .view-post a { display:block; margin-top: 5px; text-transform: uppercase; color: #888; font-size: 13px; font-weight: 600; text-align: center; } .searchResult .view-post a:hover { color: #555; text-decoration: none; } .video-strip img { height: 147px; } .book-search .hubFormLabel, .user-search .hubFormLabel { line-height: 40px; } /* PAGINATION CONTROL =========================================== */ #post_list { min-height: 692px; } div.pagination { margin: 0 auto; } .pagination div { margin-top: -7px; } .pagination { color: var(--bright); padding: 8px 10px; line-height: 38px; } .pagination a { color: #555; line-height: 17px; padding: 4px; border-radius: 3px; background: transparent; border: solid 1px #555; text-decoration: none; display:inline-block; min-width:25px; text-align: center; } .pagination em.current { color: var(--on-contrast); line-height: 17px; padding: 4px; border-radius: 3px; background: #555; border: solid 1px #555; text-decoration: none; display:inline-block; min-width:25px; text-align: center; font-style: normal; } .pagination span.gap { color: #ccc; } .pagination a.previous_page { padding-left: 15px; padding-right: 15px; } .pagination a.next_page { padding-left: 15px; padding-right: 15px; } .pagination a:hover { color: #eee; background: #555; } .pagination span.disabled { color: #999; padding: 4px; border: solid 1px transparent; } .paginator { text-align: center; color: var(--on-contrast); } .pagination span.previous_page, .pagination span.next_page { color: #999; padding: 0; padding-left: 15px; padding-right: 15px; border: solid 1px transparent; position: relative; display: inline-block; } .fileUpload { width: 500px; padding: 0 0 0 0px; margin-left: 135px; } .fileUpload a { display: inline-block; min-height: 28px; background: #fcfcfc; border-radius: 3px; border: solid 1px #ddd; line-height: 28px; color: #556; padding: 0 17px; } .fileUpload a:hover { text-decoration: none; color: #333; background: var(--surface); border: solid 1px #ccc; } .fileUpload .upload { border-top: none; padding-top: 5px; width: 100%; max-width: 500px; color: #28c; font-size: 15px; line-height: 18px; } .fileUpload .upload-details { display: flex; justify-content: space-between; gap: 12px; } .fileUpload .upload .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fileUpload .upload-progress-label { color: var(--muted); flex: 0 0 auto; font-size: 12px; } .fileUpload .upload .progress { background: rgba(128, 128, 128, 0.2); border: solid 1px #aaa; border-radius: 5px; height: 10px; margin-top: 4px; overflow: hidden; } .fileUpload .upload .progress .bar { background-color: #59cf85; height: 100%; min-width: 0; transition: width 150ms linear; } /* SIMPLE Footer =========================================== */ #footerWrap { margin-top: 0px; padding-top: 50px; background: var(--footer-surface); position: relative; font-size: 12px; } #footerWrap * { line-height: 2em; } .footerContent { width: 960px; margin: 0 auto; } input.textbox_off, input.textbox_off:focus, input.textbox_off:hover { background-color: transparent; } input.textbox_focus, input.textbox_focus:focus, input.textbox_focus:hover { background-color: #fafafc; } input[type="text"]#user_session_login:-webkit-autofill, input[type="password"]#user_session_password:-webkit-autofill { -webkit-box-shadow:0 0 0 25px #eee inset; /* overrides the autofill background color with a thick inset border */ -webkit-text-fill-color: #333; } input[type="text"]#user_session_login:-webkit-autofill:focus, input[type="password"]#user_session_password:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 25px #eee inset; -webkit-text-fill-color: #333; } p.instructions { margin:0px 9px; } input[type="text"]#user_session_login, input[type="password"]#user_session_password, .new_hub input#hub_name, .exampletext { position: absolute; height: 24px; border-radius: 10px; padding: 2px 6px; width: 130px; } input[type="text"]#user_session_login, input[type="password"]#user_session_password { border: none; box-shadow: none; } .new_hub input[type="submit"] { width: 50px; padding: 8px; border-radius: 40px; height:28px;line-height: 10px;margin-right:2px; } .exampletext { color: #999; background: #dfdfdf; overflow: hidden;line-height: 25px; } #outer #pageWrap { background: none; width: 100%; } .seePlansBtn { margin-left: 10px; margin-bottom: -6px; } .costCopy { color: #eee; font-size: 13px; line-height: 25px; margin-left: 10px; margin-right: 10px; clear: none;text-align: left; } .footerColumn { width: 250px; margin-right: 30px; margin-bottom: 60px; } #footerWrap .footerColumn h3 { font-family: "Chaparral Pro", Raleway, Georgia, "Helvetica Neue", Helvetica, "Source Sans Pro", "Open Sans", sans-serif; font-size: 18px; font-weight: 600; padding-bottom: 1px; border-bottom: none; margin-bottom: 10px; text-transform: uppercase; color: var(--footer-heading); letter-spacing: 1px; } .footerColumn a { font-size: 14px; font-weight: 400; line-height: 1.5em; } .footerColumn div, .footerContent a, .footerContent span, .footerContent { font-size: 14px; } #footerWrap * { color: #ddd; text-decoration: none; } #footerWrap a { display: block; color: var(--footer-link); text-decoration: none; } #footerWrap a:hover { color: var(--footer-link-hover); } #footerWrap .footerColumn div { line-height: 20px; color: #b2b2b2; min-height: 22px; display: block; } #footerWrap .footerBottom { background: var(--footer-bottom-surface); height: 75px; line-height: 75px; } #footerWrap .footerBottom * { height: 75px; line-height: 75px; } #footerWrap .footerBottom a { display: inline; } #footerWrap .footerBottom a:hover { text-decoration: underline; color: var(--footer-bottom-link-hover); } .footerColumn.blogposts { width: 300px; } .video_thumbs { margin: 0 5px 5px 0; padding:7px 7px 5px 8px;text-align:center; position:relative; } .video_thumbs img { height: 100px; } #downloadVideo { margin-right:5px; color:#888; } /* PHOTO GRIDS =========================================== */ /* These classes are for the photo grids */ .photoGroupBox { border: solid 3px transparent; width: 330px; margin: 3px; height: 330px; display: block; position: relative; } .photoGroupBox a, #photo-grid a { overflow: hidden; border-radius: 0; margin: 0; position: relative; display: block; } a.s9 { width: 110px; height: 110px; } a.s49 { width: 220px; height: 220px; } a.s4 { width: 165px; height: 165px; } a.sf { width: 330px; height: 330px; } /* 290px -> 320 */ .s49 img, .s4 img, .s9 img, .sf img { border: 0px; width: 100%; height: 100%; opacity: 0; } a.s9:hover, a.s49:hover, a.s4:hover { opacity: 0.8; } /* Square Image 1/9th of the grid */ /* Square Image 4/9ths of the grid */ .header-avatar { display: inline-block; margin-right: 15px; position: relative; top: 25px; margin-top: -35px; } #user_profile .label { width: 200px; color: #555; text-align:right; line-height: 1.6em } #user_profile .value { width:300px; margin-left:10px; line-height: 1.6em; } #user_profile h2 { font-weight: 300; padding: 35px 0px 10px 20px; border-bottom: solid 1px #ccc; width: 520px; margin: 0px 0px 10px 0px; } #user_profile .centerLineLight { margin:5px; } p.hint { font-size: 12px; } form#new_hub { margin: 10px; } /* NO SHRINKING ROLLOVERS =========================================== */ /* a.s9 img { width: 100px; height:100px; position: relative; top: 0px; left: 0px; } a.s9 { border: 0px; width: 100px; height: 100px; position: relative; overflow: hidden; display: block; float: left; } a.s9:hover { border: solid 10px #08f; width: 80px; height: 80px; position: relative; display: block; overflow: hidden; } a.s9:hover img { position: absolute; top: -10px; left: -10px; } a.s49 img { width: 200px; height: 200px; position: relative; display: block; } a.s49 { border: 0px; width: 199px; height: 199px; position: relative; overflow: hidden; display: block; float: left; overflow: hidden; } a.s49:hover img { position: absolute; top: -10px; left: -10px; width: 200px; height: 200px; } a.s49:hover { border: solid 10px #f80; width: 180px; height: 180px; } */ /* SHRINKING ROLLOVERS =========================================== */ /* a.s9 { border: 0px; width: 100px; height: 100px; display: block; float: left; } a.s9 img { width: 100px; height: 100px; } a.s9:hover { border: solid 10px transparent; width: 80px; height: 80px; display: block; } a.s9:hover img { width: 80px; height: 80px; display: block; } a.s4 { border: 0px; width: 150px; height: 150px; display: block; float: left; } a.s4 img { width: 150px; height: 150px; } a.s4:hover { border: solid 10px transparent; width: 130px; height: 130px; display: block; } a.s4:hover img { width: 130px; height: 130px; display: block; } a.s49 { border: 0px; width: 200px; height: 200px; display: block; float: left; } a.s49 img { width: 200px; height: 200px; } a.s49:hover { border: solid 10px transparent; width: 180px; height: 180px; display: block; } a.s49:hover img { width: 180px; height: 180px; display: block; } a.sf { border: 0px; width: 300px; height: 300px; display: block; float: left; } a.sf img { width: 300px; height: 300px; } a.sf:hover { border: solid 10px transparent; width: 280px; height: 280px; display: block; } a.sf:hover img { width: 280px; height: 280px; display: block; } */ .input-full-width { width:488px; } img.gridImage.S { max-width: 250px; max-width: 250px; border-radius: 12px; } div.postText p img, div.post_photo a img { border-radius: 8px; max-width: 100%; max-height: 600px; } .faqHolder a { color: #F8610C; padding: 3px; } .faqHolder a:hover { background: var(--extra-juice); color: var(--on-contrast); border-radius: 5px; } .faqHolder .faq { font-size: 12pt; line-height: 14pt; /* background: #ddd; */ width: 80%; } .bigletter { font-size: 18pt; font-weight: 500; padding-bottom: 10px; border-bottom: dotted 1px var(--muted); margin-bottom: 14px; } .faq { margin-top: 10px; margin-bottom: 10px; border: 0px; padding: 9px; line-height: 18px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .faq p {margin-bottom: 12px; font-size: 13pt; line-height: 25px; margin-left: 10px; } .faq .faqlinks { margin: 35px 0px 5px 15px; width: 150px; background: transparent; border: solid 1px #ccc; padding: 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .faqlinks a { display: block; padding: 5px; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; } div#view-photo { padding:25px;text-align:center;width:896px; margin: 0px auto; } div#view-photo img { border-radius: 10px; margin-bottom: 5px; } div#view-photo img.L { max-width: 800px; max-height: 800px; } div#view-photo img.M { max-width: 624px; max-height: 607px; } div#view-photo img.S { max-width: 250px; max-height: 250px; } form.edit_post img.size-T { max-width: 200px; } .photoViewer { background: #d6d6d6; margin: 10px; min-width:960px; border: solid 1px #ccc; clear: both; width: auto; position: relative; display: block; border-radius: 10px; } .photoCaption { text-align: center; margin-bottom: 25px; font-size: 24px; text-shadow: var(--caption-shadow); color: var(--caption-text); } .four-zero-four h3 { font-size: 20px; line-height: 32px; margin-top: 8px; } .four-zero-four ul { padding-left: 10px; } .spaceDescription { padding: 10px 25px; width: 320px; text-align: center; margin: 0 auto; font-size: 14px; display:block; } /* ============================================ BEGIN POLLS STYLES ===============================================*/ a.responderNames { display: block; clear: both; height: 15px; padding-top: 3px; position: relative; cursor: default; } a.responderNames span { display: none; } a.responderNames:hover span { display: block; position: absolute; top: -25px; line-height: 21px; font-size: 13px; color: var(--on-contrast); left: 50px; text-decoration: none; background: #44444f; padding: 5px; border-radius: 7px; width: 270px; border: none; z-index: 1000; overflow: scroll; padding: 8px 16px; height: 105px; opacity: 0.95; box-shadow: #999 3px 3px 10px 1px; } /* Phase 19: dropped .responseRateBar and .responseGlass from this list - no template produced either class. The bar that does render is .responseRateBarTen, which has its own absolutely positioned rule below. */ .responseLabel { text-align: left; } .responseCount { text-align: right; padding-right: 5px; line-height: 19px; position: relative; bottom: 0px; } div#pollContent { padding-top: 10px; } .pollOptions div { margin:6px;margin-left:20px; } .pollOptions div a { padding: 4px 15px; text-decoration:none; } .pollOptions div a:hover { background: rgb(100,137,165); border-radius: 25px; color: var(--on-contrast); } .noshow { height: 0px; width: 0px; } .pollHolder { width: 620px; border-radius: 10px; } .pollHeader { border-bottom: solid 1px #aaa; display: block; text-indent: 5px; padding: 9px 8px 6px 8px; } .pollFooter { width: 590px; height: 32px; border-top: solid 1px #aaa; padding: 0 0 0 10px; margin: 20px 0 0 0; } .pollFooter div { line-height: 32px; margin-left: 8px; } .pollFooter a { padding: 2px 10px; text-decoration: none; } .pollFooter a:hover { background: rgb(100,137,165); border-radius: 25px; color: rgb(244,244,246); } .pollResponseLeft {width: 99px; position: absolute; bottom: 1px;} .pollResponseRight { width: 440px; } .responseCount { text-align: right; font-size: 18px; font-weight: 300; } .pollBar { width: 376px; position: relative; } .pollBG { height: 10px; position: relative; width: 375px; border: solid 1px #ccc; padding: 0; border-radius: 7px; } .responseRateBarTen { height: 10px; position: absolute; top: 0; left: 0; border-radius: 5px; } .pollPercent { text-indent: 5px; right: 0; width: 62px; font-size: 17px; position: absolute; bottom: -3px; } /* END Polls Styles ===============================================*/ .avatarExtraSmall { height: 20px; width: 20px; padding: 2px; } .avatarSmallRound { height: 45px; width: 45px; padding: 2px; border-radius: 40px; } .avatarSmall { height: 50px; width: 50px; padding: 2px; } .avatarMedium { height: 75px; width: 75px; padding: 0px; } .avatarLarge { height: 70px; width: 70px; border-radius: 40px; } .checkboxen label { padding-right:6px; } th { text-align:left; font-weight: 700; } .postLinks a#attachmentDownload { position: relative; top: 12px; font-size: 11px; padding: 3px 3px 0px 14px; max-width: 400px; width: auto; line-height: 25px; font-size:14px; } .profile-row { display:block; height: 44px; width: 658px; overflow:hidden; } .profile-row .hubFormLabel { margin-top: 6px; line-height: 26px; } .profile-row .hubFormInput select { margin-top: 4px; } .hubFormInput.label-less { margin-left: 137px; } .profile-row.phone-numbers { height: auto; } select { font-size: 16px; } #your-hubs { top: 75px; right: 15px; width: 436px; border-radius: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .new-modal { position:absolute; display:none; z-index: 110;background: rgb(244, 244, 246); border-radius: 8px; } .new-modal .contentBoxHeader, .new-modal .contentBoxHeaderLeft, .new-modal .contentBoxHeaderRight, .new-modal .contentBoxFooter, .new-modal .contentBoxFooterRight, .new-modal .contentBoxFooterLeft { background: none; } #your-hubs-bg { opacity: 0.4; cursor: pointer; } .hubFormLabel { line-height: 29px; } #plan-chooser { width: 500px; top: 100px; left: 258px; } #plan-chooser p { background: #dedede; padding: 25px;padding-bottom:10px; } #plan-chooser ul { background: #dedede; padding-left: 35px;padding-bottom: 25px; } #plan-chooser ul li { line-height: 32px; } #plan-chooser ul li label { padding-left: 5px; } table.membership-preferences { width: 700px; } #payment-form select { padding: 3px; font-size: 16px; color: #444; height: 32px; line-height: 32px; border: 1px solid #CCC; border-radius: 3px; margin-right: 10px; } .translucent-form label.for-select { margin-right: 23px; } /* Phase 19: the .payment-left-side / .payment-right-side / .payment-plan two column checkout went to nothing - the signup and billing screens use .signupStep, .price-row and .translucent-form. #payment-form and .form-row above and below are live. */ .form-row { line-height: 22px; padding: 4px 0px 4px; } .form-row.button { margin-top: 5px; } .form-row input[type="text"] { background: var(--bright); border: solid 1px #999; font-size: 18px; outline:none; padding: 4px; border-radius: 3px; box-shadow: inset 0 1px 2px #bbb; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); } .form-row input:focus, .form-row input[type="text"]:focus,.form-row input[type="text"]:hover { background: var(--surface); border: solid 1px #555; } .form-row input:focus, .form-row input[type="text"]:focus { box-shadow: 0px 0px 6px #0088dd; box-shadow: 0px 0px 6px rgba(0,140,255,0.55); border-color: #888; } .form-row label { display:block; font-weight: 600; padding-left: 3px; } #freeloader-message, #delayed-message { text-align: center; background: rgb(100,137,165); color: var(--on-contrast); font-size: 17px; margin: 0px 0 15px 0; padding: 10px; border-radius: 20px; border: solid 1px rgb(102,139,167);} #freeloader-message a, #delayed-message a { color: var(--on-contrast); } #payment-buttons { margin-top: 5px; } #payment-buttons input { display:inline-block; margin-right: 5px; } #remind_me { padding: 5px 10px 5px; } .form-row.button button.btn { font-size: 15px; } .contentBox a.btn, .btn { text-decoration: none; display: inline-block; color: var(--muted); text-align: center; border: 1px solid #bbb; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; cursor: pointer; margin-left: .3em; text-transform: uppercase; background: var(--surface); font-weight: 500; padding: 7px 25px 7px; font-size: 15px; line-height: 28px; } .btn.btn-medium { padding: 7px 25px 7px; font-size: 15px; line-height: 28px; } .btn:first-child { margin-left: 0; } .btn:hover { color: #f06b1f; border-color: #f06b1f; } .btn:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn.active, .btn:active { background-image: none; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); background-color: #e6e6e6; background-color: #d9d9d9; color: rgba(0, 0, 0, 0.5); outline: 0; } .btn.disabled, .btn[disabled] { cursor: default; background-image: none; background-color: #e6e6e6; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn-primary { background-color: #006dcc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -ms-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(top, #0088cc, #0044cc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { background-color: #0044cc; } .btn-primary:active, .btn-primary.active { background-color: #003399 \9; } .btn-primary, .btn-primary:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: var(--on-contrast); } .btn.btn-danger { background: #c44; color: var(--on-contrast); margin-top: 12px; } .btn.btn-danger:hover { text-decoration: none; color: #eee; background: #e44; } .small-button { height: 14px; line-height: 14px; padding: 0; } div.demo-hub-form { width: 350px; } .new_hub .demo-hub-form label { display:block; } .new_hub .demo-hub-form input#hub_name { font-size: 20px; height: 30px; width: 200px; display:block; } /* Phase 20: .photo-container and .demo-photo belonged to the old framed photo viewer; the mosaic uses .photoGroupBox/.photoFrame now. */ table thead tr td { font-weight: 500; } table tbody tr td.numeric { text-align: right; } table tbody tr th { font-weight: 700; } table tbody tr.error td { color: red; } table.stats tbody tr td,table.stats tbody tr th { padding: 4px; } div.rotation-controls { padding: 5px; text-align: center; color: #333; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: rgba(255,255,255,0.6); text-shadow: 0 1px 0 #eee; position:absolute; bottom: 15px; left: 0; display:none; width: 100px; } a.rotate-image { margin: 4px; opacity: 0.6; display:inline-block; width: 32px; height: 32px; background: url("/assets/spokt-sprite-4c0b2ade.png") -2px -20px no-repeat; } a.rotate-image.clockwise { background-position: -32px -20px; right: 54px; } a.rotate-image:hover { opacity: 1; } div.post_photo:hover div.rotation-controls { display: block; font-size: 13px; } div.rotation-controls:hover { background: rgba(255,255,255,0.8);} table.invitation-list { width: 100%; } table.invitation-list tr th { font-size: 13px; padding: 3px; } table.invitation-list tr td { font-size: 13px; padding: 3px; } table.invitation-list tr td a { font-size: 13px; } /* Phase 20: #homeLogin and its inner .form belonged to the splash login sidebar in the two dead _login_top templates; no template writes that id in either layout directory. */ .hidden { display:none; } .showmore { text-align: center; height: 31px; line-height: 32px;} .showmore a { color: #aaa; } .avatarImage { width: 48px; height: 48px; margin: 0 auto; overflow: hidden; display: block; } .unaccepted-invitation-list { width: 100%; margin: 0; } .unaccepted-invitations-box { margin: 20px 0;} .unaccepted-invitations-box h2 { margin-top: 20px; } .data-row .row-item, .unaccepted-invitation-list .row-item { width: 30%; line-height: 32px; height: 32px; } .data-row.warning { background: rgba(250,0,0,0.04); } .data-row.counts-match { background: rgba(0,250,0,0.05); } .unaccepted-invitation-list .row-item-header { font-weight: 600; } .unaccepted-invitation-list .join-hub a { color: #da6a25; font-weight: 600; } .unaccepted-invitation-list .join-hub a:hover { color: #fa8a45; } .unaccepted-invitation-list .join-hub { text-align: center; } .unaccepted-invitation-row { margin-bottom: 5px; } .hub-membership-row .row-item { width: 160px; font-size: 13px; line-height: 18px; height: auto; } .hub-membership-row .row-item.hm-rank { width: 60px; } .row-item.hm-status { width: 250px; } #admin .admin-tool .hub-membership-row .row-item.hm-stats { font-size: inherit; width: 125px; } .row-item.hub-payment { width: 200px; } .hub-name { width: 203px; display: block; line-height: 1.5em; } .next-unviewed { padding: 0 8px; } .admin-payment-list { max-height: 140px; overflow: scroll; } .small-admin-item { font-size: 12px; text-transform: uppercase; line-height: 25px; font-weight: 500; color: var(--muted); } #admin .admin-tool .hub-membership-row .row-item.row-item-discussions { width: 160px; } .new-site-row .export-counts em.step-name { font-size: 25px; opacity: 0.1; } table.admin-table { border-bottom: solid 1px #efefef; } table.admin-table td { color: #555; font-size: 13px; border-top: solid 1px #efefef; padding: 5px; } table.admin-table td .small-button { width: 100%; font-size: 12px; padding: 5px 0; height: 42px;} tr.inquiry-review td textarea.inquiry-message { width: 100%; } tr.inquiry-review.marked-as-spam td textarea.inquiry-message { color: #a00; } .filter-reason {font-size: 12px; color: #888; text-align: center; } #update-in-progress { display:none; } .spam-it { color: #c00; } .unspam-it { color: #0a0; } .mf-payment-status a { font-size: inherit; } form.conact-us-form label { display:block; margin: 10px 0 5px 0; } .avatarImage, .avatarImage .pic, .avatarImage .pic img { width: 48px; height: 48px; padding: 3px; } .avatarImage .pic, .avatarImage .pic img { margin: 0; padding: 0; } .avatarImage .pic { display: block; } .postText p { width: auto; } .replyPost.dynamic { border-top: none; margin: 7px 13px 0 0; position: relative; height: auto; margin-left: 100px; box-sizing: border-box; } .light, .light a { color: #bbb; text-decoration: none; } div.replyPost.dynamic div.replyControls { width: 100%; margin-top:10px; text-align: right; position:relative; } form.reply_form { padding: 15px 0; border-top: dashed 1px #ccc; } .replyPost.dynamic textarea { width: 585px; min-height: 70px; border-color: #ccc; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; width: 100%; margin-right: 15px; box-sizing: border-box!important; } .reply-spinner { position:absolute; left: -12000px; top: 8px; } .reply-spinner.visible { left: 80px; top: 15px; } .pollResponseContainer { width: 540px; clear: both; position: relative; margin: 7px 0; } .special_info { display:none; } .pagination em, .pagination .disabled { color: #888; } /* Phase 20: .video-js-box wrapped a player markup we no longer write; the .vjs-* skin rules below stay because video.js still injects those classes. */ .vjs-default-skin { color: var(--on-contrast); } .vjs-default-skin .vjs-loading-spinner::before { color: var(--on-contrast); } .vjs-default-skin .vjs-big-play-button::before { line-height: 1.6em; } .vjs-default-skin .vjs-control-bar { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .vjs-default-skin .vjs-control-bar * { font-size: 1em; color: #ccc; } .vjs-default-skin .vjs-control-bar, .vjs-default-skin .vjs-big-play-button { color: #eee; background: rgba(0,0,0,0.4); } .vjs-default-skin .vjs-big-play-button { border-color: rgba(255, 255, 255, 0.85); top: 162px; left: 282px; height: 80px; width: 155px; border-radius: 65px; } .vjs-default-skin .vjs-slider { background: rgba(0,0,0,0.17666666666666667) } .vjs-default-skin .vjs-control-bar { font-size: 118% } .more-unviewed-for-you em { font-weight: 600; font-style: normal; color: var(--accent-hover); } .newsHolder .more-unviewed-for-you em { color: #444; } .fullWideHolder .adjust-link-message { display: none; } .newsHolder .adjust-below-message { display: none; } .newsHolder .adjust-link-message a { color: #f06b00; font-weight: 600; } .new-hub-box p.after-new-hub-message { padding-left: 10px; padding-top: 20px; } /* Phase 20: the absolute pricing column (.pricing-box, .big-price) predates the signup wizard; the wizard uses .signupStep/.price-row and was never painted by these rules. */ .rootPost:hover a.reply-link, .replyPost:hover a.reply-link { color: #e68630; } .rootPost:hover a.reply-link:hover, .replyPost:hover a.reply-link:hover { color: #e1812c; } /* ========================== 2014 styles ========================== */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: Lato, Raleway, "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; } a { font-weight: 400; } body { /* background: #101415; */ } body.modal { background: var(--page-surface); } body#home { width: 100%; height: 100%; } #header { height: 75px; width: 100%; background: var(--header-surface); position: relative; } #home #header .inner, #header .inner { width: 1140px; margin: 0 auto; padding: 0 15px; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .homePage #header { z-index: 50; } .inner { width: 1000px; margin: 0 auto; padding: 0 15px; } .inner .site-nav { line-height: 75px; height: 75px; } .inner .site-nav a { display: block; margin: 0 15px; color: #ddd; } .inner .site-nav a:hover { color: var(--on-contrast); } .hubsLink { font-weight: 600; } .logo { width: 190px; height: 50px; display: block; background-image: url("/assets/spokt-sprite-new-9edf67af.png"); background-position: -23px -40px; } a.button { border: solid 1px var(--on-contrast); line-height: 38px; padding: 0 20px; border-radius: 5px; color: var(--on-contrast); } /* #header .inner .site-nav a.button { margin-top: 18px; } */ #header .inner .site-nav a.button:hover { background: var(--surface); color: #333; } .content-wrap { width: 1000px; position: relative; z-index: 1; background: var(--page-surface); margin: 0 auto; } .content-wrap.wide-pages { width: 100%; } .content-wrap.top-page-hero { margin-top: -76px; } .hero-copy { padding-top: 75px; padding-left: 15px; z-index: 10; position: relative; min-height: 700px; margin: 0 auto; width: 1000px; } .hero-image { position: absolute; top: 0; left: 0; z-index: 1; min-height: 700px; width: 100%; } .hero-image.signup-hero-image { right: 0; bottom: 0; min-height: 500px; height: auto; } .hero-image.signup-hero-image .hero-inner { height: 100%; } .hero-inner { height: 700px; overflow: hidden; } .hero-inner img { width: 100%; } .hero-image.signup-hero-image-2 { min-height: 500px; height: 500px; width: 100%; } .hero-inner.hero-inner-3 { min-height: 500px; height: 500px; } .hero-copy h1 { font-size: 110px; font-family: "Chaparral Pro", "Brandon Grotesque", "Helvetica Neue", Helvetica, sans-serif; font-weight: 100; color: var(--on-contrast); line-height: 0.85em; text-transform: uppercase; } .hero-copy h1 br { font-size: 1px; height: 1px; clear: both; line-height: 1px; width: 100%; } .hero-copy-inner.checkout-box .plan-chooser { margin: 0 20px; width: 230px; height: 170px; background: #f05b00; background: rgba(53, 91, 127, 0.4); border: 0; padding: 15px; color: rgba(244,244,244, 0.7); text-align: center; border-radius: 6px; box-shadow: inset 0 0 50px rgba(0,0,0,0.1); } .hero-copy-inner.checkout-box .plan-chooser.selected { background: rgba(242, 100, 42, 0.9); color: var(--on-contrast); } .hero-copy-inner.checkout-box .plan-chooser.selected a { display:none; } .plan-chooser span.selected-indicator { display:none; } .hero-copy-inner.checkout-box .plan-chooser:hover { color: var(--on-contrast); } .hero-copy-inner.checkout-box .plan-chooser .plan-name { text-transform: uppercase; font-size: 28px; } .hero-copy-inner.checkout-box .plan-chooser .amount { font-size: 20px; } .hero-copy-inner.checkout-box .plan-chooser a,.plan-chooser.selected span.selected-indicator { display: block; margin: 15px 0; color: rgba(244,244,244, 0.7); border: solid 1px var(--on-contrast); border: solid 1px rgba(255,255,255,0.4); text-transform: uppercase; padding: 4px 8px; border-radius: 4px; font-size: 18px; line-height: 30px; height: 42px; } .hero-copy-inner.checkout-box .plan-chooser.selected a, .hero-copy-inner.checkout-box .plan-chooser:hover a,.plan-chooser.selected span.selected-indicator { color: var(--on-contrast); } .plan-chooser.selected span.selected-indicator { color: rgba(242, 100, 42, 0.9); background: var(--surface); border: none; /* margin-left: -15px; margin-right: -15px; border-radius: 0; */ } .signup-hero-copy h1, h1.section-header { font-family: "Raleway", "Helvetica Neue", Helvetica, sans-serif; font-weight: 200; color: #575757; font-size: 38px; text-transform: uppercase; text-align: center; margin: 60px auto; } .login-wrapper, .signup-form-wrapper { width: 600px; margin: 0 auto; background: #111; background: rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.2), inset 0 0 350px rgba(0,0,0,0.25); padding: 35px 35px 25px 35px; margin-bottom: 40px; } .login-wrapper .big-button { width: auto; margin-top: 10px; } .hero-copy-inner .login-wrapper p { margin-bottom: 0; } .signup-form-wrapper.mayflower { width: 700px; box-shadow: 0 0 50px rgba(0,0,0,0.3), inset 0 0 550px rgba(0,0,0,0.75); } .signup-hero-copy-2 { min-height: 0; height: auto; } .signup-hero-copy-2 h1.section-header { color: var(--on-contrast); line-height: 1.4em; margin: 10px 0 30px; } .signup-hero-copy-2 h1.section-header span { color: inherit; font-size: inherit; font-weight: 400; } .signup-hero-copy-2 p.section-header { color: var(--on-contrast); } .signup-hero-copy-2 a.big.button { color: var(--on-contrast); border-color: var(--on-contrast); margin-bottom: 90px; font-weight: 300; font-size: 26px; line-height: 72px; } .signup-hero-copy-2 a.big.button:hover { color: #333; background: var(--surface); } /* Demo hero section: overlay text on hero image */ .demo-hero-section { position: relative; overflow: hidden; } .demo-hero-section .hero-image.signup-hero-image-2 { position: absolute; top: 0; left: 0; z-index: 1; } .demo-hero-section .signup-hero-copy-2 { min-height: 500px; height: 500px; } .signup-hero-copy-inner h3 { color: var(--on-contrast); font-family: "Chaparral Pro", "Brandon Grotesque", Raleway, "Helvetica Neue", Helvetica, sans-serif; font-size: 26px; text-transform: uppercase; line-height: 1.3em; margin-bottom: 8px; } .reset-pass-link { color: var(--on-contrast); text-decoration: underline; margin: 0 auto 15px; display: block; } .translucent-form textarea:focus, .translucent-form input[type=tel]:hover, .translucent-form input[type=tel]:focus, .translucent-form input[type=password]:hover, .translucent-form input[type=password]:focus, .translucent-form input[type=text]:hover, .translucent-form input[type=text]:focus { color: var(--on-contrast); background: #333; background: rgba(255,255,255,0.11); border: solid 1px var(--on-contrast); border: solid 1px var(--border); } .signup-box .translucent-form input:hover, .signup-box .translucent-form input:focus { border-color: rgba(59, 143, 148, 0.5); color: rgba(59, 143, 148, 1); } .signup-box .translucent-form input[type=submit] { width: auto; } .translucent-form textarea, .translucent-form input { font-size: 16px; line-height: 24px; padding: 13px 15px; color: var(--on-contrast); background: #333; background: rgba(255,255,255,0.11); border: solid 1px var(--on-contrast); border: solid 1px rgba(255,255,255,0.09); border-radius: 7px; width: 350px; margin-right: 15px; margin-bottom: 15px; } .translucent-form input#password { width: 85%; } .translucent-form .clearfix.form-line { position: relative; } .translucent-form a.show-password { color: var(--on-contrast); width: 14%; position:absolute; right: 0px; bottom: 13px; text-align: center; border: solid 1px var(--on-contrast); border-radius: 4px; padding: 6px; font-size: 12px; } .translucent-form a.show-password:hover { color: #f05b00; border-color: #f05b00;} .login-wrapper .translucent-form label, .translucent-form label { line-height: 52px; color: var(--on-contrast); font-size: 16px; text-transform: uppercase; } .login-wrapper .translucent-form label { line-height: 1.2em; color: #ddd; font-size: 14px; margin: 15px 0 8px 12px; } .translucent-form .screen-createUser { display:none; } #stripe_error, .inline-error { display: block; color: var(--on-contrast); background: #e92; background: rgba(255,140,40,0.7); clear: both; padding: 10px; margin-bottom: 15px; border-radius: 5px; font-size: 15px; } #stripe_error { display:none; } .translucent-form-narrow input[type=text], .translucent-form-narrow input[type=password] { width: 190px; } #already_spokt h3, #new_to_spokt h3 { cursor: pointer; } .home-hero-copy-inner { position: absolute; bottom: 0; padding-bottom: 75px; } .hero-copy-inner p { margin-bottom: 20px; } .signup-hero-copy-inner p { color: var(--on-contrast); font-family: "Raleway", "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; line-height: 1.7em; } p.subline { color: #bbb; font-size: 15px; margin-bottom: 0; } .signup-hero-copy.inner p.subline { margin-top: 12px; padding-right: 50px; margin-bottom: 0; } .home-hero-copy-inner p span { color: var(--on-contrast); font-size: 21px; font-family: "Raleway", "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; display: block; line-height: 1.6em; font-weight: 300; } .home-hero-iti-links a.button { font-size: 18px; margin-left: 0; text-transform: none; } .home-hero-iti-links a.button:hover { color: #333; background: var(--surface); } .home-hero-iti-links a { margin-left: 20px; line-height: 38px; display: block; color: var(--on-contrast); font-size: 15px; text-transform: uppercase; } .home-hero-iti-links a.home-demo-link { font-size: 18px; color: rgba(255,255,255,0.8); color: var(--on-contrast);font-weight: 600; margin-left: 0; } .home-hero-iti-links a.home-demo-link:hover { color: #77fbb7; } .home-hero-iti-links a:hover { cursor: pointer; } body #home #pageWrap { min-height: auto!important; } #pageWrap { background: var(--page-surface); } .big-button, a.big-button { cursor: pointer; font-size: 18px; line-height: 52px; padding: 0 45px; color: var(--on-contrast); background: rgb(79,79,79); background: rgba(79,79,79,1); border-radius: 5px; display: inline-block; text-transform: uppercase; font-weight: 500; border: none; } .big-button:hover, a.big-button:hover { background: rgba(79,193,122,1); text-decoration: none; } .big-button.disabled, .big-button.disabled:hover, a.big-button.disabled, a.big-button.disabled:hover { cursor: default; background: rgb(180,180,180); background: rgba(180,180,180,1); } .big-button.green, .secondary-checkout .signup-box .big-button.green { cursor: pointer; font-size: 18px; line-height: 52px; padding: 0 45px; color: var(--on-contrast); background: rgb(79,193,122); background: rgba(79,193,122,0.88); border-radius: 5px; display: inline-block; text-transform: uppercase; font-weight: 500; border: none; } .big-button.green:hover { background: rgba(79,193,122,1); } .big-button.green.disabled, .big-button.green.disabled:hover, .secondary-checkout .signup-box .big-button.green.disabled, .secondary-checkout .signup-box .big-button.green.disabled:hover { cursor: default; background: rgb(20,100,30); background: rgba(20,91,30,0.9); } #already_spokt .big-button, #new_to_spokt .big-button { font-size: 18px; line-height: 52px; padding: 0 45px; display: inline-block; text-transform: uppercase; font-weight: 500; } .three-col-wrapper { margin-bottom: 60px; } .three-col-wrapper .column { width: 32%; padding: 0 35px; } .three-col-wrapper .column-1, .three-col-wrapper .column-2 { margin-right: 2%; } .three-col-wrapper .column .thumb-wrapper { width: 250px; height: 250px; border-radius: 250px; border: solid 1px #d3d3d3; box-shadow: 0 0 12px rgba(0,0,0,0.14); overflow: hidden; } .three-col-wrapper .column .thumb-wrapper img { width: 100%; } .three-col-wrapper .column h1 { text-align: center; font-size: 19px; font-family: "Chaparral Pro", "Brandon Grotesque", Raleway, "Helvetica Neue", Helvetica, sans-serif; color: #575757; line-height: 1.5em; margin: 25px auto 10px; text-transform: uppercase; } .three-col-wrapper .column p { text-align: center; font-size: 15px; font-family: "Raleway", "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; color: #575757; line-height: 1.6em; margin: 15px auto; margin-top: 0; padding: 0 5px; } .big.button { display: inline-block; color: #ccc; font-size: 32px; font-family: "Raleway", "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; line-height: 80px; padding: 0 60px; border: solid 1px #ccc; border-radius: 5px; } .big.button:hover { color: #2a2a2a; background: var(--surface); border-color: var(--on-contrast); } .iti.teal .big.button { border-color: #3fb9d8; color: #3fb9d8; } .iti.teal .big.button:hover { background: #3fb9d8; color: var(--on-contrast); } .iti.teal p { color: #2d9aaf; color: var(--teal); } .signup-page .big.button { margin: 0 auto; } .no-account-link { text-align: center; display: block; margin: 0px auto; margin-top: -15px; margin-bottom: 80px; font-size: 18px; font-weight: 500; color: var(--on-contrast); text-transform: uppercase; } .iti p { color: #a4a4a4; font-size: 15px; text-align: center; margin: 15px auto 80px; width: 430px; } body#hub-pages *, #hub-pages * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #hub-pages .contentWrap { padding-bottom: 23px; } /* ================================================================= */ /* ==================== New Home Page Styles ======================= */ /* ================================================================= */ .three-col-wrapper .column p { color: #bbb; } .three-col-wrapper .column h1 { color: #ccc; } h1.section-header { color: #aaa; } .content-wrap.wide-pages.signup-page { padding-top: 10px; background: #2a2a2a; } .three-col-wrapper .column .thumb-wrapper { border: solid 1px #333; } .testimonial-container { margin-bottom: 30px; } .testimonial-wrapper { margin: 0px auto 50px; } .testimonial-wrapper .attribution { margin-top: 15px; font-size: 20px; color: #888; margin-left: 35px; font-weight: 300; } .testimonial-wrapper .attribution span { display: block; clear: both; font-weight: 200; } .testimonial-wrapper .testimonial { border: solid 1px rgba(45, 154, 175, 0.26); position: relative; /* border: solid 1px rgba(45, 154, 175, 0.26); */ border: none; /* border-radius: 15px; */ padding: 25px 205px 25px 35px; padding-right: 25px; background: rgba(45, 154, 175, 0.0); box-shadow: 0 5px 25px rgba(0,0,0,0.15); } .testimonial-wrapper .testimonial .quote { color: #2d9aaf; line-height: 1.65em; color: rgba(45, 154, 175, 0.96); color: var(--teal); } .content-wrap.wide-pages.testimonials { overflow: hidden; width: 100%; display: block; } .testimonial-arrow { width: 12px; height: 12px; background: var(--surface); position: absolute; bottom: -6px; left: 45px; box-shadow: 5px 5px 10px rgba(0,0,0,0.10); transform:rotate(45deg); -ms-transform:rotate(45deg); /* IE 9 */ -webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */ } .signup-hero-copy-2 h1.section-header.demo-hub-blurb { line-height: 1.1em; margin: 10px 0 100px; } /* ================================================================= .testimonial-wrapper.short { padding: 0 75px 0 165px; } .testimonial-wrapper.short .testimonial .quote { font-size: 24px; line-height: 1.55em; } .testimonial-wrapper.medium { padding: 0 100px 0 80px; } .testimonial-wrapper.medium .testimonial .quote { font-size: 20px; } .testimonial-wrapper.long { padding: 0 70px 0 130px; } .testimonial-wrapper.long .testimonial .quote { font-size: 17px; } ================================================================= */ .testimonial-wrapper.short { padding: 0 125px; } .testimonial-wrapper.short .testimonial .quote { font-size: 24px; line-height: 1.55em; } .testimonial-wrapper.medium { padding: 0 20px; } .testimonial-wrapper.medium .testimonial .quote { font-size: 20px; } .testimonial-wrapper.long { padding: 0 50px; } .testimonial-wrapper.long .testimonial .quote { font-size: 17px; } .testimonial-wrapper.short { padding: 0 215px; } .testimonial-wrapper.medium { padding: 0 110px; } .testimonial-wrapper.long { padding: 0 140px; } .testimonial-pic { width: 170px; height: 100%; background: #eee; display: block; position: absolute; top: 0; right: 0; } /* ================================================================= */ /* ================== END New Home Page Styles ===================== */ /* ================================================================= */ .translucent-form input::-webkit-input-placeholder { color: var(--on-contrast) } .translucent-form input:focus::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6) } /* .translucent-form input:focus + label { color: rgb(57, 203, 255); } */ .translucent-form input:-moz-placeholder { color: var(--on-contrast) } .translucent-form input:focus:-moz-placeholder { color: rgba(255, 255, 255, 0.6) } .terms-of-service { padding-right: 20%; } .terms-of-service h1 { font-size: 30px; margin-bottom: 15px; } .terms-of-service p { font-size:13px; margin-bottom: 25px; } input { -webkit-appearance: none; } input[type=checkbox] { -webkit-appearance: checkbox; } .big.button.hub-pay-btn { display: table; margin: 0 auto; background: var(--surface); } .big.button.hub-pay-btn:hover { background: #616161; } .mayflower-sidebar-iti { background: url("/assets/MayFlower-06610251.png") 0 0; height: 237px; width: 178px; display: block; margin: 0 0 20px; border-radius: 8px; border: solid 1px #ccc; } .mayflower-sidebar-iti:hover { background-position: 0 -246px; } .mayflower-hero-inner { position: relative; z-index: 10; padding-bottom: 120px; } .hero-inner.mayflower { height: 100%; } .mayflower-hero-header { background-image: url("/assets/mayflower-sprite-f5cbc72d.png"); height: 350px; width: 800px; margin: 0 auto; } .mayflower-hero-image.hero-image { height: 100%; min-height: 0; } .mayflower-hero { padding-top: 86px; overflow: hidden; position: relative; margin-top: -76px; } .mayflower-hero-info { width: 100%; background: #49b29f; background: rgba(73,178,159,0.8); padding: 20px; line-height: 1.3em; color: var(--on-contrast); } .mayflower-hero-info p { width: 1000px; line-height: 1.3em; color: var(--on-contrast); margin: 0 auto; text-align: center; font-size: 26px; font-weight: 500; text-transform: uppercase; } .mayflower-hero-info p strong { line-height: 1.3em; line-height: inherit; color: var(--on-contrast); font-size: 26px; font-size: inherit; font-weight: 700; text-transform: uppercase; text-transform: inherit; } .mayflower-hero-iti-wrapper { text-align: center; } .mayflower-hero-iti.button { padding: 25px 50px; color: var(--on-contrast); font-size: 30px; font-weight: 500; border: none; background: #f96a53; background: rgba(240,104,56,0.9);background: #f96a53; border: solid 1px transparent; display: inline-block; margin-top: 70px; } .mayflower-hero-iti.button:hover { background: var(--surface); color: #f96a53; } .meet-mayflower .mayflower-hero-iti.button { margin-top: 40px; background: #4FBFAB; } .meet-mayflower .mayflower-hero-iti.button:hover { background: var(--surface); border: solid 1px #34A490; color: #34A490; } .mayflower-in-stages .mayflower-hero-iti.button { margin-top: 40px; background: var(--surface); color: #f96a53; } .mayflower-in-stages .mayflower-hero-iti.button:hover { background: transparent; border: solid 1px var(--on-contrast); color: var(--on-contrast); } .harbor-sidebar-iti { background: url(<%= asset_path 'harbor.png' %>) 0 0; height: 237px; width: 178px; display: block; margin: 0 0 20px; border-radius: 8px; border: solid 1px #ccc; } .harbor-sidebar-iti:hover { background-position: 0 -246px; } .harbor-hero-inner { position: relative; z-index: 10; padding-bottom: 120px; } .sub-column { width: 180px; } .hero-inner.mayflower { height: 100%; } .harbor-hero-header { background-image: url(<%= asset_path 'harbor-sprite.png' %>); height: 350px; width: 800px; margin: 150px auto 80px; } .harbor-hero-image.hero-image { height: 100%; min-height: 0; } .harbor-hero { padding-top: 86px; overflow: hidden; position: relative; margin-top: -76px; } .harbor-hero-info { width: 100%; background: #49b29f; background: rgba(73,178,159,0.8); padding: 20px; line-height: 1.3em; color: var(--on-contrast); } .harbor-hero-info p { width: 1000px; line-height: 1.3em; color: var(--on-contrast); margin: 0 auto; text-align: center; font-size: 26px; font-weight: 500; text-transform: uppercase; } .harbor-hero-info p strong { line-height: 1.3em; line-height: inherit; color: var(--on-contrast); font-size: 26px; font-size: inherit; font-weight: 700; text-transform: uppercase; text-transform: inherit; } .harbor-hero-iti-wrapper { text-align: center; } .harbor-hero-iti.button { padding: 25px 50px; color: var(--on-contrast); font-size: 30px; font-weight: 500; border: none; background: #f96a53; background: rgba(240,104,56,0.9);background: #f96a53; border: solid 1px transparent; display: inline-block; margin-top: 70px; } .harbor-hero-iti.button:hover { background: var(--surface); color: #f96a53; } .meet-harbor .harbor-hero-iti.button { margin-top: 40px; background: #4FBFAB; } .meet-harbor .harbor-hero-iti.button:hover { background: var(--surface); border: solid 1px #34A490; color: #34A490; } .harbor-in-stages .harbor-hero-iti.button { margin-top: 40px; background: var(--surface); color: #f96a53; } .harbor-in-stages .harbor-hero-iti.button:hover { background: transparent; border: solid 1px var(--on-contrast); color: var(--on-contrast); } .harbor-wrap .three-col .column { background: transparent; } #footerWrap h3 { text-align: left; } #myTags { margin-bottom: 6px; } .myfamily-logo { width: 250px; height: 115px; display: block; margin: 0 0 15px; padding: 0px; border-radius: 5px; margin: 0 32px; overflow: hidden; cursor: pointer; } .myfamily-logo span { background: url(<%= asset_path 'myfamily-logo.png' %>) no-repeat; } .myfamily-logo.v1 span { background-position: 0px 0px; width: 100%; height: 100%; display: block; } .myfamily-logo.v1:hover span, .myfamily-logo.selected span { background-position: -250px 0px; } .myfamily-logo.v1.selected:hover span { cursor: default; } .myfamily-logo.v2 span { background-position: 0px -135px; width: 100%; height: 100%; display: block; opacity: 1; cursor: default; } .myfamily-logo.v2:hover span { background-position: 0px -135px; } .mayflower-form-row { width: auto; display: table; margin: 0 auto; } .mayflower-form-row label { display: block; line-height: 2.3em; text-indent: 15px; } .mayflower-submit { margin: 15px auto; } .mayflower.signup-form-wrapper { margin-bottom: 90px; } .mayflower-details * { color: var(--on-contrast); } .mayflower-details p { font-size: 14px; color: #aaa; } .contentBox .hub-block-title { margin: 20px 0 20px; font-size: 35px; font-weight: 300; text-transform: uppercase; background: var(--contrast-surface); background: rgba(26, 30, 31,0.93); color: var(--on-contrast); padding: 30px 0; margin: 0; width: 100%; top: -15px; position: relative; left: -15px; width: 898px; border-radius: 8px 8px 0 0; } .contentBox .hub-block-title.small-block { margin: 0px; font-size: 20px; font-weight: 300; text-transform: uppercase; background: #eee; background: rgba(26, 30, 31,0.05); color: #333; padding: 35px 0; font-weight: 400; top: -15px; position: relative; left: -15px; width: 898px; border-radius: 8px 8px 0 0; border-bottom: solid 1px #e0e0e0; } .contentBox .js-hub-name { width: 898px; background: #333; background: rgba(26, 30, 31,0.88); padding: 25px 0; text-align: center; color: var(--on-contrast); position: relative; top: -15px; left: -15px; text-transform: uppercase; } .mf-match { width: 40px; position: relative; } .match-true { background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-repeat: no-repeat; background-position: -535px -38px; } .match-true:hover { background-position: -535px -81px; } .match-true .match-tooltip { width: 580px; right: 35px; bottom: -35px; position: absolute; border-radius: 5px; background: var(--contrast-surface); background: rgba(26, 30, 31,0.98); box-shadow: 0 0 15px rgba(0,0,0,0.3); color: var(--on-contrast); padding: 15px; z-index: 10; display: none; } .match-true:hover .match-tooltip { display: block; } .match-true .match-tooltip .left, .match-true .match-tooltip .right { width: 48%; } .match-true .match-tooltip .left * { text-align: right; padding-right: 5px; } .match-true .match-tooltip .right * { text-align: left; padding-left: 5px; } .match-true .match-tooltip p { border-bottom: dashed 1px #555; padding-bottom: 5px; margin: 3px 0; } .match-true .match-tooltip .match-data { margin-bottom: 12px; } .match-true .match-tooltip .center { margin: 15px 0 10px; } .match-true .match-tooltip * { color: #eee; } #member_list .match-true .match-tooltip h3 { text-transform: uppercase; font-size: 22px; color: #eee; margin: 5px 0 15px; } /* ======================== END 2014 styles ======================== */ .admin-tool .customer-metadata .customer-name { font-size: 20px; font-weight: 400; line-height: 20px; } .admin-tool .customer-metadata .customer-email { font-size: 14px; color: var(--muted); line-height: 25px; margin-left: 15px; font-weight: 500; } .admin-tool .btn.small-button, .btn.small-button { height: 19px; line-height: 18px; padding: 0 5px; font-size: 10px; margin: 0; margin-top: 3px; } .admin-tool .hub-membership-row .row-item { height: auto; width: 137px; font-size: 11px; } .admin-tool .export-counts, #mayflower-import .export-counts { font-size: 12px; text-transform: uppercase; font-weight: 500; border-top: dashed 1px #ddd; margin-top: 7px; padding-top: 10px; border-top: dashed 1px #ccc; padding-bottom: 10px; position: relative;} .admin-tool .export-counts { margin-left: 20px; padding-left: 0px; padding-right: 170px; padding-bottom: 0; } #admin .hub-membership-row .export-counts .row-item, #mayflower-import .export-counts .row-item { width: 170px; z-index: 30; } #admin .hub-membership-row .export-counts .row-item { z-index: 100; width: 21%; } .export-counts em.step-name { opacity: 0.05; font-size: 45px; right: 0px; top: 5px; position: absolute; z-index: 1; line-height: 1em; } .admin-tool a { color: #E6852C; font-weight: 500; } .admin-tool a:hover { text-decoration: underline; } #admin .admin-tool .hub-membership-row .row-item { width: 105px; line-height: 18px; } #admin .hub-membership-row { border-top: solid 1px #e8e8e8; padding-top: 9px; font-size: 11px; } #admin .hub-membership-row:first-child { border-top: none; } #admin .hub-membership-row .row-item.hm-rank { width: 60px; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #333; } #admin .hub-membership-row .row-item.hm-status, .hub-membership-row .row-item.hub-payment, .hub-membership-row .row-item.mf-payment-status { font-size: 10px; text-transform: uppercase; color: #333; width: 180px; } #admin .hub-membership-row .row-item.hub-payment, .hub-membership-row .row-item.mf-payment-status { width: 190px; } #admin .hub-membership-row .row-item.hub-name { width: 240px; margin-right: 10px; line-height: 16px; } #admin .hub-membership-row .row-item.hub-name a { font-size: 14px; } #admin .hub-membership-row { margin-bottom: 7px; } #admin .hub-membership-row .row-item.mf-site-id { width: 58px; font-weight: 600; } #admin .hub-membership-row .row-item.mf-site-name { width: 200px; } #admin .hub-membership-row .row-item.mf-site-status { width: 280px; font-size: 11px; text-transform: uppercase; font-weight: 500; } #admin .hub-membership-row .row-item.mf-re-queue-button, .admin-tool .hub-membership-row .row-item.rejoin-hub { width: 68px; position: relative; top: -2px; } #admin h2 { text-transform: uppercase; } #admin .admin-tool .hub-membership-row .row-item.rejoin-hub { width: 48px; } #admin .hub-subscription { line-height: 10px; font-size: 10px; text-transform: uppercase; color: #333; position: relative; padding: 5px 0; } #admin .hub-subscription a, #admin .hub-subscription strong, #admin .hub-subscription em { font-size: 11px; } #admin .hub-subscription form.button_to { position: absolute; right: 2px; bottom: 2px; } #admin .contentBox { width: 760px; } #admin .admin-search-input { width: 186px; padding: 12px 12px 11px 12px; position: relative; top: 1px; } #admin .admin-tool .admin-approval-list h2 { text-transform: none; } #admin .avatar-wrap { width: 110px; position: absolute ;top: 0;right: 0; } /* Hello! */ #admin .contentWrap { width: 1300px; } #admin .contentBox { width: 1100px; } .mayflower-site form.button_to { width: 100px;position:absolute;right:0; z-index: 45; text-align: right; } div.value form.button_to { position: relative; } .stripe-payment form.button_to, .fullWideHolder form.button_to { position: static; width:auto; text-align: left; } .stripe-payment { margin-bottom: 3px; padding: 3px; } .stripe-payment:hover { background: #eee;border-radius: 5px; } .stripe-payment div { width: 250px; font-size: 12px; line-height: 18px; } .stripe-payment div.payment-amount { width: 280px; color: #aaa; } .payment-history .stripe-payment div.payment-code { width: 140px; color: #aaa; } .payment-history .stripe-payment div.payment-refund-button { width: 70px; } .payment-history .stripe-payment div.payment-amount { width: 40px; color: #aaa; } .payment-history .stripe-payment div.time-of-payment { width: 130px; } .stripe-payment div.payment-amount strong { color: #555; } .stripe-payment div.payment-refund-button { width: 100px; color: #aaa; } .stripe-payment div.payment-refund-button a { opacity: .3; color: #aaa; } .stripe-payment:hover div.payment-refund-button a { opacity: 1; color: #E6852C; text-decoration: none; } .stripe-payment div.time-of-payment { text-align: right; color: #aaa; } .stripe-customer { margin: 10px 0 30px; } .stripe-payment .short-string { display: none; } .mobile-show { display: none; } .unsubscribe-message em { color: var(--on-contrast); font-weight: 900; } .short-string, .long-string { color: inherit; font-weight: inherit; } div.mayflower-attachments { z-index: 50; width: 150px; margin: 45px 0 0 10px; padding: 0 0 35px 15px; border: none; border-left: solid 1px #eaeaea; } div.mayflower-attachment { margin-top: 5px; } div.mayflower-attachment a { line-height: 25px; } div.mayflower-attachment a span.icon { display:inline-block; width:25px; height: 20px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -500px -46px; } /* It'd be nice to have a camera icon, and a link icon (globe? www?) in addition to the paperclip */ .card-row { margin: 15px; border-bottom: dashed 1px #ddd; padding-bottom: 15px; } .default-card { width: 170px; display: block; height: 35px; line-height: 40px; margin-right: 10px; text-transform: uppercase; font-size: 12px; } a.make-default-card { width: 170px; display: block; height: 35px; margin-right: 10px; line-height: 40px; text-transform: uppercase; font-size: 12px; } a.remove-card { font-size: 30px; border: solid 1px #ccc; color: #aaa; padding: 5px; border-radius: 30px; line-height: 32px; height: 32px; width: 32px; text-align: center; font-weight: 200; display: block; text-transform: uppercase; padding: 0 1px 3px 2px; } a.remove-card:hover { text-decoration: none; color: var(--accent); border-color: var(--accent); } .js-add-card { width: 300px; margin-top: 25px; display: block; margin-bottom: 40px; margin-left: 15px; } #add-card-modal .card-row label { width: 170px; display: block; line-height: 33px; margin-right: 10px; text-align: right; } #add-card-modal .card-row input#card_cvc { width: 80px; } #add-card-modal .card-row select { display: block; width: 110px; margin-top: 6px; } .subscribe-button-wrapper { position: relative; } .subscribe-button-wrapper button { outline: none; } .leftNav a.hub-avatar { height: 120px; width: 180px; display: block; text-align: center; line-height: 120px; font-size: 90px; font-weight: 200; color: var(--on-contrast); color: rgba(255,255,255,0.7); text-shadow: none; text-indent: 0; } .leftNav a.hub-avatar span.hub-name { height: 100%; width: 100%; position: absolute; display: block; text-align: center; line-height: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-shadow: none; text-indent: 0; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .leftNav a.hub-avatar span.hub-home-glyph { height: 70px; width: 65px; margin: 0 auto; position: absolute; margin-left: 50%; left: -32px; margin-top: 25px; display: block; opacity: 0; background: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -235px -560px; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; -webkit-transition-delay: 0s; transition-delay: 0s; } /* .leftNav a.hub-avatar { background-repeat: no-repeat; background-position: center; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; overflow: hidden; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 500px rgba(0,0,0,0.4); } */ .leftNav a.hub-avatar { background-repeat: no-repeat; background-position: center; -webkit-transition: all ease-in-out 0.2s; -ms-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; overflow: hidden; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 500px rgba(0,0,0,0.4); background-size: 180px 120px; } .leftNav a.hub-avatar:hover { opacity: 1; color: rgba(255,255,255,0.2); box-shadow: inset 0 0 300px rgba(0,0,0,0); background-repeat: no-repeat; background-position: center; background-size: 200px 132px; } .leftNav a.hub-avatar:hover span.hub-name { opacity: 0.25; color: var(--on-contrast); box-shadow: inset 0 0 500px rgba(0,0,0,0); -webkit-transition-delay: 0s; transition-delay: 0s; cursor: pointer; } .leftNav a.hub-avatar:hover span.hub-home-glyph { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .hub-avatar-chooser-wrapper { text-align: center; width: 64%; margin-bottom: 50px; } .hub-avatar-chooser-inner { margin-left: -5px; margin-right: 15px; width: 100%; height: 331px; position: relative; } .hub-avatar-chooser-inner .avatar-option-thumb { position:relative; margin-left: 7px; margin-bottom: 7px; width: 100px; height: 100px; background: #eee; display: block; opacity: 0.7; overflow: hidden; } .hub-avatar-chooser-inner .avatar-option-thumb img { width: 100%; } .hub-avatar-chooser-inner .avatar-option-thumb:hover { opacity: 1; } .hub-avatar-chooser-inner .avatar-option-thumb.selected { opacity: 1; } .hub-avatar-chooser-inner .avatar-option-thumb span.hud { display: none; position: absolute; width: 100%; height: 100%; font-size: 105px; line-height: 90px; font-weight: 900; margin: 0; padding: 0; } .hub-avatar-chooser-inner .avatar-option-thumb.selected span.hud.hud-checkmark { display:block; } .hub-avatar-chooser-inner .avatar-option-thumb.selected:hover span.hud.hud-checkmark { display:none; } .hub-avatar-chooser-inner .avatar-option-thumb.selected:hover span.hud.hud-remove { color: #c00; background: rgba(255, 255, 255, 0.8); opacity: 0.9; display: block; } div.hub-avatar-placeholder.hub-avatar.clearfix { height: 120px; } .hub-avatar-chooser-inner .hub-chooser-set { position: absolute; top: 0; left: 0; } .hub-avatar-chooser-inner .hub-chooser-set-2 { opacity: 0} .hub-avatar-set-chooser { margin: 0 0 8px; text-align: center; width: 100%;} .hub-avatar-set-chooser a { width: 10px; height: 10px; border-radius: 5px; background: #ccc; display: inline-block; margin: 0 2px; } .hub-avatar-set-chooser a.selected { background: var(--muted); } /* ============================= SPINNER ============================ */ /* from http://tobiasahlin.com/spinkit/ */ .spinner { width: 40px; height: 40px; position: absolute; top: 8px; right: 170px; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #333; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* =========================== END SPINNER ========================== */ /* ======================== MAYFLOWER IMPORT ======================== */ #mayflower-import h1 { text-transform: uppercase; font-size: 50px; font-weight: 300; margin: 30px auto; } #mayflower-import h2 { text-transform: uppercase; font-size: 30px; font-weight: 300; } #mayflower-import p { font-size: 20px; font-weight: 500; color: var(--muted); width: 700px; text-align: center; margin: 25px auto 45px; } #mayflower-import .mf-site-name { width: 370px; font-size: 16px; color: #444; font-weight: 500; padding: 0px 15px 0px 0; line-height: 28px; position: relative; margin-left: 15px; } #mayflower-import .mf-site-name span { width: 9px; height: 9px; background: transparent; border: solid 3px var(--muted); border-bottom-width: 0; border-left-width: 0; display: block; position: absolute; left: -17px; top: 9px; transform:rotate(45deg); -ms-transform:rotate(45deg); /* IE 9 */ -webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */ } #mayflower-import .spokt-hub-selector { margin-bottom: 7px; } #mayflower-import .spokt-hub-selector select { width: 480px; border: none; -webkit-appearance: none; font-size: 16px; color: #444; font-weight: 500; border: none; border-radius: 0px; padding: 12px; background: #eee; outline: none; line-height: 23px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: 410px -140px; border: solid 1px #ddd; } #mayflower-import .spokt-hub-selector select:hover { background-color: #e0e0e0; background-position: 410px -190px; } #mayflower-import .spokt-hub-selector .errorBox { background: #fc0; width: 480px; color: #333;} #mayflower-import .spokt-hub-selector .errorBox a { color: #333; text-decoration: underline;font-weight: 600; } #mayflower-import .spokt-hub-selector .errorBox h3 { text-transform: uppercase; font-weight: 500; margin-bottom: 15px; font-size: 26px; } #mayflower-import .item-row { padding: 15px; background: var(--inset); border: solid 1px #eee; border-width: 1px 0; margin: 15px 0; } #mayflower-import .item-row:hover { background: var(--surface); } #mayflower-import .item-row.connected, #mayflower-import .item-row.connected:hover { background: #efe; border: solid 1px #afa; border-width: 1px 0; } #mayflower-import .item-row.connected select { background: #efe; border-color: transparent; } #mayflower-import .item-row.connected select:hover { background: #cfc; } #mayflower-import .item-row.connected.warning { background: var(--bright); border-color: #fc0; } #mayflower-import .item-row.connected.warning select { background: #eee; } #mayflower-import .item-row.connected.warning .export-counts, #mayflower-import .item-row.connected.warning .export-counts strong { color: #999; } #mayflower-import .mf-hub-connector { margin-bottom: 50px; position: relative; } #mayflower-import .labels { margin: 0 15px 15px; font-size: 18px; text-transform: uppercase; font-weight: 600; } .button.inactive { cursor: default; border-color: #ccc; color: #ccc; } #mayflower-import .button.green.big.large.inactive { position: relative; } #mayflower-import .button.green.big.large.inactive span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--surface); font-size: 18px; line-height: 24px; padding: 15px 15px 0; text-align: center; border-radius: 4px; color: #f44; font-weight: 500; display: none; } #mayflower-import .button.green.big.large.inactive:hover span { display: block; } #mayflower-import .button.green.big.large span { display: none; } #mayflower-import a.button.green.big.large { line-height: 1.4em; padding: 15px 60px; } #mayflower-import .new-hub-input { background: #ccc; background: rgba(255,255,255,0.93); } #mayflower-import .new-hub-input label { font-size: 12px; text-transform: uppercase; margin-right: 5px; } #mayflower-import .new-hub-input input { width: 250px; margin-bottom: 15px; margin-left: 55px; } #mayflower-import .new-hub-input a.cancel-button { font-size: 12px; text-transform: uppercase; margin-left: 5px; color: red; } #mayflower-import .new-hub-input h3 { margin-bottom: 15px; } #mayflower-import .reveal-modal { width: 600px; } #mayflower-import strong { font-weight: 600; } #mayflower-import .export-counts { background: #eee; padding: 15px; font-size: 13px; line-height: 1.7em; border-top: none; background: var(--surface); background: transparent; color: #1a1; padding-bottom: 0; } #mayflower-import .export-counts strong { font-size: inherit; text-transform: inherit; color: #191; font-weight: 700; } #mayflower-import .export-counts .row-item { width: 200px; font-size: 13px; line-height: 18px; height: auto; color: #333; font-weight: 600; } h3.data-count-header { text-transform: uppercase; font-weight: 500; margin-bottom: 10px; color: #888; margin-top: 0px; } #error-message-modal { margin-top: 200px; } .custom-invite-message { width: 90%; margin: 0 auto 0px; border: solid 0px #ddd; padding: 25px 40px; border-radius: 5px; } .custom-invite-message label { display: block; clear: both; margin-bottom: 5px; text-indent: 5px; line-height: 1.5em; } .custom-invite-message input { width: 400px; margin-bottom: 15px; display: block; padding: 12px; } .custom-invite-message textarea { width: 614px; max-width: 100%; height: 170px; margin: 0 auto 20px; display: block; font-size: 16px; font-weight: 500; color: #333; line-height: 1.5em; padding: 12px; border: solid 1px #ccc; border-radius: 5px; background: var(--surface); } .mayflower-import-terms { width: 800px; display: block; margin: 15px auto; height: 300px; font-weight: 600; padding: 15px; } .finalize-import-button { width: 330px; } .js-terms { display:none; } .hub-home-message { background: #ffc; padding: 15px; line-height: 1.6em; font-size: 15px; width: 370px; margin-bottom: 15px; } .mf-hub-connector .mig-link { font-size: inherit; font-weight: inherit; color: black; } .mf-hub-connector .mig-link:hover { color: var(--accent-hover); } /* ====================== END MAYFLOWER IMPORT ====================== */ /* ====================== MYFAMILY LEGACY STYLES ====================== */ .postText .bb { font-weight: 700; margin-right: 8px; } /* ==================== END MYFAMILY LEGACY STYLES ==================== */ /* ==================== Uploader ========================= */ .upload { color: #555; } .upload .progress { border-color: #ddd; } .translucent-form .upload { color: #eee; border-top: none; } .translucent-form .upload.upload-complete { opacity: 0.8; } .translucent-form .upload.upload-complete .progress .bar { background: #3ECC44; } .translucent-form .upload.upload-complete .complete-message { color: #eee; text-align: right; line-height: 18px; margin-top: 4px; } .uploader-smart span { color: #999; } .translucent-form .upload .progress { border-radius: 5px; } .translucent-form .upload .progress .bar { background: #3ECCC4; border-radius: 5px; } .upload-status-row { width: 580px; } .upload-status-row-item { width: 100px; color: var(--muted); } .translucent-form .upload-status-row-item { color: #ddd; } .upload-status-row-header { border-bottom: solid 1px #555; padding-bottom: 5px; margin-bottom: 5px; } .upload-status-row-footer { border-top: solid 1px #555; margin: 10px 0 35px 0; } .upload-status-row-header .upload-status-row-item { color: #111; } .translucent-form .upload-status-row-header .upload-status-row-item { color: var(--on-contrast); } .translucent-form .upload-status-row-item a { color: var(--on-contrast); } .upload-status-row-item a:hover { color: #3ECCC4;} .upload-status-row-item.upload-file-name { width: 220px; } .upload-status-row-item.upload-file-count { width: 60px; } .admin-tool { border-top: solid 1px #ddd; margin: 30px 10px; } #admin .profile-wrap { margin: 20px 0; position: relative; } .username-link { font-size: 20px; } /* =========================== MOBILE ADMIN STYLES =========================== */ @media screen and (max-device-width: 520px), screen and (max-width:520px) { .mobile-show { display: block; } .mobile-static { display: static; } .mobile-hide { display: none; } body#admin { min-width: 300px; } #admin .sub-column { display: none; } #admin .contentBox { width: 94%; padding: 0; } #admin .contentWrap { width: 100%; } #admin #home #header, #admin #header { height: auto; } #admin #home #header .inner, #admin #header .inner { width: 100%; } #admin .inner .site-nav { height: auto; width: 100%; padding: 5px 0 15px; } #admin .inner .site-nav a { display: block; clear: both; line-height: 1.1em; padding: 5px 0; width: 100%; margin: 0; } #admin .admin-search-input { width: 100%; margin: 0 0 10px; } #admin .admin-tool .customer-metadata .customer-email { margin-left: 0; } #admin .avatar-wrap { width: 75px; position: absolute ; top: 0;right: 0; } #admin .unaccepted-invitation-list .row-item.row-item-header { display: none; } #admin .unaccepted-invitation-list .row-item { width: 100%; display: block; height: auto; } #admin .unaccepted-invitation-list .join-hub { clear: left; text-align: left; } #admin .payment-amount .short-string { display: inline; } #admin .payment-amount .long-string { display: none; } #admin .payment-amount { width: 75px; font-size: 11px; } #admin .time-of-payment { text-align: left; width: 100px; } #admin .payment-amount a, #admin .payment-amount a strong, #admin .payment-amount .short-string { font-size: inherit; } #admin .stripe-payment div { font-size: 10px; } #admin .stripe-payment div.payment-refund-button { width: 60px; } #admin .hub-subscription { line-height: 1.9em; } #admin .admin-tool .hub-subscription .small-button { margin-bottom: 5px; margin-left: 3px; } #admin .mayflower-site { max-width: 100%; width: 100%; overflow: hidden; } #admin #footerWrap { display: none; } } @media screen and (max-device-width: 320px), screen and (max-width:320px) { body#admin { min-width: 223px; } #admin #header { display:none; } #admin .inner .site-nav { display:none; } #admin .contentWrap { margin:0; } #admin .contentBox { border: 0; width: 100%; } #admin .admin-user-form { display:none; } #admin div.label { font-size:12px; } #admin .user-info .admin-tool { margin:0; border: 0; } .admin-tool .customer-metadata .customer-name { font-size: 14px; } #admin .new_customer_note label { font-size: 14px; } .username-link { font-size: 14px; } #admin .LNBtm.avatar-wrap { right: 7px; } #admin .LNBtm.avatar-wrap:hover { opacity: 0.1; } .small-admin-item { font-size: 10px; line-height: 13px; } #admin .hub-membership-row .row-item.hub-name { width: 200px; } #new_customer_note { max-width: 98%; } #admin h2 { font-size: 14px; } #admin .profile-wrap { margin: 0; } #admin .hub-membership-row { position: relative; } #admin .add-qc-user { position: absolute; right: 0; } #admin .time-of-payment { width: 90px; } #admin .stripe-payment div.payment-refund-button { width: 50px; } #admin .payment-amount { width: 60px; } #admin .stripe-payment { max-width: 219px; } #admin .note-meta { font-size: 10px; } #admin .customer-note p { font-size: 11px; } .admin-tool .customer-metadata .customer-name { line-height: 14px; } } /* ========================= END MOBILE ADMIN STYLES ========================= */ .bottom-banner { width: 728px; margin: 20px 0 10px -4px; } .top-banner { width: 320px; margin: 25px auto 5px; } .ui-widget-content { border-color: #ddd; background: #fcfcfc; } .ui-state-default, .ui-widget-content .ui-state-default { background: #def; } .ui-menu .ui-menu-item { background: #feffff; } .ui-menu .ui-menu-item:hover { background: #def; } div.scrollingHotSpotLeft { cursor: url(/assets/cursor_arrow_left.cur" %>), w-resize; } div.scrollingHotSpotRight { cursor: url(/assets/cursor_arrow_right.cur" %>), e-resize; } /* ========================= BEGIN TOOLTIP STYLES ========================= */ .tooltip { display:none; position:absolute; z-index:9999; pointer-events:none; font-size: 12px; width:280px; padding: 10px; border-radius: 4px; padding: 15px; background: rgba(255,255,255,.95); color: #333; border: solid 1px #bbb; background: #fefefe url(<%= asset_path 'noisebg.png' %>); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5f5f5), color-stop(1, var(--on-contrast))); background-image: -moz-linear-gradient(center bottom, #f5f5f5 0%, var(--on-contrast) 100%); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.3)/*, inset 0 0 130px rgba(0,0,0,.05)*/; -moz-box-shadow: 0px 0px 6px rgba(0,0,0,.3)/*, inset 0 0 130px rgba(0,0,0,.05)*/; box-shadow: 0px 0px 6px rgba(0,0,0,.3)/*, inset 0 0 130px rgba(0,0,0,.05)*/; } .tooltip h4 { margin-top: 0px; color: #555; margin-bottom: 4px; font-weight: 500; } .tooltip p { margin-bottom: 0px; text-transform: none; font-size: 14px; margin-top: 4px; color: #555; line-height: 1.4em; } .tooltip p.footnote { font-size: 12px; color: #888; } .tooltip.calendar-item { width: 200px; } .tooltip.calendar-item h1 { font-size: 16px; } /* ========================= END TOOLTIP STYLES ========================= */ /* ========================= BEGIN CALENDAR STYLES ========================= */ body.calendar .contentBox { width: 914px; background: var(--surface); } body.wide-body.calendar .contentBox .hub-block-title.small-block { width: 945px; background: #26262a; background: rgba(26, 30, 31,0.89); border-bottom: none; } .contentBox .hub-block-title.small-block.month-name { font-size: 30px; color: #eee; } a.previous-month-button, a.next-month-button { color: #aaa; border-radius: 45px; border: solid 1px #bbb; padding: 0; width: 25px; height: 25px; line-height: 23px; text-align: center; display:block; position:absolute; top: 40px; } a:hover.previous-month-button, a:hover.next-month-button { color: #ddd; text-decoration: none; border-color: #ddd; } .previous-month-button { left: 40px; } .next-month-button { right: 40px; } .calendar-month { margin: -15px 0 0 -15px; width: 950px; } .day { padding-top: 30px; position: relative; background-color: #fcfcfc; height: 128px; width: 134px; border-bottom: solid 1px #efefef; border-right: solid 1px #efefef; } .day.next-month, .day.previous-month { opacity: 0.5; } .day:hover { opacity: 1; background-color: var(--surface);} .day-number { position: absolute; top: 4px; right: 8px; } .day.today .day-number { top: 3px; right: 3px; border-radius: 20px; background-color: #e44; color: var(--on-contrast); width: 26px; height: 26px; text-align: center; line-height: 24px; } .day.day-name { color: var(--on-contrast); text-transform: uppercase; font-size: 13px; height: 28px; line-height: 28px; text-align: center; padding-top: 2px; background-color: #444c4f; border: none; padding: 0 1px 0 0; font-weight: 500; } .day.day-name:hover { background-color: #444c4f; } .day:hover { overflow: visible; } .day .event-list { overflow: auto; height: 108px; } .day .event { cursor: default; margin-bottom: 2px; padding: 3px 5px; background-color: #5a5; text-align: center; position: relative; line-height: 15px; } .day .event .summary { font-size: 13px; color: var(--on-contrast); line-height: 15px; } .day .event:hover { min-height: 30px; } .day .event:hover .summary { opacity: 0.4; } .day .event .controls { visibility: hidden; position:absolute; top: 6px; left: 0; width: 100%; } .day .event .controls a { display:inline-block; cursor:pointer; background-color: #efefef; border-radius: 30px; margin-right: 5px; } .day .event .controls a span.icon { display:inline-block; width:25px; height: 23px; background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -233px -44px; } .day .event .controls a span.icon-trash { background-position: -323px -44px; } .day .event .controls a:hover { background: var(--surface); } .day .event .controls a:hover span.icon-edit { background-position: -233px -89px; } .day .event .controls a:hover span.icon-trash { background-position: -323px -89px; } .day .event:hover .controls { visibility: visible; } .day .event-birthday { background-color: #f80; } .day .event-gathering { background-color: #148cfa; } .day .event-other { background-color: #5b5; } .day .event-weddinganniversary { background-color: #80f; } .day a.new-event { display:block; visibility: hidden; background: var(--surface); text-align: center; border-radius: 10px; border: solid 1px #ddd; color: #ccc; text-decoration: none; font-size: 13px; margin-bottom: 2px; padding: 3px 5px; position: absolute; bottom: 1px; padding: 2px 15px; right:2px; } .day:hover a.new-event { display:block; visibility: visible; } .day a.new-event:hover { text-decoration: none; background-color: #666; border-color: #666;color: var(--on-contrast); } .js-user-dropper input { display:none; } .hubFormInput.select-list { height: 30px; line-height: 30px; } .hubFormInput.select-list input { width: 300px; } #event_birthday_for_user_id, #event_wedding_anniversary_for_user_id, #event_wedding_anniversary_and_for_user_id { max-width: 180px; } .legend-controls { margin-top: 15px; } .legend-controls .legend-item { font-size: 13px; cursor: pointer; color: var(--on-contrast); border-radius: 15px; max-width: 150px; padding: 4px 9px; margin-right: 5px; } .legend-item-title { font-size: 13px; width: 75px; color: #555; padding: 5px 4px; } .legend-item.birthday { background: #f80; border: solid 1px #f80; } .legend-item.other { background-color: #5b5; border: solid 1px #5b5; } .legend-item.weddinganniversary { background-color: #80f; border: solid 1px #80f; } .legend-item.gathering { background-color: #148cfa; border: solid 1px #148cfa;} .legend-controls .legend-item.unchecked { background: transparent; color: #999; border-color: #ccc; } .year-month-picker { margin: 7px auto 5px; } .year-month-picker input.btn { font-size: 13px; height: 11px; line-height: 13px; border-radius:20px; width: 25px; padding: 5px 10px; } .tab h2 { margin-bottom: 10px; text-align: center; font-family: "Raleway"; font-weight: 100; font-size: 26px; color: #888; } .down-arrow-wrapper { padding: 3px 5px 5px 4px; border: solid 1px #555; height: 12px; width: 12px; border-radius: 4px; overflow: hidden; right: 0; top: 0; display: inline-block; position: relative; top: 5px; margin-left: 5px; } .arrow-down { cursor: pointer; width: 0; height: 0; margin: 4px auto 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--muted); } .down-arrow-wrapper.clicked { overflow: visible; } .arrow-up { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ececec; } .year-month-picker .arrow-up { position:absolute; top: -8px; left: 148px; } .year-month-picker { z-index: 90; width: 300px; height: 45px; padding: 15px; background: #ececec; position: absolute; top: 20px; left: -146px; box-shadow: 0 0 35px rgba(0,0,0,0.5); border: solid 1px #ccc; border-radius: 5px; } .contentBox .hub-block-title.small-block.month-name span.date-text { font-size: 30px; color: #eee; } .calendar-holder { margin: 15px 0; width: 340px; } .calendar-holder .contentBoxFooter { border:none; } .calendar-holder .contentBoxHeader { border-color: #e7ebed; } .small-calendar.calendar-month { width: 100%; margin:0px auto 0px auto; border-left: solid 1px #efefef; } .small-calendar.calendar-month .day { width: 13.3%; height: 44px; padding: 1px; } .small-calendar.calendar-month .day .event-dot { margin: 0 auto; text-align: center; color: var(--muted); } .small-calendar.calendar-month .day.day-name { padding-left: 2px; height: 20px; line-height: 20px; } .small-calendar.calendar-month .day[data-tt-id] { cursor: pointer; } .small-calendar .day-number { position: relative; top: 0; right: 0; margin: 0 auto; text-align: center; color: #bbb; } .small-calendar .day.today .day-number { color: #F57C10; background: transparent; border: none; top:0; right:0; line-height: 20px; height:20px; } .small-calendar .day.today .event-dot { color: #F57C10; } a.calendar-link:hover { text-decoration:none; } /* ========================= END CALENDAR STYLES ========================= */ /* ================================================================================= */ /* ================================ NEW SIGNUP FLOW ================================ */ /* ================================================================================= */ .signup-flow-container { padding-bottom: 100px; background: var(--page-surface); } .three-col { position: relative; margin-top: 55px; padding: 0 35px;} .three-col .column { width: 31%; margin-right: 0%; background: rgba(0,0,0,0.8); background: rgba(51, 181, 162, 0.86); color: rgba(51, 181, 162, 0.86); border: 0; padding: 15px 0; } .three-col .column.column-3 { margin-right: 0; } .signup-flow-container .three-col { padding: 0; width: 1000px; position: relative; left: -24px; } .signup-flow-container .three-col { text-align: center; } .signup-flow-container .three-col .inner { padding: 10px 0 30px; height: 100%; } .signup-flow-container .three-col .centering-wrapper { width: 785px; margin: 0 auto; } .signup-flow-container .three-col h1, .signup-flow-container .three-col h2, .signup-flow-container .three-col h3, .signup-flow-container .three-col .column p, .signup-flow-container .three-col div.price { color: var(--on-contrast); } .signup-flow-container h1 { margin-bottom: 15px; /* Dark --> */ color: rgba(43, 162, 150, 1); color: rgba(21, 167, 127, 1); } .signup-flow-container h2 { font-size: 24px; font-weight: 300; /* Dark --> */ color: #ccc; color: var(--muted); margin: 0 auto 1em auto; text-align: center; } .signup-flow-container .three-col .column { width: 32%; border: solid 1px #5c5c5c; border: none; border-radius: 5px; margin: 0; } .signup-flow-container .three-col .column-2 { margin: 0 20px; background: rgba(51, 181, 162, 0.86); } .signup-flow-container .three-col .column-2, .signup-flow-container .three-col .column-3 { width: 32%; } .signup-flow-container .three-col .column p { font-size: 16px; line-height: 1.6em; text-align: center; font-weight: 500; } .signup-flow-container .three-col .column.column-3 { margin-right: 0; } .signup-flow-container .three-col .column p strong.storage { font-size: inherit; font-weight: 800; color: inherit; display: inline; opacity: 1; } .signup-flow-container .three-col h3 { font-size: 28px; margin: 23px 0 10px; text-align: center; } .signup-flow-container .signup-header h3 { margin: 0; color: inherit; font-family: "Chaparral Pro", Raleway, Georgia, "Helvetica Neue", Helvetica, "Source Sans Pro", "Open Sans", sans-serif; text-transform: uppercase; } .signup-flow-container .three-col p.clearfix { margin-top: 0; margin-bottom: 8px; margin-left: 0; line-height: 1.5em; } .signup-flow-container .three-col h3 strong { font-size: inherit; font-weight: 600; color: inherit; font-family: inherit; } .signup-flow-container .three-col .price { border: solid 1px var(--on-contrast); border: 0; line-height: 64px; height: 64px; text-align: center; margin: 0 auto; border-radius: 5px; font-size: 58px; font-weight: 300; margin-bottom: 20px; } .signup-flow-container .three-col .price.non-sale-price { color: rgba(255,255,255,0.4); } .signup-flow-container .three-col .price.sale-price { margin-bottom: 0; } .signup-flow-container .three-col .price .savings-tag { width: 210px; margin-left: -125px; margin-bottom: -20px; height: 70px; display: inline-block; background-image: url("/assets/spokt-sprite-new-9edf67af.png"); overflow: visible; } .signup-flow-container .three-col .column-1 .price .savings-tag { background-position: -579px -114px; } .signup-flow-container .three-col .column-2 .price .savings-tag { background-position: -579px -194px; } .signup-flow-container .three-col .column-3 .price .savings-tag { background-position: -559px -284px; width: 220px; margin-left: -145px; margin-bottom: -23px; } .signup-flow-container .three-col .price span.per-year { top: auto; margin-left: -5px; font-size: 32px; font-weight: 300; } .signup-flow-container .three-col .price span.per-year.first-year { top: auto; margin-left: -2px; font-size: 32px; font-weight: 300; } .signup-flow-container .three-col .price span.per-year span { font-size: 14px; font-weight: 400; position: relative; top: 1px; left: 3px; line-height: 1em; display: inline-block; text-transform: uppercase; } .signup-flow-container .three-col .price span { font-family: inherit; font-size: 21px; position: relative; top: -11px; } .signup-flow-container .three-col p { margin: 5px; } .signup-flow-container .three-col p strong { font-weight: 300; font-size: 1.75em; margin-bottom: 20px; display: block; margin-top: -15px; opacity: .6; } .signup-flow-container .three-col p.dim { color: #696767; color: rgba(173, 225, 219, 1); color: rgba(255,255,255,0.35); } .signup-flow-container .three-col .column a { color: var(--on-contrast); font-size: 26px; margin: 10px auto 33px; padding: 10px 0; display: block; text-transform: uppercase; width: 230px; border: solid 1px rgba(255,255,255,0.2); margin-top: 20px; border-radius: 5px; } .signup-flow-container .three-col .column a:hover, .pricing .column a.selected { border-color: var(--on-contrast); text-decoration: none; background: var(--surface); color: inherit; } .signup-flow-container .three-col .call-us { margin: 35px auto 0; color: #888; font-size: 38px; font-weight: 300; } .signup-flow-container p.bonus-pitch-blurb { margin: 20px 50px 0; /* Dark --> */ color: #ccc; color: var(--muted); text-align: center; } .signup-flow-container .subline { color: #7a7a7a; font-size: .8em; } .signup-flow-container .three-col .column-1 { /* zoom: .94; */ position: relative; top: 2px; left: 10px; background: rgba(120, 158, 181, 1); background: rgba(95, 138, 152, 0.86); color: rgba(95, 138, 152, 1); -webkit-transform: scale(.94); -moz-transform: scale(.94); -ms-transform: scale(.94); transform: scale(.94); -moz-top: 0; } .signup-flow-container .three-col .column-2 { /* zoom: .98; */ position: relative; top: 2px; background: rgba(98, 181, 181, 1); background: rgba(106, 174, 181, 0.86); color: rgba(106, 174, 181, 1); -webkit-transform: scale(.98); -moz-transform: scale(.98); -ms-transform: scale(.98); transform: scale(.98); -moz-top: 0; } /* ================================================================================= */ /* ======================= MOZ HACK FOR FIREFOX TOP POSITION ======================= */ /* ================================================================================= */ @-moz-document url-prefix() { .signup-flow-container .three-col .column-1, .signup-flow-container .three-col .column-2 { /*top: 0;*/ -moz-transform-origin: left top; } .signup-flow-container .three-col .column-1 { left: 12px; } .signup-flow-container .three-col .column-1 { top: 18px; } .signup-flow-container .three-col .column-2 { top: 8px; } } /* ================================================================================= */ /* ===================== END MOZ HACK FOR FIREFOX TOP POSITION ===================== */ /* ================================================================================= */ .signup-flow-container .three-col .column-3 { position: relative; } .signup-flow-container .checkmark { font-size: 13px; opacity: .7; } .disabled{ color: #888; } .content-wrap.wide-pages.top-page-hero.signup-flow-container { width: 100%; overflow: hidden; } .checkout-box, .signup-box { -webkit-transition: -webkit-transform ease-in-out 0.7s; -ms-transition: -webkit-transform ease-in-out 0.7s; -moz-transition: -webkit-transform ease-in-out 0.7s; transition: transform ease-in-out 0.7s; width: 615px; height: 101.9%; top: -1%; background: rgba(0,0,0,0.4); margin: 0 auto; background: #111; background: var(--surface); box-shadow: none; box-shadow: 0 0 15px rgba(0,0,0,0.2); padding: 35px 35px 25px 35px; margin-bottom: 40px; } .checkout-box { min-height: 400px; } .checkout-sheet { width: auto; height: auto; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: 100; background: var(--surface); margin: 20px; background: var(--surface); box-shadow: 0 0 35px rgba(0,0,0,0.2); padding: 20px; } .checkout-sheet .dismiss-button { position: absolute; top: 10px; right: 15px; font-size: 45px; line-height: 45px; font-weight: 200; margin: 0; padding: 0; display: block; color: #888; } .checkout-sheet .dismiss-button:hover { color: #f05b00; } .signup-box.pay-form-left, .signup-box.pay-form-right { position: absolute; } .signup-box .signup-steps-wrapper p, .signup-box p.wizard-charge-message, .signup-box h1, .signup-box h2, .signup-box h3, .signup-box label, .signup-box input { color: #333; } .signup-form-wrapper { background: none; box-shadow: none; padding: 0; margin: 0; width: auto; } .signup-box.pay-form-left { left: 0px; } .signup-box.pay-form-right { left: 0px; } .signup-box.pay-form-left { left: -5000px; } .signup-box.pay-form-right { left: 5000px; } .signup-box.plan-1 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(95, 138, 152, 1); border-radius: 5px 0 0 5px; color: rgba(95, 138, 152, 1); } .signup-box.plan-2 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(106, 174, 181, 1); border-radius: 5px 0 0 5px; color: rgba(106, 174, 181, 1); } .signup-box.plan-3 { border-width: 0; border-right-width: 6px; border-style: solid; border-color: rgba(51, 181, 162, 1); border-radius: 0 5px 5px 0; color: rgba(51, 181, 162, 1); } .signup-form-wrapper h3 { margin-bottom: 0; text-align: center; } .plan-1 input[type="tel"]:hover, .plan-1 input[type="tel"]:focus, .plan-1 input[type="text"]:focus, .plan-1 textarea:focus, .plan-1 input[type="password"]:focus, .plan-1 input[type="text"]:hover, .plan-1 textarea:hover, .plan-1 input[type="password"]:hover, .plan-2 input[type="tel"]:hover, .plan-2 input[type="tel"]:focus, .plan-2 input[type="text"]:focus, .plan-2 textarea:focus, .plan-2 input[type="password"]:focus, .plan-2 input[type="text"]:hover, .plan-2 textarea:hover, .plan-2 input[type="password"]:hover, .plan-3 input[type="tel"]:hover, .plan-3 input[type="tel"]:focus, .plan-3 input[type="text"]:focus, .plan-3 textarea:focus, .plan-3 input[type="password"]:focus, .plan-3 input[type="text"]:hover, .plan-3 textarea:hover, .plan-3 input[type="password"]:hover { border-color: inherit; } .translucent-form label.for-select { line-height: 31px; margin-left: 3px; } .translucent-form label { line-height: 1.3em; font-size: 12px; color: #3b86b1; color: inherit; display: block; margin-bottom: 4px; margin-left: 12px; } .translucent-form textarea, .translucent-form input { width: 100%; clear: both; display: block; border-radius: 0; margin-bottom: 10px; } .form-element { width: 262px; margin-right: 10px; } .form-element.three-quarter { width: 408px; } .form-element.one-quarter { width: 127px; } .form-element.one-quarter.card-security-code { width: 130px; } .form-element.one-quarter-small { width: 100px; } .form-element.one-third { width: 180px; } .form-element:nth-child(2n) { margin-right: 0px; } .translucent-form .hub-name { width: 535px; } .subscribe-button-wrapper .wizard-charge-message strong { font-size: inherit; color: inherit; font-family: inherit; font-weight: 600; clear: none; display: inline; opacity: 1; } #card_month { width: 100%; outline: none; } #card_year { width: 100%; outline: none; } .form-element select { margin-bottom: 6px; } .signup-box .translucent-form input { background: #eee; border-radius: 0; } .signup-box.plan-1 .translucent-form input { color: rgba(39, 99, 116, 1); } .signup-box.plan-2 .translucent-form input { color: rgba(59, 143, 148, 1); } .signup-box.plan-3 .translucent-form input { color: rgba(30, 163, 144, 1); } .translucent-form input::-webkit-input-placeholder { color: #aaa; } .translucent-form input:focus::-webkit-input-placeholder { color: #ccc; } .signup-box.plan-1 .double-bounce1, .signup-box.plan-1 .double-bounce2 { background-color: #80A1AD; } .signup-box.plan-2 .double-bounce1, .signup-box.plan-2 .double-bounce2 { background-color: #6BAEB5; } .signup-box.plan-3 .double-bounce1, .signup-box.plan-3 .double-bounce2 { background-color: #5EC4B5; } .signup-box.plan-1 .big-button.green { background: rgba(95, 138, 152, 1); box-shadow: 0 5px 0 rgba(77, 111, 123, 1); } .signup-box.plan-2 .big-button.green { background: rgba(106, 174, 181, 1); box-shadow: 0 5px 0 rgba(90, 147, 152, 1); } .signup-box.plan-3 .big-button.green { background: rgba(51, 181, 162, 1); box-shadow: 0 5px 0 rgba(43, 154, 138, 1); } .signup-box .big-button.green { opacity: 0.8; -webkit-transition: opacity ease-in-out 0.3s; -ms-transition: opacity ease-in-out 0.3s; -moz-transition: opacity ease-in-out 0.3s; transition: opacity ease-in-out 0.3s; background: #ccc; background: #ccc; background: #ccc; } .signup-box .big-button.green:hover { opacity: 1; } .subscribe-button-wrapper { margin-top: 15px; } .signup-box.pay-form-right.entrance { -webkit-transform:translateX(-4639px); -webkit-transition-delay: 0s; -moz-transform:translateX(-4639px); -moz-transition-delay: 0s; -ms-transform:translateX(-4639px); -ms-transition-delay: 0s; transform:translateX(-4639px); transition-delay: 0s; } .signup-box.pay-form-left.entrance { -webkit-transform:translateX(5046px); -webkit-transition-delay: 0.1s; -moz-transform:translateX(5046px); -moz-transition-delay: 0.1s; -ms-transform:translateX(5046px); -ms-transition-delay: 0.1s; transform:translateX(5046px); transition-delay: 0.1s; } .column { -webkit-transition: -webkit-transform ease-in-out 0.5s; -ms-transition: transform ease-in-out 0.5s; -moz-transition: transform ease-in-out 0.5s; transition: transform ease-in-out 0.5s; } .signup-flow-container .three-col .column.exit-left { -webkit-transform:translateX(-5000px); -moz-transform: translateX(-5000px); -ms-transform: translateX(-5000px); transform:translateX(-5000px); } .signup-flow-container .three-col .column.exit-right { -webkit-transform:translateX(5000px); -moz-transform: translateX(5000px); -ms-transform:translateX(5000px); transform:translateX(5000px); } .column.delay { -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; -ms-transition-delay: 0.15s; transition-delay: 0.15s; } .signup-flow-container .three-col .column.column-1.selected-right { -webkit-transform:translateX(637px) scale(.94); -webkit-transition-delay: 0.2s; -ms-transform:translateX(637px) scale(.94); -ms-transition-delay: 0.2s; -moz-transform: translateX(637px) scale(.94); transform:translateX(637px) scale(.94); transition-delay: 0.2s; @-moz-document url-prefix() { position: relative; top: 500px; opacity: .5; } } .sidebar-testimonial { position: absolute; left: -500px; } .spokt-credibility { position: absolute; left: -1000px; } .signup-flow-container .three-col .column.column-1.selected-right .features-list, .signup-flow-container .three-col .column.column-1.selected-right .sidebar-testimonial, .signup-flow-container .three-col .column.column-1.selected-right .spokt-credibility, .signup-flow-container .three-col .column.column-2.selected-right .features-list, .signup-flow-container .three-col .column.column-2.selected-right .sidebar-testimonial, .signup-flow-container .three-col .column.column-2.selected-right .spokt-credibility, .signup-flow-container .three-col .column.column-3.selected-left .features-list, .signup-flow-container .three-col .column.column-3.selected-left .sidebar-testimonial, .signup-flow-container .three-col .column.column-3.selected-left .spokt-credibility { transition-delay: 0.5s; -webkit-transform:translateX(500px); -moz-transform:translateX(500px); -ms-transform:translateX(500px); transform:translateX(500px); } /* $('.column-1').addClass("step-two") */ .signup-flow-container .three-col.step-1-complete .column.column-1.selected-right .sidebar-testimonial, .signup-flow-container .three-col.step-1-complete .column.column-1.selected-right .features-list, .signup-flow-container .three-col.step-1-complete .column.column-1.selected-right .spokt-credibility, .signup-flow-container .three-col.step-1-complete .column.column-2.selected-right .sidebar-testimonial, .signup-flow-container .three-col.step-1-complete .column.column-2.selected-right .features-list, .signup-flow-container .three-col.step-1-complete .column.column-2.selected-right .spokt-credibility, .signup-flow-container .three-col.step-1-complete .column.column-3.selected-left .sidebar-testimonial, .signup-flow-container .three-col.step-1-complete .column.column-3.selected-left .features-list, .signup-flow-container .three-col.step-1-complete .column.column-3.selected-left .spokt-credibility { transition-delay: 0.5s; -webkit-transform:translateX(1000px); -moz-transform:translateX(1000px); -ms-transform:translateX(1000px); transform:translateX(1000px); } .signup-flow-container .three-col.step-2-complete .column.column-1.selected-right .spokt-credibility, .signup-flow-container .three-col.step-2-complete .column.column-1.selected-right .features-list, .signup-flow-container .three-col.step-2-complete .column.column-1.selected-right .sidebar-testimonial, .signup-flow-container .three-col.step-2-complete .column.column-2.selected-right .spokt-credibility, .signup-flow-container .three-col.step-2-complete .column.column-2.selected-right .features-list, .signup-flow-container .three-col.step-2-complete .column.column-2.selected-right .sidebar-testimonial, .signup-flow-container .three-col.step-2-complete .column.column-3.selected-left .spokt-credibility, .signup-flow-container .three-col.step-2-complete .column.column-3.selected-left .features-list, .signup-flow-container .three-col.step-2-complete .column.column-3.selected-left .sidebar-testimonial { transition-delay: 0.5s; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); } .signup-flow-container .three-col .column.column-2.selected-right { -webkit-transform:translateX(313px) scale(.98); -webkit-transition-delay: 0.2s; transform:translateX(313px) scale(.98); transition-delay: 0.2s; -moz-top: 5px; -moz-transform: translateX(313px) scale(.98); -ms-transform:translateX(313px) scale(.98); -ms-transition-delay: 0.2s; } .signup-flow-container .three-col .column.column-3.selected-left { -webkit-transform:translateX(-635px); -webkit-transition-delay: 0.2s; -moz-transform: translateX(-635px); -moz-transition-delay: 0.2s; -ms-transform:translateX(-635px); -ms-transition-delay: 0.2s; transform:translateX(-635px); transition-delay: 0.2s; } .signup-box { overflow: hidden; } .signup-steps-header, .signup-steps-wrapper { width: 2500px; -webkit-transition: -webkit-transform 0.4s ease-in-out 0.7s; -moz-transition: -moz-transform 0.4s ease-in-out 0.7s; -ms-transition: transform 0.4s ease-in-out 0.7s; transition: transform 0.4s ease-in-out 0.7s; } .signup-steps-header { -webkit-transition-delay: 0.85s; -moz-transition-delay: 0.85s; -ms-transition-delay: 0.85s; transition-delay: 0.85s; } .step-1-complete .signup-box .signup-steps-wrapper, .step-1-complete .signup-box .signup-steps-header { -webkit-transform:translateX(-605px); -moz-transform:translateX(-605px); -ms-transform:translateX(-605px); transform:translateX(-605px); } .step-1-complete.step-2-complete .signup-box .signup-steps-wrapper, .step-1-complete.step-2-complete .signup-box .signup-steps-header { -webkit-transform:translateX(-1210px); -moz-transform:translateX(-1210px); -ms-transform:translateX(-1210px); transform:translateX(-1210px); } .step-1-complete.step-2-complete.step-3-complete .signup-box .signup-steps-wrapper, .step-1-complete.step-2-complete.step-3-complete .signup-box .signup-steps-header { -webkit-transform:translateX(-1815px); -moz-transform:translateX(-1815px); -ms-transform:translateX(-1815px); transform:translateX(-1815px); } .signup-form-wrapper { width: 535px; margin-right: 70px; min-height: 350px; } .signup-header { width: 535px; margin-right: 70px; } .signup-flow-container .content-wrap.testimonials { background: none; } .signup-flow-container .content-wrap.testimonials { background: none; } .signup-flow-container .testimonial-wrapper { position: relative; margin: 0 auto; margin-top: 70px; left: auto; right: auto; } .signup-flow-container .testimonial { background: var(--surface); } .signup-flow-container .testimonials .inner { margin: 0 auto; padding: 0; } .signup-flow-container .content-wrap.wide-pages.testimonials { overflow: visible; margin-bottom: 50px; position: relative; left: -20px; } .signup-flow-container .attribution { color: #333; } .sidebar-testimonial .testimonial-pic { position: relative; top: auto; left: auto; right: auto; height: auto; width: auto; } .sidebar-testimonial, .spokt-credibility { position: absolute; top: 0; left: -500px; width: 100%; -webkit-transition: -webkit-transform ease-in-out 0.7s; -moz-transition: -moz-transform ease-in-out 0.7s; -ms-transition: transform ease-in-out 0.7s; transition: transform ease-in-out 0.7s; } .spokt-credibility { left: -1000px; } .sidebar-testimonial .quote, .signup-flow-container .three-col .column .spokt-credibility p { color: var(--on-contrast); font-size: 18px; line-height: 1.37em; font-weight: 400; padding: 0 20px; font-style: italic; } .sidebar-testimonial .quote { font-weight: 400; } .signup-flow-container .three-col .column .spokt-credibility p { font-style: normal; } .sidebar-testimonial .attribution { color: var(--on-contrast); font-size: 17px; line-height: 1.4em; font-weight: 300; padding: 0 20px; } .sidebar-testimonial .attribution span { font-weight: inherit; } .column-content-wrap { overflow: hidden; position: relative; } .features-list { position: relative; left: 0px; -webkit-transition: -webkit-transform ease-in-out 0.7s; -moz-transition: -moz-transform ease-in-out 0.7s; -ms-transition: transform ease-in-out 0.7s; transition: transform ease-in-out 0.7s; } .signup-box { color: rgba(106, 174, 181, 1); } .signup-steps-glyphs { width: 465px; margin: 0 auto; } .signup-steps-glyphs h4 { font-size: 26px; text-align: center; margin: 5px auto 5px; color: inherit; } .signup-step-glyph { width: 70px; margin: 0px 0 5px; position: relative; padding-bottom: 50px; color: inherit; } .steps-spacer { width: 97px; margin: 83px 15px 0; border-bottom: solid 1px #ccc; } .signup-steps-glyphs .glyph { width: 70px; height: 70px; border-radius: 70px; border-style: solid; border-width: 1px; background-color: rgba(106, 174, 181, 1); border-color: rgba(106, 174, 181, 1); overflow: hidden; position: relative; } .signup-steps-glyphs .glyph-label { text-align: center; font-size: 15px; line-height: 1.3em; text-transform: uppercase; width: 150px; position: absolute; bottom: 0; left: -45px; } .signup-step-glyph .glyph-image { width: 70px; height: 70px; display: block; position: relative; top: 0; left: 0; background-image: url("/assets/spokt-sprite-new-9edf67af.png"); background-repeat: no-repeat; background-position: -903px -20px; } .signup-step-glyph.signup-step-glyph-2 .glyph-image { background-position: -968px -19px; width: 0px; height: 0px; } .signup-step-glyph.signup-step-glyph-3 .glyph-image { background-position: -1030px -18px; } /* DARK GLYPH SHAPES */ .signup-step-glyph-1 .glyph-label, .step-1-complete .signup-step-glyph-2 .glyph-label, .step-2-complete .signup-step-glyph-3 .glyph-label { font-weight: 700; } .step-1-complete .signup-step-glyph-1 .glyph-label, .step-2-complete .signup-step-glyph-2 .glyph-label, .step-3-complete .signup-step-glyph-3 .glyph-label { font-weight: 400; } .plan-1, .plan-2, .plan-3 { border-color: rgba(106, 174, 181, 1); color: rgba(106, 174, 181, 1); } .plan-1 .glyph { background-color: rgba(95, 138, 152, 1); border-color: rgba(95, 138, 152, 1); } .plan-2 .glyph { background-color: rgba(106, 174, 181, 1); border-color: rgba(106, 174, 181, 1); } .plan-3 .glyph { background-color: rgba(51, 181, 162, 1); border-color: rgba(51, 181, 162, 1); } .step-1-complete .plan-1 .signup-step-glyph-1 .glyph, .step-2-complete .plan-1 .signup-step-glyph-2 .glyph, .step-3-complete .plan-1 .signup-step-glyph-3 .glyph { background-color: #a1c1ca; } .step-1-complete .plan-2 .signup-step-glyph-1 .glyph, .step-2-complete .plan-2 .signup-step-glyph-2 .glyph, .step-3-complete .plan-2 .signup-step-glyph-3 .glyph { background-color: #92c7cd; } .step-1-complete .plan-3 .signup-step-glyph-1 .glyph, .step-2-complete .plan-3 .signup-step-glyph-2 .glyph, .step-3-complete .plan-3 .signup-step-glyph-3 .glyph { background-color: #7dc8bd; } /* ================================================================================= */ /* ============================== END NEW SIGNUP FLOW ============================== */ /* ================================================================================= */ .signup-box .signup-step-glyph .glyph { display: block; overflow: visible; } /* .signup-box .signup-step-glyph .glyph { display: block; overflow: visible; background-color: rgba(106, 174, 181, 1); border-color: rgba(106, 174, 181, 1); color: rgba(106, 174, 181, 1) } */ .completed-checkmark, .glyph-waiting, .glyph-active { border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 70px 70px; border-style: solid; width: 70px; height: 70px; position: absolute; top: -1px; left: -1px; display: block; /*-webkit-transition: all 300ms ease-in, background-color 0ms, z-index 2s 2s; */ } /* COLORS .signup-box.plan-1 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(95, 138, 152, 1); border-radius: 5px 0 0 5px; color: rgba(95, 138, 152, 1); } .signup-box.plan-2 { border-width: 0; border-left-width: 6px; border-style: solid; border-color: rgba(106, 174, 181, 1); border-radius: 5px 0 0 5px; color: rgba(106, 174, 181, 1); } .signup-box.plan-3 { border-width: 0; border-right-width: 6px; border-style: solid; border-color: rgba(51, 181, 162, 1); border-radius: 0 5px 5px 0; color: rgba(51, 181, 162, 1); } */ /* .signup-box.plan-selected .signup-step-glyph-1 .glyph-background, .plan-selected .signup-step-glyph .glyph-background { position: relative; top: 70px; } .glyph-waiting { top: 140px; } .glyph-active { top: 210px; } .completed-checkmark { top: 280px; } */ /* WHITE GLYPHS */ .completed-checkmark { border-width: 35px; border-style: solid; border-color: inherit; background-color: transparent; z-index: 10; background-color: inherit; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 0ms; } .step-1-complete .signup-step-glyph-1 .completed-checkmark, .step-2-complete .signup-step-glyph-2 .completed-checkmark, .step-3-complete .signup-step-glyph-3 .completed-checkmark { border-width: 35px; border-style: solid; z-index: 50; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; } .step-1-complete .plan-1 .signup-step-glyph-1 .completed-checkmark, .step-2-complete .plan-1 .signup-step-glyph-2 .completed-checkmark, .step-1-complete .plan-2 .signup-step-glyph-1 .completed-checkmark, .step-2-complete .plan-2 .signup-step-glyph-2 .completed-checkmark, .step-1-complete .plan-3 .signup-step-glyph-1 .completed-checkmark, .step-2-complete .plan-3 .signup-step-glyph-2 .completed-checkmark, .signup-step-glyph-1 .completed-checkmark { background-image: url("/assets/signup-glyphs-1a-ba47e5bb.png"); border-color: inherit; } .signup-step-glyph-2 .completed-checkmark { background-image: url("/assets/signup-glyphs-1b-fe93eb88.png"); border-color: inherit; } .signup-step-glyph-3 .completed-checkmark { background-image: url("/assets/signup-glyphs-1c-d4f0d4ae.png"); border-color: inherit; } /* ================ GLYPH WAITING ================== */ .glyph-waiting { border-width: 1px; background-color: transparent; z-index: 40; -webkit-transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; transition: border-width 200ms ease-in 200ms, background-color 0ms, z-index 0ms linear 200ms; } .signup-step-glyph-1 .glyph-waiting { z-index: 40; background-color: var(--surface); border-width: 1px; -webkit-transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms; -moz-transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms; -ms-transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms; transition: border-width 300ms ease-in 300ms, z-index 0ms linear 300ms; } .plan-1 .signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-1-58ef46fd.png"); } .plan-2 .signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-2-1-0aeae088.png"); } .plan-3 .signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-3-1-e0d098f3.png"); } .plan-1 .signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-2-428fd6ac.png"); } .plan-2 .signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-2-2-3589407b.png"); } .plan-3 .signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-3-2-9ca31522.png"); } .plan-1 .signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-3-303f34d2.png"); } .plan-2 .signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-2-3-a3afde1a.png"); } .plan-3 .signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-3-3-e5f4aa66.png"); } .plan-selected .signup-step-glyph-1 .glyph-waiting { border-width: 35px; z-index: 10; -webkit-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; -moz-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; -ms-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; } .step-1-complete .signup-step-glyph-2 .glyph-waiting { border-width: 35px; z-index: 10; -webkit-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; -moz-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; -ms-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; } .step-1-complete.step-2-complete .signup-step-glyph-3 .glyph-waiting { border-width: 35px; z-index: 10; -webkit-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; -moz-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; -ms-transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; transition: border-width 100ms ease-in 900ms, z-index 0ms linear 1100ms; } .signup-step-glyph-1 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-1-58ef46fd.png"); border-color: inherit; } .signup-step-glyph-2 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-2-428fd6ac.png"); border-color: inherit; background-color: var(--surface); } .signup-step-glyph-3 .glyph-waiting { background-image: url("/assets/signup-glyphs-1-3-303f34d2.png"); border-color: inherit; background-color: var(--surface); } /* ================ GLYPH WAITING ================== */ /* ================= GLYPH ACTIVE ================== */ .signup-step-glyph-1 .glyph-active { background-image: url("/assets/signup-glyphs-1-2e815a62.png"); } .signup-step-glyph-2 .glyph-active { background-image: url("/assets/signup-glyphs-2-dc543182.png"); } .signup-step-glyph-3 .glyph-active { background-image: url("/assets/signup-glyphs-3-8091c492.png"); } .plan-selected .glyph-active { background-color: inherit; } .glyph-active { border-width: 35px; z-index: 10; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms; } .step-1-complete .signup-step-glyph-2 .glyph-active { border-width: 0px; z-index: 40; -webkit-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; -moz-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; -ms-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; } .step-1-complete.step-2-complete .signup-step-glyph-3 .glyph-active { border-width: 0px; z-index: 40; -webkit-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; -moz-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; -ms-transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; transition: border-width 200ms ease-in 1000ms, z-index 0ms linear 1100ms; } .signup-step-glyph .glyph-active { border-width: 35px; -webkit-transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; transition: border-width 200ms ease-in 100ms, z-index 0ms linear 200ms; } .plan-selected .signup-step-glyph-1 .glyph-active { background-color: inherit; border-width: 0px; z-index: 40; -webkit-transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; -moz-transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; -ms-transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; transition: border-width 200ms ease-in 1100ms, z-index 0ms linear 1100ms; } .user-went-back .plan-selected .signup-step-glyph-1 .glyph-active { background-color: inherit; border-width: 0px; z-index: 40; -webkit-transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; -moz-transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; -ms-transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; transition: border-width 200ms ease-in 1200ms, z-index 0ms linear 1200ms; } .step-1-complete .signup-step-glyph-1 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; } .user-went-back.step-1-complete .signup-step-glyph-1 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; } .step-1-complete.step-2-complete .signup-step-glyph-2 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; } .step-1-complete.step-2-complete.step-3-complete .signup-step-glyph-3 .glyph-active { z-index: 30; background-color: inherit; border-width: 35px; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms linear 200ms; } /* ================= GLYPH ACTIVE ================== */ /* ================ GLYPH CHECKMARK ================ */ .step-1-complete .signup-step-glyph-1 .completed-checkmark { z-index: 50; border-width: 0px; -webkit-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; -moz-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; -ms-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; } .step-1-complete.step-2-complete .signup-step-glyph-2 .completed-checkmark { z-index: 50; border-width: 0px; -webkit-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; -moz-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; -ms-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; } .step-1-complete.step-2-complete.step-3-complete .signup-step-glyph-3 .completed-checkmark { z-index: 50; border-width: 0px; -webkit-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; -moz-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; -ms-transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; transition: border-width 200ms ease-in 200ms, z-index 0ms linear 200ms, background-color 0ms; } .user-went-back.step-1-complete .signup-step-glyph-1 .completed-checkmark { z-index: 50; border-width: 0px; -webkit-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; -moz-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; -ms-transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; transition: border-width 200ms ease-in 0ms, z-index 0ms linear 200ms, background-color 0ms; } /**/ .user-went-back .signup-step-glyph-1 .completed-checkmark { z-index: 10; border-width: 35px; -webkit-transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; -moz-transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; -ms-transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; transition: border-width 200ms ease-in 900ms, z-index 0ms linear 1200ms, background-color 0ms linear 1300ms; } /* ================ GLYPH CHECKMARK ================ */ /* =============== GLYPH BACKGROUND ================ */ .glyph-background { z-index: 10; } .glyph-background, .user-went-back .signup-step-glyph-1 .glyph-background { position: absolute; top: 9px; left: 9px; width: 50px; height: 50px; border-radius: 50%; z-index: 10; -webkit-transition: all 400ms cubic-bezier(0.680, 0, 0.265, 1) 0.3s, background-color 0ms; /* older webkit */ -webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; -moz-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; -o-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 0.3s, background-color 0ms; /* easeInOutBack */ } .user-went-back .plan-selected .signup-step-glyph-1 .glyph-background, .user-went-back .plan-selected .step-1-complete .signup-step-glyph-2 .glyph-background, .user-went-back .plan-selected .step-1-complete.step-2-complete .signup-step-glyph-3 .glyph-background { width: 50px; height: 50px; top: 9px; left: 9px; -webkit-transition: all 0; -moz-transition: all 0; -ms-transition: all 0; transition: all 0; } .plan-selected .signup-step-glyph-1 .glyph-background { width: 70px; height: 70px; top: -1px; left: -1px; -webkit-transition: all 300ms cubic-bezier(0.680, 0, 0.265, 1) 1100ms, background-color 0ms; /* older webkit */ -webkit-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms; -moz-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms; -o-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms; transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1100ms, background-color 0ms linear 0ms, opacity 0ms linear 0ms, border 0ms linear 0ms; /* easeInOutBack */ } .step-1-complete .plan-selected .signup-step-glyph-1 .glyph-background { width: 70px; height: 70px; top: -1px; left: -1px; -webkit-transition: all 300ms cubic-bezier(0.680, 0, 0.265, 1) 300ms, background-color 0ms; /* older webkit */ -webkit-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; -moz-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; -o-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 300ms, background-color 0ms; /* easeInOutBack */ } .step-1-complete .plan-selected .signup-step-glyph-2 .glyph-background, .step-1-complete.step-2-complete .plan-selected .signup-step-glyph-3 .glyph-background { width: 70px; height: 70px; top: -1px; left: -1px; -webkit-transition: all 300ms cubic-bezier(0.680, 0, 0.265, 1) 1000ms, background-color 0ms; /* older webkit */ -webkit-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; -moz-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; -o-transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; transition: all 300ms cubic-bezier(0.680, -0.550, 0.265, 2.550) 1000ms, background-color 0ms; /* easeInOutBack */ } .glyph-background { background-color: inherit; } /* =============== GLYPH BACKGROUND ================ */ .price-row .description { width: 350px; } .price-row .amount { width: 50px; text-align: right; } .manage-hub-domain-chooser .big-button { min-width: 256px; margin: 0 auto 15px; } .manage-hub-domain-chooser p { width: 70%; margin: 0 auto 20px; color: #555; } .manage-hub-domain-chooser p.subline { font-size: 13px; margin: 8px auto; } .manage-hub-domain-chooser ol { margin: 15px auto; } .manage-hub-domain-chooser li { list-style-type: decimal; margin: 8px 0 0 35px; } .manage-hub-domain-chooser .note { margin: 30px 0; width: auto; font-size: 14px; padding: 20px 25px 25px; background: #f5f5f5;} .manage-hub-domain-chooser p.domain-more-help-link { margin-bottom: 10px; text-align: center; } .manage-hub-domain-chooser .domain-more-help { max-height: 0; margin: 0 auto 0; overflow: hidden; padding: 0 10px; -webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); } .manage-hub-domain-chooser .domain-more-help-inner { margin: 20px 0 30px; background: var(--surface); box-shadow: inset 0 0 1px #ccc, 0 0 10px 0 #eee; padding: 30px 15% 10px 15%; } .manage-hub-domain-chooser .domain-more-help-inner h4 { font-size: 19px; } .manage-hub-domain-chooser .domain-more-help.active { max-height: 1200px; transition: max-height 0.8s ease-in; } .manage-hub-domain-chooser .add-existing-domain, .manage-hub-domain-chooser .register-new-domain { max-height: 0; overflow: hidden; position: relative; display: block; -webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); } .manage-hub-domain-chooser .add-existing-domain.active, .manage-hub-domain-chooser .register-new-domain.active { max-height: 1200px; -webkit-transition: max-height 1s ease-in; -moz-transition: max-height 1s ease-in; -ms-transition: max-height 1s ease-in; transition: max-height 1s ease-in; } .choose-buttons { transition: max-height 600ms ease-in; max-height: 1200px; overflow: hidden; height: auto; position: relative; display: block; } .choose-buttons.hidden { max-height: 0; -webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); } .manage-hub-domain-chooser .choose-buttons p { text-align: left; } .domain-chooser-inner { margin-bottom: 45px; } .manage-hub-domain-chooser .big-button.domain-check { min-width: 0; margin-top: 10px; margin-bottom: 10px; } .register-new-domain .domain-chooser-inner { padding-top: 15px; } .domain-chooser-inner input[type=text] { height: 32px; position: relative; top: 0px; margin-top: 0px; line-height: 32px; width: 360px; } .domain-chooser-cancel { font-size: 25px; margin: 40px auto 20px auto; text-transform: uppercase; font-weight: 300; max-height: 0px; display: block; overflow: hidden; -webkit-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -moz-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); -ms-transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); transition: max-height 0.8s cubic-bezier(0, 1.05, 0, 1); } .domain-chooser-cancel.active { max-height: 600px; color: #555; text-decoration: none; -webkit-transition: max-height 600ms ease-in; -moz-transition: max-height 600ms ease-in; -ms-transition: max-height 600ms ease-in; transition: max-height 600ms ease-in; } .contentBox a.domain-chooser-cancel:hover, .domain-chooser-cancel.active:hover { text-decoration: none; color: var(--accent); } /* ================================= DOMAIN CHECKOUT ================================== */ .checkout-inline-link { text-transform: uppercase; color: #aaa; font-size: 12px; } .secondary-checkout { margin: 0 auto; } .secondary-checkout .price-row { display: flex; align-items: baseline; gap: 10px; margin: 15px 0 0; width: auto; } .secondary-checkout .price-row .description { width: 460px; } .secondary-checkout .price-row .amount { width: 80px; margin-left: auto; padding-right: 10px; text-align: right; } .secondary-checkout .price-row.total .description { text-transform: uppercase; font-size: 15px; padding-top: 15px; width: 390px; } .secondary-checkout .price-row.total .amount { padding-top: 15px; border-top: solid 1px #ddd; width: 130px; } .secondary-checkout .big-button.green { margin-top: 25px; } .secondary-checkout .big-button.green.js-go-forward { margin-top: 8px; } .js-new-domain { height: 40px; position: relative; top: 0px;line-height: 32px; width: 80%; margin: 0 auto; display: block; } .new-domain-check-wrapper h2 { text-align: center; margin: 0 auto 15px; } .secondary-checkout p.wizard-charge-message.js-charge-message { margin-top: 7px; margin-left: 0; } .signup-hero-copy.inner p.wizard-charge-message { padding-right: 0;line-height: 1.5em; margin: 0; color: #999; font-size: 12px; text-transform: uppercase; margin-top: 12px; width: 300px; } .secondary-checkout button.wizard-action--forward { margin-right: 10px; margin-top: 0; } .secondary-checkout .domain-success-message a { font-weight: 800; } .question-icon { font-size: 10px; line-height: 11px; width: 13px; height: 13px; text-align: center; border-radius: 50%; border: solid 1px #ccc; display: inline-block; margin-left: 4px; color: var(--on-contrast); background: #ccc; position: relative; top: -2px; font-weight: 800; font-family: helvetica; } a:hover .question-icon { background-color: var(--accent-hover); border-color: var(--accent-hover); } .harbor-checkout #header { opacity: 0.8; } .harbor-checkout .inner.signup-hero-copy.hero-copy { min-height: 900px; } .harbor-checkout .inner.signup-hero-copy.hero-copy h1 { color:var(--on-contrast); text-shadow: 0px 0px 10px #036; } .signup-hero-copy a { color: #f05b00;} .signup-hero-copy a.big-button { color: var(--on-contrast);} /* =============================== END DOMAIN CHECKOUT ================================ */ /* ================================== .FAMILY EDITS =================================== */ .dot-family-landing .inner.home-hero-copy.hero-copy { min-height: 900px; } .dot-family-landing #header .inner { display: none; } #header .dot-family-header.inner { display: none; } #home.dot-family-landing #header { background: transparent; padding-top: 25px; } #home.dot-family-landing #header .dot-family-header.inner { display: block; width: 100%; } .dot-family-landing #header a.logo { background-image: url("/assets/dot-family-sprite-8db0fa69.png"); background-size: 500px 500px; background-repeat: none; background-position: -30px -60px; height: 55px; } .dot-family-landing .content-wrap.top-page-hero { /* margin-top: -100px; */ } .dot-family-landing .home-hero-copy-inner { width: 100%; padding-bottom: 250px; } .dot-family-landing .home-hero-copy-inner h1 { font-family: Lato, Raleway, "Source Sans Pro", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; font-size: 42px; text-align: center; margin: 0 0 15px 0; color: var(--on-contrast); font-weight: 300; width: 100%; } .dot-family-landing .home-hero-copy-inner h1 span { font-size: inherit; font-weight: 600; color: inherit; } .dot-family-landing .home-hero-copy-inner h2 { font-size: 22px; font-weight: 400; color: var(--on-contrast); text-align: center; line-height: 1.2em; text-transform: uppercase; margin-bottom: 20px; } .dot-family-landing .home-hero-copy-inner h2 span { background: url("/assets/dot-family-sprite-8db0fa69.png"); background-size: 500px 500px; background-repeat: none; background-position: -58px -169px; width: 100px; display: inline-block; } .dot-family-landing .home-hero-copy-inner h2 span span { visibility: hidden; } .dot-family-search-form { display: block; margin: 0 auto; text-align: center; } .search-form-inner { padding: 8px; background-color: rgba(0,0,0,0.4); border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; margin: 0 auto; } .dot-family-search-form input[type=text] { width: 430px; height: 45px; color: #333; line-height: 30px; padding: 10px 15px; font-size: 20px; border-radius: 4px; } .dot-family-search-form input[type=submit], .dot-family-iti-btn { width: auto; height: 45px; color: var(--on-contrast); background: #fb671f; line-height: 45px; padding: 0 35px; font-size: 20px; border: none; border-radius: 4px; } .dot-family-iti-btn.green { background: #fb671f; } .dot-family-landing .home-hero-copy-inner p { font-size: 13px; font-weight: 400; text-transform: uppercase; color: var(--on-contrast); text-align: center; } .dot-family-namesplash { text-align: center; height: 70px; } .namesplash-blinking-cursor { font-size: 48px; font-weight: 300; position: relative; top: -1px; color: var(--on-contrast); margin-right: -7px; } .dot-family-landing .home-hero-copy-inner .dot-family-namesplash p { text-align: right; display: inline-block; width: 420px; margin-left: -230px; font-size: 40px; margin-bottom: 0; line-height: 1.1em; font-weight: 300; margin-right: -5px; } .dot-family-namesplash div.dot-family-logo { text-align: left; display: inline-block; background-image: url("/assets/dot-family-sprite-8db0fa69.png"); background-size: 500px 500px; background-position: -275px -57px; background-repeat: none; width: 160px; height: 55px; top: 21px; position: relative; } .dot-family-landing .search-form-inner input::-webkit-input-placeholder { color: rgba(0,0,0,0.35); } .dot-family-landing .search-form-inner input:focus::-webkit-input-placeholder { color: rgba(0,0,0,0.15); } .signup-flow-container .three-col .column-1 .price .savings-tag { background-position: -579px -370px; } .signup-flow-container .three-col .column-2 .price .savings-tag { background-position: -579px -451px; } .signup-flow-container .three-col .column-3 .price .savings-tag { background-position: -559px -540px; } .dot-family-search-results-wrap { background: var(--surface); padding: 0; overflow: hidden; -webkit-transition: all ease-in-out 0.9s; transition: all ease-in-out 0.9s; position: relative; max-height: 1300px; } .dot-family-search-results-wrap.closed { max-height: 0; } .dot-family-search-results-wrap .inner { padding: 100px 0 150px 0; } .dot-family-search-results .big-button.green { margin: 0 auto; } .dot-family-search-results h3 { font-size: 29px; text-transform: uppercase; font-weight: 200; text-align: center; margin-top: 30px; } .dot-family-search-results .iti-wrap { text-align: center; margin-top: 20px; font-size: 20px; margin-bottom: 30px; } .dot-family-search-results .iti-wrap a { font-size: 26px; font-weight: 300; } .dot-family-search-results .subline { margin: 20px 0 10px; text-transform: uppercase; font-weight: 300; color: var(--muted); } .dot-family-search-results p.try-again { font-size: 21px; } .domain-available { display: none; } .domain-available.premium { display: block; } .domain-unavailable { display: none; } .domain-suggestions { width: 1060px; margin: 40px 40px 0; } .domain-suggestions h3 { font-size: 26px; margin: 0 0 30px; color: #999; font-weight: 300; } .domain-available h3 em { font-weight: inherit; } .domain-suggestions a { display: block; margin: 0px 60px 10px 0; border-bottom: solid 1px #eee; width: 430px; } .close-dot-family-results { font-size: 80px; font-weight: 200; color: #aaa; top: 20px; right: 30px; line-height: 50px; position: absolute; z-index: 100; } .dot-family-search-results-wrap input[type=submit] { font-size: 15px; } .loading-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.92); z-index: 10; } .loading-overlay h3 { font-size: 30px; top: 20%; position: relative; color: rgb(57, 181, 169); } /* ==================================== SPINNERS ==================================== */ /* ================================================================================== */ .sk-folding-cube { margin: 20px auto; width: 100px; height: 100px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); top: 30%; bottom: 50%; } .sk-folding-cube .sk-cube { width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(51, 181, 162, 1); -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } /* ================================== LOADING SPINNER ================================== */ .loading-spinner { margin: 100px auto; width: 180px; height: 5px; text-align: center; font-size: 10px; top: 40%; bottom: 60%; z-index: 10000; } .loading-spinner > div { background-color: rgba(51, 181, 162, 1); height: 100%; width: 16px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .loading-spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .loading-spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .loading-spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .loading-spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(10.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(10.0); -webkit-transform: scaleY(10.0); } } /* ================================================================================== */ /* =================================== END SPINNERS ================================= */ /* ================================ END .FAMILY EDITS ================================= */ .inquiry-message { width: 500px; height: 150px; margin: 0; } .amzn-native-header-text { color: red; display:none; } .amzn-native-header { color: #888; } .amzn-native-header:after { content: 'Support Spokt by Shopping Amazon'; } .announcement-modal { padding: 40px; } .announcement-modal h3 { margin: 10px auto 20px auto; display:block; text-align: center; font-size: 17px; } .announcement-modal h4 { font-weight: 300; margin:25px 0px 5px 0px; font-size: 19px; } .announcement-modal p { font-size: 14px; color: #3c3f40; line-height: 1.7em; margin: 0 auto 8px auto; } .announcement-modal p strong { font-weight: 700; } .announcement-modal p a { color: #ea4a05; } .announcement-modal p a:hover { color: #000; text-decoration: underline; } .announcement-modal a.dismiss-button { display:block; width: 300px; height: 50px; background: #444; color: #eee; line-height: 50px;text-align:center; margin: 20px auto;border-radius: 4px; } .announcement-modal a.contact-button { display:block; margin: 15px auto; color: #259be7; text-decoration: none; text-align:center; } /* =============================== BEGIN SUMMER 2016 ANNOUNCEMENT ================================ */ .summer-16-glyph-image { width: 100px; height: 100px; margin-right: 10px; overflow: hidden; background-repeat: none; background-image: url(<%= asset_path('Spokt-Ads-Announcement-Glyphs.png') %>); background-position: -18px -18px; } .summer-16-glyph-2 { background-position: -121px -18px; } .summer-16-glyph-3 { background-position: -224px -18px; } .announcement-modal p { font-size: 16px; margin-top: 15px; } .announcement-modal p em, .announcement-modal p a { font-size: inherit; } .summer2016-announcement p { font-size: 16px; margin-top: 15px; } /* ================================ END SUMMER 2016 ANNOUNCEMENT ================================= */ #post_body_12073724.postBody { margin-left: 0; overflow: visible; } .numInputWrapper input[type="text"]:hover, .numInputWrapper input[type="text"]:focus { background: transparent; } .flatpickr-calendar { background: rgba(68, 68, 70, 0.95); } .flatpickr-days { width: auto; padding: 0; outline: 0; text-align: left; width: 315px; display: inline-block; flex-wrap: nowrap; justify-content: initial; } body#hub-pages .flatpickr-day, #hub-pages .flatpickr-day { /*max-width: 30px; height: 30px; line-height: 30px; width: 13.85714%; flex-basis: 13.85714%;*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; } body#hub-pages .flatpickr-weekdays, #hub-pages .flatpickr-weekdays { box-sizing: border-box; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: #ee872f; border-color: #ee872f; } .numInputWrapper span { padding: 0 2px 0 6px; } .numInputWrapper span { right: -30px; } div.bullseye { color: #555559; font-size: 24px; } a.btn.centered.click-to-browse { margin: 13px auto 20px; border-color: #d8d8d8; } .dropzone { font-size: 40px; margin: 20px -15px 0; text-align: center; line-height: 60px; border: 1px solid #f0f0f4; border-left: none; border-right: none; padding: 45px; font-variant: all-petite-caps; font-weight: 100; background: #fefefe; } a.btn.centered { margin: 0 auto 10px; display: block; width: 170px; } div.photos-uploads-progress { margin: 10px -15px 10px -15px; padding: 10px; background: rgba(26, 30, 31,0.05); border-bottom: solid 1px #e0e0e0; border-top: solid 1px #e0e0e0; display: none; } .photos-uploads-progress .upload { color: #555; background: rgba(192, 192, 192, 0.46); width: auto; margin: 5px; border-top: none; position: relative; min-width: 60px; min-height: 60px; padding: 0; height: 90px; } .upload-preview { max-width: 100%; max-height: 90px; margin: 0 auto; display: block; } /* .photos-uploads-progress .upload.horizontal { max-height: 60px; } .upload-preview { max-width: 90px; max-height: 90px; } */ .photos-uploads-progress .upload .remove-link { display:none; visibility: hidden; position: absolute; top: 0; left: 0; text-align: center; font-weight: 300; width: 100%; height: 100%; font-size: 90px; line-height: 83px; } .photos-uploads-progress .upload .remove-link:hover { text-decoration: none; } /* .photos-uploads-progress .upload.horizontal .remove-link { line-height: 53px; } */ .photos-uploads-progress .upload.not-uploading:hover canvas { opacity: 0.6; } .photos-uploads-progress .upload.not-uploading:hover .remove-link { display:block; visibility: visible; } .photos-uploads-progress .upload img { max-width: 100%; max-height: 90px; margin: 0 auto; display: block; } .photos-uploads-progress .upload .name-and-progress { position: absolute; bottom: 0px; left: 0px; width: 100%; display: block;} .photos-uploads-progress .upload .progress { margin: 0; height: 5px; border: none; background: transparent; } .photos-uploads-progress .upload .progress .bar { height: 5px; } .upload-spinner { background: url('<%= asset_path('block-loading-white.gif') %>') no-repeat; display:none; background-size: 9px 14px; width: 9px; height: 14px; position: absolute; opacity: 0.85; bottom: 4px; right: 4px; } .photos-uploads-progress .upload.uploading img { opacity: 0.6; } .photos-uploads-progress .upload.uploading .upload-spinner { display: block; } .photos-uploads-progress .upload.upload-complete .upload-spinner { background-image: url("/assets/signup-glyphs-1-4-b31be673.png"); background-size: 52px 52px; height: 52px; width: 52px; opacity: 1; position: absolute; left: 50%;top: 50%;margin-left: -26px;margin-top: -26px; } .photos-uploads-progress .upload.upload-complete img { opacity: 1.0; } .photos-uploads-progress .upload.uploading:hover .remove-link, .photos-uploads-progress .upload.upload-complete:hover .remove-link { display:none; visibility: hidden; } .dropzone.hover.in { background-color: #ded; } .dropzone.hover.in .bullseye { color: green; } .photos-uploads-progress .upload.uploading { background: #000; } .uploading .upload-preview { opacity: 0.8; } .upload-message {display:none; text-align: center; color: var(--bright); margin: 17px -16px; padding: 10px; font-size: 27px; background: #65656b; } /* Darken completed uploads */ .photos-uploads-progress .upload.upload-complete { background: #000; } .upload-complete .upload-preview { opacity: 0.5; } /* Multi Photo Posts */ a.multiple { position: relative; } .multiple .glyph { background-image: url(<%= asset_path 'spokt-sprite-new.png' %>); background-position: -453px -125px; width: 24px; height: 24px; position: absolute; right: 0px; bottom: 0px; display: block; opacity: 0.75; } .s9.multiple .glyph { right: 0px; bottom: 0px; } .post_photo.multi-main-viewer { margin: 0; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; display:block; max-height: 700px; } .multi-main-viewer .photo { vertical-align: middle; display: inline-block; max-width: 98%; } .vertical-alignment-helper { display: inline-block; height: 100%; vertical-align: middle; width: 0; padding: 0; } /* what happens if we hide these: .multi-main-viewer:hover a.main-photo-nav-link { display: block; } */ a.main-photo-nav-link { height: 30px; width: 110px; line-height: 30px; color: #666; font-weight: 900; background: rgba(0,10,30,0.2); display: none; position: absolute; bottom: 0; text-transform: uppercase; } a.main-photo-nav-link:hover { color: #efefef; text-decoration: none; background: rgba(0,0,0,0.3); } a.photo:hover { text-decoration: none; } .previous-photo-link { left: 12px; border-bottom-left-radius: 20px; border-top-left-radius: 20px; } .next-photo-link { right: 7px; border-bottom-right-radius: 20px; border-top-right-radius: 20px; } .multi-thumb-strip { height: 127px; margin-left: 5px; width: 100%; overflow-x: scroll; overflow-y: hidden; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .multi-thumb-strip .multi-thumb-inner-strip { margin: 6px 12px 6px 6px; height: 106px; overflow-y: hidden; } .multi-thumb-strip .multi-thumb { border-radius: 0; margin-right: 6px; opacity: 0.6; width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; overflow: hidden; } .multi-thumb img { min-height: 100%; min-width: 100%; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* modern browsers */ opacity: 0; } .multi-thumb-strip .multi-thumb.active { opacity: 1.0; } .photo-tools { display: block; width: 40px; height: 25px; margin: 2px auto 0; } .dots-wrapper { margin: 5px auto 20px; align-items: center; justify-content: center; text-align: center; max-width: 330px; } .dot { border-radius: 10px; background: rgba(50,50,50, 0.2); width: 10px; height: 10px; display: inline-flex; margin-left: 10px; } .dot.selected { background-color: rgba(50,120,240,0.8); } div.locked-modal-bg { color: #333; cursor: pointer; font-size: 46px; text-align: center; padding-top: 50%; background: rgba(255, 255, 255, 0.4); } /* Responsive hero heights */ @media (max-width: 768px) { .hero-image.signup-hero-image-2, .hero-inner.hero-inner-3, .home-hero.hero-image, .demo-hero-section .signup-hero-copy-2 { min-height: 300px !important; height: 300px !important; } } /* ============================================================ * COMPONENT STYLES (formerly modern-components.css) * ============================================================ */ /* Reusable layout utilities extracted from legacy view templates. */ .u-hidden { display: none; } .u-full-width { width: 100%; } .u-width-70 { width: 70%; } .u-m-15 { margin: 15px; } .u-m-20 { margin: 20px; } .u-ml-5 { margin-left: 5px; } .u-ml-7 { margin-left: 7px; } .u-ml-20 { margin-left: 20px; } .u-mt-6 { margin-top: 6px; } .u-mt-10 { margin-top: 10px; } .u-mt-40 { margin-top: 40px; } .u-mb-7 { margin-bottom: 7px; } .u-mb-15 { margin-bottom: 15px; } .u-mb-20 { margin-bottom: 20px; } .u-mb-65 { margin-bottom: 65px; } .u-my-15 { margin-top: 15px; margin-bottom: 15px; } .u-my-15-0 { margin: 15px 0; } .u-p-10 { padding: 10px; } .u-pb-10 { padding-bottom: 10px; } .u-text-center { text-align: center; } .u-text-right { text-align: right; } .u-text-small { font-size: 12px; } .u-position-relative { position: relative; } .events-form-container { min-height: 450px; } .public-copy-inner { margin-top: 30px; margin-bottom: 50px; } .accent-color-preview { display: block; width: 100px; height: 100px; } .admin-color-swatch { display: block; width: 100px; height: 100px; margin: 4px; } .admin-message-preview { width: 95%; height: 600px; border: 0; } .admin-table-spaced { margin: 10px 0; } .smtp-settings { padding: 10px; width: 10%; border: 1px solid #ddd; border-radius: 8px; margin-top: 10px; } .readonly-invitation-url { display: block; width: 90%; margin: 10px 0; border: 1px solid #ccc; background: var(--inset); color: #333; box-sizing: border-box; font-size: 14px; } .admin-stat-table { border: 1px solid #aaa; border-bottom: 0; min-width: 420px; } .admin-stat-table th { background: #ddd; border-bottom: 1px solid #aaa; } .admin-stat-table th:first-child { text-align: left; } .admin-stat-table td { border-bottom: 1px solid #aaa; } .admin-stat-table .numeric { text-align: right; } /* Shared classes extracted from legacy templates. */ .title-emphasis { font-size: inherit; font-weight: 500; font-style: italic; } .book-merge-form { margin-top: 10px; } .book-example { width: 637px; border: 3px solid #999; border-radius: 25px; margin: 10px auto; display: block; opacity: 0.6; } .domain-availability-message { text-align: center; color: var(--muted); line-height: 32px; } .domain-availability-subline { margin: 0 auto 15px; text-align: center; width: auto; padding: 0; } .hero-image-muted { opacity: 0.2; } .error-page-title { margin-top: 50px; } .error-page-content { height: 400px; padding: 20px; } .checkout-positioning { position: relative; } .checkout-content { position: relative; z-index: 1; } .text-link-underlined { text-decoration: underline; } .coming-soon-message { height: 380px; text-align: center; margin-top: 60px; font-size: 60px; } .hub-settings-section { margin-bottom: 65px; } .hub-settings-heading { margin-top: 80px; margin-bottom: 15px; } .hub-index-list { width: 600px; margin: 0 auto; } .mayflower-site-row { margin: 15px; } .mayflower-site-actions { text-align: right; position: relative; height: 15px; margin-top: 10px; } .admin-tool-flush { border-top: 1px solid #ccc; margin: 30px 0; } .bottom-banner-ad { display: inline-block; width: 728px; height: 90px; } .adwords-inline { display: inline; } .borderless-tracking-pixel { border-style: none; } .dark-wrap-alignment { margin-left: -3px; } .default-heading-search-button { position: absolute; right: 0; } .default-heading-search-input { position: absolute; right: 55px; width: 175px; } #footerWrap a.footer-inline-link { display: inline; } .modal-header-wrap { width: auto; } .modal-header-title { position: relative; top: 12px; left: 22px; width: 640px; text-align: center; } .content-box-wide { width: 928px; } .inline-centered { display: inline-block; } .mayflower-step-label { font-weight: 500; font-size: inherit; } .mayflower-action-spacing { margin: 55px 0 75px; } .password-instructions { font-size: 20px; } .payment-form-element { width: 100%; } .payment-card-element { padding: 10px; border: 1px solid #ccc; border-radius: 4px; background: var(--surface); } .payment-card-errors { color: #e5424d; margin-top: 8px; font-size: 14px; } .poll-response-input { width: 470px; } .post-destination-input { position: relative; top: -4px; text-align: left; width: 75%; } .post-body-input { width: 95%; } .inquiry-form-fields { margin-bottom: 25px; } .admin-left-nav { margin-bottom: 0; } .mayflower-original-price { color: var(--muted); text-decoration: line-through; } .photo-form-heading { margin-bottom: 15px; } .photo-form-actions { margin-top: 10px; } .poll-form { margin-top: 10px; } .post-meta-glyph { margin-right: 4px; } .plan-price { margin-bottom: 30px; } .imported-label { font-size: 10px; color: #999; } .membership-action-cell { width: 5px; position: relative; } .membership-edit-link { position: relative; top: 0; padding: 0 3px; } .photo-holder-clear-right { clear: right; } .featured-photo-box, .featured-photo-link { height: auto; } .featured-photo-link { background-size: cover; } .grid-image-visible { display: block; } .featured-photo-credit { color: #999; font-size: 14px; margin-left: 10px; top: -2px; position: relative; text-align: right; } .featured-photo-heading { margin-top: 15px; text-align: left; border-bottom: 0; } .hub-edit-wrap { margin: 10px auto; } .hub-edit-heading { margin-bottom: 15px; text-align: left; } .hub-name-input { display: block; max-width: 100%; box-sizing: border-box; width: 56%; margin: 0 auto; } .hub-name-submit { height: 28px; position: relative; top: 0; margin: 15px auto 0; line-height: 28px; } .hub-avatar-column { width: 31%; } .hub-avatar-help { margin: 25px 0; } .hub-members-heading { margin-bottom: 15px; border: 0; } .hub-option-heading { margin: 35px 0 5px; } .hub-option-copy { margin-left: 10px; } .hub-order-avatar { height: 220px; padding-top: 20px; } .hub-order-name { font-size: 21px; padding: 5px; background: #f5f5f5; margin: 0 70px; } .order-processing { text-align: center; margin: 35px auto; } .hub-home-clear { width: 313px; } .space-limit-copy { margin: 0 15px; } .space-limit-current { color: #ea8a35; font-size: 14px; } .space-limit-features { padding: 7px 15px; background: #111; border-radius: 8px; margin: 15px 0; } .space-limit-feature { color: #66bcf9; font-size: 16px; margin: 8px 0; } .space-limit-feature-detail, .space-limit-option { color: var(--on-contrast); } .space-limit-option { font-size: 16px; margin: 8px 0; } .space-limit-upgrade { color: #ea8a35; } .space-limit-link { font-size: 16px; } .space-limit-news { width: 450px; margin: 12px auto; } .inquiry-intro { font-size: 20px; margin-bottom: 25px; } .inquiry-sidebar { width: 330px; } .inquiry-sidebar-panel { width: auto; box-shadow: 0 0 50px rgba(0,0,0,0.1), inset 0 0 300px rgba(0,0,0,0.4); } .inquiry-sidebar-title { color: var(--on-contrast); margin: 0 auto 15px; line-height: 1.3em; font-size: 18px; } .inquiry-sidebar-lead { text-align: center; font-size: 18px; margin-bottom: 15px; } .inquiry-sidebar-copy { text-align: left; } .inquiry-contact-heading { font-size: 14px; } .inquiry-contact-item { color: var(--on-contrast); } .inquiry-contact-link { color: var(--on-contrast); text-decoration: underline; } .inquiry-confirmation { width: 610px; box-shadow: 0 0 50px rgba(0,0,0,0.2), inset 0 0 300px rgba(0,0,0,0.5); } .inquiry-confirmation-message { height: 250px; width: 500px; margin: 30px auto; } .inquiry-confirmation-title { text-align: center; font-size: 34px; font-weight: 100; } .inquiry-confirmation-subtitle { text-align: center; font-size: 22px; font-weight: 100; } .inquiry-sidebar-panel-padded { padding: 10px; width: auto; box-shadow: 0 0 50px rgba(0,0,0,0.2), inset 0 0 300px rgba(0,0,0,0.5); } .invitation-shell { width: 1000px; } .invitation-panel { width: 370px; } .invitation-existing-panel { width: 370px; text-align: left; } .invitation-panel-inner { width: auto; } .invite-alt-heading { color: var(--muted); text-transform: uppercase; font-size: 14px; margin-top: 15px; } .invite-instructions { margin: 0; width: 90%; color: var(--muted); font-size: 14px; line-height: 1.5em; } .invite-recipient { font-weight: 700; } .invite-copy-text { display: block; width: 90%; margin: 5px 0; border: 1px solid #ccc; background: var(--inset); color: #333; box-sizing: border-box; font-size: 14px; } .invite-instructions-last { margin-bottom: 15px; } .main-nav { margin-bottom: 10px; } .sponsored-heading { color: #555; padding: 5px; margin-top: 10px; text-align: center; } .sponsored-ad { display: inline-block; width: 180px; height: 150px; } .sponsored-explanation { color: #555; padding: 5px; margin-top: 25px; text-align: center; } .marketing-unsubscribe-body { min-width: 100%; font-weight: 300; background: #ecf0f3; margin: 0; color: #3c3f40; font-family: montserrat, Gotham, Lato, Raleway, 'Open Sans', Helvetica, sans-serif; padding: 0; } .marketing-unsubscribe-wrapper { padding: 0 10px 80px; } .marketing-unsubscribe-title { color: #666; font-weight: 200; margin: 60px 0 40px; text-align: center; line-height: 1.4em; } .marketing-unsubscribe-message { text-align: center; color: #555; font-size: 18px; margin: 0 auto; max-width: 1000px; padding: 0 50px; } .mayflower-terms { z-index: 10; margin: 25px 0 50px; position: relative; font-size: 13px; font-weight: 500; color: #ddd; text-transform: uppercase; line-height: 1.5em; height: 125px; overflow: scroll; padding: 15px; background: var(--border-soft); border: 1px solid transparent; width: 100%; } .mayflower-terms-heading { color: inherit; margin-bottom: 5px; } .mayflower-terms-copy { font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; line-height: inherit; } .mayflower-expired { color: #f88; background: #333; text-transform: uppercase; padding: 10px; font-size: 14px; } .u-mb-25 { margin-bottom: 25px; } .mayflower-panel { background: rgba(0,0,0,0.4); } .mayflower-outage-title { font-size: 40px; } .mayflower-emphasis { color: inherit; font-size: inherit; text-decoration: underline; } .mayflower-modal { top: 100px; opacity: 1; visibility: visible; } .mayflower-match-success { margin-bottom: 10px; color: #3a3; } .mayflower-match-copy { color: #333; } .mayflower-terms-title { font-size: 18px; margin-top: 30px; } .mayflower-terms-agreement { text-align: center; margin: 50px 0 10px; } .mayflower-terms-label { text-transform: uppercase; margin-left: 10px; } .mayflower-site-avatar { width: 38px; height: 38px; display: inline-block; margin-right: 10px; } .mayflower-upload-form { padding: 30px; } .mayflower-upload-browse { background: #3a6; color: var(--on-contrast); border: 0; padding: 9px 25px; text-align: center; display: block; width: auto; max-width: 242px; margin: 10px auto; text-transform: uppercase; } .mayflower-upload-note { color: #999; } .visually-hidden-file { height: 1px; width: 1px; visibility: hidden; } .photo-grid { margin: 6px 8px; } .photo-viewer-wrap, .photo-viewer-image { margin-left: auto; margin-right: auto; } .photo-viewer-link { position: relative; left: 35px; } .post-books-input { width: 100%; max-width: 502px; position: relative; top: -8px; text-align: left; } .post-books-input-fixed { width: 502px; position: relative; top: -8px; text-align: left; } .search-label { width: 130px; } .search-field-spaced { margin-top: 10px; } .search-actions { margin: 5px; text-align: center; } .search-submit { margin: 0 auto; } .signup-hidden-submit { position: absolute; top: -9999px; } .sponsorship-title { text-shadow: 0 0 10px #630; } .sponsorship-copy { padding: 10px 25px 25px 0; } .subscription-heading { margin: 35px 0 15px; } .subscription-pay-button { margin: 60px 0 50px; } .subscription-active { color: green; } .video-list-item { padding: 5px 10px 8px; } .video-player { width: 100%; max-height: 400px; } .video-processing-copy { font-size: 15px; line-height: 20px; color: #999; } .video-processing-file { margin: 10px 0; text-align: center; } .video-upload-field { position: relative; } .invisible-click-target { height: 1px; width: 1px; } .viewed-posts-heading { font-weight: 500; } .mobile-top-ad { display: inline-block; width: 320px; height: 100px; } .mobile-block-ad { display: block; } .mobile-price-emphasis { text-transform: uppercase; text-decoration: underline; color: #faff85; font-weight: 600; } .mobile-content-box { width: 100%; } .mobile-login-help { color: var(--on-contrast); text-decoration: underline; margin: 0 auto 30px; display: block; } .admin-user-avatar { margin: 0; position: relative; top: 3px; } .admin-username-label { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-left: 10px; font-weight: 500; } .admin-payment-methods { margin-bottom: 20px; } .admin-customer-note { width: 100%; } .admin-membership-list { margin-bottom: 30px; } .photo-upload-area { margin: 0; padding: 20px; text-align: center; cursor: pointer; border-radius: 8px; } .photo-upload-prompt { font-size: 18px; margin-bottom: 10px; } .photo-upload-help { font-size: 14px; margin: 0; } .photo-preview-container { margin-top: 20px; } .photo-upload-status { margin-top: 10px; color: #666; font-size: 14px; } .photo-preview-item { display: inline-block; position: relative; margin: 10px; padding: 10px; border-radius: 8px; border: 1px solid rgba(100,100,100,0.1); width: 150px; cursor: grab; } .photo-preview-image { width: 130px; height: 130px; object-fit: cover; border-radius: 4px; } .photo-preview-name { margin-top: 8px; font-size: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .photo-preview-status { font-size: 11px; text-align: center; color: #28a745; } .photo-preview-remove { position: absolute; top: -8px; right: -8px; background: #dc3545; color: var(--on-contrast); border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 24px; text-align: center; } .post-upload-row { margin-top: 10px; } .account-avatar-row { margin-top: 25px; } .account-avatar-input { width: 105px; } .account-avatar-help { font-size: 13px; width: 400px; line-height: 21px; padding: 0 5px; } .account-save-emphasis { font-size: inherit; text-transform: uppercase; } .account-actions { margin: 10px 0; } .account-section-heading { margin: 35px 0 15px; } .account-empty-cards { margin-left: 20px; } .account-payment-history { margin-bottom: 15px; } .account-stripe-errors { color: #e5424d; margin: 10px 0; } .account-card-row { padding: 10px 0; } .affiliate-page { margin-top: 30px; margin-bottom: 50px; } .affiliate-list { list-style-type: disc; margin-left: 35px; } .affiliate-list li { list-style-type: disc; } .affiliate-section-lead { margin-top: 15px; } .mayflower-credentials-intro { margin-top: 25px; font-size: 18px; font-weight: 500; padding: 0 50px; } .mayflower-availability-note { margin-top: 25px; font-size: 18px; font-weight: 500; padding: 0 50px; } .mayflower-version-emphasis { font-size: 18px; color: var(--on-contrast); font-weight: 700; } .mayflower-credential-input { margin-right: 0; } .mayflower-password-label { clear: both; display: block; } .mayflower-credential-terms { text-align: center; font-size: 13px; padding: 15px; background: rgba(255,255,255,0.05); margin: 15px 0 30px; } .mayflower-submit-warning { color: var(--on-contrast); text-align: center; } .mayflower-submit-warning strong { font-weight: 700; font-size: 18px; color: var(--on-contrast); } .mayflower-login-help { text-align: center; } .mayflower-login-help a { text-decoration: underline; } .mayflower-payment-panel { background: rgba(0,0,0,0.5); margin-bottom: 10px; } .mayflower-card-number { font-size: 25px; line-height: 2em; } .mayflower-card-expiration { font-size: 18px; margin-bottom: 5px; } .mayflower-charge-section { margin-bottom: 25px; } .mayflower-charge-copy { margin-left: 0; color: #eee; } .mayflower-charge-copy-indented { margin-left: 15px; color: #eee; } .mayflower-charge-amount { font-size: 30px; color: inherit; font-weight: 600; line-height: 1.5em; } .mayflower-payment-button { margin-bottom: 15px; } .mayflower-payment-terms { color: #eee; } .mayflower-payment-terms a { color: #eee; text-decoration: underline; } .mayflower-order-actions { margin-top: 15px; } .mayflower-pricing-sidebar { width: 330px; } .mayflower-pricing-panel { width: auto; box-shadow: 0 0 50px rgba(0,0,0,0.1), inset 0 0 300px rgba(0,0,0,0.4); margin-bottom: 10px; } .mayflower-pricing-title { color: var(--on-contrast); margin: 0 auto 15px; line-height: 1.3em; } .mayflower-price { color: var(--on-contrast); font-size: 90px; text-align: center; width: 100%; line-height: 90px; margin: 0 auto; } .mayflower-price-unit { color: var(--on-contrast); font-size: 30px; } .mayflower-pricing-copy { text-align: center; } .invitation-heading { margin-bottom: 15px; } .invitation-fields { margin-left: -20px; margin-top: 10px; } .invitation-options { width: 330px; margin-left: 30px; margin-bottom: 26px; } .invitation-actions { margin-bottom: 14px; } .preferences-heading { margin: 25px 0 15px; } .preferences-section-heading { margin: 35px 0 15px; } .preferences-membership-row { height: 26px !important; } .preferences-select-row { margin-top: 15px; } .preferences-help { margin: 5px 0 25px; font-size: 15px; } /* Static hero backgrounds. Keep image selection in CSS rather than view markup. */ .hero-bg--signup { background-image: url("/assets/signup-hero-sized-37495976.jpg"); } .hero-bg--lake { background-image: url("/assets/lake-2b-d31d3334.jpg"); } .hero-bg--harbor { background-image: url("/assets/harbor-hero-7dfdb5aa.jpg"); } .hero-bg--sunrise { background-image: url("/assets/sb-sunrise-6a2797a2.jpg"); } .hero-bg--sailboat { background-image: url("/assets/sail-boat-bdceb8b0.jpg"); } .hero-bg--mayflower { background-image: url("/assets/mayflower-hero-ab9b4821.jpg"); } .hero-bg--signup-sub { background-image: url("/assets/spokt-signup-sub-hero-2-sized-e568b654.jpg"); } .hero-bg--dot-family-kids { background-image: url("/assets/spokt-dotfamily-KidPotatoSacks-dfd4efc8.jpg"); } .hero-bg--dot-family-beach { background-image: url("/assets/spokt-dotfamily-BeachFamily-7f73b62e.jpg"); } .hero-bg--dot-family-campfire { background-image: url("/assets/spokt-dotfamily-FamilyWaterfrontCampfire-2673e8cc.jpg"); } /* Profile form columns. */ .profile-field-inline { width: auto; clear: none; } .profile-field-short { width: 88px; } .profile-field-medium { width: 188px; } .profile-field-tall { height: 100px; } .profile-field-link { margin-top: 4px; display: inline-block; } .profile-actions { margin: 10px 0; } /* MyFamily migration step labels. */ .mf-step-label { font-weight: 500; font-size: inherit; } .mf-match-success { margin-bottom: 10px; color: #3a3; } .mf-match-fail { color: #333; } .mf-terms-heading { font-size: 18px; margin-top: 30px; } .mf-terms-agreement { text-align: center; margin: 50px 0 10px; } .mf-terms-label { text-transform: uppercase; margin-left: 10px; } .mf-terms-action { margin: 55px 0 75px; } /* Search form fields. */ .search-label-width { width: 130px; } .search-field-spaced { margin-top: 10px; } .search-actions { margin: 5px; text-align: center; } .search-submit-centered { margin: 0 auto; } /* Support case pricing sidebar. */ .support-sidebar { width: 330px; } .support-card-row { font-size: 15px; padding-right: 0; margin-left: 10px; line-height: 1.5em; width: 260px; margin-top: 5px; color: #eee; } .support-pricing-panel { padding: none; width: auto; box-shadow: 0 0 50px rgba(0,0,0,0.1), inset 0 0 300px rgba(0,0,0,0.4); } .support-pricing-heading { color: var(--on-contrast); margin: 0 auto 15px; line-height: 1.3em; } .support-pricing-amount { color: var(--on-contrast); font-size: 110px; text-align: center; width: 100%; line-height: 110px; margin: 0 auto; } .support-pricing-unit { color: var(--on-contrast); font-size: 30px; } .support-pricing-copy { text-align: center; } /* Mobile inquiry sidebar. */ .mobile-inquiry-panel { padding: none; width: auto; box-shadow: 0 0 50px rgba(0,0,0,0.1), inset 0 0 300px rgba(0,0,0,0.4); } .mobile-inquiry-heading { color: var(--on-contrast); margin: 0 auto 15px; line-height: 1.3em; font-size: 18px; } .mobile-inquiry-lead { text-align: center; font-size: 18px; margin-bottom: 15px; } .mobile-inquiry-copy { text-align: left; } .mobile-inquiry-contact-heading { font-size: 14px; } .mobile-inquiry-contact-item { color: var(--on-contrast); } .mobile-inquiry-contact-link { color: var(--on-contrast); text-decoration: underline; } /* Signups/Mayflower pricing. */ .mayflower-signup-price-heading { font-weight: 300; color: var(--on-contrast); line-height: 1.3em; } .mayflower-signup-original-price { font-weight: 500; font-size: inherit; color: var(--muted); text-decoration: line-through; } .mayflower-signup-new-price { font-weight: 500; font-size: inherit; color: var(--on-contrast); } .mayflower-signup-sidebar { width: 330px; } .mayflower-signup-panel { padding-bottom: 33px; width: auto; box-shadow: 0 0 50px rgba(0,0,0,0.1), inset 0 0 300px rgba(0,0,0,0.4); } .mayflower-signup-heading { color: var(--on-contrast); margin: 0 auto 15px; line-height: 1.3em; } .mayflower-signup-amount { color: var(--on-contrast); font-size: 110px; text-align: center; width: 100%; line-height: 110px; margin: 0 auto; } .mayflower-signup-unit { color: var(--on-contrast); font-size: 30px; } .mayflower-signup-copy { text-align: center; } /* Mayflower migration export tool. */ .mayflower-export-hidden { display: none; } .mayflower-hero-inner-relative { overflow: hidden; position: relative; } .mayflower-details-section { background: #1a1e1f; margin-bottom: 0; padding: 120px 0; } /* Mayflower terms box. */ .mayflower-terms-box { width: 960px; z-index: 10; margin-bottom: 50px; margin-top: 25px; position: relative; font-size: 13px; font-weight: 500; color: #ddd; text-transform: uppercase; line-height: 1.5em; height: 125px; overflow: scroll; padding: 15px; background: var(--border-soft); border: solid 1px #333; border-color: rgba(0,0,0,0); width: 100%; } .mayflower-terms-title { color: inherit; margin-bottom: 5px; } .mayflower-terms-copy { font-size: inherit; font-weight: inherit; color: inherit; text-transform: inherit; line-height: inherit; } .mayflower-terms-em { color: inherit; font-size: inherit; font-weight: inherit; } /* Admin mayflower page. */ .admin-tool-flush { border-top: 1px solid #ccc; margin: 30px 0; } .admin-user-margins { margin: 20px 15px; } .admin-login-link { font-size: 14px; color: var(--muted); line-height: 25px; } .admin-login-link-large { font-size: 20px; } .admin-username-label { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-left: 10px; font-weight: 500; } .admin-mayflower-container { margin: 15px 0 15px 15px; } /* Domain registrations payment. */ .payment-link-underlined { text-decoration: underline; } .payment-card-row { padding: 10px 0; } .payment-card-element { padding: 10px; border: 1px solid #ccc; border-radius: 4px; background: var(--surface); } .payment-spinner-hidden { display: none; } /* Video upload. */ .video-upload-spacer { margin-top: 10px; } .video-upload-field-relative { position: relative; } .video-invisible-clicker { height: 1px; width: 1px; } /* Harbor hero sections. */ .harbor-hero-info-hidden { display: none; } .harbor-hero-iti-hidden { display: none; } .harbor-hero-inner-relative { overflow: hidden; position: relative; } /* Demo page. */ .demo-form-wrapper { background: rgba(0,0,0,0.0); box-shadow: none; box-shadow: 0 0 50px rgba(0,0,0,0.2), inset 0 0 500px rgba(0,0,0,0.7); margin-top: 50px; padding-bottom: 35px; } .demo-heading { color: var(--on-contrast); font-weight: 200; margin-top: 8px; margin-bottom: 10px; line-height: 1.4em; } .demo-copy { text-align: center; color: var(--on-contrast); font-size: 18px; margin: 0 auto; max-width: 1000px; padding: 0 50px; } .demo-submit-center { text-align: center; } .demo-submit-button { width: auto; border-radius: 5px; border: none; padding: 0 30px; line-height: 50px; height: auto; margin: 5px 0 5px -10px; display: inline-block; } /* Check email page. */ .check-email-wrapper { background: rgba(25, 25, 25, 0.8); width: 100%; padding: 25px; } .check-email-heading { font-size: 25px; } /* Unsubscribe page. */ .unsubscribe-form-wrapper { background: rgba(0,0,0,0.0); box-shadow: none; box-shadow: 0 0 50px rgba(0,0,0,0.2), inset 0 0 500px rgba(0,0,0,0.7); margin-top: 50px; padding-bottom: 75px; } .unsubscribe-heading { color: var(--on-contrast); font-weight: 200; margin-top: 8px; margin-bottom: 10px; line-height: 1.4em; } .unsubscribe-message { text-align: center; color: var(--on-contrast); font-size: 18px; margin: 0 auto; max-width: 1000px; padding: 0 50px; } /* Videos show. */ .video-player { width: 100%; max-height: 400px; } .video-processing-copy { font-size: 15px; line-height: 20px; color: #999; } .video-processing-filename { margin: 10px 0; text-align: center; } /* The Choice page. */ .the-choice-wrapper { position: relative; width: 750px; clear: both; margin: 0 auto; background: var(--contrast-surface); color: #bbb; padding: 15px 0px; } /* Mobile footer links. */ .mobile-footer-link { display: inline; } /* Togethera uploads. */ .togethera-browse-btn { border: solid 1px var(--accent); border-radius: 5px; padding: 4px 8px; } .togethera-invisible-field { height: 1px; width: 1px; visibility: hidden; } .togethera-uploads-panel { background: rgba(0,0,0,0.4); } /* Shared theme-toggle geometry; themes only change its palette. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin-left: 8px; border: 1px solid var(--theme-toggle-border); border-radius: 50%; background: transparent; color: var(--theme-toggle-text); position: relative; line-height: 1; text-decoration: none; vertical-align: middle; cursor: pointer; } .theme-toggle:hover { border-color: var(--theme-toggle-hover-border); color: var(--theme-toggle-hover-text); } .theme-toggle-glyph { display: block; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: none; } /* Tag Input - replaces jquery.tagit.css and tagit.ui-zendesk.css */ .tag-input-container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 4px; min-height: 36px; cursor: text; list-style: none; margin: 0; } .tag-input-container:focus-within { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2); } .tag-input-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: #e8f0fe; border: 1px solid #c2d9f2; border-radius: 3px; font-size: 13px; line-height: 1.6; color: #333; } .tag-input-tag .tag-input-remove { cursor: pointer; color: #888; font-size: 16px; line-height: 1; text-decoration: none; margin-left: 2px; } .tag-input-tag .tag-input-remove:hover { color: #c00; } .tag-input-new { flex: 1; min-width: 120px; position: relative; list-style: none; } .tag-input-field { border: none; outline: none; width: 100%; padding: 4px 0; font-size: 14px; background: transparent; } .tag-input-autocomplete { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: var(--surface); border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); list-style: none; margin: 4px 0 0; padding: 4px 0; max-height: 200px; overflow-y: auto; } .tag-input-suggestion { padding: 6px 12px; cursor: pointer; font-size: 14px; } .tag-input-suggestion:hover, .tag-input-suggestion.active { background: #f0f4ff; } /* Modal - replaces reveal.css */ dialog.reveal-modal { /* Override reveal.css's legacy `visibility: hidden`; native dialogs use the open attribute to control visibility. */ visibility: visible; border: none; border-radius: 8px; padding: 30px; max-width: 600px; width: 90%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; } dialog.reveal-modal.mlarge { max-width: 700px; } dialog.reveal-modal.large { max-width: 800px; } dialog.reveal-modal.medium, dialog.reveal-modal.xmedium { max-width: 550px; } dialog.reveal-modal::backdrop { background: rgba(0, 0, 0, 0.6); animation: fadeIn 0.2s ease; } dialog.reveal-modal[open] { animation: modalIn 0.3s ease; } @keyframes modalIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } dialog.reveal-modal .close-reveal-modal { position: absolute; top: 12px; right: 16px; font-size: 24px; color: #666; cursor: pointer; text-decoration: none; line-height: 1; padding: 0; border: 0; width: 32px; background: transparent; line-height: 30px; border-radius: 59px; height: 30px; text-align: center; padding-bottom: 2px; } dialog.reveal-modal .close-reveal-modal:hover { color: #000; } /* Hero background images - replaces stretchy-pants JS */ .hero-bg { height: 100%; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } .hero-bg[data-hero-anchor="top-center"] { background-position: top center; } .hero-bg[data-hero-anchor="center-center"] { background-position: center center; } .hero-bg[data-hero-anchor="bottom-center"] { background-position: bottom center; } .hero-bg[data-hero-anchor="top-left"] { background-position: top left; } .hero-bg[data-hero-anchor="top-right"] { background-position: top right; } /* Hero image containers need to be positioned */ .hero-image, .hero-inner { overflow: hidden; } /* Restore the original stacking: hero image sits BEHIND the page copy (main.css .hero-image is position:absolute;z-index:1; .hero-copy is z-index:10). The blanket position:relative above was pushing the hero image below the form on login/signup/password-reset pages. */ .hero-image { position: absolute; z-index: 1; } /* Sticky Footer - replaces jquery.hug-bottom */ body { display: flex; flex-direction: column; min-height: 100vh; } .content-wrap, .content, .contentWrap { flex: 1; } #footerWrap { flex-shrink: 0; } /* Hero container heights - replaces stretchy-pants JS dynamic sizing */ .content-wrap.top-page-hero { min-height: 500px; position: relative; } .home-hero.hero-image { height: 500px; position: relative; overflow: hidden; } .home-hero.hero-image .hero-inner { height: 100%; position: relative; } .home-hero-copy { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .home-hero-copy > .inner { height: 100%; position: relative; } .home-hero-copy-inner { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 0 60px; z-index: 3; } /* Responsive hero heights */ @media (max-width: 768px) { .content-wrap.top-page-hero { min-height: 350px; } .home-hero.hero-image { height: 350px; } } @media (min-width: 1200px) { .content-wrap.top-page-hero { min-height: 600px; } .home-hero.hero-image { height: 600px; } } /* Public FAQ articles own semantic copy flow without legacy containment. */ .faq-page .faq { display: grid; gap: 8px; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; } .faq-page .faq > * { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; } @media (max-width: 640px) { .faq-page .faq { gap: 6px; } } @media (prefers-color-scheme: dark) { .faq-page .faq { color: inherit; } } /* ============================================================ * LAYOUT MODERNIZATION (formerly layout-modernization.css) * ============================================================ */ /* * Incremental float-modernization overrides. * * Add rules here section by section while following * HTML_CSS_MODERNIZATION_TODO.md. */ /* ======================================================================== Phase 1: shared desktop header ======================================================================== */ .site-header__inner { display: flex; align-items: center; } .site-header__brand { flex: 0 0 190px; } .site-header__nav { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; height: auto; margin-inline-start: auto; line-height: normal; } .site-header__nav a { display: block; flex: 0 0 auto; } /* The product-specific selector in main.css is more specific than the generic inner rule and must remain visible when the alternate header is selected. */ .dot-family-landing #header .dot-family-header.site-header__inner { display: flex; } /* ======================================================================== Phase 11: search and result cards ======================================================================== */ .search-form .hub-form-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 5px; align-items: start; } .search-form .hubFormLabel, .search-form .search-field__control { clear: none; min-width: 0; } .search-form .hub-form-row__label { text-align: right; } .search-form .search-field__control input, .search-form .search-field__control ul { min-width: 0; max-width: 100%; } .search-form .l-form-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; clear: none; } /* Result cards keep their legacy outer boxes and margins. The collection itself only stops using floats, so the wrapping columns stay unchanged. */ .result-grid { display: flex; flex-wrap: wrap; align-content: flex-start; } .result-grid .result-card, .result-grid .searchResult { flex: 0 0 auto; min-width: 0; } @media screen and (max-width: 768px) { .search-form .hub-form-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .search-form .hub-form-row__label { text-align: left; } } /* ======================================================================== Phase 10: events and calendar ======================================================================== */ .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calendar-grid > .day, .calendar-grid.small-calendar > .day { width: auto; min-width: 0; } .calendar-grid .event .controls { display: flex; justify-content: flex-end; gap: 5px; } .calendar-grid .event .controls a { margin-right: 0; } .calendar-legend { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 5px; } .calendar-legend .legend-item, .calendar-legend .legend-item-title { width: auto; margin: 0; } @media screen and (max-width: 768px) { .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; } .calendar-grid > .day { min-width: 0; } .calendar-legend { justify-content: center; } } /* ======================================================================== Phase 9: photo forms, grids, and viewer ======================================================================== */ .photo-mosaic-grid { display: grid; grid-template-columns: repeat(6, 55px); grid-template-rows: repeat(6, 55px); width: 330px; height: 330px; border: 3px solid transparent; position: relative; } .photo-mosaic-grid > a { display: block; width: auto; height: auto; min-width: 0; min-height: 0; } .photo-mosaic-grid > a.s9 { grid-column: span 2; grid-row: span 2; } .photo-mosaic-grid > a.s4 { grid-column: span 3; grid-row: span 3; } .photo-mosaic-grid > a.s49 { grid-column: span 4; grid-row: span 4; } .photo-mosaic-grid > a.sf { grid-column: 1 / -1; grid-row: 1 / -1; } .photo-mosaic-grid > a img, .photo-mosaic-grid > a .gridImage { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-index-grid { display: grid; grid-template-columns: repeat(auto-fill, 110px); gap: 0; align-items: start; } .photo-index-grid > a { display: block; width: 110px; height: 110px; } .photo-upload-progress-grid { display: flex; flex-wrap: wrap; gap: 10px; } .photo-upload-progress-grid .upload { margin: 0; } .photo-preview-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .photo-preview-grid .photo-preview-item { min-width: 0; margin: 0; } /* Inline post columns can be narrower than the fixed-size upload previews. */ .photo-reorder .photo-preview-grid { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); } .photo-reorder .photo-preview-item { width: 130px; } .photo-reorder .photo-preview-image { display: block; width: 100%; height: auto; } .photo-viewer__toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 35px; } .photo-viewer__toolbar .linkHolder, .photo-viewer__toolbar .photo-viewer-link { position: static; margin: 0; } /* Phase 20: dropped the `.photo-viewer-wrap .photo-container` un-float - the framed viewer that used `.photo-container` is gone, so the rule matched nothing. The `.linkHolder` / `.photo-viewer-link` rule above still applies. */ /* Phase 31f: photo-tools uses flex to place rotate buttons side-by-side */ .photo-tools { display: flex; justify-content: center; gap: 0; } /* Phase 31f: download-link anchor uses inline-flex for glyph + filename */ .post-layout .download-link.meta-tooltip { display: inline-flex; align-items: center; gap: 2px; } /* ======================================================================== Phase 8: video form and display ======================================================================== */ .video-upload-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 5px; align-items: start; } .video-upload-row .hubFormLabel, .video-upload-row .hubFormInput { clear: none; width: auto; min-width: 0; } .video-upload-row .fileUpload { position: relative; min-height: 32px; } .video-invisible-clicker { display: block; width: 1px; height: 1px; overflow: hidden; } .video-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; } #downloadVideo, .video-player { display: block; max-width: 100%; margin-inline: auto; } .video-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 1rem; align-items: center; } .video-summary-row .summaryTitle, .video-summary-row .video_thumbs { grid-column: 1 / -1; } .video-summary-row .replies-count, .video-summary-row .video-summary__replies, .video-summary-row .video-summary__meta { min-width: 0; } .video-summary-row .video-summary__meta { text-align: right; } @media screen and (max-width: 768px) { .video-upload-row { grid-template-columns: minmax(0, 1fr); } .video-upload-row .hubFormLabel { text-align: left; } .video-summary-row { grid-template-columns: minmax(0, 1fr); } .video-summary-row .video-summary__meta { text-align: left; } } /* ======================================================================== Phase 7: shared post form ======================================================================== */ .post-form .hub-form-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 5px; align-items: start; margin-bottom: 10px; } .post-form .hubFormLabel, .post-form .hubFormInput { clear: none; width: auto; min-width: 0; } .post-form .hubFormInput .label-less { width: 100%; } .post-form .hub-form-row__label { margin: 0; text-align: right; } .post-form .hub-form-row__control { margin-top: 0; } .post-form .buggybox { display: flex; flex-direction: column; align-items: stretch; width: 100%; } .post-form .also_post_to { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; } .post-form .post-destination-input, .post-form .post-books-input { clear: none; min-width: 0; } .post-form .post-destination-input { margin-top: 10px; } @media screen and (max-width: 768px) { .post-form .hub-form-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .post-form .hub-form-row__label { text-align: left; } } /* ======================================================================== Phase 6: post viewers and post summaries ======================================================================== */ .post-layout { display: grid; grid-template-columns: 55px minmax(0, 1fr); column-gap: 5px; align-items: start; } .post-layout::after { display: none; } .post-layout > .postAvatar, .post-layout > .post-layout__body { min-width: 0; } .post-layout > .post-layout__body { grid-column: 2; } .post-layout .postBody { left: 0; margin-inline-start: 0; min-width: 0; } .post-layout__body:has(.mayflower-attachments) { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; } .post-layout__body:has(.mayflower-attachments) .postBody { grid-column: 1; grid-row: 1; } .post-layout__body .mayflower-attachments { grid-column: 2; grid-row: 1; } .post-layout .post-meta { display: grid; grid-column: 2; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; min-width: 0; margin-inline-start: 0; margin-top: 0; right: auto; } .post-layout .post-time { min-width: 0; } .post-layout .postLinks, .post-layout .post-meta__actions { min-width: 0; } .post-layout .postLinks { grid-column: 2; margin-top: 0; } .post-layout .post-meta__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px; grid-column: 3; } .post-layout .reply-link.meta-tooltip, .post-layout .replyPost:hover a.reply-link, .post-layout .rootPost:hover a.reply-link { display: inline-flex; align-items: center; gap: 2px; width: auto; height: auto; min-height: 20px; padding: 0 3px 3px; top: -3px; box-sizing: border-box; border-color: transparent; text-decoration: none; } .post-layout .reply-link.meta-tooltip:hover { border-color: transparent; box-shadow: 0 0 0 1px #f06b1f; text-decoration: none; } .post-layout .reply-link.meta-tooltip p { display: inline-block; line-height: 20px; } .post-layout .reply-link.meta-tooltip:hover p { display: inline-block; } .post-layout .reply-link.meta-tooltip .meta-glyph { flex: 0 0 20px; } .post-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .post-summary-row .summaryTitle { grid-column: 1 / -1; } .post-summary-row .post-summary__count, .post-summary-row .post-summary__meta { min-width: 0; } .post-summary-row .post-summary__meta { text-align: right; } @media screen and (max-width: 768px) { .post-layout { display: block; } .post-layout > .postAvatar, .post-layout > .post-layout__body, .post-layout .post-meta { width: auto; } .post-layout .post-meta { display: flex; flex-wrap: wrap; gap: 4px; } .post-layout .post-meta__actions { display: flex; margin-inline-start: auto; } .post-summary-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .post-summary-row .post-summary__meta { text-align: left; } } /* ======================================================================== Phase 5: hub home dashboard ======================================================================== */ .hub-dashboard { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 340px); gap: 20px; align-items: start; } .hub-dashboard__primary, .hub-dashboard__secondary { min-width: 0; } .hub-dashboard .hub-home-clear { display: none; } .hub-dashboard .featured-photo-credit { display: block; text-align: right; } .hub-dashboard .member-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px; align-items: center; } .hub-dashboard .memberAvatar, .hub-dashboard .memberName, .hub-dashboard .lastActivity { min-width: 0; } .hub-dashboard .lastActivity { text-align: right; white-space: nowrap; } .panel-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; height: auto; min-height: 30px; } .panel-footer > a, .panel-footer__primary, .panel-footer__secondary { margin-inline: 0; } @media screen and (max-width: 768px) { .hub-dashboard { display: block; } .hub-dashboard__primary, .hub-dashboard__secondary { width: 100%; } .hub-dashboard .member-row { grid-template-columns: 38px minmax(0, 1fr); } .hub-dashboard .lastActivity { grid-column: 2; text-align: left; white-space: normal; } } /* ======================================================================== Phase 4: public and home layouts ======================================================================== */ .home-hero-iti-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .home-hero-iti-links a { margin-inline-start: 0; } .three-col-wrapper.public-feature-grid, .three-col-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%; } .three-col-wrapper .column, .three-col-wrapper .column-1, .three-col-wrapper .column-2, .three-col-wrapper .column-3 { width: auto; margin-inline: 0; padding-inline: 35px; min-width: 0; } .translucent-form .clearfix:has(> .form-element) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* Phase 34b: card-expiration row — selects left, label right */ .translucent-form .clearfix:has(.for-select) { display: flex; align-items: center; } .translucent-form .clearfix:has(.for-select) .for-select { margin-left: auto; } .public-layout .translucent-form .subscribe-button-wrapper { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .translucent-form .form-element { width: auto; margin-inline-end: 0; min-width: 0; } .translucent-form .form-element.three-quarter, .translucent-form .form-element.one-quarter, .translucent-form .form-element.one-quarter-small, .translucent-form .form-element.one-third { width: auto; } /* The old marketing templates use these classes in inline style blocks. The semantic class keeps their columns in normal Grid flow while those legacy blocks are retired in a later cleanup. */ .marketing-three-col, .marketing-four-col { display: grid; gap: 5%; } .marketing-three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .marketing-four-col { grid-template-columns: repeat(4, minmax(0, 1fr)); } .marketing-three-col .column, .marketing-four-col .column { width: auto; margin-inline: 0; min-width: 0; } @media screen and (max-width: 768px) { .three-col-wrapper.public-feature-grid, .three-col-wrapper, .marketing-three-col, .marketing-four-col { grid-template-columns: minmax(0, 1fr); gap: 20px; } .three-col-wrapper .column, .three-col-wrapper .column-1, .three-col-wrapper .column-2, .three-col-wrapper .column-3 { padding-inline: 15px; } .translucent-form .clearfix:has(> .form-element) { grid-template-columns: minmax(0, 1fr); } .public-layout .translucent-form .subscribe-button-wrapper { justify-content: center; } } /* Phase 23: simple content rows no longer use generic left/right utilities. */ .domain-suggestion-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; width: 430px; box-sizing: border-box; margin: 0 60px 10px 0; border-bottom: solid 1px #eee; } .domain-suggestion-row__name, .domain-suggestion-row__action { min-width: 0; } .domain-suggestion-row__name { text-align: left; } .domain-suggestion-row__action { text-align: right; white-space: nowrap; } .pollFooter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 32px; height: auto; box-sizing: border-box; } .poll-footer__total, .poll-footer__action { min-width: 0; } .poll-footer__action { margin-inline-start: auto; } .hub-list-header, .hub-list-row, .hub-list-footer, .admin-username-row, .mayflower-label-row { display: flex; align-items: center; } .hub-list-header__action { margin-inline-start: auto; } .hub-list-row { gap: 0.5rem; } .hub-list-row .hub-name { flex: 1 1 auto; min-width: 0; } .hub-list-row .hub-row__action { margin-inline-start: 0; } .hub-row__action { margin-inline-start: auto; } .hub-row__unviewed { margin-inline-start: 1rem; } .hub-list-footer { justify-content: space-between; height: auto; min-height: 30px; } .hub-list-footer__unviewed { margin-inline-start: auto; margin-right: 75px; } .admin-username-row { gap: 0.35rem; } .mayflower-label-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .mayflower-label-row__target { text-align: right; } .mayflower-match-action { display: block; margin-inline-start: auto; width: max-content; } .membership-member-cell { display: inline-block; vertical-align: middle; margin-inline-end: 0.5rem; } .payment-card-details { display: inline-block; vertical-align: top; } @media screen and (max-width: 768px) { .domain-suggestion-row { width: 100%; margin-inline-end: 0; } .mayflower-label-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .mayflower-label-row__target { text-align: left; } } /* Phase 24: public workflow panels and stable inner rows. The wizard's transform/absolute state containers remain untouched; these rules only own stable panel, action, price, and glyph rows. */ .public-split-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; } .public-split-layout > h1, .public-split-layout > .mayflower-signup-steps, .public-split-layout > .mayflower-steps { grid-column: 1 / -1; } .public-panel--primary, .public-panel--secondary { min-width: 0; } .invitation-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 370px)); justify-content: space-between; align-items: start; gap: 20px; } .invitation-panel--primary, .invitation-shell .invitation-existing-panel { min-width: 0; } .signup-box .subscribe-button-wrapper, .checkout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .wizard-action--back { order: 1; margin-inline-end: auto; } .wizard-charge-message { order: 2; margin-inline-end: auto; } .signup-box .subscribe-button-wrapper .spinner { order: 3; } .wizard-action--forward { order: 4; margin-inline-start: auto; } .price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; } .price-row .description, .price-row .amount { min-width: 0; } .price-row .amount { text-align: end; } .plan-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .plan-choice-row .plan-chooser { width: auto; min-width: 0; margin-inline: 0; } .signup-steps-glyphs { display: grid; grid-template-columns: 70px 127px 70px 127px 70px; align-items: start; } .mayflower-signup-steps .inline-centered { display: flex; justify-content: center; align-items: flex-start; } .mayflower-signup-steps .signup-step-container, .mayflower-signup-steps .signup-step-arrow { flex: 0 0 auto; } @media screen and (max-width: 768px) { .public-split-layout { grid-template-columns: minmax(0, 1fr); } .public-split-layout > h1, .public-split-layout > .mayflower-signup-steps, .public-split-layout > .mayflower-steps { grid-column: auto; } .invitation-shell { grid-template-columns: minmax(0, 1fr); } .plan-choice-row { grid-template-columns: minmax(0, 1fr); } } /* Phase 25: remaining ordinary content rows and controls. */ .events-form-container form > .u-mt-10 { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: start; } .events-form-container form > .u-mt-10 .hubFormLabel, .events-form-container form > .u-mt-10 .hubFormInput { min-width: 0; } .photo-form-actions { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; } .photo-form-actions .hubFormLabel, .photo-form-actions .hubFormInput { min-width: 0; } .replyControls, .reply-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; clear: none; } .replyControls .reply-spinner, .reply-actions .reply-spinner { order: 2; } .replyControls .btnPost, .reply-actions .saveBtn { order: 3; margin-inline-start: auto; } .reply-actions .cancelBtn { order: 4; } .sequential-nav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; width: 100%; } .sequential-nav-grid .seqNav { width: auto; margin: 0; } .sequential-nav-grid .seqNav.older { grid-column: 1; text-align: start; } .sequential-nav-grid .seqNav.newer { grid-column: 2; text-align: end; } .sequential-nav-grid .seqNav.next { grid-column: 1 / -1; text-align: center; } .book-list.display-as-list .book { display: grid; grid-template-columns: 300px 250px minmax(0, 1fr); align-items: center; width: 100%; height: 52px; padding: 8px; box-sizing: border-box; } .book-list.display-as-list .book .book-title, .book-list.display-as-list .book .book-meta { width: auto; height: auto; margin: 0; text-align: start; } .book-list.display-as-list .book .see-all { grid-column: 3; margin: 0; text-align: end; } .profile-pane { display: block; } .profile-pane .centerLineLight { margin-block: 7px; } .default-heading-search { display: inline-block; vertical-align: middle; } .modal-header-wrap { display: flex; align-items: center; } .modal-header-title { flex: 1 1 auto; } .announcement-modal .clearfix { display: flex; align-items: center; gap: 10px; } .announcement-modal .summer-16-glyph-image { flex: 0 0 100px; } .sk-folding-cube { display: grid; grid-template-columns: repeat(2, 1fr); } .multi-thumb-strip .multi-thumb-inner-strip { display: flex; align-items: center; } .multi-thumb-strip .multi-thumb { flex: 0 0 100px; } @media screen and (max-width: 768px) { .book-list.display-as-list .book { grid-template-columns: minmax(0, 1fr) auto; height: auto; min-height: 52px; } .book-list.display-as-list .book .book-meta { grid-column: 1 / -1; } .book-list.display-as-list .book .see-all { grid-column: 2; grid-row: 1; } .sequential-nav-grid { gap: 4px; } } /* ======================================================================== Phase 3: authenticated application shell ======================================================================== */ .hub-shell { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; } .hub-shell::after { display: none; } .hub-shell__warning, .hub-shell > .content-box-wide { grid-column: 1 / -1; } .hub-shell__sidebar { min-width: 0; } .hub-shell__content { box-sizing: border-box; width: auto; min-width: 0; margin-inline-start: 0; } .hub-shell__content.no-nav { grid-column: 1 / -1; width: min(892px, 100%); margin-inline: auto; } .hub-shell__sidebar .linkPart { display: grid; grid-template-columns: minmax(0, 1fr) 43px; } .hub-shell__sidebar .linkFull { display: block; } .hub-shell__sidebar a.mainLink, .hub-shell__sidebar a.linkAdd { min-width: 0; } @media screen and (max-width: 768px) { .hub-shell { display: block; } /* Override the legacy body#hub-pages * content-box rule: mobile.css gives the content box 5px padding on each side at width: 100%. */ body#hub-pages .hub-shell__content { box-sizing: border-box; } .hub-shell__sidebar, .hub-shell__content, .hub-shell__content.no-nav { width: 100%; margin-inline: 0; } .hub-shell__warning { display: block; } } /* Phase 30: mobile layouts still render floated content *inside* their content boxes. TODO(float-removal): replace this temporary flow-root containment after those children and their clearing nodes are audited. It also prevents the first child's margin from collapsing through the box, preserving the old float's 5px top spacing and the footer position. */ .mobile-layout-content { display: flow-root; } /* ======================================================================== Phase 2: shared footer ======================================================================== */ .site-footer__columns { display: grid; grid-template-columns: 250px 250px 300px; column-gap: 30px; align-items: start; } .site-footer__columns .footerColumn { width: auto; margin-inline-end: 0; min-width: 0; } .site-footer__bottom-inner { display: block; } @media screen and (max-width: 768px) { .site-footer__columns { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; width: 100%; } .site-footer__columns .footerColumn { width: 100%; } .site-header__legacy-links { display: flex; align-items: center; justify-content: center; } .site-header__inner { display: block; } .site-header__nav { display: flex; justify-content: flex-start; height: auto; } } /* ======================================================================== Phase 12: book shelf and book editor ======================================================================== */ /* Cover view: the shelf becomes a wrapping row of fixed book slots. Each slot keeps the legacy 236px box (212px cover plus the 24px gutter), so the same three slots still fit the 848px content column and narrower widths drop to two slots and then one without a second float container. */ .book-shelf:not(.book-shelf--empty):not(.display-as-list) { display: flex; flex-wrap: wrap; align-content: flex-start; } /* The view/sort bar keeps the full shelf width it had as a block. */ .book-shelf .view-options { flex: 0 0 100%; } .book-shelf .book { flex: 0 0 auto; } /* List view keeps one book per row. The title, meta and "See all posts" columns inside a row overlap by design in the legacy sheet, so the row internals keep their floats for now and only the shelf changes here. */ .book-shelf.display-as-list { display: block; } /* Book editor: the cover summary becomes a named side panel instead of a floated box. Source order stays summary first, forms second. */ .book-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); align-items: start; } .book-editor__main { grid-column: 1; grid-row: 1; min-width: 0; text-align: left; } .book-editor__aside { grid-column: 2; grid-row: 1; } @media screen and (max-width: 768px) { /* Narrow screens stack the summary above the forms, as before. */ .book-editor { display: block; } .book-editor__main { min-width: 0; text-align: left; } } /* ======================================================================== Phase 13: manage hub ======================================================================== */ /* Hub name and hub avatar no longer need a clearfix: the name row is centred inline content with nothing to contain, and the avatar section is an explicit grid below. The generic utility only contributed its 1px clearing pseudo-element here. */ /* Legacy: the avatar chooser floated left at 64% and the help copy floated left at 31%, so the pair covered 95% of the row and left a 5% trailing gap. The grid reproduces both tracks and their positions exactly, and the source order (chooser, then help) still reads top-left to bottom-right. */ .hub-avatar-settings { display: grid; grid-template-columns: 64% 31%; align-items: start; } /* Both children keep the widths the floats gave them: 64% / 31% was relative to the 848px row, and a stretched grid item resolves to the same used width inside the same tracks. min-width:0 keeps the avatar thumbnails and the long help sentence from widening their track. */ .hub-avatar-settings .hub-avatar-chooser-wrapper { width: auto; min-width: 0; } .hub-avatar-settings .hub-avatar-column { width: auto; min-width: 0; } /* The avatar thumbnails inside #hub-avatar-chooser stay floated on purpose. .hub-chooser-set is an absolutely positioned overlay whose display value is written inline by the avatar-set-chooser Stimulus controller, so a grid or flex declaration on that container is overridden at runtime; removing the thumbnail floats would need a JavaScript change, which is out of scope for float removal. */ /* ======================================================================== Phase 14: invitations (and the shared tab bar) ======================================================================== */ /* Tab bars: `.tab-links` was a cleared block whose tabs floated left. The row is one-dimensional, so it becomes a flex row and the tabs become flex items. Tabs keep their own widths, their 10px left margin and the selected tab's `top:2px` offset, so the row paints where it did before; the tab controller only toggles the `selected` class and never rewrites display. */ .tab-links { display: flex; align-items: flex-start; } /* Invitation cards: three-to-four 330px cards floated left inside a row that is deliberately 20px wider than its column. A wrapping flex row with the card margins untouched reproduces the same two-per-row desktop layout and the same single-column mobile layout, and it contains the cards without a clearfix. */ .invitation-fields { display: flex; flex-wrap: wrap; align-items: flex-start; } /* flex: 0 0 auto plus min-width:0 keeps a card at its declared 330px instead of shrinking or growing to fit content, which is how the float behaved. */ .invitation-options { flex: 0 0 auto; min-width: 0; } /* ======================================================================== Phase 15: account, profile and payment-method forms ======================================================================== Every rule here is scoped to wide screens. mobile.css owns the narrow layouts (full-width labels and inputs, left-aligned preference selects) and its float:none resets are a deliberate mobile design, so these conversions only replace the desktop float mechanism. Phase 18 revisits mobile.css. ======================================================================== */ @media screen and (min-width: 769px) { /* Profile field rows (users/_profile.html.erb). Each row floated left inside the pane, and inside a row the label, the input block and the three phone groups each floated left. .profile-row KEEPS its own `float: left`. Measured side by side, dropping it moves every following .centerLineLight divider down by 7px (a floated sibling absorbs the divider's 7px top margin, a block-level flex container does not), which lengthens the pane and changes the vertical rhythm. Container floats are retired in Phase 20 together with the rest of the page flow; what changes here is that nothing inside these rows floats, so the phone groups wrap as units instead of relying on float wrapping. */ .profile-row { display: flex; flex-wrap: wrap; align-items: flex-start; } /* Keep the declared 130px label and 100px/235px field widths. Letting them shrink to fit text would pack three phone groups onto one line instead of the two the float layout wrapped onto, and would slide every field about 20px to the left. */ .profile-row .hubFormLabel { flex: 0 0 auto; } /* The phone row holds three label+input pairs; each pair becomes its own flex row. It keeps its declared 235px width, so the row wraps after the second pair just as the floats did. */ .profile-row .short-form-input { display: flex; align-items: flex-start; } /* Credential, avatar and action rows (users/_account.html.erb) share the same floated-label / wrapped-content pattern. min-width:0 lets a long value wrap inside the row instead of pushing it wider. The 5px top margin on the field wrapper is dropped because the float layout absorbed that margin into the label's line box; keeping it would make every row 5px taller than the layout it replaces. */ .account-field-row, .account-avatar-row, .account-actions, .profile-actions { display: flex; flex-wrap: wrap; align-items: flex-start; } .account-field-row .hubFormLabel, .account-avatar-row > .hubFormLabel, .account-actions .hubFormLabel, .profile-actions .hubFormLabel { flex: 0 0 auto; } .account-field-row .hubFormInput, .account-actions .hubFormInput, .profile-actions .hubFormInput { flex: 0 1 auto; min-width: 0; margin-top: 0; } .account-avatar-input, .account-avatar-help { /* Keep the declared 105px / 400px widths instead of shrinking to the container, which is what the floats did. */ flex: 0 0 auto; } /* The "Upload New" row keeps its own line, as it did below the clearing node. */ .account-actions { flex: 0 0 100%; } /* Preference select rows (users/_preferences.html.erb). Wide screens floated the label-and-select block right; the flex row end-aligns the same block instead. The .right utility is gone from these four rows and the new .select-field class carries only its right alignment, so narrow screens keep the left-aligned block mobile.css already gives them. */ .select-row { display: flex; justify-content: flex-end; } .select-field { text-align: right; } } /* ======================================================================== Phase 16: poll responses and the poll composer ======================================================================== */ /* One poll response (polls/_show_responses.html.erb). * * The row was two columns: an absolutely positioned vote count pinned to the * bottom-left of the row (its `float: left` never applied, because absolutely * positioned boxes ignore float) and a 440px block floated to the right edge. * The empty .clearing node at the end of the row was the only thing giving * the row its height, and .pollPercent stays absolutely positioned inside the * row, so the bar fill overlay and the tooltip markup are untouched. * * The flex row below reproduces the old geometry exactly: 99px + 440px inside * a 540px row, both columns bottom aligned, verified identical to 0.01px at * 1180px, 769px, 500px, 390px and 336px, and for the 0%, partial and 100% bar * widths. Below 769px the same numbers come from the narrow widths in * mobile.css (80px + 212px inside 297px), which this rule leaves alone. */ .pollResponseContainer { display: flex; align-items: flex-end; } .pollResponseLeft { position: static; clear: none; flex: 0 0 auto; display: flex; justify-content: flex-end; /* The absolute version sat 1px above the bottom of the row. */ margin-bottom: 1px; } .pollResponseRight { clear: none; /* This is what `float: right` did: push the bar block to the right edge of the row and leave the leftover 1px between the two columns. */ margin-left: auto; } /* ======================================================================== Phase 17: admin shell, checkout and migration rows ======================================================================== */ /* The admin shell preserves the former 180px sidebar + 20px gap + 1100px content geometry on its 1300px canvas. Eight admin pages were checked when the grid was introduced. The 521–768px band now stacks the columns (below), and the separate mobile admin layout has no .admin-shell grid. Print still uses its own content-box float until pagination is verified. */ @media screen and (min-width: 769px) { #admin .admin-shell { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; } /* Kept as markup for narrow widths, but as a grid item this 1px pseudo element would add a third row and a 20px gap under the columns. */ #admin .admin-shell::after { display: none; } } /* Phase 30: the desktop admin shell is a two-column grid above 768px. From 521–768px retain its nav in source order, then stack the content; the separate mobile admin layout has no .admin-shell and is untouched. */ @media screen and (min-width: 521px) and (max-width: 768px) { body#admin:has(.admin-shell) { min-width: 0; } #admin:has(.admin-shell) .contentWrap { width: 100%; } #admin .admin-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } #admin .admin-shell::after { display: none; } #admin .admin-shell .contentBox { box-sizing: border-box; width: 100%; min-width: 0; } } /* ======================================================================== Phase 26: data, migration, account and admin components ======================================================================== */ /* Mayflower selection/status rows used fixed-width floated cells. Grid keeps those component widths while allowing the row to contain its own children. */ .site-row { display: grid; grid-template-columns: 290px 90px 180px 70px; align-items: center; } .site-row > .clearfix { display: contents; } .site-row .site-row-element { width: auto; min-width: 0; } .site-row .site-name { grid-column: 1; } .site-row .site-price { grid-column: 2; } .site-row .import-checkbox { grid-column: 3; } .site-row .site-total { grid-column: 4; } .site-row:has(.site-status) { grid-template-columns: minmax(0, 1fr) 150px 150px; } .site-row:has(.site-status) .site-name { grid-column: 1; } .site-row:has(.site-status) .site-status { grid-column: 2; } .site-row:has(.site-status) .site-next-step { grid-column: 3; } .site-row.total { grid-template-columns: minmax(0, 1fr) 70px; } .site-row.total .site-name { grid-column: 1; } .site-row.total .site-total { grid-column: 2; } .mayflower-site-avatar { display: inline-block; vertical-align: middle; } .upload-status-row { display: grid; grid-template-columns: 220px 60px minmax(0, 1fr) 60px auto; align-items: center; } .upload-status-row-item { width: auto; min-width: 0; } .upload-status-row .upload-file-name { grid-column: 1; } .upload-status-row .upload-file-size { grid-column: 2; } .upload-status-row .upload-status { grid-column: 3; } .upload-status-row .upload-file-count { grid-column: 4; } .upload-status-row .upload-book-link { grid-column: 5; } /* Admin membership rows have two controls in addition to their four data cells; the form participates in the same row instead of clearing floats. */ .data-row.hub-membership-row:not(.mayflower-site) { display: grid; grid-template-columns: minmax(160px, 1fr) 60px minmax(180px, 1fr) 160px auto auto; align-items: center; } .data-row.hub-membership-row:not(.mayflower-site) form { display: contents; } .data-row.hub-membership-row .row-item { width: auto; min-width: 0; } .unaccepted-invitation-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .unaccepted-invitation-list .row-item { width: auto; min-width: 0; } #mayflower-import .item-row .clearfix:has(.mf-site-name) { display: flex; align-items: center; justify-content: space-between; } /* Phase 34c: user profile show page — label/value 2-column grid */ #user_profile { display: grid; grid-template-columns: 200px 1fr; align-items: baseline; column-gap: 10px; } #user_profile h2, #user_profile h3 { grid-column: 1 / -1; } #user_profile .label { grid-column: 1; width: auto; } #user_profile .value { grid-column: 2; width: auto; } /* Phase 34d: reply form flex layout */ .reply_form { display: flex; align-items: flex-start; gap: 45px; } .reply_form .postAvatar, .reply_form .poster { flex: 0 0 55px; } .reply_form .replyPost.dynamic { flex: 1; min-width: 0; margin-left: 0; } /* Phase 34e: dialog book-picker — flex-wrap for label+input row */ #add-post-to-book form { display: flex; flex-wrap: wrap; align-items: flex-start; } #add-post-to-book .alsoPostToHeader { flex-basis: 100%; } #add-post-to-book .clearingIE { display: none; } #add-post-to-book .hubFormLabel { width: 130px; flex: 0 0 130px; } #add-post-to-book .post-books-input-fixed { width: auto; flex: 1; min-width: 0; } #mayflower-import .mf-site-name { flex: 0 0 auto; } #mayflower-import .spokt-hub-selector { flex: 0 0 auto; } .customer-metadata { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; } .admin-tool .customer-metadata .customer-name, .admin-tool .customer-metadata .customer-email { margin-left: 0; } /* Payment history and admin payment rows are ordered columns, not wrapping text around floats. Existing width declarations remain the column sizes. */ .stripe-payment { display: grid; grid-template-columns: 280px 100px 250px 130px; align-items: center; } .stripe-payment div, .stripe-payment div.time-of-payment { width: auto; min-width: 0; } .stripe-payment .payment-amount { grid-column: 1; } .stripe-payment .payment-refund-button { grid-column: 2; } .stripe-payment .payment-code { grid-column: 3; } .stripe-payment .time-of-payment { grid-column: 4; } .payment-history .stripe-payment { grid-template-columns: 40px 70px 140px 130px; } .card-row .payment-card-row { display: grid; grid-template-columns: 170px 1fr 44px; align-items: center; gap: 10px; } .default-card, a.make-default-card, a.remove-card { width: auto; margin-right: 0; } .payment-card-details { min-width: 0; } a.remove-card { grid-column: 3; } #add-card-modal .card-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; } #add-card-modal .card-row label, #add-card-modal .card-row select { width: auto; margin: 0; } /* The chooser controller changes .hub-chooser-set display values inline; the inner grid is therefore the stable layout boundary for its thumbnails. */ .hub-chooser-grid { display: grid; grid-template-columns: repeat(5, 100px); gap: 7px; } .hub-avatar-chooser-inner .avatar-option-thumb { margin: 0; } .hub-avatar-chooser-inner .hub-chooser-set:has(.admin-color-swatch) { display: grid; grid-template-columns: repeat(5, 100px); gap: 8px; height: auto; } @media screen and (max-width: 768px) { .site-row, .site-row:has(.site-status), .site-row.total { grid-template-columns: minmax(0, 1fr); } .site-row .site-row-element, .site-row:has(.site-status) .site-row-element, .site-row.total .site-row-element { grid-column: 1; width: auto; text-align: left; } .upload-status-row { grid-template-columns: minmax(0, 1fr) auto; } .upload-status-row .upload-status-row-item { grid-column: auto; width: auto; } .data-row.hub-membership-row:not(.mayflower-site) { grid-template-columns: 1fr; } .unaccepted-invitation-list { grid-template-columns: 1fr; } .stripe-payment, .payment-history .stripe-payment { grid-template-columns: minmax(0, 1fr) auto; } .stripe-payment div, .stripe-payment div.time-of-payment { grid-column: auto; } .card-row .payment-card-row { grid-template-columns: 1fr 44px; } .card-row .default-card, .card-row a.make-default-card { grid-column: 1 / -1; } .card-row .payment-card-details { grid-column: 1; } a.remove-card { grid-column: 2; grid-row: 2; } .hub-chooser-grid { grid-template-columns: repeat(3, 100px); } .post-layout__body:has(.mayflower-attachments) { grid-template-columns: 1fr; } .post-layout__body:has(.mayflower-attachments) .postBody, .post-layout__body .mayflower-attachments { grid-column: 1; grid-row: auto; } } /* ======================================================================== Phase 27: native slider and thumbnail-strip mechanics ======================================================================== */ /* SmoothDivScroll was not present in the JavaScript bundle; retain the existing wrapper DOM while giving the thumb strip native horizontal scroll. The image remains its intrinsic width, so the visible crop and touch/trackpad interaction replace the old plugin without changing the video link. */ .makeMeScrollable { position: relative; overflow: hidden; } .makeMeScrollable .scrollWrapper { overflow-x: auto; overflow-y: hidden; width: 100%; height: 100%; } .makeMeScrollable .scrollableArea { display: flex; width: max-content; min-width: 100%; min-height: 50px; padding: 3px 0; } .makeMeScrollable .scrollableArea > * { flex: 0 0 auto; position: relative; margin: 0; padding: 0; } /* ======================================================================== Phase 34: pricing column layout (subscription and signup wizard) ======================================================================== */ .pricing.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2%; } .pricing.three-col .column { width: auto; min-width: 0; } .pricing.three-col .signup-box { grid-column: 1 / -1; } /* The signup wizard is a horizontal strip of panes inside the sheet, but the sheet inherited a fixed height (101.9% of the pricing grid row) plus overflow: hidden, which clipped the bottom of every pane — including the "Step 3" and "Finish" buttons — so the wizard could not be completed. Let the sheet grow with its content while keeping the old height as a floor. */ .signup-flow-container .signup-box { height: auto; min-height: 101.9%; } /* Post-scoped large photo modal. Native dialog supplies focus trapping and Escape. */ .photo-lightbox { position: fixed; inset: 0; box-sizing: border-box; width: min(1100px, 96vw); max-width: 96vw; max-height: 96dvh; margin: auto; padding: 48px 12px 12px; border: 0; border-radius: 10px; background: #151515; color: var(--on-contrast); overflow: auto; } .photo-lightbox::backdrop { background: rgb(0 0 0 / 85%); } .photo-lightbox button { cursor: pointer; border: 0; padding: 0; color: var(--on-contrast); } .photo-lightbox button:focus-visible { outline: 2px solid var(--on-contrast); outline-offset: 3px; } .photo-lightbox__close { position: absolute; top: 6px; right: 12px; width: 36px; height: 36px; font-size: 32px; background: transparent; } .photo-lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100px; } .photo-lightbox__image { display: block; max-width: 100%; max-height: calc(96dvh - 200px); width: auto; height: auto; margin: 0 auto; object-fit: contain; } .photo-lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 48px; font-size: 24px; background: rgb(0 0 0 / 50%); border-radius: 4px; } .photo-lightbox__arrow--previous { left: 4px; } .photo-lightbox__arrow--next { right: 4px; } .photo-lightbox__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; max-width: 70%; gap: 8px; padding: 8px; border-radius: 16px; background: rgb(0 0 0 / 45%); } .photo-lightbox .photo-lightbox__dot { width: 9px; height: 9px; border-radius: 50%; background: #888; } .photo-lightbox .photo-lightbox__dot[aria-current="true"] { background: var(--on-contrast); } .photo-lightbox__position { margin: 8px 0; text-align: center; font-size: 13px; color: #ddd; } .photo-lightbox__thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 4px; } .photo-lightbox__thumbnails[hidden] { display: none; } .photo-lightbox__thumbnail { flex: 0 0 64px; height: 64px; background: transparent; opacity: .4; } .photo-lightbox__thumbnail[aria-current="true"] { opacity: 1; outline: 2px solid var(--on-contrast); } .photo-lightbox__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Branded customer support portal; shared responsive layout for all devices. */ .support-portal { box-sizing: border-box; width: min(52rem, calc(100% - 2rem)); overflow-wrap: anywhere; } .support-portal h1 { font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.2; margin: 1rem 0; } .support-portal h2 { font-size: 1.3rem; line-height: 1.3; margin: 0.5rem 0 .75rem; } .support-portal p { margin-bottom: 1rem; } .support-portal section { margin: 0rem 0; } .support-portal__form { display: grid; gap: .75rem; } .support-portal__form label { font-weight: 600; } .support-portal__form input[type="text"], .support-portal__form textarea { box-sizing: border-box; width: 100%; padding: .75rem; border: 1px solid var(--border-faint); border-radius: 5px; font: inherit; color: inherit; background: transparent; } .support-portal__form textarea { resize: vertical; } .support-portal__form .big-button { justify-self: start; max-width: 100%; white-space: normal; line-height: 1.5; padding: .9rem 1.5rem; } .support-portal__tickets { padding: 0; } .support-portal__tickets li { list-style: none; padding: 1rem 0; border-bottom: 1px solid #888; } .support-portal__state { display: inline-block; font-size: .9rem; font-weight: 600; margin-left: .5rem; } .support-portal__date { display: block; font-size: .9rem; margin-top: .5rem; } .support-portal__conversation { max-height: min(1000px, 75vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 1rem; border: 1px solid var(--border-faint); border-radius: 8px; } .support-portal__message { display: flex; align-items: flex-end; justify-content: flex-start; gap: .75rem; margin: 0 0 1.25rem; } .support-portal__message:last-child { margin-bottom: 0; } .support-portal__message--customer { flex-direction: row-reverse; } .support-portal__avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .support-portal__avatar--team { object-fit: contain; box-sizing: border-box; border: solid 1px var(--border-faint); } .support-portal__bubble { flex: 0 1 80%; min-width: 0; max-width: 80%; box-sizing: border-box; padding: 1rem; border: 1px solid var(--message-border); border-radius: 16px 16px 16px 4px; background: var(--message-surface); text-align: left; } .support-portal__message--customer .support-portal__bubble { border-radius: 16px 16px 4px 16px; background: var(--customer-message-surface); } .support-portal__message-header { margin-bottom: .75rem; } .support-portal__message-header .support-portal__date { margin-top: .25rem; font-size: .8rem; } @media (max-width: 480px) { .support-portal__conversation { padding: .5rem; } .support-portal__message { gap: .5rem; } .support-portal__bubble { padding: .75rem; } } .support-portal__body { white-space: pre-wrap; line-height: 1.6; } .support-portal__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; } .support-portal__errors { border: 2px solid #ba3e36; border-radius: 5px; padding: 1rem; margin: 1rem 0; } .support-portal__errors li { list-style: disc; margin-left: 1.5rem; } .support-portal :focus-visible { outline: 3px solid #1a8466; outline-offset: 3px; } /* Privacy policy typography stays scoped to this document. */ .privacy-policy { box-sizing: border-box; width: min(52rem, calc(100% - 2rem)); line-height: 1.6; } .privacy-policy h2 { margin: 1.75rem 0 .75rem; font-size: 1.4rem; line-height: 1.3; } .privacy-policy p { margin-bottom: 1rem; } .privacy-policy ul { padding-left: 1.5rem; margin-bottom: 1rem; } .privacy-policy li { list-style: disc; margin-bottom: .5rem; } /* OIDC consent uses the public Spokt shell, typography and button styles. */ .public-layout .oidc-consent { box-sizing: border-box; width: min(42rem, calc(100% - 2rem)); padding: 2rem 0; } .oidc-consent h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin-bottom: 1rem; } .oidc-consent h2 { font-size: 1.25rem; margin: 1.5rem 0 1rem; } .oidc-consent__permissions { padding-left: 1.5rem; margin-bottom: 2rem; } .oidc-consent__permissions li { list-style: disc; margin-bottom: .5rem; } .oidc-consent__actions { display: flex; flex-wrap: wrap; gap: 1rem; } .oidc-consent__actions form { margin: 0; } .oidc-consent__actions .big-button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } /* Phase 35b: wizard horizontal strip uses flex instead of child floats */ .signup-steps-header, .signup-steps-wrapper { display: flex; flex-direction: row; }