@font-face {
font-family: "Bricolage Grotesque";
src: url(//tontinons.online/wp-content/themes/tontinons/assets/fonts/bricolage-grotesque.woff2) format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url(//tontinons.online/wp-content/themes/tontinons/assets/fonts/figtree.woff2) format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Caveat";
src: url(//tontinons.online/wp-content/themes/tontinons/assets/fonts/caveat-500.woff2) format("woff2");
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Caveat";
src: url(//tontinons.online/wp-content/themes/tontinons/assets/fonts/caveat-700.woff2) format("woff2");
font-weight: 700;
font-display: swap;
}
:root {
--tn-primary: #1B5E3F;
--tn-night: #0F2E21;
--tn-accent: #E2B457;
--tn-alert: #A3300F;
--tn-tint: #E9F1EC;
--tn-ink: #14181A;
--tn-muted: #4A5257;
--tn-line: #D9DDDE;
--tn-bg: #FAFAF8;
--tn-surface: #FFFFFF;
--tn-ochre: #8A5800;
--tn-sand: #F6ECD6;
--tn-paper: #F3EEDF;
--tn-pen: #26324A;
--tn-primary-soft: color-mix(in srgb, var(--tn-primary) 12%, #FFFFFF);
--tn-font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--tn-font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
--tn-font-hand: "Caveat", "Segoe Print", cursive;
--tn-text-base: 1.0625rem;
--tn-radius: 24px;
--tn-radius-sm: 14px;
--tn-shadow: 0 30px 60px -30px rgba(15, 46, 33, .38);
--tn-shadow-sm: 0 18px 36px -20px rgba(15, 46, 33, .35);
--tn-gutter: clamp(16px, 4vw, 32px);
--tn-section: clamp(72px, 10vw, 128px);
--tn-header-h: 72px;
--tn-focus: var(--tn-primary);
--tn-ease: cubic-bezier(.2, .7, .2, 1);
} *,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--tn-header-h) + 16px);
}
body {
margin: 0;
background: var(--tn-bg);
color: var(--tn-ink);
font-family: var(--tn-font-body);
font-size: var(--tn-text-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
img,
svg,
video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--tn-font-heading);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 .5em;
text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--tn-primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tn-night); }
:focus-visible {
outline: 3px solid var(--tn-focus);
outline-offset: 3px;
border-radius: 6px;
}
::selection { background: var(--tn-accent); color: var(--tn-ink); }
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
clip: auto !important;
clip-path: none;
height: auto;
width: auto;
z-index: 100000;
}
.tn-skip {
position: absolute;
left: 12px;
top: -100px;
z-index: 1000;
background: var(--tn-ink);
color: #FFF;
padding: 12px 18px;
border-radius: 10px;
font-weight: 600;
}
.tn-skip:focus { top: 12px; color: #FFF; }
.tn-icon { flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; } .tn-container {
width: 100%;
max-width: calc(1240px + 2 * var(--tn-gutter));
margin-inline: auto;
padding-inline: var(--tn-gutter);
}
.tn-container--narrow { max-width: calc(760px + 2 * var(--tn-gutter)); }
.tn-section { padding-block: var(--tn-section); }
.tn-section--tight { padding-block: clamp(40px, 6vw, 72px); }
.tn-section--intro { padding-block: clamp(32px, 5vw, 56px) 0; }
.tn-section-head { margin-bottom: clamp(32px, 5vw, 56px); max-width: 760px; }
.tn-section-head .tn-lead { margin-top: 16px; }
.tn-section-head--split {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px 32px;
max-width: none;
}
.tn-section-head--split > :first-child { max-width: 680px; }
.tn-h2 {
font-size: clamp(2rem, 1.3rem + 2.8vw, 3.35rem);
font-weight: 800;
letter-spacing: -0.032em;
line-height: 1.05;
margin: 0;
max-width: 20ch;
}
.tn-lead {
font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
line-height: 1.55;
color: var(--tn-muted);
max-width: 38em;
margin: 0;
}
.tn-card {
background: var(--tn-surface);
border: 1px solid var(--tn-line);
border-radius: var(--tn-radius);
}
.tn-admin-hint {
margin-block: 24px;
padding: 16px 20px;
background: var(--tn-sand);
color: var(--tn-ochre);
border-radius: var(--tn-radius-sm);
font-weight: 600;
max-width: calc(1240px + 2 * var(--tn-gutter));
} .tn-btn,
.wp-element-button,
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 12px 22px;
border-radius: 12px;
border: 1.5px solid transparent;
font-family: var(--tn-font-body);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--tn-ease), box-shadow .2s ease;
}
.tn-btn:hover { transform: translateY(-1px); }
.tn-btn:active { transform: translateY(0); }
.tn-btn--primary { background: var(--tn-primary); color: #FFF; }
.tn-btn--primary:hover { background: var(--tn-night); color: #FFF; box-shadow: var(--tn-shadow-sm); }
.tn-btn--ghost { background: transparent; color: var(--tn-primary); border-color: var(--tn-primary); }
.tn-btn--ghost:hover { background: var(--tn-primary); color: #FFF; }
.tn-link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
text-decoration: none;
min-height: 44px;
}
.tn-link-arrow::after {
content: "";
width: 18px;
height: 2px;
background: currentColor;
transition: width .25s var(--tn-ease);
}
.tn-link-arrow:hover::after { width: 28px; }
.tn-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.tn-store {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 10px 22px 10px 18px;
border-radius: 14px;
text-decoration: none;
transition: transform .2s var(--tn-ease), box-shadow .2s ease;
}
.tn-store:hover { transform: translateY(-2px); box-shadow: var(--tn-shadow-sm); }
.tn-store--dark { background: var(--tn-ink); color: #FFF; }
.tn-store--dark:hover { color: #FFF; }
.tn-store--light { background: #FFF; color: var(--tn-ink); }
.tn-store--light:hover { color: var(--tn-ink); }
.tn-store__text { display: flex; flex-direction: column; line-height: 1.15; }
.tn-store__small { font-size: .72rem; opacity: .8; }
.tn-store__name { font-size: 1.06rem; font-weight: 700; }
.tn-store-badge img { height: 56px; width: auto; }
.tn-stores-soon {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
min-height: 48px;
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
font-size: .98rem;
}
.tn-stores-soon--dark { background: var(--tn-primary-soft); color: var(--tn-primary); }
.tn-stores-soon--light { background: rgba(255, 255, 255, .14); color: #FFF; }
.tn-round-btn {
width: 52px;
height: 52px;
border-radius: 50%;
border: 1.5px solid var(--tn-primary);
background: transparent;
color: var(--tn-primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.tn-round-btn:hover { background: var(--tn-primary-soft); }
.tn-round-btn--fill { background: var(--tn-primary); color: #FFF; }
.tn-round-btn--fill:hover { background: var(--tn-night); }
.tn-round-btn[disabled] { opacity: .35; cursor: default; }
.tn-slider-nav { display: flex; gap: 10px; } .tn-header {
position: sticky;
top: 0;
z-index: 50;
transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.admin-bar .tn-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tn-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .tn-header { top: 0; } }
.tn-header.is-scrolled,
.tn-menu-open .tn-header {
background: color-mix(in srgb, var(--tn-bg) 86%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
backdrop-filter: saturate(1.4) blur(14px);
box-shadow: 0 1px 0 rgba(27, 94, 63, .10), 0 10px 30px -24px rgba(15, 46, 33, .45);
} .tn-menu-open .tn-header,
.tn-menu-open .tn-header.is-scrolled { background: var(--tn-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tn-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: var(--tn-header-h);
}
.tn-brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--tn-ink);
text-decoration: none;
min-height: 44px;
flex-shrink: 0;
}
.tn-brand:hover { color: var(--tn-ink); }
.tn-brand__name {
font-family: var(--tn-font-heading);
font-weight: 800;
font-size: 1.375rem;
letter-spacing: -0.02em;
}
.tn-brand--custom img { max-height: 48px; width: auto; }
.tn-header__actions { display: flex; align-items: center; gap: 10px; }
.tn-header__cta { display: none; }
.tn-menu-toggle {
width: 48px;
height: 48px;
border-radius: 12px;
border: 1px solid var(--tn-line);
background: var(--tn-surface);
color: var(--tn-ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.tn-menu-toggle__close { display: none; }
.tn-menu-open .tn-menu-toggle__open { display: none; }
.tn-menu-open .tn-menu-toggle__close { display: inline-flex; }
.tn-menu-toggle__open { display: inline-flex; } .tn-nav {
position: fixed;
inset: var(--tn-header-h) 0 0 0;
z-index: 49;
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px var(--tn-gutter) 40px;
background: var(--tn-bg);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .25s ease, transform .3s var(--tn-ease), visibility 0s linear .3s;
}
.admin-bar .tn-nav { top: calc(var(--tn-header-h) + 46px); }
@media (max-width: 600px) { .admin-bar .tn-nav { top: var(--tn-header-h); } }
.tn-menu-open .tn-nav {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .25s ease, transform .3s var(--tn-ease), visibility 0s;
}
.tn-menu-open { overflow: hidden; }
.tn-nav__list,
.tn-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tn-nav__list li { border-bottom: 1px solid var(--tn-line); }
.tn-nav__list .sub-menu { list-style: none; padding: 0 0 8px 16px; margin: 0; }
.tn-nav__list .sub-menu li { border: 0; }
.tn-nav__link,
.tn-nav__list a {
display: flex;
align-items: center;
min-height: 56px;
color: var(--tn-ink);
text-decoration: none;
font-family: var(--tn-font-heading);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.tn-nav__list .current-menu-item > a,
.tn-nav__list .current_page_item > a { color: var(--tn-primary); }
.tn-nav__cta { width: 100%; min-height: 56px; font-size: 1.05rem; }
@media (min-width: 600px) {
.tn-header__cta { display: inline-flex; }
.tn-nav__cta { display: none; }
}
@media (min-width: 1100px) {
.tn-menu-toggle { display: none; }
.tn-nav {
position: static;
flex-direction: row;
align-items: center;
padding: 0;
background: none;
opacity: 1;
visibility: visible;
transform: none;
overflow: visible;
transition: none;
}
.tn-nav__list { flex-direction: row; gap: 4px; }
.tn-nav__list li { border: 0; position: relative; }
.tn-nav__link,
.tn-nav__list a {
min-height: 44px;
padding: 0 12px;
font-family: var(--tn-font-body);
font-size: .95rem;
font-weight: 500;
letter-spacing: 0;
color: var(--tn-muted);
border-radius: 10px;
transition: color .2s ease, background-color .2s ease;
}
.tn-nav__list a:hover { color: var(--tn-ink); background: rgba(27, 94, 63, .06); }
.tn-nav__list .current-menu-item > a,
.tn-nav__list .current_page_item > a { color: var(--tn-ink); font-weight: 600; }
.tn-nav__list .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
padding: 8px;
background: var(--tn-surface);
border: 1px solid var(--tn-line);
border-radius: var(--tn-radius-sm);
box-shadow: var(--tn-shadow-sm);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.tn-nav__list li:hover > .sub-menu,
.tn-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tn-nav__list .sub-menu a { width: 100%; }
} .tn-hero {
position: relative;
padding-block: clamp(32px, 6vw, 72px) clamp(64px, 9vw, 112px);
overflow: hidden;
}
.tn-hero__deco {
position: absolute;
right: -22vw;
top: -18vw;
width: max(560px, 58vw);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(27, 94, 63, .12);
background: radial-gradient(circle at 42% 50%, rgba(27, 94, 63, .10), rgba(27, 94, 63, 0) 58%);
pointer-events: none;
}
.tn-hero__deco::after {
content: "";
position: absolute;
inset: 16%;
border-radius: 50%;
border: 1px dashed rgba(27, 94, 63, .16);
}
.tn-hero__grid {
position: relative;
display: grid;
gap: clamp(40px, 6vw, 72px);
align-items: center;
}
.tn-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 24px;
padding: 6px 14px 6px 6px;
background: var(--tn-surface);
border: 1px solid var(--tn-line);
border-radius: 999px;
font-size: .9rem;
font-weight: 600;
color: var(--tn-primary);
}
.tn-badge__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--tn-primary);
color: #FFF;
}
.tn-badge__dot .tn-icon rect { display: none; }
.tn-hero__title {
font-size: clamp(2.6rem, 1.4rem + 5vw, 4.9rem);
font-weight: 800;
line-height: .98;
letter-spacing: -0.04em;
margin: 0;
max-width: 13ch;
}
.tn-hero__text {
font-size: clamp(1.0625rem, 1rem + .5vw, 1.3rem);
line-height: 1.55;
color: var(--tn-muted);
margin: 24px 0 0;
max-width: 33em;
}
.tn-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: 36px;
}
.tn-hero__visual {
position: relative;
display: flex;
justify-content: center;
padding: 12px 0 24px;
}
.tn-phone {
position: relative;
display: block;
width: min(300px, 70vw);
padding: 22px 10px 12px;
border-radius: 46px;
background: #14181A;
box-shadow: var(--tn-shadow), 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 2px #2B3135;
}
.tn-phone::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 64px;
height: 6px;
border-radius: 3px;
background: #2B3135;
transform: translateX(-50%);
}
.tn-phone__screen {
display: block;
border-radius: 34px;
overflow: hidden;
background: var(--tn-bg);
}
.tn-phone__img { width: 100%; height: auto; }
.tn-phone--hero { z-index: 2; }
.tn-chip {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
max-width: 230px;
padding: 10px 14px 10px 10px;
background: var(--tn-surface);
border-radius: 16px;
box-shadow: var(--tn-shadow-sm);
font-size: .82rem;
line-height: 1.3;
color: var(--tn-muted);
}
.tn-chip strong { color: var(--tn-ink); font-size: .9rem; }
.tn-chip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--tn-primary-soft);
color: var(--tn-primary);
flex-shrink: 0;
}
.tn-chip--1 { left: max(0px, calc(50% - 300px)); top: 12%; max-width: 210px; }
.tn-chip--2 { right: max(0px, calc(50% - 300px)); top: 50%; max-width: 210px; }
.tn-chip--2 .tn-chip__icon { background: var(--tn-sand); color: var(--tn-ochre); }
.tn-chip--3 { left: max(0px, calc(50% - 290px)); bottom: 7%; background: var(--tn-night); color: rgba(255, 255, 255, .78); }
.tn-chip--3 strong { color: #FFF; }
.tn-chip--3 .tn-chip__icon { background: rgba(226, 180, 87, .18); color: var(--tn-accent); }
@media (max-width: 599px) {
.tn-chip { max-width: 170px; font-size: .75rem; padding: 8px 10px 8px 8px; }
.tn-chip strong { font-size: .8rem; }
.tn-chip__icon { width: 30px; height: 30px; }
.tn-chip--1 { left: -6px; top: auto; bottom: 14%; }
.tn-chip--2 { right: -6px; top: 27%; }
.tn-chip--3 { display: none; }
}
@media (min-width: 960px) {
.tn-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.tn-phone--hero { width: 310px; }
} .tn-stats__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
border-block: 1px solid var(--tn-line);
}
.tn-stats__item {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
padding: 24px 16px 24px 0;
}
.tn-stats__item:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--tn-line); }
.tn-stats__item:nth-child(n+3) { border-top: 1px solid var(--tn-line); }
.tn-stats__value {
margin: 0;
font-family: var(--tn-font-heading);
font-weight: 800;
font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--tn-primary);
font-variant-numeric: tabular-nums;
}
.tn-stats__label { color: var(--tn-muted); font-size: .98rem; }
@media (min-width: 860px) {
.tn-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-stats__item { padding: 32px 24px; }
.tn-stats__item:first-child { padding-left: 0; }
.tn-stats__item + .tn-stats__item { border-left: 1px solid var(--tn-line); }
.tn-stats__item:nth-child(n+3) { border-top: 0; }
} .tn-problem__title { max-width: 18ch; }
.tn-problem__grid {
display: grid;
gap: clamp(64px, 8vw, 80px);
margin-top: clamp(48px, 6vw, 72px);
align-items: start;
}
.tn-notebook { position: relative; margin: 0; }
.tn-notebook__page {
position: relative;
padding: 32px 24px 40px 64px;
border-radius: 6px 18px 18px 6px;
background-color: var(--tn-paper);
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(58, 96, 140, .22) 39px, rgba(58, 96, 140, .22) 40px);
background-position: 0 31px;
box-shadow: 0 34px 60px -32px rgba(20, 24, 26, .5), 0 2px 0 rgba(0, 0, 0, .04);
transform: rotate(-1.2deg);
font-family: var(--tn-font-hand);
font-weight: 500;
font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
line-height: 40px;
color: var(--tn-pen);
}
.tn-notebook__page::before {
content: "";
position: absolute;
left: 48px;
top: 0;
bottom: 0;
width: 2px;
background: rgba(163, 48, 15, .45);
}
.tn-notebook__hole {
position: absolute;
left: 16px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--tn-bg);
box-shadow: inset 0 2px 3px rgba(0, 0, 0, .22);
}
.tn-notebook__hole:nth-child(1) { top: 40px; }
.tn-notebook__hole:nth-child(2) { top: calc(50% - 8px); }
.tn-notebook__hole:nth-child(3) { bottom: 40px; }
.tn-notebook__line { margin: 0; overflow-wrap: anywhere; }
.tn-notebook__line--head { font-weight: 700; }
.tn-notebook__stain {
position: absolute;
right: 28px;
bottom: 30px;
width: 120px;
height: 70px;
border-radius: 50%;
background: rgba(138, 88, 0, .10);
transform: rotate(-14deg);
pointer-events: none;
}
.tn-strike {
text-decoration: none;
background-image: linear-gradient(var(--tn-alert), var(--tn-alert));
background-repeat: no-repeat;
background-position: 0 58%;
background-size: 100% 2px;
}
.tn-bubble {
position: absolute;
margin: 0;
max-width: 80%;
padding: 12px 18px;
font-family: var(--tn-font-body);
font-size: clamp(.95rem, .9rem + .3vw, 1.08rem);
font-weight: 600;
line-height: 1.35;
box-shadow: 0 16px 30px -18px rgba(20, 24, 26, .55);
}
.tn-bubble--a {
right: -4px;
top: -30px;
background: var(--tn-surface);
border-radius: 18px 18px 4px 18px;
}
.tn-bubble--b {
left: 20px;
bottom: -30px;
background: var(--tn-alert);
color: #FFF;
border-radius: 18px 18px 18px 4px;
}
.tn-questions { list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1px solid var(--tn-line); }
.tn-questions li {
display: flex;
gap: 16px;
padding: 18px 0;
border-top: 1px solid var(--tn-line);
font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
font-weight: 600;
line-height: 1.4;
}
.tn-questions__mark {
font-family: var(--tn-font-heading);
font-weight: 800;
font-size: 1.5rem;
line-height: 1;
color: var(--tn-alert);
}
.tn-problem__conclusion { margin: 24px 0 0; font-size: 1.2rem; font-weight: 700; }
@media (min-width: 960px) {
.tn-problem__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; }
.tn-notebook__page { padding: 36px 36px 44px 78px; }
.tn-notebook__page::before { left: 58px; }
.tn-notebook__hole { left: 20px; }
} .tn-agitation {
--tn-focus: var(--tn-accent);
position: relative;
background: var(--tn-night);
color: #FFF;
}
.tn-agitation::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 72px;
background: linear-gradient(var(--tn-bg), rgba(250, 250, 248, 0));
}
.tn-agitation__statement {
font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.032em;
margin: 0;
max-width: 20ch;
}
.tn-agitation__grid {
display: grid;
gap: 1px;
margin-top: clamp(48px, 7vw, 80px);
background: rgba(255, 255, 255, .14);
border-radius: 22px;
overflow: hidden;
}
.tn-agitation__card { background: var(--tn-night); padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 36px); }
.tn-agitation__title {
font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem);
color: var(--tn-accent);
margin: 0 0 14px;
}
.tn-agitation__card p { margin: 0; color: rgba(255, 255, 255, .82); line-height: 1.6; }
@media (min-width: 720px) {
.tn-agitation__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
} .tn-compare {
background: var(--tn-surface);
border: 1px solid var(--tn-line);
border-radius: var(--tn-radius);
overflow: hidden;
}
.tn-compare__row {
display: grid;
border-top: 1px solid var(--tn-line);
}
.tn-compare__row--head {
display: none;
border-top: 0;
background: #F3F5F4;
font-size: .9rem;
font-weight: 700;
color: var(--tn-muted);
}
.tn-compare__row--head .tn-compare__after { color: var(--tn-primary); }
.tn-compare__row:nth-child(2) { border-top: 0; }
.tn-compare__before,
.tn-compare__after { padding: 18px 22px; }
.tn-compare__before {
padding-bottom: 0;
font-family: var(--tn-font-hand);
font-size: 1.45rem;
color: var(--tn-pen);
line-height: 1.3;
}
.tn-compare__after { font-size: 1.02rem; line-height: 1.55; }
.tn-compare__after strong { color: var(--tn-ink); }
@media (min-width: 820px) {
.tn-compare__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: center; }
.tn-compare__row--head { display: grid; }
.tn-compare__row:nth-child(2) { border-top: 1px solid var(--tn-line); }
.tn-compare__before,
.tn-compare__after { padding: 22px 28px; }
.tn-compare__before { font-size: 1.6rem; }
.tn-compare__row--head .tn-compare__before,
.tn-compare__row--head .tn-compare__after { padding-block: 16px; font-family: var(--tn-font-body); font-size: .9rem; color: inherit; }
.tn-compare__row--head .tn-compare__after { color: var(--tn-primary); }
} .tn-features { padding-top: 0; }
.tn-bento {
display: grid;
gap: 20px;
grid-template-columns: minmax(0, 1fr);
}
.tn-feature {
display: flex;
flex-direction: column;
padding: clamp(24px, 3vw, 32px);
transition: transform .25s var(--tn-ease), box-shadow .25s ease, border-color .25s ease;
}
.tn-feature:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px -24px rgba(15, 46, 33, .4);
border-color: color-mix(in srgb, var(--tn-primary) 30%, var(--tn-line));
}
.tn-feature__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--tn-primary-soft);
color: var(--tn-primary);
}
.tn-feature__title { font-size: 1.35rem; margin: 18px 0 0; }
.tn-feature__text { margin: 8px 0 0; color: var(--tn-muted); line-height: 1.55; }
.tn-feature__media { margin-top: 20px; border-radius: var(--tn-radius-sm); overflow: hidden; }
.tn-feature__media img { width: 100%; height: auto; }
.tn-feature--tall {
background: var(--tn-primary);
border-color: var(--tn-primary);
color: #FFF;
--tn-focus: var(--tn-accent);
}
.tn-feature--tall .tn-feature__icon { background: rgba(255, 255, 255, .12); color: var(--tn-accent); width: 60px; height: 60px; }
.tn-feature--tall .tn-feature__title { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.85rem); }
.tn-feature--tall .tn-feature__text { color: rgba(255, 255, 255, .86); font-size: 1.06rem; }
.tn-feature--tall:hover { border-color: var(--tn-primary); }
.tn-feature__code {
display: flex;
gap: 10px;
justify-content: center;
margin-top: auto;
padding: 20px;
border-radius: 16px;
background: rgba(255, 255, 255, .10);
}
.tn-feature__code span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 58px;
border-radius: 10px;
background: #FFF;
color: var(--tn-primary);
font-family: var(--tn-font-heading);
font-weight: 800;
font-size: 1.7rem;
}
.tn-feature__code span:last-child { background: var(--tn-accent); color: var(--tn-ink); }
.tn-feature--tall .tn-feature__text { margin-bottom: 28px; }
.tn-feature--wide { background: var(--tn-sand); border-color: var(--tn-sand); }
.tn-feature--wide .tn-feature__icon { background: #FFF; color: var(--tn-ochre); }
.tn-feature--wide:hover { border-color: color-mix(in srgb, var(--tn-ochre) 35%, var(--tn-sand)); }
@media (min-width: 640px) {
.tn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tn-feature--tall { grid-row: span 2; }
.tn-feature--wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: start; }
.tn-feature--wide .tn-feature__icon { grid-row: span 2; }
.tn-feature--wide .tn-feature__title { margin-top: 2px; }
.tn-feature--wide .tn-feature__media { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.tn-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tn-feature--tall { min-height: 440px; }
} .tn-screens { background: var(--tn-tint); }
.tn-slider { position: relative; }
.tn-slider__track {
display: flex;
gap: clamp(20px, 4vw, 40px);
margin: 0;
padding: 8px 4px 32px;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 4px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.tn-slider__track::-webkit-scrollbar { display: none; }
.tn-slider__track:focus-visible { outline-offset: -3px; }
.tn-slider__slide { flex: 0 0 auto; scroll-snap-align: center; }
.tn-slider__slide:first-child { margin-inline-start: auto; }
.tn-slider__slide:last-child { margin-inline-end: auto; }
.tn-slider__dots { display: flex; justify-content: center; gap: 8px; min-height: 8px; }
.tn-slider__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 4px;
background: color-mix(in srgb, var(--tn-primary) 30%, transparent);
transition: width .3s var(--tn-ease), background-color .3s ease;
}
.tn-slider__dot.is-active { width: 28px; background: var(--tn-primary); }
.tn-screens__slide { width: clamp(220px, 64vw, 280px); }
.tn-screens__figure { margin: 0; text-align: center; }
.tn-screens__zoom { position: relative; display: block; border-radius: 46px; }
.tn-screens__zoom:focus-visible { outline-offset: 6px; border-radius: 46px; }
.tn-phone--screen { width: 100%; transition: transform .35s var(--tn-ease), box-shadow .35s ease; }
.tn-screens__zoom:hover .tn-phone--screen { transform: translateY(-6px) rotate(-1deg); }
.tn-screens__zoom-icon {
position: absolute;
right: 14px;
bottom: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--tn-surface);
color: var(--tn-primary);
box-shadow: var(--tn-shadow-sm);
opacity: .92;
}
.tn-screens__figure figcaption { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; padding-inline: 8px; }
.tn-screens__figure figcaption strong { font-size: 1.05rem; }
.tn-screens__figure figcaption span { color: var(--tn-muted); font-size: .95rem; line-height: 1.45; }
@media (min-width: 960px) {
.tn-screens__slide:nth-child(3n+1),
.tn-screens__slide:nth-child(3n) { padding-top: 40px; }
}
.tn-screens--all .tn-slider__track {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
overflow: visible;
scroll-snap-type: none;
gap: 48px 32px;
}
.tn-screens--all .tn-screens__slide { width: auto; padding-top: 0; margin: 0; } .tn-steps__list {
--tn-num: 64px;
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 36px;
}
.tn-steps__list::before {
content: "";
position: absolute;
left: calc(var(--tn-num) / 2 - 1px);
top: 24px;
bottom: 24px;
width: 2px;
background: repeating-linear-gradient(to bottom, var(--tn-primary) 0 8px, transparent 8px 16px);
transform-origin: top;
}
.tn-steps__item { position: relative; padding-left: calc(var(--tn-num) + 22px); min-height: var(--tn-num); }
.tn-steps__num {
position: absolute;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tn-num);
height: var(--tn-num);
border-radius: 50%;
background: var(--tn-primary);
color: #FFF;
font-family: var(--tn-font-heading);
font-weight: 800;
font-size: 1.6rem;
box-shadow: 0 0 0 8px var(--tn-bg);
}
.tn-steps__item--last .tn-steps__num { background: var(--tn-accent); color: var(--tn-ink); }
.tn-steps__title { font-size: 1.35rem; margin: 14px 0 6px; }
.tn-steps__item p { margin: 0; color: var(--tn-muted); }
@media (min-width: 900px) {
.tn-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.tn-steps__list::before {
left: calc(var(--tn-num) / 2);
right: calc(var(--tn-num) / 2);
top: calc(var(--tn-num) / 2 - 1px);
bottom: auto;
width: auto;
height: 2px;
background: repeating-linear-gradient(to right, var(--tn-primary) 0 8px, transparent 8px 16px);
transform-origin: left;
}
.tn-steps__item { padding-left: 0; padding-top: calc(var(--tn-num) + 24px); }
.tn-steps__title { margin-top: 0; }
} .tn-benefits { padding-top: 0; }
.tn-benefits__panel {
position: relative;
overflow: hidden;
padding: clamp(32px, 6vw, 72px);
background: var(--tn-surface);
border: 1px solid var(--tn-line);
border-radius: 32px;
}
.tn-benefits__ring {
display: none;
position: absolute;
right: -190px;
top: -190px;
width: 520px;
opacity: .13;
pointer-events: none;
}
.tn-benefits__ring svg { width: 100%; height: auto; }
.tn-benefits__title { position: relative; max-width: 17ch; }
.tn-benefits__grid {
position: relative;
display: grid;
gap: 32px 40px;
margin: clamp(32px, 5vw, 52px) 0 0;
}
.tn-benefits__item dt { font-weight: 700; color: var(--tn-primary); font-size: .95rem; }
.tn-benefits__item dd { margin: 8px 0 0; font-size: 1.15rem; line-height: 1.5; }
.tn-benefits__item--accent dt { color: var(--tn-ochre); }
@media (min-width: 680px) {
.tn-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tn-benefits__ring { display: block; }
}
@media (min-width: 1100px) { .tn-benefits__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tn-reviews { padding-top: 0; }
.tn-reviews__slide { width: min(400px, 86vw); scroll-snap-align: start; }
.tn-reviews__slide:first-child { margin-inline-start: 0; }
.tn-reviews__slide:last-child { margin-inline-end: 0; }
.tn-slider--static .tn-slider__track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 20px;
overflow: visible;
padding: 0;
}
.tn-slider--static .tn-reviews__slide { width: auto; }
.tn-review {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
padding: clamp(24px, 3vw, 32px);
background: var(--tn-surface);
border: 1px solid var(--tn-line);
border-radius: var(--tn-radius);
}
.tn-review--dark { background: var(--tn-night); border-color: var(--tn-night); color: #FFF; --tn-focus: var(--tn-accent); }
.tn-review__text { margin: 18px 0 0; font-size: 1.12rem; line-height: 1.55; }
.tn-review__text p { margin: 0 0 .6em; }
.tn-review__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; font-size: .95rem; line-height: 1.35; }
.tn-review__meta { color: var(--tn-muted); }
.tn-review--dark .tn-review__meta { color: rgba(255, 255, 255, .75); }
.tn-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tn-avatar--initials {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--tn-primary-soft);
color: var(--tn-primary);
font-weight: 700;
}
.tn-review--dark .tn-avatar--initials { background: var(--tn-accent); color: var(--tn-ink); }
.tn-stars { display: inline-flex; gap: 3px; color: color-mix(in srgb, var(--tn-muted) 30%, transparent); }
.tn-stars__star { display: inline-flex; }
.tn-stars__star.is-on { color: var(--tn-accent); } .tn-cta { padding-top: 0; }
.tn-cta__panel {
--tn-focus: var(--tn-accent);
position: relative;
overflow: hidden;
display: grid;
gap: 40px;
padding: clamp(36px, 6vw, 80px) clamp(28px, 6vw, 80px) 0;
background: var(--tn-primary);
color: #FFF;
border-radius: 36px;
}
.tn-cta__panel::before {
content: "";
position: absolute;
left: -140px;
bottom: -260px;
width: 560px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .16);
pointer-events: none;
}
.tn-cta__panel::after {
content: "";
position: absolute;
right: -80px;
top: -120px;
width: 380px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(226, 180, 87, .22), rgba(226, 180, 87, 0) 70%);
pointer-events: none;
}
.tn-cta__copy { position: relative; z-index: 1; }
.tn-cta__title {
font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.035em;
margin: 0;
max-width: 14ch;
}
.tn-cta__text { font-size: 1.15rem; color: rgba(255, 255, 255, .88); margin: 20px 0 32px; max-width: 30em; }
.tn-cta__visual { position: relative; z-index: 1; display: flex; justify-content: center; margin-bottom: -140px; }
.tn-phone--cta { width: min(270px, 66vw); transform: rotate(6deg); }
@media (min-width: 900px) {
.tn-cta__panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; padding-bottom: clamp(36px, 6vw, 80px); }
.tn-cta__visual { margin-block: -40px -260px; align-self: end; }
} .tn-faq { padding-top: 0; }
.tn-faq__grid { display: grid; gap: 40px; }
.tn-faq__head .tn-lead { margin: 16px 0 24px; }
.tn-faq__list { border-bottom: 1px solid var(--tn-line); }
.tn-faq__item { border-top: 1px solid var(--tn-line); }
.tn-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 56px;
padding: 20px 0;
cursor: pointer;
list-style: none;
}
.tn-faq__q::-webkit-details-marker { display: none; }
.tn-faq__q-text { margin: 0; font-family: var(--tn-font-body); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.tn-faq__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--tn-primary-soft);
color: var(--tn-primary);
flex-shrink: 0;
transition: transform .3s var(--tn-ease), background-color .2s ease, color .2s ease;
}
.tn-faq__item[open] .tn-faq__icon { transform: rotate(45deg); background: var(--tn-primary); color: #FFF; }
.tn-faq__q:hover .tn-faq__q-text { color: var(--tn-primary); }
.tn-faq__a { padding: 0 56px 24px 0; color: var(--tn-muted); }
.tn-faq__a > :last-child { margin-bottom: 0; } @supports (interpolate-size: allow-keywords) {
.tn-faq__list { interpolate-size: allow-keywords; }
.tn-faq__item::details-content {
block-size: 0;
overflow: hidden;
transition: block-size .35s var(--tn-ease), content-visibility .35s allow-discrete;
}
.tn-faq__item[open]::details-content { block-size: auto; }
}
.tn-faq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; background: var(--tn-tint); border-radius: var(--tn-radius); }
@media (min-width: 960px) {
.tn-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; }
.tn-faq__grid--all { grid-template-columns: minmax(0, 1fr); max-width: calc(880px + 2 * var(--tn-gutter)); }
.tn-faq__head { position: sticky; top: calc(var(--tn-header-h) + 32px); align-self: start; }
} .tn-blog { padding-top: 0; }
.tn-posts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.tn-post-card {
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform .25s var(--tn-ease), box-shadow .25s ease;
}
.tn-post-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(15, 46, 33, .45); }
.tn-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tn-primary); }
.tn-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--tn-ease); }
.tn-post-card:hover .tn-post-card__media img { transform: scale(1.04); }
.tn-post-image-placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--tn-primary); }
.tn-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.tn-post-card__cat { align-self: flex-start; font-size: .85rem; font-weight: 700; text-decoration: none; }
.tn-post-card__title { font-size: 1.3rem; line-height: 1.25; margin: 8px 0 0; }
.tn-post-card__title a { color: var(--tn-ink); text-decoration: none; }
.tn-post-card__title a:hover { color: var(--tn-primary); }
.tn-post-card__excerpt { margin: 10px 0 0; color: var(--tn-muted); font-size: .98rem; line-height: 1.55; }
.tn-post-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; font-size: .9rem; color: var(--tn-muted); }
.tn-post-card__more { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.tn-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 18px; font-size: .92rem; color: var(--tn-muted); }
.tn-post-meta__cat { font-weight: 700; text-decoration: none; background: var(--tn-primary-soft); padding: 4px 12px; border-radius: 999px; }
.tn-pagination { margin-top: 56px; }
.tn-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tn-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 48px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid var(--tn-line);
background: var(--tn-surface);
color: var(--tn-ink);
text-decoration: none;
font-weight: 600;
}
.tn-pagination .page-numbers.current { background: var(--tn-primary); border-color: var(--tn-primary); color: #FFF; } .tn-footer {
--tn-focus: var(--tn-accent);
background: var(--tn-night);
color: rgba(255, 255, 255, .8);
padding: clamp(56px, 8vw, 88px) 0 28px;
font-size: .97rem;
}
.tn-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.tn-footer a:hover { color: #FFF; text-decoration: underline; }
.tn-footer .tn-brand,
.tn-footer .tn-brand:hover { color: #FFF; text-decoration: none; }
.tn-footer__top { display: grid; gap: 48px; }
.tn-footer__about { max-width: 380px; }
.tn-footer__about p { margin: 16px 0 24px; line-height: 1.6; }
.tn-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.tn-footer__title { font-family: var(--tn-font-body); font-size: 1rem; font-weight: 700; color: #FFF; letter-spacing: 0; margin: 0 0 14px; }
.tn-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tn-footer__links a { display: inline-flex; align-items: center; min-height: 36px; }
.tn-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
margin-top: 56px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .14);
font-size: .9rem;
}
.tn-footer__bottom p { margin: 0; }
@media (min-width: 900px) {
.tn-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
} .tn-page-header {
position: relative;
overflow: hidden;
padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 56px);
border-bottom: 1px solid var(--tn-line);
}
.tn-page-header::after {
content: "";
position: absolute;
right: -160px;
top: -220px;
width: 520px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(27, 94, 63, .14);
pointer-events: none;
}
.tn-page-header__title {
font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.02;
margin: 0;
max-width: 18ch;
}
.tn-page-header__intro { margin: 20px 0 0; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--tn-muted); max-width: 40em; }
.tn-page-header--article { border-bottom: 0; }
.tn-page-header--article .tn-page-header__title { max-width: 24ch; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
.tn-breadcrumbs { margin-bottom: 20px; font-size: .9rem; color: var(--tn-muted); }
.tn-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.tn-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .5; }
.tn-breadcrumbs a { color: var(--tn-muted); }
.tn-article__cover { margin-block: 0 clamp(40px, 6vw, 64px); }
.tn-article__cover img { width: 100%; border-radius: 28px; aspect-ratio: 16 / 9; object-fit: cover; }
.tn-article__footer { padding-block: 40px 16px; }
.tn-article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 24px; border-top: 1px solid var(--tn-line); font-weight: 600; }
.tn-tags a { display: inline-block; margin: 0 8px 8px 0; padding: 4px 12px; border-radius: 999px; background: var(--tn-tint); text-decoration: none; font-size: .9rem; }
.tn-related { padding-bottom: 0; }
.tn-related .tn-h2 { margin-bottom: 32px; }
.tn-prose { font-size: 1.08rem; line-height: 1.72; }
.tn-prose > * { margin-block: 0 1.1em; }
.tn-prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem); margin: 1.8em 0 .55em; }
.tn-prose h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem); margin: 1.5em 0 .5em; }
.tn-prose > :first-child { margin-top: 0; }
.tn-prose ul,
.tn-prose ol { padding-left: 1.3em; }
.tn-prose li { margin-bottom: .4em; }
.tn-prose li::marker { color: var(--tn-primary); }
.tn-prose blockquote,
.wp-block-quote.is-style-tn-card {
margin-inline: 0;
padding: 24px 28px;
border-radius: var(--tn-radius);
background: var(--tn-tint);
font-size: 1.18rem;
border: 0;
}
.tn-prose blockquote cite { display: block; margin-top: 12px; font-size: .95rem; font-style: normal; font-weight: 600; color: var(--tn-muted); }
.tn-prose img { border-radius: 18px; }
.tn-prose figure { margin-inline: 0; }
.tn-prose figcaption { font-size: .9rem; color: var(--tn-muted); margin-top: 8px; }
.tn-prose table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tn-prose th,
.tn-prose td { padding: 10px 12px; border-bottom: 1px solid var(--tn-line); text-align: left; }
.tn-prose code { background: var(--tn-tint); padding: .1em .35em; border-radius: 6px; font-size: .92em; }
.tn-prose pre { background: var(--tn-ink); color: #FFF; padding: 20px; border-radius: 14px; overflow-x: auto; }
.tn-prose hr { border: 0; border-top: 1px solid var(--tn-line); margin-block: 2.4em; }
.tn-prose .alignwide { width: min(1240px, 100vw - 2 * var(--tn-gutter)); max-width: none; margin-inline: calc(50% - min(620px, 50vw - var(--tn-gutter))); }
.tn-prose .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); border-radius: 0; }
.tn-measure { max-width: 760px; }
.tn-prose--wide { max-width: calc(1240px + 2 * var(--tn-gutter)); }
.tn-prose .wp-block-button__link { background: var(--tn-primary); color: #FFF; }
.tn-prose .wp-block-buttons { gap: 12px; }
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.gallery-caption { font-size: .9rem; color: var(--tn-muted); }
.sticky,
.bypostauthor { position: relative; }
.tn-legal { display: grid; gap: 40px; padding-block: clamp(40px, 6vw, 72px); }
.tn-legal__content { max-width: 760px; }
.tn-legal__toc { align-self: start; padding: 22px 24px; background: var(--tn-surface); border: 1px solid var(--tn-line); border-radius: var(--tn-radius-sm); font-size: .95rem; }
.tn-legal__toc-title { font-weight: 700; margin: 0 0 10px; }
.tn-legal__toc ol { margin: 0; padding-left: 1.2em; }
.tn-legal__toc li { margin-bottom: 6px; }
@media (min-width: 960px) {
.tn-legal { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; }
.tn-legal__toc { position: sticky; top: calc(var(--tn-header-h) + 24px); }
} .tn-form { display: grid; gap: 18px; }
.tn-form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .tn-form__row { grid-template-columns: 1fr 1fr; } }
.tn-field { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tn-field label { font-weight: 600; font-size: .98rem; }
.tn-field input:not([type="checkbox"]),
.tn-field select,
.tn-field textarea,
.tn-search__input,
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea {
width: 100%;
min-height: 52px;
padding: 12px 16px;
font: inherit;
color: var(--tn-ink);
background: var(--tn-surface);
border: 1.5px solid var(--tn-line);
border-radius: 12px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.tn-field textarea { min-height: 160px; resize: vertical; }
.tn-field input:focus,
.tn-field select:focus,
.tn-field textarea:focus,
.tn-search__input:focus,
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--tn-primary); box-shadow: 0 0 0 4px var(--tn-primary-soft); }
.tn-field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.tn-field--check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--tn-primary); flex-shrink: 0; }
.tn-field--check label { font-weight: 400; color: var(--tn-muted); }
.tn-field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tn-form .tn-btn { justify-self: start; min-height: 56px; padding-inline: 28px; }
.tn-notice { padding: 16px 20px; border-radius: 12px; font-weight: 600; margin: 0 0 20px; }
.tn-notice--ok { background: var(--tn-primary-soft); color: var(--tn-primary); }
.tn-notice--error { background: #FBE9E4; color: var(--tn-alert); }
.tn-contact-grid { display: grid; gap: 48px; }
.tn-contact-grid__form { padding: clamp(24px, 4vw, 40px); background: var(--tn-surface); border: 1px solid var(--tn-line); border-radius: var(--tn-radius); }
.tn-contact-grid__title { font-size: 1.1rem; font-family: var(--tn-font-body); letter-spacing: 0; margin: 32px 0 8px; }
.tn-contact-grid .tn-footer__links a { color: var(--tn-primary); }
.tn-contact-grid__faq { display: flex; align-items: center; gap: 10px; margin-top: 32px; color: var(--tn-primary); font-weight: 600; }
@media (min-width: 960px) { .tn-contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; } }
.tn-search { position: relative; display: flex; max-width: 460px; margin-top: 28px; }
.tn-search__input { padding-right: 56px; }
.tn-search__btn { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--tn-primary); color: #FFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tn-empty { max-width: 640px; }
.tn-404 { padding-block: clamp(48px, 8vw, 112px); }
.tn-404__grid { display: grid; gap: 56px; align-items: center; }
.tn-404__code { margin: 0; font-family: var(--tn-font-hand); font-weight: 700; font-size: clamp(4rem, 3rem + 5vw, 7rem); line-height: 1; color: var(--tn-pen); }
.tn-404__title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; margin: 12px 0 18px; max-width: 16ch; }
.tn-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tn-notebook--small { max-width: 440px; margin-inline: auto; }
@media (min-width: 900px) { .tn-404__grid { grid-template-columns: 1.2fr .8fr; } }
.tn-comments { padding-block: 48px; }
.tn-comments__list { list-style: none; padding: 0; }
.tn-comments__list .comment-body { padding: 20px 0; border-bottom: 1px solid var(--tn-line); }
.tn-comments__list .children { list-style: none; padding-left: 24px; }
.comment-form { display: grid; gap: 14px; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.tn-widgets { margin-top: 32px; }
.tn-widget__title { font-size: 1.2rem; } .tn-shop { padding-block: clamp(40px, 6vw, 72px); }
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button { border-radius: 12px; background: var(--tn-primary); color: #FFF; }
.woocommerce .button:hover { background: var(--tn-night); color: #FFF; } .tn-lightbox {
width: min(92vw, 520px);
max-height: 94vh;
padding: 0;
border: 0;
background: transparent;
overflow: visible;
}
.tn-lightbox::backdrop { background: rgba(15, 46, 33, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tn-lightbox__img { width: 100%; max-height: 88vh; object-fit: contain; border-radius: 28px; background: var(--tn-bg); }
.tn-lightbox__close {
position: absolute;
top: -18px;
right: -10px;
z-index: 1;
width: 48px;
height: 48px;
border-radius: 50%;
border: 0;
background: #FFF;
color: var(--tn-ink);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--tn-shadow-sm);
--tn-focus: var(--tn-accent);
} @keyframes tn-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes tn-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tn-float { from { translate: 0 0; } to { translate: 0 -8px; } }
.tn-js .tn-hero__copy > * { animation: tn-rise .8s var(--tn-ease) both; }
.tn-js .tn-hero__copy > :nth-child(2) { animation-delay: .06s; }
.tn-js .tn-hero__copy > :nth-child(3) { animation-delay: .12s; }
.tn-js .tn-hero__copy > :nth-child(4) { animation-delay: .18s; }
.tn-js .tn-phone--hero { animation: tn-rise 1s var(--tn-ease) .1s both; }
.tn-js .tn-chip { animation: tn-pop .6s var(--tn-ease) both, tn-float 4.5s ease-in-out 1.4s infinite alternate; }
.tn-js .tn-chip--1 { animation-delay: .7s, 1.4s; }
.tn-js .tn-chip--2 { animation-delay: .9s, 2.2s; }
.tn-js .tn-chip--3 { animation-delay: 1.1s, 3s; }
.tn-js [data-tn-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--tn-ease), transform .7s var(--tn-ease);
}
.tn-js [data-tn-reveal].is-visible { opacity: 1; transform: none; }
.tn-js .tn-notebook[data-tn-reveal] { transform: translateY(24px) rotate(1deg); }
.tn-js .tn-notebook[data-tn-reveal].is-visible { transform: none; } .tn-js [data-tn-reveal] .tn-strike { background-size: 0 2px; transition: background-size .5s ease .5s; }
.tn-js [data-tn-reveal].is-visible .tn-strike { background-size: 100% 2px; }
.tn-js [data-tn-reveal].is-visible .tn-notebook__line:nth-child(n+6) .tn-strike { transition-delay: .9s; }
.tn-js [data-tn-reveal].is-visible .tn-compare__row:nth-child(n+4) .tn-strike { transition-delay: .8s; } .tn-js [data-tn-steps]::before { transform: scale(0); transition: transform 1.1s var(--tn-ease) .2s; }
.tn-js [data-tn-steps] .tn-steps__num { transform: scale(.6); opacity: 0; transition: transform .5s var(--tn-ease), opacity .4s ease; transition-delay: calc(.3s + var(--tn-step) * .22s); }
.tn-js [data-tn-steps].is-visible::before { transform: none; }
.tn-js [data-tn-steps].is-visible .tn-steps__num { transform: none; opacity: 1; }
.tn-js .tn-bento [data-tn-reveal]:nth-child(2),
.tn-js .tn-agitation__grid [data-tn-reveal]:nth-child(2),
.tn-js .tn-posts [data-tn-reveal]:nth-child(2) { transition-delay: .08s; }
.tn-js .tn-bento [data-tn-reveal]:nth-child(3),
.tn-js .tn-agitation__grid [data-tn-reveal]:nth-child(3),
.tn-js .tn-posts [data-tn-reveal]:nth-child(3) { transition-delay: .16s; }
.tn-js .tn-bento [data-tn-reveal]:nth-child(4),
.tn-js .tn-agitation__grid [data-tn-reveal]:nth-child(4) { transition-delay: .24s; } .tn-no-anim *,
.tn-no-anim *::before,
.tn-no-anim *::after {
animation: none !important;
transition: none !important;
}
.tn-no-anim [data-tn-reveal],
.tn-no-anim [data-tn-steps] .tn-steps__num { opacity: 1 !important; transform: none !important; }
.tn-no-anim [data-tn-steps]::before { transform: none !important; }
.tn-no-anim .tn-strike { background-size: 100% 2px !important; }
.tn-no-anim .tn-notebook__page { transform: rotate(-1.2deg) !important; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0s !important;
}
.tn-js [data-tn-reveal] { opacity: 1; transform: none; }
.tn-js [data-tn-reveal] .tn-strike { background-size: 100% 2px; }
.tn-js [data-tn-steps]::before,
.tn-js [data-tn-steps] .tn-steps__num { transform: none; opacity: 1; }
}
@media print {
.tn-header,
.tn-footer,
.tn-cta,
.tn-article__share,
.tn-lightbox { display: none !important; }
body { background: #FFF; }
.tn-js [data-tn-reveal] { opacity: 1 !important; transform: none !important; }
}