/* ========================================================================== tiiiyes official site - shared style framework main.css -------------------------------------------------------------------------- Usage: include in each page in this order 1. assets/css/vendor-swiper.css (pages using the carousel only) 2. assets/css/vendor-magnific.css (pages using the lightbox only) 3. assets/css/main.css (required site-wide) Notes: - All brand colors / fonts / spacing / radii live in :root CSS variables; reskin by editing here only. - Dark theme is the base (dark navy background, white text); add .section-light for white-background sections. - Components are non-intrusive "class name + data attribute" style, activated by assets/js/main.js. ========================================================================== */ /* ---------- Fonts ---------- */ /* DM Sans (variable weight 100-1000) and Noto Serif SC (500/700 CJK serif) are self-hosted as slices in fonts.css; no @font-face is declared in this file */ /* ---------- Brand design variables (reskin here) ---------- */ :root { /* Brand primary colors */ --c-navy: #0A1A2F; /* main background / nav */ --c-navy-2: #0E2438; /* lighter end of the navy gradient */ --c-dark: #1C1C1E; /* secondary background / cards */ --c-dark-2: #232326; /* dark gray card hover state */ --c-white: #FFFFFF; /* Accent colors */ --c-green: #2D6A4F; /* CTA buttons / links / dimension markers */ --c-green-hover: #3A8563; --c-gold: #C9A961; /* data highlights / certification marks / thin gold lines */ --c-gold-dim: rgba(201, 169, 97, .4); /* Dark theme text */ --c-text: rgba(255, 255, 255, .92); --c-text-dim: rgba(255, 255, 255, .62); --c-text-faint: rgba(255, 255, 255, .4); /* Light section (.section-light) text */ --c-ink: #1C1C1E; --c-ink-dim: rgba(28, 28, 30, .66); /* Lines */ --c-border: rgba(255, 255, 255, .1); --c-border-light: rgba(28, 28, 30, .12); /* Font stacks (same scheme as tiiiair.cn: Douyin Sans Bold for headings, HarmonyOS Sans SC for CJK body) */ --font-cn: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-en: 'DM Sans', "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-display: 'Douyin Sans', "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* big headings / pull quotes */ --font-mono: ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace; /* Spacing (8px base) */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; /* Border radius */ --radius-s: 6px; --radius: 12px; --radius-l: 20px; /* Layout */ --container: 1200px; --header-h: 76px; --header-h-shrink: 58px; /* Motion */ --ease: cubic-bezier(.22, .61, .36, 1); --dur: .45s; } /* ---------- Base reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; /* smooth scrolling is handled by Lenis */ } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { /* English site change: body text now uses --font-en (DM Sans first) instead of --font-cn */ font-family: var(--font-en); font-size: 17.5px; line-height: 1.85; color: var(--c-text); background: var(--c-navy); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--c-gold); text-decoration: none; transition: color .25s; } a:hover { color: var(--c-gold); opacity: .85; } ul, ol { list-style: none; } button { font-family: inherit; background: none; border: 0; cursor: pointer; color: inherit; } input, textarea, select { font-family: inherit; } ::selection { background: var(--c-green); color: #fff; } /* Numbers/Latin default to DM Sans (variable weight; 500/600/700 are real weights) */ .num, .en, .stat-number, .btn, .quad-data, .ring-num, .t-year { font-family: var(--font-en); } /* Brand data uses tabular figure alignment; monospace is reserved for test report tables */ .stat-number, .quad-data, .ring-num, .t-year, [data-counter] { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } /* ---------- Typography ---------- */ /* Big headings go serif (self-hosted Noto Serif SC), subheadings stay bold gothic: stillness vs motion separates the hierarchy */ h1, h2 { font-family: var(--font-display); font-weight: 500; line-height: 1.24; letter-spacing: 0; color: var(--c-white); } h3, h4 { font-weight: 700; line-height: 1.4; letter-spacing: .01em; color: var(--c-white); } h1 { font-size: 72px; font-size: clamp(40px, 5.4vw, 72px); } h2 { font-size: 66px; font-size: clamp(34px, 4.6vw, 66px); } h3 { font-size: 30px; font-size: clamp(23px, 2.5vw, 30px); } h4 { font-size: 20px; } p + p { margin-top: var(--sp-2); } /* Section eyebrow label (gray-white small text + short gold line; gold is reserved for data and pull quotes) */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .22em; color: var(--c-text-dim); margin-bottom: var(--sp-2); } .kicker::before { content: ""; width: 22px; height: 1px; background: var(--c-gold); } .section-light .kicker { color: var(--c-ink-dim); } /* Section sub copy */ .lead { font-size: 20px; color: var(--c-text-dim); max-width: 760px; } /* Nail quote (serif pull quote) */ .nail { font-family: var(--font-display); font-size: 40px; font-size: clamp(26px, 3vw, 40px); font-weight: 500; color: var(--c-gold); line-height: 1.6; letter-spacing: .02em; } .section-light .nail { color: #8A6D2F; } /* English site change: was var(--font-cn), now var(--font-en) */ .nail small { display: block; font-family: var(--font-en); font-size: 15px; font-weight: 400; color: var(--c-text-faint); margin-top: var(--sp-2); letter-spacing: 0; } /* Thin gold divider */ .hr-gold { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold-dim), transparent); margin: var(--sp-5) auto; max-width: 720px; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1440px; } .section { padding: var(--sp-7) 0; position: relative; } /* A corner glow over the flat color removes the "slab" feel of large color blocks */ .section-dark { background: radial-gradient(1100px 520px at 12% 112%, rgba(45, 106, 79, .1), transparent 62%), var(--c-dark); } .section-navy { background: radial-gradient(1200px 560px at 88% -12%, rgba(201, 169, 97, .07), transparent 60%), var(--c-navy); } .section-grad { background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-2) 60%, #123024 130%); } /* Light sections: white background for product / report / FAQ pages */ .section-light { background: var(--c-white); color: var(--c-ink); } .section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--c-ink); } .section-light .lead { color: var(--c-ink-dim); } .section-light .card { background: #F7F6F3; border-color: var(--c-border-light); } /* Inside light/light-gray sections, all default low-opacity white text switches to ink (fixes white-on-white) */ .section-light .stat-label, .section-light .ring-name, .section-light .ring-desc, .section-tint .stat-label, .section-tint .ring-name, .section-tint .ring-desc, .section-light .nail small, .section-tint .nail small, .section-tint .kicker, .section-tint .lead, .section-light .timeline-node .t-text, .section-tint .timeline-node .t-text { color: var(--c-ink-dim); } .section-tint h1, .section-tint h2, .section-tint h3, .section-tint h4 { color: var(--c-ink); } .section-tint { color: var(--c-ink); } .section-head { max-width: 660px; margin-bottom: var(--sp-5); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .kicker { justify-content: center; } .section-head.center .kicker::after { content: ""; width: 22px; height: 1px; background: var(--c-gold); } .grid { display: grid; gap: var(--sp-3); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ========================================================================== Site navigation (headroom scroll hide/show + desktop dropdowns + mobile hamburger drawer) ========================================================================== */ .site-header { position: fixed; top: 0; right: 0; bottom: auto; left: 0; z-index: 900; /* inset shorthand dropped by Chrome <87, use explicit sides */ height: var(--header-h); background: rgba(10, 26, 47, .82); -webkit-backdrop-filter: blur(12px); /* old WebViews only know the prefixed form */ backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: height var(--dur) var(--ease), background .3s, border-color .3s, transform .4s var(--ease); } /* headroom state classes */ .site-header.headroom--unpinned { transform: translateY(-100%); } .site-header.headroom--pinned { transform: translateY(0); } /* Shrink height after scrolling */ .site-header.is-shrink { height: var(--header-h-shrink); background: rgba(10, 26, 47, .95); border-bottom-color: var(--c-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .brand { display: flex; align-items: center; gap: 12px; } .brand { display: inline-flex; align-items: center; gap: 14px; } .brand img { height: 40px; width: auto; transition: height var(--dur) var(--ease); } .brand-slogan { font-size: 17px; letter-spacing: .12em; color: var(--c-gold); white-space: nowrap; line-height: 40px; } .is-shrink .brand-slogan { line-height: 32px; } /* Visually hidden hero heading (H1 kept for SEO) */ .hero-title-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .is-shrink .brand img { height: 32px; } /* Desktop navigation */ .nav-desktop > ul { display: flex; align-items: center; gap: 4px; } .nav-desktop a { display: block; padding: 10px 14px; font-size: 16px; letter-spacing: .04em; color: var(--c-text); border-radius: var(--radius-s); transition: color .25s, background .25s; } .nav-desktop a:hover { color: var(--c-gold); opacity: 1; } .nav-desktop .is-active > a { color: var(--c-gold); background: rgba(201, 169, 97, .12); } /* Dropdown parent arrow */ .has-dropdown > a::after { content: ""; display: inline-block; margin-left: 7px; vertical-align: 3px; border: 5px solid transparent; border-top-color: var(--c-text-dim); transition: transform .3s; } .has-dropdown:hover > a::after { transform: rotate(180deg); } /* Second-level dropdown */ .has-dropdown { position: relative; } .dropdown { position: absolute; top: calc(100% + 10px); left: 50%; min-width: 200px; padding: 10px; background: var(--c-dark); border: 1px solid var(--c-border); border-top: 2px solid var(--c-gold); border-radius: var(--radius); transform: translate(-50%, 12px); opacity: 0; visibility: hidden; transition: all .3s var(--ease); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { transform: translate(-50%, 0); opacity: 1; visibility: visible; } .dropdown a { white-space: nowrap; padding: 11px 16px; font-size: 15.5px; color: var(--c-text-dim); } .dropdown a:hover { color: var(--c-gold); background: rgba(201, 169, 97, .08); } /* Hamburger button (mobile) */ .nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 1002; } .nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--c-white); transition: all .35s var(--ease); } .nav-toggle span:nth-child(1) { top: 15px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 29px; } body.menu-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); } body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } body.menu-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); } /* Mobile drawer menu */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: 86vw; max-width: 340px; /* fallback = min(340px, 86vw) without min(), Chrome <79 */ width: min(340px, 86vw); background: var(--c-dark); border-left: 1px solid var(--c-border); padding: calc(var(--header-h) + 20px) 28px 40px; transform: translateX(100%); transition: transform .45s var(--ease); overflow-y: auto; } body.menu-open .nav-drawer { transform: translateX(0); } .nav-drawer a { display: block; padding: 15px 4px; font-size: 19px; color: var(--c-text); border-bottom: 1px solid var(--c-border); } .nav-drawer a:hover { color: var(--c-gold); } /* Drawer submenu: tap to expand */ .nav-drawer .has-dropdown > a { display: flex; justify-content: space-between; align-items: center; } .nav-drawer .has-dropdown > a::after { content: "+"; font-family: var(--font-en); font-size: 20px; border: 0; margin: 0; transition: transform .3s; } .nav-drawer .has-dropdown.open > a::after { transform: rotate(45deg); } .nav-drawer .dropdown { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: 0; box-shadow: none; padding: 0 0 0 16px; display: none; min-width: 0; } .nav-drawer .has-dropdown.open .dropdown { display: block; } .nav-drawer .dropdown a { font-size: 17px; color: var(--c-text-dim); padding: 10px 4px; } /* Drawer overlay mask */ .menu-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; /* inset shorthand dropped by Chrome <87 */ background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .4s; } body.menu-open .menu-mask { opacity: 1; visibility: visible; } body.menu-open { overflow: hidden; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; font-size: 16.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; border-radius: 999px; transition: all .3s var(--ease); white-space: nowrap; } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(5px); } /* Primary CTA: deep green */ .btn-primary { background: var(--c-green); color: #fff; } .btn-primary:hover { background: var(--c-green-hover); color: #fff; opacity: 1; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(45, 106, 79, .4); } /* Secondary CTA: gold outline */ .btn-outline { border: 1px solid var(--c-gold); color: var(--c-gold); } .btn-outline:hover { background: var(--c-gold); color: var(--c-navy); opacity: 1; transform: translateY(-2px); } /* Ghost text button */ .btn-ghost { color: var(--c-text-dim); padding: 15px 10px; } .btn-ghost:hover { color: var(--c-gold); opacity: 1; } .btn-sm { padding: 11px 22px; font-size: 15px; } /* ========================================================================== Generic card ========================================================================== */ .card { background: var(--c-dark); border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: var(--sp-4); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(0, 0, 0, .4); border-color: var(--c-gold-dim); } .card-img { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-3); } .card-img img { width: 100%; transition: transform .8s var(--ease); } .card-hover:hover .card-img img { transform: scale(1.05); } /* ========================================================================== Multi-dimension grid: 2x2 quad (center intersection hint) ========================================================================== */ .quad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--radius-l); overflow: hidden; position: relative; } .quad-cell { background: var(--c-dark); padding: var(--sp-5) var(--sp-4); transition: background .35s; } .quad-cell:hover { background: var(--c-dark-2); } /* Diagonal stagger: top-right cell sinks, bottom-left gets extra space, breaking 2x2 symmetry */ @media (min-width: 993px) { .quad-grid .quad-cell:nth-child(2) { padding-top: calc(var(--sp-5) + 28px); } .quad-grid .quad-cell:nth-child(3) { padding-bottom: calc(var(--sp-5) + 28px); } } .quad-cell .quad-icon { width: 52px; height: 52px; margin-bottom: var(--sp-3); color: var(--c-gold); } .quad-cell h3 { margin-bottom: var(--sp-2); } .quad-cell .quad-conflict { color: var(--c-text-dim); margin-bottom: var(--sp-3); } .quad-cell .quad-effect { font-size: 17px; color: var(--c-text); border-top: 1px solid var(--c-border); padding-top: var(--sp-3); } .quad-cell .quad-data { display: inline-block; margin-top: var(--sp-2); font-weight: 500; font-size: 24px; letter-spacing: -.01em; color: var(--c-gold); } /* Center intersection label */ .quad-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--c-navy); border: 1px solid var(--c-gold-dim); border-radius: 999px; padding: 10px 22px; font-size: 14px; letter-spacing: .06em; color: var(--c-gold); text-align: center; max-width: 240px; z-index: 2; line-height: 1.5; } /* ========================================================================== Stat cards (big numbers + tabular figures) ========================================================================== */ .stat-card { text-align: left; padding: var(--sp-4); border-left: 1px solid var(--c-gold-dim); } .stat-number { font-size: 72px; font-size: clamp(46px, 5vw, 72px); font-weight: 500; color: var(--c-gold); line-height: 1.08; letter-spacing: -.01em; word-break: keep-all; } .stat-number.mono { font-size: 40px; font-size: clamp(26px, 2.8vw, 40px); } /* text-type big numbers (alpha-theta / contactless / report IDs) use a smaller size to avoid overflow */ .section-light .stat-number { color: #8A6D2F; } .stat-label { margin-top: var(--sp-1); font-size: 15.5px; letter-spacing: .08em; color: var(--c-text-dim); } /* Stat card stagger: even cards sink half a step on desktop, breaking the uniform row */ @media (min-width: 993px) { .grid-4 > .stat-card:nth-child(even) { margin-top: var(--sp-3); } } /* Stat ring container (screen 5 data heartbeat: pure CSS ring, --p driven by JS animation) */ .ring-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .ring-item { text-align: center; } /* Rings drop the stagger for neat alignment; metric names share one height, centered for one or two lines */ .ring-item { display: flex; flex-direction: column; align-items: center; } .ring-item .ring { flex: none; } .ring-name { min-height: 52px; display: flex; align-items: center; justify-content: center; line-height: 1.5; padding: 0 8px; } .ring { --p: 0; /* current percentage, written by JS animation */ width: 128px; height: 128px; margin: 0 auto var(--sp-2); border-radius: 50%; background: conic-gradient(var(--c-gold) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); display: grid; place-items: center; position: relative; } .ring::before { content: ""; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border-radius: 50%; background: var(--c-navy); } /* inset shorthand dropped by Chrome <87 */ .section-dark .ring::before, .section-light .ring::before { background: inherit; } .section-dark .ring::before { background: var(--c-dark); } .section-light .ring { background: conic-gradient(var(--c-gold) calc(var(--p) * 1%), rgba(28, 28, 30, .08) 0); } .section-light .ring::before { background: var(--c-white); } .ring .ring-num { position: relative; z-index: 1; font-size: 30px; font-weight: 500; color: var(--c-gold); } .ring-name { font-size: 16.5px; color: var(--c-text-dim); } .ring-desc { font-size: 15px; color: var(--c-text-dim); margin-top: 4px; } /* ========================================================================== Tabs component [data-tabs] Structure: .tabs > .tabs-nav > button[data-tab="id"] + .tabs-panel[data-tab-panel="id"] ========================================================================== */ .tabs-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-5); } .tabs-nav button { padding: 11px 22px; border-radius: 999px; border: 1px solid var(--c-border); color: var(--c-text-dim); font-size: 16px; transition: all .3s var(--ease); } .tabs-nav button:hover { color: var(--c-gold); border-color: var(--c-gold-dim); } .tabs-nav button.is-active { background: var(--c-green); border-color: var(--c-green); color: #fff; } .section-light .tabs-nav button { border-color: var(--c-border-light); color: var(--c-ink-dim); } .section-light .tabs-nav button.is-active { color: #fff; } .tabs-panel { display: none; } .tabs-panel.is-active { display: block; } /* ========================================================================== Accordion [data-accordion] (only one item open at a time) ========================================================================== */ .accordion-item { border-bottom: 1px solid var(--c-border); } .section-light .accordion-item { border-bottom-color: var(--c-border-light); } .accordion-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: var(--sp-3) 4px; text-align: left; font-size: 19px; font-weight: 700; color: var(--c-text); transition: color .25s; } .section-light .accordion-head { color: var(--c-ink); } .accordion-head:hover { color: var(--c-gold); } .accordion-head .acc-icon { flex: none; width: 28px; height: 28px; position: relative; border: 1px solid var(--c-gold-dim); border-radius: 50%; } .accordion-head .acc-icon::before, .accordion-head .acc-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--c-gold); transition: transform .35s var(--ease); } .accordion-head .acc-icon::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); } .accordion-head .acc-icon::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); } .accordion-item.open .acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .accordion-item.open .accordion-body { grid-template-rows: 1fr; } .accordion-inner { overflow: hidden; } .accordion-inner > div { padding: 0 4px var(--sp-3); color: var(--c-text-dim); } .section-light .accordion-inner > div { color: var(--c-ink-dim); } /* ========================================================================== Timeline (single focus line: one horizontal line runs through) ========================================================================== */ .timeline { position: relative; padding-top: var(--sp-5); } .timeline::before { content: ""; position: absolute; top: var(--sp-5); left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold-dim) 12%, var(--c-gold-dim) 88%, transparent); } .timeline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .timeline-node { position: relative; padding-top: var(--sp-4); } .timeline-node::before { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--c-navy); border: 2px solid var(--c-gold); } .timeline-node .t-year { color: var(--c-gold); font-size: 26px; font-weight: 500; } .timeline-node .t-text { margin-top: 6px; font-size: 16.5px; color: var(--c-text-dim); } /* ========================================================================== Soundscape player card [data-sound="audio path"] ========================================================================== */ .sound-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .sound-card { display: flex; align-items: center; gap: var(--sp-2); background: var(--c-dark); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 20px; cursor: pointer; transition: border-color .3s, transform .3s var(--ease); } .sound-card:hover { border-color: var(--c-gold-dim); transform: translateY(-3px); } .sound-card.playing { border-color: var(--c-gold); } .sound-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-gold); position: relative; transition: background .3s; } .sound-play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border: 8px solid transparent; border-left: 12px solid var(--c-gold); } .sound-card.playing .sound-play { background: var(--c-gold); } .sound-card.playing .sound-play::before { border: 0; width: 12px; height: 14px; left: 50%; border-left: 4px solid var(--c-navy); border-right: 4px solid var(--c-navy); } .sound-info { flex: 1; min-width: 0; } .sound-info h4 { font-size: 18px; } .sound-info p { font-size: 14px; color: var(--c-text-faint); } /* Soundscape wave bars: animate while playing, frozen while paused */ .sound-wave { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 26px; } .sound-wave span { width: 3px; height: 100%; border-radius: 2px; background: var(--c-gold); opacity: .35; transform-origin: bottom; transform: scaleY(.25); animation: wave 1.1s ease-in-out infinite; animation-play-state: paused; } .sound-card.playing .sound-wave span { opacity: 1; animation-play-state: running; } .sound-wave span:nth-child(1) { animation-delay: 0s; } .sound-wave span:nth-child(2) { animation-delay: .15s; } .sound-wave span:nth-child(3) { animation-delay: .3s; } .sound-wave span:nth-child(4) { animation-delay: .1s; } .sound-wave span:nth-child(5) { animation-delay: .45s; } .sound-wave span:nth-child(6) { animation-delay: .25s; } .sound-wave span:nth-child(7) { animation-delay: .55s; } .sound-wave span:nth-child(8) { animation-delay: .05s; } @keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } } /* ========================================================================== Breadcrumb ========================================================================== */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15.5px; color: var(--c-text-faint); padding: var(--sp-3) 0; } .breadcrumb a { color: var(--c-text-dim); } .breadcrumb a:hover { color: var(--c-gold); } .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--c-text-faint); } .section-light .breadcrumb { color: var(--c-ink-dim); } .section-light .breadcrumb a { color: var(--c-ink-dim); } /* ========================================================================== Article typography (news / science body) ========================================================================== */ .article { max-width: 840px; margin: 0 auto; font-size: 19px; } .article h2 { margin: var(--sp-6) 0 var(--sp-3); padding-left: 16px; border-left: 3px solid var(--c-gold); font-size: 30px; font-size: clamp(22px, 2.6vw, 30px); } .article h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: 23px; } .article p { margin-bottom: var(--sp-3); color: inherit; } .article ul, .article ol { margin: 0 0 var(--sp-3) 1.4em; } .article ul { list-style: disc; } .article ol { list-style: decimal; } .article li { margin-bottom: 8px; } .article img { border-radius: var(--radius); margin: var(--sp-4) 0; } .article blockquote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--c-green); background: rgba(45, 106, 79, .1); border-radius: 0 var(--radius) var(--radius) 0; } .article table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: 17px; } .article th, .article td { border: 1px solid var(--c-border); padding: 12px 16px; text-align: left; } .article th { color: var(--c-gold); font-weight: 700; } .article td[data-n], .article .mono { font-family: var(--font-mono); } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: #071222; border-top: 1px solid var(--c-border); padding: var(--sp-6) 0 var(--sp-4); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); } .footer-brand img { height: 44px; margin-bottom: var(--sp-3); } .footer-brand p { font-size: 15px; color: var(--c-text-dim); max-width: 300px; } .footer-col h4 { font-size: 15px; color: var(--c-gold); margin-bottom: var(--sp-3); letter-spacing: .18em; } .footer-col a { display: block; padding: 7px 0; font-size: 16px; color: var(--c-text-dim); } .footer-col a:hover { color: var(--c-gold); opacity: 1; } .footer-qr { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); } .footer-qr figure { text-align: center; font-size: 13.5px; color: var(--c-text-faint); } .footer-qr img { width: 88px; height: 88px; border-radius: var(--radius-s); margin-bottom: 6px; } .footer-bottom { border-top: 1px solid var(--c-border); padding-top: var(--sp-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--c-text-faint); } /* ========================================================================== Scroll reveal [data-reveal] (driven by GSAP ScrollTrigger; content stays visible if JS fails) Optional modifiers: data-reveal="left|right|zoom" (default slide up), data-reveal-delay="0.15" ========================================================================== */ .js [data-reveal] { opacity: 0; transform: translateY(44px); } .js [data-reveal="left"] { transform: translateX(-44px); } .js [data-reveal="right"] { transform: translateX(44px); } .js [data-reveal="zoom"] { transform: scale(.92); } /* ========================================================================== Homepage only: 10-screen long scroll + right progress dots ========================================================================== */ /* Long-scroll screens: first and last screens center full-viewport, middle screens breathe with content, no forced equal height */ .screen { display: block; padding: calc(var(--header-h) + 88px) 0 112px; position: relative; overflow: hidden; } .screen#hero, .screen#cta { display: flex; align-items: center; min-height: 100vh; padding: calc(var(--header-h) + 40px) 0 var(--sp-7); } .screen .container { position: relative; z-index: 2; } .screen-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } /* inset shorthand dropped by Chrome <87 */ .screen-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .8; } .screen-bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(10,26,47,.35), rgba(10,26,47,.60)); } /* Right progress dots (auto-generated by JS from section[data-screen]) */ .scroll-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 800; display: flex; flex-direction: column; gap: 14px; } .scroll-dots button { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: all .3s var(--ease); position: relative; } .scroll-dots button:hover { background: var(--c-gold); } .scroll-dots button.is-active { background: var(--c-gold); transform: scale(1.5); box-shadow: 0 0 0 5px rgba(201, 169, 97, .18); } /* Screen 1 hero */ .hero { text-align: center; } .hero-title { font-size: 16px; letter-spacing: .34em; text-indent: .34em; color: var(--c-gold); font-weight: 400; margin-bottom: var(--sp-3); } .hero-slogan { font-family: var(--font-display); font-size: 88px; font-size: clamp(52px, 8vw, 88px); font-weight: 500; line-height: 1.16; letter-spacing: .01em; } /* 2026-09-10: max 116->88, banner text too large on TV/big screens */ .hero-sub { margin: var(--sp-4) auto 0; font-size: 22px; font-size: clamp(18px, 1.8vw, 22px); line-height: 2.0; color: var(--c-text-dim); max-width: 780px; } .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--sp-5); } .hero-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--sp-6); font-size: 15.5px; letter-spacing: .12em; color: var(--c-text-dim); } .hero-marks li { display: flex; align-items: center; gap: 10px; } .hero-marks li:not(:last-child)::after { content: "·"; color: var(--c-gold); margin-left: 10px; } .hero-nail { position: absolute; right: 32px; bottom: 32px; font-size: 15px; color: var(--c-text-faint); z-index: 2; } /* Bottom padding on hero content: clears the scroll-hint so short viewports are not covered */ .screen > .container.hero { padding-bottom: 130px; } .scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; color: var(--c-text-faint); font-size: 13.5px; letter-spacing: .3em; text-align: center; } .scroll-hint::after { content: ""; display: block; width: 1px; height: 44px; margin: 10px auto 0; background: linear-gradient(var(--c-gold), transparent); animation: drip 1.8s var(--ease) infinite; } @keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Screen 4 product split (left/right) */ .product-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .product-card { text-align: center; } .product-card .p-nick { font-size: 14.5px; letter-spacing: .22em; color: var(--c-gold); margin-bottom: var(--sp-1); } .product-card .p-img { padding: var(--sp-4) var(--sp-4) 0; } .product-card .p-lines { margin: var(--sp-3) 0; color: var(--c-text-dim); font-size: 17px; } .common-bar { margin-top: var(--sp-4); text-align: center; border: 1px solid var(--c-gold-dim); border-radius: 999px; padding: 13px 28px; font-size: 15px; letter-spacing: .06em; color: var(--c-gold); } /* Certification logo wall: hairline grid badges without per-cell card borders */ .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-border-light); border: 1px solid var(--c-border-light); border-radius: var(--radius-l); overflow: hidden; } .cert-item { text-align: center; padding: var(--sp-4) var(--sp-2); background: #fff; transition: background .3s; } .cert-item:hover { background: #FAF8F4; } .cert-item img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 10px; } .cert-item span { font-size: 15px; color: var(--c-ink-dim); } /* ========================================================================== Responsive: 1200 / 992 / 768 / 480 ========================================================================== */ @media (max-width: 1200px) { .ring-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-4); } } @media (max-width: 992px) { .nav-desktop { display: none; } .nav-toggle { display: block; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .ring-grid { grid-template-columns: repeat(2, 1fr); } .sound-grid { grid-template-columns: repeat(2, 1fr); } .cert-grid { grid-template-columns: repeat(4, 1fr); } .product-split { grid-template-columns: 1fr; } .quad-center { position: static; transform: none; margin: var(--sp-3) auto; order: 9; } .quad-grid { display: flex; flex-direction: column; } .timeline-track { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); } .timeline::before { display: none; } .scroll-dots { right: 10px; } } @media (max-width: 768px) { .section { padding: var(--sp-6) 0; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .cert-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .footer-bottom { justify-content: center; text-align: center; } .hero-nail { display: none; } .screen { min-height: auto; padding-top: calc(var(--header-h) + 24px); } .screen:first-of-type { min-height: 100vh; } } @media (max-width: 480px) { .grid-4, .ring-grid, .sound-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .btn { padding: 14px 28px; font-size: 16px; } .common-bar { border-radius: var(--radius); letter-spacing: .04em; } .scroll-dots { display: none; } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } } /* ========================================================================== Inner page header banner (page-banner): template image + navy overlay + white text Usage:

========================================================================== */ .page-banner { position: relative; background-color: var(--c-navy); background-size: cover; background-position: center; color: #fff; overflow: hidden; } .page-banner::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; /* inset shorthand dropped by Chrome <87 */ background: linear-gradient(180deg, rgba(10, 26, 47, .62) 0%, rgba(10, 26, 47, .82) 100%); } .page-banner > * { position: relative; z-index: 1; } .page-banner h1, .page-banner h2, .page-banner h3, .page-banner h4 { color: #fff; } .page-banner .lead { color: rgba(255, 255, 255, .78); } .page-banner .kicker { color: var(--c-gold); } .page-banner .breadcrumb, .page-banner .breadcrumb a { color: rgba(255, 255, 255, .72); } .page-banner .breadcrumb li+li::before { color: rgba(255, 255, 255, .4); } .page-banner .nail { color: var(--c-gold); } .page-banner .nail small { color: rgba(255, 255, 255, .55); } /* ========================================================================== News center / article page / archive page extra styles (copied from the static site's news page inline