@charset "UTF-8"; :root { --TVNgrey: #E8E7D7; --white: #ffffff; --black: #272525; --serif: "century-old-style-std", serif;; --sansSerif: "neue-haas-grotesk-display", sans-serif; --smooth: 0.75s cubic-bezier(0.5, 0, 0, 1); } body {padding: 0; margin: 0;} html {scroll-behavior: smooth} #tvnContent {color: var(--black); font-family: var(--serif);} #tvnContent * {margin: 0; padding: 0; box-sizing: border-box;} #tvnContent img {object-fit: unset} #tvnContent strong {font-weight: 700} #tvnContent p {font-size: 18px; line-height: 1.8em; letter-spacing: 0.5px; font-family: var(--sansSerif);} #tvnContent a {color: inherit; text-decoration: none} #tvnContent img {max-width: 100%; height: auto} #tvnContent h1 {font-family: var(--serif); font-weight: 800; font-size: 60px; font-weight: 400} #tvnContent h1 br {display: none} #tvnContent h2.small {font-family: var(--serif); font-weight: 400; font-size: 20px; font-weight: 400; font-style: italic; margin-bottom: 0.25em} #tvnContent hr {border:none; border-top: 1px solid var(--black); width: 1075px; max-width: 100%; margin: auto;} #tvnContent .wrapper {width: 1296px; max-width: 100%; margin: 0 auto;position: relative; padding-bottom: 100px; overflow: hidden;} #tvnContent .wrapper.visible {overflow: visible} #tvnContent .inner {width: 1135px; max-width: 100%; margin: 0 auto; padding: 0 30px;} #tvnContent .cols {display: flex;} #tvnContent .cols.span-2 .col {width: 50%;} #tvnContent main {background-color: var(--TVNgrey); position: relative;} /* PAGE INTRO */ #tvnContent .page-intro {text-align: center; padding: 30px} #tvnContent .page-intro p {font-family: var(--sansSerif); font-size: 18px;} /* LIST & WELCOME */ #tvnContent .list-welcome-section {padding: 70px 0} #tvnContent .list-welcome-section .cols, #tvnContent .burberry-london-section .cols {align-items: center; justify-content: space-between} #tvnContent .col-location {display: flex; justify-content: center} #tvnContent .locations-list {list-style: none; font-size: 33px;} #tvnContent .locations-list li {margin-bottom: 10px; position: relative; cursor: pointer} #tvnContent .locations-list li span {display: block; transition: var(--smooth);} #tvnContent .locations-list li:before {width: 12px; height: 12px; background-image: url(https://monocle-burberry.amicuscrm.co.uk/_assets/dot.svg); content: ''; background-size: cover; top: 50%; margin-top: -6px; left: -24px; display: block; position: absolute; opacity: 0; transition:var(--smooth); transform: translateX(-10px);} #tvnContent .locations-list li:hover:before {opacity: 1; transform: translateX(0)} #tvnContent .locations-list li:hover span {transform: translateX(5px);} #tvnContent .burberry-london-section .col.col-text {width: 450px; max-width: 100%;} #tvnContent .burberry-london-image {transition: var(--smooth);} #tvnContent .burberry-london-image:hover {transform: scale(1.05)} /* CALL TO ACTION SECTION */ #tvnContent .call-to-action-section {margin-top: 80px;} #tvnContent .cta-container {display: flex; justify-content: center} #tvnContent .cta {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 610px; max-width: 100%; text-align: center;} #tvnContent .cta a {text-decoration: none; transition: var(--smooth);} #tvnContent .cta img {margin-bottom: 35px;} #tvnContent .cta hr {width: 270px; margin:30px auto 20px auto; max-width: 100%; transition: var(--smooth);} #tvnContent .cta h3 {font-size: 60px; font-style: italic; font-weight: 400; line-height: 1.1em} #tvnContent .cta p {font-family: var(--serif); font-size: 20px; font-style: italic; position: relative; display: inline-block} #tvnContent .cta p:after {position: absolute; left: 0; bottom: 5px; display: block; height: 1px; width: 100%; background-color: var(--black); content: ''; transition: var(--smooth);} #tvnContent .cta a:hover {transform: translateY(5px)} #tvnContent .cta a:hover hr {width: 320px;} #tvnContent .cta:hover p:after {bottom: 0;} /* POPUP */ #tvnContent .popup-container, #tvnContent .popup-container-keys {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; visibility: hidden; opacity: 0; transition: var(--smooth)} #tvnContent .popup-container .clickout, #tvnContent .popup-container-keys .clickout {background-color: rgba(0,0,0,0.65); position: absolute; inset:0; display: block; cursor: pointer} #tvnContent .popup-container-cols {display: flex;} #tvnContent .popup {position: absolute; z-index: 9; width: 100%;} #tvnContent .popup-content, #tvnContent .popup-keys-content {flex: 1 1 auto; width: 100%; background-color: var(--TVNgrey); padding: 40px; transition: var(--smooth); display: none;} #tvnContent .popup h2 {font-family: var(--serif); font-size: 60px; font-weight: 400} #tvnContent .popup p.sub-head {font-family: var(--serif); font-style: italic; font-size: 24px;} #tvnContent .popup-content-inner {transition: var(--smooth); transform: translateX(-100%);} /* POPUP ACTIVE */ #tvnContent .popup-container.active .popup-content {opacity: 1; visibility: visible} #tvnContent .popup-content.active {visibility: visible; opacity: 1; display: block} #tvnContent .popup-content.active .popup-content-inner {transform: translateX(0)} #tvnContent .popup-container.active, #tvnContent .popup-container-keys.active {opacity: 1; visibility: visible;} #tvnContent .popup-content.active .col-person img {transform: scale(1);} /* POPUP LIST */ #tvnContent .popup-list {width: 100px;position: relative; z-index: 8} #tvnContent .popup-list ul {list-style: none;} #tvnContent .popup-list li {cursor: pointer; width: 100px; height: 100px; display: inline-flex; justify-content: center; align-items: center; padding: 15px; background-color: #D3D2C5; position: relative; transition: var(--smooth);} #tvnContent .popup-list li:after {width: 10px; height: 100%; content: ''; display: block; position: absolute; right: 0; top: 0; background: #000000; background: linear-gradient(-90deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); transition: var(--smooth);} #tvnContent .popup-list li img {width: 100%; height: 100%; object-fit: contain; object-position: center; transition: var(--smooth);} #tvnContent .popup-list li.active, #tvnContent .popup-list li:hover {background-color: var(--TVNgrey);} #tvnContent .popup-list li.active:after {opacity: 0} #tvnContent .popup-list li:hover img {transform: scale(1.1)} #tvnContent .close-popup {display: flex; position: absolute; right: 40px; top: 40px; font-style: italic; align-items: baseline; font-size: 20px; gap: 8px; cursor: pointer; transition: var(--smooth); z-index: 9} #tvnContent .close-popup:before {width: 11px; height: 11px; background-image: url(https://monocle-burberry.amicuscrm.co.uk/_assets/icon-close.svg); content: ''; background-size: cover; display: block;} #tvnContent .close-popup:hover {opacity: 0.5} #tvnContent .cols {gap: 40px;} #tvnContent .col-person {flex-basis: 40%; display: flex; align-items: center;} #tvnContent .col-person img {width: 100%; transform: scale(0.8); transition: var(--smooth); transition-delay: 0.2s} #tvnContent .col-inner {width: 100%; max-width: 540px} #tvnContent .col-text {flex-basis: calc(60% - 40px); display: flex; flex-direction: column; justify-content: space-between} #tvnContent .col-text p {margin-bottom: 0.75em; line-height: 1.6em; font-size: 18px;} #tvnContent .spacer-cols {gap: 30px;} /* POPUP LOCATIONS */ #tvnContent .popup-locations p {font-size: 14px; line-height: 1.5em} #tvnContent .location-bottom p {font-family: var(--serif); font-style: italic; margin-bottom: 0; letter-spacing: -0.15px} #tvnContent .location-bottom p a, #tvnContent .popup-locations p a {text-decoration: underline;} #tvnContent .popup-locations .cols {gap:0} #tvnContent .popup-locations .location {display: flex; flex-direction: column; justify-content: space-between; height: 100%;} #tvnContent .popup-locations .col {width: 33.33%;} #tvnContent .popup-locations .col:nth-child(1) {padding-right: 15px;} #tvnContent .popup-locations .col:nth-child(2) {border-left: 1px solid var(--black); border-right: 1px solid var(--black); padding: 0 15px; width: 33.333%;} #tvnContent .popup-locations .col:nth-child(3) {padding-left: 15px;} /* KEYS POPUP */ #tvnContent .popup-container-keys h2 {margin-bottom: 0.35em} #tvnContent .cols-inner {display: flex; gap: 30px;} #tvnContent .cols-inner .col {width: calc(50% - 15px)} #tvnContent .col-keys {margin-top: 50px;} #tvnContent .col-keys hr {margin-bottom: 20px;} #tvnContent .col-keys h3 {font-family: var(--serif); font-size: 30px; font-weight: 400; margin-bottom: 0.2em} #tvnContent .col-keys h4 {font-family: var(--sansSerif); margin-bottom: 0.35em} #tvnContent .col-keys p {font-size: 16px; margin-bottom: 1em; line-height: 1.6em} #tvnContent .col-keys p.intro {font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3em; margin-bottom: 1em} #tvnContent .col-keys .location-bottom {margin-bottom: 25px;} #tvnContent .keys-store-image {margin: 40px auto 0; display: block; width: 500px; max-width: 100%;} #tvnContent .keys-bus {margin-top: 60px;} #tvnContent .col-speech {display: flex; flex-direction: column; justify-content: space-between} #tvnContent .col-speech p {margin-bottom: 8px;} #tvnContent .col-speech img {width: 150px; max-width: 100%; display: block; margin: 0 auto;} #tvnContent .cols.span-3 {gap: 45px; flex-wrap: wrap} #tvnContent .cols.span-3 .col {flex: 0 0 calc((100% - (2 * 45px)) / 3)} #tvnContent .cols.span-3 hr {width: 100%;} /* MAP */ #tvnContent .showKeys {cursor: pointer} #tvnContent .map-key {text-align: center; display: flex; justify-content: center; margin-top: 35px;} #tvnContent .map-key p {font-style: italic; font-size: 14px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; font-family: var(--serif);} #tvnContent .map-layer-thames {z-index: 4} #tvnContent .map-bg {z-index: 5;position: relative;} #tvnContent .map-keys {z-index: 6} #tvnContent .map {margin:28px 0 40px 0; position: relative;} #tvnContent .map-layer {position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0} #tvnContent .ktc {transition: var(--smooth);} #tvnContent .ktc:hover {opacity: 0.5} #tvnContent .location-person * {transition: var(--smooth);} #tvnContent .location-person {position: absolute; z-index: 7; transform:translate(-50%,-50%) scale(0.8); transform-origin: center; cursor: pointer; animation: scalein 1s ease-in-out forwards; opacity: 0;} #tvnContent .location-person img {position: absolute; width: 100%; height: 100%; inset:0;} #tvnContent .location-person .location-person-hover {opacity: 0} #tvnContent img.pace-setter-main {width: 100%; max-width: 390px; display: block; margin: auto} #tvnContent img.park-rambler-main {width: 100%; max-width: 390px; display: block; margin: auto} #tvnContent img.soft-power-couple-main {width: 100%; max-width: 390px; display: block; margin: auto} @media (hover: hover) and (pointer: fine) { #tvnContent .location-person:hover .location-person-hover {opacity: 1} #tvnContent .location-person:hover .location-person-up {opacity: 0} } #tvnContent .location-freelance-foodie {width: 10%; height: 25%; left: 13%; top: 27%; animation-delay: 1.8s} #tvnContent .location-soft-power-couple {width: 15%; height: 25%; left: 29%; top: 22.5%; animation-delay: 1.9s} #tvnContent .location-founding-member {width: 13.5%; height: 27%; left: 28%; top: 52.2%; animation-delay: 2s} #tvnContent .location-retired-socialite {width: 7%; height: 28%; left: 13%; top: 77%; animation-delay: 2.1s} #tvnContent .location-gallery-goer {width: 6%; height: 28%; left: 47.5%; top: 58%; animation-delay: 2.2s} #tvnContent .location-pace-setter {width: 8%; height: 28%; left: 75%; top: 25%; animation-delay: 2.3s} #tvnContent .location-park-rambler {width: 8%; height: 29%; left: 83%; top: 69%; animation-delay: 2.4s} #tvnContent .text-location {cursor: pointer; opacity: 0; position: absolute; z-index: 7;} #tvnContent .text-notting-hill {width: 8.6%; height: 6.3%; left: 1%; top: 27%; animation: fadein 1s ease-in-out 1.8s forwards;} #tvnContent .text-marylebone {width: 9%; height: 6.5%; left: 37%; top: 24%; animation: fadein 1s ease-in-out 1.9s forwards;} #tvnContent .text-mayfair {width: 5.5%; height: 6.3%; left: 32%; top: 53%; animation: fadein 1s ease-in-out 2s forwards;} #tvnContent .text-chelsea {width: 6%; height: 6%; left: 15.5%; top: 67%; animation: fadein 1s ease-in-out 2.1s forwards;} #tvnContent .text-greenwich {width: 8%; height: 6%; left: 88%; top: 76%; animation: fadein 1s ease-in-out 2.4s forwards;} #tvnContent .text-shoreditch {width: 7.9%; height: 5.7%; left: 79%; top: 20%; animation: fadein 1s ease-in-out 2.4s forwards;} #tvnContent .text-st-james {width: 7.7%; height: 5.3%; left: 47.5%; top: 38%; animation: fadein 1s ease-in-out 2.4s forwards;} #tvnContent .map-layer-roads {animation:fadein 1.5s ease-out 0.5s forwards;} #tvnContent .map-layer-thames {animation:fadein 1.5s ease-out 1s forwards;} #tvnContent .map-keys {animation:fadein 1.5s ease-out 1.5s forwards;} #tvnContent .col.col-smaller-screen {display: none} @keyframes fadein { to {opacity: 1} } @keyframes scalein { to {opacity: 1; transform:translate(-50%,-50%) scale(1); transform-origin: center;} } @media(max-width: 1100px) { #tvnContent .popup h2 {font-size: 50px;} #tvnContent .popup-content-inner .col-text {gap: 20px;} #tvnContent .popup-content-inner .col-text p {font-size: 16px;} #tvnContent .col-text .location p {font-size: 14px;} } @media(max-width: 950px) { #tvnContent h1 {font-size: 6vw; line-height: 1.1em; margin-bottom: 0.45em} #tvnContent .page-intro {padding-left: 20px; padding-right: 20px;} #tvnContent .page-intro p {line-height: 1.6em; width: 500px; max-width: 100%; margin-left: auto; margin-right: auto} #tvnContent .popup-locations .cols {flex-wrap: wrap; gap: 20px;} #tvnContent .popup-locations .col {width: calc(50% - 10px) !important; flex-shrink: 0; padding: 0 !important; border:none !important} #tvnContent .col.col-smaller-screen {display: flex; align-items: flex-end; justify-content: center} #tvnContent .col-keys {margin-top: 0} #tvnContent .col-keys .cols-inner {flex-direction: column; gap:0} #tvnContent .col-keys .cols-inner .col {width: 100%;} #tvnContent .keys-bus {margin: 30px 0; width: 100%;} } @media(max-width: 850px) { #tvnContent .cols.popup-content-cols {flex-direction: column; margin-top: 30px; justify-content: center; align-items: center} #tvnContent .cols.popup-content-cols .col-person {width: 100%; display: flex; justify-content: center;} #tvnContent .cols.popup-content-cols .col-person img {width: 350px;} #tvnContent .cols.popup-content-cols .col-text {width:500px; max-width: 100%;} #tvnContent .col-inner {max-width: 100%;} #tvnContent .popup-content {overflow: hidden} #tvnContent .popup h2 {text-align: center} #tvnContent .popup p.sub-head {text-align: center} #tvnContent .close-popup {top: 20px; right: 20px;} #tvnContent .popup-keys-content .cols.span-3, #tvnContent .popup-keys-content .cols.span-2 {flex-direction: column; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto} #tvnContent .popup-keys-content .cols .col {width: 100%;} #tvnContent .keys-intro {width: 100% !important; text-align: center !important; max-width: 100% !important;} } @media(max-width: 700px) { #tvnContent .map-section {max-width: calc(100% - 40px); margin: auto} #tvnContent .map-container {overflow: hidden;} #tvnContent .map {width: 1000px;margin-right: 50px;} #tvnContent .text-location, #tvnContent .map-layer-roads, #tvnContent .map-layer-thames, #tvnContent .map-keys {animation:none; opacity: 1;} #tvnContent .location-person {animation: none; opacity: 1; transform:translate(-50%,-50%) scale(1); transform-origin: center;} } @media(max-width: 640px) { #tvnContent .list-welcome-section .cols {flex-direction: column-reverse} #tvnContent .burberry-london-section .cols {flex-direction: column;} #tvnContent .list-welcome-section .cols .col {width: 100%} #tvnContent .burberry-london-section .cols .col {width: 100%} #tvnContent .locations-list {column-count: 2; column-gap: 45px;} #tvnContent .cta img {width: 126px;} #tvnContent .cta h3 {font-size: 43px;} #tvnContent .wrapper {padding-bottom: 50px;} #tvnContent .map-key {padding: 0;} #tvnContent .map-key p {font-size: 10px; justify-content: flex-start; text-align: left; line-height: 1.2em; align-items: flex-start} #tvnContent .popup-container-cols {flex-direction: column-reverse} #tvnContent .popup-list {width: 100%;} #tvnContent .popup-list ul {display: flex} #tvnContent .popup-list li {width: auto; height: 15vw; flex: 1;} #tvnContent .popup-list li:after {width: 100%; height: 15px; background: linear-gradient(180deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);} } @media(max-width: 500px) { #tvnContent h1 {font-size: 32px} #tvnContent h1 br {display: block} #tvnContent .page-intro p {font-size: 16px;} #tvnContent .locations-list {font-size: 26px;} #tvnContent .col-location {justify-content: flex-start} #tvnContent .locations-list li:before {left: -14px;} #tvnContent .list-welcome-section {padding:45px 0 50px 0;} #tvnContent .close-popup {font-size: 17px;} #tvnContent .popup h2 {font-size: 32px;} #tvnContent .popup p.sub-head {font-size: 20px;} #tvnContent .popup-content {padding-left: 30px; padding-right: 30px;} #tvnContent .close-popup {top: 12px; right: 12px; font-size: 16px; gap: 5px;} #tvnContent .map-key {margin-top: 20px;} #tvnContent .map {margin: 15px 0 20px 0;} #tvnContent .locations-list {font-size: 23px;} } @media(max-width: 440px) { #tvnContent .cta h3 {font-size: 33px;} #tvnContent .map-key p {font-size: 10px; gap: 5px; line-height: 1.3em} #tvnContent .map-key p img {width: 10px; transform: translateY(1px)} #tvnContent .popup-list li {padding: 8px;} } @media(max-width: 400px) { } @media(max-width: 375px) { #tvnContent .locations-list {font-size: 20px;} }