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-09-02 17:56:45 -04:00
padding:66px;
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
}
2021-09-02 17:56:45 -04:00
.copy
{
}
.copy--narrow
{
max-width:600px;
margin:0 auto;
text-align:center;
}
.copy--large
{
font-size:22px;
line-height:33px;
}
.copy--isolate
{
padding:20px;
box-sizing: border-box;
}
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-02 17:56:45 -04:00
< style >
#intro
{
background:black;
max-width:100%;
}
#intro svg
{
display:block;
width:100%;
max-width:280px;
margin:0 auto;
}
#intro svg path
{
fill:white;
}
< / style >
< section id = "intro" style = "background:black;" >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 295.7 845.5 107.3" >
< path d = "M12.2 343.3h7v-38.2H9v5.6H0v-13.9h47.6v13.9h-9v-5.6h-10v38.2h7v8.3H12.2V343.3z" > < / path >
< path d = "M59.1 343.3h6.3v-38.2h-6.3v-8.3h21.2c12.5 0 21.5 5.6 21.5 16.6 0 7-4.2 12.5-10.4 14.9l8.3 14.9h6.3v8.3H93.1L82 330.7c-1 0-2.1 0-3.4 0 -1.7 0-3.4 0-4.6 0v12.5h7v8.3H59.1V343.3zM92.1 313.8c0-5.9-4.9-8.7-12.5-8.7h-5.2v17.8c1 0 2.4 0 5.2 0C87.2 322.9 92.1 319.3 92.1 313.8z" > < / path >
< path d = "M119.2 331.5v-26.4h-5.9v-8.3h21.9v8.3h-6.6v26.1c0 8.3 4.2 12.9 11.2 12.9s11.5-4.2 11.5-12.5v-26.4h-6.6v-8.3h21.9v8.3h-5.9v26.4c0 14.3-8.3 21.2-20.5 21.2C127.6 352.7 119.2 345.8 119.2 331.5z" > < / path >
< path d = "M187.4 343.3h7v-38.2h-10v5.6h-9v-13.9h47.6v13.9h-9v-5.6h-10v38.2h7v8.3h-23.3v-8.3H187.4z" > < / path >
< path d = "M233.9 343.3h6.3v-38.2h-6.3v-8.3h22.6v8.3h-7v14.6h25.4v-14.6h-7v-8.3h22.6v8.3h-6.3v38.2h6.3v8.3h-22.6v-8.3h7V328h-25.4v15.3h7v8.3h-22.6L233.9 343.3 233.9 343.3z" > < / path >
< path d = "M307 347.5h7.3v-46.6H307v-4.2h38.5v9.4H341V301H319v21.5h18.1v4.2h-18.5v20.9h8v4.2h-19.8v-4.3H307z" > < / path >
< path d = "M355.3 324.2c0-16 11.9-28.5 27.8-28.5 15.6 0 27.5 12.5 27.5 28.5 0 16-11.9 28.5-27.8 28.5C367.1 352.7 355.3 340.2 355.3 324.2zM405.7 324.2c0-13.6-9.4-24.3-22.9-24.3 -13.6 0-22.9 10.8-22.9 23.9 0 13.6 9.4 24.3 22.9 24.3C396.3 348.2 405.7 337.8 405.7 324.2z" > < / path >
< path d = "M421.7 347.5h7.3v-46.6h-7.3v-4.2h20.5c11.9 0 19.1 6.3 19.1 15.6 0 7.6-5.2 12.9-12.5 14.9l12.9 20.2h6.6v4.2h-9.4l-14.6-23.3c-1 0-2.1 0-3.1 0 -2.4 0-5.2 0-7.3 0v19.1h7.3v4.2h-19.5v-4.1H421.7zM456.8 312.4c0-7.3-5.9-11.5-14.9-11.5h-8.3v23.3c2.1 0 4.9 0 7.3 0C450.2 324.6 456.8 320.4 456.8 312.4z" > < / path >
< path d = "M481.9 345.1h6.6v-41.7h-6.6v-6.6h21.5v6.6h-7.3v41.4h17.3v-8h7.3v14.9h-38.9V345.1z" > < / path >
< path d = "M534.3 345.1h7.3v-41.7h-7.3v-6.6h21.9v6.6h-7v41.4h7v6.6h-21.9V345.1z" > < / path >
< path d = "M569.4 345.1h6.6v-41.7h-6.6v-6.6h40v11.2h-7.3v-4.6h-18.5v18.1h17v6.6h-17v17h7.3v6.6h-21.5V345.1z" > < / path >
< path d = "M618.8 345.1h6.6v-41.7h-6.6v-6.6h40.4v11.2h-7.3v-4.6H633v17h17.3v6.6H633v18.1h18.8v-4.6h7.3v11.2h-40.3V345.1z" > < / path >
< path d = "M665.1 303.4L665.1 303.4c0-3.4 2.7-6.6 6.6-6.6 3.4 0 6.3 2.7 6.3 6.3l0 0c0 3.4-2.7 6.6-6.6 6.6C667.8 309.7 665.1 306.8 665.1 303.4zM677.1 303.4L677.1 303.4c0-3.1-2.4-5.9-5.9-5.9 -3.1 0-5.9 2.7-5.9 5.9l0 0c0 3.1 2.4 5.9 5.9 5.9C674.7 309 677.1 306.5 677.1 303.4zM668.8 299.5h3.1c1 0 1.7 0.3 2.1 0.7 0.3 0.3 0.7 0.7 0.7 1.4l0 0c0 1-0.7 1.7-1.4 2.1l1.7 2.4h-1.4l-1.7-2.4 0 0h-1.4v2.4h-1.4v-6.6h-0.3V299.5zM672 303c0.7 0 1.4-0.3 1.4-1l0 0c0-0.7-0.3-1-1.4-1h-1.7v2.1C670.2 303 672 303 672 303z" > < / path >
< / svg >
2021-09-01 11:59:49 -04:00
< / 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-09-02 17:56:45 -04:00
< p class = "copy copy--large copy--narrow copy--isolate" >
Enhance your study of God’ ’
2021-08-04 16:00:10 -04:00
< / p >
2021-10-01 17:34:51 -04:00
< div class = "copy copy--narrow" >
< a class = "CTA" href = "https://truthforlife.org/store/buy/" > Buy Now< / a >
< br >
< span > $10.00 (free shipping)< / span >
< / div >
2021-08-16 17:06:07 -04:00
2021-09-02 17:56:45 -04:00
< style >
2021-09-02 11:33:21 -04:00
2021-09-02 17:56:45 -04:00
.frame
{
position:relative;
padding:20px;
border-bottom: none;
box-sizing:border-box;
}
.frame__image
{
position:relative;
z-index:20;
margin-bottom:19px;
}
.frame__bar
{
position:relative;
bottom:0;
left:0;
width:100%;
height:44px;
overflow:hidden;
transform-origin: center 22.5px;
}
.frame__bar span
{
display: block;
position: absolute;
top: -10.5px;
left: 50%;
width: 20px;
height: 20px;
border: 5px solid #000;
border-right-color: transparent;
border-bottom-color: transparent;
transform: translate(-50%, 20px) rotate(45deg);
transition: left 0.4s;
}
.frame__bar span::before, .frame__bar span::after
{
content: " ";
display: block;
position: absolute;
width: 1000px;
height:0px;
border-top: 5px solid black;
transform:rotate(-45deg);
}
.frame__bar span::before
{
bottom: -0.5px;
right: 20px;
transform-origin: right bottom;
}
.frame__bar span::after
{
top: -4px;
left: 17px;
transform-origin: left top;
}
.frame__bar--down
{
transform: scaleY(-1);
}
.frame__bar--up
{
transform: scaleY(1);
}
.frame__bar--1-3 span
{
left:16.6%;
}
.frame__bar--2-3 span
{
left:50%;
}
.frame__bar--3-3 span
{
left:83%;
}
.frame__bracket
{
position:relative;
display:block;
width:100%;
height:0px;
top:-200px;
z-index:10;
border-top:5px solid black;
}
.frame__bracket::before, .frame__bracket::after
{
content:" ";
display:block;
width:15px;
height:171px;
position:absolute;
top:-5px;
border:5px solid black;
}
.frame__bracket::before
{
left:-20px;
}
.frame__bracket::after
{
right:-20px;
}
.frame__button
{
position:relative;
display:block;
float:left;
padding:5px 0px 5px 0px;
box-sizing: border-box;
width:33.3%;
text-align:center;
text-transform: uppercase;
cursor:pointer;
}
.frame__button:hover::before
{
content: " ";
display: block;
width: 7px;
height: 7px;
background: black;
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-5px) rotate(45deg);
transition: top 0.4s, bottom 0.4s;
}
.frame__button--upper:hover::before
{
top:auto;
bottom:-9px;
}
.frame__button[data-frame-active='true']:hover::before
{
bottom:auto;
top: -30px;
}
.frame__button--upper[data-frame-active='true']:hover::before
{
bottom: -26px;
top:auto;
}
< / style >
2021-09-02 11:33:21 -04:00
< div class = "frame" >
< div class = "frame__image" >
< 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 >
2021-08-16 17:06:07 -04:00
2021-09-02 11:33:21 -04:00
< 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 >
2021-08-16 17:06:07 -04:00
< / div >
2021-09-02 11:33:21 -04:00
< div class = "frame__button frame__button--upper" onclick = "bookPose('cover'); bookClose();" > Cover< / div > < div class = "frame__button frame__button--upper" onclick = "bookPose('spine'); bookClose();" > Spine < / div > < div class = "frame__button frame__button--upper" onclick = "bookPose('back'); bookClose();" > Back< / div >
< div class = "frame__bar" > < span > < / span > < / div >
< div class = "frame__bracket" > < / div >
< div class = "frame__button" onclick = "bookPose('pages'); bookOpen(4);" > Intro< / div > < div class = "frame__button" onclick = "bookPose('pages'); bookOpen(5);" > 1 & 2< / div > < div class = "frame__button" onclick = "bookPose('pages'); bookOpen(6);" > 3 & 4< / div >
2021-08-16 17:06:07 -04:00
< / div >
2021-09-02 11:33:21 -04:00
< script >
function frame__setup(inFrame)
{
var buttons = inFrame.querySelectorAll(".frame__button");
var bar = inFrame.querySelector(".frame__bar");
var active = false;
function activate(inButton)
{
var index = parseInt(inButton.getAttribute("data-frame-index"));
var classX = "frame__bar--" + ((index % 3)+1) + "-3";
var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
bar.setAttribute("class", "frame__bar " + classX + " " + classY);
if(active)
{
active.setAttribute("data-frame-active", "false");
}
active = inButton;
inButton.setAttribute("data-frame-active", "true");
}
for(var i=0; i< buttons.length ; i + + )
{
buttons[i].setAttribute("data-frame-index", i);
buttons[i].setAttribute("data-frame-active", "false");
buttons[i].addEventListener("click", function(){ activate(this); });
}
activate( buttons[0] );
}
frame__setup(document.querySelector(".frame"));
< / script >
2021-09-02 17:56:45 -04:00
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-09-02 17:56:45 -04:00
< p class = "copy copy--large copy--narrow copy--isolate" >
Each daily reading begins with a passage from Scripture and is followed by a commentary written by Alistair. The commentary explains God’ ’
2021-08-04 16:00:10 -04:00
< / 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 >
2021-09-02 11:33:21 -04:00
2021-08-04 13:12:35 -04:00
< / html >
