/* Theme Name: Specialty Shops SouthPark Author: Infinitee Author URI: https://www.infinitee.com/ Version: 2.0 */ /*Reset*/ a,hr{padding:0}a,input[type=checkbox]{vertical-align:baseline}article,aside,figure,footer,header,hgroup,hr,img.aligncenter,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0;margin:0;padding:0}td,td img{vertical-align:top}embed,img,object{max-width:100%;height:auto;}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{font-size:100%;background:0 0;margin:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0}alignright,img.alignright{float:right;margin:15px 0 15px 15px}.aligncenter,img.aligncenter{margin:15px auto}table{border-collapse:collapse;border-spacing:0;font:100%}th{vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre-line;word-wrap:break-word}input,select,textarea{font:99% sans-serif}a:active,a:hover{outline:0}small{font-size:85%}strong,th{font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.ie6 input,input[type=radio]{vertical-align:text-bottom} /*Styles*/ body{} body, select, input, textarea{ font-family: "Josefin Sans", Helvetica, Arial, sans-serif; color: #383938;} a{ color: #9F5424; text-decoration: none;} a:hover, a:focus{ color: #000;} .button, button{ -webkit-appearance: none; display: inline-block; color: #fff; background-color: #9F5424; font-size: 15px; line-height: 15px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; border-radius: 3px; padding: 17px 30px 15px;} .button:hover, button:hover, .button:focus, button:focus{ color: #fff; background-color: #000;} .screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;} a, img, .button, button{ transition: all .2s ease 0s;} .mobile-only{ display: none;} h1, h2, h3, h4, h5, h6{ line-height: normal;} h1{ font-family: "Noto Serif Display", Georgia, Times, "Times New Roman", serif; font-style: italic; font-weight: 600; font-size: 72px; line-height: 96px; letter-spacing: .1em; text-transform: lowercase;} h2{ font-size: 26px; font-weight: 400; text-transform: uppercase; font-family: "Josefin Sans", Helvetica, Arial, sans-serif;} h3{} h4{} h5{} h6{} .page-wrap{} .wrapper, .container{ width: 95%; max-width: 1200px; margin: 0 auto;} .container{ display: flex;} .wrapper:after{ content: ""; display: table; clear: both;} nav ul{ list-style: none; position: relative; float:left; margin:0; padding:0;} nav ul a{ display: block; line-height: 32px; text-decoration: none;} nav ul li{ position: relative; float: left; margin: 0; padding: 0;} nav ul li.current-menu-item a, .nav ul li:hover > a{} nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; text-align: left;} nav ul ul li{ float: none; width: 200px;} nav ul ul a{ line-height: 120%;} nav ul ul ul{ top: 0; left: 100%;} nav ul li:hover > ul{ display: block;} .header{ background-color: #212529; padding: 30px 0;} .header .container{ justify-content: space-between; align-items: center;} .header .nav li{ margin-left: 20px;} .header .nav a{ color: #fff; text-transform: uppercase; font-size: 16px; line-height: 16px;} .header .nav li:hover > a, .header .nav li.current-menu-item a{ color: #666;} .content{ font-size: 16px; line-height: 24px; font-weight: 300; font-family: Helvetica, Arial, sans-serif;} .content p{ margin-top: 15px;} .content ul{ list-style: disc; margin: 15px 0 0 30px;} .content ol{ margin: 15px 0 0 30px;} .navigation{ padding: 0; text-align: center; margin-top: 60px;} .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ color: #fff; text-decoration: none;} .navigation li{ display: inline;} .navigation li a{ padding: 8px 12px 6px; text-transform: uppercase; font-weight: 350; font-size: 14px; line-height: 14px;} .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ background-color: #9F5424; cursor: pointer;} .navigation li a:hover, .navigation li.active a{ background-color: #000;} .search-form{} .search-input{} .search-submit{} .footer{ background-color: #212529; color: #fff; padding: 30px 0 50px;} .footer .container{ justify-content: space-between; position: relative;} .footer .credits{ position: absolute; left: 50%; transform: translateX(-50%); text-align: center; font-size: 14px;} .footer .credits a{ color: #fff;} .footer .credits a:hover{ color: #666;} .footer .credits img{ margin-bottom: 25px;} .footer .credits br{ display: none;} .footer .credits .legal{ font-size: 12px; margin-top: 15px;} .footer .source img{ max-width: 100px;} .footer .footer-nav .nav ul{ float: none;} .footer .footer-nav .nav li{ display: block; float: none; margin-bottom: 12px;} .footer .footer-nav .nav li a{ font-size: 15px; line-height: 15px; color: #fff;} .footer .footer-nav .nav li a:hover{ color: #666;} .footer .footer-nav p{ text-transform: uppercase; font-size: 14px; line-height: 14px; font-weight: 600; margin-top: 25px;} .footer .footer-nav .social ul{ display: flex; align-items: center; font-size: 26px; line-height: 26px; margin-top: 10px;} .footer .footer-nav .social ul li{ margin-right: 10px;} .footer .footer-nav .social ul li a{ color: #fff;} .footer .footer-nav .social ul li a:hover{ color: #666;} .video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0;} .map-wrapper{ position: relative; padding-bottom: 35%; height: 0;} .video-wrapper iframe, .map-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* Homepage */ .home .slider.slick-slider{ margin-bottom: 0 ;} .home .slider .single-slide{ background-size: cover; background-position: center center; color: #fff; position: relative; aspect-ratio: 5/2.5; display: flex; justify-content: center; align-items: center;} .home .slider .single-slide:after{ content: ""; position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,.2); top: 0; left: 0;} .home .slider .slide-content{ position: relative; z-index: 2; display: flex; align-items: center; flex-direction: column; opacity: 0; transition: opacity 0.5s ease-in 1s; padding: 0 2.5%;} .home .slider .slick-active .slide-content{ opacity: 1;} .home .slider .slide-content img{ margin: -60px 0 30px;} .home .slider .slide-content h2{ font-size: 18px; line-height: 18px; margin-top: 10px; text-align: center;} .home .slider .slick-dots{ bottom: 30px; margin: 0;} .home .slider .slick-dots li button:before { font-size: 16px; color: white; opacity: 0.5;} .home .slider .slick-dots li.slick-active button:before { color: white; opacity: 1;} .card-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 20px;} .card-grid .single-card{ background-size: 112%; background-position: center center; aspect-ratio: 4/2.5; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; overflow: hidden; transition: background-size 0.8s ease-in-out;} .card-grid .single-card:hover{ background-size: 118%;} .card-grid .single-card h2{ font-family: "Noto Serif Display", Georgia, Times, "Times New Roman", serif; text-transform: lowercase; font-size: 40px; line-height: 36px; font-style: italic; font-weight: 600; position: relative; z-index: 1;} .card-grid .single-card a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;} .card-grid .single-card:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); transition: background 0.8s ease-in-out;} .card-grid .single-card:hover:after{ background: rgba(0,0,0,.5);} .home .insta{ margin: 40px 20px;} .home .insta a{ color: #383938;} .home .insta a:hover{ color: #9F5424;} /* All Tenants Page */ .tenants .hero{ aspect-ratio: 7/2; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative;} .tenants .hero:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2);} .tenants .hero .hero-content{ display: flex; align-items: center; flex-direction: column; position: relative; z-index: 2;} .tenants .hero .hero-content img{ margin: -60px 0 30px;} .tenants .hero .hero-content h1{ color: #fff; font-size: 48px; line-height: 48px;} .tenants .tenant-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin: 60px 0 100px;} .tenants .tenant-grid article{ display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid #666; aspect-ratio: 16/10; transition: all .2s ease 0s;} .tenants .tenant-grid article a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 3;} .tenants .tenant-grid article:hover{ border: 1px solid #fff; transition: all .2s ease 0s;} .tenants .tenant-grid span{ position: absolute; bottom: 0; left: 0; background-color: #9F5424; color: #fff; text-transform: uppercase; font-weight: 500; font-size: 12px; line-height: 12px; padding: 8px 10px 5px; z-index: 3; opacity: 1; transition: all .2s ease 0s;} .tenants .tenant-grid article:hover span{ opacity: 0; transition: all .2s ease 0s;} .single-shops-restaurants .content .container{ justify-content: space-between; margin: 100px auto 0;} .single-shops-restaurants .tenant-content, .single-shops-restaurants .tenant-image{ width: 46%;} .single-shops-restaurants h1{ font-size: 26px; line-height: 34px; letter-spacing: 0; font-family: "Josefin Sans", Helvetica, Arial, sans-serif; text-transform: uppercase; font-style: normal; margin-bottom: 15px;} .single-shops-restaurants .tenant-content{ font-size: 16px; line-height: 28px; margin-bottom: 100px;} .single-shops-restaurants .tenant-content ul{ margin: 25px 0 0; list-style: none;} .single-shops-restaurants .tenant-content ul li a{ font-weight: 400;} .single-shops-restaurants .tenant-contact{ font-family: "Josefin Sans", Helvetica, Arial, sans-serif; background-color: #EAE6E0; padding: 45px 0 60px; text-align: center; font-weight: 400; font-size: 16px; line-height: 21px;} .single-shops-restaurants .tenant-contact .container{ margin: 0 auto;} .single-shops-restaurants .tenant-contact .container div{ width: 25%;} .single-shops-restaurants .tenant-contact .container a{ color: #000;} .single-shops-restaurants .tenant-contact .container a:hover{ color: #9F5424;} .single-shops-restaurants .tenant-contact .container i{ font-size: 24px; color: #9F5424;} .single-shops-restaurants .tenant-contact .tenant-website{ text-transform: uppercase;} /* About Page */ .about .hero{ background-size: cover; background-position: center center; aspect-ratio: 5/1.5;} .about .wrapper{ max-width: 960px; font-size: 16px; line-height: 24px; margin: 60px auto 100px;} .about h1{ font-size: 26px; line-height: 32px; letter-spacing: 0; font-family: "Josefin Sans", Helvetica, Arial, sans-serif; text-transform: uppercase; font-style: normal; margin-bottom: 25px;} .about .button{ margin-top: 30px;} .about .carousel .single-slide{ background-size: cover; background-position: center center; aspect-ratio: 16/9; margin-top: 60px;} .about .carousel .slick-dots{ margin: 0; bottom: -45px;} .about .carousel .slick-dots li button:before{ font-size: 12px; opacity: 0.5;} .about .carousel .slick-dots li.slick-active button:before{ opacity: 1;} .about .carousel .slick-prev, .about .carousel .slick-next{ top: 55%;} .about .carousel .slick-prev{ left: 30px; z-index: 2;} .about .carousel .slick-next{ right: 30px;} .about .carousel .slick-prev::before, .about .carousel .slick-next::before{ font-size: 30px;} .legal h2, .legal h3, .legal h4, .legal h5, .legal h6{ margin-top: 20px;} /* Contact Page */ .location .container{ margin: 60px auto 100px; justify-content: space-between;} .location .contact-content{ width: 30%; font-size: 18px; line-height: 26px;} .location .contact-content div{ margin-bottom: 30px;} .location .contact-content h2{ margin-bottom: 15px;} .location .contact-form{ width: 65%;} .location .gform_body input, .location .gform_body textarea{ background: none; border: none; border: 1px solid #666; padding: 20px !important;} .location .gform_button{ width: 100%; border: none;} /* News */ .blog .content{ margin: 60px 0 100px;} .post-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;} .post-grid article{ border-radius: 6px; box-shadow: 0 5px 28px rgba(0,0,0,.12); position: relative;} .post-grid h2{ font-size: 18px; line-height: 22px; font-family: Helvetica, Arial, sans-serif;} .post-grid h2 a{ color: #000;} .post-grid h2 a:hover{ color: #9F5424;} .post-grid .post-visual{ background-size: cover; background-position: center center; aspect-ratio: 16/9; border-top-left-radius: 6px; border-top-right-radius: 6px; position: relative;} .post-grid .post-visual a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .post-grid .post-content{ padding: 20px 20px 80px; font-size: 14px; line-height: 21px; font-weight: 350;} .post-grid .post-content .more{ font-size: 13px; line-height: 13px; letter-spacing: .025; font-weight: 500; text-transform: uppercase; position: absolute; bottom: 20px; left: 20px;} .single-post .content .wrapper{ max-width: 960px; font-size: 21px; line-height: 34px; margin: 60px auto 100px;} /* Media queries */ @media (max-width: 960px) { .header .header-right{ display: none;} .card-grid, .tenants .tenant-grid, .post-grid{ grid-template-columns: repeat(2,1fr);} .tenants .hero, .about .hero, .home .slider .single-slide{ aspect-ratio: 16/9;} .tenants .hero .hero-content h1{ font-size: 36px; line-height: 36px;} .home .slider .single-slide h1{ font-size: 42px; line-height: 42px;} .home .slider .slide-content h2{ font-size: 16px; line-height: 20px;} .home .slider .single-slide img{ max-width: 40px;} .location .container{ flex-direction: column-reverse;} .location .container .contact-content, .location .container .contact-form, .single-shops-restaurants .tenant-content, .single-shops-restaurants .tenant-image{ width: 100%;} .location .container .contact-form{ margin-bottom: 60px;} .single-shops-restaurants .content .container{ flex-direction: column;} .single-shops-restaurants .tenant-contact .container div{ width: 100%;} .single-shops-restaurants .tenant-contact .container{ display: grid; grid-template-columns: repeat(2,1fr); gap: 30px;} .mobile-only{ display: inline-block;} } @media (max-width: 600px) { .card-grid, .tenants .tenant-grid, .post-grid{ grid-template-columns: repeat(1,1fr);} .tenants .hero{ aspect-ratio: 4/3;} .home .slider .single-slide{ aspect-ratio: 1/1;} .map-wrapper{ padding-bottom: 56.25%;} .footer .footer-nav .nav{ display: none;} .footer .container{ display: flex; flex-direction: column; justify-content: center; align-items: center;} .footer-nav{ order: 2;} .footer .credits{ order: 1; position: relative; left: auto; transform: none; margin-bottom: 15px;} .footer .source{ order: 3; margin-top: 45px;} .footer .footer-nav .social ul{ justify-content: center;} .footer .footer-nav .social ul li{ margin: 0 10px;} .single-shops-restaurants .tenant-contact .container{ grid-template-columns: repeat(1,1fr);} }