Last active
July 26, 2018 08:18
-
-
Save matt-barker/0f873ebf1e36538591882c47a7abcdbb to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> | |
<!--- | |
<input type="checkbox" id="toggle-1"> | |
<iframe id="intro" allowFullScreen frameborder="0" src="https://player.vimeo.com/video/257149296?autoplay=1&background=1&mute=0&loop=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
<script src="https://player.vimeo.com/api/player.js"></script> | |
<script type="text/javascript"> | |
$(document).ready(function(){ | |
var iframe = $('iframe'); | |
var player = new Vimeo.Player(iframe); | |
player.on('ended', function() { | |
$(iframe).hide(); | |
}); | |
}); | |
</script> | |
---> | |
<script> | |
$(function(){ | |
//VIDEO OVERLAY COPY ON VIDEO SECTION | |
$("#video-section .summary-content").each(function(){ | |
var prev = $(this).prev(); | |
$(this).appendTo(prev) | |
}) | |
//PARALLAX ON VIDEO SECTION | |
$("#video-section .sqs-video-overlay img").addClass('parallax'); | |
$("#bio-section .sqs-block-image img").addClass('parallax1'); | |
var scrollTop = $(window).scrollTop(), | |
elementOffset = $('#video-section .summary-v2-block').offset().top, | |
distance = (elementOffset - scrollTop), | |
screenHeight = $(window).height(), | |
pi = distance/screenHeight, | |
elementOffset1 = $('#bio-section .sqs-block-image img').offset().top, | |
distance1 = (elementOffset1 - scrollTop), | |
pi1 = distance1/screenHeight; | |
$(".parallax").css('top', pi*20+'%'); | |
$(".parallax1").css('top', pi1*20+'%'); | |
//PARALLAX ON BIO SECTION | |
$(window).on('scroll', function(){ | |
var scrollTop = $(window).scrollTop(), | |
elementOffset = $('.summary-v2-block').offset().top, | |
distance = (elementOffset - scrollTop), | |
screenHeight = $(window).height(), | |
pi = distance/screenHeight, | |
elementOffset1 = $('#bio-section .sqs-block-image img').offset().top, | |
distance1 = (elementOffset1 - scrollTop), | |
pi1 = distance1/screenHeight; | |
$(".parallax").css('top', pi*20+'%'); | |
$(".parallax1").css('top', pi1*20+'%') | |
}) | |
//AUDIO PAGE | |
$("#audio-section .video-caption:eq(0)").addClass('caption1'); | |
$("#audio-section .video-caption:eq(1)").addClass('caption2'); | |
$(".caption1").mouseenter(function(){ | |
$(".video1").addClass('moveLeft'); | |
}); | |
$(".caption2").mouseenter(function(){ | |
$(".video2").addClass('moveRight'); | |
}); | |
$("#audio-section").mouseleave(function(){ | |
$(".video1").removeClass('moveLeft'); | |
}); | |
$("#audio-section").mouseleave(function(){ | |
$(".video2").removeClass('moveRight'); | |
}); | |
$("#audio-section .sqs-block-video:eq(0)").addClass('video1').prependTo("#audio-section"); | |
$("#audio-section .sqs-block-video:eq(1)").addClass('video2').prependTo("#audio-section"); | |
$("#video-section .summary-carousel-page").insertBefore('#video-section .summary-item-list'); | |
var urlList = ['']; | |
$("#video-section .sqs-video-wrapper").each(function(){ | |
var videoID = $(this).attr('data-html').match(/\d+/); | |
urlList.push(videoID); | |
}); | |
var descriptionList = ['']; | |
$("#video-section .sqs-gallery-meta-container").each(function(){ | |
var description = ($(this).text()); | |
descriptionList.push(description); | |
}); | |
var thisID = $(".sqs-lightbox-slide iframe").attr('src'); | |
var thisPosition = urlList.indexOf(thisID); | |
var info = $('.sqs-lightbox-padder iframe').attr('title', 'me'); | |
var info1 ="oow"; | |
/* | |
$("#team-tv-section").click(function(){ | |
$("#team-section").addClass("move"); | |
}) | |
$("#close3").click(function(){ | |
$("#team-section").removeClass("move"); | |
}); | |
/*EMAIL*/ | |
$('#contact-section input').focus(function(){ | |
$("label.title:eq(0)").css('opacity', '0'); | |
}); | |
$('#contact-section input').focusout(function(){ | |
if($("#contact-section input").val()=='') { | |
$("label.title:eq(0)").css('opacity', '1'); | |
} | |
}); | |
/*MESSAGE*/ | |
$('#contact-section textarea').focus(function(){ | |
$("label.title:eq(1)").css('opacity', '0'); | |
}); | |
$('#contact-section textarea').focusout(function(){ | |
if($("#contact-section textarea").val()=='') { | |
$("label.title:eq(1)").css('opacity', '1'); | |
} | |
}); | |
}) | |
</script> | |
<script> | |
$(function(){ | |
function start(){ | |
var go = setInterval(function(){ | |
var title = $(".sqs-video-wrapper iframe").attr('title'); | |
$("#demo1").css('background', '#fff').html(title); | |
$("#demo1").appendTo('.sqs-lightbox-slide .sqs-video-wrapper'); | |
}, 1000); | |
setTimeout(function(){ | |
clearInterval(go) | |
},3000) | |
} | |
$("#video-section .sqs-video-opaque").click(function(){ | |
var number = $(this).parents('.summary-item').index(); | |
start(); | |
}) | |
var windowWidth = $(window).width(); | |
if (windowWidth>640) { | |
$("#video-section .summary-item:eq(3)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(0)"); | |
$("#video-section .summary-item:eq(4)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(2)"); | |
$("#video-section .summary-item:eq(5)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(4)"); | |
$("#video-section .summary-item:eq(6)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(1)"); | |
$("#video-section .summary-item:eq(7)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(4)"); | |
$("#video-section .summary-item:eq(8)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(7)"); | |
$("#video-section .summary-item:eq(12)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(9)"); | |
$("#video-section .summary-item:eq(13)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(11)"); | |
$("#video-section .summary-item:eq(14)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(13)"); | |
$("#video-section .summary-item:eq(15)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(10)"); | |
$("#video-section .summary-item:eq(16)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(13)"); | |
$("#video-section .summary-item:eq(17)").addClass('fullWidth').appendTo("#video-section .summary-item:eq(16)"); | |
} | |
/**/ | |
else { | |
$("#video-section .summary-item:eq(1)").appendTo("#video-section .summary-item:eq(0)"); | |
$("#video-section .summary-item:eq(2)").appendTo("#video-section .summary-item:eq(1)"); | |
$("#video-section .summary-item:eq(4)").appendTo("#video-section .summary-item:eq(3)"); | |
$("#video-section .summary-item:eq(5)").appendTo("#video-section .summary-item:eq(4)"); | |
$("#video-section .summary-item:eq(7)").appendTo("#video-section .summary-item:eq(6)"); | |
$("#video-section .summary-item:eq(8)").appendTo("#video-section .summary-item:eq(7)"); | |
$("#video-section .summary-item:eq(10)").appendTo("#video-section .summary-item:eq(9)"); | |
$("#video-section .summary-item:eq(11)").appendTo("#video-section .summary-item:eq(10)"); | |
$("#video-section .summary-item:eq(13)").appendTo("#video-section .summary-item:eq(12)"); | |
$("#video-section .summary-item:eq(14)").appendTo("#video-section .summary-item:eq(13)"); | |
$("#video-section .summary-item:eq(16)").appendTo("#video-section .summary-item:eq(15)"); | |
$("#video-section .summary-item:eq(17)").appendTo("#video-section .summary-item:eq(16)"); | |
} | |
}) | |
</script> | |
<!-- Audio Section Overlays --> | |
<div class="audio-section-overlay left"> | |
<span class="audio-overlay-title">MUSIC PRODUCTION / COMPOSITION</span> | |
</div> | |
<div class="audio-section-overlay right"> | |
<span class="audio-overlay-title">SCORING / SOUND DESIGN</span> | |
</div> | |
<script> | |
$(document).ready(function(){ | |
$('#audio-section').append($('.audio-section-overlay')); | |
$(window).ready(function(){ | |
$('.audio-overlay-title').mouseenter(function(){ | |
$(this).closest('.audio-section-overlay').addClass('shift'); | |
}); | |
$('#testimonials-section,#team-section,#team-tv-section').mouseenter(function(){ | |
$('.audio-section-overlay').removeClass('shift') | |
}); | |
}); | |
}); | |
</script> | |
<!-- Team Section Video Overlay --> | |
<div class="team-section-overlay"> | |
<video id="team-section-video" autoplay muted loop> | |
<source src="https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab22cf9352f536283374471/1521626407692/2_TVRotate.mp4" type="video/mp4"> | |
</video> | |
</div> | |
<div class="team-section-overlay-open"> | |
<img src="https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5a9092d6ec212d945178b20b/1519424214130/cancel.png"> | |
</div> | |
<script> | |
$(document).ready(function(){ | |
$('#team-section').append($('.team-section-overlay')); | |
$('#team-section .summary-block-wrapper').append($('.team-section-overlay-open')); | |
document.getElementById('team-section-video').play(); | |
$('.team-section-overlay').click(function(){ | |
$(this).fadeOut(500); | |
}); | |
$('.team-section-overlay-open').click(function(){ | |
$('.team-section-overlay').show(); | |
}); | |
}); | |
</script> | |
<!-- Video Section Scroll Dots --> | |
<script> | |
$(document).ready(function(){ | |
// Set up variables | |
var numberOfItems = $('#video-section .summary-item-list-container .summary-item').length, | |
numberOfColumns = Math.floor(numberOfItems/3), | |
listWidth = $('#video-section .summary-item-list-container').innerWidth(), | |
columnTopElements = $('#video-section .summary-item-list .summary-item'); | |
// Create wrapper for indicator dots | |
$('#video-section .summary-item-list').after('<div class="indicator-wrapper"></div>'); | |
// Add column-top class to first list item in each column | |
columnTopElements.each(function(i){ | |
if (i % 3 == 0) { | |
$(this).addClass('column-top'); | |
} | |
}); | |
// Create indicator buttons to match number of columns | |
for (i=0; i<numberOfColumns; i++) { | |
$('#video-section .indicator-wrapper').append('<span class="indicator-button"></span>'); | |
}; | |
// Set indicator wrappers width to match list width | |
$('#video-section .indicator-wrapper').css('width',($('#video-section .summary-item-list').innerWidth())); | |
// Initially set first dot as active | |
$('#video-section .indicator-button').eq(0).addClass('active'); | |
// Check every scroll which column-top element is in view | |
$('#video-section .summary-item-list-container').scroll(function(){ | |
var listLeft = $(this).offset().left; | |
$('#video-section .column-top').each(function(i){ | |
if (($(this).offset().left <= listLeft+(listWidth/2)) && ($(this).offset().left >= (listLeft+(listWidth/2))-listWidth)) { | |
$('#video-section .indicator-button').eq(i).addClass('active'); | |
$('#video-section .indicator-button').not(':eq('+i+')').removeClass('active'); | |
} | |
}); | |
});//video-section.scroll | |
$(window).resize(function(){ | |
listWidth = $('#video-section .summary-item-list-container').innerWidth(); | |
$('#video-section .indicator-wrapper').css('width',($('#video-section .summary-item-list').innerWidth())); | |
}); | |
});//document.ready | |
</script> | |
<!-- Audio Section Mobile Layout --> | |
<script> | |
$(window).ready(function(){ | |
setTimeout(function(){ | |
var itemHeight = $('#audio-section .summary-item-list .summary-item').outerHeight(); | |
if ($(window).width() <= 767) { | |
$('#audio-section .summary-item-list').css('max-height',(itemHeight*3)+50); | |
} else { | |
$('#audio-section .summary-item-list').css('max-height','auto'); | |
} | |
},1000); | |
$(window).resize(function(){ | |
if ($(window).width() <= 767) { | |
itemHeight = $('#audio-section .summary-item-list .summary-item').outerHeight(); | |
$('#audio-section .summary-item-list').css('max-height',(itemHeight*3)+50); | |
} else { | |
$('#audio-section .summary-item-list').css('max-height','auto'); | |
} | |
}); | |
}); | |
</script> | |
<!-- Audio Section Scroll Dots --> | |
<script> | |
$(window).ready(function(){ | |
$('#audio-section .summary-item-list-container').each(function(){ | |
// Set up variables | |
var numberOfItems = $(this).find('.summary-item').length, | |
numberOfColumns = Math.floor(numberOfItems/3)+1, | |
columnTopElements = $(this).find('.summary-item'); | |
// Create wrapper for indicator dots | |
$(this).find('.summary-item-list').after('<div class="indicator-wrapper"></div>'); | |
// Add column-top class to first list item in each column | |
columnTopElements.each(function(i){ | |
if (i % 3 == 0) { | |
$(this).addClass('column-top'); | |
} | |
}); | |
// Create indicator buttons to match number of columns | |
for (i=0; i<numberOfColumns; i++) { | |
$(this).find('.indicator-wrapper').append('<span class="indicator-button"></span>'); | |
}; | |
// Set indicator wrappers width to match list width | |
$(this).find('.indicator-wrapper').css('width',($(this).find('.summary-item-list').innerWidth())); | |
// Initially set first dot as active | |
$(this).find('.indicator-button').eq(0).addClass('active'); | |
// Check every scroll which column-top element is in view | |
$('#audio-section .summary-item-list').scroll(function(){ | |
var listLeft = $(this).offset().left, | |
listWidth = $(this).innerWidth(); | |
$(this).find('.column-top').each(function(i){ | |
if (($(this).offset().left <= listLeft+(listWidth/2)) && ($(this).offset().left >= (listLeft+(listWidth/2))-listWidth)) { | |
$(this).closest('.summary-item-list-container').find('.indicator-button').eq(i).addClass('active'); | |
$(this).closest('.summary-item-list-container').find('.indicator-button').not(':eq('+i+')').removeClass('active'); | |
} | |
}); | |
});//audio-section.scroll | |
$(window).resize(function(){ | |
$('#audio-section .summary-item-list-container').each(function(){ | |
listWidth = $(this).innerWidth(); | |
$(this).find('.indicator-wrapper').css('width',($(this).find('.summary-item-list').innerWidth())); | |
});//each | |
});//scroll | |
});//summary-item-list-container.each | |
});//document.ready | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//FONTS | |
@font-face { | |
font-family: 'copy'; | |
src: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab2bf161ae6cf198f1ae039/1521663767433/LemonMilk.otf); | |
} | |
@font-face { | |
font-family: 'copyBold'; | |
src: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab2bf146d2a73a474668190/1521663764583/LemonMilkbold.otf); | |
} | |
@font-face { | |
font-family: 'copyBold'; | |
src: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab2bf146d2a73a474668190/1521663764583/LemonMilkbold.otf); | |
} | |
@font-face { | |
font-family: 'copyBoldItalic'; | |
src: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab2bf11352f53048d90f3bd/1521663762476/LemonMilkbolditalic.otf); | |
} | |
@font-face { | |
font-family: 'copyItalic'; | |
src: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab2bf0bf950b74f991333d2/1521663755922/LemonMilkitalic.otf); | |
} | |
@font-face { | |
font-family: 'copyLightItalic'; | |
src: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab2bf058a922d6ec557d995/1521663750482/LemonMilklightitalic.otf); | |
} | |
@font-face { | |
font-family: 'copyLight'; | |
src: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5ab2bf086d2a73a474667e3a/1521663753060/LemonMilklight.otf); | |
} | |
p, a { | |
font-family: copy !important; | |
font-size: 15px !important | |
} | |
h1 { | |
font-family: copy; | |
font-size: 20px; | |
} | |
h2 { | |
font-family: copy; | |
font-size: 20px !important; | |
letter-spacing: 0.2em; | |
line-height: 2em | |
} | |
//MISC | |
//REMOVE TINY BORDER | |
.index-section { | |
border: 0 !important | |
} | |
//TEMPORARILY HIDE OVERLAYS | |
.audio-section-overlay { | |
display: ; | |
} | |
//HIDE MAIN NAV | |
#mainNavWrapper { | |
display: none !important; | |
} | |
#headerNav #mainNavWrapper { | |
display: block !important; | |
} | |
//PARALLAX | |
.sqs-video-overlay { | |
height: 100%; | |
} | |
.parallax { | |
display: !important; | |
top: !important; | |
margin-top: 0px; | |
transform: scale(1.6) !important | |
} | |
//MISC FONTS | |
#audio-section { | |
p em { | |
color: #fff; | |
font-style: normal !important | |
} | |
} | |
a { | |
font-family: copyLight !important | |
} | |
#contact-section { | |
p { | |
font-weight: 600 | |
} | |
p em { | |
font-family: copyItalic; | |
font-weight: 200 !important | |
} | |
label { | |
font-family: copyLight !important; | |
} | |
} | |
.audio-section-overlay span { | |
font-family: copyLight | |
} | |
#team-section { | |
.summary-v2-block { | |
.summary-title *{ | |
color: #fff !important; | |
font-family: copy !important | |
} | |
.summary-excerpt *{ | |
color: #fff !important; | |
font-family: copyLight !important | |
} | |
} | |
} | |
//NAV | |
#header{ | |
background: none !important | |
} | |
#mainNavigation { | |
background: !important; | |
z-index: 100; | |
position: relative; | |
} | |
@media (min-width:767px) { | |
#header { | |
#logoWrapper { | |
display: none !important | |
} | |
.external { | |
margin: 0 0vh!important | |
} | |
.external:last-of-type a{ | |
font-size: 0px !important; | |
background: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5a9149ad71c10b0d65f6f7f9/1519471021805/Boat+Icon.png) no-repeat center; | |
background-size: 50px 50px; | |
width: 100px; | |
height: 50px; | |
filter: grayscale(1); | |
transform: rotate(-90deg) | |
} | |
position: fixed !important; | |
top: 50vh !important; | |
transform: translate(40%, -5vh) rotate(90deg); | |
width: 100vw; | |
left: 0vw !important; | |
} | |
} | |
//PADDING, MARGINS | |
body { | |
width: 100vw !important; | |
overflow-x: hidden | |
} | |
//LOADING ANIMATION | |
#intro { | |
min-height: 100vh !important; | |
width: 100vw !important; | |
position: fixed; | |
transition: all 300ms; | |
opacity: 1; | |
left: 0px; | |
top: 0px; | |
width: 100%; | |
height: 100%; | |
z-index: 9999; | |
background: #111; | |
.player .vp-player-layout { | |
height: 100px !important; | |
width: 100px !important; | |
} | |
} | |
input[type=checkbox]:checked ~ #intro { | |
opacity: 0 !important; | |
} | |
input[type=checkbox]:checked { | |
display: none !important; | |
} | |
input[type=checkbox] { | |
width: 100vw; | |
height: 100vh; | |
display: block; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
opacity: 0; | |
z-index: 1000000000 | |
} | |
.loader { | |
} | |
//MOBILE NAV | |
@media (max-width: 640px) { | |
.mobile-nav-toggle-label { | |
background: none !important | |
} | |
#overlayNav { | |
#mobileNavigation:before { | |
content: ''; | |
background: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5aacffb0575d1f89f2b11ffa/1521287089993/MirageStudioLogo_16x9+2.png) no-repeat; | |
pointer-events: none; | |
background-size: contain; | |
display: block; | |
height: 100%; | |
position: absolute; | |
top: -15%; | |
left: 0px; | |
width: 100%; | |
margin: auto; | |
} | |
background: rgba(80, 186, 232, 0.8); | |
.external:last-of-type { | |
display: none | |
} | |
} | |
} | |
//FOOTER | |
footer { | |
display: none | |
} | |
#preFooter { | |
@media (max-width: 640px) { | |
display: none | |
} | |
.socialaccountlinks-v2-block { | |
overflow: visible !important; | |
padding-top:2px; | |
} | |
display: ; | |
position: absolute; | |
background: none; | |
width: 100vw; | |
bottom: 0vh; | |
overflow: hidden; | |
z-index: 100000 | |
} | |
.sqs-block-socialaccountlinks-v2 { | |
color: #EFB1A0; | |
.social-icons-color-black.social-icons-style-knockout .sqs-use--mask { | |
fill: #EFB1A0 !important | |
} | |
} | |
//HOME SECTION | |
#homepage-section { | |
height: 80vh; | |
} | |
//BOTH VIDEO AND AUDIO SECTION | |
#audio-section, #video-section { | |
.summary-v2-block { | |
.sqs-video-icon { | |
display: ; | |
opacity: 0; | |
top: 24px; | |
left: 24px; | |
width: 100%; | |
height: 100%; | |
} | |
.summary-item { | |
img { | |
width: 100% !important; | |
height: 100% !important; | |
filter:brightness(0.7) | |
} | |
} | |
.summary-content { | |
position: absolute; | |
* { | |
text-align: center !important; | |
color: #fff; | |
} | |
} | |
@media (min-width: 769px) { | |
.summary-v2-block { | |
padding: 0px 20px; | |
.summary-item-list { | |
.summary-thumbnail-container { | |
margin: 0px 2px!important; | |
} | |
.summary-item { | |
width: 49.5% !important; | |
display: inline-block !important; | |
float: none; img { | |
margin: 0px -10px | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
//VIDEO SECTION 1 | |
#video-section { | |
.summary-v2-block { | |
transform: skewX(-5deg) !important; | |
width: 60vw; | |
margin: auto; | |
.summary-carousel-pager{ | |
display: block; | |
position: absolute; | |
background: none; | |
opacity: 0.5; | |
display: block; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0vw; | |
z-index: -10; | |
overflow: visible; | |
} | |
.next { | |
top: 50%; | |
right: -13vw; | |
transform: translate(-50%,-50%); | |
position: absolute | |
} | |
.next:before, .previous:before { | |
color: #111 !important; | |
font-size: 50px; | |
transform: translate(-50%,-50%); | |
transform: skewX(5deg) !important; | |
} | |
.previous { | |
top: 50%; | |
left: -13vw; | |
transform: translate(-50%,-50%) !important; | |
position: absolute | |
} | |
} | |
.summary-item-list-container { | |
img { | |
width: 100% !important | |
} | |
} | |
.fullWidth { | |
width: 100% !important; | |
display: !important; | |
padding: 0px; | |
transform: skewX(0deg); | |
img { | |
width: 100% !important | |
} | |
} | |
.sqs-video-wrapper { | |
top: 0px !important; | |
iframe { | |
display: !important; | |
width: 80% !important; | |
margin-left: 10% !important; | |
top: 0px !important | |
} | |
} | |
.sqs-lightbox-previous, .sqs-lightbox-next { | |
opacity: 1 !important; | |
} | |
.sqs-gallery-meta-container:first-of-type { | |
display: block !important; | |
} | |
} | |
//VIDEO SECTION 2 | |
#video-section { | |
.summary-v2-block { | |
overflow: hidden; | |
.summary-thumbnail-container { | |
position: relative; | |
} | |
.summary-content { | |
pointer-events: none; | |
top: 50%; | |
left: 50%; | |
width: 80%; | |
transform: translate(-50%, -20px); | |
position: absolute; | |
height: ; | |
p, .summary-title-link { | |
transform: skew(5deg) !important; | |
} | |
.summary-excerpt { | |
visibility: hidden | |
} | |
} | |
} | |
.summary-v2-block { | |
.next:before, .previous:before { | |
display: none | |
} | |
.summary-item { | |
width: !important; | |
img { | |
} | |
} | |
.summary-content { | |
.summary-title { | |
font-size: 15px !important; | |
line-height: 1em !important; | |
height: 1px !important; | |
} | |
} | |
} | |
.summary-item-list-container { | |
overflow: scroll !important; | |
.summary-item-list { | |
width: ; | |
.summary-item { | |
width: 100%!important; | |
img { | |
width: 100% !important; | |
height: 100% !important | |
} | |
} | |
} | |
} | |
} | |
//TEAM SECTION | |
#team-section { | |
position:relative; | |
background: #5CCBF1; | |
.summary-block-wrapper { | |
position:relative; | |
.summary-carousel-pager { | |
pointer-events: auto !important | |
} | |
} | |
} | |
.team-section-overlay { | |
cursor:pointer; | |
background: #65d1f3; | |
position:absolute; | |
top:0; | |
z-index:999; | |
height:100%; | |
video { | |
height:100%; | |
width:100%; | |
} | |
} | |
.team-section-overlay-open { | |
display:inline-block; | |
position:absolute; | |
top:0; | |
left:0; | |
cursor:pointer; | |
img { | |
width:20px; | |
} | |
} | |
//AUDIO SECTION 1 | |
#audio-section { | |
.sqs-block-code { | |
padding: 0px; | |
} | |
overflow: hidden; | |
z-index: 1; | |
position: relative; | |
background: teal; | |
.content { | |
//HACK TO MOVE LEFT | |
position: relative | |
} | |
.sqs-block-audio { | |
display: none; | |
} | |
.sqs-block-html { | |
position: relative; | |
z-index: 100; | |
} | |
.sqs-block-video { | |
display: none | |
} | |
.caption2, .caption1 { | |
text-align: center; | |
left: 51%; | |
top: 50%; | |
position: absolute; | |
font-size: 20px; | |
transform: translate(-50%, -50%); | |
border: 2px solid #fff; | |
padding: 12px 25px; | |
color: #fff; | |
cursor: pointer; | |
p { | |
margin: 0px; | |
} | |
} | |
.video-caption { | |
/* | |
display: block; | |
position: absolute; | |
top: 50vh; | |
left: 5vw; | |
width: 15vw; | |
text-align: center; | |
transform: translate(-50%, -50%); | |
z-index: 1000; | |
background: one; | |
border: 2px solid #fff; | |
padding: 5px 30px; | |
color: #fff; | |
cursor: pointer | |
*/ | |
} | |
.summary-item { | |
opacity: 0.7; | |
img { | |
filter:brightness(0.7) | |
} | |
} | |
.summary-content { | |
position: absolute; | |
pointer-events: none; | |
top: 50%; | |
width: 80%; | |
left: 10%; | |
transform: translateY(-50%); | |
} | |
} | |
//AUDIO SECTION 2 | |
@media(max-width:767px) { | |
.audio-section-overlay { | |
display:none; | |
} | |
} | |
.audio-section-overlay { | |
color:white; | |
position:absolute; | |
bottom:0; | |
height:calc(100%-14px); | |
width:50%; | |
text-align:center; | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
z-index:999; | |
transition: 500ms cubic-bezier(0.85, 0, 0.11, 1); | |
.audio-overlay-title { | |
display:block; | |
font-size:0.9em; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50% ); | |
padding:0.3em 0.6em; | |
border: 2px solid white; | |
border-radius: 4px; | |
letter-spacing:0.05em; | |
cursor:pointer; | |
white-space:nowrap; | |
} | |
} | |
.audio-section-overlay.right{ | |
right:0; | |
background-image: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5aaf8d0c352f533ca586eb9c/1521454358565/scoring_loop.gif); | |
} | |
.audio-section-overlay.left{ | |
left:0; | |
background-image: url(https://static1.squarespace.com/static/5809cde0ebbd1a1ccaebbb95/t/5aae6da88a922d6d3cd0cf82/1521380789405/music_production_optimized.gif); | |
} | |
.audio-section-overlay.left.shift { | |
left:-100%; | |
} | |
.audio-section-overlay.right.shift { | |
right:-100%; | |
} | |
#audio-section { | |
.summary-thumbnail-container { | |
margin:5px 5px; | |
} | |
.summary-item-list { | |
display:flex; | |
flex-wrap:wrap; | |
} | |
.summary-item { | |
@media(min-width:767px) { | |
width:50%!important; | |
} | |
} | |
.sqs-block-socialaccountlinks { | |
.social-icons-color-black.social-icons-style-knockout .sqs-use--mask { | |
fill: #f8b69a !important | |
} | |
} | |
} | |
//CLIENTS SECTION | |
#clients-section { | |
background: #eeb1a0; | |
.sqs-block-image { | |
filter: grayscale(100%); | |
transition: all 500ms; | |
overflow: visible !important; | |
height: !important; | |
} | |
.sqs-block-image:hover { | |
filter: grayscale(0%); | |
transform: scale(1.1) | |
} | |
@media only screen and (max-width: 640px) { | |
.sqs-layout [class*=sqs-col] { | |
float: left !important; | |
width: 33% !important; | |
} | |
} | |
} | |
//TESTIMONIAL SECTION | |
#testimonials-section { | |
.sqs-gallery-thumbnails.sqs-gallery-design-strip { | |
display: none; | |
img { | |
height: 10px !important; | |
width: 10px !important; | |
margin-right: 5px; | |
border-radius: 100%; | |
-webkit-filter: brightness(0); | |
-moz-filter: brightness(0); | |
-ms-filter: brightness(0); | |
filter: brightness(0);left: 1px !important; | |
transform: translate(-50%, 0%) !important; | |
-moz-transform: translate(-50%, 0%) !important; | |
-ms-transform: translate(-50%, 0%) !important; | |
-webkit-transform: translate(-50%, 0%) !important; | |
} | |
} | |
.sqs-gallery-block-slideshow { | |
padding-top: 40px; | |
background: none; | |
max-height: 150px !important; | |
overflow-y: hidden !important; | |
.slide { | |
max-height: 150px; | |
} | |
.sqs-gallery-design-stacked-slide | |
{overflow: hidden; | |
img { | |
display: none; | |
} | |
} | |
.meta { | |
background: none !important; | |
width: 60% !important; | |
text-align: center; | |
left: 50% !important; | |
transform: translate(-50%, 0%) !important; | |
-moz-transform: translate(-50%, 0%) !important; | |
-ms-transform: translate(-50%, 0%) !important; | |
-webkit-transform: translate(-50%, 0%) !important; | |
top: 0px !important; | |
.meta-inside { | |
padding: 0 !important; | |
position: absolute; | |
width: 80% !important; | |
overflow: hidden !important; | |
top: 50% !important; | |
left: 50% !important; | |
-webkit-transform: translate(-50%, -50%); | |
-ms-transform: translate(-50%, -50%); | |
-moz-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
} | |
.meta-title { | |
color: #444; | |
font-weight: 200; | |
letter-spacing: 1.2px; | |
line-height: 24px; | |
font-size: 16px; | |
margin-bottom: 18px; | |
font-family: copy !important | |
} | |
.meta-description p { | |
color: #333; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
font-weight: 900; | |
font-size: 12px; | |
font-family: copy !important | |
} | |
} | |
.sqs-gallery-controls { | |
.previous, .next { | |
background: none; | |
color: #888 !important; | |
top: 40% !important; | |
width: 10px !important; | |
transition: all ease-in-out 400ms !important; | |
} | |
.previous:before, .next:before { | |
font-size: 16px; | |
} | |
.previous:hover, .next:hover { | |
background: none !important; | |
color: #000 !important; | |
} | |
} | |
} | |
@media (min-width:668px) and (max-width:1024px) { | |
.sqs-gallery-block-slideshow { | |
max-height: 210px !important; | |
.slide { | |
max-height: 210px !important; | |
} | |
.meta { | |
display: block !important; | |
max-width: 100% !important; | |
height: 100% !important; | |
width: 80% !important; | |
} | |
} | |
} | |
@media (max-width:667px) { | |
.sqs-gallery-block-slideshow { | |
.sqs-gallery-design-stacked { | |
height: 260px !important; | |
} | |
max-height: 260px !important; | |
.slide { | |
max-height: 260px !important; | |
} | |
.meta { | |
display: block !important; | |
max-width: 100% !important; | |
height: 100% !important; | |
width: 100% !important; | |
} | |
} | |
} | |
} | |
//CONTACT SECTION | |
#contact-section { | |
h2 strong { | |
border-bottom: 2px solid; | |
padding: 0 20px 3px | |
} | |
.form-wrapper { | |
width: 50vw; | |
margin: auto; | |
span.required { | |
display: none | |
} | |
.form-item.field.email label, .form-item.field .title { | |
position: relative !important; | |
color: #111; | |
text-align: center !important; | |
bottom: -45px; | |
} | |
.email input { | |
height: 60px | |
} | |
textarea { | |
min-height: 250px !important; | |
} | |
.form-item.field .title { | |
margin-top: -30px; | |
} | |
.form-button-wrapper { | |
float: right; | |
margin-top: -78px; | |
background: #111; | |
border: 0px; | |
z-index: 11; | |
position: relative; | |
font-size: 25px; | |
height: 50px; | |
width: 50px; | |
line-height: 0px; | |
padding: 0px; | |
input { | |
z-index: 1110000011; | |
position: relative; | |
width: 100%; | |
height: 100%; | |
display: block; | |
padding: 0px; | |
cursor: pointer; | |
font-size: 0px; | |
border: 0px; | |
} | |
input:hover { | |
background: none | |
} | |
} | |
.form-button-wrapper:before { | |
content:''; | |
background: url(https://image.flaticon.com/icons/svg/60/60758.svg) no-repeat; | |
filter:invert(1); | |
transform: translate(0%, 0%); | |
background-size: 20px 20px; | |
margin: auto; | |
width: 100px; | |
height: 100px; | |
z-index: 1110000001; | |
position: absolute; | |
display: block; | |
right: -66px; | |
top: 15px | |
} | |
.form-button-wrapper:hover { | |
color: #fff | |
} | |
} | |
} | |
.indicator-wrapper { | |
display:none; | |
@media(max-width:767px){ | |
display:block; | |
position:absolute; | |
bottom:25px; | |
text-align:center; | |
.indicator-button { | |
display:inline-block; | |
width:10px; | |
height:10px; | |
background:white; | |
margin:2px; | |
border-radius:50%; | |
opacity:0.5; | |
} | |
.indicator-button.active { | |
opacity:1; | |
} | |
} | |
} | |
/* | |
#video-section .summary-item-list-container .summary-item-list .summary-item { | |
width: 33.33%!important; | |
} | |
#video-section .summary-item-list-container .summary-item-list .summary-item.fullWidth { | |
width: 100%!important; | |
} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment