/* site palette */
html:root {
--bg: #F9F7F1;
--surface: #FFFFFF;
--surface-alt: #F6ECED;
--text: #1F1B14;
--text-muted: #726A5A;
--border: #E4E0D8;
--primary: #532026;
--primary-hover: #39161A;
--on-primary: #FFFFFF;
--primary-text: #532026;
--accent: #CFC4AC;
--on-accent: #111111;
--accent-text: #7C6B48;
--dark-band: #2A1013;
--on-dark: #FFFFFF;
--on-dark-muted: #C3BFB6;
--brand-btn-bg: #FFFFFF;
--brand-btn-text: #2A1013;
--section-alt-bg: #F6ECED;
--dark-band-bg: #2A1013;
--brand-band-bg: #532026;
--hero-bg: #2A1013;
}
html:root {
--bs-primary: #532026;
--bs-primary-rgb: 83, 32, 38;
--bs-link-color: #532026;
--bs-link-color-rgb: 83, 32, 38;
--bs-link-hover-color: #39161A;
--mdb-primary: #532026;
--mdb-primary-rgb: 83, 32, 38;
}
.btn-primary {
--bs-btn-bg: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-color: var(--on-primary);
--bs-btn-hover-bg: var(--primary-hover);
--bs-btn-hover-border-color: var(--primary-hover);
--bs-btn-hover-color: var(--on-primary);
--bs-btn-active-bg: var(--primary-hover);
--bs-btn-active-border-color: var(--primary-hover);
--bs-btn-active-color: var(--on-primary);
background-color: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.btn-outline-primary {
--bs-btn-color: var(--primary-text);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary);
--bs-btn-hover-border-color: var(--primary);
--bs-btn-hover-color: var(--on-primary);
color: var(--primary-text);
border-color: var(--primary);
}
.btn-outline-primary:hover {
background-color: var(--primary);
color: var(--on-primary);
}
.text-primary,
.link-primary {
color: var(--primary-text) !important;
}
.bg-primary,
.text-bg-primary,
.badge.bg-primary {
color: var(--on-primary) !important;
}
/* /site palette */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
margin: 0;
padding: 0;
}
a {
color: var(--primary-text);
text-decoration: none;
}
a:hover {
color: var(--primary-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
.text-muted {
color: var(--text-muted) !important;
}
.rcf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--on-primary);
border: 1px solid var(--primary);
border-radius: 9999px;
padding: 10px 24px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
line-height: 1.2;
text-align: center;
}
.rcf-btn:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
text-decoration: none;
}
.rcf-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 9999px;
padding: 10px 24px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
line-height: 1.2;
text-align: center;
}
.rcf-btn-alt:hover {
background-color: var(--surface-alt);
color: var(--primary-hover);
border-color: var(--primary);
text-decoration: none;
}
.rcf-card {
background-color: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: none;
padding: 24px;
}
.rcf-card:hover {
border-color: var(--accent);
}
.rcf-media {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
flex-shrink: 0;
flex-grow: 0;
border-radius: 8px;
border: 1px solid var(--border);
overflow: hidden;
}
.rcf-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rcf-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary-text);
margin-bottom: 8px;
}
.rcf-title {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
color: var(--text);
margin-bottom: 16px;
position: relative;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.rcf-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 500;
color: var(--primary-text);
background-color: var(--surface-alt);
border-radius: 4px;
padding: 4px 8px;
line-height: 1;
}
.rcf-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--surface-alt);
color: var(--primary);
font-size: 18px;
flex-shrink: 0;
}
.rcf-section {
background-color: var(--bg);
padding: 80px 0;
}
.rcf-section-alt {
background-color: var(--section-alt-bg, var(--surface-alt));
padding: 80px 0;
}
.rcf-section-dark {
background-color: var(--dark-band-bg, var(--dark-band));
color: var(--on-dark);
padding: 80px 0;
}
.rcf-section-brand {
background-color: var(--brand-band-bg, var(--primary));
color: var(--on-primary);
padding: 80px 0;
}
@media (max-width: 767.98px) {
.rcf-section,
.rcf-section-alt,
.rcf-section-dark,
.rcf-section-brand {
padding: 48px 0;
}
.rcf-title {
font-size: 1.5rem;
}
}
.rcf-section-brand .rcf-btn {
background-color: var(--brand-btn-bg);
color: var(--brand-btn-text);
border-color: var(--brand-btn-bg);
}
.rcf-section-brand .rcf-btn:hover {
background-color: var(--surface-alt);
border-color: var(--surface-alt);
color: var(--brand-btn-text);
}
.rcf-section-brand .rcf-btn-alt {
border-color: var(--on-primary);
color: var(--on-primary);
}
.rcf-section-brand .rcf-btn-alt:hover {
background-color: rgba(255, 255, 255, 0.15);
color: var(--on-primary);
border-color: var(--on-primary);
}
.rcf-on-dark,
.rcf-section-dark {
color: var(--on-dark);
}
.rcf-on-dark h1,
.rcf-on-dark h2,
.rcf-on-dark h3,
.rcf-on-dark h4,
.rcf-on-dark h5,
.rcf-on-dark h6,
.rcf-section-dark h1,
.rcf-section-dark h2,
.rcf-section-dark h3,
.rcf-section-dark h4,
.rcf-section-dark h5,
.rcf-section-dark h6 {
color: var(--on-dark);
}
.rcf-on-dark a,
.rcf-section-dark a {
color: var(--on-dark);
}
.rcf-on-dark .rcf-eyebrow,
.rcf-section-dark .rcf-eyebrow {
color: var(--on-dark-muted);
}
.rcf-on-dark .rcf-title,
.rcf-section-dark .rcf-title {
color: var(--on-dark);
border-bottom-color: rgba(255, 255, 255, 0.15);
}
.rcf-on-dark .text-muted,
.rcf-section-dark .text-muted {
color: var(--on-dark-muted) !important;
}
.rcf-on-dark .rcf-btn-alt,
.rcf-section-dark .rcf-btn-alt {
border-color: var(--on-dark);
color: var(--on-dark);
}
.rcf-on-dark .rcf-btn-alt:hover,
.rcf-section-dark .rcf-btn-alt:hover {
background-color: rgba(255, 255, 255, 0.12);
color: var(--on-dark);
}
.rcf-section-dark .rcf-card,
.rcf-on-dark .rcf-card {
background-color: var(--surface);
color: var(--text);
border-color: var(--border);
}
.rcf-section-dark .rcf-card .rcf-title,
.rcf-on-dark .rcf-card .rcf-title {
color: var(--text);
border-bottom-color: var(--border);
}
.rcf-section-dark .rcf-card .rcf-eyebrow,
.rcf-on-dark .rcf-card .rcf-eyebrow {
color: var(--primary-text);
}
.rcf-section-dark .rcf-card .text-muted,
.rcf-on-dark .rcf-card .text-muted {
color: var(--text-muted) !important;
}
.rcf-section-dark .rcf-card a,
.rcf-on-dark .rcf-card a {
color: var(--primary-text);
}
/* ===== ===== */
.viewglobal-site-header {
position: sticky;
top: 0;
z-index: 1030;
width: 100%;
box-shadow: 0 2px 10px rgba(31, 27, 20, 0.06);
background-color: var(--surface)
}
.viewglobal-site-header .viewglobal-top-bar {
background-color: var(--surface-alt);
border-bottom: 1px solid var(--border);
padding: 6px 0;
font-size: 0.75rem;
line-height: 1.4
}
.viewglobal-site-header .viewglobal-bar-text {
color: var(--text);
font-weight: 500
}
.viewglobal-site-header .viewglobal-bar-meta {
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px
}
.viewglobal-site-header .viewglobal-bar-meta i {
color: var(--primary-text)
}
.viewglobal-site-header .viewglobal-navbar {
background-color: var(--surface);
padding: 14px 0;
border-bottom: 1px solid var(--border)
}
.viewglobal-site-header .viewglobal-logo {
width: 44px;
height: 44px;
max-width: 44px;
object-fit: contain;
border-radius: 6px
}
.viewglobal-site-header .viewglobal-brand-text {
display: flex;
flex-direction: column;
line-height: 1.1
}
.viewglobal-site-header .viewglobal-brand-main {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--primary-text)
}
.viewglobal-site-header .viewglobal-brand-sub {
font-size: 0.7rem;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.04em
}
.viewglobal-site-header .viewglobal-nav-list {
gap: 8px
}
.viewglobal-site-header .viewglobal-nav-list .nav-link {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text);
padding: 8px 14px;
border-radius: 9999px;
transition: none
}
.viewglobal-site-header .viewglobal-nav-list .nav-link:hover {
color: var(--primary-hover);
background-color: var(--surface-alt)
}
.viewglobal-site-header .viewglobal-nav-list .nav-link.active {
color: var(--primary);
background-color: var(--surface-alt)
}
.viewglobal-site-header .viewglobal-toggler {
border: 1px solid var(--border);
background-color: var(--surface);
color: var(--primary-text);
padding: 6px 10px;
border-radius: 6px;
font-size: 1.25rem;
box-shadow: none
}
.viewglobal-site-header .viewglobal-toggler:focus {
box-shadow: none;
outline: 2px solid var(--primary)
}
.viewglobal-site-header .viewglobal-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
padding: 8px 20px;
white-space: nowrap
}
@media (max-width:991.98px) {
.viewglobal-site-header .viewglobal-navbar {
padding: 10px 0
}
.viewglobal-site-header .viewglobal-nav-list {
padding-top: 16px;
padding-bottom: 12px;
gap: 4px;
border-top: 1px solid var(--border);
margin-top: 10px
}
.viewglobal-site-header .viewglobal-nav-list .nav-link {
padding: 10px 14px;
font-size: 0.875rem
}
.viewglobal-site-header .viewglobal-nav-actions {
padding-bottom: 8px;
display: flex;
width: 100%
}
.viewglobal-site-header .viewglobal-action-btn {
width: 100%
}
}
/* ===== ===== */
.hero-editorial-section {
position: relative;
background-color: var(--hero-bg);
overflow: hidden;
min-height: 580px;
}
.hero-editorial-section__bg-overlay {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.18;
mix-blend-mode: luminosity;
pointer-events: none;
}
.hero-editorial-section .rcf-on-dark {
color: var(--on-dark);
}
.hero-editorial-section__badge-text {
font-size: 0.8125rem;
letter-spacing: 0.04em;
color: var(--on-dark-muted);
}
.hero-editorial-section__headline {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
color: var(--on-dark);
hyphens: auto;
overflow-wrap: anywhere;
}
.hero-editorial-section__lead {
font-size: 1.0625rem;
line-height: 1.6;
color: var(--on-dark-muted);
max-width: 620px;
overflow-wrap: anywhere;
}
.hero-editorial-section__metric-box {
padding: 8px 0;
}
.hero-editorial-section__metric-val {
font-size: 1.625rem;
font-weight: 700;
color: var(--accent);
line-height: 1.1;
}
.hero-editorial-section__metric-lbl {
font-size: 0.75rem;
color: var(--on-dark-muted);
margin-top: 4px;
}
.hero-editorial-section__spotlight-tag {
font-size: 0.75rem;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 4px;
}
.hero-editorial-section__spotlight-date {
font-size: 0.75rem;
color: var(--on-dark-muted);
}
.hero-editorial-section__card {
background-color: var(--surface);
border-radius: 12px;
border: 1px solid var(--border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.hero-editorial-section__img-frame {
aspect-ratio: 16 / 9;
width: 100%;
background-color: var(--surface-alt);
}
.hero-editorial-section__img-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-editorial-section__card-title {
font-size: 1.125rem;
line-height: 1.35;
font-weight: 600;
}
.hero-editorial-section__card-title a {
color: var(--text);
}
.hero-editorial-section__card-title a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.hero-editorial-section__card-desc {
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.hero-editorial-section__meta-item {
font-size: 0.75rem;
color: var(--text-muted);
}
.hero-editorial-section__read-time {
font-size: 0.75rem;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 767px) {
.hero-editorial-section {
min-height: auto;
}
.hero-editorial-section__headline {
font-size: 18px !important;
}
.hero-editorial-section__lead {
font-size: 0.875rem;
}
.hero-editorial-section__card-title {
font-size: 16px !important;
}
.hero-editorial-section__metric-val {
font-size: 1.25rem;
}
}
/* ===== ===== */
.vg-categories-block {
padding: 80px 0;
}
.vg-categories-block__header {
margin-bottom: 32px;
}
.vg-categories-block__title {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
color: var(--text);
margin: 0;
overflow-wrap: anywhere;
}
.vg-categories-block__subtitle {
font-size: 0.9375rem;
color: var(--text-muted);
line-height: 1.6;
}
.vg-categories-block__divider {
width: 100%;
height: 1px;
background-color: var(--border);
margin-top: 16px;
}
.vg-categories-block__card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px 28px;
box-sizing: border-box;
}
.vg-categories-block__card:hover {
border-color: var(--accent);
}
.vg-categories-block__icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--surface-alt);
color: var(--primary-text);
font-size: 1.25rem;
flex-shrink: 0;
}
.vg-categories-block__count {
background-color: var(--surface-alt);
color: var(--primary-text);
font-size: 0.75rem;
font-weight: 600;
padding: 6px 12px;
border-radius: 4px;
letter-spacing: 0.02em;
}
.vg-categories-block__card-title {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 12px;
color: var(--text);
overflow-wrap: anywhere;
}
.vg-categories-block__card-link {
color: var(--text);
text-decoration: none;
}
.vg-categories-block__card-link:hover {
color: var(--primary);
text-decoration: underline;
}
.vg-categories-block__card-desc {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 20px;
overflow-wrap: anywhere;
}
.vg-categories-block__topic-tag {
font-size: 0.75rem;
color: var(--text-muted);
background-color: var(--bg);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: 9999px;
line-height: 1.4;
}
.vg-categories-block .border-top {
border-top: 1px solid var(--border) !important;
padding-top: 20px !important;
}
.vg-categories-block__btn {
text-decoration: none;
padding: 10px 24px;
font-size: 0.9375rem;
font-weight: 500;
}
.vg-categories-block__btn:hover {
color: var(--on-primary);
}
@media (max-width: 767px) {
.vg-categories-block {
padding: 48px 0;
}
.vg-categories-block__title {
font-size: 1.5rem;
hyphens: auto;
}
.vg-categories-block__card-title {
font-size: 1.25rem;
hyphens: auto;
}
.vg-categories-block__card {
padding: 24px 20px;
}
.vg-categories-block__btn {
width: 100%;
}
}
/* ===== ===== */
.vg-featured-reviews {
overflow: hidden;
}
.vg-featured-reviews__header {
border-bottom: 1px solid var(--border);
}
.vg-featured-reviews__header .rcf-eyebrow {
letter-spacing: 0.08em;
color: var(--primary-text);
font-weight: 700;
}
.vg-featured-reviews__header .rcf-title {
color: var(--text);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.25;
overflow-wrap: anywhere;
}
.vg-featured-reviews__card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.vg-featured-reviews__card:hover {
border-color: var(--accent);
}
.vg-featured-reviews__thumb-link {
display: block;
text-decoration: none;
overflow: hidden;
}
.vg-featured-reviews__media {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--surface-alt);
}
.vg-featured-reviews__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vg-featured-reviews__meta {
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1;
}
.vg-featured-reviews__title {
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
margin: 0;
overflow-wrap: anywhere;
}
.vg-featured-reviews__title-link {
color: var(--text);
text-decoration: none;
}
.vg-featured-reviews__title-link:hover {
color: var(--primary);
text-decoration: underline;
}
.vg-featured-reviews__desc {
font-size: 0.875rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
overflow-wrap: anywhere;
}
.vg-featured-reviews .rcf-btn {
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
}
@media (max-width: 767px) {
.vg-featured-reviews__header .rcf-title {
font-size: 1.375rem;
}
.vg-featured-reviews__title {
font-size: 1rem;
}
}
/* ===== ===== */
.vg-news-grid {
padding-top: 80px;
padding-bottom: 80px;
}
.vg-news-grid .vg-news-header h2.rcf-title {
color: var(--text);
font-size: 2rem;
line-height: 1.25;
font-weight: 700;
}
.vg-news-grid .border-bottom {
border-bottom: 1px solid var(--border) !important;
}
.vg-news-grid .vg-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
}
.vg-news-grid .vg-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.vg-news-grid .vg-card:hover {
border-color: var(--accent);
}
.vg-news-grid .vg-card-media {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: var(--surface-alt);
}
.vg-news-grid .vg-card-media img.rcf-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vg-news-grid .vg-card-title {
font-size: 1.05rem;
line-height: 1.35;
font-weight: 700;
margin: 0;
color: var(--text);
}
.vg-news-grid .vg-card-title a {
color: var(--text);
text-decoration: none;
overflow-wrap: anywhere;
}
.vg-news-grid .vg-card-title a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.vg-news-grid .vg-card-desc {
font-size: 0.875rem;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 0;
overflow-wrap: anywhere;
}
.vg-news-grid .vg-meta-item {
font-size: 0.75rem;
color: var(--text-muted);
}
.vg-news-grid .vg-meta-item i {
color: var(--primary-text);
}
.vg-news-grid .vg-card-footer {
border-top-color: var(--border) !important;
}
.vg-news-grid .vg-card-btn {
padding: 6px 14px;
font-size: 0.8125rem;
text-decoration: none;
white-space: nowrap;
}
@media (max-width: 767px) {
.vg-news-grid {
padding-top: 48px;
padding-bottom: 48px;
}
.vg-news-grid .vg-news-header h2.rcf-title {
font-size: 16px;
hyphens: auto;
}
.vg-news-grid .vg-card-title {
font-size: 14px;
hyphens: auto;
}
.vg-news-grid .vg-all-link {
width: 100%;
justify-content: center;
}
}
/* ===== ===== */
.beginner-guide-section {
padding-top: 80px;
padding-bottom: 80px;
}
.beginner-guide-section .beginner-guide-header {
max-width: 100%;
}
.beginner-guide-section .beginner-guide-main-title {
color: var(--on-dark);
font-size: 2rem;
font-weight: 700;
line-height: 1.25;
margin-bottom: 0.5rem;
hyphens: auto;
overflow-wrap: anywhere;
}
.beginner-guide-section .beginner-guide-lead {
color: var(--on-dark-muted);
font-size: 1rem;
line-height: 1.6;
max-width: 860px;
overflow-wrap: anywhere;
}
.beginner-guide-section .beginner-guide-rule {
height: 1px;
background-color: rgba(255, 255, 255, 0.16);
width: 100%;
}
.beginner-guide-section .beginner-guide-chip {
background-color: rgba(255, 255, 255, 0.08);
color: var(--on-dark);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 9999px;
padding: 6px 16px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
}
.beginner-guide-section .beginner-guide-chip:hover {
background-color: rgba(255, 255, 255, 0.18);
color: var(--on-dark);
border-color: rgba(255, 255, 255, 0.32);
}
.beginner-guide-section .beginner-guide-chip.is-active {
background-color: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
font-weight: 600;
}
.beginner-guide-section .beginner-guide-count-badge {
font-size: 0.875rem;
color: var(--on-dark-muted);
}
.beginner-guide-section .beginner-guide-card {
border-radius: 12px;
border: 1px solid var(--border);
background-color: var(--surface);
padding: 24px;
min-width: 0;
}
.beginner-guide-section .beginner-guide-step-tag {
font-size: 0.75rem;
font-weight: 600;
color: var(--primary-text);
background-color: var(--surface-alt);
padding: 2px 8px;
border-radius: 4px;
}
.beginner-guide-section .beginner-guide-card-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
color: var(--text);
overflow-wrap: anywhere;
}
.beginner-guide-section .beginner-guide-title-link {
color: var(--text);
text-decoration: none;
}
.beginner-guide-section .beginner-guide-title-link:hover {
color: var(--primary);
text-decoration: underline;
}
.beginner-guide-section .beginner-guide-card-desc {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
min-height: 4.8em;
overflow-wrap: anywhere;
}
.beginner-guide-section .beginner-guide-points {
font-size: 0.8125rem;
color: var(--text);
line-height: 1.5;
}
.beginner-guide-section .beginner-point-icon {
color: var(--primary);
font-size: 0.875rem;
flex-shrink: 0;
}
.beginner-guide-section .beginner-guide-summary-band {
background-color: var(--surface-alt);
border-left: 3px solid var(--primary);
border-radius: 8px;
}
.beginner-guide-section .beginner-guide-summary-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--surface);
color: var(--primary);
font-size: 1.25rem;
flex-shrink: 0;
border: 1px solid var(--border);
}
.beginner-guide-section .beginner-guide-summary-title {
font-size: 1rem;
font-weight: 700;
color: var(--text);
}
.beginner-guide-section .beginner-guide-summary-text {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.beginner-guide-section {
padding-top: 48px;
padding-bottom: 48px;
}
.beginner-guide-section .beginner-guide-main-title {
font-size: 1rem;
}
.beginner-guide-section .beginner-guide-card-title {
font-size: 0.875rem;
}
.beginner-guide-section .beginner-guide-card {
padding: 18px;
}
.beginner-guide-section .beginner-guide-card-desc {
min-height: auto;
}
}
/* ===== ===== */
.hardware-quiz-section {
background-color: var(--bg);
color: var(--text);
}
.hardware-quiz-section__divider {
width: 100%;
height: 1px;
background-color: var(--border);
}
.hardware-quiz-section__lead {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
}
.hardware-quiz-section__question-title {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.4;
color: var(--text);
overflow-wrap: anywhere;
}
.hardware-quiz-section__status {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 4px;
background-color: var(--surface-alt);
color: var(--primary-text);
font-weight: 600;
}
.hardware-quiz-section__option {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 16px;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
text-align: left;
cursor: pointer;
color: var(--text);
font-size: 0.9375rem;
outline: none;
}
.hardware-quiz-section__option:hover {
border-color: var(--primary);
background-color: var(--surface-alt);
}
.hardware-quiz-section__letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--surface-alt);
color: var(--primary-text);
font-weight: 700;
font-size: 0.875rem;
flex-shrink: 0;
}
.hardware-quiz-section__text {
flex-grow: 1;
overflow-wrap: anywhere;
}
.hardware-quiz-section__option.is-selected {
border-color: var(--primary);
background-color: var(--surface-alt);
font-weight: 600;
}
.hardware-quiz-section__option.is-selected .hardware-quiz-section__letter {
background-color: var(--primary);
color: var(--on-primary);
}
.hardware-quiz-section__option.is-correct {
border-color: #2e7d32;
background-color: rgba(46, 125, 50, 0.08);
}
.hardware-quiz-section__option.is-correct .hardware-quiz-section__letter {
background-color: #2e7d32;
color: #ffffff;
}
.hardware-quiz-section__option.is-wrong {
border-color: #c62828;
background-color: rgba(198, 40, 40, 0.08);
}
.hardware-quiz-section__option.is-wrong .hardware-quiz-section__letter {
background-color: #c62828;
color: #ffffff;
}
.hardware-quiz-section__explanation {
border-radius: 8px;
background-color: var(--surface-alt);
border-left: 3px solid var(--primary);
}
.hardware-quiz-section__verdict {
color: var(--primary-text);
font-size: 0.875rem;
}
.hardware-quiz-section__exp-text {
font-size: 0.875rem;
color: var(--text);
line-height: 1.6;
overflow-wrap: anywhere;
}
.hardware-quiz-section__side-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text);
overflow-wrap: anywhere;
}
.hardware-quiz-section__score-display {
background-color: var(--surface-alt);
border-radius: 8px;
border: 1px solid var(--border);
}
.hardware-quiz-section__score-val {
font-size: 2.25rem;
font-weight: 900;
color: var(--primary-text);
line-height: 1.15;
}
.hardware-quiz-section__score-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 4px;
}
.hardware-quiz-section__meta-key {
color: var(--text-muted);
font-size: 0.875rem;
}
.hardware-quiz-section__meta-val {
color: var(--text);
font-weight: 600;
font-size: 0.875rem;
}
.hardware-quiz-section__notice {
background-color: var(--surface-alt);
color: var(--primary-text);
border-radius: 4px;
font-size: 0.8125rem;
}
.hardware-quiz-section__side-text {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
overflow-wrap: anywhere;
}
.hardware-quiz-section__side-link {
color: var(--primary-text);
text-decoration: none;
font-size: 0.875rem;
line-height: 1.5;
display: inline-flex;
align-items: center;
overflow-wrap: anywhere;
}
.hardware-quiz-section__side-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
@media(max-width:767px) {
.hardware-quiz-section__actions {
flex-direction: column;
align-items: stretch;
}
.hardware-quiz-section__actions .rcf-btn,
.hardware-quiz-section__actions .rcf-btn-alt {
width: 100%;
justify-content: center;
}
.hardware-quiz-section__question-title {
font-size: 1rem;
}
.hardware-quiz-section__side-title {
font-size: 1rem;
}
}
/* ===== ===== */
.calendar-section {
padding: 80px 0;
background-color: var(--primary);
color: var(--on-primary);
}
.calendar-section .calendar-eyebrow {
color: var(--accent);
font-size: 0.75rem;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 8px;
}
.calendar-section .calendar-lead {
color: var(--on-dark-muted);
font-size: 0.95rem;
max-width: 680px;
line-height: 1.6;
}
.calendar-section .calendar-filter-btn {
border: 1px solid rgba(255, 255, 255, 0.24);
background: transparent;
color: var(--on-primary);
border-radius: 9999px;
padding: 8px 16px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.calendar-section .calendar-filter-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.4);
}
.calendar-section .calendar-filter-btn.active {
background: var(--on-primary);
color: var(--primary);
border-color: var(--on-primary);
}
.calendar-section .calendar-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
position: relative;
color: var(--text);
}
.calendar-section .calendar-status-current {
background-color: var(--surface-alt);
color: var(--primary-text);
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
}
.calendar-section .calendar-status-past {
background-color: #ECEAE4;
color: var(--text-muted);
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
}
.calendar-section .calendar-date-pill {
font-size: 0.8rem;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.calendar-section .calendar-eyebrow-card {
font-size: 0.75rem;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--primary-text);
}
.calendar-section .calendar-card-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
.calendar-section .calendar-card-title a {
color: var(--text);
}
.calendar-section .calendar-card-title a:hover {
color: var(--primary-text);
}
.calendar-section .calendar-card-desc {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 16px;
}
.calendar-section .calendar-point-item {
font-size: 0.825rem;
color: var(--text);
}
.calendar-section .calendar-point-icon {
color: var(--primary);
font-size: 1rem;
flex-shrink: 0;
}
.calendar-section .calendar-meta-link {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-text);
}
@media (max-width: 767px) {
.calendar-section {
padding: 48px 0;
}
.calendar-section .calendar-filter-btn {
font-size: 0.8rem;
padding: 6px 12px;
}
.calendar-section h2.rcf-title {
font-size: 1.35rem;
}
.calendar-section .calendar-card {
padding: 20px;
}
}
/* ===== ===== */
.vg-guest-authors {
padding-top: 80px;
padding-bottom: 80px;
}
.vg-guest-authors__header {
margin-bottom: 24px;
}
.vg-guest-authors__header .rcf-eyebrow {
display: block;
color: var(--primary-text);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 8px;
}
.vg-guest-authors__header .rcf-title {
font-size: 2rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
margin-bottom: 16px;
}
.vg-guest-authors__divider {
width: 100%;
height: 1px;
background-color: var(--border);
}
.vg-guest-authors__controls {
margin-bottom: 32px;
}
.vg-guest-authors__controls .rcf-btn,
.vg-guest-authors__controls .rcf-btn-alt {
font-size: 0.875rem;
padding: 8px 18px;
border-radius: 9999px;
cursor: pointer;
}
.vg-guest-authors__controls .rcf-btn-alt.active {
background-color: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.vg-guest-authors__card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
min-height: 100%;
}
.vg-guest-authors__card:hover {
border-color: var(--accent);
}
.vg-guest-authors__avatar-wrapper {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--surface-alt);
}
.vg-guest-authors__avatar {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.vg-guest-authors__meta {
min-width: 0;
}
.vg-guest-authors__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
line-height: 1.2;
}
.vg-guest-authors__card .rcf-badge {
display: inline-block;
background-color: var(--surface-alt);
color: var(--primary-text);
font-size: 0.75rem;
padding: 3px 8px;
border-radius: 4px;
font-weight: 500;
}
.vg-guest-authors__focus-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.vg-guest-authors__focus-text {
font-size: 0.875rem;
line-height: 1.6;
color: var(--text);
margin-bottom: 12px;
}
.vg-guest-authors__tags {
min-height: 28px;
}
.vg-guest-authors__spec-pill {
font-size: 0.75rem;
background-color: var(--bg);
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 8px;
}
.vg-guest-authors__footer {
border-color: var(--border) !important;
}
.vg-guest-authors__stat {
font-size: 0.8125rem;
color: var(--text-muted);
font-weight: 500;
}
.vg-guest-authors__stat i {
color: var(--primary-text);
font-size: 1rem;
}
.vg-guest-authors__link-btn {
font-size: 0.8125rem;
padding: 6px 14px;
text-decoration: none;
display: inline-block;
}
.vg-guest-authors__editorial-notice {
background-color: var(--surface-alt);
border-radius: 12px;
border-left: 3px solid var(--primary);
}
.vg-guest-authors__notice-title {
font-size: 1rem;
font-weight: 700;
color: var(--primary-text);
margin-bottom: 4px;
}
.vg-guest-authors__notice-desc {
font-size: 0.875rem;
color: var(--text);
line-height: 1.6;
}
.vg-guest-authors .rcf-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-text);
font-size: 1.125rem;
}
@media (max-width: 767px) {
.vg-guest-authors {
padding-top: 48px;
padding-bottom: 48px;
}
.vg-guest-authors__header .rcf-title {
font-size: 16px;
hyphens: auto;
}
.vg-guest-authors__name {
font-size: 14px;
}
.vg-guest-authors__notice-title {
font-size: 14px;
}
.vg-guest-authors__card {
padding: 18px;
}
}
/* ===== ===== */
.vg-footer {
background-color: var(--surface, #FFFFFF);
border-top: 1px solid var(--border, #E4E0D8);
padding: 48px 0 36px;
color: var(--text, #1F1B14);
font-family: 'Noto Sans SC', sans-serif;
}
.vg-footer .vg-footer-inner {
max-width: 860px;
margin: 0 auto;
}
.vg-footer .vg-footer-brand {
margin-bottom: 28px;
}
.vg-footer .vg-footer-logo-text {
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary-text, #532026);
line-height: 1.2;
margin-bottom: 12px;
}
.vg-footer .vg-footer-summary {
font-size: 0.875rem;
line-height: 1.7;
color: var(--text-muted, #726A5A);
max-width: 680px;
margin: 0 auto;
overflow-wrap: anywhere;
}
.vg-footer .vg-footer-nav {
margin-bottom: 24px;
}
.vg-footer .vg-footer-nav-list {
gap: 12px 24px;
}
.vg-footer .vg-footer-nav-item {
min-height: 40px;
display: inline-flex;
align-items: center;
}
.vg-footer .vg-footer-nav-link {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text, #1F1B14);
text-decoration: none;
padding: 8px 6px;
display: inline-block;
line-height: 1.4;
}
.vg-footer .vg-footer-nav-link:hover,
.vg-footer .vg-footer-nav-link:focus-visible {
color: var(--primary-hover, #39161A);
text-decoration: underline;
}
.vg-footer .vg-footer-divider {
width: 100%;
max-width: 480px;
height: 1px;
background-color: var(--border, #E4E0D8);
margin: 0 auto 20px;
}
.vg-footer .vg-footer-legal {
margin-bottom: 24px;
}
.vg-footer .vg-footer-legal-list {
gap: 8px 18px;
}
.vg-footer .vg-footer-legal-item {
min-height: 36px;
display: inline-flex;
align-items: center;
}
.vg-footer .vg-footer-legal-link {
font-size: 0.8125rem;
font-weight: 400;
color: var(--text-muted, #726A5A);
text-decoration: none;
padding: 6px 4px;
display: inline-block;
line-height: 1.4;
}
.vg-footer .vg-footer-legal-link:hover,
.vg-footer .vg-footer-legal-link:focus-visible {
color: var(--primary-text, #532026);
text-decoration: underline;
}
.vg-footer .vg-footer-bottom {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.vg-footer .vg-footer-copy {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text, #1F1B14);
letter-spacing: 0.02em;
}
.vg-footer .vg-footer-notice {
font-size: 0.75rem;
line-height: 1.6;
color: var(--text-muted, #726A5A);
max-width: 620px;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.vg-footer {
padding: 36px 0 28px;
}
.vg-footer .vg-footer-logo-text {
font-size: 1.25rem;
margin-bottom: 8px;
}
.vg-footer .vg-footer-summary {
font-size: 0.8125rem;
padding: 0 10px;
}
.vg-footer .vg-footer-nav-list {
flex-direction: column;
gap: 8px;
}
.vg-footer .vg-footer-legal-list {
flex-direction: column;
gap: 6px;
}
.vg-footer .vg-footer-divider {
max-width: 240px;
margin-bottom: 16px;
}
.vg-footer .vg-footer-bottom {
padding: 0 12px;
}
.vg-footer .vg-footer-copy {
font-size: 0.75rem;
}
.vg-footer .vg-footer-notice {
font-size: 0.6875rem;
}
}
:root {
--bg: #F9F7F1;
--surface: #FFFFFF;
--surface-alt: #F6ECED;
--text: #1F1B14;
--text-muted: #726A5A;
--border: #E4E0D8;
--primary: #532026;
--primary-hover: #39161A;
--on-primary: #FFFFFF;
--primary-text: #532026;
--accent: #CFC4AC;
--on-accent: #111111;
--accent-text: #7C6B48;
--dark-band: #2A1013;
--on-dark: #FFFFFF;
--on-dark-muted: #C3BFB6;
--brand-btn-bg: #FFFFFF;
--brand-btn-text: #2A1013;
--section-alt-bg: #F6ECED;
--dark-band-bg: #2A1013;
--brand-band-bg: #532026;
--hero-bg: #2A1013;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: 'Noto Sans SC', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
.vg-header {
background-color: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1020;
box-shadow: 0 2px 10px rgba(31, 27, 20, 0.05);
}
.vg-header-topbar {
background-color: var(--surface-alt);
border-bottom: 1px solid var(--border);
padding: 6px 0;
font-size: 0.75rem;
color: var(--text-muted);
}
.vg-topbar-notice {
color: var(--primary-text);
font-weight: 500;
}
.vg-topbar-date,
.vg-topbar-edition {
font-size: 0.75rem;
color: var(--text-muted);
}
.vg-navbar {
padding: 12px 0;
background-color: var(--surface);
}
.vg-brand {
display: flex;
flex-direction: column;
text-decoration: none;
}
.vg-brand-name {
font-size: 1.375rem;
font-weight: 700;
color: var(--primary-text);
line-height: 1.2;
letter-spacing: -0.02em;
}
.vg-brand-tag {
font-size: 0.6875rem;
color: var(--text-muted);
line-height: 1.2;
}
.vg-nav-link {
color: var(--text);
font-weight: 500;
font-size: 0.9375rem;
padding: 8px 14px;
border-radius: 9999px;
text-decoration: none;
}
.vg-nav-link:hover,
.vg-nav-link:focus-visible {
color: var(--primary-hover);
background-color: var(--surface-alt);
}
.vg-nav-link.active {
color: var(--primary-text);
font-weight: 600;
}
.navbar-toggler {
border: 1px solid var(--border);
color: var(--primary-text);
padding: 6px 10px;
border-radius: 6px;
}
.rcf-section {
background-color: var(--bg);
padding: 64px 0;
}
.rcf-section-alt {
background-color: var(--surface-alt);
padding: 64px 0;
}
.rcf-section-dark {
background-color: var(--dark-band);
padding: 64px 0;
}
.rcf-on-dark {
color: var(--on-dark);
}
.rcf-on-dark .vg-hero-heading {
color: var(--on-dark);
}
.rcf-on-dark .vg-hero-lead {
color: var(--on-dark-muted);
}
.rcf-on-dark .rcf-eyebrow {
color: var(--accent);
}
.rcf-eyebrow {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary-text);
}
.rcf-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.rcf-badge {
background-color: var(--surface-alt);
color: var(--primary-text);
padding: 3px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
line-height: 1.4;
}
.rcf-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: rgba(246, 236, 237, 0.2);
color: var(--accent);
font-size: 1rem;
}
.rcf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--on-primary);
border: 1px solid var(--primary);
border-radius: 9999px;
padding: 8px 18px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.rcf-btn:hover,
.rcf-btn:focus-visible {
background-color: var(--primary-hover);
color: var(--on-primary);
border-color: var(--primary-hover);
}
.rcf-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 9999px;
padding: 8px 18px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.rcf-btn-alt:hover,
.rcf-btn-alt:focus-visible {
background-color: var(--surface-alt);
color: var(--primary-hover);
border-color: var(--primary);
}
.rcf-card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.vg-category-hero {
padding: 56px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.vg-hero-heading {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.25;
overflow-wrap: anywhere;
}
.vg-hero-lead {
font-size: 1.0625rem;
line-height: 1.6;
max-width: 720px;
margin: 0 auto;
overflow-wrap: anywhere;
}
.vg-section-intro {
font-size: 0.875rem;
color: var(--text-muted);
max-width: 600px;
overflow-wrap: anywhere;
}
.vg-compact-card {
border-color: var(--border);
}
.vg-compact-card:hover {
border-color: var(--accent);
}
.vg-card-media-wrapper {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background-color: var(--surface-alt);
}
.vg-card-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vg-card-title {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
.vg-card-title-link {
color: var(--text);
text-decoration: none;
}
.vg-card-title-link:hover,
.vg-card-title-link:focus-visible {
color: var(--primary-hover);
text-decoration: underline;
}
.vg-card-meta-date,
.vg-card-meta-author {
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
.vg-card-summary {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
overflow-wrap: anywhere;
}
.vg-fullwidth-btn {
width: 100%;
padding: 8px 12px;
font-size: 0.8125rem;
letter-spacing: 0.02em;
}
.vg-quote-card {
background-color: var(--surface);
border-radius: 12px;
border-left: 4px solid var(--primary);
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.vg-quote-text {
font-size: 1.125rem;
font-weight: 500;
line-height: 1.5;
color: var(--text);
overflow-wrap: anywhere;
}
.vg-quote-source {
font-size: 0.8125rem;
color: var(--text-muted);
font-style: normal;
}
.vg-quote-stat-pill {
display: inline-block;
background-color: var(--surface-alt);
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 9999px;
padding: 6px 14px;
font-size: 0.8125rem;
font-weight: 600;
}
.vg-footer {
background-color: var(--surface, #FFFFFF);
border-top: 1px solid var(--border, #E4E0D8);
padding: 48px 0 36px;
color: var(--text, #1F1B14);
font-family: 'Noto Sans SC', sans-serif;
}
.vg-footer .vg-footer-inner {
max-width: 860px;
margin: 0 auto;
}
.vg-footer .vg-footer-brand {
margin-bottom: 28px;
}
.vg-footer .vg-footer-logo-text {
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary-text, #532026);
line-height: 1.2;
margin-bottom: 12px;
}
.vg-footer .vg-footer-summary {
font-size: 0.875rem;
line-height: 1.7;
color: var(--text-muted, #726A5A);
max-width: 680px;
margin: 0 auto;
overflow-wrap: anywhere;
}
.vg-footer .vg-footer-nav {
margin-bottom: 24px;
}
.vg-footer .vg-footer-nav-list {
gap: 12px 24px;
}
.vg-footer .vg-footer-nav-item {
min-height: 40px;
display: inline-flex;
align-items: center;
}
.vg-footer .vg-footer-nav-link {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text, #1F1B14);
text-decoration: none;
padding: 8px 6px;
display: inline-block;
line-height: 1.4;
}
.vg-footer .vg-footer-nav-link:hover,
.vg-footer .vg-footer-nav-link:focus-visible {
color: var(--primary-hover, #39161A);
text-decoration: underline;
}
.vg-footer .vg-footer-divider {
width: 100%;
max-width: 480px;
height: 1px;
background-color: var(--border, #E4E0D8);
margin: 0 auto 20px;
}
.vg-footer .vg-footer-legal {
margin-bottom: 24px;
}
.vg-footer .vg-footer-legal-list {
gap: 8px 18px;
}
.vg-footer .vg-footer-legal-item {
min-height: 36px;
display: inline-flex;
align-items: center;
}
.vg-footer .vg-footer-legal-link {
font-size: 0.8125rem;
font-weight: 400;
color: var(--text-muted, #726A5A);
text-decoration: none;
padding: 6px 4px;
display: inline-block;
line-height: 1.4;
}
.vg-footer .vg-footer-legal-link:hover,
.vg-footer .vg-footer-legal-link:focus-visible {
color: var(--primary-text, #532026);
text-decoration: underline;
}
.vg-footer .vg-footer-bottom {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.vg-footer .vg-footer-copy {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text, #1F1B14);
letter-spacing: 0.02em;
}
.vg-footer .vg-footer-notice {
font-size: 0.75rem;
line-height: 1.6;
color: var(--text-muted, #726A5A);
max-width: 620px;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.vg-category-hero {
padding: 40px 0;
}
.vg-hero-heading {
font-size: 1.125rem;
hyphens: auto;
}
.vg-hero-lead {
font-size: 0.875rem;
}
.rcf-title {
font-size: 1rem;
hyphens: auto;
}
.vg-card-title {
font-size: 0.875rem;
hyphens: auto;
}
.vg-news-listing {
padding: 40px 0;
}
.vg-quote-band {
padding: 40px 0;
}
.vg-filter-controls {
width: 100%;
}
.vg-filter-controls .rcf-btn,
.vg-filter-controls .rcf-btn-alt {
flex: 1 1 calc(50% - 8px);
padding: 6px 10px;
font-size: 0.75rem;
}
.vg-footer {
padding: 36px 0 28px;
}
.vg-footer .vg-footer-logo-text {
font-size: 1.25rem;
margin-bottom: 8px;
}
.vg-footer .vg-footer-summary {
font-size: 0.8125rem;
padding: 0 10px;
}
.vg-footer .vg-footer-nav-list {
flex-direction: column;
gap: 8px;
}
.vg-footer .vg-footer-legal-list {
flex-direction: column;
gap: 6px;
}
.vg-footer .vg-footer-divider {
max-width: 240px;
margin-bottom: 16px;
}
.vg-footer .vg-footer-bottom {
padding: 0 12px;
}
.vg-footer .vg-footer-copy {
font-size: 0.75rem;
}
.vg-footer .vg-footer-notice {
font-size: 0.6875rem;
}
}
/* ===== PAGE: about ===== */
.about-page-block{padding-top:80px;padding-bottom:80px}.about-page-block__header{margin-bottom:48px}.about-page-block__header .rcf-eyebrow{display:block;margin-bottom:8px}.about-page-block__header .rcf-title{color:var(--text);font-weight:700;margin-bottom:16px}.about-page-block__divider{width:100%;height:1px;background-color:var(--border)}.about-page-block__lead-text{font-size:1.125rem;line-height:1.7;color:var(--text);margin-bottom:16px;font-weight:500}.about-page-block__body-text{font-size:1rem;line-height:1.7;color:var(--text-muted);margin-bottom:0}.about-page-block__media-wrapper{border-radius:12px;overflow:hidden;border:1px solid var(--border);background-color:var(--surface);padding:0}.about-page-block__image{width:100%;height:100%;aspect-ratio:16/11;object-fit:cover;display:block}.about-page-block__card{padding:28px 24px;border:1px solid var(--border);border-radius:12px;background-color:var(--surface)}.about-page-block__card-title{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:12px;line-height:1.3}.about-page-block__card-desc{font-size:0.9375rem;line-height:1.6;color:var(--text-muted);margin-bottom:0}.about-page-block .rcf-icon{width:36px;height:36px;border-radius:50%;background-color:var(--surface-alt);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:18px}.about-page-block__quote-band{background-color:var(--surface-alt);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:12px;padding:32px}.about-page-block__quote{font-size:1.0625rem;line-height:1.7;color:var(--text);font-style:normal;margin:0 0 16px 0;font-weight:500}.about-page-block__quote-footer{display:flex;align-items:center;gap:8px}.about-page-block__quote-author{font-size:0.875rem;font-weight:600;color:var(--primary-text)}@media (max-width:767px){.about-page-block{padding-top:48px;padding-bottom:48px}.about-page-block__header{margin-bottom:32px}.about-page-block__header .rcf-title{font-size:16px;line-height:1.3;hyphens:auto}.about-page-block__card-title{font-size:14px;hyphens:auto}.about-page-block__card{padding:20px 16px}.about-page-block__quote-band{padding:20px 16px}.about-page-block__lead-text{font-size:1rem}.about-page-block__image{aspect-ratio:16/10}}
/* ===== PAGE: privacy ===== */
.vg-privacy-block { padding: 80px 0; background-color: var(--bg); color: var(--text); font-family: var(--font-family-base, 'Noto Sans SC', sans-serif); } .vg-privacy-block .vg-privacy-divider { width: 100%; height: 1px; background-color: var(--border); margin-top: 16px; margin-bottom: 24px; } .vg-privacy-block .rcf-eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-text); font-weight: 600; } .vg-privacy-block .rcf-title { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.25; } .vg-privacy-block .vg-subtitle { font-size: 1.25rem; font-weight: 600; color: var(--text); line-height: 1.3; } .vg-privacy-block .rcf-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: none; } .vg-privacy-block .vg-card-article { transition: none; } .vg-privacy-block .vg-text { font-size: 1rem; line-height: 1.7; color: var(--text); margin: 0; } .vg-privacy-block .rcf-badge { background-color: var(--surface-alt); color: var(--primary-text); font-size: 0.75rem; font-weight: 600; border-radius: 4px; padding: 4px 8px; } .vg-privacy-block .rcf-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--surface-alt); color: var(--primary-text); border-radius: 50%; font-size: 16px; } .vg-privacy-block .vg-aside-title { font-size: 1.125rem; font-weight: 600; color: var(--text); } .vg-privacy-block .vg-aside-text { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); } .vg-privacy-block .vg-spec-list strong { font-size: 0.9375rem; color: var(--text); } .vg-privacy-block .vg-quote-card { background-color: var(--surface-alt); border-left: 3px solid var(--primary); } .vg-privacy-block .rcf-btn { background-color: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); border-radius: 9999px; padding: 10px 24px; font-size: 0.9375rem; font-weight: 500; } .vg-privacy-block .rcf-btn:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); } .vg-privacy-block .rcf-btn-alt { background-color: transparent; color: var(--primary-text); border: 1px solid var(--border); border-radius: 9999px; padding: 10px 20px; font-size: 0.875rem; font-weight: 500; } .vg-privacy-block .rcf-btn-alt:hover { background-color: var(--surface-alt); border-color: var(--primary); color: var(--primary-hover); text-decoration: underline; } .vg-privacy-block .vg-bottom-nav { border-top: 1px solid var(--border); } @media (max-width: 767px) { .vg-privacy-block { padding: 48px 0; } .vg-privacy-block .rcf-title { font-size: 16px; hyphens: auto; } .vg-privacy-block .vg-subtitle { font-size: 14px; hyphens: auto; } .vg-privacy-block .vg-aside-title { font-size: 14px; } .vg-privacy-block .vg-text, .vg-privacy-block .vg-aside-text { font-size: 0.875rem; } .vg-privacy-block .rcf-card { padding: 16px; } }
/* ===== PAGE: terms ===== */
.terms-editorial-block {
padding-top: 80px;
padding-bottom: 80px;
}
.terms-editorial-block .terms-header-row .rcf-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--primary-text);
}
.terms-editorial-block .terms-header-row .rcf-title {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
color: var(--text);
}
.terms-editorial-block .terms-rule-line {
width: 100%;
height: 1px;
background-color: var(--border);
}
.terms-editorial-block .terms-meta-strip {
font-size: 0.875rem;
color: var(--text-muted);
}
.terms-editorial-block .terms-meta-item {
display: inline-flex;
align-items: center;
}
.terms-editorial-block .terms-nav-card {
position: sticky;
top: 90px;
border: 1px solid var(--border);
border-radius: 12px;
background-color: var(--surface);
}
.terms-editorial-block .terms-nav-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text);
}
.terms-editorial-block .terms-nav-link {
display: flex;
align-items: center;
padding: 8px 12px;
font-size: 0.875rem;
color: var(--text);
text-decoration: none;
border-radius: 6px;
border: 1px solid transparent;
}
.terms-editorial-block .terms-nav-link:hover,
.terms-editorial-block .terms-nav-link.active {
background-color: var(--surface-alt);
color: var(--primary-text);
border-color: var(--border);
}
.terms-editorial-block .terms-nav-divider {
width: 100%;
height: 1px;
background-color: var(--border);
}
.terms-editorial-block .terms-side-note {
background-color: var(--surface-alt);
border-radius: 8px;
}
.terms-editorial-block .terms-note-title {
font-size: 0.875rem;
color: var(--primary-text);
}
.terms-editorial-block .terms-note-text {
font-size: 0.8125rem;
line-height: 1.5;
color: var(--text-muted);
}
.terms-editorial-block .terms-inline-link {
color: var(--primary-text);
text-decoration: underline;
font-weight: 500;
}
.terms-editorial-block .terms-inline-link:hover {
color: var(--primary-hover);
}
.terms-editorial-block .terms-body-wrapper .rcf-card {
border: 1px solid var(--border);
border-radius: 12px;
background-color: var(--surface);
}
.terms-editorial-block .terms-section-index {
font-size: 0.875rem;
font-weight: 700;
color: var(--primary-text);
background-color: var(--surface-alt);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.terms-editorial-block .terms-section-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.terms-editorial-block .terms-section-divider {
width: 100%;
height: 1px;
background-color: var(--border);
}
.terms-editorial-block .terms-paragraph {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--text);
margin-bottom: 12px;
}
.terms-editorial-block .terms-list {
list-style: none;
padding-left: 0;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.terms-editorial-block .terms-list-item {
position: relative;
padding-left: 18px;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--text);
}
.terms-editorial-block .terms-list-item::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--primary);
}
.terms-editorial-block .terms-highlight {
color: var(--primary-text);
}
.terms-editorial-block .terms-spec-box {
background-color: var(--surface-alt);
border-radius: 8px;
border: 1px solid var(--border);
}
.terms-editorial-block .terms-spec-title {
font-weight: 600;
font-size: 0.875rem;
color: var(--text);
}
.terms-editorial-block .terms-spec-desc {
font-size: 0.8125rem;
line-height: 1.6;
color: var(--text-muted);
}
.terms-editorial-block .terms-quote-band {
background-color: var(--surface-alt);
border-left: 3px solid var(--primary);
border-radius: 0 8px 8px 0;
}
.terms-editorial-block .terms-quote-text {
font-size: 0.875rem;
line-height: 1.6;
color: var(--primary-text);
font-style: italic;
}
.terms-editorial-block .terms-footer-nav {
border: 1px solid var(--border);
border-radius: 12px;
background-color: var(--surface);
}
.terms-editorial-block .terms-footer-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text);
}
.terms-editorial-block .terms-footer-desc {
font-size: 0.875rem;
color: var(--text-muted);
}
@media (max-width: 767px) {
.terms-editorial-block {
padding-top: 48px;
padding-bottom: 48px;
}
.terms-editorial-block .terms-header-row .rcf-title {
font-size: 1.25rem;
}
.terms-editorial-block .terms-nav-card {
position: static;
}
.terms-editorial-block .terms-section-title {
font-size: 1rem;
}
.terms-editorial-block .terms-paragraph,
.terms-editorial-block .terms-list-item {
font-size: 0.875rem;
}
}
/* ===== PAGE: disclaimer ===== */
.vg-disclaimer-section{padding-top:80px;padding-bottom:80px;background-color:var(--bg);color:var(--text);overflow:hidden}.vg-disclaimer-section .vg-disclaimer-header{margin-bottom:32px}.vg-disclaimer-section .rcf-eyebrow{display:inline-block;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--primary-text);font-weight:700;margin-bottom:8px}.vg-disclaimer-section .rcf-title{font-size:2rem;font-weight:700;line-height:1.2;color:var(--text);margin-bottom:16px}.vg-disclaimer-section .vg-disclaimer-rule{width:100%;height:1px;background-color:var(--border)}.vg-disclaimer-section .vg-quote-band{display:flex;align-items:stretch;background-color:var(--surface-alt);border:1px solid var(--border);border-radius:12px;overflow:hidden}.vg-disclaimer-section .vg-quote-accent{width:6px;min-width:6px;background-color:var(--primary)}.vg-disclaimer-section .vg-quote-content{padding:28px 32px;flex:1}.vg-disclaimer-section .vg-quote-text{font-size:1.0625rem;line-height:1.7;color:var(--text);font-weight:500;margin-bottom:16px;overflow-wrap:anywhere}.vg-disclaimer-section .vg-quote-meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px}.vg-disclaimer-section .rcf-badge{background-color:var(--primary);color:var(--on-primary);font-size:0.75rem;padding:4px 10px;border-radius:4px;font-weight:600;display:inline-block}.vg-disclaimer-section .vg-quote-date{font-size:0.875rem;color:var(--text-muted)}.vg-disclaimer-section .vg-card{background-color:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;height:100%;display:flex;flex-direction:column;align-items:flex-start}.vg-disclaimer-section .vg-icon{width:40px;height:40px;border-radius:50%;background-color:var(--surface-alt);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:16px;flex-shrink:0}.vg-disclaimer-section .vg-card .rcf-badge{background-color:var(--surface-alt);color:var(--primary-text);font-size:0.75rem;padding:3px 8px;border-radius:4px;margin-bottom:12px;font-weight:600}.vg-disclaimer-section .vg-card-title{font-size:1.125rem;font-weight:700;line-height:1.3;color:var(--text);margin-bottom:10px;overflow-wrap:anywhere}.vg-disclaimer-section .vg-card-desc{font-size:0.875rem;line-height:1.6;color:var(--text-muted);margin-bottom:0;flex-grow:1;overflow-wrap:anywhere}.vg-disclaimer-section .vg-details-block{background-color:var(--surface);border:1px solid var(--border);border-radius:12px;padding:36px}.vg-disclaimer-section .vg-details-header{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:28px}.vg-disclaimer-section .vg-details-title{font-size:1.375rem;font-weight:700;line-height:1.3;color:var(--text);margin-bottom:6px;overflow-wrap:anywhere}.vg-disclaimer-section .vg-details-subtitle{font-size:0.9375rem;color:var(--text-muted);margin-bottom:0;overflow-wrap:anywhere}.vg-disclaimer-section .vg-article-body{display:flex;flex-direction:column;gap:24px}.vg-disclaimer-section .vg-term-item{padding-left:16px;border-left:3px solid var(--accent)}.vg-disclaimer-section .vg-term-heading{font-size:1.0625rem;font-weight:700;line-height:1.3;color:var(--text);margin-bottom:8px;overflow-wrap:anywhere}.vg-disclaimer-section .vg-term-text{font-size:0.9375rem;line-height:1.7;color:var(--text-muted);margin-bottom:0;overflow-wrap:anywhere}.vg-disclaimer-section .vg-reading-row{background-color:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 32px}.vg-disclaimer-section .vg-reading-meta{display:flex;flex-direction:column;gap:4px}.vg-disclaimer-section .vg-reading-tip{font-size:0.875rem;color:var(--text-muted);overflow-wrap:anywhere}.vg-disclaimer-section .vg-reading-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.vg-disclaimer-section .vg-btn-link{display:inline-flex;align-items:center;background-color:transparent;color:var(--primary-text);border:1px solid var(--border);border-radius:9999px;padding:8px 20px;font-size:0.875rem;font-weight:600;text-decoration:none}.vg-disclaimer-section .vg-btn-link:hover{background-color:var(--surface-alt);border-color:var(--primary);color:var(--primary-hover);text-decoration:none}.vg-disclaimer-section .vg-btn-main{display:inline-flex;align-items:center;background-color:var(--primary);color:var(--on-primary);border:1px solid var(--primary);border-radius:9999px;padding:8px 20px;font-size:0.875rem;font-weight:600;text-decoration:none}.vg-disclaimer-section .vg-btn-main:hover{background-color:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary);text-decoration:none}@media(max-width:767px){.vg-disclaimer-section{padding-top:48px;padding-bottom:48px}.vg-disclaimer-section .rcf-title{font-size:16px;hyphens:auto}.vg-disclaimer-section .vg-details-title{font-size:15px;hyphens:auto}.vg-disclaimer-section .vg-card-title{font-size:14px;hyphens:auto}.vg-disclaimer-section .vg-term-heading{font-size:14px;hyphens:auto}.vg-disclaimer-section .vg-quote-content{padding:20px 16px}.vg-disclaimer-section .vg-quote-text{font-size:0.9375rem}.vg-disclaimer-section .vg-details-block{padding:20px 16px}.vg-disclaimer-section .vg-reading-row{padding:20px 16px}.vg-disclaimer-section .vg-reading-actions{width:100%;flex-direction:column;align-items:stretch}.vg-disclaimer-section .vg-btn-link,.vg-disclaimer-section .vg-btn-main{justify-content:center;width:100%}}
.hardware-comment {
background-color: #FFFFFF;
border: 1px solid #E4E0D8;
border-radius: 12px;
color: #1F1B14;
}
.hardware-comment .comment-avatar {
width: 48px;
height: 48px;
object-fit: cover;
border: 1px solid #E4E0D8;
}
.hardware-comment .comment-author {
color: #1F1B14;
font-size: 0.9375rem;
}
.hardware-comment .comment-badge {
background-color: #F6ECED;
color: #532026;
font-size: 0.75rem;
font-weight: 500;
border-radius: 4px;
padding: 3px 8px;
}
.hardware-comment .comment-time {
color: #726A5A;
font-size: 0.8125rem;
}
.hardware-comment .comment-device {
color: #726A5A;
font-size: 0.75rem;
}
.hardware-comment .comment-content {
color: #1F1B14;
font-size: 0.9375rem;
line-height: 1.6;
}
.hardware-comment .comment-action-btn {
background-color: transparent;
border: 1px solid #E4E0D8;
color: #532026;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 500;
padding: 4px 12px;
}
.hardware-comment .comment-action-btn:hover {
background-color: #F6ECED;
border-color: #532026;
color: #39161A;
}
.hardware-comment .comment-action-btn:focus-visible {
outline: 2px solid #532026;
outline-offset: 1px;
}
.hardware-reply-comment {
background-color: #F6ECED;
border: 1px solid #E4E0D8;
border-left: 3px solid #532026;
border-radius: 8px;
color: #1F1B14;
}
.hardware-reply-comment .reply-avatar {
width: 40px;
height: 40px;
object-fit: cover;
border: 1px solid #E4E0D8;
}
.hardware-reply-comment .comment-author {
color: #1F1B14;
font-size: 0.875rem;
}
.hardware-reply-comment .comment-reply-indicator {
color: #726A5A;
font-size: 0.8125rem;
}
.hardware-reply-comment .comment-reply-indicator .target-name {
color: #532026;
font-weight: 500;
}
.hardware-reply-comment .comment-time {
color: #726A5A;
font-size: 0.8125rem;
}
.hardware-reply-comment .comment-content {
color: #1F1B14;
font-size: 0.875rem;
line-height: 1.55;
}
.hardware-reply-comment .comment-action-btn {
background-color: #FFFFFF;
border: 1px solid #E4E0D8;
color: #532026;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
padding: 3px 10px;
}
.hardware-reply-comment .comment-action-btn:hover {
background-color: #FFFFFF;
border-color: #532026;
color: #39161A;
}
.hardware-reply-comment .comment-action-btn:focus-visible {
outline: 2px solid #532026;
outline-offset: 1px;
}
/* ===== PAGE TEMPLATE: hardware-reviews, tech-news ===== */
:root {
--bg: #F9F7F1;
--surface: #FFFFFF;
--surface-alt: #F6ECED;
--text: #1F1B14;
--text-muted: #726A5A;
--border: #E4E0D8;
--primary: #532026;
--primary-hover: #39161A;
--on-primary: #FFFFFF;
--primary-text: #532026;
--accent: #CFC4AC;
--on-accent: #111111;
--accent-text: #7C6B48;
--dark-band: #2A1013;
--on-dark: #FFFFFF;
--on-dark-muted: #C3BFB6;
}
body.vg-body {
background-color: var(--bg);
color: var(--text);
font-family: 'Noto Sans SC', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.rcf-section {
background-color: var(--bg);
}
.rcf-section-alt {
background-color: var(--surface-alt);
}
.rcf-section-dark {
background-color: var(--dark-band);
}
.rcf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--on-primary) !important;
border: 1px solid var(--primary);
border-radius: 9999px;
padding: 10px 24px;
font-weight: 500;
text-decoration: none;
min-height: 42px;
}
.rcf-btn:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary) !important;
}
.rcf-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--primary-text) !important;
border: 1px solid var(--border);
border-radius: 9999px;
padding: 10px 24px;
font-weight: 500;
text-decoration: none;
min-height: 42px;
}
.rcf-btn-alt:hover {
background-color: var(--surface-alt);
border-color: var(--primary);
color: var(--primary-hover) !important;
}
.rcf-card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
}
.rcf-eyebrow {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary-text);
}
.rcf-badge {
background-color: var(--surface-alt);
color: var(--primary-text);
border-radius: 4px;
padding: 4px 8px;
font-size: 0.75rem;
font-weight: 500;
}
.rcf-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--surface-alt);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.vg-header-topbar {
background-color: var(--surface-alt);
border-bottom: 1px solid var(--border);
padding: 6px 0;
font-size: 0.75rem;
color: var(--text-muted);
}
.vg-header.sticky-top {
background-color: var(--surface);
box-shadow: 0 2px 10px rgba(31, 27, 20, 0.05);
z-index: 1020;
}
.vg-navbar {
padding: 12px 0;
background-color: var(--surface);
}
.vg-brand-title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary-text);
}
.vg-brand-dot {
width: 8px;
height: 8px;
background-color: var(--primary);
border-radius: 50%;
display: inline-block;
}
.vg-navbar .nav-link {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text);
padding: 8px 12px;
}
.vg-navbar .nav-link:hover,
.vg-navbar .nav-link.active {
color: var(--primary-text);
text-decoration: underline;
}
.vg-detail-intro {
padding: 40px 0 50px;
}
.vg-intro-media-frame {
width: 100%;
aspect-ratio: 16 / 10;
min-height: 260px;
border-radius: 0;
overflow: hidden;
}
.vg-sharp-frame {
border: 1px solid var(--border);
border-radius: 0;
object-fit: cover;
}
.vg-article-h1 {
font-size: 2.25rem;
font-weight: 800;
line-height: 1.25;
color: var(--text);
overflow-wrap: anywhere;
}
.vg-intro-lead {
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.7;
overflow-wrap: anywhere;
}
.vg-meta-row {
font-size: 0.8125rem;
color: var(--text-muted);
}
.vg-heading-wrap {
position: relative;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.vg-accent-h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.vg-accent-h2::after {
content: '';
position: absolute;
bottom: -13px;
left: 0;
width: 48px;
height: 2px;
background-color: var(--primary);
}
.vg-striped-specs {
background-color: var(--surface);
border: 1px solid var(--border);
}
.vg-striped-specs th {
background-color: var(--surface-alt);
color: var(--text);
font-weight: 600;
padding: 12px 16px;
}
.vg-striped-specs td {
padding: 12px 16px;
color: var(--text);
}
.vg-editorial-content .vg-article-p {
font-size: 1rem;
line-height: 1.8;
color: var(--text);
margin-bottom: 1.25rem;
overflow-wrap: anywhere;
}
.vg-editorial-content .vg-sub-h3 {
font-size: 1.35rem;
font-weight: 700;
color: var(--text);
border-left: 3px solid var(--primary);
padding-left: 12px;
}
.vg-quote-band {
background-color: var(--surface-alt);
border-left: 4px solid var(--primary);
padding: 24px 28px;
}
.vg-quote-text {
font-size: 1.125rem;
font-weight: 500;
color: var(--text);
line-height: 1.7;
}
.vg-quote-author {
font-size: 0.875rem;
color: var(--primary-text);
font-weight: 600;
}
.vg-author-box {
background-color: var(--surface);
}
.vg-cta-inner {
max-width: 720px;
}
.hardware-comment {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.hardware-reply-comment {
background-color: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 8px;
}
.comment-badge {
background-color: var(--surface-alt);
color: var(--primary-text);
font-size: 0.75rem;
}
.comment-time {
font-size: 0.75rem;
color: var(--text-muted);
}
.comment-device {
font-size: 0.75rem;
color: var(--text-muted);
}
.comment-action-btn {
background-color: var(--surface-alt);
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 9999px;
padding: 4px 12px;
}
.comment-action-btn.active {
background-color: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.vg-comment-notice {
background-color: var(--surface);
border-color: var(--border) !important;
}
.vg-footer {
background-color: var(--surface);
border-top: 1px solid var(--border);
padding: 48px 0 36px;
color: var(--text);
}
.vg-footer .vg-footer-inner {
max-width: 860px;
margin: 0 auto;
}
.vg-footer .vg-footer-brand {
margin-bottom: 28px;
}
.vg-footer .vg-footer-logo-text {
display: inline-block;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--primary-text);
line-height: 1.2;
margin-bottom: 12px;
}
.vg-footer .vg-footer-summary {
font-size: 0.875rem;
line-height: 1.7;
color: var(--text-muted);
max-width: 680px;
margin: 0 auto;
overflow-wrap: anywhere;
}
.vg-footer .vg-footer-nav {
margin-bottom: 24px;
}
.vg-footer .vg-footer-nav-list {
gap: 12px 24px;
}
.vg-footer .vg-footer-nav-item {
min-height: 40px;
display: inline-flex;
align-items: center;
}
.vg-footer .vg-footer-nav-link {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text);
text-decoration: none;
padding: 8px 6px;
}
.vg-footer .vg-footer-nav-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.vg-footer .vg-footer-divider {
width: 100%;
max-width: 480px;
height: 1px;
background-color: var(--border);
margin: 0 auto 20px;
}
.vg-footer .vg-footer-legal {
margin-bottom: 24px;
}
.vg-footer .vg-footer-legal-list {
gap: 8px 18px;
}
.vg-footer .vg-footer-legal-item {
min-height: 36px;
display: inline-flex;
align-items: center;
}
.vg-footer .vg-footer-legal-link {
font-size: 0.8125rem;
color: var(--text-muted);
text-decoration: none;
padding: 6px 4px;
}
.vg-footer .vg-footer-legal-link:hover {
color: var(--primary-text);
text-decoration: underline;
}
.vg-footer .vg-footer-bottom {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.vg-footer .vg-footer-copy {
font-size: 0.8125rem;
font-weight: 500;
color: var(--text);
}
.vg-footer .vg-footer-notice {
font-size: 0.75rem;
line-height: 1.6;
color: var(--text-muted);
max-width: 620px;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.vg-article-h1 {
font-size: 1.125rem;
}
.vg-accent-h2 {
font-size: 1rem;
}
.vg-editorial-content .vg-sub-h3 {
font-size: 0.875rem;
}
.vg-striped-specs thead {
display: none;
}
.vg-striped-specs,
.vg-striped-specs tbody,
.vg-striped-specs tr,
.vg-striped-specs td {
display: block;
width: 100%;
}
.vg-striped-specs tr {
margin-bottom: 12px;
border-bottom: 2px solid var(--border);
}
.vg-striped-specs td {
padding: 8px 12px;
}
.hardware-reply-comment.ms-4 {
margin-left: 12px !important;
}
.vg-footer {
padding: 36px 0 28px;
}
.vg-footer .vg-footer-nav-list,
.vg-footer .vg-footer-legal-list {
flex-direction: column;
gap: 8px;
}
}
/* mobile-text-guard */
@media (max-width: 767px) {
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
overflow-wrap: anywhere;
}
a, button, .btn {
overflow-wrap: anywhere;
white-space: normal;
}
img, video, iframe {
max-width: 100%;
}
}
/* hero alt button on dark section: white background */
.hero-editorial-section .rcf-btn-alt {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: var(--primary);
}
.hero-editorial-section .rcf-btn-alt:hover {
background-color: var(--surface-alt);
border-color: var(--surface-alt);
color: var(--primary-hover);
}
/* calendar filter buttons: keep on a single line */
.calendar-section .calendar-nav-wrap {
flex-wrap: nowrap;
gap: 8px;
}
.calendar-section .calendar-filter-btn {
white-space: nowrap;
padding: 7px 14px;
font-size: 0.8rem;
}
@media (max-width: 991px) {
.calendar-section .calendar-nav-wrap { gap: 6px; }
.calendar-section .calendar-filter-btn { padding: 6px 10px; font-size: 0.75rem; }
}
@media (max-width: 767px) {
.calendar-section .calendar-nav-wrap { overflow-x: auto; width: 100%; padding-bottom: 4px; }
.calendar-section .calendar-filter-btn { padding: 5px 10px; font-size: 0.72rem; gap: 4px; }
}
/* legal/policy pages: reduce excess empty space before footer */
main.rcf-section { padding-bottom: 0; }
main.rcf-section > .container { padding-bottom: 0 !important; }
.vg-privacy-block { padding-bottom: 36px; }
.terms-editorial-block { padding-bottom: 36px; }
.vg-disclaimer-section { padding-bottom: 36px; }
.about-page-block { padding-bottom: 36px; }