/* This line has now ss-pika as default in order to get it loaded in Heroku. If you want to run in Heroku with font-awesome, you'll need to change this (e.g. by replacing the whole line with font-awesome.min import) */ /*! * Font Awesome 3.0.2 * the iconic font designed for use with Twitter Bootstrap * ------------------------------------------------------- * The full suite of pictographic icons, examples, and documentation * can be found at: http://fortawesome.github.com/Font-Awesome/ * * License * ------------------------------------------------------- * - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL * - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License - * http://opensource.org/licenses/mit-license.html * - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/ * - Attribution is no longer required in Font Awesome 3.0, but much appreciated: * "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome" * Contact * ------------------------------------------------------- * Email: dave@davegandy.com * Twitter: http://twitter.com/fortaweso_me * Work: Lead Product Designer @ http://kyruus.com */ @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,700;1,400&display=swap"); @font-face { font-family: "FontAwesome"; src: url(https://d85dbym32cnih.cloudfront.net/assets/fontawesome-webfont-e07d3b0225ad8e9438927341d63485e01c767edf1e2930b16f0a0bf907ae0d82.eot); src: url(https://d85dbym32cnih.cloudfront.net/assets/fontawesome-webfont-e07d3b0225ad8e9438927341d63485e01c767edf1e2930b16f0a0bf907ae0d82.eot) format("embedded-opentype"), url(https://d85dbym32cnih.cloudfront.net/assets/fontawesome-webfont-a6fb906942932de53852ee244ee3fec27bca0bf63a96421672aa4784851b8d4b.woff) format("woff"), url(https://d85dbym32cnih.cloudfront.net/assets/fontawesome-webfont-1eb7466293db9378858da3694dd11620ec9c351fb7cefef1a94a3802803e1fa3.ttf) format("truetype"); font-weight: normal; font-style: normal; } /* line 34, app/assets/stylesheets/font-awesome.scss */ [class^="icon-"], [class*=" icon-"] { font-family: "FontAwesome"; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; background-image: none; background-position: 0 0; background-repeat: repeat; margin-top: 0; } /* line 51, app/assets/stylesheets/font-awesome.scss */ .icon-white, .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"], .dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:hover > a > [class*=" icon-"] { background-image: none; } /* line 66, app/assets/stylesheets/font-awesome.scss */ [class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none; } /* line 72, app/assets/stylesheets/font-awesome.scss */ a [class^="icon-"], a [class*=" icon-"] { display: inline-block; } /* line 76, app/assets/stylesheets/font-awesome.scss */ .icon-large:before { vertical-align: -10%; font-size: 1.3333333333333333em; } /* line 80, app/assets/stylesheets/font-awesome.scss */ .btn [class^="icon-"], .nav [class^="icon-"], .btn [class*=" icon-"], .nav [class*=" icon-"] { display: inline; } /* line 86, app/assets/stylesheets/font-awesome.scss */ .btn .icon-large[class^="icon-"], .nav .icon-large[class^="icon-"], .btn .icon-large[class*=" icon-"], .nav .icon-large[class*=" icon-"] { line-height: 0.9em; } /* line 92, app/assets/stylesheets/font-awesome.scss */ .btn .icon-spin[class^="icon-"], .nav .icon-spin[class^="icon-"], .btn .icon-spin[class*=" icon-"], .nav .icon-spin[class*=" icon-"] { display: inline-block; } /* line 98, app/assets/stylesheets/font-awesome.scss */ .nav-tabs [class^="icon-"], .nav-pills [class^="icon-"], .nav-tabs [class*=" icon-"], .nav-pills [class*=" icon-"], .nav-tabs .icon-large[class^="icon-"], .nav-pills .icon-large[class^="icon-"], .nav-tabs .icon-large[class*=" icon-"], .nav-pills .icon-large[class*=" icon-"] { line-height: 0.9em; } /* line 108, app/assets/stylesheets/font-awesome.scss */ li [class^="icon-"], .nav li [class^="icon-"], li [class*=" icon-"], .nav li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; } /* line 116, app/assets/stylesheets/font-awesome.scss */ li .icon-large[class^="icon-"], .nav li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"], .nav li .icon-large[class*=" icon-"] { width: 1.5625em; } /* line 122, app/assets/stylesheets/font-awesome.scss */ ul.icons { list-style-type: none; text-indent: -0.75em; } /* line 126, app/assets/stylesheets/font-awesome.scss */ ul.icons li [class^="icon-"], ul.icons li [class*=" icon-"] { width: 0.75em; } /* line 130, app/assets/stylesheets/font-awesome.scss */ .icon-muted { color: #eee; } /* line 133, app/assets/stylesheets/font-awesome.scss */ .icon-border { border: solid 1px #eee; padding: 0.2em 0.25em 0.15em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* line 140, app/assets/stylesheets/font-awesome.scss */ .icon-2x { font-size: 2em; } /* line 143, app/assets/stylesheets/font-awesome.scss */ .icon-2x.icon-border { border-width: 2px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /* line 149, app/assets/stylesheets/font-awesome.scss */ .icon-3x { font-size: 3em; } /* line 152, app/assets/stylesheets/font-awesome.scss */ .icon-3x.icon-border { border-width: 3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* line 158, app/assets/stylesheets/font-awesome.scss */ .icon-4x { font-size: 4em; } /* line 161, app/assets/stylesheets/font-awesome.scss */ .icon-4x.icon-border { border-width: 4px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } /* line 167, app/assets/stylesheets/font-awesome.scss */ .pull-right { float: right; } /* line 170, app/assets/stylesheets/font-awesome.scss */ .pull-left { float: left; } /* line 173, app/assets/stylesheets/font-awesome.scss */ .pull-left[class^="icon-"], .pull-left[class*=" icon-"] { margin-right: 0.3em; } /* line 177, app/assets/stylesheets/font-awesome.scss */ .pull-right[class^="icon-"], .pull-right[class*=" icon-"] { margin-left: 0.3em; } /* line 181, app/assets/stylesheets/font-awesome.scss */ .btn .pull-left.icon-2x[class^="icon-"], .btn .pull-left.icon-2x[class*=" icon-"], .btn .pull-right.icon-2x[class^="icon-"], .btn .pull-right.icon-2x[class*=" icon-"] { margin-top: 0.18em; } /* line 187, app/assets/stylesheets/font-awesome.scss */ .btn .icon-spin.icon-large[class^="icon-"], .btn .icon-spin.icon-large[class*=" icon-"] { line-height: 0.8em; } /* line 191, app/assets/stylesheets/font-awesome.scss */ .btn.btn-small .pull-left.icon-2x[class^="icon-"], .btn.btn-small .pull-left.icon-2x[class*=" icon-"], .btn.btn-small .pull-right.icon-2x[class^="icon-"], .btn.btn-small .pull-right.icon-2x[class*=" icon-"] { margin-top: 0.25em; } /* line 197, app/assets/stylesheets/font-awesome.scss */ .btn.btn-large [class^="icon-"], .btn.btn-large [class*=" icon-"] { margin-top: 0; } /* line 201, app/assets/stylesheets/font-awesome.scss */ .btn.btn-large .pull-left.icon-2x[class^="icon-"], .btn.btn-large .pull-left.icon-2x[class*=" icon-"], .btn.btn-large .pull-right.icon-2x[class^="icon-"], .btn.btn-large .pull-right.icon-2x[class*=" icon-"] { margin-top: 0.05em; } /* line 207, app/assets/stylesheets/font-awesome.scss */ .btn.btn-large .pull-left.icon-2x[class^="icon-"], .btn.btn-large .pull-left.icon-2x[class*=" icon-"] { margin-right: 0.2em; } /* line 211, app/assets/stylesheets/font-awesome.scss */ .btn.btn-large .pull-right.icon-2x[class^="icon-"], .btn.btn-large .pull-right.icon-2x[class*=" icon-"] { margin-left: 0.2em; } /* line 215, app/assets/stylesheets/font-awesome.scss */ .icon-spin { display: inline-block; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } } @-ms-keyframes spin { /* line 247, app/assets/stylesheets/font-awesome.scss */ 0% { -ms-transform: rotate(0deg); } /* line 250, app/assets/stylesheets/font-awesome.scss */ 100% { -ms-transform: rotate(359deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @-moz-document url-prefix() { /* line 263, app/assets/stylesheets/font-awesome.scss */ .icon-spin { height: 0.9em; } /* line 266, app/assets/stylesheets/font-awesome.scss */ .btn .icon-spin { height: auto; } /* line 269, app/assets/stylesheets/font-awesome.scss */ .icon-spin.icon-large { height: 1.25em; } /* line 272, app/assets/stylesheets/font-awesome.scss */ .btn .icon-spin.icon-large { height: 0.75em; } } /* line 276, app/assets/stylesheets/font-awesome.scss */ .icon-glass:before { content: "\f000"; } /* line 279, app/assets/stylesheets/font-awesome.scss */ .icon-music:before { content: "\f001"; } /* line 282, app/assets/stylesheets/font-awesome.scss */ .icon-search:before { content: "\f002"; } /* line 285, app/assets/stylesheets/font-awesome.scss */ .icon-envelope:before { content: "\f003"; } /* line 288, app/assets/stylesheets/font-awesome.scss */ .icon-heart:before { content: "\f004"; } /* line 291, app/assets/stylesheets/font-awesome.scss */ .icon-star:before { content: "\f005"; } /* line 294, app/assets/stylesheets/font-awesome.scss */ .icon-star-empty:before { content: "\f006"; } /* line 297, app/assets/stylesheets/font-awesome.scss */ .icon-user:before { content: "\f007"; } /* line 300, app/assets/stylesheets/font-awesome.scss */ .icon-film:before { content: "\f008"; } /* line 303, app/assets/stylesheets/font-awesome.scss */ .icon-th-large:before { content: "\f009"; } /* line 306, app/assets/stylesheets/font-awesome.scss */ .icon-th:before { content: "\f00a"; } /* line 309, app/assets/stylesheets/font-awesome.scss */ .icon-th-list:before { content: "\f00b"; } /* line 312, app/assets/stylesheets/font-awesome.scss */ .icon-ok:before { content: "\f00c"; } /* line 315, app/assets/stylesheets/font-awesome.scss */ .icon-remove:before { content: "\f00d"; } /* line 318, app/assets/stylesheets/font-awesome.scss */ .icon-zoom-in:before { content: "\f00e"; } /* line 321, app/assets/stylesheets/font-awesome.scss */ .icon-zoom-out:before { content: "\f010"; } /* line 324, app/assets/stylesheets/font-awesome.scss */ .icon-off:before { content: "\f011"; } /* line 327, app/assets/stylesheets/font-awesome.scss */ .icon-signal:before { content: "\f012"; } /* line 330, app/assets/stylesheets/font-awesome.scss */ .icon-cog:before { content: "\f013"; } /* line 333, app/assets/stylesheets/font-awesome.scss */ .icon-trash:before { content: "\f014"; } /* line 336, app/assets/stylesheets/font-awesome.scss */ .icon-home:before { content: "\f015"; } /* line 339, app/assets/stylesheets/font-awesome.scss */ .icon-file:before { content: "\f016"; } /* line 342, app/assets/stylesheets/font-awesome.scss */ .icon-time:before { content: "\f017"; } /* line 345, app/assets/stylesheets/font-awesome.scss */ .icon-road:before { content: "\f018"; } /* line 348, app/assets/stylesheets/font-awesome.scss */ .icon-download-alt:before { content: "\f019"; } /* line 351, app/assets/stylesheets/font-awesome.scss */ .icon-download:before { content: "\f01a"; } /* line 354, app/assets/stylesheets/font-awesome.scss */ .icon-upload:before { content: "\f01b"; } /* line 357, app/assets/stylesheets/font-awesome.scss */ .icon-inbox:before { content: "\f01c"; } /* line 360, app/assets/stylesheets/font-awesome.scss */ .icon-play-circle:before { content: "\f01d"; } /* line 363, app/assets/stylesheets/font-awesome.scss */ .icon-repeat:before { content: "\f01e"; } /* line 366, app/assets/stylesheets/font-awesome.scss */ .icon-refresh:before { content: "\f021"; } /* line 369, app/assets/stylesheets/font-awesome.scss */ .icon-list-alt:before { content: "\f022"; } /* line 372, app/assets/stylesheets/font-awesome.scss */ .icon-lock:before { content: "\f023"; } /* line 375, app/assets/stylesheets/font-awesome.scss */ .icon-flag:before { content: "\f024"; } /* line 378, app/assets/stylesheets/font-awesome.scss */ .icon-headphones:before { content: "\f025"; } /* line 381, app/assets/stylesheets/font-awesome.scss */ .icon-volume-off:before { content: "\f026"; } /* line 384, app/assets/stylesheets/font-awesome.scss */ .icon-volume-down:before { content: "\f027"; } /* line 387, app/assets/stylesheets/font-awesome.scss */ .icon-volume-up:before { content: "\f028"; } /* line 390, app/assets/stylesheets/font-awesome.scss */ .icon-qrcode:before { content: "\f029"; } /* line 393, app/assets/stylesheets/font-awesome.scss */ .icon-barcode:before { content: "\f02a"; } /* line 396, app/assets/stylesheets/font-awesome.scss */ .icon-tag:before { content: "\f02b"; } /* line 399, app/assets/stylesheets/font-awesome.scss */ .icon-tags:before { content: "\f02c"; } /* line 402, app/assets/stylesheets/font-awesome.scss */ .icon-book:before { content: "\f02d"; } /* line 405, app/assets/stylesheets/font-awesome.scss */ .icon-bookmark:before { content: "\f02e"; } /* line 408, app/assets/stylesheets/font-awesome.scss */ .icon-print:before { content: "\f02f"; } /* line 411, app/assets/stylesheets/font-awesome.scss */ .icon-camera:before { content: "\f030"; } /* line 414, app/assets/stylesheets/font-awesome.scss */ .icon-font:before { content: "\f031"; } /* line 417, app/assets/stylesheets/font-awesome.scss */ .icon-bold:before { content: "\f032"; } /* line 420, app/assets/stylesheets/font-awesome.scss */ .icon-italic:before { content: "\f033"; } /* line 423, app/assets/stylesheets/font-awesome.scss */ .icon-text-height:before { content: "\f034"; } /* line 426, app/assets/stylesheets/font-awesome.scss */ .icon-text-width:before { content: "\f035"; } /* line 429, app/assets/stylesheets/font-awesome.scss */ .icon-align-left:before { content: "\f036"; } /* line 432, app/assets/stylesheets/font-awesome.scss */ .icon-align-center:before { content: "\f037"; } /* line 435, app/assets/stylesheets/font-awesome.scss */ .icon-align-right:before { content: "\f038"; } /* line 438, app/assets/stylesheets/font-awesome.scss */ .icon-align-justify:before { content: "\f039"; } /* line 441, app/assets/stylesheets/font-awesome.scss */ .icon-list:before { content: "\f03a"; } /* line 444, app/assets/stylesheets/font-awesome.scss */ .icon-indent-left:before { content: "\f03b"; } /* line 447, app/assets/stylesheets/font-awesome.scss */ .icon-indent-right:before { content: "\f03c"; } /* line 450, app/assets/stylesheets/font-awesome.scss */ .icon-facetime-video:before { content: "\f03d"; } /* line 453, app/assets/stylesheets/font-awesome.scss */ .icon-picture:before { content: "\f03e"; } /* line 456, app/assets/stylesheets/font-awesome.scss */ .icon-pencil:before { content: "\f040"; } /* line 459, app/assets/stylesheets/font-awesome.scss */ .icon-map-marker:before { content: "\f041"; } /* line 462, app/assets/stylesheets/font-awesome.scss */ .icon-adjust:before { content: "\f042"; } /* line 465, app/assets/stylesheets/font-awesome.scss */ .icon-tint:before { content: "\f043"; } /* line 468, app/assets/stylesheets/font-awesome.scss */ .icon-edit:before { content: "\f044"; } /* line 471, app/assets/stylesheets/font-awesome.scss */ .icon-share:before { content: "\f045"; } /* line 474, app/assets/stylesheets/font-awesome.scss */ .icon-check:before { content: "\f046"; } /* line 477, app/assets/stylesheets/font-awesome.scss */ .icon-move:before { content: "\f047"; } /* line 480, app/assets/stylesheets/font-awesome.scss */ .icon-step-backward:before { content: "\f048"; } /* line 483, app/assets/stylesheets/font-awesome.scss */ .icon-fast-backward:before { content: "\f049"; } /* line 486, app/assets/stylesheets/font-awesome.scss */ .icon-backward:before { content: "\f04a"; } /* line 489, app/assets/stylesheets/font-awesome.scss */ .icon-play:before { content: "\f04b"; } /* line 492, app/assets/stylesheets/font-awesome.scss */ .icon-pause:before { content: "\f04c"; } /* line 495, app/assets/stylesheets/font-awesome.scss */ .icon-stop:before { content: "\f04d"; } /* line 498, app/assets/stylesheets/font-awesome.scss */ .icon-forward:before { content: "\f04e"; } /* line 501, app/assets/stylesheets/font-awesome.scss */ .icon-fast-forward:before { content: "\f050"; } /* line 504, app/assets/stylesheets/font-awesome.scss */ .icon-step-forward:before { content: "\f051"; } /* line 507, app/assets/stylesheets/font-awesome.scss */ .icon-eject:before { content: "\f052"; } /* line 510, app/assets/stylesheets/font-awesome.scss */ .icon-chevron-left:before { content: "\f053"; } /* line 513, app/assets/stylesheets/font-awesome.scss */ .icon-chevron-right:before { content: "\f054"; } /* line 516, app/assets/stylesheets/font-awesome.scss */ .icon-plus-sign:before { content: "\f055"; } /* line 519, app/assets/stylesheets/font-awesome.scss */ .icon-minus-sign:before { content: "\f056"; } /* line 522, app/assets/stylesheets/font-awesome.scss */ .icon-remove-sign:before { content: "\f057"; } /* line 525, app/assets/stylesheets/font-awesome.scss */ .icon-ok-sign:before { content: "\f058"; } /* line 528, app/assets/stylesheets/font-awesome.scss */ .icon-question-sign:before { content: "\f059"; } /* line 531, app/assets/stylesheets/font-awesome.scss */ .icon-info-sign:before { content: "\f05a"; } /* line 534, app/assets/stylesheets/font-awesome.scss */ .icon-screenshot:before { content: "\f05b"; } /* line 537, app/assets/stylesheets/font-awesome.scss */ .icon-remove-circle:before { content: "\f05c"; } /* line 540, app/assets/stylesheets/font-awesome.scss */ .icon-ok-circle:before { content: "\f05d"; } /* line 543, app/assets/stylesheets/font-awesome.scss */ .icon-ban-circle:before { content: "\f05e"; } /* line 546, app/assets/stylesheets/font-awesome.scss */ .icon-arrow-left:before { content: "\f060"; } /* line 549, app/assets/stylesheets/font-awesome.scss */ .icon-arrow-right:before { content: "\f061"; } /* line 552, app/assets/stylesheets/font-awesome.scss */ .icon-arrow-up:before { content: "\f062"; } /* line 555, app/assets/stylesheets/font-awesome.scss */ .icon-arrow-down:before { content: "\f063"; } /* line 558, app/assets/stylesheets/font-awesome.scss */ .icon-share-alt:before { content: "\f064"; } /* line 561, app/assets/stylesheets/font-awesome.scss */ .icon-resize-full:before { content: "\f065"; } /* line 564, app/assets/stylesheets/font-awesome.scss */ .icon-resize-small:before { content: "\f066"; } /* line 567, app/assets/stylesheets/font-awesome.scss */ .icon-plus:before { content: "\f067"; } /* line 570, app/assets/stylesheets/font-awesome.scss */ .icon-minus:before { content: "\f068"; } /* line 573, app/assets/stylesheets/font-awesome.scss */ .icon-asterisk:before { content: "\f069"; } /* line 576, app/assets/stylesheets/font-awesome.scss */ .icon-exclamation-sign:before { content: "\f06a"; } /* line 579, app/assets/stylesheets/font-awesome.scss */ .icon-gift:before { content: "\f06b"; } /* line 582, app/assets/stylesheets/font-awesome.scss */ .icon-leaf:before { content: "\f06c"; } /* line 585, app/assets/stylesheets/font-awesome.scss */ .icon-fire:before { content: "\f06d"; } /* line 588, app/assets/stylesheets/font-awesome.scss */ .icon-eye-open:before { content: "\f06e"; } /* line 591, app/assets/stylesheets/font-awesome.scss */ .icon-eye-close:before { content: "\f070"; } /* line 594, app/assets/stylesheets/font-awesome.scss */ .icon-warning-sign:before { content: "\f071"; } /* line 597, app/assets/stylesheets/font-awesome.scss */ .icon-plane:before { content: "\f072"; } /* line 600, app/assets/stylesheets/font-awesome.scss */ .icon-calendar:before { content: "\f073"; } /* line 603, app/assets/stylesheets/font-awesome.scss */ .icon-random:before { content: "\f074"; } /* line 606, app/assets/stylesheets/font-awesome.scss */ .icon-comment:before { content: "\f075"; } /* line 609, app/assets/stylesheets/font-awesome.scss */ .icon-magnet:before { content: "\f076"; } /* line 612, app/assets/stylesheets/font-awesome.scss */ .icon-chevron-up:before { content: "\f077"; } /* line 615, app/assets/stylesheets/font-awesome.scss */ .icon-chevron-down:before { content: "\f078"; } /* line 618, app/assets/stylesheets/font-awesome.scss */ .icon-retweet:before { content: "\f079"; } /* line 621, app/assets/stylesheets/font-awesome.scss */ .icon-shopping-cart:before { content: "\f07a"; } /* line 624, app/assets/stylesheets/font-awesome.scss */ .icon-folder-close:before { content: "\f07b"; } /* line 627, app/assets/stylesheets/font-awesome.scss */ .icon-folder-open:before { content: "\f07c"; } /* line 630, app/assets/stylesheets/font-awesome.scss */ .icon-resize-vertical:before { content: "\f07d"; } /* line 633, app/assets/stylesheets/font-awesome.scss */ .icon-resize-horizontal:before { content: "\f07e"; } /* line 636, app/assets/stylesheets/font-awesome.scss */ .icon-bar-chart:before { content: "\f080"; } /* line 639, app/assets/stylesheets/font-awesome.scss */ .icon-twitter-sign:before { content: "\f081"; } /* line 642, app/assets/stylesheets/font-awesome.scss */ .icon-facebook-sign:before { content: "\f082"; } /* line 645, app/assets/stylesheets/font-awesome.scss */ .icon-camera-retro:before { content: "\f083"; } /* line 648, app/assets/stylesheets/font-awesome.scss */ .icon-key:before { content: "\f084"; } /* line 651, app/assets/stylesheets/font-awesome.scss */ .icon-cogs:before { content: "\f085"; } /* line 654, app/assets/stylesheets/font-awesome.scss */ .icon-comments:before { content: "\f086"; } /* line 657, app/assets/stylesheets/font-awesome.scss */ .icon-thumbs-up:before { content: "\f087"; } /* line 660, app/assets/stylesheets/font-awesome.scss */ .icon-thumbs-down:before { content: "\f088"; } /* line 663, app/assets/stylesheets/font-awesome.scss */ .icon-star-half:before { content: "\f089"; } /* line 666, app/assets/stylesheets/font-awesome.scss */ .icon-heart-empty:before { content: "\f08a"; } /* line 669, app/assets/stylesheets/font-awesome.scss */ .icon-signout:before { content: "\f08b"; } /* line 672, app/assets/stylesheets/font-awesome.scss */ .icon-linkedin-sign:before { content: "\f08c"; } /* line 675, app/assets/stylesheets/font-awesome.scss */ .icon-pushpin:before { content: "\f08d"; } /* line 678, app/assets/stylesheets/font-awesome.scss */ .icon-external-link:before { content: "\f08e"; } /* line 681, app/assets/stylesheets/font-awesome.scss */ .icon-signin:before { content: "\f090"; } /* line 684, app/assets/stylesheets/font-awesome.scss */ .icon-trophy:before { content: "\f091"; } /* line 687, app/assets/stylesheets/font-awesome.scss */ .icon-github-sign:before { content: "\f092"; } /* line 690, app/assets/stylesheets/font-awesome.scss */ .icon-upload-alt:before { content: "\f093"; } /* line 693, app/assets/stylesheets/font-awesome.scss */ .icon-lemon:before { content: "\f094"; } /* line 696, app/assets/stylesheets/font-awesome.scss */ .icon-phone:before { content: "\f095"; } /* line 699, app/assets/stylesheets/font-awesome.scss */ .icon-check-empty:before { content: "\f096"; } /* line 702, app/assets/stylesheets/font-awesome.scss */ .icon-bookmark-empty:before { content: "\f097"; } /* line 705, app/assets/stylesheets/font-awesome.scss */ .icon-phone-sign:before { content: "\f098"; } /* line 708, app/assets/stylesheets/font-awesome.scss */ .icon-twitter:before { content: "\f099"; } /* line 711, app/assets/stylesheets/font-awesome.scss */ .icon-facebook:before { content: "\f09a"; } /* line 714, app/assets/stylesheets/font-awesome.scss */ .icon-github:before { content: "\f09b"; } /* line 717, app/assets/stylesheets/font-awesome.scss */ .icon-unlock:before { content: "\f09c"; } /* line 720, app/assets/stylesheets/font-awesome.scss */ .icon-credit-card:before { content: "\f09d"; } /* line 723, app/assets/stylesheets/font-awesome.scss */ .icon-rss:before { content: "\f09e"; } /* line 726, app/assets/stylesheets/font-awesome.scss */ .icon-hdd:before { content: "\f0a0"; } /* line 729, app/assets/stylesheets/font-awesome.scss */ .icon-bullhorn:before { content: "\f0a1"; } /* line 732, app/assets/stylesheets/font-awesome.scss */ .icon-bell:before { content: "\f0a2"; } /* line 735, app/assets/stylesheets/font-awesome.scss */ .icon-certificate:before { content: "\f0a3"; } /* line 738, app/assets/stylesheets/font-awesome.scss */ .icon-hand-right:before { content: "\f0a4"; } /* line 741, app/assets/stylesheets/font-awesome.scss */ .icon-hand-left:before { content: "\f0a5"; } /* line 744, app/assets/stylesheets/font-awesome.scss */ .icon-hand-up:before { content: "\f0a6"; } /* line 747, app/assets/stylesheets/font-awesome.scss */ .icon-hand-down:before { content: "\f0a7"; } /* line 750, app/assets/stylesheets/font-awesome.scss */ .icon-circle-arrow-left:before { content: "\f0a8"; } /* line 753, app/assets/stylesheets/font-awesome.scss */ .icon-circle-arrow-right:before { content: "\f0a9"; } /* line 756, app/assets/stylesheets/font-awesome.scss */ .icon-circle-arrow-up:before { content: "\f0aa"; } /* line 759, app/assets/stylesheets/font-awesome.scss */ .icon-circle-arrow-down:before { content: "\f0ab"; } /* line 762, app/assets/stylesheets/font-awesome.scss */ .icon-globe:before { content: "\f0ac"; } /* line 765, app/assets/stylesheets/font-awesome.scss */ .icon-wrench:before { content: "\f0ad"; } /* line 768, app/assets/stylesheets/font-awesome.scss */ .icon-tasks:before { content: "\f0ae"; } /* line 771, app/assets/stylesheets/font-awesome.scss */ .icon-filter:before { content: "\f0b0"; } /* line 774, app/assets/stylesheets/font-awesome.scss */ .icon-briefcase:before { content: "\f0b1"; } /* line 777, app/assets/stylesheets/font-awesome.scss */ .icon-fullscreen:before { content: "\f0b2"; } /* line 780, app/assets/stylesheets/font-awesome.scss */ .icon-group:before { content: "\f0c0"; } /* line 783, app/assets/stylesheets/font-awesome.scss */ .icon-link:before { content: "\f0c1"; } /* line 786, app/assets/stylesheets/font-awesome.scss */ .icon-cloud:before { content: "\f0c2"; } /* line 789, app/assets/stylesheets/font-awesome.scss */ .icon-beaker:before { content: "\f0c3"; } /* line 792, app/assets/stylesheets/font-awesome.scss */ .icon-cut:before { content: "\f0c4"; } /* line 795, app/assets/stylesheets/font-awesome.scss */ .icon-copy:before { content: "\f0c5"; } /* line 798, app/assets/stylesheets/font-awesome.scss */ .icon-paper-clip:before { content: "\f0c6"; } /* line 801, app/assets/stylesheets/font-awesome.scss */ .icon-save:before { content: "\f0c7"; } /* line 804, app/assets/stylesheets/font-awesome.scss */ .icon-sign-blank:before { content: "\f0c8"; } /* line 807, app/assets/stylesheets/font-awesome.scss */ .icon-reorder:before { content: "\f0c9"; } /* line 810, app/assets/stylesheets/font-awesome.scss */ .icon-list-ul:before { content: "\f0ca"; } /* line 813, app/assets/stylesheets/font-awesome.scss */ .icon-list-ol:before { content: "\f0cb"; } /* line 816, app/assets/stylesheets/font-awesome.scss */ .icon-strikethrough:before { content: "\f0cc"; } /* line 819, app/assets/stylesheets/font-awesome.scss */ .icon-underline:before { content: "\f0cd"; } /* line 822, app/assets/stylesheets/font-awesome.scss */ .icon-table:before { content: "\f0ce"; } /* line 825, app/assets/stylesheets/font-awesome.scss */ .icon-magic:before { content: "\f0d0"; } /* line 828, app/assets/stylesheets/font-awesome.scss */ .icon-truck:before { content: "\f0d1"; } /* line 831, app/assets/stylesheets/font-awesome.scss */ .icon-pinterest:before { content: "\f0d2"; } /* line 834, app/assets/stylesheets/font-awesome.scss */ .icon-pinterest-sign:before { content: "\f0d3"; } /* line 837, app/assets/stylesheets/font-awesome.scss */ .icon-google-plus-sign:before { content: "\f0d4"; } /* line 840, app/assets/stylesheets/font-awesome.scss */ .icon-google-plus:before { content: "\f0d5"; } /* line 843, app/assets/stylesheets/font-awesome.scss */ .icon-money:before { content: "\f0d6"; } /* line 846, app/assets/stylesheets/font-awesome.scss */ .icon-caret-down:before { content: "\f0d7"; } /* line 849, app/assets/stylesheets/font-awesome.scss */ .icon-caret-up:before { content: "\f0d8"; } /* line 852, app/assets/stylesheets/font-awesome.scss */ .icon-caret-left:before { content: "\f0d9"; } /* line 855, app/assets/stylesheets/font-awesome.scss */ .icon-caret-right:before { content: "\f0da"; } /* line 858, app/assets/stylesheets/font-awesome.scss */ .icon-columns:before { content: "\f0db"; } /* line 861, app/assets/stylesheets/font-awesome.scss */ .icon-sort:before { content: "\f0dc"; } /* line 864, app/assets/stylesheets/font-awesome.scss */ .icon-sort-down:before { content: "\f0dd"; } /* line 867, app/assets/stylesheets/font-awesome.scss */ .icon-sort-up:before { content: "\f0de"; } /* line 870, app/assets/stylesheets/font-awesome.scss */ .icon-envelope-alt:before { content: "\f0e0"; } /* line 873, app/assets/stylesheets/font-awesome.scss */ .icon-linkedin:before { content: "\f0e1"; } /* line 876, app/assets/stylesheets/font-awesome.scss */ .icon-undo:before { content: "\f0e2"; } /* line 879, app/assets/stylesheets/font-awesome.scss */ .icon-legal:before { content: "\f0e3"; } /* line 882, app/assets/stylesheets/font-awesome.scss */ .icon-dashboard:before { content: "\f0e4"; } /* line 885, app/assets/stylesheets/font-awesome.scss */ .icon-comment-alt:before { content: "\f0e5"; } /* line 888, app/assets/stylesheets/font-awesome.scss */ .icon-comments-alt:before { content: "\f0e6"; } /* line 891, app/assets/stylesheets/font-awesome.scss */ .icon-bolt:before { content: "\f0e7"; } /* line 894, app/assets/stylesheets/font-awesome.scss */ .icon-sitemap:before { content: "\f0e8"; } /* line 897, app/assets/stylesheets/font-awesome.scss */ .icon-umbrella:before { content: "\f0e9"; } /* line 900, app/assets/stylesheets/font-awesome.scss */ .icon-paste:before { content: "\f0ea"; } /* line 903, app/assets/stylesheets/font-awesome.scss */ .icon-lightbulb:before { content: "\f0eb"; } /* line 906, app/assets/stylesheets/font-awesome.scss */ .icon-exchange:before { content: "\f0ec"; } /* line 909, app/assets/stylesheets/font-awesome.scss */ .icon-cloud-download:before { content: "\f0ed"; } /* line 912, app/assets/stylesheets/font-awesome.scss */ .icon-cloud-upload:before { content: "\f0ee"; } /* line 915, app/assets/stylesheets/font-awesome.scss */ .icon-user-md:before { content: "\f0f0"; } /* line 918, app/assets/stylesheets/font-awesome.scss */ .icon-stethoscope:before { content: "\f0f1"; } /* line 921, app/assets/stylesheets/font-awesome.scss */ .icon-suitcase:before { content: "\f0f2"; } /* line 924, app/assets/stylesheets/font-awesome.scss */ .icon-bell-alt:before { content: "\f0f3"; } /* line 927, app/assets/stylesheets/font-awesome.scss */ .icon-coffee:before { content: "\f0f4"; } /* line 930, app/assets/stylesheets/font-awesome.scss */ .icon-food:before { content: "\f0f5"; } /* line 933, app/assets/stylesheets/font-awesome.scss */ .icon-file-alt:before { content: "\f0f6"; } /* line 936, app/assets/stylesheets/font-awesome.scss */ .icon-building:before { content: "\f0f7"; } /* line 939, app/assets/stylesheets/font-awesome.scss */ .icon-hospital:before { content: "\f0f8"; } /* line 942, app/assets/stylesheets/font-awesome.scss */ .icon-ambulance:before { content: "\f0f9"; } /* line 945, app/assets/stylesheets/font-awesome.scss */ .icon-medkit:before { content: "\f0fa"; } /* line 948, app/assets/stylesheets/font-awesome.scss */ .icon-fighter-jet:before { content: "\f0fb"; } /* line 951, app/assets/stylesheets/font-awesome.scss */ .icon-beer:before { content: "\f0fc"; } /* line 954, app/assets/stylesheets/font-awesome.scss */ .icon-h-sign:before { content: "\f0fd"; } /* line 957, app/assets/stylesheets/font-awesome.scss */ .icon-plus-sign-alt:before { content: "\f0fe"; } /* line 960, app/assets/stylesheets/font-awesome.scss */ .icon-double-angle-left:before { content: "\f100"; } /* line 963, app/assets/stylesheets/font-awesome.scss */ .icon-double-angle-right:before { content: "\f101"; } /* line 966, app/assets/stylesheets/font-awesome.scss */ .icon-double-angle-up:before { content: "\f102"; } /* line 969, app/assets/stylesheets/font-awesome.scss */ .icon-double-angle-down:before { content: "\f103"; } /* line 972, app/assets/stylesheets/font-awesome.scss */ .icon-angle-left:before { content: "\f104"; } /* line 975, app/assets/stylesheets/font-awesome.scss */ .icon-angle-right:before { content: "\f105"; } /* line 978, app/assets/stylesheets/font-awesome.scss */ .icon-angle-up:before { content: "\f106"; } /* line 981, app/assets/stylesheets/font-awesome.scss */ .icon-angle-down:before { content: "\f107"; } /* line 984, app/assets/stylesheets/font-awesome.scss */ .icon-desktop:before { content: "\f108"; } /* line 987, app/assets/stylesheets/font-awesome.scss */ .icon-laptop:before { content: "\f109"; } /* line 990, app/assets/stylesheets/font-awesome.scss */ .icon-tablet:before { content: "\f10a"; } /* line 993, app/assets/stylesheets/font-awesome.scss */ .icon-mobile-phone:before { content: "\f10b"; } /* line 996, app/assets/stylesheets/font-awesome.scss */ .icon-circle-blank:before { content: "\f10c"; } /* line 999, app/assets/stylesheets/font-awesome.scss */ .icon-quote-left:before { content: "\f10d"; } /* line 1002, app/assets/stylesheets/font-awesome.scss */ .icon-quote-right:before { content: "\f10e"; } /* line 1005, app/assets/stylesheets/font-awesome.scss */ .icon-spinner:before { content: "\f110"; } /* line 1008, app/assets/stylesheets/font-awesome.scss */ .icon-circle:before { content: "\f111"; } /* line 1011, app/assets/stylesheets/font-awesome.scss */ .icon-reply:before { content: "\f112"; } /* line 1014, app/assets/stylesheets/font-awesome.scss */ .icon-github-alt:before { content: "\f113"; } /* line 1017, app/assets/stylesheets/font-awesome.scss */ .icon-folder-close-alt:before { content: "\f114"; } /* line 1020, app/assets/stylesheets/font-awesome.scss */ .icon-folder-open-alt:before { content: "\f115"; } /* line 1023, app/assets/stylesheets/font-awesome.scss */ .icon-menu:before { content: "\e901"; } /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-user-select: none; -ms-touch-action: none; -ms-user-select: none; -moz-user-select: none; -moz-box-sizing: border-box; box-sizing: border-box; } .noUi-base { width: 100%; height: 100%; position: relative; } .noUi-origin { position: absolute; right: 0; top: 0; left: 0; bottom: 0; } .noUi-handle { position: relative; z-index: 1; } .noUi-stacking .noUi-handle { /* This class is applied to the lower origin when its values is > 50%. */ z-index: 10; } .noUi-stacking + .noUi-origin { /* Fix stacking order in IE7, which incorrectly creates a new context for the origins. */ *z-index: -1; } .noUi-state-tap .noUi-origin { -webkit-transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s; } .noUi-state-drag * { cursor: inherit !important; } /* Slider size and handle placement; */ .noUi-horizontal { height: 18px; } .noUi-horizontal .noUi-handle { width: 34px; height: 28px; left: -17px; top: -6px; } .noUi-horizontal.noUi-extended { padding: 0 15px; } .noUi-horizontal.noUi-extended .noUi-origin { right: -15px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; left: -6px; top: -17px; } .noUi-vertical.noUi-extended { padding: 15px 0; } .noUi-vertical.noUi-extended .noUi-origin { bottom: -15px; } /* Styling; */ .noUi-background { background: #FAFAFA; box-shadow: inset 0 1px 1px #f0f0f0; } .noUi-connect { background: #3FB8AF; box-shadow: inset 0 0 3px rgba(51,51,51,0.45); -webkit-transition: background 450ms; transition: background 450ms; } .noUi-origin { border-radius: 2px; } .noUi-target { border-radius: 4px; border: 1px solid #D3D3D3; box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; } .noUi-target.noUi-connect { box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB; } /* Handles and cursors; */ .noUi-dragable { cursor: w-resize; } .noUi-vertical .noUi-dragable { cursor: n-resize; } .noUi-handle { border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } .noUi-active { box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; } /* Handle stripes; */ .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #E8E7E6; left: 14px; top: 6px; } .noUi-handle:after { left: 17px; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } /* Disabled state; */ [disabled].noUi-connect, [disabled] .noUi-connect { background: #B8B8B8; } [disabled] .noUi-handle { cursor: not-allowed; } /* Blocked state; */ .noUi-state-blocked.noUi-connect, .noUi-state-blocked .noUi-connect { background: #4FDACF; } /* * jQuery File Upload Plugin CSS 1.3.0 * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2013, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ .fileinput-button { position: relative; overflow: hidden; } .fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; direction: ltr; cursor: pointer; } /* Fixes for IE < 8 */ @media screen\9 { .fileinput-button input { filter: alpha(opacity=0); font-size: 100%; height: 100%; } } /*! * jQuery UI Tooltip 1.9.2 * http://jqueryui.com * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license */ .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; } /* Fades and background-images don't work well together in IE6, drop the image */ * html .ui-tooltip { background-image: none; } body .ui-tooltip { border-width: 2px; } /*! * Datepicker for Bootstrap * * Copyright 2012 Stefan Petre * Improvements by Andrew Rowls * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * */ .datepicker { padding: 4px; border-radius: 4px; direction: ltr; /*.dow { border-top: 1px solid #ddd !important; }*/ } .datepicker-inline { width: 220px; } .datepicker.datepicker-rtl { direction: rtl; } .datepicker.datepicker-rtl table tr td span { float: right; } .datepicker-dropdown { top: 0; left: 0; } .datepicker-dropdown:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-top: 0; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; } .datepicker-dropdown:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-top: 0; position: absolute; } .datepicker-dropdown.datepicker-orient-left:before { left: 6px; } .datepicker-dropdown.datepicker-orient-left:after { left: 7px; } .datepicker-dropdown.datepicker-orient-right:before { right: 6px; } .datepicker-dropdown.datepicker-orient-right:after { right: 7px; } .datepicker-dropdown.datepicker-orient-top:before { top: -7px; } .datepicker-dropdown.datepicker-orient-top:after { top: -6px; } .datepicker-dropdown.datepicker-orient-bottom:before { bottom: -7px; border-bottom: 0; border-top: 7px solid #999; } .datepicker-dropdown.datepicker-orient-bottom:after { bottom: -6px; border-bottom: 0; border-top: 6px solid #fff; } .datepicker > div { display: none; } .datepicker.days div.datepicker-days { display: block; } .datepicker.months div.datepicker-months { display: block; } .datepicker.years div.datepicker-years { display: block; } .datepicker table { margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .datepicker table tr td, .datepicker table tr th { text-align: center; width: 30px; height: 30px; border-radius: 4px; border: none; } .table-striped .datepicker table tr td, .table-striped .datepicker table tr th { background-color: transparent; } .datepicker table tr td.day:hover, .datepicker table tr td.day.focused { background: #eeeeee; cursor: pointer; } .datepicker table tr td.old, .datepicker table tr td.new { color: #999999; } .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { background: none; color: #999999; cursor: default; } .datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover { color: #000000; background-color: #ffdb99; border-color: #ffb733; } .datepicker table tr td.today:hover, .datepicker table tr td.today:hover:hover, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.disabled:hover:hover, .datepicker table tr td.today:focus, .datepicker table tr td.today:hover:focus, .datepicker table tr td.today.disabled:focus, .datepicker table tr td.today.disabled:hover:focus, .datepicker table tr td.today:active, .datepicker table tr td.today:hover:active, .datepicker table tr td.today.disabled:active, .datepicker table tr td.today.disabled:hover:active, .datepicker table tr td.today.active, .datepicker table tr td.today:hover.active, .datepicker table tr td.today.disabled.active, .datepicker table tr td.today.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.today, .open .dropdown-toggle.datepicker table tr td.today:hover, .open .dropdown-toggle.datepicker table tr td.today.disabled, .open .dropdown-toggle.datepicker table tr td.today.disabled:hover { color: #000000; background-color: #ffcd70; border-color: #f59e00; } .datepicker table tr td.today:active, .datepicker table tr td.today:hover:active, .datepicker table tr td.today.disabled:active, .datepicker table tr td.today.disabled:hover:active, .datepicker table tr td.today.active, .datepicker table tr td.today:hover.active, .datepicker table tr td.today.disabled.active, .datepicker table tr td.today.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.today, .open .dropdown-toggle.datepicker table tr td.today:hover, .open .dropdown-toggle.datepicker table tr td.today.disabled, .open .dropdown-toggle.datepicker table tr td.today.disabled:hover { background-image: none; } .datepicker table tr td.today.disabled, .datepicker table tr td.today:hover.disabled, .datepicker table tr td.today.disabled.disabled, .datepicker table tr td.today.disabled:hover.disabled, .datepicker table tr td.today[disabled], .datepicker table tr td.today:hover[disabled], .datepicker table tr td.today.disabled[disabled], .datepicker table tr td.today.disabled:hover[disabled], fieldset[disabled] .datepicker table tr td.today, fieldset[disabled] .datepicker table tr td.today:hover, fieldset[disabled] .datepicker table tr td.today.disabled, fieldset[disabled] .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover.disabled:hover, .datepicker table tr td.today.disabled.disabled:hover, .datepicker table tr td.today.disabled:hover.disabled:hover, .datepicker table tr td.today[disabled]:hover, .datepicker table tr td.today:hover[disabled]:hover, .datepicker table tr td.today.disabled[disabled]:hover, .datepicker table tr td.today.disabled:hover[disabled]:hover, fieldset[disabled] .datepicker table tr td.today:hover, fieldset[disabled] .datepicker table tr td.today:hover:hover, fieldset[disabled] .datepicker table tr td.today.disabled:hover, fieldset[disabled] .datepicker table tr td.today.disabled:hover:hover, .datepicker table tr td.today.disabled:focus, .datepicker table tr td.today:hover.disabled:focus, .datepicker table tr td.today.disabled.disabled:focus, .datepicker table tr td.today.disabled:hover.disabled:focus, .datepicker table tr td.today[disabled]:focus, .datepicker table tr td.today:hover[disabled]:focus, .datepicker table tr td.today.disabled[disabled]:focus, .datepicker table tr td.today.disabled:hover[disabled]:focus, fieldset[disabled] .datepicker table tr td.today:focus, fieldset[disabled] .datepicker table tr td.today:hover:focus, fieldset[disabled] .datepicker table tr td.today.disabled:focus, fieldset[disabled] .datepicker table tr td.today.disabled:hover:focus, .datepicker table tr td.today.disabled:active, .datepicker table tr td.today:hover.disabled:active, .datepicker table tr td.today.disabled.disabled:active, .datepicker table tr td.today.disabled:hover.disabled:active, .datepicker table tr td.today[disabled]:active, .datepicker table tr td.today:hover[disabled]:active, .datepicker table tr td.today.disabled[disabled]:active, .datepicker table tr td.today.disabled:hover[disabled]:active, fieldset[disabled] .datepicker table tr td.today:active, fieldset[disabled] .datepicker table tr td.today:hover:active, fieldset[disabled] .datepicker table tr td.today.disabled:active, fieldset[disabled] .datepicker table tr td.today.disabled:hover:active, .datepicker table tr td.today.disabled.active, .datepicker table tr td.today:hover.disabled.active, .datepicker table tr td.today.disabled.disabled.active, .datepicker table tr td.today.disabled:hover.disabled.active, .datepicker table tr td.today[disabled].active, .datepicker table tr td.today:hover[disabled].active, .datepicker table tr td.today.disabled[disabled].active, .datepicker table tr td.today.disabled:hover[disabled].active, fieldset[disabled] .datepicker table tr td.today.active, fieldset[disabled] .datepicker table tr td.today:hover.active, fieldset[disabled] .datepicker table tr td.today.disabled.active, fieldset[disabled] .datepicker table tr td.today.disabled:hover.active { background-color: #ffdb99; border-color: #ffb733; } .datepicker table tr td.today:hover:hover { color: #000; } .datepicker table tr td.today.active:hover { color: #fff; } .datepicker table tr td.range, .datepicker table tr td.range:hover, .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:hover { background: #eeeeee; border-radius: 0; } .datepicker table tr td.range.today, .datepicker table tr td.range.today:hover, .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today.disabled:hover { color: #000000; background-color: #f7ca77; border-color: #f1a417; border-radius: 0; } .datepicker table tr td.range.today:hover, .datepicker table tr td.range.today:hover:hover, .datepicker table tr td.range.today.disabled:hover, .datepicker table tr td.range.today.disabled:hover:hover, .datepicker table tr td.range.today:focus, .datepicker table tr td.range.today:hover:focus, .datepicker table tr td.range.today.disabled:focus, .datepicker table tr td.range.today.disabled:hover:focus, .datepicker table tr td.range.today:active, .datepicker table tr td.range.today:hover:active, .datepicker table tr td.range.today.disabled:active, .datepicker table tr td.range.today.disabled:hover:active, .datepicker table tr td.range.today.active, .datepicker table tr td.range.today:hover.active, .datepicker table tr td.range.today.disabled.active, .datepicker table tr td.range.today.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.range.today, .open .dropdown-toggle.datepicker table tr td.range.today:hover, .open .dropdown-toggle.datepicker table tr td.range.today.disabled, .open .dropdown-toggle.datepicker table tr td.range.today.disabled:hover { color: #000000; background-color: #f4bb51; border-color: #bf800c; } .datepicker table tr td.range.today:active, .datepicker table tr td.range.today:hover:active, .datepicker table tr td.range.today.disabled:active, .datepicker table tr td.range.today.disabled:hover:active, .datepicker table tr td.range.today.active, .datepicker table tr td.range.today:hover.active, .datepicker table tr td.range.today.disabled.active, .datepicker table tr td.range.today.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.range.today, .open .dropdown-toggle.datepicker table tr td.range.today:hover, .open .dropdown-toggle.datepicker table tr td.range.today.disabled, .open .dropdown-toggle.datepicker table tr td.range.today.disabled:hover { background-image: none; } .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today:hover.disabled, .datepicker table tr td.range.today.disabled.disabled, .datepicker table tr td.range.today.disabled:hover.disabled, .datepicker table tr td.range.today[disabled], .datepicker table tr td.range.today:hover[disabled], .datepicker table tr td.range.today.disabled[disabled], .datepicker table tr td.range.today.disabled:hover[disabled], fieldset[disabled] .datepicker table tr td.range.today, fieldset[disabled] .datepicker table tr td.range.today:hover, fieldset[disabled] .datepicker table tr td.range.today.disabled, fieldset[disabled] .datepicker table tr td.range.today.disabled:hover, .datepicker table tr td.range.today.disabled:hover, .datepicker table tr td.range.today:hover.disabled:hover, .datepicker table tr td.range.today.disabled.disabled:hover, .datepicker table tr td.range.today.disabled:hover.disabled:hover, .datepicker table tr td.range.today[disabled]:hover, .datepicker table tr td.range.today:hover[disabled]:hover, .datepicker table tr td.range.today.disabled[disabled]:hover, .datepicker table tr td.range.today.disabled:hover[disabled]:hover, fieldset[disabled] .datepicker table tr td.range.today:hover, fieldset[disabled] .datepicker table tr td.range.today:hover:hover, fieldset[disabled] .datepicker table tr td.range.today.disabled:hover, fieldset[disabled] .datepicker table tr td.range.today.disabled:hover:hover, .datepicker table tr td.range.today.disabled:focus, .datepicker table tr td.range.today:hover.disabled:focus, .datepicker table tr td.range.today.disabled.disabled:focus, .datepicker table tr td.range.today.disabled:hover.disabled:focus, .datepicker table tr td.range.today[disabled]:focus, .datepicker table tr td.range.today:hover[disabled]:focus, .datepicker table tr td.range.today.disabled[disabled]:focus, .datepicker table tr td.range.today.disabled:hover[disabled]:focus, fieldset[disabled] .datepicker table tr td.range.today:focus, fieldset[disabled] .datepicker table tr td.range.today:hover:focus, fieldset[disabled] .datepicker table tr td.range.today.disabled:focus, fieldset[disabled] .datepicker table tr td.range.today.disabled:hover:focus, .datepicker table tr td.range.today.disabled:active, .datepicker table tr td.range.today:hover.disabled:active, .datepicker table tr td.range.today.disabled.disabled:active, .datepicker table tr td.range.today.disabled:hover.disabled:active, .datepicker table tr td.range.today[disabled]:active, .datepicker table tr td.range.today:hover[disabled]:active, .datepicker table tr td.range.today.disabled[disabled]:active, .datepicker table tr td.range.today.disabled:hover[disabled]:active, fieldset[disabled] .datepicker table tr td.range.today:active, fieldset[disabled] .datepicker table tr td.range.today:hover:active, fieldset[disabled] .datepicker table tr td.range.today.disabled:active, fieldset[disabled] .datepicker table tr td.range.today.disabled:hover:active, .datepicker table tr td.range.today.disabled.active, .datepicker table tr td.range.today:hover.disabled.active, .datepicker table tr td.range.today.disabled.disabled.active, .datepicker table tr td.range.today.disabled:hover.disabled.active, .datepicker table tr td.range.today[disabled].active, .datepicker table tr td.range.today:hover[disabled].active, .datepicker table tr td.range.today.disabled[disabled].active, .datepicker table tr td.range.today.disabled:hover[disabled].active, fieldset[disabled] .datepicker table tr td.range.today.active, fieldset[disabled] .datepicker table tr td.range.today:hover.active, fieldset[disabled] .datepicker table tr td.range.today.disabled.active, fieldset[disabled] .datepicker table tr td.range.today.disabled:hover.active { background-color: #f7ca77; border-color: #f1a417; } .datepicker table tr td.selected, .datepicker table tr td.selected:hover, .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover { color: #ffffff; background-color: #999999; border-color: #555555; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.selected:hover, .datepicker table tr td.selected:hover:hover, .datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected.disabled:hover:hover, .datepicker table tr td.selected:focus, .datepicker table tr td.selected:hover:focus, .datepicker table tr td.selected.disabled:focus, .datepicker table tr td.selected.disabled:hover:focus, .datepicker table tr td.selected:active, .datepicker table tr td.selected:hover:active, .datepicker table tr td.selected.disabled:active, .datepicker table tr td.selected.disabled:hover:active, .datepicker table tr td.selected.active, .datepicker table tr td.selected:hover.active, .datepicker table tr td.selected.disabled.active, .datepicker table tr td.selected.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.selected, .open .dropdown-toggle.datepicker table tr td.selected:hover, .open .dropdown-toggle.datepicker table tr td.selected.disabled, .open .dropdown-toggle.datepicker table tr td.selected.disabled:hover { color: #ffffff; background-color: #858585; border-color: #373737; } .datepicker table tr td.selected:active, .datepicker table tr td.selected:hover:active, .datepicker table tr td.selected.disabled:active, .datepicker table tr td.selected.disabled:hover:active, .datepicker table tr td.selected.active, .datepicker table tr td.selected:hover.active, .datepicker table tr td.selected.disabled.active, .datepicker table tr td.selected.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.selected, .open .dropdown-toggle.datepicker table tr td.selected:hover, .open .dropdown-toggle.datepicker table tr td.selected.disabled, .open .dropdown-toggle.datepicker table tr td.selected.disabled:hover { background-image: none; } .datepicker table tr td.selected.disabled, .datepicker table tr td.selected:hover.disabled, .datepicker table tr td.selected.disabled.disabled, .datepicker table tr td.selected.disabled:hover.disabled, .datepicker table tr td.selected[disabled], .datepicker table tr td.selected:hover[disabled], .datepicker table tr td.selected.disabled[disabled], .datepicker table tr td.selected.disabled:hover[disabled], fieldset[disabled] .datepicker table tr td.selected, fieldset[disabled] .datepicker table tr td.selected:hover, fieldset[disabled] .datepicker table tr td.selected.disabled, fieldset[disabled] .datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected:hover.disabled:hover, .datepicker table tr td.selected.disabled.disabled:hover, .datepicker table tr td.selected.disabled:hover.disabled:hover, .datepicker table tr td.selected[disabled]:hover, .datepicker table tr td.selected:hover[disabled]:hover, .datepicker table tr td.selected.disabled[disabled]:hover, .datepicker table tr td.selected.disabled:hover[disabled]:hover, fieldset[disabled] .datepicker table tr td.selected:hover, fieldset[disabled] .datepicker table tr td.selected:hover:hover, fieldset[disabled] .datepicker table tr td.selected.disabled:hover, fieldset[disabled] .datepicker table tr td.selected.disabled:hover:hover, .datepicker table tr td.selected.disabled:focus, .datepicker table tr td.selected:hover.disabled:focus, .datepicker table tr td.selected.disabled.disabled:focus, .datepicker table tr td.selected.disabled:hover.disabled:focus, .datepicker table tr td.selected[disabled]:focus, .datepicker table tr td.selected:hover[disabled]:focus, .datepicker table tr td.selected.disabled[disabled]:focus, .datepicker table tr td.selected.disabled:hover[disabled]:focus, fieldset[disabled] .datepicker table tr td.selected:focus, fieldset[disabled] .datepicker table tr td.selected:hover:focus, fieldset[disabled] .datepicker table tr td.selected.disabled:focus, fieldset[disabled] .datepicker table tr td.selected.disabled:hover:focus, .datepicker table tr td.selected.disabled:active, .datepicker table tr td.selected:hover.disabled:active, .datepicker table tr td.selected.disabled.disabled:active, .datepicker table tr td.selected.disabled:hover.disabled:active, .datepicker table tr td.selected[disabled]:active, .datepicker table tr td.selected:hover[disabled]:active, .datepicker table tr td.selected.disabled[disabled]:active, .datepicker table tr td.selected.disabled:hover[disabled]:active, fieldset[disabled] .datepicker table tr td.selected:active, fieldset[disabled] .datepicker table tr td.selected:hover:active, fieldset[disabled] .datepicker table tr td.selected.disabled:active, fieldset[disabled] .datepicker table tr td.selected.disabled:hover:active, .datepicker table tr td.selected.disabled.active, .datepicker table tr td.selected:hover.disabled.active, .datepicker table tr td.selected.disabled.disabled.active, .datepicker table tr td.selected.disabled:hover.disabled.active, .datepicker table tr td.selected[disabled].active, .datepicker table tr td.selected:hover[disabled].active, .datepicker table tr td.selected.disabled[disabled].active, .datepicker table tr td.selected.disabled:hover[disabled].active, fieldset[disabled] .datepicker table tr td.selected.active, fieldset[disabled] .datepicker table tr td.selected:hover.active, fieldset[disabled] .datepicker table tr td.selected.disabled.active, fieldset[disabled] .datepicker table tr td.selected.disabled:hover.active { background-color: #999999; border-color: #555555; } .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover { color: #ffffff; background-color: #428bca; border-color: #357ebd; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover { color: #ffffff; background-color: #3276b1; border-color: #285e8e; } .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover { background-image: none; } .datepicker table tr td.active.disabled, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active[disabled], .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled:hover[disabled], fieldset[disabled] .datepicker table tr td.active, fieldset[disabled] .datepicker table tr td.active:hover, fieldset[disabled] .datepicker table tr td.active.disabled, fieldset[disabled] .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover.disabled:hover, .datepicker table tr td.active.disabled.disabled:hover, .datepicker table tr td.active.disabled:hover.disabled:hover, .datepicker table tr td.active[disabled]:hover, .datepicker table tr td.active:hover[disabled]:hover, .datepicker table tr td.active.disabled[disabled]:hover, .datepicker table tr td.active.disabled:hover[disabled]:hover, fieldset[disabled] .datepicker table tr td.active:hover, fieldset[disabled] .datepicker table tr td.active:hover:hover, fieldset[disabled] .datepicker table tr td.active.disabled:hover, fieldset[disabled] .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active:hover.disabled:focus, .datepicker table tr td.active.disabled.disabled:focus, .datepicker table tr td.active.disabled:hover.disabled:focus, .datepicker table tr td.active[disabled]:focus, .datepicker table tr td.active:hover[disabled]:focus, .datepicker table tr td.active.disabled[disabled]:focus, .datepicker table tr td.active.disabled:hover[disabled]:focus, fieldset[disabled] .datepicker table tr td.active:focus, fieldset[disabled] .datepicker table tr td.active:hover:focus, fieldset[disabled] .datepicker table tr td.active.disabled:focus, fieldset[disabled] .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active:hover.disabled:active, .datepicker table tr td.active.disabled.disabled:active, .datepicker table tr td.active.disabled:hover.disabled:active, .datepicker table tr td.active[disabled]:active, .datepicker table tr td.active:hover[disabled]:active, .datepicker table tr td.active.disabled[disabled]:active, .datepicker table tr td.active.disabled:hover[disabled]:active, fieldset[disabled] .datepicker table tr td.active:active, fieldset[disabled] .datepicker table tr td.active:hover:active, fieldset[disabled] .datepicker table tr td.active.disabled:active, fieldset[disabled] .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active:hover.disabled.active, .datepicker table tr td.active.disabled.disabled.active, .datepicker table tr td.active.disabled:hover.disabled.active, .datepicker table tr td.active[disabled].active, .datepicker table tr td.active:hover[disabled].active, .datepicker table tr td.active.disabled[disabled].active, .datepicker table tr td.active.disabled:hover[disabled].active, fieldset[disabled] .datepicker table tr td.active.active, fieldset[disabled] .datepicker table tr td.active:hover.active, fieldset[disabled] .datepicker table tr td.active.disabled.active, fieldset[disabled] .datepicker table tr td.active.disabled:hover.active { background-color: #428bca; border-color: #357ebd; } .datepicker table tr td span { display: block; width: 23%; height: 54px; line-height: 54px; float: left; margin: 1%; cursor: pointer; border-radius: 4px; } .datepicker table tr td span:hover { background: #eeeeee; } .datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover { background: none; color: #999999; cursor: default; } .datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover { color: #ffffff; background-color: #428bca; border-color: #357ebd; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active:focus, .datepicker table tr td span.active:hover:focus, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td span.active, .open .dropdown-toggle.datepicker table tr td span.active:hover, .open .dropdown-toggle.datepicker table tr td span.active.disabled, .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover { color: #ffffff; background-color: #3276b1; border-color: #285e8e; } .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td span.active, .open .dropdown-toggle.datepicker table tr td span.active:hover, .open .dropdown-toggle.datepicker table tr td span.active.disabled, .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover { background-image: none; } .datepicker table tr td span.active.disabled, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active[disabled], .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active.disabled:hover[disabled], fieldset[disabled] .datepicker table tr td span.active, fieldset[disabled] .datepicker table tr td span.active:hover, fieldset[disabled] .datepicker table tr td span.active.disabled, fieldset[disabled] .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover.disabled:hover, .datepicker table tr td span.active.disabled.disabled:hover, .datepicker table tr td span.active.disabled:hover.disabled:hover, .datepicker table tr td span.active[disabled]:hover, .datepicker table tr td span.active:hover[disabled]:hover, .datepicker table tr td span.active.disabled[disabled]:hover, .datepicker table tr td span.active.disabled:hover[disabled]:hover, fieldset[disabled] .datepicker table tr td span.active:hover, fieldset[disabled] .datepicker table tr td span.active:hover:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active:hover.disabled:focus, .datepicker table tr td span.active.disabled.disabled:focus, .datepicker table tr td span.active.disabled:hover.disabled:focus, .datepicker table tr td span.active[disabled]:focus, .datepicker table tr td span.active:hover[disabled]:focus, .datepicker table tr td span.active.disabled[disabled]:focus, .datepicker table tr td span.active.disabled:hover[disabled]:focus, fieldset[disabled] .datepicker table tr td span.active:focus, fieldset[disabled] .datepicker table tr td span.active:hover:focus, fieldset[disabled] .datepicker table tr td span.active.disabled:focus, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active:hover.disabled:active, .datepicker table tr td span.active.disabled.disabled:active, .datepicker table tr td span.active.disabled:hover.disabled:active, .datepicker table tr td span.active[disabled]:active, .datepicker table tr td span.active:hover[disabled]:active, .datepicker table tr td span.active.disabled[disabled]:active, .datepicker table tr td span.active.disabled:hover[disabled]:active, fieldset[disabled] .datepicker table tr td span.active:active, fieldset[disabled] .datepicker table tr td span.active:hover:active, fieldset[disabled] .datepicker table tr td span.active.disabled:active, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active:hover.disabled.active, .datepicker table tr td span.active.disabled.disabled.active, .datepicker table tr td span.active.disabled:hover.disabled.active, .datepicker table tr td span.active[disabled].active, .datepicker table tr td span.active:hover[disabled].active, .datepicker table tr td span.active.disabled[disabled].active, .datepicker table tr td span.active.disabled:hover[disabled].active, fieldset[disabled] .datepicker table tr td span.active.active, fieldset[disabled] .datepicker table tr td span.active:hover.active, fieldset[disabled] .datepicker table tr td span.active.disabled.active, fieldset[disabled] .datepicker table tr td span.active.disabled:hover.active { background-color: #428bca; border-color: #357ebd; } .datepicker table tr td span.old, .datepicker table tr td span.new { color: #999999; } .datepicker th.datepicker-switch { width: 145px; } .datepicker thead tr:first-child th, .datepicker tfoot tr th { cursor: pointer; } .datepicker thead tr:first-child th:hover, .datepicker tfoot tr th:hover { background: #eeeeee; } .datepicker .cw { font-size: 10px; width: 12px; padding: 0 2px 0 5px; vertical-align: middle; } .datepicker thead tr:first-child th.cw { cursor: default; background-color: transparent; } .input-group.date .input-group-addon i { cursor: pointer; width: 16px; height: 16px; } .input-daterange input { text-align: center; } .input-daterange input:first-child { border-radius: 3px 0 0 3px; } .input-daterange input:last-child { border-radius: 0 3px 3px 0; } .input-daterange .input-group-addon { width: auto; min-width: 16px; padding: 4px 5px; font-weight: normal; line-height: 1.428571429; text-align: center; text-shadow: 0 1px 0 #fff; vertical-align: middle; background-color: #eeeeee; border: solid #cccccc; border-width: 1px 0; margin-left: -5px; margin-right: -5px; } .datepicker.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; display: none; min-width: 160px; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.428571429; } .datepicker.dropdown-menu th, .datepicker.datepicker-inline th, .datepicker.dropdown-menu td, .datepicker.datepicker-inline td { padding: 0px 5px; } /** * selectize.css (v0.12.1) * Copyright (c) 2013–2015 Brian Reavis & contributors * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at: * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. * * @author Brian Reavis */ .selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { visibility: visible !important; background: #f2f2f2 !important; background: rgba(0, 0, 0, 0.06) !important; border: 0 none !important; -webkit-box-shadow: inset 0 0 12px 4px #ffffff; box-shadow: inset 0 0 12px 4px #ffffff; } .selectize-control.plugin-drag_drop .ui-sortable-placeholder::after { content: '!'; visibility: hidden; } .selectize-control.plugin-drag_drop .ui-sortable-helper { -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .selectize-dropdown-header { position: relative; padding: 5px 8px; border-bottom: 1px solid #d0d0d0; background: #f8f8f8; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .selectize-dropdown-header-close { position: absolute; right: 8px; top: 50%; color: #303030; opacity: 0.4; margin-top: -12px; line-height: 20px; font-size: 20px !important; } .selectize-dropdown-header-close:hover { color: #000000; } .selectize-dropdown.plugin-optgroup_columns .optgroup { border-right: 1px solid #f2f2f2; border-top: 0 none; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { border-right: 0 none; } .selectize-dropdown.plugin-optgroup_columns .optgroup:before { display: none; } .selectize-dropdown.plugin-optgroup_columns .optgroup-header { border-top: 0 none; } .selectize-control.plugin-remove_button [data-value] { position: relative; padding-right: 24px !important; } .selectize-control.plugin-remove_button [data-value] .remove { z-index: 1; /* fixes ie bug (see #392) */ position: absolute; top: 0; right: 0; bottom: 0; width: 17px; text-align: center; font-weight: bold; font-size: 12px; color: inherit; text-decoration: none; vertical-align: middle; display: inline-block; padding: 2px 0 0 0; border-left: 1px solid #d0d0d0; -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .selectize-control.plugin-remove_button [data-value] .remove:hover { background: rgba(0, 0, 0, 0.05); } .selectize-control.plugin-remove_button [data-value].active .remove { border-left-color: #cacaca; } .selectize-control.plugin-remove_button .disabled [data-value] .remove:hover { background: none; } .selectize-control.plugin-remove_button .disabled [data-value] .remove { border-left-color: #ffffff; } .selectize-control { position: relative; } .selectize-dropdown, .selectize-input, .selectize-input input { color: #303030; font-family: inherit; font-size: 13px; line-height: 18px; -webkit-font-smoothing: inherit; } .selectize-input, .selectize-control.single .selectize-input.input-active { background: #ffffff; cursor: text; display: inline-block; } .selectize-input { border: 1px solid #d0d0d0; padding: 8px 8px; display: inline-block; width: 100%; overflow: hidden; position: relative; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .selectize-control.multi .selectize-input.has-items { padding: 6px 8px 3px; } .selectize-input.full { background-color: #ffffff; } .selectize-input.disabled, .selectize-input.disabled * { cursor: default !important; } .selectize-input.focus { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } .selectize-input.dropdown-active { -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .selectize-input > * { vertical-align: baseline; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .selectize-control.multi .selectize-input > div { cursor: pointer; margin: 0 3px 3px 0; padding: 2px 6px; background: #f2f2f2; color: #303030; border: 0 solid #d0d0d0; } .selectize-control.multi .selectize-input > div.active { background: #e8e8e8; color: #303030; border: 0 solid #cacaca; } .selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active { color: #7d7d7d; background: #ffffff; border: 0 solid #ffffff; } .selectize-input > input { display: inline-block !important; padding: 0 !important; min-height: 0 !important; max-height: none !important; max-width: 100% !important; margin: 0 2px 0 0 !important; text-indent: 0 !important; border: 0 none !important; background: none !important; line-height: inherit !important; -webkit-user-select: auto !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .selectize-input > input::-ms-clear { display: none; } .selectize-input > input:focus { outline: none !important; } .selectize-input::after { content: ' '; display: block; clear: left; } .selectize-input.dropdown-active::before { content: ' '; display: block; position: absolute; background: #f0f0f0; height: 1px; bottom: 0; left: 0; right: 0; } .selectize-dropdown { position: absolute; z-index: 10; border: 1px solid #d0d0d0; background: #ffffff; margin: -1px 0 0 0; border-top: 0 none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .selectize-dropdown [data-selectable] { cursor: pointer; overflow: hidden; } .selectize-dropdown [data-selectable] .highlight { background: rgba(125, 168, 208, 0.2); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header { padding: 5px 8px; } .selectize-dropdown .optgroup:first-child .optgroup-header { border-top: 0 none; } .selectize-dropdown .optgroup-header { color: #303030; background: #ffffff; cursor: default; } .selectize-dropdown .active { background-color: #f5fafd; color: #495c68; } .selectize-dropdown .active.create { color: #495c68; } .selectize-dropdown .create { color: rgba(48, 48, 48, 0.5); } .selectize-dropdown-content { overflow-y: auto; overflow-x: hidden; max-height: 200px; } .selectize-control.single .selectize-input, .selectize-control.single .selectize-input input { cursor: pointer; } .selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input { cursor: text; } .selectize-control.single .selectize-input:after { content: ' '; display: block; position: absolute; top: 50%; right: 15px; margin-top: -3px; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #808080 transparent transparent transparent; } .selectize-control.single .selectize-input.dropdown-active:after { margin-top: -4px; border-width: 0 5px 5px 5px; border-color: transparent transparent #808080 transparent; } .selectize-control.rtl.single .selectize-input:after { left: 15px; right: auto; } .selectize-control.rtl .selectize-input > input { margin: 0 4px 0 -2px !important; } .selectize-control .selectize-input.disabled { opacity: 0.5; background-color: #fafafa; } /** * Swiper 8.0.7 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 4, 2022 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-pointer-events { touch-action: pan-y; } .swiper-pointer-events.swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient( to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient( to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient( to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ); } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size) / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var( --swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px) ); height: var( --swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px) ); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 0.2s transform, 0.2s top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s transform, 0.2s left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 0.2s transform, 0.2s right; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:SuisseInternational;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.tw-container{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:100%){.tw-container{max-width:100%}}@media (min-width:100rem){.tw-container{max-width:100rem}}.tw-prose{color:#333;max-width:65ch}.tw-prose :where(p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:1rem;margin-bottom:1rem;line-height:1.6}.tw-prose :where([class~=lead]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.tw-prose :where(a):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.tw-prose :where(strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.tw-prose :where(a strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(blockquote strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(thead th strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(ol):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.tw-prose :where(ol[type=A]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:upper-alpha}.tw-prose :where(ol[type=a]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:lower-alpha}.tw-prose :where(ol[type=A s]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:upper-alpha}.tw-prose :where(ol[type=a s]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:lower-alpha}.tw-prose :where(ol[type=I]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:upper-roman}.tw-prose :where(ol[type=i]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:lower-roman}.tw-prose :where(ol[type=I s]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:upper-roman}.tw-prose :where(ol[type=i s]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:lower-roman}.tw-prose :where(ol[type="1"]):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:decimal}.tw-prose :where(ul):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){list-style-type:disc;margin-top:.75em;margin-bottom:1.5em;padding-inline-start:1.625em}.tw-prose :where(ol>li):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.tw-prose :where(ul>li):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *))::marker{color:var(--tw-prose-bullets)}.tw-prose :where(dt):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.tw-prose :where(hr):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.tw-prose :where(blockquote):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.tw-prose :where(blockquote p:first-of-type):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)):before{content:open-quote}.tw-prose :where(blockquote p:last-of-type):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)):after{content:close-quote}.tw-prose :where(h1):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111;font-family:SuisseInternational}.tw-prose :where(h1 strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-weight:900;color:inherit}.tw-prose :where(h2):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333;font-family:SuisseInternational}.tw-prose :where(h2 strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-weight:800;color:inherit}.tw-prose :where(h3):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6;font-family:SuisseInternational}.tw-prose :where(h3 strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-weight:700;color:inherit}.tw-prose :where(h4):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5;font-family:SuisseInternational}.tw-prose :where(h4 strong):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-weight:700;color:inherit}.tw-prose :where(img):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:2em;margin-bottom:2em}.tw-prose :where(picture):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.tw-prose :where(video):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:2em;margin-bottom:2em}.tw-prose :where(kbd):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%),0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.tw-prose :where(code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.tw-prose :where(code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)):before{content:"`"}.tw-prose :where(code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)):after{content:"`"}.tw-prose :where(a code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(h1 code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(h2 code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit;font-size:.875em}.tw-prose :where(h3 code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit;font-size:.9em}.tw-prose :where(h4 code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(blockquote code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(thead th code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:inherit}.tw-prose :where(pre):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.tw-prose :where(pre code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.tw-prose :where(pre code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)):before{content:none}.tw-prose :where(pre code):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)):after{content:none}.tw-prose :where(table):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){width:100%;table-layout:auto;text-align:start;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.tw-prose :where(thead):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.tw-prose :where(thead th):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.tw-prose :where(tbody tr):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.tw-prose :where(tbody tr:last-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){border-bottom-width:0}.tw-prose :where(tbody td):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){vertical-align:baseline}.tw-prose :where(tfoot):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.tw-prose :where(tfoot td):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){vertical-align:top}.tw-prose :where(figure>*):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0;margin-bottom:0}.tw-prose :where(figcaption):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.tw-prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:17 24 39;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.tw-prose :where(picture>img):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0;margin-bottom:0}.tw-prose :where(li):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:.75em;margin-bottom:.75em;line-height:1.4}.tw-prose :where(ol>li):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){padding-inline-start:.375em}.tw-prose :where(ul>li):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){padding-inline-start:.375em}.tw-prose :where(.tw-prose>ul>li p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:.75em;margin-bottom:.75em}.tw-prose :where(.tw-prose>ul>li>p:first-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:1.25em}.tw-prose :where(.tw-prose>ul>li>p:last-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-bottom:1.25em}.tw-prose :where(.tw-prose>ol>li>p:first-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:1.25em}.tw-prose :where(.tw-prose>ol>li>p:last-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-bottom:1.25em}.tw-prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:.75em;margin-bottom:.75em}.tw-prose :where(dl):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.tw-prose :where(dd):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.tw-prose :where(hr+*):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h2+*):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h3+*):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h4+*):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(thead th:first-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){padding-inline-start:0}.tw-prose :where(thead th:last-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){padding-inline-end:0}.tw-prose :where(tbody td,tfoot td):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.tw-prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){padding-inline-start:0}.tw-prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){padding-inline-end:0}.tw-prose :where(figure):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:2em;margin-bottom:2em}.tw-prose :where(.tw-prose>:first-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(.tw-prose>:last-child):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-bottom:0}.tw-prose :where(h5):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-family:SuisseInternational}.tw-prose :where(h6):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){font-family:SuisseInternational}.tw-prose :where(h1+p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h2+p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h3+p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h4+p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h5+p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-prose :where(h6+p):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *)){margin-top:0}.tw-invisible{visibility:hidden}.tw-fixed{position:fixed}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-inset-0{inset:0}.-tw-left-12{left:-3rem}.-tw-right-10{right:-2.5rem}.-tw-top-0\.5{top:-.125rem}.-tw-top-1{top:-.25rem}.-tw-top-\[73px\]{top:-73px}.tw-bottom-0{bottom:0}.tw-bottom-\[3\%\]{bottom:3%}.tw-bottom-\[5\%\]{bottom:5%}.tw-left-0{left:0}.tw-left-1\/3{left:33.333333%}.tw-right-0{right:0}.tw-right-2\.5{right:.625rem}.tw-top-0{top:0}.tw-top-0\.5{top:.125rem}.tw-top-1\/2{top:50%}.tw-top-2\.5{top:.625rem}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-50{z-index:50}.tw-order-1{order:1}.tw-order-2{order:2}.tw-col-span-12{grid-column:span 12/span 12}.tw-col-span-4{grid-column:span 4/span 4}.tw-col-span-6{grid-column:span 6/span 6}.tw-col-span-full{grid-column:1/-1}.\!tw-m-0{margin:0!important}.tw-m-0{margin:0}.tw-mx-5{margin-left:1.25rem;margin-right:1.25rem}.tw-mx-auto{margin-left:auto;margin-right:auto}.tw-my-1\.5{margin-top:.375rem;margin-bottom:.375rem}.tw-my-10{margin-top:2.5rem;margin-bottom:2.5rem}.tw-my-3{margin-top:.75rem;margin-bottom:.75rem}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-my-6{margin-top:1.5rem;margin-bottom:1.5rem}.tw-my-8{margin-top:2rem;margin-bottom:2rem}.\!tw-mb-0{margin-bottom:0!important}.\!tw-mb-3{margin-bottom:.75rem!important}.\!tw-mb-4{margin-bottom:1rem!important}.\!tw-mt-10{margin-top:2.5rem!important}.-tw-mb-\[73px\]{margin-bottom:-73px}.tw--mt-10{margin-top:-2.5rem}.tw-mb-0{margin-bottom:0}.tw-mb-0\.5{margin-bottom:.125rem}.tw-mb-1{margin-bottom:.25rem}.tw-mb-1\.5{margin-bottom:.375rem}.tw-mb-10{margin-bottom:2.5rem}.tw-mb-12{margin-bottom:3rem}.tw-mb-16{margin-bottom:4rem}.tw-mb-2{margin-bottom:.5rem}.tw-mb-2\.5{margin-bottom:.625rem}.tw-mb-20{margin-bottom:5rem}.tw-mb-3{margin-bottom:.75rem}.tw-mb-4{margin-bottom:1rem}.tw-mb-5{margin-bottom:1.25rem}.tw-mb-6{margin-bottom:1.5rem}.tw-mb-7{margin-bottom:1.75rem}.tw-mb-8{margin-bottom:2rem}.tw-mb-\[0\.5rem\]{margin-bottom:.5rem}.tw-ml-12{margin-left:3rem}.tw-ml-2{margin-left:.5rem}.tw-ml-3{margin-left:.75rem}.tw-ml-7{margin-left:1.75rem}.tw-mr-1{margin-right:.25rem}.tw-mr-1\.5{margin-right:.375rem}.tw-mr-2{margin-right:.5rem}.tw-mr-3{margin-right:.75rem}.tw-mr-4{margin-right:1rem}.tw-mr-5{margin-right:1.25rem}.tw-mt-0\.5{margin-top:.125rem}.tw-mt-1{margin-top:.25rem}.tw-mt-10{margin-top:2.5rem}.tw-mt-12{margin-top:3rem}.tw-mt-2{margin-top:.5rem}.tw-mt-3{margin-top:.75rem}.tw-mt-4{margin-top:1rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-6{margin-top:1.5rem}.tw-mt-8{margin-top:2rem}.tw-mt-\[1\.875rem\]{margin-top:1.875rem}.tw-line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.tw-block{display:block}.tw-inline-block{display:inline-block}.tw-inline{display:inline}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-grid{display:grid}.tw-hidden{display:none}.tw-aspect-square{aspect-ratio:1/1}.tw-h-12{height:3rem}.tw-h-24{height:6rem}.tw-h-\[1\.75rem\]{height:1.75rem}.tw-h-\[13rem\]{height:13rem}.tw-h-\[215px\]{height:215px}.tw-h-\[21px\]{height:21px}.tw-h-\[28px\]{height:28px}.tw-h-\[3\.125rem\]{height:3.125rem}.tw-h-\[35rem\]{height:35rem}.tw-h-\[4\.375rem\]{height:4.375rem}.tw-h-\[8\.5rem\]{height:8.5rem}.tw-h-auto{height:auto}.tw-h-full{height:100%}.tw-min-h-\[19px\]{min-height:19px}.tw-min-h-\[2\.75rem\]{min-height:2.75rem}.tw-min-h-\[3\.75rem\]{min-height:3.75rem}.tw-min-h-\[calc\(100vh-18rem\)\]{min-height:calc(100vh - 18rem)}.tw-min-h-screen{min-height:100vh}.tw-w-12{width:3rem}.tw-w-24{width:6rem}.tw-w-\[1\.75rem\]{width:1.75rem}.tw-w-\[12\.5rem\]{width:12.5rem}.tw-w-\[12px\]{width:12px}.tw-w-\[12rem\]{width:12rem}.tw-w-\[16px\]{width:16px}.tw-w-\[18\.75rem\]{width:18.75rem}.tw-w-\[21px\]{width:21px}.tw-w-\[27\.375rem\]{width:27.375rem}.tw-w-\[28px\]{width:28px}.tw-w-\[40\%\]{width:40%}.tw-w-\[70\%\]{width:70%}.tw-w-full{width:100%}.tw-min-w-0{min-width:0}.tw-min-w-\[22rem\]{min-width:22rem}.tw-max-w-\[12\.5rem\]{max-width:12.5rem}.tw-max-w-\[15rem\]{max-width:15rem}.tw-max-w-\[16px\]{max-width:16px}.tw-max-w-\[16rem\]{max-width:16rem}.tw-max-w-\[18\.5rem\]{max-width:18.5rem}.tw-max-w-\[18rem\]{max-width:18rem}.tw-max-w-\[19rem\]{max-width:19rem}.tw-max-w-\[20rem\]{max-width:20rem}.tw-max-w-\[21rem\]{max-width:21rem}.tw-max-w-\[22rem\]{max-width:22rem}.tw-max-w-\[235px\]{max-width:235px}.tw-max-w-\[24rem\]{max-width:24rem}.tw-max-w-\[28\.75rem\]{max-width:28.75rem}.tw-max-w-\[285px\]{max-width:285px}.tw-max-w-\[31\.25rem\]{max-width:31.25rem}.tw-max-w-\[31rem\]{max-width:31rem}.tw-max-w-\[33\.75rem\]{max-width:33.75rem}.tw-max-w-\[33rem\]{max-width:33rem}.tw-max-w-\[36\.875rem\]{max-width:36.875rem}.tw-max-w-\[37\.5rem\]{max-width:37.5rem}.tw-max-w-\[40\.625rem\]{max-width:40.625rem}.tw-max-w-\[40rem\]{max-width:40rem}.tw-max-w-\[41\.25rem\]{max-width:41.25rem}.tw-max-w-\[45rem\]{max-width:45rem}.tw-max-w-\[54\.375rem\]{max-width:54.375rem}.tw-max-w-\[57rem\]{max-width:57rem}.tw-max-w-xs{max-width:20rem}.tw-flex-1{flex:1 1 0%}.tw-flex-shrink-0,.tw-shrink-0{flex-shrink:0}.-tw-translate-x-4{--tw-translate-x:-1rem}.-tw-translate-x-4,.-tw-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-tw-translate-y-1\/2{--tw-translate-y:-50%}.tw-translate-x-4{--tw-translate-x:1rem}.tw-translate-x-4,.tw-translate-x-\[40\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-translate-x-\[40\%\]{--tw-translate-x:40%}.tw-scale-75{--tw-scale-x:.75;--tw-scale-y:.75;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-cursor-pointer{cursor:pointer}.tw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.tw-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.tw-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.tw-flex-row{flex-direction:row}.tw-flex-col{flex-direction:column}.tw-flex-wrap{flex-wrap:wrap}.tw-items-start{align-items:flex-start}.tw-items-end{align-items:flex-end}.tw-items-center{align-items:center}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-justify-items-end{justify-items:end}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-2\.5{gap:.625rem}.tw-gap-3{gap:.75rem}.tw-gap-4{gap:1rem}.tw-gap-6{gap:1.5rem}.tw-gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.tw-gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.tw-gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.tw-gap-x-16{-moz-column-gap:4rem;column-gap:4rem}.tw-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.tw-gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.tw-gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.tw-gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.tw-gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.tw-gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.tw-gap-y-10{row-gap:2.5rem}.tw-gap-y-2{row-gap:.5rem}.tw-gap-y-3{row-gap:.75rem}.tw-gap-y-6{row-gap:1.5rem}.tw-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.tw-overflow-hidden{overflow:hidden}.tw-overflow-visible{overflow:visible}.tw-overflow-x-auto{overflow-x:auto}.tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tw-break-all{word-break:break-all}.tw-rounded{border-radius:.25rem}.tw-rounded-\[1\.875rem\]{border-radius:1.875rem}.tw-rounded-\[2rem\]{border-radius:2rem}.tw-rounded-\[3px\]{border-radius:3px}.tw-rounded-\[6\.25rem\]{border-radius:6.25rem}.tw-rounded-full{border-radius:9999px}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-md{border-radius:.375rem}.tw-border{border-width:1px}.tw-border-b{border-bottom-width:1px}.tw-border-b-2{border-bottom-width:2px}.tw-border-t{border-top-width:1px}.tw-border-solid{border-style:solid}.tw-border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.tw-border-black\/10{border-color:rgba(0,0,0,.1)}.tw-border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.tw-border-ss-alert-border{--tw-border-opacity:1;border-color:rgb(255 153 0/var(--tw-border-opacity,1))}.tw-border-ss-dark-grey{--tw-border-opacity:1;border-color:rgb(99 99 99/var(--tw-border-opacity,1))}.tw-border-ss-green{--tw-border-opacity:1;border-color:rgb(0 247 128/var(--tw-border-opacity,1))}.tw-border-ss-light-border{--tw-border-opacity:1;border-color:rgb(210 210 210/var(--tw-border-opacity,1))}.tw-border-ss-light-grey{--tw-border-opacity:1;border-color:rgb(216 216 216/var(--tw-border-opacity,1))}.tw-border-ss-mid-grey\/30{border-color:hsla(0,0%,53%,.3)}.tw-border-ss-mid-grey\/60{border-color:hsla(0,0%,53%,.6)}.tw-border-ss-off-black{--tw-border-opacity:1;border-color:rgb(51 51 51/var(--tw-border-opacity,1))}.tw-border-transparent{border-color:transparent}.tw-border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.tw-bg-\[\#CD372E\]{--tw-bg-opacity:1;background-color:rgb(205 55 46/var(--tw-bg-opacity,1))}.tw-bg-\[\#e8e8e8\]{--tw-bg-opacity:1;background-color:rgb(232 232 232/var(--tw-bg-opacity,1))}.tw-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.tw-bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.tw-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.tw-bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.tw-bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.tw-bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.tw-bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.tw-bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243/var(--tw-bg-opacity,1))}.tw-bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.tw-bg-red-300{--tw-bg-opacity:1;background-color:rgb(252 165 165/var(--tw-bg-opacity,1))}.tw-bg-ss-alert-bg{background-color:#ff99001a}.tw-bg-ss-green{--tw-bg-opacity:1;background-color:rgb(0 247 128/var(--tw-bg-opacity,1))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.tw-bg-white\/15{background-color:hsla(0,0%,100%,.15)}.tw-bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.tw-bg-\[length\:706px_136px\]{background-size:706px 136px}.tw-bg-contain{background-size:contain}.tw-bg-cover{background-size:cover}.tw-bg-center{background-position:50%}.tw-bg-right{background-position:100%}.tw-bg-top{background-position:top}.tw-bg-no-repeat{background-repeat:no-repeat}.tw-object-cover{-o-object-fit:cover;object-fit:cover}.tw-p-1\.5{padding:.375rem}.tw-p-2{padding:.5rem}.tw-p-2\.5{padding:.625rem}.tw-p-3{padding:.75rem}.tw-p-4{padding:1rem}.tw-p-5{padding:1.25rem}.tw-p-6{padding:1.5rem}.tw-p-\[1\.25rem\]{padding:1.25rem}.tw-p-\[1\.875rem\]{padding:1.875rem}.tw-px-1{padding-left:.25rem;padding-right:.25rem}.tw-px-1\.5{padding-left:.375rem;padding-right:.375rem}.tw-px-12{padding-left:3rem;padding-right:3rem}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-3{padding-left:.75rem;padding-right:.75rem}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-6,.tw-px-\[1\.5rem\]{padding-left:1.5rem;padding-right:1.5rem}.tw-py-1{padding-top:.25rem;padding-bottom:.25rem}.tw-py-12{padding-top:3rem;padding-bottom:3rem}.tw-py-16{padding-top:4rem;padding-bottom:4rem}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.tw-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.tw-py-3{padding-top:.75rem;padding-bottom:.75rem}.tw-py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.tw-py-4{padding-top:1rem;padding-bottom:1rem}.tw-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.tw-py-6{padding-top:1.5rem;padding-bottom:1.5rem}.tw-py-8{padding-top:2rem;padding-bottom:2rem}.tw-pb-0{padding-bottom:0}.tw-pb-12{padding-bottom:3rem}.tw-pb-16{padding-bottom:4rem}.tw-pb-3{padding-bottom:.75rem}.tw-pb-4{padding-bottom:1rem}.tw-pb-6{padding-bottom:1.5rem}.tw-pb-\[1\.25rem\]{padding-bottom:1.25rem}.tw-pb-\[3rem\]{padding-bottom:3rem}.tw-pr-2{padding-right:.5rem}.tw-pr-6{padding-right:1.5rem}.tw-pt-1{padding-top:.25rem}.tw-pt-12{padding-top:3rem}.tw-pt-2{padding-top:.5rem}.tw-pt-4{padding-top:1rem}.tw-pt-5{padding-top:1.25rem}.tw-pt-6{padding-top:1.5rem}.tw-pt-8{padding-top:2rem}.tw-pt-\[2\.8125rem\]{padding-top:2.8125rem}.tw-pt-\[3rem\]{padding-top:3rem}.\!tw-text-left{text-align:left!important}.tw-text-left{text-align:left}.tw-text-center{text-align:center}.tw-text-right{text-align:right}.tw-font-condensed{font-family:Roboto Condensed}.tw-font-headline{font-family:SecondSkinHeadline}.tw-font-sans{font-family:SuisseInternational}.\!tw-text-\[0\.8125rem\]{font-size:.8125rem!important}.tw-text-2xl{font-size:1.5rem;line-height:2rem}.tw-text-3xl{font-size:1.875rem;line-height:2.25rem}.tw-text-\[0\.625rem\]{font-size:.625rem}.tw-text-\[0\.75rem\]{font-size:.75rem}.tw-text-\[0\.8125rem\]{font-size:.8125rem}.tw-text-\[0\.875rem\]{font-size:.875rem}.tw-text-\[0\.9375rem\]{font-size:.9375rem}.tw-text-\[1\.125rem\]{font-size:1.125rem}.tw-text-\[1\.25rem\]{font-size:1.25rem}.tw-text-\[1\.375rem\]{font-size:1.375rem}.tw-text-\[1\.5rem\]{font-size:1.5rem}.tw-text-\[1\.625rem\]{font-size:1.625rem}.tw-text-\[1\.75rem\]{font-size:1.75rem}.tw-text-\[2\.75rem\]{font-size:2.75rem}.tw-text-\[3rem\]{font-size:3rem}.tw-text-\[4\.5rem\]{font-size:4.5rem}.tw-text-base{font-size:1rem;line-height:1.5rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-text-xs{font-size:.75rem;line-height:1rem}.tw-font-bold{font-weight:700}.tw-font-light{font-weight:300}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-font-semibold{font-weight:600}.tw-uppercase{text-transform:uppercase}.tw-normal-case{text-transform:none}.\!tw-leading-normal{line-height:1.5!important}.\!tw-leading-snug{line-height:1.375!important}.tw-leading-8{line-height:2rem}.tw-leading-\[0\.85\]{line-height:.85}.tw-leading-\[1\.1\]{line-height:1.1}.tw-leading-\[1\.2\]{line-height:1.2}.tw-leading-\[1\.4\]{line-height:1.4}.tw-leading-\[1\.5\]{line-height:1.5}.tw-leading-\[1\.6\]{line-height:1.6}.tw-leading-\[1\]{line-height:1}.tw-leading-\[2\]{line-height:2}.tw-leading-\[3\.125rem\]{line-height:3.125rem}.tw-leading-none{line-height:1}.tw-leading-normal{line-height:1.5}.tw-leading-tight{line-height:1.25}.tw-text-\[\#666\]{--tw-text-opacity:1;color:rgb(102 102 102/var(--tw-text-opacity,1))}.tw-text-\[\#868686\]{--tw-text-opacity:1;color:rgb(134 134 134/var(--tw-text-opacity,1))}.tw-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.tw-text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.tw-text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.tw-text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.tw-text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.tw-text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.tw-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.tw-text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.tw-text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.tw-text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.tw-text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.tw-text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.tw-text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.tw-text-pink-800{--tw-text-opacity:1;color:rgb(157 23 77/var(--tw-text-opacity,1))}.tw-text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168/var(--tw-text-opacity,1))}.tw-text-ss-dark-300{--tw-text-opacity:1;color:rgb(139 139 139/var(--tw-text-opacity,1))}.tw-text-ss-dark-400{--tw-text-opacity:1;color:rgb(192 192 192/var(--tw-text-opacity,1))}.tw-text-ss-dark-grey{--tw-text-opacity:1;color:rgb(99 99 99/var(--tw-text-opacity,1))}.tw-text-ss-green{--tw-text-opacity:1;color:rgb(0 247 128/var(--tw-text-opacity,1))}.tw-text-ss-green-darkest{--tw-text-opacity:1;color:rgb(0 183 95/var(--tw-text-opacity,1))}.tw-text-ss-light-300{--tw-text-opacity:1;color:rgb(153 153 153/var(--tw-text-opacity,1))}.tw-text-ss-light-400{--tw-text-opacity:1;color:rgb(98 98 98/var(--tw-text-opacity,1))}.tw-text-ss-mid-grey{--tw-text-opacity:1;color:rgb(134 134 134/var(--tw-text-opacity,1))}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.tw-text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity,1))}.tw-text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.tw-underline{text-decoration-line:underline}.\!tw-no-underline{text-decoration-line:none!important}.tw-no-underline{text-decoration-line:none}.tw-decoration-ss-green{text-decoration-color:#00f780}.tw-decoration-1{text-decoration-thickness:1px}.tw-underline-offset-2{text-underline-offset:2px}.tw-underline-offset-4{text-underline-offset:4px}.tw-underline-offset-6{text-underline-offset:6px;}.tw-underline-offset-8{text-underline-offset:8px}.tw-transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.headline-md{font-size:3rem}.headline-md,.headline-xl{font-family:SecondSkinHeadline;text-transform:uppercase;line-height:.9}.headline-xl{font-size:4.625rem}.title{font-size:1.875rem;line-height:2.25rem;text-decoration-line:underline;text-decoration-color:#00f780;text-decoration-thickness:1px;text-underline-offset:6px;}.ss-container{margin-left:auto;margin-right:auto;max-width:75rem;padding-left:1rem;padding-right:1rem}@media (min-width:768px){.ss-container{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.ss-container{padding-left:2rem;padding-right:2rem}}.rtl-grid{direction:rtl}.ltr-grid{direction:ltr}@font-face{font-family:SecondSkinHeadline;src:url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-3d5cd047a7d906335a513296ba094024b24ff7981e4a5436d30cf488811b707c.woff2) format("woff2"),url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:SuisseInternational;src:url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-2-595c9b95cc4d52b94a19987dc9f2e2743c4e74f140510b04a91a9602c6e5bddf.woff2) format("woff2"),url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-2-39ab8a8597828a109851fd576d6a71e219c65b93d469c3681c372a62c83bd105.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:SuisseInternational;src:url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-light-2-0831b434d7ccdc14f4c1006da400c316c10f3cb869923f904a77f04a1b216871.woff2) format("woff2"),url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-light-2-c02b6c473ad5d206ff470edc5c932a87e45946da3006fa1b396723c6177b7140.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:SuisseInternational;src:url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-semibold-2-4889bed9299840d1c7a2d663d0c90f4741991d5f70a290ccc636b84411fa5fdd.woff2) format("woff2"),url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-semibold-2-f84d1b9cd8b10966e350efa596f3ac5d736c8593ec738f19f7318c8e875e5520.woff) format("woff");font-weight:600;font-style:normal}.swiper-container,.swiper-slide,.swiper-wrapper{height:auto}.swiper.quotes .swiper-wrapper{padding-bottom:2rem}.swiper.quotes .swiper-pagination{bottom:0}.swiper.discover-items .swiper-wrapper{padding-bottom:3rem}.swiper.discover-items .swiper-pagination{bottom:0}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{position:relative;display:inline-block;height:1.25rem;width:1.25rem;border-radius:0;background-color:transparent!important}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:after,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:after{content:"";position:absolute;top:50%;left:0;right:0;height:.125rem;background-color:rgb(99 99 99/var(--tw-bg-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.flash-notice,.flash-notification{--tw-bg-opacity:1;background-color:rgb(0 247 128/var(--tw-bg-opacity,1));padding:.75rem 3rem;text-align:center}.flash-notice a,.flash-notification a{text-decoration-line:underline}[data-action=dark_corner][data-controller=infos] .ss-header,[data-action=how_it_works][data-controller=infos] .ss-header{background-color:transparent}.if-no-js-container{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:100%){.if-no-js-container{max-width:100%}}@media (min-width:100rem){.if-no-js-container{max-width:100rem}}.js .if-no-js-container{padding-left:0;padding-right:0}@media (min-width:640px){.sm\:tw-container{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:100%){.sm\:tw-container{max-width:100%}}@media (min-width:100rem){.sm\:tw-container{max-width:100rem}}}.hover\:tw-border-ss-green:hover{--tw-border-opacity:1;border-color:rgb(0 247 128/var(--tw-border-opacity,1))}.hover\:tw-bg-\[\#BB3128\]:hover{--tw-bg-opacity:1;background-color:rgb(187 49 40/var(--tw-bg-opacity,1))}.hover\:tw-bg-black\/10:hover{background-color:rgba(0,0,0,.1)}.hover\:tw-bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:tw-text-ss-green:hover{--tw-text-opacity:1;color:rgb(0 247 128/var(--tw-text-opacity,1))}.hover\:tw-text-ss-green-darkest:hover{--tw-text-opacity:1;color:rgb(0 183 95/var(--tw-text-opacity,1))}.hover\:tw-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:tw-underline:hover{text-decoration-line:underline}.hover\:tw-no-underline:hover{text-decoration-line:none}.hover\:tw-shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.prose-a\:tw-text-ss-green-hover :is(:where(a):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *))){--tw-text-opacity:1;color:rgb(0 227 118/var(--tw-text-opacity,1))}.prose-a\:hover\:tw-text-ss-green-hover:hover :is(:where(a):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *))){--tw-text-opacity:1;color:rgb(0 227 118/var(--tw-text-opacity,1))}.prose-a\:hover\:tw-no-underline:hover :is(:where(a):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *))){text-decoration-line:none}@media (min-width:600px){.md2\:tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:640px){.sm\:tw-visible{visibility:visible}.sm\:\!tw-block{display:block!important}.sm\:tw-block{display:block}.sm\:tw-inline-block{display:inline-block}.sm\:tw-flex{display:flex}.sm\:tw-grid{display:grid}.sm\:\!tw-hidden{display:none!important}.sm\:tw-hidden{display:none}.sm\:tw-h-\[11\.0625rem\]{height:11.0625rem}.sm\:tw-grow{flex-grow:1}.sm\:tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:tw-items-end{align-items:flex-end}.sm\:tw-items-center{align-items:center}.sm\:tw-justify-start{justify-content:flex-start}.sm\:tw-justify-end{justify-content:flex-end}.sm\:tw-gap-1\.5{gap:.375rem}.sm\:tw-gap-2{gap:.5rem}.sm\:tw-gap-3{gap:.75rem}.sm\:tw-gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.sm\:tw-gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.sm\:tw-border-b{border-bottom-width:1px}.sm\:tw-border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.sm\:\!tw-px-0{padding-left:0!important;padding-right:0!important}.sm\:tw-px-0{padding-left:0;padding-right:0}.sm\:tw-px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:tw-pb-6{padding-bottom:1.5rem}.sm\:tw-text-left{text-align:left}.sm\:tw-text-\[0\.9375rem\]{font-size:.9375rem}.sm\:tw-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.sm\:tw-text-ss-mid-grey{--tw-text-opacity:1;color:rgb(134 134 134/var(--tw-text-opacity,1))}.hover\:sm\:tw-border-transparent:hover{border-color:transparent}.hover\:sm\:tw-text-ss-mid-grey:hover{--tw-text-opacity:1;color:rgb(134 134 134/var(--tw-text-opacity,1))}}@media (min-width:768px){.md\:tw-absolute{position:absolute}.md\:tw-order-1{order:1}.md\:tw-order-2{order:2}.md\:tw-col-span-3{grid-column:span 3/span 3}.md\:tw-col-span-4{grid-column:span 4/span 4}.md\:tw-col-span-5{grid-column:span 5/span 5}.md\:tw-col-span-6{grid-column:span 6/span 6}.md\:tw-col-span-7{grid-column:span 7/span 7}.md\:tw-col-span-9{grid-column:span 9/span 9}.md\:\!tw-mb-8{margin-bottom:2rem!important}.md\:tw-mb-0{margin-bottom:0}.md\:tw-mb-10{margin-bottom:2.5rem}.md\:tw-mb-16{margin-bottom:4rem}.md\:tw-mb-8{margin-bottom:2rem}.md\:tw-mb-\[1rem\]{margin-bottom:1rem}.md\:tw-ml-0{margin-left:0}.md\:tw-mt-0{margin-top:0}.md\:tw-mt-10{margin-top:2.5rem}.md\:tw-mt-16{margin-top:4rem}.md\:tw-mt-6{margin-top:1.5rem}.md\:tw-mt-8{margin-top:2rem}.md\:tw-block{display:block}.md\:tw-inline-block{display:inline-block}.md\:tw-flex{display:flex}.md\:tw-grid{display:grid}.md\:tw-hidden{display:none}.md\:tw-h-auto{height:auto}.md\:tw-w-auto{width:auto}.md\:tw-max-w-\[22rem\]{max-width:22rem}.md\:tw-max-w-\[35rem\]{max-width:35rem}.md\:tw-max-w-\[40rem\]{max-width:40rem}.md\:tw-max-w-none{max-width:none}.md\:-tw-translate-x-\[6rem\]{--tw-translate-x:-6rem}.md\:-tw-translate-x-\[6rem\],.md\:tw-translate-x-6{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:tw-translate-x-6{--tw-translate-x:1.5rem}.md\:tw-translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:tw-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:tw-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:tw-gap-10{gap:2.5rem}.md\:tw-gap-16{gap:4rem}.md\:tw-gap-2\.5{gap:.625rem}.md\:tw-gap-5{gap:1.25rem}.md\:tw-gap-x-12{-moz-column-gap:3rem;column-gap:3rem}.md\:tw-gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.md\:tw-p-\[1\.875rem\]{padding:1.875rem}.md\:tw-px-\[3\.125rem\]{padding-left:3.125rem;padding-right:3.125rem}.md\:tw-py-0{padding-top:0;padding-bottom:0}.md\:tw-py-12{padding-top:3rem;padding-bottom:3rem}.md\:tw-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.md\:tw-pt-0{padding-top:0}.md\:tw-text-left{text-align:left}.md\:tw-text-center{text-align:center}.md\:tw-text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:tw-text-\[1\.75rem\]{font-size:1.75rem}.md\:tw-text-\[3\.5rem\]{font-size:3.5rem}.md\:tw-text-base{font-size:1rem;line-height:1.5rem}.md\:headline-lg{font-family:SecondSkinHeadline;text-transform:uppercase;font-size:4.25rem;line-height:.9}}@media (min-width:1024px){.lg\:tw-bottom-\[15\%\]{bottom:15%}.lg\:tw-left-0{left:0}.lg\:tw-left-10{left:2.5rem}.lg\:tw-right-0{right:0}.lg\:tw-col-span-4{grid-column:span 4/span 4}.lg\:tw-col-span-8{grid-column:span 8/span 8}.lg\:tw-mt-10{margin-top:2.5rem}.lg\:tw-mt-16{margin-top:4rem}.lg\:tw-mt-4{margin-top:1rem}.lg\:tw-mt-8{margin-top:2rem}.lg\:tw-block{display:block}.lg\:tw-max-w-\[60\%\]{max-width:60%}.lg\:tw-max-w-\[70\%\]{max-width:70%}.lg\:tw-max-w-\[90\%\]{max-width:90%}.lg\:tw-max-w-none{max-width:none}.lg\:-tw-translate-x-8{--tw-translate-x:-2rem}.lg\:-tw-translate-x-8,.lg\:tw-translate-x-8{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:tw-translate-x-8{--tw-translate-x:2rem}.lg\:tw-scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:tw-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:tw-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:tw-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:tw-gap-x-16{-moz-column-gap:4rem;column-gap:4rem}.lg\:tw-py-20{padding-top:5rem;padding-bottom:5rem}.lg\:tw-text-\[2\.75rem\]{font-size:2.75rem}.lg\:tw-text-\[4rem\]{font-size:4rem}.lg\:tw-text-xl{font-size:1.25rem;line-height:1.75rem}.lg\:headline-xl{font-size:4.625rem}.lg\:headline-xl,.lg\:headline-xxl{font-family:SecondSkinHeadline;text-transform:uppercase;line-height:.9}.lg\:headline-xxl{font-size:6.375rem}}@media (min-width:1280px){.xl\:tw-col-span-10{grid-column:span 10/span 10}.xl\:tw-col-span-2{grid-column:span 2/span 2}.xl\:tw-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:tw-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:tw-gap-3{gap:.75rem}.xl\:tw-gap-5{gap:1.25rem}} /* --------------------------------- Reset margins, paddings & borders (except in form elements) --------------------------------- */ /* line 9, app/assets/stylesheets/reset.scss */ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, hr, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, summary, hgroup { margin: 0; padding: 0; border: 0; } /* ---------------------------------------- Reset font-sizes for often used elements ---------------------------------------- */ /* line 26, app/assets/stylesheets/reset.scss */ h1, h2, h3, h4, h5, h6, small { font-size: 1em; } /* ----------------------------------------------------- Consistency fixes adopted from http://necolas.github.com/normalize.css/ ----------------------------------------------------- */ /* line 37, app/assets/stylesheets/reset.scss */ html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* line 42, app/assets/stylesheets/reset.scss */ body { height: 100%; min-height: 100%; font-size: 100%; position: relative; } /* line 48, app/assets/stylesheets/reset.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* line 62, app/assets/stylesheets/reset.scss */ audio, canvas, video { display: inline-block; } /* line 68, app/assets/stylesheets/reset.scss */ audio:not([controls]) { display: none; height: 0; } /* line 73, app/assets/stylesheets/reset.scss */ svg:not(:root) { overflow: hidden; } /* line 77, app/assets/stylesheets/reset.scss */ [hidden] { display: none; } /* line 81, app/assets/stylesheets/reset.scss */ abbr[title] { border-bottom: 1px dotted; } /* line 85, app/assets/stylesheets/reset.scss */ dfn { font-style: italic; } /* line 89, app/assets/stylesheets/reset.scss */ mark { background: #ff0; color: #000; } /* line 94, app/assets/stylesheets/reset.scss */ b, strong { font-weight: bold; } /* line 97, app/assets/stylesheets/reset.scss */ pre { white-space: pre; } /* line 100, app/assets/stylesheets/reset.scss */ pre, code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /* line 104, app/assets/stylesheets/reset.scss */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* line 108, app/assets/stylesheets/reset.scss */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } /* line 114, app/assets/stylesheets/reset.scss */ sup { top: -0.5em; } /* line 117, app/assets/stylesheets/reset.scss */ sub { bottom: -0.25em; } /* line 120, app/assets/stylesheets/reset.scss */ input, textarea, button, select { margin: 0; font-size: 100%; line-height: normal; vertical-align: baseline; font-family: inherit; } /* line 127, app/assets/stylesheets/reset.scss */ button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* line 134, app/assets/stylesheets/reset.scss */ button[disabled], input[disabled] { cursor: default; } /* line 139, app/assets/stylesheets/reset.scss */ input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; } /* line 148, app/assets/stylesheets/reset.scss */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* line 154, app/assets/stylesheets/reset.scss */ textarea { overflow: auto; } /* line 157, app/assets/stylesheets/reset.scss */ table { border-collapse: collapse; border-spacing: 0; } /* line 161, app/assets/stylesheets/reset.scss */ a img, img { -ms-interpolation-mode: bicubic; border: 0; } /* line 165, app/assets/stylesheets/reset.scss */ hr { color: transparent; background: none; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /** This file is deprecated: Put your SCSS to views/ and partials/ and include them in application.scss.erb */ /* line 15, app/assets/stylesheets/main.scss */ *, *:before, *:after { box-sizing: border-box; } /** Enable fast click: For IE10, you can use -ms-touch-action: none to disable double-tap-to-zoom on certain elements (like links and buttons) as described in this MSDN blog post. */ /* -------------------------- Typography and link styles -------------------------- */ /* line 41, app/assets/stylesheets/main.scss */ body { font-size: 1em; line-height: 1.5em; } @media (max-width: 23.375em) { /* line 41, app/assets/stylesheets/main.scss */ body { font-size: 0.8125em; } } /* line 50, app/assets/stylesheets/main.scss */ .page-content { padding-bottom: 4.5em; } /* line 53, app/assets/stylesheets/main.scss */ .page-content.no-cover-photo { padding-top: 0.75em; } /* line 57, app/assets/stylesheets/main.scss */ .page-content ul, .page-content ol { margin-bottom: 0.75em; } /* line 62, app/assets/stylesheets/main.scss */ .page-content p { margin-bottom: 0.75em; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; } /* line 71, app/assets/stylesheets/main.scss */ .page-content br { height: 0.75em; } @media (min-width: 48em) { /* line 76, app/assets/stylesheets/main.scss */ .page-content.no-cover-photo { padding-top: 33px; } } /* --------------------- Often used components --------------------- */ /* line 106, app/assets/stylesheets/main.scss */ body { background: white; color: #3c3c3c; height: auto; } /* line 114, app/assets/stylesheets/main.scss */ ul { padding-left: 1.5em; } /* line 118, app/assets/stylesheets/main.scss */ .section { padding: 0.75em; overflow: auto; } @media (min-width: 48em) { /* line 118, app/assets/stylesheets/main.scss */ .section { padding: 0em 0.75em; } } @media (min-width: 63em) { /* line 118, app/assets/stylesheets/main.scss */ .section { padding: 0em 0em; } } /* line 169, app/assets/stylesheets/main.scss */ .centered-section, .centered-section-wide, .centered-section-narrow, .left-navi-section { margin-top: 0.375em; } /* line 175, app/assets/stylesheets/main.scss */ .centered-section textarea, .centered-section-wide textarea, .centered-section-narrow textarea, .left-navi-section textarea { min-height: 7.5em; } /* line 180, app/assets/stylesheets/main.scss */ .centered-section-narrow { max-width: 22.5em; } /* line 184, app/assets/stylesheets/main.scss */ .centered-section { max-width: 28.5em; } /* line 188, app/assets/stylesheets/main.scss */ .centered-section-wide { max-width: 37.5em; } /* line 193, app/assets/stylesheets/main.scss */ .centered-section, .centered-section-wide, .centered-section-narrow { padding: 0.75em; margin-left: auto; margin-right: auto; } /* line 200, app/assets/stylesheets/main.scss */ .centered-section form, .centered-section-wide form, .centered-section-narrow form { padding-bottom: 1.5em; } /* line 204, app/assets/stylesheets/main.scss */ .centered-section a.fb-connect, .centered-section-wide a.fb-connect, .centered-section-narrow a.fb-connect { position: relative; cursor: pointer; color: white; display: block; text-align: left; background: #446baf; min-height: 42px; border-radius: 5em; padding: 0.625em 2% 0.375em 2%; width: 100%; margin-bottom: 0.75em; margin-top: 2.25em; } /* line 139, app/assets/stylesheets/main.scss */ .centered-section a.fb-connect:hover, .centered-section-wide a.fb-connect:hover, .centered-section-narrow a.fb-connect:hover { background: #6f99bc; background: #365899; } /* line 146, app/assets/stylesheets/main.scss */ .centered-section a.fb-connect .fb-icon, .centered-section-wide a.fb-connect .fb-icon, .centered-section-narrow a.fb-connect .fb-icon { position: absolute; font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; top: 0.625em; left: 0.4375em; } /* line 153, app/assets/stylesheets/main.scss */ .centered-section a.fb-connect .fb-text, .centered-section-wide a.fb-connect .fb-text, .centered-section-narrow a.fb-connect .fb-text { padding: 0em 0.625em 0.4375em 1.875em; } @media (min-width: 48em) { /* line 158, app/assets/stylesheets/main.scss */ .centered-section a.fb-connect .fb-icon, .centered-section-wide a.fb-connect .fb-icon, .centered-section-narrow a.fb-connect .fb-icon { font-size: 1.625em; line-height: 1.3846153846em; font-weight: 600; top: 0.3125em; left: 0.3125em; } /* line 163, app/assets/stylesheets/main.scss */ .centered-section a.fb-connect .fb-text, .centered-section-wide a.fb-connect .fb-text, .centered-section-narrow a.fb-connect .fb-text { padding: 0.0625em 0.625em 0.4375em 2.1875em; } } /* line 212, app/assets/stylesheets/main.scss */ .centered-section .jsmap, .centered-section-wide .jsmap, .centered-section-narrow .jsmap { display: block; width: 100%; height: 12em; margin-top: 0.75em; } /* line 219, app/assets/stylesheets/main.scss */ .centered-section select.full-width, .centered-section-wide select.full-width, .centered-section-narrow select.full-width { display: block; width: 100%; margin-top: 0.3125em; } @media (min-width: 63em) { /* line 193, app/assets/stylesheets/main.scss */ .centered-section, .centered-section-wide, .centered-section-narrow { padding: 0 0.75em; } } /* line 231, app/assets/stylesheets/main.scss */ .left-navi-section { padding: 0.75em 0; } @media (min-width: 48em) { /* line 231, app/assets/stylesheets/main.scss */ .left-navi-section { padding: 0 0.75em; margin-left: 15.75em; } } @media (min-width: 63em) { /* line 231, app/assets/stylesheets/main.scss */ .left-navi-section { padding: 0; } } /* line 243, app/assets/stylesheets/main.scss */ .left-navi-section small { display: inline; } /* line 247, app/assets/stylesheets/main.scss */ .left-navi-section .map { display: block; width: 100%; height: 12em; margin-top: 0.75em; } /* line 256, app/assets/stylesheets/main.scss */ .left-navi { display: none; margin-top: -0.375em; } @media (min-width: 48em) { /* line 256, app/assets/stylesheets/main.scss */ .left-navi { display: block; position: absolute; } /* line 266, app/assets/stylesheets/main.scss */ .left-navi a { position: relative; padding: 0.375em 0.75em; display: block; font-weight: normal; cursor: pointer; border-radius: 5em; width: 14.25em; min-height: 2.375em; } /* line 277, app/assets/stylesheets/main.scss */ .left-navi a.selected { background: #e8e8e8; } /* line 279, app/assets/stylesheets/main.scss */ .left-navi a.selected:after { display: block; position: absolute; right: 0.75em; top: 0.4375em; content: "→"; } /* line 287, app/assets/stylesheets/main.scss */ .left-navi .left-navi-link-text { padding: 0 1.5em 0 1.5em; } /* line 291, app/assets/stylesheets/main.scss */ .left-navi .left-navi-link-icon { position: absolute; top: 0.5em; } } /* line 298, app/assets/stylesheets/main.scss */ .avatar { position: relative; width: 1.5em; } /* line 302, app/assets/stylesheets/main.scss */ .avatar img { width: 100%; border-radius: 5em; } /* line 308, app/assets/stylesheets/main.scss */ .icon { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; height: 1em; overflow: hidden; text-align: center; display: block; padding-top: 0.075em; } /* line 317, app/assets/stylesheets/main.scss */ .icon-with-text { display: inline-block; padding-right: 0.25em; position: relative; top: 0.125em; } /* line 325, app/assets/stylesheets/main.scss */ .list-icon-margin { margin-top: 0.1875em; } /* line 328, app/assets/stylesheets/main.scss */ .text-with-icon { display: inline-block; } /* line 332, app/assets/stylesheets/main.scss */ .icon-with-text-container { position: relative; display: inline-block; margin-right: 0.625em; text-align: left; } /* line 337, app/assets/stylesheets/main.scss */ .icon-with-text-container .icon-part { position: absolute; top: 0.125em; } /* line 341, app/assets/stylesheets/main.scss */ .icon-with-text-container .text-part { padding-left: 1.4375em; min-height: 1.875em; } /* line 348, app/assets/stylesheets/main.scss */ form .checkbox-container { position: relative; display: flex; column-gap: 0.75rem; } /* line 364, app/assets/stylesheets/main.scss */ form .checkbox-container label { display: inline-block; width: auto; margin: 0; font-weight: 600; } /* line 373, app/assets/stylesheets/main.scss */ form .checkbox-container label.disabled { color: #c3c3c3; } /* line 376, app/assets/stylesheets/main.scss */ form .checkbox-container label.error { border-radius: 5em; padding: 0.3125em 0.625em 0.625em 0.625em; background: red; color: white; display: block; width: 100%; margin: 0.75em 0 0.75em 0; position: relative; } /* line 386, app/assets/stylesheets/main.scss */ form .checkbox-container label.label-normal { font-weight: normal; } /* line 395, app/assets/stylesheets/main.scss */ form .checkbox-container a { display: inline-block; } /* line 400, app/assets/stylesheets/main.scss */ form .select-tag-dropdown { margin-bottom: 0.75em; } /* line 405, app/assets/stylesheets/main.scss */ .unwanted_text_field { display: none; } /* line 409, app/assets/stylesheets/main.scss */ .inline-label-container { margin-top: 0.75em; margin-bottom: 0.0625em; } /* line 414, app/assets/stylesheets/main.scss */ .label, label { width: 100%; display: block; margin-top: 0.75em; margin-bottom: 0.1875em; font-weight: 600; } /* line 426, app/assets/stylesheets/main.scss */ label.inline { width: auto; display: inline; margin-right: 0.75em; } /* line 432, app/assets/stylesheets/main.scss */ label.radiobutton { display: inline; margin-left: 0.375em; font-weight: 500; } /* line 438, app/assets/stylesheets/main.scss */ .label-info { display: inline; color: gray; font-size: 0.8125em; line-height: 1.3846153846em; cursor: pointer; } /* line 445, app/assets/stylesheets/main.scss */ button, .button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; padding-top: 0.5625em; padding-bottom: 0.5625em; height: auto; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ button .content, .button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ button:hover, .button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ button:active, .button:active { background: #2275d7; color: white; } /* line 453, app/assets/stylesheets/main.scss */ .inline-button-container { display: inline-block; vertical-align: top; } /* line 458, app/assets/stylesheets/main.scss */ .cancel-button { border-radius: 0; background: gray; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; margin-left: 0.375em; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .cancel-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .cancel-button:hover { background: #737373; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .cancel-button:active { background: #666666; color: white; } /* line 463, app/assets/stylesheets/main.scss */ .delete-button { border-radius: 0; background: red; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .delete-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .delete-button:hover { background: #e60000; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .delete-button:active { background: #cc0000; color: white; } /* line 467, app/assets/stylesheets/main.scss */ .big-button, .inline-big-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; font-size: 22px; height: 60px; line-height: 24px; padding-bottom: 3px; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .big-button .content, .inline-big-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .big-button:hover, .inline-big-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .big-button:active, .inline-big-button:active { background: #2275d7; color: white; } /* line 471, app/assets/stylesheets/main.scss */ .inline-big-button { margin: 0 auto; } /* line 476, app/assets/stylesheets/main.scss */ label.error { border-radius: 5em; padding: 0.3125em 0.625em 0.625em 0.625em; background: red; color: white; display: block; width: 100%; margin: 0.75em 0 0.75em 0; position: relative; text-align: left; } /* line 486, app/assets/stylesheets/main.scss */ label.error:before { content: ""; border: 0.5em solid transparent; border-bottom-color: red; position: absolute; left: 1.125em; top: -1em; } /* line 497, app/assets/stylesheets/main.scss */ .permanent-notification { margin-bottom: 0.75em; font-size: 0.8125em; line-height: 1.3846153846em; color: gray; } /* line 504, app/assets/stylesheets/main.scss */ .bottom-margin { display: none; } @media (min-width: 48em) { /* line 504, app/assets/stylesheets/main.scss */ .bottom-margin { display: block; position: absolute; top: 42.75em; left: 45em; width: 18em; height: 7.5em; } } /* line 518, app/assets/stylesheets/main.scss */ .share-type-link { font-family: 'Source Sans Pro', helvetica, sans-serif; color: gray; font-size: 0.625em; font-weight: normal; white-space: nowrap; background: #e8e8e8; color: #3c3c3c; border-radius: 5em; } /* line 25, app/assets/stylesheets/overrides/mixins/../../mixins/_layout.scss */ .share-type-link:hover { background: gray; color: white; } /* ------------ Tribe header ------------ */ /* line 528, app/assets/stylesheets/main.scss */ .tribe-actions { background: #4a90e2; } /* line 532, app/assets/stylesheets/main.scss */ .tribe-actions .hidden { display: none; } /* line 537, app/assets/stylesheets/main.scss */ .tribe-actions a { display: block; float: left; padding: 0.5em 0.4375em 0.75em 0.5625em; color: #171717; height: 1.5em; overflow: hidden; color: white; } /* line 545, app/assets/stylesheets/main.scss */ .tribe-actions a:hover { background: #3483de; } /* line 550, app/assets/stylesheets/main.scss */ .tribe-actions a.selected-navi-link { color: #3c3c3c; background: white; } /* line 555, app/assets/stylesheets/main.scss */ .tribe-actions a.first-child { margin-left: 0em; } /* line 559, app/assets/stylesheets/main.scss */ .tribe-actions .about-toggle.toggled { background: #171717; } @media (min-width: 48em) { /* line 566, app/assets/stylesheets/main.scss */ .tribe-actions .about-toggle { display: none; } /* line 570, app/assets/stylesheets/main.scss */ .tribe-actions .search-toggle { display: none; } /* line 574, app/assets/stylesheets/main.scss */ .tribe-actions a { padding: 0.5em 0.9375em 0.75em 0.9375em; } /* line 578, app/assets/stylesheets/main.scss */ .tribe-actions a.first-child { margin-left: 15.75em; } } @media (min-width: 63em) { /* line 585, app/assets/stylesheets/main.scss */ .tribe-actions .hidden { display: inline-block; } } /* -------------------------------------- Common header (no tribe customization) -------------------------------------- */ /* line 597, app/assets/stylesheets/main.scss */ .no-tribe-title { color: white; position: absolute; bottom: -0.25em; left: 0.125em; font-family: 'Source Sans Pro', helvetica, sans-serif; font-size: 4.25em; line-height: 1.0588235294em; font-weight: 700; z-index: 0; } @media (min-width: 48em) { /* line 597, app/assets/stylesheets/main.scss */ .no-tribe-title { right: 0; left: auto; font-size: 6.875em; line-height: 1.0909090909em; font-weight: 700; } } @media (min-width: 48em) { /* line 613, app/assets/stylesheets/main.scss */ .no-tribe-section { margin-top: 1.5em; } } /* ----------- Lightbox ----------- */ /* line 625, app/assets/stylesheets/main.scss */ .lightbox, .expiration-notice { display: none; position: relative; margin: 15em auto; max-width: 33em; padding: 1.875em 1.5em; } /* line 634, app/assets/stylesheets/main.scss */ .lightbox-content { position: relative; width: 100%; background: white; padding: 1.5em; border-radius: 10px; } /* line 641, app/assets/stylesheets/main.scss */ .lightbox-content h2 { margin-bottom: 0.375em; } /* line 645, app/assets/stylesheets/main.scss */ .lightbox-content h3, .lightbox-content h4 { margin-top: 0.75em; margin-bottom: 0.375em; } /* line 651, app/assets/stylesheets/main.scss */ .lightbox-content p { margin-bottom: 0.75em; } /* line 655, app/assets/stylesheets/main.scss */ .lightbox-content p, .lightbox-content li { font-size: 0.8125em; line-height: 1.3846153846em; } /* line 660, app/assets/stylesheets/main.scss */ .lightbox-content .consent { margin-top: 3em; } @media (min-width: 48em) { /* line 665, app/assets/stylesheets/main.scss */ .lightbox-content h2 { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; } /* line 668, app/assets/stylesheets/main.scss */ .lightbox-content p, .lightbox-content li { font-size: 1em; line-height: 1.5em; } } /* line 675, app/assets/stylesheets/main.scss */ .image-lightbox { max-width: 50em; } /* line 679, app/assets/stylesheets/main.scss */ .image-lightbox-content { padding: 0.75em; } /* line 681, app/assets/stylesheets/main.scss */ .image-lightbox-content img { width: 100%; } /* line 686, app/assets/stylesheets/main.scss */ a.lightbox-x { width: 1.875em; height: 1.875em; padding: 15px 30px 30px 15px; position: absolute; right: 0; top: 0; color: #aaacad; z-index: 1; } /* line 696, app/assets/stylesheets/main.scss */ a.lightbox-x:hover { color: #919294; } @media (min-width: 48em) { /* line 686, app/assets/stylesheets/main.scss */ a.lightbox-x { width: 2.25em; height: 2.25em; padding: 25px 45px 45px 25px; font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; } } /* ------------------------ Noscript ------------------------ */ /* line 716, app/assets/stylesheets/main.scss */ .noscript-padding { height: 6em; } /* line 720, app/assets/stylesheets/main.scss */ .noscript { position: fixed; top: 0; width: 100%; padding: 0.75em 0em; height: 6em; background: #c81f1f; color: white; } /* line 730, app/assets/stylesheets/main.scss */ .noscript .wrapper, .noscript .wrapper h2, .noscript .wrapper p { background: #c81f1f; color: white; } /* --------------------- Error page --------------------- */ /* line 745, app/assets/stylesheets/main.scss */ .error-page { padding-top: 4.5em; } /* line 747, app/assets/stylesheets/main.scss */ .error-page p { padding: 0.75em 0; } /* line 750, app/assets/stylesheets/main.scss */ .error-page button { padding: 0.4375em 1.25em 0.4375em 1.25em; } /* ---------- Homepage ---------- */ /* line 761, app/assets/stylesheets/main.scss */ .app-store-badge { display: none; } @media (min-width: 48em) { /* line 761, app/assets/stylesheets/main.scss */ .app-store-badge { display: block; margin-top: 1.125em; } /* line 766, app/assets/stylesheets/main.scss */ .app-store-badge img { width: 75%; } } /* line 772, app/assets/stylesheets/main.scss */ .private-listing-notification { padding: 0 1.125em; } @media (min-width: 48em) { /* line 772, app/assets/stylesheets/main.scss */ .private-listing-notification { padding: 0; } } /* line 779, app/assets/stylesheets/main.scss */ .feed-actions { background: white; } /* line 782, app/assets/stylesheets/main.scss */ .feed-actions .request-link { display: block; float: left; padding: 0.625em 0.9375em 0.625em 0.9375em; color: #4a90e2; } /* line 787, app/assets/stylesheets/main.scss */ .feed-actions .request-link:hover { color: #1f69c1; } @media (min-width: 48em) { /* line 793, app/assets/stylesheets/main.scss */ .feed-actions .request-link { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; font-size: 22px; height: 60px; line-height: 24px; padding-bottom: 3px; padding: 0.5em 0.5em 0.625em 0.5em; width: 100%; margin: 0 0 0.75em 0; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .feed-actions .request-link .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .feed-actions .request-link:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .feed-actions .request-link:active { background: #2275d7; color: white; } /* line 798, app/assets/stylesheets/main.scss */ .feed-actions .request-link:hover { color: white; } } /* line 805, app/assets/stylesheets/main.scss */ .feed-filters { background: #171717; padding: 0.75em; position: relative; } /* line 810, app/assets/stylesheets/main.scss */ .feed-filters .filter-title { display: none; } /* line 814, app/assets/stylesheets/main.scss */ .feed-filters .feed-filter-dropdowns { margin-top: 0.375em; } @media (min-width: 48em) { /* line 805, app/assets/stylesheets/main.scss */ .feed-filters { background: white; padding: 0; } /* line 822, app/assets/stylesheets/main.scss */ .feed-filters .filter-title { margin-bottom: 0.375em; display: block; } /* line 827, app/assets/stylesheets/main.scss */ .feed-filters .feed-filter-dropdowns { margin-top: 0; } /* line 829, app/assets/stylesheets/main.scss */ .feed-filters .feed-filter-dropdowns select { margin-bottom: 0.375em; } /* line 834, app/assets/stylesheets/main.scss */ .feed-filters select, .feed-filters option { width: 17.1em; } } /* line 842, app/assets/stylesheets/main.scss */ .feed-map-link { position: relative; } /* line 845, app/assets/stylesheets/main.scss */ .feed-map-link a.map-link, .feed-map-link .hidden-text { display: none; } @media (min-width: 48em) { /* line 842, app/assets/stylesheets/main.scss */ .feed-map-link { background: transparent; padding: 0; } /* line 854, app/assets/stylesheets/main.scss */ .feed-map-link a.map-link { display: inline; cursor: pointer; position: absolute; top: 0em; right: 0; padding-top: 0.5625em; color: #3c3c3c; margin-right: 0.75em; } /* line 862, app/assets/stylesheets/main.scss */ .feed-map-link a.map-link:hover { color: #4a90e2; } } @media (min-width: 63em) { /* line 872, app/assets/stylesheets/main.scss */ .feed-map-link .hidden-text { margin-right: 0; display: inline-block; } } /* line 879, app/assets/stylesheets/main.scss */ .feed-navigation { background: #171717; } @media (min-width: 48em) { /* line 879, app/assets/stylesheets/main.scss */ .feed-navigation { float: left; width: 17.25em; } /* line 887, app/assets/stylesheets/main.scss */ .feed-navigation .toggle { display: none; } /* line 891, app/assets/stylesheets/main.scss */ .feed-navigation .toggle-menu { display: block; } } /* line 898, app/assets/stylesheets/main.scss */ .feed .map { display: block; width: 100%; height: 18.75em; } @media (min-width: 48em) { /* line 897, app/assets/stylesheets/main.scss */ .feed { margin-left: 20.25em; } /* line 906, app/assets/stylesheets/main.scss */ .feed .map { height: 27em; } } @media (min-width: 48em) { /* line 913, app/assets/stylesheets/main.scss */ .view-item .item-description { padding-right: 24em; min-height: 15em; } } /* line 921, app/assets/stylesheets/main.scss */ .view-item .item-description p, .view-item .item-description li { font-size: 0.8125em; line-height: 1.3846153846em; } @media (min-width: 37.5em) { /* line 921, app/assets/stylesheets/main.scss */ .view-item .item-description p, .view-item .item-description li { font-size: 1em; line-height: 1.5em; } } /* line 930, app/assets/stylesheets/main.scss */ .view-item .button { margin: 0 0 0.75em 0; width: 100%; display: block; } @media (min-width: 48em) { /* line 930, app/assets/stylesheets/main.scss */ .view-item .button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; font-size: 22px; height: 60px; line-height: 24px; padding-bottom: 3px; margin: 0; position: absolute; right: 0; top: 0; width: 16.375em; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .view-item .button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .view-item .button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .view-item .button:active { background: #2275d7; color: white; } } /* line 945, app/assets/stylesheets/main.scss */ .view-item .listing-icons { padding-top: 0.75em; } /* line 947, app/assets/stylesheets/main.scss */ .view-item .listing-icons a { color: #3c3c3c; } /* line 949, app/assets/stylesheets/main.scss */ .view-item .listing-icons a:hover { color: #4a90e2; } /* line 955, app/assets/stylesheets/main.scss */ .view-item .listing-departure-time { padding: 0.375em 0 0.75em 0; } /* line 959, app/assets/stylesheets/main.scss */ .view-item .item-image { position: relative; float: right; width: 6.75em; margin: 0 0 0.75em 0.75em; } /* line 965, app/assets/stylesheets/main.scss */ .view-item .item-image img { display: block; max-width: 100%; border-radius: 5em; } @media (min-width: 48em) { /* line 959, app/assets/stylesheets/main.scss */ .view-item .item-image { float: none; margin: 0; position: absolute; right: 0em; top: 6em; width: 22.5em; height: 16.875em; } /* line 979, app/assets/stylesheets/main.scss */ .view-item .item-image img { width: 22.5em; height: 16.875em; max-width: 22.5em; } } /* line 987, app/assets/stylesheets/main.scss */ .view-item .jsmap { display: block; width: 100%; height: 12em; top: 0; } @media (min-width: 48em) { /* line 987, app/assets/stylesheets/main.scss */ .view-item .jsmap { position: absolute; right: 0em; top: 25.5em; width: 22.5em; height: 15em; } } @media (min-width: 48em) { /* line 1002, app/assets/stylesheets/main.scss */ .view-item .upper-map { top: 6em; } } /* line 1008, app/assets/stylesheets/main.scss */ .view-item .listing-author { position: relative; padding-top: 1.5em; min-height: 7.5em; } /* line 1013, app/assets/stylesheets/main.scss */ .view-item .listing-author h3 { margin: 0; padding: 0; display: inline; } /* line 1019, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-image { padding: 0.3125em 0.3125em 0.125em 0.3125em; background: white; position: absolute; top: 1.5em; left: 0.1875em; border-radius: 5em; box-shadow: rgba(0, 0, 0, 0.2) 0 0 3em 2em; width: 3em; } /* line 1030, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-image img { border-radius: 5em; width: 100%; } /* line 1036, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-description { padding-left: 4.875em; } /* line 1039, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-description .icon-with-text { margin-top: 0; font-size: 0.8125em; line-height: 1.3846153846em; } /* line 1044, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-description .text-with-icon { margin-top: 0.25em; font-size: 0.8125em; line-height: 1.3846153846em; } @media (min-width: 48em) { /* line 1008, app/assets/stylesheets/main.scss */ .view-item .listing-author { padding-top: 1.875em; } /* line 1053, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-image { width: 6.75em; padding: 0.3125em 0.3125em 0.125em 0.3125em; } /* line 1058, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-description { padding-left: 9em; } /* line 1060, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-description .icon-with-text { margin-top: 0.125em; font-size: 1em; line-height: 1.5em; } /* line 1065, app/assets/stylesheets/main.scss */ .view-item .listing-author .listing-author-description .text-with-icon { margin-top: 0; font-size: 1em; line-height: 1.5em; } } /* line 1073, app/assets/stylesheets/main.scss */ .view-item .social { position: relative; padding-top: 0.75em; } /* line 1077, app/assets/stylesheets/main.scss */ .view-item .social .fb-like-container { position: absolute; } /* line 1081, app/assets/stylesheets/main.scss */ .view-item .social .tweet-button-container { padding-left: 12.75em; } /* line 1087, app/assets/stylesheets/main.scss */ .view-item .discussion h2 { margin-top: 0; margin-bottom: 0.375em; display: inline-block; } /* line 1093, app/assets/stylesheets/main.scss */ .view-item .discussion .follow-links { display: inline-block; margin-left: 0.75em; } /* line 1098, app/assets/stylesheets/main.scss */ .view-item .discussion .comment { position: relative; border-top: 1px dotted #d7d7d7; padding: 0.375em 1.5em 0.375em 2.25em; } /* line 1103, app/assets/stylesheets/main.scss */ .view-item .discussion .comment .avatar { position: absolute; left: 0; top: 0.75em; } /* line 1107, app/assets/stylesheets/main.scss */ .view-item .discussion .comment .avatar img { border-radius: 5em; } /* line 1112, app/assets/stylesheets/main.scss */ .view-item .discussion .comment h3, .view-item .discussion .comment small { display: inline; } /* line 1117, app/assets/stylesheets/main.scss */ .view-item .discussion .comment small { color: gray; } /* line 1121, app/assets/stylesheets/main.scss */ .view-item .discussion .comment .comment-content, .view-item .discussion .comment .comment-icon { font-size: 0.8125em; line-height: 1.3846153846em; } @media (min-width: 37.5em) { /* line 1121, app/assets/stylesheets/main.scss */ .view-item .discussion .comment .comment-content, .view-item .discussion .comment .comment-icon { font-size: 1em; line-height: 1.5em; } } /* line 1129, app/assets/stylesheets/main.scss */ .view-item .discussion .comment .comment-icons { padding-top: 0.375em; padding-bottom: 0.375em; } /* line 1134, app/assets/stylesheets/main.scss */ .view-item .discussion .comment .comment-icon { display: inline-block; margin-right: 0.75em; } /* line 1140, app/assets/stylesheets/main.scss */ .view-item .discussion .comment-form { border-top: 1px dotted #d7d7d7; padding-top: 0.75em; position: relative; } /* line 1145, app/assets/stylesheets/main.scss */ .view-item .discussion .comment-form textarea { width: 95%; min-height: 6em; } @media (min-width: 48em) { /* line 1086, app/assets/stylesheets/main.scss */ .view-item .discussion { padding-top: 2.25em; } /* line 1154, app/assets/stylesheets/main.scss */ .view-item .discussion h2 { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; } /* line 1158, app/assets/stylesheets/main.scss */ .view-item .discussion .comment { padding: 0.75em 1.5em 0.375em 3.75em; } /* line 1161, app/assets/stylesheets/main.scss */ .view-item .discussion .comment .avatar { width: 3em; } /* line 1165, app/assets/stylesheets/main.scss */ .view-item .discussion .comment h3 { margin: 0; } /* line 1171, app/assets/stylesheets/main.scss */ .view-item .discussion .comment-form textarea { width: 100%; min-height: 9em; } } /* line 1180, app/assets/stylesheets/main.scss */ .overflow-allowed { overflow: visible; } /* line 1186, app/assets/stylesheets/main.scss */ .view-profile .profile-description .profile-details { min-height: 7.5em; } /* line 1190, app/assets/stylesheets/main.scss */ .view-profile .profile-description p, .view-profile .profile-description li { font-size: 0.8125em; line-height: 1.3846153846em; } @media (min-width: 37.5em) { /* line 1190, app/assets/stylesheets/main.scss */ .view-profile .profile-description p, .view-profile .profile-description li { font-size: 1em; line-height: 1.5em; } } @media (min-width: 48em) { /* line 1185, app/assets/stylesheets/main.scss */ .view-profile .profile-description { padding-right: 21em; } /* line 1201, app/assets/stylesheets/main.scss */ .view-profile .profile-description .profile-details { min-height: 0; } } /* line 1207, app/assets/stylesheets/main.scss */ .view-profile .button { margin: 0 0 0.75em 0; width: 100%; display: block; } @media (min-width: 48em) { /* line 1207, app/assets/stylesheets/main.scss */ .view-profile .button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; font-size: 22px; height: 60px; line-height: 24px; padding-bottom: 3px; margin: 0; position: absolute; right: 0; top: 0; width: 13.0625em; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .view-profile .button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .view-profile .button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .view-profile .button:active { background: #2275d7; color: white; } } /* line 1222, app/assets/stylesheets/main.scss */ .view-profile .profile-image { position: relative; float: right; width: 6.75em; height: 6.75em; margin: 0 0 0.75em 0.75em; } /* line 1229, app/assets/stylesheets/main.scss */ .view-profile .profile-image img { display: block; width: 6.75em; height: 6.75em; border-radius: 5em; } @media (min-width: 48em) { /* line 1222, app/assets/stylesheets/main.scss */ .view-profile .profile-image { float: none; margin: 0; position: absolute; right: 0em; top: 6em; width: 18em; height: 18em; } /* line 1244, app/assets/stylesheets/main.scss */ .view-profile .profile-image img { width: 18em; max-width: 18em; height: 18em; } } /* line 1252, app/assets/stylesheets/main.scss */ .view-profile .profile-icons { padding-top: 0.75em; } /* line 1256, app/assets/stylesheets/main.scss */ .view-profile .jsmap { display: block; width: 100%; height: 12em; margin-top: 0.75em; } @media (min-width: 48em) { /* line 1256, app/assets/stylesheets/main.scss */ .view-profile .jsmap { margin-top: 0; margin-bottom: 3em; position: absolute; right: 0em; top: 26.25em; width: 18em; height: 15em; } } /* line 1273, app/assets/stylesheets/main.scss */ .view-profile .action-link { display: block; width: 100%; margin-right: 0.75em; cursor: pointer; } @media (min-width: 48em) { /* line 1273, app/assets/stylesheets/main.scss */ .view-profile .action-link { position: absolute; right: 0; top: 26.25em; width: 15.75em; text-align: left; padding-bottom: 0.375em; } } /* line 1289, app/assets/stylesheets/main.scss */ .view-profile .add-profile-picture-link { display: none; } @media (min-width: 48em) { /* line 1289, app/assets/stylesheets/main.scss */ .view-profile .add-profile-picture-link { cursor: pointer; position: absolute; right: 0; margin: 0; width: 15em; padding: 0.75em 1.5em; display: block; top: 22.5em; color: white; background: #4a90e2; border-bottom-left-radius: 5em; border-bottom-right-radius: 5em; } /* line 1305, app/assets/stylesheets/main.scss */ .view-profile .add-profile-picture-link:hover { color: white; background: #2275d7; } } /* line 1313, app/assets/stylesheets/main.scss */ .community-customization-wrapper img { max-width: 100%; } /* ---------------- Login form ---------------- */ /* line 1324, app/assets/stylesheets/main.scss */ .login-form .facebook-account-info { color: #3c3c3c; position: relative; display: block; width: 100%; border-radius: 5em; border: 1px solid #d7d7d7; margin-bottom: 0.375em; } /* line 1332, app/assets/stylesheets/main.scss */ .login-form .facebook-account-info .link-icon { position: absolute; top: 0.5em; left: 0.75em; } /* line 1337, app/assets/stylesheets/main.scss */ .login-form .facebook-account-info .link-text { margin-left: 2.5em; margin-right: 2.25em; padding: 0.375em 0 0.625em 0; } /* line 1345, app/assets/stylesheets/main.scss */ #password_forgotten { display: none; } /* ---------------- Signup form ---------------- */ /* ---------------- New message form ---------------- */ /* line 1361, app/assets/stylesheets/main.scss */ .title-label { font-weight: 600; } /* ---------------- New feedback form ---------------- */ /* line 1371, app/assets/stylesheets/main.scss */ .new-feedback-form { padding-top: 1.5em; } @media (min-width: 48em) { /* line 1371, app/assets/stylesheets/main.scss */ .new-feedback-form { padding-top: 0; } } /* ---------------- New listing form ---------------- */ /* line 1386, app/assets/stylesheets/main.scss */ .new-listing-form h2, .edit-listing-form h2 { margin-top: 0.75em; } /* line 1390, app/assets/stylesheets/main.scss */ .new-listing-form a.select, .edit-listing-form a.select { position: relative; display: block; width: 100%; border-radius: 5em; border: 2px solid #d7d7d7; min-height: 42px; margin-bottom: 0.375em; } /* line 1397, app/assets/stylesheets/main.scss */ .new-listing-form a.select:hover, .edit-listing-form a.select:hover { background: #e8e8e8; cursor: pointer; } /* line 1402, app/assets/stylesheets/main.scss */ .new-listing-form a.select .link-text, .edit-listing-form a.select .link-text { line-height: 1.2; margin-left: 0.5em; padding: 0.5em 0 0.5em 0; } /* line 1409, app/assets/stylesheets/main.scss */ .new-listing-form a.selected, .edit-listing-form a.selected { background: #e8e8e8; position: relative; } /* line 1414, app/assets/stylesheets/main.scss */ .new-listing-form select.listing_datetime_select, .edit-listing-form select.listing_datetime_select { margin-left: 0.375em; } /* line 1420, app/assets/stylesheets/main.scss */ .new-listing-form .selected-group .hidden, .new-listing-form .option-group .hidden, .edit-listing-form .selected-group .hidden, .edit-listing-form .option-group .hidden { display: none; } /* line 1426, app/assets/stylesheets/main.scss */ .selected-group[name="listing_shape"] { display: none; } /* line 1430, app/assets/stylesheets/main.scss */ .price-title-field { max-width: 12em; } /* line 1434, app/assets/stylesheets/main.scss */ .price-field { max-width: 7.5em; } /* line 1438, app/assets/stylesheets/main.scss */ .price-currency { margin-left: 0.375em; display: inline; font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; } /* line 1444, app/assets/stylesheets/main.scss */ .quantity-field { max-width: 10.5em; } /* line 1448, app/assets/stylesheets/main.scss */ .quantity-description { margin: 0 0.375em; display: inline; } /* line 1453, app/assets/stylesheets/main.scss */ .delivery-options-container { margin-top: 0.75em; } /* line 1461, app/assets/stylesheets/main.scss */ .shipping-options-label { font-weight: normal; display: inline; margin-right: 0.75em; } /* line 1467, app/assets/stylesheets/main.scss */ .delivery-row-low { position: relative; padding-top: 0.5625em; padding-bottom: 0.5625em; } /* line 1473, app/assets/stylesheets/main.scss */ .delivery-row-tall { position: relative; } /* line 1477, app/assets/stylesheets/main.scss */ .delivery-checkbox { position: absolute; top: 0.5625em; } /* line 1482, app/assets/stylesheets/main.scss */ .delivery-left-field { padding-left: 1.5em; } /* line 1486, app/assets/stylesheets/main.scss */ .shipping-price-container { display: table; width: 100%; margin-bottom: 0.75em; } /* line 1492, app/assets/stylesheets/main.scss */ .delivery-row { display: table-row; } /* line 1496, app/assets/stylesheets/main.scss */ .delivery-label-cont { display: table-cell; vertical-align: middle; } /* line 1501, app/assets/stylesheets/main.scss */ .delivery-input-cont { display: table-cell; width: 9.6875em; } /* line 1506, app/assets/stylesheets/main.scss */ input.delivery-price-field[type="text"] { float: right; width: 6.25em; } /* line 1511, app/assets/stylesheets/main.scss */ .delivery-currency { float: right; line-height: 42px; /*input height is 42px*/ } /* ----------- Inbox ----------- */ /* line 1523, app/assets/stylesheets/main.scss */ .conversation-status .status-links { display: inline-block; } /* line 1527, app/assets/stylesheets/main.scss */ .conversation-status .inbox-horizontally-aligned-status { display: inline-block; vertical-align: top; padding-top: 25px; } /* line 1533, app/assets/stylesheets/main.scss */ .conversation-status .inbox-horizontally-aligned-link { display: inline-block; } /* line 1537, app/assets/stylesheets/main.scss */ .conversation-status .accept, .conversation-status .confirm, .conversation-status .accept_preauthorized { border-radius: 0; background: #c2e972; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; margin-right: 0.75em; color: #5a7d13; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .conversation-status .accept .content, .conversation-status .confirm .content, .conversation-status .accept_preauthorized .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .conversation-status .accept:hover, .conversation-status .confirm:hover, .conversation-status .accept_preauthorized:hover { background: #b8e65c; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .conversation-status .accept:active, .conversation-status .confirm:active, .conversation-status .accept_preauthorized:active { background: #aee346; color: white; } /* line 1543, app/assets/stylesheets/main.scss */ .conversation-status .accept:hover, .conversation-status .confirm:hover, .conversation-status .accept_preauthorized:hover { color: #79a91a; background: #d5f09f; border-color: #79a91a; } /* line 1550, app/assets/stylesheets/main.scss */ .conversation-status .reject, .conversation-status .cancel, .conversation-status .reject_preauthorized { border-radius: 0; background: #f09f9f; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; margin-right: 0.75em; color: #a91a1a; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .conversation-status .reject .content, .conversation-status .cancel .content, .conversation-status .reject_preauthorized .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .conversation-status .reject:hover, .conversation-status .cancel:hover, .conversation-status .reject_preauthorized:hover { background: #ed8888; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .conversation-status .reject:active, .conversation-status .cancel:active, .conversation-status .reject_preauthorized:active { background: #e97272; color: white; } /* line 1556, app/assets/stylesheets/main.scss */ .conversation-status .reject:hover, .conversation-status .cancel:hover, .conversation-status .reject_preauthorized:hover { color: #d52121; background: #f7cbcb; border-color: #d52121; } /* ------------------------ Transaction confirmation ------------------------ */ /* line 1571, app/assets/stylesheets/main.scss */ .conversation-status-form .conversation-action-description { padding: 0.375em 0; } /* line 1575, app/assets/stylesheets/main.scss */ .conversation-status-form .conversation-totals { background-color: #e8e8e8; padding: 0.75em; margin-bottom: 0.75em; } /* line 1580, app/assets/stylesheets/main.scss */ .conversation-status-form .conversation-per-unit-wrapper, .conversation-status-form .conversation-booking-wrapper, .conversation-status-form .conversation-quantity-wrapper, .conversation-status-form .conversation-sum-wrapper, .conversation-status-form .conversation-service-fee-wrapper, .conversation-status-form .conversation-total-wrapper, .conversation-status-form .conversation-shipping-price-wrapper, .conversation-status-form .conversation-stripe-fee-wrapper { overflow: auto; } /* line 1591, app/assets/stylesheets/main.scss */ .conversation-status-form .conversation-per-unit-label, .conversation-status-form .conversation-booking-label, .conversation-status-form .conversation-quantity-label, .conversation-status-form .conversation-sum-label, .conversation-status-form .conversation-service-fee-label, .conversation-status-form .conversation-total-label, .conversation-status-form .conversation-shipping-price-label, .conversation-status-form .conversation-stripe-fee-label { float: left; } /* line 1602, app/assets/stylesheets/main.scss */ .conversation-status-form .conversation-per-unit-value, .conversation-status-form .conversation-booking-value, .conversation-status-form .conversation-quantity-value, .conversation-status-form .conversation-sum-value, .conversation-status-form .conversation-service-fee-value, .conversation-status-form .conversation-total-value, .conversation-status-form .conversation-shipping-price-value, .conversation-status-form .conversation-stripe-fee-value, .conversation-status-form .conversation-total-paypal-value { float: right; margin-right: 0.375em; } /* line 1614, app/assets/stylesheets/main.scss */ .conversation-status-form .conversation-total-wrapper { font-weight: bold; } /* ------------------------ Initiate Transaction ------------------------ */ /* line 1625, app/assets/stylesheets/main.scss */ .initiate-transaction-per-unit-wrapper, .initiate-transaction-booking-wrapper, .initiate-transaction-quantity-wrapper, .initiate-transaction-sum-wrapper, .initiate-transaction-shipping-price-wrapper, .initiate-transaction-stripe-fee-wrapper, .initiate-transaction-total-wrapper { overflow: auto; } /* line 1636, app/assets/stylesheets/main.scss */ .initiate-transaction-per-unit-label, .initiate-transaction-booking-label, .initiate-transaction-quantity-label, .initiate-transaction-sum-label, .initiate-transaction-shipping-price-label, .initiate-transaction-stripe-fee-label, .initiate-transaction-total-label { float: left; } /* line 1646, app/assets/stylesheets/main.scss */ .initiate-transaction-per-unit-value, .initiate-transaction-booking-value, .initiate-transaction-quantity-value, .initiate-transaction-sum-value, .initiate-transaction-shipping-price-value, .initiate-transaction-stripe-fee-value, .initiate-transaction-total-value { float: right; margin-right: 0.375em; } /* line 1657, app/assets/stylesheets/main.scss */ .initiate-transaction-total-wrapper { font-weight: bold; } /* line 1661, app/assets/stylesheets/main.scss */ .initiate-transaction-paid-by { width: 100%; margin-bottom: 0.9375rem; } /* ------------------------ Shipping address ------------------------ */ /* line 1672, app/assets/stylesheets/main.scss */ .shipping-address-container { background-color: #e8e8e8; padding: 1.5em; margin-bottom: 0.75em; margin-top: 0.75em; } /* line 1679, app/assets/stylesheets/main.scss */ .shipping-address-name { font-weight: bold; } /* ---------------- About ---------------- */ /* line 1690, app/assets/stylesheets/main.scss */ .about-section h3 { padding-top: 0.375em; padding-bottom: 0.375em; } @media (min-width: 48em) { /* line 1689, app/assets/stylesheets/main.scss */ .about-section { min-height: 250px; } } /* line 1702, app/assets/stylesheets/main.scss */ .about-section p { margin-bottom: 1rem; } /* ----------------------------------------------- New testimonial form, conversation status form ----------------------------------------------- */ /* line 1716, app/assets/stylesheets/main.scss */ .testimonial-form a.hidden, .testimonial-form div.hidden, .conversation-status-form a.hidden, .conversation-status-form div.hidden, .payment-form a.hidden, .payment-form div.hidden { display: none; } /* line 1721, app/assets/stylesheets/main.scss */ .testimonial-form span.currency-symbol, .conversation-status-form span.currency-symbol, .payment-form span.currency-symbol { display: none; } /* line 1725, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-headings, .conversation-status-form .payment-row-headings, .payment-form .payment-row-headings { display: none; } /* line 1729, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row, .conversation-status-form .payment-row, .payment-form .payment-row { padding: 0.1875em 0.75em 0.75em 0.75em; } /* line 1733, app/assets/stylesheets/main.scss */ .testimonial-form .grey, .conversation-status-form .grey, .payment-form .grey { background: #e8e8e8; border-radius: 5em; } /* line 1738, app/assets/stylesheets/main.scss */ .testimonial-form .conversation-price, .conversation-status-form .conversation-price, .payment-form .conversation-price { margin-top: 1.125em; margin-bottom: 0.375em; } @media (min-width: 48em) { /* line 1744, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-headings, .conversation-status-form .payment-row-headings, .payment-form .payment-row-headings { display: block; margin-bottom: 0.5625em; padding-bottom: 0.375em; } /* line 1750, app/assets/stylesheets/main.scss */ .testimonial-form .bottom-border, .conversation-status-form .bottom-border, .payment-form .bottom-border { border-bottom: 1px solid #3c3c3c; } /* line 1754, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row, .conversation-status-form .payment-row, .payment-form .payment-row { margin-bottom: 0.75em; padding: 0.75em 0.75em 0.75em 0.75em; } /* line 1759, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-heading, .conversation-status-form .payment-row-heading, .payment-form .payment-row-heading { display: inline-block; font-weight: bold; } /* line 1764, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-title-heading, .conversation-status-form .payment-row-title-heading, .payment-form .payment-row-title-heading { width: 15em; margin-left: 0.75em; } /* line 1769, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-sum-heading, .conversation-status-form .payment-row-sum-heading, .payment-form .payment-row-sum-heading { width: 6em; margin-left: 0.75em; } /* line 1774, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-vat-heading, .conversation-status-form .payment-row-vat-heading, .payment-form .payment-row-vat-heading { width: 3em; margin-left: 1.5em; } /* line 1779, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-total-heading, .conversation-status-form .payment-row-total-heading, .payment-form .payment-row-total-heading { text-align: center; width: 6.75em; margin-left: 1.6875em; } /* line 1785, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-label, .conversation-status-form .payment-row-label, .payment-form .payment-row-label { display: none; } /* line 1789, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-field, .conversation-status-form .payment-row-field, .payment-form .payment-row-field { display: inline-block; } /* line 1793, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-title-field, .conversation-status-form .payment-row-title-field, .payment-form .payment-row-title-field { width: 15em; } /* line 1797, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-sum-field, .conversation-status-form .payment-row-sum-field, .payment-form .payment-row-sum-field { width: 6em; margin-left: 0.75em; } /* line 1802, app/assets/stylesheets/main.scss */ .testimonial-form span.currency-symbol, .conversation-status-form span.currency-symbol, .payment-form span.currency-symbol { display: inline; } /* line 1806, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-vat-field, .conversation-status-form .payment-row-vat-field, .payment-form .payment-row-vat-field { width: 3em; margin-left: 0.75em; } /* line 1811, app/assets/stylesheets/main.scss */ .testimonial-form .total-label, .conversation-status-form .total-label, .payment-form .total-label { display: inline-block; text-align: center; width: 6em; margin-left: 0.75em; } /* line 1818, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-title-text, .conversation-status-form .payment-row-title-text, .payment-form .payment-row-title-text { width: 15em; margin-left: 0.75em; } /* line 1823, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-sum-text, .conversation-status-form .payment-row-sum-text, .payment-form .payment-row-sum-text { width: 6em; margin-left: 0.75em; } /* line 1828, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-vat-text, .conversation-status-form .payment-row-vat-text, .payment-form .payment-row-vat-text { width: 3em; margin-left: 1.5em; } /* line 1833, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-total-text, .conversation-status-form .payment-row-total-text, .payment-form .payment-row-total-text { text-align: center; width: 6em; margin-left: 0.75em; } /* line 1839, app/assets/stylesheets/main.scss */ .testimonial-form .payment-text-row, .conversation-status-form .payment-text-row, .payment-form .payment-text-row { padding: 0em 0.75em 0.75em 0.75em; } /* line 1843, app/assets/stylesheets/main.scss */ .testimonial-form .payment-row-text, .conversation-status-form .payment-row-text, .payment-form .payment-row-text { display: inline-block; } /* line 1847, app/assets/stylesheets/main.scss */ .testimonial-form .payment-sum-row, .conversation-status-form .payment-sum-row, .payment-form .payment-sum-row { font-weight: bold; } } /* ---------------------------------- New email to all community members ---------------------------------- */ /* line 1860, app/assets/stylesheets/main.scss */ .new-member-email-form .permanent-notification { margin-bottom: 0; } /* ---------------------------------- Payments ---------------------------------- */ /* line 1871, app/assets/stylesheets/main.scss */ .paid-by-stripe { max-width: 4.75rem; } /* line 1875, app/assets/stylesheets/main.scss */ .paid-by-paypal { max-width: 8.25rem; } /* line 1880, app/assets/stylesheets/main.scss */ .payment-form small { margin-top: 0.75em; } /* line 1884, app/assets/stylesheets/main.scss */ .payment-form .payment-form-label { font-weight: bold; display: inline-block; width: 9em; } /* line 1890, app/assets/stylesheets/main.scss */ .payment-form .send-button { padding-top: 0.375em; } /* line 1895, app/assets/stylesheets/main.scss */ .paypal-loading { width: 360px; height: 150px; position: absolute; top: 30%; left: 50%; margin: -50px -170px; text-align: center; } /* line 1904, app/assets/stylesheets/main.scss */ .paypal-loading-title { font-size: 150%; margin-bottom: 0; width: 100%; text-align: center; } /* line 1910, app/assets/stylesheets/main.scss */ .paypal-loading-desc { width: 100%; text-align: center; } /* line 1914, app/assets/stylesheets/main.scss */ .paypal-loading-spinner { display: inline-block; margin-top: 12px; } /* -------------------------- Common stuff (new layout) -------------------------- */ /* Colors */ /* Calculate fluid ratio based on two dimensions (width/height) */ /* User both for marketplace and network landers */ /* line 1974, app/assets/stylesheets/main.scss */ .coverimage { position: relative; margin-left: auto; margin-right: auto; } /* line 1980, app/assets/stylesheets/main.scss */ figure.fluidratio { position: relative; display: block; height: 6.45em; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ background-position: center center; } /* line 1990, app/assets/stylesheets/main.scss */ .mobile { display: block; } @media (min-width: 48em) { /* line 1990, app/assets/stylesheets/main.scss */ .mobile { display: none; } } /* line 1997, app/assets/stylesheets/main.scss */ .desktop { display: none; } @media (min-width: 48em) { /* line 1997, app/assets/stylesheets/main.scss */ .desktop { display: block; } } /* Lander */ /* line 2008, app/assets/stylesheets/main.scss */ .network-header-content-container { position: relative; } /* line 2012, app/assets/stylesheets/main.scss */ .text-center { text-align: center; } /* line 2015, app/assets/stylesheets/main.scss */ .ui-tooltip { background-color: #ffffff; } /* line 2018, app/assets/stylesheets/main.scss */ .is-disabled { cursor: not-allowed; opacity: 0.5; } /* line 2021, app/assets/stylesheets/main.scss */ .is-disabled a, .is-disabled button { color: currentColor; display: inline-block; /* For IE11/ MS Edge bug */ pointer-events: none; text-decoration: none; } /* line 2027, app/assets/stylesheets/main.scss */ .is-disabled a.button, .is-disabled button.button { background-color: #c3c3c3; } /* line 2032, app/assets/stylesheets/main.scss */ #message_attachments { padding: 0 0 36px; border-bottom: 1px solid #d2d2d2; margin: 0 0 42px; } /* line 2038, app/assets/stylesheets/main.scss */ .message_attachment_fields .file_upload { padding-top: 25px; } /* line 2041, app/assets/stylesheets/main.scss */ .message_attachment_fields .file_upload .remove_btn { height: 21px; width: 21px; margin-top: 1px; padding: 4px 0px 3px 0; margin-right: 12px; line-height: 14px; display: inline-block; text-align: center; font-size: 13px; font-weight: 500; background: #949494; color: #fff; border-radius: 50%; } /* line 2057, app/assets/stylesheets/main.scss */ .message_attachment_fields .text { display: flex; align-items: flex-start; margin: 15px 0 0px; padding: 0 0 0 20px; position: relative; } /* line 2063, app/assets/stylesheets/main.scss */ .message_attachment_fields .text .alert-icon { position: absolute; left: 0; top: 5px; display: flex; } /* line 2069, app/assets/stylesheets/main.scss */ .message_attachment_fields .text small { font-family: Roboto Condensed; font-size: 18px; font-style: italic; font-weight: 400; line-height: 26px; letter-spacing: 0em; text-align: left; color: #949494; } /* line 2083, app/assets/stylesheets/main.scss */ .custom_dgn .add_fields span { font-family: Roboto Condensed; color: #000; display: inline-flex; align-items: center; font-size: 18px; margin: 20px 0 0px; } /* line 2090, app/assets/stylesheets/main.scss */ .custom_dgn .add_fields span i { background: #00f780; font-style: normal; height: 30px; width: 30px; display: inline-block; text-align: center; line-height: 30px; border-radius: 50px; font-size: 28px; font-weight: 100; margin-right: 12px; } /* line 2107, app/assets/stylesheets/main.scss */ .send_attachment { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; } /* line 2112, app/assets/stylesheets/main.scss */ .send_attachment a { width: 87px; height: 87px; margin-top: 18px; border: 1px solid #949494; padding: 0; display: flex; align-items: center; margin-right: 25px; position: relative; } /* line 2122, app/assets/stylesheets/main.scss */ .send_attachment a:before { /*content: 'IMAGE';*/ font-family: Roboto Condensed; font-size: 18px; color: #949494; font-weight: 400; position: absolute; left: 18px; } /* line 2131, app/assets/stylesheets/main.scss */ .send_attachment a img { height: 100%; width: 100%; object-fit: cover; flex-shrink: 0; } /* line 2140, app/assets/stylesheets/main.scss */ .message-content-container-right .send_attachment { justify-content: flex-end; } /* line 2142, app/assets/stylesheets/main.scss */ .message-content-container-right .send_attachment a { margin-left: 25px; margin-right: 0; } /* line 2149, app/assets/stylesheets/main.scss */ .status-label { text-transform: uppercase; font-size: 0.6875rem; border-radius: 3px; text-align: center; padding: 0 0.4375rem; line-height: 1.0625rem; color: #ffffff; font-weight: bold; letter-spacing: 0.05em; display: inline-block; transform: translateY(-2px); } /* line 2162, app/assets/stylesheets/main.scss */ .status-label:hover { color: #ffffff; } /* line 2166, app/assets/stylesheets/main.scss */ .status-label.completed { background-color: #19b400; } /* line 2170, app/assets/stylesheets/main.scss */ .status-label.rejected { background-color: #949494; } /* line 2174, app/assets/stylesheets/main.scss */ .status-label.paid { background-color: #d1c905; } /* line 2178, app/assets/stylesheets/main.scss */ .status-label.preauthorized { background-color: #d1c905; } /* line 2182, app/assets/stylesheets/main.scss */ .status-label.disputed { background-color: #c81f1f; } /* line 2186, app/assets/stylesheets/main.scss */ .status-label.dismissed { background-color: #19b400; } /* line 2191, app/assets/stylesheets/main.scss */ #admin_transactions td { line-height: 1.4; } /* line 2195, app/assets/stylesheets/main.scss */ #admin_transactions .status-label { position: relative; top: 2px; } /* line 2200, app/assets/stylesheets/main.scss */ #admin_transactions .transaction-type { color: #949494; font-style: italic; } /* line 2205, app/assets/stylesheets/main.scss */ #admin_transactions_count { display: block; margin-bottom: 1.5625rem; } /* line 2210, app/assets/stylesheets/main.scss */ #admin_transactions thead th { border-bottom: 1px solid #949494; } /* line 2214, app/assets/stylesheets/main.scss */ #admin_transactions tbody tr:nth-child(odd) { background-color: transparent; } /* line 2218, app/assets/stylesheets/main.scss */ #admin_transactions tbody td { border-bottom: 1px solid #949494; } /* line 2222, app/assets/stylesheets/main.scss */ #admin_transactions thead th:nth-child(3), #admin_transactions tbody td:nth-child(3) { text-align: right; } /* line 2227, app/assets/stylesheets/main.scss */ .left-navi a.selected { background-color: #F4F5F5; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/partials/_admin.scss */ .admin-sort-button { outline: none; } /* line 8, app/assets/stylesheets/partials/_admin.scss */ .admin-left-navi-link-group-title { color: gray; text-transform: uppercase; padding-top: 5px; padding-bottom: 5px; } /* line 15, app/assets/stylesheets/partials/_admin.scss */ .admin-left-navi-link-group { padding-bottom: 10px; } /* line 19, app/assets/stylesheets/partials/_admin.scss */ .admin-left-navi-link-group-last { margin-bottom: 50px; } /* line 25, app/assets/stylesheets/partials/_admin.scss */ .locale-selection__input-widget.selectize-control .selectize-input { border: 0.125em solid #d7d7d7; border-radius: 5em; font-size: 1em; min-height: 2.625em; } /* line 30, app/assets/stylesheets/partials/_admin.scss */ .locale-selection__input-widget.selectize-control .selectize-input div.item { padding-top: 0.25em; padding-bottom: 0.25em; } /* line 33, app/assets/stylesheets/partials/_admin.scss */ .locale-selection__input-widget.selectize-control .selectize-input div.item a.remove { padding-top: 0.25em; font-size: 1em; } /* line 42, app/assets/stylesheets/partials/_admin.scss */ select#locale-selection { visibility: hidden; height: 3.125em; } /* line 48, app/assets/stylesheets/partials/_admin.scss */ .info-text-container .info-thumbnail { float: left; margin-right: 1.5em; } /* line 51, app/assets/stylesheets/partials/_admin.scss */ .info-text-container .info-thumbnail .thumbnail { float: left; margin-left: 19px; } /* line 55, app/assets/stylesheets/partials/_admin.scss */ .info-text-container .info-thumbnail .description { clear: both; } /* line 57, app/assets/stylesheets/partials/_admin.scss */ .info-text-container .info-thumbnail .description > i { margin-right: 3px; } /* line 61, app/assets/stylesheets/partials/_admin.scss */ .info-text-container .info-thumbnail .current-image { color: gray; } /* line 65, app/assets/stylesheets/partials/_admin.scss */ .info-text-container.filename-container { margin-top: 0; } /* line 70, app/assets/stylesheets/partials/_admin.scss */ .status-select-button { position: relative; padding: 0.25em 0.5em 0; border-radius: 5em; border: 2px solid #d7d7d7; min-height: 42px; cursor: pointer; line-height: normal; } @media (min-width: 48em) { /* line 70, app/assets/stylesheets/partials/_admin.scss */ .status-select-button { margin: 0; padding: 0.5em 0.6875em 0; } } /* line 79, app/assets/stylesheets/partials/_admin.scss */ .status-select-button:after { content: "▼"; position: absolute; right: 4px; top: 8px; } /* line 90, app/assets/stylesheets/partials/_admin.scss */ .col-3.status-select-wrapper { position: relative; padding: 0; } /* line 94, app/assets/stylesheets/partials/_admin.scss */ .status-select-dropdown { position: absolute; border-radius: 5em; border: 2px solid #d7d7d7; left: 0; right: 0; top: 0; z-index: 10; background: white; display: none; } /* line 105, app/assets/stylesheets/partials/_admin.scss */ .status-select-line { width: 100%; min-height: 42px; padding: 0.25em 0.5em; border-bottom: 2px solid #d7d7d7; cursor: pointer; } @media (min-width: 48em) { /* line 105, app/assets/stylesheets/partials/_admin.scss */ .status-select-line { margin: 0; padding: 0.5em 0.6875em; } } /* line 116, app/assets/stylesheets/partials/_admin.scss */ .status-select-line:last-child { border-bottom: none; } /* line 119, app/assets/stylesheets/partials/_admin.scss */ .status-select-line.selected { background-color: #4a90e2; color: white; } /* line 124, app/assets/stylesheets/partials/_admin.scss */ .status-select-line.reset:after { content: "▲"; position: absolute; right: 4px; top: 8px; } /* line 132, app/assets/stylesheets/partials/_admin.scss */ .status-select-line input { display: none; } /* line 135, app/assets/stylesheets/partials/_admin.scss */ #bg-image-preview, .bg-image-preview { width: 90%; margin: 20px; min-height: 90px; } /* line 140, app/assets/stylesheets/partials/_admin.scss */ #bg-image-preview img, .bg-image-preview img { width: 100%; height: auto; } /* line 146, app/assets/stylesheets/partials/_admin.scss */ .collapsible .collapse-down { display: none; } /* line 149, app/assets/stylesheets/partials/_admin.scss */ .collapsible .collapse-up { display: inline; } /* line 152, app/assets/stylesheets/partials/_admin.scss */ .collapsible .collapse-item { display: block; } /* line 156, app/assets/stylesheets/partials/_admin.scss */ .collapsible.collapsed .collapse-down { display: inline; } /* line 159, app/assets/stylesheets/partials/_admin.scss */ .collapsible.collapsed .collapse-up { display: none; } /* line 162, app/assets/stylesheets/partials/_admin.scss */ .collapsible.collapsed .collapse-item { display: none; } /* line 167, app/assets/stylesheets/partials/_admin.scss */ .section-column-header-toggle { cursor: pointer; margin: 0.75em 0 0; font-size: 1em; line-height: 1.5em; font-weight: 500; } @media (min-width: 37.5em) { /* line 167, app/assets/stylesheets/partials/_admin.scss */ .section-column-header-toggle { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; font-weight: 500; text-transform: none; } } /* line 179, app/assets/stylesheets/partials/_admin.scss */ .section-column-header-toggle i { color: gray; } /* line 182, app/assets/stylesheets/partials/_admin.scss */ .section-column-header-toggle .clear-fix { clear: both; } /* line 186, app/assets/stylesheets/partials/_admin.scss */ label.after-info-text { margin-top: 0; } /* line 191, app/assets/stylesheets/partials/_admin.scss */ form .checkbox-container.file-delete-box input[type="checkbox"] { top: 8px; } /* line 194, app/assets/stylesheets/partials/_admin.scss */ form .checkbox-container.file-delete-box label { margin-top: 0.1875em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 5, app/assets/stylesheets/partials/_ajax.scss */ .ajax-update-notification { position: fixed; top: 3em; z-index: 99999; left: 1.5em; right: 1.5em; text-align: center; } /* line 14, app/assets/stylesheets/partials/_ajax.scss */ .ajax-update-notification-content { max-width: 60em; display: inline-block; box-shadow: rgba(0, 0, 0, 0.2); border-radius: 3px; } /* line 23, app/assets/stylesheets/partials/_ajax.scss */ .ajax-update-notice, .ajax-update-success, .ajax-update-error { position: relative; display: none; border-radius: 3px; padding: 0.75em 1.125em; } /* line 33, app/assets/stylesheets/partials/_ajax.scss */ .ajax-update-text { padding-left: 0.375em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 8, app/assets/stylesheets/partials/_alerts.scss */ .alert-box-icon { width: 1.5em; display: inline-block; } /* line 13, app/assets/stylesheets/partials/_alerts.scss */ .alert-box-danger { border-radius: 3px; background-color: #f2dede; padding: 1.125em 1.2em; color: #963b3b; margin-bottom: 0.75em; } /* line 23, app/assets/stylesheets/partials/_alerts.scss */ .alert-box-warning { border-radius: 3px; background-color: #fcf8e3; padding: 1.125em 1.2em; color: #8a6d3b; margin-bottom: 0.75em; } /* line 1, app/assets/stylesheets/partials/_branding.scss */ .branding-container { border-top: 1px solid #EBEBEB; margin: 40px 0; padding-top: 40px; } /* line 7, app/assets/stylesheets/partials/_branding.scss */ .branding-content { color: #333; font-size: 14px; line-height: 23px; text-align: center; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/partials/_buttons.scss */ .button-hoverable .content.hover-content { display: none; } /* line 10, app/assets/stylesheets/partials/_buttons.scss */ .button-hoverable:hover:not(.button-disable-hover) .content.default-content { display: none; } /* line 13, app/assets/stylesheets/partials/_buttons.scss */ .button-hoverable:hover:not(.button-disable-hover) .content.hover-content { display: table-cell; } /* line 18, app/assets/stylesheets/partials/_buttons.scss */ .follow-button { border-radius: 0; background: #e8e8e8; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; color: #474747; width: 100%; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .follow-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .follow-button:hover { background: #dbdbdb; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .follow-button:active { background: #cfcfcf; color: white; } /* line 145, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .follow-button:hover { color: #474747; } /* line 148, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .follow-button:active { color: #474747; } /* line 22, app/assets/stylesheets/partials/_buttons.scss */ .follow-button.unfollow:hover:not(.button-disable-hover) { background: #a91a1a; color: white; } /* line 30, app/assets/stylesheets/partials/_buttons.scss */ .disabled-button, .disabled-button:hover { background-color: #d7d7d7; } /* line 35, app/assets/stylesheets/partials/_buttons.scss */ .google-login-button { position: relative; cursor: pointer; color: white; display: block; text-align: left; text-shadow: 0px 0px 1px #aaaaaa; background: #de4b39; min-height: 48px; -moz-border-radius: 0.3125em; -webkit-border-radius: 0.3125em; border-radius: 0.3125em; padding: 4px 4px; width: 100%; margin-bottom: 0.75em; margin-top: 0.75em; } /* line 51, app/assets/stylesheets/partials/_buttons.scss */ .google-login-button:hover { background: rgba(222, 75, 57, 0.5); color: #ffffff; } /* line 55, app/assets/stylesheets/partials/_buttons.scss */ .google-login-button > img { max-width: 40px; float: left; } /* line 59, app/assets/stylesheets/partials/_buttons.scss */ .google-login-button .google-text { margin-left: 14px; line-height: 40px; } /* line 65, app/assets/stylesheets/partials/_buttons.scss */ .linkedin-login-button { position: relative; cursor: pointer; color: white; display: block; text-align: left; text-shadow: 0px 0px 1px #aaaaaa; background: #0077b5; min-height: 48px; -moz-border-radius: 0.3125em; -webkit-border-radius: 0.3125em; border-radius: 0.3125em; padding: 3px 3px; width: 100%; margin-bottom: 0.75em; margin-top: 0.75em; } /* line 81, app/assets/stylesheets/partials/_buttons.scss */ .linkedin-login-button:hover { background: rgba(0, 119, 181, 0.5); color: #ffffff; } /* line 85, app/assets/stylesheets/partials/_buttons.scss */ .linkedin-login-button > img { max-width: 52px; float: left; } /* line 89, app/assets/stylesheets/partials/_buttons.scss */ .linkedin-login-button .linkedin-text { margin-left: 3px; line-height: 40px; } /* line 97, app/assets/stylesheets/partials/_buttons.scss */ .login-form a.fb-connect, .login-form a.google-login-button, .login-form a.linkedin-login-button, .signup-form a.fb-connect, .signup-form a.google-login-button, .signup-form a.linkedin-login-button { display: table; height: 46px; padding: 0 12px 0 5px; } /* line 104, app/assets/stylesheets/partials/_buttons.scss */ .login-form a.fb-connect .fb-icon, .login-form a.fb-connect .google-icon, .login-form a.fb-connect .linkedin-icon, .login-form a.google-login-button .fb-icon, .login-form a.google-login-button .google-icon, .login-form a.google-login-button .linkedin-icon, .login-form a.linkedin-login-button .fb-icon, .login-form a.linkedin-login-button .google-icon, .login-form a.linkedin-login-button .linkedin-icon, .signup-form a.fb-connect .fb-icon, .signup-form a.fb-connect .google-icon, .signup-form a.fb-connect .linkedin-icon, .signup-form a.google-login-button .fb-icon, .signup-form a.google-login-button .google-icon, .signup-form a.google-login-button .linkedin-icon, .signup-form a.linkedin-login-button .fb-icon, .signup-form a.linkedin-login-button .google-icon, .signup-form a.linkedin-login-button .linkedin-icon { display: table-cell; vertical-align: middle; width: 40px; } /* line 112, app/assets/stylesheets/partials/_buttons.scss */ .login-form a.fb-connect .fb-icon, .login-form a.google-login-button .fb-icon, .login-form a.linkedin-login-button .fb-icon, .signup-form a.fb-connect .fb-icon, .signup-form a.google-login-button .fb-icon, .signup-form a.linkedin-login-button .fb-icon { height: 25px; left: initial; padding: 4px 0 0; position: relative; text-align: center; top: initial; } /* line 121, app/assets/stylesheets/partials/_buttons.scss */ .login-form a.fb-connect .google-icon, .login-form a.google-login-button .google-icon, .login-form a.linkedin-login-button .google-icon, .signup-form a.fb-connect .google-icon, .signup-form a.google-login-button .google-icon, .signup-form a.linkedin-login-button .google-icon { height: 40px; padding: 6px 0 0; } /* line 126, app/assets/stylesheets/partials/_buttons.scss */ .login-form a.fb-connect .linkedin-icon, .login-form a.google-login-button .linkedin-icon, .login-form a.linkedin-login-button .linkedin-icon, .signup-form a.fb-connect .linkedin-icon, .signup-form a.google-login-button .linkedin-icon, .signup-form a.linkedin-login-button .linkedin-icon { height: 22px; padding: 3px 0 0; text-align: center; } /* line 132, app/assets/stylesheets/partials/_buttons.scss */ .login-form a.fb-connect .fb-text, .login-form a.fb-connect .google-text, .login-form a.fb-connect .linkedin-text, .login-form a.google-login-button .fb-text, .login-form a.google-login-button .google-text, .login-form a.google-login-button .linkedin-text, .login-form a.linkedin-login-button .fb-text, .login-form a.linkedin-login-button .google-text, .login-form a.linkedin-login-button .linkedin-text, .signup-form a.fb-connect .fb-text, .signup-form a.fb-connect .google-text, .signup-form a.fb-connect .linkedin-text, .signup-form a.google-login-button .fb-text, .signup-form a.google-login-button .google-text, .signup-form a.google-login-button .linkedin-text, .signup-form a.linkedin-login-button .fb-text, .signup-form a.linkedin-login-button .google-text, .signup-form a.linkedin-login-button .linkedin-text { display: table-cell; padding: 0 0 0 10px; vertical-align: middle; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker-start-wrapper { width: 45%; float: left; } /* line 7, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker-end-wrapper { width: 45%; float: right; } /* Overwrite default styles for datepicker vendor component */ /* line 14, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.active:hover, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover { background-color: #4a90e2; } /* line 37, app/assets/stylesheets/partials/_datepicker.scss */ .input-daterange { margin-bottom: 1.125em; } /* line 39, app/assets/stylesheets/partials/_datepicker.scss */ .input-daterange input:last-child { border-radius: 0.3125em; } /* line 42, app/assets/stylesheets/partials/_datepicker.scss */ .input-daterange input { text-align: left; } /* line 47, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker tbody tr:nth-child(odd) { background-color: transparent; } /* line 53, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker table tr td.day { border-radius: 0px; } /* line 56, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker table tr td.day:hover { background-color: #3483de; color: white; } /* line 61, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker table tr td.day.disabled, .datepicker table tr td.day.disabled:hover { background-color: #e8e8e8; border-radius: 0px; color: #d7d7d7; } /* line 68, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker table tr td.day.range, .datepicker table tr td.day.selected { background-color: #4a90e2; color: #FFF; } /* line 73, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker table tr td.day.range:hover, .datepicker table tr td.day.range:hover:hover, .datepicker table tr td.day.selected:hover, .datepicker table tr td.day.selected:hover:hover { background-color: #3483de; } /* line 78, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker table tr td.day.range.disabled, .datepicker table tr td.day.range.disabled:hover { background-color: rgba(255, 0, 0, 0.8); color: rgba(255, 255, 255, 0.6); } /* line 87, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker-per-hour .field { margin-bottom: 5px; } /* line 90, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker-per-hour .field label { width: 50%; float: left; margin: 0.5em 0; } /* line 95, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker-per-hour .field input { width: 50%; } /* line 98, app/assets/stylesheets/partials/_datepicker.scss */ .datepicker-per-hour .field select { margin: 0.5em 0; width: 50%; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* ------------------- Flash notifications ------------------- */ /* line 9, app/assets/stylesheets/partials/_flash.scss */ .ajax-notification, .flash-notification { margin-bottom: 0.75em; position: relative; padding: 0.5em 1.25em 0.75em 1.25em; border-radius: 5em; } @media (min-width: 48em) { /* line 9, app/assets/stylesheets/partials/_flash.scss */ .ajax-notification, .flash-notification { margin-bottom: 1.5em; } } /* line 19, app/assets/stylesheets/partials/_flash.scss */ .ajax-notification .ajax-icon, .ajax-notification .flash-icon, .flash-notification .ajax-icon, .flash-notification .flash-icon { position: absolute; top: 0.5625em; left: 0.75em; } /* line 25, app/assets/stylesheets/partials/_flash.scss */ .ajax-notification .ajax-text, .ajax-notification .flash-text, .flash-notification .ajax-text, .flash-notification .flash-text { text-align: left; margin-left: 1.125em; min-height: 0.75em; } /* line 33, app/assets/stylesheets/partials/_flash.scss */ .ajax-notice, .ajax-warning, .flash-notice, .flash-warning, .ajax-update-notice { background: #e8e8e8; } /* line 41, app/assets/stylesheets/partials/_flash.scss */ .ajax-success, .flash-success, .ajax-update-success { background: #b2d9ab; } /* line 47, app/assets/stylesheets/partials/_flash.scss */ .ajax-error, .flash-error, .ajax-update-error { color: white; background: #c81f1f; } /* line 54, app/assets/stylesheets/partials/_flash.scss */ .flash-error-link { color: #cccccc; } /* line 56, app/assets/stylesheets/partials/_flash.scss */ .flash-error-link:hover { color: #b3b3b3; } @media (min-width: 48em) { /* line 61, app/assets/stylesheets/partials/_flash.scss */ .narrow-notification { margin-right: 24em; } } @charset "UTF-8"; /** Contains styles for listing grid's image part */ /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 8, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-image-container { position: relative; color: white; width: 100%; padding-bottom: 66.6666666667%; } /* line 12, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-image-container:hover { color: #e8e8e8; } /* line 18, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-image-container.people-listings { width: 100%; padding-bottom: 75%; } /* line 23, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-title { position: absolute; bottom: 0; padding: 0.75em; line-height: 1.2em; } /* line 30, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-overlay { border-top-left-radius: 3px; border-top-right-radius: 3px; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); /*For IE7-8-9*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#99000000'); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* line 38, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-image { border-top-left-radius: 3px; border-top-right-radius: 3px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* line 50, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-price-container { color: #3c3c3c; font-weight: 600; min-width: 3.125em; text-align: center; position: absolute; top: 0; right: 0; padding: 0.3em 0.75em; background-color: white; background-color: rgba(255, 255, 255, 0.95); border-bottom-left-radius: 0.375em; font-size: 12px; max-width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 57, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-price { font-size: 18px; } /* line 61, app/assets/stylesheets/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-type { font-size: 16px; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /** Given `prefix`, `gutter` and `cols`, the mixin creates a grid system */ /* line 48, app/assets/stylesheets/partials/_fluid-grid.scss */ .row, .row-with-divider { overflow: auto; margin-bottom: 0.75em; } /* line 53, app/assets/stylesheets/partials/_fluid-grid.scss */ .row.without-margin, .without-margin.row-with-divider { margin-bottom: 0; } /* line 58, app/assets/stylesheets/partials/_fluid-grid.scss */ .row-with-divider { border-bottom: 1px solid #d7d7d7; } /* line 62, app/assets/stylesheets/partials/_fluid-grid.scss */ .row-with-divider:first-child { border-top: 1px solid #d7d7d7; } /** Creates a basic grid system, prefixed "col" Usage: .row .col-6 = "I'm half the size available" .col-3 = "I'm 1/4 of the total available size" .col-3 = "I'm 1/4 of the total available size" */ /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-1 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-1:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-1 { width: 8.3333333333%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-2 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-2:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-2 { width: 16.6666666667%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-3 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-3:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-3 { width: 25%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-4 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-4:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-4 { width: 33.3333333333%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-5 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-5:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-5 { width: 41.6666666667%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-6 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-6:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-6 { width: 50%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-7 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-7:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-7 { width: 58.3333333333%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-8 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-8:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-8 { width: 66.6666666667%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-9 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-9:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-9 { width: 75%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-10 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-10:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-10 { width: 83.3333333333%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-11 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-11:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-11 { width: 91.6666666667%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-12 { width: 100%; margin-bottom: 0.75em; min-height: 1px; } /* line 18, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-12:last-child { margin-bottom: 0; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/partials/_fluid-grid.scss */ .col-12 { width: 100%; float: left; padding-left: 0.75em; padding-right: 0.75em; margin-bottom: 0; } } @media (min-width: 48em) { /* line 38, app/assets/stylesheets/partials/_fluid-grid.scss */ [class*="col-"]:first-child { padding-left: 0; } /* line 42, app/assets/stylesheets/partials/_fluid-grid.scss */ [class*="col-"]:last-child { padding-right: 0; } } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/partials/_forms.scss */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], textarea { border-radius: 5em; border: 2px solid #d7d7d7; min-height: 42px; width: 100%; padding: 0.25em 0.5em; } @media (min-width: 48em) { /* line 4, app/assets/stylesheets/partials/_forms.scss */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], textarea { margin: 0; padding: 0.5em 0.6875em; } } /* line 23, app/assets/stylesheets/partials/_forms.scss */ select { border-radius: 5em; border: 2px solid #d7d7d7; min-height: 42px; padding: 0.25em 0.5em; } @media (min-width: 48em) { /* line 23, app/assets/stylesheets/partials/_forms.scss */ select { margin: 0; padding: 0.5em 0.6875em; } } /* line 36, app/assets/stylesheets/partials/_forms.scss */ input.auto_width { width: auto; } /* line 41, app/assets/stylesheets/partials/_forms.scss */ .inline-select { margin-left: 0.375em; margin-right: 0.375em; } /* line 47, app/assets/stylesheets/partials/_forms.scss */ .checkbox-container > .light { font-weight: 500; } /* line 52, app/assets/stylesheets/partials/_forms.scss */ .send-button-wrapper .send-button-loading { float: left; background-color: #c3c3c3; } /* line 56, app/assets/stylesheets/partials/_forms.scss */ .send-button-wrapper .send-button-loading-img { float: left; width: 2.625em; height: 2.625em; margin: 0.75em 0; padding: 0.6em; border-radius: 6px; } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/partials/_forms.scss */ .selection-options { margin-top: 0.75em; margin-bottom: 0.1875em; float: right; } } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/_info-text.scss */ .info-text-container { position: relative; color: gray; font-size: 0.8125em; line-height: 1.3846153846em; margin-top: 0.375em; } /* line 10, app/assets/stylesheets/partials/_info-text.scss */ .info-text-icon { position: absolute; width: 0.75em; margin-top: 1px; } /* line 16, app/assets/stylesheets/partials/_info-text.scss */ .info-text-content { padding-left: 1.5em; } @charset "UTF-8"; /** Sharetribe customizations to noUISlider Most of the style definitions for the slider are located under vendor directory (file jquery.nouislider.css) These are Sharetribe specific customizations. **/ /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 12, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .range-slider { margin-left: 11px; margin-right: 11px; } /* No shadows, flat design ;) */ /* line 18, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-background, .noUi-connect, .noUi-target, .noUi-target.noUi-connect, .noUi-handle, .noUi-active { box-shadow: none; } /* Custom background color */ /* line 28, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-connect { background: #4a90e2; } /* Size */ /* line 33, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-horizontal { height: 12px; } /* line 37, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-horizontal .noUi-handle { width: 22px; height: 22px; left: -11px; top: -6px; } /* Disable handle stripes */ /* line 45, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-handle:before, .noUi-handle:after { display: none; } /* Set background color, no border */ /* line 51, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-background { background: #e8e8e8; } /* line 55, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-handle { border: 0px; background: #e4e4e4; } /* "Remove" borders, i.e. make the color same as background */ /* line 61, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-target { border-color: #e8e8e8; } /* Active color */ /* line 66, app/assets/stylesheets/partials/_jquery.nouislider.customizations.scss */ .noUi-active { background: #f1f1f1; } /* No customization for vertical. It may not work */ @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/_lists.scss */ .no-bullets { list-style-type: none; padding-left: 0; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 16, app/assets/stylesheets/partials/_map.scss */ .bubble-item { position: relative; height: 13.6363636364em; z-index: 1; float: left; overflow: hidden; } /* line 24, app/assets/stylesheets/partials/_map.scss */ .bubble-image-container { width: 18.1818181818em; height: 10em; overflow: hidden; } /* line 34, app/assets/stylesheets/partials/_map.scss */ .bubble-image-container img { width: 18.1818181818em; min-width: 18.1818181818em; min-height: 10em; border-top-left-radius: 3em; border-top-right-radius: 3em; } /* line 43, app/assets/stylesheets/partials/_map.scss */ .bubble-multi-content .bubble-image-container img { border-top-left-radius: 0; border-top-right-radius: 0; } /* line 51, app/assets/stylesheets/partials/_map.scss */ .bubble-multi-content { position: absolute; left: 0px; top: 2.7272727273em; clear: both; transition-property: left; transition-duration: 0.3s; } /* line 62, app/assets/stylesheets/partials/_map.scss */ .bubble-navi { position: absolute; top: 0; left: 0; height: 2.7272727273em; z-index: 2; background-color: gray; color: white; width: 200px; } /* line 73, app/assets/stylesheets/partials/_map.scss */ .bubble-navi-header { position: absolute; left: 30px; right: 30px; top: 4px; height: 20px; overflow: hidden; clear: both; text-align: center; } /* line 84, app/assets/stylesheets/partials/_map.scss */ .bubble-navi-container { overflow: hidden; position: relative; height: 16.3636363636em; width: 18.1818181818em; } /* line 91, app/assets/stylesheets/partials/_map.scss */ .bubble-navi-button, .bubble-navi-right, .bubble-navi-left { font-size: 14px; line-height: 27px; margin-top: 3px; width: 20px; display: block; position: absolute; text-align: center; user-select: none; } /* line 103, app/assets/stylesheets/partials/_map.scss */ .bubble-navi-button.disabled, .disabled.bubble-navi-right, .disabled.bubble-navi-left { color: #999999; } /* line 108, app/assets/stylesheets/partials/_map.scss */ .bubble-navi-left { left: 5px; } /* line 113, app/assets/stylesheets/partials/_map.scss */ .bubble-navi-right { right: 5px; } /* line 118, app/assets/stylesheets/partials/_map.scss */ .bubble-loader-gif { position: absolute; top: 4.9090909091em; left: 7.1818181818em; } /* line 124, app/assets/stylesheets/partials/_map.scss */ .bubble-title { position: absolute; bottom: 0; left: 0; right: 0; height: 3.6363636364em; background-color: white; color: white; clear: both; } /* line 135, app/assets/stylesheets/partials/_map.scss */ .bubble-avatar { position: absolute; left: 0.4545454545em; top: 0.4545454545em; } /* line 140, app/assets/stylesheets/partials/_map.scss */ .bubble-avatar > a { display: block; } /* line 143, app/assets/stylesheets/partials/_map.scss */ .bubble-avatar > a, .bubble-avatar > a > img { height: 2.7272727273em; } /* line 150, app/assets/stylesheets/partials/_map.scss */ .bubble-details { color: #3c3c3c; position: absolute; left: 3.6363636364em; bottom: 0.4545454545em; right: 0.4545454545em; top: 0.4545454545em; } /* line 167, app/assets/stylesheets/partials/_map.scss */ .bubble-details-text-overflow, .bubble-author > a, .bubble-details .bubble-price { display: block; height: 2.7272727273em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* line 175, app/assets/stylesheets/partials/_map.scss */ .bubble-details .bubble-price { width: 50%; float: right; text-align: right; padding-left: 0.2272727273em; line-height: 2.1428571429em; font-size: 14px; padding-right: 0.625em; } /* line 185, app/assets/stylesheets/partials/_map.scss */ .bubble-price-quantity { font-size: 11px; } /* line 189, app/assets/stylesheets/partials/_map.scss */ .bubble-author { width: 50%; float: left; text-align: left; padding-right: 0.2272727273em; } /* line 192, app/assets/stylesheets/partials/_map.scss */ .bubble-author > a { line-height: 2.7272727273em; } /* line 200, app/assets/stylesheets/partials/_map.scss */ .bubble-overlay { position: absolute; bottom: 3.6363636364em; left: 0; right: 0; top: 0; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); /*For IE7-8-9*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#99000000'); } /* line 209, app/assets/stylesheets/partials/_map.scss */ span.bubble-title-link { position: absolute; bottom: 0.3571428571em; left: 0.7142857143em; right: 0.7142857143em; color: white; font-size: 14px; vertical-align: bottom; line-height: 1.35em; } /* line 220, app/assets/stylesheets/partials/_map.scss */ .bubble-no-image span.bubble-title-link { top: 0.3571428571em; color: gray; } /* line 226, app/assets/stylesheets/partials/_map.scss */ .map div { box-sizing: content-box; } /* line 232, app/assets/stylesheets/partials/_map.scss */ .map .bubble-author, .map .bubble-price { box-sizing: border-box; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/_pagination.scss */ .pagination { margin-top: 0.75em; cursor: default; /* self-clearing method: */ } /* line 9, app/assets/stylesheets/partials/_pagination.scss */ .pagination a, .pagination span, .pagination em { padding: 0.2em 0.5em; display: block; float: left; margin-right: 1px; } /* line 17, app/assets/stylesheets/partials/_pagination.scss */ .pagination .disabled { margin-top: 0.375em; color: #d7d7d7; } /* line 21, app/assets/stylesheets/partials/_pagination.scss */ .pagination .current { margin-top: 0.375em; font-style: normal; font-weight: bold; background: #4a90e2; border-radius: 3px; margin-right: 0.375em; padding: 0.3125em 0.9375em; color: white; } /* line 32, app/assets/stylesheets/partials/_pagination.scss */ .pagination a { margin-top: 0.375em; padding: 0.3125em 0.9375em; background: #e8e8e8; display: inline-block; border-radius: 3px; margin-right: 0.375em; text-decoration: none; color: #4a90e2; } /* line 43, app/assets/stylesheets/partials/_pagination.scss */ .pagination a:hover, .pagination a:focus { background: #d7d7d7; color: #3c3c3c; } /* line 48, app/assets/stylesheets/partials/_pagination.scss */ span.gap { display: inline-block; margin-top: 0.375em; height: 34px; } /* line 53, app/assets/stylesheets/partials/_pagination.scss */ .pagination:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* line 60, app/assets/stylesheets/partials/_pagination.scss */ * html .pagination { height: 1%; } /* line 63, app/assets/stylesheets/partials/_pagination.scss */ *:first-child + html .pagination { overflow: hidden; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 5, app/assets/stylesheets/partials/_paypal.scss */ .paypal-button-wrapper .checkout-with-paypal-button, .paypal-button-wrapper .checkout-with-stripe-button { float: left; outline: 0; } /* line 9, app/assets/stylesheets/partials/_paypal.scss */ .paypal-button-wrapper .checkout-with-stripe-button { margin: 0; } /* line 12, app/assets/stylesheets/partials/_paypal.scss */ .paypal-button-wrapper .paypal-image { margin: 0.75em 0; } /* line 15, app/assets/stylesheets/partials/_paypal.scss */ .paypal-button-wrapper .paypal-button-loading-img { float: left; width: 1.875em; height: 1.875em; margin-top: 1.125em; margin-left: 1.125em; } /* line 24, app/assets/stylesheets/partials/_paypal.scss */ .paypal-or-stripe { padding: 16px 48px; text-align: center; position: relative; } /* line 28, app/assets/stylesheets/partials/_paypal.scss */ .paypal-or-stripe:before, .paypal-or-stripe:after { position: absolute; top: 51%; overflow: hidden; width: 50%; height: 1px; content: '\a0'; background-color: #c3c3c3; } /* line 37, app/assets/stylesheets/partials/_paypal.scss */ .paypal-or-stripe:before { margin-left: -50%; text-align: right; } /* line 41, app/assets/stylesheets/partials/_paypal.scss */ .paypal-or-stripe span { display: inline-block; background: white; padding: 0px 20px; z-index: 10; } /* line 48, app/assets/stylesheets/partials/_paypal.scss */ button.checkout-with-paypal-button { background: #ffc438; vertical-align: middle; float: left; color: black; font-weight: 600; margin-top: 0em; } /* line 55, app/assets/stylesheets/partials/_paypal.scss */ button.checkout-with-paypal-button img { vertical-align: middle; margin-left: 8px; } /* line 60, app/assets/stylesheets/partials/_paypal.scss */ button.checkout-with-paypal-button.blue { background: #4a90e2; color: white; font-weight: 400; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/partials/_paypal_account_connected.scss */ .paypal-link-wrapper .send-button-loading-img { width: 1.125em; height: 1.125em; margin: 0 0.75em; top: 3px; position: relative; } /* line 13, app/assets/stylesheets/partials/_paypal_account_connected.scss */ .paypal-account-connected { color: #19b400; } /* line 17, app/assets/stylesheets/partials/_paypal_account_connected.scss */ .paypal-account-disabled { color: #c81f1f; } /* line 21, app/assets/stylesheets/partials/_paypal_account_connected.scss */ .stripe-account-restricted-soon { color: #eaac10; } /* line 25, app/assets/stylesheets/partials/_paypal_account_connected.scss */ .stripe-account-pending-verification { color: #808080; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/_responsive.scss */ .visible-tablet, .visible-desktop-inline, .visible-tablet-inline { display: none !important; } @media (min-width: 48em) { /* line 3, app/assets/stylesheets/partials/_responsive.scss */ .visible-tablet, .visible-desktop-inline, .visible-tablet-inline { display: block !important; } } @media (min-width: 48em) { /* line 11, app/assets/stylesheets/partials/_responsive.scss */ .visible-tablet-inline { display: inline !important; } } @media (min-width: 48em) { /* line 18, app/assets/stylesheets/partials/_responsive.scss */ .hidden-tablet { display: none !important; } } /* line 24, app/assets/stylesheets/partials/_responsive.scss */ .visible-desktop { display: none; } @media (min-width: 63em) { /* line 24, app/assets/stylesheets/partials/_responsive.scss */ .visible-desktop { display: block; } } @media (min-width: 48em) { /* line 32, app/assets/stylesheets/partials/_responsive.scss */ .visible-desktop-inline { display: inline; } } @media (min-width: 63em) { /* line 39, app/assets/stylesheets/partials/_responsive.scss */ .hidden-desktop { display: none !important; } } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/partials/_table.scss */ table { width: 100%; } /* line 8, app/assets/stylesheets/partials/_table.scss */ th { text-align: left; padding: 0.375em 0.75em; } /* line 13, app/assets/stylesheets/partials/_table.scss */ td { padding: 0.375em 0.75em; } /* line 15, app/assets/stylesheets/partials/_table.scss */ td:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } /* line 19, app/assets/stylesheets/partials/_table.scss */ td:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* line 26, app/assets/stylesheets/partials/_table.scss */ tbody tr:nth-child(odd) { background-color: #e8e8e8; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/_texts.scss */ a { text-decoration: none; color: #4a90e2; } /* line 6, app/assets/stylesheets/partials/_texts.scss */ a:hover { color: #1f69c1; } /* line 7, app/assets/stylesheets/partials/_texts.scss */ a:active { color: #185195; } /* line 10, app/assets/stylesheets/partials/_texts.scss */ .truncated-link { display: inline-block; max-width: 21.875em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } /* line 19, app/assets/stylesheets/partials/_texts.scss */ small { font-size: 0.8125em; line-height: 1.3846153846em; display: block; } /* line 24, app/assets/stylesheets/partials/_texts.scss */ h1, h3 { -webkit-font-smoothing: antialiased; } /* line 28, app/assets/stylesheets/partials/_texts.scss */ h1, h2, h3, h4, h5, h6 { font-family: 'Source Sans Pro', helvetica, sans-serif; color: #171717; } /* line 33, app/assets/stylesheets/partials/_texts.scss */ h1 { margin: 0em 0 0.75em; font-weight: 700; } @media (min-width: 37.5em) { /* line 33, app/assets/stylesheets/partials/_texts.scss */ h1 { font-size: 1.625em; line-height: 1.3846153846em; font-weight: 600; margin-top: 0.2307692308em; margin-bottom: 0.4615384615em; } } /* line 44, app/assets/stylesheets/partials/_texts.scss */ h2 { margin: 0em 0 0.75em; font-size: 1em; line-height: 1.5em; font-weight: 500; } @media (min-width: 37.5em) { /* line 44, app/assets/stylesheets/partials/_texts.scss */ h2 { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; font-weight: 500; text-transform: none; } } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu { background: #474747; border-color: #474747 !important; position: relative; z-index: 99999; text-align: left; margin-bottom: 0.75em; } /* line 17, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu a, .toggle-menu a .feedback, .toggle-menu .toggle-menu-item, .toggle-menu .toggle-menu-title, .toggle-menu .toggle-menu-item .feedback, .toggle-menu .toggle-menu-title .feedback { display: block; position: relative; color: white; padding: 0.75em; padding-right: 0.75em; } /* line 26, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu a.login-form, .toggle-menu .toggle-menu-item.login-form, .toggle-menu .login-form.toggle-menu-title { padding: 0; } /* line 28, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu a.login-form:hover, .toggle-menu .toggle-menu-item.login-form:hover, .toggle-menu .login-form.toggle-menu-title:hover { color: #a2c6f0; background: none; } /* line 32, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu a.login-form:after, .toggle-menu .toggle-menu-item.login-form:after, .toggle-menu .login-form.toggle-menu-title:after { content: ""; } /* line 40, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu a:hover, .toggle-menu .toggle-menu-link:hover { background: #4a90e2; color: white; } /* line 44, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu a:hover:after, .toggle-menu .toggle-menu-link:hover:after { color: white; } /* line 50, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu .toggle-menu-title { background-color: #545454; } /* line 55, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu p.login-form { color: white; margin: 0.375em 0 0.75em 0; } /* line 61, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu .feedback textarea { font-size: 0.8125em; line-height: 1.3846153846em; display: block; width: 100%; min-height: 5.5384615385em; padding: 0.4615384615em; } /* line 70, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu.hidden { display: none; } /* line 75, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu .badge { position: absolute; right: 0.6923076923em; top: 1.0769230769em; bottom: auto; z-index: 900; } /* line 82, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu .badge.huge-badge { top: 0.7692307692em; right: 0.6923076923em; bottom: auto; } @media (min-width: 48em) { /* line 3, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu { position: absolute; } } /* line 94, app/assets/stylesheets/partials/_toggle.scss */ .toggle { display: block; cursor: pointer; } @media (min-width: 48em) { /* line 94, app/assets/stylesheets/partials/_toggle.scss */ .toggle { display: inline-block; width: auto; } } /* line 103, app/assets/stylesheets/partials/_toggle.scss */ .toggle.toggled { background: #474747; color: white !important; border-color: #474747; } @media (min-width: 48em) { /* line 103, app/assets/stylesheets/partials/_toggle.scss */ .toggle.toggled { width: auto; border-bottom-color: #474747 !important; } } /* line 114, app/assets/stylesheets/partials/_toggle.scss */ .toggle.with-borders { border: 0 solid #d7d7d7; border-radius: 5em; background: #e8e8e8; } /* line 121, app/assets/stylesheets/partials/_toggle.scss */ .toggle.with-borders.toggled { border-width: 0; border-radius: 0; background: #474747; } @media (min-width: 48em) { /* line 121, app/assets/stylesheets/partials/_toggle.scss */ .toggle.with-borders.toggled { padding: 0; } } /* line 136, app/assets/stylesheets/partials/_toggle.scss */ .toggle-header { display: inline-block; } /* line 140, app/assets/stylesheets/partials/_toggle.scss */ .toggle-header-container { padding: 0 0.75em; height: 42px; line-height: 40px; } /* line 146, app/assets/stylesheets/partials/_toggle.scss */ .icon-dropdown { position: relative; top: 3px; float: right; } @media (min-width: 48em) { /* line 146, app/assets/stylesheets/partials/_toggle.scss */ .icon-dropdown { float: none; } } /* line 155, app/assets/stylesheets/partials/_toggle.scss */ .toggle-menu-subitem, a.toggle-menu-subitem { padding-left: 1.5em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/partials/_utils.scss */ .relative { position: relative; } /** Use icon-fix to correctly vertical align SS-pika icons (2px) */ /* line 11, app/assets/stylesheets/partials/_utils.scss */ .icon-fix { position: relative; top: 2px; } /* line 15, app/assets/stylesheets/partials/_utils.scss */ .icon-fix-rel { position: relative; top: 0.125em; } /** Use icon-fix to correctly vertical align SS-pika icons (3px) */ /* line 22, app/assets/stylesheets/partials/_utils.scss */ .icon-fix-more { position: relative; top: 3px; } /* line 26, app/assets/stylesheets/partials/_utils.scss */ .hidden { display: none; } /* line 30, app/assets/stylesheets/partials/_utils.scss */ .clearfix { overflow: auto; } /** Use disabled link or icon */ /* line 39, app/assets/stylesheets/partials/_utils.scss */ .disabled, .disabled:hover { color: #d7d7d7; cursor: default; } /* line 46, app/assets/stylesheets/partials/_utils.scss */ .left { float: left; } /* line 50, app/assets/stylesheets/partials/_utils.scss */ .right { float: right; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button, .radio-button-negative, .radio-button-positive { color: #3c3c3c; cursor: pointer; position: relative; display: block; width: 100%; border-radius: 5em; border: 2px solid #d7d7d7; margin-bottom: 0.375em; } /* line 12, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button:hover, .radio-button-negative:hover, .radio-button-positive:hover { background: #e8e8e8; } /* line 18, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button-icon { position: absolute; top: 0.5em; left: 0.75em; } /* line 24, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button-label { margin-left: 2.5em; margin-right: 2.25em; padding: 0.375em 0 0.625em 0; } /* line 33, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button-positive.radio-button-selected { color: #5a7d13; background: #c2e972; } /* line 36, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button-positive.radio-button-selected:hover { background: #c2e972; } /* line 45, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button-negative.radio-button-selected { color: #a91a1a; background: #f09f9f; } /* line 48, app/assets/stylesheets/partials/radio_buttons.scss */ .radio-button-negative.radio-button-selected:hover { background: #f09f9f; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* ---------------- Person settings ---------------- */ /* line 9, app/assets/stylesheets/views/_account-settings.scss */ .account-settings { padding-top: 0.375em; } /* line 12, app/assets/stylesheets/views/_account-settings.scss */ .account-settings #account_email_form, .account-settings #account_password_form { display: none; } /* line 17, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row { position: relative; border-radius: 5em; border: 2px solid #d7d7d7; margin-bottom: 1.5em; min-height: 42px; } /* line 25, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row p { margin-bottom: 0.75em; } /* line 29, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-text { margin-left: 2.25em; padding: 0.3125em 0 0.625em 0; } /* line 34, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-icon { position: absolute; top: 0.4375em; left: 0.625em; } /* line 40, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-form { padding: 0 0.75em 0.75em 0.75em; } /* line 44, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row { border-radius: 3px; width: 100%; overflow: hidden; padding: 0.75em 0; } @media (min-width: 63em) { /* line 44, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row { padding: 0; line-height: 2.125em; } } /* line 58, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-form-row { padding-top: 0.75em; height: auto; line-height: auto; width: 100%; } /* line 65, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-highlight { background: #e8e8e8; } /* line 69, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-address { padding-left: 0.75em; } @media (min-width: 63em) { /* line 69, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-address { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 9em; float: left; } } @media (min-width: 63em) { /* line 69, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-address { width: 18em; } } /* line 83, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-form-row-address { padding-left: 0; } /* line 87, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-send-notification { padding-left: 0.75em; } @media (min-width: 63em) { /* line 87, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-send-notification { float: right; width: 10.5em; text-align: center; } } /* line 96, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-confirmed { padding-left: 0.75em; } /* line 98, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-confirmed small { margin-left: 0.375em; } @media (min-width: 63em) { /* line 96, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-confirmed { float: right; width: 10.5em; text-align: center; } } /* line 109, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-delete { padding-left: 0.75em; } @media (min-width: 63em) { /* line 109, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-delete { float: right; min-width: 3em; text-align: center; } } /* line 119, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-delete-cross.disabled { color: #d7d7d7; } /* line 124, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-hidden-email-form { display: none; } /* line 128, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .settings-email-mobile-label-container { width: 100%; overflow: hidden; } /* line 133, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .settings-email-mobile-label { float: left; } @media (min-width: 63em) { /* line 133, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .settings-email-mobile-label { float: none; } } /* line 140, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .settings-email-mobile-label-right { padding-left: 0.375em; } @media (min-width: 63em) { /* line 140, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .account-settings-row .settings-email-mobile-label-right { padding: 0; } } /* line 148, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .email-form { margin-top: 0.75em; padding: 0 0.75em; } /* line 153, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .password-form { padding: 0 0.75em; } /* line 156, app/assets/stylesheets/views/_account-settings.scss */ .account-settings .password-form input[type="password"] { margin-top: 0.75em; } /* line 161, app/assets/stylesheets/views/_account-settings.scss */ .account-settings p { padding: 0 0.75em 0.375em 0.75em; } /* line 165, app/assets/stylesheets/views/_account-settings.scss */ .account-settings p.global-settings { padding: 0 0 0.375em 0; } @media (min-width: 48em) { /* line 170, app/assets/stylesheets/views/_account-settings.scss */ .account-settings a.change-link { margin-left: 0.75em; } } /* line 175, app/assets/stylesheets/views/_account-settings.scss */ .account-settings #delete_account_button { margin-left: 0.75em; } /* line 181, app/assets/stylesheets/views/_account-settings.scss */ .notification-settings h2 { margin-bottom: 0.375rem; margin-top: 0; } /* line 186, app/assets/stylesheets/views/_account-settings.scss */ .notification-settings h2.lower { margin-top: 1.5em; } /* line 191, app/assets/stylesheets/views/_account-settings.scss */ .notification-settings .checkbox-container label { font-weight: 500; } /* line 197, app/assets/stylesheets/views/_account-settings.scss */ .alert-text-container { position: relative; margin-top: 0.375em; } /* line 202, app/assets/stylesheets/views/_account-settings.scss */ .alert-text-icon { position: absolute; width: 0.75em; margin-top: 3px; } /* line 208, app/assets/stylesheets/views/_account-settings.scss */ .alert-text-content { padding-left: 1.5em; } /* line 212, app/assets/stylesheets/views/_account-settings.scss */ .paypal-wizard { border: 1px solid #d7d7d7; border-radius: 3px; margin-bottom: 1.5em; margin-top: 3em; } /* line 220, app/assets/stylesheets/views/_account-settings.scss */ .paypal-wizard-content { padding: 1.5em 2.25em; } /* line 224, app/assets/stylesheets/views/_account-settings.scss */ .paypal-wizard-divider { border-top: 1px solid #d7d7d7; } /* line 228, app/assets/stylesheets/views/_account-settings.scss */ .paypal-wizard-step, .paypal-wizard-step-complete { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; font-weight: normal; } /* line 233, app/assets/stylesheets/views/_account-settings.scss */ .paypal-wizard-step-complete { color: #19b400; } /* line 238, app/assets/stylesheets/views/_account-settings.scss */ .paypal-change-link { cursor: pointer; } /* line 242, app/assets/stylesheets/views/_account-settings.scss */ .paypal-success-mark { color: #19b400; } /* line 246, app/assets/stylesheets/views/_account-settings.scss */ .paypal-first-steps-list { margin-top: 2.25em; } /* line 250, app/assets/stylesheets/views/_account-settings.scss */ .paypal-last-steps-list { margin-bottom: 2.25em; } /* line 254, app/assets/stylesheets/views/_account-settings.scss */ .paypal-currency-information { padding-left: 30px; position: relative; } /* line 259, app/assets/stylesheets/views/_account-settings.scss */ .paypal-currency-info-icon { position: absolute; top: 0; left: 0; } /* line 265, app/assets/stylesheets/views/_account-settings.scss */ .paypal-currency-change-warning-text { display: none; } /* These styles are required for stripe.js card input form*/ /* line 270, app/assets/stylesheets/views/_account-settings.scss */ .StripeElement { background-color: white; padding: 20px 15px; border: 1px solid #c3c3c3; } /* line 276, app/assets/stylesheets/views/_account-settings.scss */ .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } /* line 280, app/assets/stylesheets/views/_account-settings.scss */ .StripeElement--invalid { border-color: #fa755a; } /* line 284, app/assets/stylesheets/views/_account-settings.scss */ .StripeElement--webkit-autofill { background-color: #fefde5 !important; } /* line 288, app/assets/stylesheets/views/_account-settings.scss */ #stripe_account_form_birth_date_1i, #stripe_account_form_birth_date_2i, #stripe_account_form_birth_date_3i { width: 32.5%; } /* line 294, app/assets/stylesheets/views/_account-settings.scss */ #update_also_bank_account { margin-right: 10px; } /* line 299, app/assets/stylesheets/views/_account-settings.scss */ #stripe_wizard input[disabled] { background-color: #dddddd; } /* line 305, app/assets/stylesheets/views/_account-settings.scss */ .markdown-help-table th { border-bottom: 1px solid #ddd; } /* line 308, app/assets/stylesheets/views/_account-settings.scss */ .markdown-help-table td { border-bottom: 1px solid #ddd; } /* line 311, app/assets/stylesheets/views/_account-settings.scss */ .markdown-help-table tbody tr:nth-child(odd) { background-color: transparent; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/_conversation.scss */ .conversation-unread { background: #e8e8e8; } /* line 7, app/assets/stylesheets/views/_conversation.scss */ .conversation-details-container { position: relative; } /* line 11, app/assets/stylesheets/views/_conversation.scss */ .conversation-row { padding: 0.75em; position: relative; } /* line 16, app/assets/stylesheets/views/_conversation.scss */ .conversation-details { padding-left: 3.75em; } /* line 20, app/assets/stylesheets/views/_conversation.scss */ .conversation-avatar { position: absolute; top: 0; left: 0; display: block; width: 3em; height: 3em; border-radius: 3px; } /* line 31, app/assets/stylesheets/views/_conversation.scss */ .conversation-title-link, .conversation-title-link-unread { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 36, app/assets/stylesheets/views/_conversation.scss */ .conversation-title-link-unread { font-weight: bold; } /* line 42, app/assets/stylesheets/views/_conversation.scss */ .conversation-title-link-text:before, .conversation-title-link-text:after { content: '"'; } /* line 48, app/assets/stylesheets/views/_conversation.scss */ .conversation-last-message-content-not-available { font-style: italic; } /* line 52, app/assets/stylesheets/views/_conversation.scss */ .conversation-context { font-size: 0.8125em; line-height: 1.3846153846em; line-height: 1.8461538462em; } /* line 57, app/assets/stylesheets/views/_conversation.scss */ .conversation-list-status-container { position: relative; } /* line 62, app/assets/stylesheets/views/_conversation.scss */ .conversation-list-status-icon { font-size: 1.625em; line-height: 1.3846153846em; font-weight: 600; } /* line 71, app/assets/stylesheets/views/_conversation.scss */ .conversation-list-status-icon > .waiting-you { color: #d1c905; } /* line 75, app/assets/stylesheets/views/_conversation.scss */ .conversation-list-status-icon > .waiting-other { color: gray; } /* line 79, app/assets/stylesheets/views/_conversation.scss */ .conversation-list-status-icon > .confirmed { color: #5a7d13; } /* line 83, app/assets/stylesheets/views/_conversation.scss */ .conversation-list-status-icon > .canceled { color: #a91a1a; } /* line 87, app/assets/stylesheets/views/_conversation.scss */ .conversation-list-status-icon > .rejected { color: #a91a1a; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-lightbox { max-width: 675px; width: 95%; } /* line 7, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-content { position: relative; overflow: hidden; width: 100%; background: white; border-radius: 5em; } /* line 15, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-head-panel { width: 90%; margin: 0 auto 30px auto; } /* line 19, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-title { font-size: 38px; line-height: 38px; font-weight: normal; text-align: center; margin: 0px; padding: 30px 0; } /* line 28, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-subtitle { font-size: 17px; line-height: 30px; font-weight: normal; text-align: center; margin: 0px; } /* line 36, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-plan-external { max-width: 300px; margin: 30px auto 0 auto; overflow: auto; background-color: #f35937; border: solid 1px #f35937; border-radius: 5em; color: white; } /* line 48, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-plan-biannual { border-radius: 5em; background-color: white; color: black; padding: 30px 0; border: solid 1px #ccc; background-color: #f35937; border: solid 1px #f35937; color: white; } /* line 59, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-subscribe-title, .contact-owner-title { text-align: center; font-size: 21px; line-height: 21px; } /* line 65, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-footer { padding: 0 10px 30px 10px; font-size: 14px; line-height: 14px; text-align: center; } /* line 72, app/assets/stylesheets/views/_expiration_notice.scss */ .contact-owner { border-radius: 5em; max-width: 300px; margin: 0 auto 30px auto; padding: 30px 0; background-color: #f35937; border: solid 1px #f35937; color: white; } /* line 83, app/assets/stylesheets/views/_expiration_notice.scss */ .expiration-subcontent { text-align: center; margin-bottom: 10px; font-size: 17px; line-height: 30px; font-weight: normal; } /* * This is the transition that should be used with link and button hovers. * * Usage: * * .my-button:hover { * @include hover-transition * } * * To specify which property should be animated, use: * * .my-button:hover { * @include hover-transition(background-color) * } * */ /* Divides given total area according to golden ratio: numerator ----------- = 1.6180... denominator */ /* Generic landing page button You may want to override following properties: - background-color - border-color - height */ /** * Fix for vw, vh, vmin, vmax on iOS 7. * http://caniuse.com/#feat=viewport-units * * This fix works by replacing viewport units with px values on known screen sizes. * * iPhone 6 and 6 Plus cannot run iOS 7, so are not targeted by this fix. * Target devices running iOS 8+ will incidentally execute the media query, * but this will still produce the expected result; so this is not a problem. * * As an example, replace: * * height: 50vh; * font-size: 5vmin; * * with: * * @include viewport-unit(height, 50vh); * @include viewport-unit(font-size, 5vmin); */ /* line 3, app/assets/stylesheets/views/_footer.scss */ .footer__container--dark { background-color: #525961; } /* line 7, app/assets/stylesheets/views/_footer.scss */ .footer__container--light { background-color: #FFFFFF; } /* line 11, app/assets/stylesheets/views/_footer.scss */ .footer__content { margin: 0 auto; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; padding: 48px 36px; } @media (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1024px) { /* line 11, app/assets/stylesheets/views/_footer.scss */ .footer__content { padding: 48px 96px; } } @media (min-width: 1025px) { /* line 11, app/assets/stylesheets/views/_footer.scss */ .footer__content { padding: 48px 36px; max-width: 1212px; } } /* line 34, app/assets/stylesheets/views/_footer.scss */ .footer__links-container, .footer__links-container--center { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse; /* mobile */ -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; margin-bottom: 12px; } @media (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1024px) { /* line 34, app/assets/stylesheets/views/_footer.scss */ .footer__links-container, .footer__links-container--center { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; margin-bottom: 18px; } } @media (min-width: 1025px) { /* line 34, app/assets/stylesheets/views/_footer.scss */ .footer__links-container, .footer__links-container--center { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; margin-bottom: 32px; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; max-width: 1188px; } } /* line 56, app/assets/stylesheets/views/_footer.scss */ .footer__links-container--center { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; } /* line 64, app/assets/stylesheets/views/_footer.scss */ .footer__link-list { padding: 0; list-style-type: none; text-align: center; margin: 0 -12px; } @media (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1024px) { /* line 64, app/assets/stylesheets/views/_footer.scss */ .footer__link-list { margin: 0 -16px; } } @media (min-width: 1025px) { /* line 64, app/assets/stylesheets/views/_footer.scss */ .footer__link-list { margin: 0 -16px; } } @media (min-width: 1025px) { /* line 79, app/assets/stylesheets/views/_footer.scss */ .footer__container--logo .footer__content > div > .footer__link-list { display: none; } } /* line 86, app/assets/stylesheets/views/_footer.scss */ .footer__link-list-item { display: inline; } /* line 90, app/assets/stylesheets/views/_footer.scss */ .footer__link { display: inline-block; font-family: "Proxima Soft", Helvetica, sans; font-weight: 500; color: inherit; margin: 0; font-size: 13px; letter-spacing: 0px; padding: 12px 12px; } /* line 95, app/assets/stylesheets/views/_footer.scss */ .footer__container--dark .footer__link, .footer__container--marketplace_color .footer__link { color: #FFFFFF; } /* line 98, app/assets/stylesheets/views/_footer.scss */ .footer__container--dark .footer__link:hover, .footer__container--marketplace_color .footer__link:hover { color: #D9D9D9; } /* line 103, app/assets/stylesheets/views/_footer.scss */ .footer__container--light .footer__link { color: #7A7D80; } /* line 106, app/assets/stylesheets/views/_footer.scss */ .footer__container--light .footer__link:hover { color: #555759; } /* line 111, app/assets/stylesheets/views/_footer.scss */ .footer__container--logo .footer__link { color: #3c3c3c; } /* line 114, app/assets/stylesheets/views/_footer.scss */ .footer__container--logo .footer__link:hover { color: #D9D9D9; } @media (max-width: 767px) and (orientation: landscape) { /* line 90, app/assets/stylesheets/views/_footer.scss */ .footer__link { padding: 12px 16px; } } @media (min-width: 768px) and (max-width: 1024px) { /* line 90, app/assets/stylesheets/views/_footer.scss */ .footer__link { padding: 12px 16px; } } @media (min-width: 1025px) { /* line 90, app/assets/stylesheets/views/_footer.scss */ .footer__link { font-size: 16px; letter-spacing: 0px; padding: 16px 16px; } } /* line 142, app/assets/stylesheets/views/_footer.scss */ .footer__separator { box-sizing: border-box; width: 100%; height: 1px; border: 0px; } /* line 148, app/assets/stylesheets/views/_footer.scss */ .footer__container--dark .footer__separator { background-color: rgba(255, 255, 255, 0.2); } /* line 152, app/assets/stylesheets/views/_footer.scss */ .footer__container--light .footer__separator { background-color: #D4D5D7; } /* line 156, app/assets/stylesheets/views/_footer.scss */ .footer__container--marketplace_color .footer__separator { background-color: #ffffff; } /* line 161, app/assets/stylesheets/views/_footer.scss */ .footer__copyrights--markdown { font-family: "Proxima Soft", Helvetica, sans; font-weight: 400; text-align: center; margin-top: 30px; font-size: 12px; letter-spacing: 0px; line-height: 18px; } /* line 165, app/assets/stylesheets/views/_footer.scss */ .footer__container--dark .footer__copyrights--markdown { color: #7A7D80; } /* line 169, app/assets/stylesheets/views/_footer.scss */ .footer__container--light .footer__copyrights--markdown { color: #D4D5D7; } @media (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1024px) { /* line 161, app/assets/stylesheets/views/_footer.scss */ .footer__copyrights--markdown { margin-top: 30px; } } @media (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1024px) { /* line 161, app/assets/stylesheets/views/_footer.scss */ .footer__copyrights--markdown { margin-top: 30px; font-size: 12px; letter-spacing: 0px; line-height: 18px; } } @media (min-width: 1025px) { /* line 161, app/assets/stylesheets/views/_footer.scss */ .footer__copyrights--markdown { margin-top: 48px; font-size: 14px; letter-spacing: 0px; line-height: 18px; } } /* line 197, app/assets/stylesheets/views/_footer.scss */ .footer__container--marketplace_color .footer__content > .footer__copyrights--markdown { color: #ffffff; } @media (min-width: 1025px) { /* line 201, app/assets/stylesheets/views/_footer.scss */ .footer__container--logo .footer__content > .footer__copyrights--markdown { display: none; } } /* line 207, app/assets/stylesheets/views/_footer.scss */ .footer__copyrights--markdown a { color: inherit; } /* line 210, app/assets/stylesheets/views/_footer.scss */ .footer__copyrights--markdown a:hover { color: inherit; } /* line 219, app/assets/stylesheets/views/_footer.scss */ .footer__social-media { margin: 0 -18px; text-align: center; margin-bottom: 18px; } @media (min-width: 1025px) { /* line 219, app/assets/stylesheets/views/_footer.scss */ .footer__social-media { margin-bottom: 0; } } /* line 229, app/assets/stylesheets/views/_footer.scss */ .footer__social-media-link { padding: 16px 18px; display: inline-block; } /* line 233, app/assets/stylesheets/views/_footer.scss */ .footer__container--logo .footer__content .footer__social-media-link { padding: 10px 12px; } /* line 239, app/assets/stylesheets/views/_footer.scss */ .footer__social-media-link:hover > svg { -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; } /* line 243, app/assets/stylesheets/views/_footer.scss */ .footer__facebook-icon { width: 12px; height: 22px; } /* line 248, app/assets/stylesheets/views/_footer.scss */ .footer__twitter-icon { width: 21px; height: 18px; } /* line 253, app/assets/stylesheets/views/_footer.scss */ .footer__instagram-icon { width: 22px; height: 22px; } /* line 258, app/assets/stylesheets/views/_footer.scss */ .footer__youtube-icon { width: 25px; height: 18px; } /* line 263, app/assets/stylesheets/views/_footer.scss */ .footer__googleplus-icon { width: 24px; height: 24px; } /* line 268, app/assets/stylesheets/views/_footer.scss */ .footer__linkedin-icon { width: 21px; height: 21px; } /* line 274, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__logo-image { float: left; } /* line 277, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__logo-image img { max-width: 100%; } @media (min-width: 1025px) { /* line 274, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__logo-image { margin-right: 30px; max-width: 200px; } } /* line 283, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__copyrights--markdown { margin-top: 20px; } @media (max-width: 767px), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1024px) { /* line 283, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__copyrights--markdown { display: none; } } /* line 289, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__link-list { float: left; text-align: left; margin: 0; } @media (max-width: 767px), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1024px) { /* line 289, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__link-list { display: none; } } /* line 296, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__link-list .footer__link-list-item { display: list-item; } /* line 298, app/assets/stylesheets/views/_footer.scss */ .footer__logo-container .footer__link-list .footer__link-list-item .footer__link { padding: 0 16px; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* Height of the whole header bar */ /* Height of an element (i.e. button) in the header bar */ /* Element padding, i.e. empty space on the top and below of the element */ /* Line heights, add -3px finetuning, text looks better */ /* Default spacing between header bar elements */ /* line 20, app/assets/stylesheets/views/_header.scss */ .header { height: 3.75em; width: 100%; } /* line 25, app/assets/stylesheets/views/_header.scss */ .header-wrapper { background: white; margin: 0 auto; max-width: 79.5em; padding-left: 0; padding-right: 0; } @media (min-width: 48em) { /* line 25, app/assets/stylesheets/views/_header.scss */ .header-wrapper { padding-left: 0.75em; padding-right: 0.75em; } } /* line 29, app/assets/stylesheets/views/_header.scss */ .header-left { float: left; } /* line 33, app/assets/stylesheets/views/_header.scss */ .header-right { float: right; } /* Buttons may need padding, text links don't */ /* line 38, app/assets/stylesheets/views/_header.scss */ .header-padding { margin-left: 0.75em; } /* Vertically centered block element in header bar */ /* line 51, app/assets/stylesheets/views/_header.scss */ .header-hover:hover { background-color: #e8e8e8; } /* line 55, app/assets/stylesheets/views/_header.scss */ .header-hover.toggled { background-color: #474747; } /* line 60, app/assets/stylesheets/views/_header.scss */ .header-logo { display: block; display: block; margin-top: 0.625em; margin-bottom: 0.625em; height: 2.5em; } /* line 65, app/assets/stylesheets/views/_header.scss */ .header-text-link { height: 3.75em; line-height: 3.5625em; padding-right: 0.75em; padding-left: 0.75em; display: block; color: #3c3c3c; } /* line 73, app/assets/stylesheets/views/_header.scss */ .header-text-link:hover { color: #3c3c3c; } /* line 77, app/assets/stylesheets/views/_header.scss */ .toggled .header-text-link { color: white; } /* line 90, app/assets/stylesheets/views/_header.scss */ .new-listing-link { border-radius: 0; background: #2ab865; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; display: block; margin-top: 0.625em; margin-bottom: 0.625em; height: 2.5em; padding-left: 1.25em; padding-right: 1.25em; line-height: 2.3125em; max-width: 12.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .new-listing-link .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .new-listing-link:hover { background: #25a35a; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .new-listing-link:active { background: #218e4e; color: white; } /* line 98, app/assets/stylesheets/views/_header.scss */ .header-menu-container { display: block; padding: 0.625em 0.75em; height: 3.75em; } /* line 104, app/assets/stylesheets/views/_header.scss */ .header-menu-toggle-container { border-radius: 0; background: #e8e8e8; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; padding: 0 0.75em; height: 2.5em; line-height: 2.3125em; margin: 0; padding-bottom: 0; padding-top: 0; color: #3c3c3c; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .header-menu-toggle-container .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .header-menu-toggle-container:hover { background: #dbdbdb; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .header-menu-toggle-container:active { background: #cfcfcf; color: white; } /* line 114, app/assets/stylesheets/views/_header.scss */ .toggled .header-menu-toggle-container { color: white; background-color: #474747; } /* line 120, app/assets/stylesheets/views/_header.scss */ .header-menu-icon { position: relative; top: 3px; } @media (min-width: 48em) { /* line 120, app/assets/stylesheets/views/_header.scss */ .header-menu-icon { padding-right: 0.25em; } } /* line 128, app/assets/stylesheets/views/_header.scss */ .header-user-avatar { border-radius: 3px; display: block; margin-top: 0.625em; margin-bottom: 0.625em; height: 2.5em; } /* line 134, app/assets/stylesheets/views/_header.scss */ .header-user-toggle { padding-left: 0.75em; display: block; overflow: auto; } /* line 146, app/assets/stylesheets/views/_header.scss */ .header-toggle-menu-language { min-width: 12.5em; position: absolute; } /* line 150, app/assets/stylesheets/views/_header.scss */ .header-toggle-menu-user { min-width: 12.5em; position: absolute; } /* line 154, app/assets/stylesheets/views/_header.scss */ .header-toggle-menu-menu { min-width: 12.5em; position: absolute; } /* line 158, app/assets/stylesheets/views/_header.scss */ .header-inbox-link { color: #3c3c3c; position: relative; } /* line 164, app/assets/stylesheets/views/_header.scss */ .header-inbox { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; position: relative; top: 0.25em; } /* line 172, app/assets/stylesheets/views/_header.scss */ .badge { position: absolute; top: 1.875em; left: 1.4375em; background: #4a90e2; color: white; width: 20px; height: 20px; line-height: 19px; border-radius: 10px; text-align: center; } /* line 180, app/assets/stylesheets/views/_header.scss */ .badge.big-badge { width: 26px; height: 26px; line-height: 25px; border-radius: 13px; text-align: center; top: 1.75em; left: 1.125em; } /* line 186, app/assets/stylesheets/views/_header.scss */ .badge.huge-badge { width: 32px; height: 32px; line-height: 31px; border-radius: 16px; text-align: center; top: 1.6875em; left: 0.8125em; } /* line 193, app/assets/stylesheets/views/_header.scss */ .mobile-badge { display: inline-block; color: #474747; background-color: white; width: 20px; height: 20px; line-height: 19px; border-radius: 10px; text-align: center; margin-left: 0.75em; } /* line 201, app/assets/stylesheets/views/_header.scss */ .header-wide-logo-text, .header-square-logo-text { margin-top: 0.625rem; margin-bottom: 0.625rem; line-height: 2.5rem; height: 2.5rem; font-size: 1.75em; letter-spacing: -0.03em; text-transform: uppercase; font-weight: 800; } /* line 213, app/assets/stylesheets/views/_header.scss */ .header-wide-logo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 9.375rem; height: 2.5rem; } /* line 219, app/assets/stylesheets/views/_header.scss */ .header-square-logo-text { width: 2.5rem; height: 2.5rem; } /* line 224, app/assets/stylesheets/views/_header.scss */ .header-wide-logo { background-image: url(""); /* 1.5 dpr */ width: 10.5em; height: 2.5em; background-repeat: no-repeat; background-size: 168em auto; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { /* line 224, app/assets/stylesheets/views/_header.scss */ .header-wide-logo { background-image: url(""); } } /* line 242, app/assets/stylesheets/views/_header.scss */ .header-square-logo { background-image: url(""); /* 1.5 dpr */ width: 2.5em; height: 2.5em; background-repeat: no-repeat; background-size: 40em auto; display: inline-block; } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { /* line 242, app/assets/stylesheets/views/_header.scss */ .header-square-logo { background-image: url(""); } } @charset "UTF-8"; /** Homepage thumbnail grid view */ /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid { overflow: auto; margin-right: -0.75em; } @media (min-width: 48em) { /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid { margin-right: -1.5em; } } /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { float: left; padding-right: 0.75em; margin-bottom: 0.75em; } @media (max-width: 23.375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 100%; } } @media (min-width: 23.4375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 50%; } } @media (min-width: 30em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 50%; } } @media (min-width: 37.5em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 53.75em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 60em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 63em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { width: 25%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-narrow .home-fluid-thumbnail-grid-item { padding-right: 1.5em; margin-bottom: 1.5em; } } /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid { overflow: auto; margin-right: -0.75em; } @media (min-width: 48em) { /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid { margin-right: -1.5em; } } /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { float: left; padding-right: 0.75em; margin-bottom: 0.75em; } @media (max-width: 23.375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 100%; } } @media (min-width: 23.4375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 100%; } } @media (min-width: 30em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 50%; } } @media (min-width: 37.5em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 25%; } } @media (min-width: 53.75em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 25%; } } @media (min-width: 60em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 25%; } } @media (min-width: 63em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { width: 25%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-wide .home-fluid-thumbnail-grid-item { padding-right: 1.5em; margin-bottom: 1.5em; } } /* line 21, app/assets/stylesheets/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-author { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; background-color: #e8e8e8; height: 48px; position: relative; } /* line 30, app/assets/stylesheets/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-author-avatar { padding: 6px; } /* line 34, app/assets/stylesheets/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-author-avatar-image { border-radius: 3px; height: 36px; } /* line 40, app/assets/stylesheets/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-author-name { font-size: 0.8125em; line-height: 1.3846153846em; position: absolute; top: 6px; left: 51px; right: 6px; bottom: 6px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 55, app/assets/stylesheets/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-details { position: absolute; top: 6px; left: 51px; right: 6px; bottom: 6px; } /* line 63, app/assets/stylesheets/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-details-author-name { display: inline-block; float: left; width: 50%; height: 100%; font-size: 0.8125em; line-height: 1.3846153846em; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 73, app/assets/stylesheets/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-details-distance { float: left; width: 50%; height: 100%; text-align: right; color: #3c3c3c; font-weight: 600; font-size: 0.8125em; line-height: 1.3846153846em; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 7, app/assets/stylesheets/views/_home.scss */ .home-toolbar { overflow: visible; margin-bottom: 0.75em; border-bottom: 1px solid #d7d7d7; } @media (min-width: 48em) { /* line 7, app/assets/stylesheets/views/_home.scss */ .home-toolbar { margin-bottom: 1.5em; } } /* line 18, app/assets/stylesheets/views/_home.scss */ .home-grid { position: relative; } /* line 22, app/assets/stylesheets/views/_home.scss */ .home-toolbar-button-group { overflow: auto; margin-bottom: 0.75em; width: 100%; } /* line 29, app/assets/stylesheets/views/_home.scss */ .home-toolbar-button-group.filters-enabled { width: 50%; padding-left: 0.375em; } @media (min-width: 48em) { /* line 35, app/assets/stylesheets/views/_home.scss */ .home-toolbar-button-group, .home-toolbar-button-group.filters-enabled { float: right; width: auto; } } /* line 43, app/assets/stylesheets/views/_home.scss */ .home-toolbar-button-group-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; display: block; float: left; margin: 0; line-height: 40px; padding: 0 0.75em; color: #3c3c3c; background: #e8e8e8; border-color: #d7d7d7; border-right-width: 0em; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 33.3%; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button:active { background: #2275d7; color: white; } /* line 10, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button:hover { color: white; background: gray; border-color: #666666; } /* line 18, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button.selected { background-color: #4a90e2; color: white; border-color: #2275d7; } /* line 72, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button.selected { border-width: 0; } /* line 79, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button.selected + * { border-left: 0; } /* line 88, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button:hover + * { border-left-width: 0em; } /* line 96, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button:hover + .selected { border-left: 0em; } /* line 41, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button:first-child { border-top-left-radius: 0.375em; border-bottom-left-radius: 0.375em; } /* line 47, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-button-group-button:last-child { border-top-right-radius: 0.375em; border-bottom-right-radius: 0.375em; } @media (min-width: 48em) { /* line 43, app/assets/stylesheets/views/_home.scss */ .home-toolbar-button-group-button { width: auto; min-width: 7.5em; } } /* line 57, app/assets/stylesheets/views/_home.scss */ .home-toolbar-button-text { display: none; } @media (min-width: 48em) { /* line 57, app/assets/stylesheets/views/_home.scss */ .home-toolbar-button-text { margin-left: 0.375em; display: inline-block; } } /** Hidden on mobile if this class is present. Doesn't affect on desktop */ /* line 70, app/assets/stylesheets/views/_home.scss */ .home-toolbar-filters-mobile-hidden { display: none; } @media (min-width: 48em) { /* line 70, app/assets/stylesheets/views/_home.scss */ .home-toolbar-filters-mobile-hidden { display: block; } } /* line 78, app/assets/stylesheets/views/_home.scss */ .home-toolbar-show-filters-button-container { width: 50%; float: left; padding-right: 0.375em; } /* line 84, app/assets/stylesheets/views/_home.scss */ .home-toolbar-show-filters-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; padding: 0 0.75em; color: #3c3c3c; background: #e8e8e8; border-color: #d7d7d7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin: 0; line-height: 40px; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-show-filters-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-show-filters-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-show-filters-button:active { background: #2275d7; color: white; } /* line 10, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-show-filters-button:hover { color: white; background: gray; border-color: #666666; } /* line 18, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .home-toolbar-show-filters-button.selected { background-color: #4a90e2; color: white; border-color: #2275d7; } @media (min-width: 48em) { /* line 84, app/assets/stylesheets/views/_home.scss */ .home-toolbar-show-filters-button { display: none; } } /* line 99, app/assets/stylesheets/views/_home.scss */ .home-map > .map { height: 15.75em; } @media (min-width: 48em) { /* line 99, app/assets/stylesheets/views/_home.scss */ .home-map > .map { height: 30em; } } /* line 107, app/assets/stylesheets/views/_home.scss */ .home-list-item { position: relative; margin-bottom: 0.75em; border-bottom: 1px solid #d7d7d7; min-height: 5.25em; } @media (min-width: 48em) { /* line 107, app/assets/stylesheets/views/_home.scss */ .home-list-item { padding-bottom: 1.5em; margin-bottom: 1.5em; height: 9em; } } /* line 125, app/assets/stylesheets/views/_home.scss */ .home-list-image-container, .home-list-image-container-mobile, .home-list-image-container-desktop { position: absolute; top: 0; left: 0; } /* line 131, app/assets/stylesheets/views/_home.scss */ .home-list-image-container-desktop { height: 7.5em; width: 11.25em; display: none; } @media (min-width: 48em) { /* line 131, app/assets/stylesheets/views/_home.scss */ .home-list-image-container-desktop { display: block; } } /* line 142, app/assets/stylesheets/views/_home.scss */ .home-list-image-container-mobile { width: 4.5em; height: 4.5em; display: block; } @media (min-width: 48em) { /* line 142, app/assets/stylesheets/views/_home.scss */ .home-list-image-container-mobile { display: none; } } /* line 153, app/assets/stylesheets/views/_home.scss */ .home-list-image { width: 100%; height: 100%; display: block; border-radius: 3px; } /* line 161, app/assets/stylesheets/views/_home.scss */ .home-no-image { text-align: center; padding-top: 3em; background: #e8e8e8; height: 100%; width: 100%; } /* line 170, app/assets/stylesheets/views/_home.scss */ .home-list-details-with-image { margin-left: 5.25em; } @media (min-width: 48em) { /* line 170, app/assets/stylesheets/views/_home.scss */ .home-list-details-with-image { margin-left: 12.75em; } } /* line 181, app/assets/stylesheets/views/_home.scss */ .home-list-title, .browsing-list-item-title { margin: 0; padding: 0; font-weight: 700; font-size: 1em; line-height: 1.5em; line-height: 0.975em; padding-bottom: 0.375em; } @media (min-width: 48em) { /* line 181, app/assets/stylesheets/views/_home.scss */ .home-list-title, .browsing-list-item-title { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; } } @media (min-width: 63em) { /* line 181, app/assets/stylesheets/views/_home.scss */ .home-list-title, .browsing-list-item-title { padding-bottom: 2.1761363636em; } } /* line 202, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-title { padding-bottom: 0; } /* line 206, app/assets/stylesheets/views/_home.scss */ .home-share-type-link, .browsing-list-item-share-type-link { font-family: 'Source Sans Pro', helvetica, sans-serif; color: gray; font-size: 0.625em; font-weight: normal; white-space: nowrap; background: #e8e8e8; color: #3c3c3c; border-radius: 5em; padding: 0.25em 0.5em; position: relative; display: none; } /* line 25, app/assets/stylesheets/overrides/mixins/../../mixins/_layout.scss */ .home-share-type-link:hover, .browsing-list-item-share-type-link:hover { background: gray; color: white; } @media (min-width: 48em) { /* line 206, app/assets/stylesheets/views/_home.scss */ .home-share-type-link, .browsing-list-item-share-type-link { display: inline; top: -0.25em; } } /* line 222, app/assets/stylesheets/views/_home.scss */ .home-list-details-right { width: 142px; float: right; display: none; margin-left: 1.5em; } @media (min-width: 63em) { /* line 222, app/assets/stylesheets/views/_home.scss */ .home-list-details-right { display: block; } } /* line 232, app/assets/stylesheets/views/_home.scss */ .home-list-avatar, .browsing-list-item-avatar { position: absolute; top: 0; left: 0; width: 2.5em; display: none; } /* line 239, app/assets/stylesheets/views/_home.scss */ .home-list-avatar img, .browsing-list-item-avatar img { border-radius: 3px; display: block; width: 100%; } @media (min-width: 30em) { /* line 232, app/assets/stylesheets/views/_home.scss */ .home-list-avatar, .browsing-list-item-avatar { display: block; } } /* line 253, app/assets/stylesheets/views/_home.scss */ .home-list-author { vertical-align: top; position: absolute; bottom: 0.75em; } @media (min-width: 48em) { /* line 253, app/assets/stylesheets/views/_home.scss */ .home-list-author { bottom: 1.5em; } } /* line 263, app/assets/stylesheets/views/_home.scss */ .home-list-author-with-listing-image, .browsing-list-item-author-with-listing-image { left: 0; } @media (min-width: 30em) { /* line 263, app/assets/stylesheets/views/_home.scss */ .home-list-author-with-listing-image, .browsing-list-item-author-with-listing-image { left: 5.25em; } } @media (min-width: 48em) { /* line 263, app/assets/stylesheets/views/_home.scss */ .home-list-author-with-listing-image, .browsing-list-item-author-with-listing-image { left: 12.75em; } } /* line 276, app/assets/stylesheets/views/_home.scss */ .home-list-author-without-listing-image, .browsing-list-item-author-without-listing-image { left: 0; } /* line 281, app/assets/stylesheets/views/_home.scss */ .home-list-author-details, .browsing-list-item-author-details { float: left; margin-left: 3.25em; height: 40px; line-height: 22px; max-width: 15em; display: none; } @media (min-width: 30em) { /* line 281, app/assets/stylesheets/views/_home.scss */ .home-list-author-details, .browsing-list-item-author-details { display: block; } } /* line 296, app/assets/stylesheets/views/_home.scss */ .home-list-author-reviews, .browsing-list-item-author-reviews { font-size: 0.8125em; line-height: 1.3846153846em; } /* line 301, app/assets/stylesheets/views/_home.scss */ .home-list-price-mobile, .browsing-list-item-price-mobile { margin-bottom: 0.25em; } @media (min-width: 30em) { /* line 301, app/assets/stylesheets/views/_home.scss */ .home-list-price-mobile, .browsing-list-item-price-mobile { text-align: right; right: 0; padding-top: 10px; bottom: 0.3333333333em; } } @media (min-width: 48em) { /* line 301, app/assets/stylesheets/views/_home.scss */ .home-list-price-mobile, .browsing-list-item-price-mobile { bottom: 0.6666666667em; } } @media (min-width: 63em) { /* line 301, app/assets/stylesheets/views/_home.scss */ .home-list-price-mobile, .browsing-list-item-price-mobile { display: none; } } /* line 318, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-price-mobile { right: 0; } /* line 322, app/assets/stylesheets/views/_home.scss */ .home-list-price-value-mobile, .browsing-list-item-price-value-mobile, .home-list-shape-value-mobile, .browsing-list-item-shape-value-mobile { font-size: 1.5em; } /* line 327, app/assets/stylesheets/views/_home.scss */ .home-list-price-value-mobile > .smaller, .browsing-list-item-price-value-mobile > .smaller, .home-list-shape-value-mobile > .smaller, .browsing-list-item-shape-value-mobile > .smaller { font-size: 1.125em; } @media (min-width: 30em) { /* line 322, app/assets/stylesheets/views/_home.scss */ .home-list-price-value-mobile, .browsing-list-item-price-value-mobile, .home-list-shape-value-mobile, .browsing-list-item-shape-value-mobile { font-size: 1.5em; } /* line 332, app/assets/stylesheets/views/_home.scss */ .home-list-price-value-mobile > .smaller, .browsing-list-item-price-value-mobile > .smaller, .home-list-shape-value-mobile > .smaller, .browsing-list-item-shape-value-mobile > .smaller { font-size: 1.5em; } } @media (min-width: 30em) { /* line 338, app/assets/stylesheets/views/_home.scss */ .home-list-price-mobile-with-listing-image { left: auto; } } @media (min-width: 30em) { /* line 344, app/assets/stylesheets/views/_home.scss */ .home-list-price-mobile-without-listing-image { left: auto; } } /* line 350, app/assets/stylesheets/views/_home.scss */ .home-list-price, .browsing-list-item-price { text-align: right; } /* line 355, app/assets/stylesheets/views/_home.scss */ .home-list-item-price-value, .browsing-list-item-price-value { font-size: 2em; line-height: 1; font-weight: 400; } /* line 362, app/assets/stylesheets/views/_home.scss */ .home-list-listing-shape-value, .browsing-list-item-listing-shape-value { font-size: 1.5em; line-height: 1; font-weight: 400; } /* line 369, app/assets/stylesheets/views/_home.scss */ .home-list-price-quantity, .browsing-list-item-price-quantity { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 374, app/assets/stylesheets/views/_home.scss */ .home-no-listings { border-radius: 3px; padding: 0.75em 1.5em; background: #e8e8e8; } /* line 381, app/assets/stylesheets/views/_home.scss */ .home-categories-link, .home-categories-sub, .home-categories-main { display: block; color: #3c3c3c; text-transform: uppercase; } /* line 386, app/assets/stylesheets/views/_home.scss */ .home-categories-link.selected, .selected.home-categories-sub, .selected.home-categories-main { font-weight: bold; } /* line 394, app/assets/stylesheets/views/_home.scss */ .home-categories-main.selected.has-subcategories { border-bottom: 1px solid #d7d7d7; } /* line 399, app/assets/stylesheets/views/_home.scss */ .home-categories-sub { font-size: 14px; margin-left: 0.75em; } /* line 405, app/assets/stylesheets/views/_home.scss */ .home-toolbar-toggle-container { margin-bottom: 0.75em; } /* line 409, app/assets/stylesheets/views/_home.scss */ #pageless-loader { padding-top: 0.75em; clear: both; } /* Filters */ /* line 416, app/assets/stylesheets/views/_home.scss */ .custom-filter { margin-bottom: 1.5em; } /* line 420, app/assets/stylesheets/views/_home.scss */ .custom-filter-title { font-weight: 700; border-bottom: 1px solid #e8e8e8; } /* line 432, app/assets/stylesheets/views/_home.scss */ .custom-filter-checkbox-label { margin: 0; } /* line 436, app/assets/stylesheets/views/_home.scss */ .custom-filter-checkbox-label-text { font-weight: 400; margin-left: 0.1875em; } /* line 445, app/assets/stylesheets/views/_home.scss */ .browsing-list-item { position: relative; padding-bottom: 0.75em; margin-bottom: 0.75em; border-bottom: 1px solid #d7d7d7; min-height: 5.25em; } @media (min-width: 48em) { /* line 445, app/assets/stylesheets/views/_home.scss */ .browsing-list-item { padding-bottom: 1.5em; margin-bottom: 1.5em; min-height: 9em; } } /* line 459, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-image-container { position: absolute; width: 4.5em; height: 4.5em; } @media (min-width: 48em) { /* line 459, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-image-container { height: 7.5em; width: 11.25em; } } /* line 470, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-image-desktop { display: none; } @media (min-width: 48em) { /* line 470, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-image-desktop { display: block; } } /* line 477, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-image-mobile { display: block; } @media (min-width: 48em) { /* line 477, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-image-mobile { display: none; } } /* line 484, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-details { height: 100%; min-height: 4.5em; padding-bottom: 40px; position: relative; margin-left: 5.25em; } @media (min-width: 48em) { /* line 484, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-details { min-height: 7.5em; margin-left: 12.75em; } } /* line 497, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-details-right { width: 142px; float: right; display: none; margin-left: 1.5em; } @media (min-width: 63em) { /* line 497, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-details-right { display: block; } } /* line 507, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-details-container { margin-left: 1.5em; } @media (min-width: 48em) { /* line 507, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-details-container { margin-left: 0.75em; } } /* line 515, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-distance { font-size: 0.8125em; line-height: 1.3846153846em; } @media (min-width: 48em) { /* line 515, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-distance { font-size: 1em; line-height: 1.5em; } } /* line 523, app/assets/stylesheets/views/_home.scss */ .browsing-list-item-author { vertical-align: top; position: absolute; left: 0px; bottom: 0; } /* line 535, app/assets/stylesheets/views/_home.scss */ .pac-item span { pointer-events: none; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* Styles used in global layout */ /* line 7, app/assets/stylesheets/views/_layout.scss */ .left-navi-dropdown { color: #3c3c3c; padding: 0.625em 0.75em; border-bottom: 1px dotted #d7d7d7; } /* line 8, app/assets/stylesheets/views/_layout.scss */ .left-navi-dropdown:hover { background: #e8e8e8; } /* line 14, app/assets/stylesheets/views/_layout.scss */ .wrapper { background: white; margin: 0 auto; max-width: 79.5em; padding-left: 0.75em; padding-right: 0.75em; } @media (min-width: 48em) { /* line 14, app/assets/stylesheets/views/_layout.scss */ .wrapper { padding-left: 0.75em; padding-right: 0.75em; } } /* line 18, app/assets/stylesheets/views/_layout.scss */ .undo-mobile-wrapper-margin { margin-left: -0.75em; margin-right: -0.75em; } @media (min-width: 48em) { /* line 18, app/assets/stylesheets/views/_layout.scss */ .undo-mobile-wrapper-margin { margin-left: 0; margin-right: 0; } } /* line 23, app/assets/stylesheets/views/_layout.scss */ .left-navi-section img, .left-navi-section iframe { max-width: 100%; } /* line 29, app/assets/stylesheets/views/_layout.scss */ .banner--warning { background-color: #f5a623; color: white; } /* line 33, app/assets/stylesheets/views/_layout.scss */ .banner--title-wrapper { margin: 0 auto; max-width: 63em; padding: 0 0.75em 0 0.75em; } /* line 38, app/assets/stylesheets/views/_layout.scss */ .banner--title { line-height: 50px; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-carousel { position: relative; overflow: hidden; width: 100%; padding-bottom: 100%; } /* line 8, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-carousel:hover > .listing-image-navi { display: block; } /* line 12, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-carousel > .listing-image-navi { display: none; } /* line 20, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-navi-arrow-container { display: inline-block; vertical-align: middle; width: 100%; } /* line 36, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .no-androidprejellybean .listing-image-navi-arrow-container { font-size: 16px; } /* line 24, app/assets/stylesheets/views/_listing-image-carousel.scss */ .navigate-icon-fix { position: relative; top: 4px; } /* line 29, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-arrow-icon-container { position: relative; padding: 1.125em 0.75em; background-color: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 0.5); display: inline-block; } /* line 36, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-arrow-icon-container.left { border-top-right-radius: 3px; border-top-left-radius: 3px; } /* line 42, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-arrow-icon-container.right { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /* line 49, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-navi-arrow { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; } /* line 53, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-navi-clickarea, .listing-image-navi-left, .listing-image-navi-right { position: absolute; top: 0; height: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==); } /* line 13, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .no-androidprejellybean .listing-image-navi-clickarea, .no-androidprejellybean .listing-image-navi-left, .no-androidprejellybean .listing-image-navi-right { font-size: 0; } /* line 17, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .listing-image-navi-clickarea:before, .listing-image-navi-left:before, .listing-image-navi-right:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* line 25, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .androidprejellybean .listing-image-navi-clickarea:before, .androidprejellybean .listing-image-navi-left:before, .androidprejellybean .listing-image-navi-right:before { margin-right: -0.25em; } /* line 63, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-navi-clickarea:hover .listing-image-arrow-icon-container, .listing-image-navi-left:hover .listing-image-arrow-icon-container, .listing-image-navi-right:hover .listing-image-arrow-icon-container { background-color: rgba(0, 0, 0, 0.3); color: white; } /* line 71, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-navi-right { right: 0; text-align: right; width: 75%; background: transparent; } /* line 79, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-navi-left { left: 0; text-align: left; width: 25%; background: transparent; } /* line 87, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-no-image { font-size: 1.625em; line-height: 1.3846153846em; font-weight: 600; color: #d7d7d7; text-align: center; } /* line 93, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-text-container { position: relative; width: 100%; padding-bottom: 100%; } /* line 100, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-frame { width: 100%; padding-bottom: 100%; background-color: #3c3c3c; position: absolute; top: 0px; left: 0px; } /* line 112, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-frame-content { position: absolute; bottom: 0; left: 0; right: 0; top: 0; margin: -1px; overflow: hidden; } /* line 13, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .no-androidprejellybean .listing-image-frame-content { font-size: 0; } /* line 17, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .listing-image-frame-content:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* line 25, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .androidprejellybean .listing-image-frame-content:before { margin-right: -0.25em; } /* line 128, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-vertical-centering { display: inline-block; vertical-align: middle; width: 100%; } /* line 36, app/assets/stylesheets/overrides/mixins/../../mixins/_vertical-centering.scss */ .no-androidprejellybean .listing-image-vertical-centering { font-size: 16px; } /* line 133, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-vertical-centering.too-narrow { height: 100%; vertical-align: inherit; } /* line 140, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image-vertical-centering.correct-ratio { vertical-align: top; } /* line 149, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image, .listing-image.too-wide { display: block; margin: auto; width: 100%; height: auto; } /* line 154, app/assets/stylesheets/views/_listing-image-carousel.scss */ .listing-image.too-narrow { display: block; margin: auto; height: 100%; width: auto; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 5, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .listing-images { margin-top: 0.75em; margin-bottom: 1.5em; overflow: auto; margin-right: -0.75em; } /* line 27, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-remove-hover:hover > .fileupload-preview-remove-image, .touch .fileupload-remove-hover .fileupload-preview-remove-image { display: block; } /* line 33, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-preview-image { width: 8.5em; height: 8.5em; border-radius: 6px; border: #e1e1e1 dashed 0em; } /* line 37, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-preview-remove-image { position: absolute; width: 2.25em; height: 2.25em; right: 0; top: 0; display: none; line-height: 2.25em; text-align: center; border-top-right-radius: 6px; border-bottom-left-radius: 6px; background-color: #424242; background-color: rgba(0, 0, 0, 0.5); color: #cccccc; } /* line 61, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-preview-remove-image:hover { cursor: pointer; color: white; } /* line 67, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-removing { display: none; position: absolute; top: 0; left: 0; width: 8.5em; height: 8.5em; border-radius: 6px; border: #e1e1e1 dashed 0em; background-color: rgba(255, 255, 255, 0.8); } /* line 77, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-text-container { padding-left: 0.3125em; padding-right: 0.3125em; width: 8.5em; height: 8.5em; border-radius: 6px; border: #e1e1e1 dashed 0.1875em; text-align: center; color: #9a9a9a; display: table; } /* line 90, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .upload-image-placeholder { width: 8.5em; height: 8.5em; border-radius: 6px; border: #e1e1e1 dashed 0em; float: left; background-color: #fafafa; margin-right: 0.75em; margin-bottom: 0.75em; } /* line 95, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .upload-image-placeholder:hover .fileupload-text-container, .upload-image-placeholder.hover .fileupload-text-container { border-color: #bbbbbb; } /* line 104, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-centered-text { display: table-cell; vertical-align: middle; } /* line 108, app/assets/stylesheets/views/_listing-image-fileupload.scss */ .fileupload-small-text { margin-top: 0.3125em; font-size: 0.8125em; line-height: 1.3846153846em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 6, app/assets/stylesheets/views/_listings.scss */ .listing-description-content ol { padding-left: 1.5em; } /* line 9, app/assets/stylesheets/views/_listings.scss */ .listing-description-content blockquote { border-left: 0.25em solid #c3c3c3; padding: 0 1em; color: gray; } /* line 14, app/assets/stylesheets/views/_listings.scss */ .listing-description-content hr { border-bottom: 1px solid #c3c3c3; margin-bottom: 1em; } /* line 19, app/assets/stylesheets/views/_listings.scss */ .listing-description-youtube-wrapper { width: 100%; padding-bottom: 56.25%; /* 16:9 */ position: relative; margin-bottom: 1.5em; } /* line 25, app/assets/stylesheets/views/_listings.scss */ .listing-description-youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* line 36, app/assets/stylesheets/views/_listings.scss */ .listing-social { overflow: auto; } /* line 41, app/assets/stylesheets/views/_listings.scss */ .listing-fb-like-button, .listing-tweet-button { float: left; margin-right: 1.5em; } /* line 47, app/assets/stylesheets/views/_listings.scss */ .listing-tweet-button { padding-top: 4px; } /* line 52, app/assets/stylesheets/views/_listings.scss */ .listing-price { clear: both; } /* line 56, app/assets/stylesheets/views/_listings.scss */ .listing-price-amount { font-size: 2.625em; line-height: 1.1428571429em; font-weight: 700; color: #474747; display: block; float: left; margin-right: 0.375em; } /* line 64, app/assets/stylesheets/views/_listings.scss */ .listing-price-quantity { vertical-align: top; position: relative; top: 0.3125em; color: gray; } /* line 78, app/assets/stylesheets/views/_listings.scss */ .listing-paypal-fee-info-link { cursor: pointer; } /* line 83, app/assets/stylesheets/views/_listings.scss */ .quantity-wrapper { width: 100%; margin-bottom: 1.125em; } /* line 87, app/assets/stylesheets/views/_listings.scss */ .quantity-label-wrapper { float: left; width: 100%; } /* line 91, app/assets/stylesheets/views/_listings.scss */ .quantity-label { float: left; width: auto; font-weight: bold; padding: 0.525em 0.525em 0 0; margin: auto 6.25em auto 0; } /* line 98, app/assets/stylesheets/views/_listings.scss */ .quantity-input { margin-left: -6.25em; width: 6.25em; float: left; } /* line 103, app/assets/stylesheets/views/_listings.scss */ .quantity-input input { width: 100%; } /* line 106, app/assets/stylesheets/views/_listings.scss */ .quantity-input input:focus { outline-width: 0; } /* line 114, app/assets/stylesheets/views/_listings.scss */ .listing-author { position: relative; } /* line 118, app/assets/stylesheets/views/_listings.scss */ .listing-author-avatar { width: 6.75em; height: 6.75em; position: absolute; top: 0; left: 0; } /* line 125, app/assets/stylesheets/views/_listings.scss */ .listing-author-avatar > a { display: block; width: 100%; height: 100%; } /* line 132, app/assets/stylesheets/views/_listings.scss */ .listing-author-avatar-image { border-radius: 3px; display: block; width: 100%; height: 100%; } /* line 140, app/assets/stylesheets/views/_listings.scss */ .listing-author-details { width: 100%; padding-left: 6.75em; min-height: 6.75em; padding-left: 7.875em; margin-top: 0.375em; margin-bottom: 1.125em; } /* line 153, app/assets/stylesheets/views/_listings.scss */ .listing-author-name { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; height: 2.4545454545em; line-height: 3em; } /* line 159, app/assets/stylesheets/views/_listings.scss */ .listing-author-name-link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 164, app/assets/stylesheets/views/_listings.scss */ .listing-author-contact-button { border-radius: 0; background: #e8e8e8; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; color: #474747; width: 100%; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-author-contact-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-author-contact-button:hover { background: #dbdbdb; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-author-contact-button:active { background: #cfcfcf; color: white; } /* line 145, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-author-contact-button:hover { color: #474747; } /* line 148, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-author-contact-button:active { color: #474747; } /* line 171, app/assets/stylesheets/views/_listings.scss */ .listing-author-activity { overflow: auto; } /* line 176, app/assets/stylesheets/views/_listings.scss */ .listing-author-activity-icon { font-size: 32px; line-height: 1.5em; display: block; float: left; width: 1em; } /* line 184, app/assets/stylesheets/views/_listings.scss */ .listing-author-activity-item { float: left; width: 15.25em; margin-left: 1rem; } /* line 190, app/assets/stylesheets/views/_listings.scss */ .listing-author-activity-description { font-size: 0.8125em; line-height: 1.3846153846em; color: #d7d7d7; } /* line 195, app/assets/stylesheets/views/_listings.scss */ .listing-view-admin-links { margin: 0.75em 0; } /* line 201, app/assets/stylesheets/views/_listings.scss */ .delivery-label { display: inline; width: auto; margin-left: 0.3em; } /* line 207, app/assets/stylesheets/views/_listings.scss */ .book-button, .disabled-book-button, .enabled-book-button { margin-top: 0; width: 100%; text-align: center; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } /* line 218, app/assets/stylesheets/views/_listings.scss */ .enabled-book-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; font-size: 22px; height: 60px; line-height: 24px; padding-bottom: 3px; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .enabled-book-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .enabled-book-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .enabled-book-button:active { background: #2275d7; color: white; } /* line 223, app/assets/stylesheets/views/_listings.scss */ .disabled-book-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; font-size: 22px; height: 60px; line-height: 24px; padding-bottom: 3px; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .disabled-book-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .disabled-book-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .disabled-book-button:active { background: #2275d7; color: white; } /* line 227, app/assets/stylesheets/views/_listings.scss */ .disabled-book-button, .disabled-book-button:hover { background-color: #d7d7d7; } /* line 234, app/assets/stylesheets/views/_listings.scss */ .book-button .content, .enabled-book-button .content, .disabled-book-button .content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin: auto; } /* line 246, app/assets/stylesheets/views/_listings.scss */ .checkbox-option.not-selected { color: #d7d7d7; } /* line 251, app/assets/stylesheets/views/_listings.scss */ .checkbox-option-checkmark { display: inline-block; width: 20px; color: #4a90e2; } /* line 257, app/assets/stylesheets/views/_listings.scss */ .listings-how-paypal-works-link { font-size: 0.875em; } @media (max-width: 480px) { /* line 262, app/assets/stylesheets/views/_listings.scss */ .checkbox-group .col-4 { margin-bottom: 0; } } /* line 269, app/assets/stylesheets/views/_listings.scss */ .googlemap .embed-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } /* line 275, app/assets/stylesheets/views/_listings.scss */ .googlemap img.static-map { width: 100%; } /* line 279, app/assets/stylesheets/views/_listings.scss */ .googlemap .embed-container iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } /* line 287, app/assets/stylesheets/views/_listings.scss */ .buyer-fees { font-size: 15px; color: gray; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } @media (min-width: 30em) { /* line 7, app/assets/stylesheets/views/_message.scss */ .message-avatar-padding { margin-left: 3.75em; margin-right: 3.75em; } } /* line 13, app/assets/stylesheets/views/_message.scss */ .page-content .message-price-break-down { margin-bottom: 0; } /* line 16, app/assets/stylesheets/views/_message.scss */ .message-sum, .message-price { font-size: 1.375em; line-height: 1.0909090909em; font-weight: 600; padding-top: 0.75em; } /* line 23, app/assets/stylesheets/views/_message.scss */ .message-reply-form form { padding-bottom: 1.5em; } /* line 28, app/assets/stylesheets/views/_message.scss */ .conversation_notice { margin-bottom: 0.75em; } /* line 32, app/assets/stylesheets/views/_message.scss */ .conversation_notice--error { color: #c81f1f; } /* line 36, app/assets/stylesheets/views/_message.scss */ .message-avatar, .message-avatar-right, .message-avatar-left { width: 3em; height: 3em; } /* line 41, app/assets/stylesheets/views/_message.scss */ .message-container { position: relative; } /* line 45, app/assets/stylesheets/views/_message.scss */ .message-avatar-image { border-radius: 3px; width: 100%; } /* line 51, app/assets/stylesheets/views/_message.scss */ .message-avatar, .message-avatar-right, .message-avatar-left { position: absolute; top: 1.875em; } /* line 56, app/assets/stylesheets/views/_message.scss */ .message-avatar-left { left: 0; } /* line 61, app/assets/stylesheets/views/_message.scss */ .message-avatar-right { right: 0; } /* line 66, app/assets/stylesheets/views/_message.scss */ .message-content-container-left { padding-left: 3.75em; } @media (min-width: 30em) { /* line 66, app/assets/stylesheets/views/_message.scss */ .message-content-container-left { padding-right: 3.75em; } } /* line 73, app/assets/stylesheets/views/_message.scss */ .message-content-container-right { padding-right: 3.75em; } @media (min-width: 30em) { /* line 73, app/assets/stylesheets/views/_message.scss */ .message-content-container-right { padding-left: 3.75em; } } /* line 80, app/assets/stylesheets/views/_message.scss */ .message-bubble, .message-bubble-arrow-to-right, .message-bubble-arrow-to-left { position: relative; min-height: 3em; border-radius: 3px; padding: 0.75em 0.75em 0em 0.75em; background: #e8e8e8; } /* line 89, app/assets/stylesheets/views/_message.scss */ .message-bubble p, .message-bubble-arrow-to-right p, .message-bubble-arrow-to-left p { margin-bottom: 0; padding-bottom: 0.75em; } /* line 94, app/assets/stylesheets/views/_message.scss */ .message-bubble:after, .message-bubble-arrow-to-right:after, .message-bubble-arrow-to-left:after { top: 1.5em; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 0.375em; } /* line 106, app/assets/stylesheets/views/_message.scss */ .message-bubble .truncated-link, .message-bubble-arrow-to-right .truncated-link, .message-bubble-arrow-to-left .truncated-link { width: 100%; } /* line 113, app/assets/stylesheets/views/_message.scss */ .message-bubble a, .message-bubble-arrow-to-right a, .message-bubble-arrow-to-left a { text-decoration: underline; word-break: break-all; } /* line 117, app/assets/stylesheets/views/_message.scss */ .message-bubble a:hover, .message-bubble-arrow-to-right a:hover, .message-bubble-arrow-to-left a:hover { text-decoration: none; } /* line 122, app/assets/stylesheets/views/_message.scss */ .message-time-ago, .message-time-ago-right, .message-time-ago-left { margin-bottom: 0.375em; height: 1.5em; } /* line 127, app/assets/stylesheets/views/_message.scss */ .message-time-ago-left { text-align: left; } /* line 132, app/assets/stylesheets/views/_message.scss */ .message-time-ago-right { text-align: right; } /* line 141, app/assets/stylesheets/views/_message.scss */ .message-type-transition { font-weight: bold; } /* line 148, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-left:after { right: 100%; border-right-color: #e8e8e8; margin-top: -0.375em; } /* line 154, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-left.message-mood-positive { color: #5a7d13; background: #c2e972; } /* line 158, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-left.message-mood-positive:after { border-right-color: #c2e972; } /* line 163, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-left.message-mood-negative { color: #a91a1a; background: #f09f9f; } /* line 167, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-left.message-mood-negative:after { border-right-color: #f09f9f; } /* line 176, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-right:after { left: 100%; border-left-color: #e8e8e8; margin-top: -0.375em; } /* line 182, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-right.message-mood-positive { color: #5a7d13; background: #c2e972; } /* line 186, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-right.message-mood-positive:after { border-left-color: #c2e972; } /* line 191, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-right.message-mood-negative { color: #a91a1a; background: #f09f9f; } /* line 195, app/assets/stylesheets/views/_message.scss */ .message-bubble-arrow-to-right.message-mood-negative:after { border-left-color: #f09f9f; } /* line 201, app/assets/stylesheets/views/_message.scss */ .message-mood-positive { color: #5a7d13; background: #c2e972; } /* line 206, app/assets/stylesheets/views/_message.scss */ .message-mood-negative { color: #a91a1a; background: #f09f9f; } /* line 211, app/assets/stylesheets/views/_message.scss */ .message-book-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .message-book-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .message-book-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .message-book-button:active { background: #2275d7; color: white; } /* line 215, app/assets/stylesheets/views/_message.scss */ .message-price-vat { font-size: 0.8125em; line-height: 1.3846153846em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 7, app/assets/stylesheets/views/_people.scss */ .people-image { display: none; } /* line 9, app/assets/stylesheets/views/_people.scss */ .people-image > img { border-radius: 3px; } @media (min-width: 48em) { /* line 7, app/assets/stylesheets/views/_people.scss */ .people-image { display: block; } } /* line 21, app/assets/stylesheets/views/_people.scss */ .people-header { padding-bottom: 0.375em; border-bottom: 1px solid #d7d7d7; } /* line 26, app/assets/stylesheets/views/_people.scss */ .people-load-more-listings-container { clear: both; margin-bottom: 1.5em; } /* line 31, app/assets/stylesheets/views/_people.scss */ .people-show-closed-link { font-size: 13px; margin-left: 0.75em; } /* line 36, app/assets/stylesheets/views/_people.scss */ .profile-action-buttons-desktop { display: none; } @media (min-width: 48em) { /* line 36, app/assets/stylesheets/views/_people.scss */ .profile-action-buttons-desktop { display: block; } } /* line 44, app/assets/stylesheets/views/_people.scss */ .profile-action-buttons-mobile { padding-left: 5.25em; padding-bottom: 1.125em; margin-top: 0.975em; margin-bottom: 0.75em; border-bottom: 1px solid #d7d7d7; } @media (min-width: 48em) { /* line 44, app/assets/stylesheets/views/_people.scss */ .profile-action-buttons-mobile { display: none; } } /* line 56, app/assets/stylesheets/views/_people.scss */ .profile-edit-link, .profile-contact-link { border-radius: 0; background: #e8e8e8; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; color: #474747; width: 100%; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .profile-edit-link .content, .profile-contact-link .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .profile-edit-link:hover, .profile-contact-link:hover { background: #dbdbdb; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .profile-edit-link:active, .profile-contact-link:active { background: #cfcfcf; color: white; } /* line 145, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .profile-edit-link:hover, .profile-contact-link:hover { color: #474747; } /* line 148, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .profile-edit-link:active, .profile-contact-link:active { color: #474747; } /* line 62, app/assets/stylesheets/views/_people.scss */ .people-image-mobile { width: 4.5em; position: absolute; top: 0; left: 0; } /* line 68, app/assets/stylesheets/views/_people.scss */ .people-image-mobile > img { border-radius: 3px; width: 100%; } @media (min-width: 48em) { /* line 62, app/assets/stylesheets/views/_people.scss */ .people-image-mobile { display: none; } } /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid { overflow: auto; margin-right: -0.75em; } @media (min-width: 48em) { /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid { margin-right: -1.5em; } } /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { float: left; padding-right: 0.75em; margin-bottom: 0.75em; } @media (max-width: 23.375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 100%; } } @media (min-width: 23.4375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 50%; } } @media (min-width: 30em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 50%; } } @media (min-width: 37.5em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 53.75em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 60em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 63em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { width: 25%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-container .people-fluid-thumbnail-grid-item { padding-right: 1.5em; margin-bottom: 1.5em; } } /* line 84, app/assets/stylesheets/views/_people.scss */ .people-listings.fluid-thumbnail-grid-image-overlay, .people-listings.fluid-thumbnail-grid-image-image { border-radius: 3px; } /* line 92, app/assets/stylesheets/views/_people.scss */ #profile-followed-people-list .fluid-thumbnail-grid-image-image-container { padding-bottom: 100%; } /* line 97, app/assets/stylesheets/views/_people.scss */ .people-custom-fields-title { font-weight: bold; margin-right: 5px; } /* line 103, app/assets/stylesheets/views/_people.scss */ .profile-about-me ol { padding-left: 1.5em; } /* line 108, app/assets/stylesheets/views/_people.scss */ .profile-follower-stats { text-align: center; margin: 1.5rem 0 0 0; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } @media (min-width: 48em) { /* line 108, app/assets/stylesheets/views/_people.scss */ .profile-follower-stats { margin: 2.25rem 0 1.5rem; } } /* line 117, app/assets/stylesheets/views/_people.scss */ .profile-follower-stats .followers, .profile-follower-stats .following { display: inline-block; padding: 0 0.75rem; } /* line 123, app/assets/stylesheets/views/_people.scss */ .profile-follower-stats .value { font-size: 1.5rem; margin-bottom: 0.25rem; } /* line 128, app/assets/stylesheets/views/_people.scss */ .profile-follower-stats .title { color: #949494; font-size: 0.9375rem; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/_preauthorize.scss */ .preauthorize-exp { display: inline; margin-right: 0.75em; } /* line 8, app/assets/stylesheets/views/_preauthorize.scss */ .preauthorize-details-title { margin-bottom: 0.375em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/_signup.scss */ .signup-horizontal-line { margin: 1.875em 0; text-align: center; position: relative; font-variant: italic; } /* line 9, app/assets/stylesheets/views/_signup.scss */ .signup-horizontal-line:before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: solid 1px #d7d7d7; } /* line 19, app/assets/stylesheets/views/_signup.scss */ .signup-horizontal-line-text { padding-left: 0.375em; padding-right: 0.375em; display: inline; text-align: center; background-color: white; font-size: 2.125em; line-height: 1.0588235294em; font-weight: 600; color: #474747; position: relative; } /* line 32, app/assets/stylesheets/views/_signup.scss */ .signup-form .inline-label-container small, #pending_consent_form .inline-label-container small { display: inline; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 9, app/assets/stylesheets/views/_testimonial.scss */ .testimonial { position: relative; overflow: auto; min-height: 3em; border-bottom: 1px solid white; } /* line 17, app/assets/stylesheets/views/_testimonial.scss */ .testimonial:last-child { border-bottom: 1px solid white; } /* line 22, app/assets/stylesheets/views/_testimonial.scss */ .testimonial-avatar { position: absolute; left: 0; top: 0; float: left; width: 3em; height: 3em; } /* line 32, app/assets/stylesheets/views/_testimonial.scss */ .testimonial-avatar > a, .testimonial-avatar > a > img { display: block; width: 100%; height: 100%; } /* line 40, app/assets/stylesheets/views/_testimonial.scss */ .testimonial-details { padding-left: 3.75em; padding-right: 3.25em; padding-bottom: 0.75em; border-bottom: 1px solid #d7d7d7; margin-bottom: 0.75em; } /* line 48, app/assets/stylesheets/views/_testimonial.scss */ .testimonial-icon { position: absolute; right: 0; top: 0; width: 1.5384615385em; font-size: 1.625em; line-height: 1.3846153846em; font-weight: 600; } /* line 56, app/assets/stylesheets/views/_testimonial.scss */ .testimonial-icon.positive { color: #5a7d13; } /* line 60, app/assets/stylesheets/views/_testimonial.scss */ .testimonial-icon.negative { color: #a91a1a; } /* line 64, app/assets/stylesheets/views/_testimonial.scss */ .testimonial-icon.faded { color: #d9d9d9; } /* line 69, app/assets/stylesheets/views/_testimonial.scss */ .load-more-testimonials { margin-top: 1.5em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/_thumbnail-stripe.scss */ .listing-image-thumbnail-stripe { width: 100%; overflow: hidden; height: 64px; margin-top: 2px; position: relative; } /* line 11, app/assets/stylesheets/views/_thumbnail-stripe.scss */ .listing-image-thumbnail-container { position: relative; float: left; } /* line 15, app/assets/stylesheets/views/_thumbnail-stripe.scss */ .listing-image-thumbnail-container:hover > .fade, .listing-image-thumbnail-container.selected > .fade { display: none; } /* line 20, app/assets/stylesheets/views/_thumbnail-stripe.scss */ .listing-image-thumbnail-container > .fade { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.6); } /* line 29, app/assets/stylesheets/views/_thumbnail-stripe.scss */ .listing-image-thumbnail { width: 64px; height: 64px; padding: 2px; border-radius: 3px; cursor: pointer; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/views/admin/_categories.scss */ .subcategory-label { margin-left: 1.5em; } /* line 8, app/assets/stylesheets/views/admin/_categories.scss */ .top-level-category-divider-wrapper { padding-top: 0.375em; padding-bottom: 0.375em; } /* line 12, app/assets/stylesheets/views/admin/_categories.scss */ .top-level-category-divider { background-color: #e8e8e8; height: 1px; } /* line 17, app/assets/stylesheets/views/admin/_categories.scss */ .listed-category-col { margin-bottom: 0; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/admin/_communities.scss */ .edit-community-details-edit-link { margin-bottom: 0.75em; } /* line 7, app/assets/stylesheets/views/admin/_communities.scss */ .edit-community-details-field { margin-bottom: 1.5em; } /* line 11, app/assets/stylesheets/views/admin/_communities.scss */ .edit-community-details-field-title { font-weight: bold; } /* line 15, app/assets/stylesheets/views/admin/_communities.scss */ .checkbox-container .settings-checkbox-label { font-weight: 500; } /* line 19, app/assets/stylesheets/views/admin/_communities.scss */ .sort-text-wrapper { margin-right: 1.5em; } /* line 22, app/assets/stylesheets/views/admin/_communities.scss */ .sort-text { float: left; } /* line 25, app/assets/stylesheets/views/admin/_communities.scss */ .sort-arrow, .sort-arrow-desc, .sort-arrow-asc { float: left; font-size: 0.75em; display: inline-block; padding-left: 0.4em; } /* line 40, app/assets/stylesheets/views/admin/_communities.scss */ textarea.text_area_code { font-size: 15px; font-family: "Lucida Console", Monaco, monospace; height: 10.5em; } /* line 46, app/assets/stylesheets/views/admin/_communities.scss */ .checkbox-row-checkbox { display: inline-block; width: auto; } /* line 51, app/assets/stylesheets/views/admin/_communities.scss */ .checkbox-row-label { display: inline-block; width: auto; font-weight: normal; margin: 0 0 0 0.375em; } /* line 58, app/assets/stylesheets/views/admin/_communities.scss */ .checkbox-centered { text-align: center; } /* line 61, app/assets/stylesheets/views/admin/_communities.scss */ .centered-column-title { font-weight: bold; text-align: center; width: 100%; display: inline-block; } /* line 68, app/assets/stylesheets/views/admin/_communities.scss */ .transaction-agreement-modal.disabled:not(.label) { background-color: #e8e8e8; } /* line 73, app/assets/stylesheets/views/admin/_communities.scss */ .member-banned a, .member-banned .admin-members-can-post-listings, .member-banned .admin-members-is-admin { opacity: 0.5; } /* line 76, app/assets/stylesheets/views/admin/_communities.scss */ .member-banned span { opacity: 0.5; } /* line 78, app/assets/stylesheets/views/admin/_communities.scss */ .member-banned span.delete-member { opacity: 1; } /* line 80, app/assets/stylesheets/views/admin/_communities.scss */ .member-banned span.delete-member a { opacity: 1; } /* line 87, app/assets/stylesheets/views/admin/_communities.scss */ .button.search-button { margin: 0px; display: inline; margin-right: 2px; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 6, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-fields-list-title, .custom-fields-mobile-list-title { font-weight: bold; } /* line 11, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-fields-details { font-size: 0.8125em; line-height: 1.3846153846em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 16, app/assets/stylesheets/views/admin/_custom_fields.scss */ .new-field-name-locale-label, .new-category-name-locale-label { font-weight: 500; margin: 0; line-height: 2.25em; } /* line 22, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-categories-checkbox-container, .category-listing-shapes-checkbox-container { float: left; min-width: 14.25em; } /* line 27, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-category-checkbox, .category-listing-shape-checkbox { display: inline-block; width: auto; } /* line 32, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-category-checkbox-label, .category-listing-shape-checkbox-label { display: inline-block; width: auto; font-weight: normal; margin: 0 0 0 0.375em; } /* line 39, app/assets/stylesheets/views/admin/_custom_fields.scss */ .add-custom-field-buttons, .add-category-buttons { width: 100%; } /* line 43, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-actions { text-align: right; line-height: 2.25em; } /* line 48, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-option-locales { padding: 0.75em 0.75em 0 0.75em; } /* line 52, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-option-locale-column { margin-bottom: 0.1875em; } /* line 56, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-column-without-bottom-margin { margin-bottom: 0; } /* line 60, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-option-with-multiple-locales-label { margin: 5px 0 0 0; } @media (min-width: 48em) { /* line 64, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-option-locale-row input[type=text] { margin: 0; padding: 0 0.375em; min-height: 2.25em; } } /* line 72, app/assets/stylesheets/views/admin/_custom_fields.scss */ .category-ajax-status-message, .listing-shape-ajax-status-message, .custom-field-ajax-status-message { display: none; } /* line 78, app/assets/stylesheets/views/admin/_custom_fields.scss */ .custom-field-option-container:nth-of-type(odd) { background: #e8e8e8; } /* line 82, app/assets/stylesheets/views/admin/_custom_fields.scss */ .new-custom-field-type-form { margin-top: 1.5em; } /* line 86, app/assets/stylesheets/views/admin/_custom_fields.scss */ .new-listing-shape-template-form-column, .new-custom-field-type-form-column { margin-right: 0.75em; display: inline-block; } /* line 1, app/assets/stylesheets/views/admin/_domains.scss */ .marketplace-address-is { font-weight: bold; } /* line 4, app/assets/stylesheets/views/admin/_domains.scss */ #domain-proceed-form { padding-top: 30px; text-align: center; } /* line 8, app/assets/stylesheets/views/admin/_domains.scss */ .app-config-domain { line-height: 42px; } /* line 11, app/assets/stylesheets/views/admin/_domains.scss */ .domain_being_checked, .domain_being_set_up { background-color: #e8e8e8; padding: 20px; margin-top: 10px; } /* line 15, app/assets/stylesheets/views/admin/_domains.scss */ .domain_being_checked .domain_name, .domain_being_set_up .domain_name { font-weight: bold; } /* line 19, app/assets/stylesheets/views/admin/_domains.scss */ .domain_checks_pending, .domain_setup_pending { color: #808080; font-weight: bold; } /* line 23, app/assets/stylesheets/views/admin/_domains.scss */ .domain_checks_failed, .domain_setup_failed { color: red; font-weight: bold; } /* line 27, app/assets/stylesheets/views/admin/_domains.scss */ .domain_checks_passed { color: #5b7d12; font-weight: bold; } /* line 31, app/assets/stylesheets/views/admin/_domains.scss */ .domain_checks_passed_with_warning { color: #e8bc1e; font-weight: bold; } /* line 35, app/assets/stylesheets/views/admin/_domains.scss */ .summary_domain_passed { background-color: #e8e8e8; padding: 20px; margin-top: 10px; } /* line 39, app/assets/stylesheets/views/admin/_domains.scss */ .summary_domain_passed .title { font-weight: bold; } /* line 42, app/assets/stylesheets/views/admin/_domains.scss */ .summary_domain_passed .checks_passed { text-align: right; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/admin/_emails.scss */ .sender-address-preview-container { margin-top: 1.125em; margin-bottom: 1.5em; } /* line 8, app/assets/stylesheets/views/admin/_emails.scss */ .sender-address-preview { background-color: #e8e8e8; padding: 10px 20px; } /* line 13, app/assets/stylesheets/views/admin/_emails.scss */ .sender-address-label { margin-top: 0; } /* line 17, app/assets/stylesheets/views/admin/_emails.scss */ .sender-address-status-loading-spinner { height: 20px; vertical-align: text-bottom; margin-left: 0.375em; } /* line 23, app/assets/stylesheets/views/admin/_emails.scss */ .welcome-email-editor-background { background-color: #e8e8e8; padding: 20px; } /* line 28, app/assets/stylesheets/views/admin/_emails.scss */ .sender-address-verification-from { font-weight: bold; } /* line 32, app/assets/stylesheets/views/admin/_emails.scss */ .status-verified { font-weight: bold; color: #5a7d13; } /* line 37, app/assets/stylesheets/views/admin/_emails.scss */ .status-requested { font-weight: bold; color: #FF0000; } /* line 42, app/assets/stylesheets/views/admin/_emails.scss */ .status-error { font-weight: bold; } /* line 46, app/assets/stylesheets/views/admin/_emails.scss */ .status-resent { font-weight: bold; } /* line 52, app/assets/stylesheets/views/admin/_emails.scss */ input.sender-address-disabled, input.sender-address-disabled:hover { background-color: #e8e8e8; } /* line 60, app/assets/stylesheets/views/admin/_emails.scss */ button.sender-address-disabled, button.sender-address-disabled:hover { background-color: #d7d7d7; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/admin/_footer-menu.scss */ .footer-menu-container-padding, .footer-menu-container { padding: 0.75em; padding-bottom: 0; } /* line 11, app/assets/stylesheets/views/admin/_footer-menu.scss */ .footer-menu-container:nth-of-type(odd) { background: #e8e8e8; } /* line 18, app/assets/stylesheets/views/admin/_footer-menu.scss */ #footer-menu-form .footer-theme-radio-buttons input[type="radio"] { margin-left: 0.75em; } /* line 21, app/assets/stylesheets/views/admin/_footer-menu.scss */ #footer-menu-form .footer-theme-radio-buttons label { display: inline-block; width: auto; font-weight: normal; margin: 0 0 0 0.5em; } /* line 28, app/assets/stylesheets/views/admin/_footer-menu.scss */ #footer-menu-form input[disabled] { background-color: #e8e8e8; } /* line 31, app/assets/stylesheets/views/admin/_footer-menu.scss */ #footer-menu-form button[disabled] { background-color: #c3c3c3; } /* line 37, app/assets/stylesheets/views/admin/_footer-menu.scss */ .footer-social-container .provider { font-weight: bold; margin-left: 10px; } /* line 2, app/assets/stylesheets/views/admin/_landing_pages.scss */ .edit_section h3 { font-size: 1.1em; } /* line 6, app/assets/stylesheets/views/admin/_landing_pages.scss */ .row.clp-section-content { margin-bottom: 0; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-label-disabled, .listing-shape-label-disabled > a, .listing-shape-label-disabled > a:hover { color: #d7d7d7; } /* line 10, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-label-disabled > a { cursor: default; } /* line 13, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-label-disabled > a:hover { cursor: default; } /* line 19, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-delete-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; margin: 0; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-shape-delete-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-shape-delete-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .listing-shape-delete-button:active { background: #2275d7; color: white; } /* line 24, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-delete-link { display: inline-block; margin: 0.75em 0; line-height: 2.25em; } /* line 32, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-delete-link-container { float: right; } /* line 36, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-locale-label { font-weight: normal; } /* line 40, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-custom-unit-per { margin-top: 0.625em; padding-right: 0; color: #b1b1b1; } /* line 46, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-add-custom-unit-link { cursor: pointer; } /* line 50, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-radio-label { display: inline; margin-left: 0.375em; font-weight: normal; } /* line 56, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-add-custom-unit-form { position: relative; background-color: #fdfdfd; margin-bottom: 0.75em; padding: 0.375em 1.125em 0.75em; } /* line 63, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-close-custom-unit-form { position: absolute; right: 1.125em; top: 1.125em; cursor: pointer; } /* line 70, app/assets/stylesheets/views/admin/_listing_shapes.scss */ .listing-shape-remove-custom-unit { cursor: pointer; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } @media (min-width: 63em) { /* line 3, app/assets/stylesheets/views/admin/_listings.scss */ #listing_popup { min-width: 600px; } } /* line 9, app/assets/stylesheets/views/admin/_listings.scss */ #listing-form .listing-save { text-align: center; } /* line 11, app/assets/stylesheets/views/admin/_listings.scss */ #listing-form .listing-save .button { display: initial; margin-left: 6px; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } @media (min-width: 63em) { /* line 3, app/assets/stylesheets/views/admin/_memberships.scss */ #membership-popup, #membership-delete { min-width: 600px; } } /* line 10, app/assets/stylesheets/views/admin/_memberships.scss */ .membership-popup-content .membership--pending-popup { margin-top: 10px; } /* line 13, app/assets/stylesheets/views/admin/_memberships.scss */ .membership-popup-content .membership--pending-buttons { text-align: center; margin-top: 30px; } /* line 16, app/assets/stylesheets/views/admin/_memberships.scss */ .membership-popup-content .membership--pending-buttons .button { display: initial; } /* line 19, app/assets/stylesheets/views/admin/_memberships.scss */ .membership-popup-content .membership--pending-buttons .cancel-button { display: initial; padding-top: 0.5625em; padding-bottom: 0.5625em; } /* line 25, app/assets/stylesheets/views/admin/_memberships.scss */ .membership-popup-content.delete-content { padding-top: 20px; } /* line 30, app/assets/stylesheets/views/admin/_memberships.scss */ .post-listing-is-disabled { cursor: not-allowed; opacity: 0.5; } /* line 33, app/assets/stylesheets/views/admin/_memberships.scss */ .post-listing-is-disabled a { color: currentColor; display: inline-block; /* For IE11/ MS Edge bug */ pointer-events: none; text-decoration: none; } /* line 41, app/assets/stylesheets/views/admin/_memberships.scss */ td.membership-actions { min-width: 90px; } /* line 43, app/assets/stylesheets/views/admin/_memberships.scss */ td.membership-actions span { margin-right: 5px; } /* line 45, app/assets/stylesheets/views/admin/_memberships.scss */ td.membership-actions span:last-child { margin-right: 0; } /* line 1, app/assets/stylesheets/views/admin/_onboarding-popup.scss */ #onboarding-popup { max-width: 500px; width: 90%; text-align: center; } /* line 7, app/assets/stylesheets/views/admin/_onboarding-popup.scss */ .onboarding-popup__image { margin-top: 2em; width: 50%; height: 50%; } /* line 13, app/assets/stylesheets/views/admin/_onboarding-popup.scss */ .onboarding-popup__title { font-size: 22px; font-weight: 600; color: #171717; line-height: 30px; margin-top: 1em; } /* line 21, app/assets/stylesheets/views/admin/_onboarding-popup.scss */ .onboarding-popup__body { font-size: 16px; color: #3c3c3c; line-height: 24px; width: 90%; margin: 1em auto; } /* line 29, app/assets/stylesheets/views/admin/_onboarding-popup.scss */ .onboarding-popup__action { display: inline-block; font-size: 16px; font-weight: 600; background-color: #59b3a2; padding: 10px 30px; color: white; border-radius: 5px; margin-top: 1em; } /* line 39, app/assets/stylesheets/views/admin/_onboarding-popup.scss */ .onboarding-popup__action:hover { background-color: #4d998b; color: white; } /* line 45, app/assets/stylesheets/views/admin/_onboarding-popup.scss */ .onboarding-popup__skip { display: block; font-size: 13px; color: #808080; line-height: 21px; margin: 1em 0; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .color-red { color: #a91a1a; } /* line 6, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .color-green { color: #5a7d13; } /* line 9, app/assets/stylesheets/views/admin/_payment_preferences.scss */ td.center { text-align: center; } /* line 12, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .tab-link { display: inline-block; padding: 8px 20px; margin-bottom: 0px; background: #c3c3c3; border-top: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3; border-top-right-radius: 5px; border-left: 1px solid #c3c3c3; border-top-left-radius: 5px; border-bottom: 1px solid #c3c3c3; margin-left: 2px; } /* line 25, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .tab-link:first-child { margin-left: 20px; } /* line 29, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .tab-link.active { border-bottom: 1px solid white; background: white; } /* line 33, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .tab-content { border: 1px solid #c3c3c3; border-radius: 5px; margin: 0px; margin-top: -1px; margin-bottom: 20px; margin-right: 0.75em; } /* line 41, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .connect-row { margin-top: 0.75em; } /* line 44, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .no-border { border: none; } /* line 47, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .no-float { float: none; } /* line 50, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .paypal-wizard-content.connect-row { padding-top: 0; } /* line 53, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .has-stripe .paypal-wizard.no-border { margin-top: 0px; } /* line 56, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .has-stripe .paypal-wizard-content { padding: 14px; } /* line 59, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .has-stripe .paypal-wizard-content.no-padding { padding: 0; } /* line 62, app/assets/stylesheets/views/admin/_payment_preferences.scss */ .payment-settings input[disabled] { background-color: #dadada; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/admin/_paypal_preferences.scss */ .paypal-horizontal-input-label, .paypal-horizontal-input-label-unit { font-weight: normal; display: inline; } @media (min-width: 48em) { /* line 3, app/assets/stylesheets/views/admin/_paypal_preferences.scss */ .paypal-horizontal-input-label, .paypal-horizontal-input-label-unit { margin-top: 0; margin-bottom: 0; height: 42px; line-height: 42px; } } /* line 14, app/assets/stylesheets/views/admin/_paypal_preferences.scss */ .paypal-horizontal-input-label-unit { margin-left: 1em; } /* line 19, app/assets/stylesheets/views/admin/_paypal_preferences.scss */ .paypal-preferences { margin-top: 1.5em; margin-bottom: 2.25em; } /* line 24, app/assets/stylesheets/views/admin/_paypal_preferences.scss */ .paypal-preferences-input { max-width: 5em; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 4, app/assets/stylesheets/views/admin/_testimonials.scss */ #admin_testimonials tbody tr:nth-child(2n) { border-bottom: 3px solid white; } /* line 8, app/assets/stylesheets/views/admin/_testimonials.scss */ #admin_testimonials td.testimonial-title { border-bottom: 3px solid white; } /* line 11, app/assets/stylesheets/views/admin/_testimonials.scss */ #admin_testimonials td .testimonial-cell { margin: auto; } /* line 13, app/assets/stylesheets/views/admin/_testimonials.scss */ #admin_testimonials td .testimonial-cell .testimonial-icon { position: relative; font-size: 1.2em; line-height: 1.2em; } @media (min-width: 63em) { /* line 21, app/assets/stylesheets/views/admin/_testimonials.scss */ #testimonial_popup { min-width: 600px; } } /* line 27, app/assets/stylesheets/views/admin/_testimonials.scss */ #testimonial-form .testimonial-cell { margin: auto; } /* line 29, app/assets/stylesheets/views/admin/_testimonials.scss */ #testimonial-form .testimonial-cell .testimonial-icon { position: relative; font-size: 3em; line-height: 2em; text-align: center; width: auto; cursor: pointer; padding-top: 0.5em; } /* line 39, app/assets/stylesheets/views/admin/_testimonials.scss */ #testimonial-form .testimonial-save { text-align: center; } /* line 41, app/assets/stylesheets/views/admin/_testimonials.scss */ #testimonial-form .testimonial-save .button { display: initial; } /* line 46, app/assets/stylesheets/views/admin/_testimonials.scss */ #testimonial-form .testimonial-checkbox input { margin-right: 10px; } /* line 49, app/assets/stylesheets/views/admin/_testimonials.scss */ #testimonial-form .testimonial-checkbox span { margin-left: 10px; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/admin/_topbar-menu.scss */ .topbar-menu-container-padding, .topbar-menu-container { padding: 0.75em; padding-bottom: 0; } /* line 11, app/assets/stylesheets/views/admin/_topbar-menu.scss */ .topbar-menu-container:nth-of-type(odd) { background: #e8e8e8; } /* line 16, app/assets/stylesheets/views/admin/_topbar-menu.scss */ .menu-links-actions { text-align: right; } @charset "UTF-8"; /* This file contains all the basic imported mixin/variable files */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } /* line 3, app/assets/stylesheets/views/admin/_transactions.scss */ .admin-transaction-part { margin-left: 20px; } /* line 7, app/assets/stylesheets/views/admin/_transactions.scss */ .initiate-transaction-total-wrapper.admin-transaction { margin-top: 20px; } @charset "UTF-8"; /* ----------------------------------------- Color presets ----------------------------------------- A good way to select hues: 1. Pick one hue (0–360) 2. Add it to, or substract it from one of the following: - 360/1.618 (split-complementary color) - 360/2 (complementary color) - 360/3 (triadic color) - 360/4 (quad…tric color) - 360/5 (pentatonic color) ----------------------------------------- Values derived using the golden ratio: 100% / 1.618^1 = ~61.8% 100% / 1.618^2 = ~38.2% 100% / 1.618^3 = ~23.6% 100% / 1.618^3 = ~14.6% 100% / 1.618^3 = ~9.0% 100% / 1.618^3 = ~5.6% 100% - (100% / 1.618^6) = ~94.4% 100% - (100% / 1.618^5) = ~91.0% 100% - (100% / 1.618^6) = ~85.4% 100% - (100% / 1.618^6) = ~76.4% Try using these values as the saturations and lightnesses of colours you use. The results are usually pleasing. ----------------------------------------- */ /* -------------------------- Media query mixin -------------------------- Usage: @include media(tablet) { .foo {color: red;} } or .foo { @include media(tablet) { color: red; } } -------------------------- */ /** http://css-tricks.com/snippets/css/retina-display-media-query/ */ /* -------------------------------------------- Em conversion functions pixels to ems & baselines to ems -------------------------------------------- Usage: - em(6, 26) converts 6px to ems assuming the font-size of the element is 26px. If the element's font-size is the same as the base font-size, you can omit the 2nd argument: em(6) - lines(0.5, 26) is a shorthand for em(($line-height/2), 26), so em(12, 26) in Sharetribe's case. -------------------------------------------- Examples: p { font-size: line-height: lines(1); margin-bottom: lines(0.5); } h1 { font-size: em(42); line-height: lines(2, 42); margin-bottom: lines(1, 42); } -------------------------------------------- */ /* -------------------------------------------------- Font-family mixins FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro LFT Etica: https://typekit.com/fonts/lft-etica-web -------------------------------------------------- */ /* ---------------------------------------------------------- Type presets mostly calculated using a modular scale based on the golden ratio: 1:1.618 http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0 ---------------------------------------------------------- */ /** Misc utils */ /** Use icon-fix to correctly vertical align SS-pika icons Deprecated: Use icon-fix-rel */ /** Icon fix relative to the font-size */ /** Some icons, e.g. dropdown icon needs to be a bit lower */ /** Round notification badge */ /** Include this mixin to make area without content clickable in IE. See more: http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie */ /* Grid column that is 1/4 of total width */ /** Undo the mobile margin set by .wrapper This is cubersome, because the .wrapper is in the main layout and not per page */ /* Bottom border style to be used with text titles (e.g. under front-page filter titles) */ /* Vertical centering using "ghost" element Use for: Centering blocks with unknown height/width http://css-tricks.com/centering-in-the-unknown/ */ /* Vertical centering using tables Use for: Center multiline text http://css-tricks.com/vertically-center-multi-lined-text/ */ /** Give `width` and `aspect-ratio` and get back height */ /** Listing top-right overlay price tag */ /** Use this mixin to get correct borders for button group when it is selected/hovered Classes added: - `selected` The logic and selectors for selected/hovered borders is a bit complicated, that's why they are in their own mixin */ /** Create a block element, which preserves given aspect ratio */ /** Just a helper */ /** Create a style for *too-wide* image, e.g. image that is wider for the aspect ratio - Takes all the *vertical* space available - Presenving the aspect ratio */ /** Create a style for *too-narrow* image, e.g. image that is too narrow for the aspect ratio - Takes all the *horizontal* space available - Presenving the aspect ratio */ @font-face { font-family: "SecondSkinHeadline"; src: url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/vanguard-cf-medium-d1931d779d93010daa0c82cb1262cc7cdf68258fa64ae01167a476e4c713b2ec.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBody"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-regular-17524d8ee4740b5bff99d897cfa6f25cdbb76db49b9e523c26e3aa3f824aa80a.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "SecondSkinBodyCondensed"; src: url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff2"), url(https://d85dbym32cnih.cloudfront.net/assets/suisse-intl-cond-regular-xl-4e69e75da93e6177ba97922278dfeb1fcf03d000f9f59c5c0133ffc32d115298.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "FontAwesome"; src: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin-a4ca11df16e3722d4219978f1a787fa8cc0f1913619a7a8f5d7cf79e90591919.eot?v=3.0.1); src: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin-a4ca11df16e3722d4219978f1a787fa8cc0f1913619a7a8f5d7cf79e90591919.eot?#iefix&v=3.0.1) format("embedded-opentype"), url(https://d85dbym32cnih.cloudfront.net/assets/secondskin-763cbe30f6d1c3aa8da20dd8559c29791c4d7180e080098dd3dd7ef85a8b8138.woff?v=3.0.1) format("woff"), url(https://d85dbym32cnih.cloudfront.net/assets/secondskin-197fcaf0d009940b8c249c4191e3dce4361da4cc564f0a492b5706299b1f020c.ttf?v=3.0.1) format("truetype"); font-weight: normal; font-style: normal; } /* line 12, app/assets/stylesheets/overrides/partials/_icons.scss */ [class^="ss-"], [class*=" ss-"] { font-family: "FontAwesome"; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } /* line 21, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-twitter:before { content: "\e904"; } /* line 25, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-instagram:before { content: "\e905"; } /* line 29, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-triarrow:before { content: "\e903"; } /* line 33, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-check:before { content: "\f046"; } /* line 37, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-delete:before { content: "\f014"; } /* line 41, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-skipforward:before { content: "\f04e"; } /* line 45, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-info:before { content: "\f05a"; } /* line 49, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-alert:before { content: "\f057"; } /* line 53, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-clockwise:before { content: "\f01e"; } /* line 57, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-clock:before { content: "\f017"; } /* line 61, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-chat:before { content: "\f040"; } /* line 65, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-mail:before { content: "\f003"; } /* line 69, app/assets/stylesheets/overrides/partials/_icons.scss */ .ss-lock:before { content: "\f023"; } /* line 73, app/assets/stylesheets/overrides/partials/_icons.scss */ .icon-cross:before { content: "\e902"; } /* line 77, app/assets/stylesheets/overrides/partials/_icons.scss */ .icon-add:before { content: "\e900"; } /* line 81, app/assets/stylesheets/overrides/partials/_icons.scss */ .icon-menu:before { content: "\e901"; } /* line 1, app/assets/stylesheets/overrides/partials/_forms.scss */ .home-toolbar-button-group-button:first-child { border-radius: 0; } /* line 5, app/assets/stylesheets/overrides/partials/_forms.scss */ .home-toolbar-button-group-button:last-child { border-radius: 0; } /* line 9, app/assets/stylesheets/overrides/partials/_forms.scss */ button, .button { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; text-transform: uppercase; background-color: #dbdcde; color: #000000; font-size: 1.125rem; border-radius: 0; line-height: normal; } /* line 19, app/assets/stylesheets/overrides/partials/_forms.scss */ button:hover, .button:hover { color: #000000; background-color: #cecfd2; } /* line 25, app/assets/stylesheets/overrides/partials/_forms.scss */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], textarea, select { border-radius: 3px; border: 1px solid #d7d7d7; color: #000000; } /* line 37, app/assets/stylesheets/overrides/partials/_forms.scss */ input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { outline-color: #949494; } /* line 47, app/assets/stylesheets/overrides/partials/_forms.scss */ select { padding: 0.5rem 0.6875rem 0.5rem 0.25rem; } /* line 51, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-select { position: relative; display: inline-block; } /* line 55, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-select select { -moz-appearance: none; -webkit-appearance: none; padding: 0.5rem 3.125rem 0.5rem 0.75rem; } /* line 61, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-select::after { position: absolute; right: 0.8125rem; top: 50%; transform: translateY(-50%); content: ""; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/arrow-down-black-240be3692f7c8a8d6ed72f360f01901913abf99baa99b10702424b7de3f2f330.svg); background-repeat: no-repeat; background-size: 0.6875rem 0.6875rem; background-position: 100% 50%; width: 0.6875rem; height: 0.6875rem; } /* line 76, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-radio { display: inline-block; position: relative; } /* line 80, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-radio input[type="radio"] { display: none; } /* line 83, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-radio input[type="radio"]:checked + label:after { border-radius: 11px; width: 12px; height: 12px; position: absolute; top: 14px; left: 4px; content: " "; display: block; background: #000000; } /* line 96, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-radio label:before { content: " "; display: inline-block; position: relative; margin: 4px 8px 0 0; width: 20px; height: 20px; border-radius: 11px; border: 1px solid #000000; background-color: transparent; } /* line 108, app/assets/stylesheets/overrides/partials/_forms.scss */ .pretty-radio label { cursor: pointer; } /* line 113, app/assets/stylesheets/overrides/partials/_forms.scss */ textarea { line-height: 1.75; resize: vertical; } /* line 118, app/assets/stylesheets/overrides/partials/_forms.scss */ #stripe-account-form input[type="checkbox"], input[type="radio"] { position: relative; } /* line 123, app/assets/stylesheets/overrides/partials/_forms.scss */ .label-description { font-size: 0.875rem; margin-top: 0.5rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; color: #949494; font-style: italic; line-height: 1.4; } /* line 134, app/assets/stylesheets/overrides/partials/_forms.scss */ .label-description a { text-decoration: underline; } /* line 137, app/assets/stylesheets/overrides/partials/_forms.scss */ .label-description a:hover { text-decoration: none; } /* line 143, app/assets/stylesheets/overrides/partials/_forms.scss */ .checkbox-container .label-description { margin-top: 0.1875rem; } /* line 149, app/assets/stylesheets/overrides/partials/_forms.scss */ .edit_person .terms-container, .edit_person label, .new_person .terms-container, .new_person label { margin-top: 1.3125rem; } /* line 154, app/assets/stylesheets/overrides/partials/_forms.scss */ .edit_person .terms-container, .new_person .terms-container { margin-bottom: 1.5625rem; } /* line 159, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox { position: absolute; opacity: 0; } /* line 163, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox + label { position: relative; cursor: pointer; padding: 0; font-size: 1rem; } /* line 171, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox + label:before { content: ""; margin-right: 10px; display: inline-block; vertical-align: text-top; width: 20px; height: 20px; background-color: black; border: 1px solid #D2D2D2; } /* line 183, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox:hover + label:before { background-color: #ffffff; } /* line 188, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox:focus + label:before { border-color: #ffffff; } /* line 195, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox:checked + label:before { background-color: #ffffff; } /* line 200, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox:disabled + label { color: #b8b8b8; cursor: auto; } /* line 206, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox:disabled + label:before { box-shadow: none; background: #ddd; } /* line 212, app/assets/stylesheets/overrides/partials/_forms.scss */ .styled-checkbox:checked + label:after { content: ""; position: absolute; left: 0; top: 0.125rem; width: 1.25rem; height: 1.25rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/tick-003da20e69aa1f7a2cb75e419ebaaebbb77a101caf3f199efa56a3db3f82cddc.svg); background-size: 0.6875rem 0.5rem; background-position: 50% 50%; background-repeat: no-repeat; } /* line 226, app/assets/stylesheets/overrides/partials/_forms.scss */ .form-info-box { border: solid 1px #D2D2D2; padding: 2.1875rem 1.5625rem; text-align: center; } /* line 232, app/assets/stylesheets/overrides/partials/_forms.scss */ .form-info-box .checkbox-container { margin-top: 1.5625rem; } /* line 236, app/assets/stylesheets/overrides/partials/_forms.scss */ .form-info-box p { font-size: 1.125rem !important; } /* line 240, app/assets/stylesheets/overrides/partials/_forms.scss */ .form-info-box .title { font-size: 1.625rem; text-align: center; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; text-decoration-color: #00F780; margin-bottom: 1.5rem; } /* line 250, app/assets/stylesheets/overrides/partials/_forms.scss */ .form-info-box-list { margin-bottom: 1.125rem; } /* line 256, app/assets/stylesheets/overrides/partials/_forms.scss */ .form-info-box-list div { text-align: center; text-transform: uppercase; font-weight: bold; margin-bottom: 1rem; } /* line 1, app/assets/stylesheets/overrides/partials/_admin.scss */ .status-select-button { border-radius: 3px; border: solid 1px #949494; padding: 0.625rem 0.6875rem 0 0.6875rem; } /* line 6, app/assets/stylesheets/overrides/partials/_admin.scss */ .status-select-button:after { right: 0.5625rem; top: 0.75rem; } /* line 13, app/assets/stylesheets/overrides/partials/_admin.scss */ .status-select-line.reset:after { right: 0.5625rem; top: 0.5625rem; } /* line 1, app/assets/stylesheets/overrides/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-image { border-radius: 0; } /* line 5, app/assets/stylesheets/overrides/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-image-container { padding-bottom: 100%; overflow: hidden; } /* line 9, app/assets/stylesheets/overrides/partials/_fluid-grid-listing-image.scss */ .fluid-thumbnail-grid-image-image-container:after { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 0, 0, 0.2); } /* line 22, app/assets/stylesheets/overrides/partials/_fluid-grid-listing-image.scss */ .people-fluid-thumbnail-grid.following-followers .fluid-thumbnail-grid-image-image { border-radius: 50%; } /* line 26, app/assets/stylesheets/overrides/partials/_fluid-grid-listing-image.scss */ .people-fluid-thumbnail-grid.following-followers .fluid-thumbnail-grid-image-image-container:after { display: none; } /* line 30, app/assets/stylesheets/overrides/partials/_fluid-grid-listing-image.scss */ .people-fluid-thumbnail-grid.following-followers .fluid-thumbnail-grid-image-title { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 0.9375rem; text-align: center; position: relative; padding: 0.3125rem 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid { overflow: auto; margin-right: -0.75em; } @media (min-width: 48em) { /* line 57, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid { margin-right: -1.5em; } } /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { float: left; padding-right: 0.75em; margin-bottom: 0.75em; } @media (max-width: 23.375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 33.3333333333%; } } @media (min-width: 23.4375em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 25%; } } @media (min-width: 30em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 20%; } } @media (min-width: 37.5em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 16.6666666667%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 20%; } } @media (min-width: 53.75em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 20%; } } @media (min-width: 60em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 12.5%; } } @media (min-width: 63em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { width: 12.5%; } } @media (min-width: 48em) { /* line 67, app/assets/stylesheets/overrides/mixins/../../mixins/_fluid-thumbnail-grid.scss */ .people-fluid-thumbnail-grid.following-followers .people-fluid-thumbnail-grid-item { padding-right: 1.5em; margin-bottom: 1.5em; } } /* line 1, app/assets/stylesheets/overrides/partials/_texts.scss */ a { color: #000000; } /* line 4, app/assets/stylesheets/overrides/partials/_texts.scss */ a:hover { color: #000000; } /* line 9, app/assets/stylesheets/overrides/partials/_texts.scss */ h1, h2, h3, h4, h5, h6 { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: 300; } /* line 19, app/assets/stylesheets/overrides/partials/_texts.scss */ h1 { font-size: 2.625rem; line-height: 1.2; } /* line 24, app/assets/stylesheets/overrides/partials/_texts.scss */ h2 { font-size: 1.875rem; line-height: 1.2; } /* line 35, app/assets/stylesheets/overrides/partials/_texts.scss */ [data-controller="payment_settings"] .page-content h1, [data-controller="settings"] .page-content h1 { text-align: left; } @media (min-width: 48em) { /* line 35, app/assets/stylesheets/overrides/partials/_texts.scss */ [data-controller="payment_settings"] .page-content h1, [data-controller="settings"] .page-content h1 { margin-left: 0.625rem; } } /* line 44, app/assets/stylesheets/overrides/partials/_texts.scss */ .page-content h1.inbox-title { font-size: 1.375rem; color: #949494; text-align: left; max-width: 54.375rem; margin-left: auto; margin-right: auto; border-bottom: solid 1px #d2d2d2; padding-bottom: 0.75rem; line-height: 1.4; } @media (min-width: 48em) { /* line 44, app/assets/stylesheets/overrides/partials/_texts.scss */ .page-content h1.inbox-title { font-size: 1.875rem; } } /* line 59, app/assets/stylesheets/overrides/partials/_texts.scss */ .page-content h1.inbox-title a { color: #000000; } /* line 63, app/assets/stylesheets/overrides/partials/_texts.scss */ .page-content h1.inbox-title.collapse { margin-bottom: 0; } /* line 1, app/assets/stylesheets/overrides/partials/_buttons.scss */ .disabled-button, .disabled-button:hover { opacity: 0.5; } /* line 6, app/assets/stylesheets/overrides/partials/_buttons.scss */ .send_button, .button-primary { background-color: #00F780; } /* line 11, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button { display: inline-block; background-color: #00F780; padding: 0 1.5625rem; text-transform: none; font-size: 1.125rem; height: 3.125rem; line-height: 2.9375rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; letter-spacing: normal; text-align: center; text-decoration: none !important; border-style: solid; border-width: 1px; border-color: #00F780; cursor: pointer; } /* line 28, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.collapse { margin: 0; } /* line 32, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button:hover { background-color: #00de73; } /* line 36, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.black { background-color: #000000; color: #ffffff; border-color: #000000; } /* line 42, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.problem { background-color: #FF3351; color: #ffffff; border-color: #FF3351; } /* line 47, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.problem:hover { background-color: #ff1a3b; } /* line 52, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.secondary { background-color: #D2D2D2; color: #000000; border-color: #D2D2D2; } /* line 57, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.secondary:hover { background-color: #c5c5c5; } /* line 62, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.hollow { background-color: transparent; border-color: #ffffff; color: #ffffff; } /* line 68, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.hollow-black { background-color: transparent; border-color: #000000; color: #000000; } /* line 74, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button.full-width { width: 100%; } /* line 79, app/assets/stylesheets/overrides/partials/_buttons.scss */ .ss-button-rounded { display: inline-block; padding: 0 1.5625rem; text-transform: none; font-size: 1.125rem; border-radius: 100px; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; letter-spacing: normal; text-align: center; text-decoration: none !important; cursor: pointer; border: 1px solid #000000; padding: 0.375rem 1.125rem; } /* line 1, app/assets/stylesheets/overrides/partials/_flash.scss */ .ajax-notification, .flash-notification { border-radius: 0; padding-top: 0.625rem; padding-bottom: 0.625rem; margin-bottom: 0; } /* line 10, app/assets/stylesheets/overrides/partials/_flash.scss */ .ajax-error, .flash-error, .ajax-update-error { background-color: #FF3351; } /* line 16, app/assets/stylesheets/overrides/partials/_flash.scss */ .ajax-notification .ajax-text, .ajax-notification .flash-text, .flash-notification .ajax-text, .flash-notification .flash-text { margin-left: 0; } @media (min-width: 48em) { /* line 16, app/assets/stylesheets/overrides/partials/_flash.scss */ .ajax-notification .ajax-text, .ajax-notification .flash-text, .flash-notification .ajax-text, .flash-notification .flash-text { font-size: 1.125rem; } } /* line 26, app/assets/stylesheets/overrides/partials/_flash.scss */ .ajax-notification .ajax-text a, .ajax-notification .flash-text a, .flash-notification .ajax-text a, .flash-notification .flash-text a { text-decoration: underline; } /* line 29, app/assets/stylesheets/overrides/partials/_flash.scss */ .ajax-notification .ajax-text a:hover, .ajax-notification .flash-text a:hover, .flash-notification .ajax-text a:hover, .flash-notification .flash-text a:hover { text-decoration: none; } /* line 35, app/assets/stylesheets/overrides/partials/_flash.scss */ .flash-icon + .flash-text { padding-left: 0.9375rem; } /* line 39, app/assets/stylesheets/overrides/partials/_flash.scss */ .flash-error a { color: #ffffff; } /* line 1, app/assets/stylesheets/overrides/partials/_radio-buttons.scss */ .radio-button, .radio-button-positive, .radio-button-negative { border: solid 1px #c3c3c3; border-radius: 0; } /* line 8, app/assets/stylesheets/overrides/partials/_radio-buttons.scss */ .radio-button-label { padding-top: 0.5625rem; padding-bottom: 0.625rem; } /* line 1, app/assets/stylesheets/overrides/partials/_info_text.scss */ .page-content .info-text-content p { font-size: 0.8125rem; } /* line 5, app/assets/stylesheets/overrides/partials/_info_text.scss */ .info-text-container { font-weight: normal; } /* line 1, app/assets/stylesheets/overrides/partials/_toggle.scss */ .toggle-header-container { padding-left: 0.75rem; padding-right: 0.75rem; height: 2.5rem; display: inline-block; border: 1px solid #000000; border-radius: 3.125rem; } /* line 10, app/assets/stylesheets/overrides/partials/_toggle.scss */ .toggle-header { height: 100%; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/arrow-down-black-240be3692f7c8a8d6ed72f360f01901913abf99baa99b10702424b7de3f2f330.svg); background-size: 8px 8px; background-position: 100% 52%; background-repeat: no-repeat; } /* line 18, app/assets/stylesheets/overrides/partials/_toggle.scss */ .toggle.with-borders { border-radius: 0; background: none; } /* line 22, app/assets/stylesheets/overrides/partials/_toggle.scss */ .toggle.with-borders.toggled { color: #000000 !important; background: none; } /* line 36, app/assets/stylesheets/overrides/partials/_flags.scss */ [class^="flag-"] { display: inline-block; margin-right: 0.5rem; width: 1.125rem; height: 1.125rem; background-position: 50% 50%; background-size: 1.125rem 1.125rem; background-repeat: no-repeat; vertical-align: middle; } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-AT { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/AT-651f8bbce06df80ade3d98849200b385d12b8c8c31fdbe7f3fe03dc21e3d68f8.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-AU { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/AU-ccc69b56098dc2e4fe5b20c2e93c47a1a876672370ceee54ccf818b7ba2c2881.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-BE { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/BE-38a41c667dee66f46f907fb49c10530b54ca2f136e7bb1989c30d041979adcfe.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-CA { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/CA-a37e803485198fbf19e5504360278ac15ccd85146ecc9b423cfe769d321527d2.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-CH { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/CH-0ed956a35ffb387a219f763557370a7a2f39287343760e023dbcce12665df631.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-CZ { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/CZ-bea6e6e1d9024b042884c6af1e331df1e6ed7293dc66e52850fdc6d5f900b3b7.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-DE { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/DE-6f275a86581101d2104e7ab2a7e92414da2deb07853b681594426938fde01d8a.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-DK { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/DK-ecdda4f33d902731466f3ec355b3bd08d787cf1b7bb7b3e8f96e81bc7cc55481.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-EE { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/EE-2defe656b16dfa82a9db2daba655d12f4a82b78264e23af7ac4640bd35a33b90.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-ES { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/ES-9a46272f6a64e6a1c6ff7dc7b98fd542c800b6db1c8c9cf10e72432dc8e0d94f.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-FI { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/FI-1c08ba136c6bb358c79b891042f41db03a10505770715301c7c6f6b35b45bb90.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-HU { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/HU-e7e8b9064c43ac4683f090f93bb99190c419971990c18923be87937c1f91d2ec.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-HK { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/HK-706c45db3015772fdf7026e49b2524bd80bdf3578ea0734f918ac416543ba071.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-FR { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/FR-8be7306b94d95be91cf5089abe4e45b281e9b8495705dc3608ee6c1381125a98.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-GB { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/GB-2b7a73cddd9fbd492a18424a39e958a5fd7b1324c000c03179f6698e40a165e0.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-GR { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/GR-edda6c5ec0489db575cc2ffffffa20b764cb978f3c3f94bff939b9be6b35d18c.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-IE { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/IE-0231d63fdaa2ea668a43d5718d9ad1ac18ffc7aef0c9874924c20f046c5d463c.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-IT { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/IT-46741f22cb1e25d0b01ef060cf35fc91ab4200840cf2b0b5fa36710121ffdb6c.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-JP { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/JP-f7424eba59459f69b53c80ef1a46d3a7cc057f4ee55a91365ae43ff65c838d41.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-LV { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/LV-bfacd85fea6b7a1598ff30f7436e73fc065d752beb52eed5e3574c5e1157e6f0.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-LT { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/LT-a330b570b208ff258e7bf3c86951cf61088dc913b2d51c6e2dbc65fd3a2345aa.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-NL { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/NL-ca5de7dc868cf71b7585be278d8525f023ca44591e59ffd312ff9fce9c5b3226.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-NO { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/NO-139c4145e653277c4e284aa252b115466f4fbb1ba6af2bbb5a69197f714cfdc7.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-NZ { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/NZ-a226ed86ab1f7a742de02fff50af9b6af58add29c0b8e775bcf2127cd9c704ef.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-MX { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/MX-7b2d158c64fff8d38623b48c15c7302fafea831f12421ba3abf122c67526b2c4.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-PL { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/PL-073cf237fe86763936aafc59c56b031eb64b753ab59e7f2c2f4837bf97e41189.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-PT { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/PT-5d3065477603214e8534c57bb9b59536e55e561a619ec8518b31e7312b3c2439.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-PR { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/PR-fc0d8fd9c2436cfd51a1d4c1edfd3f57a4e1d5787db15de743a93aed023de442.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-SE { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/SE-76292cc4442fc4ce909c0fe6d41ee71c1eb81ce606e05419c681c86a8bb53d04.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-SG { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/SG-c907ce1802afb94baeda1de15578cac8f4e84cde223d5fdb8bf2363d745147de.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-SI { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/SI-c3285816ac2d522dfb955426123b51319568cf09c6ddec032d96b093b48af00b.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-SK { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/SK-5d154c000136941b5a31e58e70dc463044d2ea1820baf3060c10c1fb60c6902c.svg); } /* line 48, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-US { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/flags/US-ffe228371ddb91aba2db32a2b8f369449014598049624ec4d653886ff266b530.svg); } /* line 53, app/assets/stylesheets/overrides/partials/_flags.scss */ .flag-worldwide { width: 1rem; height: 1rem; min-width: 1.125rem; background-size: 1rem 1rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/worldwide-5dba17ca5ef4e9bee4105868a605a09112dfadd9942fee1946ec95911500ec82.svg); } /* line 1, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ .paypal-account-connected, .stripe-account-pending-verification, .paypal-account-disabled { font-weight: bold; margin-bottom: 0.9375rem; } /* line 7, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ .paypal-account-connected .icon-fix, .paypal-account-connected .icon-remove, .stripe-account-pending-verification .icon-fix, .stripe-account-pending-verification .icon-remove, .paypal-account-disabled .icon-fix, .paypal-account-disabled .icon-remove { position: relative; top: 0px; } /* line 14, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ #edit-stripe-info { text-decoration: underline; } /* line 17, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ #edit-stripe-info:hover { text-decoration: none; } /* line 22, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ .paypal-wizard-content a { text-decoration: underline; } /* line 25, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ .paypal-wizard-content a:hover { text-decoration: none; } /* line 30, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ .paypal-wizard-content h2 { margin-top: 2.1875rem; } /* line 33, app/assets/stylesheets/overrides/partials/_paypal_account_connected.scss */ .paypal-wizard-content h2.required { color: red; } /* line 1, app/assets/stylesheets/overrides/partials/_pagination.scss */ .pagination a { color: #000000; } /* line 5, app/assets/stylesheets/overrides/partials/_pagination.scss */ .pagination .current { background-color: #000000; } /* line 9, app/assets/stylesheets/overrides/partials/_pagination.scss */ .pagination.next-prev-only { text-align: right; } /* line 12, app/assets/stylesheets/overrides/partials/_pagination.scss */ .pagination.next-prev-only a { float: none; } /* line 1, app/assets/stylesheets/overrides/partials/_tabs.scss */ .ss-tabs-list { border-bottom: 1px solid #c3c3c3; } /* line 5, app/assets/stylesheets/overrides/partials/_tabs.scss */ .ss-tab-link { position: relative; bottom: -1px; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; display: inline-block; font-size: 1.1875rem; font-weight: 300; margin-right: 1.25rem; padding-bottom: 0.75rem; border-bottom: 3px solid transparent; color: #c3c3c3; } @media (min-width: 48em) { /* line 5, app/assets/stylesheets/overrides/partials/_tabs.scss */ .ss-tab-link { margin-right: 2.1875rem; font-size: 1.875rem; } } /* line 22, app/assets/stylesheets/overrides/partials/_tabs.scss */ .ss-tab-link:last-child { margin-right: 0; } /* line 26, app/assets/stylesheets/overrides/partials/_tabs.scss */ .ss-tab-link.active, .ss-tab-link:hover { color: #000000; border-color: #000000; } /* line 33, app/assets/stylesheets/overrides/partials/_tabs.scss */ .ss-tab-content { padding: 1.875rem 0; } /* line 1, app/assets/stylesheets/overrides/partials/_loader.scss */ .loader { display: inline-block; width: 48px; height: 48px; } /* line 6, app/assets/stylesheets/overrides/partials/_loader.scss */ .loader:after { content: " "; display: block; width: 48px; height: 48px; border-radius: 50%; border: 6px solid #00F780; border-color: #00F780 transparent #00F780 transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* line 25, app/assets/stylesheets/overrides/partials/_loader.scss */ .send-button-wrapper .send-button-loading-img { float: none; width: auto; height: auto; margin: 0.75rem 0 0 0.9375rem; padding: 0; border-radius: 0; } /* line 34, app/assets/stylesheets/overrides/partials/_loader.scss */ .send-button-wrapper .send-button-loading { opacity: 0.2; } /* line 38, app/assets/stylesheets/overrides/partials/_loader.scss */ .paypal-link-wrapper .send-button-loading-img { float: none; width: auto; height: auto; margin: 0.625rem 0 0 0; padding: 0; border-radius: 0; display: block; } @media screen and (max-width: 600px) { /* line 2, app/assets/stylesheets/overrides/partials/_table.scss */ table.responsive { border: 0; } /* line 6, app/assets/stylesheets/overrides/partials/_table.scss */ table.responsive caption { font-size: 1.3em; } /* line 10, app/assets/stylesheets/overrides/partials/_table.scss */ table.responsive thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* line 21, app/assets/stylesheets/overrides/partials/_table.scss */ table.responsive tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; } /* line 27, app/assets/stylesheets/overrides/partials/_table.scss */ table.responsive td { border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align: right; } /* line 34, app/assets/stylesheets/overrides/partials/_table.scss */ table.responsive td::before { /* * aria-label has no advantage, it won't be read inside a table content: attr(aria-label); */ content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } /* line 45, app/assets/stylesheets/overrides/partials/_table.scss */ table.responsive td:last-child { border-bottom: 0; } } /* line 1, app/assets/stylesheets/overrides/views/_layout.scss */ body { -webkit-font-smoothing: antialiased; } /* line 5, app/assets/stylesheets/overrides/views/_layout.scss */ .wrapper { max-width: 84.375rem; background-color: transparent; padding-left: 0.9375rem; padding-right: 0.9375rem; } @media (min-width: 63em) { /* line 5, app/assets/stylesheets/overrides/views/_layout.scss */ .wrapper { padding-left: 1.5625rem; padding-right: 1.5625rem; } } /* line 17, app/assets/stylesheets/overrides/views/_layout.scss */ .wrapper > h1 { text-align: center; margin-bottom: 0.9375rem; } /* line 24, app/assets/stylesheets/overrides/views/_layout.scss */ [data-controller="homepage"][data-action="home"][data-logged-in="true"] .wrapper .nugget, [data-controller="homepage"][data-action="home"][data-logged-in="true"] .wrapper .flash-notifications { margin-right: 0.9375rem; } @media (min-width: 63em) { /* line 24, app/assets/stylesheets/overrides/views/_layout.scss */ [data-controller="homepage"][data-action="home"][data-logged-in="true"] .wrapper .nugget, [data-controller="homepage"][data-action="home"][data-logged-in="true"] .wrapper .flash-notifications { margin-right: 1.5625rem; } } /* line 35, app/assets/stylesheets/overrides/views/_layout.scss */ .centered-section-wide { max-width: 54.375rem; padding-left: 0; padding-right: 0; } /* line 41, app/assets/stylesheets/overrides/views/_layout.scss */ .centered-section-narrow { max-width: 40rem; padding-left: 0; padding-right: 0; } /* line 47, app/assets/stylesheets/overrides/views/_layout.scss */ .home-no-listings, .ajax-notice, .ajax-warning, .flash-notice, .flash-warning, .ajax-update-notice { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; background-color: #00F780; border-radius: 0; color: #000000; } @media (min-width: 48em) { /* line 47, app/assets/stylesheets/overrides/views/_layout.scss */ .home-no-listings, .ajax-notice, .ajax-warning, .flash-notice, .flash-warning, .ajax-update-notice { font-size: 1.125rem; } } /* line 63, app/assets/stylesheets/overrides/views/_layout.scss */ .flash-notifications { margin-left: auto; margin-right: auto; } /* line 67, app/assets/stylesheets/overrides/views/_layout.scss */ [data-controller="homepage"][data-logged-in="false"] .flash-notifications { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; } /* line 74, app/assets/stylesheets/overrides/views/_layout.scss */ [data-controller="homepage"][data-logged-in="false"] .flash-notifications .ajax-notification, [data-controller="homepage"][data-logged-in="false"] .flash-notifications .flash-notification { margin-bottom: 0; } /* line 81, app/assets/stylesheets/overrides/views/_layout.scss */ .flash-notifications + .flash-notifications { margin-top: 0; } /* line 85, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi-section { padding-top: 0.9375rem; } @media (min-width: 48em) { /* line 85, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi-section { padding-top: 0.625rem; } } /* line 93, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi-menu.toggle-menu a { padding: 0.3125rem 0.75rem; } /* line 97, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi-dropdown { border: 1px solid #949494 !important; } /* line 101, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi-dropdown .ss-triarrow { font-size: 0.75rem; top: 6px; } /* line 106, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi-dropdown [class^="icon-"]:not(.ss-triarrow), .left-navi-menu [class^="icon-"] { display: none; } @media (min-width: 48em) { /* line 111, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi { margin-top: 0.3125rem; } } /* line 117, app/assets/stylesheets/overrides/views/_layout.scss */ .left-navi .left-navi-link-text { padding-left: 0; } /* line 121, app/assets/stylesheets/overrides/views/_layout.scss */ .panel { position: relative; background-color: #F4F5F5; padding: 1.5625rem 1.25rem; margin-bottom: 1.5625rem; } /* line 127, app/assets/stylesheets/overrides/views/_layout.scss */ .panel p:last-child { margin-bottom: 0; } /* line 1, app/assets/stylesheets/overrides/views/_header.scss */ .s-header { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; height: 4.3125rem; position: relative; background-color: #000000; color: #ffffff; border-bottom: solid 1px #4C4C4C; padding-left: 0.9375rem; padding-right: 0.9375rem; display: flex; justify-content: space-between; } /* line 11, app/assets/stylesheets/overrides/views/_header.scss */ [data-logged-in="true"] .s-header { padding-right: 0; } @media (min-width: 48em) { /* line 1, app/assets/stylesheets/overrides/views/_header.scss */ .s-header { height: 4.9375rem; padding-right: 0.9375rem; } } /* line 23, app/assets/stylesheets/overrides/views/_header.scss */ .s-header a { color: #ffffff; } /* line 28, app/assets/stylesheets/overrides/views/_header.scss */ .s-header form { width: 100%; } /* line 32, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .icon { padding-top: 0; } /* line 36, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-right { width: 100%; display: flex; justify-content: flex-end; } /* line 42, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-search { position: absolute; left: 0; right: 0; bottom: -7.1875rem; } @media (min-width: 60em) { /* line 42, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-search { position: relative; left: auto; right: auto; bottom: auto; flex-grow: 1; padding: 0 0 0 1.5625rem; display: flex; align-items: center; } } /* line 61, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-search-overflow { height: 8rem; background-color: #000000; border-bottom: 1px solid #4C4C4C; } @media (min-width: 60em) { /* line 61, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-search-overflow { display: none; } } /* line 71, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-actions { display: flex; flex-grow: 0; } /* line 76, app/assets/stylesheets/overrides/views/_header.scss */ .header-inbox { display: block; width: 1.375rem; height: 1.375rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/envelope-outline-8918d9f4aab7a91db98e4de0e9df0db53d7e4481df8427ed6a1524f827fa366a.svg); background-size: 1.375rem 1.375rem; background-repeat: no-repeat; background-position: 50% 50%; top: auto; } /* line 86, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-messages.active .header-inbox { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/envelope-13d9524dbc5536e1d38f2fca488596d7efb22e333f922a5f557a8bf8f725c7df.svg); } /* line 91, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-cells { width: 100%; margin-top: 0.75rem; padding-left: 0.9375rem; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } /* line 100, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-cells::-webkit-scrollbar { display: none; } @media (min-width: 60em) { /* line 91, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-cells { display: none; } } /* line 109, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-cell { display: inline-block; font-size: 0.875rem; border: 1px solid #4c4c4c; border-radius: 3.125rem; padding: 0.5rem 1.25rem; margin-right: 0.5rem; } /* line 118, app/assets/stylesheets/overrides/views/_header.scss */ .flickity-enabled { position: relative; } /* line 122, app/assets/stylesheets/overrides/views/_header.scss */ .flickity-enabled:focus { outline: none; } /* line 126, app/assets/stylesheets/overrides/views/_header.scss */ .flickity-viewport { position: relative; height: 100%; } /* line 131, app/assets/stylesheets/overrides/views/_header.scss */ .flickity-slider { position: absolute; width: 100%; height: 100%; } /* Draggable */ /* line 138, app/assets/stylesheets/overrides/views/_header.scss */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* line 147, app/assets/stylesheets/overrides/views/_header.scss */ .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } /* line 153, app/assets/stylesheets/overrides/views/_header.scss */ .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* line 158, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-menu { width: 100%; border-bottom: 1px solid #4C4C4C; background-color: #000000; padding-left: 0.9375rem; padding-right: 0.9375rem; display: none; } @media (min-width: 60em) { /* line 158, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-menu { display: block; } } /* line 171, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-menu-item { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; display: inline-block; font-size: 0.9375rem; line-height: 2.8125rem; padding-left: 0.625rem; padding-right: 0.625rem; color: #ffffff; } /* line 180, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-menu-item:hover { color: #ffffff; } /* line 184, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-menu-item span { position: relative; top: 1px; display: inline-block; border-bottom: 2px solid transparent; } /* line 191, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-category-menu-item.active span, .s-header-category-menu-item:hover span { border-color: #00F780; } /* line 197, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-country-select { display: inline-block; } /* line 200, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-country-select select { position: absolute; z-index: 1; } /* line 206, app/assets/stylesheets/overrides/views/_header.scss */ .s-filters { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 0.1875rem; } /* line 215, app/assets/stylesheets/overrides/views/_header.scss */ .s-filters-right { display: flex; align-items: center; } /* line 220, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-country-select-pretty { position: relative; z-index: 2; width: 100%; border: 1px solid #000000; padding: 0.5rem 0.75rem; border-radius: 3.125rem; background-color: #ffffff; } /* line 230, app/assets/stylesheets/overrides/views/_header.scss */ .toggle-header .country-select-item { padding-right: 0.75rem; } /* line 234, app/assets/stylesheets/overrides/views/_header.scss */ .country-select-item { display: flex; align-items: center; column-gap: 0.5rem; } /* line 240, app/assets/stylesheets/overrides/views/_header.scss */ .country-select-item .flag { display: inline-block; } /* line 244, app/assets/stylesheets/overrides/views/_header.scss */ .country-select-item img { display: block; width: 1.5625rem; } /* line 248, app/assets/stylesheets/overrides/views/_header.scss */ .country-select-item img[src*="GLOBAL"] { width: 1rem; } /* line 253, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-toggle { display: inline-block; width: 2.5rem; height: 2.5rem; border-radius: 2.5rem; background-color: #000000; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/toggle-filters-f0fd10b09ca11636aa05825e3e1b3a6abf481415c6e842b601b52f56f931f8ed.svg); background-size: 1rem 0.6875rem; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; color: #ffffff; } /* line 266, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-toggle span { display: none; } @media (min-width: 48em) { /* line 253, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-toggle { width: auto; line-height: 2.5rem; background-position: 80% 50%; padding-left: 1.125rem; padding-right: 3.125rem; } /* line 277, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-toggle span { display: inline-block; } } /* line 283, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-selected { display: inline-block; background-color: #ededed; border-radius: 3.125rem; padding: 0 0.625rem 0 1.125rem; line-height: 2.4375rem; margin-top: 0.1875rem; margin-bottom: 0.125rem; margin-right: 0.1875rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } /* line 295, app/assets/stylesheets/overrides/views/_header.scss */ .s-filter-remove { display: inline-block; width: 1.5625rem; height: 1.5625rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/cross-8fcd811d1c386aeff012ad0bedc68a7a1a031039a3694785b7e02adcd930547c.svg); background-size: 0.5rem 0.5rem; background-position: 50% 50%; background-repeat: no-repeat; vertical-align: middle; cursor: pointer; } /* line 307, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-sell-link { font-size: 0.875rem; line-height: 4.25rem; padding: 0 0.9375rem; letter-spacing: 0.01em; display: inline-block; vertical-align: top; white-space: nowrap; } @media (max-width: 23.375em) { /* line 307, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-sell-link { display: none; } } @media (min-width: 48em) { /* line 307, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-sell-link { display: inline-block; font-size: 1.125rem; line-height: 4.9375rem; padding: 0 1.5625rem; } } /* line 327, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-sell-link:hover { text-decoration: underline; } /* line 332, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-text-link { font-size: 1rem; text-transform: uppercase; display: flex; align-items: center; padding: 0 0.75rem; } /* line 339, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-text-link:last-child { padding-right: 0; } /* line 343, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-text-link:hover { text-decoration: underline; } @media (min-width: 48em) { /* line 332, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-text-link { font-size: 1.125rem; } } /* line 376, app/assets/stylesheets/overrides/views/_header.scss */ .s-logo { display: block; width: 6.8125rem; height: 4.25rem; background-size: 6.8125rem 1.5rem; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/secondskin-logotype-23-c044433c6caf0a1645cbf9506be9a1d62c48b303db5a89824b96db52b816832a.svg); margin: 0; } @media (min-width: 48em) { /* line 376, app/assets/stylesheets/overrides/views/_header.scss */ .s-logo { width: 8.5rem; height: 4.9375rem; background-size: 8.5rem 1.875rem; } } /* line 393, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-button { display: inline-block; height: 100%; padding-left: 1.25rem; padding-right: 1.25rem; border-left: 1px solid #4C4C4C; margin-left: 0.625rem; } @media (min-width: 48em) { /* line 393, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-button { display: none; margin-left: 0.9375rem; } } /* line 406, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-button.toggled { background-color: #000000; } /* line 411, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-new-listing { display: flex; align-items: center; padding-left: 0.625rem; padding-right: 0.625rem; } /* line 418, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item { position: relative; height: 4.25rem; text-align: center; } @media (min-width: 48em) { /* line 418, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item { height: 4.9375rem; border-left: solid 1px #4C4C4C; width: 6.25rem !important; } } /* line 430, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item-top { display: flex; justify-content: center; align-items: center; height: 4.25rem; line-height: 4.25rem; width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 48em) { /* line 430, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item-top { padding-top: 0.75rem; padding-bottom: 2.25rem; line-height: 2.1875rem; height: 4.9375rem; padding-left: 0; padding-right: 0; } } /* line 450, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 2.25rem; font-size: 0.9375rem; display: none; } /* line 459, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item-bottom .icon-dropdown { font-size: 0.625rem; top: 0; margin-left: 2px; float: none; } @media (min-width: 48em) { /* line 450, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item-bottom { display: block; } } /* line 471, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item .badge, .s-header-menu-item .big-badge.badge { top: 0.875rem; right: 0.375rem; } @media (min-width: 48em) { /* line 471, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-menu-item .badge, .s-header-menu-item .big-badge.badge { top: 0.5rem; right: 1.875rem; } } /* line 487, app/assets/stylesheets/overrides/views/_header.scss */ .wishlist-icon { display: block; width: 1.5rem; height: 1.3125rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/heart-outline-white-8ef127624b0ec630b8c0c3204ed3f805e762475a647d152e112504695d18b303.svg); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } /* line 496, app/assets/stylesheets/overrides/views/_header.scss */ .s-header-wishlist.active .wishlist-icon { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/heart-4e33a56a73432a3c43f01817fcc6173cd9e7eff674c25af9e768f69d769e0fb1.svg); } /* line 501, app/assets/stylesheets/overrides/views/_header.scss */ .badge { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; background-color: #00F780; top: -0.5625rem; right: 0; left: auto; color: #000000; font-size: 0.625rem; line-height: 1.25rem; width: 18px; height: 18px; line-height: 17px; border-radius: 9px; text-align: center; } @media (min-width: 48em) { /* line 501, app/assets/stylesheets/overrides/views/_header.scss */ .badge { right: 1.25rem; } } /* line 516, app/assets/stylesheets/overrides/views/_header.scss */ .badge.big-badge { width: 18px; height: 18px; line-height: 17px; border-radius: 9px; text-align: center; left: auto; top: -0.5625rem; right: 0; } @media (min-width: 48em) { /* line 516, app/assets/stylesheets/overrides/views/_header.scss */ .badge.big-badge { right: 1.25rem; } } /* line 527, app/assets/stylesheets/overrides/views/_header.scss */ .badge.huge-badge { width: 18px; height: 18px; line-height: 17px; border-radius: 9px; text-align: center; left: auto; top: -0.5625rem; right: 0; } @media (min-width: 48em) { /* line 527, app/assets/stylesheets/overrides/views/_header.scss */ .badge.huge-badge { right: 1.25rem; } } /* line 539, app/assets/stylesheets/overrides/views/_header.scss */ .mobile-badge { background-color: #00F780; color: #000000; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 0.875rem; line-height: 1.25rem; width: 1.25rem; height: 1.25rem; } /* line 549, app/assets/stylesheets/overrides/views/_header.scss */ .header-text-link { font-size: 0.9375rem; } /* line 553, app/assets/stylesheets/overrides/views/_header.scss */ .header-text-link { color: #ffffff; height: auto; line-height: normal; } /* line 559, app/assets/stylesheets/overrides/views/_header.scss */ .header-user-avatar { border-radius: 50%; width: 1.8125rem; height: 1.8125rem; text-align: center; display: inline-block; } /* line 567, app/assets/stylesheets/overrides/views/_header.scss */ .header-text-link .icon-dropdown { display: inline-block; font-size: 0.625rem; top: 1.5625rem; top: -43%; } /* line 577, app/assets/stylesheets/overrides/views/_header.scss */ .header-user-avatar { margin: 0; } /* line 581, app/assets/stylesheets/overrides/views/_header.scss */ .header-text-link:hover, .header-hover:hover { background-color: transparent; color: #ffffff; } /* line 587, app/assets/stylesheets/overrides/views/_header.scss */ .header-hover.toggled { background-color: #000000; } /* line 591, app/assets/stylesheets/overrides/views/_header.scss */ .header-user-toggle { padding-left: 0; height: 4.9375rem; } /* line 596, app/assets/stylesheets/overrides/views/_header.scss */ #header-user-mobile-anchor { display: flex; align-items: center; } /* line 601, app/assets/stylesheets/overrides/views/_header.scss */ .header-toggle-menu-menu { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; text-transform: uppercase; font-weight: bold; font-size: 1.125rem; } /* line 608, app/assets/stylesheets/overrides/views/_header.scss */ .toggle-menu { padding: 0.9375rem 0; width: 100%; background-color: #000000; } @media (min-width: 48em) { /* line 608, app/assets/stylesheets/overrides/views/_header.scss */ .toggle-menu { width: auto; } } /* line 618, app/assets/stylesheets/overrides/views/_header.scss */ .header-menu-icon { top: 0.8125rem; } /* line 622, app/assets/stylesheets/overrides/views/_header.scss */ .toggled .header-menu-icon:before { content: "\e902"; } /* line 626, app/assets/stylesheets/overrides/views/_header.scss */ .toggle-menu a { padding: 0.3125rem 0.875rem; } /* line 630, app/assets/stylesheets/overrides/views/_header.scss */ .toggle-menu a:hover { background-color: #00F780 !important; color: #000000; } @media (min-width: 48em) { /* line 636, app/assets/stylesheets/overrides/views/_header.scss */ .header-user-toggle-wrapper { position: relative; display: inline-block; } } /* line 643, app/assets/stylesheets/overrides/views/_header.scss */ .header-toggle-menu-user { position: static; } @media (min-width: 48em) { /* line 643, app/assets/stylesheets/overrides/views/_header.scss */ .header-toggle-menu-user { position: absolute; top: 100%; right: 0; z-index: 1000; } } /* line 656, app/assets/stylesheets/overrides/views/_header.scss */ .header-toggle-menu-menu i, .header-toggle-menu-user i { display: none; } /* line 661, app/assets/stylesheets/overrides/views/_header.scss */ .header-toggle-menu-menu .mobile-badge { position: relative; top: -2px; font-weight: normal; } /* line 667, app/assets/stylesheets/overrides/views/_header.scss */ .header-toggle-menu-currency { position: absolute; width: auto; margin-left: -30px; } @media (min-width: 48em) { /* line 667, app/assets/stylesheets/overrides/views/_header.scss */ .header-toggle-menu-currency { margin-left: 0; width: 11.25rem; transform: translateX(1px); } } /* line 679, app/assets/stylesheets/overrides/views/_header.scss */ #header-user-desktop-anchor { display: none; } @media (min-width: 48em) { /* line 679, app/assets/stylesheets/overrides/views/_header.scss */ #header-user-desktop-anchor { display: inline-block; } } /* line 687, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input-container { width: 100%; position: relative; height: 3rem; border: solid 1px #949494; margin-left: auto; margin-right: auto; width: calc(100% - 30px); } /* line 698, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input-submit { position: absolute; top: -1px; right: -1px; } /* line 704, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input input[type="text"] { font-size: 1.125rem; border: none; background-color: transparent; color: #ffffff; height: 2.875rem; padding: 0 3.875rem 0 0.75rem !important; display: inline-block; } /* line 713, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input input[type="text"]:focus { outline: none; } /* line 717, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input input[type="text"]::placeholder { color: #ffffff; } /* line 721, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input input[type="text"]::-ms-input-placeholder { color: #ffffff; } /* line 725, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input input[type="text"]::-ms-input-placeholder { color: #ffffff; } /* line 730, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-text-field { display: flex; height: 100%; } /* line 735, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input-submit button { margin: 0; background-color: transparent; border: none; padding: 0; width: auto; height: 3rem; width: 3rem; background-color: #00F780; color: #000000; } /* line 746, app/assets/stylesheets/overrides/views/_header.scss */ .s-header .search-form-input-submit button:hover { background-color: #00de73; } /* line 751, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category { position: relative; display: inline-block; border-right: solid 1px #949494; display: none; } @media (min-width: 48em) { /* line 751, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category { display: block; } } /* line 761, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category::before { display: block; position: absolute; content: ""; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/arrow-down-0b100be7a7217ab5820d9fa3e66b166e51eee3638de2de454a3e8de060e91357.svg); background-size: 0.625rem 0.625rem; background-repeat: no-repeat; width: 0.625rem; height: 0.625rem; top: 50%; right: 0.75rem; margin-top: -0.3125rem; } /* line 775, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category select { position: relative; font-size: 0.9375rem; width: 7.5rem; padding: 0 1.875rem 0 0.75rem; margin: 0; font-size: 16px; border: none; color: #ffffff; border-radius: 0; height: 2.875rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; } /* line 791, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category select option { color: #000000; } /* line 795, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category select:focus { outline: none; } /* CAUTION: IE hackery ahead */ /* line 802, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category select::-ms-expand { display: none; /* remove default arrow on ie10 and ie11 */ } /* target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width: 0\0) { /* line 808, app/assets/stylesheets/overrides/views/_header.scss */ .search-form-category select { background: none\9; padding: 5px\9; } } /* line 1, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-item { margin-bottom: 1.5625rem !important; } @media (min-width: 23.4375em) { /* line 1, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-item { margin-bottom: 1.5625rem !important; } } @media (min-width: 48em) { /* line 1, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-fluid-thumbnail-grid-item { margin-bottom: 2.5rem !important; } } /* line 13, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-top { position: relative; } /* line 17, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-title-container { position: relative; display: flex; align-items: flex-start; } /* line 23, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-title { font-size: 1.125rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; line-height: 1.222; width: auto; flex: 1 1 auto; padding-right: 2.8125rem; overflow: visible; white-space: normal; color: #000000; word-break: break-word; padding-top: 0.75rem; } /* line 38, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-name { font-family: "Roboto", sans-serif; display: block; font-size: 0.75rem; margin-top: 0.1875rem; } /* line 44, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-name a { color: #949494; } @media (min-width: 37.5em) { /* line 38, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-name { font-size: 0.9375rem; } } /* line 53, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-reviews { font-size: 0.75rem; font-family: "Roboto", sans-serif; line-height: 1.4; text-indent: 0.9375rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/tick-green-444c0f76e5dee3fa0b1559bf0b9fa17c431c1c6d3de82c7532aff1e0701c075d.svg); background-size: 0.6875rem 0.5625rem; background-repeat: no-repeat; background-position: 0 4px; } @media (min-width: 37.5em) { /* line 53, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-reviews { font-size: 0.8125rem; text-indent: 1.0625rem; background-size: 0.875rem 0.6875rem; margin-top: 0; } } /* line 70, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-reviews span { white-space: nowrap; color: #949494; } /* line 76, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-avatar { margin-top: 0.3125rem; margin-bottom: 0.5rem; } /* line 81, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-avatar img { display: block; border-radius: 50%; width: 2rem; height: 2rem; } @media (min-width: 37.5em) { /* line 81, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-author-avatar img { width: 3.125rem; height: 3.125rem; } } /* line 93, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-price { font-size: 1.5rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: bold; letter-spacing: 0.01em; color: #000000; margin-top: 0.9375rem; } /* line 102, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-price span, .listing-grid-item-price .converted-price { font-style: italic; font-weight: normal; font-size: 15px; color: #949494; } /* line 111, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-additional-info { border-top: 1px solid #D2D2D2; padding: 0.3125rem 0 0.1875rem 0; margin-top: 0.3125rem; } /* line 122, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-bottom { border-bottom: 1px solid #D2D2D2; } /* line 126, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-location { font-size: 0.75rem; color: #949494; font-style: italic; letter-spacing: 0.01em; line-height: normal; } @media (min-width: 37.5em) { /* line 126, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-location { font-size: 0.9375rem; } } /* line 138, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .country-flag { width: 1.125rem; height: auto; vertical-align: middle; position: relative; margin-right: 0.3125rem; top: -2px; } @media (min-width: 37.5em) { /* line 138, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .country-flag { top: -1px; } } /* line 151, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .country-name { position: relative; } /* line 155, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .worldwide-shipping-tag { background-color: #000000; position: absolute; bottom: 0; left: 0; text-transform: uppercase; color: #ffffff; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: bold; font-size: 0.75rem; line-height: 14px; letter-spacing: 0.01em; padding: 0.125rem 0.3125rem; z-index: 2; } /* line 172, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .people-fluid-thumbnail-grid-item, .home-fluid-thumbnail-grid-item { float: none !important; position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 33%; } /* line 182, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .people-fluid-thumbnail-grid, .home-fluid-thumbnail-grid { display: flex; flex-wrap: wrap; } /* line 190, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-hero { padding-top: 1.375rem; padding-bottom: 0; padding-left: 0.625rem; padding-right: 0.625rem; text-align: center; display: flex; justify-content: center; } /* line 199, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ [data-controller="people"] .home-hero { padding-top: 0; } /* line 203, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-hero img { width: 100%; height: auto; margin-left: auto; margin-right: auto; } @media (min-width: 37.5em) { /* line 190, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-hero { padding-top: 1.875rem; } } /* line 214, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-hero .small { max-width: 20.9375rem; } @media (min-width: 37.5em) { /* line 214, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-hero .small { display: none; } } /* line 222, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-hero .large { display: none; max-width: 37.5rem; } @media (min-width: 37.5em) { /* line 222, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .home-hero .large { display: block; } } /* line 232, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container { visibility: hidden; } /* line 236, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-sliders { margin-top: 0.75rem; } /* line 240, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .swiper-button-prev, .listing-grid-item-slider-container .swiper-button-next { display: none; width: 2.75rem; height: 2.75rem; background-color: #ffffff; border-radius: 100%; border: 1px solid #D2D2D2; background-repeat: no-repeat; background-position: 50% 50%; background-size: 1rem 1rem; } @media (min-width: 53.75em) { /* line 252, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .no-touch .listing-grid-item-slider-container .swiper-button-prev, .no-touch .listing-grid-item-slider-container .swiper-button-next { display: block; } } /* line 258, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .swiper-button-prev.swiper-button-disabled, .listing-grid-item-slider-container .swiper-button-next.swiper-button-disabled { pointer-events: all; } /* line 262, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .swiper-button-prev::after, .listing-grid-item-slider-container .swiper-button-next::after { display: none; } /* line 267, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .swiper-button-prev { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/slider-arrow-left-61cd3d44daf83abf924f35fef900e7fa428480734b19eaa96ceb65d227cd8e75.svg); left: 1.5625rem; } /* line 272, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .swiper-button-next { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/slider-arrow-right-d15056a6a3db17b9e25e1070aa567c7d793593c7d9eefc1d585fd669253b4f53.svg); right: 1.5625rem; } /* line 277, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .listing-grid-item { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } /* line 284, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .listing-grid-item-title-container { padding-bottom: 0.625rem; display: none; } /* line 289, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro-mobile { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-bottom: 0.9375rem; padding-right: 0.9375rem; } /* line 297, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro-mobile a { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 0.9375rem; } /* line 302, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro-mobile .title { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem !important; font-weight: bold; text-transform: uppercase; text-decoration-thickness: 3px; } /* line 310, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro-mobile.featured { margin-top: 0.9375rem; } /* line 313, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro-mobile.featured .section-title { font-weight: 300; margin-bottom: 0.3125rem; } @media (min-width: 53.75em) { /* line 289, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro-mobile { display: none; } } /* line 325, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container { display: flex; margin-bottom: 2rem; } @media (min-width: 63em) { /* line 325, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container { margin-bottom: 3.4375rem; padding-right: 25px; } } /* line 335, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro, .listing-grid-item-slider-outro { border-radius: 5px; padding: 1.5625rem 1.25rem; width: 25%; margin-right: 2.1875rem; background-size: cover; background-position: 50% 50%; color: #ffffff; flex-direction: column; justify-content: flex-end; display: none; } @media (min-width: 53.75em) { /* line 335, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro, .listing-grid-item-slider-outro { display: flex; align-items: center; font-size: 1.125rem; width: 12.8125rem; } } /* line 356, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-outro { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } @media (min-width: 53.75em) { /* line 356, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-outro { background-image: none !important; } } /* line 368, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro, .listing-grid-item-slider-outro { background-color: #000000; } /* line 372, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.leather, .listing-grid-item-slider-outro.leather { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/leather-907273ce9a689664db2f358169afdfdd1e1eef89c39e379589d321f71e40a63b.jpg); } /* line 376, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.rubber, .listing-grid-item-slider-outro.rubber { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/rubber-e20e85c312a1cbc2e5e939e68fb984930fa050af27fbc4101388fe1412e62177.jpg); } /* line 380, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.sports-and-underwear, .listing-grid-item-slider-outro.sports-and-underwear { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/sports-and-underwear-a7216ddff57e8dfeff29fa057a12003874edd2cb7a82911191ab5561778d851c.jpg); } /* line 386, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.textile, .listing-grid-item-slider-outro.textile { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/textile-f3e66db5b98106e0209549ab28f4e7602652ebd6c4f09f831366abe6d7b6284c.jpg); } /* line 390, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.footwear, .listing-grid-item-slider-outro.footwear { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/footwear-24af8370e44be5b77393ffec471ab00b5c8cdbfdad55a0d4fdbfb7a382008fc0.jpg); } /* line 394, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.headgear, .listing-grid-item-slider-outro.headgear { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/headgear-59c7e8a67dc3d772c1b0cdea650d6d2e889a637fa55fa0d7b4f0a90efcfe61c4.jpg); } /* line 398, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.fetish-play, .listing-grid-item-slider-outro.fetish-play { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/fetish-play-16cf80cc884a31df73f73bad0c1f3305e07edea212e50873bb03bea826ad1ff6.jpg); } /* line 402, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.misc, .listing-grid-item-slider-intro.miscellaneous, .listing-grid-item-slider-outro.misc, .listing-grid-item-slider-outro.miscellaneous { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/misc-a135006b5e7f7b9a04e0c3f4d79fdaad9ff4d5d80ca6d07635dcadb3242266da.jpg); } /* line 407, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.following, .listing-grid-item-slider-outro.following { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/following-778bf57b9d4691d9d5a926378c5514d1430725ae8ecfbac23c0ceba972b52886.jpg); } /* line 411, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro.featured, .listing-grid-item-slider-outro.featured { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/category-tiles/featured-7dbac6f1a78f082c5f29f7627de405fc8dc232dfc5cd509c0f3d437a7dd18be2.jpg); } /* line 416, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro .title { font-family: "SecondSkinHeadline", "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 2.625rem !important; margin-bottom: 0.75rem; color: #ffffff; line-height: 1; text-underline-offset: 3px; text-decoration-thickness: 3px; } /* line 426, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-outro .title { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: bold; font-size: 1.125rem !important; color: #ffffff; text-transform: uppercase; } /* line 434, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro .inner { width: 100%; } /* line 438, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro .link { display: block; color: #ffffff; font-size: 0.9375rem; text-decoration: underline; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } /* line 445, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-intro .link:hover { text-decoration: none; } /* line 450, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .listing-grid-item-slider { position: relative; width: 100%; } @media (min-width: 53.75em) { /* line 450, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider-container .listing-grid-item-slider { width: calc(100% - 14.375rem); } } /* line 459, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider .listing-grid-item-price { position: relative; margin-top: 1.125rem; font-size: 1.3125rem; } @media (min-width: 48em) { /* line 459, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider .listing-grid-item-price { font-size: 1.5rem; } } /* line 469, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider .listing-grid-item-additional-info { margin-top: 0.3125rem; } /* line 473, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider .listing-grid-item-location { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 0.75rem; } @media (min-width: 48em) { /* line 473, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .listing-grid-item-slider .listing-grid-item-location { font-size: 0.9375rem; } } /* line 482, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .heart-icon { display: none; width: 23px; height: 23px; } @media (min-width: 48em) { /* line 482, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .heart-icon { width: 30px; height: 30px; } } /* line 493, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .wishlist-link .off { display: block; } /* line 497, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .wishlist-link:hover .off { display: none; } /* line 501, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .wishlist-link:hover .hover { display: block; } /* line 505, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .wishlist-link.added .off, .wishlist-link.added .hover { display: none; } /* line 510, app/assets/stylesheets/overrides/views/_home-thumbnail-grid.scss */ .wishlist-link.added .on { display: block; } /* line 3, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-action="home"][data-logged-in="false"] .footer, [data-controller="homepage"][data-action="home"][data-logged-in="false"] .s-header, [data-controller="homepage"][data-action="index"][data-logged-in="false"] .footer, [data-controller="homepage"][data-action="index"][data-logged-in="false"] .s-header { display: none; } /* line 8, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-action="home"][data-logged-in="false"] .s-header-search-overflow, [data-controller="homepage"][data-action="index"][data-logged-in="false"] .s-header-search-overflow { display: none; } /* line 13, app/assets/stylesheets/overrides/views/_home.scss */ [data-logged-in="false"] .s-header-search-overflow, [data-logged-in="false"] .s-header-category-menu { display: none; } /* line 18, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-action="home"][data-logged-in="false"] .page-content { padding: 0; } /* line 22, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-action="home"][data-logged-in="false"] .page-content > .wrapper { margin: 0; padding: 0; max-width: none; } /* line 29, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; height: 4.25rem; border-bottom: 1px solid #4C4C4C; } @media (min-width: 48em) { /* line 29, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header { height: 4.875rem; } } /* line 42, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer { text-align: center; margin-top: 5rem; padding: 1.5625rem; } @media (min-width: 48em) { /* line 42, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer { padding: 1.875rem; display: flex; justify-content: space-between; flex-direction: row; } } /* line 55, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer-left { order: 1; } /* line 58, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer-left p { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; letter-spacing: 0.01em; color: #949494; } /* line 63, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer-left p a, .homepage-footer-left p span { text-decoration: none !important; color: #ffffff; } /* line 71, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer-right { order: 2; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; text-transform: uppercase; letter-spacing: 0.01em; } /* line 77, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer-right p { margin: 0; } /* line 81, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer-right, .homepage-footer-right a { color: #ffffff; } /* line 86, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer-right a { text-decoration: none !important; font-weight: bold; } @media (min-width: 48em) { /* line 92, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-footer p { font-size: 1.125rem !important; } } /* line 402, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="false"] { background-color: #000000; color: #ffffff; } /* line 406, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="false"] a { color: #ffffff; } /* line 411, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-container { max-width: 82.5rem; padding: 0 1.875rem; margin-left: auto; margin-right: auto; } /* line 418, app/assets/stylesheets/overrides/views/_home.scss */ .page-content .homepage-hero h1 { font-family: "SecondSkinHeadline", "Arial Narrow", sans-serif; text-transform: uppercase; color: #ffffff; text-transform: uppercase; font-size: 3rem; line-height: 0.9; margin-bottom: 0; } @media (min-width: 48em) { /* line 418, app/assets/stylesheets/overrides/views/_home.scss */ .page-content .homepage-hero h1 { font-size: 4.25rem; max-width: 30.625rem; text-align: left; } } @media (min-width: 63em) { /* line 418, app/assets/stylesheets/overrides/views/_home.scss */ .page-content .homepage-hero h1 { font-size: 4.625rem; } } /* line 442, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-hero { display: flex; align-items: center; } /* line 446, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-hero > div { width: 50%; } /* line 451, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-hero img { width: 100%; height: auto; float: right; } /* line 457, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-hero-carousel { transform: translateX(30px); } /* line 461, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header-menu a { display: inline-block; padding: 0.625rem 0; margin-right: 0.9375rem; border-bottom: 1px solid transparent; } /* line 467, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header-menu a:hover { border-bottom-color: #00F780; } /* line 472, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-button { display: inline-block; text-align: center; border: 1px solid #ffffff; color: #ffffff; padding: 0.5625rem 1.25rem; border-radius: 6.25rem; } /* line 480, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-button.primary { background-color: white; color: #000000 !important; } /* line 486, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header { display: grid; grid-template-columns: 1fr 1fr 1fr; } /* line 490, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header > div:nth-child(2) { text-align: center; } /* line 494, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header > div:nth-child(3) { text-align: right; } /* line 499, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-header .homepage-button { min-width: 5.625rem; margin-left: 0.9375rem; } /* line 507, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-logo { display: inline-block; width: 7.125rem; height: 1.5625rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/secondskin-logotype-b-e3a74fc1e3113a15cacb69774f4144bf37f68cb6148ef622b5aaa3887d4f2bbd.svg); background-size: 7.125rem 1.5625rem; background-repeat: no-repeat; background-position: 50% 0%; } @media (min-width: 48em) { /* line 507, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-logo { width: 9.0625rem; height: 2rem; background-size: 9.0625rem 2rem; } } /* line 548, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button { height: 2.125rem; line-height: 2rem; background-color: transparent; border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-right: solid 1px #000000; min-width: 0; padding: 0 1.125rem 0 0.9375rem; } /* line 556, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button.selected { border-top: solid 1px #000000; border-bottom: solid 1px #000000; } /* line 564, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button:first-child { border-left: solid 1px #000000; } /* line 568, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button.selected { background-color: #000000; } /* line 572, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button .icon-fix { top: 0; } @media (min-width: 48em) { /* line 572, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button .icon-fix { top: -1px; } } /* line 581, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-toggle-container { margin-bottom: 0; } /* line 585, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar .icon-dropdown { top: 50%; transform: translateY(-3px); font-size: 0.5rem; color: #000000; } @media (min-width: 48em) { /* line 585, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar .icon-dropdown { transform: none; top: 0; } } /* line 597, app/assets/stylesheets/overrides/views/_home.scss */ .home-list-title, .browsing-list-item-title { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; font-weight: normal; } /* line 604, app/assets/stylesheets/overrides/views/_home.scss */ .home-list-image { border-radius: 0; } /* line 608, app/assets/stylesheets/overrides/views/_home.scss */ .home-list-author-details, .browsing-list-item-author-details { height: 3.125rem; line-height: 3.125rem; margin-left: 4.375rem; } /* line 615, app/assets/stylesheets/overrides/views/_home.scss */ .home-list-avatar img, .browsing-list-item-avatar img { width: 3.125rem; height: 3.125rem; border-radius: 3.125rem; } /* line 622, app/assets/stylesheets/overrides/views/_home.scss */ .home-list-item-price-value, .browsing-list-item-price-value { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.625rem; } /* line 628, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-show-filters-button { height: 2rem; background-color: transparent; border: solid 1px #000000; border-radius: 0; line-height: 2rem; padding: 0; } /* line 636, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-show-filters-button.selected { background-color: #00F780; border-color: #00F780; color: #000000; } /* line 643, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-main { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; text-transform: uppercase; font-size: 1.125rem; font-weight: bold; display: inline-block; width: 100%; margin-top: 0.75rem; display: inline-block; } /* line 654, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-main:hover span { border-bottom: solid 3px #00F780; } /* line 658, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-main:first-child { margin-top: 0; } /* line 662, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-main.selected.has-subcategories { border-bottom: none; margin-bottom: 0.3125rem; } /* line 667, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-main.selected span { border-bottom: solid 3px #00F780; } /* line 671, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-sub { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; text-transform: uppercase; font-size: 1.125rem; margin-left: 0; text-transform: none; margin: 0.5rem 0; } /* line 679, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-sub:hover { text-decoration: underline; } /* line 684, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-sub.back { padding-left: 1.375rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/slider-arrow-left-61cd3d44daf83abf924f35fef900e7fa428480734b19eaa96ceb65d227cd8e75.svg); background-position: 0 45%; background-size: 0.75rem 0.75rem; background-repeat: no-repeat; } /* line 692, app/assets/stylesheets/overrides/views/_home.scss */ .home-categories-link, .home-categories-main, .home-categories-sub { color: #000000; } /* line 698, app/assets/stylesheets/overrides/views/_home.scss */ .category-heroes { display: flex; flex-wrap: wrap; justify-content: space-between; display: none; } @media (min-width: 60em) { /* line 698, app/assets/stylesheets/overrides/views/_home.scss */ .category-heroes { display: flex; margin-top: 0.9375rem; margin-bottom: 2.0625rem; } } /* line 711, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="true"] .page-content { position: relative; } /* line 714, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="true"] .page-content .wrapper { position: relative; max-width: 95rem; } /* line 719, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="true"] .page-content h1 { display: none; } @media (min-width: 53.75em) { /* line 719, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="true"] .page-content h1 { display: block; color: #ffffff; font-size: 1.875rem; margin-bottom: 2.1875rem; } } /* line 730, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="true"] .page-content .section-title { font-size: 1.5rem; } @media (min-width: 53.75em) { /* line 730, app/assets/stylesheets/overrides/views/_home.scss */ [data-controller="homepage"][data-logged-in="true"] .page-content .section-title { font-size: 1.875rem; } } /* line 739, app/assets/stylesheets/overrides/views/_home.scss */ .header-underlay { height: 8.875rem; background-color: #000000; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/home-header-background-14b6e5fa5c23b89e7c59374cd91ba934cc7b7395bc0c92b09c3937f1009ed765.jpg); background-position: 100% 0%; background-repeat: no-repeat; background-size: contain; } @media (min-width: 53.75em) { /* line 739, app/assets/stylesheets/overrides/views/_home.scss */ .header-underlay { height: 12.75rem; } } /* line 752, app/assets/stylesheets/overrides/views/_home.scss */ .header-underlay + .page-content { margin-top: -8.4375rem; } @media (min-width: 53.75em) { /* line 752, app/assets/stylesheets/overrides/views/_home.scss */ .header-underlay + .page-content { margin-top: -13.125rem; } } /* line 820, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-text { display: block; margin-left: 0; } /* line 826, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button { width: 50%; } @media (min-width: 48em) { /* line 826, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button { width: auto; min-width: 7.5em; } } /* line 835, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-button-group-button [class^="icon-"] { display: none; } /* line 840, app/assets/stylesheets/overrides/views/_home.scss */ .homepage-content .button { display: inline-block; } /* line 844, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filters { margin-bottom: 0.9375rem; } /* line 848, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filters .pretty-select, .custom-filters select { width: 100%; } /* line 853, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filter-title { position: relative; font-size: 1.125rem; margin-bottom: 0.5rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: normal; border-bottom: none; color: #ffffff; cursor: pointer; } /* line 864, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filter-title .dropdown-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0.75rem; } /* line 872, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filter-options label { text-transform: none; color: #ffffff; } /* line 877, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filter-checkbox-container { margin-bottom: 0.5rem; } /* line 881, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filter-checkbox-label { font-size: 0.875rem; font-weight: normal; } /* line 886, app/assets/stylesheets/overrides/views/_home.scss */ .custom-filter-checkbox-label-text { position: relative; top: -1px; } /* line 891, app/assets/stylesheets/overrides/views/_home.scss */ #desktop-filters { margin-top: 0.9375rem; } /* line 895, app/assets/stylesheets/overrides/views/_home.scss */ .home-toolbar-show-filters-button-container { width: 100%; padding-right: 0; float: none; } /* line 901, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-container.open { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 100; } /* line 911, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel { position: fixed; display: flex; z-index: 100; flex-direction: column; justify-content: space-between; top: 0; right: -20rem; width: 20rem; bottom: 0; background-color: #000000; transition: right 0.6s; } @media (min-width: 48em) { /* line 911, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel { right: -23.4375rem; width: 23.4375rem; } } /* line 929, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-container.open .s-filters-panel { right: 0; } /* line 934, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-inner { padding: 2.1875rem 0.9375rem 0 0.9375rem; overflow-y: scroll; } /* line 938, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-inner .title { line-height: 1; display: inline-block; color: #ffffff; border-bottom: 2px solid #00F780; } /* line 946, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-footer { display: flex; border-top: 1px solid #4C4C4C; padding-left: 0.9375rem; padding-right: 0.9375rem; } /* line 952, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-footer .button-holder { width: 50%; margin-top: 0.9375rem; margin-bottom: 0.9375rem; } /* line 957, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-footer .button-holder:first-child { padding-right: 0.375rem; } /* line 961, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-footer .button-holder:last-child { padding-left: 0.375rem; } /* line 966, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-footer .ss-button { width: 100%; margin: 0; } /* line 972, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-inner .search-form-category { display: block; border: 1px solid #ffffff; margin-bottom: 0.75rem; } /* line 977, app/assets/stylesheets/overrides/views/_home.scss */ .s-filters-panel-inner .search-form-category select { width: 100%; min-height: 2.4375rem; height: 2.4375rem; } /* line 984, app/assets/stylesheets/overrides/views/_home.scss */ [data-toggle="#home-toolbar-categories-menu"] { background-color: transparent !important; border: 1px solid #949494 !important; border-radius: 0 !important; } /* line 989, app/assets/stylesheets/overrides/views/_home.scss */ .toggled[data-toggle="#home-toolbar-categories-menu"] { color: #000000 !important; border: 1px solid #949494 !important; } @media (min-width: 48em) { /* line 995, app/assets/stylesheets/overrides/views/_home.scss */ .search-results-area { margin-top: 0.625rem; } } @media (min-width: 63em) { /* line 995, app/assets/stylesheets/overrides/views/_home.scss */ .search-results-area { margin-top: 2.1875rem; } } /* line 1004, app/assets/stylesheets/overrides/views/_home.scss */ [data-action="wishlist"] .search-results-area { margin-top: 0.625rem; } @media (min-width: 48em) { /* line 1004, app/assets/stylesheets/overrides/views/_home.scss */ [data-action="wishlist"] .search-results-area { margin-top: 1.5625rem; } } /* line 1012, app/assets/stylesheets/overrides/views/_home.scss */ .search-results-area h2 { font-size: 1.5rem; } /* line 1018, app/assets/stylesheets/overrides/views/_home.scss */ #home-toolbar-categories-menu a { padding-left: 0.75rem; } /* line 1021, app/assets/stylesheets/overrides/views/_home.scss */ #home-toolbar-categories-menu a.toggle-menu-subitem { padding-left: 1.5625rem; } /* line 1022, app/assets/stylesheets/overrides/views/_home.scss */ #home-toolbar-categories-menu a.toggle-menu-subitem::before { content: "-\0000a0\0000a0"; } /* line 1031, app/assets/stylesheets/overrides/views/_home.scss */ .s-toggle-menu { position: absolute; top: 2.375rem; left: 0; z-index: 10; margin-top: 0.625rem; padding-top: 0.9375rem; padding-bottom: 0.9375rem; background-color: #ffffff; border: 1px solid #D2D2D2 !important; } /* line 1042, app/assets/stylesheets/overrides/views/_home.scss */ .s-toggle-menu a { display: block; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.4375rem; padding-bottom: 0.4375rem; } /* line 1049, app/assets/stylesheets/overrides/views/_home.scss */ .s-toggle-menu a:hover { background-color: #F4F5F5; } @media (min-width: 48em) { /* line 1031, app/assets/stylesheets/overrides/views/_home.scss */ .s-toggle-menu { min-width: auto; position: absolute; z-index: 9999; min-width: 21.875rem; max-width: 28.125rem; } } /* line 1069, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved { cursor: pointer; } /* line 1073, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved.on .s-filter-preloved-container { background-color: #00F780; } /* line 1076, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved.on .s-filter-preloved-container .s-filter-preloved-status { color: #000000; } /* line 1080, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved.on .s-filter-preloved-container .s-filter-preloved-status { right: auto; left: 0.1875rem; } /* line 1085, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved.on .s-filter-preloved-container .s-filter-preloved-button { right: 0.1875rem; left: auto; } /* line 1091, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved-container { position: relative; background-color: #000000; border-radius: 1.5625rem; height: 1.375rem; width: 3.125rem; } /* line 1099, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved-container .title { font-size: 0.875rem; } /* line 1103, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved-button { position: absolute; top: 0.1875rem; left: 0.1875rem; background-color: #ffffff; width: 1rem; height: 1rem; border-radius: 1rem; } /* line 1113, app/assets/stylesheets/overrides/views/_home.scss */ .s-filter-preloved-status { position: absolute; top: 0; bottom: 0; right: 0.1875rem; text-align: center; color: #ffffff; font-size: 0.625rem; width: 1.75rem; height: 1.375rem; line-height: 1.375rem; } /* line 1126, app/assets/stylesheets/overrides/views/_home.scss */ .wishlist-empty { text-align: center; max-width: 20.625rem; margin-left: auto; margin-right: auto; margin-top: 1.5625rem; } /* line 1133, app/assets/stylesheets/overrides/views/_home.scss */ .wishlist-empty p { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; margin-bottom: 1.5625rem; } /* line 1138, app/assets/stylesheets/overrides/views/_home.scss */ .wishlist-empty h2 { font-size: 1.875rem; margin-top: 1.5625rem; } /* line 1144, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup { position: relative; border-bottom: solid 1px #ffffff; max-width: 26.25rem; margin-top: 1.5625rem; border: 1px solid #4C4C4C; margin-left: auto; margin-right: auto; } /* line 1154, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup label { display: inline-block; margin: 0; } /* line 1159, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup input[type="email"] { background-color: transparent; border: none; color: #ffffff; display: inline-block; width: 100%; padding-right: 8ch; line-height: 2.875rem; padding-left: 0.75rem; } /* line 1169, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup input[type="email"]:focus { outline: none; } /* line 1174, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup button { font-size: 1.125rem; position: absolute; right: 0.75rem; top: 0; right: 0; display: inline-block; height: 3rem; background-color: #00F780; padding: 0 1.125rem; margin: 0; text-transform: none; } /* line 1188, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup input::-webkit-input-placeholder { color: #ffffff; } /* line 1192, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup input::-moz-placeholder { color: #ffffff; } /* line 1196, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup input:-ms-input-placeholder { color: #ffffff; } /* line 1200, app/assets/stylesheets/overrides/views/_home.scss */ #newsletter-signup input:-moz-placeholder { color: #ffffff; } /* line 1208, app/assets/stylesheets/overrides/views/_home.scss */ .nugget { background-color: #00F780; padding: 1.25rem 0.9375rem 1.125rem; border-radius: 5px; margin-bottom: 2rem; } @media (min-width: 48em) { /* line 1208, app/assets/stylesheets/overrides/views/_home.scss */ .nugget { margin-bottom: 3.4375rem; } } /* line 1219, app/assets/stylesheets/overrides/views/_home.scss */ .nugget .title { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: bold; line-height: 1; font-size: 1.125rem; text-transform: uppercase; color: #ffffff; margin-bottom: 0.1875rem; } @media (min-width: 48em) { /* line 1219, app/assets/stylesheets/overrides/views/_home.scss */ .nugget .title { font-size: 1.5rem; } } /* line 1233, app/assets/stylesheets/overrides/views/_home.scss */ .nugget p { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 0.9375rem !important; margin-bottom: 0; line-height: 1.3 !important; } @media (min-width: 48em) { /* line 1233, app/assets/stylesheets/overrides/views/_home.scss */ .nugget p { font-size: 1.125rem !important; } } /* line 1244, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result, #need_country_content { width: 100%; max-width: 26.25rem; text-align: center; } /* line 1250, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result h2, #need_country_content h2 { font-family: "SecondSkinHeadline", "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 3.25rem; line-height: 0.8; margin-bottom: 0.5rem; } @media (min-width: 48em) { /* line 1250, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result h2, #need_country_content h2 { font-size: 4rem; } } /* line 1261, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result p, #need_country_content p { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 0.9375rem; } /* line 1266, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result select, #need_country_content select { margin-top: 0.5rem; width: 100%; } /* line 1271, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result .ss-button, #need_country_content .ss-button { margin-bottom: 0; } /* line 1275, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result .lightbox-content, #need_country_content .lightbox-content { padding-top: 1.875rem; padding-bottom: 1.875rem; } @media (min-width: 48em) { /* line 1275, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result .lightbox-content, #need_country_content .lightbox-content { min-width: 26.25rem; padding: 2.8125rem; } } /* line 1286, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result { max-width: 29.5rem; } @media (min-width: 48em) { /* line 1289, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result .lightbox-content { min-width: 29.5rem; padding: 2.1875rem; } } /* line 1296, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result p { margin: 1.125rem 0; } /* line 1300, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result .ss-button { width: 100%; margin-bottom: 0.625rem; } @media (min-width: 48em) { /* line 1300, app/assets/stylesheets/overrides/views/_home.scss */ #competition_result .ss-button { width: 45%; margin: 0 0.25rem; } } /* line 1311, app/assets/stylesheets/overrides/views/_home.scss */ .lightbox-content { border-radius: 0.3125rem; } /* line 1315, app/assets/stylesheets/overrides/views/_home.scss */ a.lightbox-x { color: #000000; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/cross-8fcd811d1c386aeff012ad0bedc68a7a1a031039a3694785b7e02adcd930547c.svg); background-position: center center; background-repeat: no-repeat; } /* line 1321, app/assets/stylesheets/overrides/views/_home.scss */ a.lightbox-x .icon-remove { display: none; } /* line 1, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-title-inside { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 2rem !important; line-height: 1.1 !important; font-weight: 300 !important; margin-bottom: 0.9375rem !important; color: #000000 !important; text-align: left !important; padding-right: 2.8125rem; margin-bottom: 0.3125rem !important; } @media (min-width: 48em) { /* line 1, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-title-inside { margin-top: 1.5625rem !important; font-size: 2.25rem !important; } } @media (min-width: 60em) { /* line 1, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-title-inside { font-size: 2.625rem !important; } } /* line 23, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-price-amount { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.75rem; color: #000000; line-height: 1.1; } @media (min-width: 48em) { /* line 23, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-price-amount { font-size: 1.75rem !important; } } @media (min-width: 60em) { /* line 23, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-price-amount { font-size: 2.25rem !important; } } /* line 38, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-price-amount .approx-price { display: block; font-style: italic; font-weight: normal; font-size: 18px; color: #949494; } @media (min-width: 48em) { /* line 60, app/assets/stylesheets/overrides/views/_listing.scss */ .action-buttons .col-6:first-child { padding-right: 0.3125rem; } /* line 64, app/assets/stylesheets/overrides/views/_listing.scss */ .action-buttons .col-6:nth-child(2) { padding-left: 0.3125rem; } } @media (min-width: 60em) { /* line 70, app/assets/stylesheets/overrides/views/_listing.scss */ .action-buttons .col-6:first-child { padding-right: 0.75rem; } /* line 74, app/assets/stylesheets/overrides/views/_listing.scss */ .action-buttons .col-6:nth-child(2) { padding-left: 0.75rem; } } /* line 80, app/assets/stylesheets/overrides/views/_listing.scss */ .enabled-book-button { background-color: #00F780; color: #000000; border-radius: 0; line-height: 3.75rem; margin-top: 0.3125rem; } /* line 87, app/assets/stylesheets/overrides/views/_listing.scss */ .enabled-book-button:hover { color: #000000; background-color: #00ed7b; } @media (min-width: 48em) { /* line 80, app/assets/stylesheets/overrides/views/_listing.scss */ .enabled-book-button { font-size: 1.125rem; } } @media (min-width: 60em) { /* line 80, app/assets/stylesheets/overrides/views/_listing.scss */ .enabled-book-button { font-size: 1.375rem; } } /* line 101, app/assets/stylesheets/overrides/views/_listing.scss */ .message-button .content, .book-button .content, .enabled-book-button .content, .disabled-book-button .content { height: 3.75rem; } /* line 108, app/assets/stylesheets/overrides/views/_listing.scss */ .message-button { border-radius: 0; background: #4a90e2; color: white; text-align: center; cursor: pointer; margin: 0.75em 0; padding: 0 1.5em; height: 3.75em; border: 0; display: table; line-height: 1.5em; font-size: 22px; height: 60px; line-height: 24px; padding-bottom: 3px; background-color: #D2D2D2; color: #000000; width: 100%; line-height: 3.75rem; margin-top: 0.3125rem; padding: 0; } /* line 116, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .message-button .content { display: table-cell; vertical-align: middle; text-align: center; } /* line 122, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .message-button:hover { background: #3483de; color: white; } /* line 127, app/assets/stylesheets/overrides/mixins/../../mixins/_forms.scss */ .message-button:active { background: #2275d7; color: white; } /* line 118, app/assets/stylesheets/overrides/views/_listing.scss */ .message-button:hover { color: #000000; background-color: #c5c5c5; } @media (min-width: 48em) { /* line 108, app/assets/stylesheets/overrides/views/_listing.scss */ .message-button { font-size: 1.125rem; } } @media (min-width: 60em) { /* line 108, app/assets/stylesheets/overrides/views/_listing.scss */ .message-button { font-size: 1.375rem; } } /* line 132, app/assets/stylesheets/overrides/views/_listing.scss */ .delivery-opts { padding: 0; list-style-type: none; } /* line 136, app/assets/stylesheets/overrides/views/_listing.scss */ .delivery-opts [class^="flag-"] { position: relative; top: -2px; } /* line 142, app/assets/stylesheets/overrides/views/_listing.scss */ .delivery-label .converted-price { font-size: 85%; font-style: italic; font-weight: normal; color: #949494; } /* line 149, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-custom-fields { border-top: solid 1px #d2d2d2; margin: 1.5625rem 0; } /* line 154, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-custom-fields .row { margin-bottom: 0; } /* line 158, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-field { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; letter-spacing: 0.01em; border-bottom: solid 1px #d2d2d2; padding: 0.9375rem 0; color: #000000; } /* line 166, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-field-title { text-transform: uppercase; } @media (min-width: 53.75em) { /* line 166, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-field-title { display: inline-block; width: 100%; max-width: 7.5rem; font-size: 1.125rem; } } @media (min-width: 53.75em) { /* line 177, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-field-value { display: inline-block; } } /* line 183, app/assets/stylesheets/overrides/views/_listing.scss */ .submit-payment-form-link img { display: block; margin-left: auto; margin-right: auto; } @media (min-width: 48em) { /* line 183, app/assets/stylesheets/overrides/views/_listing.scss */ .submit-payment-form-link img { margin-left: 0; } } @media (min-width: 48em) { /* line 193, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-details-mobile { display: none; } } /* line 199, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-details-desktop { display: none; } @media (min-width: 48em) { /* line 199, app/assets/stylesheets/overrides/views/_listing.scss */ .listing-details-desktop { display: block; } } /* line 207, app/assets/stylesheets/overrides/views/_listing.scss */ .buyer-protection { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; color: #949494; border: 1px solid #D2D2D2; padding: 0.9375rem; line-height: 1.3; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/shield-a16937e0ec2444a4a93fa693f908996fc244632065de04c7f3bff8e364bc2059.svg); background-size: 2rem 2.5rem; background-repeat: no-repeat; background-position: 0.9375rem 1.0625rem; padding-left: 3.875rem; margin-bottom: 0.9375rem; min-height: 4.5rem; } /* line 1, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author { display: flex; justify-content: space-between; padding-bottom: 0.75rem; } /* line 7, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author-avatar { position: relative; order: 2; width: auto; height: auto; } /* line 14, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author-avatar-image { width: 7rem; height: 7rem; border-radius: 3.5rem; } /* line 20, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author-details { position: relative; padding: 0; margin: 0; min-height: 0; order: 1; padding-right: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 32, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author-name { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.875rem; font-weight: 300; height: auto; line-height: normal; } /* line 40, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author-contact-button { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; margin-bottom: 0; color: #000000; font-size: 1.125rem; padding-bottom: 0; background-color: #dbdcde; border-radius: 0; width: auto; text-transform: uppercase; height: 3.75rem; } /* line 53, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author-activity { padding-bottom: 0.5625rem; } /* line 57, app/assets/stylesheets/overrides/views/_listings.scss */ .listing-author-activity-icon { margin-top: -2px; } /* line 61, app/assets/stylesheets/overrides/views/_listings.scss */ .submit-payment-form-link img { width: 100%; height: auto; } /* line 1, app/assets/stylesheets/overrides/views/_message.scss */ .message-avatar-image { width: 3.125rem; height: 3.125rem; border-radius: 3.125rem; } /* line 7, app/assets/stylesheets/overrides/views/_message.scss */ .message-bubble, .message-bubble-arrow-to-left, .message-bubble-arrow-to-right { background-color: #dbdcde; padding: 1.25rem; } /* line 14, app/assets/stylesheets/overrides/views/_message.scss */ .message-time-ago, .message-time-ago-left, .message-time-ago-right { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; color: #949494; font-style: italic; letter-spacing: normal; } /* line 23, app/assets/stylesheets/overrides/views/_message.scss */ .message-time-ago a, .message-time-ago-left a, .message-time-ago-right a { color: #000000; font-style: normal; } /* line 29, app/assets/stylesheets/overrides/views/_message.scss */ .message-content-container-left, .message-content-container-right { padding: 0 3.75rem; } @media (min-width: 48em) { /* line 29, app/assets/stylesheets/overrides/views/_message.scss */ .message-content-container-left, .message-content-container-right { padding: 0 5.625rem; } } /* line 38, app/assets/stylesheets/overrides/views/_message.scss */ .message-row { margin-bottom: 1.875rem; } /* line 42, app/assets/stylesheets/overrides/views/_message.scss */ .message-avatar-padding { margin-left: 0; margin-right: 0; } /* line 1, app/assets/stylesheets/overrides/views/_footer.scss */ .footer { background-color: #000000; color: #ffffff; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; text-transform: uppercase; } /* line 9, app/assets/stylesheets/overrides/views/_footer.scss */ .footer a { color: #ffffff; } /* line 14, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__logo { display: block; background: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/logo-mark-white-5e17261eaceac221067b01c12dd24320abdafb6c0691fd2e6dffe8130efa946f.svg) 50% 50%/21px 73px no-repeat; width: 1.3125rem; height: 4.5625rem; margin-left: auto; margin-right: auto; } /* line 23, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__content { padding: 0.9375rem 1.5625rem; max-width: 84.375rem; } /* line 28, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__content > .row { margin-bottom: 0; } /* line 32, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__left { text-align: center; } @media (min-width: 48em) { /* line 32, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__left { text-align: left; } } /* line 40, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__right { text-align: center; } @media (min-width: 48em) { /* line 40, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__right { text-align: right; } } /* line 48, app/assets/stylesheets/overrides/views/_footer.scss */ .footer li, .footer a { line-height: 4.5625rem; font-weight: bold; cursor: pointer; } /* line 55, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__links { margin: 0; padding: 0; list-style-type: none; } /* line 61, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__links li { display: inline-block; } /* line 65, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__links li a { padding: 0 0.5rem; } /* line 69, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__links li:first-child a { padding-left: 0; } /* line 73, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__links .change-country a { padding-top: 0.9375rem; padding-bottom: 0.9375rem; cursor: pointer; } /* line 79, app/assets/stylesheets/overrides/views/_footer.scss */ .footer__links .price-locale { position: relative; top: -2px; width: 1.5625rem; display: inline-block; margin-right: 0.3125rem; vertical-align: middle; } /* line 1, app/assets/stylesheets/overrides/views/_preauthorize.scss */ .preauthorize-section h2 { margin-top: 2.1875rem; font-size: 1.625rem; } @media (min-width: 48em) { /* line 1, app/assets/stylesheets/overrides/views/_preauthorize.scss */ .preauthorize-section h2 { font-size: 1.875rem; } } /* line 10, app/assets/stylesheets/overrides/views/_preauthorize.scss */ .preauthorize-section .row { margin-bottom: 0; } /* line 14, app/assets/stylesheets/overrides/views/_preauthorize.scss */ [data-controller="preauthorize_transactions"] h1 { margin-bottom: 0 !important; } /* line 18, app/assets/stylesheets/overrides/views/_preauthorize.scss */ .preauthorize-section a { text-decoration: underline; } /* line 21, app/assets/stylesheets/overrides/views/_preauthorize.scss */ .preauthorize-section a:hover { text-decoration: none; } /* line 26, app/assets/stylesheets/overrides/views/_preauthorize.scss */ .preauthorize-section p { margin-bottom: 1rem; } /* line 1, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-avatar { position: relative; padding-right: 1.25rem; width: 4.375rem; height: auto; display: none; } @media (min-width: 48em) { /* line 1, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-avatar { display: block; } } /* line 13, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-avatar > a > img { width: 3rem; height: 3rem; border-radius: 3rem; } /* line 19, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-author-name { color: #949494; font-size: 0.9375rem; margin-top: 0.3125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* line 28, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-message p:last-child { margin-bottom: 0; } /* line 32, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-message { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; line-height: 1.22; margin-bottom: 0rem; } /* line 38, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-message p { font-size: 1.125rem !important; line-height: 1.22 !important; } /* line 44, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-author { color: #949494; font-size: 0.9375rem; font-style: italic; margin-top: 0.1875rem; } /* line 50, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-author a { color: #949494; text-decoration: underline; } /* line 54, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-author a:hover { text-decoration: none; } /* line 60, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-icon { width: auto; } /* line 64, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-details { padding-left: 0; padding-bottom: 0.625rem; margin-bottom: 0.625rem; } @media (min-width: 48em) { /* line 64, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-details { padding-bottom: 0.9375rem; margin-bottom: 0.9375rem; } } /* line 76, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-positive-icon { width: 1.8125rem; height: 1.8125rem; background-size: 1.8125rem 1.8125rem; background-repeat: no-repeat; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/positive-3ecf6401b80b7e8df0175e6ff16cb0b378d65045182da240f549a089889332f0.svg); } /* line 84, app/assets/stylesheets/overrides/views/_testimonial.scss */ .testimonial-negative-icon { width: 1.8125rem; height: 1.8125rem; background-size: 1.8125rem 1.8125rem; background-repeat: no-repeat; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/negative-30d6eb5b612286871051bb31fcd146373756e254f0f5a027c444b2b9034d2dc5.svg); } /* line 1, app/assets/stylesheets/overrides/views/_account-settings.scss */ .paypal-wizard { border: none; margin-bottom: 0; } /* line 6, app/assets/stylesheets/overrides/views/_account-settings.scss */ .paypal-wizard-content { padding: 0; } /* line 14, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row { padding: 1.25rem; border-radius: 0; } /* line 19, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row label { margin-top: 0; } /* line 23, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-text { margin-left: 0; } /* line 27, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-icon { display: none; } /* line 31, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-form { padding: 0; } /* line 35, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-form button { margin-bottom: 0; } /* line 39, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings p { padding: 0; } /* line 43, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings #delete_account_button { margin-left: 0; } /* line 47, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-text { padding: 0; } /* line 51, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-delete { padding: 0; margin: 0.5rem 0; } /* line 56, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row { padding-bottom: 0; } /* line 60, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-send-notification, .account-settings .account-settings-row .account-settings-email-row-address, .account-settings .account-settings-row .account-settings-email-row-confirmed { padding-left: 0; } /* line 68, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-address { width: 16rem; } /* line 72, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row, .account-settings .account-settings-row .account-settings-email-row-highlight { padding: 1.25rem; } /* line 77, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row { border-width: 1px; } /* line 81, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-text { margin-bottom: 0.5rem; } /* line 85, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings-row p:last-child { margin-bottom: 0; } @media (min-width: 53.75em) { /* line 89, app/assets/stylesheets/overrides/views/_account-settings.scss */ .account-settings .account-settings-row .account-settings-email-row-delete { margin: 0; } } /* line 95, app/assets/stylesheets/overrides/views/_account-settings.scss */ .settings-email-mobile-label input[type="checkbox"] { position: relative; top: -2px; } /* line 100, app/assets/stylesheets/overrides/views/_account-settings.scss */ .settings-section { min-height: 18.75rem; } /* line 104, app/assets/stylesheets/overrides/views/_account-settings.scss */ .payment-settings { max-width: 40rem; } /* line 108, app/assets/stylesheets/overrides/views/_account-settings.scss */ #stripe_account_form_birth_date_1i, #stripe_account_form_birth_date_2i, #stripe_account_form_birth_date_3i { width: auto; } /* line 1, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-other-party-name { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; } /* line 6, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-last-message-at { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-style: italic; font-size: 1rem; color: #949494; letter-spacing: normal; } /* line 14, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-context { font-size: 0.9375rem; color: #949494; } /* line 18, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-context a { color: #949494; text-decoration: underline; } /* line 24, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status-icon > [class^="icon-"] { top: -1px; } /* line 28, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-avatar { width: 3.125rem; height: 3.125rem; border-radius: 3.125rem; } /* line 34, app/assets/stylesheets/overrides/views/_conversation.scss */ #no_conversations { margin-top: 0.9375rem; } /* line 38, app/assets/stylesheets/overrides/views/_conversation.scss */ #conversations { max-width: 54.375rem; margin-left: auto; margin-right: auto; } /* line 44, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status { font-size: 0.8125rem; line-height: 1.4; } /* line 51, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status-icon i { display: inline-block; width: 1.8125rem; height: 1.8125rem; background-size: 1.8125rem 1.8125rem; } /* line 58, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status-icon i:before { content: ""; } /* line 62, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status-icon .confirmed { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/status-confirmed-28cbabbbf5328fa71f1e6485e8936327219d0ca8e882f1c111d4a7fe84dfbc47.svg); } /* line 66, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status-icon .waiting-other { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/status-waiting-other-d9c9fa960075a539f9d4613177fe817e98c3656e05de65a9ebe56f59f999da3d.svg); } /* line 70, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status-icon .waiting-you { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/status-waiting-you-e48d1ff607c2547f9c6d1d06c6995ba6020982e985592970a959a231762b5b2c.svg); } /* line 74, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-list-status-icon .rejected { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/status-rejected-96317424f14da4521962213f98fa4729811e6f87a830808bcffc5aea72cb23a0.svg); } /* line 79, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-details-container { padding-bottom: 0.625rem; } /* line 83, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-details { margin-top: 0.1875rem; padding-left: 4.5em; } @media (min-width: 48em) { /* line 83, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-details { padding-left: 3.75em; } } /* line 92, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-other-party-name { margin-bottom: 0.1875rem; } /* line 96, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-title-link, .conversation-title-link-unread { font-size: 1rem; text-decoration: underline; margin-bottom: 0.1875rem; } /* line 102, app/assets/stylesheets/overrides/views/_conversation.scss */ .conversation-title-link:hover, .conversation-title-link-unread:hover { text-decoration: none; } /* line 5, app/assets/stylesheets/overrides/views/_listing_image_carousel.scss */ .listing-image-frame { background-color: #000000; } /* line 1, app/assets/stylesheets/overrides/views/_people.scss */ [data-controller="people"][data-action="show"] .people-profile-show { padding-top: 1.5625rem; } /* line 5, app/assets/stylesheets/overrides/views/_people.scss */ [data-controller="people"][data-action="show"] .wrapper > h1 { display: none; } /* line 16, app/assets/stylesheets/overrides/views/_people.scss */ .people-header { font-size: 1.625rem; margin-bottom: 0.625rem; padding-bottom: 0.625rem; letter-spacing: normal; } @media (min-width: 48em) { /* line 16, app/assets/stylesheets/overrides/views/_people.scss */ .people-header { font-size: 1.875rem; margin-bottom: 0.9375rem; } } /* line 28, app/assets/stylesheets/overrides/views/_people.scss */ .people-fluid-thumbnail-grid-container { overflow: hidden; } /* line 32, app/assets/stylesheets/overrides/views/_people.scss */ #people-testimonials, #profile-listings-list { margin-bottom: 4.6875rem; } /* line 37, app/assets/stylesheets/overrides/views/_people.scss */ .people-image { display: block !important; margin-bottom: 0.625rem; max-width: 18.75rem; margin-left: auto; margin-right: auto; } @media (min-width: 48em) { /* line 37, app/assets/stylesheets/overrides/views/_people.scss */ .people-image { max-width: none; } } /* line 48, app/assets/stylesheets/overrides/views/_people.scss */ .people-image > img { border-radius: 50%; } /* line 53, app/assets/stylesheets/overrides/views/_people.scss */ .follow-button, .profile-contact-link { border: solid 1px #949494; background-color: transparent; color: #000000; font-size: 1.125rem; height: 3rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } @media (min-width: 48em) { /* line 63, app/assets/stylesheets/overrides/views/_people.scss */ .people-image-column { width: 33.33%; padding-right: 1.875rem; } } @media (min-width: 60em) { /* line 63, app/assets/stylesheets/overrides/views/_people.scss */ .people-image-column { width: 25%; } } /* line 73, app/assets/stylesheets/overrides/views/_people.scss */ .people-image-column .profile-title { font-size: 2.25rem; margin-bottom: 0.9375rem; text-align: left; margin-top: 0; margin-bottom: 0; text-align: center; } @media (min-width: 48em) { /* line 73, app/assets/stylesheets/overrides/views/_people.scss */ .people-image-column .profile-title { text-align: center; font-size: 1.75rem; margin-bottom: 0.75rem; } } @media (min-width: 48em) { /* line 89, app/assets/stylesheets/overrides/views/_people.scss */ .people-main-column { width: 66.66%; } } @media (min-width: 60em) { /* line 89, app/assets/stylesheets/overrides/views/_people.scss */ .people-main-column { width: 75%; } } /* line 101, app/assets/stylesheets/overrides/views/_people.scss */ #profile-followers-list .fluid-thumbnail-grid-image-image-container, #profile-followed-people-list .fluid-thumbnail-grid-image-image-container { padding-bottom: 100%; } /* line 106, app/assets/stylesheets/overrides/views/_people.scss */ #load-more-followers, #load-more-followed-people, #load-more-testimonials, #load-more-listings { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; text-transform: uppercase; color: #000000; font-weight: bold; font-size: 1.125rem; margin-top: 1.5625rem; } /* line 118, app/assets/stylesheets/overrides/views/_people.scss */ .profile-about-me p { font-family: "SecondSkinBody", sans-serif; font-weight: 300; letter-spacing: 0.01em; } @media (min-width: 63em) { /* line 118, app/assets/stylesheets/overrides/views/_people.scss */ .profile-about-me p { font-size: 1.125rem !important; line-height: 2rem !important; } } /* line 129, app/assets/stylesheets/overrides/views/_people.scss */ .people-custom-fields { margin-bottom: 1.5625rem; border-bottom: solid 1px #D2D2D2; } /* line 134, app/assets/stylesheets/overrides/views/_people.scss */ .people-custom-fields-title { text-transform: uppercase; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } /* line 139, app/assets/stylesheets/overrides/views/_people.scss */ .people-custom-field { padding-top: 0.75rem; border-top: solid 1px #D2D2D2; } /* line 144, app/assets/stylesheets/overrides/views/_people.scss */ .people-image-mobile { position: relative; width: 18.75rem; margin-top: 1.5625rem; } @media (min-width: 48em) { /* line 144, app/assets/stylesheets/overrides/views/_people.scss */ .people-image-mobile { display: none; } } /* line 154, app/assets/stylesheets/overrides/views/_people.scss */ .people-image-mobile img { border-radius: 50%; } /* line 158, app/assets/stylesheets/overrides/views/_people.scss */ .profile-action-buttons { display: flex; max-width: 30rem; margin-left: auto; margin-right: auto; } @media (min-width: 48em) { /* line 158, app/assets/stylesheets/overrides/views/_people.scss */ .profile-action-buttons { display: block; max-width: auto; } } /* line 169, app/assets/stylesheets/overrides/views/_people.scss */ .profile-action-buttons > * { width: 50%; } /* line 172, app/assets/stylesheets/overrides/views/_people.scss */ .profile-action-buttons > *:first-child { margin-right: 0.625rem; } /* line 176, app/assets/stylesheets/overrides/views/_people.scss */ .profile-action-buttons > *:last-child { margin-left: 0.625rem; } @media (min-width: 48em) { /* line 169, app/assets/stylesheets/overrides/views/_people.scss */ .profile-action-buttons > * { width: 100%; margin: 0 !important; } } /* line 1, app/assets/stylesheets/overrides/views/_invitation.scss */ .invitation-codes { margin-top: 2.1875rem; } @media (min-width: 48em) { /* line 1, app/assets/stylesheets/overrides/views/_invitation.scss */ .invitation-codes { text-align: center; } } /* line 8, app/assets/stylesheets/overrides/views/_invitation.scss */ .invitation-codes > div { display: inline-block; text-align: center; margin: 0.5rem 0.5rem; font-size: 0.875rem; } /* line 16, app/assets/stylesheets/overrides/views/_invitation.scss */ .invitation-code { font-size: 1.125rem; letter-spacing: 2px; border: solid 1px #000000; display: inline-block; padding: 0.1875rem 0.5rem; font-family: 'Courier New', Courier; font-weight: bold; margin: 0.5rem 0.5rem; } /* line 26, app/assets/stylesheets/overrides/views/_invitation.scss */ .invitation-code.used { opacity: 0.3; text-decoration: line-through; } /* line 1, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method .connect-row { margin-top: 0; } /* line 5, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method .row { margin-bottom: 0; } /* line 9, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method { position: relative; background-color: #F4F5F5; padding: 1.5625rem 1.25rem; margin-bottom: 1.5625rem; } /* line 15, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method .payment-method-title { font-size: 1.5rem; margin-bottom: 0.9375rem; padding-right: 5.625rem; line-height: 1.2; } @media (min-width: 48em) { /* line 15, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method .payment-method-title { font-size: 1.875rem; } } /* line 26, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method p, .payment-method li { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1rem !important; line-height: 1.4 !important; color: #949494; margin-bottom: 1rem; } @media (min-width: 48em) { /* line 26, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method p, .payment-method li { font-size: 1.125rem !important; } } /* line 39, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method h3 { font-size: 1.125rem; color: #000000; font-weight: normal; line-height: 1.2; font-weight: 300; } /* line 47, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method h4 { text-transform: uppercase; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: bold; font-size: 1.125rem; margin-bottom: 0.3125rem; } /* line 55, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method p:last-child { margin-bottom: 0; } /* line 60, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method h2.required { margin-bottom: 0; margin-top: 1.5625rem; } /* line 65, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method .form-row { margin-bottom: 0.5rem; } /* line 69, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method table { margin: 0.5rem 0; } /* line 73, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method .alert-box-icon { width: 1.125rem; } /* line 76, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method .alert-box-icon .icon-fix { top: 1px; } /* line 81, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method-intro { font-size: 1.125rem !important; font-family: "SecondSkinBody", sans-serif; font-weight: 300; } /* line 87, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method-explanation { color: #949494; margin-bottom: 0.5rem; } /* line 91, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method-explanation p, .payment-method-explanation li { font-size: 0.9375rem; line-height: 1.5 !important; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } @media (min-width: 48em) { /* line 91, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method-explanation p, .payment-method-explanation li { font-size: 1.125rem; } } /* line 102, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method-explanation .col-6 { margin-bottom: 0.75rem; } @media (min-width: 48em) { /* line 102, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method-explanation .col-6 { margin-bottom: 0; } } /* line 111, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-description { font-style: italic; margin-bottom: 1.125rem; } /* line 116, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-method-logo { position: absolute; top: 1.5625rem; right: 1.25rem; } /* line 122, app/assets/stylesheets/overrides/views/_payments.scss */ #stripe_wizard, #paypal_wizard { color: #949494; } /* line 127, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-wizard { margin-top: 0; } /* line 131, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-wizard-content { margin-top: 1.5625rem; } /* line 135, app/assets/stylesheets/overrides/views/_payments.scss */ h3.paypal-wizard-step { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem; } /* line 143, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-account-connected, .paypal-account-disabled, .stripe-account-restricted-soon, .stripe-account-pending-verification { position: relative; padding-left: 2.8125rem; font-weight: normal !important; line-height: 1.8125rem !important; min-height: 1.8125rem; } /* line 153, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-account-connected:before, .paypal-account-disabled:before, .stripe-account-restricted-soon:before, .stripe-account-pending-verification:before { position: absolute; left: 0; top: 50%; width: 1.8125rem; height: 1.8125rem; margin-top: -0.9375rem; background-size: 1.8125rem 1.8125rem; content: ""; } /* line 164, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-account-connected i, .paypal-account-disabled i, .stripe-account-restricted-soon i, .stripe-account-pending-verification i { display: none !important; } /* line 169, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-account-connected:before { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/payment-setup-success-28cbabbbf5328fa71f1e6485e8936327219d0ca8e882f1c111d4a7fe84dfbc47.svg); } /* line 173, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-account-disabled:before { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/payment-setup-problem-e48d1ff607c2547f9c6d1d06c6995ba6020982e985592970a959a231762b5b2c.svg); } /* line 177, app/assets/stylesheets/overrides/views/_payments.scss */ .stripe-account-restricted-soon:before { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/status-waiting-other-d9c9fa960075a539f9d4613177fe817e98c3656e05de65a9ebe56f59f999da3d.svg); } /* line 181, app/assets/stylesheets/overrides/views/_payments.scss */ .stripe-account-pending-verification:before { background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/payment-setup-waiting-d9c9fa960075a539f9d4613177fe817e98c3656e05de65a9ebe56f59f999da3d.svg); } /* line 185, app/assets/stylesheets/overrides/views/_payments.scss */ .pay-with-card-title { font-size: 1.625rem; margin-bottom: 1.125rem; line-height: 1.2; } @media (min-width: 48em) { /* line 185, app/assets/stylesheets/overrides/views/_payments.scss */ .pay-with-card-title { font-size: 1.875rem; padding-right: 5.3125rem; } } /* line 197, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-with-stripe-button { cursor: pointer; } /* line 201, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-checkout-method { position: relative; background-color: #e8e8e8; } /* line 205, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-checkout-method .payment-method-logo { display: none; } @media (min-width: 48em) { /* line 205, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-checkout-method .payment-method-logo { top: 1.875rem; display: block; } } /* line 216, app/assets/stylesheets/overrides/views/_payments.scss */ .express-checkout-section { margin-bottom: 1.5625rem; padding-bottom: 1.25rem; } /* line 221, app/assets/stylesheets/overrides/views/_payments.scss */ .express-checkout-header { margin-bottom: 0.75rem; } /* line 225, app/assets/stylesheets/overrides/views/_payments.scss */ .express-checkout-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: #666; font-weight: 600; } /* line 233, app/assets/stylesheets/overrides/views/_payments.scss */ #payment-request-button { margin-bottom: 0.9375rem; min-height: 3rem; } /* line 238, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-divider { display: flex; align-items: center; text-align: center; margin: 1.25rem 0 0.625rem; } /* line 244, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-divider::before, .payment-divider::after { content: ''; flex: 1; border-bottom: 1px solid #ddd; } /* line 251, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-divider span { padding: 0 1.25rem; color: #888; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } /* line 267, app/assets/stylesheets/overrides/views/_payments.scss */ .shipping-section-title { font-size: 1.125rem; margin-top: 1.5625rem; margin-bottom: 0.9375rem; font-weight: 500; } /* line 275, app/assets/stylesheets/overrides/views/_payments.scss */ #address-element { margin-bottom: 1.25rem; } /* line 280, app/assets/stylesheets/overrides/views/_payments.scss */ .restricted-country-notice { background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 0.375rem; padding: 0.75rem 0.9375rem; margin-bottom: 0.9375rem; } /* line 287, app/assets/stylesheets/overrides/views/_payments.scss */ .restricted-country-notice .country-flag-container { display: flex; align-items: center; gap: 0.5rem; } /* line 293, app/assets/stylesheets/overrides/views/_payments.scss */ .restricted-country-notice .country-name { font-size: 0.875rem; color: #333; } /* line 297, app/assets/stylesheets/overrides/views/_payments.scss */ .restricted-country-notice .country-name strong { color: #000; } /* line 302, app/assets/stylesheets/overrides/views/_payments.scss */ .restricted-country-notice .restricted-country-hint { font-size: 0.75rem; color: #666; margin: 0.3125rem 0 0 0; } /* line 309, app/assets/stylesheets/overrides/views/_payments.scss */ .contact-section-title { font-size: 1.125rem; margin-top: 1.5625rem; margin-bottom: 0.3125rem; } /* line 315, app/assets/stylesheets/overrides/views/_payments.scss */ .contact-section-description { font-size: 0.875rem; color: #666; margin-bottom: 0.9375rem; } /* line 321, app/assets/stylesheets/overrides/views/_payments.scss */ .add-address-line-2 { display: inline-block; font-size: 0.875rem; margin-bottom: 0.625rem; } /* line 326, app/assets/stylesheets/overrides/views/_payments.scss */ .add-address-line-2:hover { text-decoration: underline; } /* line 332, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section { text-align: center; } /* line 335, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section .consent-text { font-size: 0.8125rem; color: #666; margin-bottom: 0.5rem; line-height: 1.6; } /* line 341, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section .consent-text a { white-space: nowrap; text-decoration: underline; } /* line 347, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section .customs-text { font-size: 0.8125rem; color: #b45309; background-color: #fef3c7; padding: 0.5rem 0.75rem; border-radius: 0.25rem; margin-bottom: 0.625rem; } /* line 356, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section .security-text { font-size: 0.75rem; color: #666; gap: 0.3125rem; margin-bottom: 0.625rem; line-height: 1.6; } /* line 363, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section .security-text .lock-icon-small { color: #22c55e; display: inline; position: relative; top: -2px; } /* line 371, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section .powered-by-stripe { font-size: 0.6875rem; color: #999; display: flex; align-items: center; justify-content: center; gap: 0.3125rem; } /* line 379, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-trust-section .powered-by-stripe img { opacity: 0.7; } /* line 387, app/assets/stylesheets/overrides/views/_payments.scss */ .order-summary-section .order-item-row { margin-bottom: 0.3125rem; } /* line 391, app/assets/stylesheets/overrides/views/_payments.scss */ .order-summary-section .order-item-title { font-weight: 500; color: #000000; } /* line 395, app/assets/stylesheets/overrides/views/_payments.scss */ .order-summary-section .order-item-title:hover { text-decoration: underline; } /* line 400, app/assets/stylesheets/overrides/views/_payments.scss */ .order-summary-section .order-item-seller { display: block; font-size: 0.875rem; color: #666; margin-top: 0.1875rem; } /* line 411, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-button-wrapper .checkout-with-stripe-button { width: 100%; padding: 0.875rem 1.25rem; } /* line 417, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-button-wrapper.paypal-payment { float: left; margin-top: 2.1875rem; margin-bottom: 0.75rem; } /* line 422, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-button-wrapper.paypal-payment.paypal-and-stripe { text-align: center; } /* line 425, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-button-wrapper.paypal-payment.paypal-and-stripe .loader { margin-top: 1.25rem; } /* line 430, app/assets/stylesheets/overrides/views/_payments.scss */ .payment-button-wrapper.paypal-payment .checkout-with-paypal-button { margin-right: 0.75rem; margin-bottom: 0.75rem; background-color: #00F780; font-weight: normal; } /* line 438, app/assets/stylesheets/overrides/views/_payments.scss */ .paypal-button-wrapper .checkout-with-stripe-button { margin-right: 0.75rem; margin-bottom: 0.75rem; } /* line 443, app/assets/stylesheets/overrides/views/_payments.scss */ .checkout-with-paypal { width: 100%; height: auto; cursor: pointer; max-width: 26.875rem; margin-left: auto; margin-right: auto; display: block; } /* line 453, app/assets/stylesheets/overrides/views/_payments.scss */ .payout-label { text-transform: uppercase; font-size: 0.6875rem; border-radius: 3px; text-align: center; padding: 0 0.4375rem; line-height: 1.0625rem; color: #ffffff; font-weight: bold; letter-spacing: 0.05em; display: inline-block; transform: translateY(-2px); } /* line 466, app/assets/stylesheets/overrides/views/_payments.scss */ .payout-label.paid { background-color: #19b400; } /* line 470, app/assets/stylesheets/overrides/views/_payments.scss */ .payout-label.pending { background-color: #d1c905; } /* line 474, app/assets/stylesheets/overrides/views/_payments.scss */ .payout-label.in_transit { background-color: #d1c905; } /* line 478, app/assets/stylesheets/overrides/views/_payments.scss */ .payout-label.canceled { background-color: #949494; } /* line 482, app/assets/stylesheets/overrides/views/_payments.scss */ .payout-label.failed { color: #ffffff; background-color: #c81f1f; } /* line 1, app/assets/stylesheets/overrides/views/_signin.scss */ [data-controller="people"][data-logged-in="false"], [data-controller="sessions"][data-logged-in="false"] { background-color: #000000; } /* line 6, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-wrapper { padding-bottom: 5rem; } /* line 10, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-header { text-align: center; padding: 3.125rem 0 2.1875rem 0; } /* line 14, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-header img { display: inline-block; } /* line 19, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-container { margin-left: auto; margin-right: auto; background-color: #ffffff; } /* line 25, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-container-inner h1 { margin-bottom: 1.375rem; text-align: center; font-size: 1.75rem; } /* line 31, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-navigation { display: flex; } /* line 35, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-navigation a { display: block; position: relative; width: 50%; text-align: center; line-height: 2.8125rem; border-bottom: 1px solid #D2D2D2; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } /* line 44, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-navigation a:first-child { border-right: 1px solid #D2D2D2; } /* line 48, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-navigation a.active::before { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 0.1875rem; background-color: #00F780; } /* line 59, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-container-inner { margin-left: auto; margin-right: auto; padding-top: 2.5rem; padding-bottom: 0.9375rem; } /* line 66, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-container label { font-size: 1rem; } /* line 70, app/assets/stylesheets/overrides/views/_signin.scss */ .signin-container .label-description { font-size: 0.875rem; margin-top: 0.5rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; color: #949494; font-style: italic; line-height: 1.4; } /* line 79, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-invitation-field { background-color: #F4F5F5; padding: 0.9375rem 1.125rem; text-align: center; } /* line 84, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-invitation-field #how-invite-link { display: block; font-style: italic; font-size: 0.9375rem; margin-top: 0.75rem; } /* line 91, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-invitation-field input { background-color: transparent; border: none; border-bottom: 1px solid #949494; text-align: center; text-transform: uppercase; } /* line 99, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-invitation-field label { margin-top: 0; } /* line 104, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences { padding: 1.875rem 0; margin: 1.875rem 0; border-top: 1px solid #949494; border-bottom: 1px solid #949494; } /* line 111, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } /* line 117, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences-row .label-description { margin: 0; } /* line 121, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences-row .ss-button { font-size: 0.9375rem; height: 2.4375rem; line-height: 2.4375rem; } /* line 127, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences-row label { margin: 0; cursor: pointer; } /* line 131, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences-row label.email-option { font-weight: normal; } /* line 136, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences-row:first-child { margin-bottom: 1.25rem; } /* line 140, app/assets/stylesheets/overrides/views/_signin.scss */ .signup-contact-preferences-row:last-child { margin-bottom: 0; } /* line 145, app/assets/stylesheets/overrides/views/_signin.scss */ a.label-description { text-decoration: underline; } /* line 149, app/assets/stylesheets/overrides/views/_signin.scss */ .terms-agreement { font-size: 0.9375rem; line-height: 1.4; margin-bottom: 1.5625rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } /* line 155, app/assets/stylesheets/overrides/views/_signin.scss */ .terms-agreement a { text-decoration: underline; } /* line 160, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter { display: none; margin-top: 0.9375rem; } /* line 165, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-text { color: #949494; font-size: 0.9375rem; font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; } /* line 171, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-bar { position: relative; width: 8.4375rem; height: 0.5rem; background-color: #D2D2D2; } /* line 178, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-bar::after { position: absolute; content: ""; top: 0; left: 0; bottom: 0; transition: width 0.5s; } /* line 187, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-bar.s0::after { background-color: red; width: 20%; } /* line 192, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-bar.s1::after { background-color: red; width: 40%; } /* line 197, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-bar.s2::after { background-color: red; width: 60%; } /* line 202, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-bar.s3::after { background-color: yellow; width: 80%; } /* line 207, app/assets/stylesheets/overrides/views/_signin.scss */ .password-meter-bar.s4::after { background-color: green; width: 100%; } /* line 1, app/assets/stylesheets/overrides/views/_unsubscribe.scss */ [data-action="unsubscribe"][data-controller="settings"] { background-color: #000000; } /* line 5, app/assets/stylesheets/overrides/views/_unsubscribe.scss */ .unsubscribe-wrapper { padding-bottom: 5rem; max-width: 30rem; margin-left: auto; margin-right: auto; } /* line 12, app/assets/stylesheets/overrides/views/_unsubscribe.scss */ .unsubscribe-wrapper .ss-button { padding-left: 0.75rem; padding-right: 0.75rem; } /* line 17, app/assets/stylesheets/overrides/views/_unsubscribe.scss */ .unsubscribe-header { text-align: center; padding: 3.125rem 0 2.1875rem 0; } /* line 22, app/assets/stylesheets/overrides/views/_unsubscribe.scss */ .unsubscribe-container-inner { padding: 1.25rem; } /* line 26, app/assets/stylesheets/overrides/views/_unsubscribe.scss */ .unsubscribe-container-inner h1 { margin-bottom: 1.375rem; text-align: center; font-size: 1.3125rem; color: #ffffff; } /* line 33, app/assets/stylesheets/overrides/views/_unsubscribe.scss */ .unsubscribe-container-inner p { margin-bottom: 0.9375rem; } /* line 37, app/assets/stylesheets/overrides/main.scss */ body { color: #000000; } /* line 41, app/assets/stylesheets/overrides/main.scss */ button, .button { height: 3.125rem; } /* line 46, app/assets/stylesheets/overrides/main.scss */ .row.collapse-bottom { margin-bottom: 0; } /* line 50, app/assets/stylesheets/overrides/main.scss */ ::selection { background-color: #00F780; } /* line 54, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander { min-height: 5rem; } /* line 58, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .coverimage { display: none; } /* line 62, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander { background-color: #000000; padding: 0.625rem 0; } @media (min-width: 53.75em) { /* line 62, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander { min-height: 7.6875rem; } } @media (min-width: 48em) { /* line 62, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander { padding: 1.875rem 0; } } /* line 75, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .title-container { max-width: 43.75em; margin-left: auto; margin-right: auto; padding: 0 1.5625em; } /* line 83, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .search-form-input-container { position: relative; } /* line 87, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .search-form-input-container .search-form-input:last-child { position: absolute; right: 0; top: 0; } /* line 93, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .search-form-input-container .search-form-input button { margin: 0; height: auto; } /* line 98, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form { padding: 0 0 0.5rem 0; } @media (min-width: 48em) { /* line 98, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form { padding: 0.5rem 0; } } /* line 106, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .search-form-input-container { border-bottom: solid 1px #ffffff; } /* line 109, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .search-form-input-container button { color: #ffffff; } /* line 114, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"] { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; background-color: transparent; color: #ffffff; font-weight: 300; border: none; padding: 0; min-height: 46px; font-size: 1.375em; } /* line 124, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"]:focus { outline: none; } @media (min-width: 48em) { /* line 129, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"] { font-size: 1.875em; } } /* line 135, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"]::placeholder { color: #ffffff; } /* line 139, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"]::-webkit-input-placeholder { color: #ffffff; } /* line 145, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"]:-ms-input-placeholder { color: #ffffff; } /* line 151, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"]::-ms-input-placeholder { color: #ffffff; } /* line 157, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"]::-moz-placeholder { color: #ffffff; } /* line 163, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form input[type="text"]:-moz-placeholder { color: #ffffff; } /* line 169, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form button.action-button { padding-right: 0; } /* line 172, app/assets/stylesheets/overrides/main.scss */ .marketplace-lander .browse-view-search-form button.action-button, .marketplace-lander .browse-view-search-form button.action-button:hover { background-color: transparent; } /* line 178, app/assets/stylesheets/overrides/main.scss */ .marketplace-title-header h1 { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.625rem; font-weight: 300; text-align: center; color: #ffffff; margin: 0; } /* line 186, app/assets/stylesheets/overrides/main.scss */ .marketplace-title-header h1 a { color: #ffffff; } @media (min-width: 53.75em) { /* line 178, app/assets/stylesheets/overrides/main.scss */ .marketplace-title-header h1 { font-size: 2.625rem; } } /* line 208, app/assets/stylesheets/overrides/main.scss */ .page-content li, .page-content p { line-height: 1.75; -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; word-wrap: normal; } /* line 212, app/assets/stylesheets/overrides/main.scss */ .page-content li:last-child, .page-content p:last-child { padding-bottom: 0; } @media (min-width: 48em) { /* line 208, app/assets/stylesheets/overrides/main.scss */ .page-content li, .page-content p { font-size: 1rem; } } /* line 220, app/assets/stylesheets/overrides/main.scss */ .page-content li a, .page-content p a { text-decoration: underline; } /* line 223, app/assets/stylesheets/overrides/main.scss */ .page-content li a:hover, .page-content p a:hover { text-decoration: none; } /* line 235, app/assets/stylesheets/overrides/main.scss */ .about-section h1 { text-align: left; margin-bottom: 1.5625rem; } /* line 240, app/assets/stylesheets/overrides/main.scss */ .about-section h2 { margin: 2.1875rem 0 1.5625rem 0; } /* line 244, app/assets/stylesheets/overrides/main.scss */ .about-section h3 { font-size: 1.625rem; margin-top: 1.5625rem; margin-bottom: 0.9375rem; line-height: 1.2; } /* line 251, app/assets/stylesheets/overrides/main.scss */ .about-section ol.restricted li { list-style-position: inside; list-style-type: decimal; } /* line 255, app/assets/stylesheets/overrides/main.scss */ .about-section ol.restricted li a { text-decoration: underline; } /* line 260, app/assets/stylesheets/overrides/main.scss */ .about-section ol li { list-style-type: none; } /* line 264, app/assets/stylesheets/overrides/main.scss */ .about-section ol ol, .about-section ul ul { margin-top: 0.9375rem; margin-bottom: 1.25rem; margin-left: 1.5625rem; } /* line 271, app/assets/stylesheets/overrides/main.scss */ .about-section ol, .about-section ul, .about-section li { margin-bottom: 0.75rem; } /* line 278, app/assets/stylesheets/overrides/main.scss */ .centered-section { max-width: 40.625rem; } /* line 314, app/assets/stylesheets/overrides/main.scss */ .new-listing-form h2, .edit-listing-form h2 { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; margin-bottom: 1.125rem; } /* line 323, app/assets/stylesheets/overrides/main.scss */ .new-listing-form a.select, .edit-listing-form a.select { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1.125rem; text-transform: uppercase; border: solid 1px #d7d7d7; border-radius: 0; margin-bottom: 0.9375rem; min-height: 0; line-height: 2.1875rem; } /* line 335, app/assets/stylesheets/overrides/main.scss */ .new-listing-form a.selected, .edit-listing-form a.selected { border-color: transparent; background-color: #f4f5f5; margin-bottom: 0.9375rem; } /* line 342, app/assets/stylesheets/overrides/main.scss */ .new-listing-form label { margin-top: 1.875rem; } /* line 346, app/assets/stylesheets/overrides/main.scss */ .new-listing-form small { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 1rem; font-style: italic; color: #949494; margin-top: 0.5rem; } /* line 353, app/assets/stylesheets/overrides/main.scss */ .new-listing-form small a { color: #000000; text-decoration: underline; } /* line 357, app/assets/stylesheets/overrides/main.scss */ .new-listing-form small a:hover { text-decoration: none; } /* line 363, app/assets/stylesheets/overrides/main.scss */ .new-listing-form #selected-groups, .edit-listing-groups #selected-groups { margin-bottom: 1.5625rem; } /* line 368, app/assets/stylesheets/overrides/main.scss */ .left-navi .left-navi-link-icon { top: 0.5625rem; display: none; } /* line 373, app/assets/stylesheets/overrides/main.scss */ .icon-with-text-container .text-part { font-family: "SecondSkinBody", sans-serif; min-height: 0; padding-bottom: 0.625rem; line-height: 1.4; } /* line 379, app/assets/stylesheets/overrides/main.scss */ .icon-with-text-container .text-part a { text-decoration: underline; } /* line 382, app/assets/stylesheets/overrides/main.scss */ .icon-with-text-container .text-part a:hover { text-decoration: none; } /* line 388, app/assets/stylesheets/overrides/main.scss */ .icon-with-text { top: 0; } /* line 392, app/assets/stylesheets/overrides/main.scss */ .icon-with-text-container .icon-part { top: 4px; } /* line 396, app/assets/stylesheets/overrides/main.scss */ .shipping-options-label { font-family: "SecondSkinBody", sans-serif; text-decoration: none; text-transform: none; letter-spacing: normal; margin-left: 0; } /* line 403, app/assets/stylesheets/overrides/main.scss */ .shipping-options-label [class^="flag-"] { position: relative; top: -1px; } /* line 409, app/assets/stylesheets/overrides/main.scss */ .shipping-options-label input[type="radio"] { position: relative; top: 1px; } /* line 417, app/assets/stylesheets/overrides/main.scss */ .shipping-address-container h2, .initiate-transaction-totals h2 { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-weight: bold; font-size: 1.125rem; text-transform: uppercase; } /* line 425, app/assets/stylesheets/overrides/main.scss */ .shipping-everywhere-guidance { display: none; clear: both; float: left; margin-top: 0.9375rem; margin-bottom: 1.25rem; } /* line 433, app/assets/stylesheets/overrides/main.scss */ .conversation-totals { padding: 1.25rem; } /* line 437, app/assets/stylesheets/overrides/main.scss */ .conversation-status-form .conversation-totals { background-color: #e8e8e8; padding: 1.25rem 1.25rem 0.75rem 1.25rem; } /* line 442, app/assets/stylesheets/overrides/main.scss */ .conversation-listing-title { margin-bottom: 0; } /* line 446, app/assets/stylesheets/overrides/main.scss */ .conversation-status .inbox-horizontally-aligned-status { padding: 0; } /* line 450, app/assets/stylesheets/overrides/main.scss */ .conversation-status .status-links { display: block; } /* line 454, app/assets/stylesheets/overrides/main.scss */ .conversation-status .accept, .conversation-status .confirm, .conversation-status .accept_preauthorized, .conversation-status .reject, .conversation-status .cancel, .conversation-status .reject_preauthorized { margin: 0.625rem 0.3125rem 0 0; } /* line 463, app/assets/stylesheets/overrides/main.scss */ .page-content { min-height: calc(100vh - 11.375rem); } /* line 467, app/assets/stylesheets/overrides/main.scss */ [data-controller="settings"] .page-content { min-height: calc(100vh - 11.4375rem); } /* line 471, app/assets/stylesheets/overrides/main.scss */ [data-controller="people"][data-action="show"] .marketplace-lander, [data-controller="settings"] .marketplace-lander { display: none; } /* line 476, app/assets/stylesheets/overrides/main.scss */ [data-action="show"][data-controller="listings"] .page-content > .wrapper > h1 { font-family: "Roboto Condensed", sans-serif; letter-spacing: 0.01rem; font-size: 2rem; line-height: 1.1; font-weight: 300; margin-bottom: 2.1875rem; color: #000000; text-transform: none; text-align: left; } @media (min-width: 48em) { /* line 476, app/assets/stylesheets/overrides/main.scss */ [data-action="show"][data-controller="listings"] .page-content > .wrapper > h1 { display: none; } } /* line 491, app/assets/stylesheets/overrides/main.scss */ .delivery-options-container { margin-top: 0; } /* line 495, app/assets/stylesheets/overrides/main.scss */ #shippingInternationalCheckboxLabel { display: inline-block; width: auto; margin-left: 0.3125rem; } /* line 501, app/assets/stylesheets/overrides/main.scss */ .delivery-label-cont label { margin-top: 0; } /* line 505, app/assets/stylesheets/overrides/main.scss */ .delivery-row-section { margin-bottom: 1.5625rem; } /* line 509, app/assets/stylesheets/overrides/main.scss */ .lightbox, .expiration-notice { max-width: 51.25rem; } /* line 514, app/assets/stylesheets/overrides/main.scss */ .lightbox-content h2 { line-height: 1.2; font-size: 1.3125rem; } @media (min-width: 48em) { /* line 514, app/assets/stylesheets/overrides/main.scss */ .lightbox-content h2 { font-size: 1.75rem; font-weight: 300; } } /* line 524, app/assets/stylesheets/overrides/main.scss */ .lightbox-content ul, .lightbox-content li { margin-bottom: 0.75rem; } /* line 529, app/assets/stylesheets/overrides/main.scss */ .lightbox-content p a { text-decoration: underline; } /* line 532, app/assets/stylesheets/overrides/main.scss */ .lightbox-content p a:hover { text-decoration: none; } /* line 537, app/assets/stylesheets/overrides/main.scss */ label.error { font-size: 1rem; font-weight: normal; text-transform: none; margin-bottom: 0; padding: 0.3125rem 0.625rem !important; background-color: #FF3351; border-radius: 0; margin-top: 1.125rem; } /* line 548, app/assets/stylesheets/overrides/main.scss */ form .checkbox-container label { font-weight: normal; } /* line 552, app/assets/stylesheets/overrides/main.scss */ form .checkbox-container label.error { background-color: #FF3351; border-radius: 0; } /* line 557, app/assets/stylesheets/overrides/main.scss */ select.error[id="person_dob_2i"], select.error[id="person_dob_1i"] { margin-top: 0.9375rem; } /* line 562, app/assets/stylesheets/overrides/main.scss */ .hint-box { position: relative; padding: 0.9375rem 1.25rem; border: 1px solid #D2D2D2; color: #949494; padding-right: 4.25rem; } /* line 569, app/assets/stylesheets/overrides/main.scss */ .hint-box:after { content: ""; position: absolute; top: 1.25rem; right: 0.9375rem; width: 2.25rem; height: 2.25rem; background-image: url(https://d85dbym32cnih.cloudfront.net/assets/secondskin/ss-hint-728c50e81482ecb916db103c33b7f109f6919a8f2ebaca13cd39b1503982f84a.svg); background-size: 2.25rem 2.25rem; background-repeat: no-repeat; } /* line 583, app/assets/stylesheets/overrides/main.scss */ #error_explanation ul { list-style-type: none; margin: 0; padding: 0; } /* line 588, app/assets/stylesheets/overrides/main.scss */ #error_explanation ul li { color: red; } /* line 593, app/assets/stylesheets/overrides/main.scss */ #error_explanation h2 { display: none; } /* line 21, app/assets/stylesheets/application.scss */ .inset-border::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px inset rgba(0, 0, 0, 0.2); pointer-events: none; }