:root { --error-border: #c91c0c; --error-label: #c91c0c; --inner-margin: 5vw; --outer-margin: 3.5vw; --wide-inner-margin: 21.1vw; --middle-margin: calc(var(--inner-margin) - var(--outer-margin)); --horizontal-margin: calc(var(--inner-margin) + var(--outer-margin)); /* HorizontalScroll component */ --horizontal-scroll-container-gap: 2px; --horizontal-scroll-item-gap: 2px; --horizontal-scroll-item-min-width: 280px; --horizontal-scroll-padding-left: 0px; --horizontal-scroll-padding-right: 0px; /* CardGrid component */ --card-grid-item-gap: 2px; --card-grid-item-min-width: 75vw; /* CardsGridSmall component */ --card-grid-small-row-count: 3; /* Card controller */ /* ! WARNING: If these heights are updated they will also need to be updated in ui/ui/src/components/Picture/getMedia.ts */ --card-height-small: 165px; --card-height-medium: 372px; --card-height-large: 580px; --card-height-hero: 580px; /* Body Font Color */ --body-font: #4c4c4c; --hover-color: #b3b3b3; } @media (min-width: 768px) { :root { /* ! WARNING: If these heights are updated they will also need to be updated in ui/ui/src/components/Picture/getMedia.ts */ --card-height-medium: 300px; --card-height-large: 602px; --card-height-hero: 602px; } } @media (min-width: 1024px) { :root { /* Card controller */ /* ! WARNING: If these heights are updated they will also need to be updated in ui/ui/src/components/Picture/getMedia.ts*/ --card-height-small: 190px; --card-height-medium: 344px; --card-height-large: 690px; --card-height-hero: 700px; /* CardsGridSmall component */ --card-grid-small-row-count: 6; } } @media (min-width: 1440px) { :root { /* Card controller */ /* ! WARNING: If these heights are updated they will also need to be updated in ui/ui/src/components/Picture/getMedia.ts */ --card-height-small: 268px; --card-height-medium: 480px; --card-height-large: 962px; --card-height-hero: 85vh; } } /** * Set default box sizing for all elements */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /** * Default to black background */ body { background: #000; } /** * Reset margins and paddings */ body, h1, h2, h3, h4, h5, h6, figure, figcaption, p, ul, ol, blockquote { margin: 0; padding: 0; } a { color: var(--body-font); } /** * Set base font-size to 10px to simplify rem calculations */ html { font-size: 10px; } /** * Global typography settings */ body { font-family: 'PlayboyVisuelt', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Images should never exceed the width of their containers. */ img { max-width: 100%; } /** * Picture elements don't need line-height. */ picture { line-height: 0; } /** * Hide tracking pixels that are children of . */ body > img[height='1'][width='1'] { position: absolute; top: 0; left: 0; opacity: 0.01; } /** * Make everything inside body start from white background. */ #__next { background: #fff; } /** * Don't scroll when menu is open. */ .menu-open, .search-open { /* overflow: hidden; */ width: 100vw; } .pb--remove-topic-tag .topic-tag-component { display: none; } /* ! Removing for now, this causes a blank screen while search is animating and doesn't seem necessary. Leaving here for documentation */ /** * Hide main content when search is open. */ /* :global(.search-open) :global(#__next) { display: none; } */ /* * Web Fonts from colophon-foundry.org * * The fonts included in this stylesheet are subject to the End User License you purchased * from Colophon Foundry. The fonts are protected under domestic and international trademark and * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or * distributing this font software. * * (c) 2019 Colophon Foundry * * Licenced to Digital Media Playboy */ @font-face { font-family: 'PlayboyVisuelt'; src: url(/_next/static/fonts/PlayboyVisuelt-Light-c61ab77d68fbdb9ecb62f2b98b75f78d.eot); src: url(/_next/static/fonts/PlayboyVisuelt-Light-c61ab77d68fbdb9ecb62f2b98b75f78d.eot?#iefix) format('embedded-opentype'), url(/_next/static/fonts/PlayboyVisuelt-Light-c9adc03fd808dfe761282e580014f288.woff) format('woff'), url(/_next/static/fonts/PlayboyVisuelt-Light-2fc230a9c51747c7615ddc1c73d162ac.woff2) format('woff2'), url(/_next/static/fonts/PlayboyVisuelt-Light-8d98b7dde801c6a5a68d6540f37019bf.ttf) format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'PlayboyVisuelt'; src: url(/_next/static/fonts/PlayboyVisuelt-LightItalic-3d644845c6ce499aabfcd1345fb6d2f8.eot); src: url(/_next/static/fonts/PlayboyVisuelt-LightItalic-3d644845c6ce499aabfcd1345fb6d2f8.eot?#iefix) format('embedded-opentype'), url(/_next/static/fonts/PlayboyVisuelt-LightItalic-57b251f24818fc6b69aafab58707217e.woff) format('woff'), url(/_next/static/fonts/PlayboyVisuelt-LightItalic-ad34cb58f6a7d8e1e9358d7081414d31.woff2) format('woff2'), url(/_next/static/fonts/PlayboyVisuelt-LightItalic-e4caf2e37ac8aa6c222a38dfe1ef5b10.ttf) format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'PlayboyVisuelt'; src: url(/_next/static/fonts/PlayboyVisuelt-Regular-612ae156bb0270407bc67aae947072e6.eot); src: url(/_next/static/fonts/PlayboyVisuelt-Regular-612ae156bb0270407bc67aae947072e6.eot?#iefix) format('embedded-opentype'), url(/_next/static/fonts/PlayboyVisuelt-Regular-859bcb3c8bd83a57eee20c3c5ee8126b.woff) format('woff'), url(/_next/static/fonts/PlayboyVisuelt-Regular-af61ab33b670c810370068b6f097cd8b.woff2) format('woff2'), url(/_next/static/fonts/PlayboyVisuelt-Regular-ba25736042cfb88ec5cc49dbe2e46415.ttf) format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PlayboyVisuelt'; src: url(/_next/static/fonts/PlayboyVisuelt-Medium-64f2502062593c7c96cade937197f5ae.eot); src: url(/_next/static/fonts/PlayboyVisuelt-Medium-64f2502062593c7c96cade937197f5ae.eot?#iefix) format('embedded-opentype'), url(/_next/static/fonts/PlayboyVisuelt-Medium-7e2e20cb9cd10e175ec05a3c4487c739.woff) format('woff'), url(/_next/static/fonts/PlayboyVisuelt-Medium-4490432d79e3fac5e73a366f10df0684.woff2) format('woff2'), url(/_next/static/fonts/PlayboyVisuelt-Medium-8c10437cfa15e9a6794addcd6913b48e.ttf) format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'PlayboyVisuelt'; src: url(/_next/static/fonts/PlayboyVisuelt-Bold-ddcb1ad7332c875ff2270e9c6f90ad87.eot); src: url(/_next/static/fonts/PlayboyVisuelt-Bold-ddcb1ad7332c875ff2270e9c6f90ad87.eot?#iefix) format('embedded-opentype'), url(/_next/static/fonts/PlayboyVisuelt-Bold-c7a8766e6b07f33fc33fe4a6daaed2a2.woff) format('woff'), url(/_next/static/fonts/PlayboyVisuelt-Bold-e27591c82a1e7714314c7c0288ef2397.woff2) format('woff2'), url(/_next/static/fonts/PlayboyVisuelt-Bold-15061742bf47ced21c9d294de21d57b2.ttf) format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'PlayboyVisuelt'; src: url(/_next/static/fonts/PlayboyVisuelt-Bold-ddcb1ad7332c875ff2270e9c6f90ad87.eot); src: url(/_next/static/fonts/PlayboyVisuelt-Bold-ddcb1ad7332c875ff2270e9c6f90ad87.eot?#iefix) format('embedded-opentype'), url(/_next/static/fonts/PlayboyVisuelt-Bold-c7a8766e6b07f33fc33fe4a6daaed2a2.woff) format('woff'), url(/_next/static/fonts/PlayboyVisuelt-Bold-e27591c82a1e7714314c7c0288ef2397.woff2) format('woff2'), url(/_next/static/fonts/PlayboyVisuelt-Bold-15061742bf47ced21c9d294de21d57b2.ttf) format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'PlayboyVisueltOutline'; src: url(/_next/static/fonts/PlayboyVisuelt-BoldOutline-46836a6f4fa81966fbf0e4ff9ea8b6cd.eot); src: url(/_next/static/fonts/PlayboyVisuelt-BoldOutline-46836a6f4fa81966fbf0e4ff9ea8b6cd.eot?#iefix) format('embedded-opentype'), url(/_next/static/fonts/PlayboyVisuelt-BoldOutline-3513a207241c85649fb44ac03b80dc85.woff) format('woff'), url(/_next/static/fonts/PlayboyVisuelt-BoldOutline-bc8cf76d873b7fce8d9abc8ee00b0531.woff2) format('woff2'), url(/_next/static/fonts/PlayboyVisuelt-BoldOutline-57434ac6fe87cd7ed8b82dc44369eb95.ttf) format('truetype'); font-weight: bold; font-style: normal; }