section[data-cattype="242"] { --color-text: #111; --color-bg: #ffffff00; --color-link: #f87733; --color-link-hover: #000; --color-cover: #f87733; --color-copy: #767676; --color-content-title: #f87733; --color-indicator: #fec22c; color: var(--color-text); background: linear-gradient(to bottom, var(--color-bg) 25%, #f19818 25%); margin: -180px 0 0 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index: 12; } body.active-242-content{ overflow: hidden; } body.active-242-content section[data-cattype="242"]{ height: 100vh; position: fixed; width: 100vw; top:0; left: 0; z-index: 1000; padding: 0; } body.active-242-content section[data-cattype="242"] .container.main{ height: 100%; } section[data-cattype="242"] .cursor { display: none; } .js [data-cattype="242"] .loading::before { content: ''; position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js [data-cattype="242"] .loading::after { content: ''; position: fixed; z-index: 100000; top: calc(50% - 30px); left: calc(50% - 25px); width: 50px; height: 60px; pointer-events: none; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } section[data-cattype="242"] a { text-decoration: none; color: var(--color-link); outline: none; } section[data-cattype="242"] a:hover, section[data-cattype="242"] a:focus { color: var(--color-link-hover); outline: none; } [data-cattype="242"] .container.main { position: relative; height: 480px; display: flex; flex-direction: column; } [data-cattype="242"] .message { background: var(--color-text); color: var(--color-bg); padding: 1rem; text-align: center; } [data-cattype="242"] .frame { padding: 1.5rem; position: absolute; top: 0; left: 0; z-index: 1000; pointer-events: none; } [data-cattype="242"] .frame a { pointer-events: auto; } [data-cattype="242"] .frame__title { font-size: 1rem; margin: 0 0 0.5rem; font-weight: normal; } [data-cattype="242"] .frame__links { display: flex; margin: 0.5rem 0; } [data-cattype="242"] .frame__links a { margin: 0 0.35rem; padding: 0 0.35rem; position: relative; } [data-cattype="242"] .frame__links a:first-child { margin-left: 0; padding-left: 0; } [data-cattype="242"] .frame__links a:not(:last-child)::after { content: ''; width: 1px; height: 1rem; background: var(--color-link); position: absolute; left: calc(100% + 0.35rem); top: calc(50% - 0.5rem); pointer-events: none; } [data-cattype="242"] .frame__subtitle { font-weight: normal; font-size: 1rem; margin: 0.5rem 0 1rem; } [data-cattype="242"] .frame__indicator { background: var(--color-indicator); width: 3rem; height: 0.5rem; transform-origin: 0 50%; } [data-cattype="242"] .strip-outer { width: 100%; min-height: auto; margin: auto; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; flex: none; } [data-cattype="242"] .strip-inner { position: relative; top: 0; height: 100%; width: -moz-fit-content; width: fit-content; } [data-cattype="242"] .draggable { height: 500px; top: calc(50% - 250px); width: 100%; position: absolute; cursor: grab; } [data-cattype="242"] .draggable:active { cursor: grabbing; } [data-cattype="242"] .strip { height: 100%; width: -moz-fit-content; width: fit-content; display: flex; align-items: start; position: relative; pointer-events: none; } [data-cattype="242"] .strip__item { height: 100%; position: relative; display: flex; flex-direction: column-reverse; justify-content: center; } [data-cattype="242"] .img-outer { --imgheight: 480px; height: var(--imgheight); width: calc(var(--imgheight) * 0.7); overflow: hidden; position: relative; flex: none; } [data-cattype="242"] .img-outer--size-s { --imgheight: 330px; } [data-cattype="242"] .img-outer--size-m { --imgheight: 390px; } [data-cattype="242"] .img-outer--size-l { --imgheight: 420px; } [data-cattype="242"] .img-outer--size-xl { --imgheight: 450px; } [data-cattype="242"] .img-inner { width: calc(100% + 20px); height: calc(100% + 20px); left: -10px; top: -10px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; position: absolute; } [data-cattype="242"] .strip__item-number { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } [data-cattype="242"] .strip__item-link { pointer-events: auto; cursor: pointer; display: block; position: relative; } [data-cattype="242"] .strip__item-link::before { content: ''; position: absolute; width: 160%; height: 120%; left: -30%; top: -10%; } [data-cattype="242"] .strip__item-link span { display: block; } [data-cattype="242"] .strip__item-plus { display: none; width: 13px; height: 13px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 6h6v1H7v6H6V7H0V6h6V0h1v6z' fill='%23505050'/%3e%3c/svg%3e"); background-size: 100%; } [data-cattype="242"] .strip__item-link:hover + .strip__item-plus { display: block; } [data-cattype="242"] .strip-cover { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--color-cover); pointer-events: none; opacity: 0; } [data-cattype="242"] .strip-cover__title { font-weight: 400; font-size: 18vw; margin: 0; line-height: 1; -webkit-text-stroke: 1px var(--color-cover); text-stroke: 1px var(--color-cover); -webkit-text-fill-color: transparent; text-fill-color: transparent; color: transparent; } [data-cattype="242"] .strip-cover__subtitle { font-size: 1.5rem; margin: 0; } [data-cattype="242"] .content { top: 0; position: absolute; height: 100vh; width: 100%; z-index: 1000; } .js [data-cattype="242"] .content { pointer-events: none; } [data-cattype="242"] .content__item { position: absolute; width: 100%; left: 0; top: 0; height: 100vh; display: grid; align-items: center; grid-template-rows: 50% 40% 10%; grid-column-gap: 0; grid-template-areas: 'content-img' 'content-copy' '...'; display: none; } .js [data-cattype="242"] .content__item { height: 100%; opacity: 0; pointer-events: none; } .js [data-cattype="242"] .content__item--current { pointer-events: auto; opacity: 1; top: 0; display: grid; } [data-cattype="242"] .img-outer--content { height: 100%; width: auto; grid-area: content-img; } [data-cattype="242"] .img-inner--content { background-position: 50% 35%; } [data-cattype="242"] .content__item-title { font-size: 1.5em; font-weight: normal; color: var(--color-content-title); } [data-cattype="242"] .content__item-copy { grid-area: content-copy; padding: 1.5rem 2rem; color: var(--color-copy); } [data-cattype="242"] .content__item-text { margin: 0; } [data-cattype="242"] .content__close { display: block; background: none; border: 0; margin: 0; padding: 0; color: inherit; opacity: 0; pointer-events: none; cursor: pointer; position: absolute; bottom: 1.5rem; left: 3rem; } [data-cattype="242"] .content__item--current ~ .content__close { pointer-events: auto; } [data-cattype="242"] .content__close svg { fill: currentColor; } [data-cattype="242"] .content__close:focus, [data-cattype="242"] .content__close:hover { outline: none; color: #fff; } [data-cattype="242"] .strip, [data-cattype="242"] .strip__item, [data-cattype="242"] .cursor__side, [data-cattype="242"] .content__close, [data-cattype="242"] .content__item-title, [data-cattype="242"] .content__item-copy { will-change: transform; } @media screen and (min-width: 53em) { section[data-cattype="242"] { overflow: hidden; } [data-cattype="242"] .frame { position: absolute; text-align: left; z-index: 10000; display: grid; align-content: space-between; width: 100%; max-width: none; height: 100%; padding: 1rem 3rem; pointer-events: none; grid-template-columns: 80% 20%; grid-template-rows: auto auto auto; grid-template-areas: 'page-title links' '... ...' 'indicator sub-title'; } [data-cattype="242"] .frame__title-wrap{ grid-area: page-title; display: flex; } body:not(.active-242-content) [data-cattype="242"] .frame__title-wrap{ display: none;} [data-cattype="242"] .frame__title { margin: 0; } [data-cattype="242"] .frame__subtitle { grid-area: sub-title; justify-self: end; margin: 0; } body:not(.active-242-content) [data-cattype="242"] .frame__subtitle{ display: none;} [data-cattype="242"] .frame__links { padding: 0; margin: 0 0 0 2rem; } [data-cattype="242"] .frame__indicator { grid-area: indicator; margin: 0; } [data-cattype="242"] .content__item { top: 0; grid-template-columns: 40% 45% 15%; grid-template-rows: 100%; grid-template-areas: 'content-copy content-img ... '; } [data-cattype="242"] .content__item-copy { max-width: 240px; justify-self: end; align-self: end; text-align: right; } [data-cattype="242"] .strip-cover__title { font-size: 12vw; -webkit-text-stroke: 2px var(--color-cover); text-stroke: 2px var(--color-cover); } [data-cattype="242"] .strip-cover__subtitle { font-size: 3rem; } } @media (any-pointer: fine) { [data-cattype="242"] .cursor { display: block; } [data-cattype="242"] .cursor__inner { z-index: 9999; pointer-events: none; position: absolute; top: 0; left: 0; mix-blend-mode: difference; border-radius: 50%; } [data-cattype="242"] .cursor__side { position: absolute; top: 50%; width: 5px; height: 1px; background: #fff; opacity: 0; } [data-cattype="242"] .cursor__side--left { right: calc(100% + 5px); } [data-cattype="242"] .cursor__side--right { left: calc(100% + 5px); } [data-cattype="242"] .cursor__inner--circle { width: 25px; height: 25px; border: 1px solid #fff; } } @media (max-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="242"] .frame { display: none; } .js [data-cattype="242"] .content__item--current{ display: block; } [data-cattype="242"] .content__item--current .img-outer--content{ height: 80%; margin: 10% 10% 0 10%; } } @media (max-width: 767px) { section[data-cattype="242"]{ background: linear-gradient(to bottom, var(--color-bg) 25%, #f19818 50%); padding-bottom: 0px; } [data-cattype="242"] .content { height: auto; } .js .active-242-content [data-cattype="242"] .content { height: 100vh; } [data-cattype="242"] .frame { display: none; } .js [data-cattype="242"] .content__item--current{ display: block; } [data-cattype="242"] .content__item--current .img-outer--content{ height: 80%; margin: 10% 10% 0 10%; } } @media (max-width: 480px) { }