/* * GFP portal / docs 共通 CSS * * creo-ui-web 0.5.0 の tokens.css を前提。 で * mint-dark (Creo Design System default) を dark 固定として適用し、 * ここには layout + typography baseline のみ置く。 */ /* ── Reset (minimal) ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background-color: var(--color-surface-bg-base); color: var(--color-text-primary); font-family: var(--typography-family-sans); font-size: var(--typography-size-base); line-height: var(--typography-line-height-relaxed); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 var(--spacing-md) 0; font-weight: var(--typography-weight-semibold); line-height: var(--typography-line-height-tight); color: var(--color-text-primary); } h1 { font-size: var(--typography-size-3xl); } h2 { font-size: var(--typography-size-2xl); } h3 { font-size: var(--typography-size-xl); } h4 { font-size: var(--typography-size-lg); } p { margin: 0 0 var(--spacing-md) 0; color: var(--color-text-secondary); } a { color: var(--color-brand-primary); text-decoration: none; transition: color 120ms ease; } a:hover { color: var(--color-brand-primary-hover); } code, pre { font-family: var(--typography-family-mono); font-size: var(--typography-size-sm); } code { padding: 2px 6px; background-color: var(--color-surface-bg-subtle); border-radius: var(--radius-sm); color: var(--color-brand-primary); } pre { padding: var(--spacing-md); background-color: var(--color-surface-bg-subtle); border-radius: var(--radius-md); overflow-x: auto; } pre code { padding: 0; background: transparent; } /* ── Layout ── */ .container { max-width: 880px; margin: 0 auto; padding: var(--spacing-2xl) var(--spacing-lg); } .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); } .hero__logo { font-size: 56px; font-weight: var(--typography-weight-bold); letter-spacing: -0.04em; background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--spacing-md); } .hero__tagline { font-size: var(--typography-size-lg); color: var(--color-text-secondary); margin-bottom: var(--spacing-xl); max-width: 560px; } .pill { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); background-color: var(--color-brand-primary); color: var(--color-text-inverse); border-radius: var(--radius-full); font-size: var(--typography-size-sm); font-weight: var(--typography-weight-semibold); } .pill--subtle { background-color: var(--color-surface-bg-emphasis); color: var(--color-text-primary); border: 1px solid var(--color-surface-border); } .button { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-xl); background-color: var(--color-brand-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--typography-size-base); font-weight: var(--typography-weight-semibold); cursor: pointer; transition: background-color 120ms ease; text-decoration: none; } .button:hover { background-color: var(--color-brand-primary-hover); color: var(--color-text-inverse); } .footer { padding: var(--spacing-xl) var(--spacing-lg); text-align: center; color: var(--color-text-tertiary); font-size: var(--typography-size-xs); }