/* ── Tronetek brand fonts (Rogan + Planer) — overrides Syne/Outfit ──── */ @font-face { font-family: "Rogan"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../../tron/assets/fonts/Rogan-Regular.woff2") format("woff2"), url("../../../tron/assets/fonts/Rogan-Regular.woff") format("woff"); } @font-face { font-family: "Rogan"; font-weight: 600; font-style: normal; font-display: swap; src: url("../../../tron/assets/fonts/Rogan-SemiBold.woff2") format("woff2"), url("../../../tron/assets/fonts/Rogan-SemiBold.woff") format("woff"); } @font-face { font-family: "Rogan"; font-weight: 300; font-style: normal; font-display: swap; src: url("../../../tron/assets/fonts/Rogan-Light.woff2") format("woff2"), url("../../../tron/assets/fonts/Rogan-Light.woff") format("woff"); } @font-face { font-family: "Planer"; font-weight: 400; font-style: normal; font-display: swap; src: url("../../../tron/assets/fonts/Planer-Regular.woff2") format("woff2"), url("../../../tron/assets/fonts/Planer-Regular.woff") format("woff"); } @font-face { font-family: "Planer"; font-weight: 500; font-style: normal; font-display: swap; src: url("../../../tron/assets/fonts/Planer-Medium.woff2") format("woff2"), url("../../../tron/assets/fonts/Planer-Medium.woff") format("woff"); } @font-face { font-family: "Planer"; font-weight: 300; font-style: normal; font-display: swap; src: url("../../../tron/assets/fonts/Planer-Light.woff2") format("woff2"), url("../../../tron/assets/fonts/Planer-Light.woff") format("woff"); } /* Override the variable definitions inside :root */ :root { --f-display: "Rogan", "Noto Serif TC", Georgia, serif !important; --f-body: "Planer", "Noto Sans TC", -apple-system, sans-serif !important; } /* ============================================================ 碩奕太綠能 — Main Stylesheet Fonts: Syne + Outfit + JetBrains Mono Themes: dark (default) / light — toggled via data-theme on ============================================================ */ /* ── Dark theme (default) ────────────────────────────────── */ :root { --bg: #05141f; --bg-surface: #081e2e; --bg-elevated: #0a2535; --glass-bg: rgba(255,255,255,.04); --glass-bg-hover: rgba(255,255,255,.07); --glass-border: rgba(51,255,198,.10); --glass-border-h: rgba(51,255,198,.22); --glass-shadow: 0 4px 24px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --glass-shadow-h: 0 8px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); --green: #33ffc6; --green-dim: #00e6ad; --green-dark: #006b52; --green-glow: rgba(51,255,198,.18); --green-glow-sm: rgba(51,255,198,.09); --green-btn-text: #05141f; --t-1: rgba(255,255,255,.92); --t-2: rgba(255,255,255,.55); --t-3: rgba(255,255,255,.30); --t-4: rgba(255,255,255,.12); --header-bg: rgba(5,20,31,.85); --footer-bg: rgba(0,0,0,.45); --page-hero-bg: rgba(255,255,255,.015); --grid-line: rgba(51,255,198,.04); --mesh-1: rgba(51,255,198,.06); --mesh-2: rgba(0,230,173,.04); --mesh-3: rgba(251,191,36,.015); --anno-bg: rgba(51,255,198,.08); --anno-border: rgba(51,255,198,.12); --pdf-bg: rgba(0,0,0,.3); --f-display: 'Syne', 'Noto Serif TC', Georgia, serif; --f-body: 'Outfit', 'Noto Sans TC', sans-serif; --f-mono: 'JetBrains Mono', 'Courier New', monospace; --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --t: 220ms cubic-bezier(.4,0,.2,1); } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--f-body); background: var(--bg); color: var(--t-1); line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background .35s ease, color .35s ease; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul, ol { list-style: none; } /* Smooth theme transition on all key elements */ .site-header, .report-card, .report-item, .info-card, .hero-stats, .year-tab, .btn-download, .btn-outline, .site-footer, .page-hero, .announcement-bar { transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t); } /* ── Background mesh ─────────────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 60% at 20% 10%, var(--mesh-1) 0%, transparent 55%), radial-gradient(ellipse 60% 80% at 80% 90%, var(--mesh-2) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 50% 50%, var(--mesh-3) 0%, transparent 60%); transition: background .4s ease; } /* ── Layout ──────────────────────────────────────────────── */ .container { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } /* ── Header ──────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); } .site-header.scrolled { border-bottom-color: var(--green-glow); box-shadow: 0 1px 0 var(--green-glow-sm), 0 4px 24px rgba(0,0,0,.2); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; } /* Logo */ .site-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .site-logo__mark { width: 38px; height: 38px; background: linear-gradient(135deg, var(--green-dim), var(--green-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--green-glow); } .site-logo__mark svg { width: 20px; height: 20px; } .site-logo__text { display: flex; flex-direction: column; line-height: 1.2; } .site-logo__name { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--t-1); letter-spacing: .02em; } .site-logo__tagline { font-family: var(--f-mono); font-size: .6rem; color: var(--t-3); letter-spacing: .08em; } /* Nav */ .site-nav ul { display: flex; align-items: center; gap: 2px; } .site-nav a { display: block; padding: 7px 14px; font-family: var(--f-body); font-size: .85rem; font-weight: 500; color: var(--t-2); border-radius: var(--r-sm); transition: background var(--t), color var(--t); } .site-nav a:hover, .site-nav .current-menu-item a { background: var(--glass-bg-hover); color: var(--t-1); } .nav-cta a { background: rgba(52,211,153,.12) !important; color: var(--green) !important; border: 1px solid var(--green-glow) !important; } .nav-cta a:hover { background: rgba(52,211,153,.22) !important; box-shadow: 0 0 16px var(--green-glow-sm); } /* Header tools (lang + theme) */ .header-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Language switcher */ .lang-switcher { display: flex; align-items: center; gap: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-sm); overflow: hidden; } .lang-switcher ul { display: flex; margin: 0; padding: 0; } .lang-switcher li { list-style: none; } .lang-switcher a, .lang-btn { display: block; padding: 6px 12px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; color: var(--t-3); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background var(--t), color var(--t); border: none; background: none; } .lang-switcher a:hover, .lang-btn:hover { color: var(--green); background: var(--glass-bg-hover); } .lang-switcher .current-lang a, .lang-btn.active { color: var(--green); background: var(--glass-bg-hover); font-weight: 600; } .lang-sep { display: block; width: 1px; background: var(--glass-border); align-self: stretch; } /* Mobile nav */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--t-2); } /* ── Announcement bar ────────────────────────────────────── */ .announcement-bar { background: var(--anno-bg); border-bottom: 1px solid var(--anno-border); color: var(--t-2); padding: 9px 0; font-size: .78rem; text-align: center; font-family: var(--f-mono); letter-spacing: .04em; } .announcement-bar a { color: var(--green); font-weight: 500; margin-left: 10px; } /* ── Hero ────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 140px 0 120px; z-index: 1; min-height: 88vh; display: flex; align-items: center; } .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(51,255,198,.08) 0%, transparent 60%); } .hero-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; transition: background-image var(--t); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; background: var(--anno-bg); border: 1px solid var(--anno-border); border-radius: 100px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; color: var(--green); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 24px; } .hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } } .hero-title { font-family: var(--f-display); font-size: clamp(3rem, 6.5vw, 5.5rem); font-weight: 800; line-height: 1.04; color: #fff; letter-spacing: -.02em; margin-bottom: 32px; text-transform: capitalize; } .hero-title em { font-style: normal; color: var(--green); text-shadow: 0 0 60px var(--green-glow); } .hero-desc { font-size: 1.1rem; color: rgba(255,255,255,.6); line-height: 1.85; margin-bottom: 48px; font-weight: 300; max-width: 560px; } .hero-inner { max-width: 980px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-family: var(--f-body); font-size: .9rem; font-weight: 600; border-radius: var(--r-sm); cursor: pointer; border: none; transition: all var(--t); letter-spacing: .02em; } .btn-primary { background: var(--green); color: var(--green-btn-text); } .btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 32px var(--green-glow); transform: translateY(-2px); } .btn-ghost { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--t-2); backdrop-filter: blur(8px); } .btn-ghost:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-h); color: var(--t-1); } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* Hero stats */ .hero-stats { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); backdrop-filter: blur(20px); overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: var(--glass-shadow), 0 0 60px var(--green-glow-sm); } .hero-stat { padding: 32px 20px; background: var(--glass-bg); text-align: center; } .hero-stat:not(:last-child) { border-right: 1px solid var(--glass-border); } .hero-stat__value { font-family: var(--f-display); font-size: 2.2rem; font-weight: 800; color: var(--green); line-height: 1; margin-bottom: 8px; } .hero-stat__label { font-family: var(--f-mono); font-size: .7rem; color: var(--t-3); letter-spacing: .06em; } /* ── Section shared ──────────────────────────────────────── */ .section { padding: 100px 0; position: relative; z-index: 1; } .section-alt { background: var(--page-hero-bg); } .section-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .68rem; font-weight: 500; color: var(--green); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; } .section-label::before { content: ''; width: 20px; height: 1px; background: var(--green); } .section-title { font-family: var(--f-display); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; color: var(--t-1); line-height: 1.2; margin-bottom: 20px; text-transform: capitalize; letter-spacing: -.01em; } .section-desc { font-size: .98rem; color: var(--t-2); line-height: 1.85; font-weight: 300; } .section-header { margin-bottom: 52px; } .section-header--center { text-align: center; max-width: 600px; margin: 0 auto 52px; } /* ── About ───────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .about-content p { color: var(--t-2); line-height: 1.9; margin-bottom: 20px; font-size: 1.02rem; font-weight: 300; } .about-list { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; } .about-list li { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--t-2); } .about-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 8px var(--green-glow); } .info-card { background: rgba(0,0,0,.35); border: 1px solid var(--green-glow); border-top: 2px solid var(--green); border-radius: var(--r-lg); padding: 40px 36px; } .info-card__title { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--green-glow); letter-spacing: .02em; text-transform: uppercase; } .info-table { width: 100%; border-collapse: collapse; } .info-table tr { border-bottom: 1px solid var(--glass-border); } .info-table tr:last-child { border-bottom: none; } .info-table th { width: 40%; padding: 11px 0; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; color: var(--t-3); text-align: left; letter-spacing: .04em; vertical-align: top; } .info-table td { padding: 11px 0; font-size: .86rem; color: var(--t-2); line-height: 1.6; } /* ── Report cards (homepage) ─────────────────────────────── */ .reports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .report-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow); transition: all var(--t); } .report-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--green), transparent); opacity: 0; transition: opacity var(--t); } .report-card:hover { background: var(--glass-bg-hover); border-color: var(--green-glow); box-shadow: var(--glass-shadow-h), 0 0 40px var(--green-glow-sm); transform: translateY(-4px); } .report-card:hover::before { opacity: 1; } .report-card__year-badge { position: absolute; top: 16px; right: 20px; font-family: var(--f-display); font-size: 3.5rem; font-weight: 800; color: var(--glass-border); line-height: 1; user-select: none; transition: color var(--t); } .report-card:hover .report-card__year-badge { color: var(--green-glow-sm); } .report-card__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--anno-bg); border: 1px solid var(--anno-border); display: flex; align-items: center; justify-content: center; } .report-card__icon svg { width: 20px; height: 20px; color: var(--green); } .report-card__meta { display: flex; align-items: center; gap: 8px; } .report-card__tag { padding: 3px 10px; background: var(--anno-bg); border: 1px solid var(--anno-border); border-radius: 100px; font-family: var(--f-mono); font-size: .66rem; font-weight: 500; color: var(--green); letter-spacing: .06em; } .report-card__date { font-family: var(--f-mono); font-size: .72rem; color: var(--t-3); } .report-card__title { font-family: var(--f-display); font-size: .98rem; font-weight: 700; color: var(--t-1); line-height: 1.4; } .report-card__type { font-size: .82rem; color: var(--t-2); line-height: 1.65; font-weight: 300; } .report-card__footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* Buttons: download + outline */ .btn-download { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--green); color: var(--green-btn-text); border-radius: var(--r-sm); font-family: var(--f-body); font-size: .8rem; font-weight: 600; transition: all var(--t); } .btn-download:hover { filter: brightness(1.1); box-shadow: 0 0 20px var(--green-glow); transform: translateY(-1px); } .btn-download svg { width: 13px; height: 13px; } .btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: transparent; color: var(--t-2); border: 1px solid var(--glass-border-h); border-radius: var(--r-sm); font-family: var(--f-body); font-size: .8rem; font-weight: 500; transition: all var(--t); } .btn-outline:hover { background: var(--glass-bg-hover); border-color: var(--green-glow); color: var(--green); } /* ── Page hero ───────────────────────────────────────────── */ .page-hero { position: relative; z-index: 1; padding: 64px 0 48px; border-bottom: 1px solid var(--glass-border); background: var(--page-hero-bg); } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 0%, var(--mesh-1) 0%, transparent 70%); pointer-events: none; } .page-hero-inner { position: relative; z-index: 1; } .page-hero__label { font-family: var(--f-mono); font-size: .68rem; color: var(--t-3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .page-hero__label::before { content: ''; width: 20px; height: 1px; background: var(--t-4); } .page-hero__title { font-family: var(--f-display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 800; color: var(--t-1); line-height: 1.2; margin-bottom: 12px; } .page-hero__subtitle { font-family: var(--f-mono); font-size: .88rem; color: var(--t-3); font-weight: 300; letter-spacing: .04em; } /* ── Year filter ─────────────────────────────────────────── */ .year-filter { display: flex; align-items: center; gap: 8px; padding: 28px 0 32px; flex-wrap: wrap; } .year-filter__label { font-family: var(--f-mono); font-size: .68rem; color: var(--t-3); letter-spacing: .08em; text-transform: uppercase; margin-right: 8px; } .year-tab { padding: 8px 20px; border-radius: 100px; font-family: var(--f-body); font-size: .84rem; font-weight: 500; cursor: pointer; border: 1px solid var(--glass-border-h); background: var(--glass-bg); color: var(--t-2); transition: all var(--t); backdrop-filter: blur(8px); } .year-tab:hover { border-color: var(--green-glow); color: var(--green); } .year-tab.active { background: var(--anno-bg); border-color: var(--green-glow); color: var(--green); box-shadow: 0 0 20px var(--green-glow-sm); } /* ── Reports list (archive) ──────────────────────────────── */ .reports-list { display: flex; flex-direction: column; gap: 12px; } .report-item { display: flex; align-items: center; gap: 24px; padding: 24px 28px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-md); backdrop-filter: blur(12px); transition: all var(--t); position: relative; overflow: hidden; } .report-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--green), transparent); opacity: 0; transition: opacity var(--t); } .report-item:hover { background: var(--glass-bg-hover); border-color: var(--green-glow); box-shadow: var(--glass-shadow-h), 0 0 40px var(--green-glow-sm); transform: translateX(6px); } .report-item:hover::before { opacity: 1; } .report-item__number { font-family: var(--f-display); font-size: 2.6rem; font-weight: 800; color: var(--glass-border); line-height: 1; min-width: 64px; text-align: center; position: relative; transition: color var(--t); } .report-item:hover .report-item__number { color: var(--green-glow); } .report-item__number::after { content: '月'; position: absolute; bottom: -6px; right: -2px; font-size: .6rem; font-family: var(--f-mono); color: var(--t-3); letter-spacing: .04em; } .report-item__divider { width: 1px; height: 48px; background: var(--glass-border); flex-shrink: 0; } .report-item__content { flex: 1; min-width: 0; } .report-item__roc { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; color: var(--green); letter-spacing: .08em; margin-bottom: 5px; } .report-item__title { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--t-1); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-item__title a { color: inherit; } .report-item__title a:hover { color: var(--green); } .report-item__subtitle { font-family: var(--f-mono); font-size: .72rem; color: var(--t-3); margin-top: 4px; } .report-item__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .report-item__pdf-badge { padding: 3px 8px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: .62rem; font-weight: 700; color: #f87171; letter-spacing: .06em; } /* ── No results ──────────────────────────────────────────── */ .no-reports { text-align: center; padding: 80px 24px; color: var(--t-3); } .no-reports__icon { width: 56px; height: 56px; margin: 0 auto 20px; opacity: .25; } .report-empty-year { display: none; } /* ── CTA ─────────────────────────────────────────────────── */ .cta-section { position: relative; z-index: 1; padding: 80px 0; border-top: 1px solid var(--glass-border); } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, var(--mesh-1) 0%, transparent 70%); pointer-events: none; } .cta-inner { position: relative; z-index: 1; text-align: center; } .cta-title { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--t-1); margin-bottom: 16px; } .cta-desc { font-size: .98rem; color: var(--t-2); margin-bottom: 40px; font-weight: 300; } /* ── Footer ──────────────────────────────────────────────── */ .site-footer { position: relative; z-index: 1; background: var(--footer-bg); border-top: 1px solid var(--glass-border); padding: 60px 0 32px; backdrop-filter: blur(20px); } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand__name { font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; color: var(--t-1); margin-bottom: 12px; } .footer-brand__desc { font-size: .84rem; line-height: 1.85; color: var(--t-3); margin-bottom: 24px; font-weight: 300; } .footer-reg { display: inline-block; padding: 5px 12px; border: 1px solid var(--glass-border); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: .68rem; color: var(--t-3); letter-spacing: .06em; } .footer-heading { font-family: var(--f-mono); font-size: .65rem; color: var(--t-3); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: .86rem; color: var(--t-3); transition: color var(--t); font-weight: 300; } .footer-links a:hover { color: var(--green); } .footer-contact p { font-size: .83rem; color: var(--t-3); margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; font-weight: 300; } .footer-contact p svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; color: var(--green); } .footer-divider { border: none; border-top: 1px solid var(--glass-border); margin-bottom: 24px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: .7rem; color: var(--t-3); } /* ── Single report ───────────────────────────────────────── */ .single-report-wrapper { max-width: 900px; margin: 0 auto; padding: 60px 24px; position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .72rem; color: var(--t-3); margin-bottom: 20px; } .breadcrumb a { color: var(--green); } .breadcrumb__sep { color: var(--t-4); } .single-report-title { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--t-1); line-height: 1.25; margin-bottom: 20px; } .single-report-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; } .meta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em; } .meta-chip--green { background: var(--anno-bg); border: 1px solid var(--anno-border); color: var(--green); } .meta-chip--gray { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--t-3); } .pdf-viewer-box { background: var(--pdf-bg); border: 1px solid var(--glass-border); border-radius: var(--r-md); overflow: hidden; margin: 28px 0; } .pdf-viewer-box iframe { width: 100%; height: 720px; display: block; border: none; } .pdf-fallback { padding: 60px 24px; text-align: center; } .pdf-fallback p { color: var(--t-3); margin-bottom: 20px; font-weight: 300; } /* ── Animations ──────────────────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp .55s ease both; } .animate-in-delay-1 { animation-delay: .08s; } .animate-in-delay-2 { animation-delay: .16s; } .animate-in-delay-3 { animation-delay: .24s; } .animate-in-delay-4 { animation-delay: .32s; } /* ── Services grid ───────────────────────────────────────── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .service-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow); transition: all var(--t); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--green), transparent); opacity: 0; transition: opacity var(--t); } .service-card:hover { background: var(--glass-bg-hover); border-color: var(--green-glow); box-shadow: var(--glass-shadow-h), 0 0 40px var(--green-glow-sm); transform: translateY(-4px); } .service-card:hover::before { opacity: 1; } .service-card__icon { width: 46px; height: 46px; background: var(--anno-bg); border: 1px solid var(--anno-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .service-card__icon svg { width: 22px; height: 22px; color: var(--green); } .service-card__title { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--t-1); line-height: 1.35; } .service-card__desc { font-size: .875rem; color: var(--t-2); line-height: 1.8; font-weight: 300; } /* ── Markets ─────────────────────────────────────────────── */ .markets-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .market-tag { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: transparent; border: 1px solid var(--glass-border-h); border-radius: 100px; font-family: var(--f-body); font-size: .88rem; color: var(--t-2); font-weight: 500; transition: all var(--t); } .market-tag:hover { border-color: var(--green-glow); color: var(--t-1); } .market-tag--green { background: var(--anno-bg); border-color: var(--anno-border); color: var(--green); } /* ── Why Choose Us ───────────────────────────────────────── */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; } .why-item { display: flex; align-items: flex-start; gap: 14px; padding: 24px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-md); backdrop-filter: blur(8px); transition: all var(--t); } .why-item:hover { background: var(--glass-bg-hover); border-color: var(--green-glow); } .why-item__icon { width: 28px; height: 28px; flex-shrink: 0; background: var(--anno-bg); border: 1px solid var(--anno-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .why-item__icon svg { width: 13px; height: 13px; color: var(--green); } .why-item p { font-size: .875rem; color: var(--t-2); line-height: 1.7; font-weight: 300; } /* ── Contact section ─────────────────────────────────────── */ .contact-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .contact-cards { display: flex; flex-direction: column; gap: 12px; } .contact-card { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-md); backdrop-filter: blur(12px); transition: all var(--t); color: inherit; } .contact-card:hover { background: var(--glass-bg-hover); border-color: var(--green-glow); } .contact-card__icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--anno-bg); border: 1px solid var(--anno-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .contact-card__icon svg { width: 20px; height: 20px; color: var(--green); } .contact-card__label { font-family: var(--f-mono); font-size: .66rem; color: var(--t-3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; } .contact-card__value { font-size: .92rem; color: var(--t-1); font-weight: 500; } /* ── Financial Reports Page (EN-site inspired) ───────────── */ :root { --fr-navy: #05141f; --fr-neon: #33ffc6; --fr-neon-dim: rgba(51,255,198,.15); --fr-neon-glow: rgba(51,255,198,.25); --fr-text: #e7eaec; --fr-muted: rgba(231,234,236,.45); --fr-border: rgba(51,255,198,.12); --fr-row-alt: rgba(255,255,255,.025); } /* Banner */ .fr-banner { position: relative; background: var(--fr-navy); padding: 16px 0 20px; overflow: hidden; border-bottom: 1px solid var(--fr-border); } .fr-banner__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(51,255,198,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(51,255,198,.04) 1px, transparent 1px); background-size: 60px 60px; } .fr-banner__grid::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 10% 50%, rgba(51,255,198,.06) 0%, transparent 60%); } .fr-banner__inner { position: relative; z-index: 1; max-width: 680px; } .fr-banner__eyebrow { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fr-neon); margin-bottom: 6px; display: flex; align-items: center; gap: 12px; } .fr-banner__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--fr-neon); } .fr-banner__title { font-family: var(--f-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; line-height: 1.05; color: #fff; margin-bottom: 8px; letter-spacing: -.01em; } .fr-banner__title-accent { color: var(--fr-neon); } .fr-banner__desc { font-size: .9rem; color: var(--fr-muted); line-height: 1.5; font-weight: 300; max-width: 520px; margin-top: 0; } .fr-banner__scroll { position: absolute; bottom: 32px; right: 40px; display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .62rem; color: var(--fr-muted); letter-spacing: .14em; text-transform: uppercase; } .fr-banner__scroll span { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--fr-neon), transparent); } /* Section */ .fr-section { background: var(--fr-navy); padding: 8px 0 64px; position: relative; z-index: 1; min-height: 60vh; } .fr-section::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: var(--fr-navy); } /* Year bar */ .fr-year-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 40px; flex-wrap: wrap; } .fr-year-bar__label { font-family: var(--f-mono); font-size: .65rem; color: var(--fr-muted); letter-spacing: .14em; text-transform: uppercase; margin-right: 8px; } .fr-year-tab { padding: 8px 22px; background: transparent; border: 1px solid rgba(231,234,236,.18); border-radius: 100px; font-family: var(--f-mono); font-size: .8rem; font-weight: 500; color: var(--fr-muted); cursor: pointer; transition: all var(--t); letter-spacing: .04em; } .fr-year-tab:hover { border-color: var(--fr-neon); color: var(--fr-neon); } .fr-year-tab--active { background: var(--fr-neon-dim); border-color: var(--fr-neon); color: var(--fr-neon); box-shadow: 0 0 20px var(--fr-neon-glow); } /* Table */ .fr-table-wrap { border: 1px solid var(--fr-border); border-radius: var(--r-md); overflow: hidden; } .fr-table { width: 100%; border-collapse: collapse; } .fr-th { padding: 16px 28px; font-family: var(--f-mono); font-size: .64rem; font-weight: 600; color: var(--fr-neon); letter-spacing: .14em; text-transform: uppercase; background: rgba(51,255,198,.05); border-bottom: 1px solid var(--fr-border); text-align: left; } .fr-th--center { text-align: center; } .fr-th--right { text-align: right; } .fr-row { border-bottom: 1px solid var(--fr-border); transition: background var(--t); } .fr-row:last-child { border-bottom: none; } .fr-row--alt { background: var(--fr-row-alt); } .fr-row:hover { background: rgba(51,255,198,.04); } .fr-td { padding: 22px 28px; vertical-align: middle; } .fr-td--period { min-width: 160px; } .fr-td--title { width: 45%; } .fr-td--date { text-align: center; white-space: nowrap; } .fr-td--action { text-align: right; white-space: nowrap; } /* Period cell */ .fr-period { display: flex; align-items: center; gap: 16px; } .fr-period__num { font-family: var(--f-display); font-size: 2.4rem; font-weight: 800; color: var(--fr-neon); line-height: 1; min-width: 52px; text-align: center; text-shadow: 0 0 30px var(--fr-neon-glow); } .fr-period__info { display: flex; flex-direction: column; gap: 3px; } .fr-period__label { font-family: var(--f-mono); font-size: .66rem; color: var(--fr-muted); letter-spacing: .06em; } .fr-period__month { font-family: var(--f-mono); font-size: .75rem; color: var(--fr-text); font-weight: 600; letter-spacing: .04em; } /* Title cell */ .fr-title { display: block; font-family: var(--f-display); font-size: .98rem; font-weight: 700; color: var(--fr-text); line-height: 1.4; margin-bottom: 5px; transition: color var(--t); } .fr-title:hover { color: var(--fr-neon); } .fr-subtitle { font-family: var(--f-mono); font-size: .68rem; color: var(--fr-muted); letter-spacing: .04em; } /* Date */ .fr-date { font-family: var(--f-mono); font-size: .78rem; color: var(--fr-muted); letter-spacing: .04em; } /* Button */ .fr-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; background: var(--fr-neon); color: #05141f; font-family: var(--f-body); font-size: .8rem; font-weight: 700; border-radius: var(--r-sm); border: none; cursor: pointer; transition: all var(--t); letter-spacing: .04em; } .fr-btn:hover { background: #fff; color: #05141f; box-shadow: 0 0 24px var(--fr-neon-glow); transform: translateY(-1px); } .fr-btn svg { width: 13px; height: 13px; } /* Pending */ .fr-pending { font-family: var(--f-mono); font-size: .72rem; color: var(--fr-muted); letter-spacing: .06em; } /* Empty state */ .fr-empty { text-align: center; padding: 80px 24px; color: var(--fr-muted); } .fr-empty svg { width: 52px; height: 52px; margin: 0 auto 20px; opacity: .2; } .fr-empty p { margin-bottom: 24px; font-size: .95rem; } /* ── Financial reports table ─────────────────────────────── */ .fin-table-wrap { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); overflow: hidden; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow); } .fin-table { width: 100%; border-collapse: collapse; } .fin-table thead tr { border-bottom: 1px solid var(--glass-border); } .fin-table th { padding: 16px 24px; font-family: var(--f-mono); font-size: .65rem; font-weight: 500; color: var(--t-3); text-align: left; letter-spacing: .1em; text-transform: uppercase; background: var(--glass-bg); } .fin-table__row { border-bottom: 1px solid var(--glass-border); transition: background var(--t); } .fin-table__row:last-child { border-bottom: none; } .fin-table__row:hover { background: var(--glass-bg-hover); } .fin-table td { padding: 18px 24px; vertical-align: middle; } .fin-table__period { display: flex; align-items: center; gap: 14px; white-space: nowrap; } .fin-table__month { font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; color: var(--green); line-height: 1; min-width: 36px; } .fin-table__period-label { font-family: var(--f-mono); font-size: .68rem; color: var(--t-3); letter-spacing: .05em; } .fin-table__title { font-family: var(--f-display); font-size: .95rem; font-weight: 700; color: var(--t-1); line-height: 1.4; transition: color var(--t); } .fin-table__title:hover { color: var(--green); } .fin-table__date span { font-family: var(--f-mono); font-size: .78rem; color: var(--t-3); } .fin-table__pending { font-family: var(--f-mono); font-size: .72rem; color: var(--t-3); letter-spacing: .05em; } /* ── Homepage v2 (tron-inspired) ────────────────────────── */ /* Alternate section bg (light) */ .section-light { background: #eff1f2; } .section-light .section-label { color: #05141f; } .section-light .section-label::before { background: #05141f; } .section-light .section-title { color: #05141f; } .section-light .section-desc { color: rgba(5,20,31,.65); } .section-light .about-content p { color: rgba(5,20,31,.65); } .section-light .info-card { background: #fff; border-color: rgba(5,20,31,.08); box-shadow: 0 4px 24px rgba(0,0,0,.07); } .section-light .info-card__title { color: #05141f; border-color: rgba(5,20,31,.08); } .section-light .info-table th { color: rgba(5,20,31,.45); } .section-light .info-table td { color: rgba(5,20,31,.75); } .section-light .info-table tr { border-color: rgba(5,20,31,.08); } .section-light .market-tag { background: rgba(5,20,31,.05); border-color: rgba(5,20,31,.12); color: rgba(5,20,31,.7); } .section-light .market-tag--green { background: rgba(0,107,82,.08); border-color: rgba(0,107,82,.2); color: #006b52; } /* Gradient section */ .section-gradient { background: linear-gradient(135deg, #3e5151 0%, #05141f 60%); } /* Milestone bar (stats row) */ .milestone-bar { background: rgba(0,0,0,.25); border-top: 1px solid rgba(51,255,198,.08); border-bottom: 1px solid rgba(51,255,198,.08); padding: 80px 0; position: relative; z-index: 1; } .milestone-bar__label { text-align: right; font-family: var(--f-mono); font-size: .68rem; color: rgba(255,255,255,.25); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 40px; display: flex; align-items: center; gap: 12px; justify-content: flex-end; } .milestone-bar__label::before { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); } .milestone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .milestone-item { padding: 0 40px; border-right: 1px solid rgba(51,255,198,.08); text-align: center; } .milestone-item:first-child { padding-left: 0; text-align: left; } .milestone-item:last-child { border-right: none; } .milestone-item__value { font-family: var(--f-display); font-size: 4.5rem; font-weight: 800; line-height: 1; background: linear-gradient(to right, #b7b7b7 0%, #52656f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 14px; letter-spacing: -.02em; } .milestone-item__label { font-family: var(--f-body); font-size: .85rem; color: rgba(231,234,236,.5); line-height: 1.5; font-weight: 300; } /* Box-button CTA (tron style) */ .box-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 1rem; font-weight: 600; color: var(--t-1); letter-spacing: .02em; transition: gap var(--t), color var(--t); border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 4px; } .box-btn:hover { gap: 18px; color: var(--green); border-color: var(--green); } .box-btn svg { width: 18px; height: 18px; transition: transform var(--t); } .box-btn:hover svg { transform: translateX(4px); } .box-btn--dark { color: #05141f; border-color: rgba(5,20,31,.25); } .box-btn--dark:hover { color: #006b52; border-color: #006b52; } /* Service card v2 */ .service-card-v2 { background: rgba(255,255,255,.03); border: 1px solid rgba(51,255,198,.08); border-top: 2px solid var(--green); border-radius: var(--r-lg); padding: 36px 28px; display: flex; flex-direction: column; gap: 14px; transition: all var(--t); } .service-card-v2:hover { background: rgba(51,255,198,.05); border-color: rgba(51,255,198,.2); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.3), 0 0 40px var(--green-glow-sm); } .service-card-v2 .service-card__icon { background: rgba(51,255,198,.1); border-color: rgba(51,255,198,.15); border-radius: var(--r-md); } /* Why grid v2 */ .why-item-v2 { display: flex; align-items: flex-start; gap: 16px; padding: 0 0 28px; border-bottom: 1px solid rgba(51,255,198,.08); } .why-item-v2:last-child { border-bottom: none; padding-bottom: 0; } .why-item-v2__num { font-family: var(--f-mono); font-size: .7rem; font-weight: 600; color: var(--green); letter-spacing: .06em; flex-shrink: 0; margin-top: 2px; width: 28px; } .why-item-v2__text { font-size: .92rem; color: var(--t-2); line-height: 1.75; font-weight: 300; } .why-list-v2 { max-width: 560px; } /* Contact v2 */ .contact-inner-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-item-v2 { display: flex; gap: 20px; padding: 28px 0; border-bottom: 1px solid rgba(51,255,198,.08); align-items: flex-start; } .contact-item-v2__icon { width: 48px; height: 48px; flex-shrink: 0; border: 1px solid rgba(51,255,198,.2); display: flex; align-items: center; justify-content: center; } .contact-item-v2__icon svg { width: 20px; height: 20px; color: var(--green); } .contact-item-v2__label { font-family: var(--f-mono); font-size: .64rem; color: var(--t-3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; } .contact-item-v2__value { font-size: .95rem; color: var(--t-1); font-weight: 500; } @media (max-width: 1024px) { .milestone-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .milestone-item { border-right: none; padding: 0; text-align: center !important; } .milestone-item:first-child { text-align: center !important; } .contact-inner-v2 { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 640px) { .milestone-grid { grid-template-columns: repeat(2, 1fr); } .milestone-item__value { font-size: 2.8rem; } } /* ── Polylang language flags/names overrides ─────────────── */ .pll-parent-menu-item { display: none; } /* hide from main nav if added there */ /* ── View all ────────────────────────────────────────────── */ .view-all-wrap { text-align: center; margin-top: 48px; } /* ── Responsive ──────────────────────────────────────────── */ /* FR responsive */ @media (max-width: 768px) { .fr-banner { padding: 16px 0 24px; } .fr-banner__title { font-size: clamp(2.4rem, 8vw, 3.5rem); } .fr-banner__scroll { display: none; } .fr-td { padding: 16px 16px; } .fr-th { padding: 14px 16px; } .fr-period__num { font-size: 1.8rem; min-width: 40px; } .fr-td--date { display: none; } .fr-th:nth-child(3) { display: none; } .fr-title { font-size: .9rem; } } @media (max-width: 480px) { .fr-period__info { display: none; } .fr-period { gap: 10px; } } @media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; gap: 48px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > *:first-child { grid-column: 1/-1; } .reports-grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .contact-inner { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .site-nav { display: none; } .site-nav.open { display: block; position: absolute; top: 68px; left: 0; right: 0; background: var(--header-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); padding: 12px; } .site-nav.open ul { flex-direction: column; } .nav-toggle { display: flex; } .hero { padding: 60px 0; } .hero-stats { grid-template-columns: 1fr; } .section { padding: 60px 0; } .reports-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 8px; text-align: center; } .report-item { flex-wrap: wrap; gap: 16px; } .report-item__actions { width: 100%; justify-content: flex-end; } .header-tools { gap: 6px; } .lang-switcher a, .lang-btn { padding: 6px 8px; font-size: .68rem; } } @media (max-width: 480px) { .container { padding: 0 16px; } .hero-actions { flex-direction: column; } .btn { justify-content: center; } } /* Horizontal-scroll year bar for many years */ .fr-year-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--fr-neon) transparent; padding-bottom: 16px !important; /* room for scrollbar */ margin-bottom: 24px; -webkit-overflow-scrolling: touch; } .fr-year-bar::-webkit-scrollbar { height: 6px; } .fr-year-bar::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 100px; } .fr-year-bar::-webkit-scrollbar-thumb { background: var(--fr-neon-glow); border-radius: 100px; } .fr-year-bar::-webkit-scrollbar-thumb:hover { background: var(--fr-neon); } .fr-year-bar > * { flex-shrink: 0; } /* tabs/labels don't squish */ /* Subtle fade on scroll edges so users see there's more */ .fr-year-bar-wrap { position: relative; } .fr-year-bar-wrap::after { content: ''; position: absolute; right: 0; top: 0; bottom: 16px; width: 40px; background: linear-gradient(to right, transparent, var(--fr-navy)); pointer-events: none; opacity: .9; } /* ── Preview Modal ─────────────────────────────────────── */ .fr-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; } .fr-modal.is-open { display: flex; } .fr-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(4px); cursor: pointer; } .fr-modal__panel { position: relative; z-index: 1; background: var(--fr-navy); border: 1px solid var(--fr-border); border-radius: var(--r-lg); width: 100%; max-width: 1100px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,.6); overflow: hidden; } .fr-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--fr-border); background: rgba(51,255,198,.04); } .fr-modal__title { font-family: var(--f-display); font-size: 1rem; font-weight: 700; color: var(--fr-text); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-modal__actions { display: flex; align-items: center; gap: 12px; } .fr-modal__close { width: 36px; height: 36px; background: transparent; border: 1px solid var(--fr-border); border-radius: var(--r-sm); color: var(--fr-text); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: all var(--t); } .fr-modal__close:hover { background: rgba(255,255,255,.06); color: var(--fr-neon); border-color: var(--fr-neon); } .fr-modal__iframe { flex: 1; width: 100%; min-height: 60vh; border: none; background: #fff; } /* Ghost button for preview (lower-emphasis vs filled PDF download) */ .fr-btn--ghost { background: transparent; border: 1px solid var(--fr-neon); color: var(--fr-neon); } .fr-btn--ghost:hover { background: var(--fr-neon); color: #05141f; box-shadow: 0 0 24px var(--fr-neon-glow); } /* Action cell: stack buttons inline-flex with gap */ .fr-td--action { display: flex; gap: 8px; justify-content: flex-end; align-items: center; } @media (max-width: 768px) { .fr-td--action { flex-direction: column; align-items: stretch; } .fr-modal { padding: 0; } .fr-modal__panel { max-width: 100%; max-height: 100vh; border-radius: 0; border: none; } } /* Modal icon button (fullscreen) */ .fr-modal__icon-btn { width: 36px; height: 36px; background: transparent; border: 1px solid var(--fr-border); border-radius: var(--r-sm); color: var(--fr-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t); } .fr-modal__icon-btn:hover { background: rgba(255,255,255,.06); color: var(--fr-neon); border-color: var(--fr-neon); } .fr-modal__icon-btn svg { width: 16px; height: 16px; } /* When the panel goes fullscreen, the iframe should fill it */ .fr-modal__panel:fullscreen, .fr-modal__panel:-webkit-full-screen { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; border-radius: 0; border: none; background: var(--fr-navy); } .fr-modal__panel:fullscreen .fr-modal__iframe, .fr-modal__panel:-webkit-full-screen .fr-modal__iframe { height: calc(100vh - 60px); } /* Make the default modal larger so it feels more immersive */ .fr-modal__panel { max-width: 1300px; max-height: 95vh; } .fr-modal__iframe { min-height: 80vh; } /* ── Year-block list layout ─────────────────────────────── */ .fr-yearblock { margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--fr-border); } .fr-yearblock:last-child { border-bottom: none; } .fr-yearblock__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--fr-border); } .fr-yearblock__num { font-family: var(--f-display); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--fr-neon); text-shadow: 0 0 30px var(--fr-neon-glow); letter-spacing: -.02em; } .fr-yearblock__title { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; color: var(--fr-text); margin: 0; } .fr-yearblock__count { margin-left: auto; font-family: var(--f-mono); font-size: .72rem; color: var(--fr-muted); letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; background: rgba(51,255,198,.06); border: 1px solid var(--fr-border); border-radius: 100px; } .fr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .fr-list__item { display: block; } .fr-list__btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; background: transparent; border: 1px solid var(--fr-border); border-radius: var(--r-md); color: var(--fr-text); text-align: left; font-family: inherit; font-size: 1rem; cursor: pointer; transition: all var(--t); position: relative; } button.fr-list__btn { font: inherit; } .fr-list__btn:hover { background: rgba(51,255,198,.05); border-color: var(--fr-neon); transform: translateX(4px); box-shadow: 0 8px 30px rgba(0,0,0,.3), 0 0 0 1px var(--fr-neon-glow); } .fr-list__bullet { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fr-border); border-radius: 50%; color: var(--fr-neon); transition: all var(--t); } .fr-list__bullet svg { width: 12px; height: 12px; } .fr-list__btn:hover .fr-list__bullet { background: var(--fr-neon); color: var(--fr-navy); border-color: var(--fr-neon); transform: rotate(0deg); } .fr-list__title { flex: 1; font-family: var(--f-display); font-size: 1rem; font-weight: 500; color: var(--fr-text); letter-spacing: .01em; } .fr-list__hint { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .72rem; font-weight: 600; color: var(--fr-muted); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--fr-border); border-radius: 100px; flex-shrink: 0; transition: all var(--t); } .fr-list__hint svg { width: 14px; height: 14px; } .fr-list__btn:hover .fr-list__hint { background: var(--fr-neon); color: var(--fr-navy); border-color: var(--fr-neon); } .fr-list__pending { font-family: var(--f-mono); font-size: .7rem; color: var(--fr-muted); letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border: 1px dashed var(--fr-border); border-radius: 100px; flex-shrink: 0; } .fr-list__item--pending .fr-list__btn { opacity: .55; cursor: default; } .fr-list__item--pending .fr-list__btn:hover { transform: none; background: transparent; box-shadow: none; border-color: var(--fr-border); } .fr-list__item--pending .fr-list__btn:hover .fr-list__bullet { background: transparent; color: var(--fr-neon); transform: none; } @media (max-width: 640px) { .fr-yearblock__head { flex-wrap: wrap; gap: 8px 16px; } .fr-yearblock__num { font-size: 2.4rem; } .fr-yearblock__title { font-size: 1.1rem; } .fr-list__btn { padding: 14px 16px; gap: 12px; flex-wrap: wrap; } .fr-list__title { font-size: .9rem; } .fr-list__hint span, .fr-list__hint { font-size: .65rem; } } /* ============================================================ ARCHIVE EDITORIAL — /reports/ rebuild Aesthetic: serious financial dossier, oversized year as cover-title, numbered entries with vertical rail, refined typographic hierarchy. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap"); .syt-standalone { --ink: #f5efe2; --ink-dim: rgba(245,239,226,.55); --ink-faint: rgba(245,239,226,.16); --gold: #cdb87a; --rule: rgba(245,239,226,.10); --paper: #0a1218; --f-edit: "Cormorant Garamond", "Noto Serif TC", Georgia, serif; --f-sans: "DM Sans", "Noto Sans TC", system-ui, sans-serif; --f-codex: "DM Mono", "JetBrains Mono", monospace; } .syt-standalone body, .syt-standalone { background: var(--paper) !important; color: var(--ink); } /* Subtle paper grain on archive pages */ .syt-standalone::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(rgba(255,255,255,.012) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; opacity: .8; } /* ────── Cover (banner) ────── */ .archive-cover { position: relative; padding: 56px 0 24px; overflow: hidden; background: var(--paper); } .archive-cover__bg { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; overflow: hidden; } .archive-cover__watermark { font-family: var(--f-edit); font-style: italic; font-weight: 500; font-size: clamp(10rem, 22vw, 22rem); color: rgba(245,239,226,.025); letter-spacing: -.04em; line-height: 1; white-space: nowrap; margin-left: -2vw; user-select: none; } .archive-cover__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; padding-top: 24px; } .archive-cover__lede { max-width: 720px; } .archive-cover__kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-codex); font-size: .68rem; font-weight: 500; color: var(--gold); letter-spacing: .24em; text-transform: uppercase; margin: 0 0 28px; } .archive-cover__bullet { display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 12px rgba(205,184,122,.4); } .archive-cover__title { font-family: var(--f-edit); font-weight: 500; line-height: .95; margin: 0 0 24px; letter-spacing: -.02em; color: var(--ink); display: block; } .archive-cover__title-zh { display: block; font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 600; } .archive-cover__title-en { display: block; margin-top: 4px; font-style: italic; font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); color: var(--gold); letter-spacing: -.01em; } .archive-cover__desc { font-family: var(--f-sans); font-size: 1rem; line-height: 1.75; color: var(--ink-dim); max-width: 560px; margin: 0; } .archive-cover__meta { display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--rule); padding-left: 32px; min-width: 200px; } .archive-cover__metarow { display: flex; flex-direction: column; gap: 6px; } .archive-cover__metalabel { font-family: var(--f-codex); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } .archive-cover__metavalue { font-family: var(--f-edit); font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); font-feature-settings: "lnum" on, "tnum" on; } .archive-cover__metavalue--accent { color: var(--gold); font-style: italic; } .archive-rule { margin: 24px 0 0; border: none; height: 1px; background: linear-gradient(to right, transparent 0%, var(--rule) 8%, var(--rule) 92%, transparent 100%); position: relative; } .archive-rule::after { content: "◆"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); background: var(--paper); padding: 0 12px; color: var(--gold); font-size: .6rem; } /* ────── Volume stack ────── */ .archive-stack { padding: 64px 0 96px; } .vol { position: relative; padding: 40px 0 64px; border-bottom: 1px solid var(--rule); } .vol:last-child { border-bottom: none; } .vol__watermark { position: absolute; top: 12px; right: -2vw; font-family: var(--f-edit); font-style: italic; font-weight: 600; font-size: clamp(10rem, 26vw, 26rem); color: rgba(245,239,226,.022); line-height: .8; letter-spacing: -.05em; pointer-events: none; user-select: none; z-index: 0; } .vol__head { position: relative; z-index: 1; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: end; } .vol__index { font-family: var(--f-codex); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); align-self: center; border: 1px solid var(--gold); padding: 6px 12px; border-radius: 2px; } .vol__title { font-family: var(--f-edit); font-weight: 500; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; margin: 0; color: var(--ink); letter-spacing: -.01em; } .vol__title em { font-style: italic; color: var(--gold); font-weight: 600; margin: 0 .1em; } .vol__sub { align-self: center; font-family: var(--f-codex); font-size: .72rem; color: var(--ink-dim); letter-spacing: .14em; text-transform: uppercase; margin: 0; text-align: right; } /* Entries list */ .entries { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; } .entry { position: relative; animation: entryIn .6s ease both; animation-delay: calc(var(--entry-i, 1) * 60ms); } @keyframes entryIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .entry__row { display: grid; grid-template-columns: 80px 28px 1fr auto; gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; position: relative; transition: padding .35s cubic-bezier(.4,0,.2,1); } .entry:last-child .entry__row { border-bottom: none; } .entry__num { font-family: var(--f-codex); font-size: .82rem; font-weight: 500; color: var(--ink-faint); letter-spacing: .04em; font-feature-settings: "tnum" on; transition: color .35s; } .entry__rail { position: relative; height: 2px; background: var(--rule); display: block; } .entry__dot { position: absolute; left: 0; top: 50%; transform: translate(-2px,-50%); width: 8px; height: 8px; background: var(--ink-faint); border-radius: 50%; transition: all .35s cubic-bezier(.4,0,.2,1); } .entry__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .entry__month { font-family: var(--f-codex); font-size: .66rem; font-weight: 500; color: var(--gold); letter-spacing: .2em; text-transform: uppercase; } .entry__title { font-family: var(--f-edit); font-weight: 500; font-size: 1.35rem; line-height: 1.25; color: var(--ink); margin: 0; letter-spacing: -.005em; } .entry__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; } .entry__date { font-family: var(--f-codex); font-size: .72rem; color: var(--ink-dim); letter-spacing: .08em; font-feature-settings: "tnum" on; } .entry__file { font-family: var(--f-codex); font-size: .62rem; font-weight: 500; color: var(--ink-faint); letter-spacing: .14em; text-transform: uppercase; transition: color .35s; } /* Hover (links only) */ a.entry__row:hover { padding-left: 16px; } a.entry__row:hover .entry__num { color: var(--gold); } a.entry__row:hover .entry__dot { background: var(--gold); width: 14px; height: 14px; box-shadow: 0 0 0 4px rgba(205,184,122,.12), 0 0 18px rgba(205,184,122,.3); } a.entry__row:hover .entry__title { color: var(--gold); font-style: italic; } a.entry__row:hover .entry__file { color: var(--gold); } /* Pending state */ .entry--pending .entry__row { opacity: .55; cursor: default; } .entry--pending .entry__file { font-style: italic; } /* Volume foot */ .vol__foot { margin-top: 36px; text-align: center; font-family: var(--f-edit); font-style: italic; font-size: .8rem; color: var(--ink-faint); letter-spacing: .3em; } /* Empty state */ .archive-empty { text-align: center; padding: 100px 24px; color: var(--ink-dim); } .archive-empty__num { font-family: var(--f-edit); font-style: italic; font-size: 6rem; color: var(--ink-faint); margin: 0 0 24px; } /* ────── Responsive ────── */ @media (max-width: 768px) { .archive-cover__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; } .archive-cover__meta { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 24px; flex-direction: row; gap: 24px; } .archive-cover__metarow { flex: 1; } .vol__head { grid-template-columns: 1fr; gap: 12px; } .vol__sub { text-align: left; } .entry__row { grid-template-columns: 56px 1fr; gap: 14px; padding: 20px 0; } .entry__rail { display: none; } .entry__meta { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 12px; margin-top: 6px; } .entry__title { font-size: 1.1rem; } .vol__watermark { font-size: 14rem; right: -8vw; } } /* ============================================================ HOMEPAGE — Editorial Archive (extends archive system) ============================================================ */ /* Section label used across homepage */ .hp-section-label { display: flex; align-items: center; gap: 12px; font-family: var(--f-codex); font-size: .68rem; font-weight: 500; color: var(--gold); letter-spacing: .24em; text-transform: uppercase; margin: 0 0 24px; } .hp-section-label > span { display: inline-block; width: 32px; height: 1px; background: var(--gold); } .hp-h2 { font-family: var(--f-edit); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 32px; color: var(--ink); letter-spacing: -.015em; } .hp-h2 em { font-style: italic; color: var(--gold); font-weight: 600; } .hp-h2--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; } .hp-prose { font-family: var(--f-sans); font-size: 1rem; line-height: 1.85; color: var(--ink-dim); margin: 0 0 16px; max-width: 56ch; } /* Refined link button */ .link-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-codex); font-size: .8rem; font-weight: 500; color: var(--ink); letter-spacing: .12em; text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--rule); transition: gap .35s ease, border-color .35s, color .35s; } .link-btn svg { width: 16px; height: 16px; } .link-btn:hover { gap: 18px; color: var(--gold); border-bottom-color: var(--gold); } .link-btn--primary { color: var(--gold); border-bottom-color: var(--gold); } .link-btn--primary:hover { color: var(--ink); border-bottom-color: var(--ink); } /* ── Cover ── */ .hp-cover { position: relative; overflow: hidden; padding: 96px 0 24px; } .hp-cover__bg { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; overflow: hidden; } .hp-cover__watermark { font-family: var(--f-edit); font-style: italic; font-weight: 500; font-size: clamp(20rem, 38vw, 38rem); color: rgba(245,239,226,.025); letter-spacing: -.06em; line-height: .8; white-space: nowrap; margin-left: -4vw; user-select: none; } .hp-cover__inner { position: relative; z-index: 1; max-width: 880px; } .hp-cover__kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-codex); font-size: .68rem; font-weight: 500; color: var(--gold); letter-spacing: .26em; text-transform: uppercase; margin: 0 0 32px; } .hp-cover__bullet { display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 12px rgba(205,184,122,.4); } .hp-cover__title { font-family: var(--f-edit); font-weight: 500; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .95; letter-spacing: -.025em; margin: 0 0 36px; color: var(--ink); } .hp-cover__line { display: block; } .hp-cover__line--em { font-style: italic; color: var(--gold); font-weight: 500; } .hp-cover__lede { font-family: var(--f-sans); font-size: 1.1rem; line-height: 1.65; color: var(--ink-dim); max-width: 560px; margin: 0 0 40px; font-weight: 400; } .hp-cover__lede-en { display: block; margin-top: 8px; font-family: var(--f-edit); font-style: italic; color: var(--ink-faint); font-size: 1.05rem; } .hp-cover__actions { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; } .hp-cover__rail { position: absolute; right: 0; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: var(--f-codex); font-size: .62rem; letter-spacing: .2em; color: var(--ink-faint); } .hp-cover__rail span:first-child { display: block; width: 1px; height: 80px; background: linear-gradient(to bottom, var(--rule), transparent); } .hp-cover__rail-num { transform: rotate(-90deg); transform-origin: center; padding: 24px 0; } /* ── Stats ── */ .hp-stats { padding: 64px 0 80px; } .hp-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .stat { position: relative; padding: 40px 28px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; } .stat:last-child { border-right: none; } .stat__index { position: absolute; top: 16px; right: 20px; font-family: var(--f-codex); font-size: .58rem; font-weight: 500; color: var(--ink-faint); letter-spacing: .2em; } .stat__value { font-family: var(--f-edit); font-style: italic; font-weight: 500; font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: .9; color: var(--ink); letter-spacing: -.02em; font-feature-settings: "lnum" on, "tnum" on; } .stat__value sup { font-size: .5em; vertical-align: super; color: var(--gold); } .stat__value small { font-size: .35em; vertical-align: super; color: var(--ink-dim); margin-left: 4px; letter-spacing: .04em; } .stat__label { font-family: var(--f-codex); font-size: .66rem; font-weight: 500; color: var(--ink-dim); letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; } /* ── About / Identity ── */ .hp-about { padding: 80px 0; border-top: 1px solid var(--rule); } .hp-about__grid { display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: start; } .hp-id { background: rgba(245,239,226,.025); border: 1px solid var(--rule); padding: 36px 32px; } .hp-id__head { font-family: var(--f-codex); font-size: .62rem; font-weight: 500; color: var(--gold); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); } .hp-id__list { margin: 0; } .hp-id__list > div { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--rule); } .hp-id__list > div:last-child { border-bottom: none; } .hp-id__list dt { font-family: var(--f-codex); font-size: .66rem; color: var(--ink-faint); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; align-self: start; padding-top: 2px; } .hp-id__list dd { font-family: var(--f-sans); font-size: .88rem; color: var(--ink); margin: 0; line-height: 1.55; } .hp-id__list dd.dd--accent { color: var(--gold); font-style: italic; } /* ── Services ── */ .hp-svc { padding: 96px 0; border-top: 1px solid var(--rule); } .hp-svc__list { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .hp-svc__list > li { padding: 36px 32px; background: var(--paper); position: relative; display: flex; flex-direction: column; gap: 14px; transition: background .4s ease; } .hp-svc__list > li:hover { background: rgba(245,239,226,.025); } .hp-svc__list > li:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; } .svc-num { font-family: var(--f-edit); font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--gold); letter-spacing: .04em; } .svc-icon { width: 56px; height: 56px; color: var(--gold); display: flex; align-items: center; justify-content: center; margin-top: 4px; } .svc-icon svg { width: 100%; height: 100%; } .hp-svc__list h3 { font-family: var(--f-edit); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--ink); margin: 0; } .hp-svc__list p { font-family: var(--f-sans); font-size: .94rem; line-height: 1.7; color: var(--ink-dim); margin: 0; max-width: 50ch; } /* ── Capabilities ── */ .hp-cap { padding: 96px 0; border-top: 1px solid var(--rule); } .hp-cap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .hp-markets { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); } .hp-markets li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--f-edit); font-size: 1.1rem; color: var(--ink); } .hp-markets li span { font-size: 1.4rem; } .hp-markets__hl { color: var(--gold) !important; font-style: italic; } .cap-table { width: 100%; border-collapse: collapse; font-family: var(--f-sans); font-size: .92rem; } .cap-table caption { font-family: var(--f-codex); font-size: .62rem; font-weight: 500; color: var(--gold); letter-spacing: .2em; text-transform: uppercase; text-align: left; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--gold); } .cap-table th, .cap-table td { padding: 14px 0; vertical-align: top; border-bottom: 1px solid var(--rule); text-align: left; } .cap-table th { width: 40%; font-family: var(--f-codex); font-size: .68rem; font-weight: 500; color: var(--ink-faint); letter-spacing: .14em; text-transform: uppercase; } .cap-table td { color: var(--ink); } .cap-table td em { color: var(--ink-dim); } /* ── Why ── */ .hp-why { padding: 96px 0; border-top: 1px solid var(--rule); } .hp-why__list { list-style: none; padding: 0; margin: 64px auto 0; max-width: 720px; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); } .hp-why__list li { display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .hp-why__list span { font-family: var(--f-edit); font-style: italic; font-size: 1.6rem; color: var(--gold); font-weight: 500; } .hp-why__list p { font-family: var(--f-edit); font-size: 1.25rem; line-height: 1.5; color: var(--ink); margin: 0; font-weight: 500; } /* ── Contact ── */ .hp-contact { padding: 96px 0 120px; border-top: 1px solid var(--rule); } .hp-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .hp-contact__list { display: flex; flex-direction: column; } @media (max-width: 1024px) { .hp-stats__grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: none; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--rule); } .hp-about__grid { grid-template-columns: 1fr; gap: 48px; } .hp-cap__grid { grid-template-columns: 1fr; gap: 48px; } .hp-svc__list { grid-template-columns: 1fr; } .hp-svc__list > li:nth-last-child(1):nth-child(odd) { grid-column: auto; } .hp-contact__grid { grid-template-columns: 1fr; gap: 48px; } .hp-cover__rail { display: none; } } @media (max-width: 600px) { .hp-stats__grid { grid-template-columns: 1fr; } .stat { border-right: none; border-bottom: 1px solid var(--rule); } .stat:last-child { border-bottom: none; } } /* ============================================================ HOMEPAGE — 台灣產業感 / Taiwan Industrial B2B Pure Traditional Chinese, copper accent, refined hierarchy. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&family=Noto+Sans+TC:wght@300;400;500;700&display=swap"); .syt-standalone { --tw-bg: #0d1419; --tw-bg-soft: #131c23; --tw-ink: #eef0e9; --tw-ink-2: rgba(238,240,233,.62); --tw-ink-3: rgba(238,240,233,.32); --tw-rule: rgba(238,240,233,.10); --tw-rule-soft: rgba(238,240,233,.05); --tw-copper: #c89968; --tw-copper-2: #a37b4f; --f-zh-serif: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif; --f-zh-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, sans-serif; --f-num: "DM Mono", "JetBrains Mono", monospace; } .syt-standalone body, .syt-standalone { background: var(--tw-bg) !important; color: var(--tw-ink); font-family: var(--f-zh-sans); } .syt-standalone .container { max-width: 1140px; } /* Section heading shared */ .sec { padding: 80px 0; border-top: 1px solid var(--tw-rule); } .sec--about { border-top: none; } .sec-head { display: flex; align-items: center; gap: 18px; margin-bottom: 44px; } .sec-head__num { font-family: var(--f-zh-serif); font-weight: 600; font-size: 1.8rem; color: var(--tw-copper); letter-spacing: .04em; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tw-copper); border-radius: 0; flex-shrink: 0; } .sec-head__title { font-family: var(--f-zh-serif); font-size: 1.5rem; font-weight: 600; color: var(--tw-ink); margin: 0; letter-spacing: .15em; } .sec-head__rule { flex: 1; height: 1px; background: var(--tw-rule); } /* ── Cover ── */ .cv { padding: 64px 0 64px; border-bottom: 1px solid var(--tw-rule); } .cv__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; } .cv__index { font-family: var(--f-zh-sans); font-size: .82rem; font-weight: 500; color: var(--tw-copper); letter-spacing: .35em; margin: 0 0 32px; padding-left: 14px; border-left: 2px solid var(--tw-copper); } .cv__title { font-family: var(--f-zh-serif); font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 700; line-height: 1.15; letter-spacing: .04em; color: var(--tw-ink); margin: 0 0 24px; } .cv__title-mark { position: relative; display: inline-block; color: var(--tw-copper); } .cv__title-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--tw-copper); } .cv__sub { font-family: var(--f-zh-serif); font-size: 1.1rem; font-weight: 500; color: var(--tw-ink); letter-spacing: .14em; margin: 16px 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--tw-rule); max-width: 520px; } .cv__lede-text { font-family: var(--f-zh-sans); font-size: 1rem; font-weight: 400; line-height: 1.95; letter-spacing: .04em; color: var(--tw-ink-2); margin: 0 0 36px; max-width: 520px; } .cv__cta { display: flex; gap: 16px; flex-wrap: wrap; } .line-btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 28px; font-family: var(--f-zh-sans); font-size: .95rem; font-weight: 500; color: var(--tw-ink); letter-spacing: .25em; border: 1px solid var(--tw-rule); background: transparent; transition: all .35s ease; } .line-btn:hover { border-color: var(--tw-copper); color: var(--tw-copper); } .line-btn--filled { background: var(--tw-copper); color: var(--tw-bg); border-color: var(--tw-copper); } .line-btn--filled:hover { background: var(--tw-copper-2); border-color: var(--tw-copper-2); color: var(--tw-bg); } /* Cover stats */ .cv__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--tw-rule); border: 1px solid var(--tw-rule); } .cv-stat { background: var(--tw-bg); padding: 28px 24px; display: flex; flex-direction: column; align-items: baseline; position: relative; min-height: 130px; } .cv-stat__num { font-family: var(--f-zh-serif); font-size: 3.6rem; font-weight: 700; line-height: 1; color: var(--tw-ink); letter-spacing: -.02em; font-feature-settings: "lnum" on; } .cv-stat__plus { font-family: var(--f-zh-serif); font-size: 1.6rem; color: var(--tw-copper); margin-left: 4px; vertical-align: super; font-weight: 600; } .cv-stat__unit { font-family: var(--f-zh-serif); font-size: 1rem; color: var(--tw-copper); margin-left: 6px; align-self: flex-end; padding-bottom: 8px; font-weight: 500; letter-spacing: .04em; } .cv-stat__label { margin-top: 12px; font-family: var(--f-zh-sans); font-size: .82rem; color: var(--tw-ink-2); letter-spacing: .15em; font-weight: 400; } /* ── About ── */ .about-grid { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; } .about-h { font-family: var(--f-zh-serif); font-size: 1.7rem; font-weight: 600; line-height: 1.5; letter-spacing: .08em; color: var(--tw-ink); margin: 0 0 32px; } .about-prose p { font-family: var(--f-zh-sans); font-size: 1rem; font-weight: 400; line-height: 2; letter-spacing: .04em; color: var(--tw-ink-2); margin: 0 0 18px; } .about-record { background: var(--tw-bg-soft); border: 1px solid var(--tw-rule); border-top: 2px solid var(--tw-copper); padding: 32px; } .about-record__head { font-family: var(--f-zh-serif); font-size: .92rem; font-weight: 600; color: var(--tw-copper); letter-spacing: .35em; margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--tw-rule); } .rec { width: 100%; border-collapse: collapse; } .rec th, .rec td { padding: 11px 0; text-align: left; border-bottom: 1px dashed var(--tw-rule); font-size: .92rem; vertical-align: top; } .rec tr:last-child th, .rec tr:last-child td { border-bottom: none; } .rec th { width: 96px; font-family: var(--f-zh-sans); font-weight: 400; color: var(--tw-ink-3); letter-spacing: .15em; font-size: .82rem; padding-top: 14px; } .rec td { font-family: var(--f-zh-sans); color: var(--tw-ink); letter-spacing: .04em; line-height: 1.7; } .rec-status { color: var(--tw-copper); font-weight: 500; } /* ── Services ── */ .svc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--tw-rule); border: 1px solid var(--tw-rule); } .svc-item { background: var(--tw-bg); padding: 32px; transition: background .4s ease; } .svc-item:hover { background: var(--tw-bg-soft); } .svc-item__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .svc-item__no { font-family: var(--f-zh-serif); font-size: 1.1rem; font-weight: 600; color: var(--tw-copper); letter-spacing: .04em; border: 1px solid var(--tw-copper); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .svc-item h3 { font-family: var(--f-zh-serif); font-size: 1.25rem; font-weight: 600; color: var(--tw-ink); margin: 0; letter-spacing: .1em; line-height: 1.3; } .svc-item p { font-family: var(--f-zh-sans); font-size: .94rem; line-height: 1.85; color: var(--tw-ink-2); letter-spacing: .04em; margin: 0; } /* ── Capability table ── */ .cap-tbl { width: 100%; border-collapse: collapse; font-size: 1rem; border-top: 1px solid var(--tw-rule); } .cap-tbl th, .cap-tbl td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--tw-rule); font-family: var(--f-zh-sans); letter-spacing: .04em; } .cap-tbl th { width: 220px; background: var(--tw-bg-soft); font-weight: 500; color: var(--tw-copper); letter-spacing: .2em; font-family: var(--f-zh-serif); } .cap-tbl td { color: var(--tw-ink); line-height: 1.7; } /* ── Markets ── */ .mkt { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--tw-rule); border: 1px solid var(--tw-rule); } .mkt li { background: var(--tw-bg); padding: 28px 16px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; } .mkt__flag { font-size: 2rem; line-height: 1; } .mkt__name { font-family: var(--f-zh-serif); font-size: 1rem; font-weight: 500; color: var(--tw-ink); letter-spacing: .14em; } .mkt--more { background: var(--tw-bg-soft) !important; } .mkt--more .mkt__flag { color: var(--tw-copper); } .mkt--more .mkt__name { color: var(--tw-copper); } /* ── Why ── */ .why { list-style: none; padding: 0; margin: 0 auto; max-width: 720px; border-top: 1px solid var(--tw-rule); } .why li { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--tw-rule); } .why span { font-family: var(--f-zh-serif); font-size: 1.4rem; font-weight: 600; color: var(--tw-copper); letter-spacing: .04em; text-align: center; } .why p { font-family: var(--f-zh-serif); font-size: 1.15rem; line-height: 1.55; color: var(--tw-ink); margin: 0; font-weight: 500; letter-spacing: .08em; } /* ── Contact ── */ .contact-lede { font-family: var(--f-zh-sans); font-size: 1rem; line-height: 1.85; color: var(--tw-ink-2); letter-spacing: .06em; max-width: 600px; margin: 0 0 36px; } .contact-card { background: var(--tw-bg-soft); border: 1px solid var(--tw-rule); border-top: 2px solid var(--tw-copper); max-width: 720px; } /* ============================================================ REPORTS PAGE — Taiwan industrial, pure Chinese ============================================================ */ /* Cover */ .rp-cv { padding: 40px 0 36px; border-bottom: 1px solid var(--tw-rule); } .rp-cv__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; } .rp-cv__index { font-family: var(--f-zh-sans); font-size: .76rem; font-weight: 500; color: var(--tw-copper); letter-spacing: .35em; margin: 0 0 16px; padding-left: 12px; border-left: 2px solid var(--tw-copper); } .rp-cv__title { font-family: var(--f-zh-serif); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.2; letter-spacing: .04em; color: var(--tw-ink); margin: 0 0 18px; } .rp-cv__title-mark { position: relative; display: inline-block; color: var(--tw-copper); } .rp-cv__title-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--tw-copper); } .rp-cv__sub { font-family: var(--f-zh-sans); font-size: .96rem; line-height: 1.85; letter-spacing: .04em; color: var(--tw-ink-2); max-width: 520px; margin: 0; } .rp-cv__meta { display: flex; flex-direction: column; gap: 0; background: var(--tw-bg-soft); border: 1px solid var(--tw-rule); border-top: 2px solid var(--tw-copper); border-radius: 16px; overflow: hidden; } .rp-meta { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px dashed var(--tw-rule); } .rp-meta:last-child { border-bottom: none; } .rp-meta__lab { font-family: var(--f-zh-sans); font-size: .82rem; color: var(--tw-ink-3); letter-spacing: .2em; font-weight: 400; } .rp-meta__val { font-family: var(--f-zh-serif); font-size: 1.05rem; color: var(--tw-ink); font-weight: 600; letter-spacing: .04em; font-feature-settings: "lnum" on, "tnum" on; } .rp-meta__val--mark { color: var(--tw-copper); } /* Stack of years */ .rp-stack { padding: 36px 0 64px; } .rp-vol { margin-bottom: 28px; background: var(--tw-bg-soft); border: 1px solid var(--tw-rule); border-radius: 16px; overflow: hidden; } .rp-vol:last-child { margin-bottom: 0; } .rp-vol__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--tw-bg); border-bottom: 1px solid var(--tw-rule); } .rp-vol__year { font-family: var(--f-zh-serif); font-size: 1.4rem; font-weight: 600; color: var(--tw-ink); letter-spacing: .12em; } .rp-vol__year em { font-style: normal; color: var(--tw-copper); margin: 0 .15em; } .rp-vol__count { font-family: var(--f-zh-sans); font-size: .82rem; font-weight: 500; color: var(--tw-copper); letter-spacing: .15em; border: 1px solid var(--tw-copper); padding: 5px 14px; border-radius: 999px; } .rp-list { list-style: none; padding: 0; margin: 0; } .rp-item__row { display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--tw-rule); color: inherit; text-decoration: none; transition: background .35s ease, padding .35s ease; } .rp-item:last-child .rp-item__row { border-bottom: none; } a.rp-item__row:hover { background: rgba(200,153,104,.06); padding-left: 32px; } .rp-item__num { font-family: var(--f-zh-serif); font-style: italic; font-size: 1.8rem; font-weight: 700; color: var(--tw-copper); letter-spacing: -.02em; font-feature-settings: "lnum" on, "tnum" on; text-align: center; } .rp-item__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rp-item__month { font-family: var(--f-zh-sans); font-size: .76rem; font-weight: 500; color: var(--tw-copper); letter-spacing: .2em; } .rp-item__title { font-family: var(--f-zh-serif); font-size: 1.1rem; font-weight: 500; color: var(--tw-ink); letter-spacing: .04em; line-height: 1.4; } .rp-item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; } .rp-item__date { font-family: var(--f-zh-sans); font-size: .78rem; color: var(--tw-ink-3); letter-spacing: .04em; font-feature-settings: "tnum" on; } .rp-item__action { font-family: var(--f-zh-sans); font-size: .8rem; font-weight: 500; color: var(--tw-copper); letter-spacing: .15em; border: 1px solid var(--tw-copper); padding: 5px 12px; border-radius: 999px; transition: all .35s ease; } a.rp-item__row:hover .rp-item__action { background: var(--tw-copper); color: var(--tw-bg); } .rp-item__pending { font-family: var(--f-zh-sans); font-size: .78rem; font-weight: 400; color: var(--tw-ink-3); letter-spacing: .15em; border: 1px dashed var(--tw-rule); padding: 5px 12px; border-radius: 999px; } .rp-item--pending .rp-item__row { opacity: .55; } .rp-item--pending .rp-item__num { color: var(--tw-ink-3); } .rp-empty { text-align: center; padding: 80px 24px; color: var(--tw-ink-2); } .rp-empty__num { font-family: var(--f-zh-serif); font-style: italic; font-size: 5rem; color: var(--tw-ink-3); margin: 0 0 16px; } @media (max-width: 768px) { .rp-cv__grid { grid-template-columns: 1fr; gap: 28px; } .rp-item__row { grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 18px; } .rp-item__meta { grid-column: 1 / -1; flex-direction: row; gap: 10px; align-items: center; } } /* ============================================================ FORCE ROUNDED — applies last, wins cascade ============================================================ */ .syt-standalone .cv__stats, .syt-standalone .cv-stat, .syt-standalone .svc, .syt-standalone .svc-item, .syt-standalone .about-record, .syt-standalone .contact-card, .syt-standalone .contact-row, .syt-standalone .mkt, .syt-standalone .mkt li, .syt-standalone .why li, .syt-standalone .cap-tbl, .syt-standalone .cap-tbl th, .syt-standalone .cap-tbl td, .syt-standalone .rec, .syt-standalone .rec th, .syt-standalone .rec td, .syt-standalone .rp-cv__meta, .syt-standalone .rp-meta, .syt-standalone .rp-vol, .syt-standalone .rp-vol__head, .syt-standalone .rp-item__row { border-radius: 0; /* reset */ } /* Outer shells get full rounding */ .syt-standalone .cv__stats, .syt-standalone .svc, .syt-standalone .mkt, .syt-standalone .about-record, .syt-standalone .contact-card, .syt-standalone .cap-tbl, .syt-standalone .rp-cv__meta, .syt-standalone .rp-vol { border-radius: 18px !important; overflow: hidden !important; } /* Pill-style action chips */ .syt-standalone .line-btn, .syt-standalone .rp-vol__count, .syt-standalone .rp-item__action, .syt-standalone .rp-item__pending, .syt-standalone .rec-status { border-radius: 999px !important; } /* Numbered badges */ .syt-standalone .sec-head__num { border-radius: 14px !important; } .syt-standalone .svc-item__no { border-radius: 50% !important; } /* Title mark — soft underline curve */ .syt-standalone .cv__title-mark::after, .syt-standalone .rp-cv__title-mark::after { border-radius: 4px; } /* ============================================================ SYT HOMEPAGE — Modern soft-rounded refresh Larger radii, glass surfaces, scroll-reveal animations ============================================================ */ /* Reveal animation */ .syt-standalone [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94); will-change: opacity, transform; } .syt-standalone [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Cover halo */ .syt-standalone .cv { position: relative; overflow: hidden; } .syt-standalone .cv__halo { position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle at center, rgba(200,153,104,.15) 0%, transparent 65%); pointer-events: none; filter: blur(40px); z-index: 0; } .syt-standalone .cv .container { position: relative; z-index: 1; } /* Override every card — modern soft radii */ .syt-standalone .cv__stats, .syt-standalone .svc, .syt-standalone .mkt, .syt-standalone .about-record, .syt-standalone .cap-card, .syt-standalone .contact-card, .syt-standalone .rp-cv__meta, .syt-standalone .rp-vol, .syt-standalone .faq { border-radius: 24px !important; overflow: hidden; } /* Cover stats — softer */ .syt-standalone .cv__stats { background: linear-gradient(135deg, rgba(200,153,104,.06), rgba(255,255,255,.02)) !important; backdrop-filter: blur(20px); border: 1px solid rgba(200,153,104,.15) !important; } .syt-standalone .cv-stat { background: transparent !important; border-color: rgba(238,240,233,.06); } /* Service grid */ .syt-standalone .svc-item { border-radius: 0; /* inner cells stay flat */ transition: background .4s, transform .4s; } .syt-standalone .svc-item:hover { background: rgba(200,153,104,.04); transform: translateY(-2px); } /* Buttons fully pill */ .syt-standalone .line-btn, .syt-standalone .rec-status, .syt-standalone .rp-vol__count, .syt-standalone .rp-item__action, .syt-standalone .rp-item__pending { border-radius: 999px !important; } /* Section number badge — softer rounded */ .syt-standalone .sec-head__num { border-radius: 16px !important; background: rgba(200,153,104,.08); } .syt-standalone .svc-item__no { border-radius: 50% !important; } .syt-standalone .sec-lede { font-family: var(--f-zh-sans); font-size: 1rem; line-height: 1.85; letter-spacing: .04em; color: var(--tw-ink-2); margin: -16px 0 32px; max-width: 640px; } /* ── Manufacturing flow (NEW) ── */ .flow { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; position: relative; } .flow-step { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 0 0 28px; } .flow-step:last-child { padding-bottom: 0; } .flow-step__rail { position: relative; display: flex; flex-direction: column; align-items: center; } .flow-step__dot { width: 16px; height: 16px; background: var(--tw-copper); border: 4px solid var(--tw-bg); border-radius: 50%; box-shadow: 0 0 0 1px var(--tw-copper), 0 0 0 6px rgba(200,153,104,.12); margin-top: 14px; flex-shrink: 0; } .flow-step__line { width: 2px; flex: 1; background: linear-gradient(to bottom, rgba(200,153,104,.4), rgba(200,153,104,.05)); margin-top: 6px; } .flow-step:last-child .flow-step__line { display: none; } .flow-step__body { background: rgba(255,255,255,.025); border: 1px solid var(--tw-rule); border-radius: 20px; padding: 20px 24px; transition: background .35s, transform .35s; } .flow-step__body:hover { background: rgba(200,153,104,.05); transform: translateX(4px); } .flow-step__num { font-family: var(--f-zh-serif); font-style: italic; font-size: .9rem; font-weight: 600; color: var(--tw-copper); letter-spacing: .15em; display: block; margin-bottom: 4px; } .flow-step__h { font-family: var(--f-zh-serif); font-size: 1.2rem; font-weight: 600; color: var(--tw-ink); margin: 0 0 6px; letter-spacing: .08em; } .flow-step__p { font-family: var(--f-zh-sans); font-size: .92rem; line-height: 1.75; color: var(--tw-ink-2); margin: 0; letter-spacing: .04em; } /* ── Capability card wrapper (rounded) ── */ .cap-card { background: var(--tw-bg-soft); border: 1px solid var(--tw-rule); } .cap-card .cap-tbl { border-radius: 0; border-top: none; } .cap-card .cap-tbl tr:first-child th, .cap-card .cap-tbl tr:first-child td { border-top: none; } /* ── Certifications (NEW) ── */ .cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cert { background: linear-gradient(135deg, rgba(200,153,104,.06), rgba(255,255,255,.015)); border: 1px solid var(--tw-rule); border-radius: 20px; padding: 24px 24px; text-align: center; transition: all .4s cubic-bezier(.25,.46,.45,.94); display: flex; flex-direction: column; gap: 8px; align-items: center; } .cert:hover { background: linear-gradient(135deg, rgba(200,153,104,.12), rgba(200,153,104,.03)); border-color: var(--tw-copper); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(200,153,104,.12); } .cert__code { font-family: var(--f-zh-serif); font-size: 1.4rem; font-weight: 700; color: var(--tw-copper); letter-spacing: .04em; } .cert__desc { font-family: var(--f-zh-sans); font-size: .82rem; color: var(--tw-ink-2); letter-spacing: .15em; } /* ── FAQ (NEW) ── */ .faq { background: var(--tw-bg-soft); border: 1px solid var(--tw-rule); } .faq-item { border-bottom: 1px solid var(--tw-rule); transition: background .35s; } .faq-item:last-child { border-bottom: none; } .faq-item[open] { background: rgba(200,153,104,.04); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; cursor: pointer; list-style: none; transition: background .35s, color .35s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--tw-copper); } .faq-item__q { font-family: var(--f-zh-serif); font-size: 1.1rem; font-weight: 500; color: var(--tw-ink); letter-spacing: .06em; transition: color .35s; } .faq-item summary:hover .faq-item__q { color: var(--tw-copper); } .faq-item__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(200,153,104,.08); border-radius: 50%; color: var(--tw-copper); font-size: 1.1rem; font-weight: 300; flex-shrink: 0; transition: transform .4s cubic-bezier(.25,.46,.45,.94), background .35s; } .faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--tw-copper); color: var(--tw-bg); } .faq-item__a { font-family: var(--f-zh-sans); font-size: .96rem; line-height: 1.85; letter-spacing: .04em; color: var(--tw-ink-2); margin: 0; padding: 0 28px 22px 28px; } /* Why list — soften */ .syt-standalone .why { border: 1px solid var(--tw-rule); border-radius: 20px; overflow: hidden; padding: 8px 24px; background: rgba(255,255,255,.015); } .syt-standalone .why li:last-child { border-bottom: none; } /* Markets — round outer + soften inner */ .syt-standalone .mkt { border: 1px solid var(--tw-rule); } .syt-standalone .mkt li { border: none; border-right: 1px solid var(--tw-rule); transition: background .35s; } .syt-standalone .mkt li:last-child { border-right: none; } .syt-standalone .mkt li:hover { background: rgba(200,153,104,.05); } /* Contact card — softer */ .syt-standalone .contact-card { background: rgba(255,255,255,.025) !important; } .syt-standalone .contact-row { padding: 18px 28px; } @media (max-width: 1024px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } .syt-standalone .mkt li { border-right: none; border-bottom: 1px solid var(--tw-rule); } .syt-standalone .mkt li:last-child { border-bottom: none; } } @media (max-width: 600px) { .cert-grid { grid-template-columns: 1fr; } .flow-step { grid-template-columns: 40px 1fr; gap: 14px; } } /* ============================================================ LIGHT THEME OVERRIDE — applies last, wins all earlier dark vars ============================================================ */ .syt-standalone { --tw-bg: #f7f5f0 !important; --tw-bg-soft: #ffffff !important; --tw-ink: #1a242c !important; --tw-ink-2: rgba(26,36,44,.65) !important; --tw-ink-3: rgba(26,36,44,.42) !important; --tw-rule: rgba(26,36,44,.10) !important; --tw-rule-soft: rgba(26,36,44,.05) !important; --tw-copper: #9c7a4b !important; --tw-copper-2: #8a6a3f !important; /* override the dark editorial vars too (used by /syt/reports/) */ --paper: #f7f5f0 !important; --ink: #1a242c !important; --ink-dim: rgba(26,36,44,.65) !important; --ink-faint: rgba(26,36,44,.32) !important; --gold: #9c7a4b !important; --rule: rgba(26,36,44,.10) !important; /* fr-* vars used by reports page */ --fr-navy: #f7f5f0 !important; --fr-neon: #9c7a4b !important; --fr-neon-dim: rgba(156,122,75,.12) !important; --fr-neon-glow: rgba(156,122,75,.22) !important; --fr-text: #1a242c !important; --fr-muted: rgba(26,36,44,.55) !important; --fr-border: rgba(26,36,44,.10) !important; --fr-row-alt: rgba(0,0,0,.02) !important; /* shuoyitai global vars too */ --bg: #f7f5f0 !important; --bg-surface: #ffffff !important; --bg-elevated: #ffffff !important; --t-1: rgba(26,36,44,.92) !important; --t-2: rgba(26,36,44,.55) !important; --t-3: rgba(26,36,44,.32) !important; --t-4: rgba(26,36,44,.12) !important; --green: #9c7a4b !important; } /* Light-theme body bg */ .syt-standalone body, body.syt-standalone { background: #f7f5f0 !important; color: #1a242c !important; } /* Make sure announcement bar / header don't show dark */ .syt-standalone .site-header { background: rgba(247,245,240,.92) !important; } .syt-standalone .announcement-bar { background: #efece4 !important; color: #1a242c !important; } .syt-standalone .site-footer { background: rgba(0,0,0,.04) !important; color: #1a242c !important; } /* Cover stats — light cards on cream */ .syt-standalone .cv__stats { background: #fff !important; border-color: rgba(26,36,44,.08) !important; box-shadow: 0 4px 18px rgba(0,0,0,.04); } .syt-standalone .cv-stat__num { color: #1a242c !important; } .syt-standalone .cv-stat__label { color: rgba(26,36,44,.55) !important; } /* Service cards on cream */ .syt-standalone .svc { border-color: rgba(26,36,44,.08) !important; } .syt-standalone .svc-item { background: #fff !important; } .syt-standalone .svc-item:hover { background: rgba(156,122,75,.04) !important; } .syt-standalone .svc-item h3 { color: #1a242c !important; } /* Markets / Why / Contact / FAQ light */ .syt-standalone .mkt { border-color: rgba(26,36,44,.08) !important; } .syt-standalone .mkt li { background: #fff !important; } .syt-standalone .mkt li:hover { background: rgba(156,122,75,.05) !important; } .syt-standalone .why { background: #fff !important; border-color: rgba(26,36,44,.08) !important; } .syt-standalone .why p { color: #1a242c !important; } .syt-standalone .faq { background: #fff !important; } .syt-standalone .faq-item[open] { background: rgba(156,122,75,.04) !important; } .syt-standalone .faq-item__q { color: #1a242c !important; } .syt-standalone .contact-card { background: #fff !important; } .syt-standalone .contact-row__val { color: #1a242c !important; } /* Capability table */ .syt-standalone .cap-card { background: #fff !important; border-color: rgba(26,36,44,.08) !important; } .syt-standalone .cap-tbl th { background: #f3f0e8 !important; color: #9c7a4b !important; } .syt-standalone .cap-tbl td { color: #1a242c !important; } /* About record card */ .syt-standalone .about-record { background: #fff !important; border-color: rgba(26,36,44,.08) !important; } .syt-standalone .rec td { color: #1a242c !important; } /* Reports page */ .syt-standalone .rp-cv { border-color: rgba(26,36,44,.10) !important; } .syt-standalone .rp-cv__title { color: #1a242c !important; } .syt-standalone .rp-cv__sub { color: rgba(26,36,44,.65) !important; } .syt-standalone .rp-cv__meta { background: #fff !important; } .syt-standalone .rp-meta__val { color: #1a242c !important; } .syt-standalone .rp-vol { background: #fff !important; border-color: rgba(26,36,44,.08) !important; } .syt-standalone .rp-vol__head { background: #faf8f3 !important; } .syt-standalone .rp-vol__year { color: #1a242c !important; } .syt-standalone .rp-item__row { color: #1a242c !important; } .syt-standalone .rp-item__title { color: #1a242c !important; } .syt-standalone a.rp-item__row:hover { background: rgba(156,122,75,.05) !important; } /* Buttons */ .syt-standalone .line-btn { color: #1a242c !important; border-color: rgba(26,36,44,.2) !important; } .syt-standalone .line-btn:hover { color: #9c7a4b !important; border-color: #9c7a4b !important; } .syt-standalone .line-btn--filled { background: #9c7a4b !important; color: #fff !important; border-color: #9c7a4b !important; } .syt-standalone .line-btn--filled:hover { background: #8a6a3f !important; color: #fff !important; } .syt-standalone .site-logo__mark { background: transparent !important; box-shadow: none !important; width: 44px; height: 44px; padding: 0; border-radius: 0; } /* ════════════════════════════════════════════════════════════ Cover hero — engineered/grid-operator visual layer ════════════════════════════════════════════════════════════ */ .syt-standalone .cv { position: relative !important; overflow: hidden; padding: 40px 0 60px !important; background-image: linear-gradient(rgba(26,36,44,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(26,36,44,.025) 1px, transparent 1px); background-size: 48px 48px; } .syt-standalone .cv__waveform { position: absolute; top: 0; left: 0; right: 0; height: 200px; pointer-events: none; z-index: 0; opacity: 0.7; mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%); } .syt-standalone .cv__waveform svg { width: 100%; height: 100%; display: block; } @keyframes wave-flow { from { transform: translateX(0); } to { transform: translateX(-300px); } } @keyframes cursor-bob { 0%,100% { cy: 100; } 25% { cy: 70; } 50% { cy: 100; } 75% { cy: 130; } } @keyframes cursor-trace { 0% { transform: translateX(0); } 100% { transform: translateX(800px); } } .syt-standalone .cv__waveform .wave { animation: wave-flow 18s linear infinite; } .syt-standalone .cv__waveform .wave--2 { animation-duration: 24s; animation-direction: reverse; } .syt-standalone .cv__waveform .wave--3 { animation-duration: 30s; } .syt-standalone .cv__waveform .wave-cursor { animation: cursor-trace 8s linear infinite, cursor-bob 1.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(156,122,75,0.6)); } .syt-standalone .doc-stamp { position: absolute !important; top: 14px !important; right: 24px !important; z-index: 5 !important; display: flex !important; flex-direction: column; align-items: flex-end; gap: 2px; font-family: "JetBrains Mono","DM Mono",monospace; font-size: .58rem; color: rgba(156,122,75,.55); letter-spacing: .18em; text-transform: uppercase; } .syt-standalone .doc-stamp::before { content: ""; display: block; width: 28px; height: 1px; background: rgba(156,122,75,0.5); margin-bottom: 6px; } .syt-standalone .cv .container, .syt-standalone .cv__lede, .syt-standalone .cv__stats { position: relative; z-index: 2; } .syt-standalone .cv__lede, .syt-standalone .cv__stats { padding-top: 200px; } .syt-standalone .cv-stat { position: relative; } .syt-standalone .cv-stat::before { content: ""; position: absolute; top: 14px; right: 14px; width: 5px; height: 5px; border-radius: 50%; background: #9c7a4b; box-shadow: 0 0 8px rgba(156,122,75,0.5); animation: pulse-led 2.4s ease-in-out infinite; } .syt-standalone .cv-stat:nth-child(2)::before { animation-delay: 0.6s; } .syt-standalone .cv-stat:nth-child(3)::before { animation-delay: 1.2s; } .syt-standalone .cv-stat:nth-child(4)::before { animation-delay: 1.8s; } @keyframes pulse-led { 0%,60%,100% { opacity: 1; } 70%,90% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .syt-standalone .cv__waveform .wave, .syt-standalone .cv__waveform .wave-cursor, .syt-standalone .cv-stat::before { animation: none; } } /* ════════════════════════════════════════════════════════════ Compact horizontal process flow — engineered diagram style ════════════════════════════════════════════════════════════ */ .syt-standalone .flow--compact { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; position: relative; border: 1px solid rgba(26,36,44,.08); border-radius: 18px; background: #fff; overflow: hidden; } .syt-standalone .flow-cell { display: flex; flex-direction: column; gap: 8px; padding: 22px 14px; position: relative; transition: background .35s ease; text-align: left; } .syt-standalone .flow-cell:hover { background: rgba(156,122,75,.05); } /* Connector line + step arrow between cells */ .syt-standalone .flow-cell:not(:first-child)::before { content: "→"; position: absolute; left: -8px; top: 28px; font-family: "JetBrains Mono", monospace; font-size: 1rem; color: rgba(156,122,75,.45); } .syt-standalone .flow-cell:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(26,36,44,.06) 25%, rgba(26,36,44,.06) 75%, transparent 100%); } .syt-standalone .flow-cell__num { font-family: "JetBrains Mono", "DM Mono", monospace; font-size: .68rem; font-weight: 600; color: rgba(156,122,75,.85); letter-spacing: .15em; display: inline-block; padding: 3px 8px; background: rgba(156,122,75,.08); border-radius: 4px; width: fit-content; } .syt-standalone .flow-cell__h { font-family: "Cormorant Garamond","Noto Serif TC",serif; font-style: italic; font-size: 1.4rem; font-weight: 600; color: #1a242c; margin: 0; line-height: 1; } .syt-standalone .flow-cell__d { font-family: "DM Sans",sans-serif; font-size: .72rem; line-height: 1.45; color: rgba(26,36,44,.55); margin: 0; letter-spacing: .02em; } /* Tighten the section padding */ .syt-standalone .sec--flow .sec-lede { margin-bottom: 22px; } @media (max-width: 1100px) { .syt-standalone .flow--compact { grid-template-columns: repeat(4, 1fr); } .syt-standalone .flow-cell:nth-child(4)::after { display: none; } .syt-standalone .flow-cell:nth-child(5)::before { display: none; } } @media (max-width: 700px) { .syt-standalone .flow--compact { grid-template-columns: repeat(2, 1fr); } .syt-standalone .flow-cell:nth-child(2n)::after { display: none; } .syt-standalone .flow-cell:nth-child(2n+1)::before { display: none; } } /* ════════════════════════════════════════════════════════════ MASTHEAD — single info block (replaces Cover + About + Record) ════════════════════════════════════════════════════════════ */ .syt-standalone .mh { position: relative; padding: 64px 0 64px; border-bottom: 1px solid rgba(26,36,44,.08); background-image: linear-gradient(rgba(26,36,44,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(26,36,44,.025) 1px, transparent 1px); background-size: 48px 48px; } .syt-standalone .mh__head { max-width: 720px; margin-bottom: 36px; } .syt-standalone .mh__kicker { font-family: "JetBrains Mono", "DM Mono", monospace; font-size: .68rem; color: rgba(156,122,75,.85); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 22px; padding-left: 12px; border-left: 2px solid #9c7a4b; } .syt-standalone .mh__title { font-family: "Cormorant Garamond","Noto Serif TC",serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; margin: 0 0 22px; color: #1a242c; letter-spacing: -.01em; } .syt-standalone .mh__title em { font-style: italic; font-weight: 600; color: #9c7a4b; } .syt-standalone .mh__lede { font-family: "DM Sans","Noto Sans TC",sans-serif; font-size: 1.05rem; line-height: 1.7; color: rgba(26,36,44,.65); max-width: 620px; margin: 0; letter-spacing: .015em; } /* Single fact ledger — every datum exactly once */ .syt-standalone .mh__ledger { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 32px; background: #fff; border: 1px solid rgba(26,36,44,.08); border-radius: 16px; overflow: hidden; } .syt-standalone .mh__ledger > div { padding: 20px 22px; border-right: 1px solid rgba(26,36,44,.06); border-bottom: 1px solid rgba(26,36,44,.06); display: flex; flex-direction: column; gap: 6px; position: relative; } .syt-standalone .mh__ledger > div::before { content: ""; position: absolute; top: 14px; right: 14px; width: 4px; height: 4px; border-radius: 50%; background: #9c7a4b; opacity: 0.5; } .syt-standalone .mh__ledger > div:nth-child(4n) { border-right: none; } .syt-standalone .mh__ledger > div:nth-last-child(-n+2) { border-bottom: none; } .syt-standalone .mh__ledger-row--full { grid-column: 1 / -1; border-right: none !important; border-bottom: none !important; } .syt-standalone .mh__ledger dt { font-family: "JetBrains Mono", "DM Mono", monospace; font-size: .58rem; font-weight: 500; color: rgba(26,36,44,.45); letter-spacing: .2em; text-transform: uppercase; } .syt-standalone .mh__ledger dd { font-family: "Cormorant Garamond","Noto Serif TC",serif; font-size: 1.3rem; font-weight: 600; color: #1a242c; margin: 0; line-height: 1.2; font-feature-settings: "lnum" on, "tnum" on; } .syt-standalone .mh__ledger dd em { font-style: italic; color: #9c7a4b; font-weight: 700; } .syt-standalone .mh__cta { display: flex; gap: 16px; flex-wrap: wrap; } /* Combined Certs + Markets section */ .syt-standalone .cm-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; } .syt-standalone .cert-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 12px; } .syt-standalone .cert-grid--compact .cert { padding: 18px 16px; } .syt-standalone .cert-grid--compact .cert__code { font-size: 1.05rem; } .syt-standalone .cert-grid--compact .cert__desc { font-size: .68rem; } .syt-standalone .mkt--compact { grid-template-columns: 1fr; gap: 0; } .syt-standalone .mkt--compact li { padding: 14px 18px; flex-direction: row !important; gap: 14px; justify-content: flex-start; text-align: left; } .syt-standalone .mkt--compact .mkt__flag { font-size: 1.3rem; } .syt-standalone .mkt--compact .mkt__name { font-size: .92rem; } .syt-standalone .sec--cm .sec-head { margin-bottom: 22px; } @media (max-width: 1024px) { .syt-standalone .mh__ledger { grid-template-columns: repeat(2, 1fr); } .syt-standalone .mh__ledger > div:nth-child(4n) { border-right: 1px solid rgba(26,36,44,.06); } .syt-standalone .mh__ledger > div:nth-child(2n) { border-right: none; } .syt-standalone .cm-grid { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 600px) { .syt-standalone .mh__ledger { grid-template-columns: 1fr; } .syt-standalone .mh__ledger > div { border-right: none; border-bottom: 1px solid rgba(26,36,44,.06); } .syt-standalone .cert-grid--compact { grid-template-columns: repeat(2, 1fr); } } /* ════════════════════════════════════════════════════════════ HERO — value-first, value-only ════════════════════════════════════════════════════════════ */ .syt-standalone .hero { position: relative; padding: 80px 0 64px; background-image: linear-gradient(rgba(26,36,44,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(26,36,44,.025) 1px, transparent 1px); background-size: 48px 48px; border-bottom: 1px solid rgba(26,36,44,.08); overflow: hidden; } .syt-standalone .hero__inner { max-width: 720px; } .syt-standalone .hero__kicker { font-family: "JetBrains Mono", monospace; font-size: .68rem; color: rgba(156,122,75,.85); letter-spacing: .25em; text-transform: uppercase; margin: 0 0 28px; padding-left: 12px; border-left: 2px solid #9c7a4b; } .syt-standalone .hero__title { font-family: "Cormorant Garamond","Noto Serif TC",serif; font-weight: 600; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.05; margin: 0 0 24px; color: #1a242c; letter-spacing: -.02em; } .syt-standalone .hero__title em { font-style: italic; color: #9c7a4b; font-weight: 700; } .syt-standalone .hero__lede { font-family: "DM Sans","Noto Sans TC",sans-serif; font-size: 1.05rem; line-height: 1.7; color: rgba(26,36,44,.65); max-width: 600px; margin: 0 0 32px; } .syt-standalone .hero__cta { display: flex; gap: 16px; flex-wrap: wrap; } /* VALUE PROPS — what matters to buyers */ .syt-standalone .vp { padding: 56px 0; border-bottom: 1px solid rgba(26,36,44,.08); } .syt-standalone .vp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .syt-standalone .vp__grid > .vp { padding: 24px 28px 0; border: none !important; border-right: 1px solid rgba(26,36,44,.08) !important; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .syt-standalone .vp__grid > .vp:last-child { border-right: none !important; } .syt-standalone .vp__num { font-family: "Cormorant Garamond","Noto Serif TC",serif; font-weight: 600; font-size: 3.4rem; line-height: 1; color: #1a242c; letter-spacing: -.02em; } .syt-standalone .vp__num em { font-style: italic; color: #9c7a4b; font-weight: 700; } .syt-standalone .vp__unit { font-family: "JetBrains Mono", monospace; font-size: .82rem; color: rgba(156,122,75,.85); letter-spacing: .14em; text-transform: uppercase; } .syt-standalone .vp__lab { font-family: "DM Sans", sans-serif; font-size: .85rem; color: rgba(26,36,44,.55); letter-spacing: .03em; } /* LEGAL STRIP — small line at bottom */ .syt-standalone .legal-strip { background: rgba(26,36,44,.04); padding: 28px 0; border-top: 1px solid rgba(26,36,44,.08); } .syt-standalone .legal-strip__title { font-family: "JetBrains Mono", monospace; font-size: .58rem; color: rgba(26,36,44,.5); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 12px; } .syt-standalone .legal-strip__row { display: flex; flex-wrap: wrap; gap: 16px 32px; font-family: "DM Sans", sans-serif; font-size: .82rem; color: rgba(26,36,44,.7); } .syt-standalone .legal-strip__row span b { color: #1a242c; font-weight: 600; } @media (max-width: 1024px) { .syt-standalone .vp__grid { grid-template-columns: repeat(2, 1fr); } .syt-standalone .vp__grid > .vp:nth-child(2) { border-right: none !important; } .syt-standalone .vp__grid > .vp:nth-child(1), .syt-standalone .vp__grid > .vp:nth-child(2) { padding-bottom: 24px; } } @media (max-width: 600px) { .syt-standalone .vp__grid { grid-template-columns: 1fr; } .syt-standalone .vp__grid > .vp { border-right: none !important; padding-bottom: 24px; } .syt-standalone .legal-strip__row { flex-direction: column; gap: 6px; } } /* Force contact-card rows to stack vertically (label left, value right) */ .syt-standalone .contact-card { display: block !important; background: #fff !important; border: 1px solid rgba(26,36,44,.08) !important; border-top: 3px solid #9c7a4b !important; border-radius: 16px !important; max-width: 760px; overflow: hidden; } .syt-standalone .contact-card .contact-row { display: grid !important; grid-template-columns: 140px 1fr !important; gap: 24px !important; align-items: center; padding: 18px 28px !important; border-bottom: 1px solid rgba(26,36,44,.06) !important; border-right: none !important; white-space: normal !important; } .syt-standalone .contact-card .contact-row:last-child { border-bottom: none !important; } .syt-standalone .contact-card .contact-row__lab { font-family: "JetBrains Mono", monospace; font-size: .68rem !important; color: rgba(26,36,44,.5) !important; letter-spacing: .15em !important; text-transform: uppercase; } .syt-standalone .contact-card .contact-row__val { font-family: "Cormorant Garamond", "Noto Serif TC", serif !important; font-size: 1.05rem !important; color: #1a242c !important; line-height: 1.5; } a.contact-row { text-decoration: none; transition: background .25s; } a.contact-row:hover { background: rgba(156,122,75,.05) !important; } @media (max-width: 600px) { .syt-standalone .contact-card .contact-row { grid-template-columns: 1fr !important; gap: 6px !important; } }