.yagiro-home { --home-paper: var(--yg-paper, #f4f2ea); --home-surface: var(--yg-surface, #faf9f4); --home-ink: var(--yg-ink, #151817); --home-muted: var(--yg-muted, #5e635f); --home-line: var(--yg-rule, #c9c9c0); --home-edge: clamp(22px, 5.5vw, 88px); --home-section: clamp(72px, 9vw, 144px); color: var(--home-ink); background: var(--home-paper); } .yagiro-home :where(a, button) { touch-action: manipulation; } .yagiro-home :where(a, button):focus-visible { outline: 2px solid var(--yg-focus, #355e53); outline-offset: 5px; } .yagiro-home :where(p, h1, h2, h3) { margin-block-start: 0; overflow-wrap: normal; word-break: normal; } .yagiro-home :where(article, article > div) { min-inline-size: 0; } .yagiro-hero { display: grid; grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: clamp(48px, 7vw, 120px); align-items: center; min-block-size: min(760px, calc(100svh - 88px)); max-inline-size: 1640px; margin-inline: auto; padding: clamp(72px, 9vh, 128px) var(--home-edge) clamp(82px, 10vh, 144px); } .yagiro-hero-copy { min-inline-size: 0; } .yagiro-hero h1 { margin: 0 0 34px; font-size: inherit; font-weight: 400; line-height: 1; } .yagiro-purpose { display: block; max-inline-size: 11ch; font-size: 6.75rem; font-weight: 430; letter-spacing: clamp(-.075em, -0.055em, -.04em); line-height: max(.96, var(--yg-heading-leading, .96)); text-wrap: balance; } .yagiro-purpose-phrase, .yagiro-ja-copy-phrase { max-inline-size: 100%; white-space: normal; } .yagiro-ja-copy-phrase { display: inline-block; } html:lang(ja) .yagiro-home .yagiro-purpose-phrase { line-height: inherit; } .yagiro-product-name { unicode-bidi: isolate; overflow-wrap: break-word; word-break: normal; } .yagiro-positioning { max-inline-size: 45ch; margin: 0 0 34px; color: var(--home-muted); font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.78; text-wrap: pretty; } .yagiro-action { display: inline-flex; max-inline-size: 100%; min-block-size: 48px; align-items: center; justify-content: space-between; gap: 36px; padding: 13px 20px; overflow-wrap: break-word; border: 1px solid var(--home-ink); background: var(--home-ink); color: var(--home-paper) !important; font-size: .8125rem; font-weight: 550; line-height: 1.5; text-decoration: none; transition: background var(--yg-motion, 140ms ease-out), transform var(--yg-motion, 140ms ease-out); } .yagiro-action:hover { background: #343936; transform: translateY(-1px); } .yagiro-home .yagiro-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; } .yagiro-home .yagiro-hero-actions .yagiro-text-link { min-block-size: 48px; } .yagiro-text-link, .yagiro-foundation-link { display: inline-flex; max-inline-size: 100%; min-block-size: 44px; align-items: center; justify-content: space-between; gap: 28px; overflow-wrap: break-word; border-block-end: 1px solid currentColor; font-size: .8125rem; font-weight: 550; line-height: 1.6; text-decoration: none; } .yagiro-text-link:hover { color: #3f6657; } .yagiro-home .yagiro-navigation-arrow { display: block; flex: 0 0 auto; inline-size: 1em; block-size: 1em; } .yagiro-home :is(.yagiro-action, .yagiro-text-link, .yagiro-tool-open, .yagiro-foundation-link) > .yagiro-link-label { min-inline-size: 0; overflow-wrap: anywhere; line-height: inherit; } .yagiro-home .yagiro-hero-product-title > strong { min-inline-size: 0; overflow-wrap: anywhere; } .yagiro-specimen { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-block-size: 420px; overflow: hidden; background: radial-gradient(circle at 74% 22%, rgba(175, 203, 184, .14), transparent 31%), linear-gradient(145deg, #171a18 0%, #0f1211 100%); color: #f4f2ea; direction: ltr; } .yagiro-specimen-compact { min-block-size: 360px; } .yagiro-specimen-toolbar { display: flex; gap: 7px; padding: 20px 22px 16px; border-block-end: 1px solid rgba(244, 242, 234, .12); } .yagiro-specimen-toolbar span { inline-size: 7px; block-size: 7px; border: 1px solid rgba(244, 242, 234, .52); border-radius: 50%; } .yagiro-specimen-sheet { inline-size: calc(100% - clamp(56px, 9vw, 112px)); margin: clamp(30px, 5vw, 64px) auto 26px; align-self: center; } .yagiro-specimen-head, .yagiro-specimen-row { display: grid; grid-template-columns: 1.05fr 1.6fr .9fr 34px; gap: clamp(12px, 2vw, 28px); align-items: center; min-block-size: 42px; border-block-end: 1px solid rgba(244, 242, 234, .09); } .yagiro-specimen-head { min-block-size: 28px; border-block-end-color: rgba(244, 242, 234, .18); } .yagiro-specimen-head span, .yagiro-specimen-row span:not(.yagiro-specimen-state) { block-size: 5px; border-radius: 999px; background: rgba(244, 242, 234, .22); } .yagiro-specimen-head span { background: rgba(244, 242, 234, .34); } .yagiro-specimen-row span:nth-child(1) { inline-size: 72%; } .yagiro-specimen-row span:nth-child(2) { inline-size: 90%; } .yagiro-specimen-row span:nth-child(3) { inline-size: 58%; } .yagiro-specimen-row.is-exception { position: relative; } .yagiro-specimen-row.is-exception::before { position: absolute; inset: 7px -12px; border: 1px solid rgba(189, 211, 194, .26); background: rgba(111, 145, 121, .08); content: ''; pointer-events: none; } .yagiro-specimen-row.is-exception span:nth-child(2) { background: rgba(210, 222, 199, .64); } .yagiro-specimen-state { z-index: 1; inline-size: 9px; block-size: 9px; justify-self: end; border: 1px solid rgba(244, 242, 234, .48); border-radius: 50%; } .yagiro-specimen-row.is-exception .yagiro-specimen-state { border-color: #d0decf; background: #d0decf; box-shadow: 0 0 0 5px rgba(208, 222, 207, .08); } .yagiro-specimen-rail { display: flex; gap: 8px; justify-content: center; padding: 0 22px 22px; } .yagiro-specimen-rail span { inline-size: 26px; block-size: 2px; background: rgba(244, 242, 234, .16); } .yagiro-specimen-rail .is-active { background: rgba(244, 242, 234, .7); } .yagiro-hero-product { display: block; min-inline-size: 0; color: inherit; text-decoration: none; } .yagiro-hero-product-meta, .yagiro-hero-product-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .yagiro-hero-product-meta { margin-block-end: 12px; color: var(--home-muted); font-size: .6875rem; line-height: 1.6; } .yagiro-hero-product-title { padding-block-start: 16px; font-size: .875rem; } .yagiro-hero-product-title strong { font-weight: 560; } .yagiro-hero-product:hover .yagiro-hero-product-title strong { text-decoration: underline; text-underline-offset: .2em; } .yagiro-products, .yagiro-knowledge { max-inline-size: 1640px; margin-inline: auto; padding: var(--home-section) var(--home-edge); border-block-start: 1px solid var(--home-line); } .yagiro-products { scroll-margin-block-start: 24px; } .yagiro-section-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .72fr); gap: clamp(42px, 8vw, 140px); align-items: end; margin-block-end: clamp(48px, 6vw, 88px); } .yagiro-section-heading > div { min-inline-size: 0; } .yagiro-section-heading h2 { max-inline-size: 18ch; margin: 0; font-size: clamp(2.6rem, 4.4vw, 4.8rem); font-weight: 430; letter-spacing: var(--yg-heading-tracking, -.04em); line-height: max(1.05, var(--yg-heading-leading, 1.05)); } .yagiro-section-heading > p { max-inline-size: 48ch; margin: 0; color: var(--home-muted); font-size: .9375rem; line-height: 1.85; } .yagiro-eyebrow { margin: 0 0 20px; color: var(--home-muted); font-size: .6875rem; font-weight: 550; letter-spacing: var(--yg-label-tracking, .035em); line-height: 1.6; } .yagiro-featured-product { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr); gap: clamp(40px, 7vw, 112px); align-items: center; padding-block-end: clamp(72px, 8vw, 128px); } .yagiro-featured-visual { display: block; min-inline-size: 0; color: inherit; text-decoration: none; } .yagiro-featured-visual .yagiro-specimen { min-block-size: clamp(420px, 47vw, 640px); } .yagiro-featured-copy { max-inline-size: 510px; } .yagiro-record-kind { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-block-end: 18px; color: var(--home-muted); font-size: .6875rem; line-height: 1.7; } .yagiro-record-kind > span { color: #49574d; } .yagiro-featured-copy h3, .yagiro-product h3 { margin: 0; font-size: clamp(2.1rem, 3.5vw, 3.9rem); font-weight: 430; letter-spacing: var(--yg-heading-tracking, -.035em); line-height: max(1.08, var(--yg-heading-leading, 1.08)); } .yagiro-featured-copy h3 a, .yagiro-product h3 a { text-decoration: none; } .yagiro-featured-copy h3 a:hover, .yagiro-product h3 a:hover { text-decoration: underline; text-underline-offset: .16em; } .yagiro-featured-copy > p:not(.yagiro-record-kind), .yagiro-product > div > p:not(.yagiro-record-kind) { margin: 24px 0 0; color: var(--home-muted); font-size: .9375rem; line-height: 1.85; } .yagiro-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-block-start: 28px; } .yagiro-product-list { border-block-start: 1px solid var(--home-line); } .yagiro-product:not(.yagiro-featured-product) { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(36px, 8vw, 128px); padding-block: 42px 50px; border-block-end: 1px solid var(--home-line); } .yagiro-product h3 { font-size: clamp(1.9rem, 3vw, 3rem); } .yagiro-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: clamp(52px, 6vw, 84px); border-block-start: 1px solid var(--home-line); border-block-end: 1px solid var(--home-line); } .yagiro-tool { display: flex; min-block-size: 330px; flex-direction: column; align-items: stretch; padding: 30px clamp(22px, 2.5vw, 38px) 28px; border-inline-start: 1px solid var(--home-line); color: inherit; text-decoration: none; transition: background var(--yg-motion, 140ms ease-out); } .yagiro-tool:first-child { border-inline-start: 0; } .yagiro-tool:hover { background: var(--home-surface); } .yagiro-tool-index { margin-block-end: 42px; color: var(--home-muted); font-family: var(--yg-mono); font-size: .6875rem; } .yagiro-tool .yagiro-record-kind { margin-block-end: 14px; } .yagiro-tool h3 { margin: 0 0 15px; font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 440; letter-spacing: var(--yg-heading-tracking, -.02em); line-height: max(1.22, var(--yg-heading-leading, 1.22)); } .yagiro-tool p { max-inline-size: 46ch; margin: 0 0 22px; color: var(--home-muted); font-size: .875rem; line-height: 1.8; } .yagiro-tool-open { display: flex; min-block-size: 44px; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: auto; font-size: .75rem; font-weight: 550; } .yagiro-tool:hover h3 { text-decoration: underline; text-underline-offset: .2em; } .yagiro-discovery { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 34px; padding-block-start: 34px; } .yagiro-knowledge { background: var(--home-surface); } .yagiro-knowledge .yagiro-section-heading { align-items: center; } .yagiro-knowledge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 1px solid var(--home-line); border-block-end: 1px solid var(--home-line); } .yagiro-knowledge-entry { position: relative; display: flex; min-block-size: 320px; flex-direction: column; padding: 28px clamp(22px, 2.5vw, 38px); border-inline-start: 1px solid var(--home-line); } .yagiro-knowledge-entry:first-child { border-inline-start: 0; } .yagiro-knowledge-index { margin-block-end: 52px; color: var(--home-muted); font-family: var(--yg-mono); font-size: .6875rem; } .yagiro-knowledge-entry h3 { margin: 0 0 14px; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 440; letter-spacing: var(--yg-heading-tracking, -.02em); line-height: max(1.28, var(--yg-heading-leading, 1.28)); } .yagiro-knowledge-entry h3 a { text-decoration: none; } .yagiro-knowledge-entry h3 a:hover { text-decoration: underline; text-underline-offset: .16em; } .yagiro-knowledge-entry > p { margin: 0 0 26px; color: var(--home-muted); font-size: .875rem; line-height: 1.85; } .yagiro-knowledge-arrow { display: grid; inline-size: 44px; block-size: 44px; place-items: center; margin-block-start: auto; border: 1px solid var(--home-line); text-decoration: none; } .yagiro-knowledge-arrow:hover { background: var(--home-paper); } .yagiro-foundations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(52px, 10vw, 180px); padding: clamp(82px, 10vw, 150px) var(--home-edge); border-block-start: 1px solid #383d3a; background: #111412; color: var(--home-paper); } .yagiro-foundations article { max-inline-size: 620px; } .yagiro-foundations .yagiro-eyebrow { color: #aeb5af; } .yagiro-foundations h2 { max-inline-size: 22ch; margin: 22px 0 24px; color: inherit; font-size: clamp(2.25rem, 3.9vw, 4rem); font-weight: 430; letter-spacing: var(--yg-heading-tracking, -.035em); line-height: max(1.08, var(--yg-heading-leading, 1.08)); } .yagiro-foundations article > p:not(.yagiro-eyebrow) { max-inline-size: 50ch; margin: 0 0 26px; color: #b9beb9; font-size: .9375rem; line-height: 1.85; } .yagiro-foundation-link { color: var(--home-paper); } .yagiro-foundation-link:hover { color: #d8dfd8; } html:is([data-script="Jpan"],[data-script="Kore"],[data-script="Hans"],[data-script="Hant"]) .yagiro-purpose { max-inline-size: 12em; font-size: 5.25rem; letter-spacing: -.025em; line-height: max(1.35, var(--yg-heading-leading, 1.35)); } html[data-script="Arab"] .yagiro-purpose, html[data-script="Deva"] .yagiro-purpose, html[data-script="Beng"] .yagiro-purpose, html[data-script="Thai"] .yagiro-purpose { max-inline-size: 13em; font-size: 4.75rem; letter-spacing: 0; line-height: var(--yg-heading-leading); } html:lang(ur) .yagiro-purpose { max-inline-size: 14em; font-size: 4.35rem; } @media (min-width: 861px) { html:lang(de) .yagiro-purpose { max-inline-size: 13ch; overflow-wrap: normal; word-break: normal; } } @media (min-width: 861px) { html:lang(de) .yagiro-purpose { font-size: clamp(3.75rem, 6.25vw, 6.75rem); } } html:is([data-script="Jpan"],[data-script="Kore"],[data-script="Hans"],[data-script="Hant"]) .yagiro-home :where(h2, h3) { letter-spacing: var(--yg-heading-tracking, -.02em); line-height: max(1.42, var(--yg-heading-leading, 1.42)); } html:is([data-script="Jpan"],[data-script="Kore"],[data-script="Hans"],[data-script="Hant"],[data-script="Arab"],[data-script="Deva"],[data-script="Beng"],[data-script="Thai"]) .yagiro-eyebrow { letter-spacing: 0; } @media (min-width: 1800px) { .yagiro-home { --home-edge: max(70px, calc((100vw - 1480px) / 2)); } .yagiro-hero, .yagiro-products, .yagiro-knowledge { max-inline-size: none; } } @media (max-width: 1180px) { .yagiro-hero { grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr); gap: 50px; } .yagiro-purpose { font-size: 5.25rem; } .yagiro-featured-product { gap: 48px; } .yagiro-tools, .yagiro-knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yagiro-tool:nth-child(odd), .yagiro-knowledge-entry:nth-child(odd) { border-inline-start: 0; } .yagiro-tool:nth-child(n+3), .yagiro-knowledge-entry:nth-child(n+3) { border-block-start: 1px solid var(--home-line); } } @media (max-width: 860px) { .yagiro-home { --home-section: 76px; } .yagiro-hero { grid-template-columns: 1fr; gap: 54px; min-block-size: auto; padding-block: 64px 82px; } .yagiro-hero-copy { max-inline-size: 760px; } .yagiro-purpose { max-inline-size: 13ch; font-size: 4.5rem; } .yagiro-hero-product { max-inline-size: 760px; } .yagiro-section-heading { grid-template-columns: 1fr; gap: 22px; align-items: start; } .yagiro-section-heading > p { max-inline-size: 60ch; } .yagiro-featured-product { grid-template-columns: 1fr; gap: 38px; } .yagiro-featured-copy { max-inline-size: 620px; } .yagiro-featured-visual .yagiro-specimen { min-block-size: 460px; } .yagiro-foundations { grid-template-columns: 1fr; gap: 68px; } } @media (max-width: 640px) { .yagiro-home { --home-edge: 22px; --home-section: 62px; } .yagiro-hero { gap: 42px; padding-block: 48px 62px; } .yagiro-hero h1 { margin-block-end: 24px; } .yagiro-purpose { max-inline-size: 16ch; font-size: 3.5rem; letter-spacing: -.045em; line-height: max(1.02, var(--yg-heading-leading, 1.02)); } html:is([data-script="Jpan"],[data-script="Kore"],[data-script="Hans"],[data-script="Hant"]) .yagiro-purpose, html[data-script="Arab"] .yagiro-purpose, html[data-script="Deva"] .yagiro-purpose, html[data-script="Beng"] .yagiro-purpose, html[data-script="Thai"] .yagiro-purpose, html:lang(ur) .yagiro-purpose { max-inline-size: 16em; font-size: 3.1rem; } .yagiro-positioning { margin-block-end: 26px; font-size: .9375rem; } .yagiro-specimen, .yagiro-specimen-compact, .yagiro-featured-visual .yagiro-specimen { min-block-size: 330px; } .yagiro-specimen-sheet { inline-size: calc(100% - 42px); margin-block: 26px 20px; } .yagiro-specimen-head, .yagiro-specimen-row { grid-template-columns: .9fr 1.3fr .75fr 24px; gap: 10px; min-block-size: 36px; } .yagiro-section-heading { margin-block-end: 38px; } .yagiro-section-heading h2 { font-size: clamp(2.25rem, 10vw, 3.6rem); } .yagiro-featured-product { padding-block-end: 64px; } .yagiro-featured-copy h3, .yagiro-product h3 { font-size: clamp(1.95rem, 9vw, 3rem); } .yagiro-product:not(.yagiro-featured-product) { grid-template-columns: 1fr; gap: 10px; padding-block: 32px 38px; } .yagiro-tools, .yagiro-knowledge-grid { grid-template-columns: minmax(0,1fr); } .yagiro-tool, .yagiro-tool:nth-child(odd), .yagiro-knowledge-entry, .yagiro-knowledge-entry:nth-child(odd) { min-block-size: 0; padding-inline: 0; border-inline-start: 0; } .yagiro-tool { padding-block: 28px 26px; } .yagiro-tool + .yagiro-tool { border-block-start: 1px solid var(--home-line); } .yagiro-tool-index { margin-block-end: 26px; } .yagiro-knowledge-entry { padding-block: 28px; } .yagiro-knowledge-entry + .yagiro-knowledge-entry { border-block-start: 1px solid var(--home-line); } .yagiro-knowledge-index { margin-block-end: 28px; } .yagiro-foundations { gap: 52px; padding-block: 66px 72px; } .yagiro-foundations h2 { font-size: clamp(2rem, 9vw, 3rem); } } @media (max-width: 360px) { .yagiro-home { --home-edge: 18px; } .yagiro-hero { padding-block-start: 38px; } html[data-script="Latn"] .yagiro-purpose { font-size: 2.8rem; overflow-wrap: break-word; word-break: normal; } html[data-script="Latn"] .yagiro-positioning { overflow-wrap: break-word; word-break: normal; } } @media (max-width: 640px) { .yagiro-hero { gap: 28px; padding-block: 42px 48px; } .yagiro-positioning { font-size: .9rem; line-height: 1.72; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: pretty; } html:lang(ja) .yagiro-purpose { font-size: clamp(2.75rem, 11.5vw, 3rem); line-height: 1.22; } html:lang(ja) .yagiro-purpose > wbr { display: none; } html:lang(ja) .yagiro-purpose-phrase { display: block; inline-size: max-content; max-inline-size: 100%; } .yagiro-hero-product { padding-block: 16px 14px; border-block: 1px solid var(--home-line); } .yagiro-hero-product .yagiro-specimen { display: none; } .yagiro-hero-product-meta { margin-block-end: 8px; } .yagiro-hero-product-title { padding-block-start: 0; } .yagiro-featured-product { gap: 30px; } .yagiro-featured-visual .yagiro-specimen { min-block-size: clamp(270px, 72vw, 300px); } .yagiro-section-heading { margin-block-end: 32px; } .yagiro-section-heading h2 { font-size: clamp(2rem, 8.5vw, 2.7rem); } .yagiro-featured-copy h3, .yagiro-product h3 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); } } @media (prefers-reduced-motion: reduce) { .yagiro-home *, .yagiro-home *::before, .yagiro-home *::after { transition: none !important; animation: none !important; } } @media (forced-colors: active) { .yagiro-action, .yagiro-knowledge-arrow { border: 1px solid ButtonText; } .yagiro-specimen { border: 1px solid CanvasText; background: Canvas; } } @media (max-width: 860px) { html[data-script="Latn"] .yagiro-purpose, html[data-script="Latn"] .yagiro-positioning, html[data-script="Beng"] .yagiro-purpose { overflow-wrap: break-word; word-break: normal; } } @media (max-width: 860px) { html[data-script="Arab"] .yagiro-home .yagiro-purpose { overflow-wrap: anywhere; } }