@font-face { font-family: "Univers Regular"; src: url("/fonts/UniversRegular.ttf"); }

:root { --logosrc: url(../img/TT_logo_icon.svg); --blue: rgba(22, 169, 238, 1); --orange: rgba(243, 154, 0, 1); --green: rgba(69, 184, 23, 1); --pink: rgba(241, 44, 169, 1); --gray: rgba(102, 102, 102, 1); --gray2: rgba(117, 117, 117, 1); --gray3: rgba(55, 55, 55, 1); --gray4: #AAA6A6; --bluepale: rgba(22, 169, 238, .1); --orangepale: rgba(243, 154, 0, .1); --greenpale: rgba(69, 184, 23, .1); --pinkpale: rgba(241, 44, 169, .1); --graypale: rgba(102, 102, 102, .1); --logoshoverbg: #f8f8f8; --logosborder: #eee; --bright: #fff; --alwaysbright: #fff; --dark: #000; --slidebg: #fff; --prh2colour: var(--gray3); --langbox: #f0f0f0; --langboxhover: #000; --langboxborder: #ccc; --langshadow: rgba(0,0,0,.2); --privacyinnerlinks: #333; --titleunderline: #d6d6d6; --bully: 0; --prafd: column; --prafdin: column; --prfd: column; --impulsesize: 10px; --llength: calc(100% / 4); --layoutmaxwidth: calc(100% - 2rem); --navdivmw: calc(60% + 1rem); --navulgap: 1rem; --aar: -65px; --libmop: calc(-1 * calc(var(--impulsesize) / 2)); --diverl: calc(calc(100% - var(--llength) + 13px)); --prma: 2rem; --menumw: 100%; }

@media (min-width: 560px) { :root { --prafdin: row; } }

@media (min-width: 900px) { :root { --prma: 1rem; --prfd: row; --menumw: 236px; } }

.show { display: block; }

header:before, header:after { position: absolute; }

nav li, header { position: relative; }

body:before { position: fixed; }

.footer-container .copyright { color: #707070; }

nav div:after, nav a:before, strong:before, strong:after, p:before, p:after, li:before, li:after, h1:before, h1:after, h2:before, h2:after { content: ''; }

.hide { display: none; }

.presentation { margin: var(--prma) auto; width: 100%; flex-direction: var(--prfd); gap: clamp(1.5rem, 4vw, 4rem); }

.presentation h2 { font-size: clamp(1.5rem, 3.9vw, 2.5rem); color: var(--prh2colour); line-height: 1.2; }

.presentation p { font-size: clamp(0.9375rem, 4.65vw, 1.25rem); }

.presentation p.regular { color: var(--gray2); }

.presentation p a { font-size: inherit; }

.presentation section, .presentation article { flex: 1; }

.presentation article { margin: auto; max-width: var(--prarmw); }

.presentation article * + * { margin-top: 1.5rem; }

.presentation aside { margin-top: var(--preasimt); display: flex; gap: 1rem; flex-direction: var(--prafdin); }

.tt-home .presentation aside { flex-direction: var(--prafd); }

.btn { border-radius: 4px; height: 54px; padding: 0 24px; justify-content: center; align-items: center; font-size: clamp(0.75rem, 3.7vw, 1.125rem); white-space: nowrap; border: 1.25px solid var(--btnborder); transition: all .2s ease-in-out; }

.btn-bg { background: var(--btnbg); box-shadow: 0px 5px 9px -5px var(--btnboxshadow); color: var(--alwaysbright); --btnhoverbg: var(--btnbghover); --btnhovercolour: var(--btnbgcolourhover); }

.btn-transparent { color: var(--btntranspcolour); --btnhoverbg: var(--btntranspbghover); --btnhovercolour: var(--btntranspcolourhover); }

.btn:hover { transition: all .2s ease-in-out; background: var(--btnhoverbg); color: var(--btnhovercolour); }

.arrow-simple { display: inline-block; vertical-align: middle; width: 6px; height: 6px; }

.arrow-simple-right { border: solid var(--basiccolour); border-width: 2px 2px 0 0; transform: rotate(45deg); }

.blue { --basiccolour: var(--blue); --basicc: var(--blue); }

.blue .btn { --btnbg: linear-gradient(95.96deg, #55C7FD -11.21%, #098BEB 102.54%); --btnbghover: linear-gradient(95.96deg, #098BEB 0%, #55C7FD 100%); --btnborder: var(--blue); --btnbgcolourhover: var(--alwaysbright); --btntranspcolour: var(--blue); --btntranspbghover: color-mix(in lab, var(--blue) 80%, var(--bright)); --btntranspcolourhover: var(--bright); --btnboxshadow: var(--bluepale); }

.blue a:not(.button):not(.btn) { color: var(--blue); }

.blue .pink a:not(.button):not(.btn), .blue .pink .coloured:not(.btn) { color: var(--pink); }

.blue .orange a:not(.button):not(.btn), .blue .orange .coloured:not(.btn) { color: var(--orange); }

.blue .green a:not(.button):not(.btn), .blue .green .coloured:not(.btn) { color: var(--green); }

.blue .gray a:not(.button):not(.btn), .blue .gray .coloured:not(.btn) { color: var(--gray); }

.blue .button, .blue .bulleted_lists li:before, .blue .bulleted_ul li:before { background-color: #00b4ff; }

.blue .button:hover, .blue .bulleted_lists li:before:hover, .blue .bulleted_ul li:before:hover { background-color: #33c3ff; }

.blue .hashTabber-nav li a { border-color: var(--blue); }

.blue_links:hover { color: #00b4ff; }

.blue.privacy a { color: var(--privacyinnerlinks); }

.orange { --basiccolour: var(--orange); --basicc: var(--orange); }

.orange a:not(.button):not(.btn) { color: var(--orange); }

.orange .pink a:not(.button):not(.btn), .orange .pink .coloured:not(.btn) { color: var(--pink); }

.orange .green a:not(.button):not(.btn), .orange .green .coloured:not(.btn) { color: var(--green); }

.orange .blue a:not(.button):not(.btn), .orange .blue .coloured:not(.btn) { color: var(--blue); }

.orange .gray a:not(.button):not(.btn), .orange .gray .coloured:not(.btn) { color: var(--gray); }

.orange .button, .orange .bulleted_lists li:before, .orange .bulleted_ul li:before { background-color: #ffa800; }

.orange .button:hover, .orange .bulleted_lists li:before:hover, .orange .bulleted_ul li:before:hover { background-color: #ffb933; }

.orange .hashTabber-nav li a { border-color: var(--orange); }

.orange_links:hover { color: #ffcb66; }

.green { --basiccolour: var(--green); --basicc: var(--green); }

.green .btn { --btnbg: var(--green); --btnbghover: color-mix(in lab, var(--green) 80%, var(--bright)); --btnborder: var(--green); --btnbgcolourhover: var(--alwaysbright); --btntranspcolour: var(--green); --btntranspbghover: color-mix(in lab, var(--green) 80%, var(--bright)); --btntranspcolourhover: var(--bright); --btnboxshadow: var(--bluegreen); }

.green a:not(.button):not(.btn), .green .presentation article a { color: var(--green); }

.green .pink a:not(.button):not(.btn), .green .pink .coloured:not(.btn) { color: var(--pink); }

.green .orange a:not(.button):not(.btn), .green .orange .coloured:not(.btn) { color: var(--orange); }

.green .blue a:not(.button):not(.btn), .green .blue .coloured:not(.btn) { color: var(--blue); }

.green .gray a:not(.button):not(.btn), .green .gray .coloured:not(.btn) { color: var(--gray); }

.green .button, .green .bulleted_lists li:before, .green .bulleted_ul li:before { background-color: #56b600; }

.green .button:hover, .green .bulleted_lists li:before:hover, .green .bulleted_ul li:before:hover { background-color: #6ee900; }

.green .hashTabber-nav li a { border-color: var(--green); }

.green_links:hover { color: #56b600; }

.pink { --basiccolour: var(--pink); --basicc: var(--pink); }

.pink a:not(.button):not(.btn) { color: var(--pink); }

.pink .green a:not(.button):not(.btn), .pink .green .coloured:not(.btn) { color: var(--green); }

.pink .orange a:not(.button):not(.btn), .pink .orange .coloured:not(.btn) { color: var(--orange); }

.pink .blue a:not(.button):not(.btn), .pink .blue .coloured:not(.btn) { color: var(--blue); }

.pink .gray a:not(.button):not(.btn), .pink .gray .coloured:not(.btn) { color: var(--gray); }

.pink .hashTabber-nav li.active a { color: #ec4cb5; }

.pink .hashTabber-nav li a { border-color: var(--pink); }

.pink .button { background-color: #e71ea2; color: #fff; }

.pink .button:hover { background-color: #ec4cb5; }

.pink_links { color: var(--pink); }

.pink_links:hover { color: #f17ac8; }

a.button:hover { color: #fff; }

.bw * { filter: grayscale(1); color: #000; font-weight: 500; }

.bw * a, .bw * span { font-weight: 600; }

menu .orange:not(.button):not(.btn) { color: var(--orange); }

menu .green:not(.button):not(.btn) { color: var(--green); }

menu .blue:not(.button):not(.btn) { color: var(--blue); }

menu .pink:not(.button):not(.btn) { color: var(--pink); }

menu .gray:not(.button):not(.btn) { color: var(--gray); }

@keyframes impulse { 0% { transform: translate(0, -50%) scale(1); }
  100% { transform: translate(var(--impulsetranslate), -50%) scale(1.5); } }

@keyframes smallimpulse { 0% { transform: scale(0);
    opacity: 1; }
  100% { transform: scale(1);
    opacity: .2; } }

@keyframes pulsar { 0% { opacity: .7; }
  100% { opacity: 1; } }

@keyframes unfold { from { opacity: 0; }
  to { opacity: 1; } }

* { margin: 0; padding: 0; }

html, body { height: 100%; }

html { -webkit-text-size-adjust: 100%; }

body { font-family: "myriad-pro", sans-serif; font-size: 100%; color: var(--genc); }

body:before { content: ''; }

a { background: transparent; text-decoration: none; cursor: pointer; }

ul, li { list-style: none; }

img { max-width: 100%; height: auto; border: 0; }

::-moz-selection { color: #fff; background: #333; }

::-moz-selection, ::selection { color: #fff; background: #333; }

h1, h2, h3, h4, h5 { font-weight: 300; }

b { font-weight: 400; }

figcaption { position: relative; z-index: 1; }

.df { display: flex; }

.dg { display: grid; }

.gap-1 { gap: 1rem; }

.gap-2 { gap: 2rem; }

.mb-1 { margin-block: 1rem; }

html, body { height: 100%; }

header { margin: 0 auto; max-width: calc(100% - 20px); padding-top: 110px; text-align: center; }

header:before { background: var(--logosrc) center center no-repeat; top: 24px; }

header:before, header:after { content: ''; height: 90px; width: 90px; background-size: contain; left: 50%; transform: translateX(-50%); }

footer { padding-bottom: 4em; height: auto; }

.main_title { font-size: clamp(1.5rem, 4vw, 2.625rem); margin-bottom: 1rem; }

.main_title span { color: #00b4ff; }

.main_subtitle { font-size: clamp(1rem, 2vw, 1.75rem); color: var(--gray2); font-weight: 300; }

nav { max-width: 100%; margin: auto; overflow: hidden; }

nav h1, nav h2, nav a { color: var(--leadcolour); }

nav .blue { --leadcolour: var(--blue); --palecolour: var(--bluepale); }

nav .orange { --leadcolour: var(--orange); --palecolour: var(--orangepale); }

nav .green { --leadcolour: var(--green); --palecolour: var(--greenpale); }

nav .gray { --leadcolour: var(--green); --palecolour: var(--greenpale); }

nav .pink { --leadcolour: var(--pink); --palecolour: var(--pinkpale); }

nav ul { flex-direction: column; margin-block: 3rem; gap: var(--navulgap); }

nav li { max-width: var(--layoutmaxwidth); margin: auto; align-items: center; width: 100%; min-height: clamp(80px, 40vh, 100px); }

nav li:before, nav li:after { position: absolute; top: 50%; border-radius: 50%; }

nav li:before { height: var(--impulsesize); width: var(--impulsesize); background-color: var(--leadcolour); margin-top: var(--libmop); right: -20px; }

nav li:after { width: calc(100% / 8); min-width: 100px; right: var(--aar); background-color: var(--palecolour); aspect-ratio: 1; top: 50%; transform: translateY(-50%); }

nav li a:hover:before { animation: 0.1s 0s infinite normal pulsar; }

nav li a:hover div:after { animation: 0.6s 0s infinite normal impulse; }

nav a { height: 100%; width: 100%; z-index: 1; font-size: clamp(1.375rem, 2.75vw, 1.8125rem); position: relative; }

nav a:before { background-color: var(--leadcolour); width: var(--llength); height: 1px; margin-top: -.5px; right: -10px; position: absolute; top: 50%; }

nav a span { display: flex; }

nav a span:nth-of-type(1) { text-transform: uppercase; }

nav a span:nth-of-type(2) { font-size: clamp(0.8125rem, 1.5vw, 0.9375rem); color: var(--gray); font-weight: 300; }

nav div { max-width: var(--navdivmw); }

nav div:after { background-color: var(--leadcolour); position: absolute; border-radius: 50%; width: 5px; height: 5px; top: 50%; transform: translate(-50%, -50%); left: var(--diverl); }

@media (min-width: 560px) { nav { --navdivmw: calc( calc( 100% / 2 ) - calc( var(--llength) + .75rem ) ); --navulgap: 0; --llength: calc(100% / 7); --libmop: 0; } nav a { position: absolute; } nav a:before { right: auto; left: 50%; } nav li div { position: absolute; top: 50%; transform: translateY(-50%); } nav li:nth-of-type(odd) a { --impulsetranslate: calc(-1 * var(--llength)); } nav li:nth-of-type(odd) div { right: 0; } nav li:nth-of-type(odd) div:after { --diverl: -10px; } nav li:nth-of-type(even) a { --impulsetranslate: var(--llength); } nav li:nth-of-type(even) a:before { margin-left: calc(var(--llength) * -1); } nav li:nth-of-type(even) div { text-align: right; } nav li:nth-of-type(even) div:after { left: auto; right: -1rem; } nav li:nth-of-type(even) div span { justify-content: flex-end; } nav li:before, nav li:after { left: 50%; transform: translate(-50%, -50%); } nav li:after { --aar: 0; } }

@media (min-width: 480px) { :root { --prafd: row; } }

@media (min-width: 900px) { :root { --layoutmaxwidth: 880px; --prafd: column; } header { padding-block: 160px 2rem; } header:before { content: ''; height: 140px; width: 140px; } }

@media (max-width: 779px) { footer span { display: block; } footer span.mid-dot { display: none; } .footer-container.blue { line-height: 2.5; } .footer-container.blue > div { width: calc(100% - 10px); } }

.tt-home { --prarmw: 70ch; }

.tt-home .presentation { width: calc(100% - 2rem); max-width: var(--layoutmaxwidth); align-items: center; }

@media (prefers-color-scheme: dark) { :root { --logosrc: url(../img/TT_logo_icon-dark.svg); --gray: rgba(197, 197, 197, 1); --gray2: rgba(184, 184, 184, 1); --slidebg: #000; --impulsescale: 13; --langbox: #333; --langboxhover: #fff; --langboxborder: #555; --langshadow: rgba(255,255,255,.4); --prh2colour: var(--bright); --alwaysbright: #fff; } body { background-color: #000; } nav li:after { --palecolour: transparent; border: 3px solid var(--leadcolour); } .main_title span { text-shadow: 0px 0px 8px #00b4ff; filter: drop-shadow(0 0 8px #00b4ff); } }

.footer-container { text-align: center; padding: 2em; }

.footer-container * { font-weight: 400; }

.footer-container a { display: inline; color: var(--basiccolour); }

.footer-container a:after { display: none; }

.footer-container div, .footer-container a { font-size: 12.3076923077px; }

.footer-container div { margin: auto; }

.footer-container.blue a { text-indent: 0; }
/*# sourceMappingURL=landing.css.map */