/* Variant overlays — A / B / C / D / E Applied to by the switcher. */ /* ── Variant A : Classic Stack ───────────────────────────────────────── */ /* Default look. The base CSS already matches A. Just an accent color cue. */ .variant-a .hero { background: var(--paper); } .variant-a .mission-band { background: var(--tan); } /* ── Variant B : Manifesto ───────────────────────────────────────────── */ .variant-b .hero { background: var(--paper); padding-top: 100px; padding-bottom: 110px; } .variant-b .hero__title { font-size: 112px; font-weight: 900; line-height: 0.98; letter-spacing: -0.03em; } @media (max-width: 1023px) { .variant-b .hero__title { font-size: 72px; } } @media (max-width: 767px) { .variant-b .hero__title { font-size: 44px; } .variant-b .hero { padding-top: 56px; padding-bottom: 64px; } } .variant-b .mission-band { background: var(--ink); color: var(--paper); } .variant-b .mission-band__label { opacity: 0.55; } .variant-b .mission-band__text { font-weight: 500; } .variant-b .biz-card { border-color: var(--ink); background: var(--paper); } .variant-b .section-head__en { font-weight: 900; letter-spacing: -0.01em; } .variant-b .site-header { border-bottom: 2px solid var(--ink); } /* Featured case full-bleed for B */ .variant-b .featured-case { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ink); } .variant-b .featured-case .ph { aspect-ratio: auto; min-height: 420px; border: none; border-right: 1px solid var(--ink); } .variant-b .featured-case__text { padding: 56px; display: flex; flex-direction: column; gap: 16px; justify-content: center; } .variant-b .featured-case__title { font-size: 32px; font-weight: 700; line-height: 1.35; } @media (max-width: 1023px) { .variant-b .featured-case { grid-template-columns: 1fr; } .variant-b .featured-case .ph { border-right: none; border-bottom: 1px solid var(--ink); min-height: 280px; } .variant-b .featured-case__text { padding: 32px 28px; } } /* ── Variant C : Sidebar ─────────────────────────────────────────────── */ /* When variant C is active, hide the top site-header and show sidebar layout */ .variant-c .site-header { display: none; } .variant-c .hamburger { display: none; } .variant-c .mobile-drawer { display: none !important; } .variant-c .with-sidebar { display: grid; } .variant-c .page { display: block; } /* In other variants, hide the sidebar wrapper structure */ body:not(.variant-c) .site-sidebar { display: none; } body:not(.variant-c) .with-sidebar { display: contents; } .variant-c .mission-band { background: transparent; padding: 24px 56px; display: flex; align-items: baseline; gap: 20px; } .variant-c .mission-band__label { margin-bottom: 0; flex-shrink: 0; } .variant-c .mission-band__text { font-size: 18px; } /* Variant C: horizontal works scroll on PC */ @media (min-width: 1024px) { .variant-c .works-grid { display: flex; overflow-x: auto; gap: 18px; padding-bottom: 16px; } .variant-c .works-grid .work-card { flex: 0 0 280px; } } /* Variant C: list-style biz on PC */ @media (min-width: 1024px) { .variant-c .biz-grid { grid-template-columns: 1fr; gap: 0; } .variant-c .biz-card { flex-direction: row; align-items: baseline; gap: 32px; border-left: none; border-right: none; border-top: none; min-height: 0; padding: 24px 0; } .variant-c .biz-card__title { flex: 0 0 240px; } .variant-c .biz-card__desc { margin-top: 0; } } @media (max-width: 1023px) { .variant-c .mission-band { flex-direction: column; align-items: flex-start; padding: 24px 28px; gap: 8px; } } /* ── Variant D : Magazine Grid ───────────────────────────────────────── */ .variant-d .hero { grid-template-columns: 7fr 5fr; } .variant-d .hero__title { font-family: var(--font-base); font-weight: 700; font-style: italic; letter-spacing: -0.015em; } .variant-d .mission-band { background: transparent; } .variant-d .mission-band__inner { border: 2px solid var(--ink); padding: 28px; font-style: italic; } /* Magazine asymmetric biz layout */ .variant-d .biz-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; } .variant-d .biz-card:nth-child(1) { grid-column: span 7; } .variant-d .biz-card:nth-child(2) { grid-column: span 5; } .variant-d .biz-card:nth-child(3) { grid-column: span 4; } .variant-d .biz-card:nth-child(4) { grid-column: span 4; } .variant-d .biz-card:nth-child(5) { grid-column: span 4; } .variant-d .biz-card:nth-child(6) { grid-column: span 12; background: var(--tan); } .variant-d .biz-card__title { font-style: italic; } @media (max-width: 1023px) { .variant-d .biz-grid { grid-template-columns: repeat(2, 1fr); } .variant-d .biz-card:nth-child(n) { grid-column: span 1; } } @media (max-width: 767px) { .variant-d .biz-grid { grid-template-columns: 1fr; } } /* ── Variant E : Domain Matrix ───────────────────────────────────────── */ .variant-e .hero { grid-template-columns: 1fr 1.4fr; align-items: center; } .variant-e .hero__title { font-weight: 700; } .variant-e .hero__matrix { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; border: 1px solid var(--ink); } .variant-e .hero__matrix > div { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 20px; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; background: var(--paper); } .variant-e .hero__matrix > div:nth-child(3n) { border-right: none; } .variant-e .hero__matrix > div:nth-child(n+4) { border-bottom: none; } .variant-e .hero__matrix > div.is-accent { background: var(--accent-soft); } .variant-e .hero__matrix .num { font-family: ui-monospace, monospace; font-size: 10px; opacity: 0.55; } .variant-e .hero__matrix .en { font-family: ui-monospace, monospace; font-size: 9px; opacity: 0.5; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; font-weight: 400; } @media (max-width: 1023px) { .variant-e .hero { grid-template-columns: 1fr; } .variant-e .hero__matrix > div { min-height: 100px; padding: 16px; } } .variant-e .mission-band { background: transparent; padding: 28px 56px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; } .variant-e .mission-band__label { margin-bottom: 0; } .variant-e .mission-band__text { font-size: 20px; } .variant-e .mission-band__vision { font-family: ui-monospace, monospace; font-size: 11px; opacity: 0.6; } @media (max-width: 1023px) { .variant-e .mission-band { grid-template-columns: 1fr; padding: 24px 28px; gap: 8px; } .variant-e .mission-band__vision { display: none; } }