/* TNS 365 logo, pure CSS. Official embed: https://www.tns365.com/media-pack/
Markup:
Colour: add tns--reversed (dark backgrounds), tns--white or tns--black.
Motion: add one of tns--draw, tns--pulse, tns--spin, tns--orbit, tns--flip, tns--wave. */
@font-face{font-family:'Mukta';font-style:normal;font-weight:800;font-display:block;src:url(https://www.tns365.com/media-pack/assets/fonts/Mukta-800.woff2) format('woff2')}
/* ---------------------------------------------------------------------------
TNS 365 logo — pure CSS. No SVG, no image, no canvas.
Everything is expressed in "logo units": the artwork is 731 x 588 units,
matching the source PNG's own pixel grid, so every number below is a real
measurement taken off the original. The container sets font-size to
(width / 731), which makes 1em == 1 logo unit for every child. Change
--tns-w and the whole thing scales exactly.
Layers, back to front:
.tns__rings masking box that knocks the wordmark band out of both rings
.tns__ring blue outer ring Ø508.1u, 24u stroke
.tns__halo grey inner ring Ø424.4u, 24u stroke
.tns__ping animation-only clone of the outer ring
.tns__word TNS365, Mukta ExtraBold at 214.4u, tracking -4.6u
--------------------------------------------------------------------------- */
@property --sweep {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.tns {
--tns-w: 520px;
--u: calc(var(--tns-w) / 731);
--tns-blue: #009cff;
--tns-ink: #000000;
--tns-halo: #f0efef;
position: relative;
width: var(--tns-w);
height: calc(588 * var(--u));
font-size: var(--u); /* 1em = 1 logo unit */
-webkit-user-select: none;
user-select: none;
}
/* Circle fitted to the original by least squares: centre (374, 289), outer
radius 254.07 — note it is NOT centred on the artboard, it sits 8.5u right
of the wordmark's own centre. Residual on the fit is 0.2u, so it really is
a circle, not an ellipse.
The wordmark sits in a clear band across the middle: both rings are cut away
between y=192.5 and y=387.5, i.e. 157.6u..352.6u inside this box. */
.tns__rings {
position: absolute;
left: 119.92em;
top: 34.90em;
width: 509.2em;
height: 509.2em;
--band: linear-gradient(
to bottom,
#000 0 157.6em,
transparent 157.6em 352.6em,
#000 352.6em 100%
);
-webkit-mask-image: var(--band);
mask-image: var(--band);
}
.tns__ring,
.tns__halo,
.tns__ping {
position: absolute;
box-sizing: border-box;
border-radius: 50%;
}
.tns__ring,
.tns__ping {
inset: 0;
border: 24em solid var(--tns-blue);
}
/* The halo is its own circle, fitted separately: centre (374, 290) — one unit
lower than the blue one — outer radius 212.21. */
.tns__halo {
left: 41.80em;
top: 42.82em;
width: 425.6em;
height: 425.6em;
border: 24em solid var(--tns-halo);
}
/* Hook for the draw-on animation; inert until a modifier sets --ring-mask. */
.tns__ring {
-webkit-mask-image: var(--ring-mask, none);
mask-image: var(--ring-mask, none);
}
.tns__ping {
opacity: 0;
}
.tns__word {
position: absolute;
left: calc(3 * var(--u));
width: 100%;
/* em would resolve against this element's own 216u font-size, so the
offsets here are written against the unit directly. */
top: calc(190.3 * var(--u));
text-align: center;
font-family: 'Mukta', system-ui, sans-serif;
font-weight: 800;
font-size: calc(214.4 * var(--u));
line-height: 1;
letter-spacing: calc(-4.6 * var(--u));
color: var(--tns-ink);
white-space: nowrap;
}
/* Each glyph gets its own box purely so it can be animated on its own, and an
index the staggered animations read as a delay multiplier. Glyphs 4-6 are
the blue ones. */
.tns__word i {
display: inline-block;
font-style: normal;
}
.tns__word i:nth-child(1) { --i: 0; }
.tns__word i:nth-child(2) { --i: 1; }
.tns__word i:nth-child(3) { --i: 2; }
.tns__word i:nth-child(4) { --i: 3; color: var(--tns-blue); }
.tns__word i:nth-child(5) { --i: 4; color: var(--tns-blue); }
.tns__word i:nth-child(6) { --i: 5; color: var(--tns-blue); }
/* --------------------------------------------------------------------------
Animations. Each is a modifier class on .tns, so any of them can be added,
removed or combined at runtime without touching the artwork.
-------------------------------------------------------------------------- */
/* draw — the ring is stroked on clockwise from 12 o'clock, then the six
glyphs rise into place in reading order. */
.tns--draw .tns__ring {
--ring-mask: conic-gradient(from -90deg, #000 var(--sweep), transparent 0);
animation: tns-sweep 900ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
.tns--draw .tns__halo {
animation: tns-halo-in 700ms ease-out 260ms both;
}
.tns--draw .tns__word i {
animation: tns-rise 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(420ms + var(--i) * 55ms);
}
@keyframes tns-sweep {
from { --sweep: 0deg; }
to { --sweep: 360deg; }
}
@keyframes tns-halo-in {
from { opacity: 0; transform: scale(0.82); }
to { opacity: 1; transform: none; }
}
@keyframes tns-rise {
from { opacity: 0; transform: translateY(0.16em); }
to { opacity: 1; transform: none; }
}
/* pulse — a ring detaches and expands outward, like a radar return. */
.tns--pulse .tns__ping {
animation: tns-ping 1600ms cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.tns--pulse .tns__word i:nth-child(n+4) {
animation: tns-tick 1600ms ease-in-out infinite;
}
@keyframes tns-ping {
0% { opacity: 0.55; transform: scale(1); }
70% { opacity: 0; transform: scale(1.22); }
100% { opacity: 0; transform: scale(1.22); }
}
@keyframes tns-tick {
0%, 60%, 100% { opacity: 1; }
30% { opacity: 0.45; }
}
/* spin — the outer ring becomes an indeterminate loader: a 90 degree gap
travels round it. Useful as a real waiting state in the apps. */
.tns--spin .tns__ring {
--ring-mask: conic-gradient(from -90deg, #000 0 270deg, transparent 270deg 360deg);
animation: tns-rotate 1200ms linear infinite;
}
@keyframes tns-rotate {
to { transform: rotate(360deg); }
}
/* orbit — the ring drops back to a pale track and a live arc runs round it.
The arc is .tns__ping, which sits above the ring in the stack. */
.tns--orbit .tns__ring {
border-color: var(--tns-track, #cfe9ff);
}
.tns--orbit .tns__ping {
opacity: 1;
-webkit-mask-image: conic-gradient(from -90deg, #000 0 8deg, rgba(0,0,0,.25) 34deg, transparent 62deg);
mask-image: conic-gradient(from -90deg, #000 0 8deg, rgba(0,0,0,.25) 34deg, transparent 62deg);
animation: tns-rotate 2200ms linear infinite;
}
/* flip — the digits turn over one after another, like a departure board. */
.tns--flip .tns__word {
perspective: calc(900 * var(--u));
}
.tns--flip .tns__word i:nth-child(n+4) {
animation: tns-flip 2200ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-delay: calc((var(--i) - 3) * 110ms);
}
@keyframes tns-flip {
0% { transform: rotateX(0deg); }
32%, 100% { transform: rotateX(-360deg); }
}
/* wave — a slow swell travels left to right through all six glyphs. */
.tns--wave .tns__word i {
animation: tns-wave 1800ms ease-in-out infinite;
animation-delay: calc(var(--i) * 90ms);
}
@keyframes tns-wave {
0%, 55%, 100% { transform: translateY(0); }
22% { transform: translateY(-0.11em); }
}
@media (prefers-reduced-motion: reduce) {
.tns *,
.tns *::before,
.tns *::after {
animation: none !important;
}
.tns .tns__ping { opacity: 0; }
}
/* Colour variants */
.tns--reversed{--tns-ink:#fff;--tns-halo:rgba(255,255,255,.14);--tns-track:rgba(0,156,255,.28)}
.tns--white{--tns-ink:#fff;--tns-blue:#fff;--tns-halo:rgba(255,255,255,.22);--tns-track:rgba(255,255,255,.3)}
.tns--black{--tns-ink:#000;--tns-blue:#000;--tns-halo:rgba(0,0,0,.1);--tns-track:rgba(0,0,0,.15)}