/* Theme Name: Superswell VR Theme URI: https://superswellvr.com Author: Superswell Productions Description: Custom block theme for Superswell VR — immersive 360°/VR production for the travel & outdoor industries. Teal, image-forward, minimal. Version: 1.0.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: superswell */ :root{ --teal:#068484; --teal-deep:#04696a; --teal-light:#3d9991; --cyan:#1ff0ff; --ink:#15201f; --ink-soft:#3a4a48; --mist:#6c7d7b; --paper:#fff; --paper-2:#f3f6f5; --line:rgba(6,132,132,.16); --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Lora",Georgia,"Times New Roman",serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); line-height:1.65;-webkit-font-smoothing:antialiased;} img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} /* remove the block-gap margin above the first in-flow section (fixed header sits over it) */ .wp-site-blocks main{margin-block-start:0;} /* Utility eyebrow (uppercase label) */ .ss-eyebrow{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.28em; text-transform:uppercase;color:var(--teal);display:block;} .ss-eyebrow.on-dark{color:var(--cyan);opacity:.92;} .has-text-align-center .ss-eyebrow,.ss-eyebrow{text-align:inherit;} /* ---------------- Header ---------------- */ .wp-site-blocks > header.wp-block-template-part{position:relative;z-index:60;} .site-header{position:fixed;top:0;left:0;right:0;z-index:60; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:20px clamp(20px,5vw,64px);background:var(--teal); transition:background .35s ease,padding .35s ease,box-shadow .35s ease;} .site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(3,40,40,.55),rgba(3,40,40,0));transition:opacity .35s ease;} /* transparent over the homepage hero until scrolled */ .home .site-header:not(.scrolled){background:transparent;} .home .site-header:not(.scrolled)::before{opacity:1;} .site-header.scrolled{background:var(--teal);padding-block:12px;box-shadow:0 6px 30px rgba(3,50,50,.18);} .site-logo img,.site-header .custom-logo{height:44px!important;width:auto!important;transition:height .35s ease;} .site-header.scrolled .site-logo img,.site-header.scrolled .custom-logo{height:36px!important;} .site-nav{display:flex;align-items:center;gap:clamp(16px,2.3vw,38px);} .site-header .site-nav a,.site-header .site-nav .wp-block-navigation-item__content{color:#fff;font-family:var(--sans); font-weight:500;font-size:.95rem;letter-spacing:.01em;opacity:.92;} .site-header .site-nav a:hover{opacity:1;color:#fff;} /* legibility of white nav over the bright homepage hero */ .home .site-header:not(.scrolled) .site-nav a{text-shadow:0 1px 10px rgba(0,20,20,.45);} .site-nav .wp-block-navigation-item{position:relative;} .site-nav .current-menu-item a{opacity:1;} /* Buttons (target the actual link element) */ .ss-btn .wp-block-button__link{display:inline-block;font-family:var(--sans);font-weight:600; font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:12px 24px;border-radius:2px;border:0; transition:transform .2s ease,background .25s ease,color .25s ease,border-color .25s ease;} .ss-btn-solid .wp-block-button__link{background:var(--cyan);color:#043b3b;} .ss-btn-solid .wp-block-button__link:hover{transform:translateY(-2px);background:#fff;color:#043b3b;} .ss-btn-ghost .wp-block-button__link{background:transparent;border:1.5px solid rgba(255,255,255,.65);color:#fff;} .ss-btn-ghost .wp-block-button__link:hover{background:#fff;color:var(--teal-deep);border-color:#fff;} .ss-btn-teal .wp-block-button__link{background:var(--teal);color:#fff;} .ss-btn-teal .wp-block-button__link:hover{background:var(--teal-deep);transform:translateY(-2px);color:#fff;} /* Header CTA nav item styled as a cyan button */ .site-header .site-nav .ss-nav-cta a{background:var(--cyan);color:#043b3b!important;padding:10px 20px; border-radius:2px;opacity:1;transition:transform .2s ease,background .25s ease;} .site-header .site-nav .ss-nav-cta a:hover{background:#fff;transform:translateY(-2px);} /* ---------------- Hero (cover) ---------------- */ .ss-hero{min-height:100svh!important;position:relative;color:#fff;text-align:center;} .ss-hero .wp-block-cover__background{opacity:1!important;background: radial-gradient(120% 90% at 50% 45%,rgba(3,34,34,.12),rgba(3,34,34,.62) 90%), linear-gradient(180deg,rgba(3,34,34,.4),rgba(3,34,34,.1) 30%,rgba(3,34,34,.58))!important;} .ss-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background-repeat:no-repeat;background-position:center;background-size:min(64vw,760px); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 300' fill='none' stroke='%23ffffff' stroke-width='6'%3E%3Cpath d='M60 60h500a40 40 0 0 1 40 40v110a40 40 0 0 1-40 40H360c-14 0-20-8-26-18l-16-26c-6-10-30-10-36 0l-16 26c-6 10-12 18-26 18H60a40 40 0 0 1-40-40V100a40 40 0 0 1 40-40Z'/%3E%3Ccircle cx='170' cy='150' r='66'/%3E%3Ccircle cx='450' cy='150' r='66'/%3E%3C/svg%3E"); opacity:.09;} .ss-hero .wp-block-cover__inner-container{position:relative;z-index:2;max-width:1000px;margin-inline:auto;padding-block:80px;} .ss-hero h1{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(2.6rem,7vw,5.4rem)!important;line-height:1.02;letter-spacing:-.01em; margin:.2em 0 .35em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,20,20,.35);color:#fff;} .ss-hero p{font-size:clamp(1rem,1.6vw,1.22rem);color:rgba(255,255,255,.9);max-width:620px; margin:0 auto;line-height:1.65;} .ss-hero .wp-block-buttons{margin-top:2em;justify-content:center;gap:14px;} /* ---------------- Statement band ---------------- */ .ss-statement{text-align:center;padding-block:clamp(28px,4vw,50px);} .ss-statement .ss-statement-text{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.4; color:var(--ink);text-wrap:balance;max-width:940px;margin-inline:auto;} .ss-statement em,.ss-statement .has-teal-color{font-style:italic;color:var(--teal);} .ss-statement .ss-eyebrow{margin-bottom:.4em;} .ss-statement .ss-kicker{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--teal); font-size:clamp(1.3rem,2.6vw,1.9rem);margin-top:1em;} /* ---------------- Section heads ---------------- */ .ss-head{text-align:center;max-width:660px;margin:0 auto clamp(16px,2.2vw,28px);} .ss-head h2{font-family:var(--serif);font-weight:400;line-height:1.12;color:var(--ink); margin:.35em 0 0;text-wrap:balance;} /* ---------------- Services ---------------- */ .ss-services{background:var(--paper-2);padding-block:clamp(26px,3.5vw,46px);border-block:1px solid var(--line);} .ss-card{background:var(--paper);padding:38px 32px 34px;border:1px solid var(--line); border-top:3px solid var(--teal);height:100%;transition:transform .3s ease,box-shadow .3s ease;} .ss-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(6,90,90,.5);} .ss-card h3{font-family:var(--serif);font-weight:500;font-size:1.32rem;margin:0 0 .5em;color:var(--ink);} .ss-card p{margin:0 0 1.2em;color:var(--ink-soft);font-size:.96rem;line-height:1.6;} .ss-card .ss-ico{width:40px;height:40px;color:var(--teal);margin-bottom:18px;} /* ---------------- Immersive band ---------------- */ .ss-band{min-height:60vh!important;color:#fff;text-align:center;} .ss-band .wp-block-cover__background{opacity:1!important; background:linear-gradient(180deg,rgba(3,40,40,.5),rgba(4,60,60,.55))!important;} .ss-band p{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.34;text-wrap:balance;max-width:820px;margin-inline:auto;text-shadow:0 2px 24px rgba(0,20,20,.4);} /* ---------------- Clients ---------------- */ .ss-clients{padding-block:clamp(26px,3.5vw,44px);text-align:center;} .ss-logo-grid{display:grid!important;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px); align-items:center;margin-top:clamp(36px,5vw,56px);} .ss-logo-grid figure,.ss-logo-grid .wp-block-image{margin:0;} .ss-logo-grid img{height:clamp(34px,4vw,54px);width:auto;margin:0 auto;object-fit:contain; filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s,transform .3s;} .ss-logo-grid img:hover{filter:grayscale(0);opacity:1;transform:scale(1.06);} .ss-link-arrow{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.14em; text-transform:uppercase;color:var(--teal);border-bottom:2px solid var(--teal);padding-bottom:4px;display:inline-block;} .ss-link-arrow:hover{color:var(--teal-deep);border-color:var(--teal-deep);} /* ---------------- Content pages (about/services/project) ---------------- */ .ss-page-hero{background:var(--teal);color:#fff;text-align:center;padding:clamp(104px,11vw,126px) 20px clamp(22px,3vw,34px);} .ss-page-hero h1{color:#fff;font-style:italic;} .ss-page-hero .ss-eyebrow{color:var(--cyan);margin-bottom:.6em;} /* Image-backed page hero (cover) */ .ss-hero-banner{min-height:46vh!important;color:#fff;text-align:center;} .ss-hero-banner .wp-block-cover__background{opacity:1!important; background:linear-gradient(180deg,rgba(4,74,72,.7),rgba(4,54,53,.82))!important;} .ss-hero-banner .wp-block-cover__inner-container{max-width:1000px;margin-inline:auto; padding:clamp(78px,9vw,96px) 20px clamp(18px,2.5vw,30px);} .ss-hero-banner h1{color:#fff;font-style:italic;text-shadow:0 2px 24px rgba(0,20,20,.35);} .ss-hero-banner .ss-eyebrow{color:var(--cyan);margin-bottom:.5em;} .ss-prose{max-width:820px;margin-inline:auto;padding-block:clamp(18px,2.5vw,34px);} .ss-prose h2{font-size:clamp(1.7rem,3vw,2.2rem);margin:1.4em 0 .5em;color:var(--teal-deep);} .ss-prose h3{font-size:1.3rem;margin:1.3em 0 .4em;} .ss-prose p{margin:0 0 1.2em;color:var(--ink-soft);font-size:1.06rem;} .ss-prose img{border-radius:3px;margin:1.4em auto;} .ss-embed{position:relative;padding-top:56.25%;margin:1.8em 0;border-radius:4px;overflow:hidden; background:#04302f;box-shadow:0 24px 50px -30px rgba(6,90,90,.5);} .ss-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .ss-backlink{display:inline-block;margin-top:1em;font-family:var(--sans);font-weight:600;font-size:.8rem; letter-spacing:.06em;color:var(--teal);} .ss-backlink:hover{color:var(--teal-deep);} /* ---------------- Team / founders (About) ---------------- */ .ss-team{max-width:960px;margin-inline:auto;padding-block:clamp(16px,2.5vw,34px);} .ss-member{display:flex;gap:clamp(24px,4vw,50px);align-items:center;margin-bottom:clamp(28px,4vw,50px);} .ss-member:last-child{margin-bottom:0;} .ss-member.rev{flex-direction:row-reverse;} .ss-member-photo{flex:0 0 40%;} .ss-member-photo img{width:100%;border-radius:4px;box-shadow:0 24px 50px -30px rgba(6,90,90,.5);} .ss-member-text h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--teal-deep);margin:0 0 .12em;} .ss-member-text .ss-role{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--teal);margin:0 0 1em;} .ss-member-text p{color:var(--ink-soft);font-size:1rem;line-height:1.62;margin:0;} @media (max-width:700px){ .ss-member,.ss-member.rev{flex-direction:column;text-align:center;} .ss-member-photo{flex:none;width:100%;max-width:340px;margin-inline:auto;} } .ss-cameras{margin-top:clamp(20px,3vw,36px);} .ss-cameras img{width:100%;border-radius:4px;box-shadow:0 24px 50px -32px rgba(6,90,90,.5);} .ss-cameras figcaption{margin-top:12px;text-align:center;font-family:var(--sans);font-weight:600; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);} /* ---------------- Project thumbnail grid (Our Work) ---------------- */ .ss-work{padding-block:clamp(26px,3.5vw,46px);} .ss-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px); margin-top:clamp(16px,2.2vw,28px);} .ss-work-card{display:block;position:relative;overflow:hidden;border-radius:4px;background:#04302f; box-shadow:0 18px 40px -26px rgba(6,90,90,.5);transition:transform .3s ease,box-shadow .3s ease;} .ss-work-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .5s ease;} .ss-work-card:hover{transform:translateY(-4px);box-shadow:0 26px 52px -26px rgba(6,90,90,.6);} .ss-work-card:hover img{transform:scale(1.06);} .ss-work-card .ss-work-label{position:absolute;inset:auto 0 0 0;padding:30px 18px 15px;color:#fff; font-family:var(--serif);font-style:italic;font-size:1.15rem;text-align:left;line-height:1.2; background:linear-gradient(180deg,transparent,rgba(3,30,29,.9));} .ss-work-card .ss-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center; transition:transform .3s ease,background .3s ease;} .ss-work-card:hover .ss-play{transform:translate(-50%,-50%) scale(1.1);} .ss-work-card .ss-play svg{width:19px;height:19px;fill:var(--teal-deep);margin-left:3px;} .ss-work-card.ss-hidden{display:none;} .ss-seemore-wrap{text-align:center;margin-top:clamp(20px,3vw,32px);} .ss-seemore{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.12em; text-transform:uppercase;padding:12px 30px;border-radius:2px;border:1.5px solid var(--teal);color:var(--teal); background:none;cursor:pointer;transition:background .25s ease,color .25s ease,transform .2s ease;} .ss-seemore:hover{background:var(--teal);color:#fff;transform:translateY(-2px);} @media (max-width:820px){.ss-work-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.ss-work-grid{grid-template-columns:1fr;}} .ss-social-line a{color:var(--teal);border-bottom:1px solid var(--line);} .ss-social-line a:hover{color:var(--teal-deep);} /* ---------------- 360 panorama samples ---------------- */ .ss-panos{padding-block:clamp(24px,3.2vw,42px);text-align:center;} .ss-pano-grid{display:flex;flex-direction:column;gap:clamp(28px,4vw,52px);margin-top:clamp(36px,5vw,56px);} .ss-pano{margin:0;} .ss-pano img{width:100%;border-radius:4px;box-shadow:0 30px 60px -34px rgba(6,90,90,.55);display:block;} .ss-pano figcaption{margin-top:14px;font-family:var(--sans);font-weight:600;font-size:.74rem; letter-spacing:.16em;text-transform:uppercase;color:var(--mist);} .ss-pano figcaption strong{color:var(--teal);font-weight:600;} /* ---------------- Contact form (CF7) ---------------- */ .ss-contact{max-width:1040px;margin-inline:auto;padding-block:clamp(20px,3vw,38px);} .ss-contact-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:start;} .ss-contact-grid .ss-intro h2{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--teal-deep);margin:0 0 .5em;} .ss-contact-grid .ss-intro p{color:var(--ink-soft);font-size:1.05rem;} .ss-contact-grid .ss-intro a{color:var(--teal);border-bottom:1px solid var(--line);} .wpcf7-form p{margin:0 0 18px;} .wpcf7-form label{display:block;font-family:var(--sans);font-weight:600;font-size:.74rem; letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:0;} .wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form textarea{ width:100%;margin-top:8px;padding:13px 15px;border:1px solid var(--line);border-radius:2px; background:var(--paper-2);font-family:var(--sans);font-size:1rem;color:var(--ink); transition:border-color .2s,background .2s;} .wpcf7-form input:focus,.wpcf7-form textarea:focus{outline:none;border-color:var(--teal);background:#fff;} .wpcf7-form textarea{min-height:150px;resize:vertical;} .wpcf7-form .wpcf7-submit{background:var(--teal);color:#fff;border:0;font-family:var(--sans); font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 34px; border-radius:2px;cursor:pointer;transition:background .25s,transform .2s;} .wpcf7-form .wpcf7-submit:hover{background:var(--teal-deep);transform:translateY(-2px);} .wpcf7-form .wpcf7-not-valid-tip{color:#c0392b;font-size:.8rem;} .wpcf7 .wpcf7-response-output{margin:14px 0 0;padding:12px 16px;border-radius:2px;font-size:.9rem;} @media (max-width:760px){.ss-contact-grid{grid-template-columns:1fr;}} /* ---------------- Blog ---------------- */ .ss-blog-head{background:var(--teal);color:#fff;text-align:center;padding:clamp(104px,11vw,126px) 20px clamp(22px,3vw,34px);} .ss-blog-head h1{color:#fff;} .ss-post-card{background:var(--paper);border:1px solid var(--line);overflow:hidden;height:100%; transition:transform .3s,box-shadow .3s;} .ss-post-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px -30px rgba(6,90,90,.45);} .ss-post-card .wp-block-post-featured-image{margin:0;aspect-ratio:16/10;overflow:hidden;} .ss-post-card .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;} .ss-post-card .ss-post-body{padding:24px 26px 28px;} .ss-post-card h3,.ss-post-card .wp-block-post-title{font-family:var(--serif);font-weight:500; font-size:1.2rem;line-height:1.25;margin:0 0 .5em;} .ss-post-card .wp-block-post-title a:hover{color:var(--teal);} .ss-post-card .wp-block-post-excerpt__excerpt{color:var(--ink-soft);font-size:.94rem;} .ss-post-card .wp-block-post-date{color:var(--mist);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;} /* single post */ .ss-single{max-width:760px;margin-inline:auto;padding-block:clamp(26px,3.5vw,46px);} .ss-single .wp-block-post-title{font-size:clamp(2rem,4vw,2.8rem);line-height:1.12;margin:.2em 0 .3em;} .ss-single p{font-size:1.08rem;line-height:1.75;color:var(--ink-soft);margin:0 0 1.2em;} .ss-single img{border-radius:3px;margin:1.5em auto;} .ss-single .wp-block-post-date{color:var(--mist);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;} .ss-post-hero-img img{width:100%;max-height:60vh;object-fit:cover;border-radius:0;margin:0;} /* ---------------- Footer ---------------- */ .site-footer{background:var(--teal);color:#fff;text-align:center;padding:clamp(60px,8vw,90px) 20px 34px;} .site-footer .site-logo img,.site-footer .custom-logo{height:58px!important;margin:0 auto 22px;} .site-footer .ss-ftag{font-family:var(--serif);font-style:italic;font-size:1.35rem;margin:0 0 26px;opacity:.95;} .site-footer .site-nav{justify-content:center;flex-wrap:wrap;margin-bottom:26px;} .site-footer .site-nav a{font-size:.9rem;letter-spacing:.01em;color:#fff;opacity:.9;} .site-footer .site-nav a:hover{opacity:1;} .site-footer .ss-social{display:flex;gap:16px;justify-content:center;margin-bottom:28px;} .site-footer .ss-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.4);border-radius:50%; display:grid;place-items:center;transition:background .25s,color .25s,transform .2s;} .site-footer .ss-social a:hover{background:#fff;color:var(--teal);transform:translateY(-2px);} .site-footer .ss-social svg{width:17px;height:17px;} .site-footer .ss-copy{font-size:.78rem;letter-spacing:.05em;opacity:.72; border-top:1px solid rgba(255,255,255,.2);padding-top:24px;margin-top:4px;} .site-footer a:hover{color:#fff;} /* ---------------- Reveal on scroll ---------------- */ .ss-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;} .ss-reveal.in{opacity:1;transform:none;} /* ---------------- Responsive ---------------- */ @media (max-width:860px){ .ss-logo-grid{grid-template-columns:repeat(3,1fr);} /* Drawer is a plain BLOCK (not flex) so WP's flex justify-right can't push the list off-screen */ .site-header .site-nav.site-nav--main{position:fixed!important;top:0!important;right:0!important; left:auto!important;bottom:0!important;width:min(82vw,320px)!important;height:100%!important; display:block!important;background:var(--teal-deep)!important;padding:84px 34px 34px!important; transform:translateX(100%);transition:transform .35s ease;box-shadow:-20px 0 60px rgba(0,0,0,.3); overflow-y:auto!important;z-index:100!important;} .site-header .site-nav.site-nav--main.open{transform:none;} /* the