/* generated by scripts/site-bundle-css.mjs from: css/base.css css/layout.css css/silver.css css/themes.css css/themes-decor.css css/themes-page.css css/type.css */

:root {
--bg: #ffffff;
--surface: #f5f7fa;
--surface-2: #eef2f6;
--line: #e2e8ef;
--line-strong: #c9d2dc;
--ink: #111827;
--ink-2: #1f2937;
--muted: #4b5563;
--brand: #1f5bf0;
--brand-ink: #1747c4;
--brand-tint: #eef3ff;
--accent: #ffe033;
--night: #0b1220;
--night-2: #111a2c;
--on-night: #ffffff;
--on-night-muted: #aeb8c6;
--disabled-bg: #eef2f6;
--disabled-ink: #3d4552;
--r-sm: 10px;
--r: 16px;
--r-lg: 18px;
--section: clamp(88px, 11vw, 160px);
--header-h: 64px;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", "Helvetica Neue", sans-serif;
--code: ui-monospace, "Cascadia Mono", Consolas, monospace;
color-scheme: light;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
background: var(--bg);
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
margin: 0;
font-family: var(--sans);
font-size: 1.0625rem;
line-height: 1.75;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
img,
video {
max-width: 100%;
display: block;
}
img {
height: auto;
}
a {
color: var(--brand-ink);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
a:hover {
color: var(--ink);
}
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: 6px;
}
::selection {
background: var(--brand-tint);
color: var(--ink);
}
code {
font-family: var(--code);
font-size: 0.86em;
padding: 0.05em 0.4em;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 6px;
}
h1,
h2,
h3 {
margin: 0 0 0.6em;
color: inherit;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
font-feature-settings: "palt";
}
h1 {
font-size: clamp(2.5rem, 5.4vw, 4.5rem);
line-height: 1.1;
}
h2 {
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.16;
}
h3 {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 650;
}
p,
ul,
ol {
margin: 0 0 1em;
}
strong {
font-weight: 650;
}
.wrap {
width: min(1200px, 100% - 48px);
margin-inline: auto;
}
.narrow {
width: min(760px, 100% - 48px);
}
.fine {
font-size: 0.9rem;
line-height: 1.7;
color: var(--muted);
}
.fine a {
color: inherit;
}
.lead {
max-width: 34em;
font-size: clamp(1.1rem, 1.4vw, 1.28rem);
line-height: 1.7;
color: var(--muted);
text-wrap: pretty;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
font-size: 0.82rem;
font-weight: 650;
letter-spacing: 0.08em;
color: var(--brand-ink);
}
.eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand);
}
.eyebrow .dot {
display: none;
}
.dot {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
}
.mark {
position: relative;
z-index: 0;
white-space: nowrap;
}
.mark::before {
content: "";
position: absolute;
z-index: -1;
left: -0.04em;
right: -0.04em;
bottom: 0.06em;
height: 0.32em;
background: var(--accent);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 16px;
top: -80px;
z-index: 100;
padding: 10px 16px;
font-weight: 650;
color: #ffffff;
background: var(--brand);
border-radius: var(--r-sm);
text-decoration: none;
}
.skip-link:focus {
top: 12px;
color: #ffffff;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.scroll-progress {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--brand);
transform-origin: left center;
transform: scaleX(var(--progress, 0));
pointer-events: none;
}
.header-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 16px;
width: min(1240px, 100% - 32px);
min-height: var(--header-h);
margin-inline: auto;
padding: 8px 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 1rem;
color: var(--ink);
text-decoration: none;
}
.brand:hover {
color: var(--ink);
}
.brand img {
width: 30px;
height: 30px;
}
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-list a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 4px 12px;
font-size: 0.94rem;
font-weight: 500;
color: var(--muted);
text-decoration: none;
border-radius: 8px;
transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.nav-list a:hover {
color: var(--ink);
background: var(--surface);
}
.nav-list a[aria-current] {
color: var(--ink);
font-weight: 650;
}
.nav-list a[aria-current]::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: var(--brand);
}
.nav-toggle {
display: none;
}
@media (max-width: 960px) {
.has-menu .nav-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 6px 14px;
font: inherit;
font-weight: 600;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
cursor: pointer;
}
.nav-toggle-icon {
position: relative;
width: 16px;
height: 12px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
}
.nav-toggle-icon::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 3px;
border-top: 2px solid currentColor;
}
.has-menu .site-nav {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
padding: 8px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r);
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
transition: opacity 160ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
}
.has-menu .site-nav.is-open {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity 160ms var(--ease), transform 220ms var(--ease), visibility 0s;
}
.has-menu .nav-list {
flex-direction: column;
}
.has-menu .nav-list a {
display: flex;
min-height: 50px;
font-size: 1.06rem;
}
.has-menu .nav-list a[aria-current]::after {
left: 0;
right: auto;
top: 14px;
bottom: 14px;
width: 3px;
height: auto;
}
}
@media (max-width: 640px) {
.wrap,
.narrow {
width: calc(100% - 36px);
}
.nav-list a {
padding: 2px 8px;
font-size: 0.9rem;
}
}
.nowrap {
white-space: nowrap;
}
.section {
position: relative;
padding: var(--section) 0;
}
.section + .section {
padding-top: calc(var(--section) * 0.4);
}
.section.section--tight-top {
padding-top: 0;
}
.section-alt,
.section + .section-alt,
.section.section-alt {
padding-top: var(--section);
background: var(--surface);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.section-alt + .section {
padding-top: var(--section);
}
.section-head {
display: grid;
gap: 16px 64px;
margin-bottom: clamp(40px, 6vw, 72px);
}
@media (min-width: 900px) {
.section-head {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: end;
}
}
.section-head h2 {
margin: 0;
}
.section-lead {
max-width: 32em;
margin: 0;
font-size: 1.1rem;
color: var(--muted);
}
.section-head--center {
justify-items: center;
text-align: center;
}
@media (min-width: 900px) {
.section-head--center {
grid-template-columns: 1fr;
}
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
@media (min-width: 960px) {
.split {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 72px;
}
.split-aside {
position: sticky;
top: calc(var(--header-h) + 32px);
align-self: start;
}
}
.split-aside h2 {
margin-bottom: 20px;
}
.split-body > :first-child {
margin-top: 0;
}
.more-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
text-decoration: none;
}
.arrow-chip {
display: inline-block;
transition: transform 200ms var(--ease);
}
.more-link:hover .arrow-chip {
transform: translateX(3px);
}
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 28px 0 16px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 10px 22px;
font: inherit;
font-size: 1rem;
font-weight: 600;
text-align: center;
text-decoration: none;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
cursor: pointer;
transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover {
color: var(--ink);
border-color: var(--ink);
}
.btn:active {
transform: scale(0.98);
}
.btn-primary {
color: #ffffff;
background: var(--brand);
border-color: var(--brand);
}
.btn-primary:hover {
color: #ffffff;
background: var(--brand-ink);
border-color: var(--brand-ink);
}
.btn-ghost {
background: transparent;
border-color: transparent;
text-decoration: underline;
}
.btn-block {
width: 100%;
}
.btn:disabled,
.btn[aria-disabled="true"] {
color: var(--disabled-ink);
background: var(--disabled-bg);
border: 1px dashed var(--line-strong);
cursor: not-allowed;
transform: none;
}
.on-night .btn:not(.btn-primary):not([aria-disabled="true"]):not(:disabled) {
color: var(--on-night);
background: transparent;
border-color: #3a4558;
}
.on-night .btn:not(.btn-primary):not([aria-disabled="true"]):not(:disabled):hover {
border-color: var(--on-night);
}
.site-footer {
position: relative;
padding: clamp(48px, 6vw, 72px) 0 28px;
background: var(--surface);
border-top: 1px solid var(--line);
}
.site-footer a {
color: var(--muted);
text-decoration: none;
}
.site-footer a:hover {
color: var(--ink);
text-decoration: underline;
}
.footer-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 24px 48px;
}
.site-footer p {
margin: 0 0 6px;
color: var(--muted);
}
.site-footer .brand-small {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-links a[aria-current] {
color: var(--ink);
font-weight: 650;
}
.footer-barcode {
display: none;
}
.site-footer .footer-mark {
margin: clamp(32px, 5vw, 56px) 0 0;
padding-top: 20px;
font-size: 0.85rem;
color: var(--muted);
border-top: 1px solid var(--line);
}
html:not(.js) canvas[data-glyph-field] {
display: none;
}
.glyph-band {
display: block;
width: 100%;
height: 72px;
margin-top: clamp(40px, 5vw, 64px);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.js-reveal .rv {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition: opacity 700ms var(--ease), transform 900ms var(--ease);
transition-delay: var(--rv-delay, 0ms);
}
.js-reveal .rv.in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
}
.js-reveal .rv {
transform: none;
transition: opacity 200ms linear !important;
transition-delay: 0ms !important;
}
}
:root {
--sv-ink: #0f172a;
--sv-muted: #475569;
--sv-bg: #ffffff;
--sv-orange: #ff7a1a;
--sv-orange-deep: #e4570a;
--sv-hairline: rgba(15, 23, 42, 0.08);
--sv-line: #e5e9ef;
--sv-metal: linear-gradient(180deg, #ffffff 0%, #e6ebf1 45%, #c5cdd8 100%);
--sv-metal-low: #aab4c2;
--sv-cjk: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
--sv-latin: "Inter", "Noto Sans TC", "Segoe UI", sans-serif;
--sv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html,
body {
background: var(--sv-bg);
}
body {
font-family: var(--sv-latin);
color: var(--sv-ink);
}
.sv-wrap {
width: min(100% - 48px, 1200px);
margin-inline: auto;
}
.sv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border-radius: 999px;
font-family: var(--sv-cjk);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
transition: transform 160ms var(--sv-ease), box-shadow 160ms var(--sv-ease), background-color 160ms;
}
.sv-btn-ink {
color: #fff;
background: var(--sv-ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 16px rgba(15, 23, 42, 0.18);
}
.sv-btn-ink:hover {
color: #fff;
background: #1e293b;
transform: translateY(-1px);
}
.sv-btn-lg {
min-height: 52px;
padding: 0 30px;
font-size: 1.0625rem;
}
.sv-btn:focus-visible,
.sv-textlink:focus-visible,
.sv-nav a:focus-visible,
.sv-brand:focus-visible,
.sv-menu:focus-visible {
outline: 2px solid var(--sv-ink);
outline-offset: 3px;
}
.sv-textlink {
font-family: var(--sv-cjk);
font-weight: 500;
color: var(--sv-ink);
text-decoration: none;
padding: 10px 4px;
}
.sv-textlink span {
display: inline-block;
transition: transform 160ms var(--sv-ease), color 160ms;
}
.sv-textlink:hover {
color: var(--sv-ink);
}
.sv-textlink:hover span {
color: var(--sv-orange-deep);
transform: translateX(3px);
}
.sv-header {
position: sticky;
top: 0;
z-index: 100;
height: 64px;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--sv-hairline);
}
.sv-header-row {
display: flex;
align-items: center;
gap: 32px;
height: 100%;
}
.sv-brand {
display: inline-flex;
align-items: center;
gap: 10px;
margin-right: auto;
font-family: var(--sv-latin);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--sv-ink);
text-decoration: none;
}
.sv-brand:hover {
color: var(--sv-ink);
}
.sv-brand img {
width: 36px;
height: 36px;
}
.sv-nav ul {
display: flex;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.sv-nav a {
position: relative;
display: block;
padding: 8px 14px;
font-family: var(--sv-cjk);
font-size: 0.95rem;
font-weight: 500;
color: var(--sv-muted);
text-decoration: none;
transition: color 160ms;
}
.sv-nav a::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: scaleX(0);
transition: transform 200ms var(--sv-ease);
}
.sv-nav a[aria-current="page"] {
color: var(--sv-ink);
font-weight: 600;
}
.sv-nav a[aria-current="page"]::after {
transform: none;
}
.sv-nav a:hover {
color: var(--sv-ink);
}
.sv-menu {
display: none;
}
.sv-hero {
position: relative;
isolation: isolate;
padding-top: clamp(40px, 5.5vh, 72px);
overflow: hidden;
}
.sv-hero-copy {
text-align: center;
}
.sv-kicker {
display: inline-block;
margin: 0 0 18px;
padding: 6px 14px;
border-radius: 999px;
font-family: var(--sv-cjk);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--sv-muted);
background: #fff;
border: 1px solid var(--sv-line);
}
.sv-h1 {
margin: 0;
font-family: var(--sv-cjk);
font-size: clamp(2.4rem, 4.6vw, 4rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--sv-ink);
text-wrap: balance;
}
.sv-h1 span,
.sv-h2 span,
.sv-lead span {
display: inline-block;
}
.sv-sub > span {
display: inline-block;
}
.sv-h1 > span,
.sv-h2 > span {
white-space: nowrap;
}
.sv-lead {
max-width: 34em;
margin: 18px auto 0;
font-family: var(--sv-cjk);
font-size: 1.125rem;
line-height: 1.7;
color: var(--sv-muted);
}
.sv-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 22px;
margin-top: 28px;
}
.sv-fine {
margin: 14px 0 0;
font-family: var(--sv-cjk);
font-size: 0.85rem;
color: var(--sv-muted);
}
.sv-stage {
position: relative;
margin-top: clamp(36px, 5vh, 52px);
padding: 0 24px clamp(64px, 9vw, 120px);
}
.sv-band {
position: absolute;
left: 0;
right: 0;
top: 18%;
height: 52%;
width: 100%;
z-index: -1;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
html:not(.js) .sv-band {
visibility: hidden;
}
.sv-projector {
position: relative;
width: min(100%, 1040px);
margin: 0 auto;
padding: 10px;
border-radius: 24px;
background: #fff;
box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15, 23, 42, 0.06), 0 40px 80px -36px rgba(15, 23, 42, 0.22);
}
.sv-projector::before {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
padding: 1px;
border-radius: 25px;
background: linear-gradient(180deg, #dfe4ea 0%, #c9d1db 45%, #a3aebd 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sv-projector-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 4px 8px 12px;
font-family: var(--sv-cjk);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--sv-muted);
}
.sv-lights {
display: flex;
gap: 6px;
}
.sv-lights i {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sv-metal);
box-shadow: inset 0 -1px 0 var(--sv-metal-low), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.sv-num {
margin-left: auto;
font-family: var(--sv-latin);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.sv-screen {
border-radius: 14px;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.sv-caption {
padding: 12px 8px 4px;
font-family: var(--sv-cjk);
font-size: 0.85rem;
color: var(--sv-muted);
}
.sv-section {
padding-block: clamp(56px, 6vw, 88px);
}
.sv-hero + .sv-section {
padding-top: clamp(24px, 3vw, 40px);
}
.sv-head {
max-width: 720px;
margin: 0 auto clamp(36px, 4vw, 56px);
text-align: center;
}
.sv-h2 {
margin: 0;
font-family: var(--sv-cjk);
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--sv-ink);
text-wrap: balance;
}
.sv-sub {
margin: 14px 0 0;
font-family: var(--sv-cjk);
font-size: 1.0625rem;
line-height: 1.7;
color: var(--sv-muted);
text-wrap: pretty;
}
.sv-sub a {
color: var(--sv-ink);
}
.sv-more {
margin: clamp(28px, 3vw, 40px) 0 0;
font-family: var(--sv-cjk);
text-align: center;
color: var(--sv-muted);
}
.sv-more .sv-textlink {
margin-left: 6px;
white-space: nowrap;
}
.js-reveal .sv-rv.rv {
transform: translate3d(0, 8px, 0);
transition: opacity 500ms var(--sv-ease), transform 600ms var(--sv-ease);
transition-delay: var(--rv-delay, 0ms);
}
.js-reveal .sv-rv.rv.in {
transform: none;
}
.sv-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.sv-card {
padding: 10px 10px 22px;
border-radius: 20px;
background: #fff;
border: 1px solid var(--sv-line);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: box-shadow 200ms var(--sv-ease), transform 200ms var(--sv-ease);
}
.sv-card:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.18);
}
.sv-shot {
margin: 0 0 18px;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
background: #f1f4f7;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.sv-shot img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sv-shot-ui {
display: grid;
place-items: center;
padding: 10px;
}
.sv-shot-ui img {
height: auto;
object-fit: contain;
border-radius: 8px;
}
.sv-card h3 {
margin: 0 12px 6px;
font-family: var(--sv-cjk);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.4;
}
.sv-card p {
margin: 0 12px;
font-family: var(--sv-cjk);
font-size: 0.975rem;
line-height: 1.7;
color: var(--sv-muted);
}
.sv-theme-box.themes {
padding: 0;
border: 0;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--sv-line), 0 40px 80px -48px rgba(15, 23, 42, 0.3);
}
.sv-theme-box .showcase {
--slide-w: min(calc(100vw - 48px - 220px), 960px);
--slide-gap: clamp(16px, 2vw, 28px);
}
.sv-theme-box .tc-track {
padding: 0 calc(50% - var(--slide-w) / 2);
}
.sv-theme-box .tc-viewport {
padding: clamp(28px, 3.4vw, 44px) 0 clamp(20px, 2.6vw, 32px);
}
.sv-theme-box .tc-caption {
justify-content: center;
}
.sv-theme-note {
margin: 20px auto 0;
max-width: 40em;
font-family: var(--sv-cjk);
font-size: 0.95rem;
text-align: center;
color: var(--sv-muted);
}
.sv-offline {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: 32px 64px;
padding: clamp(32px, 5vw, 64px);
border-radius: 28px;
background: #fff;
border: 1px solid var(--sv-line);
box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.2);
}
.sv-checks {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.sv-checks li {
position: relative;
padding-left: 38px;
font-family: var(--sv-cjk);
font-size: 1.0625rem;
line-height: 1.6;
}
.sv-checks li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--sv-metal);
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 var(--sv-metal-low), 0 1px 2px rgba(15, 23, 42, 0.12);
}
.sv-checks li::after {
content: "";
position: absolute;
left: 9px;
top: 6px;
width: 6px;
height: 11px;
border: solid var(--sv-ink);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.sv-prices {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.sv-price {
position: relative;
display: flex;
flex-direction: column;
padding: 32px 28px 28px;
border-radius: 22px;
background: #fff;
border: 1px solid var(--sv-line);
}
.sv-price h3 {
margin: 0;
font-family: var(--sv-cjk);
font-size: 1.1rem;
font-weight: 700;
}
.sv-amount {
display: flex;
align-items: baseline;
gap: 8px;
margin: 14px 0 20px;
font-family: var(--sv-latin);
font-variant-numeric: tabular-nums;
}
.sv-amount .amount {
font-size: 2.4rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
}
.sv-amount .per,
.sv-amount .was {
font-family: var(--sv-cjk);
color: var(--sv-muted);
}
.sv-price ul {
flex: 1;
margin: 0 0 24px;
padding: 20px 0 0;
list-style: none;
border-top: 1px solid var(--sv-line);
}
.sv-price li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
font-family: var(--sv-cjk);
font-size: 0.975rem;
line-height: 1.6;
color: var(--sv-muted);
}
.sv-price li::before {
content: "";
position: absolute;
left: 2px;
top: 0.7em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #b8c2cf;
}
.sv-price .sv-btn {
align-self: stretch;
}
.sv-price-metal {
border: 1.5px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(180deg, #e6ebf1 0%, #c5cdd8 50%, #9aa6b6 100%) border-box;
box-shadow: inset 0 1px 0 #fff, 0 30px 60px -36px rgba(15, 23, 42, 0.28);
}
.sv-badge {
position: absolute;
top: -12px;
right: 24px;
margin: 0;
padding: 3px 12px;
border-radius: 999px;
font-family: var(--sv-cjk);
font-size: 0.8rem;
font-weight: 500;
color: var(--sv-ink);
background: var(--sv-metal);
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 var(--sv-metal-low);
}
.sv-btn-ghost {
color: var(--sv-ink);
background: #fff;
border: 1px solid #d5dce5;
}
.sv-btn-ghost:hover {
color: var(--sv-ink);
border-color: var(--sv-ink);
}
.sv-finale {
text-align: center;
padding-bottom: clamp(88px, 11vw, 140px);
}
.sv-finale .sv-sub {
margin-top: 12px;
}
.sv-footer {
border-top: 1px solid var(--sv-line);
padding-block: 28px;
}
.sv-footer-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
}
.sv-footer .sv-brand {
margin-right: 0;
font-size: 1rem;
}
.sv-footer .sv-brand img {
width: 28px;
height: 28px;
}
.sv-footer-links {
display: flex;
flex-wrap: wrap;
gap: 4px 20px;
margin: 0;
padding: 0;
list-style: none;
}
.sv-footer-links a {
font-family: var(--sv-cjk);
font-size: 0.9rem;
color: var(--sv-muted);
text-decoration: none;
}
.sv-footer-links a:hover {
color: var(--sv-ink);
}
.sv-copy {
margin: 0 0 0 auto;
font-size: 0.85rem;
color: var(--sv-muted);
}
@media (max-width: 1024px) {
.sv-cards {
grid-template-columns: repeat(2, 1fr);
}
.sv-prices {
grid-template-columns: 1fr;
max-width: 520px;
margin-inline: auto;
}
}
@media (max-width: 860px) {
.sv-wrap {
width: min(100% - 32px, 1200px);
}
.sv-header-row {
gap: 10px;
}
.sv-header-cta {
min-height: 36px;
padding: 0 14px;
font-size: 0.875rem;
}
.js .sv-menu {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 12px;
border: 1px solid var(--sv-line);
border-radius: 999px;
font: 500 0.875rem/1 var(--sv-cjk);
color: var(--sv-ink);
background: #fff;
cursor: pointer;
}
.sv-menu span,
.sv-menu span::before {
display: block;
width: 14px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
transition: transform 200ms var(--sv-ease);
}
.sv-menu span {
position: relative;
box-shadow: 0 -4px 0 currentColor;
transform: translateY(2px);
}
.sv-menu span::before {
content: "";
position: absolute;
top: 4px;
}
.sv-menu[aria-expanded="true"] span {
box-shadow: none;
transform: rotate(45deg);
}
.sv-menu[aria-expanded="true"] span::before {
top: 0;
transform: rotate(-90deg);
}
.js .sv-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: calc(100dvh - 64px);
z-index: 99;
padding: 24px 16px;
background: #fff;
border-top: 1px solid var(--sv-hairline);
opacity: 0;
visibility: hidden;
transition: opacity 200ms, visibility 0s 200ms;
}
.js .sv-nav.is-open {
opacity: 1;
visibility: visible;
transition: opacity 200ms;
}
.js .sv-nav ul {
flex-direction: column;
gap: 0;
}
.js .sv-nav a {
padding: 16px 8px;
border-radius: 0;
border-bottom: 1px solid var(--sv-hairline);
font-size: 1.25rem;
color: var(--sv-ink);
}
.js .sv-nav a::after {
left: -16px;
right: auto;
top: 18px;
bottom: 18px;
width: 3px;
height: auto;
transform: scaleY(0);
}
.js .sv-nav a[aria-current="page"]::after {
transform: none;
}
.sv-menu-open {
overflow: hidden;
}
.sv-hero {
padding-top: 40px;
}
.sv-section {
padding-block: 56px;
}
.sv-kicker {
margin-bottom: 16px;
}
.sv-h1 {
font-size: 2.2rem;
}
.sv-lead {
font-size: 1rem;
}
.sv-cta {
margin-top: 24px;
}
.sv-stage {
margin-top: 40px;
padding: 0 16px 64px;
}
.sv-projector {
padding: 6px;
border-radius: 18px;
}
.sv-projector::before {
border-radius: 19px;
}
.sv-projector-bar {
padding: 4px 6px 8px;
}
.sv-screen {
border-radius: 12px;
}
.sv-caption {
padding: 8px 6px 2px;
font-size: 0.8rem;
}
.sv-cards {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.sv-card {
padding: 6px 6px 14px;
border-radius: 16px;
}
.sv-shot {
margin-bottom: 10px;
border-radius: 10px;
}
.sv-shot-ui {
padding: 4px;
}
.sv-card h3 {
margin: 0 6px 4px;
font-size: 1rem;
}
.sv-card p {
margin: 0 6px;
font-size: 0.85rem;
line-height: 1.6;
}
.sv-offline {
grid-template-columns: 1fr;
}
.sv-theme-box.themes {
border-radius: 20px;
}
.sv-theme-box .showcase {
--slide-w: calc(100vw - 32px - 84px);
--slide-gap: 12px;
}
.sv-copy {
margin-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sv-btn,
.sv-textlink span {
transition: none;
}
}
.sv-screen > video {
inset: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
}
body {
letter-spacing: 0.04em;
}
.sv-h1,
.sv-h2 {
letter-spacing: 0.035em;
}
.sv-sub,
.sv-lead,
.sv-more,
.sv-theme-note,
.sv-card p,
.sv-checks li,
.sv-price li,
.sv-caption,
.sv-fine,
.sv-kicker {
letter-spacing: 0.045em;
}
.sv-card h3,
.sv-price h3 {
letter-spacing: 0.04em;
}
.sv-btn {
letter-spacing: 0.08em;
}
.sv-nav a,
.sv-footer-links a,
.sv-textlink {
letter-spacing: 0.06em;
}
.nw {
white-space: nowrap;
}
@font-face {
font-family: "Outfit";
font-weight: 100 900;
font-display: swap;
src: url("../fonts/outfit-latin-wght.woff2") format("woff2");
}
@font-face {
font-family: "Bebas Neue";
font-display: swap;
src: url("../fonts/bebas-neue-latin-400.woff2") format("woff2");
}
@font-face {
font-family: "Silkscreen";
font-display: swap;
src: url("../fonts/silkscreen-latin-400.woff2") format("woff2");
}
@font-face {
font-family: "Archivo Black";
font-display: swap;
src: url("../fonts/archivo-black-latin-400.woff2") format("woff2");
}
.themes {
--tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0V56M0 56H56' fill='none' stroke='%23E6E5E0' stroke-width='2'/%3E%3C/svg%3E");
--checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23FFE033'/%3E%3Crect width='6' height='6' fill='%23111'/%3E%3Crect x='6' y='6' width='6' height='6' fill='%23111'/%3E%3C/svg%3E");
--burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 204 114' preserveAspectRatio='none'%3E%3Cg stroke-linejoin='round'%3E%3Cpolygon transform='translate(5 5)' fill='%23111' stroke='%23111' stroke-width='3' points='98,10 116,17 131,17 140,24 165,23 160,34 176,39 171,48 189,55 171,63 174,71 161,75 164,87 140,87 129,93 114,92 98,101 84,92 70,94 60,86 38,88 40,75 26,71 28,62 9,55 28,48 26,40 37,34 38,23 58,25 70,16 87,18'/%3E%3Cpolygon fill='%23FFE033' stroke='%23111' stroke-width='3' points='98,10 116,17 131,17 140,24 165,23 160,34 176,39 171,48 189,55 171,63 174,71 161,75 164,87 140,87 129,93 114,92 98,101 84,92 70,94 60,86 38,88 40,75 26,71 28,62 9,55 28,48 26,40 37,34 38,23 58,25 70,16 87,18'/%3E%3C/g%3E%3C/svg%3E");
--burst-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 406 106' preserveAspectRatio='none'%3E%3Cg stroke-linejoin='round'%3E%3Cpolygon transform='translate%285 5%29' fill='%23111' stroke='%23111' stroke-width='3' points='18,20 27,6 36,20 45,5 54,20 63,7 72,20 81,4 90,20 99,7 108,20 117,6 126,20 135,4 144,20 153,7 162,20 171,4 180,20 189,6 198,20 207,4 216,20 225,4 234,20 243,6 252,20 261,8 270,20 279,5 288,20 297,5 306,20 315,7 324,20 333,9 342,20 351,7 360,20 369,6 378,20 382,9 382,20 396,30 382,40 393,50 382,60 395,70 382,80 373,95 364,80 355,95 346,80 337,94 328,80 319,92 310,80 301,95 292,80 283,93 274,80 265,93 256,80 247,94 238,80 229,93 220,80 211,96 202,80 193,96 184,80 175,95 166,80 157,93 148,80 139,94 130,80 121,94 112,80 103,93 94,80 85,94 76,80 67,95 58,80 49,92 40,80 31,93 22,80 18,95 18,80 6,70 18,60 6,50 18,40 8,30'/%3E%3Cpolygon fill='%23FFE033' stroke='%23111' stroke-width='3' points='18,20 27,6 36,20 45,5 54,20 63,7 72,20 81,4 90,20 99,7 108,20 117,6 126,20 135,4 144,20 153,7 162,20 171,4 180,20 189,6 198,20 207,4 216,20 225,4 234,20 243,6 252,20 261,8 270,20 279,5 288,20 297,5 306,20 315,7 324,20 333,9 342,20 351,7 360,20 369,6 378,20 382,9 382,20 396,30 382,40 393,50 382,60 395,70 382,80 373,95 364,80 355,95 346,80 337,94 328,80 319,92 310,80 301,95 292,80 283,93 274,80 265,93 256,80 247,94 238,80 229,93 220,80 211,96 202,80 193,96 184,80 175,95 166,80 157,93 148,80 139,94 130,80 121,94 112,80 103,93 94,80 85,94 76,80 67,95 58,80 49,92 40,80 31,93 22,80 18,95 18,80 6,70 18,60 6,50 18,40 8,30'/%3E%3C/g%3E%3C/svg%3E");
--t-ink: #111111;
--t-muted: #45454b;
--t-title: #111111;
--t-title-shadow: none;
--t-display: var(--sans);
--t-display-weight: 800;
--t-label-font: "Archivo Black", var(--sans);
--t-label-bg: #ffe033;
--t-label-fg: #111111;
--t-label-border: 2px solid #111111;
--t-label-radius: 2px;
--t-label-shadow: 3px 3px 0 #111111;
--t-label-rot: -3deg;
--t-frame-bg: #111111;
--t-frame-border: 2px solid #111111;
--t-frame-radius: 0px;
--t-frame-pad: 0px;
--t-frame-shadow: 4px 4px 0 #111111;
--t-frame-shadow-on: 12px 12px 0 #ffe033, 12px 12px 0 2px #111111;
--t-chip-bg: #ffe033;
--t-chip-fg: #111111;
--t-chip-border: 2px solid #111111;
--t-chip-radius: 2px;
--t-btn-bg: #ffffff;
--t-btn-fg: #111111;
--t-btn-border: 2px solid #111111;
--t-btn-radius: 2px;
--t-btn-shadow: 3px 3px 0 #111111;
--t-btn-hover: #ffe033;
--t-dot: #ffffff;
--t-dot-border: 2px solid #111111;
--t-dot-radius: 0;
--t-dot-on: #111111;
--t-focus: #111111;
--t-focus-halo: #ffe033;
--t-tape: block;
--t-label-pad: 4px 14px;
color: var(--t-ink);
}
.themes[data-theme="soft-glass"] {
--t-ink: #1e1c1a;
--t-muted: #665f58;
--t-title: #1e1c1a;
--t-display: var(--sans);
--t-display-weight: 300;
--t-label-font: "Outfit", var(--sans);
--t-label-bg: rgba(251, 248, 243, 0.8);
--t-label-fg: #1e1c1a;
--t-label-border: 1px solid rgba(30, 28, 26, 0.1);
--t-label-radius: 999px;
--t-label-shadow: 0 8px 20px -12px rgba(60, 40, 20, 0.35);
--t-label-rot: 0deg;
--t-frame-bg: rgba(250, 246, 240, 0.62);
--t-frame-border: 1px solid rgba(255, 255, 255, 0.85);
--t-frame-radius: 30px;
--t-frame-pad: 10px;
--t-frame-shadow: 0 14px 34px -16px rgba(60, 40, 20, 0.28);
--t-frame-shadow-on: 0 34px 80px -26px rgba(40, 26, 12, 0.42), 0 8px 20px rgba(40, 26, 12, 0.08);
--t-chip-bg: #1e1c1a;
--t-chip-fg: #ffffff;
--t-chip-border: 1px solid #1e1c1a;
--t-chip-radius: 999px;
--t-btn-bg: #1e1c1a;
--t-btn-fg: #ffffff;
--t-btn-border: 1px solid #1e1c1a;
--t-btn-radius: 999px;
--t-btn-shadow: 0 10px 22px -12px rgba(40, 26, 12, 0.6);
--t-btn-hover: #36312d;
--t-dot: rgba(30, 28, 26, 0.18);
--t-dot-border: 0 solid transparent;
--t-dot-radius: 999px;
--t-dot-on: #ff7a1a;
--t-focus: #c4570c;
--t-focus-halo: rgba(255, 122, 26, 0.26);
--t-tape: none;
}
.themes[data-theme="paper-parade"] {
--t-ink: #1a1a1a;
--t-muted: #4f4a43;
--t-title: #1a1a1a;
--t-display: var(--sans);
--t-display-weight: 700;
--t-label-font: "Bebas Neue", var(--sans);
--t-label-bg: transparent;
--t-label-fg: #1a1a1a;
--t-label-border: 0 solid transparent;
--t-label-radius: 0;
--t-label-shadow: none;
--t-label-rot: 0deg;
--t-frame-bg: #fffdf7;
--t-frame-border: 2px solid #1a1a1a;
--t-frame-radius: 22px;
--t-frame-pad: 10px;
--t-frame-shadow: 0 2px 0 rgba(26, 26, 26, 0.07), 0 16px 28px -20px rgba(92, 70, 30, 0.5);
--t-frame-shadow-on: 0 3px 0 rgba(26, 26, 26, 0.08), 0 34px 60px -26px rgba(70, 50, 18, 0.55);
--t-chip-bg: #f7c530;
--t-chip-fg: #1a1a1a;
--t-chip-border: 2px solid #1a1a1a;
--t-chip-radius: 9px;
--t-btn-bg: #f7c530;
--t-btn-fg: #1a1a1a;
--t-btn-border: 2px solid #1a1a1a;
--t-btn-radius: 16px;
--t-btn-shadow: 0 2px 0 #1a1a1a;
--t-btn-hover: #efb714;
--t-dot: #fffdf7;
--t-dot-border: 2px solid #1a1a1a;
--t-dot-radius: 999px;
--t-dot-on: #1b6fae;
--t-focus: #1b6fae;
--t-focus-halo: rgba(47, 155, 224, 0.3);
--t-tape: none;
}
.themes[data-theme="pop-collage"] {
--t-title: #d42a17;
--t-title-shadow: 3px 3px 0 #111111;
--t-display: var(--sans);
--t-display-weight: 800;
--t-label-bg: var(--burst-wide) center / 100% 100% no-repeat;
--t-label-pad: 12px 26px 15px 24px;
--t-label-border: 0 solid transparent;
--t-label-shadow: none;
--t-btn-hover: #ffe033;
--t-focus: #2f5bff;
--t-focus-halo: rgba(47, 91, 255, 0.3);
}
.themes[data-theme="playful-desk"] {
--t-ink: #171717;
--t-muted: #4f473d;
--t-title: #171717;
--t-display: var(--sans);
--t-display-weight: 700;
--t-label-font: var(--sans);
--t-label-bg: #0864a3;
--t-label-fg: #ffffff;
--t-label-border: 0 solid transparent;
--t-label-radius: 8px;
--t-label-shadow: 0 2px 0 #06548a;
--t-label-rot: -2deg;
--t-frame-bg: #fbf6ea;
--t-frame-border: 1px solid #dccbad;
--t-frame-radius: 20px;
--t-frame-pad: 12px;
--t-frame-shadow: 0 2px 0 rgba(160, 128, 84, 0.34), 0 10px 22px -8px rgba(90, 64, 30, 0.28);
--t-frame-shadow-on: 0 3px 0 rgba(160, 128, 84, 0.4), 0 28px 60px -16px rgba(60, 40, 15, 0.42);
--t-chip-bg: #e3f3fd;
--t-chip-fg: #0864a3;
--t-chip-border: 1px solid #7ccbfa;
--t-chip-radius: 8px;
--t-btn-bg: #fffdf7;
--t-btn-fg: #171717;
--t-btn-border: 1px solid #c9b590;
--t-btn-radius: 14px;
--t-btn-shadow: 0 2px 0 #c9b590;
--t-btn-hover: #fff3c9;
--t-dot: #fffdf7;
--t-dot-border: 1px solid #c9b590;
--t-dot-radius: 999px;
--t-dot-on: #ff5a2c;
--t-focus: #0864a3;
--t-focus-halo: rgba(77, 181, 245, 0.35);
--t-tape: none;
}
.themes[data-theme="pixel-sky"] {
--t-ink: #1b2233;
--t-muted: #3c475c;
--t-title: #1b2233;
--t-display: var(--sans);
--t-display-weight: 900;
--t-label-font: "Silkscreen", var(--sans);
--t-label-bg: #1f5bf0;
--t-label-fg: #ffffff;
--t-label-border: 0 solid transparent;
--t-label-radius: 2px;
--t-label-shadow: 4px 4px 0 rgba(12, 28, 56, 0.22);
--t-label-rot: 0deg;
--t-frame-bg: #ffffff;
--t-frame-border: 3px solid #1f5bf0;
--t-frame-radius: 3px;
--t-frame-pad: 6px;
--t-frame-shadow: 4px 4px 0 rgba(31, 91, 240, 0.16);
--t-frame-shadow-on: 8px 8px 0 rgba(12, 28, 56, 0.22);
--t-chip-bg: #1f5bf0;
--t-chip-fg: #ffffff;
--t-chip-border: 0 solid transparent;
--t-chip-radius: 2px;
--t-btn-bg: #1f5bf0;
--t-btn-fg: #ffffff;
--t-btn-border: 0 solid transparent;
--t-btn-radius: 2px;
--t-btn-shadow: 4px 4px 0 rgba(12, 28, 56, 0.25);
--t-btn-hover: #1747c4;
--t-dot: #ffffff;
--t-dot-border: 2px solid #1f5bf0;
--t-dot-radius: 0;
--t-dot-on: #1f5bf0;
--t-focus: #1b2233;
--t-focus-halo: #ffffff;
--t-tape: none;
}
.themes[data-theme="halftone-comic"] {
--t-ink: #111111;
--t-muted: #3d3d3d;
--t-title: #111111;
--t-display-weight: 900;
--t-label-font: var(--sans);
--t-label-bg: #111111;
--t-label-fg: #ffd21f;
--t-label-border: 0 solid transparent;
--t-label-radius: 999px;
--t-label-shadow: none;
--t-label-rot: 0deg;
--t-frame-bg: #ffffff;
--t-frame-border: 3px solid #111111;
--t-frame-radius: 22px;
--t-frame-pad: 10px;
--t-frame-shadow: 4px 4px 0 #111111;
--t-frame-shadow-on: 7px 7px 0 #111111;
--t-chip-bg: #111111;
--t-chip-fg: #ffd21f;
--t-chip-border: 0 solid transparent;
--t-chip-radius: 999px;
--t-btn-bg: #111111;
--t-btn-fg: #ffd21f;
--t-btn-border: 2px solid #111111;
--t-btn-radius: 999px;
--t-btn-shadow: 3px 3px 0 #ffffff;
--t-btn-hover: #2e2e2e;
--t-dot: #ffffff;
--t-dot-border: 2px solid #111111;
--t-dot-radius: 999px;
--t-dot-on: #111111;
--t-focus: #111111;
--t-focus-halo: #ffffff;
--t-tape: none;
}
.themes .showcase,
.themes .showcase-head,
.themes .tc-controls {
position: relative;
z-index: 1;
}
.themes .showcase-head h2 {
font-family: var(--t-display);
font-weight: var(--t-display-weight);
color: var(--t-title);
text-shadow: var(--t-title-shadow);
}
.themes .showcase-head p:not(.themes-label),
.themes .tc-caption .en {
color: var(--t-muted);
}
.themes .tc-caption {
color: var(--t-ink);
}
.themes .themes-label {
display: flex;
width: max-content;
padding: var(--t-label-pad);
margin-left: 0;
font-family: var(--t-label-font);
color: var(--t-label-fg);
background: var(--t-label-bg);
border: var(--t-label-border);
border-radius: var(--t-label-radius);
box-shadow: var(--t-label-shadow);
transform: rotate(var(--t-label-rot));
}
.themes .tc-slide .screen-bezel {
padding: var(--t-frame-pad);
background: var(--t-frame-bg);
border: var(--t-frame-border);
border-radius: var(--t-frame-radius);
box-shadow: var(--t-frame-shadow);
}
.themes .tc-slide.is-active .screen-bezel {
box-shadow: var(--t-frame-shadow-on);
}
.themes .tc-slide .screen-glass {
border-radius: max(0px, calc(var(--t-frame-radius) - var(--t-frame-pad)));
}
.themes .tc-slide::before {
content: "";
position: absolute;
z-index: 3;
left: -26px;
top: 18px;
width: 128px;
height: 24px;
display: var(--t-tape);
background: var(--checker);
border: 2px solid #111111;
transform: rotate(-32deg);
opacity: 0;
transition: opacity 200ms ease;
}
.themes .tc-slide.is-active::before {
opacity: 1;
}
.themes .tc-progress {
background: var(--t-dot);
}
.themes .tc-progress i {
background: var(--t-dot-on);
}
.themes .tc-caption .tc-no {
color: var(--t-chip-fg);
background: var(--t-chip-bg);
border: var(--t-chip-border);
border-radius: var(--t-chip-radius);
padding: 0 8px;
}
.themes .tc-btn {
color: var(--t-btn-fg);
background: var(--t-btn-bg);
border: var(--t-btn-border);
border-radius: var(--t-btn-radius);
box-shadow: var(--t-btn-shadow);
}
.themes .tc-btn:hover {
background: var(--t-btn-hover);
}
.themes .tc-dot::before {
background: var(--t-dot);
border: var(--t-dot-border);
border-radius: var(--t-dot-radius);
}
.themes .tc-dot[aria-current="true"]::before {
background: var(--t-dot-on);
border-color: var(--t-dot-on);
}
.themes :focus-visible {
outline-color: var(--t-focus);
box-shadow: 0 0 0 6px var(--t-focus-halo);
}
.themes .showcase-head h2,
.themes .showcase-head p:not(.themes-label),
.themes .themes-label,
.themes .tc-caption,
.themes .tc-caption .tc-no,
.themes .tc-btn,
.themes .tc-dot::before,
.themes .tc-slide .screen-bezel {
transition: color 380ms ease, background-color 380ms ease, border-color 380ms ease, box-shadow 380ms ease,
border-radius 380ms ease, text-shadow 380ms ease;
}
.theme-stage {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.tb {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 420ms ease;
}
.tb > * {
position: absolute;
display: block;
transform: translate3d(0, 24px, 0) scale(0.96);
transition: transform 520ms cubic-bezier(0.2, 0.9, 0.1, 1);
}
.themes[data-theme="soft-glass"] .tb-soft-glass,
.themes[data-theme="paper-parade"] .tb-paper-parade,
.themes[data-theme="pop-collage"] .tb-pop-collage,
.themes[data-theme="playful-desk"] .tb-playful-desk,
.themes[data-theme="pixel-sky"] .tb-pixel-sky,
.themes[data-theme="halftone-comic"] .tb-halftone-comic {
opacity: 1;
}
.themes[data-theme="soft-glass"] .tb-soft-glass > *,
.themes[data-theme="paper-parade"] .tb-paper-parade > *,
.themes[data-theme="pop-collage"] .tb-pop-collage > *,
.themes[data-theme="playful-desk"] .tb-playful-desk > *,
.themes[data-theme="pixel-sky"] .tb-pixel-sky > *,
.themes[data-theme="halftone-comic"] .tb-halftone-comic > * {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.tb,
.tb > * {
transition: none !important;
}
}
.tb-soft-glass {
background:
radial-gradient(900px 520px at 88% 8%, rgba(255, 178, 122, 0.55), transparent 62%),
radial-gradient(700px 500px at 0% 100%, rgba(255, 255, 255, 0.7), transparent 60%),
linear-gradient(160deg, #f3ece3 0%, #efe7dd 45%, #e4d8ca 100%);
}
.sg-orb {
right: 6%;
top: 70px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #ffc08f, #ff7a1a 56%, #e4570a);
box-shadow: 0 30px 70px -10px rgba(255, 122, 26, 0.55);
}
.sg-ring {
left: -120px;
bottom: -160px;
width: 520px;
height: 520px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.9);
background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 60%);
}
.themes[data-theme="soft-glass"] .tc-slide .screen-bezel {
-webkit-backdrop-filter: blur(18px) saturate(1.3);
backdrop-filter: blur(18px) saturate(1.3);
}
.themes[data-theme="soft-glass"] .themes-label::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff7a1a;
}
.tb-paper-parade {
background-color: #fbf7ee;
background-image: repeating-linear-gradient(0deg, transparent 0 35px, rgba(26, 26, 26, 0.05) 35px 36px);
}
.pp-string {
right: 3%;
top: 24px;
width: 200px;
}
.pp-kids {
right: 5%;
bottom: 28px;
width: 150px;
}
.themes[data-theme="paper-parade"] .showcase-head h2 {
display: inline-block;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13c40-6 90-8 194-5' fill='none' stroke='%23F7C530' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 100% 0.45em no-repeat;
}
.themes[data-theme="paper-parade"] .themes-label {
font-size: 1.05rem;
letter-spacing: 0.16em;
}
.tb-pop-collage {
background: var(--tiles), #f4f4f2;
}
.pc-tape {
right: 8%;
top: 56px;
width: 170px;
height: 26px;
background: var(--checker);
border: 2px solid #111111;
rotate: 8deg;
}
.pc-burst {
left: -40px;
bottom: -30px;
width: 220px;
aspect-ratio: 204 / 114;
background: var(--burst) center / 100% 100% no-repeat;
rotate: -12deg;
}
.tb-playful-desk {
background:
radial-gradient(800px 420px at 100% 0%, rgba(255, 253, 247, 0.55), transparent 60%),
linear-gradient(180deg, #e9dcc7 0%, #dfcfb5 100%);
}
.pd-arc {
left: -140px;
bottom: -220px;
width: 520px;
height: 520px;
border-radius: 50%;
border: 6px dashed #ff5a2c;
}
.pd-flag {
right: 4%;
top: 46px;
width: 64px;
height: 64px;
background: repeating-conic-gradient(#171717 0 25%, #fffdf7 0 50%) 0 0 / 16px 16px;
border-radius: 6px;
box-shadow: 0 3px 0 rgba(160, 128, 84, 0.4);
rotate: 8deg;
}
.pd-pencil {
right: 12%;
bottom: 44px;
width: 200px;
height: 18px;
border-radius: 4px 9px 9px 4px;
background: linear-gradient(90deg, #f7a6a6 0 12%, #c9cfd6 12% 18%, #ffc83d 18% 86%, #f3d9b3 86%);
clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
rotate: -8deg;
}
.themes[data-theme="playful-desk"] .showcase-head h2::before,
.themes[data-theme="playful-desk"] .showcase-head h2::after {
color: #ff5a2c;
font-weight: 800;
}
.themes[data-theme="playful-desk"] .showcase-head h2::before {
content: "{" / "";
margin-right: 0.08em;
}
.themes[data-theme="playful-desk"] .showcase-head h2::after {
content: "}" / "";
margin-left: 0.08em;
}
.tb-pixel-sky {
background: linear-gradient(180deg, #8fd3f0 0%, #b9e4f6 38%, #def2fb 100%);
}
.tb-pixel-sky svg {
image-rendering: pixelated;
}
.ps-cloud-1 {
right: 28%;
top: 44px;
width: 176px;
}
.ps-cloud-2 {
right: 18%;
bottom: 120px;
width: 128px;
}
.ps-sun {
right: 6%;
top: 48px;
width: 80px;
}
.themes[data-theme="pixel-sky"] .showcase-head h2 {
letter-spacing: 0.04em;
}
.themes[data-theme="pixel-sky"] .themes-label {
font-size: 0.9rem;
letter-spacing: 0.06em;
}
.tb-halftone-comic {
background: #ffd21f;
}
.hc-dots {
width: 360px;
height: 360px;
background: radial-gradient(circle, #111111 0 30%, transparent 33%) 0 0 / 12px 12px;
-webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0 30%, transparent 70%);
mask-image: radial-gradient(circle at 100% 0%, #000 0 30%, transparent 70%);
}
.hc-dots-1 {
right: 0;
top: 0;
}
.hc-dots-2 {
left: 0;
bottom: 0;
rotate: 180deg;
}
.hc-lines {
left: 0;
right: 0;
width: auto;
top: 46%;
height: 120px;
background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(17, 17, 17, 0.12) 46px 48px);
-webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
}
@media (max-width: 760px) {
.pp-string,
.sg-ring,
.pd-pencil,
.ps-cloud-2 {
display: none;
}
.pp-kids {
width: 96px;
bottom: 12px;
}
.sg-orb {
width: 96px;
height: 96px;
top: 24px;
}
.ps-sun,
.pd-flag {
width: 48px;
top: 24px;
}
.pd-flag {
height: 48px;
}
}
@font-face {
font-family: "Nunito";
font-weight: 200 1000;
font-display: swap;
src: url("../fonts/nunito-latin-wght.woff2") format("woff2");
}
.th-head {
padding: clamp(48px, 6vw, 88px) 0 56px;
}
.th-head .sv-sub {
margin-top: 12px;
}
.th-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.th-swatch {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 16px 0 12px;
border: 1px solid #d5dce5;
border-radius: 999px;
font-family: var(--sv-cjk);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--sv-ink);
text-decoration: none;
background: #fff;
}
.th-swatch::before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--sw);
}
.th-swatch:hover {
border-color: var(--sv-ink);
color: var(--sv-ink);
}
.th-sec {
position: relative;
isolation: isolate;
min-height: 86vh;
display: flex;
align-items: center;
padding-block: clamp(80px, 9vw, 128px);
color: #0f172a;
scroll-margin-top: 64px;
}
.th-sec > .theme-stage {
overflow: hidden;
}
.th-sec .tb {
opacity: 1;
}
.th-sec .tb > * {
transform: none;
}
.th-inner {
position: relative;
z-index: 2;
width: min(100% - 48px, 1200px);
}
.th-title {
margin: 0;
line-height: 0.95;
font-feature-settings: normal;
}
.th-screen {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #1b1f27;
}
.th-screen img,
.th-screen video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.th-screen video {
opacity: 0;
transition: opacity 300ms linear;
}
.th-screen.is-playing video {
opacity: 1;
}
.th-sec figure {
margin: 0;
}
.th-sec figure img {
display: block;
width: 100%;
height: auto;
}
.th-plate {
padding: 18px 22px;
border-radius: 14px;
color: #0f172a;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.12);
}
.th-plate h3 {
margin: 0 0 4px;
font-family: var(--sv-cjk);
color: #0f172a;
}
.th-plate p {
margin: 0;
font-family: var(--sv-cjk);
font-size: var(--t-body);
line-height: 1.6;
letter-spacing: 0.02em;
color: #334155;
}
.th-plate .th-no {
margin-bottom: 6px;
font-family: var(--sv-latin);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
color: #475569;
}
.js .th-sec:not(.in):not(.th-soft-glass) .th-inner {
opacity: 0;
}
.th-soft-glass .th-inner {
text-align: center;
}
.th-soft-glass .th-title {
font-family: "Outfit", var(--sv-latin);
font-weight: 300;
font-size: clamp(64px, 8vw, 120px);
letter-spacing: 0.18em;
color: #6f665f;
margin-bottom: 28px;
}
.th-sg-stack {
position: relative;
width: min(100%, 66%);
margin: 0 auto;
}
.th-soft-glass .th-frame .th-screen {
border-radius: 22px;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.55), 0 40px 90px -30px rgba(120, 70, 30, 0.45);
}
.th-plate-glass {
position: relative;
width: min(420px, 86%);
margin: -44px auto 0;
text-align: left;
border-radius: 20px;
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 24px 50px -24px rgba(120, 70, 30, 0.45);
}
.th-loaded .th-plate-glass {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.th-loaded .th-soft-glass.in .sg-orb {
animation: th-sg-orb 1200ms ease both;
}
@keyframes th-sg-in {
from {
opacity: 0;
filter: blur(10px);
}
to {
opacity: 1;
filter: blur(0);
}
}
@keyframes th-sg-orb {
from {
transform: translateY(40px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.th-paper-parade .th-inner {
display: grid;
grid-template-columns: 40fr 60fr;
align-items: center;
gap: clamp(32px, 5vw, 72px);
}
.th-paper-parade .th-title {
font-weight: 400;
font-size: clamp(80px, 9vw, 128px);
letter-spacing: 0.04em;
color: #1a1a1a;
margin-bottom: 20px;
}
.th-paper-parade .th-plate {
border: 2px solid #1a1a1a;
border-radius: 18px 14px 20px 12px;
background: #fffdf7;
}
.th-paper-parade .th-plate h3 {
display: inline;
background: linear-gradient(transparent 58%, #f7c530 58%, #f7c530 90%, transparent 90%);
}
.th-pp-art {
position: relative;
}
.th-paper-parade .th-frame {
transform: rotate(-1.5deg);
}
.th-paper-parade .th-screen {
border: 2px solid #1a1a1a;
border-radius: 16px;
box-shadow: 6px 6px 0 rgba(26, 26, 26, 0.18);
}
.th-photo {
position: absolute;
right: -18px;
bottom: -64px;
width: 42%;
padding: 8px 8px 22px;
background: #fff;
border: 2px solid #1a1a1a;
transform: rotate(4deg);
box-shadow: 4px 6px 0 rgba(26, 26, 26, 0.2);
}
.th-photo::before {
content: "";
position: absolute;
left: 50%;
top: -14px;
width: 84px;
height: 24px;
transform: translateX(-50%) rotate(-3deg);
background: rgba(247, 197, 48, 0.75);
}
.th-pp-kids {
position: absolute;
left: 6%;
bottom: -70px;
width: 140px;
}
.th-pp-string {
position: absolute;
z-index: 3;
right: 12%;
top: -56px;
width: 170px;
pointer-events: none;
}
.th-paper-parade.in .th-inner {
opacity: 1;
}
.th-paper-parade.in .th-title {
animation: th-stamp 220ms ease-out both;
}
.th-paper-parade.in .th-pp-string {
animation: th-drop 600ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.th-paper-parade.in .th-pp-kids g {
animation: th-hop 360ms ease-out both;
}
.th-paper-parade.in .th-pp-kids g:nth-child(2) {
animation-delay: 80ms;
}
.th-paper-parade.in .th-pp-kids g:nth-child(3) {
animation-delay: 160ms;
}
@keyframes th-stamp {
from {
transform: scale(1.08);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@keyframes th-drop {
from {
transform: translateY(-24px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@keyframes th-hop {
from {
transform: translateY(8px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.th-pop-collage .th-inner {
display: grid;
grid-template-columns: 58fr 42fr;
align-items: center;
gap: clamp(32px, 5vw, 64px);
}
.th-pc-art {
position: relative;
}
.th-pop-collage .th-frame {
transform: rotate(1.5deg);
}
.th-pop-collage .th-screen {
border: 6px solid #fff;
outline: 2px solid #111;
box-shadow: 8px 8px 0 #111;
}
.th-sticker {
position: absolute;
right: -24px;
bottom: -48px;
width: 44%;
border: 5px solid #fff;
outline: 2px solid #111;
transform: rotate(-5deg);
box-shadow: 5px 5px 0 #111;
}
.th-pc-copy {
position: relative;
}
.th-pop-collage .th-title {
font-weight: 400;
font-size: clamp(56px, 6vw, 96px);
line-height: 0.92;
letter-spacing: 0;
color: #d42a17;
text-shadow: 4px 4px 0 #111;
}
.th-pc-burst {
display: block;
width: 180px;
margin: 14px 0 18px -8px;
transform: rotate(-6deg);
}
.th-pop-collage .th-plate {
border: 2px solid #111;
border-radius: 4px;
box-shadow: 0 0 0 5px #fff, 0 0 0 7px #111, 7px 7px 0 7px #111;
}
.th-pc-tape {
position: absolute;
z-index: 3;
left: 8%;
top: -17px;
width: 260px;
height: 34px;
transform: rotate(-4deg);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23FFE033'/%3E%3Crect width='6' height='6' fill='%23111'/%3E%3Crect x='6' y='6' width='6' height='6' fill='%23111'/%3E%3C/svg%3E");
border: 2px solid #111;
box-shadow: 3px 3px 0 #111;
}
.th-pop-collage.in .th-inner {
opacity: 1;
}
.th-pop-collage.in .th-frame,
.th-pop-collage.in .th-title,
.th-pop-collage.in .th-pc-burst,
.th-pop-collage.in .th-sticker {
animation: th-slap 180ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.th-pop-collage.in .th-title {
animation-delay: 90ms;
}
.th-pop-collage.in .th-pc-burst {
animation-delay: 180ms;
}
.th-pop-collage.in .th-sticker {
animation-delay: 270ms;
}
@keyframes th-slap {
from {
scale: 1.15;
rotate: 4deg;
}
to {
scale: 1;
rotate: 0deg;
}
}
.th-pd-board {
position: relative;
width: min(100%, 1040px);
margin: 0 auto;
padding: 56px clamp(24px, 4vw, 56px) 48px;
border-radius: 20px;
background: #fbf6ea;
border: 1px solid #dccbad;
box-shadow: 0 2px 0 #dccbad, 0 30px 60px -30px rgba(80, 50, 10, 0.45);
}
.th-pd-clip {
position: absolute;
left: 50%;
top: calc(-40px - clamp(80px, 9vw, 128px));
width: 200px;
height: 92px;
transform: translateX(-50%);
border-radius: 14px 14px 18px 18px;
background: var(--sv-metal);
box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 var(--sv-metal-low), 0 8px 18px rgba(15, 23, 42, 0.25);
}
.th-pd-clip::after {
content: "";
position: absolute;
left: 50%;
top: 14px;
width: 64px;
height: 22px;
transform: translateX(-50%);
border-radius: 999px;
background: #e2e8ef;
box-shadow: inset 0 2px 3px rgba(15, 23, 42, 0.25);
}
.th-pd-board {
margin-top: 0;
}
.th-playful-desk .th-inner {
padding-top: 40px;
}
.th-playful-desk .th-pd-clip {
top: -40px;
z-index: 3;
}
.th-pd-head {
display: grid;
grid-template-columns: auto minmax(0, 360px);
align-items: end;
justify-content: space-between;
gap: 16px 32px;
margin-bottom: 28px;
}
.th-playful-desk .th-title {
font-weight: 800;
font-size: clamp(48px, 5.6vw, 80px);
letter-spacing: 0.02em;
color: #0864a3;
}
.th-playful-desk .th-title span[lang]::before {
content: "{ ";
color: #ff5a2c;
}
.th-playful-desk .th-title span[lang]::after {
content: " }";
color: #ff5a2c;
}
.th-playful-desk .th-plate {
border: 1px solid #dccbad;
box-shadow: 0 2px 0 #dccbad;
}
.th-playful-desk .th-frame {
width: 78%;
}
.th-playful-desk .th-screen {
border-radius: 14px;
border: 1px solid #dccbad;
box-shadow: 0 2px 0 #c9b48e;
}
.th-tabcard {
position: absolute;
right: clamp(-40px, -3vw, -16px);
bottom: 64px;
width: 36%;
padding: 10px;
border-radius: 12px 12px 12px 12px;
background: #fff;
border: 1px solid #dccbad;
box-shadow: 0 2px 0 #dccbad, 0 20px 40px -20px rgba(80, 50, 10, 0.4);
}
.th-tabcard::before {
content: "倒數";
position: absolute;
left: 18px;
top: -30px;
padding: 4px 14px 6px;
border-radius: 10px 10px 0 0;
font-family: var(--sv-cjk);
font-size: 13px;
font-weight: 700;
color: #171717;
background: #8bd17c;
}
.th-tabcard img {
border-radius: 6px;
}
.th-playful-desk.in .th-inner {
opacity: 1;
}
.th-playful-desk.in .th-pd-board {
animation: th-board 500ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
.th-playful-desk.in .th-tabcard {
animation: th-slide 500ms 150ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes th-board {
from {
transform: translateY(24px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@keyframes th-slide {
from {
transform: translateX(40px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.th-pixel-sky {
align-items: flex-start;
padding-bottom: clamp(140px, 14vw, 200px);
}
.th-pixel-sky .th-title {
display: inline-block;
padding: 10px 18px 14px;
font-weight: 400;
font-size: clamp(40px, 4.5vw, 72px);
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
background: #1f5bf0;
box-shadow: 6px 6px 0 #0c2a7a;
margin-bottom: 36px;
}
.th-ps-row {
display: grid;
grid-template-columns: 62fr 38fr;
align-items: start;
gap: clamp(28px, 4vw, 56px);
}
.th-pixel-sky .th-screen {
border: 3px solid #1f5bf0;
box-shadow: 8px 8px 0 #1f5bf0;
}
.th-pixel-sky .th-plate {
border-radius: 0;
border: 0;
box-shadow: 0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff, 8px 8px 0 rgba(12, 28, 56, 0.25);
}
.th-ps-card {
margin-top: 28px !important;
border: 3px solid #fff;
box-shadow: 6px 6px 0 rgba(12, 28, 56, 0.25);
}
.th-ps-cloud {
position: absolute;
z-index: 3;
left: 10%;
top: -40px;
width: 160px;
image-rendering: pixelated;
filter: drop-shadow(0 6px 0 rgba(12, 28, 56, 0.12));
animation: th-cloud 60s linear infinite;
}
@keyframes th-cloud {
to {
translate: 60vw 0;
}
}
.th-ps-skyline {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: clamp(90px, 10vw, 150px);
overflow: hidden;
}
.ps-skyline {
display: block;
width: 100%;
height: 100%;
}
.th-pixel-sky.in .th-inner {
opacity: 1;
}
.th-pixel-sky.in .th-title {
animation: th-steps 480ms steps(6) both;
}
@keyframes th-steps {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.th-hc-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
grid-template-areas:
"bubble a"
"b a";
gap: 24px 32px;
align-items: start;
}
.th-hc-bubble {
grid-area: bubble;
}
.th-hc-a {
grid-area: a;
margin-top: 24px;
}
.th-hc-b {
grid-area: b;
width: 82%;
}
.th-hc-panel {
position: relative;
padding: 10px;
background: #fff;
border: 3px solid #111;
border-radius: 10px;
box-shadow: 6px 6px 0 #111;
}
.th-hc-panel .th-screen,
.th-hc-shot img {
border-radius: 4px;
}
.th-halftone-comic .th-title {
font-family: "Inter", var(--sv-latin);
font-weight: 900;
font-style: italic;
font-size: clamp(56px, 6vw, 96px);
letter-spacing: -0.01em;
color: #111;
margin-bottom: 18px;
}
.th-plate-bubble {
position: relative;
border: 3px solid #111;
border-radius: 22px;
box-shadow: 5px 5px 0 #111;
}
.th-plate-bubble::after {
content: "";
position: absolute;
left: 48px;
bottom: -19px;
width: 26px;
height: 26px;
background: #fff;
border-right: 3px solid #111;
border-bottom: 3px solid #111;
transform: skewX(-20deg) rotate(45deg);
}
.th-hc-lines {
position: absolute;
inset: -60px;
z-index: -1;
background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(17, 17, 17, 0.5) 0deg 1.2deg, transparent 1.2deg 9deg);
-webkit-mask-image: radial-gradient(circle, transparent 38%, #000 40%, transparent 72%);
mask-image: radial-gradient(circle, transparent 38%, #000 40%, transparent 72%);
opacity: 0.35;
}
.th-hc-dots {
position: absolute;
z-index: 3;
right: 0;
top: -64px;
width: min(46vw, 560px);
height: 140px;
background: radial-gradient(circle, #111 0 30%, transparent 33%) 0 0 / 12px 12px;
-webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 70%);
mask-image: linear-gradient(200deg, #000 10%, transparent 70%);
pointer-events: none;
}
.th-halftone-comic.in .th-inner {
opacity: 1;
}
.th-halftone-comic.in .th-hc-panel {
animation: th-panel 160ms ease-out both;
}
.th-halftone-comic.in .th-hc-lines {
animation: th-flash 400ms ease-out both;
}
@keyframes th-panel {
from {
transform: scale(0.96);
}
to {
transform: none;
}
}
@keyframes th-flash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.35;
}
}
@media (max-width: 959px) {
.th-paper-parade .th-inner,
.th-pop-collage .th-inner,
.th-ps-row,
.th-hc-grid {
grid-template-columns: 1fr;
}
.th-hc-grid {
grid-template-areas:
"bubble"
"a"
"b";
}
.th-hc-b {
width: 70%;
justify-self: end;
}
.th-sg-stack {
width: 100%;
}
.th-pd-head {
grid-template-columns: 1fr;
}
.th-playful-desk .th-frame {
width: 100%;
}
.th-tabcard {
position: relative;
right: auto;
bottom: auto;
width: 70%;
margin: 40px 0 0 auto !important;
}
.th-photo {
right: 0;
bottom: -48px;
}
.th-paper-parade .th-pp-art {
margin-bottom: 56px;
}
.th-sticker {
right: -6px;
}
.th-pop-collage .th-pc-art {
margin-bottom: 40px;
}
.th-pp-kids {
width: 96px;
bottom: -60px;
}
}
@media (max-width: 639px) {
.th-sec {
padding-block: 72px;
}
.th-soft-glass .th-title {
letter-spacing: 0.1em;
}
.th-pd-clip,
.th-playful-desk .th-pd-clip {
width: 140px;
height: 70px;
}
}
@media (prefers-reduced-motion: reduce) {
.th-sec.in .th-inner,
.th-sec.in .th-inner * {
animation: none !important;
}
.th-sec .th-inner {
transition: opacity 200ms linear;
}
.th-ps-cloud {
animation: none;
}
.th-hc-lines {
opacity: 0.35;
}
}
.th-paper-parade.in .th-title {
font-family: "Bebas Neue", var(--sv-latin);
}
.th-pop-collage.in .th-title {
font-family: "Archivo Black", var(--sv-latin);
}
.th-playful-desk.in .th-title {
font-family: "Nunito", var(--sv-latin);
}
.th-pixel-sky.in .th-title {
font-family: "Silkscreen", var(--sv-latin);
}
.th-sec + .th-sec {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
.th-play {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%, -50%);
min-height: 46px;
padding: 0 20px;
border: 0;
border-radius: 999px;
font-family: var(--sv-cjk);
font-size: 15px;
font-weight: 600;
color: #fff;
background: rgba(15, 23, 42, 0.86);
cursor: pointer;
}
.th-play:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
@media (max-width: 959px) {
.th-halftone-comic .th-title {
display: inline-block;
padding: 6px 16px 10px;
background: #fff;
border: 3px solid #111;
border-radius: 12px;
box-shadow: 4px 4px 0 #111;
}
.th-hc-dots {
z-index: 1;
}
}
.th-settled .th-sec + .th-sec {
content-visibility: visible;
}
:root {
--t-display: clamp(56px, 7vw, 100px);
--t-h2-lg: clamp(36px, 3.2vw, 46px);
--t-h2: clamp(30px, 2.5vw, 36px);
--t-h3: 21px;
--t-lead: 19px;
--t-body: 17px;
--t-small: 14px;
--t-eyebrow: 13px;
--t-btn: 15px;
--section: clamp(72px, 8vw, 112px);
}
@media (max-width: 639px) {
:root {
--t-display: 44px;
--t-h2-lg: 30px;
--t-h2: 26px;
--t-h3: 19px;
--t-lead: 17px;
--t-body: 16px;
}
}
.dk-h1 {
font-size: var(--t-display);
line-height: 1.08;
letter-spacing: 0.04em;
font-feature-settings: "palt";
text-wrap: balance;
}
.sv-h2,
.fp-title {
font-size: var(--t-h2);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
font-feature-settings: "palt";
text-wrap: balance;
max-width: 18em;
}
.sv-h2-lg {
font-size: var(--t-h2-lg);
line-height: 1.18;
max-width: 16em;
}
.sv-card h3,
.sv-price h3,
.cu-card h3,
.fp-name,
.ac summary,
.th-plate h3 {
font-size: var(--t-h3);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
}
.sv-sub,
.sv-head .sv-sub {
max-width: 30em;
font-size: var(--t-lead);
line-height: 1.65;
letter-spacing: 0.01em;
}
.sv-more,
.sv-theme-note,
.sv-caption,
.fx-cap,
.demo-status {
font-size: var(--t-small);
letter-spacing: 0.02em;
}
.sv-btn {
font-size: var(--t-btn);
letter-spacing: 0.02em;
}
.sv-btn-lg {
font-size: 16px;
}
.sv-eyebrow {
display: inline-block;
margin: 0 0 16px;
padding: 6px 14px;
border-radius: 999px;
font-family: var(--sv-cjk);
font-size: var(--t-eyebrow);
font-weight: 500;
line-height: 1;
letter-spacing: 0.12em;
color: var(--sv-ink);
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.14);
}
.dk-kicker {
font-size: var(--t-eyebrow);
letter-spacing: 0.12em;
}
.sv-section {
padding-block: var(--section);
}
.sv-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 30em);
align-items: end;
gap: 12px 48px;
max-width: none;
margin: 0 0 40px;
text-align: left;
}
.sv-head > .sv-eyebrow {
grid-column: 1 / -1;
justify-self: start;
margin-bottom: 0;
}
.sv-head .sv-h2 {
grid-column: 1;
}
.sv-head .sv-sub {
grid-column: 2;
margin: 0;
padding-bottom: 6px;
}
.sv-head:not(:has(.sv-sub)) {
grid-template-columns: 1fr;
}
.sv-more {
text-align: left;
}
.sv-finale .sv-wrap {
text-align: center;
}
.sv-finale .sv-h2 {
margin-inline: auto;
font-size: var(--t-h2-lg);
}
.sv-finale .sv-sub {
margin-inline: auto;
}
@media (max-width: 899px) {
.sv-head {
grid-template-columns: 1fr;
}
.sv-head .sv-sub {
grid-column: 1;
padding-bottom: 0;
}
}
.page-head h1,
.legal h1 {
font-size: var(--t-h2-lg);
line-height: 1.18;
letter-spacing: 0.02em;
}
.page-head .lead,
.lead {
font-size: var(--t-lead);
max-width: 30em;
}
h2.section-title,
.faq-group h2,
.split-aside h2 {
font-size: var(--t-h2);
letter-spacing: 0.02em;
}
body {
font-size: var(--t-body);
}
.sv-footer {
padding-block: 48px 36px;
}
.sv-footer-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 32px 48px;
}
.sv-footer-nav {
display: flex;
flex-wrap: wrap;
gap: 20px 48px;
}
.sv-footer-label {
margin: 0 0 10px;
font-family: var(--sv-cjk);
font-size: var(--t-eyebrow);
font-weight: 500;
letter-spacing: 0.12em;
color: var(--sv-muted);
}
.sv-footer-group .sv-footer-links {
flex-direction: row;
flex-wrap: wrap;
gap: 6px 18px;
}
.sv-footer-links a {
font-size: var(--t-small);
color: var(--sv-ink);
}
.sv-footer-links a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.sv-copy {
grid-column: 1 / -1;
margin: 8px 0 0;
padding-top: 20px;
border-top: 1px solid var(--sv-line);
font-size: 13px;
}
@media (max-width: 760px) {
.sv-footer-row {
grid-template-columns: 1fr;
}
.sv-footer-nav {
gap: 32px;
flex-wrap: wrap;
}
}
html,
body {
overflow-x: clip;
}
.nf {
min-height: 60vh;
display: flex;
align-items: center;
}
.nf-cta {
justify-content: flex-start;
margin-top: 28px;
}