API tools faq
paste
Advertisement
coffeeandphotos

Newctp before tweaks

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