API tools faq
paste
Advertisement
coffeeandphotos

CTP last back up before redesign

coffeeandphotos
Jun 22nd, 2022
1,222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.40 KB | None | 0 0
raw download clone embed print report
  1. //General Styles
  2. @font-face {
  3.     font-family: 'Coconat';
  4.     src: url('https://static1.squarespace.com/static/5f6e99d1c27ae441bdb7165c/t/62b33922ce272e29232cf87e/1655912738609/PerfectlyNineties-Regular.woff');
  5. }
  6.  
  7. H1,h2,h3,h4 {font-family: Coconat !important;}
  8.  
  9. .header-title-text a {font-family: Coconat !important;}
  10.  
  11. //No auto hyphens
  12. body {-webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important;  }
  13.  
  14.  
  15. //Mobile Logo
  16. .header .header-title--use-mobile-logo .header-mobile-logo img {
  17.     max-height: 100px;
  18. }
  19.  
  20. //Buttons
  21. .primary-button-style-outline .btn {
  22.   border-width: 1px;}
  23. .primary-button-style-outline .sqs-block-button-element--small, .primary-button-style-outline .sqs-block-button-element--medium, .primary-button-style-outline .sqs-block-button-element--large, .primary-button-style-outline .image-button a, .primary-button-style-outline .newsletter-form-button, .primary-button-style-outline .list-item-content__button {
  24.     border-width: 1px;
  25. }
  26. //P 1 Italic
  27. .sqsrte-large em {font-size: 22px !important;
  28. text-transform: Uppercase;
  29. font-style: normal;
  30. }
  31.  
  32.  
  33.  
  34. //Summary title
  35. .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {font-size:20px;
  36. font-family: Coconat !important;}
  37.  
  38. //Footer
  39.  
  40. @media only screen and (max-width:896px){ #footer-sections * {text-align:center}}
  41.  
  42. #footer-sections p a {font-size: 1.4rem;}
  43.  
  44. #footer-sections p em {font-family: Coconat !important;
  45. font-size: 1.4rem;
  46. font-style: normal!important;
  47. }
  48.  
  49.  
  50.  
  51.  
  52. //Contact Form
  53. // Solid Underline Form //
  54.  
  55. .field-list .field-element{
  56.     border-color: #000000 !important;
  57.     border-bottom: solid 1px #000000 !important;
  58.     border-left: none !important;
  59.     border-right: none !important;
  60.     border-top: none !important;
  61.     background-color: transparent !important;
  62.   }
  63.   .field-list select:focus{
  64.     outline-color:  #000000 !important;
  65.   }
  66.   .field-list .section{
  67.     border-color: #000000 !important;
  68.   }
  69.  
  70.  
  71. // Remove Active Nav Line //
  72.  
  73. .header-nav-item--active a {
  74.     background-image: none !important;
  75. }
  76.  
  77.  
  78. // Slide Up Header + Navigation On Load //
  79.  
  80. header {
  81.   animation: fade-intro-up 2s ease;
  82.   -webkit-animation: fade-intro-up 2s ease;
  83. }
  84.  
  85. @keyframes fade-intro-up {0%{opacity: 0;-webkit-transform: translate3d(0,50px,0);-moz-transform: translate3d(0,50px,0);-ms-transform: translate3d(0,50px,0);-o-transform: translate3d(0,50px,0);transform: translate3d(0,50px,0);}100%{opacity: 1;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}}
  86.  
  87.  
  88. //Service Page Collage image blocks mobile
  89.  
  90. @media (max-width:480px){
  91.   .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{
  92.     width:90%;
  93.     margin-top:calc(-10%)!important;
  94.     position:relative}
  95.   .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic,.sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-left .intrinsic{
  96.     left:5%
  97.   }
  98. }
  99.  
  100. //list title about carosel
  101.  
  102. .user-items-list .list-section-title p {font-family: Coconat !important;}
  103.  
  104.  
  105. @media screen and (max-width:767px)  {
  106.   section[data-section-id="60a966d6775afc373304ff32"] {display:none !important;}}
  107.  
  108.  
  109.   @media screen and (min-width:768px)  {
  110.  section[data-section-id="60b719eeacd41e38492011ff"]{display:none !important;}}
  111.  
  112. //hide recaptcha glitch
  113.  
  114. .form-submission-html + .newsletter-form-footnote {
  115.  display:none;
  116. }
  117.  
  118.  
  119. .bright .user-items-list-carousel .user-items-list-carousel__arrow-icon-background {
  120.     background-color: #c8ae90 ;
  121. }
  122.  
  123. //smooth scroll to anchor link
  124.  
  125. html {
  126.   scroll-behavior: smooth;
  127. }
  128.  
  129. //SM Snippets
  130.  
  131. /* About Section */
  132. [data-section-id="61a69ddd977e6d7ac1d79c4a"] {
  133.     h2 {
  134.         margin-bottom: 25px;
  135.     }
  136.     .sqs-col-4 .sqs-block-image {
  137.         margin-right: -40px;
  138.         z-index: 3;
  139.     }
  140.     .sqs-col-3 .sqs-block-image {
  141.         margin-left: -40px;
  142.     }
  143.     .sqs-col-4 p {
  144.         max-width: 280px;
  145.         margin: 0 auto;
  146.     }
  147.     .sqs-block-image {
  148.         padding-bottom: 0;
  149.     }
  150.     .sqs-block-button {
  151.         margin-top: 22px;
  152.     }
  153.     .sqs-row {
  154.         display: flex;
  155.         align-items: center;
  156.     }
  157.     @media screen and (max-width: 1199px) {
  158.         .sqs-block-button {
  159.             margin-top: 0;
  160.         }
  161.     }
  162.     @media screen and (max-width: 767px) {
  163.         .sqs-row {
  164.             display: block;
  165.         }
  166.         .sqs-col-4 .sqs-block-image,
  167.         .sqs-col-3 .sqs-block-image {
  168.             margin: 0;
  169.         }
  170.         .sqs-col-4 p {
  171.             max-width: 100%;
  172.         }
  173.     }
  174. }
  175.  @media screen and (max-width: 767px) {
  176.    #block-fac2d4bf8b7b7a7340bf {display:none;}}
  177.  
  178. //SQStylist snippets
  179. //Newsletter
  180. .primary-button-style-outline .bright .sqs-block-newsletter .newsletter-form-button {    border-width: 1px;
  181. font-family: grange-extended;}
  182. .primary-button-style-outline .light .sqs-block-newsletter .newsletter-form-button {    border-width: 1px;
  183. font-family: grange-extended;}
  184.  
  185. .newsletter-form-field-element {
  186.    
  187.     background-color: transparent !important;
  188.     border-top: none !important;
  189.     border-left: none !important;
  190.     border-right: none !important;
  191. }
  192.  
  193. .newsletter-block .newsletter-form-button{
  194.   font-size: 20px !important;
  195.  
  196.   padding: 12px !important;
  197.  
  198.  
  199. }
  200.  
  201. .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {
  202.     background: none !important;
  203.     border:none !important;
  204. }
  205.  
  206.  
  207. .newsletter-block .newsletter-form-field-element{
  208.  
  209.   text-transform: uppercase;
  210.   letter-spacing: 0px;
  211.   font-weight:normal;
  212.  
  213.   line-height:1em;
  214.   padding:0px 0px !important;
  215.  
  216. }
  217.  
  218. .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {
  219.   border: none !important;
  220.   box-shadow: none !important;
  221.    
  222. }
  223.  
  224. .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {
  225.   border-width:0px !important;
  226.   box-shadow: inset 0px 0px 0px 0px transparent;
  227.   padding: 0 0 0 0;
  228. }
  229.  
  230. .newsletter-block .newsletter-form-fields-wrapper {
  231.   display:inline-block !important;
  232. }
  233.  
  234. //NEWSLETTER BLOCK
  235.  
  236. @media screen and (min-width:1200px) {
  237.   .newsletter-block .newsletter-form-field-element {
  238.     border-width:0px !important;
  239.   }
  240. .newsletter-block .newsletter-form-body {
  241.     flex-direction: row;
  242.     flex-wrap: wrap;
  243.     justify-content: space-around;
  244. }
  245. .newsletter-block .newsletter-form-fields-wrapper {
  246.     width: 60%;
  247.     float: left;
  248. }
  249.  
  250. .newsletter-block .newsletter-form-wrapper--alignLeft .newsletter-form-button-wrapper {
  251.     width: 40%;
  252.     align-self: self-end;
  253.     text-align: right !important;
  254. }
  255.  
  256. .newsletter-block .newsletter-form-body {
  257.   padding:0px 0px !important;
  258.   border-bottom:1px solid;
  259. }
  260. }
  261.  
  262. @media screen and (max-width: 960px) and (min-width: 641px) {
  263. .newsletter-block .newsletter-form-body {
  264.     flex-direction: column !important;
  265.     flex-wrap: wrap !important;
  266.     justify-content: space-around !important;
  267.   }
  268.  
  269.   .newsletter-block .newsletter-form-wrapper--alignLeft .newsletter-form-button-wrapper {
  270.     width: 40% !important;
  271.     align-self: self-end;
  272.     text-align: center !important;
  273. }
  274.  
  275.   .newsletter-block .newsletter-form-fields-wrapper {
  276.     width: 60% !important;
  277.    
  278. }
  279.  
  280.  
  281. }
  282. @media screen and (max-width:640px) {
  283. .primary-button-style-outline .light .sqs-block-newsletter .newsletter-form-button {    border-width: 1px !important;
  284.   font-family: grange-extended!important;}}
  285. @media screen and (max-width:640px) {
  286. .primary-button-style-outline .bright .sqs-block-newsletter .newsletter-form-button {    border-width: 1px !important;
  287.   font-family: grange-extended!important;}}
  288.  
  289. @media screen and (max-width:640px) {
  290.   .newsletter-block .newsletter-form-wrapper--alignLeft .newsletter-form {
  291.     text-align:center;
  292.   }
  293.  
  294.   .newsletter-block .newsletter-form-field-wrapper {
  295.     min-width:170px;
  296.   }
  297.   .newsletter-block .newsletter-form-field-element {
  298.     border-width:0px !important;
  299.   }
  300. .newsletter-block .newsletter-form-body {
  301.     flex-direction: row;
  302.     flex-wrap: wrap;
  303.     justify-content: space-around;
  304. }
  305. .newsletter-block .newsletter-form-fields-wrapper {
  306.     width: 60%;
  307.     float: left;
  308. }
  309.  
  310. .newsletter-block .newsletter-form-wrapper--alignLeft .newsletter-form-button-wrapper {
  311.     width: 40%;
  312.     align-self: self-end;
  313.     text-align: right !important;
  314. }
  315.  
  316. .newsletter-block .newsletter-form-body {
  317.   padding:0px 0px !important;
  318.   border-bottom:1px solid;
  319. }
  320. }
  321.  
  322.  
  323.  
  324. :focus {
  325.   outline:transparent !important;
  326. }
  327.  
  328. //List Marque
  329. //base
  330. .user-items-list[data-space-below-section-title-value="15"] {
  331.   display:flex !important;
  332.   flex-direction:row !important;
  333.  
  334.   .user-items-list-simple {
  335.     display:flex !important;
  336.     padding-left:0 !important;
  337.     padding-right:0vw;/**change as needed**/
  338.     flex-wrap:nowrap !important;
  339.  
  340.     .list-item {
  341.       min-width:250px !important;  /**change as needed**/    
  342.       border:0px solid #ccc; /**change as needed**/
  343.       align-self:stretch;
  344.      
  345.     }
  346.   }
  347.  
  348. }
  349. //side by side
  350. .user-items-list[data-space-below-section-title-value="15"] {
  351.  
  352.   .user-items-list-simple {
  353.   border-bottom:1px solid;
  354.   border-top:1px solid;
  355.   align-items:center;
  356.   grid-gap:0px !important;
  357.  
  358.   }
  359.   .list-item {
  360.    padding:0px;
  361.    flex-direction:row !important;
  362.    display:flex;
  363.    align-items:center;
  364.  
  365.   }
  366.  
  367.   .user-items-list-simple .list-item-media-inner[data-aspect-ratio="1:1"] {
  368.   padding-bottom:0 !important;
  369.  
  370.       min-width:400px !important;
  371.       height:500px;
  372.  
  373.  
  374. }
  375.  
  376.  
  377. .list-item-media {
  378.   margin-bottom:0 !mportant;
  379.   height:100% !important;
  380.   min-width:0% !important;
  381.   margin-bottom:0 !important;
  382.  
  383. }
  384.  
  385.  
  386.          
  387. .list-item-content__description {
  388.   display:none; }
  389.  
  390. .list-image {
  391.     position:absolute !important;
  392.     border:0px solid;
  393.     margin:auto !important;
  394.  
  395.   }
  396.  
  397.  .list-item-media-inner {
  398.   overflow:visible !important;
  399. }
  400.  
  401.  
  402.  
  403. }
  404. //hide overflow
  405. section[data-section-id="61a6c98df2f8dd6d6d050ee1"] {
  406.  overflow:hidden;
  407. }
  408.  
  409. // Custom Bullet Point //
  410.  
  411. ul {
  412.     display: block;
  413.     list-style-type: decimal;
  414.     margin-block-start: 1em;
  415.     margin-block-end: 1em;
  416.     margin-inline-start: 0px;
  417.     margin-inline-end: 0px;
  418.     padding-inline-start: 30px;
  419. }
  420.  
  421.   ul li {
  422.     list-style-type: none;
  423. }
  424.  
  425. // Bullet Point Symbol and Size //
  426.  
  427. ul[data-rte-list] li>*:first-child::before {
  428.     content: '' !important;
  429.     display: inline-block;
  430.     background-image: url(https://static1.squarespace.com/static/5f6e99d1c27ae441bdb7165c/t/61a72403cdbab21c1a186de1/1638343683162/*.png);
  431.     background-repeat: no-repeat;
  432.     background-size: 14px;
  433.     background-position: center;
  434.     width: 18px;
  435.     height: 18px;
  436.     position: absolute;
  437.     margin-left: -30px;
  438.     margin-right: 0px;
  439.     margin-top: 10px;
  440.     margin-bottom: 0px;
  441. }
  442.  
  443.  
  444.  
  445. //contact form button
  446.  
  447. .primary-button-style-outline .light .sqs-block-form .sqs-editable-button
  448. {    border-width: 1px;
  449. font-family: grange-extended;}
  450. .primary-button-style-outline .light .sqs-block-newsletter .newsletter-form-button {    border-width: 1px;
  451. font-family: grange-extended;}
  452.  
  453. //overlap stacked gallery block
  454. section[data-section-id="6088971e5b9972431acf8417"] {
  455. .sqs-gallery-block-stacked .sqs-gallery {
  456. position: relative;
  457. }
  458.  
  459. .sqs-gallery-block-stacked .sqs-gallery .image-wrapper ~ .image-wrapper {
  460. position: absolute;
  461. top: 50%;
  462. transform:translateY(-50%);
  463. left: 85%;
  464. width: 70%;
  465. pointer-events: none;
  466.  
  467. }}
  468. //hide 2nd image on mobile home page overalp gallery
  469. @media screen and (max-width:767px)  { #\36 1a69b5a3df4cd6bfb4d94e9 > img {display:none !important;}}
  470.  
  471. //gallery image radius
  472. .sqs-gallery-design-strip-slide {
  473.     border-radius: 400px !important;
  474. }
  475.  
  476.  
  477. //port gallery thumbnail image radius
  478. .gallery-masonry-item img {
  479.     border-radius: 50px;
  480. }
  481.  
  482. //blog image radius
  483. .blog-basic-grid .image-wrapper
  484. {
  485.     border-radius: 50px!important;
  486. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!