PageSourceSearch

https://opus-staging.webflow.io/contact

html opus-staging.webflow.io collected 2026-10-03 13:33:30 UTC 37,725 bytes, 890 lines download raw bytes

1<!DOCTYPE html><!-- Last Published: Thu Jun 11 2026 16:54:37 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="opus-staging.webflow.io" data-wf-page="6552726fdd8623750e1defe5" data-wf-site="655271ca3e2cbe413dde9147" lang="en"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>Contact | Koreatown Apartments For Rent in DTLA | Opus LA</title><meta content="Opus LA is the new marquee destination for modern apartment living in the heart of Los Angeles. Reach out to us with any questions about our DTLA apartments." name="description"/><meta content="Contact | Koreatown Apartments For Rent in DTLA | Opus LA" property="og:title"/><meta content="Opus LA is the new marquee destination for modern apartment living in the heart of Los Angeles. Reach out to us with any questions about our DTLA apartments." property="og:description"/><meta content="Contact | Koreatown Apartments For Rent in DTLA | Opus LA" name="twitter:title"/><meta content="Opus LA is the new marquee destination for modern apartment living in the heart of Los Angeles. Reach out to us with any questions about our DTLA apartments." name="twitter:description"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://cdn.prod.website-files.com/655271ca3e2cbe413dde9147/css/opus-staging.shared.b876354aa.min.css" rel="stylesheet" type="text/css" integrity="sha384-uHY1Sq9/zqBXVK/PWbu1tYo2svzW4bx/J1PeeG4tne4KSpOiw2KWtJVtWBWWCJAj" crossorigin="anonymous"/>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/655271ca3e2cbe413dde9147/66a1ad562f3b18f298f6d718_65527412e1ada1285fa8c399_favicon-32x32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/655271ca3e2cbe413dde9147/66a1ad5eaa92e7f94a3efdbf_655274639f1bfe7b054d7070_web_clip.jpg" rel="apple-touch-icon"/><link href="https://www.opuslosangeles.com/contact" rel="canonical"/>
vendor: 86 bytes, line 1
1<script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script>
1<!-- Google Tag Manager -->
2<script>
vendor: 327 bytes, lines 2-6
2(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
3new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
4j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
5'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
6})(window,document,'script','dataLayer','
6GTM-WF68Z6LM
vendor: 3 bytes, line 6
6');
6</script>
6
7<!-- End Google Tag Manager --><!-- Mapbox Resources -->
8<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
9<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
9
10
11<style>
12/*style map popups*/
13
14
15.marker {
16  position: relative;
17  width: 150px;
18  height: 150px;
19  cursor: pointer;
20}
21.marker::after {
22  content: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_59_3434)'%3E%3Crect width='150' height='150' rx='75' fill='%23CC9F52'/%3E%3Cpath d='M74.8028 124.275C47.2628 124.275 28.4978 104.43 28.4978 76.35C28.4978 48.81 47.1278 28.56 74.8028 28.56C102.613 28.56 121.648 48.81 121.648 76.35C121.648 104.295 102.883 124.275 74.8028 124.275ZM74.8028 122.385C97.2128 122.385 109.228 103.89 109.228 76.35C109.228 49.08 97.0778 30.45 74.8028 30.45C52.3928 30.45 40.5128 49.485 40.5128 76.35C40.5128 103.89 52.5278 122.385 74.8028 122.385Z' fill='%231D1933'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_59_3434'%3E%3Crect width='150' height='150' rx='75' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
23  position: absolute;
24  inset: 0;
25  z-index: 1;
26}
27
28
29</style></head><body><div class="page-wrapper background-color-plum"><div class="global-styles w-embed"><style>
30
31/* Make text look crisper and more legible in all browsers */
32body {
33  -webkit-font-smoothing: antialiased;
34  -moz-osx-font-smoothing: grayscale;
35  font-smoothing: antialiased;
36  text-rendering: optimizeLegibility;
37}
38
39a {
40color: inherit;
41}
42
43/* Focus state style for keyboard navigation for the focusable elements */
44*[tabindex]:focus-visible,
45  input[type="file"]:focus-visible {
46   outline: 0.125rem solid #4d65ff;
47   outline-offset: 0.125rem;
48}
49
50/* Get rid of top margin on first element in any rich text element */
51.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
52  margin-top: 0 !important;
53}
54
55/* Get rid of bottom margin on last element in any rich text element */
56.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
57	margin-bottom: 0 !important;
58}
59
60/* Prevent all click and hover interaction with an element */
61.pointer-events-off {
62	pointer-events: none;
63}
64
65/* Enables all click and hover interaction with an element */
66.pointer-events-on {
67  pointer-events: auto;
68}
69
70/* Create a class of .div-square which maintains a 1:1 dimension of a div */
71.div-square::after {
72	content: "";
73	display: block;
74	padding-bottom: 100%;
75}
76
77/* Make sure containers never lose their center alignment */
78.container-medium,.container-small, .container-large {
79	margin-right: auto !important;
80  margin-left: auto !important;
81}
82
83/* 
84Make the following elements inherit typography styles from the parent and not have hardcoded values. 
85Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
86Uncomment this CSS to use it in the project. Leave this message for future hand-off.
87*/
88/*
89a,
90.w-input,
91.w-select,
92.w-tab-link,
93.w-nav-link,
94.w-dropdown-btn,
95.w-dropdown-toggle,
96.w-dropdown-link {
97  color: inherit;
98  text-decoration: inherit;
99  font-size: inherit;
100}
101*/
102
103/* Apply "..." after 3 lines of text */
104.text-style-3lines {
105	display: -webkit-box;
106	overflow: hidden;
107	-webkit-line-clamp: 3;
108	-webkit-box-orient: vertical;
109}
110
111/* Apply "..." after 2 lines of text */
112.text-style-2lines {
113	display: -webkit-box;
114	overflow: hidden;
115	-webkit-line-clamp: 2;
116	-webkit-box-orient: vertical;
117}
118
119/* Adds inline flex display */
120.display-inlineflex {
121  display: inline-flex;
122}
123
124/* These classes are never overwritten */
125.hide {
126  display: none !important;
127}
128
129@media screen and (max-width: 991px) {
130    .hide, .hide-tablet {
131        display: none !important;
132    }
133}
134  @media screen and (max-width: 767px) {
135    .hide-mobile-landscape{
136      display: none !important;
137    }
138}
139  @media screen and (max-width: 479px) {
140    .hide-mobile{
141      display: none !important;
142    }
143}
144 
145.margin-0 {
146  margin: 0rem !important;
147}
148  
149.padding-0 {
150  padding: 0rem !important;
151}
152
153.spacing-clean {
154padding: 0rem !important;
155margin: 0rem !important;
156}
157
158.margin-top {
159  margin-right: 0rem !important;
160  margin-bottom: 0rem !important;
161  margin-left: 0rem !important;
162}
163
164.padding-top {
165  padding-right: 0rem !important;
166  padding-bottom: 0rem !important;
167  padding-left: 0rem !important;
168}
169  
170.margin-right {
171  margin-top: 0rem !important;
172  margin-bottom: 0rem !important;
173  margin-left: 0rem !important;
174}
175
176.padding-right {
177  padding-top: 0rem !important;
178  padding-bottom: 0rem !important;
179  padding-left: 0rem !important;
180}
181
182.margin-bottom {
183  margin-top: 0rem !important;
184  margin-right: 0rem !important;
185  margin-left: 0rem !important;
186}
187
188.padding-bottom {
189  padding-top: 0rem !important;
190  padding-right: 0rem !important;
191  padding-left: 0rem !important;
192}
193
194.margin-left {
195  margin-top: 0rem !important;
196  margin-right: 0rem !important;
197  margin-bottom: 0rem !important;
198}
199  
200.padding-left {
201  padding-top: 0rem !important;
202  padding-right: 0rem !important;
203  padding-bottom: 0rem !important;
204}
205  
206.margin-horizontal {
207  margin-top: 0rem !important;
208  margin-bottom: 0rem !important;
209}
210
211.padding-horizontal {
212  padding-top: 0rem !important;
213  padding-bottom: 0rem !important;
214}
215
216.margin-vertical {
217  margin-right: 0rem !important;
218  margin-left: 0rem !important;
219}
220  
221.padding-vertical {
222  padding-right: 0rem !important;
223  padding-left: 0rem !important;
224}
225
226/* Webkit (Chrome, Safari, Edge) */
227input:-webkit-autofill {
228  box-shadow: 0 0 0 30px #1D1933 inset !important;
229}
230
231input:-webkit-autofill {
232    -webkit-box-shadow:0 0 0 50px #1D1933 inset; /* Change the color to your own background color */
233    -webkit-text-fill-color: #FFFFFF;
234}
235input:-webkit-autofill:focus {
236    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px #1D1933 inset;
237    -webkit-text-fill-color: #FFFFFF;
238}
239
240.swiper-slide .amenities-img-text {
241	opacity: 0;
242}
243
244.swiper-slide.swiper-slide-active .amenities-img-text {
245	opacity: 1;
246}
247
248/* Residence 1 layout */
249
250[residence-1-layout="slider"] .residences-gallery-still-item {
251display: block !important;
252}
253
254[residence-1-layout="still"] .residences-single-still-item {
255display: block !important;
256}
257
258[residence-1-layout="video"] .residences-video-item {
259display: block !important;
260}
261
262/* Residence 2 layout */
263
264[residence-2-layout="slider"] .residences-gallery-still-item {
265display: block !important;
266}
267
268[residence-2-layout="still"] .residences-single-still-item {
269display: block !important;
270}
271
272[residence-2-layout="video"] .residences-video-item {
273display: block !important;
274}
275
276/* Residence 3 layout */
277
278[residence-3-layout="slider"] .residences-gallery-still-item {
279display: block !important;
280}
281
282[residence-3-layout="still"] .residences-single-still-item {
283display: block !important;
284}
285
286[residence-3-layout="video"] .residences-video-item {
287display: block !important;
288}
289
290.slider-thumbs_overflow {
291	width: calc(100% + 100vw);
292}
293.slider-thumbs_overflow > div {
294	width: calc(100% - 100vw);
295}
296
297.ot-sdk-show-settings {
298text-decoration: none;
299}
300 
301/* Tablet & below */
302@media screen and (max-width: 991px) {
303	.nav-menu {
304height: calc(100% - 4rem);
305}
306}
307
308
309/* Between two sizes */
310@media screen and (min-width: 992px) and (max-width: 1248px)  {
311.tours-tabs-menu {
312  display: flex;
313  padding-top: 1rem;
314  padding-right: 2rem;
315  padding-bottom: 1rem;
316  padding-left: 2rem;
317  flex-direction: column;
318  justify-content: center;
319  align-items: stretch;
320  grid-auto-columns: 1fr;
321  grid-column-gap: 1rem;
322  grid-row-gap: 1rem;
323  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
324  grid-template-rows: auto;
325  background-color: var(--plum--main);
326}
327
328.tours-tabs-menu:medium {
329  display: flex;
330  padding-right: 1rem;
331  padding-left: 1rem;
332  flex-direction: column;
333  align-items: stretch;
334  grid-column-gap: 0.5rem;
335  grid-row-gap: 0.5rem;
336}
337}
338
339
340</style></div><div class="nav-wrapper"><div class="nav"><a href="/" class="nav-brand-link w-inline-block"><img src="https://cdn.prod.website-files.com/655271ca3e2cbe413dde9147/66a1ab7526f89b5046484467_6553758fb51d5d977dc7c988_logomark.svg" loading="eager" alt="Logo Opus Los Angeles" class="nav-logomark"/><img src="https://cdn.prod.website-files.com/655271ca3e2cbe413dde9147/655380baa5c141c3250120f1_logotype.svg" loading="lazy" alt="Logotype" class="nav-logotype"/></a><div class="nav-menu"><div class="nav-links-wrap"><div class="nav-line"></div><a href="/availability" class="nav-link w-inline-block"><p>AVAILABILITY</p></a><div class="nav-line"></div><a href="/residences" class="nav-link w-inline-block"><p>residences</p></a><div class="nav-line"></div><a href="/amenities" class="nav-link w-inline-block"><p>AMENITIES</p></a><div class="nav-line"></div><a href="/location" class="nav-link w-inline-block"><p>Location</p></a><div class="nav-line"></div><a href="/gallery" class="nav-link w-inline-block"><p>gallery</p></a><div class="nav-line"></div><a href="https://www.opuslosangeles.com/amenities#virtual-tour" class="nav-link w-inline-block"><p>Virtual Tours</p></a><div class="nav-line"></div><a href="https://opuslosangeles.securecafe.com/residentservices/opus-la/userlogin.aspx" target="_blank" class="nav-link w-inline-block"><p>residents</p></a><div class="nav-line"></div><a href="/contact" aria-current="page" class="nav-link w-inline-block w--current"><p>Contact</p></a><div class="nav-line"></div></div><div class="nav-contact"><a aria-label="Instagram Link" href="https://www.facebook.com/opuslosangeles" target="_blank" class="icon-link w-inline-block">
340<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 8 15" fill="none" class="icon-1x1-small"><g clip-path="url(#clip0_478_1250)"><path d="M7.65446 5.54546H5.09085V4.09093C5.09085 3.34039 5.15194 2.86767 6.22757 2.86767H7.5861V0.554967C6.92502 0.486604 6.2603 0.45315 5.59485 0.454605C3.62178 0.454605 2.18179 1.65968 2.18179 3.87202V5.54546H0V8.45452L2.18179 8.45379V14.9999H5.09085V8.45234L7.32065 8.45161L7.65446 5.54546Z" fill="currentColor"></path></g><defs><clipPath id="clip0_478_1250"><rect width="8" height="15" fill="currentColor"></rect></clipPath></defs></svg></a><a aria-label="Instagram Link" href="https://www.instagram.com/opuslosangeles/" target="_blank" class="icon-link w-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 15 15" fill="none" class="icon-1x1-small"><g clip-path="url(#clip0_478_1252)"><path d="M3.48489 0.454559C1.81843 0.454559 0.45459 1.8184 0.45459 3.48486V11.9697C0.45459 13.6362 1.81843 15 3.48489 15H11.9697C13.6362 15 15 13.6362 15 11.9697V3.48486C15 1.8184 13.6362 0.454559 11.9697 0.454559H3.48489ZM3.48489 1.66668H11.9697C12.9813 1.66668 13.7879 2.47335 13.7879 3.48486V5.30304H10.3938C9.72757 4.57033 8.79043 4.09092 7.72732 4.09092C6.66421 4.09092 5.72706 4.57033 5.06081 5.30304H1.66671V3.48486C1.66671 2.47335 2.47338 1.66668 3.48489 1.66668ZM10.7576 2.8788C10.6773 2.87767 10.5976 2.8925 10.523 2.92245C10.4485 2.9524 10.3807 2.99686 10.3235 3.05325C10.2663 3.10964 10.2209 3.17684 10.1899 3.25093C10.1589 3.32503 10.1429 3.40454 10.1429 3.48486C10.1429 3.56518 10.1589 3.6447 10.1899 3.71879C10.2209 3.79289 10.2663 3.86008 10.3235 3.91647C10.3807 3.97287 10.4485 4.01733 10.523 4.04727C10.5976 4.07722 10.6773 4.09206 10.7576 4.09092H11.9697C12.0501 4.09206 12.1298 4.07722 12.2043 4.04727C12.2788 4.01733 12.3467 3.97287 12.4039 3.91647C12.4611 3.86008 12.5065 3.79289 12.5375 3.71879C12.5685 3.6447 12.5844 3.56518 12.5844 3.48486C12.5844 3.40454 12.5685 3.32503 12.5375 3.25093C12.5065 3.17684 12.4611 3.10964 12.4039 3.05325C12.3467 2.99686 12.2788 2.9524 12.2043 2.92245C12.1298 2.8925 12.0501 2.87767 11.9697 2.8788H10.7576ZM7.72732 5.30304C9.07337 5.30304 10.1516 6.38124 10.1516 7.72729C10.1516 9.07334 9.07337 10.1515 7.72732 10.1515C6.38127 10.1515 5.30307 9.07334 5.30307 7.72729C5.30307 6.38124 6.38127 5.30304 7.72732 5.30304ZM1.66671 6.51517H4.33638C4.19841 6.89823 4.09095 7.29802 4.09095 7.72729C4.09095 9.72842 5.72619 11.3637 7.72732 11.3637C9.72845 11.3637 11.3637 9.72842 11.3637 7.72729C11.3637 7.29802 11.2562 6.89823 11.1183 6.51517H13.7879V11.9697C13.7879 12.9812 12.9813 13.7879 11.9697 13.7879H3.48489C2.47338 13.7879 1.66671 12.9812 1.66671 11.9697V6.51517Z" fill="currentColor"></path></g><defs><clipPath id="clip0_478_1252"><rect width="15" height="15" fill="currentColor"></rect></clipPath></defs></svg></a></div></div><div class="nav-burger"><div class="nav-burger-line"></div><div class="nav-burger-line"></div></div></div></div><section class="accessibility_wrap"><div class="accessibility_contain"><div class="accessibility_item"><div class="accessibility_content"><div class="accessibility_close"><div class="accessibility_cross w-embed"><svg width="inherit" height="inherit" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
341<path d="M18.5103 6.98975L6.48944 19.0106" stroke="currentColor"/>
342<path d="M18.5103 19.0105L6.48944 6.98968" stroke="currentColor"/>
343</svg></div></div><div class="accessibility_heading_wrap"><h3 class="heading-style-h3">accessibility statement</h3><p class="text-color-black">Our community strives to improve the usability and accessibility of its website and mobile application for all users, including those with disabilities. If you are a user with a disability, or an individual assisting a user with a disability, and have difficulty accessing or navigating our content, please contact us via telephone, noted on the Contact page, so we can assist with providing the information or transaction you seek through an alternate communication method. Please note that our website may link to or interface with, third-party websites that we do not control.</p></div></div></div></div></section><main class="main-wrapper"><a href="https://opuslosangeles.securecafe.com/onlineleasing/opus-la/guestlogin.aspx" target="_blank" class="badge w-inline-block"><div class="badge-line"></div><p id="badge-text" class="text-size-tiny text-style-allcaps text-weight-bold hide-tablet">lease now</p><p class="text-size-tiny text-style-allcaps text-weight-bold hide-desktop">current availability</p><div class="badge-line"></div></a><section class="contact-hero-section"><div class="padding-global"><div class="contact-hero-layout"><div class="contact-hero-top"><h1 js-line-animation="" class="heading-style-h3 text-color-gold">Make Opus LA Your Personal Getaway</h1><div class="contact-info-wrap"><div class="contact-hero-link-wrap"><a href="https://maps.app.goo.gl/K1pHerWT6PMDEDMm6" target="_blank" class="nav-link-line w-inline-block"><p class="text-color-white">Wilshire Tower : 3545 Wilshire Blvd<br/>Los Angeles, California 90010<br/></p><div class="nav-link-line-line is-white"></div></a><a href="https://maps.app.goo.gl/9tU21pQfjTQc1F4v9" target="_blank" class="nav-link-line w-inline-block"><p class="text-color-white"><br/>Sixth Tower : 3650 W 6th St<br/>Los Angeles, California 90020</p><div class="nav-link-line-line is-white"></div></a><a href="tel:+18447305688" class="nav-link-line w-inline-block"><p class="text-color-white"><br/>(844) 730-5688</p><div class="nav-link-line-line is-white"></div></a><a href="mailto:[email protected]" class="nav-link-line w-inline-block"><p class="text-color-white">[email protected]</p><div class="nav-link-line-line is-white"></div></a></div></div></div><div class="contact-hero-bottom"><div class="contact-hero-bottom-top"><p class="text-style-allcaps text-weight-bold text-color-gold">join the list</p><p class="text-color-white">Leave us your info if you would like to be the first to receive details on our availability, leasing offers, and special events at Opus apartments for rent in Koreatown, Los Angeles.</p></div><div class="contact-form-wrap"><div class="contact-form-block w-form"><form id="wf-form-Contact-Form" name="wf-form-Contact-Form" data-name="Contact Form" method="post" aria-label="Contact Form" class="contact-form" data-wf-page-id="6552726fdd8623750e1defe5" data-wf-element-id="8b84d466-6f57-b6f5-5153-54a3e8ec6958"><div class="contact-field-wrap"><div class="contact-text-field_wrap"><label for="First-Name" class="text-align-left">First name*</label><input class="contact-text-field w-input" maxlength="256" name="First-Name-2" data-name="First Name 2" placeholder="John" type="text" id="First-Name-2" required=""/></div><div class="contact-text-field_wrap"><label for="Last-Name" class="text-align-left">Last name*</label><input class="contact-text-field w-input" maxlength="256" name="Last-Name-3" data-name="Last Name 3" placeholder="Doe" type="text" id="Last-Name-3" required=""/></div></div><div class="contact-field-wrap"><div class="contact-text-field_wrap"><label for="Email" class="text-align-left">Email*</label><input class="contact-text-field w-input" maxlength="256" name="emailOpus" data-name="emailOpus" placeholder="[email protected]" type="email" id="emailOpus" required=""/></div><div class="contact-text-field_wrap"><label for="Phone-2" class="text-align-left">Phone</label><input class="contact-text-field w-input" maxlength="256" name="Phone-3" data-name="Phone 3" placeholder="(213) 722-6787" type="tel" id="Phone-3"/></div></div><div class="contact-field-wrap"><div class="contact-text-field_wrap"><label for="Comment" class="text-align-left">Comment</label><textarea id="Comments-2" name="Comments-2" maxlength="5000" data-name="Comments 2" placeholder="Your comment" class="contact-text-area w-input"></textarea></div></div><div class="form-submit-wrapper"><div data-sitekey="6LehFlEqAAAAAAs_xf5YpmzdG7zz6q2_GawjUSac" class="w-form-formrecaptcha g-recaptcha g-recaptcha-error g-recaptcha-disabled"></div><input type="submit" data-wait="Please wait..." class="contact-button w-button" value="Submit"/></div></form><div class="contact-success-wrap w-form-done"><div class="contact-success-content"><p class="heading-style-h1 text-color-gold">You&#x27;re on<br/> the list!</p></div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div></div></div></div></section><section class="contact-map-section"><div class="padding-global"><address id="map-container" class="contact-map-wrap"></address></div></section><footer class="footer background-color-plum"><div class="padding-global"><div class="footer-layout"><div class="footer-line background-color-white"></div><div class="footer-content"><div class="footer-bottom"><div class="footer-privacy-wrap"><div class="contact-link-privacy"><a href="/accessibility" target="_blank" class="nav-link-line w-inline-block"><p class="text-weight-bold text-color-white">Accessibility</p><div class="nav-link-line-line"></div></a><a href="https://opuslosangeles.com/privacy-policy#form" class="nav-link-line w-inline-block"><p class="text-weight-bold text-color-white"><strong>Do Not Sell or Share My Personal Information</strong></p><div class="nav-link-line-line"></div></a><a href="/privacy-policy" target="_blank" class="nav-link-line w-inline-block"><p class="text-weight-bold text-color-white">Privacy Policy</p><div class="nav-link-line-line"></div></a><div class="nav-link-line is-cookie is-white"><div class="w-embed"><a href="javascript:void(0);" class="ot-sdk-show-settings">Customize Cookie Settings</a></div><div class="nav-link-line-line"></div></div></div></div></div></div></div></div></footer></main></div>
343<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=655271ca3e2cbe413dde9147" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
343<script src="https://cdn.prod.website-files.com/655271ca3e2cbe413dde9147/js/opus-staging.schunk.7c514c4b18297836.js" type="text/javascript" integrity="sha384-NVczoWkxvwIB0uOZW0E/foOVX+3WHj0iDu3pZo9+OrC4eEUT4Pz0KltODTdGfjot" crossorigin="anonymous"></script>
343<script src="https://cdn.prod.website-files.com/655271ca3e2cbe413dde9147/js/opus-staging.a0aa6ca1.1176730d49a681da.js" type="text/javascript" integrity="sha384-gO7qI4w+8VF61trYvx3iMWTVlicXw3RMoKQo6dp5Kc1NV+ZwnPxYVGjRDLYyGF0Z" crossorigin="anonymous"></script>
343<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 343-344
343
344<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
344GTM-WF68Z6LM
vendor: 83 bytes, lines 344-345
344"
345height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
346<!-- End Google Tag Manager (noscript) -->
347
348<script src="https://cdn.jsdelivr.net/gh/timothydesign/script/split-type.js"></script>
vendor: 1 bytes, line 348
348
349<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
vendor: 1 bytes, line 349
349
350<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
350
351
352<script>
353window.addEventListener("DOMContentLoaded", (event) => {
354  
355  function showAccessibility() {
356  let tl = gsap.timeline();
357  tl.set(".accessibility_wrap", {display: "block"});
358  tl.to(".accessibility_wrap", {
359        opacity: 1,
360        duration: 0.2,
361        ease: "none",
362      }); 
363  }
364  
365  function hideAccessibility() {
366  let tl = gsap.timeline();
367   tl.to(".accessibility_wrap", {
368        opacity: 0,
369        duration: 0.2,
370        ease: "none",
371      }); 
372    tl.set(".accessibility_wrap", {display: "none"});
373  }
374 
375  
376  
377  $("#accessibility-btn").on("click", function(){
378  	showAccessibility();
379  });
380  
381   $(".accessibility_close").on("click", function(){
382  	hideAccessibility();
383  });
384  
385  
386  // Apparition du pop-up au chargement de la page
387
388  let announcementBar = $(".announcement-bar");
389  let announcementVisibility = $(announcementBar)
390    .find($(".visibility-text"))
391    .text();
392  let popup = $(".pop-up-cms-wrapper");
393  let popupVisibility = $(popup).find($(".visibility-text")).text();
394  if (popupVisibility === "No") {
395    $(popup).css("display", "none");
396  } else {
397    // Your function to set the display to "block"
398    function showPopup() {
399      $(".pop-up-cms-wrapper").css("display", "block");
400    }
401
402    // Your timeline to set opacity to 1
403    let popupLoad = gsap.timeline({ delay: 3 });
404    popupLoad
405      .call(showPopup) // Execute the showPopup function before the timeline starts
406      .to(".pop-up-cms-wrapper", {
407        opacity: 1,
408        duration: 0.2,
409        ease: "none",
410      });
411
412    let closePopup = gsap.timeline({
413      paused: true,
414      onComplete: function () {
415        $(".pop-up-cms-wrapper").css("display", "none");
416      },
417    });
418    closePopup.to(".pop-up-cms-wrapper", {
419      opacity: 0,
420      duration: 0.2,
421      ease: "none",
422    });
423    $(".pop-up-close").on("click", function () {
424      closePopup.play();
425    });
426  }
427  if (announcementVisibility === "No") {
428    $(announcementBar).css("display", "none");
429    $(announcementBar).removeClass("is-visible");
430  } else {
431    // Calculer la position top du badge si la barre est présente
432
433    function updateBadgePosition() {
434      var announcementBar = document.querySelector(".announcement-bar");
435      var badge = document.querySelector(".badge");
436
437      // Get the height of the announcement bar
438      let announcementBarHeight = announcementBar.offsetHeight;
439
440      // Set the top position of the badge
441      if ($(announcementBar).hasClass("is-visible")) {
442        badge.style.top = `calc(1.5rem + ${announcementBarHeight}px)`;
443      } else {
444        badge.style.top = "1.5rem";
445      }
446    }
447
448    // Initial update on page load
449    updateBadgePosition();
450
451    // Update on window resize
452    window.addEventListener("resize", updateBadgePosition);
453
454    let closeAnnouncement = gsap.timeline({
455      paused: true,
456      onComplete: function () {
457        $(announcementBar).css("display", "none");
458      },
459    });
460    closeAnnouncement.to(".announcement-bar", {
461      opacity: 0,
462      duration: 0.2,
463      ease: "none",
464    });
465    $(".announcement-close").on("click", function () {
466      closeAnnouncement.play();
467      $(announcementBar).removeClass("is-visible");
468      updateBadgePositison();
469    });
470  }
471});
472
473// Open Amenity Panel
474
475$(".floor-plan-dot").each(function () {
476  let openBtn = $(this).find(".floor-plan-btn");
477  let panel = $(this).find(".floor-plan-panel");
478  let panelSiblings = $(this).siblings().find(".floor-plan-panel");
479  let closeBtn = $(this).find(".floor-plan-close-btn");
480
481  openBtn.on("click", function () {
482    $(this).toggleClass("is-active");
483    panelSiblings.removeClass("open");
484    panel.toggleClass("open");
485  });
486  
487  closeBtn.on("click", function () {
488    panel.toggleClass("open");
489  });
490  
491});
492   
493  
494// Javascript Media Query
495
496function checkBreakpoint(x) {
497  if (x.matches) {
498// Select the trigger and target elements
499let triggerEl = $(".hero-section"); // Select the hero-section (assuming there's only one)
500let targetEl = $(".nav"); // Select the nav element
501
502// Create a GSAP timeline with ScrollTrigger
503let opacityNav = gsap.timeline({
504  scrollTrigger: {
505    trigger: triggerEl, // Trigger based on the hero-section
506    start: "bottom top", // When the bottom of hero-section reaches the top of viewport
507    toggleActions: "play reverse play reverse", // Actions on scroll events
508    onEnter: () => {
509      console.log("Hero out of view"); // Confirm the trigger is activated
510    }
511  }
512});
513
514// Animate the opacity of the .nav element
515opacityNav.to(targetEl, { opacity: 1, ease: "linear", duration: 0.7 });
516
517
518
519    //Location Scrolltrigger
520    $(".location-around-section").each(function (index) {
521      let triggerEl = $(this);
522      let horLines = $(this).find(".location-around-line");
523      let verLines = $(this).find(".location-around-item-line-inner");
524      let tl = gsap.timeline({
525        scrollTrigger: {
526          trigger: triggerEl,
527          start: "top center",
528          end: "bottom bottom",
529        },
530      });
531      tl.to(horLines, { width: "100%", duration: 2, ease: "power4.out" });
532      tl.to(
533        verLines,
534        { height: "100%", duration: 2, ease: "power4.out" },
535        0,
536        3
537      );
538    });
539
540    let fadeInAvailability = gsap.timeline({ delay: 0.7 });
541    fadeInAvailability.to("#fadein", {
542      opacity: 1,
543      duration: 1.5,
544      ease: "power4.out",
545    });
546
547    let fadeInContact = gsap.timeline({ delay: 0.7 });
548    fadeInContact.to(".contact-info-wrap", {
549      opacity: 1,
550      duration: 1.5,
551      ease: "power4.out",
552    });
553    fadeInContact.to(
554      ".contact-hero-bottom",
555      {
556        opacity: 1,
557        duration: 1.5,
558        ease: "none",
559      },
560      1
561    );
562
563    $(".home-gallery-layout").each(function () {
564      let triggerEl = $(this);
565      let textContentLeft = triggerEl.find(".home-gallery-content.is-left");
566      let textContentRight = triggerEl.find(".home-gallery-content.is-right");
567      let prevArrow = triggerEl.find(".slider-gallery-arrow.swiper-prev");
568      let nextArrow = triggerEl.find(".slider-gallery-arrow.swiper-next");
569
570      let tl = gsap.timeline({
571        scrollTrigger: {
572          trigger: triggerEl,
573          start: "top 40%",
574          end: "bottom bottom",
575          toggleActions: "restart none none reverse",
576        },
577      });
578
579      let textContent = textContentLeft.length
580        ? textContentLeft
581        : textContentRight;
582      let xPercentValue = textContentLeft.length ? -10 : 10; // Adjust xPercent based on content
583
584      tl.fromTo(
585        textContent,
586        {
587          opacity: 0,
588          xPercent: xPercentValue,
589        },
590        {
591          opacity: 1,
592          xPercent: 0,
593          duration: 1,
594          ease: "power4.out",
595        }
596      );
597
598      tl.fromTo(
599        prevArrow,
600        {
601          opacity: 0,
602          xPercent: 20,
603        },
604        {
605          opacity: 1,
606          xPercent: 0,
607          duration: 1,
608          ease: "power4.out",
609        },
610        0
611      );
612
613      tl.fromTo(
614        nextArrow,
615        {
616          opacity: 0,
617          xPercent: -20,
618        },
619        {
620          opacity: 1,
621          xPercent: 0,
622          duration: 1,
623          ease: "power4.out",
624        },
625        0
626      );
627    });
628
629    $("[js-line-scrolltrigger]").each(function (index) {
630      gsap.set($(this), { autoAlpha: 1 });
631      let textEl = $(this);
632      let textContent = $(this).text();
633      let tl;
634
635      function splitTextTrigger() {
636        new SplitType(textEl, { types: "lines", tagName: "span" });
637        textEl.find(".line").each(function (index) {
638          let lineContent = $(this).html();
639          $(this).html("");
640          $(this).append(
641            `<span class="line-inner" style="display: block;">${lineContent}</span>`
642          );
643        });
644        tl = gsap.timeline({
645          scrollTrigger: {
646            trigger: textEl,
647            start: "top 80%",
648            end: "bottom bottom",
649            toggleActions: "play none none none",
650          },
651        });
652        tl.fromTo(
653          textEl.find(".line-inner"),
654          { yPercent: -100 },
655          {
656            yPercent: 0,
657            duration: 2,
658            ease: "power4.out",
659          }
660        );
661      }
662      splitTextTrigger();
663
664      let windowWidth = window.innerWidth;
665      window.addEventListener("resize", function () {
666        if (windowWidth !== window.innerWidth) {
667          windowWidth = window.innerWidth;
668          tl.kill();
669          textEl.text(textContent);
670          splitTextTrigger();
671        }
672      });
673    });
674
675    let heroScroll = gsap.timeline({
676      scrollTrigger: {
677        trigger: ".hero-section",
678        start: "bottom 90%",
679        end: "bottom 30%",
680        scrub: 1,
681      },
682    });
683
684    heroScroll.to(".hero-section", {
685      opacity: 0,
686    });
687
688    
689
690    // Split Type
691
692    $("[js-line-animation]").each(function (index) {
693      gsap.set($(this), { autoAlpha: 1 });
694      let textEl = $(this);
695      let textContent = $(this).text();
696      let tl;
697      let heroScroll;
698
699      function splitTextTrigger() {
700        new SplitType(textEl, { types: "lines", tagName: "span" });
701        textEl.find(".line").each(function (index) {
702          let lineContent = $(this).html();
703          $(this).html("");
704          $(this).append(
705            `<span class="line-inner" style="display: block;">${lineContent}</span>`
706          );
707        });
708        tl = gsap.timeline({ delay: 0.5 });
709        tl.fromTo(
710          textEl.find(".line-inner"),
711          { yPercent: -100, rotation: -7, opacity: 0 },
712          {
713            yPercent: 0,
714            rotation: 0,
715            duration: 2.5,
716            opacity: 1,
717            ease: "power4.out",
718          }
719        );
720      }
721      splitTextTrigger();
722
723      let windowWidth = window.innerWidth;
724      window.addEventListener("resize", function () {
725        if (windowWidth !== window.innerWidth) {
726          windowWidth = window.innerWidth;
727          tl.kill();
728          textEl.text(textContent);
729          splitTextTrigger();
730        }
731      });
732    });
733
734    $(".button-text-link").each(function () {
735      let firstText = $(this).find(".is-1");
736      let secondText = $(this).find(".is-2");
737      let btnAnimation = gsap.timeline({ paused: true });
738      btnAnimation.to(firstText, {
739        yPercent: -100,
740        duration: 0.2,
741        ease: "none",
742      });
743      btnAnimation.to(
744        secondText,
745        {
746          yPercent: -100,
747          duration: 0.2,
748          ease: "none",
749        },
750        0
751      );
752
753      $(this).on("mouseenter", function () {
754        btnAnimation.play();
755      });
756      $(this).on("mouseleave", function () {
757        btnAnimation.reverse();
758      });
759    });
760
761    function updatePopupWidth() {
762      var windowWidth = $(window).width();
763      var newWidth = windowWidth - 240; // 15rem is equal to 240px (assuming 1rem = 16px)
764
765      $(".pop-up-cms-wrapper").css("width", newWidth + "px");
766    }
767
768    // Call the function on page load
769    updatePopupWidth();
770
771    // Update on window resize
772    $(window).resize(function () {
773      updatePopupWidth();
774    });
775
776    $(".nav-link-line").each(function () {
777      $(this).on("mouseenter", function () {
778        $(this).find(".nav-link-line-line").addClass("hover");
779      });
780      $(this).on("mouseleave", function () {
781        $(this).find(".nav-link-line-line").removeClass("hover");
782      });
783
784      // Effet hover close announcement bar
785
786      $(".announcement-close").on("mouseenter", function () {
787        $(this).addClass("close");
788      });
789      $(".announcement-close").on("mouseleave", function () {
790        $(this).removeClass("close");
791      });
792
793      // Effet hover close button pop-up
794
795      $(".pop-up-close").on("mouseenter", function () {
796        $(this).addClass("close");
797      });
798      $(".pop-up-close").on("mouseleave", function () {
799        $(this).removeClass("close");
800      });
801    });
802
803    // Footer line animation
804
805    let footerLine = gsap.timeline({
806      scrollTrigger: {
807        trigger: ".footer-line",
808        start: "top 80%",
809        toggleActions: "play none none none",
810      },
811    });
812    footerLine.to(".footer-line", {
813      width: "100%",
814      duration: 1,
815      ease: "power4.out",
816    });
817  } else {
818    $(".nav-wrapper").prepend($(".badge"));
819    $(".nav-burger").on("click", function () {
820      $(this).toggleClass("is-active");
821      if ($(this).hasClass("is-active")) {
822        $(".nav-burger-line").eq(0).addClass("is-top");
823        $(".nav-burger-line").eq(1).addClass("is-bottom");
824        $(".nav-menu").addClass("open");
825        $("body").addClass("overflow-hidden");
826      } else {
827        $(".nav-burger-line").eq(0).removeClass("is-top");
828        $(".nav-burger-line").eq(1).removeClass("is-bottom");
829        $(".nav-menu").removeClass("open");
830        $("body").removeClass("overflow-hidden");
831      }
832    });
833  }
834}
835const matchMediaDesktop = window.matchMedia("(min-width: 992px)");
836checkBreakpoint(matchMediaDesktop);
837matchMediaDesktop.addListener(checkBreakpoint);
838
839  $("form").submit(function(event) {
840   var recaptcha = $("#g-recaptcha-response").val();
841   if (recaptcha === "") {
842      event.preventDefault();
843      alert("Please check the recaptcha");
844   }
845});
846  
847</script>
847<script>
848//-----------MAPBOX SETUP CODE BELOW-----------
849
850let accessToken =  "pk.eyJ1Ijoic3R1ZGlvLWZhYnJpYyIsImEiOiJjbGhiMGF3MTMwbW9jM2VwYmU2c3JuZzluIn0.Kj11xLOzx3RsWOhstX-yAQ";
851let styleMap = "mapbox://styles/studio-fabric/clo8cofxv00wq01qm4z95gx7n";
852const mapCenterCoords = [-118.3020553314437, 34.06276080195784];
853
854
855
856mapboxgl.accessToken = accessToken;
857
858
859
860
861// Initialize map and load in #map wrapper
862let map = new mapboxgl.Map({
863  container: "map-container",
864  style: styleMap,
865  center: mapCenterCoords,
866  zoom: 15,
867  scrollZoom      : false,
868  boxZoom         : true,
869  doubleClickZoom : true
870});
871
872
873// Create a custom marker in the center of the map
874const el = document.createElement("div");
875el.className = "marker";
876let marker = new mapboxgl.Marker(el).setLngLat(mapCenterCoords).addTo(map);
877
878// Adjust zoom of map for mobile and desktop
879let mq = window.matchMedia("(min-width: 480px)");
880if (mq.matches) {
881  map.setZoom(12); //set map zoom level for desktop size
882} else {
883  map.setZoom(9); //set map zoom level for mobile size
884}
885
886// Add zoom and rotation controls to the map.
887map.addControl(new mapboxgl.NavigationControl());
888
889
890</script>
890</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.