Login
Dashboard
Saved Stitches
Stitch Catalog
Demo
All
E-Commerce
All
(4)
Collections
(3)
Featured Products
(0)
Hero
(0)
Pop Up Modals
(0)
Promotional CTA
(1)
Store Products
(0)
Buttons
All
(1)
Non Standard
(0)
Squared
(1)
Navigation
All
(2)
+ Dropdown
(1)
+ Top Bar
(0)
Double Dropdown
(0)
Standard
(1)
Top Bar + Dropdown
(0)
Hero Section
All
(7)
Centered
(2)
Grid
(0)
Landing + Services
(3)
Left Aligned
(1)
Right Aligned
(1)
Services
All
(16)
3 Card
(4)
4 Card
(4)
5 Card
(1)
6 Card
(2)
8 Card
(1)
Combo
(2)
Side By Side
(2)
Content Flair
All
(3)
Button Boxes
(1)
Content Groups
(1)
Lists
(1)
Quotes
(0)
Stats
(0)
Toppers
(0)
Side By Side
All
(34)
Combo
(0)
Non Standard
(1)
Reverse
(11)
Reverse Pair
(5)
Reverse Triplet
(3)
Standard
(14)
Gallery
All
(7)
4 Images
(1)
5 Images
(1)
6 Images
(1)
8 Images
(2)
Full Width
(0)
Mosaic
(0)
Multi Gallery
(1)
Simple
(1)
Meet Our Team
All
(5)
2 Card
(0)
3 Card
(1)
4 Card
(2)
5 Card
(1)
6 Card
(0)
7 Card
(0)
8 Card
(1)
Combo
(0)
Steps
All
(4)
3 Steps
(2)
4 Steps
(2)
5 Steps
(0)
Stats
All
(5)
2 Stats
(0)
3 Stats
(0)
4 Stats
(3)
Combos
(1)
Timeline
(1)
Pricing
All
(7)
2 Card
(0)
3 Card
(3)
Menu's
(2)
Price List
(0)
w/ Toggles
(2)
FAQ
All
(4)
Multi FAQ's
(0)
Side By Side
(2)
Standard
(2)
Why Choose Us
All
(11)
3 Card
(1)
4 Card
(1)
6 Card
(0)
Side By Side
(9)
Quotes
All
(0)
Single Quotes
(0)
MISC
All
(5)
Careers
(0)
Content
(0)
Locations
(1)
Logos
(1)
Maps
(0)
Popups
(0)
Tables
(1)
Video
(2)
Reviews
All
(14)
2 Card
(4)
3 Card
(3)
4 Card
(0)
8 Card
(0)
Full Width
(0)
Single Review
(7)
Slideshow
(0)
Forms & Contact
All
(8)
Contact Forms
(8)
Contact Info
(0)
Subscribe
(0)
Events
All
(3)
3 Card
(1)
4 Card
(0)
Side By Side
(2)
Blog
All
(3)
Recent Posts
(3)
Call To Action
All
(4)
Combos
(1)
Contained
(0)
Full Width
(2)
Subscribe Forms
(1)
Footer
All
(6)
2 Column
(0)
3 Column
(1)
4 Column
(2)
5 Column
(1)
Combo
(0)
Simple
(2)
Dark Mode
All
(1)
Standard
(1)
Interior Pages
All
(3)
About Page
(0)
Contact Page
(0)
Content Page
(1)
FAQ Page
(1)
Menus
(0)
Page Banners
(1)
Service Page
(0)
Side By Side
HTML
CSS
Core Styles
Choose your preferred CSS
CSS
LESS
SCSS
CSS Dark
LESS Dark
SCSS Dark
Choose your preferred Core Styles CSS
CSS
LESS
SCSS
-
Dark Mode
+
Dark Mode
Copy
to Clipboard
<!-- ============================================ --> <!-- Events --> <!-- ============================================ --> <section id="events-1511"> <div class="cs-container"> <div class="cs-content"> <span class="cs-topper">Upcoming Events</span> <h2 class="cs-title">Upcoming Day Care Activities & Event Schedule</h2> <p class="cs-text"> We promise to take care of your child’s social, emotional, intellectual and physical needs with sensitive care and we also ensure you their security with our life. </p> </div> <div class="cs-wrapper"> <ul class="cs-card-group"> <li class="cs-item"> <a href="" class="cs-link"> <div class="cs-image-group"> <picture class="cs-picture"> <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class1.jpg"> <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class1.jpg"> <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class1.jpg" alt="person" width="277" height="197" aria-hidden="true"> </picture> <svg class="cs-mask" width="369" height="249" viewBox="0 0 369 249" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <g clip-path="url(#clip0_3335_6487)"> <path d="M369 249V105.57H364.72L360.02 177.28L350.1 221.22L338.48 233.69L294.54 231.71L227.65 231.14L159.67 232.48L102.92 238.23L43.73 243.79L31 238.99L24.33 229L8.32 177.28L5.69 111.52L0 110.67V249H369Z" fill="var(--maskBG)" /> <path d="M0 0H369V114.64L364.64 113.67L364.72 77.5L356.91 50.01L348.69 27.11L329.08 10.47L296.81 4.93L28.9 9.69L21.28 14.57L15.61 25.63L4 124.51H0V0Z" fill="var(--maskBG)" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M366 4H4V245H366V4ZM31 239C-4.86 193.71 3.34 85.57 14 31C17.78 11.59 25.37 8.61 42 8C107.73 5.59 193.2 4.66 300 5C325.79 5.1 347.16 14.21 356 43C370.28 89.64 364.08 137.32 358.09 183.32L358 184C356.03 199.42 352.41 212.38 347 224C343.96 230.49 339.5 233.58 333 233C234.49 224.39 139.41 232.28 42 244C39.88 244.27 37.99 243.86 36 243C34.01 242.14 32.41 240.79 31 239Z" fill="var(--maskBG)" /> <path d="M13.9996 30.9899C9.37956 54.6199 5.22956 88.2999 4.90956 122.57C4.49956 167.43 10.6696 213.31 30.9996 238.99C32.4096 240.78 34.0096 242.13 35.9996 242.99C37.9896 243.85 39.8796 244.26 41.9996 243.99C139.42 232.27 234.49 224.38 333 232.99C339.5 233.57 343.96 230.48 347 223.99C352.41 212.37 356.02 199.41 358 183.99C364.01 137.78 370.35 89.8599 356 42.9899C347.16 14.1999 325.79 5.08989 300 4.98989C193.2 4.64989 107.73 5.57989 41.9996 7.98989C25.3696 8.59989 17.7796 11.5799 13.9996 30.9899Z" stroke="var(--maskBorder)" stroke-width="8" /> </g> <defs> <clipPath id="clip0_3335_6487-1511"> <rect width="369" height="249" fill="var(--maskBG)" /> </clipPath> </defs> </svg> <span class="cs-date">Sept <strong>26</strong></span> </div> <div class="cs-info"> <span class="cs-tag">Kindergarten</span> <h3 class="cs-h3">Stitch Carnival Fun Day</h3> <span class="cs-time"> <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/orange-clock.svg" alt="icon" width="24" height="24" loading="lazy" decoding="async"> 08:00am - 05:00pm </span> <span class="cs-place"> <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/orange-pin.svg" alt="icon" width="24" height="24" loading="lazy" decoding="async"> Melbourne’s GPO 434 Bourke St. Dhaka VIC 3074 </span> </div> </a> </li> <li class="cs-item"> <a href="" class="cs-link"> <div class="cs-image-group"> <picture class="cs-picture"> <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class2.jpg"> <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class2.jpg"> <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class2.jpg" alt="person" width="277" height="197" aria-hidden="true"> </picture> <svg class="cs-mask" width="369" height="249" viewBox="0 0 369 249" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <g clip-path="url(#clip0_3335_6487)"> <path d="M369 249V105.57H364.72L360.02 177.28L350.1 221.22L338.48 233.69L294.54 231.71L227.65 231.14L159.67 232.48L102.92 238.23L43.73 243.79L31 238.99L24.33 229L8.32 177.28L5.69 111.52L0 110.67V249H369Z" fill="var(--maskBG)" /> <path d="M0 0H369V114.64L364.64 113.67L364.72 77.5L356.91 50.01L348.69 27.11L329.08 10.47L296.81 4.93L28.9 9.69L21.28 14.57L15.61 25.63L4 124.51H0V0Z" fill="var(--maskBG)" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M366 4H4V245H366V4ZM31 239C-4.86 193.71 3.34 85.57 14 31C17.78 11.59 25.37 8.61 42 8C107.73 5.59 193.2 4.66 300 5C325.79 5.1 347.16 14.21 356 43C370.28 89.64 364.08 137.32 358.09 183.32L358 184C356.03 199.42 352.41 212.38 347 224C343.96 230.49 339.5 233.58 333 233C234.49 224.39 139.41 232.28 42 244C39.88 244.27 37.99 243.86 36 243C34.01 242.14 32.41 240.79 31 239Z" fill="var(--maskBG)" /> <path d="M13.9996 30.9899C9.37956 54.6199 5.22956 88.2999 4.90956 122.57C4.49956 167.43 10.6696 213.31 30.9996 238.99C32.4096 240.78 34.0096 242.13 35.9996 242.99C37.9896 243.85 39.8796 244.26 41.9996 243.99C139.42 232.27 234.49 224.38 333 232.99C339.5 233.57 343.96 230.48 347 223.99C352.41 212.37 356.02 199.41 358 183.99C364.01 137.78 370.35 89.8599 356 42.9899C347.16 14.1999 325.79 5.08989 300 4.98989C193.2 4.64989 107.73 5.57989 41.9996 7.98989C25.3696 8.59989 17.7796 11.5799 13.9996 30.9899Z" stroke="var(--maskBorder)" stroke-width="8" /> </g> <defs> <clipPath id="clip0_3335_6487-1511"> <rect width="369" height="249" fill="var(--maskBG)" /> </clipPath> </defs> </svg> <span class="cs-date">Sept <strong>26</strong></span> </div> <div class="cs-info"> <span class="cs-tag">Kindergarten</span> <h3 class="cs-h3">Stitch Carnival Fun Day</h3> <span class="cs-time"> <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/orange-clock.svg" alt="icon" width="24" height="24" loading="lazy" decoding="async"> 08:00am - 05:00pm </span> <span class="cs-place"> <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/orange-pin.svg" alt="icon" width="24" height="24" loading="lazy" decoding="async"> Melbourne’s GPO 434 Bourke St. Dhaka VIC 3074 </span> </div> </a> </li> <li class="cs-item"> <a href="" class="cs-link"> <div class="cs-image-group"> <picture class="cs-picture"> <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class3.jpg"> <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class3.jpg"> <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/class3.jpg" alt="person" width="277" height="197" aria-hidden="true"> </picture> <svg class="cs-mask" width="369" height="249" viewBox="0 0 369 249" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <g clip-path="url(#clip0_3335_6487)"> <path d="M369 249V105.57H364.72L360.02 177.28L350.1 221.22L338.48 233.69L294.54 231.71L227.65 231.14L159.67 232.48L102.92 238.23L43.73 243.79L31 238.99L24.33 229L8.32 177.28L5.69 111.52L0 110.67V249H369Z" fill="var(--maskBG)" /> <path d="M0 0H369V114.64L364.64 113.67L364.72 77.5L356.91 50.01L348.69 27.11L329.08 10.47L296.81 4.93L28.9 9.69L21.28 14.57L15.61 25.63L4 124.51H0V0Z" fill="var(--maskBG)" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M366 4H4V245H366V4ZM31 239C-4.86 193.71 3.34 85.57 14 31C17.78 11.59 25.37 8.61 42 8C107.73 5.59 193.2 4.66 300 5C325.79 5.1 347.16 14.21 356 43C370.28 89.64 364.08 137.32 358.09 183.32L358 184C356.03 199.42 352.41 212.38 347 224C343.96 230.49 339.5 233.58 333 233C234.49 224.39 139.41 232.28 42 244C39.88 244.27 37.99 243.86 36 243C34.01 242.14 32.41 240.79 31 239Z" fill="var(--maskBG)" /> <path d="M13.9996 30.9899C9.37956 54.6199 5.22956 88.2999 4.90956 122.57C4.49956 167.43 10.6696 213.31 30.9996 238.99C32.4096 240.78 34.0096 242.13 35.9996 242.99C37.9896 243.85 39.8796 244.26 41.9996 243.99C139.42 232.27 234.49 224.38 333 232.99C339.5 233.57 343.96 230.48 347 223.99C352.41 212.37 356.02 199.41 358 183.99C364.01 137.78 370.35 89.8599 356 42.9899C347.16 14.1999 325.79 5.08989 300 4.98989C193.2 4.64989 107.73 5.57989 41.9996 7.98989C25.3696 8.59989 17.7796 11.5799 13.9996 30.9899Z" stroke="var(--maskBorder)" stroke-width="8" /> </g> <defs> <clipPath id="clip0_3335_6487-1511"> <rect width="369" height="249" fill="var(--maskBG)" /> </clipPath> </defs> </svg> <span class="cs-date">Sept <strong>26</strong></span> </div> <div class="cs-info"> <span class="cs-tag">Kindergarten</span> <h3 class="cs-h3">Stitch Carnival Fun Day</h3> <span class="cs-time"> <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/orange-clock.svg" alt="icon" width="24" height="24" loading="lazy" decoding="async"> 08:00am - 05:00pm </span> <span class="cs-place"> <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/orange-pin.svg" alt="icon" width="24" height="24" loading="lazy" decoding="async"> Melbourne’s GPO 434 Bourke St. Dhaka VIC 3074 </span> </div> </a> </li> </ul> <div class="cs-subscribe"> <div class="cs-content"> <span class="cs-topper">How To Get Started</span> <h2 class="cs-title">Subscribe for Newsletter</h2> <p class="cs-text"> Subscribe to our newsletter and stay up-to-date with the latest news, exclusive offers, and exciting updates. </p> <form class="cs-form" name="Contact Form" method="post"> <input class="cs-input" type="email" id="cs-email-1511" name="find-us" placeholder="Email Address"> <button class="cs-button-solid cs-submit" type="submit">Subscribe Now</button> </form> </div> <!--Blob 1--> <svg class="cs-blob cs-blob1" width="442" height="181" viewBox="0 0 442 181" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M252.489 176.108C244.733 172.672 237.743 167.56 233.607 160.093C228.948 151.69 227.354 142.132 225.549 132.816C223.8 123.768 222.174 113.685 215.613 106.753C208.589 99.3218 198.222 97.9066 188.779 100.675C166.962 107.078 156.145 128.699 137.865 140.535C118.722 152.933 95.0075 153.342 73.3722 148.699C62.3132 146.324 51.3566 142.815 41.0171 138.203C30.8686 133.68 20.8553 127.989 12.8594 120.2C-2.16276 105.57 -10.1783 84.2517 -9.55104 63.3245C-8.95325 43.2506 0.0228515 23.804 14.7506 10.3204C22.1738 3.53059 30.7428 -1.34075 40.2622 -4.5846C51.981 -8.57532 64.6158 -10.0663 76.9261 -9.65981C102.269 -8.81824 126.961 -1.15108 152.35 -0.926177C163.586 -0.825539 175.416 -2.47133 185.922 -6.66437C193.811 -9.81028 200.921 -14.5819 206.464 -21.0179C212.258 -27.7462 216.011 -34.8556 220.16 -42.6607C224.937 -51.6552 230.308 -61.2842 237.391 -68.7204C251.7 -83.7333 270.343 -92.3086 290.843 -94.7755C291.2 -94.8203 291.58 -95.0076 291.837 -94.8858C301.964 -96.0097 313.029 -95.9034 323.089 -94.3296C345.245 -90.8693 366.002 -81.5288 385.148 -70.0269C403.396 -59.0679 420.725 -44.682 431.303 -25.8484C440.506 -9.46429 443.962 10.5596 438.364 28.7057C435.742 37.2122 431.19 44.2547 424.667 50.3485C417.408 57.1253 406.704 62.8476 396.616 60.5047C386.662 58.1937 380.375 47.1673 369.894 46.3661C360.556 45.6504 351.703 52.0242 346.149 59.0627C339.212 67.8512 337.553 79.4508 336.538 90.3136C335.513 101.224 335.511 112.159 333.11 122.89C328.818 142.079 319.042 160.548 302.294 171.587C287.917 181.051 268.283 183.1 252.489 176.108Z" fill="var(--blobColor)"/> </svg> <svg class="cs-blob cs-blob2" width="423" height="152" viewBox="0 0 423 152" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M446 185.996C437.652 209.276 424.317 227.375 409 226.996C398.568 226.732 389.048 219.154 380 211.996C346.92 185.812 321.111 207.237 285 219.996C244.784 234.202 223.038 185.716 189 168.996C142.612 146.21 105.611 185.367 58.9998 204.996C34.8473 215.167 10.0832 211.93 1.9998 169.996C-9.5339 110.121 40.5169 96.6287 61.9998 87.9963C77.3226 81.8377 93.2386 72.8434 107 56.9963C119.705 42.3661 131.527 7.18936 146 0.99633C152.671 -1.85625 158.896 2.75738 164 8.99633C171.922 18.6733 177.895 32.0744 187 38.9963C204.137 52.031 224.119 57.6817 244 49.9963C263.795 42.3397 279.796 18.2702 299 7.99633C309.489 2.383 321.457 2.19178 330 10.9963C344.858 26.3211 348.113 61.1321 363 76.9963C379.775 94.8809 403.952 94.1948 424 78.9963C429.052 75.168 433.775 70.4414 439 67.9963C455.161 60.443 463.429 84.0291 462 108.996C460.542 134.291 454.106 163.405 446 185.996Z" fill="var(--blobColor)"/> </svg> </div> </div> </div> <!--Top Right Blob--> <svg class="cs-floater1" width="700" height="718" viewBox="0 0 700 718" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M575.372 95.8714C540.48 67.428 475.128 75.7133 408.812 57.679C342.834 39.0567 276.464 -5.99223 223.034 1.85967C170.192 10.0516 130.124 71.2785 94.2294 131.618C57.872 192.082 25.6359 252.073 10.5877 321.745C-5.04749 391.077 -3.85739 469.133 24.699 540.548C53.3797 612.427 109.82 677.97 179.299 704.108C248.654 729.781 331.925 716.892 396.291 683.235C460.781 650.042 506.409 596.145 563.164 552.593C619.582 509.629 686.548 477.821 697.904 429.527C708.921 381.82 663.651 318.289 639.397 253.678C614.804 189.655 610.264 124.315 575.372 95.8714Z" fill="var(--secondary)"/> </svg> <!--Bottom Left Blob--> <svg class="cs-floater2" width="700" height="694" viewBox="0 0 700 694" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.54245 488.517C-9.90088 447.452 15.0164 386.471 14.7604 317.747C13.849 249.198 -12.4872 173.43 8.92583 123.853C30.5153 74.9308 100.026 52.0753 167.6 33.0207C235.414 13.5513 301.703 -2.05956 372.896 1.43741C443.913 4.27944 519.001 25.6315 580.592 71.6983C642.598 118.005 691.3 189.487 698.565 263.363C705.413 336.999 671.41 414.097 622.242 467.558C573.489 521.26 509.619 551.384 452.862 594.933C396.759 638.308 348.703 694.761 299.115 693.23C250.183 691.524 200.533 631.354 144.401 591.203C88.9242 550.878 26.9858 529.582 8.54245 488.517Z" fill="var(--primary)"/> </svg> </section>
/*-- -------------------------- --> <--- Events --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-2rem); } 100% { transform: translateY(0); } } @keyframes floatAnimation2 { 0% { transform: translateY(0); } 50% { transform: translateY(-3rem); } 100% { transform: translateY(0); } } #events-1511 { padding: var(--sectionPadding); overflow: hidden; display: block; position: relative; z-index: 1; } #events-1511 .cs-container { width: 100%; max-width: 80rem; margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6vw, 4rem); } #events-1511 .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: 43.75rem; display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } #events-1511 .cs-title { max-width: 24ch; } #events-1511 .cs-text { max-width: 100%; } #events-1511 .cs-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } #events-1511 .cs-card-group { width: 100%; /* changes to 741px at desktop */ max-width: 31.25rem; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } #events-1511 .cs-item { text-align: left; list-style: none; width: 100%; max-width: 52.5rem; /* 16px - 24px */ padding: clamp(1rem, 3.9vw, 1.5rem); /* prevents padding from affecting height and width */ box-sizing: border-box; background-color: #fff; border: 1px solid #E8E8E8; border-radius: 2.5rem; transition: border-color 0.3s; } #events-1511 .cs-item:hover { border-color: var(--secondary); } #events-1511 .cs-link { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } #events-1511 .cs-image-group { width: 100%; margin-bottom: 1.5rem; position: relative; z-index: 1; } #events-1511 .cs-picture { width: 100%; height: 12.1875rem; background-color: #1a1a1a; display: block; position: relative; z-index: 1; overflow: hidden; /* prevents flexbox from squsihing it */ flex: none; } #events-1511 .cs-picture img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s, opacity 0.3s; } #events-1511 .cs-mask { --maskBG: #fff; --maskBorder: #e8e8e8; width: 102%; height: 102%; position: absolute; top: -1px; right: 0; bottom: 0; left: -2px; z-index: 1; } #events-1511 .cs-date { font-size: 1rem; line-height: 2.5rem; margin: 0; padding: 0 0.5rem; background-color: #fff; border-radius: 3.125rem; overflow: hidden; color: var(--headerColor); border: 1px solid var(--secondary); display: inline-block; position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 1; } #events-1511 .cs-date:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } #events-1511 .cs-tag { font-size: 1rem; line-height: 2.25rem; font-weight: 700; margin: 0 0 0.75rem 0; padding: 0 1rem; color: var(--primary); border-radius: 3.125rem; overflow: hidden; display: inline-block; position: relative; z-index: 1; } #events-1511 .cs-tag:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--primary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } #events-1511 .cs-h3 { /* 20px - 25px */ font-size: clamp(1.25rem, 2vw, 1.5625rem); line-height: 1.2em; font-weight: 700; margin: 0 0 1rem 0; color: var(--headerColor); } #events-1511 .cs-time, #events-1511 .cs-place { font-size: 1rem; line-height: 1.5em; margin: 0; color: var(--bodyTextColor); display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; } #events-1511 .cs-time { margin: 0 0 0.5rem 0; } #events-1511 .cs-icon { width: 1.5rem; height: auto; display: flex; } #events-1511 .cs-subscribe { width: 100%; max-width: 52.5rem; margin: auto; /* 40px - 100px top & bottom */ /* 16px - 60px left & right */ padding: clamp(2.5rem, 10vw, 6.25rem) clamp(1rem, 5vw, 3.75rem); overflow: hidden; background-color: #fff; border-radius: 2.5rem; /* prevents padding from affecting height abd width */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; /* 28px - 36px */ gap: clamp(1.75rem, 4vw, 2.25rem); position: relative; z-index: 1; } #events-1511 .cs-subscribe:before { /* background-color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; } #events-1511 .cs-subscribe .cs-topper { color: var(--secondary); } #events-1511 .cs-subscribe .cs-title { max-width: 100%; } #events-1511 .cs-subscribe .cs-text { max-width: 31.25rem; } #events-1511 .cs-blob { --blobColor: var(--secondary); opacity: .25; display: none; position: absolute; } #events-1511 .cs-blob1 { width: 16.9375rem; display: block; height: auto; top: 0; left: -8.75rem; } #events-1511 .cs-blob2 { width: 28.8125rem; height: auto; bottom: 0; right: 0; } #events-1511 .cs-form { width: 100%; margin-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; position: relative; z-index: 1; } #events-1511 .cs-input { font-size: 1rem; width: 100%; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); margin: 0; padding: 0; padding-left: 1.25rem; border: none; border-radius: 5rem; /* prevents padding from adding to width and height */ box-sizing: border-box; display: block; } #events-1511 .cs-input::placeholder { color: #767676; } #events-1511 .cs-button-solid { font-size: 1rem; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); text-decoration: none; font-weight: 700; text-align: center; margin: 0; color: #fff; overflow: hidden; min-width: 9.375rem; padding: 0 2rem; background-color: var(--secondary); border-radius: 5rem; display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; } #events-1511 .cs-button-solid:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; transition: width .3s; } #events-1511 .cs-button-solid:hover { cursor: pointer; } #events-1511 .cs-button-solid:hover:before { width: 100%; } #events-1511 .cs-submit { width: 100%; border: none; } #events-1511 .cs-floater1 { /* 500px - 710px */ width: clamp(31.25rem, 50vw, 44.375rem); opacity: .05; position: absolute; top: -20.625rem; left: 70%; z-index: -1; animation-name: floatAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } #events-1511 .cs-floater2 { width: 44.375rem; opacity: .05; display: none; position: absolute; bottom: 4rem; left: -25rem; z-index: -1; animation-name: floatAnimation2; animation-duration: 14s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } } /* Tablet - 768px */ @media only screen and (min-width: 48rem) { #events-1511 .cs-card-group { max-width: 80rem; } #events-1511 .cs-link { flex-direction: row; align-items: center; } #events-1511 .cs-image-group { width: 40%; max-width: 18.75rem; } #events-1511 .cs-input { width: 100%; } #events-1511 .cs-blob1 { left: 0; } } /* Large Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #events-1511 .cs-wrapper { flex-direction: row; align-items: stretch; } #events-1511 .cs-card-group { width: 55%; max-width: 46.3125rem; /* prevents flexbox from squishing it */ flex: none; /* sends it to the right in the 2nd position */ order: 2; } #events-1511 .cs-subscribe { height: auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #events-1511 .cs-blob2 { display: block; } #events-1511 .cs-floater1 { margin-left: 34.4375rem; left: 50%; top: 0.625rem; right: auto; } #events-1511 .cs-floater2 { margin-right: 24.75rem; display: block; right: 50%; bottom: 1.25rem; left: auto; } }
/*-- -------------------------- --> <--- Events --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-2rem); } 100% { transform: translateY(0); } } @keyframes floatAnimation2 { 0% { transform: translateY(0); } 50% { transform: translateY(-3rem); } 100% { transform: translateY(0); } } #events-1511 { padding: var(--sectionPadding); overflow: hidden; display: block; position: relative; z-index: 1; } #events-1511 .cs-container { width: 100%; max-width: 80rem; margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6vw, 4rem); } #events-1511 .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: 43.75rem; display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } #events-1511 .cs-title { max-width: 24ch; } #events-1511 .cs-text { max-width: 100%; } #events-1511 .cs-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } #events-1511 .cs-card-group { width: 100%; /* changes to 741px at desktop */ max-width: 31.25rem; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } #events-1511 .cs-item { text-align: left; list-style: none; width: 100%; max-width: 52.5rem; /* 16px - 24px */ padding: clamp(1rem, 3.9vw, 1.5rem); /* prevents padding from affecting height and width */ box-sizing: border-box; background-color: #fff; border: 1px solid #E8E8E8; border-radius: 2.5rem; transition: border-color 0.3s; } #events-1511 .cs-item:hover { border-color: var(--secondary); } #events-1511 .cs-link { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } #events-1511 .cs-image-group { width: 100%; margin-bottom: 1.5rem; position: relative; z-index: 1; } #events-1511 .cs-picture { width: 100%; height: 12.1875rem; background-color: #1a1a1a; display: block; position: relative; z-index: 1; overflow: hidden; /* prevents flexbox from squsihing it */ flex: none; } #events-1511 .cs-picture img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s, opacity 0.3s; } #events-1511 .cs-mask { --maskBG: #fff; --maskBorder: #e8e8e8; width: 102%; height: 102%; position: absolute; top: -1px; right: 0; bottom: 0; left: -2px; z-index: 1; } #events-1511 .cs-date { font-size: 1rem; line-height: 2.5rem; margin: 0; padding: 0 0.5rem; background-color: #fff; border-radius: 3.125rem; overflow: hidden; color: var(--headerColor); border: 1px solid var(--secondary); display: inline-block; position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 1; } #events-1511 .cs-date:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } #events-1511 .cs-tag { font-size: 1rem; line-height: 2.25rem; font-weight: 700; margin: 0 0 0.75rem 0; padding: 0 1rem; color: var(--primary); border-radius: 3.125rem; overflow: hidden; display: inline-block; position: relative; z-index: 1; } #events-1511 .cs-tag:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--primary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } #events-1511 .cs-h3 { /* 20px - 25px */ font-size: clamp(1.25rem, 2vw, 1.5625rem); line-height: 1.2em; font-weight: 700; margin: 0 0 1rem 0; color: var(--headerColor); } #events-1511 .cs-time, #events-1511 .cs-place { font-size: 1rem; line-height: 1.5em; margin: 0; color: var(--bodyTextColor); display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; } #events-1511 .cs-time { margin: 0 0 0.5rem 0; } #events-1511 .cs-icon { width: 1.5rem; height: auto; display: flex; } #events-1511 .cs-subscribe { width: 100%; max-width: 52.5rem; margin: auto; /* 40px - 100px top & bottom */ /* 16px - 60px left & right */ padding: clamp(2.5rem, 10vw, 6.25rem) clamp(1rem, 5vw, 3.75rem); overflow: hidden; background-color: #fff; border-radius: 2.5rem; /* prevents padding from affecting height abd width */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; /* 28px - 36px */ gap: clamp(1.75rem, 4vw, 2.25rem); position: relative; z-index: 1; } #events-1511 .cs-subscribe:before { /* background-color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; } #events-1511 .cs-subscribe .cs-topper { color: var(--secondary); } #events-1511 .cs-subscribe .cs-title { max-width: 100%; } #events-1511 .cs-subscribe .cs-text { max-width: 31.25rem; } #events-1511 .cs-blob { --blobColor: var(--secondary); opacity: .25; display: none; position: absolute; } #events-1511 .cs-blob1 { width: 16.9375rem; display: block; height: auto; top: 0; left: -8.75rem; } #events-1511 .cs-blob2 { width: 28.8125rem; height: auto; bottom: 0; right: 0; } #events-1511 .cs-form { width: 100%; margin-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; position: relative; z-index: 1; } #events-1511 .cs-input { font-size: 1rem; width: 100%; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); margin: 0; padding: 0; padding-left: 1.25rem; border: none; border-radius: 5rem; /* prevents padding from adding to width and height */ box-sizing: border-box; display: block; } #events-1511 .cs-input::placeholder { color: #767676; } #events-1511 .cs-button-solid { font-size: 1rem; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); text-decoration: none; font-weight: 700; text-align: center; margin: 0; color: #fff; overflow: hidden; min-width: 9.375rem; padding: 0 2rem; background-color: var(--secondary); border-radius: 5rem; display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; } #events-1511 .cs-button-solid:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; transition: width .3s; } #events-1511 .cs-button-solid:hover { cursor: pointer; } #events-1511 .cs-button-solid:hover:before { width: 100%; } #events-1511 .cs-submit { width: 100%; border: none; } #events-1511 .cs-floater1 { /* 500px - 710px */ width: clamp(31.25rem, 50vw, 44.375rem); opacity: .05; position: absolute; top: -20.625rem; left: 70%; z-index: -1; animation-name: floatAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } #events-1511 .cs-floater2 { width: 44.375rem; opacity: .05; display: none; position: absolute; bottom: 4rem; left: -25rem; z-index: -1; animation-name: floatAnimation2; animation-duration: 14s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } } /* Tablet - 768px */ @media only screen and (min-width: 48rem) { #events-1511 .cs-card-group { max-width: 80rem; } #events-1511 .cs-link { flex-direction: row; align-items: center; } #events-1511 .cs-image-group { width: 40%; max-width: 18.75rem; } #events-1511 .cs-input { width: 100%; } #events-1511 .cs-blob1 { left: 0; } } /* Large Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #events-1511 .cs-wrapper { flex-direction: row; align-items: stretch; } #events-1511 .cs-card-group { width: 55%; max-width: 46.3125rem; /* prevents flexbox from squishing it */ flex: none; /* sends it to the right in the 2nd position */ order: 2; } #events-1511 .cs-subscribe { height: auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #events-1511 .cs-blob2 { display: block; } #events-1511 .cs-floater1 { margin-left: 34.4375rem; left: 50%; top: 0.625rem; right: auto; } #events-1511 .cs-floater2 { margin-right: 24.75rem; display: block; right: 50%; bottom: 1.25rem; left: auto; } } /* Dark Mode */ @media only screen and (min-width: 0rem) { body.dark-mode #events-1511 .cs-container:before { opacity: .2; } body.dark-mode #events-1511 .cs-title, body.dark-mode #events-1511 .cs-text { color: var(--bodyTextColorWhite); } body.dark-mode #events-1511 .cs-text { opacity: .8; } body.dark-mode #events-1511 .cs-item { background-color: #05131e; border-color: rgba(255, 255, 255, 0.2); } body.dark-mode #events-1511 .cs-item:hover { border-color: var(--secondary); } body.dark-mode #events-1511 .cs-h3, body.dark-mode #events-1511 .cs-time, body.dark-mode #events-1511 .cs-place { color: var(--bodyTextColorWhite); } body.dark-mode #events-1511 .cs-time, body.dark-mode #events-1511 .cs-place { opacity: .8; } body.dark-mode #events-1511 .cs-tag { color: var(--bodyTextColorWhite); } body.dark-mode #events-1511 .cs-tag:before { opacity: .5; } body.dark-mode #events-1511 .cs-mask { --maskBG: #05131e; --maskBorder: var(--accent); } body.dark-mode #events-1511 .cs-subscribe { background-color: var(--dark); } body.dark-mode #events-1511 .cs-input { background-color: rgba(0, 0, 0, 0.6); color: #fff; } body.dark-mode #events-1511 .cs-floater1, body.dark-mode #events-1511 .cs-floater2 { opacity: .3; } }
/*-- -------------------------- --> <--- Events --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-2rem); } 100% { transform: translateY(0); } } @keyframes floatAnimation2 { 0% { transform: translateY(0); } 50% { transform: translateY(-3rem); } 100% { transform: translateY(0); } } #events-1511 { padding: var(--sectionPadding); overflow: hidden; display: block; position: relative; z-index: 1; .cs-container { width: 100%; max-width: (1280/16rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: (700/16rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-title { max-width: 24ch; } .cs-text { max-width: 100%; } .cs-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-card-group { width: 100%; /* changes to 741px at desktop */ max-width: (500/16rem); padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-item { text-align: left; list-style: none; width: 100%; max-width: (840/16rem); /* 16px - 24px */ padding: clamp(1rem, 3.9vw, 1.5rem); /* prevents padding from affecting height and width */ box-sizing: border-box; background-color: #fff; border: 1px solid #E8E8E8; border-radius: (40/16rem); transition: border-color .3s; &:hover { border-color: var(--secondary); } } .cs-link { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: (24/16rem); } .cs-image-group { width: 100%; margin-bottom: (24/16rem); position: relative; z-index: 1; } .cs-picture { width: 100%; height: (195/16rem); background-color: #1a1a1a; display: block; position: relative; z-index: 1; overflow: hidden; /* prevents flexbox from squsihing it */ flex: none; img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s, opacity 0.3s; } } .cs-mask { --maskBG: #fff; --maskBorder: #e8e8e8; width: 102%; height: 102%; position: absolute; top: -1px; right: 0; bottom: 0; left: -2px; z-index: 1; } .cs-date { font-size: (16/16rem); line-height: (40/16rem); margin: 0; padding: 0 (8/16rem); background-color: #fff; border-radius: (50/16rem); overflow: hidden; color: var(--headerColor); border: 1px solid var(--secondary); display: inline-block; position: absolute; bottom: (20/16rem); left: (20/16rem); z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-tag { font-size: (16/16rem); line-height: (36/16rem); font-weight: 700; margin: 0 0 (12/16rem) 0; padding: 0 (16/16rem); color: var(--primary); border-radius: (50/16rem); overflow: hidden; display: inline-block; position: relative; z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--primary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-h3 { /* 20px - 25px */ font-size: clamp(1.25rem, 2vw, 1.5625rem); line-height: 1.2em; font-weight: 700; margin: 0 0 (16/16rem) 0; color: var(--headerColor); } .cs-time, .cs-place { font-size: (16/16rem); line-height: 1.5em; margin: 0; color: var(--bodyTextColor); display: flex; justify-content: flex-start; align-items: flex-start; gap: (8/16rem); } .cs-time { margin: 0 0 (8/16rem) 0; } .cs-icon { width: (24/16rem); height: auto; display: flex; } .cs-subscribe { width: 100%; max-width: (840/16rem); margin: auto; /* 40px - 100px top & bottom */ /* 16px - 60px left & right */ padding: clamp(2.5rem, 10vw, 6.25rem) clamp(1rem, 5vw, 3.75rem); overflow: hidden; background-color: #fff; border-radius: (40/16rem); /* prevents padding from affecting height abd width */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; /* 28px - 36px */ gap: clamp(1.75rem, 4vw, 2.25rem); position: relative; z-index: 1; &:before { /* background-color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; } .cs-topper { color: var(--secondary); } .cs-title { max-width: 100%; } .cs-text { max-width: (500/16rem); } } .cs-blob { --blobColor: var(--secondary); opacity: .25; display: none; position: absolute; } .cs-blob1 { width: (271/16rem); display: block; height: auto; top: 0; left: (-140/16rem); } .cs-blob2 { width: (461/16rem); height: auto; bottom: 0; right: 0; } .cs-form { width: 100%; margin-top: (32/16rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: (12/16rem); position: relative; z-index: 1; } .cs-input { font-size: (16/16rem); width: 100%; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); margin: 0; padding: 0; padding-left: (20/16rem); border: none; border-radius: (80/16rem); /* prevents padding from adding to width and height */ box-sizing: border-box; display: block; &::placeholder { color: #767676; } } .cs-button-solid { font-size: (16/16rem); /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); text-decoration: none; font-weight: 700; text-align: center; margin: 0; color: #fff; overflow: hidden; min-width: (150/16rem); padding: 0 (32/16rem); background-color: var(--secondary); border-radius: (80/16rem); display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; &:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; transition: width .3s; } &:hover { cursor: pointer; &:before { width: 100%; } } } .cs-submit { width: 100%; border: none; } .cs-floater1 { /* 500px - 710px */ width: clamp(31.25rem, 50vw, 44.375rem); opacity: .05; position: absolute; top: (-330/16rem); left: 70%; z-index: -1; animation-name: floatAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } .cs-floater2 { width: (710/16rem); opacity: .05; display: none; position: absolute; bottom: (64/16rem); left: (-400/16rem); z-index: -1; animation-name: floatAnimation2; animation-duration: 14s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } } } /* Tablet - 768px */ @media only screen and (min-width: 48rem) { #events-1511 { .cs-card-group { max-width: (1280/16rem); } .cs-link { flex-direction: row; align-items: center; } .cs-image-group { width: 40%; max-width: (300/16rem); } .cs-input { width: 100%; } .cs-blob1 { left: 0; } } } /* Large Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #events-1511 { .cs-wrapper { flex-direction: row; align-items: stretch; } .cs-card-group { width: 55%; max-width: (741/16rem); /* prevents flexbox from squishing it */ flex: none; /* sends it to the right in the 2nd position */ order: 2; } .cs-subscribe { height: auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cs-blob2 { display: block; } .cs-floater1 { margin-left: (551/16rem); left: 50%; top: (10/16rem); right: auto; } .cs-floater2 { margin-right: (396/16rem); display: block; right: 50%; bottom: (20/16rem); left: auto; } } }
/*-- -------------------------- --> <--- Events --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-2rem); } 100% { transform: translateY(0); } } @keyframes floatAnimation2 { 0% { transform: translateY(0); } 50% { transform: translateY(-3rem); } 100% { transform: translateY(0); } } #events-1511 { padding: var(--sectionPadding); overflow: hidden; display: block; position: relative; z-index: 1; .cs-container { width: 100%; max-width: (1280/16rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: (700/16rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-title { max-width: 24ch; } .cs-text { max-width: 100%; } .cs-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-card-group { width: 100%; /* changes to 741px at desktop */ max-width: (500/16rem); padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-item { text-align: left; list-style: none; width: 100%; max-width: (840/16rem); /* 16px - 24px */ padding: clamp(1rem, 3.9vw, 1.5rem); /* prevents padding from affecting height and width */ box-sizing: border-box; background-color: #fff; border: 1px solid #E8E8E8; border-radius: (40/16rem); transition: border-color .3s; &:hover { border-color: var(--secondary); } } .cs-link { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: (24/16rem); } .cs-image-group { width: 100%; margin-bottom: (24/16rem); position: relative; z-index: 1; } .cs-picture { width: 100%; height: (195/16rem); background-color: #1a1a1a; display: block; position: relative; z-index: 1; overflow: hidden; /* prevents flexbox from squsihing it */ flex: none; img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s, opacity 0.3s; } } .cs-mask { --maskBG: #fff; --maskBorder: #e8e8e8; width: 102%; height: 102%; position: absolute; top: -1px; right: 0; bottom: 0; left: -2px; z-index: 1; } .cs-date { font-size: (16/16rem); line-height: (40/16rem); margin: 0; padding: 0 (8/16rem); background-color: #fff; border-radius: (50/16rem); overflow: hidden; color: var(--headerColor); border: 1px solid var(--secondary); display: inline-block; position: absolute; bottom: (20/16rem); left: (20/16rem); z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-tag { font-size: (16/16rem); line-height: (36/16rem); font-weight: 700; margin: 0 0 (12/16rem) 0; padding: 0 (16/16rem); color: var(--primary); border-radius: (50/16rem); overflow: hidden; display: inline-block; position: relative; z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--primary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-h3 { /* 20px - 25px */ font-size: clamp(1.25rem, 2vw, 1.5625rem); line-height: 1.2em; font-weight: 700; margin: 0 0 (16/16rem) 0; color: var(--headerColor); } .cs-time, .cs-place { font-size: (16/16rem); line-height: 1.5em; margin: 0; color: var(--bodyTextColor); display: flex; justify-content: flex-start; align-items: flex-start; gap: (8/16rem); } .cs-time { margin: 0 0 (8/16rem) 0; } .cs-icon { width: (24/16rem); height: auto; display: flex; } .cs-subscribe { width: 100%; max-width: (840/16rem); margin: auto; /* 40px - 100px top & bottom */ /* 16px - 60px left & right */ padding: clamp(2.5rem, 10vw, 6.25rem) clamp(1rem, 5vw, 3.75rem); overflow: hidden; background-color: #fff; border-radius: (40/16rem); /* prevents padding from affecting height abd width */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; /* 28px - 36px */ gap: clamp(1.75rem, 4vw, 2.25rem); position: relative; z-index: 1; &:before { /* background-color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; } .cs-topper { color: var(--secondary); } .cs-title { max-width: 100%; } .cs-text { max-width: (500/16rem); } } .cs-blob { --blobColor: var(--secondary); opacity: .25; display: none; position: absolute; } .cs-blob1 { width: (271/16rem); display: block; height: auto; top: 0; left: (-140/16rem); } .cs-blob2 { width: (461/16rem); height: auto; bottom: 0; right: 0; } .cs-form { width: 100%; margin-top: (32/16rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: (12/16rem); position: relative; z-index: 1; } .cs-input { font-size: (16/16rem); width: 100%; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); margin: 0; padding: 0; padding-left: (20/16rem); border: none; border-radius: (80/16rem); /* prevents padding from adding to width and height */ box-sizing: border-box; display: block; &::placeholder { color: #767676; } } .cs-button-solid { font-size: (16/16rem); /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); text-decoration: none; font-weight: 700; text-align: center; margin: 0; color: #fff; overflow: hidden; min-width: (150/16rem); padding: 0 (32/16rem); background-color: var(--secondary); border-radius: (80/16rem); display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; &:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; transition: width .3s; } &:hover { cursor: pointer; &:before { width: 100%; } } } .cs-submit { width: 100%; border: none; } .cs-floater1 { /* 500px - 710px */ width: clamp(31.25rem, 50vw, 44.375rem); opacity: .05; position: absolute; top: (-330/16rem); left: 70%; z-index: -1; animation-name: floatAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } .cs-floater2 { width: (710/16rem); opacity: .05; display: none; position: absolute; bottom: (64/16rem); left: (-400/16rem); z-index: -1; animation-name: floatAnimation2; animation-duration: 14s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } } } /* Tablet - 768px */ @media only screen and (min-width: 48rem) { #events-1511 { .cs-card-group { max-width: (1280/16rem); } .cs-link { flex-direction: row; align-items: center; } .cs-image-group { width: 40%; max-width: (300/16rem); } .cs-input { width: 100%; } .cs-blob1 { left: 0; } } } /* Large Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #events-1511 { .cs-wrapper { flex-direction: row; align-items: stretch; } .cs-card-group { width: 55%; max-width: (741/16rem); /* prevents flexbox from squishing it */ flex: none; /* sends it to the right in the 2nd position */ order: 2; } .cs-subscribe { height: auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cs-blob2 { display: block; } .cs-floater1 { margin-left: (551/16rem); left: 50%; top: (10/16rem); right: auto; } .cs-floater2 { margin-right: (396/16rem); display: block; right: 50%; bottom: (20/16rem); left: auto; } } } /* Dark Mode */ @media only screen and (min-width: 0rem) { body.dark-mode { #events-1511 { .cs-container { &:before { opacity: .2; } } .cs-title, .cs-text { color: var(--bodyTextColorWhite); } .cs-text { opacity: .8; } .cs-item { background-color: #05131e; border-color: rgba(255, 255, 255, .2); &:hover { border-color: var(--secondary); } } .cs-h3, .cs-time, .cs-place { color: var(--bodyTextColorWhite); } .cs-time, .cs-place { opacity: .8; } .cs-tag { color: var(--bodyTextColorWhite); &:before { opacity: .5; } } .cs-mask { --maskBG: #05131e; --maskBorder: var(--accent) } .cs-subscribe { background-color: var(--dark); } .cs-input { background-color: rgba(0, 0, 0, .6); color: #fff; } .cs-floater1, .cs-floater2 { opacity: .3; } } } }
/*-- -------------------------- --> <--- Events --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-2rem); } 100% { transform: translateY(0); } } @keyframes floatAnimation2 { 0% { transform: translateY(0); } 50% { transform: translateY(-3rem); } 100% { transform: translateY(0); } } #events-1511 { padding: var(--sectionPadding); overflow: hidden; display: block; position: relative; z-index: 1; .cs-container { width: 100%; max-width: calc(1280 / 16 * 1rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: calc(700 / 16 * 1rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-title { max-width: 24ch; } .cs-text { max-width: 100%; } .cs-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-card-group { width: 100%; /* changes to 741px at desktop */ max-width: calc(500 / 16 * 1rem); padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-item { text-align: left; list-style: none; width: 100%; max-width: calc(840 / 16 * 1rem); /* 16px - 24px */ padding: clamp(1rem, 3.9vw, 1.5rem); /* prevents padding from affecting height and width */ box-sizing: border-box; background-color: #fff; border: 1px solid #E8E8E8; border-radius: calc(40 / 16 * 1rem); transition: border-color .3s; &:hover { border-color: var(--secondary); } } .cs-link { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 / 16 * 1rem); } .cs-picture-group { width: 100%; margin-bottom: calc(24 / 16 * 1rem); position: relative; } .cs-picture { width: 100%; height: calc(195 / 16 * 1rem); background-color: #1a1a1a; display: block; position: relative; z-index: 1; overflow: hidden; /* prevents flexbox from squsihing it */ flex: none; img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s, opacity 0.3s; } } .cs-mask { --maskBG: #fff; --maskBorder: #e8e8e8; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .cs-date { font-size: calc(16 / 16 * 1rem); line-height: calc(40 / 16 * 1rem); margin: 0; padding: 0 calc(8 / 16 * 1rem); background-color: #fff; border-radius: calc(50 / 16 * 1rem); overflow: hidden; color: var(--headerColor); border: 1px solid var(--secondary); display: inline-block; position: absolute; bottom: calc(20 / 16 * 1rem); left: calc(20 / 16 * 1rem); z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-tag { font-size: calc(16 / 16 * 1rem); line-height: calc(36 / 16 * 1rem); font-weight: 700; margin: 0 0 calc(12 / 16 * 1rem) 0; padding: 0 calc(16 / 16 * 1rem); color: var(--primary); border-radius: calc(50 / 16 * 1rem); overflow: hidden; display: inline-block; position: relative; z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--primary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-h3 { /* 20px - 25px */ font-size: clamp(1.25rem, 2vw, 1.5625rem); line-height: 1.2em; font-weight: 700; margin: 0 0 calc(16 / 16 * 1rem) 0; color: var(--headerColor); } .cs-time, .cs-place { font-size: calc(16 / 16 * 1rem); line-height: 1.5em; margin: 0; color: var(--bodyTextColor); display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(8 / 16 * 1rem); } .cs-time { margin: 0 0 calc(8 / 16 * 1rem) 0; } .cs-icon { width: calc(24 / 16 * 1rem); height: auto; display: flex; } .cs-subscribe { width: 100%; max-width: calc(840 / 16 * 1rem); margin: auto; /* 40px - 100px top & bottom */ /* 16px - 60px left & right */ padding: clamp(2.5rem, 10vw, 6.25rem) clamp(1rem, 5vw, 3.75rem); overflow: hidden; background-color: #fff; border-radius: calc(40 / 16 * 1rem); /* prevents padding from affecting height abd width */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; /* 28px - 36px */ gap: clamp(1.75rem, 4vw, 2.25rem); position: relative; z-index: 1; &:before { /* background-color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; } .cs-topper { color: var(--secondary); } .cs-title { max-width: 100%; } .cs-text { max-width: calc(500 / 16 * 1rem); } } .cs-blob { --blobColor: var(--secondary); opacity: .25; display: none; position: absolute; } .cs-blob1 { width: calc(271 / 16 * 1rem); display: block; height: auto; top: 0; left: calc(-140 / 16 * 1rem); } .cs-blob2 { width: calc(461 / 16 * 1rem); height: auto; bottom: 0; right: 0; } .cs-form { width: 100%; margin-top: calc(32 / 16 * 1rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 / 16 * 1rem); position: relative; z-index: 1; } .cs-input { font-size: calc(16 / 16 * 1rem); width: 100%; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); margin: 0; padding: 0; padding-left: calc(20 / 16 * 1rem); border: none; border-radius: calc(80 / 16 * 1rem); /* prevents padding from adding to width and height */ box-sizing: border-box; display: block; &::placeholder { color: #767676; } } .cs-button-solid { font-size: calc(16 / 16 * 1rem); /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); text-decoration: none; font-weight: 700; text-align: center; margin: 0; color: #fff; overflow: hidden; min-width: calc(150 / 16 * 1rem); padding: 0 calc(32 / 16 * 1rem); background-color: var(--secondary); border-radius: calc(80 / 16 * 1rem); display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; &:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; transition: width .3s; } &:hover { cursor: pointer; &:before { width: 100%; } } } .cs-submit { width: 100%; border: none; } .cs-floater1 { /* 500px - 710px */ width: clamp(31.25rem, 50vw, 44.375rem); opacity: .05; position: absolute; top: calc(-330 / 16 * 1rem); left: 70%; z-index: -1; animation-name: floatAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } .cs-floater2 { width: calc(710 / 16 * 1rem); opacity: .05; display: none; position: absolute; bottom: calc(64 / 16 * 1rem); left: calc(-400 / 16 * 1rem); z-index: -1; animation-name: floatAnimation2; animation-duration: 14s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } } } /* Tablet - 768px */ @media only screen and (min-width: 48rem) { #events-1511 { .cs-card-group { max-width: calc(1280 / 16 * 1rem); } .cs-link { flex-direction: row; align-items: center; } .cs-image-group { width: 40%; max-width: calc(300 / 16 * 1rem); } .cs-input { width: 100%; } .cs-blob1 { left: 0; } } } /* Large Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #events-1511 { .cs-wrapper { flex-direction: row; align-items: stretch; } .cs-card-group { width: 55%; max-width: calc(741 / 16 * 1rem); /* prevents flexbox from squishing it */ flex: none; /* sends it to the right in the 2nd position */ order: 2; } .cs-subscribe { height: auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cs-blob2 { display: block; } .cs-floater1 { margin-left: calc(551 / 16 * 1rem); left: 50%; top: calc(10 / 16 * 1rem); right: auto; } .cs-floater2 { margin-right: calc(396 / 16 * 1rem); display: block; right: 50%; bottom: calc(20 / 16 * 1rem); left: auto; } } }
/*-- -------------------------- --> <--- Events --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { @keyframes floatAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(-2rem); } 100% { transform: translateY(0); } } @keyframes floatAnimation2 { 0% { transform: translateY(0); } 50% { transform: translateY(-3rem); } 100% { transform: translateY(0); } } #events-1511 { padding: var(--sectionPadding); overflow: hidden; display: block; position: relative; z-index: 1; .cs-container { width: 100%; max-width: calc(1280 / 16 * 1rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: calc(700 / 16 * 1rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-title { max-width: 24ch; } .cs-text { max-width: 100%; } .cs-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-card-group { width: 100%; /* changes to 741px at desktop */ max-width: calc(500 / 16 * 1rem); padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; /* 16px - 20px */ gap: clamp(1rem, 2.5vw, 1.25rem); } .cs-item { text-align: left; list-style: none; width: 100%; max-width: calc(840 / 16 * 1rem); /* 16px - 24px */ padding: clamp(1rem, 3.9vw, 1.5rem); /* prevents padding from affecting height and width */ box-sizing: border-box; background-color: #fff; border: 1px solid #E8E8E8; border-radius: calc(40 / 16 * 1rem); transition: border-color .3s; &:hover { border-color: var(--secondary); } } .cs-link { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 / 16 * 1rem); } .cs-picture-group { width: 100%; margin-bottom: calc(24 / 16 * 1rem); position: relative; } .cs-picture { width: 100%; height: calc(195 / 16 * 1rem); background-color: #1a1a1a; display: block; position: relative; z-index: 1; overflow: hidden; /* prevents flexbox from squsihing it */ flex: none; img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s, opacity 0.3s; } } .cs-mask { --maskBG: #fff; --maskBorder: #e8e8e8; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .cs-date { font-size: calc(16 / 16 * 1rem); line-height: calc(40 / 16 * 1rem); margin: 0; padding: 0 calc(8 / 16 * 1rem); background-color: #fff; border-radius: calc(50 / 16 * 1rem); overflow: hidden; color: var(--headerColor); border: 1px solid var(--secondary); display: inline-block; position: absolute; bottom: calc(20 / 16 * 1rem); left: calc(20 / 16 * 1rem); z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-tag { font-size: calc(16 / 16 * 1rem); line-height: calc(36 / 16 * 1rem); font-weight: 700; margin: 0 0 calc(12 / 16 * 1rem) 0; padding: 0 calc(16 / 16 * 1rem); color: var(--primary); border-radius: calc(50 / 16 * 1rem); overflow: hidden; display: inline-block; position: relative; z-index: 1; &:before { /* background color */ content: ''; width: 100%; height: 100%; background: var(--primary); opacity: .1; position: absolute; display: block; top: 0; left: 0; z-index: -1; } } .cs-h3 { /* 20px - 25px */ font-size: clamp(1.25rem, 2vw, 1.5625rem); line-height: 1.2em; font-weight: 700; margin: 0 0 calc(16 / 16 * 1rem) 0; color: var(--headerColor); } .cs-time, .cs-place { font-size: calc(16 / 16 * 1rem); line-height: 1.5em; margin: 0; color: var(--bodyTextColor); display: flex; justify-content: flex-start; align-items: flex-start; gap: calc(8 / 16 * 1rem); } .cs-time { margin: 0 0 calc(8 / 16 * 1rem) 0; } .cs-icon { width: calc(24 / 16 * 1rem); height: auto; display: flex; } .cs-subscribe { width: 100%; max-width: calc(840 / 16 * 1rem); margin: auto; /* 40px - 100px top & bottom */ /* 16px - 60px left & right */ padding: clamp(2.5rem, 10vw, 6.25rem) clamp(1rem, 5vw, 3.75rem); overflow: hidden; background-color: #fff; border-radius: calc(40 / 16 * 1rem); /* prevents padding from affecting height abd width */ box-sizing: border-box; display: flex; flex-direction: column; align-items: center; /* 28px - 36px */ gap: clamp(1.75rem, 4vw, 2.25rem); position: relative; z-index: 1; &:before { /* background-color */ content: ''; width: 100%; height: 100%; background: var(--secondary); opacity: .1; position: absolute; display: block; top: 0; left: 0; } .cs-topper { color: var(--secondary); } .cs-title { max-width: 100%; } .cs-text { max-width: calc(500 / 16 * 1rem); } } .cs-blob { --blobColor: var(--secondary); opacity: .25; display: none; position: absolute; } .cs-blob1 { width: calc(271 / 16 * 1rem); display: block; height: auto; top: 0; left: calc(-140 / 16 * 1rem); } .cs-blob2 { width: calc(461 / 16 * 1rem); height: auto; bottom: 0; right: 0; } .cs-form { width: 100%; margin-top: calc(32 / 16 * 1rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 / 16 * 1rem); position: relative; z-index: 1; } .cs-input { font-size: calc(16 / 16 * 1rem); width: 100%; /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); margin: 0; padding: 0; padding-left: calc(20 / 16 * 1rem); border: none; border-radius: calc(80 / 16 * 1rem); /* prevents padding from adding to width and height */ box-sizing: border-box; display: block; &::placeholder { color: #767676; } } .cs-button-solid { font-size: calc(16 / 16 * 1rem); /* 46px - 56px */ line-height: clamp(2.875rem, 5.5vw, 3.5rem); text-decoration: none; font-weight: 700; text-align: center; margin: 0; color: #fff; overflow: hidden; min-width: calc(150 / 16 * 1rem); padding: 0 calc(32 / 16 * 1rem); background-color: var(--secondary); border-radius: calc(80 / 16 * 1rem); display: inline-block; position: relative; z-index: 1; /* prevents padding from adding to the width */ box-sizing: border-box; &:before { content: ''; position: absolute; height: 100%; width: 0%; background: #000; opacity: 1; top: 0; left: 0; z-index: -1; transition: width .3s; } &:hover { cursor: pointer; &:before { width: 100%; } } } .cs-submit { width: 100%; border: none; } .cs-floater1 { /* 500px - 710px */ width: clamp(31.25rem, 50vw, 44.375rem); opacity: .05; position: absolute; top: calc(-330 / 16 * 1rem); left: 70%; z-index: -1; animation-name: floatAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } .cs-floater2 { width: calc(710 / 16 * 1rem); opacity: .05; display: none; position: absolute; bottom: calc(64 / 16 * 1rem); left: calc(-400 / 16 * 1rem); z-index: -1; animation-name: floatAnimation2; animation-duration: 14s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: infinite; } } } /* Tablet - 768px */ @media only screen and (min-width: 48rem) { #events-1511 { .cs-card-group { max-width: calc(1280 / 16 * 1rem); } .cs-link { flex-direction: row; align-items: center; } .cs-image-group { width: 40%; max-width: calc(300 / 16 * 1rem); } .cs-input { width: 100%; } .cs-blob1 { left: 0; } } } /* Large Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #events-1511 { .cs-wrapper { flex-direction: row; align-items: stretch; } .cs-card-group { width: 55%; max-width: calc(741 / 16 * 1rem); /* prevents flexbox from squishing it */ flex: none; /* sends it to the right in the 2nd position */ order: 2; } .cs-subscribe { height: auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cs-blob2 { display: block; } .cs-floater1 { margin-left: calc(551 / 16 * 1rem); left: 50%; top: calc(10 / 16 * 1rem); right: auto; } .cs-floater2 { margin-right: calc(396 / 16 * 1rem); display: block; right: 50%; bottom: calc(20 / 16 * 1rem); left: auto; } } } /* Dark Mode */ @media only screen and (min-width: 0rem) { body.dark-mode { #events-1511 { .cs-container { &:before { opacity: .2; } } .cs-title, .cs-text { color: var(--bodyTextColorWhite); } .cs-text { opacity: .8; } .cs-item { background-color: #05131e; border-color: rgba(255, 255, 255, .2); &:hover { border-color: var(--secondary); } } .cs-h3, .cs-time, .cs-place { color: var(--bodyTextColorWhite); } .cs-time, .cs-place { opacity: .8; } .cs-tag { color: var(--bodyTextColorWhite); &:before { opacity: .5; } } .cs-mask { --maskBG: #05131e; --maskBorder: var(--accent) } .cs-subscribe { background-color: var(--dark); } .cs-input { background-color: rgba(0, 0, 0, .6); color: #fff; } .cs-floater1, .cs-floater2 { opacity: .3; } } } }
:root { /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */ --primary: #ff6a3e; --primaryLight: #ffba43; --secondary: #ffba43; --secondaryLight: #ffba43; --headerColor: #1a1a1a; --bodyTextColor: #4e4b66; --bodyTextColorWhite: #fafbfc; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; } body { margin: 0; padding: 0; } *, *:before, *:after { /* prevents padding from affecting height and width */ box-sizing: border-box; } .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: inherit; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; display: block; } .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: inherit; max-width: 43.75rem; margin: 0 0 1rem 0; color: var(--headerColor); position: relative; } .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: inherit; width: 100%; max-width: 40.625rem; margin: 0; color: var(--bodyTextColor); }
:root { /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */ --primary: #ff6a3e; --primaryLight: #ffba43; --secondary: #ffba43; --secondaryLight: #ffba43; --headerColor: #1a1a1a; --bodyTextColor: #4e4b66; --bodyTextColorWhite: #fafbfc; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; } body { margin: 0; padding: 0; } *, *:before, *:after { /* prevents padding from affecting height and width */ box-sizing: border-box; } .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: inherit; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: (4/16rem); display: block; } .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: inherit; max-width: (700/16rem); margin: 0 0 (16/16rem) 0; color: var(--headerColor); position: relative; } .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: inherit; width: 100%; max-width: (650/16rem); margin: 0; color: var(--bodyTextColor); }
:root { /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */ --primary: #ff6a3e; --primaryLight: #ffba43; --secondary: #ffba43; --secondaryLight: #ffba43; --headerColor: #1a1a1a; --bodyTextColor: #4e4b66; --bodyTextColorWhite: #fafbfc; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; } body { margin: 0; padding: 0; } *, *:before, *:after { /* prevents padding from affecting height and width */ box-sizing: border-box; } .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: inherit; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: calc(4 / 16 * 1rem); display: block; } .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: inherit; max-width: calc(700 / 16 * 1rem); margin: 0 0 calc(16 / 16 * 1rem) 0; color: var(--headerColor); position: relative; } .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: inherit; width: 100%; max-width: calc(650 / 16 * 1rem); margin: 0; color: var(--bodyTextColor); }
Lorem Ipsum
Undo
