2021-08-04 13:12:35 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2021-08-13 13:45:22 -04:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" >
|
2021-08-16 15:34:08 -04:00
|
|
|
<meta charset="utf-8">
|
2021-08-16 17:06:07 -04:00
|
|
|
|
|
|
|
|
<!-- fonts -->
|
2021-08-06 15:59:10 -04:00
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: 'Brandon';
|
|
|
|
|
src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGICUwgwcAAAzkAACOuEdQT1Ov0QG0AACphAAAtDpHU1VCEG3ByQAAo3QAAAYQT1MvMn3maH8AAAEgAAAAYGNtYXC5Mp3YAAAG8AAABdRoZWFk8gfzawAAALwAAAA2aGhlYQfABEUAAAD0AAAAJGhtdHjKglH0AACbnAAAB9htYXhwAfZQAAAAARgAAAAGbmFtZRwzR1oAAAGAAAAFb3Bvc3T/uAAyAAAMxAAAACAAAQAAAAEAAFrKgzdfDzz1AAMD6AAAAADHptf+AAAAAMem1/7/dP6EBC8ECwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEYf90/2kELwABAAAAAAAAAAAAAAAAAAAB9gAAUAAB9gAAAAIB7gGkAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwYDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABgBPAAEAAAAAAAMAKQBVAAEAAAAAAAQAGAB+AAEAAAAAAAUADwCWAAEAAAAAAAYAFwClAAEAAAAAAAcANwC8AAEAAAAAAAgAEgDzAAEAAAAAAAkAEgDzAAEAAAAAAAoAPQEFAAEAAAAAAAwAFwFCAAEAAAAAABAAEQA+AAEAAAAAABEABgBPAAMAAQQJAAAAfAFZAAMAAQQJAAEAMAHVAAMAAQQJAAIADgIFAAMAAQQJAAMAUgITAAMAAQQJAAQALgJlAAMAAQQJAAUAHgKTAAMAAQQJAAYALgJlAAMAAQQJAAcAbgKxAAMAAQQJAAgAJAMfAAMAAQQJAAkAJAMfAAMAAQQJAAoAegNDAAMAAQQJAAwALgO9AAMAAQQJABAAIgPrAAMAAQQJABEADAQNQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZU1lZGl1bUhhbm5lc3ZvbkRvZWhyZW46IEJyYW5kb24gR3JvdGVzcXVlOiAyMDA5QnJhbmRvbiBHcm90ZXNxdWUgTWVkaXVtVmVyc2lvbiAwMDEuMDAwQnJhbmRvbkdyb3Rlc3F1ZS1NZWRpdW1CcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABNAGUAZABpAHUAbQBSAGUAZwB1AGwAYQByAEgAYQBuAG4AZQBzAHYAbwBuAEQAbwBlAGgAcgBlAG4AOgAgAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQA6ACAAMgAwADAAOQBCAHIAYQBuAGQAbwBuAEcAcgBvAHQAZQBzAHEAdQBlAC0ATQBlAGQAaQB1AG0AVgBlAHIAcwBpAG8AbgAgADAAMAAxAC4AMAAwADAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlACAAaQBzACAAYQAgAHQAcgBhAGQAZQBtAGEAcgBrACAAbwBmACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgBIAGEAbgBuAGUAcwAgAHYAbwBuACAARABvAGUAaAByAGUAbgBDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADAAOQAgAGIAeQAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAJoAaAByAGUAbgAuACAAQQBsAGwAIAByAGkAZwBoAHQAcwAgAHIAZQBzAGUAcgB2AGUAZAAuAGgAdAB0AHAAOgAvAC8AdwB3AHcALgBoAHYAZABmAG8AbgB0AHMALgBjAG8AbQBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUATQBlAGQAaQB1AG0AAAAAAwAAAAMAAAIUAAEAAAAAABwAAwABAAACFAAGAfgAAAAJAPcAAwAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AHwAgACEAIgAjACQAJQAmACcAKAApACoAKwAsAC0ALgAvADAAMQAyADMANAA1ADYANwA4ADkAOgA7ADwAPQA+AD8AQABBAEIAQwBEAEUARgBHAEgASQBKAEsATABNAE4ATwBQAFEAUgBTAFQAVQBWAFcAWABZAFoAWwBcAF0AXgBfAGAAYQAAAGcAagBzAHgAmACeALYAyADHAMkAywDKAM4A1wDcANsA3QDfAOwA6wDuAPAA/gECAQEBAwEFAQQBGwEaARwBHgFnAZYBcQFyAWkBZAFqARQBbQFsAW4BNwFAAYoAbQCiAZsBhwGMAY0BdAGTAZwBnwGgAZUBnQF1AXYBkgDRAQkBVwFWAY4BngFzAYsBjwFgAWEBVABiAGMAZgCdAKQBCwFiAWMBWgFbAVgBWQGJAaEBKgDCAXoBcAFeAV8BMQEyAWgBZQFcAV0BhQBlAHkAZAB7AHcAhwCJAIsAhgCbAJwBogCaALMAtACyAOoBOQE+AUIBRQFLAUcBTQFJAU8BOwAEA8AAAAByAEAABQAyAH4AvwDEANEA1gDfAOQA8QD2AX4BkgH/AhsCNwLHAskC3QOUA6kDvAPAHoUe8yAUIBogHiAiICYgMCA6IEQgcCB5IIkgrCETISIhJiEuIVQhWyFeIgIiBiIPIhIiFSIaIh4iKyJIImAiZSXK+P/7Av//AAAAIACgAMAAxQDSANcA4ADlAPIA9wGSAfoCGAI3AsYCyQLYA5QDqQO8A8AegB7yIBMgGCAcICAgJiAwIDkgRCBwIHQggCCsIRMhIiEmIS4hUyFbIVwiAiIGIg8iESIVIhkiHiIrIkgiYCJkJcr4//sB////4wAA/6MAAP/IAAD/5wAAAA8AAP/hAAAAAP68AAD+ewAA/fz96f3Y/dUAAAAA4U8AAAAAAADhLuFV4SXhNuE94TrhNODE4ITgTOBr4GoAAOAk4Cbfmt+J35EAAN9mAADffd9y30PfKt8o29cIowYwAAEAAABwAAAArAAAAMIAAADQAAAA5gAAAfIB/AAAAgAAAAIAAAAAAAAAAAACAgIMAAACDAIQAhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAB+AAAAfgAAAAAAAAAAAAAAAAAAAAAAAAAYgFWAXEBcgFvAXQB9QFpAUABbAF1AWABjgFVAW0BQgGWAYcBeAF5ATcBkwFqAWUBTQF3AXYBYQF+AXwBgQFXAGoAbQBzAHcAeAB5AHsAhgCHAIkAiwB2AJgBiACiALIAswC0ALYAwACxARQAzgDRANcA2wDcAN0A3wDrAOwA7gDwANoA/gGJAQkBGgEbARwBHgEoARkBKgBoAMwAaQDNAGwA0ABvANMAcADUAHIA1gBxANUAdADYAHUA2QB8AOAAfQDhAH4A4gB/AOMAegDeAIAA5ACBAOUAggDmAIMA5wCEAOgAhQDpAIoA7wCMAPEAiADtAI4A8gCNAOoBL
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: 'Brandon';
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGIMcAUZEAAAzUAACNvEdQT1Po0n3mAACoZAAAtuRHU1VCEhvDwgAAolQAAAYQT1MvMn4EaoMAAAEgAAAAYGNtYXC5J53YAAAG4AAABdRoZWFk8h7zTQAAALwAAAA2aGhlYQfXBEYAAAD0AAAAJGhtdHi/hknUAACakAAAB8RtYXhwAfZQAAAAARgAAAAGbmFtZVPRFYoAAAGAAAAFXXBvc3T/uAAyAAAMtAAAACAAAQAAAAEAAEgGW9NfDzz1AAMD6AAAAADHptftAAAAAMem1+3/Y/6ABFcEEwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEe/9j/1oEVwABAAAAAAAAAAAAAAAAAAAB7AAAUAAB9gAAAAIB8gHCAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwgDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABABPAAEAAAAAAAMAKQBTAAEAAAAAAAQAFgB8AAEAAAAAAAUADwCSAAEAAAAAAAYAFQChAAEAAAAAAAcANwC2AAEAAAAAAAgAEgDtAAEAAAAAAAkAEgDtAAEAAAAAAAoAPQD/AAEAAAAAAAwAFwE8AAEAAAAAABAAEQA+AAEAAAAAABEABABPAAMAAQQJAAAAfAFTAAMAAQQJAAEALAHPAAMAAQQJAAIADgH7AAMAAQQJAAMAUgIJAAMAAQQJAAQAKgJbAAMAAQQJAAUAHgKFAAMAAQQJAAYAKgJbAAMAAQQJAAcAbgKjAAMAAQQJAAgAJAMRAAMAAQQJAAkAJAMRAAMAAQQJAAoAegM1AAMAAQQJAAwALgOvAAMAAQQJABAAIgPdAAMAAQQJABEACAP/Q29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZUJvbGRIYW5uZXN2b25Eb2VocmVuOiBCcmFuZG9uIEdyb3Rlc3F1ZTogMjAwOUJyYW5kb24gR3JvdGVzcXVlIEJvbGRWZXJzaW9uIDAwMS4wMDBCcmFuZG9uR3JvdGVzcXVlLUJvbGRCcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABCAG8AbABkAFIAZQBnAHUAbABhAHIASABhAG4AbgBlAHMAdgBvAG4ARABvAGUAaAByAGUAbgA6ACAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlADoAIAAyADAAMAA5AEIAcgBhAG4AZABvAG4ARwByAG8AdABlAHMAcQB1AGUALQBCAG8AbABkAFYAZQByAHMAaQBvAG4AIAAwADAAMQAuADAAMAAwAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQAgAGkAcwAgAGEAIAB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAG8AZQBoAHIAZQBuAC4ASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4AQwBvAHAAeQByAGkAZwBoAHQAIAAoAGMAKQAgADIAMAAwADkAIABiAHkAIABIAGEAbgBuAGUAcwAgAHYAbwBuACAARACaAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBoAHQAdABwADoALwAvAHcAdwB3AC4AaAB2AGQAZgBvAG4AdABzAC4AYwBvAG0AQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlAEIAbwBsAGQAAAAAAAADAAAAAwAAAhQAAQAAAAAAHAADAAEAAAIUAAYB+AAAAAkA9wADAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AHgAfACAAIQAiACMAJAAlACYAJwAoACkAKgArACwALQAuAC8AMAAxADIAMwA0ADUANgA3ADgAOQA6ADsAPAA9AD4APwBAAEEAQgBDAEQARQBGAEcASABJAEoASwBMAE0ATgBPAFAAUQBSAFMAVABVAFYAVwBYAFkAWgBbAFwAXQBeAF8AYABhAAAAZwBqAHMAeACYAJ4AtgDIAMcAyQDLAMoAzgDXANwA2wDdAN8A7ADrAO4A8AD+AQIBAQEDAQUBBAEbARoBHAEeAWcBlgFxAXIBaQFkAWoBFAFtAWwBbgE3AUABigBtAKIBmwGHAYwBjQF0AZMBnAGfAaABlQGdAXUBdgGSANEBCQFXAVYBjgGeAXMBiwGPAWABYQFUAGIAYwBmAJ0ApAELAWIBYwFaAVsBWAFZAYkBoQEqAMIBegFwAV4BXwExATIBaAFlAVwBXQGFAGUAeQBkAHsAdwCHAIkAiwCGAJsAnAGiAJoAswC0ALIA6gE5AT4BQgFFAUsBRwFNAUkBTwE7AAQDwAAAAHIAQAAFADIAfgC/AMQA0QDWAN8A5ADxAPYBfgGSAf8CGwI3AscCyQLdA5QDqQO8A8AehR7zIBQgGiAeICIgJiAwIDogRCBwIHkgiSCsIRMhIiEmIS4hVCFbIV4iAiIGIg8iEiIVIhoiHiIrIkgiYCJlJcr4//sC//8AAAAgAKAAwADFANIA1wDgAOUA8gD3AZIB+gIYAjcCxgLJAtgDlAOpA7wDwB6AHvIgEyAYIBwgICAmIDAgOSBEIHAgdCCAIKwhEyEiISYhLiFTIVshXCICIgYiDyIRIhUiGSIeIisiSCJgImQlyvj/+wH////jAAD/owAA/8gAAP/nAAAADwAA/+EAAAAA/rwAAP57AAD9/P3p/dj91QAAAADhTwAAAAAAAOEu4VXhJeE24T3hOuE04MTghOBM4GvgagAA4CTgJt+a34nfkQAA32YAAN9933LfQ98q3yjb1wijBjAAAQAAAHAAAACsAAAAwgAAANAAAADmAAAB8gH8AAACAAAAAgAAAAAAAAAAAAICAgwAAAIMAhACFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAH4AAAB+AAAAAAAAAAAAAAAAAAAAAAAAABiAVYBcQFyAW8BdAHqAWkBQAFsAXUBYAGOAVUBbQFCAZYBhwF4AXkBNwGTAWoBZQFNAXcBdgFhAX4BfAGBAVcAagBtAHMAdwB4AHkAewCGAIcAiQCLAHYAmAGIAKIAsgCzALQAtgDAALEBFADOANEA1wDbANwA3QDfAOsA7ADuAPAA2gD+AYkBCQEaARsBHAEeASgBGQEqAGgAzABpAM0AbADQAG8A0wBwANQAcgDWAHEA1QB0ANgAdQDZAHwA4AB9AOEAfgDiAH8A4wB6AN4AgADkAIEA5QCCAOYAgwDnAIQA6ACFAOkAigDvAIwA8QCIAO0AjgDyAI0A6gEvATAAjwD0AJAA9QD2AJEA9
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2021-08-16 17:06:07 -04:00
|
|
|
|
|
|
|
|
<!-- layout -->
|
2021-08-04 13:12:35 -04:00
|
|
|
<style>
|
|
|
|
|
body
|
|
|
|
|
{
|
|
|
|
|
margin:0;
|
2021-08-06 15:59:10 -04:00
|
|
|
font-family: Brandon, Centrury Gothic, sans-serif;
|
2021-08-16 17:06:07 -04:00
|
|
|
/*background:#008794;*/
|
|
|
|
|
/*color:white;*/
|
2021-08-04 13:12:35 -04:00
|
|
|
}
|
|
|
|
|
section
|
|
|
|
|
{
|
|
|
|
|
position:relative;
|
2021-08-16 17:06:07 -04:00
|
|
|
min-height: 100vh;
|
|
|
|
|
max-width:900px;
|
|
|
|
|
margin:0 auto;
|
2021-08-04 13:12:35 -04:00
|
|
|
box-sizing: border-box;
|
2021-08-13 13:45:22 -04:00
|
|
|
padding:20px;
|
2021-08-04 13:12:35 -04:00
|
|
|
}
|
2021-08-09 10:27:43 -04:00
|
|
|
|
2021-08-10 10:38:48 -04:00
|
|
|
|
2021-08-04 13:12:35 -04:00
|
|
|
h2
|
|
|
|
|
{
|
2021-08-10 10:38:48 -04:00
|
|
|
display:flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
box-sizing:border-box;
|
2021-08-13 13:45:22 -04:00
|
|
|
width:100%;
|
|
|
|
|
max-width:500px;
|
2021-08-04 13:12:35 -04:00
|
|
|
margin:0 auto;
|
2021-08-10 10:38:48 -04:00
|
|
|
padding:5px 20px 5px 20px;
|
2021-08-04 13:12:35 -04:00
|
|
|
text-align:center;
|
2021-08-06 15:59:10 -04:00
|
|
|
text-transform:uppercase;
|
|
|
|
|
font-size:36px;
|
|
|
|
|
}
|
2021-08-10 10:38:48 -04:00
|
|
|
h2 > span
|
|
|
|
|
{
|
|
|
|
|
position: relative;
|
|
|
|
|
flex:1;
|
|
|
|
|
}
|
|
|
|
|
h2 > span:first-child::before, h2 > span:last-child::before
|
2021-08-06 15:59:10 -04:00
|
|
|
{
|
|
|
|
|
content: "⬦";
|
2021-08-10 10:38:48 -04:00
|
|
|
line-height: 7px;
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
text-indent:-37px;
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -2px;
|
|
|
|
|
width: 0%;
|
2021-08-06 15:59:10 -04:00
|
|
|
height: 5px;
|
|
|
|
|
background: #000;
|
|
|
|
|
transition: width 0.4s;
|
|
|
|
|
}
|
2021-08-10 10:38:48 -04:00
|
|
|
h2 > span:first-child::before
|
2021-08-06 15:59:10 -04:00
|
|
|
{
|
2021-08-10 10:38:48 -04:00
|
|
|
text-align:left;
|
|
|
|
|
direction:ltr;
|
|
|
|
|
right: 0;
|
2021-08-06 15:59:10 -04:00
|
|
|
}
|
2021-08-10 10:38:48 -04:00
|
|
|
h2 > span:last-child::before
|
2021-08-06 15:59:10 -04:00
|
|
|
{
|
2021-08-10 10:38:48 -04:00
|
|
|
text-align:right;
|
|
|
|
|
direction:rtl;
|
|
|
|
|
left: 0;
|
2021-08-06 15:59:10 -04:00
|
|
|
}
|
2021-08-10 10:38:48 -04:00
|
|
|
h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
|
2021-08-06 15:59:10 -04:00
|
|
|
{
|
2021-08-10 10:38:48 -04:00
|
|
|
width: 100%;
|
2021-08-06 15:59:10 -04:00
|
|
|
}
|
2021-08-10 10:38:48 -04:00
|
|
|
|
2021-08-06 15:59:10 -04:00
|
|
|
.CTA
|
|
|
|
|
{
|
|
|
|
|
position:relative;
|
|
|
|
|
display:inline-block;
|
|
|
|
|
padding:5px 50px 5px 50px;
|
|
|
|
|
border:5px solid black;
|
|
|
|
|
text-decoration:none !important;
|
|
|
|
|
color: black;
|
|
|
|
|
text-transform:uppercase;
|
|
|
|
|
font-weight:lighter;
|
|
|
|
|
}
|
|
|
|
|
.CTA::before, .CTA::after
|
|
|
|
|
{
|
|
|
|
|
content:" ";
|
|
|
|
|
display:block;
|
|
|
|
|
position:absolute;
|
|
|
|
|
height:100%;
|
|
|
|
|
width:0px;
|
|
|
|
|
top:0;
|
|
|
|
|
}
|
|
|
|
|
.CTA::before
|
|
|
|
|
{
|
|
|
|
|
left:10px;
|
|
|
|
|
border-right:5px solid black;
|
|
|
|
|
transition:left 0.4s;
|
|
|
|
|
}
|
|
|
|
|
.CTA::after
|
|
|
|
|
{
|
|
|
|
|
right:10px;
|
|
|
|
|
border-left:5px solid black;
|
|
|
|
|
transition:right 0.4s;
|
|
|
|
|
}
|
|
|
|
|
.CTA:hover::before
|
|
|
|
|
{
|
|
|
|
|
left:-5px;
|
2021-08-04 13:12:35 -04:00
|
|
|
}
|
2021-08-06 15:59:10 -04:00
|
|
|
.CTA:hover::after
|
2021-08-04 13:12:35 -04:00
|
|
|
{
|
2021-08-06 15:59:10 -04:00
|
|
|
right:-5px;
|
2021-08-04 13:12:35 -04:00
|
|
|
}
|
|
|
|
|
</style>
|
2021-08-16 17:06:07 -04:00
|
|
|
|
|
|
|
|
<!-- nav menu -->
|
|
|
|
|
<style>
|
|
|
|
|
nav
|
|
|
|
|
{
|
|
|
|
|
/* margin: 7px; */
|
|
|
|
|
/* padding: 10px; */
|
|
|
|
|
position: fixed;
|
|
|
|
|
display: block;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0px;
|
2021-09-01 11:59:49 -04:00
|
|
|
width: 100%;
|
2021-08-16 17:06:07 -04:00
|
|
|
z-index: 200;
|
|
|
|
|
height: 66px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition: height 0.4s;
|
|
|
|
|
/* box-sizing: border-box; */
|
|
|
|
|
}
|
|
|
|
|
nav > .detail
|
|
|
|
|
{
|
|
|
|
|
display:block;
|
|
|
|
|
position:absolute;
|
|
|
|
|
width:40px;
|
|
|
|
|
right:0;
|
|
|
|
|
transition: width 0.4s 0.4s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[nav-open] nav
|
|
|
|
|
{
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
nav > .detail.cap
|
|
|
|
|
{
|
|
|
|
|
height:33px;
|
|
|
|
|
}
|
|
|
|
|
nav > .detail.cap--top
|
|
|
|
|
{
|
|
|
|
|
top:10px;
|
|
|
|
|
}
|
|
|
|
|
nav > .detail.cap--bottom
|
|
|
|
|
{
|
|
|
|
|
bottom:10px;
|
|
|
|
|
}
|
|
|
|
|
nav > .detail.cap::before
|
|
|
|
|
{
|
|
|
|
|
position: relative;
|
|
|
|
|
left: -10px;
|
|
|
|
|
content: "⬦";
|
|
|
|
|
line-height: 37px;
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
text-indent: -10px;
|
|
|
|
|
}
|
|
|
|
|
nav > .detail.edge
|
|
|
|
|
{
|
|
|
|
|
border: 40px solid transparent;
|
|
|
|
|
border-right: 0px;
|
|
|
|
|
border-left: 0px;
|
|
|
|
|
content: " ";
|
|
|
|
|
height: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
nav > .detail.edge::before
|
|
|
|
|
{
|
|
|
|
|
content: " ";
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 14px;
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
|
|
|
|
nav .button
|
|
|
|
|
{
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
2021-09-01 11:59:49 -04:00
|
|
|
right:0%;
|
2021-08-16 17:06:07 -04:00
|
|
|
display: block;
|
2021-09-01 11:59:49 -04:00
|
|
|
width: 50%;
|
|
|
|
|
max-width:200px;
|
2021-08-16 17:06:07 -04:00
|
|
|
height: 66px;
|
|
|
|
|
transition: left 0.4s 0.4s;
|
2021-09-01 11:59:49 -04:00
|
|
|
cursor:pointer;
|
2021-08-16 17:06:07 -04:00
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
nav .button.menu::before, nav .button.menu::after
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
display:block;
|
|
|
|
|
position:absolute;
|
|
|
|
|
top:20px;
|
|
|
|
|
left:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding-right:48px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
text-transform:uppercase;
|
|
|
|
|
font-weight:900;
|
2021-09-01 11:59:49 -04:00
|
|
|
transition:left 0.4s, top 0.4s, padding 0.4s;
|
2021-08-16 17:06:07 -04:00
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
nav .button.menu::before
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
content:"Menu";
|
|
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
nav .button.menu::after
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
content:"Close";
|
|
|
|
|
top:180%;
|
|
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
nav .button.menu:hover::before, nav .button.menu:hover::after
|
|
|
|
|
{
|
|
|
|
|
padding-right:60px;
|
|
|
|
|
}
|
|
|
|
|
[nav-open] nav .button.menu::before
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
left:180%;
|
|
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
[nav-open] nav .button.menu::after
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
top:28px;
|
|
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
|
|
|
|
|
nav .button.book
|
|
|
|
|
{
|
|
|
|
|
padding-left: 50px;
|
|
|
|
|
left: 0;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
font-weight: 900;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
nav .button.book svg
|
|
|
|
|
{
|
|
|
|
|
display:block;
|
|
|
|
|
width:50px;
|
|
|
|
|
height:100%;
|
|
|
|
|
position:absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
}
|
|
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
nav > ul
|
|
|
|
|
{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50vh;
|
|
|
|
|
left:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
padding: 0 48px 0 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
transition:left 0.4s 0.5s;
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
nav > ul a
|
|
|
|
|
{
|
|
|
|
|
display:block;
|
|
|
|
|
padding:10px 0 10px 0;
|
|
|
|
|
text-decoration: none !important;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color:black !important;
|
|
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
.Dim
|
|
|
|
|
{
|
|
|
|
|
box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0%;
|
|
|
|
|
height: 65px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
transition: height 0.4s;
|
|
|
|
|
}
|
|
|
|
|
[nav-open] .Dim
|
|
|
|
|
{
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<!-- 3d product shot -->
|
|
|
|
|
<style>
|
|
|
|
|
.Shot
|
|
|
|
|
{
|
|
|
|
|
transform: perspective(1000px);
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
width:500px;
|
|
|
|
|
height: 400px;
|
|
|
|
|
margin:20px auto 0 auto;
|
|
|
|
|
text-align:center;
|
|
|
|
|
transition: transform 1s;
|
|
|
|
|
}
|
|
|
|
|
.Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
|
|
|
|
|
.Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); }
|
|
|
|
|
.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
|
|
|
|
|
.Shot[show="pages"]{ transform: perspective(800px) rotateX(-7deg) rotateY(0deg); }
|
|
|
|
|
|
|
|
|
|
.Book
|
|
|
|
|
{
|
|
|
|
|
height:100%;
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
transform: translateZ(-100px);
|
|
|
|
|
position: relative;
|
|
|
|
|
display:inline-block;
|
|
|
|
|
}
|
|
|
|
|
.Spine
|
|
|
|
|
{
|
|
|
|
|
display:flex;
|
|
|
|
|
justify-content:space-between;
|
|
|
|
|
margin:0 auto;
|
|
|
|
|
position:absolute;
|
2021-09-01 11:59:49 -04:00
|
|
|
transform-style: preserve-3d;
|
2021-08-16 17:06:07 -04:00
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.Page
|
|
|
|
|
{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
transition: transform 1s;
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
}
|
|
|
|
|
.Page[swing="closed"]{ transform: translateX(0px) rotateY(-90deg); }
|
|
|
|
|
.Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
|
|
|
|
|
.Page[swing="left" ]{ transform: translateX(3px) rotateY(-160deg); }
|
|
|
|
|
.Page .Front, .Page .Back
|
|
|
|
|
{
|
|
|
|
|
float:left;
|
|
|
|
|
position:absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
height:100%;
|
|
|
|
|
backface-visibility: hidden;
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
transform: rotateY(180deg);
|
|
|
|
|
}
|
|
|
|
|
.Page .Back
|
|
|
|
|
{
|
|
|
|
|
transform: rotateY(0deg);
|
|
|
|
|
}
|
|
|
|
|
.Page img
|
|
|
|
|
{
|
|
|
|
|
height:100%;
|
|
|
|
|
width:auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.Page--Fill
|
|
|
|
|
{
|
|
|
|
|
display: block;
|
|
|
|
|
position:absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
.Page--Shrink
|
|
|
|
|
{
|
|
|
|
|
height:98%;
|
|
|
|
|
top:1%;
|
|
|
|
|
}
|
|
|
|
|
.Shadow--Drop::before
|
|
|
|
|
{
|
|
|
|
|
transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
|
|
|
|
|
box-shadow: 0px 100px 60px black, 0px 100px 17px black;
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
content: " ";
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 39px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.Shadow--Sheet::after
|
|
|
|
|
{
|
|
|
|
|
content:" ";
|
|
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: 0px 0px;
|
|
|
|
|
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
|
|
|
|
|
|
|
|
|
|
display:block;
|
|
|
|
|
position:absolute;
|
|
|
|
|
z-index:100;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
|
|
|
|
|
backface-visibility: hidden;
|
|
|
|
|
transform:scaleX(-1);
|
|
|
|
|
}
|
|
|
|
|
.Shadow--Sheet--Flip::after
|
|
|
|
|
{
|
|
|
|
|
transform:scaleX(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.Shadow--Radiosity::after
|
|
|
|
|
{
|
|
|
|
|
content: " ";
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: 0px 0px;
|
|
|
|
|
background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
z-index:100;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<!-- time -->
|
2021-08-04 16:00:10 -04:00
|
|
|
<script>
|
|
|
|
|
var Time =
|
|
|
|
|
{
|
|
|
|
|
Jobs:[],
|
|
|
|
|
Stamp:false,
|
|
|
|
|
Queue:false,
|
|
|
|
|
Loop:false,
|
|
|
|
|
Add:function(inJob)
|
|
|
|
|
{
|
|
|
|
|
if(Time.Loop)
|
|
|
|
|
{
|
|
|
|
|
console.log("cannot modify queue while processing");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if(!Time.Queue)
|
|
|
|
|
{
|
|
|
|
|
window.requestAnimationFrame(Time.Update);
|
|
|
|
|
}
|
|
|
|
|
Time.Queue = true;
|
|
|
|
|
Time.Jobs.push(inJob);
|
|
|
|
|
},
|
|
|
|
|
Remove:function(inJob)
|
|
|
|
|
{
|
|
|
|
|
if(Time.Loop)
|
|
|
|
|
{
|
|
|
|
|
console.log("cannot modify queue while processing");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var index = Time.Jobs.indexOf(inJob);
|
|
|
|
|
if(index > -1)
|
|
|
|
|
{
|
|
|
|
|
Time.Jobs.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
Update:function(inTimestamp)
|
|
|
|
|
{
|
|
|
|
|
var delta;
|
|
|
|
|
var i;
|
|
|
|
|
|
|
|
|
|
if(!Time.Stamp)
|
|
|
|
|
{
|
|
|
|
|
Time.Stamp = inTimestamp;
|
|
|
|
|
}
|
|
|
|
|
delta = inTimestamp - Time.Stamp;
|
|
|
|
|
Time.Stamp = inTimestamp;
|
|
|
|
|
|
|
|
|
|
Time.Loop = true;
|
|
|
|
|
for(i=0; i<Time.Jobs.length; i++)
|
|
|
|
|
{
|
|
|
|
|
if(Time.Jobs[i](delta) === false)
|
|
|
|
|
{
|
|
|
|
|
Time.Jobs.splice(i, 1);
|
|
|
|
|
i--;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
Time.Loop = false;
|
|
|
|
|
|
|
|
|
|
if(Time.Jobs.length > 0)
|
|
|
|
|
{
|
|
|
|
|
window.requestAnimationFrame(Time.Update);
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
Time.Stamp = false;
|
|
|
|
|
Time.Queue = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
2021-08-10 11:59:33 -04:00
|
|
|
</script>
|
2021-08-16 17:06:07 -04:00
|
|
|
|
|
|
|
|
<!-- scroll spy -->
|
2021-08-10 11:59:33 -04:00
|
|
|
<script>
|
|
|
|
|
var Spy =
|
|
|
|
|
{
|
|
|
|
|
Attribute:"data-spy",
|
|
|
|
|
Members:[],
|
|
|
|
|
Defaults:[0, 1, 0, 1],
|
|
|
|
|
Disabled:false,
|
|
|
|
|
Suspend:function()
|
2021-08-04 16:00:10 -04:00
|
|
|
{
|
2021-08-10 11:59:33 -04:00
|
|
|
Spy.Disabled = true;
|
|
|
|
|
},
|
|
|
|
|
Resume:function()
|
|
|
|
|
{
|
|
|
|
|
Spy.Disabled = false;
|
|
|
|
|
Spy.UpdateAll();
|
|
|
|
|
},
|
|
|
|
|
UpdateAll:function()
|
|
|
|
|
{
|
|
|
|
|
var i, member, aabb, top, bottom, left, right;
|
|
|
|
|
var visible;
|
|
|
|
|
|
|
|
|
|
if(Spy.Disabled){ return; }
|
|
|
|
|
|
|
|
|
|
for(i=0; i<Spy.Members.length; i++)
|
2021-08-04 16:00:10 -04:00
|
|
|
{
|
2021-08-10 11:59:33 -04:00
|
|
|
member = Spy.Members[i];
|
|
|
|
|
|
|
|
|
|
top = window.innerHeight * member.Bounds[0];
|
|
|
|
|
bottom = window.innerHeight * member.Bounds[1];
|
|
|
|
|
left = window.innerWidth * member.Bounds[2];
|
|
|
|
|
right = window.innerWidth * member.Bounds[3];
|
|
|
|
|
|
|
|
|
|
aabb = member.Element.getBoundingClientRect();
|
|
|
|
|
visible = (aabb.top < bottom && aabb.bottom > top) && (aabb.left < right && aabb.right > left);
|
|
|
|
|
if(visible != member.Visible)
|
2021-08-04 16:00:10 -04:00
|
|
|
{
|
2021-08-10 11:59:33 -04:00
|
|
|
member.Element.setAttribute(Spy.Attribute, visible);
|
|
|
|
|
member.Visible = visible;
|
|
|
|
|
member.Change(visible);
|
2021-08-04 16:00:10 -04:00
|
|
|
}
|
2021-08-10 11:59:33 -04:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
Create:function(inElement)
|
|
|
|
|
{
|
|
|
|
|
var j, bounds;
|
|
|
|
|
var attr;
|
|
|
|
|
var obj;
|
|
|
|
|
attr = inElement.getAttribute(Spy.Attribute)||"";
|
|
|
|
|
inElement.removeAttribute(Spy.Attribute);
|
|
|
|
|
bounds = attr.split("|");
|
|
|
|
|
for(j=0; j<Spy.Defaults.length; j++)
|
2021-08-04 16:00:10 -04:00
|
|
|
{
|
2021-08-10 11:59:33 -04:00
|
|
|
if(bounds[j])
|
2021-08-04 16:00:10 -04:00
|
|
|
{
|
2021-08-10 11:59:33 -04:00
|
|
|
bounds[j] = parseFloat(bounds[j]);
|
2021-08-04 16:00:10 -04:00
|
|
|
}
|
2021-08-10 11:59:33 -04:00
|
|
|
else
|
2021-08-04 16:00:10 -04:00
|
|
|
{
|
2021-08-10 11:59:33 -04:00
|
|
|
bounds[j] = Spy.Defaults[j];
|
2021-08-04 16:00:10 -04:00
|
|
|
}
|
2021-08-10 11:59:33 -04:00
|
|
|
}
|
|
|
|
|
obj = {
|
|
|
|
|
Element:inElement,
|
|
|
|
|
Bounds:bounds,
|
|
|
|
|
Visible:undefined,
|
|
|
|
|
Change:function(){}
|
|
|
|
|
};
|
|
|
|
|
Spy.Members.push(obj);
|
|
|
|
|
return obj;
|
|
|
|
|
},
|
|
|
|
|
CreateAll:function()
|
|
|
|
|
{
|
|
|
|
|
var i, elements;
|
|
|
|
|
elements = document.querySelectorAll("*["+Spy.Attribute+"]");
|
|
|
|
|
|
|
|
|
|
for(i=0; i<elements.length; i++)
|
2021-08-04 16:00:10 -04:00
|
|
|
{
|
2021-08-10 11:59:33 -04:00
|
|
|
Spy.Create(elements[i]);
|
2021-08-04 16:00:10 -04:00
|
|
|
}
|
2021-08-10 11:59:33 -04:00
|
|
|
},
|
|
|
|
|
Init:function()
|
|
|
|
|
{
|
|
|
|
|
Spy.CreateAll();
|
|
|
|
|
Spy.UpdateAll();
|
|
|
|
|
document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
|
|
|
|
|
window.addEventListener("resize", Spy.UpdateAll, {passive:true});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
2021-08-09 10:27:43 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
<!-- video player -->
|
|
|
|
|
<script>
|
|
|
|
|
var Video;
|
|
|
|
|
Video = {};
|
|
|
|
|
Video.Players = [];
|
|
|
|
|
Video.Initialized = false;
|
|
|
|
|
Video.SilenceOthers = function(inIndex)
|
|
|
|
|
{
|
|
|
|
|
var i;
|
|
|
|
|
for(i=0; i<Video.Players.length; i++)
|
|
|
|
|
{
|
|
|
|
|
if(i != inIndex)
|
|
|
|
|
{
|
|
|
|
|
Video.Players[i].Stop();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
Video.Player = function(inDOMID, inVideoID)
|
|
|
|
|
{
|
|
|
|
|
var obj;
|
|
|
|
|
obj = {};
|
|
|
|
|
obj.DOMID = inDOMID;
|
|
|
|
|
obj.QueuedState = false;
|
|
|
|
|
obj.Stop = function(){obj.QueuedState = false;};
|
|
|
|
|
obj.Play = function(){obj.QueuedState = true;};
|
|
|
|
|
obj.Build = function()
|
|
|
|
|
{
|
|
|
|
|
obj.YT = new YT.Player(obj.DOMID, obj.Config);
|
|
|
|
|
};
|
|
|
|
|
obj.Ready = function(inEvent)
|
|
|
|
|
{
|
|
|
|
|
obj.Stop = function()
|
|
|
|
|
{
|
|
|
|
|
obj.YT.pauseVideo();
|
|
|
|
|
};
|
|
|
|
|
obj.Play = function()
|
|
|
|
|
{
|
|
|
|
|
obj.YT.playVideo();
|
|
|
|
|
};
|
|
|
|
|
if(obj.QueuedState)
|
|
|
|
|
{
|
|
|
|
|
obj.Play();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
obj.StateChange = function(inEvent)
|
|
|
|
|
{
|
|
|
|
|
if(inEvent.data === 1)
|
|
|
|
|
{
|
|
|
|
|
Video.SilenceOthers(obj.Index);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
obj.Config = {
|
|
|
|
|
videoId:inVideoID,
|
|
|
|
|
playerVars: { modestbranding:true, rel:0 },
|
|
|
|
|
events:{'onReady': obj.Ready, 'onStateChange': obj.StateChange }
|
|
|
|
|
};
|
|
|
|
|
obj.Index = Video.Players.length;
|
|
|
|
|
Video.Players.push(obj);
|
2021-08-13 13:45:22 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
if(Video.Initialized)
|
|
|
|
|
{
|
|
|
|
|
// if this player is being created long after the YT library initialized, go ahead and build it now
|
|
|
|
|
obj.Build();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return obj;
|
|
|
|
|
};
|
|
|
|
|
Video.BuildPlayers = function()
|
2021-08-13 17:17:33 -04:00
|
|
|
{
|
2021-08-16 17:06:07 -04:00
|
|
|
var i;
|
|
|
|
|
for(i=0; i<Video.Players.length; i++)
|
|
|
|
|
{
|
|
|
|
|
Video.Players[i].Build();
|
|
|
|
|
}
|
|
|
|
|
Video.Initialized = true;
|
|
|
|
|
};
|
|
|
|
|
Video.Init = function()
|
2021-08-10 11:59:33 -04:00
|
|
|
{
|
2021-08-16 17:06:07 -04:00
|
|
|
var tagNew, tagOld;
|
2021-08-16 15:34:08 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
tagNew = document.createElement('script');
|
|
|
|
|
tagNew.src = "https://www.youtube.com/iframe_api";
|
|
|
|
|
tagOld = document.getElementsByTagName('script')[0];
|
|
|
|
|
tagOld.parentNode.insertBefore(tagNew, tagOld);
|
2021-08-16 15:34:08 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
window.onYouTubeIframeAPIReady = Video.BuildPlayers;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
2021-08-16 12:01:43 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2021-08-04 13:12:35 -04:00
|
|
|
<nav>
|
2021-09-01 11:59:49 -04:00
|
|
|
<div class="Dim"></div>
|
2021-08-13 13:45:22 -04:00
|
|
|
<span class="detail edge"></span>
|
|
|
|
|
<span class="detail cap cap--top"></span>
|
|
|
|
|
<span class="detail cap cap--bottom"></span>
|
2021-08-09 10:27:43 -04:00
|
|
|
<ul>
|
|
|
|
|
<li><a href="#top" >Top</a></li>
|
|
|
|
|
<li><a href="#order">Order</a></li>
|
|
|
|
|
<li><a href="#video">Video</a></li>
|
|
|
|
|
<li><a href="#about">About</a></li>
|
|
|
|
|
<li><a href="#specs">Specs</a></li>
|
|
|
|
|
<li><a href="#email">Sign-up</a></li>
|
|
|
|
|
</ul>
|
2021-09-01 11:59:49 -04:00
|
|
|
<span class="button menu"></span>
|
|
|
|
|
<span class="button book">
|
|
|
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<path d="M41.0717 8.95871L41.0717 22.6941L27.3363 22.6941L27.3363 8.95871L41.0717 8.95871ZM41.0717 8.95871L8.95871 41.0717M41.1181 22.8297L28.3357 35.6121L14.4183 35.6121V21.6947L27.2007 8.91228M20.907 15.206V29.1234L34.8244 29.1234" stroke="black" stroke-width="3"/>
|
|
|
|
|
</svg>
|
|
|
|
|
Buy Now
|
|
|
|
|
</span>
|
2021-08-04 13:12:35 -04:00
|
|
|
</nav>
|
2021-09-01 11:59:49 -04:00
|
|
|
|
2021-08-10 10:38:48 -04:00
|
|
|
<main>
|
2021-09-01 11:59:49 -04:00
|
|
|
<section id="intro">
|
|
|
|
|
<img src="https://via.placeholder.com/1024x512.png"/>
|
|
|
|
|
</section>
|
2021-08-04 16:00:10 -04:00
|
|
|
<section id="order">
|
2021-08-04 16:51:40 -04:00
|
|
|
|
2021-08-10 10:38:48 -04:00
|
|
|
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
|
2021-08-04 16:00:10 -04:00
|
|
|
<h3>Truth For Life</h3>
|
|
|
|
|
<h4>365 Daily Devotionals</h4>
|
|
|
|
|
<h5>by Alistair Begg</h5>
|
|
|
|
|
<p>
|
|
|
|
|
Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque.
|
|
|
|
|
Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.
|
|
|
|
|
Nullam semper ligula in est tincidunt, vel fringilla nunc vehicula. Nam tempus pellentesque ante, nec iaculis nisi porta id.
|
|
|
|
|
Ut aliquet purus nec mi egestas ornare.
|
|
|
|
|
</p>
|
2021-08-06 15:59:10 -04:00
|
|
|
<a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
|
2021-08-04 16:00:10 -04:00
|
|
|
<span>$10.00 (free shipping)</span>
|
2021-08-16 17:06:07 -04:00
|
|
|
<div>
|
|
|
|
|
<div class="Shot" show="cover">
|
|
|
|
|
<div class="Book">
|
|
|
|
|
<img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
|
|
|
|
|
<div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
|
|
|
|
|
<div class="Spine">
|
|
|
|
|
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
|
|
|
|
|
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
|
|
|
|
|
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button onclick="bookPose('cover'); bookClose();">Front</button>
|
|
|
|
|
<button onclick="bookPose('spine'); bookClose();">Spine</button>
|
|
|
|
|
<button onclick="bookPose('back'); bookClose();">Back</button>
|
|
|
|
|
<button onclick="bookPose('pages'); bookOpen(4);">Intro</button>
|
|
|
|
|
<button onclick="bookPose('pages'); bookOpen(5);">Days 1 & 2</button>
|
|
|
|
|
<button onclick="bookPose('pages'); bookOpen(6);">Days 3 & 4</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2021-08-04 16:00:10 -04:00
|
|
|
</section>
|
2021-08-04 13:12:35 -04:00
|
|
|
<section id="video">
|
2021-08-10 10:38:48 -04:00
|
|
|
<h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>
|
2021-08-04 16:00:10 -04:00
|
|
|
|
2021-08-04 13:12:35 -04:00
|
|
|
</section>
|
|
|
|
|
<section id="about">
|
2021-08-10 10:38:48 -04:00
|
|
|
<h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
|
2021-08-04 16:00:10 -04:00
|
|
|
<p>
|
|
|
|
|
Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque.
|
|
|
|
|
Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.
|
|
|
|
|
Nullam semper ligula in est tincidunt, vel fringilla nunc vehicula. Nam tempus pellentesque ante, nec iaculis nisi porta id.
|
|
|
|
|
Ut aliquet purus nec mi egestas ornare.
|
|
|
|
|
</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<strong>Head</strong><p>Nam tempus pellentesque ante, nec iaculis nisi porta id.</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<strong>Hands</strong><p>Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<strong>Heart</strong><p>Morbi blandit in ligula eu scelerisque. Maecenas hendrerit eu nunc non molestie.</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<a href="#">Look Inside</a>
|
2021-08-04 13:12:35 -04:00
|
|
|
</section>
|
|
|
|
|
<section id="specs">
|
|
|
|
|
<h2 data-spy="0.2|0.8">Specs</h2>
|
2021-09-01 11:59:49 -04:00
|
|
|
<p>
|
|
|
|
|
Start with the gospel each and every day with this one-year devotional by renowned Bible teacher Alistair Begg.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Each daily devotion includes:
|
|
|
|
|
</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Reflections from renowned Bible teacher Alistair Begg</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Prompts for real life application</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Relevant Scripture passages</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>A yearly Bible reading plan</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2021-08-04 13:12:35 -04:00
|
|
|
</section>
|
2021-08-04 16:00:10 -04:00
|
|
|
<section id="email">
|
|
|
|
|
<h2 data-spy="0.2|0.8">Sign Up</h2>
|
|
|
|
|
</section>
|
2021-08-10 10:38:48 -04:00
|
|
|
</main>
|
2021-08-13 13:45:22 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
<!-- init zone -->
|
|
|
|
|
<script>
|
2021-08-13 13:45:22 -04:00
|
|
|
function $(inSelector){ return document.querySelectorAll(inSelector); }
|
|
|
|
|
$("nav .button")[0].addEventListener("click", function()
|
|
|
|
|
{
|
|
|
|
|
if(document.body.hasAttribute("nav-open"))
|
|
|
|
|
{
|
|
|
|
|
document.body.removeAttribute("nav-open");
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
document.body.setAttribute("nav-open", true);
|
|
|
|
|
}
|
2021-09-01 11:59:49 -04:00
|
|
|
});
|
2021-08-13 13:45:22 -04:00
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
|
2021-08-04 16:00:10 -04:00
|
|
|
Spy.Init();
|
2021-08-04 14:38:48 -04:00
|
|
|
function JobDuration(inDuration, inHandler, inDone)
|
2021-08-04 13:12:35 -04:00
|
|
|
{
|
|
|
|
|
var timeCurrent = 0;
|
|
|
|
|
var timeLimit = inDuration*1000;
|
|
|
|
|
var timeRelative = 0;
|
|
|
|
|
var timeMaxed = false;
|
|
|
|
|
return function(inDelta)
|
|
|
|
|
{
|
|
|
|
|
timeCurrent += inDelta;
|
|
|
|
|
timeMaxed = timeCurrent > timeLimit;
|
2021-08-04 14:38:48 -04:00
|
|
|
if(timeMaxed)
|
|
|
|
|
{
|
|
|
|
|
inHandler(1);
|
|
|
|
|
inDone();
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return inHandler(timeCurrent / timeLimit);
|
2021-08-04 13:12:35 -04:00
|
|
|
};
|
|
|
|
|
}
|
2021-08-16 17:06:07 -04:00
|
|
|
|
|
|
|
|
|
2021-08-04 13:12:35 -04:00
|
|
|
document.querySelector("nav").addEventListener("click", function(inEvent)
|
|
|
|
|
{
|
2021-08-04 14:38:48 -04:00
|
|
|
var domHtml = document.querySelector("html");
|
|
|
|
|
var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
|
2021-08-04 16:00:10 -04:00
|
|
|
var posStart = domHtml.scrollTop;
|
2021-08-04 14:38:48 -04:00
|
|
|
var posRange = domGoal.getBoundingClientRect().top;
|
|
|
|
|
var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
|
|
|
|
|
var evtDone = function(){ Spy.Resume(); };
|
|
|
|
|
|
|
|
|
|
Spy.Suspend();
|
|
|
|
|
Time.Add( JobDuration(0.4, evtTick, evtDone) );
|
2021-08-04 13:12:35 -04:00
|
|
|
inEvent.preventDefault();
|
|
|
|
|
});
|
|
|
|
|
|
2021-08-16 17:06:07 -04:00
|
|
|
|
|
|
|
|
|
2021-09-01 11:59:49 -04:00
|
|
|
var pages = $("[swing]");
|
|
|
|
|
var table = $(".Shot")[0];
|
|
|
|
|
function bookOpen(index)
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
|
|
|
|
|
};
|
2021-09-01 11:59:49 -04:00
|
|
|
function bookClose()
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
pages.forEach(p=>p.setAttribute("swing", "closed"));
|
|
|
|
|
};
|
2021-09-01 11:59:49 -04:00
|
|
|
function bookPose(inPanel)
|
2021-08-16 17:06:07 -04:00
|
|
|
{
|
|
|
|
|
table.setAttribute("show", inPanel);
|
|
|
|
|
bookClose();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Video.Init();
|
|
|
|
|
|
|
|
|
|
// create and initialize youtube videos...
|
|
|
|
|
var playerPromo, playerInterview;
|
|
|
|
|
playerPromo = Video.Player('PlayerPromo', 'c_qQHI0rQ6c');
|
|
|
|
|
playerInterview = Video.Player('PlayerInterview', 'wEkSWh2_yM4');
|
|
|
|
|
|
|
|
|
|
|
2021-08-04 13:12:35 -04:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
