/* GENERATED from finishing.css + mobile-readability.css + os-stage.css — run tools/build-common-css.mjs */
.home-page .desktop-pet-card, .home-page .x-account-card { width: 100%; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .home-page .desktop-pet-card img, .home-page .x-account-card img { width: 100%; max-width: none; height: auto; display: block; object-fit: contain; background: transparent; } .home-page .desktop-pet-card:hover, .home-page .x-account-card:hover { filter: brightness(1.05); transform: translateY(-1px); } .home-page .home-ad-stack { width: 100%; display: grid; gap: 7px; } .home-page .home-ad-stack .desktop-pet-card, .home-page .home-ad-stack .x-account-card { width: 100%; aspect-ratio: 2.55 / 1; position: relative; display: block; overflow: hidden; border: 1px solid #6e7b88; border-radius: 7px; box-sizing: border-box; background: #dce5ed; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.82), 0 2px 0 rgba(47, 58, 69, 0.28); } .home-page .home-ad-stack .desktop-pet-card img, .home-page .home-ad-stack .x-account-card img { width: 100%; height: 100%; display: block; object-fit: cover; } .home-page .home-ad-stack .desktop-pet-card img { object-position: center 51%; transform: scale(1.04); } .home-page .home-ad-stack .x-account-card img { object-position: center; } .home-page .home-ad-stack .desktop-pet-card span, .home-page .home-ad-stack .x-account-card span { right: 7px; bottom: 6px; } @media (max-width: 720px) { .home-page .home-ad-stack { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .home-page .home-ad-stack { grid-template-columns: 1fr; } } .fashion-page .fashion-channel-strip { border-color: #7d0011; border-bottom-color: #4c0008; background: linear-gradient(180deg, #ff4646 0%, #e31325 34%, #b50018 51%, #d50920 78%, #85000f 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.62), inset 0 -2px 0 rgba(69, 0, 8, 0.82), 0 3px 0 rgba(50, 55, 58, 0.34); } .fashion-page .fashion-channel-strip strong, .fashion-page .fashion-channel-strip span { border-left-color: rgba(91, 0, 12, 0.62); color: #ffffff; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; font-weight: 900; letter-spacing: 0.02em; text-shadow: 0 1px 0 #fff7b8, 0 2px 0 #97121f, 1px 2px 0 #660510; } .fashion-page .fashion-channel-strip strong { color: #ffffff; background: rgba(102, 0, 10, 0.32); } .about-page-shell .profile-deck { padding: 18px 20px; grid-template-columns: minmax(170px, 0.48fr) minmax(0, 1.52fr); gap: 28px; border: 3px solid #f0c5c8; border-radius: 0; background: #fff; box-shadow: none; } .about-page-shell .profile-ticket { align-self: start; display: block; border: 5px solid #f1cbcf; border-radius: 0; overflow: visible; background: #fff; box-shadow: inset 0 0 0 1px #a9b0b4; } .about-page-shell .profile-ticket-stub { display: none; } .about-page-shell .profile-ticket .profile-motion { min-height: 225px; border: 3px solid #fff; border-radius: 0; box-sizing: border-box; background: #dce3e5; box-shadow: none; } .about-page-shell .profile-ticket .profile-motion video { min-height: 219px; } .about-page-shell .profile-ticket .profile-motion > span { padding: 5px 7px; color: #fff; background: #a60000; } .about-page-shell .profile-summary { align-self: start; padding-top: 3px; } .about-page-shell .profile-label { color: #a40000; } .about-page-shell .profile-summary > h2 { margin-bottom: 16px; padding: 0 0 12px; border-bottom: 0; color: #a90000; font-family: Arial, "Yu Gothic", sans-serif; font-size: clamp(25px, 3vw, 37px); font-weight: 800; } .about-page-shell .profile-summary .profile-facts { margin-bottom: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; background: transparent; background-image: none; } .about-page-shell .profile-summary .profile-facts div { min-height: 42px; height: auto; padding: 6px 9px; display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; box-sizing: border-box; border: 1px solid #efcaca; background: #fff; } .about-page-shell .profile-summary .profile-facts div:nth-child(even) { background: #fbe7e7; } .about-page-shell .profile-summary .profile-facts dt, .about-page-shell .profile-summary .profile-facts dd { margin: 0; padding: 0; border: 0; color: #171717; font-family: Arial, "Yu Gothic", sans-serif; font-size: 12px; font-weight: 700; background: transparent; } .about-page-shell .about-switcher { margin-top: 0; padding-top: 10px; border-top: 1px solid #edc9c9; gap: 14px; } .about-page-shell .about-switcher button { padding: 0 4px 5px; border: 0; border-radius: 0; color: #a40000; background: transparent; box-shadow: none; } .about-page-shell .about-switcher button:hover, .about-page-shell .about-switcher button.is-active { color: #cf0000; background: #fff2f1; box-shadow: inset 0 -3px 0 #bd0000; transform: none; } .about-page-shell .about-switcher img { width: min(100%, 120px); aspect-ratio: 4 / 3; margin: 0 auto; border: 2px solid #f0c4c7; border-radius: 0; } .about-page-shell .about-switcher span { color: inherit; font-family: Arial, "Yu Gothic", sans-serif; font-size: 10px; letter-spacing: 0; } @media (max-width: 700px) { .about-page-shell .profile-deck { padding: 12px; grid-template-columns: 1fr; gap: 14px; } .about-page-shell .profile-ticket { width: min(230px, 82%); margin: 0 auto; } .about-page-shell .profile-summary > h2 { text-align: center; } .about-page-shell .profile-summary .profile-facts { grid-template-columns: 1fr; } } .article-page-shell .article-window, .article-page-shell .article-window-body { background: #f4c5b1; } .article-page-shell .article-body { width: min(100%, 1180px); max-width: 1180px; margin: 0 auto; padding: 0 0 38px; overflow: hidden; color: #151515; background: #fff; } .article-page-shell .article-intro { margin: 0; padding: clamp(16px, 2.4vw, 32px) clamp(24px, 4vw, 54px); border: 0; border-radius: 0; background: #f4c5b1; box-shadow: none; } .article-page-shell .article-opening-grid { display: grid; grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.62fr); gap: clamp(22px, 3.6vw, 52px); align-items: start; } .article-page-shell .article-opening-copy { padding-top: 5px; } .article-page-shell .article-opening-copy .ui-chip { margin-bottom: 16px; border: 0; color: #191919; background: transparent; box-shadow: none; } .article-page-shell .article-column-label { margin: 0 0 8px; font: 900 13px/1 "Arial Narrow", Arial, sans-serif; letter-spacing: 0.18em; } .article-page-shell .article-title-heading { position: static; width: auto; height: auto; margin: 0 0 22px; padding: 11px 28px 15px; display: inline-block; overflow: visible; clip: auto; clip-path: none; border: 0; border-radius: 48% 44% 51% 45% / 45% 54% 46% 55%; color: #f4c5b1; background: #080808; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(56px, 7.3vw, 106px); font-weight: 900; line-height: 0.9; letter-spacing: 0.01em; transform: rotate(-2deg); white-space: nowrap; } .article-page-shell .article-object-title { display: none; } .article-page-shell .article-display-title { margin: 0 0 13px; color: #111; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif; font-size: clamp(24px, 2.45vw, 38px); font-weight: 900; line-height: 1.35; letter-spacing: -0.04em; } .article-page-shell .article-opening-copy .article-subtitle { margin: 0 0 18px; color: #272321; font-size: 14px; font-weight: 600; line-height: 1.8; } .article-page-shell .article-publish-meta { color: #272321; } .article-page-shell .article-publish-meta > * { border-color: rgba(25, 25, 25, 0.52); color: inherit; background: rgba(255, 255, 255, 0.25); } .article-page-shell .article-hero-collage { min-width: 0; display: grid; grid-template-columns: 1.45fr 1fr 0.86fr; grid-template-rows: minmax(230px, 1.2fr) minmax(150px, 0.82fr); gap: 7px; position: relative; } .article-page-shell .article-hero-collage figure { min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #d8a795; } .article-page-shell .article-hero-collage img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; } .article-page-shell .article-collage-main { grid-column: 1 / 3; grid-row: 1; } .article-page-shell .article-collage-tall { grid-column: 3; grid-row: 1 / 3; } .article-page-shell .article-collage-tall img { object-position: center 36%; } .article-page-shell .article-collage-credit { position: absolute; right: 9px; bottom: 8px; margin: 0; padding: 5px 8px; color: #fff; background: rgba(0, 0, 0, 0.72); font: 800 9px/1 "Courier New", monospace; letter-spacing: 0.08em; } .article-page-shell .article-lede { margin: 34px 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; border-top: 1px solid rgba(62, 42, 35, 0.35); } .article-page-shell .article-lede p { color: #24201e; font-size: 15px; line-height: 1.95; } .article-page-shell .article-body > p, .article-page-shell .article-body > h2, .article-page-shell .article-body > h3, .article-page-shell .article-body > blockquote, .article-page-shell .article-body > .toc, .article-page-shell .article-body > .article-figure, .article-page-shell .article-body > .image-comparison, .article-page-shell .article-body > .article-ending, .article-page-shell .article-body > .article-back-top-wrap { margin-left: clamp(26px, 5vw, 66px); margin-right: clamp(26px, 5vw, 66px); } .article-page-shell .article-body > p { width: auto; color: #222; font-size: 16px; line-height: 2; } .article-page-shell .article-body > h2 { padding: 15px 0 9px; border: 0; border-bottom: 1px solid #cfc8c3; color: #111; background: transparent; box-shadow: none; font-size: clamp(23px, 2.5vw, 34px); } .article-page-shell .article-body > h3 { color: #171717; } .article-page-shell .toc { border: 1px solid #d7aaa0; background: #fbe1d7; box-shadow: none; } .article-page-shell .toc-title { color: #171717; background: #efbbaa; } .article-page-shell .toc li, .article-page-shell .toc li::before { border-color: #dfb5aa; } .article-page-shell .toc li::before { color: #6d3a35; background: #f3d2c9; } .article-page-shell .toc a { color: #342b28; } .article-page-shell .toc a:hover { background: #fff2ed; } .article-page-shell .article-figure, .article-page-shell .comparison-item { border: 0; background: transparent; box-shadow: none; } .article-page-shell .article-figure img, .article-page-shell .comparison-item img { border: 0; border-radius: 14px; background: #f3ece8; } .article-page-shell .article-figure figcaption, .article-page-shell .comparison-year, .article-page-shell .comparison-caption, .article-page-shell .image-source { color: #5f5550; } .article-page-shell .comparison-caption { border: 0; background: #f8e6df; } .article-page-shell blockquote, .article-page-shell .article-ending { border-color: #d89aab; background: #fff0f4; box-shadow: none; } .article-page-shell .article-back-top-wrap { border-top-color: #d8ccc6; } @media (max-width: 820px) { .article-page-shell .article-opening-grid { grid-template-columns: 1fr; } .article-page-shell .article-title-heading { font-size: clamp(52px, 15vw, 92px); } .article-page-shell .article-hero-collage { grid-template-rows: minmax(210px, 1.15fr) minmax(130px, 0.75fr); } .article-page-shell .article-lede { grid-template-columns: 1fr; } } @media (max-width: 560px) { .article-page-shell .article-intro { padding: 22px 18px 28px; } .article-page-shell .article-title-heading { max-width: 100%; padding-inline: 16px; font-size: clamp(43px, 14vw, 70px); } .article-page-shell .article-hero-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 130px 130px; } .article-page-shell .article-collage-main { grid-column: 1 / -1; } .article-page-shell .article-collage-tall { grid-column: 2; grid-row: 2 / 4; } .article-page-shell .article-body > p, .article-page-shell .article-body > h2, .article-page-shell .article-body > h3, .article-page-shell .article-body > blockquote, .article-page-shell .article-body > .toc, .article-page-shell .article-body > .article-figure, .article-page-shell .article-body > .image-comparison, .article-page-shell .article-body > .article-ending, .article-page-shell .article-body > .article-back-top-wrap { margin-left: 18px; margin-right: 18px; } } .article-page-shell .article-window-body { padding: 13px; background: #f3bfa8; } .article-page-shell .article-body { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.96); border-radius: 23px 23px 17px 17px; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.14), 0 0 0 8px rgba(255, 255, 255, 0.74); } .article-page-shell .article-intro { padding: clamp(30px, 4.1vw, 56px) clamp(26px, 4.5vw, 60px) 38px; background: #f4c4b0; } .article-page-shell .article-opening-grid { grid-template-columns: minmax(290px, 0.78fr) minmax(0, 1.66fr); gap: clamp(26px, 4vw, 58px); align-items: start; } .article-page-shell .article-opening-copy .ui-chip { display: none; } .article-page-shell .article-column-label { margin-bottom: 15px; padding-left: 7px; color: #111; font-size: 14px; letter-spacing: 0.22em; } .article-page-shell .article-title-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .article-page-shell .article-logo-frame { width: min(100%, 390px); margin: 0 0 23px; padding: 18px 22px 16px; position: relative; display: grid; place-items: center; border: 8px solid #ed782f; border-radius: 49% 43% 51% 45% / 45% 55% 46% 54%; box-sizing: border-box; background: #090909; box-shadow: 0 0 0 2px #111, 5px 7px 0 rgba(92, 42, 25, 0.18); transform: rotate(-2deg); } .article-page-shell .article-logo-frame::before { content: ""; position: absolute; inset: -15px -11px -12px -14px; z-index: -1; border: 3px solid #f39b54; border-radius: 47% 51% 44% 53% / 52% 43% 56% 46%; transform: rotate(3deg); } .article-page-shell .article-logo-frame .article-object-title { width: 100%; height: auto; margin: 0; display: block; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.38)); } .article-page-shell .article-display-title { margin-bottom: 16px; color: #111; font-size: clamp(26px, 2.65vw, 40px); line-height: 1.38; } .article-page-shell .article-opening-copy .article-subtitle { margin-bottom: 20px; color: #25201e; font-size: 14px; line-height: 1.85; } .article-page-shell .article-visual-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 205px; gap: 10px; align-items: stretch; } .article-page-shell .article-hero-single { min-width: 0; margin: 0; position: relative; overflow: hidden; background: #d89b80; } .article-page-shell .article-hero-single img { width: 100%; height: 100%; min-height: 370px; display: block; object-fit: cover; object-position: center; } .article-page-shell .article-hero-single figcaption { position: absolute; left: 10px; bottom: 9px; padding: 5px 8px; color: #fff; background: rgba(0, 0, 0, 0.72); font: 800 9px/1 "Courier New", monospace; letter-spacing: 0.05em; } .article-page-shell .article-tags-panel { min-width: 0; padding: 20px 17px 15px; display: flex; flex-direction: column; border-radius: 14px 14px 0 0; color: #211b18; background: rgba(255, 242, 235, 0.78); } .article-page-shell .article-tags-title { margin: 0 0 17px; font-size: 13px; font-weight: 900; } .article-page-shell .article-tags-list { display: flex; flex-wrap: wrap; gap: 8px; } .article-page-shell .article-tags-list span { padding: 7px 10px; border: 1px solid rgba(62, 42, 35, 0.42); border-radius: 18px; font-size: 10px; font-weight: 700; white-space: nowrap; } .article-page-shell .article-share-line { margin-top: auto; padding-top: 20px; display: grid; gap: 11px; border-top: 1px solid rgba(62, 42, 35, 0.42); font-size: 10px; } .article-page-shell .article-share-line b { font-size: 17px; letter-spacing: 0.16em; } .article-page-shell .article-lede { margin-top: 30px; } .article-page-shell .article-newsletter { margin: 42px clamp(26px, 5vw, 66px) 10px; padding: 10px 13px; display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(330px, 1.2fr); gap: 14px; align-items: center; border-top: 1px solid #b8afa9; border-bottom: 1px solid #b8afa9; background: #fff9f6; } .article-page-shell .article-newsletter label { display: flex; align-items: center; gap: 10px; color: #171717; font-size: 14px; font-weight: 900; } .article-page-shell .article-newsletter label span { font-size: 21px; } .article-page-shell .article-newsletter-controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .article-page-shell .article-newsletter input { min-width: 0; height: 36px; padding: 0 13px; border: 1px solid #cbbdb7; border-radius: 5px; color: #171717; background: #fff; font: 12px/1 "Yu Gothic", Arial, sans-serif; } .article-page-shell .article-newsletter button { min-width: 94px; height: 36px; padding: 0 17px; border: 1px solid #111; border-radius: 18px; color: #fff; background: #111; font-size: 11px; font-weight: 900; } .article-page-shell .article-newsletter button:hover { color: #111; background: #f1a47f; } @media (max-width: 900px) { .article-page-shell .article-opening-grid { grid-template-columns: 1fr; } .article-page-shell .article-logo-frame { width: min(430px, 88%); } .article-page-shell .article-newsletter { grid-template-columns: 1fr; } } @media (max-width: 620px) { .article-page-shell .article-window-body { padding: 8px; } .article-page-shell .article-body { border-radius: 15px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22); } .article-page-shell .article-intro { padding: 26px 18px 28px; } .article-page-shell .article-visual-layout { grid-template-columns: 1fr; } .article-page-shell .article-hero-single img { min-height: 230px; } .article-page-shell .article-tags-panel { min-height: 180px; } .article-page-shell .article-newsletter { margin-inline: 18px; } .article-page-shell .article-newsletter-controls { grid-template-columns: 1fr; } .article-page-shell .article-newsletter button { width: 100%; } } .about-page-shell .profile-deck { min-height: 224px; padding: 12px 18px; grid-template-columns: 142px minmax(0, 1fr); gap: 18px; align-items: stretch; border: 2px solid #efc5c5; border-radius: 0; background: #ffffff; box-shadow: none; } .about-page-shell .profile-ticket { display: block; min-width: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .about-page-shell .profile-ticket-stub, .about-page-shell .profile-label { display: none; } .about-page-shell .profile-ticket .profile-motion { width: 142px; height: 196px; min-height: 0; margin: 0; position: relative; overflow: hidden; border: 4px solid #efc5c5; border-radius: 0; background: #e5e7e8; box-shadow: none; } .about-page-shell .profile-ticket .profile-motion video { width: 100%; height: calc(100% - 31px); min-height: 0; left: 0; display: block; object-fit: cover; object-position: center 43%; filter: saturate(0.9) contrast(1.02); transform: scale(2.65) !important; transform-origin: 50% 44%; } .about-page-shell .profile-ticket .profile-motion > span { min-height: 31px; padding: 0 5px; position: absolute; right: 0; bottom: 0; left: 0; display: grid; place-items: center; border: 0; color: #bd0000; background: #ffffff; font: 900 9px/1 "Yu Gothic", Arial, sans-serif; letter-spacing: 0; text-align: center; } .about-page-shell .profile-summary { min-width: 0; display: grid; grid-template-rows: auto auto 1fr; align-content: start; } .about-page-shell .profile-summary > h2 { margin: 3px 0 10px; padding: 0; border: 0; color: #ad0000; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif; font-size: clamp(21px, 2.15vw, 30px); font-weight: 900; line-height: 1.2; letter-spacing: 0; } .about-page-shell .profile-summary .profile-facts { margin: 0 0 10px; padding: 6px 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 0; border-radius: 0; background: #fbe2df; box-shadow: none; } .about-page-shell .profile-summary .profile-facts div, .about-page-shell .profile-summary .profile-facts div:nth-child(even), .about-page-shell .profile-summary .profile-facts div:last-child { min-height: 27px; padding: 3px 7px; display: grid; grid-template-columns: minmax(82px, 0.75fr) minmax(0, 1fr); align-items: center; border: 0; background: transparent; box-shadow: none; } .about-page-shell .profile-summary .profile-facts dt, .about-page-shell .profile-summary .profile-facts div:nth-child(2) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(3) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(4) dt, .about-page-shell .profile-summary .profile-facts dd { min-height: 0; margin: 0; padding: 0; border: 0; color: #111111; background: transparent; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.25; } .about-page-shell .profile-summary .profile-facts dd { justify-content: flex-start; font-weight: 900; } .about-page-shell .about-switcher { margin-top: 0; align-self: end; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .about-page-shell .about-switcher button, .about-page-shell .about-switcher button:hover, .about-page-shell .about-switcher button.is-active { min-width: 0; padding: 0 0 4px; border: 0; border-radius: 0; color: #bd0000; background: transparent; box-shadow: none; transform: none; } .about-page-shell .about-switcher button.is-active { border-bottom: 2px solid #bd0000; } .about-page-shell .about-switcher img { width: 68px; height: 52px; margin: 0 auto; aspect-ratio: auto; border: 1px solid #efc5c5; border-radius: 0; object-fit: cover; } .about-page-shell .about-switcher span { margin-top: 3px; color: #bd0000; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif; font-size: 9px; font-weight: 900; letter-spacing: 0; line-height: 1.2; text-overflow: clip; white-space: normal; } @media (max-width: 700px) { .about-page-shell .profile-deck { min-height: 205px; padding: 10px; grid-template-columns: 116px minmax(0, 1fr); gap: 11px; } .about-page-shell .profile-ticket .profile-motion { width: 116px; height: 180px; min-height: 0; } .about-page-shell .profile-ticket .profile-motion video { min-height: 0; } .about-page-shell .profile-summary > h2 { margin-top: 1px; font-size: 18px; } .about-page-shell .profile-summary .profile-facts { grid-template-columns: 1fr; padding: 4px 7px; } .about-page-shell .profile-summary .profile-facts div, .about-page-shell .profile-summary .profile-facts div:nth-child(even), .about-page-shell .profile-summary .profile-facts div:last-child { min-height: 20px; padding: 1px 4px; grid-template-columns: minmax(74px, 0.8fr) minmax(0, 1fr); border: 0; } .about-page-shell .about-switcher { gap: 5px; } .about-page-shell .about-switcher img { width: 52px; height: 40px; } .about-page-shell .about-switcher span { font-size: 7px; } } @media (max-width: 430px) { .about-page-shell .profile-deck { grid-template-columns: 1fr; } .about-page-shell .profile-ticket .profile-motion { width: 142px; height: 190px; margin: 0 auto; } } .about-page-shell .x-follow-ad { padding-left: 62px; color: #173b59; background: radial-gradient(ellipse at 16% 18%, rgba(255, 255, 255, 0.92) 0 15px, transparent 16px), radial-gradient(ellipse at 46% 10%, rgba(255, 255, 255, 0.52) 0 20px, transparent 21px), linear-gradient(180deg, #bfeaff 0%, #79c8ed 55%, #d9f4ff 100%); } .about-page-shell .x-follow-ad::before { content: "t"; width: 43px; height: 43px; position: absolute; left: 9px; top: 10px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #2c9ad2; box-shadow: 0 2px 0 #17688e; font: italic 900 34px/1 Georgia, serif; text-shadow: 0 1px 0 #17688e; } .about-page-shell .x-follow-ad strong { color: #fff; text-shadow: 1px 1px 0 #1c668f, 2px 2px 0 #1c668f; } .about-page-shell .newsletter-ad { padding-left: 71px; color: #123e24; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.13) 0 2px, transparent 2px 5px), #63bd55; } .about-page-shell .newsletter-ad::before { content: "OH!"; width: 49px; height: 38px; position: absolute; left: 10px; top: 12px; display: grid; place-items: center; border-radius: 50%; color: #55ad49; background: #fff; box-shadow: 0 3px 0 #287e32; font: 900 15px/1 Arial, sans-serif; } .about-page-shell .newsletter-ad::before { clip-path: polygon(0 0, 100% 0, 100% 78%, 72% 78%, 58% 100%, 54% 78%, 0 78%); } .about-page-shell .newsletter-ad strong { color: #fff; text-shadow: 1px 1px 0 #22692b, 2px 2px 0 #22692b; } .about-page-shell .cookie-counter-ad { padding-right: 78px; color: #4c270a; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 5px, transparent 5px 10px), #f3cd83; } .about-page-shell .cookie-counter-ad::before { content: ""; width: 58px; height: 58px; position: absolute; right: 10px; top: 5px; border: 2px solid #7b3e0b; border-radius: 50%; background: radial-gradient(circle at 31% 29%, #4b2308 0 3px, transparent 3.5px), radial-gradient(circle at 69% 24%, #4b2308 0 3px, transparent 3.5px), radial-gradient(circle at 53% 52%, #4b2308 0 4px, transparent 4.5px), radial-gradient(circle at 29% 72%, #4b2308 0 3px, transparent 3.5px), radial-gradient(circle at 73% 72%, #4b2308 0 3px, transparent 3.5px), #c88037; box-shadow: inset -7px -8px 0 rgba(112, 50, 10, 0.22), inset 5px 5px 0 rgba(255, 226, 151, 0.42), 0 3px 0 #713708; } .about-page-shell .cookie-counter-ad::after { content: "CLICK!"; color: #733508; } .about-page-shell .cookie-counter-ad strong { color: #8d460d; background: transparent; text-shadow: 1px 1px 0 #ffe6aa; } .article-page-shell .article-opening-grid { grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.55fr); gap: clamp(28px, 3.8vw, 52px); align-items: center; } .article-page-shell .article-opening-copy { align-self: center; padding-top: 0; } .article-page-shell .article-logo-frame { width: min(100%, 330px); margin-bottom: 26px; } .article-page-shell .article-display-title { max-width: 410px; font-size: clamp(29px, 2.65vw, 40px); line-height: 1.34; letter-spacing: -0.035em; text-wrap: balance; } .article-page-shell .article-opening-copy .article-subtitle { max-width: 390px; } .article-page-shell .article-visual-layout { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } .article-page-shell .article-hero-single, .article-page-shell .article-hero-single img { width: 100%; height: 100%; min-height: 0; } .article-page-shell .article-hero-single { display: grid; place-items: center; background: #dfaa94; } .article-page-shell .article-hero-single img { object-fit: contain; object-position: center; } .article-page-shell .article-tags-panel { right: 13px; bottom: 13px; } @media (max-width: 900px) { .article-page-shell .article-opening-grid { grid-template-columns: 1fr; align-items: start; } .article-page-shell .article-opening-copy { max-width: 620px; } .article-page-shell .article-display-title, .article-page-shell .article-opening-copy .article-subtitle { max-width: 620px; } .article-page-shell .article-visual-layout { min-height: 0; aspect-ratio: 16 / 9; } } @media (max-width: 620px) { .article-page-shell .article-logo-frame { width: min(310px, 88%); } .article-page-shell .article-visual-layout { aspect-ratio: auto; } .article-page-shell .article-hero-single, .article-page-shell .article-hero-single img { min-height: 0; aspect-ratio: 16 / 9; } } .about-page-shell .about-sponsor-rail { padding: 7px; gap: 6px; border: 2px solid #9a4d58; border-radius: 0; background: #f0c9ce; box-shadow: 4px 5px 0 rgba(76, 38, 43, 0.25); } .about-page-shell .sponsor-heading { margin: -7px -7px 1px; padding: 8px 10px; border-bottom: 2px solid #a65c65; color: #8f0013; background: #eab8bf; font-family: Arial, sans-serif; font-size: 11px; font-weight: 900; } .about-page-shell .about-sponsor-rail .fake-ad { min-height: 66px; padding: 7px 10px; overflow: hidden; position: relative; border: 3px solid #fff; border-radius: 0; box-shadow: 0 0 0 1px #8b5b62, inset 0 0 0 1px rgba(0, 0, 0, 0.22); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; } .about-page-shell .about-sponsor-rail .fake-ad::after { content: "AD"; position: absolute; top: 3px; right: 4px; padding: 2px 3px; border: 1px solid currentColor; font: 800 7px/1 "Courier New", monospace; opacity: 0.72; } .about-page-shell .about-sponsor-rail .fake-ad small, .about-page-shell .about-sponsor-rail .fake-ad span { position: relative; z-index: 1; font-family: "Arial Narrow", Arial, sans-serif; font-size: 8px; font-weight: 900; letter-spacing: 0.06em; } .about-page-shell .about-sponsor-rail .fake-ad strong { position: relative; z-index: 1; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(21px, 2.1vw, 31px); letter-spacing: 0.025em; line-height: 0.95; text-transform: uppercase; } .about-page-shell .x-follow-ad { color: #fff7b2; background: linear-gradient(105deg, transparent 0 62%, rgba(255, 255, 255, 0.20) 62% 68%, transparent 68%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.11) 0 2px, transparent 2px 4px), #a10025; } .about-page-shell .x-follow-ad strong { color: #fff; text-shadow: 3px 2px 0 #201020; } .about-page-shell .newsletter-ad { color: #102957; background: radial-gradient(circle at 83% 50%, #fff 0 5px, #ffef6d 5px 13px, transparent 13px), linear-gradient(100deg, #76d9ef 0 66%, #f7d84a 66% 100%); } .about-page-shell .newsletter-ad strong { color: #fff; text-shadow: 2px 2px 0 #1f5790; } .about-page-shell .about-sponsor-rail .about-status { min-height: 74px; border: 3px solid #fff; border-radius: 0; box-shadow: 0 0 0 1px #8b5b62; } .about-page-shell .cookie-counter-ad { color: #fff; background: radial-gradient(circle at 88% 48%, #2d1407 0 4px, transparent 4.5px), radial-gradient(circle at 76% 28%, #2d1407 0 3px, transparent 3.5px), radial-gradient(circle at 73% 76%, #2d1407 0 3px, transparent 3.5px), linear-gradient(112deg, #2b8eb2 0 61%, #dd9a3d 61% 100%); } .about-page-shell .cookie-counter-ad strong { color: #fff46c; background: transparent; text-shadow: 2px 2px 0 #532309; } .fashion-page .fashion-channel-strip strong, .fashion-page .fashion-channel-strip span { color: #ffffff; font-family: "Arial Black", Arial, sans-serif; font-size: clamp(11px, 1.08vw, 15px); font-weight: 800; line-height: 1.15; letter-spacing: 0.025em; -webkit-text-stroke: 0; text-shadow: 0 1px 1px rgba(72, 0, 8, 0.8); } .fashion-page .fashion-channel-strip strong { color: #ffffff; font-size: clamp(13px, 1.28vw, 17px); -webkit-text-stroke-width: 0; } @media (max-width: 760px) { .fashion-page .fashion-channel-strip strong, .fashion-page .fashion-channel-strip span { font-size: 10.5px; -webkit-text-stroke-width: 0; } .fashion-page .fashion-channel-strip strong { font-size: 13px; } } .article-page-shell .article-opening-grid { grid-template-columns: minmax(255px, 0.58fr) minmax(0, 1.82fr); gap: clamp(26px, 3.5vw, 48px); } .article-page-shell .article-visual-layout { min-height: clamp(410px, 38vw, 520px); display: block; position: relative; } .article-page-shell .article-hero-single { width: 100%; height: 100%; min-height: inherit; } .article-page-shell .article-hero-single img { width: 100%; height: 100%; min-height: inherit; object-position: center; } .article-page-shell .article-tags-panel { width: min(250px, calc(100% - 32px)); min-height: 0; padding: 13px 14px 12px; position: absolute; right: 16px; bottom: 16px; border: 1px solid rgba(79, 51, 40, 0.38); border-radius: 12px; background: rgba(255, 245, 239, 0.93); box-shadow: 0 4px 15px rgba(45, 26, 20, 0.24); backdrop-filter: blur(4px); } .article-page-shell .article-tags-title { margin-bottom: 9px; font-size: 12px; } .article-page-shell .article-tags-list { gap: 6px; } .article-page-shell .article-tags-list span { padding: 6px 9px; font-size: 11px; } .article-page-shell .article-share-line { display: none; } .article-page-shell .article-column-label { font-size: 15px; } .article-page-shell .article-display-title { font-size: clamp(32px, 3vw, 45px); line-height: 1.36; } .article-page-shell .article-opening-copy .article-subtitle { font-size: 15px; line-height: 1.9; } .article-page-shell .article-publish-meta { font-size: 11px; } .article-page-shell .article-lede p { font-size: 17px; line-height: 2; } .article-page-shell .article-body > p { font-size: 17px; line-height: 2.05; } .article-page-shell .article-body > h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.35; } .article-page-shell .article-body > h3 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.45; } .article-page-shell .toc a { font-size: 14px; line-height: 1.7; } .article-page-shell blockquote p, .article-page-shell .article-ending { font-size: 17px; line-height: 2; } .article-page-shell .article-figure figcaption, .article-page-shell .comparison-caption, .article-page-shell .image-source { font-size: 12px; line-height: 1.75; } @media (max-width: 900px) { .article-page-shell .article-opening-grid { grid-template-columns: 1fr; } .article-page-shell .article-visual-layout { min-height: clamp(360px, 63vw, 520px); } } @media (max-width: 620px) { .article-page-shell .article-visual-layout { min-height: 0; display: grid; } .article-page-shell .article-hero-single, .article-page-shell .article-hero-single img { min-height: 260px; } .article-page-shell .article-tags-panel { width: auto; margin-top: 8px; position: static; border-radius: 8px; box-shadow: none; } .article-page-shell .article-display-title { font-size: clamp(29px, 9vw, 38px); } .article-page-shell .article-lede p, .article-page-shell .article-body > p, .article-page-shell blockquote p, .article-page-shell .article-ending { font-size: 16px; } } .home-page .magazine-shelf-card { padding: 0 13px 12px; position: relative; border: 1px solid #8c8881; border-radius: 7px; color: #111111; background: #f8f4ed; box-shadow: inset 0 0 0 3px #ffffff, 4px 5px 0 rgba(65, 73, 80, 0.20); } .home-page .magazine-shelf-card::after { content: "NEW ARCHIVE"; padding: 3px 6px; position: absolute; top: 35px; right: 8px; color: #ffffff; background: #e9287b; font: 900 7px/1 "Courier New", monospace; letter-spacing: 0.06em; transform: rotate(2deg); } .home-page .magazine-shelf-topline { min-height: 38px; margin: 0 -13px 10px; padding: 0 10px; border-bottom: 1px solid #8c8881; color: #111111; background: #e9e5de; text-shadow: none; } .home-page .magazine-shelf-topline h2 { margin: 0; font: 900 12px/1 "Courier New", monospace; letter-spacing: 0.025em; } .home-page .magazine-shelf-topline span { padding: 3px 5px; color: #ffffff; background: #1496c1; font-size: 7px; letter-spacing: 0.04em; } .home-page .magazine-ad-pitch { margin: 0 0 7px; padding-right: 68px; color: #444444; font: 900 8px/1.3 "Courier New", monospace; letter-spacing: 0.045em; } .home-page .magazine-counter-list { margin: 0 0 9px; border-top: 1px solid #aaa49b; } .home-page .magazine-counter-list > div { min-height: 42px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(92px, 1.15fr); align-items: center; gap: 8px; border-bottom: 1px solid #aaa49b; } .home-page .magazine-counter-list span { display: grid; gap: 1px; } .home-page .magazine-counter-list b { font: 900 11px/1 "Courier New", monospace; letter-spacing: 0.025em; } .home-page .magazine-counter-list small { color: #8a8781; font-size: 8px; font-weight: 800; } .home-page .magazine-counter-list strong { min-height: 31px; padding: 0 7px; display: flex; align-items: center; justify-content: flex-end; border: 1px solid #aaa49b; color: #075bc7; background: #ffffff; font: 500 25px/1 "Courier New", monospace; letter-spacing: 0.08em; } .home-page .magazine-counter-list strong.is-green { color: #07822c; } .home-page .magazine-counter-list strong.is-red { color: #bd1111; } .home-page .magazine-counter-list em { margin-left: 3px; color: #111111; font: 900 12px/1 "Yu Gothic", sans-serif; letter-spacing: 0; } .home-page .magazine-shelf-button { min-height: 38px; border: 2px solid #111111; border-radius: 0; color: #111111; background: #ffffff; box-shadow: 3px 3px 0 #111111; font-size: 11px; } .home-page .magazine-ad-note { margin: 8px 0 0; color: #6d6963; font: 800 7px/1 "Courier New", monospace; letter-spacing: 0.06em; text-align: center; } .home-page .home-ad-stack { gap: 9px; } .home-page .home-ad-stack .desktop-pet-card, .home-page .home-ad-stack .x-account-card { width: 100%; aspect-ratio: auto; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .home-page .home-ad-stack .desktop-pet-card img, .home-page .home-ad-stack .x-account-card img, .home-page .home-ad-stack .desktop-pet-card img:first-child, .home-page .home-ad-stack .x-account-card img:first-child { width: 100%; height: auto; max-width: none; display: block; object-fit: contain; object-position: center; transform: none; } .about-page-shell .profile-deck { position: relative; isolation: isolate; } .about-page-shell .profile-deck::before { content: ""; height: 58px; position: absolute; z-index: -1; top: 62px; right: 0; left: 0; background: #fbe2df; } .about-page-shell .profile-ticket, .about-page-shell .profile-summary { position: relative; z-index: 1; } .about-page-shell .profile-summary .profile-facts { min-height: 58px; margin: 0 0 10px; padding: 6px 12px; align-items: center; background: transparent; } .about-page-shell .profile-summary .profile-facts div, .about-page-shell .profile-summary .profile-facts div:nth-child(even), .about-page-shell .profile-summary .profile-facts div:last-child { min-height: 23px; padding: 2px 6px; grid-template-columns: minmax(102px, 0.8fr) minmax(0, 1fr); } .about-page-shell .profile-summary .profile-facts dt, .about-page-shell .profile-summary .profile-facts div:nth-child(2) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(3) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(4) dt { color: #151515; font-size: 12px; font-weight: 900; } .about-page-shell .profile-summary .profile-facts dd { color: #151515; font-size: 13px; font-weight: 900; } @media (max-width: 700px) { .about-page-shell .profile-deck::before { height: 96px; top: 53px; } .about-page-shell .profile-summary .profile-facts { min-height: 96px; } .about-page-shell .profile-summary .profile-facts div, .about-page-shell .profile-summary .profile-facts div:nth-child(even), .about-page-shell .profile-summary .profile-facts div:last-child { grid-template-columns: minmax(82px, 0.8fr) minmax(0, 1fr); } .about-page-shell .profile-summary .profile-facts dt, .about-page-shell .profile-summary .profile-facts div:nth-child(2) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(3) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(4) dt { font-size: 10px; } .about-page-shell .profile-summary .profile-facts dd { font-size: 11px; } } .home-page .right-column { gap: 4px; } .home-page .magazine-shelf-card.magazine-collection-image-ad { width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; line-height: 0; } .home-page .magazine-shelf-card.magazine-collection-image-ad::after { display: none; } .home-page .magazine-collection-image-ad img { width: 100%; height: auto; max-width: none; display: block; object-fit: contain; } .home-page .home-ad-stack { gap: 2px; line-height: 0; } .home-page .home-ad-stack .desktop-pet-card, .home-page .home-ad-stack .x-account-card { margin: 0; line-height: 0; } .about-page-shell .profile-deck::before { display: none; } .about-page-shell .profile-summary .profile-facts { min-height: 0; margin: 0 0 10px; padding: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; background: transparent; } .about-page-shell .profile-summary .profile-facts div, .about-page-shell .profile-summary .profile-facts div:nth-child(even), .about-page-shell .profile-summary .profile-facts div:last-child { min-width: 0; min-height: 54px; padding: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; overflow: hidden; border: 1px solid #d3a4b5; border-radius: 6px; background: #fff7fa; box-shadow: 0 3px 0 #eec7d4; } .about-page-shell .profile-summary .profile-facts div:nth-child(2) { border-color: #a9cce0; background: #f5fbff; box-shadow: 0 3px 0 #cce3ef; } .about-page-shell .profile-summary .profile-facts div:nth-child(3) { border-color: #ddbc73; background: #fffaf0; box-shadow: 0 3px 0 #f2db9e; } .about-page-shell .profile-summary .profile-facts div:nth-child(4) { border-color: #accb91; background: #f8fff2; box-shadow: 0 3px 0 #d4e7c4; } .about-page-shell .profile-summary .profile-facts div:nth-child(5) { border-color: #b9acd8; background: #faf7ff; box-shadow: 0 3px 0 #dcd3ee; } .about-page-shell .profile-summary .profile-facts dt, .about-page-shell .profile-summary .profile-facts div:nth-child(2) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(3) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(4) dt, .about-page-shell .profile-summary .profile-facts div:nth-child(5) dt { min-height: 22px; padding: 4px 5px; display: grid; place-items: center; border: 0; border-bottom: 1px solid rgba(95, 70, 80, 0.2); color: #473842; background: #f8dbe5; font-size: 9px; font-weight: 900; line-height: 1.2; text-align: center; } .about-page-shell .profile-summary .profile-facts div:nth-child(2) dt { background: #dceef7; } .about-page-shell .profile-summary .profile-facts div:nth-child(3) dt { background: #f8e4b7; } .about-page-shell .profile-summary .profile-facts div:nth-child(4) dt { background: #dceecd; } .about-page-shell .profile-summary .profile-facts div:nth-child(5) dt { background: #e7dff5; } .about-page-shell .profile-summary .profile-facts dd { min-height: 30px; padding: 5px; display: grid; place-items: center; color: #171317; background: transparent; font-size: 14px; font-weight: 900; line-height: 1; text-align: center; } @media (max-width: 700px) { .about-page-shell .profile-summary .profile-facts { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-page-shell .profile-summary .profile-facts div, .about-page-shell .profile-summary .profile-facts div:nth-child(even), .about-page-shell .profile-summary .profile-facts div:last-child { min-height: 50px; grid-template-columns: 1fr; } .about-page-shell .profile-summary .profile-facts div:last-child { grid-column: 1 / -1; } } .home-page .magazine-shelf-card.magazine-collection-widget { width: 100%; min-width: 0; padding: 0; border: 1px solid #aaa49b; border-radius: 6px; overflow: hidden; color: #111111; background: #f8f4ed; line-height: normal; } .home-page .magazine-shelf-card.magazine-collection-widget::after { display: none; } .home-page .magazine-widget-shell { padding: 10px 12px 12px; } .home-page .magazine-widget-header { margin: -10px -12px 8px; padding: 8px 9px 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #aaa49b; background: #f2eee7; } .home-page .magazine-widget-header h2 { margin: 0; color: #111111; font: 900 clamp(11px, 1.2vw, 15px)/1 "Courier New", monospace; letter-spacing: 0.02em; } .home-page .magazine-widget-tools { display: flex; gap: 4px; } .home-page .magazine-widget-tools button { width: 25px; height: 25px; padding: 0; display: grid; place-items: center; border: 1px solid #168cb4; color: #168cb4; background: #ffffff; font: 800 17px/1 Arial, sans-serif; } .home-page .magazine-widget-tools button:hover, .home-page .magazine-widget-tools button:focus-visible { color: #ffffff; background: #168cb4; } .home-page .magazine-info-panel { margin: 0 0 7px; padding: 7px 8px; border-left: 4px solid #168cb4; color: #4c4a47; background: #eaf7fb; font-size: 9px; line-height: 1.55; } .home-page .magazine-widget-counts { margin: 0; } .home-page .magazine-widget-counts > div { min-height: 49px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(92px, 1.1fr); align-items: center; gap: 8px; border-bottom: 1px solid #aaa49b; } .home-page .magazine-widget-counts dt { display: grid; gap: 2px; } .home-page .magazine-widget-counts dt b { font: 900 12px/1 "Courier New", monospace; } .home-page .magazine-widget-counts dt span { color: #8a8781; font-size: 9px; font-weight: 800; } .home-page .magazine-widget-counts dd { min-height: 35px; margin: 0; padding: 0 7px; display: flex; align-items: center; justify-content: flex-end; border: 1px solid #aaa49b; background: #ffffff; } .home-page .magazine-widget-counts dd strong { color: #075bc7; font: 500 28px/1 "Courier New", monospace; letter-spacing: 0.08em; } .home-page .magazine-widget-counts dd.is-green strong { color: #07822c; } .home-page .magazine-widget-counts dd.is-red strong { color: #bd1111; } .home-page .magazine-widget-counts dd span { margin-left: 3px; font-size: 12px; font-weight: 900; } .home-page .magazine-read-button { width: 100%; min-height: 38px; margin-top: 10px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; border: 2px solid #111111; color: #111111; background: #ffffff; box-shadow: 3px 3px 0 #111111; font: 900 11px/1 "Courier New", monospace; } .home-page .magazine-read-button:hover, .home-page .magazine-read-button:focus-visible { color: #ffffff; background: #111111; } .home-page .magazine-review-drawer { margin-top: 10px; border-top: 1px solid #aaa49b; } .home-page .magazine-review-drawer p { margin: 0; padding: 7px 3px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 5px; border-bottom: 1px dotted #aaa49b; font: 800 9px/1.2 "Courier New", monospace; } .home-page .magazine-review-drawer p b { color: #e9287b; } .home-page .magazine-review-drawer p small { color: #77736d; font-size: 6px; } .home-page .home-ad-stack { gap: 0; } .home-page .home-ad-stack .desktop-pet-card img { margin-top: -3.4%; margin-bottom: -4%; } .home-page .home-ad-stack .x-account-card img { margin-top: -4.6%; margin-bottom: -5%; } .fashion-page .fashion-latest { padding: 0 10px 16px; border: 1px solid #303438; border-top: 0; color: #ffffff; background: radial-gradient(circle at 50% 0%, #2b2e31 0, #17191b 48%, #101112 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 32px rgba(0, 0, 0, 0.24); } .fashion-page .fashion-latest-heading { padding: 12px 5px 6px; } .fashion-page .fashion-latest-heading h2 { color: #ffffff !important; font-size: 17px !important; text-shadow: 0 1px 0 #000000 !important; } .fashion-page .fashion-latest-rail { padding: 7px 2px 10px; scrollbar-color: #e9287b #292c2f; } @media (max-width: 700px) { .fashion-page .fashion-latest { padding-right: 7px; padding-left: 7px; } } .home-page .magazine-widget-tools { gap: 3px; align-items: center; } .home-page .magazine-widget-tools button { width: auto; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; color: #10a8d2; background: transparent; box-shadow: none; font: 800 13px/1 Arial, sans-serif; } .home-page .magazine-widget-tools button:hover, .home-page .magazine-widget-tools button:focus-visible { color: #087d9e; background: transparent; outline: 1px dotted currentColor; outline-offset: 2px; } .home-page .magazine-collection-widget[hidden], .home-page .magazine-widget-shell[hidden], .home-page .magazine-info-panel[hidden], .home-page .magazine-review-drawer[hidden] { display: none !important; } .home-page .right-column { gap: 8px; } .home-page .home-ad-stack { gap: 8px; } .home-page .home-ad-stack .desktop-pet-card, .home-page .home-ad-stack .x-account-card { overflow: hidden; } .home-page .home-ad-stack .desktop-pet-card { aspect-ratio: 2.22 / 1; } .home-page .home-ad-stack .x-account-card { aspect-ratio: 3.25 / 1; } .home-page .home-ad-stack .desktop-pet-card img, .home-page .home-ad-stack .x-account-card img { width: 100%; height: 100%; margin-top: 0; margin-bottom: 0; object-fit: cover; object-position: center; transform: none; } .home-page .magazine-review-drawer > a { margin-top: 7px; padding: 7px 8px; display: block; border: 1px solid #9ca3a7; color: #111111; background: #ffffff; font: 900 8px/1.2 "Courier New", monospace; text-decoration: none; } .home-page .magazine-review-drawer > a:hover, .home-page .magazine-review-drawer > a:focus-visible { color: #ffffff; background: #111111; } .about-page-shell .profile-summary .profile-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 700px) { .about-page-shell .profile-summary .profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-page-shell .profile-summary .profile-facts div:last-child { grid-column: auto; } } .fashion-page .fashion-channel-strip + .fashion-latest, .fashion-page .fashion-latest { margin-top: 0 !important; border-top: 6px solid #08090a; background-color: #0d0f10; } .article-page-shell .article-intro { margin-bottom: 36px; padding: clamp(22px, 2.7vw, 34px) clamp(22px, 3.4vw, 44px) 26px; } .article-page-shell .article-opening-grid { grid-template-columns: minmax(230px, 0.56fr) minmax(0, 1.74fr); gap: clamp(20px, 3vw, 40px); align-items: center; } .article-page-shell .article-logo-frame { width: min(100%, 285px); margin-bottom: 15px; padding: 12px 16px 11px; } .article-page-shell .article-display-title { font-size: clamp(26px, 2.55vw, 38px); line-height: 1.24; } .article-page-shell .article-opening-copy .article-subtitle { margin-bottom: 12px; font-size: 13px; line-height: 1.65; } .article-page-shell .article-publish-meta { margin: 10px 0 0; } .article-page-shell .article-visual-layout { min-height: clamp(315px, 32vw, 430px); } .article-page-shell .article-tags-panel { width: min(220px, calc(100% - 26px)); right: 12px; bottom: 12px; padding: 11px 12px 10px; } @media (max-width: 900px) { .article-page-shell .article-opening-grid { grid-template-columns: 1fr; } .article-page-shell .article-opening-copy { max-width: 650px; } } .home-page #desktop-pet-ad { cursor: pointer; } .pet-installer-layer { position: fixed; inset: 0; z-index: 2147480000; display: grid; place-items: center; padding: 12px; background: rgba(34, 42, 49, 0.08); } .pet-installer-window { width: min(362px, calc(100vw - 14px)); overflow: hidden; border: 1px solid #225c9d; border-radius: 6px; color: #111; background: #e8e5da; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95), 2px 4px 12px rgba(28, 39, 48, 0.28); font-family: Tahoma, "MS UI Gothic", Arial, sans-serif; } .pet-installer-titlebar { min-height: 30px; padding: 0 4px 0 8px; display: flex; align-items: center; justify-content: space-between; border-radius: 5px 5px 0 0; color: #fff; background: linear-gradient( 180deg, #3aa8f7 0%, #1686e2 42%, #0768c9 53%, #1178d3 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38); } .pet-installer-titlebar strong { font-size: 11px; font-weight: 700; letter-spacing: 0.01em; text-shadow: 0 1px 0 #064a90; } .pet-installer-x { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid #9c2a17; border-radius: 4px; color: #fff; background: linear-gradient(180deg, #ffad90, #e45637 55%, #d84227 56%, #ec795d); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.72), inset -1px -1px 0 rgba(118, 33, 18, 0.24); font: 900 15px/1 Arial, sans-serif; cursor: pointer; } .pet-installer-body { background: #f0ede3; } .pet-installer-body.is-location-step { min-height: 177px; padding: 19px 18px 10px; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 12px; } .pet-installer-mini-dog { width: 47px; height: 57px; margin-top: 41px; display: block; border: 1px solid #7e96aa; border-radius: 2px; background: #65abe8 url("../images/home-ad-desktop-pet.webp") 82% 36% / 355% auto no-repeat; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.92); } .pet-installer-location-copy { min-width: 0; } .pet-installer-location-copy > strong { display: block; margin: 2px 0 0; color: #111; font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 700; line-height: 1.08; } .pet-installer-location-copy > span { display: block; margin: 0 0 4px; color: #111; font-size: 13px; line-height: 1.2; } .pet-installer-path { width: 179px; height: 21px; padding: 0 3px; display: block; box-sizing: border-box; border: 1px solid #7f9db9; border-radius: 1px; outline: 0; color: #606060; background: #fff; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.12); font: 12px/19px Tahoma, "MS UI Gothic", Arial, sans-serif; } .pet-installer-location-copy > small { display: block; margin-top: 8px; color: #222; font-size: 10px; line-height: 1.45; } .pet-installer-actions { min-height: 35px; padding: 0 5px 6px; display: flex; align-items: center; gap: 5px; background: #e8e5da; } .pet-installer-browse, .pet-installer-cancel, .pet-installer-install, .pet-installer-ok { min-width: 0; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #8e9398; border-radius: 3px; color: #111; background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #f0f1f1 100%); box-shadow: inset 1px 1px 0 #fff, 0 1px 0 rgba(80, 86, 90, 0.12); font: 12px/1 Tahoma, "MS UI Gothic", Arial, sans-serif; cursor: pointer; } .pet-installer-browse { width: 72px; margin-top: 3px; } .pet-installer-cancel { width: 58px; } .pet-installer-install { width: 54px; } .pet-installer-browse:hover, .pet-installer-cancel:hover, .pet-installer-install:hover, .pet-installer-ok:hover, .pet-installer-browse:focus-visible, .pet-installer-cancel:focus-visible, .pet-installer-install:focus-visible, .pet-installer-ok:focus-visible { border-color: #4a76a5; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 58%, #e5edf5 100%); outline: 1px dotted #333; outline-offset: -4px; } .pet-installer-window footer { padding: 4px 8px 5px; border-top: 1px solid #c9c5ba; color: #8d887e; background: #e8e5da; font: 400 7px/1 Tahoma, Arial, sans-serif; } .pet-installer-body.is-progress-step { min-height: 112px; padding: 20px 18px 16px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; } .pet-installer-body.is-progress-step .pet-installer-mini-dog { margin-top: 0; } .pet-installer-progress-copy > span { overflow: hidden; color: #5a5751; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; } .pet-installer-progress { height: 16px; padding: 2px; overflow: hidden; border: 1px solid #87939a; border-radius: 1px; background: #fff; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); } .pet-installer-progress > span { width: 0; height: 100%; display: block; background: repeating-linear-gradient(90deg, rgba(255,255,255,.23) 0 5px, transparent 5px 8px), linear-gradient(180deg, #9ce876, #54ad34); transition: width 85ms linear; } .pet-installer-body.is-complete-step { min-height: 110px; padding: 20px 18px; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 13px; } .pet-installer-complete-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #4e8f35; border-radius: 50%; color: #fff; background: linear-gradient(180deg, #8bd268, #409d28); box-shadow: inset 1px 1px 0 rgba(255,255,255,.58); font: 900 24px/1 Arial, sans-serif; } .desktop-pet { width: 132px; height: 150px; position: fixed; z-index: 2147479000; touch-action: none; user-select: none; cursor: grab; filter: drop-shadow(0 5px 4px rgba(22, 30, 35, 0.28)); } .desktop-pet[hidden] { display: none !important; } .desktop-pet.is-dragging { cursor: grabbing; } .desktop-pet-art { width: 118px; height: 118px; position: absolute; left: 7px; bottom: 15px; display: block; border-radius: 50%; background: #6caeea url("../images/home-ad-desktop-pet.webp") 81% 35% / 330% auto no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 0 rgba(59,83,104,.45); transform-origin: 50% 90%; } .desktop-pet > small { position: absolute; right: 7px; bottom: 2px; left: 7px; color: #344b59; font: 900 7px/1 "Courier New", monospace; text-align: center; } .desktop-pet-close { width: 18px; height: 18px; position: absolute; z-index: 3; top: 19px; right: 3px; padding: 0; display: grid; place-items: center; border: 1px solid #69767d; border-radius: 3px; color: #34434b; background: #fff; font: 900 11px/1 Arial, sans-serif; } .desktop-pet-bubble { max-width: 104px; min-width: 42px; padding: 7px 9px; position: absolute; z-index: 4; right: 3px; top: -15px; border: 1px solid #6d777c; border-radius: 14px; color: #111; background: #fff; box-shadow: 2px 3px 0 rgba(51,58,62,.16); font: 900 11px/1.2 "Yu Gothic", Arial, sans-serif; text-align: center; } .desktop-pet.is-entering .desktop-pet-art { animation: omz-pet-drop 850ms cubic-bezier(.18,.77,.27,1.16) both; } .desktop-pet.is-reacting .desktop-pet-art { animation: omz-pet-hop 520ms ease both; } .desktop-pet.is-sleeping .desktop-pet-art { animation: omz-pet-sleep 2.8s ease-in-out infinite; } @keyframes omz-pet-drop { 0% { transform: translateY(-55vh) rotate(-9deg) scale(.78); opacity: .2; } 67% { transform: translateY(10px) rotate(4deg) scale(1.05); opacity: 1; } 82% { transform: translateY(-10px) rotate(-2deg) scale(.98); } 100% { transform: translateY(0) rotate(0) scale(1); } } @keyframes omz-pet-hop { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-22px) rotate(-5deg); } 62% { transform: translateY(-7px) rotate(5deg); } } @keyframes omz-pet-sleep { 0%,100% { transform: translateY(1px) rotate(5deg) scale(.98); } 50% { transform: translateY(5px) rotate(7deg) scale(.96); } } @media (pointer: fine) { html body.custom-cursor-ready #soft-cursor.soft-cursor { position: fixed !important; z-index: 2147483647 !important; display: block !important; pointer-events: none !important; isolation: isolate; } html body.custom-cursor-ready #soft-cursor.soft-cursor span { position: relative; z-index: 2147483647 !important; } } .pet-installer-window { border-radius: 5px; background: #ece9d8; font-family: "MS UI Gothic", "Yu Gothic UI", Tahoma, Arial, sans-serif; } .pet-installer-titlebar { border-radius: 4px 4px 0 0; } .pet-installer-body, .pet-installer-body.is-location-step, .pet-installer-body.is-progress-step, .pet-installer-body.is-complete-step { background: #f3f1e7; } .pet-installer-actions, .pet-installer-window footer { background: #ece9d8; } .pet-installer-location-copy > strong { margin: 2px 0 0; font-family: "Times New Roman", "Yu Mincho", serif; font-size: 18px; font-weight: 700; line-height: 1.02; letter-spacing: 0; } .pet-installer-location-copy > span { margin: 1px 0 3px; font-family: "MS UI Gothic", "Yu Gothic UI", Tahoma, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.12; letter-spacing: 0; } .pet-installer-location-copy > small { margin-top: 8px; font-family: "MS UI Gothic", "Yu Gothic UI", Tahoma, Arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.45; letter-spacing: 0; } .pet-installer-path { font-family: "MS UI Gothic", Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 400; } .pet-installer-browse, .pet-installer-cancel, .pet-installer-install, .pet-installer-ok { height: 23px; border: 1px solid #8b8b8b; border-radius: 2px; color: #111; background: #ffffff; box-shadow: none; text-shadow: none; font-family: "MS UI Gothic", Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1; } .pet-installer-browse:hover, .pet-installer-cancel:hover, .pet-installer-install:hover, .pet-installer-ok:hover { border-color: #666; background: #ffffff; box-shadow: none; } .pet-installer-browse:focus-visible, .pet-installer-cancel:focus-visible, .pet-installer-install:focus-visible, .pet-installer-ok:focus-visible { border-color: #555; background: #ffffff; box-shadow: none; outline: 1px dotted #333; outline-offset: -4px; } .pet-installer-layer > #soft-cursor.soft-cursor, html body.custom-cursor-ready #soft-cursor.soft-cursor { position: fixed !important; z-index: 2147483647 !important; pointer-events: none !important; display: block !important; } .pet-installer-layer > #soft-cursor.soft-cursor span, html body.custom-cursor-ready #soft-cursor.soft-cursor span { position: relative; z-index: 2147483647 !important; } .pet-installer-layer { position: fixed; inset: 0; z-index: 2147480000; display: grid; place-items: center; padding: 0; background: transparent; } .pet-installer-window { width: 360px; max-width: calc(100vw - 10px); overflow: hidden; box-sizing: border-box; border: 1px solid #315b83; border-radius: 5px; color: #101010; background: #ece9d8; box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.22); font-family: Tahoma, "MS UI Gothic", "Yu Gothic UI", Arial, sans-serif; } .pet-installer-titlebar { height: 30px; min-height: 30px; box-sizing: border-box; padding: 0 4px 0 8px; display: flex; align-items: center; justify-content: space-between; border-radius: 4px 4px 0 0; color: #ffffff; background: linear-gradient( 180deg, #2f9cf1 0%, #1688e7 36%, #0f79da 52%, #0768c7 55%, #1178d3 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34); } .pet-installer-titlebar strong { margin: 0; font-family: Tahoma, "MS UI Gothic", Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; text-shadow: 0 1px 0 rgba(0, 58, 114, 0.75); } .pet-installer-x { width: 22px; height: 22px; min-width: 22px; padding: 0; display: grid; place-items: center; border: 1px solid #9d2f1c; border-radius: 4px; color: #ffffff; background: linear-gradient(180deg, #ffad92 0%, #ee674a 45%, #dc4b31 56%, #ed765a 100%); box-shadow: inset 1px 1px 0 rgba(255,255,255,.72); font: 900 15px/1 Arial, sans-serif; } .pet-installer-body.is-location-step { min-height: 177px; box-sizing: border-box; padding: 20px 18px 10px; display: grid; grid-template-columns: 47px minmax(0, 1fr); align-items: start; gap: 17px; background: rgb(243, 241, 231); } .pet-installer-body.is-location-step .pet-installer-mini-dog { width: 47px; height: 57px; margin-top: 41px; box-sizing: border-box; border: 1px solid #7692aa; border-radius: 1px; background: #63a9e8 url("../images/home-ad-desktop-pet.webp") 82% 36% / 355% auto no-repeat; box-shadow: inset 1px 1px 0 #ffffff; } .pet-installer-location-copy { min-width: 0; padding: 0; } .pet-installer-location-copy > strong { display: block; margin: 1px 0 0; color: #101010; font-family: "Times New Roman", Times, "Yu Mincho", serif; font-size: 18px; font-weight: 700; line-height: 18px; letter-spacing: 0; } .pet-installer-location-copy > span { width: 240px; max-width: 100%; display: block; margin: 1px 0 3px; color: #101010; font-family: "MS UI Gothic", Tahoma, "Yu Gothic UI", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 17px; letter-spacing: 0; } .pet-installer-path { width: 177px; height: 20px; margin: 0; padding: 0 3px; display: block; box-sizing: border-box; border: 1px solid #7f9db9; border-radius: 0; outline: 0; color: #5f5f5f; background: #ffffff; box-shadow: inset 1px 1px 1px rgba(0,0,0,.10); font-family: "MS UI Gothic", Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 18px; } .pet-installer-browse, .pet-installer-cancel, .pet-installer-install, .pet-installer-ok { height: 23px; min-height: 23px; padding: 0 8px; box-sizing: border-box; border: 1px solid #858585; border-radius: 2px; color: #101010; background: #ffffff; box-shadow: none; text-shadow: none; font-family: "MS UI Gothic", Tahoma, Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 21px; } .pet-installer-browse { width: 71px; margin-top: 3px; } .pet-installer-location-copy > small { width: 238px; max-width: 100%; display: block; margin-top: 7px; color: #101010; font-family: "MS UI Gothic", Tahoma, "Yu Gothic UI", Arial, sans-serif; font-size: 10px; font-weight: 400; line-height: 15px; letter-spacing: 0; } .pet-installer-actions { height: 25px; min-height: 25px; box-sizing: border-box; padding: 0 3px 2px; display: flex; align-items: flex-end; justify-content: flex-start; gap: 5px; background: rgb(233, 230, 217); } .pet-installer-cancel { width: 55px; } .pet-installer-install { width: 51px; } .pet-installer-browse:hover, .pet-installer-cancel:hover, .pet-installer-install:hover, .pet-installer-ok:hover { color: #101010; border-color: #858585; background: #ffffff; box-shadow: none; } .pet-installer-browse:focus-visible, .pet-installer-cancel:focus-visible, .pet-installer-install:focus-visible, .pet-installer-ok:focus-visible { color: #101010; border-color: #555555; background: #ffffff; box-shadow: none; outline: 1px dotted #333333; outline-offset: -4px; } .pet-installer-window footer { height: 20px; box-sizing: border-box; padding: 5px 8px 0; border-top: 1px solid #c6c2b6; color: #8d887c; background: rgb(236, 233, 216); font-family: Tahoma, "MS UI Gothic", Arial, sans-serif; font-size: 7px; font-weight: 400; line-height: 1; letter-spacing: 0; } .pet-installer-body.is-progress-step { min-height: 177px; box-sizing: border-box; padding: 35px 18px; display: grid; grid-template-columns: 47px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: rgb(243, 241, 231); } .pet-installer-body.is-progress-step .pet-installer-mini-dog { width: 47px; height: 57px; margin: 0; border: 1px solid #7692aa; border-radius: 1px; background: #63a9e8 url("../images/home-ad-desktop-pet.webp") 82% 36% / 355% auto no-repeat; } .pet-installer-progress-copy { min-width: 0; display: grid; gap: 5px; } .pet-installer-progress-copy strong { font-size: 12px; } .pet-installer-progress-copy > span { overflow: hidden; color: #555555; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; } .pet-installer-progress { height: 16px; padding: 2px; overflow: hidden; border: 1px solid #7f9db9; background: #ffffff; } .pet-installer-progress > span { width: 0; height: 100%; display: block; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 5px, transparent 5px 8px), linear-gradient(180deg, #93df6e, #4ba52e); } .pet-installer-percent { align-self: end; padding-bottom: 2px; font-size: 10px; } .pet-installer-body.is-complete-step { min-height: 177px; box-sizing: border-box; padding: 50px 28px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 13px; background: rgb(243, 241, 231); } .pet-installer-complete-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #4c8b33; border-radius: 50%; color: #ffffff; background: linear-gradient(180deg, #83cf61, #3d9c25); font: 900 24px/1 Arial, sans-serif; } .pet-installer-complete-copy { display: grid; gap: 5px; } .pet-installer-complete-copy strong { font-size: 12px; } .pet-installer-complete-copy span { font-size: 10px; } .pet-installer-layer #soft-cursor.soft-cursor { position: fixed !important; z-index: 2147483647 !important; display: block !important; pointer-events: none !important; } .pet-installer-layer #soft-cursor.soft-cursor span { position: relative; z-index: 2147483647 !important; } .article-page-shell .article-opening-grid { grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.38fr); gap: clamp(24px, 3vw, 42px); align-items: start; } .article-page-shell .article-opening-copy { min-width: 0; } .article-page-shell .article-logo-frame { width: min(100%, 335px); margin-bottom: 18px; } .article-page-shell .article-display-title { max-width: 12em; margin-bottom: 14px; font-size: clamp(22px, 2.15vw, 34px); line-height: 1.42; letter-spacing: -0.03em; } .article-page-shell .article-opening-copy .article-subtitle { max-width: 30em; margin-bottom: 16px; font-size: 13px; line-height: 1.8; } .article-page-shell .article-publish-meta { margin-top: 10px; font-size: 10px; } .article-page-shell .article-lede { margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 52px); row-gap: 4px; } .article-page-shell .article-lede p { font-size: 14px; line-height: 1.95; } .article-page-shell .article-body > p { font-size: 15px; line-height: 2; } .article-page-shell .article-body > h2 { font-size: clamp(26px, 2.45vw, 36px); line-height: 1.4; } .article-page-shell .article-body > h3 { font-size: clamp(21px, 2vw, 28px); line-height: 1.5; } .article-page-shell .toc a { font-size: 13px; line-height: 1.65; } .article-page-shell blockquote p, .article-page-shell .article-ending { font-size: 15px; line-height: 1.95; } @media (max-width: 900px) { .article-page-shell .article-opening-grid { grid-template-columns: 1fr; } .article-page-shell .article-opening-copy { max-width: 650px; } .article-page-shell .article-display-title { max-width: none; } } @media (max-width: 620px) { .article-page-shell .article-lede { grid-template-columns: 1fr; } } .article-page-shell .article-intro { padding: clamp(24px, 3vw, 34px) clamp(24px, 3.6vw, 44px) 22px; } .article-page-shell .article-opening-grid { grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 36px); align-items: start; } .article-page-shell .article-opening-copy { max-width: 390px; } .article-page-shell .article-column-label { margin-bottom: 11px; } .article-page-shell .article-logo-frame { width: min(100%, 360px); margin-bottom: 20px; } .article-page-shell .article-display-title { max-width: 9.7em; margin-bottom: 12px; font-size: clamp(30px, 2.55vw, 40px); line-height: 1.28; letter-spacing: -0.035em; } .article-page-shell .article-opening-copy .article-subtitle { max-width: 28em; margin-bottom: 15px; font-size: 14px; line-height: 1.8; } .article-page-shell .article-publish-meta { margin: 11px 0 0; } .article-page-shell .article-visual-layout { min-height: clamp(330px, 30vw, 410px); } .article-page-shell .article-hero-single img { min-height: 330px; } .article-page-shell .article-tags-panel { width: min(218px, calc(100% - 24px)); right: 14px; bottom: 14px; } .article-page-shell .article-lede { margin: 22px 0 0; padding: 26px 28px 10px; display: block; border: 1px solid #dfd3cc; border-radius: 18px 18px 10px 10px; background: #fffdfb; box-shadow: 0 2px 0 rgba(118, 96, 87, 0.16); } .article-page-shell .article-lede p { max-width: 70ch; margin: 0 0 22px; color: #26211f; font-size: 16px; line-height: 2; } .article-page-shell .article-body > p, .article-page-shell .article-body > h2, .article-page-shell .article-body > h3, .article-page-shell .article-body > blockquote, .article-page-shell .article-body > .toc, .article-page-shell .article-body > .article-figure, .article-page-shell .article-body > .image-comparison, .article-page-shell .article-body > .article-ending, .article-page-shell .article-body > .article-back-top-wrap, .article-page-shell .article-page-shell .article-newsletter { margin-left: clamp(28px, 4.8vw, 58px); margin-right: clamp(28px, 4.8vw, 58px); } .article-page-shell .article-body > p { font-size: 16px; line-height: 2; } .article-page-shell .toc, .article-page-shell blockquote, .article-page-shell .article-ending { border-radius: 12px; } @media (max-width: 960px) { .article-page-shell .article-opening-grid { grid-template-columns: 1fr; } .article-page-shell .article-opening-copy { max-width: 640px; } .article-page-shell .article-display-title { max-width: none; } } @media (max-width: 620px) { .article-page-shell .article-lede { padding: 22px 18px 4px; } .article-page-shell .article-lede p, .article-page-shell .article-body > p { font-size: 15px; } } .pet-installer-window { width: min(374px, calc(100vw - 14px)); border: 1px solid #74848d; border-radius: 8px; overflow: hidden; color: #17242b; background: #eef2f4; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.95), 0 5px 14px rgba(48, 60, 68, 0.20); font-family: "Segoe UI", "Yu Gothic UI", "Yu Gothic", Arial, sans-serif; } .pet-installer-titlebar { min-height: 31px; padding: 0 5px 0 9px; border-radius: 7px 7px 0 0; color: #ffffff; background: linear-gradient( 180deg, #91c5d9 0%, #5f9bb6 47%, #477f99 52%, #699fb6 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(52, 79, 92, 0.35); } .pet-installer-titlebar strong { font-family: "Segoe UI", "Yu Gothic UI", Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-shadow: 0 1px 0 rgba(48, 72, 84, 0.8); } .pet-installer-x { width: 21px; height: 21px; border: 1px solid #8e5656; border-radius: 4px; color: #fff; background: #d66a65; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45); } .pet-installer-body.is-location-step { min-height: 176px; padding: 20px 18px 12px; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; background: #f5f7f8; } .pet-installer-body.is-location-step .pet-installer-mini-dog { margin-top: 36px; border-color: #83949d; border-radius: 3px; background-color: #dce8ee; } .pet-installer-location-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 7px; align-items: center; } .pet-installer-location-copy > strong { grid-column: 1 / -1; margin: 1px 0 2px; color: #263841; font-family: "Segoe UI", "Yu Gothic UI", "Yu Gothic", Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .pet-installer-location-copy > span { grid-column: 1 / -1; width: auto; margin: 0 0 6px; color: #465860; font-family: "Yu Gothic UI", "Yu Gothic", Arial, sans-serif; font-size: 12px; line-height: 1.45; } .pet-installer-path { grid-column: 1; width: 100%; min-width: 0; height: 25px; padding: 0 7px; border: 1px solid #a3afb5; border-radius: 3px; color: #536169; background: #ffffff; box-shadow: inset 0 1px 2px rgba(52, 62, 68, 0.08); font-family: "Segoe UI", "Yu Gothic UI", Arial, sans-serif; font-size: 11px; line-height: 23px; } .pet-installer-browse { grid-column: 2; width: auto; min-width: 68px; margin: 0; } .pet-installer-location-copy > small { grid-column: 1 / -1; width: auto; margin-top: 8px; color: #6e797f; font-family: "Yu Gothic UI", "Yu Gothic", Arial, sans-serif; font-size: 9px; line-height: 1.45; } .pet-installer-browse, .pet-installer-cancel, .pet-installer-install, .pet-installer-ok { height: 25px; padding: 0 10px; border: 1px solid #8d9aa1; border-radius: 4px; color: #263841; background: #ffffff; box-shadow: none; text-shadow: none; font-family: "Segoe UI", "Yu Gothic UI", Arial, sans-serif; font-size: 10px; font-weight: 700; line-height: 23px; } .pet-installer-actions { min-height: 36px; padding: 5px 8px 7px; justify-content: flex-end; align-items: center; gap: 6px; background: #e9eef1; border-top: 1px solid #c6d0d5; } .pet-installer-cancel, .pet-installer-install { width: auto; min-width: 58px; } .pet-installer-browse:hover, .pet-installer-cancel:hover, .pet-installer-install:hover, .pet-installer-ok:hover, .pet-installer-browse:focus-visible, .pet-installer-cancel:focus-visible, .pet-installer-install:focus-visible, .pet-installer-ok:focus-visible { border-color: #657983; color: #1d313b; background: #f7fbfd; box-shadow: none; } .pet-installer-window footer { height: auto; min-height: 20px; padding: 5px 9px 6px; border-top: 1px solid #c8d1d5; color: #859198; background: #e9eef1; font-family: "Courier New", monospace; font-size: 7px; line-height: 1; letter-spacing: 0.03em; } .pet-installer-body.is-progress-step, .pet-installer-body.is-complete-step { background: #f5f7f8; } .pet-installer-progress { border-color: #8fa0a8; border-radius: 3px; } .pet-installer-complete-icon { border-color: #6b8f78; background: #84b695; } .home-page .home-ad-stack .desktop-pet-card { aspect-ratio: 2 / 1; overflow: hidden; } .home-page .home-ad-stack .desktop-pet-card img, .home-page .home-ad-stack .desktop-pet-card img:first-child { width: 100%; height: 100%; margin: 0; display: block; object-fit: contain; object-position: center; transform: none; } .fashion-page .fashion-channel-strip + .fashion-latest { margin-top: 12px !important; } .about-page-shell .about-copy-panel .about-body { margin-top: 6px; padding: 18px clamp(22px, 4vw, 52px) clamp(22px, 4vw, 52px); } .about-page-shell .about-copy-panel .about-body { margin-top: 0; padding: clamp(22px, 4vw, 52px); } .about-page-shell .about-story-switch { margin-top: -135px; } @media (max-width: 900px) { .about-page-shell .about-story-switch { margin-top: 0; } } .home-page .magazine-shelf-card.magazine-collection-widget, .home-page .magazine-widget-shell, .home-page .magazine-widget-header, .home-page .magazine-widget-counts > div, .home-page .magazine-review-drawer { background: #ffffff !important; } .home-page .magazine-shelf-card.magazine-collection-widget { } .about-page-shell .profile-summary { display: flex !important; flex-direction: column; } .about-page-shell .about-switcher { margin-top: auto !important; align-self: stretch !important; } .about-page-shell .about-story-switch { margin-top: -12px !important; } @media (max-width: 900px) { .about-page-shell .about-story-switch { margin-top: 0 !important; } } .home-page { --omz-aqua-ink: #243740; --omz-aqua-muted: #64727a; --omz-aqua-line: #76868e; --omz-aqua-line-dark: #596a72; --omz-aqua-white: #ffffff; --omz-aqua-silver-1: #fdfefe; --omz-aqua-silver-2: #edf1f3; --omz-aqua-silver-3: #cfd7db; --omz-aqua-silver-4: #aebac0; --omz-aqua-blue-1: #f4fdff; --omz-aqua-blue-2: #bfeafa; --omz-aqua-blue-3: #5fc0e9; --omz-aqua-blue-4: #168fc4; --omz-aqua-blue-5: #086b9a; --omz-aqua-pink-1: #fff5fb; --omz-aqua-pink-2: #f2cfe2; --omz-aqua-pink-3: #d78eb5; --omz-aqua-violet-1: #f7f3ff; --omz-aqua-violet-2: #d7cee8; --omz-aqua-violet-3: #9e8fbc; --omz-aqua-shadow-control: 0 1px 2px rgba(37,48,55,.26); --omz-aqua-shadow-panel: 0 4px 9px rgba(35,45,51,.17); --omz-aqua-ui-font: "Lucida Grande", "Helvetica Neue", "Segoe UI", Tahoma, Arial, sans-serif; --omz-aqua-mono-font: "Courier New", monospace; } .home-page :is( .photo-vault, .about-card, .feature-panel, .notes-panel, .magazine-shelf-card.magazine-collection-widget ) { border: 1px solid var(--omz-aqua-line) !important; border-radius: 7px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), var(--omz-aqua-shadow-panel) !important; } .home-page :is(.about-card, .feature-panel, .notes-panel) { background: repeating-linear-gradient( 0deg, rgba(255,255,255,.34) 0 1px, rgba(132,146,154,.045) 1px 2px, transparent 2px 4px ), linear-gradient(180deg, #f5f7f8 0%, #e6ecef 100%) !important; } .home-page .photo-vault { overflow: hidden !important; background: #c8ced1 !important; } .home-page .magazine-shelf-card.magazine-collection-widget { overflow: hidden !important; background: #f7f9fa !important; } .home-page .panel-titlebar, .home-page .magazine-widget-header { min-height: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 8px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; border: 0 !important; border-bottom: 1px solid #819097 !important; color: #324750 !important; background: repeating-linear-gradient( 0deg, rgba(255,255,255,.38) 0 1px, rgba(86,101,109,.06) 1px 2px, transparent 2px 4px ), linear-gradient( 180deg, #ffffff 0%, #f3f6f7 42%, #d9e0e3 49%, #bec9ce 54%, #edf1f3 100% ) !important; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(74,89,97,.12) !important; text-shadow: 0 1px 0 #fff !important; font: 700 9px/1 var(--omz-aqua-mono-font) !important; letter-spacing: .015em !important; } .home-page .magazine-widget-header { margin: -10px -12px 8px !important; padding-inline: 9px !important; } .home-page .panel-titlebar h2, .home-page .magazine-widget-header h2 { margin: 0 !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; } .home-page .feature-panel .panel-controls { font-size: 0 !important; letter-spacing: 0 !important; } .home-page .feature-panel .panel-controls::after { content: "ARTICLE VIEW"; color: #69777e; font: 700 8px/1 var(--omz-aqua-mono-font); letter-spacing: .06em; } .home-page :is( .about-card .about-button.pill-button, .magazine-read-button ) { min-height: 28px !important; height: 28px !important; padding: 0 13px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border: 1px solid #75858d !important; border-radius: 14px !important; color: #263a44 !important; background: linear-gradient( 180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.25) 39%, rgba(255,255,255,.02) 100% ), linear-gradient( 180deg, #fdfefe 0%, #edf1f3 45%, #c7d0d5 52%, #e7edef 76%, #f8fafb 100% ) !important; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(60,75,83,.14), 0 1px 2px rgba(37,48,55,.26) !important; text-shadow: 0 1px 0 #fff !important; font: 700 9px/1 var(--omz-aqua-ui-font) !important; letter-spacing: .035em !important; } .home-page :is( .about-card .about-button.pill-button, .magazine-read-button ):hover { color: #173f52 !important; border-color: #5d8598 !important; background: linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 37%, rgba(255,255,255,.20) 38%, rgba(255,255,255,.02) 100% ), linear-gradient( 180deg, #f8fdff 0%, #dff4fb 45%, #a8d9eb 52%, #d9f0f8 77%, #f7fdff 100% ) !important; } .home-page :is( .about-card .about-button.pill-button, .magazine-read-button ):active { transform: translateY(1px) !important; background: linear-gradient(180deg, #cfd7db 0%, #e9eef0 55%, #f8fafb 100%) !important; box-shadow: inset 0 2px 4px rgba(45,62,71,.25), 0 1px 1px rgba(37,48,55,.10) !important; } .home-page .read-button { --capsule-color-width: 0px !important; min-height: 32px !important; height: 32px !important; margin: 0 0 8px !important; padding: 0 15px !important; position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #27799f !important; border-radius: 16px !important; color: #ffffff !important; background: radial-gradient(ellipse at 50% -8%, rgba(255,255,255,.96) 0 16%, transparent 48%), linear-gradient( 180deg, #9be5fa 0%, #5cc7ee 40%, #159bce 50%, #087bae 58%, #35add7 79%, #89d7ed 100% ) !important; background-size: 100% 100% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -3px 4px rgba(0,76,114,.28), 0 1px 2px rgba(31,62,77,.30), 0 0 0 rgba(58,178,224,0) !important; text-shadow: 0 -1px 0 rgba(0,74,110,.72) !important; transform: none !important; font: 700 10px/1 var(--omz-aqua-ui-font) !important; letter-spacing: .025em !important; animation: omz-aqua-default-pulse 2.4s ease-in-out infinite; } .home-page .read-button::before, .home-page .read-button::after { display: none !important; } @keyframes omz-aqua-default-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -3px 4px rgba(0,76,114,.28), 0 1px 2px rgba(31,62,77,.30), 0 0 0 0 rgba(58,178,224,0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -3px 4px rgba(0,76,114,.24), 0 1px 2px rgba(31,62,77,.28), 0 0 0 3px rgba(79,193,232,.16); } } .home-page .feature-link:hover .read-button { transform: none !important; filter: brightness(1.035) saturate(1.03) !important; } .home-page .feature-link:active .read-button { transform: translateY(1px) !important; animation: none !important; filter: none !important; background: linear-gradient(180deg, #0a75a4 0%, #168fc2 40%, #60c4e7 100%) !important; box-shadow: inset 0 3px 5px rgba(0,65,98,.32), 0 1px 1px rgba(31,62,77,.16) !important; } .home-page :is( .shuffle-button, .magazine-widget-tools button, .photo-controls button ) { min-height: 23px !important; height: 23px !important; padding: 0 7px !important; border: 1px solid #788891 !important; border-radius: 5px !important; color: #314650 !important; background: linear-gradient( 180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.78) 39%, rgba(255,255,255,.10) 40%, transparent 100% ), linear-gradient(180deg, #f7f9fa 0%, #d9e0e3 52%, #edf1f3 100%) !important; box-shadow: inset 0 1px 0 #fff, var(--omz-aqua-shadow-control) !important; text-shadow: 0 1px 0 #fff !important; font: 700 8px/1 var(--omz-aqua-ui-font) !important; letter-spacing: .02em !important; } .home-page :is( .shuffle-button, .magazine-widget-tools button, .photo-controls button ):hover:not(:disabled) { color: #1b4557 !important; border-color: #668696 !important; background: linear-gradient( 180deg, #ffffff 0%, #effaff 40%, #b9dfed 52%, #edf9fd 100% ) !important; } .home-page :is( .shuffle-button, .magazine-widget-tools button, .photo-controls button ):active:not(:disabled) { transform: translateY(1px) !important; box-shadow: inset 0 2px 3px rgba(42,65,76,.24), 0 1px 1px rgba(37,48,55,.10) !important; } .home-page .magazine-widget-tools { display: flex !important; align-items: center !important; gap: 4px !important; } .home-page .magazine-widget-tools button { width: 23px !important; min-width: 23px !important; padding: 0 !important; border-radius: 50% !important; font-size: 11px !important; } .home-page #magazine-info-button { border-color: #5f8597 !important; color: #286078 !important; background: radial-gradient(circle at 38% 25%, #fff 0 12%, transparent 15%), linear-gradient(180deg, #eafaff 0%, #9fd9ed 48%, #66bad8 55%, #d7f1fa 100%) !important; } .home-page #magazine-close-button { border-color: #9b6570 !important; color: #7c2d3b !important; background: radial-gradient(circle at 38% 25%, #fff 0 12%, transparent 15%), linear-gradient(180deg, #fff0f3 0%, #efb8c2 48%, #d78391 55%, #f5d1d7 100%) !important; } .home-page .photo-add-button { min-width: 174px !important; min-height: 43px !important; padding: 6px 9px !important; border: 1px solid #78878f !important; border-radius: 5px !important; color: #2d4049 !important; background: linear-gradient( 180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.88) 39%, rgba(255,255,255,.16) 40%, transparent 100% ), linear-gradient(180deg, #f8fafb 0%, #d8e0e3 54%, #eef2f4 100%) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(37,48,55,.20) !important; font-family: var(--omz-aqua-ui-font) !important; } .home-page .photo-add-button b { width: 21px !important; height: 21px !important; display: grid !important; place-items: center !important; border: 1px solid #70838d !important; border-radius: 4px !important; color: #2b4d5d !important; background: linear-gradient(180deg, #fff, #e5eef2 48%, #cad8df 53%, #f1f6f8) !important; box-shadow: inset 0 1px 0 #fff !important; } .home-page .photo-controls { min-height: 33px !important; padding: 4px 5px !important; gap: 5px !important; border: 1px solid #7b8990 !important; border-radius: 6px !important; color: #344750 !important; background: repeating-linear-gradient(0deg, rgba(255,255,255,.24) 0 1px, transparent 1px 3px), rgba(244,248,250,.95) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 2px 4px rgba(42,54,61,.18) !important; backdrop-filter: blur(4px); } .home-page .photo-controls #photo-delete, .home-page .photo-controls #photo-delete:disabled { border-color: #9a737b !important; color: #763541 !important; background: linear-gradient(180deg, #fff, #f8e8eb 44%, #e3b4bd 53%, #f5dce1) !important; text-shadow: 0 1px 0 #fff !important; } .home-page .cover-label { padding: 6px 9px !important; border: 1px solid #7d7192 !important; border-radius: 3px !important; color: #433b52 !important; background: linear-gradient( 180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.64) 38%, rgba(255,255,255,.08) 39%, transparent 100% ), linear-gradient(180deg, #f7f3ff 0%, #d7cee8 52%, #b9aacd 56%, #eee8f5 100%) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(37,43,47,.20) !important; font: 800 9px/1 var(--omz-aqua-ui-font) !important; letter-spacing: .07em !important; } .home-page .micro-label { min-height: 21px !important; padding: 0 7px !important; display: inline-flex !important; align-items: center !important; border: 1px solid #9b7b8c !important; border-radius: 3px !important; color: #694153 !important; background: linear-gradient(180deg, #fff9fc 0%, #f3dce8 54%, #f8edf3 100%) !important; box-shadow: inset 0 1px 0 #fff !important; font: 800 8px/1 var(--omz-aqua-mono-font) !important; letter-spacing: .08em !important; } .home-page .category-tag { min-height: 22px !important; padding: 0 8px !important; border: 1px solid #859aa5 !important; border-radius: 4px !important; color: #365562 !important; background: linear-gradient(180deg, #faffff 0%, #dcebf1 100%) !important; box-shadow: inset 0 1px 0 #fff !important; font: 800 8px/1 var(--omz-aqua-mono-font) !important; letter-spacing: .065em !important; } .home-page .category-tag::before { width: 8px !important; height: 8px !important; border: 1px solid #4b7c91 !important; background: radial-gradient(circle at 34% 27%, #fff 0 13%, #a9edff 17%, #43b4df 55%, #176d95 100%) !important; box-shadow: 0 1px 1px rgba(39,66,78,.18) !important; } .home-page .about-card { padding: 18px !important; } .home-page .feature-panel, .home-page .notes-panel { overflow: hidden !important; } .home-page .feature-body { padding: 12px !important; } .home-page .feature-image-wrap { border: 1px solid #6f7f87 !important; background: #c9ced1 !important; box-shadow: inset 0 1px 2px rgba(38,48,54,.15) !important; } .home-page .recommendation-grid { padding: 9px !important; gap: 9px !important; background: repeating-linear-gradient(0deg, rgba(255,255,255,.24) 0 1px, transparent 1px 4px), #e9eef0 !important; } .home-page .recommendation-card { border: 1px solid #7d8b92 !important; border-radius: 3px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 1px 2px rgba(45,55,61,.10) !important; } .home-page .magazine-widget-shell { padding: 10px 12px 12px !important; background: #f8fafb !important; } .home-page .magazine-widget-counts > div { min-height: 49px !important; border-bottom: 1px solid #b4bec3 !important; background: transparent !important; } .home-page .magazine-widget-counts dd { min-height: 35px !important; border: 1px solid #a0acb2 !important; border-radius: 3px !important; background: linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%) !important; box-shadow: inset 1px 1px 2px rgba(66,82,90,.08) !important; } .home-page :is( .photo-add-button, .photo-controls button, .about-button, .read-button, .shuffle-button, .magazine-widget-tools button, .magazine-read-button ):focus-visible { outline: 2px solid #4aa8d0 !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { .home-page .read-button { animation: none !important; } } @media (max-width: 720px) { .home-page :is( .photo-controls button, .shuffle-button, .magazine-widget-tools button ) { min-height: 36px !important; height: 36px !important; } .home-page :is( .about-card .about-button.pill-button, .magazine-read-button, .read-button ) { min-height: 44px !important; height: 44px !important; border-radius: 22px !important; } } .home-page .feature-panel { position: relative !important; border: 2px solid #3f91b3 !important; border-radius: 8px !important; background: repeating-linear-gradient( 0deg, rgba(255,255,255,.42) 0 1px, rgba(101,129,143,.045) 1px 2px, transparent 2px 4px ), linear-gradient(180deg, #f9fcfd 0%, #edf4f7 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 0 0 1px rgba(255,255,255,.78), 0 5px 12px rgba(35,73,92,.22), 0 0 14px rgba(74,181,222,.12) !important; } .home-page .feature-panel .panel-titlebar { min-height: 31px !important; height: 31px !important; padding: 0 8px 0 10px !important; border-bottom: 1px solid #286d8d !important; color: #ffffff !important; background: radial-gradient( ellipse at 50% -18%, rgba(255,255,255,.96) 0 16%, transparent 46% ), linear-gradient( 180deg, #dff8ff 0%, #8fd8ef 12%, #46b1d9 46%, #1688b9 52%, #2c9ec7 73%, #78c8e2 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,75,112,.20) !important; text-shadow: 0 -1px 0 rgba(0,73,106,.65) !important; } .home-page .feature-panel .panel-controls::after { content: "LATEST ARTICLE" !important; min-height: 18px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid rgba(121,67,94,.70); border-radius: 9px; color: #63364e; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.95) 0 18%, transparent 54%), linear-gradient( 180deg, #fff5fb 0%, #f3d2e4 40%, #d990b5 52%, #edc2d8 78%, #fff4fa 100% ); box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(53,58,63,.18); text-shadow: 0 1px 0 rgba(255,255,255,.9); font: 800 7px/1 var(--omz-aqua-ui-font); letter-spacing: .08em; } .home-page .feature-panel .feature-body { padding: 13px !important; } .home-page .feature-panel .feature-image-wrap { border: 1px solid #5f7784 !important; border-radius: 2px !important; background: #bfc7cb !important; box-shadow: inset 0 1px 2px rgba(34,45,52,.20), 0 1px 0 rgba(255,255,255,.78) !important; } .home-page .feature-panel .category-tag { min-height: 23px !important; padding: 0 9px !important; border-color: #568ba2 !important; color: #214b5f !important; background: linear-gradient( 180deg, #ffffff 0%, #e6f7fd 45%, #b6dfef 53%, #edfaff 100% ) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(48,77,91,.14) !important; } .home-page .feature-panel .feature-body h1 { margin-top: 11px !important; color: #111820 !important; font-weight: 800 !important; letter-spacing: -0.035em !important; } .home-page .feature-panel .feature-copy { color: #3c4d56 !important; } .home-page .feature-panel .read-button { min-height: 36px !important; height: 36px !important; border-radius: 18px !important; border-color: #1779a5 !important; background: radial-gradient( ellipse at 50% -12%, rgba(255,255,255,.98) 0 17%, transparent 50% ), linear-gradient( 180deg, #a6e9fb 0%, #66ccf0 39%, #1aa8d8 50%, #087faf 58%, #36b1d9 79%, #91deef 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -3px 4px rgba(0,73,109,.28), 0 2px 3px rgba(27,72,91,.28), 0 0 0 2px rgba(78,188,227,.08) !important; font-size: 10px !important; letter-spacing: .02em !important; } .home-page .feature-link:hover .read-button { filter: brightness(1.045) saturate(1.04) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -3px 4px rgba(0,73,109,.24), 0 3px 5px rgba(27,72,91,.30), 0 0 0 3px rgba(78,188,227,.10) !important; } .home-page .feature-link:active .read-button { transform: translateY(1px) !important; filter: none !important; background: linear-gradient(180deg, #0b78a5 0%, #1695c5 44%, #62c9e8 100%) !important; box-shadow: inset 0 3px 5px rgba(0,61,92,.34), 0 1px 1px rgba(27,72,91,.14) !important; } @media (max-width: 720px) { .home-page .feature-panel .panel-titlebar { min-height: 32px !important; height: 32px !important; } .home-page .feature-panel .read-button { min-height: 44px !important; height: 44px !important; border-radius: 22px !important; } } .home-page .magazine-shelf-card.magazine-collection-widget { position: relative !important; overflow: visible !important; } .home-page .magazine-widget-shell { overflow: hidden !important; border-radius: 6px !important; } .home-page #magazine-info-button { width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; border-radius: 50% !important; } .home-page #magazine-close-button { width: 21px !important; min-width: 21px !important; height: 21px !important; min-height: 21px !important; padding: 0 !important; position: absolute !important; z-index: 8 !important; top: -7px !important; right: -7px !important; display: grid !important; place-items: center !important; border: 1px solid #8f8f8f !important; border-radius: 1px !important; color: #222 !important; background: linear-gradient( 180deg, #ffffff 0%, #f2f2f2 48%, #d5d5d5 52%, #eeeeee 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 1px 2px rgba(0,0,0,.24) !important; text-shadow: 0 1px 0 #fff !important; font: 400 17px/19px Arial, sans-serif !important; letter-spacing: 0 !important; transform: none !important; } .home-page #magazine-close-button:hover, .home-page #magazine-close-button:focus-visible { color: #000 !important; border-color: #555 !important; background: linear-gradient( 180deg, #ffffff 0%, #ffffff 45%, #cccccc 53%, #e7e7e7 100% ) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.32) !important; } .home-page #magazine-close-button:active { transform: translateY(1px) !important; background: linear-gradient(180deg, #cfcfcf, #f5f5f5) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.55) !important; } .home-page .magazine-widget-header { padding-right: 30px !important; } .home-page .magazine-widget-header::after { content: "WIDGET"; margin-left: auto; margin-right: 2px; color: #879198; font: 700 6px/1 var(--omz-aqua-mono-font); letter-spacing: .08em; opacity: .72; } .home-page .magazine-widget-tools { margin-left: 3px !important; } .home-page .magazine-shelf-card.magazine-collection-widget { border: 1px solid #a3a9ad !important; border-radius: 4px !important; background: #ffffff !important; } .home-page .magazine-widget-header { min-height: 22px !important; height: 22px !important; margin: -10px -12px 7px !important; padding: 5px 31px 2px 7px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; border: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; color: #333 !important; background: #ffffff !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; font: 700 8px/1 var(--omz-aqua-mono-font) !important; letter-spacing: .02em !important; } .home-page .magazine-widget-header::after { display: none !important; content: none !important; } .home-page .magazine-widget-header h2 { margin: 0 !important; padding: 0 !important; color: #333 !important; font: 700 8px/1 var(--omz-aqua-mono-font) !important; letter-spacing: .02em !important; } .home-page .magazine-widget-tools { position: static !important; margin: 0 !important; gap: 0 !important; } .home-page #magazine-info-button { width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; position: absolute !important; z-index: 7 !important; top: 3px !important; right: 18px !important; padding: 0 !important; border: 1px solid #aaa !important; border-radius: 50% !important; color: #666 !important; background: #f7f7f7 !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; font: 700 9px/14px Arial, sans-serif !important; transform: none !important; } .home-page #magazine-info-button:hover, .home-page #magazine-info-button:focus-visible { color: #222 !important; border-color: #777 !important; background: #fff !important; outline: none !important; } .home-page #magazine-close-button { top: -6px !important; right: -6px !important; } .home-page .magazine-widget-shell { border-radius: 4px !important; background: #ffffff !important; box-shadow: none !important; } .home-page .magazine-widget-counts > div { background: #fff !important; } .home-page .magazine-read-button { margin-top: 8px !important; } .home-page .magazine-widget-header::before { content: "SPONSORED WIDGET"; margin-right: 7px; color: #9a9a9a; font: 700 6px/1 Arial, sans-serif; letter-spacing: .07em; } .home-page .magazine-widget-header h2 { color: #2b2b2b !important; font: 800 10px/1 var(--omz-aqua-mono-font) !important; letter-spacing: .015em !important; } .home-page .magazine-widget-header::before { margin-right: 8px !important; color: #999 !important; font: 700 6px/1 Arial, sans-serif !important; letter-spacing: .07em !important; } .home-page #magazine-info-button, .home-page #magazine-close-button { width: 21px !important; min-width: 21px !important; height: 21px !important; min-height: 21px !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 1px solid #8f8f8f !important; border-radius: 1px !important; color: #222 !important; background: linear-gradient( 180deg, #ffffff 0%, #f2f2f2 48%, #d5d5d5 52%, #eeeeee 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 1px 2px rgba(0,0,0,.24) !important; text-shadow: 0 1px 0 #fff !important; transform: none !important; } .home-page #magazine-info-button { position: absolute !important; z-index: 8 !important; top: -6px !important; right: 18px !important; border-radius: 1px !important; font: 700 11px/19px Arial, sans-serif !important; } .home-page #magazine-close-button { top: -6px !important; right: -6px !important; font: 400 17px/19px Arial, sans-serif !important; } .home-page #magazine-info-button:hover, .home-page #magazine-info-button:focus-visible, .home-page #magazine-close-button:hover, .home-page #magazine-close-button:focus-visible { color: #000 !important; border-color: #555 !important; background: linear-gradient( 180deg, #ffffff 0%, #ffffff 45%, #cccccc 53%, #e7e7e7 100% ) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.32) !important; outline: none !important; } .home-page #magazine-info-button:active, .home-page #magazine-close-button:active { transform: translateY(1px) !important; background: linear-gradient(180deg, #cfcfcf, #f5f5f5) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.55) !important; } .home-page .magazine-widget-header { padding-right: 49px !important; } .home-page .magazine-widget-header::before { display: none !important; content: none !important; } .home-page .magazine-widget-header h2 { margin-left: 0 !important; } .home-page .about-card, .home-page .notes-panel { background: linear-gradient( 180deg, #f7f9fa 0%, #eef2f4 48%, #e2e8eb 100% ) !important; } .home-page .feature-panel { background: linear-gradient( 180deg, #fbfdfe 0%, #f3f8fa 46%, #e8f0f3 100% ) !important; } .home-page .recommendation-grid { background: linear-gradient( 180deg, #f4f6f7 0%, #e5eaed 100% ) !important; } .home-page .photo-controls { background: linear-gradient( 180deg, rgba(250,252,253,.97) 0%, rgba(232,239,242,.96) 100% ) !important; } .home-page .magazine-widget-shell { background: #ffffff !important; } .home-page .magazine-shelf-card.magazine-collection-widget { border: 1px solid #b8b8b8 !important; border-radius: 2px !important; background: #ffffff !important; overflow: visible !important; } .home-page .magazine-widget-shell { padding: 0 !important; border-radius: 2px !important; background: #ffffff !important; box-shadow: none !important; overflow: visible !important; } .home-page .magazine-widget-header { min-height: auto !important; height: auto !important; margin: 0 !important; padding: 10px 42px 0 12px !important; display: block !important; border: 0 !important; border-radius: 0 !important; background: #ffffff !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; } .home-page .magazine-widget-header::before, .home-page .magazine-widget-header::after { display: none !important; content: none !important; } .home-page .magazine-widget-header h2 { display: block !important; margin: 0 0 6px !important; padding: 0 !important; color: #2638b5 !important; font: 800 13px/1.08 "Arial", "Helvetica Neue", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; } .home-page .magazine-widget-header h2::after { content: "magazinecollection.jp"; display: block; margin-top: 5px; color: #4f9a40; font: 700 9px/1.1 Arial, sans-serif; letter-spacing: .01em; } .home-page .magazine-widget-tools { position: absolute !important; top: 3px !important; right: 3px !important; z-index: 9 !important; display: flex !important; gap: 2px !important; margin: 0 !important; } .home-page #magazine-info-button, .home-page #magazine-close-button { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; position: static !important; border: 1px solid #a0a0a0 !important; border-radius: 1px !important; color: #333 !important; background: #f4f4f4 !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; } .home-page #magazine-info-button { font: 700 10px/16px Arial, sans-serif !important; } .home-page #magazine-close-button { font: 400 15px/15px Arial, sans-serif !important; } .home-page #magazine-info-button:hover, .home-page #magazine-close-button:hover, .home-page #magazine-info-button:focus-visible, .home-page #magazine-close-button:focus-visible { border-color: #6f6f6f !important; background: #ffffff !important; outline: none !important; } .home-page .magazine-widget-counts { padding: 8px 12px 10px !important; } .home-page .magazine-widget-counts > div { min-height: 40px !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 96px !important; grid-template-areas: "title box" "sub   box" !important; align-items: center !important; column-gap: 12px !important; border-bottom: 0 !important; background: transparent !important; } .home-page .magazine-widget-counts > div + div { margin-top: 9px !important; } .home-page .magazine-widget-counts dt { grid-area: title !important; margin: 0 !important; align-self: end !important; color: #222 !important; font: 800 10px/1.1 "Arial", "Helvetica Neue", sans-serif !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .home-page .magazine-widget-counts dd { margin: 0 !important; } .home-page .magazine-widget-counts dt small, .home-page .magazine-widget-counts .widget-note, .home-page .magazine-widget-counts .widget-sub, .home-page .magazine-widget-counts > div > p { color: #8a8a8a !important; font: 400 9px/1.2 Arial, sans-serif !important; } .home-page .magazine-widget-counts > div > :not(dt):not(dd):not(button) { grid-area: sub !important; margin: 2px 0 0 !important; align-self: start !important; color: #8a8a8a !important; font: 400 9px/1.2 Arial, sans-serif !important; } .home-page .magazine-widget-counts dd { grid-area: box !important; min-height: 32px !important; padding: 0 8px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; border: 1px solid #b7bdc3 !important; border-radius: 1px !important; background: #ffffff !important; box-shadow: inset 0 1px 1px rgba(0,0,0,.04) !important; } .home-page .magazine-read-button { width: calc(100% - 24px) !important; margin: 8px 12px 12px !important; min-height: 28px !important; height: 28px !important; border: 1px solid #9ca8b1 !important; border-radius: 14px !important; color: #243b48 !important; background: linear-gradient( 180deg, #ffffff 0%, #edf2f5 46%, #d4dde3 54%, #eef3f6 100% ) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.08) !important; font: 700 10px/1 var(--omz-aqua-ui-font) !important; } .home-page .magazine-read-button:hover { background: linear-gradient( 180deg, #ffffff 0%, #f6fbfd 46%, #dcecf4 54%, #f5fbfd 100% ) !important; } .home-page .magazine-read-button:active { transform: translateY(1px) !important; box-shadow: inset 0 2px 3px rgba(0,0,0,.10) !important; } .home-page .notes-panel .panel-titlebar { min-height: 28px !important; height: 28px !important; border-bottom: 1px solid #7f8f97 !important; color: #30434d !important; background: linear-gradient( 180deg, #ffffff 0%, #f5f7f8 42%, #dde4e7 49%, #c8d2d7 54%, #eef2f4 100% ) !important; background-image: linear-gradient( 180deg, #ffffff 0%, #f5f7f8 42%, #dde4e7 49%, #c8d2d7 54%, #eef2f4 100% ) !important; box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(74,89,97,.12) !important; text-shadow: 0 1px 0 #ffffff !important; } .home-page .notes-panel .panel-titlebar h2 { color: #2c414b !important; font-weight: 700 !important; } .home-page .notes-panel .shuffle-button { position: relative !important; z-index: 1 !important; } .home-page .magazine-widget-header { padding: 10px 44px 0 12px !important; } .home-page .magazine-widget-header h2 { margin: 0 0 6px !important; color: #2638b5 !important; font: 800 13px/1.08 Arial, "Helvetica Neue", sans-serif !important; letter-spacing: 0 !important; } .home-page .magazine-widget-header h2::after { content: "magazinecollection.jp" !important; display: block !important; margin-top: 5px !important; color: #4f9a40 !important; font: 700 9px/1.1 Arial, sans-serif !important; letter-spacing: .01em !important; } .home-page .magazine-widget-header::after { content: "下のボタンからレビュー公開中！" !important; display: block !important; margin-top: 12px !important; color: #2b2b2b !important; font: 800 11px/1.35 Arial, "Helvetica Neue", sans-serif !important; letter-spacing: .01em !important; } .home-page .magazine-widget-counts { padding-top: 12px !important; } .home-page .magazine-read-button { width: 62px !important; min-width: 62px !important; height: 62px !important; min-height: 62px !important; margin: 18px auto 15px !important; padding: 0 !important; position: relative !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; background: radial-gradient( circle at 38% 30%, #e1e1e1 0%, #cecece 45%, #bcbcbc 72%, #b2b2b2 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 1px 3px rgba(0,0,0,.10) !important; text-shadow: none !important; font-size: 0 !important; letter-spacing: 0 !important; } .home-page .magazine-read-button > span, .home-page .magazine-read-button > b { width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; position: absolute !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } .home-page .magazine-read-button::before { content: "<" !important; display: block !important; color: #ffffff !important; font: 300 37px/.9 "Helvetica Neue", Arial, sans-serif !important; transform: translateX(-1px) translateY(-1px) !important; text-shadow: 0 1px 1px rgba(0,0,0,.08) !important; } .home-page .magazine-read-button:hover { background: radial-gradient( circle at 38% 30%, #ebebeb 0%, #d8d8d8 45%, #c4c4c4 72%, #b8b8b8 100% ) !important; } .home-page .magazine-read-button:active { transform: translateY(1px) !important; background: radial-gradient( circle at 42% 38%, #b6b6b6 0%, #c1c1c1 52%, #d0d0d0 100% ) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.10) !important; } @media (max-width: 720px) { .home-page .magazine-read-button { width: 68px !important; min-width: 68px !important; height: 68px !important; min-height: 68px !important; border-radius: 50% !important; } } .home-page .magazine-read-button { box-sizing: border-box !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; inline-size: 64px !important; min-inline-size: 64px !important; max-inline-size: 64px !important; block-size: 64px !important; min-block-size: 64px !important; max-block-size: 64px !important; flex: 0 0 64px !important; aspect-ratio: 1 / 1 !important; margin: 18px auto 16px !important; padding: 0 !important; display: grid !important; place-items: center !important; align-self: center !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; background: #c9c9c9 !important; background-image: radial-gradient( circle at 38% 30%, #dedede 0%, #d3d3d3 38%, #c5c5c5 70%, #bdbdbd 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 1px 3px rgba(0,0,0,.10) !important; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; transform: none !important; } .home-page .magazine-read-button > span, .home-page .magazine-read-button > b { display: none !important; } .home-page .magazine-read-button::before { content: "<" !important; width: auto !important; height: auto !important; position: static !important; display: block !important; color: rgba(255,255,255,.92) !important; background: none !important; border: 0 !important; box-shadow: none !important; font: 300 38px/.8 "Helvetica Neue", Arial, sans-serif !important; text-shadow: 0 1px 1px rgba(0,0,0,.08) !important; transform: translate(-1px, -1px) !important; } .home-page .magazine-read-button::after { display: none !important; content: none !important; } .home-page .magazine-read-button:hover { background: #d0d0d0 !important; background-image: radial-gradient( circle at 38% 30%, #e8e8e8 0%, #d8d8d8 40%, #c9c9c9 72%, #c0c0c0 100% ) !important; } .home-page .magazine-read-button:active { transform: translateY(1px) !important; background: #bdbdbd !important; background-image: radial-gradient( circle at 45% 42%, #b8b8b8 0%, #c2c2c2 55%, #d0d0d0 100% ) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.50) !important; } @media (max-width: 720px) { .home-page .magazine-read-button { width: 68px !important; min-width: 68px !important; max-width: 68px !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; inline-size: 68px !important; block-size: 68px !important; flex-basis: 68px !important; } } .home-page .magazine-read-button { background: #b9b9b9 !important; background-image: radial-gradient( circle at 38% 30%, #d6d6d6 0%, #c9c9c9 38%, #b9b9b9 70%, #aeaeae 100% ) !important; } .home-page .magazine-read-button::before { content: "" !important; width: 17px !important; height: 17px !important; display: block !important; position: static !important; border: 0 !important; border-left: 4px solid rgba(255,255,255,.98) !important; border-bottom: 4px solid rgba(255,255,255,.98) !important; border-radius: 1px !important; background: none !important; box-shadow: none !important; transform: translateX(3px) rotate(45deg) !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)) !important; } .home-page .magazine-read-button:hover::before { border-left-color: #ffffff !important; border-bottom-color: #ffffff !important; } .home-page .magazine-read-button:active::before { border-left-color: rgba(255,255,255,.96) !important; border-bottom-color: rgba(255,255,255,.96) !important; } .home-page .magazine-widget-header::after { content: "下のボタンから雑誌のレビュー無料で公開中！！" !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button { -webkit-appearance: none !important; appearance: none !important; width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 66px !important; min-height: 66px !important; max-height: 66px !important; inline-size: 66px !important; min-inline-size: 66px !important; max-inline-size: 66px !important; block-size: 66px !important; min-block-size: 66px !important; max-block-size: 66px !important; flex: 0 0 66px !important; aspect-ratio: 1 / 1 !important; margin: 20px auto 17px !important; padding: 0 !important; position: relative !important; display: block !important; justify-self: center !important; align-self: center !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; background: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; overflow: visible !important; transform: none !important; font-size: 0 !important; line-height: 0 !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button > span, .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button > b { display: none !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button::after { content: "" !important; width: 66px !important; height: 66px !important; position: absolute !important; z-index: 1 !important; inset: 0 !important; display: block !important; border: 0 !important; border-radius: 50% !important; clip-path: circle(50% at 50% 50%) !important; background: radial-gradient( circle at 36% 27%, #dedede 0%, #d1d1d1 36%, #bcbcbc 70%, #adadad 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 2px 5px rgba(0,0,0,.11) !important; pointer-events: none !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button::before { content: "" !important; width: 19px !important; height: 19px !important; position: absolute !important; z-index: 2 !important; top: 50% !important; left: 50% !important; display: block !important; border: 0 !important; border-left: 4px solid #ffffff !important; border-bottom: 4px solid #ffffff !important; border-radius: 1px !important; background: transparent !important; box-shadow: none !important; transform: translate(-38%, -50%) rotate(45deg) !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.13)) !important; pointer-events: none !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button:hover { background: transparent !important; box-shadow: none !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button:hover::after { background: radial-gradient( circle at 36% 27%, #e8e8e8 0%, #d9d9d9 36%, #c6c6c6 70%, #b6b6b6 100% ) !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button:active { transform: translateY(1px) !important; background: transparent !important; box-shadow: none !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button:active::after { background: radial-gradient( circle at 45% 42%, #b0b0b0 0%, #bebebe 52%, #cecece 100% ) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.13), 0 1px 0 rgba(255,255,255,.48) !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button:focus-visible { outline: 2px solid #6aaeca !important; outline-offset: 3px !important; border-radius: 50% !important; } @media (max-width: 720px) { .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button { width: 70px !important; min-width: 70px !important; max-width: 70px !important; height: 70px !important; min-height: 70px !important; max-height: 70px !important; inline-size: 70px !important; block-size: 70px !important; flex-basis: 70px !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button::after { width: 70px !important; height: 70px !important; } } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button::after { border: 1px solid #788a94 !important; border-radius: 50% !important; clip-path: circle(50% at 50% 50%) !important; background: radial-gradient( ellipse at 50% 15%, rgba(255,255,255,.96) 0 18%, rgba(255,255,255,.56) 19% 34%, transparent 36% ), linear-gradient( 180deg, #f8fbfc 0%, #e8eef1 38%, #c7d3d9 52%, #aebdc5 58%, #dbe5e9 78%, #f3f7f8 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -4px 6px rgba(64,82,92,.18), inset 3px 0 4px rgba(255,255,255,.40), inset -3px 0 4px rgba(54,72,82,.08), 0 2px 4px rgba(35,49,57,.20), 0 0 0 1px rgba(255,255,255,.55) !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button { filter: drop-shadow(0 0 3px rgba(72,161,198,.08)) !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button::before { width: 18px !important; height: 18px !important; border-left: 4px solid rgba(255,255,255,.98) !important; border-bottom: 4px solid rgba(255,255,255,.98) !important; filter: drop-shadow(0 -1px 0 rgba(82,100,110,.22)) drop-shadow(0 1px 1px rgba(35,49,57,.18)) !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button:hover::after { border-color: #678d9e !important; background: radial-gradient( ellipse at 50% 15%, rgba(255,255,255,1) 0 19%, rgba(255,255,255,.66) 20% 35%, transparent 37% ), linear-gradient( 180deg, #fbfeff 0%, #e9f6fb 38%, #bad9e6 52%, #9fc1cf 58%, #d6ecf4 78%, #f6fcfe 100% ) !important; box-shadow: inset 0 1px 0 #fff, inset 0 -4px 6px rgba(52,95,113,.16), 0 3px 5px rgba(35,72,89,.22), 0 0 0 2px rgba(86,173,207,.08) !important; } .home-page .magazine-shelf-card.magazine-collection-widget .magazine-read-button:active::after { border-color: #6e7f88 !important; background: linear-gradient( 180deg, #aab9c0 0%, #c4d0d5 48%, #e6ecef 100% ) !important; box-shadow: inset 0 4px 7px rgba(52,67,75,.22), inset 0 -1px 0 rgba(255,255,255,.60), 0 1px 1px rgba(35,49,57,.10) !important; } .home-page .magazine-shelf-card.magazine-collection-widget { border-radius: 7px !important; } .home-page .magazine-widget-shell { border-radius: 7px !important; } .home-page .magazine-widget-header { border-radius: 7px 7px 0 0 !important; } .home-page .photo-add-button, .home-page .photo-input, .home-page .photo-delete { display: none !important; } .home-page .photo-controls.photo-controls-viewer { grid-template-columns: 32px minmax(0,1fr) 32px !important; } .home-page .photo-cabinet-link { text-decoration: none !important; cursor: pointer !important; } .home-page .photo-cabinet-link:hover, .home-page .photo-cabinet-link:focus-visible { color: #2d4856 !important; border-color: #6e8c9c !important; background: linear-gradient( 180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,.08) 39%, transparent 100% ), linear-gradient(180deg, #f8f4ff 0%, #dcd4ea 52%, #b9afcb 56%, #f1ebf6 100%) !important; } .home-page .hanging-keychain.hanging-keychain-layered { width: clamp(158px, 15vw, 212px) !important; aspect-ratio: 2 / 3 !important; margin: auto 4px -6px auto !important; padding-top: 0 !important; position: relative !important; align-self: flex-end !important; z-index: 3 !important; pointer-events: none !important; overflow: visible !important; } .home-page .hanging-keychain.hanging-keychain-layered img { width: 100% !important; height: auto !important; position: absolute !important; inset: 0 !important; display: block !important; object-fit: contain !important; backface-visibility: hidden !important; } .home-page .hanging-keychain.hanging-keychain-layered .keychain-swing-layer { z-index: 1 !important; transform-origin: 50% 16% !important; will-change: transform !important; filter: drop-shadow(0 7px 10px rgba(28, 33, 37, 0.18)) !important; } .home-page .hanging-keychain.hanging-keychain-layered .keychain-eyelet-only { z-index: 2 !important; animation: none !important; transform: none !important; filter: drop-shadow(0 1px 1px rgba(28, 33, 37, 0.16)) !important; } .home-page .hanging-keychain.hanging-keychain-layered .keychain-eyelet-front { z-index: 3 !important; transform-origin: 50% 16% !important; will-change: transform !important; filter: drop-shadow(0 1px 1px rgba(28, 33, 37, 0.12)) !important; } .home-page .hanging-keychain.is-tab-swinging.hanging-keychain-layered .keychain-swing-layer, .home-page .hanging-keychain.is-tab-swinging.hanging-keychain-layered .keychain-eyelet-front { animation-name: tab-keychain-swing !important; animation-duration: 1650ms !important; animation-timing-function: cubic-bezier(0.23, 0.86, 0.29, 1) !important; animation-fill-mode: both !important; } .home-page .magazine-window.is-dragging .hanging-keychain.hanging-keychain-layered .keychain-swing-layer, .home-page .magazine-window.is-dragging .hanging-keychain.hanging-keychain-layered .keychain-eyelet-front { animation: drag-keychain-swing 250ms ease-in-out infinite alternate !important; } @media (max-width: 1000px) { .home-page .hanging-keychain.hanging-keychain-layered { width: 182px !important; margin-top: 18px !important; } } @media (max-width: 720px) { .home-page .hanging-keychain.hanging-keychain-layered { width: 146px !important; margin: 8px auto 0 !important; } } @media (max-width: 480px) { .home-page .right-column .hanging-keychain.hanging-keychain-layered { grid-column: auto !important; } } @media (prefers-reduced-motion: reduce) { .home-page .hanging-keychain.is-tab-swinging.hanging-keychain-layered .keychain-swing-layer, .home-page .hanging-keychain.is-tab-swinging.hanging-keychain-layered .keychain-eyelet-front, .home-page .magazine-window.is-dragging .hanging-keychain.hanging-keychain-layered .keychain-swing-layer, .home-page .magazine-window.is-dragging .hanging-keychain.hanging-keychain-layered .keychain-eyelet-front { animation: none !important; } } @media (min-width: 901px) { .about-page-shell .about-story-switch { margin-top: -142px !important; } } @media (max-width: 900px) { .about-page-shell .about-story-switch { margin-top: 0 !important; } } .about-page-shell .about-switcher { margin-top: auto !important; padding-top: 8px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; border-top: 1px solid #edcaca !important; align-self: stretch !important; } .about-page-shell .about-switcher button, .about-page-shell .about-switcher button:hover, .about-page-shell .about-switcher button.is-active { min-width: 0 !important; min-height: 30px !important; padding: 0 8px !important; display: grid !important; place-items: center !important; border: 1px solid #87949b !important; border-radius: 7px !important; color: #354851 !important; background: radial-gradient( ellipse at 50% -12%, rgba(255,255,255,.98) 0 18%, transparent 52% ), linear-gradient( 180deg, #ffffff 0%, #f5f7f8 40%, #dce3e6 50%, #c7d2d7 55%, #edf2f4 100% ) !important; box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 3px rgba(67,82,90,.12), 0 2px 2px rgba(46,59,66,.18) !important; text-shadow: 0 1px 0 #ffffff !important; transform: none !important; cursor: pointer !important; } .about-page-shell .about-switcher button.is-active { border-color: #b66f89 !important; color: #7f2044 !important; background: radial-gradient( ellipse at 50% -12%, rgba(255,255,255,.98) 0 18%, transparent 52% ), linear-gradient( 180deg, #fffafa 0%, #faeaf0 40%, #e9bfd0 51%, #d99ab4 56%, #f7dfe8 100% ) !important; box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 3px rgba(126,58,82,.13), 0 2px 2px rgba(84,47,60,.20) !important; } .about-page-shell .about-switcher button:hover:not(.is-active) { border-color: #6f93a3 !important; color: #244b5c !important; background: radial-gradient( ellipse at 50% -12%, rgba(255,255,255,1) 0 18%, transparent 52% ), linear-gradient( 180deg, #ffffff 0%, #f3fbfe 40%, #d4eaf3 51%, #b4d3df 56%, #edf8fb 100% ) !important; } .about-page-shell .about-switcher button:active { transform: translateY(1px) !important; box-shadow: inset 0 2px 4px rgba(57,74,83,.20), 0 1px 1px rgba(46,59,66,.10) !important; } .about-page-shell .about-switcher button.is-active { border-bottom-width: 1px !important; } .about-page-shell .about-switcher span { margin: 0 !important; display: block !important; color: inherit !important; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: 0 !important; white-space: normal !important; } .about-page-shell .profile-ticket .profile-motion video { transform: translateX(11px) scale(2.65) !important; transform-origin: 50% 44% !important; } @media (max-width: 700px) { .about-page-shell .profile-ticket .profile-motion video { transform: translateX(7px) scale(2.65) !important; } } .home-page .notes-panel { position: relative !important; overflow: hidden !important; border: 2px solid #3f91b3 !important; border-radius: 8px !important; background: linear-gradient( 180deg, #fbfdfe 0%, #f3f8fa 46%, #e8f0f3 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 0 0 1px rgba(255,255,255,.78), 0 5px 12px rgba(35,73,92,.22), 0 0 14px rgba(74,181,222,.12) !important; } .home-page .notes-panel .panel-titlebar { min-height: 31px !important; height: 31px !important; padding: 0 8px 0 10px !important; border: 0 !important; border-bottom: 1px solid #286d8d !important; border-radius: 0 !important; color: #ffffff !important; background: radial-gradient( ellipse at 50% -18%, rgba(255,255,255,.96) 0 16%, transparent 46% ), linear-gradient( 180deg, #dff8ff 0%, #8fd8ef 12%, #46b1d9 46%, #1688b9 52%, #2c9ec7 73%, #78c8e2 100% ) !important; background-image: radial-gradient( ellipse at 50% -18%, rgba(255,255,255,.96) 0 16%, transparent 46% ), linear-gradient( 180deg, #dff8ff 0%, #8fd8ef 12%, #46b1d9 46%, #1688b9 52%, #2c9ec7 73%, #78c8e2 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,75,112,.20) !important; text-shadow: 0 -1px 0 rgba(0,73,106,.65) !important; } .home-page .notes-panel .panel-titlebar h2 { margin: 0 !important; color: #ffffff !important; font: 700 9px/1 var(--omz-aqua-mono-font) !important; letter-spacing: .015em !important; text-shadow: 0 -1px 0 rgba(0,73,106,.65) !important; } .home-page .notes-panel .shuffle-button { min-height: 21px !important; height: 21px !important; padding: 0 8px !important; border: 1px solid rgba(45,91,111,.72) !important; border-radius: 10px !important; color: #31505d !important; background: radial-gradient( ellipse at 50% -15%, rgba(255,255,255,.98) 0 20%, transparent 54% ), linear-gradient( 180deg, #ffffff 0%, #f4f7f8 42%, #d6e0e4 52%, #eef3f5 100% ) !important; box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(23,66,84,.28) !important; text-shadow: 0 1px 0 #ffffff !important; } .home-page .notes-panel .shuffle-button:hover { border-color: #3c7890 !important; background: radial-gradient( ellipse at 50% -15%, rgba(255,255,255,1) 0 20%, transparent 54% ), linear-gradient( 180deg, #ffffff 0%, #eefaff 42%, #b9dfeC 52%, #edf9fd 100% ) !important; } .home-page .notes-panel .shuffle-button:active { transform: translateY(1px) !important; box-shadow: inset 0 2px 3px rgba(42,65,76,.22), 0 1px 1px rgba(23,66,84,.12) !important; } .home-page .notes-panel .recommendation-grid { margin: 0 !important; padding: 12px !important; gap: 10px !important; border: 0 !important; border-radius: 0 !important; background: linear-gradient( 180deg, #f7fafb 0%, #edf3f5 100% ) !important; box-shadow: none !important; } .home-page .notes-panel .recommendation-card { border: 1px solid #71838c !important; border-radius: 3px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.44), 0 1px 2px rgba(45,55,61,.12) !important; } @media (max-width: 720px) { .home-page .notes-panel .panel-titlebar { min-height: 32px !important; height: 32px !important; } .home-page .notes-panel .shuffle-button { min-height: 26px !important; height: 26px !important; border-radius: 13px !important; } } .about-page-shell .profile-deck { padding-bottom: 4px !important; } .about-page-shell .about-switcher button, .about-page-shell .about-switcher button:hover, .about-page-shell .about-switcher button.is-active { min-height: 40px !important; height: 40px !important; padding: 0 12px !important; border-radius: 8px !important; } .about-page-shell .about-switcher span { font-size: 10px !important; line-height: 1.15 !important; } @media (max-width: 700px) { .about-page-shell .about-switcher button, .about-page-shell .about-switcher button:hover, .about-page-shell .about-switcher button.is-active { min-height: 44px !important; height: 44px !important; } } .about-page-shell .profile-deck { min-height: 0 !important; height: auto !important; padding-top: 12px !important; padding-bottom: 7px !important; align-items: start !important; } .about-page-shell .profile-ticket .profile-motion { height: 166px !important; min-height: 166px !important; } .about-page-shell .profile-ticket .profile-motion video { height: 100% !important; min-height: 0 !important; object-fit: cover !important; transform: translateX(11px) scale(2.65) !important; transform-origin: 50% 44% !important; } .about-page-shell .profile-summary { align-self: start !important; height: auto !important; } .about-page-shell .about-switcher { margin-top: 8px !important; align-self: start !important; } @media (max-width: 700px) { .about-page-shell .profile-ticket .profile-motion { height: 154px !important; min-height: 154px !important; } .about-page-shell .profile-ticket .profile-motion video { height: 100% !important; transform: translateX(7px) scale(2.65) !important; } } .home-page .feature-panel, .home-page .notes-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(73,92,103,.10), 0 5px 11px rgba(34,50,59,.22), 0 0 0 1px rgba(255,255,255,.48) !important; } .home-page .feature-panel .feature-body, .home-page .notes-panel .recommendation-grid { box-shadow: inset 0 2px 5px rgba(57,75,85,.10), inset 0 1px 0 rgba(255,255,255,.70) !important; } .home-page .feature-panel .feature-image-wrap, .home-page .notes-panel .recommendation-card { box-shadow: inset 0 2px 4px rgba(43,57,65,.16), 0 2px 4px rgba(38,52,60,.14) !important; } .home-page .feature-panel .panel-titlebar, .home-page .notes-panel .panel-titlebar { position: relative !important; z-index: 2 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,75,112,.20), 0 2px 4px rgba(35,62,75,.14) !important; } .home-page :is( .feature-panel, .notes-panel, .magazine-shelf-card.magazine-collection-widget, .photo-vault, .about-card ) { position: relative !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 0 0 1px rgba(255,255,255,.72), 0 1px 2px rgba(0,0,0,.24), 0 4px 8px rgba(0,0,0,.23), 0 10px 20px rgba(0,0,0,.20), 0 18px 34px rgba(0,0,0,.14) !important; } .home-page :is( .magazine-grid, .left-column, .center-column, .right-column ) { overflow: visible !important; } .article-page-shell .content-window { border-left-width: 0 !important; } .article-page-shell .article-window-body { padding: 0; } .article-page-shell .article-window-body { background: #e7ebed; } .article-page-shell .content-window { border-top-right-radius: 23px; } @media (max-width: 720px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-x: clip; overflow-wrap: break-word; font-size: 15.5px; } :where(p, li, dd) { text-wrap: pretty; } body.home-page, body.subpage { --shared-tab-height: 44px; } body.home-page .shared-titlebar, body.subpage .shared-titlebar { padding-inline: 10px !important; } body.home-page .shared-brand, body.subpage .shared-brand { min-height: 44px !important; font-size: 11px !important; letter-spacing: 0.04em !important; } body.home-page .shared-window-controls button, body.subpage .shared-window-controls button { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; } body.home-page .shared-tabs > a, body.home-page .shared-tabs > span, body.subpage .shared-tabs > a, body.subpage .shared-tabs > span { height: var(--shared-tab-height) !important; min-height: var(--shared-tab-height) !important; padding-inline: 3px !important; font-size: clamp(10px, 2.7vw, 12px) !important; line-height: 1.15 !important; letter-spacing: 0.01em !important; } .shared-search-toggle { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; } .shared-search-toggle > span { top: 10px; left: 10px; } .shared-search-panel { width: calc(100% - 16px); right: 8px; padding: 14px; } .shared-search-panel label { font-size: 12px; } .shared-search-input-row { grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; } .shared-search-input-row input, .shared-search-input-row button { min-height: 44px; font-size: 16px; } .shared-search-results a, .shared-search-results p { padding: 12px; font-size: 14px; line-height: 1.6; } body.subpage .subpage-main, .article-page-shell .subpage-main.article-page { padding-inline: 0 !important; } :is(.ui-chip, .micro-label, .category-tag, .magazine-kicker, .magazine-section-note, .photo-kicker, .fashion-file-label, .fashion-channel-name, .article-column-label) { font-size: 10px !important; line-height: 1.35 !important; letter-spacing: 0.08em !important; } .home-page .portal-copy p, .home-page .about-card > p:not(.micro-label), .home-page .feature-copy, .home-page .magazine-info-panel, .home-page .recommendation-loading { font-size: 14.5px !important; line-height: 1.65 !important; } .home-page .about-card h2, .home-page .feature-body h1 { line-height: 1.4 !important; } .home-page .recommendation-copy strong { font-size: 14.5px !important; line-height: 1.35 !important; } .home-page .recommendation-copy small, .home-page .recommendation-copy > span { font-size: 11px !important; line-height: 1.35 !important; } .home-page :is(.read-button, .pill-button, .magazine-read-button), .home-page .notes-panel .shuffle-button { min-height: 44px !important; height: auto !important; padding: 8px 14px !important; font-size: 12px !important; line-height: 1.2 !important; } .home-page .photo-controls button { min-width: 44px !important; min-height: 44px !important; } .home-page #magazine-info-button, .home-page #magazine-close-button { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; } .home-page .photo-cabinet-link { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px !important; padding: 8px 12px !important; } .home-page .window-footer a { display: inline-flex; align-items: center; min-height: 32px; padding-inline: 8px; } .article-page-shell .article-body { width: 100% !important; } .article-page-shell .article-intro { padding-inline: 14px !important; } .article-page-shell .article-lede { padding-inline: 12px !important; } .article-page-shell .article-body > p, .article-page-shell .article-body > h2, .article-page-shell .article-body > h3, .article-page-shell .article-body > blockquote, .article-page-shell .article-body > .toc, .article-page-shell .article-body > .article-figure, .article-page-shell .article-body > .image-comparison, .article-page-shell .article-body > .article-ending, .article-page-shell .article-body > .article-back-top-wrap { max-width: none !important; margin-inline: 16px !important; } .article-page-shell .article-display-title { font-size: clamp(23px, 7.2vw, 30px) !important; line-height: 1.32 !important; } .article-page-shell .article-subtitle { font-size: 14.5px !important; line-height: 1.6 !important; } .article-page-shell .article-lede p, .article-page-shell .article-body > p, .article-page-shell .article-body blockquote p { font-size: 15.5px !important; line-height: 1.75 !important; letter-spacing: 0.015em !important; } .article-page-shell .article-body > h2 { font-size: clamp(24px, 7vw, 29px) !important; line-height: 1.32 !important; } .article-page-shell .article-body > h3 { font-size: 20px !important; line-height: 1.35 !important; } .article-page-shell .toc li, .article-page-shell .toc a { font-size: 14.5px !important; line-height: 1.5 !important; } .article-page-shell .toc a { display: flex; align-items: center; min-height: 44px; padding-block: 4px; } .article-page-shell :is(.article-tags-list span, .article-share-line, .figure-caption, .image-source, .comparison-caption, .article-publish-meta) { font-size: 12px !important; line-height: 1.6 !important; } html.ohmy-native-phone-stage .article-page-shell .article-display-title { font-size: clamp(25px, 7.2vw, 31px) !important; } html.ohmy-native-phone-stage .article-page-shell .article-subtitle { font-size: 16px !important; } html.ohmy-native-phone-stage .article-page-shell .article-lede p, html.ohmy-native-phone-stage .article-page-shell .article-body > p, html.ohmy-native-phone-stage .article-page-shell .article-body blockquote p { font-size: 17px !important; line-height: 1.8 !important; } html.ohmy-native-phone-stage .article-page-shell .toc li, html.ohmy-native-phone-stage .article-page-shell .toc a { font-size: 15.5px !important; } html.ohmy-native-phone-stage .article-page-shell :is( .article-tags-list span, .article-share-line, .figure-caption, .image-source, .comparison-caption, .article-publish-meta) { font-size: 13px !important; } body.subpage.about-page-shell .subpage-feature-hero .about-lead { font-size: 15px !important; line-height: 1.6 !important; } .about-page-shell .content-window-body { padding-inline: 8px !important; } .about-page-shell .about-copy-panel { margin-inline: 0 !important; } .about-page-shell .about-copy-panel .about-body { padding-inline: 16px !important; } .about-page-shell .about-copy-panel .about-body p, .credits-page-shell .credits-hero > p:last-child, .credits-page-shell .credits-list li, .credits-page-shell .credits-note p { font-size: 15.5px !important; line-height: 1.75 !important; } .about-page-shell .about-copy-panel .about-body p { margin-bottom: 0.75em !important; } .about-page-shell .profile-facts { font-size: 14px !important; line-height: 1.55 !important; } .about-page-shell .about-switcher span { font-size: 12px !important; line-height: 1.25 !important; } .about-page-shell .about-switcher button, .about-page-shell .fake-ad, .about-page-shell .about-status { min-height: 44px !important; } .about-page-shell .section-toolbar h2, .credits-page-shell .credits-list h2 { line-height: 1.4 !important; } .fashion-page .fashion-hero-copy > p:last-child, .fashion-page .fashion-video-info > p:not(.fashion-channel-name), .fashion-page .article-card .description { color: #26363e !important; font-size: 14.5px !important; line-height: 1.7 !important; } .fashion-page .fashion-hero-copy > p:last-child { width: 100% !important; max-width: none !important; } .fashion-page .subpage-feature-hero { padding-inline: 16px !important; } .fashion-page .fashion-stream-card-body h3, .fashion-page .article-card h2 { font-size: 17px !important; line-height: 1.35 !important; } .fashion-page .fashion-card-tags { font-size: 11.5px !important; line-height: 1.4 !important; } .fashion-page :is(.fashion-card-meta, .fashion-stream-meta, .fashion-article-stats, .fashion-player-controls) { font-size: 10.5px !important; line-height: 1.3 !important; } .fashion-page :is(.fashion-hero-play, .fashion-read-button), .fashion-page :is(.fashion-hero-add, .fashion-hero-rate), .fashion-page .fashion-card-controls > :is(a, button), .fashion-page .fashion-player-controls > a { min-width: 44px !important; min-height: 44px !important; } .fashion-page .fashion-hero-play, .fashion-page .fashion-read-button { padding: 8px 12px !important; font-size: 13.5px !important; line-height: 1.2 !important; } .magazine-page-shell .magazine-archive-copy > p:last-child { color: #26363e !important; font-size: 14.5px !important; line-height: 1.7 !important; } .magazine-page-shell .magazine-category-group a { display: flex; align-items: center; min-height: 36px; padding-block: 4px; font-size: 13px !important; line-height: 1.3 !important; } .magazine-page-shell .magazine-search-field input { min-height: 44px; font-size: 16px !important; } .magazine-page-shell .magazine-breadcrumbs a { display: inline-flex; align-items: center; min-height: 28px; padding-inline: 4px; } .magazine-page-shell .magazine-item-copy h3 { font-size: 15px !important; line-height: 1.35 !important; } .magazine-page-shell .magazine-item-copy p { font-size: 12px !important; line-height: 1.5 !important; } .photo-page-shell .photo-hero > div > p:last-child, .photo-page-shell .photo-empty { font-size: 14.5px !important; line-height: 1.7 !important; } .photo-page-shell .photo-public-help, .photo-page-shell .photo-tile-name { font-size: 12px !important; line-height: 1.55 !important; } .photo-page-shell .photo-public-status b { font-size: 11px !important; } .photo-page-shell .photo-public-status small, .photo-page-shell .photo-viewer-readonly { font-size: 10px !important; } .photo-page-shell .photo-tile-open, .photo-viewer :is(.photo-viewer-nav, #photo-viewer-close) { min-width: 44px !important; min-height: 44px !important; } .article-page-shell .article-newsletter :is(input, button) { min-height: 44px !important; height: 44px !important; font-size: 16px !important; } body.home-page .shared-titlebar { height: 44px !important; min-height: 44px !important; } body.home-page .shared-brand { height: 44px !important; min-height: 44px !important; padding-block: 0 !important; } .home-page .portal-banner { min-height: 0 !important; margin: 6px 8px 0 !important; padding: 6px 12px 7px !important; gap: 0 !important; border-radius: 12px !important; } .home-page .portal-copy { width: 100%; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "issue brand" "tagline tagline"; align-items: center; column-gap: 10px; text-align: left; } .home-page .portal-copy > span { grid-area: issue; font-size: 7px !important; line-height: 1.2 !important; letter-spacing: 0.08em !important; } .home-page .portal-brand { width: 100% !important; max-width: 220px !important; height: 34px !important; margin: 0 !important; grid-area: brand; } .home-page .portal-copy p { margin: 2px 0 0 !important; grid-area: tagline; overflow: hidden; font-size: 11.5px !important; line-height: 1.25 !important; text-overflow: ellipsis; white-space: nowrap; } .home-page .portal-star, .home-page .portal-banner > small { display: none !important; } .home-page .magazine-grid { padding: 7px 8px 8px !important; gap: 8px !important; } .home-page .center-column { gap: 8px !important; } .home-page .feature-panel .panel-titlebar { height: 26px !important; } .home-page .feature-body { padding: 8px !important; } .home-page .feature-link { display: grid !important; grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(44px, auto); column-gap: 9px; row-gap: 4px; } .home-page .feature-image-wrap { min-height: 174px; grid-column: 1; grid-row: 1 / 5; } .home-page .feature-image { height: 100% !important; aspect-ratio: auto !important; } .home-page .category-tag { margin: 0 !important; padding: 4px 6px !important; align-self: start; } .home-page .feature-body h1 { margin: 0 !important; display: -webkit-box; overflow: hidden; font-size: 18px !important; line-height: 1.25 !important; letter-spacing: -0.035em !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .home-page .feature-copy { margin: 0 !important; display: -webkit-box; overflow: hidden; font-size: 12.5px !important; line-height: 1.4 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.home-page .feature-panel .feature-body .feature-link > .read-button { min-height: 44px !important; height: 44px !important; margin: 0 !important; padding: 7px 10px !important; align-self: end; font-size: 10px !important; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word { font-size: 0 !important; letter-spacing: 0 !important; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word::after { font-size: 10px; line-height: 1; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word-left::after { content: "記事を"; } body.home-page .feature-panel .feature-body .feature-link > .read-button .capsule-word-right::after { content: "読む"; } .home-page .notes-panel .panel-titlebar { height: 34px !important; } body.home-page .notes-panel .shuffle-button { min-height: 30px !important; height: 30px !important; padding: 4px 8px !important; font-size: 10px !important; } .home-page .recommendation-grid { padding: 6px !important; gap: 6px !important; } .home-page .recommendation-copy small { top: 5px; right: 5px; bottom: auto; max-width: calc(100% - 10px); padding: 3px 5px; font-size: 9px !important; } .home-page .recommendation-copy strong { left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 4px 5px; display: -webkit-box; overflow: hidden; font-size: 11.5px !important; line-height: 1.25 !important; opacity: 1; transform: none; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .home-page .about-card { padding: 14px !important; } .home-page .about-card h2 { margin-block: 6px !important; font-size: 20px !important; line-height: 1.3 !important; } body.subpage .content-window-body { padding-top: 8px !important; padding-bottom: 8px !important; } body.subpage .subpage-feature-hero { min-height: 148px !important; padding-top: 14px !important; padding-bottom: 14px !important; border-radius: 14px !important; } body.subpage.fashion-page .subpage-feature-hero h1[data-material-heading="rhinestone"] { font-size: clamp(38px, 12vw, 54px) !important; } body.subpage.about-page-shell .subpage-feature-hero h1[data-material-heading="paper"] { font-size: clamp(34px, 11vw, 48px) !important; } .article-page-shell .article-intro { margin-bottom: 18px !important; padding-top: 16px !important; padding-bottom: 16px !important; } .article-page-shell .article-opening-grid { gap: 14px !important; } .article-page-shell .article-display-title { margin-bottom: 8px !important; } .article-page-shell .article-subtitle { margin-bottom: 8px !important; } .article-page-shell .article-publish-meta { margin: 8px 0 10px !important; } .article-page-shell .article-lede { margin-top: 16px !important; padding-top: 14px !important; padding-bottom: 0 !important; } .article-page-shell .article-lede p { margin-bottom: 12px !important; } .article-page-shell .article-body > p { margin-top: 12px !important; margin-bottom: 12px !important; } .article-page-shell .article-body > h2 { margin-top: 28px !important; margin-bottom: 12px !important; } .article-page-shell .article-body > h3 { margin-top: 22px !important; margin-bottom: 10px !important; } .article-page-shell .article-body > :is(.toc, .article-figure, .image-comparison, blockquote) { margin-top: 16px !important; margin-bottom: 16px !important; } .about-page-shell .profile-deck { padding: 8px !important; gap: 8px !important; } .about-page-shell .profile-ticket .profile-motion { height: 132px !important; min-height: 132px !important; } .about-page-shell .about-dashboard-v2, .about-page-shell .about-sponsor-rail { gap: 10px !important; } .about-page-shell .about-switcher { margin-top: 6px !important; padding-top: 6px !important; gap: 6px !important; } .about-page-shell .about-story-switch { margin-top: 10px !important; } body.subpage.fashion-page .fashion-channel-strip { min-height: 38px !important; padding: 0 !important; gap: 0 !important; } body.subpage.fashion-page .fashion-channel-strip button { min-height: 0 !important; height: auto !important; padding: 0 2px !important; font-size: 8px !important; line-height: 1.08 !important; } body.subpage.fashion-page .fashion-channel-strip button.is-active { font-size: 10px !important; } .fashion-page .fashion-latest { padding-bottom: 12px !important; } .fashion-page .fashion-latest-heading { min-height: 46px !important; padding: 8px 10px 4px !important; } .fashion-page .fashion-latest-rail { padding: 6px 8px 10px !important; gap: 10px !important; } .fashion-page .fashion-stream-card-body { padding: 8px !important; } .magazine-page-shell .magazine-archive-hero { padding: 16px !important; gap: 12px !important; } .magazine-page-shell .magazine-archive-copy > p:last-child { margin-top: 8px !important; } .magazine-page-shell .magazine-shop-shell { gap: 10px !important; } .magazine-page-shell .magazine-card-grid { gap: 10px !important; } .photo-page-shell .photo-hero { min-height: 0 !important; padding: 12px !important; gap: 10px !important; } .photo-page-shell .photo-hero > div > p:last-child { margin-top: 8px !important; } .photo-page-shell .photo-public-toolbar, .photo-page-shell .photo-library-status { padding: 8px 10px !important; } .not-found-page .subpage-main p { font-size: 15.5px !important; line-height: 1.65 !important; } .not-found-page .subpage-main a, .credits-page-shell .credits-list a { min-height: 44px; } } @media (max-width: 380px) { body.home-page .shared-tabs > a, body.home-page .shared-tabs > span, body.subpage .shared-tabs > a, body.subpage .shared-tabs > span { font-size: 9px !important; } .article-page-shell .article-lede p, .article-page-shell .article-body > p, .article-page-shell .article-body blockquote p, .about-page-shell .about-copy-panel .about-body p, .credits-page-shell .credits-list li { font-size: 15.5px !important; } } @media (max-width: 1100px) { html.ohmy-os-stage-host:not(.ohmy-os-stage-ready) body { visibility: hidden !important; } html.ohmy-os-stage-host, html.ohmy-os-stage-host body { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; transform: none !important; } html.ohmy-os-stage-host.ohmy-os-stage-ready body { visibility: visible !important; } #ohmy-os-stage-viewport { width: 100%; min-height: 1px; position: relative; overflow: hidden; } #ohmy-os-stage-frame { width: var(--ohmy-stage-width, 1440px); height: var(--ohmy-stage-height, 900px); max-width: none; margin: 0; padding: 0; position: absolute; inset: 0 auto auto 0; display: block; border: 0; background: transparent; transform: scale(var(--ohmy-stage-scale, 1)); transform-origin: 0 0; } }