/* ========================================================= Aarius Dumas Productions — brand layer ========================================================= */ :root { --colorPrimary: #f15a24; /* logo orange */ --colorYellow: #ffb21c; --colorBlue: #1fa4dc; /* logo lens blue, used sparingly */ --colorBlack: #111013; --paraColor: #55545a; } ::selection { background: var(--colorPrimary); color: #fff; } /* ---------- Logo ---------- */ .navbar-brand { width: 150px; } .navbar-brand img, .footer_logo img { object-fit: contain !important; } .mobile_menu_content .navbar-brand { width: 130px; margin-left: 0; } .footer_content .footer_logo { width: 200px; } .preloader-text { letter-spacing: .04em; } /* ---------- Buttons ---------- */ .ad_btn { display: inline-flex; align-items: center; gap: 12px; background: var(--colorPrimary); color: #fff !important; font-family: var(--headingFont); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; padding: 18px 30px; border: 2px solid var(--colorPrimary); transition: all .3s ease; cursor: pointer; } .ad_btn:hover { background: var(--colorBlack); border-color: var(--colorBlack); transform: translateY(-2px); } .ad_btn.ghost { background: transparent; color: var(--colorBlack) !important; border-color: var(--colorBlack); } .ad_btn.ghost:hover { background: var(--colorBlack); color: #fff !important; } .dark .ad_btn.ghost, .ad_btn.ghost.light { color: #fff !important; border-color: rgba(255,255,255,.5); } .dark .ad_btn.ghost:hover, .ad_btn.ghost.light:hover { background: #fff; color: var(--colorBlack) !important; border-color:#fff; } .common_btn { background: var(--colorPrimary); } /* ---------- Hero ---------- */ .banner_text h4 { font-size: 20px; letter-spacing: .06em; } .banner_lead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 34px 0 50px; } .banner_lead p { max-width: 560px; font-size: 20px; line-height: 1.6; color: var(--paraColor); } .banner_lead .ctas { display: flex; gap: 14px; flex-wrap: wrap; } .trust_row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; } .trust_row span { font-family: var(--headingFont); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--colorBlack); display: inline-flex; align-items: center; gap: 8px; } .trust_row i { color: var(--colorPrimary); } .live_badge { position: absolute; left: 24px; top: 24px; z-index: 3; background: rgba(17,16,19,.82); color: #fff; padding: 9px 14px; font-family: var(--headingFont); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; } .live_badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: adblink 1.4s infinite; } @keyframes adblink { 50% { opacity: .2; } } .banner_img { position: relative; } /* ---------- Section heading tweaks ---------- */ .section_heading h5 { letter-spacing: .1em; } .lead_dark { color: #a8a7ad !important; } /* ---------- Services list icons (Font Awesome instead of svg) ---------- */ .what_we_do ul li .icon i { font-size: 46px; color: var(--colorPrimary); line-height: 1; } .what_we_do ul li .icon { display: flex; align-items: center; justify-content: center; } .svc_tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .svc_tags span { font-size: 13px; font-family: var(--headingFont); text-transform: uppercase; letter-spacing: .06em; border: 1px solid rgba(17,16,19,.15); padding: 4px 10px; color: var(--colorBlack); } /* ---------- Project marquee: client names only ---------- */ .project_slider li a .img { display: none; } .project_slider li a p { white-space: nowrap; } /* ---------- Latest projects captions ---------- */ .latest_project_img .text h3 { text-shadow: 0 2px 18px rgba(0,0,0,.45); } .latest_project_img::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%); } .latest_project_img .text { z-index: 2; } .latest_project h4 a { color: inherit; } /* ---------- Credentials list ---------- */ .achivement_list ul li .icon { background: var(--colorBlack); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .achivement_list ul li .icon i { color: var(--colorYellow); font-size: 26px; } .achivement_list ul li .text span { white-space: nowrap; } .achivement_img .img_1 img.contain { object-fit: contain !important; background: #fff; padding: 20px; } /* ---------- Testimonials ---------- */ .testimonial_text h4 span { display: block; margin-top: 6px; } .testimonial_text .description { font-size: 26px; line-height: 1.5; } /* ---------- Case-study cards (blog section re-use) ---------- */ .single_blog_text ul li { text-transform: uppercase; letter-spacing: .05em; font-size: 14px; } .case_cta_row { display: flex; justify-content: center; margin-top: 60px; } /* ---------- Dark section helper ---------- */ .dark { background: var(--colorBlack); color: #c9c8cd; } .dark h2, .dark h3, .dark h4, .dark h5 { color: #fff; } .dark p { color: #a8a7ad; } /* ---------- Inner-page modules ---------- */ .page_intro { margin-top: 190px; } .page_intro .banner_title { font-size: 84px; line-height: 1.05; } .page_intro_text p { font-size: 19px; line-height: 1.7; } .page_intro_text .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .svc_block { padding: 90px 0; border-top: 1px solid rgba(17,16,19,.1); scroll-margin-top: 110px; } .svc_block .num { font-family: var(--headingFont); color: var(--colorPrimary); font-weight: 600; letter-spacing: .1em; } .svc_block h2 { font-size: 56px; font-weight: 700; margin: 10px 0 20px; line-height: 1.05; } .svc_block p.lead { font-size: 19px; line-height: 1.7; margin-bottom: 26px; } .svc_block .svc_img { height: 460px; overflow: hidden; } .svc_block .svc_img img { transition: transform .8s ease; } .svc_block:hover .svc_img img { transform: scale(1.04); } .check_list li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid rgba(17,16,19,.08); font-size: 17px; color: var(--colorBlack); } .check_list li::before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 300; position: absolute; left: 0; top: 12px; color: var(--colorPrimary); } .dark .check_list li { color: #e9e8ec; border-color: rgba(255,255,255,.08); } .best_for { margin-top: 22px; font-size: 15px; } .best_for b { font-family: var(--headingFont); text-transform: uppercase; letter-spacing: .08em; color: var(--colorBlack); margin-right: 6px; } .chip_grid { display: flex; flex-wrap: wrap; gap: 12px; } .chip_grid span { border: 1px solid rgba(255,255,255,.18); padding: 12px 18px; font-family: var(--headingFont); font-size: 17px; color: #fff; display: inline-flex; gap: 10px; align-items: center; } .chip_grid span i { color: var(--colorYellow); } .role_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); } .role_grid div { background: var(--colorBlack); padding: 34px 30px; } .role_grid h4 { font-size: 24px; margin: 14px 0 10px; color: #fff; } .role_grid p { font-size: 16px; color: #a8a7ad; } .role_grid i { font-size: 30px; color: var(--colorPrimary); } .step_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; counter-reset: s; } .step_grid div { border-top: 2px solid var(--colorBlack); padding-top: 24px; counter-increment: s; } .step_grid div::before { content: "0" counter(s); font-family: var(--headingFont); font-size: 15px; font-weight: 600; color: var(--colorPrimary); letter-spacing: .1em; } .step_grid h4 { font-size: 26px; margin: 10px 0 10px; } .step_grid p { font-size: 16px; } .sector_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .sector_grid div { border: 1px solid rgba(17,16,19,.12); padding: 30px 26px; transition: border-color .3s, transform .3s; } .sector_grid div:hover { border-color: var(--colorPrimary); transform: translateY(-4px); } .sector_grid i { font-size: 32px; color: var(--colorPrimary); } .sector_grid h4 { font-size: 24px; margin: 16px 0 8px; } .sector_grid p { font-size: 16px; } .naics_table { width: 100%; border-collapse: collapse; } .naics_table td { padding: 16px 0; border-bottom: 1px solid rgba(17,16,19,.1); font-size: 17px; vertical-align: top; } .naics_table td:first-child { font-family: var(--headingFont); font-weight: 600; color: var(--colorPrimary); width: 110px; font-size: 18px; } .cred_card { background: #f6f5f3; padding: 40px; } .cred_card img { width: 100% !important; height: auto !important; max-width: 320px; object-fit: contain !important; margin-bottom: 24px; } .cred_card h4 { font-size: 26px; margin-bottom: 10px; } /* ---------- Work grid ---------- */ .work_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 40px; margin-top: 70px; } .work_card { display: block; color: inherit; } .work_card .img { height: 440px; overflow: hidden; position: relative; background: #1b1a1e; } .work_card .img img { transition: transform .8s ease; } .work_card:hover .img img { transform: scale(1.05); } .work_card .img .tag { position: absolute; left: 18px; top: 18px; z-index: 2; background: var(--colorPrimary); color: #fff; font-family: var(--headingFont); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; } .work_card .meta { font-family: var(--headingFont); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--colorPrimary); margin: 24px 0 8px; display: block; } .work_card h3 { font-size: 32px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; transition: color .3s; } .work_card:hover h3 { color: var(--colorPrimary); } .work_card p { font-size: 17px; } .work_card .more { margin-top: 16px; font-family: var(--headingFont); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--colorBlack); display: inline-flex; gap: 8px; align-items: center; } .work_card.featured { grid-column: 1 / -1; } .work_card.featured .img { height: 600px; } /* ---------- Case study page ---------- */ .case_hero_img { height: 640px; overflow: hidden; margin-top: 60px; position: relative; } .case_stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(17,16,19,.12); border-bottom: 1px solid rgba(17,16,19,.12); margin: 60px 0 10px; } .case_stats div { padding: 26px 22px 26px 0; } .case_stats div + div { padding-left: 22px; border-left: 1px solid rgba(17,16,19,.12); } .case_stats small { display: block; font-family: var(--headingFont); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: #8a898f; margin-bottom: 6px; } .case_stats b { font-family: var(--headingFont); font-size: 20px; font-weight: 600; color: var(--colorBlack); line-height: 1.3; display: block; } .case_body h3 { font-size: 36px; font-weight: 600; margin: 50px 0 16px; display: flex; align-items: baseline; gap: 14px; } .case_body h3 small { font-size: 15px; color: var(--colorPrimary); letter-spacing: .12em; } .case_body p { font-size: 18px; line-height: 1.8; } .case_outcome { background: var(--colorBlack); color: #fff; padding: 44px; margin-top: 50px; position: relative; } .case_outcome h3 { color: #fff; margin-top: 0 !important; } .case_outcome p { color: #d4d3d8; font-size: 20px; } .case_outcome::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--colorPrimary); } .video_stack { display: grid; gap: 26px; margin-top: 30px; } .video_wrap { position: relative; aspect-ratio: 16/9; background: #000; } .video_wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .photo_pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .photo_pair div { height: 360px; overflow: hidden; } .sticky_side { position: sticky; top: 120px; } .project_details_info ul li p { text-align: right; } .side_cta { background: var(--colorPrimary); color: #fff; padding: 34px; margin-top: 30px; } .side_cta h4 { color: #fff; font-size: 28px; margin-bottom: 10px; } .side_cta p { color: rgba(255,255,255,.9); font-size: 16px; margin-bottom: 20px; } .side_cta .ad_btn { background: #fff; color: var(--colorBlack) !important; border-color: #fff; } .side_cta .ad_btn:hover { background: var(--colorBlack); color: #fff !important; border-color: var(--colorBlack); } .next_case { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 50px 0; border-top: 1px solid rgba(17,16,19,.12); margin-top: 90px; } .next_case a { color: var(--colorBlack); } .next_case small { display: block; font-family: var(--headingFont); text-transform: uppercase; letter-spacing: .1em; color: #8a898f; font-size: 13px; } .next_case strong { font-family: var(--headingFont); font-size: 34px; font-weight: 600; transition: color .3s; } .next_case a:hover strong { color: var(--colorPrimary); } /* ---------- Contact page ---------- */ .tf__contact_form_imput select { width: 100%; border: none; border-bottom: 1px solid rgba(17,16,19,.2); background: transparent; padding: 12px 0; font-size: 17px; color: var(--colorBlack); outline: none; border-radius: 0; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #111013 50%), linear-gradient(135deg, #111013 50%, transparent 50%); background-position: calc(100% - 14px) 22px, calc(100% - 8px) 22px; background-size: 6px 6px; background-repeat: no-repeat; } .tf__contact_form_imput select:focus, .tf__contact_form_imput input:focus, .tf__contact_form_imput textarea:focus { border-color: var(--colorPrimary) !important; } .contact_side { background: var(--colorBlack); padding: 46px 40px; color: #fff; } .contact_side h4 { color: #fff; font-size: 28px; margin-bottom: 26px; } .contact_side li { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); } .contact_side li small { display: block; font-family: var(--headingFont); text-transform: uppercase; letter-spacing: .1em; color: #8a898f; font-size: 12px; margin-bottom: 4px; } .contact_side li a, .contact_side li span { color: #fff; font-size: 18px; } .contact_side li a:hover { color: var(--colorYellow); } .sms_note { font-size: 13px !important; color: #8a898f; line-height: 1.6; margin-top: 26px !important; } .sms_note a { color: inherit; text-decoration: underline; } .form_note { font-size: 14px !important; color: #8a898f; margin-top: 16px !important; } .form_status { margin-top: 18px; font-family: var(--headingFont); font-size: 17px; color: var(--colorPrimary); display: none; } .form_status.show { display: block; } .response_promise { display: flex; gap: 14px; align-items: center; margin-top: 30px; } .response_promise i { font-size: 26px; color: var(--colorPrimary); } /* ---------- Footer extras ---------- */ .footer_badges { display: flex; gap: 14px; align-items: center; margin-top: 22px; } .footer_badges img { width: 170px !important; height: auto !important; background: #fff; padding: 8px; object-fit: contain !important; } .footer_address p a { display: block; } /* ---------- Sticky mobile CTA ---------- */ .mobile_cta { display: none; } @media (max-width: 991.98px) { .mobile_cta { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; box-shadow: 0 -6px 20px rgba(0,0,0,.15); } .mobile_cta a { padding: 15px 10px; text-align: center; font-family: var(--headingFont); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; } .mobile_cta a:first-child { background: var(--colorBlack); color: #fff; } .mobile_cta a:last-child { background: var(--colorPrimary); color: #fff; } body { padding-bottom: 54px; } .tf__scroll_btn { bottom: 70px !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1399.98px) { .page_intro .banner_title { font-size: 70px; } } @media (max-width: 1199.98px) { .role_grid { grid-template-columns: repeat(2, 1fr); } .step_grid, .sector_grid { grid-template-columns: repeat(2, 1fr); } .case_stats { grid-template-columns: repeat(2, 1fr); } .case_stats div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid rgba(17,16,19,.12); } .case_stats div:nth-child(4) { border-top: 1px solid rgba(17,16,19,.12); } .sticky_side { position: static; margin-top: 50px; } } @media (max-width: 991.98px) { .page_intro { margin-top: 150px; } .page_intro .banner_title { font-size: 54px; } .svc_block h2 { font-size: 42px; } .svc_block .svc_img { height: 340px; margin-top: 36px; } .work_grid { grid-template-columns: 1fr; gap: 50px; } .work_card .img, .work_card.featured .img { height: 360px; } .case_hero_img { height: 420px; } .testimonial_text .description { font-size: 22px; } } @media (max-width: 767.98px) { .page_intro .banner_title { font-size: 44px; } .banner_lead p { font-size: 18px; } .role_grid, .step_grid, .sector_grid { grid-template-columns: 1fr; } .case_stats { grid-template-columns: 1fr; } .case_stats div, .case_stats div + div { padding: 18px 0 !important; border-left: 0 !important; border-top: 1px solid rgba(17,16,19,.12); } .case_stats div:first-child { border-top: 0; } .case_body h3 { font-size: 28px; } .case_outcome { padding: 30px 26px; } .photo_pair { grid-template-columns: 1fr; } .photo_pair div { height: 260px; } .work_card .img, .work_card.featured .img { height: 260px; } .work_card h3 { font-size: 26px; } .next_case strong { font-size: 24px; } .svc_block { padding: 60px 0; } .svc_block h2 { font-size: 34px; } .case_hero_img { height: 280px; } .contact_side { margin-top: 50px; padding: 34px 24px; } .naics_table td:first-child { width: 86px; } .live_badge { left: 12px; top: 12px; font-size: 11px; } } @media (max-width: 575.98px) { .page_intro .banner_title { font-size: 38px; } .ad_btn { padding: 15px 22px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Fixes after review ---------- */ html, body { overflow-x: clip; } .marquee_section, .latest_project { overflow: hidden; } .banner::after { display: none; } .counter_item p { max-width: 190px; } .testimonial_text { overflow-wrap: break-word; } @media (max-width: 767.98px) { .testimonial_text .description { padding-right: 0 !important; font-size: 20px; } .testi_slider .slick-slide { padding: 0 2px; } .achivement_img .img_2 { display: none; } .achivement_img .img_1 { width: 100% !important; } } .tf__contact_form button.ad_btn { background: var(--colorPrimary); margin-top: 10px; } .tf__contact_form button.ad_btn:hover { background: var(--colorBlack); } /* ---------- Credentials, CEO note, figures ---------- */ .srbe_badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--colorBlack); padding: 8px 14px; height: 58px; } .srbe_badge i { font-size: 26px; color: var(--colorPrimary); } .srbe_badge span { font-family: var(--headingFont); font-weight: 700; font-size: 15px; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; color: var(--colorBlack); } .srbe_badge small { display: block; font-weight: 500; font-size: 11px; letter-spacing: .08em; color: #6b6a70; margin-top: 3px; } .footer_badges { flex-wrap: wrap; } .footer_badges img { height: 58px !important; width: auto !important; } .case_figure { margin: 40px 0 0; } .case_figure img { width: 100% !important; max-width: 460px; height: auto !important; object-fit: contain !important; box-shadow: 0 18px 50px rgba(17,16,19,.18); } .case_figure figcaption { font-size: 15px; color: #77767c; margin-top: 14px; font-style: italic; } .headshot_frame { position: relative; height: 640px; overflow: hidden; } .headshot_frame img { object-position: center top !important; } .headshot_cap { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--colorPrimary); color: #fff; font-family: var(--headingFont); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; } .ceo_note .note_label { font-family: var(--headingFont); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--colorYellow); } .ceo_note blockquote { margin: 22px 0 0; } .ceo_note .note_lead { font-family: var(--headingFont); font-size: 44px; line-height: 1.2; font-weight: 600; color: #fff !important; margin-bottom: 30px; } .ceo_note blockquote p:not(.note_lead) { font-size: 19px; line-height: 1.8; color: #b9b8be; margin-bottom: 18px; } .note_sign { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; } .note_sign img { width: 230px !important; height: auto !important; object-fit: contain !important; filter: brightness(1.6) saturate(1.2); } .note_sign span { font-family: var(--headingFont); font-size: 20px; color: #fff; font-weight: 600; } .note_sign small { display: block; font-size: 14px; font-weight: 400; color: #8a898f; margin-top: 2px; } .community_strip { background: var(--colorBlack); padding-bottom: 100px; } .community_strip figure { margin: 0; } .community_strip img { height: 420px !important; object-position: center 30% !important; } .community_strip figcaption { color: #8a898f; font-size: 15px; margin-top: 14px; } .cred_primary { background: var(--colorBlack) !important; color: #fff; position: relative; height: 100%; } .cred_primary h4 { color: #fff; } .cred_primary p { color: #b9b8be; } .cred_card { height: 100%; } .cred_icon { font-size: 54px; color: var(--colorYellow); display: block; margin-bottom: 22px; height: 61px; } .cred_status { position: absolute; top: 28px; right: 28px; background: rgba(46, 204, 113, .14); color: #3ddc84; font-family: var(--headingFont); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; } .cred_card img { max-height: 61px; width: auto !important; } .cred_meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(17,16,19,.12); } .cred_primary .cred_meta { border-color: rgba(255,255,255,.14); } .cred_meta li { font-family: var(--headingFont); font-size: 19px; font-weight: 600; color: var(--colorBlack); } .cred_primary .cred_meta li { color: #fff; } .cred_meta small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #8a898f; margin-bottom: 4px; } .code_h { font-size: 26px; margin-bottom: 10px; } .unspsc td:first-child { width: 130px; } @media (max-width: 991.98px) { .headshot_frame { height: 520px; } .ceo_note .note_lead { font-size: 32px; } .community_strip img { height: 300px !important; } } @media (max-width: 767.98px) { .headshot_frame { height: 440px; } .ceo_note .note_lead { font-size: 26px; } .community_strip img { height: 220px !important; } .community_strip { padding-bottom: 70px; } .cred_meta { grid-template-columns: 1fr; } .cred_status { position: static; display: inline-block; margin-bottom: 18px; } .unspsc td:first-child { width: 100px; } } /* ---------- Post-production showcase ---------- */ .post_showcase { position: relative; overflow: hidden; } .post_portrait { height: 600px; overflow: hidden; position: relative; } .post_portrait img { object-position: 70% center !important; } .post_portrait::after { content: ""; position: absolute; left: 22px; bottom: 22px; right: 22px; top: 22px; border: 1px solid rgba(255,178,28,.45); pointer-events: none; } .post_lead { font-size: 19px !important; line-height: 1.75; color: #c4c3c9 !important; margin-top: 22px; } .edit_tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .edit_tools span { border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 8px 14px; font-family: var(--headingFont); font-size: 14px; letter-spacing: .03em; } .post_note { font-size: 15px !important; color: #8a898f !important; margin-top: 18px; } .edit_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 30px; margin-top: 90px; } .edit_tile { display: block; color: inherit; } .edit_tile .img { aspect-ratio: 16/10; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #1b1a1e; } .edit_tile .img img { object-position: center top !important; transition: transform .8s ease; } .edit_tile:hover .img img { transform: scale(1.03); } .edit_label { display: inline-block; margin-top: 20px; font-family: var(--headingFont); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--colorYellow); } .edit_tile p { font-size: 16px !important; color: #b0afb5 !important; margin-top: 6px; max-width: 520px; } .svc_block .svc_img img[src*="edit_"] { object-position: center top !important; } @media (max-width: 991.98px) { .post_portrait { height: 460px; } .edit_grid { grid-template-columns: 1fr; margin-top: 60px; } } @media (max-width: 767.98px) { .post_portrait { height: 380px; } } .cred_light { position: relative; } .cred_light .cred_status { background: rgba(46, 204, 113, .12); color: #1e9e55; } /* ---------- LED wall ---------- */ .led_promo { background: var(--colorBlack); padding: 0 0 110px; } .led_promo_inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; background: linear-gradient(135deg, #1b1a1f 0%, #121115 100%); border: 1px solid rgba(255,255,255,.08); padding: 60px; position: relative; overflow: hidden; } .led_promo_inner::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--colorPrimary), var(--colorYellow)); } .led_new { display: inline-flex; align-items: center; gap: 10px; font-family: var(--headingFont); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--colorYellow); } .led_new::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; animation: adblink 1.6s infinite; } .led_promo h2 { color: #fff; font-size: 52px; line-height: 1.08; font-weight: 700; margin: 16px 0 18px; } .led_promo p { color: #b9b8be; font-size: 18px; line-height: 1.7; } .led_specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); margin-top: 30px; } .led_specs div { background: #151418; padding: 18px 16px; } .led_specs b { display: block; font-family: var(--headingFont); font-size: 24px; font-weight: 700; color: #fff; line-height: 1.1; white-space: nowrap; } .led_specs small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a898f; margin-top: 6px; font-family: var(--headingFont); } .led_promo_img { display: block; height: 460px; overflow: hidden; } .led_promo_img img { transition: transform .8s ease; } .led_promo_img:hover img { transform: scale(1.04); } .led_specs_page { grid-template-columns: repeat(5, 1fr); background: rgba(17,16,19,.12); border-color: rgba(17,16,19,.12); margin-top: 0; } .led_specs_page div { background: #fff; padding: 26px 20px; } .led_specs_page b { color: var(--colorBlack); font-size: 30px; } .led_stack { display: grid; gap: 20px; } .led_stack div { height: 280px; overflow: hidden; } .pkg_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pkg { border: 1px solid rgba(17,16,19,.12); padding: 36px 30px; display: flex; flex-direction: column; } .pkg_hot { border: 2px solid var(--colorPrimary); box-shadow: 0 20px 50px rgba(241,90,36,.12); } .pkg_tag { font-family: var(--headingFont); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--colorPrimary); } .pkg h4 { font-size: 28px; margin: 12px 0 12px; } .pkg p { font-size: 16px; flex: 1; } .pkg .more { margin-top: 22px; font-family: var(--headingFont); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--colorBlack); display: inline-flex; gap: 8px; align-items: center; } .pkg .more:hover { color: var(--colorPrimary); } .faq_item { border-bottom: 1px solid rgba(17,16,19,.12); padding: 22px 0; } .faq_item summary { cursor: pointer; font-family: var(--headingFont); font-size: 22px; font-weight: 600; color: var(--colorBlack); list-style: none; display: flex; justify-content: space-between; gap: 20px; } .faq_item summary::-webkit-details-marker { display: none; } .faq_item summary::after { content: "+"; color: var(--colorPrimary); font-size: 28px; line-height: 1; transition: transform .3s; } .faq_item[open] summary::after { transform: rotate(45deg); } .faq_item p { margin-top: 14px; font-size: 17px; line-height: 1.75; } .led_inline { display: inline-flex; gap: 10px; align-items: center; margin-top: 16px; font-family: var(--headingFont); font-weight: 600; color: var(--colorPrimary); font-size: 16px; } .led_inline:hover { color: var(--colorBlack); } .led_uses i { font-size: 32px; } @media (max-width: 1199.98px) { .led_promo_inner { grid-template-columns: 1fr; padding: 44px; } .led_promo_img { height: 360px; } .led_specs_page { grid-template-columns: repeat(3, 1fr); } .pkg_grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .led_promo { padding-bottom: 70px; } .led_promo_inner { padding: 30px 22px; gap: 34px; } .led_promo h2 { font-size: 34px; } .led_specs, .led_specs_page { grid-template-columns: repeat(2, 1fr); } .led_specs b { font-size: 20px; } .led_promo_img { height: 240px; } .led_stack div { height: 220px; } .faq_item summary { font-size: 19px; } } .led_promo { padding-top: 100px; } @media (max-width: 767.98px) { .led_promo { padding-top: 60px; } } /* ---------- LED configs + tech specs ---------- */ .led_specs_page { grid-template-columns: repeat(6, 1fr); } .config_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .config { border: 1px solid rgba(17,16,19,.12); padding: 30px; } .config_shape { height: 150px; background: #f3f2f0; display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; position: relative; } .config_shape span { display: block; background: linear-gradient(135deg, #1b1a1f, #3a3940); box-shadow: inset 0 0 0 2px rgba(255,178,28,.6), 0 10px 24px rgba(0,0,0,.18); } .cfg_main { width: 170px; height: 102px; } .cfg_side { width: 102px; height: 51px; } .cfg_fly { width: 140px; height: 84px; transform: translateY(-14px); } .config_shape i { position: absolute; bottom: 16px; color: var(--colorPrimary); font-size: 20px; } .config h4 { font-size: 26px; margin-bottom: 6px; } .config p { font-family: var(--headingFont); font-weight: 600; color: var(--colorPrimary); font-size: 16px; } .config small { display: block; margin-top: 10px; font-size: 15px; color: #6b6a70; } .tech_specs { background: #f6f5f3; scroll-margin-top: 90px; } .tech_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .tech_group { background: #fff; padding: 30px 28px; } .tech_group h4 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--colorPrimary); margin-bottom: 14px; } .tech_group dl { margin: 0; } .tech_group dt { font-family: var(--headingFont); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8a898f; padding-top: 12px; border-top: 1px solid rgba(17,16,19,.08); margin-top: 12px; } .tech_group dt:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .tech_group dd { margin: 4px 0 0; font-size: 16px; color: var(--colorBlack); line-height: 1.5; } @media (max-width: 1199.98px) { .tech_grid, .config_grid { grid-template-columns: repeat(2, 1fr); } .led_specs_page { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { .tech_grid, .config_grid { grid-template-columns: 1fr; } .led_specs_page { grid-template-columns: repeat(2, 1fr); } } @media print { body * { visibility: hidden !important; } #specs, #specs * { visibility: visible !important; } #specs { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; padding: 0 !important; } #specs button, .preloader, #magic-cursor, .mobile_cta, .tf__scroll_btn { display: none !important; } .tech_grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .tech_group { border: 1px solid #ddd; break-inside: avoid; padding: 14px !important; } #specs [data-text-animation] { opacity: 1 !important; transform: none !important; } } .led_stack.single div { height: 440px; } .led_stack img, .stand_img img, .led_promo_img img, .case_hero_img img[src*="led_"] { object-fit: cover !important; } .stand_img { height: 520px; overflow: hidden; } .dark .led_stack div { border: 1px solid rgba(255,255,255,.08); } @media (max-width: 991.98px) { .stand_img { height: 380px; } .led_stack.single div { height: 340px; } } @media (max-width: 767.98px) { .stand_img { height: 260px; } .led_stack.single div { height: 260px; } } /* ---------- Stand drawings ---------- */ .stand_figs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .stand_fig { margin: 0; background: #fff; border: 1px solid rgba(17,16,19,.1); padding: 22px 18px 10px; } .stand_fig figcaption { font-family: var(--headingFont); font-weight: 600; font-size: 18px; color: var(--colorBlack); display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .stand_fig figcaption span { width: 30px; height: 30px; display: inline-grid; place-items: center; background: var(--colorBlack); color: #fff; font-size: 14px; } .stand_fig svg { width: 100%; height: auto; display: block; } .stand_section { background: #f6f5f3; } .stand_legend { list-style: none; counter-reset: lg; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 34px 0 0; padding: 0; } .stand_legend li { counter-increment: lg; position: relative; padding-left: 36px; } .stand_legend li::before { content: counter(lg); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--colorPrimary); color: #fff; font: 700 12px/24px var(--headingFont); text-align: center; } .stand_legend b { display: block; font-family: var(--headingFont); font-size: 16px; color: var(--colorBlack); margin-bottom: 4px; } .stand_legend span { font-size: 14px; color: #6b6a70; line-height: 1.5; display: block; } .stand_note { font-size: 13px !important; color: #8a898f; margin-top: 26px; font-style: italic; } @media (max-width: 1199.98px) { .stand_legend { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991.98px) { .stand_figs { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .stand_legend { grid-template-columns: 1fr; } .stand_fig { padding: 16px 8px 6px; } } .stand_fig { display: flex; flex-direction: column; } .stand_fig svg { margin: auto 0; } /* ========================================================= BRAND PASS: flyer crimson, torn paper, thin caps ========================================================= */ :root { --colorPrimary: #a3122f; /* flyer crimson */ --colorCrimsonDark: #800012; --colorFlame: #f26b2a; /* logo flame, for accents on dark */ --colorYellow: #f26b2a; --capsFont: "Didact Gothic", "Jost", sans-serif; } ::selection { background: var(--colorPrimary); } .section_heading h5, .mono_caps, .flyer_strip p, .flyer_title h2, .led_new, .note_label, .edit_label, .pkg_tag, .tech_group h4, .case_stats small, .work_card .meta { font-family: var(--capsFont) !important; letter-spacing: .16em; } .section_heading h5 { font-weight: 400; } .paper, .tech_specs, .stand_section { background-color: #ecebe8 !important; background-image: url(../media/paper.jpg) !important; background-size: 480px 480px !important; } .paper .cred_card[style], .tech_specs .tech_group, .stand_fig { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05); } .pkg_hot { box-shadow: 0 20px 50px rgba(163,18,47,.14); } .dark .ad_btn:not(.ghost), .led_promo .ad_btn:not(.ghost), .post_showcase .ad_btn:not(.ghost) { background: var(--colorPrimary); border-color: var(--colorPrimary); } .led_promo_inner::before { background: linear-gradient(180deg, var(--colorPrimary), var(--colorFlame)); } .work_card .img .tag, .headshot_cap { background: var(--colorPrimary); } .common_btn { background: var(--colorPrimary) !important; } .mobile_cta a:last-child { background: var(--colorPrimary); } .tf__scroll_btn { background: var(--colorPrimary) !important; } /* Flyer sign-off band (torn paper) */ .flyer_band { position: relative; background: #ecebe8; overflow: hidden; } .flyer_red_top { height: 46px; background: linear-gradient(180deg, var(--colorCrimsonDark), #9c102b); } .torn { display: block; width: 100%; height: 70px; position: relative; z-index: 2; } .torn_top { margin-top: -1px; margin-bottom: -40px; } .torn_bottom { margin-top: -40px; margin-bottom: -1px; } .flyer_paper { padding: 90px 0 100px; text-align: center; position: relative; z-index: 1; } .flyer_title { display: inline-block; color: var(--colorBlack); } .flyer_title h2 { font-weight: 400; font-size: 64px; line-height: 1.2; text-transform: uppercase; color: #1d1b1a; letter-spacing: .06em !important; } .flyer_title h2 span { display: block; } .flyer_title:hover h2 { color: var(--colorPrimary); } .flyer_ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; } .flyer_strip { background: #9c102b; padding: 22px 0 26px; } .flyer_strip .container { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .flyer_strip img { width: 200px !important; height: auto !important; object-fit: contain !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .flyer_strip p { color: #fff; font-size: 22px; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; letter-spacing: .06em !important; } .flyer_strip a { color: #fff; } .flyer_strip a:hover { color: #ffd9c9; } .flyer_strip span { opacity: .7; } @media (max-width: 991.98px) { .flyer_title h2 { font-size: 44px; } .flyer_strip p { font-size: 18px; } } @media (max-width: 575.98px) { .flyer_title h2 { font-size: 30px; } .flyer_paper { padding: 70px 0 80px; } .flyer_strip p { font-size: 14px; flex-direction: column; gap: 4px; align-items: center; } .flyer_strip span { display: none; } .flyer_strip img { width: 160px !important; } } .banner::after { content: none !important; display: none !important; background: none !important; } .flyer_title h2 span { font-size: inherit !important; display: block; } .banner_dots { background-color: #fff !important; background-image: radial-gradient(rgba(17,16,19,.12) 1px, transparent 1.2px) !important; background-size: 22px 22px !important; background-repeat: repeat !important; } /* recolor template yellow star accents to brand */ .banner_img::after, .project_slider li::after, .achivement::after, .achivement::before { filter: hue-rotate(-48deg) saturate(1.4) brightness(.78); } /* ---------- Hero video, modal, BTS ---------- */ .hero_media { overflow: hidden; border-radius: 10px; background: #111; } .hero_video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; } .sound_btn { position: absolute; right: 22px; bottom: 22px; z-index: 3; border: 0; background: rgba(17,16,19,.82); color: #fff; font-family: var(--headingFont); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 12px 18px; display: inline-flex; gap: 10px; align-items: center; cursor: pointer; transition: background .25s; } .sound_btn:hover { background: var(--colorPrimary); } .sound_btn i { font-size: 12px; } .video_modal { position: fixed; inset: 0; z-index: 10000; background: rgba(8,8,10,.94); display: flex; align-items: center; justify-content: center; padding: 24px; } .video_modal[hidden] { display: none; } .video_modal video { width: min(1200px, 100%); max-height: 86vh; background: #000; } .vm_close { position: absolute; top: 18px; right: 22px; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; width: 44px; height: 44px; font-size: 18px; cursor: pointer; } .vm_close:hover { background: var(--colorPrimary); border-color: var(--colorPrimary); } .bts_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .bts_tile { display: block; color: inherit; } .bts_tile div { aspect-ratio: 4/3; overflow: hidden; background: #ddd; } .bts_tile img { transition: transform .6s ease; } .bts_tile:hover img { transform: scale(1.05); } .bts_tile span { display: block; font-size: 13px; color: #77767c; margin-top: 8px; line-height: 1.4; } .contact_portrait { height: 380px; overflow: hidden; margin-bottom: 0; } .contact_portrait img { object-position: center 20% !important; } @media (max-width: 767.98px) { .bts_grid { grid-template-columns: repeat(2, 1fr); } .sound_btn { right: 12px; bottom: 12px; padding: 9px 12px; font-size: 12px; } .contact_portrait { height: 300px; margin-top: 50px; } .contact_portrait + .contact_side { margin-top: 0; } } .banner_img.hero_media { height: min(52vw, 640px) !important; width: 100% !important; } .video_wrap video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; } /* ---------- Gear page ---------- */ .gear_pkgs { grid-template-columns: repeat(3, 1fr); } .pkg_list { margin: 14px 0 0; } .pkg_list li { font-size: 15px; padding: 9px 0 9px 28px; } .pkg_list li::before { top: 9px; } .gear_jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; position: sticky; top: 90px; z-index: 5; background: rgba(236,235,232,.92); padding: 10px 0; backdrop-filter: blur(6px); } .gear_jump a { border: 1px solid rgba(17,16,19,.18); padding: 8px 14px; font-family: var(--headingFont); font-size: 14px; color: var(--colorBlack); background: #fff; } .gear_jump a:hover { border-color: var(--colorPrimary); color: var(--colorPrimary); } .gear_group { margin-top: 50px; scroll-margin-top: 170px; } .gear_group h3 { font-size: 30px; font-weight: 600; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--colorBlack); } .gear_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .gear_card { background: #fff; padding: 26px 24px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05); } .gear_head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .gear_head h4 { font-size: 20px; line-height: 1.3; } .gear_qty { flex-shrink: 0; background: var(--colorPrimary); color: #fff; font-family: var(--headingFont); font-weight: 600; font-size: 13px; padding: 3px 9px; } .gear_model { display: block; font-family: var(--capsFont); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8a898f; margin: 8px 0 14px; } .gear_card ul { margin: 0; padding: 0; } .gear_card li { position: relative; padding: 6px 0 6px 16px; font-size: 15px; color: #45444a; border-top: 1px solid rgba(17,16,19,.06); } .gear_card li:first-child { border-top: 0; } .gear_card li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; background: var(--colorPrimary); } @media (max-width: 1199.98px) { .gear_cards, .gear_pkgs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .gear_cards, .gear_pkgs { grid-template-columns: 1fr; } .gear_jump { position: static; } .gear_group h3 { font-size: 24px; } } @media print { body * { visibility: hidden !important; } #inventory, #inventory * { visibility: visible !important; } #inventory { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; } #inventory button, .gear_jump { display: none !important; } .gear_cards { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .gear_card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; padding: 12px !important; } } .onset_strip { background: var(--colorBlack); padding: 110px 0; } .onset_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .onset_grid figure { margin: 0; } .onset_grid figure div { aspect-ratio: 1/1; overflow: hidden; } .onset_grid img { transition: transform .6s ease; } .onset_grid figure:hover img { transform: scale(1.05); } .onset_grid figcaption { color: #8a898f; font-size: 13px; margin-top: 8px; } @media (max-width: 767.98px) { .onset_grid { grid-template-columns: repeat(2, 1fr); } .onset_strip { padding: 70px 0; } } .case_quote { margin: 50px 0 0; padding: 0 0 0 26px; border-left: 4px solid var(--colorPrimary); } .case_quote p { font-family: var(--headingFont); font-size: 24px !important; line-height: 1.5 !important; color: var(--colorBlack); font-weight: 500; } .case_quote cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--capsFont); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #77767c; } .loop_clip { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; } .case_clip { margin: 34px 0 0; max-width: 420px; } .case_clip video { aspect-ratio: 9/16; height: auto; border-radius: 6px; } .case_clip figcaption { font-size: 14px; color: #77767c; margin-top: 10px; font-style: italic; } .onset_grid figure div video { height: 100%; } .spot_grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 20px; } .spot { margin: 0; } .spot figcaption { font-size: 14px; color: #77767c; margin-top: 8px; font-family: var(--capsFont); letter-spacing: .1em; text-transform: uppercase; } .case_hero_video { margin-top: 60px; border-radius: 6px; overflow: hidden; } /* ---------- Google reviews ---------- */ .reviews_section { padding: 120px 0; } .stars { color: #f5a623; display: inline-flex; gap: 2px; font-size: 14px; } .rv_head { display: grid; grid-template-columns: auto 1fr auto; gap: 50px; align-items: center; margin-bottom: 50px; } .rv_score { display: flex; align-items: center; gap: 18px; background: #fff; padding: 22px 26px; box-shadow: 0 10px 30px rgba(0,0,0,.06); } .rv_g { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 700 28px/1 var(--headingFont); color: #fff; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); } .rv_score b { display: block; font: 700 46px/1 var(--headingFont); color: var(--colorBlack); } .rv_score .stars { font-size: 16px; margin: 6px 0 4px; } .rv_score small { display: block; font-size: 13px; color: #6b6a70; } .rv_themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin: 0; padding: 0; } .rv_themes li b { display: block; font-family: var(--headingFont); font-size: 16px; color: var(--colorBlack); } .rv_themes li span { font-size: 13px; color: #6b6a70; } .rv_feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .rv_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; } .rv_card { margin: 0; background: #fff; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 14px; } .rv_card blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: #3a393f; flex: 1; } .rv_big { border-top: 4px solid var(--colorPrimary); } .rv_big blockquote { font-family: var(--headingFont); font-size: 19px; color: var(--colorBlack); } .rv_card figcaption b { display: block; font-family: var(--headingFont); color: var(--colorBlack); } .rv_card figcaption span { font-size: 13px; color: #77767c; } .rv_foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; } .rv_foot p { max-width: 640px; font-size: 16px; } .rv_mini { display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; color: var(--colorBlack); } .rv_mini span { font-size: 15px; } .trust_row i.fa-star { color: #f5a623; } @media (max-width: 1199.98px) { .rv_head { grid-template-columns: 1fr; gap: 24px; } .rv_feat, .rv_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .reviews_section { padding: 80px 0; } .rv_feat, .rv_grid, .rv_themes { grid-template-columns: 1fr; } } .rv_head { grid-template-columns: 1fr auto; } .rv_head .section_heading { order: -1; } .rv_themes { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(17,16,19,.12); padding-top: 20px; } @media (max-width: 991.98px) { .rv_head { grid-template-columns: 1fr; } .rv_themes { grid-template-columns: 1fr 1fr; } } /* ---------- Production van ---------- */ .van_band { background: var(--colorBlack); padding: 0 0 110px; overflow: hidden; } .van_inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; } .van_text h2 { color: #fff; font-size: 52px; font-weight: 700; line-height: 1.08; margin: 16px 0 18px; } .van_text p { color: #b9b8be; font-size: 18px; line-height: 1.7; } .van_list { margin: 22px 0 30px; padding: 0; display: grid; gap: 8px; } .van_list li { color: #fff; font-family: var(--headingFont); padding-left: 26px; position: relative; } .van_list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 3px; background: var(--colorFlame); } .van_art { position: relative; } .van_art .van_svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); } .van_band .van_art::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 8%; height: 40%; background: radial-gradient(closest-side, rgba(163,18,47,.35), transparent); z-index: -1; } .van_strip { background: var(--colorBlack); padding: 50px 0; } .van_strip_inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .van_strip h3 { color: #fff; font-size: 34px; margin-bottom: 10px; } .van_strip p { color: #b9b8be; font-size: 17px; } .van_mini { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); } .van_mini .van_svg { width: 100%; height: auto; } .dark .van_art .van_svg { filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); } @media (max-width: 991.98px) { .van_inner, .van_strip_inner { grid-template-columns: 1fr; } .van_text h2 { font-size: 38px; } } @media (max-width: 575.98px) { .van_text h2 { font-size: 32px; } .van_band { padding-bottom: 70px; } } .van_photo { width: 100% !important; height: auto !important; object-fit: contain !important; display: block; filter: drop-shadow(0 26px 30px rgba(0,0,0,.5)); } .van_mini .van_photo { filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); } .van_band .van_art, .van_strip .van_art, .dark .van_art { background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(255,255,255,.16), rgba(255,255,255,.04) 55%, transparent 75%); } .van_photo { filter: drop-shadow(0 24px 28px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.35)); } /* ---------- Itemized equipment ---------- */ .it_list { border-top: 2px solid var(--colorBlack); } .it_item { border-bottom: 1px solid rgba(17,16,19,.12); } .it_item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 50px 140px 1fr auto 30px; gap: 16px; align-items: center; padding: 20px 4px; } .it_item summary::-webkit-details-marker { display: none; } .it_item summary::after { content: "+"; color: var(--colorPrimary); font-size: 26px; line-height: 1; justify-self: end; transition: transform .3s; } .it_item[open] summary::after { transform: rotate(45deg); } .it_item summary:hover .it_name { color: var(--colorPrimary); } .it_no { font-family: var(--headingFont); font-weight: 600; color: var(--colorPrimary); font-size: 15px; } .it_cat { font-family: var(--capsFont); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #77767c; } .it_name { font-family: var(--headingFont); font-size: 21px; font-weight: 600; color: var(--colorBlack); transition: color .2s; } .it_name small { display: block; font-family: var(--capsFont); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a898f; font-weight: 400; margin-top: 3px; } .it_qty { background: var(--colorBlack); color: #fff; font-family: var(--headingFont); font-weight: 600; font-size: 14px; padding: 4px 10px; } .it_body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px 40px; padding: 0 4px 30px 66px; } .it_sum { font-size: 17px; line-height: 1.65; color: #3a393f; grid-column: 1; } .it_tbl { grid-column: 2; grid-row: 1 / span 3; width: 100%; border-collapse: collapse; } .it_tbl th { text-align: left; font-family: var(--headingFont); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #8a898f; padding: 9px 16px 9px 0; border-bottom: 1px solid rgba(17,16,19,.08); width: 34%; vertical-align: top; } .it_tbl td { font-size: 15px; color: var(--colorBlack); padding: 9px 0; border-bottom: 1px solid rgba(17,16,19,.08); } .it_best { font-size: 15px; grid-column: 1; } .it_best b { display: block; font-family: var(--capsFont); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--colorPrimary); font-weight: 400; margin-bottom: 4px; } .it_src { grid-column: 1; font-size: 14px; color: var(--colorPrimary); font-family: var(--headingFont); font-weight: 500; align-self: start; } @media (max-width: 991.98px) { .it_item summary { grid-template-columns: 40px 1fr auto 24px; } .it_cat { display: none; } .it_body { grid-template-columns: 1fr; padding-left: 4px; } .it_tbl { grid-column: 1; grid-row: auto; } } @media (max-width: 575.98px) { .it_name { font-size: 18px; } } @media print { #itemized, #itemized * { visibility: visible !important; } #itemized { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; } #itemized button { display: none !important; } .it_item { break-inside: avoid; } } .it_body { grid-template-rows: auto auto auto 1fr; align-items: start; } .it_tbl { grid-row: 1 / span 4; } @media (max-width: 991.98px) { .it_body { grid-template-rows: none; } .it_tbl { grid-row: auto; } } /* ---------- Rental cart ---------- */ .cart_btn { position: relative; background: none; border: 0; padding: 6px; font-size: 21px; color: var(--colorBlack); cursor: pointer; line-height: 1; margin-right: 14px; } .mobile-menu .cart_btn { margin-right: 0; } .cart_btn:hover { color: var(--colorPrimary); } .cart_count { position: absolute; top: -4px; right: -8px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--colorPrimary); color: #fff; font: 600 11px/19px var(--headingFont); text-align: center; padding: 0 5px; } .cart_count[hidden] { display: none; } .cart_drawer { position: fixed; inset: 0; z-index: 10000; background: rgba(17,16,19,.55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .cart_drawer.open { opacity: 1; visibility: visible; } .cart_panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .cart_drawer.open .cart_panel { transform: none; } .cart_top { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 2px solid var(--colorBlack); } .cart_top h3 { font-size: 24px; margin: 0; } .cart_x { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--colorBlack); padding: 4px 8px; } .cart_flag { margin: 0; padding: 9px 24px; background: #fdf1e9; color: #8a3b10; font-size: 13px; } .cart_scroll { flex: 1; overflow-y: auto; padding: 20px 24px; } .cart_dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .cart_dates label { font-family: var(--capsFont); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #77767c; display: flex; flex-direction: column; gap: 6px; } .cart_dates input { border: 1px solid rgba(17,16,19,.2); padding: 10px 12px; font: 15px var(--bodyFont, inherit); color: var(--colorBlack); border-radius: 0; width: 100%; } .cart_dates input:focus { outline: 2px solid var(--colorPrimary); outline-offset: -1px; } .cart_days { grid-column: 1 / -1; margin: 0; font-size: 14px; color: #55545a; } .cart_lines { list-style: none; padding: 0; margin: 0 0 16px; border-top: 1px solid rgba(17,16,19,.1); } .cart_lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(17,16,19,.1); } .cl_info b { display: block; font-family: var(--headingFont); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--colorBlack); } .cl_info small { color: #77767c; font-size: 13px; } .cl_qty { display: flex; align-items: center; border: 1px solid rgba(17,16,19,.18); } .cl_qty button { width: 30px; height: 30px; background: none; border: 0; font-size: 17px; cursor: pointer; color: var(--colorBlack); } .cl_qty button:disabled { opacity: .3; cursor: default; } .cl_qty span { min-width: 24px; text-align: center; font-weight: 600; font-size: 14px; } .cl_qty .cl_one { padding: 0 6px; line-height: 30px; } .cl_amt { font-family: var(--headingFont); font-weight: 600; min-width: 70px; text-align: right; } .cl_rm { grid-column: 1; justify-self: start; background: none; border: 0; padding: 0; font-size: 12px; color: var(--colorPrimary); text-decoration: underline; cursor: pointer; } .cart_empty { text-align: center; padding: 30px 0; color: #77767c; } .cart_check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 12px 0; cursor: pointer; color: #3a393f; } .cart_check input { margin-top: 3px; accent-color: var(--colorPrimary); width: 16px; height: 16px; flex: none; } .cart_check a { color: var(--colorPrimary); text-decoration: underline; } .cart_sum { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 18px 0; padding: 16px 0; border-top: 1px solid rgba(17,16,19,.1); border-bottom: 1px solid rgba(17,16,19,.1); } .cart_sum:empty { display: none; } .cart_sum dt { font-weight: 400; font-size: 14px; color: #55545a; } .cart_sum dd { margin: 0; text-align: right; font-size: 15px; } .cart_sum .tot { font-family: var(--headingFont); font-size: 19px; font-weight: 600; color: var(--colorBlack); } .cart_sum .tax { grid-column: 1 / -1; font-size: 12px; color: #8a898f; } .cart_foot { padding: 16px 24px 22px; border-top: 1px solid rgba(17,16,19,.1); background: #faf9f7; } .cart_go { width: 100%; justify-content: center; } .cart_go:disabled { opacity: .45; cursor: not-allowed; } .cart_go.busy { opacity: .7; cursor: progress; } .cart_msg { margin: 0 0 10px; font-size: 14px; color: var(--colorPrimary); } .cart_msg:empty { display: none; } .cart_msg a { text-decoration: underline; color: inherit; } .cart_fine { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #8a898f; } .buy_row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 14px; flex-wrap: wrap; } .buy_rate { font-size: 14px; color: #6b6a70; } .buy_rate b { font-family: var(--headingFont); font-size: 24px; color: var(--colorBlack); font-weight: 600; } .buy_btn { padding: 12px 20px !important; } .buy_btn.in_cart { background: var(--colorBlack) !important; } .buy_btn.in_cart span::after { content: " ✓"; } .it_buy { grid-column: 1; margin: 6px 0 0; } .it_rate { font-family: var(--headingFont); font-weight: 600; font-size: 16px; color: var(--colorBlack); white-space: nowrap; } .it_rate small { font-weight: 400; color: #8a898f; font-size: 12px; } .it_item summary { grid-template-columns: 50px 140px 1fr auto auto 30px; } @media (max-width: 991.98px) { .it_item summary { grid-template-columns: 40px 1fr auto 24px; } .it_qty { display: none; } } .success_mark { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%; background: var(--colorPrimary); color: #fff; display: grid; place-items: center; font-size: 36px; } .terms_item { padding: 22px 0; border-bottom: 1px solid rgba(17,16,19,.1); } .terms_item h3 { font-size: 20px; margin-bottom: 8px; } .terms_item p { font-size: 16px; line-height: 1.7; color: #3a393f; margin: 0; } @media print { .cart_drawer, .cart_btn, .buy_row { display: none !important; } } /* ---------- Preloader: logo wipe ---------- */ .preloader-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, 70vw); line-height: 0; } .preloader-logo img { display: block; width: 100%; height: auto; } .preloader-logo .pl_base { filter: grayscale(1) brightness(.55); opacity: .35; } .preloader-logo .pl_wipe { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); animation: plWipe 1.1s cubic-bezier(.65,0,.35,1) .15s forwards; } .preloader-logo .pl_edge { position: absolute; top: -8%; bottom: -8%; left: 0; width: 3px; background: var(--colorPrimary); box-shadow: 0 0 18px 4px rgba(163,18,47,.75); opacity: 0; animation: plEdge 1.1s cubic-bezier(.65,0,.35,1) .15s forwards; } @keyframes plWipe { to { clip-path: inset(0 0 0 0); } } @keyframes plEdge { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .preloader-logo .pl_wipe { animation: none; clip-path: none; } .preloader-logo .pl_edge { display: none; } } /* ---------- Launch / SEO additions ---------- */ :where(img[width][height]) { height: auto; } .pl-skip .preloader-logo { display: none; } .section_heading h1 { position: relative; overflow: hidden; font-size: 64px; font-weight: 600; line-height: 1.15; margin-top: 20px; } .legal_links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; } .legal_links a { color: inherit; opacity: .75; } .legal_links a:hover { opacity: 1; color: var(--colorPrimary); } .terms_item h2 { font-size: 20px; margin-bottom: 8px; } .nf_links { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; } .nf_links a { font-family: var(--headingFont); font-weight: 600; color: var(--colorPrimary); text-decoration: underline; } .main_menu > .container-fluid { flex-wrap: nowrap; } .main_menu .right_menu { display: flex; align-items: center; flex: none; } .main_menu .right_menu .search_icon { margin-right: 22px; } .main_menu .right_menu .cart_btn { margin-right: 22px; } .main_menu .navbar-nav .text_hover_animaiton { padding-left: 22px !important; padding-right: 22px !important; } @media (max-width: 1399.98px) { .main_menu .navbar-nav .text_hover_animaiton { padding-left: 14px !important; padding-right: 14px !important; } } /* ---------- Photo trios (About, Gear) ---------- */ .about_trio, .gear_trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .about_trio figure, .gear_trio figure { margin: 0; } .community_strip .about_trio img, .gear_trio img { height: 320px !important; width: 100%; object-fit: cover; object-position: center 35% !important; display: block; } .about_trio figcaption { color: #a8a7ad; font-size: 14px; margin-top: 10px; } .gear_trio figcaption { color: #55545a; font-size: 14px; margin-top: 10px; } @media (max-width: 767.98px) { .about_trio, .gear_trio { grid-template-columns: 1fr; } .community_strip .about_trio img, .gear_trio img { height: 260px !important; } } /* ---------- Flypack console showcase ---------- */ .console_show { background: var(--colorBlack); color: #fff; position: relative; overflow: hidden; } .console_show::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 55%, rgba(163,18,47,.28), transparent 70%); pointer-events: none; } .console_show .container { position: relative; } .cs_lead { color: #b9b8be; font-size: 17px; line-height: 1.7; } .cs_stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 50px; } .cs_stats div { padding: 22px 10px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); } .cs_stats div:last-child { border-right: 0; } .cs_stats b { display: block; font-family: var(--headingFont); font-size: 40px; font-weight: 600; color: #fff; line-height: 1; } .cs_stats small { display: block; margin-top: 8px; font-family: var(--capsFont); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a898f; } .cs_wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } .cs_stage { position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.55); position: sticky; top: 110px; } .cs_img { display: block; width: 100%; height: auto; } .cs_dot { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: var(--colorPrimary); color: #fff; font: 600 13px/30px var(--headingFont); padding: 0; cursor: pointer; box-shadow: 0 0 0 0 rgba(163,18,47,.7); animation: csPulse 2.4s infinite; transition: transform .2s, background .2s; z-index: 2; } .cs_dot span { display: block; } .cs_dot em { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); white-space: nowrap; background: #fff; color: var(--colorBlack); font: 600 13px/1 var(--headingFont); font-style: normal; padding: 8px 11px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 8px 22px rgba(0,0,0,.35); } .cs_dot.on, .cs_dot:hover, .cs_dot:focus-visible { transform: translate(-50%, -50%) scale(1.2); background: #fff; color: var(--colorPrimary); animation: none; z-index: 3; } .cs_dot.on em, .cs_dot:hover em, .cs_dot:focus-visible em { opacity: 1; transform: translateX(-50%) translateY(0); } .cs_stage.focus .cs_dot:not(.on) { opacity: .45; } @keyframes csPulse { 0% { box-shadow: 0 0 0 0 rgba(163,18,47,.7); } 70% { box-shadow: 0 0 0 14px rgba(163,18,47,0); } 100% { box-shadow: 0 0 0 0 rgba(163,18,47,0); } } .cs_hint { color: #8a898f; font-size: 14px; margin-bottom: 18px; } .cs_group { margin-bottom: 22px; } .cs_group h5 { font-family: var(--capsFont); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--colorFlame); margin: 0 0 6px; font-weight: 400; } .cs_group ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.1); } .cs_group li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 13px 8px; border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; transition: background .2s; outline: none; } .cs_group li b { font-family: var(--headingFont); color: var(--colorPrimary); font-size: 15px; padding-top: 2px; transition: color .2s; } .cs_group li h4 { color: #fff; font-size: 17px; margin: 0 0 3px; } .cs_group li p { color: #a8a7ad; font-size: 14px; line-height: 1.5; margin: 0; } .cs_group li.on, .cs_group li:hover, .cs_group li:focus-visible { background: rgba(255,255,255,.06); } .cs_group li.on b, .cs_group li:hover b { color: #fff; } @media (max-width: 991.98px) { .cs_wrap { grid-template-columns: 1fr; gap: 36px; } .cs_stage { position: relative; top: 0; max-width: 560px; margin: 0 auto; } .cs_stats { grid-template-columns: repeat(2, 1fr); } .cs_stats div:nth-child(2) { border-right: 0; } .cs_stats div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); } } @media (max-width: 575.98px) { .cs_dot { width: 28px; height: 28px; font-size: 11px; line-height: 24px; } .cs_dot em { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .cs_dot { animation: none; } } @media print { .console_show { display: none; } } /* ---------- Event photography portfolio ---------- */ .photo_portfolio { margin: 10px 0 90px; padding-top: 60px; border-top: 1px solid rgba(17,16,19,.1); } .pp_title { font-size: 40px; font-weight: 600; margin: 0; } .pp_lead { font-size: 16px; line-height: 1.7; color: #55545a; } .pp_lead a { color: var(--colorPrimary); font-weight: 600; } .pp_grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; } .pp_tile { margin: 0; position: relative; overflow: hidden; border-radius: 3px; } .pp_tile a, .pp_tile img { display: block; width: 100%; height: 100% !important; } .pp_tile img { object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .pp_tile:hover img { transform: scale(1.05); } .pp_tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(17,16,19,.85)); color: #fff; font-size: 13px; line-height: 1.4; pointer-events: none; } .pp_tile figcaption b { display: block; font-family: var(--capsFont); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #f4b9a0; font-weight: 400; margin-bottom: 2px; } .pp_0 { grid-column: span 2; grid-row: span 2; } @media (max-width: 991.98px) { .pp_grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .pp_title { font-size: 32px; } } @media (max-width: 575.98px) { .pp_grid { grid-auto-rows: 150px; } } /* ---------- Production stack ---------- */ .stack_section { background: #f6f4f1; } .stack_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(17,16,19,.1); border: 1px solid rgba(17,16,19,.1); } .stk { background: #fff; padding: 28px 24px; } .stk i { font-size: 28px; color: var(--colorPrimary); display: block; margin-bottom: 14px; } .stk h4 { font-size: 19px; margin-bottom: 12px; } .stk ul { list-style: none; padding: 0; margin: 0; } .stk li { font-size: 14px; line-height: 1.5; color: #3a393f; padding: 6px 0 6px 14px; position: relative; border-top: 1px solid rgba(17,16,19,.06); } .stk li::before { content: ""; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; background: var(--colorPrimary); } @media (max-width: 1199.98px) { .stack_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .stack_grid { grid-template-columns: 1fr; } } /* ---------- Company facts ---------- */ .facts_list { display: grid; grid-template-columns: 200px 1fr; margin: 0; border-top: 2px solid var(--colorBlack); } .facts_list dt, .facts_list dd { padding: 14px 0; border-bottom: 1px solid rgba(17,16,19,.1); margin: 0; } .facts_list dt { font-family: var(--capsFont); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #77767c; font-weight: 400; padding-top: 17px; } .facts_list dd { font-size: 16px; color: var(--colorBlack); } @media (max-width: 575.98px) { .facts_list { grid-template-columns: 1fr; } .facts_list dt { border-bottom: 0; padding-bottom: 0; } } /* ---------- Gear product photos ---------- */ .it_item summary { grid-template-columns: 50px 64px 140px 1fr auto auto 30px; } .it_thumb { width: 64px; height: 48px; background: #fff; border: 1px solid rgba(17,16,19,.08); display: flex; align-items: center; justify-content: center; overflow: hidden; } .it_thumb img { width: 100%; height: 100% !important; object-fit: contain; } .it_thumb_none { color: #c9c7c2; font-size: 20px; } .it_photo { grid-column: 1; margin: 0 0 14px; background: #fff; border: 1px solid rgba(17,16,19,.08); } .it_photo img { width: 100%; height: auto; display: block; } .it_photo figcaption { font-size: 11px; color: #8a898f; padding: 6px 10px; border-top: 1px solid rgba(17,16,19,.06); } .it_tbl { grid-row: 1 / span 5; } .gear_ph { margin: -1px -1px 16px; background: #fff; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(17,16,19,.08); } .gear_ph img { width: 100%; height: 100% !important; object-fit: contain; } @media (max-width: 991.98px) { .it_item summary { grid-template-columns: 40px 56px 1fr auto 24px; } .it_thumb { width: 56px; height: 42px; } .it_tbl { grid-row: auto; } .it_photo { max-width: 420px; } } .gear_card .gear_ph { margin: -26px -24px 18px; } /* ---------- Hero backdrop: stage lighting + torn crimson stage ---------- */ .banner_stage { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfaf8 0%, #f6f2ee 55%, #f3ece6 100%) !important; } .banner_stage .container, .banner_stage > ul { position: relative; z-index: 3; } .hero_band { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 260px; background: #a3122f; } .hero_band::after { content: ""; position: absolute; inset: 0; background: url(../media/paper.jpg) center / 700px; mix-blend-mode: multiply; opacity: .35; } .hero_tear { position: absolute; z-index: 2; left: 0; width: 100%; height: 70px; bottom: 258px; display: block; } .banner_stage .hero_media { box-shadow: 0 30px 70px rgba(17,16,19,.35); } .banner_stage > ul { color: #fff; } .hero_lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero_lights .beam { position: absolute; top: -40px; width: 520px; height: 1150px; transform-origin: 50% 0; filter: blur(18px); mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(163,18,47,.30) 0%, rgba(163,18,47,.12) 45%, rgba(163,18,47,0) 85%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); } .hero_lights .b1 { left: 52%; animation: beamSweep1 14s ease-in-out infinite alternate; } .hero_lights .b2 { left: 70%; background: linear-gradient(180deg, rgba(242,107,42,.28) 0%, rgba(242,107,42,.10) 45%, rgba(242,107,42,0) 85%); animation: beamSweep2 17s ease-in-out infinite alternate; } .hero_lights .b3 { left: 86%; width: 440px; animation: beamSweep3 12s ease-in-out infinite alternate; } @keyframes beamSweep1 { from { transform: translateX(-50%) rotate(18deg); } to { transform: translateX(-50%) rotate(4deg); } } @keyframes beamSweep2 { from { transform: translateX(-50%) rotate(-6deg); } to { transform: translateX(-50%) rotate(14deg); } } @keyframes beamSweep3 { from { transform: translateX(-50%) rotate(-22deg); } to { transform: translateX(-50%) rotate(-8deg); } } .hero_lights .fixture { position: absolute; top: -10px; width: 26px; height: 26px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle, #fff 0 30%, rgba(255,214,200,.9) 45%, rgba(163,18,47,0) 72%); box-shadow: 0 0 40px 14px rgba(242,107,42,.25); } .hero_lights .f1 { left: 52%; } .hero_lights .f2 { left: 70%; } .hero_lights .f3 { left: 86%; } .hero_lights .bokeh { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .5; animation: bokehFloat 16s ease-in-out infinite alternate; } .hero_lights .k1 { width: 90px; height: 90px; left: 62%; top: 30%; background: radial-gradient(circle, rgba(163,18,47,.35), rgba(163,18,47,0) 70%); } .hero_lights .k2 { width: 140px; height: 140px; left: 80%; top: 46%; background: radial-gradient(circle, rgba(242,107,42,.3), rgba(242,107,42,0) 70%); animation-duration: 20s; } .hero_lights .k3 { width: 60px; height: 60px; left: 48%; top: 52%; background: radial-gradient(circle, rgba(242,107,42,.35), rgba(242,107,42,0) 70%); animation-duration: 13s; } .hero_lights .k4 { width: 110px; height: 110px; left: 90%; top: 18%; background: radial-gradient(circle, rgba(163,18,47,.25), rgba(163,18,47,0) 70%); animation-duration: 18s; } .hero_lights .k5 { width: 70px; height: 70px; left: 72%; top: 62%; background: radial-gradient(circle, rgba(163,18,47,.3), rgba(163,18,47,0) 70%); animation-duration: 15s; } @keyframes bokehFloat { from { transform: translate(0, 0); } to { transform: translate(-30px, 24px); } } @media (max-width: 991.98px) { .hero_band { height: 140px; } .hero_tear { bottom: 138px; height: 44px; } .hero_lights .beam { width: 300px; height: 760px; } .hero_lights .b1 { left: 40%; } .hero_lights .f1 { left: 40%; } .hero_lights .b2 { left: 72%; } .hero_lights .f2 { left: 72%; } .hero_lights .b3, .hero_lights .f3, .hero_lights .k4 { display: none; } } @media (prefers-reduced-motion: reduce) { .hero_lights .beam, .hero_lights .bokeh { animation: none; } .hero_lights .b1 { transform: translateX(-50%) rotate(10deg); } .hero_lights .b2 { transform: translateX(-50%) rotate(4deg); } .hero_lights .b3 { transform: translateX(-50%) rotate(-14deg); } } @media print { .hero_lights, .hero_band, .hero_tear { display: none; } } .hero_lights .beam { filter: blur(34px); background: linear-gradient(180deg, rgba(163,18,47,.16) 0%, rgba(163,18,47,.06) 40%, rgba(163,18,47,0) 75%); } .hero_lights .b2 { background: linear-gradient(180deg, rgba(242,107,42,.16) 0%, rgba(242,107,42,.06) 40%, rgba(242,107,42,0) 75%); } .hero_lights .bokeh { opacity: .35; filter: blur(10px); } .hero_lights .fixture { top: 96px; opacity: .8; } .hero_lights .beam { top: 60px; } @media (max-width: 991.98px) { .hero_lights .fixture { top: 72px; } .hero_lights .beam { top: 40px; } } /* soft-edged beams: shape on ::before, blur on the wrapper */ .hero_lights .beam { background: none !important; clip-path: none; filter: blur(26px); mix-blend-mode: normal; } .hero_lights .beam::before { content: ""; position: absolute; inset: 0; clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(163,18,47,.20) 0%, rgba(163,18,47,.07) 42%, rgba(163,18,47,0) 78%); } .hero_lights .b2::before { background: linear-gradient(180deg, rgba(242,107,42,.20) 0%, rgba(242,107,42,.07) 42%, rgba(242,107,42,0) 78%); } .hero_lights .b3::before { background: linear-gradient(180deg, rgba(163,18,47,.16) 0%, rgba(163,18,47,.05) 42%, rgba(163,18,47,0) 78%); } /* ---------- Service art tile (no photo yet) ---------- */ .svc_art { position: relative; background: radial-gradient(120% 90% at 30% 20%, #2a1418, #111013 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; text-align: center; } .svc_art_glow { position: absolute; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(163,18,47,.45), rgba(163,18,47,0) 70%); filter: blur(30px); } .svc_art i { position: relative; font-size: 96px; color: #fff; } .svc_art b { position: relative; font-family: var(--headingFont); font-size: 26px; font-weight: 600; } .svc_art small { position: relative; font-family: var(--capsFont); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a8a7ad; } .svc_links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 4px; } .svc_links br { display: none; } /* ---------- Interactive stage lights (follow cursor, color shifts) ---------- */ @property --h { syntax: ''; inherits: true; initial-value: 4; } .hero_lights .beam { --h: 4; transition: transform .35s cubic-bezier(.2,.8,.2,1), --h 1.2s ease; } .hero_lights .beam::before { background: linear-gradient(180deg, hsla(var(--h), 85%, 48%, .24) 0%, hsla(var(--h), 85%, 50%, .08) 42%, hsla(var(--h), 85%, 50%, 0) 78%) !important; } .hero_lights .fixture { --h: 20; transition: --h 1.2s ease; background: radial-gradient(circle, #fff 0 30%, hsla(var(--h), 90%, 85%, .9) 45%, hsla(var(--h), 85%, 50%, 0) 72%); box-shadow: 0 0 40px 14px hsla(var(--h), 85%, 55%, .28); } .hero_lights .bokeh { --h: 195; transition: transform .9s cubic-bezier(.2,.8,.2,1), --h 1.4s ease; animation: none; background: radial-gradient(circle, hsla(var(--h), 85%, 52%, .35), hsla(var(--h), 85%, 52%, 0) 70%) !important; } .hero_lights.live .beam { animation: none !important; } /* ---- Aerial strip (drone service) ---- */ .svc_links .aerial_strip{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 4px;width:100%} .aerial_strip figure{margin:0} .aerial_strip .loop_clip{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;background:#111} .aerial_strip figcaption{font-size:13px;color:#6b6a70;margin-top:6px;line-height:1.35} @media (max-width:575px){.svc_links .aerial_strip{grid-template-columns:1fr}} /* ========================================================= WORK PAGE: torn-paper poster cards ========================================================= */ .work_card .wc_poster { position: relative; container-type: inline-size; background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 40px rgba(29,27,26,.08); } .work_card .wc_photo { position: relative; z-index: 3; height: 330px; overflow: hidden; background: #1b1a1e; -webkit-mask-size: 100% calc(100% - 69px), 100% 70px; mask-size: 100% calc(100% - 69px), 100% 70px; -webkit-mask-position: top, bottom; mask-position: top, bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .work_card.featured .wc_photo { height: 470px; } .work_card .wc_photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.92); } .work_card:hover .wc_photo img { transform: scale(1.05); filter: saturate(1.05); } .work_card .wc_photo .tag { position: absolute; left: 18px; top: 18px; z-index: 2; background: var(--colorPrimary); color: #fff; font-family: var(--capsFont); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; } .work_card .tear_fiber { position: absolute; z-index: 2; left: 0; width: 100%; height: 70px; top: calc(330px - 70px); display: block; pointer-events: none; } .work_card.featured .tear_fiber { top: calc(470px - 70px); } .work_card .wc_paper { position: relative; z-index: 1; text-align: center; padding: 0 26px 18px; } .work_card .wc_name { display: block; position: relative; z-index: 1; font-family: var(--capsFont); text-transform: uppercase; color: #1d1b1a; font-weight: 400; line-height: .9; letter-spacing: .02em; white-space: nowrap; font-size: min(108px, calc((100cqi - 52px) / (var(--len) * .66))); margin-top: -.42em; transition: color .3s; } .work_card.featured .wc_name { font-size: min(170px, calc((100cqi - 52px) / (var(--len) * .66))); } .work_card:hover .wc_name { color: var(--colorPrimary); } .work_card .wc_sub { display: block; margin-top: 10px; font-family: var(--headingFont); font-size: 17px; color: #3b3a3f; } .work_card .wc_foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(29,27,26,.28); font-size: 13px; color: #1d1b1a; text-align: left; } .work_card .wc_client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .work_card .wc_client b { font-weight: 600; margin-right: 4px; } .work_card .wc_chips { display: flex; gap: 6px; justify-content: center; } .work_card .wc_chips span { background: #1d1b1a; color: #ecebe8; font-family: var(--capsFont); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; padding: 3px 8px 2px; white-space: nowrap; } .work_card .wc_chips span:first-child { background: var(--colorPrimary); color: #fff; } .work_card .wc_go { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font-family: var(--capsFont); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; white-space: nowrap; } .work_card .wc_go i { width: 34px; height: 34px; border: 1px solid #1d1b1a; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: background .3s, color .3s, border-color .3s, transform .3s; } .work_card:hover .wc_go i { background: var(--colorPrimary); border-color: var(--colorPrimary); color: #fff; transform: rotate(-45deg); } .work_card > h3 { margin-top: 26px; font-size: 26px; } .work_card.featured > h3 { font-size: 32px; } .work_card > p { font-size: 16px; } @media (max-width: 991.98px) { .work_card .wc_photo, .work_card.featured .wc_photo { height: 300px; } .work_card .tear_fiber, .work_card.featured .tear_fiber { top: calc(300px - 70px); } .work_card.featured .wc_name { font-size: min(120px, calc((100cqi - 52px) / (var(--len) * .66))); } } @media (max-width: 575.98px) { .work_card .wc_photo, .work_card.featured .wc_photo { height: 230px; -webkit-mask-size: 100% calc(100% - 41px), 100% 42px; mask-size: 100% calc(100% - 41px), 100% 42px; } .work_card .tear_fiber, .work_card.featured .tear_fiber { height: 42px; top: calc(230px - 42px); } .work_card .wc_paper { padding: 0 16px 14px; } .work_card .wc_foot { grid-template-columns: 1fr auto; } .work_card .wc_chips { display: none; } .work_card > h3, .work_card.featured > h3 { font-size: 22px; } } .work_card .wc_foot { grid-template-columns: minmax(0,1fr) auto auto; gap: 16px; } .work_card .wc_client { white-space: normal; line-height: 1.35; } .work_card .wc_name { font-size: min(96px, calc((100cqi - 60px) / (var(--len) * .76))); } .work_card.featured .wc_name { font-size: min(160px, calc((100cqi - 60px) / (var(--len) * .76))); } @media (max-width: 991.98px) { .work_card.featured .wc_name { font-size: min(110px, calc((100cqi - 60px) / (var(--len) * .76))); } } /* ========================================================= ORGANIC PAPER RIPS (from the brand's own rip scans) ========================================================= */ .rip { position: relative; display: block; width: 100%; pointer-events: none; z-index: 2; } .rip .rip_fiber { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: fill !important; filter: drop-shadow(0 2px 2.5px rgba(0,0,0,.22)); } .rip_up .rip_fiber { transform: scaleY(-1); filter: drop-shadow(0 -2px 2.5px rgba(0,0,0,.22)); } .rip .rip_shade { position: absolute; inset: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.30)); } .rip_up .rip_shade { filter: drop-shadow(0 -2px 3px rgba(0,0,0,.30)); } .rip .rip_fill { position: absolute; inset: -1px 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* flyer sign-off band */ .flyer_band .torn { display: none; } .rip_flyer_top { margin-top: -1px; margin-bottom: -4vw; } .rip_flyer_bottom { margin-top: -4vw; margin-bottom: -1px; } /* homepage hero: crimson stage below a torn top edge */ .banner_stage .hero_tear { position: absolute; z-index: 2; left: 0; width: 100%; height: auto; bottom: 259px; } @media (max-width: 991.98px) { .banner_stage .hero_tear { bottom: 139px; } } /* work cards */ .work_card { --ph: 330px; } .work_card.featured { --ph: 470px; } .work_card .wc_photo, .work_card.featured .wc_photo { height: var(--ph); -webkit-mask-size: 100% calc(100% - var(--rr) * 100cqi + 1px), 100% calc(var(--rr) * 100cqi); mask-size: 100% calc(100% - var(--rr) * 100cqi + 1px), 100% calc(var(--rr) * 100cqi); } .work_card .tear_fiber { display: none; } .work_card .wc_rip { position: absolute; z-index: 2; left: 0; width: 100%; top: calc(var(--ph) - var(--rr) * 100cqi); height: calc(var(--rr) * 100cqi); pointer-events: none; } .work_card .wc_rip img { width: 100% !important; height: 100% !important; object-fit: fill !important; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.22)); } .work_card .wc_name { margin-top: -.3em; } @media (max-width: 991.98px) { .work_card, .work_card.featured { --ph: 300px; } } @media (max-width: 575.98px) { .work_card, .work_card.featured { --ph: 230px; } } /* work cards: torn top edge, squared-off bottom */ .work_card .wc_poster { background: none; box-shadow: none; overflow: visible; } .work_card .wc_poster::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: calc(var(--ph) - 40px); background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 40px rgba(29,27,26,.08); } .work_card .wc_photo, .work_card.featured .wc_photo { -webkit-mask-size: 100% calc(var(--rt) * 100cqi), 100% calc(100% - var(--rt) * 100cqi - var(--rr) * 100cqi + 2px), 100% calc(var(--rr) * 100cqi); mask-size: 100% calc(var(--rt) * 100cqi), 100% calc(100% - var(--rt) * 100cqi - var(--rr) * 100cqi + 2px), 100% calc(var(--rr) * 100cqi); -webkit-mask-position: 0 0, 0 calc(var(--rt) * 100cqi - 1px), 0 100%; mask-position: 0 0, 0 calc(var(--rt) * 100cqi - 1px), 0 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .work_card .wc_rip_top { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: calc(var(--rt) * 100cqi); pointer-events: none; } .work_card .wc_rip_top img { width: 100% !important; height: 100% !important; object-fit: fill !important; display: block; transform: scaleY(-1); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.28)) drop-shadow(0 0 1px rgba(0,0,0,.12)); } .work_card .wc_photo .tag { top: calc(var(--rt) * 100cqi + 6px); } .work_card .wc_paper { position: relative; z-index: 1; } /* ---------- Torn frames on case-study pages ---------- */ .rip_frame { position: relative; container-type: inline-size; } .rip_frame > * { --th: min(calc(var(--rt, .09) * 100cqi), 96px); --bh: min(calc(var(--rr, .09) * 100cqi), 96px); } .rip_frame > .rf_media { position: relative; z-index: 2; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .rf_both > .rf_media { -webkit-mask-size: 100% var(--th), 100% calc(100% - var(--th) - var(--bh) + 2px), 100% var(--bh); mask-size: 100% var(--th), 100% calc(100% - var(--th) - var(--bh) + 2px), 100% var(--bh); -webkit-mask-position: 0 0, 0 calc(var(--th) - 1px), 0 100%; mask-position: 0 0, 0 calc(var(--th) - 1px), 0 100%; } .rf_bot > .rf_media { -webkit-mask-size: 100% calc(100% - var(--bh) + 1px), 100% var(--bh); mask-size: 100% calc(100% - var(--bh) + 1px), 100% var(--bh); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } .rf_top > .rf_media { -webkit-mask-size: 100% var(--th), 100% calc(100% - var(--th) + 1px); mask-size: 100% var(--th), 100% calc(100% - var(--th) + 1px); -webkit-mask-position: 0 0, 0 calc(var(--th) - 1px); mask-position: 0 0, 0 calc(var(--th) - 1px); } .rip_frame > .rf_fiber { position: absolute; z-index: 1; left: 0; width: 100%; pointer-events: none; overflow: visible; } .rip_frame > .rf_fiber.t { top: 0; height: var(--th); } .rip_frame > .rf_fiber.b { bottom: 0; height: var(--bh); } .rip_frame > .rf_fiber img { width: 100% !important; height: 100% !important; max-width: none; object-fit: fill !important; display: block; } .rip_frame > .rf_fiber.t img { transform: scaleY(-1); filter: drop-shadow(0 -1px 2px rgba(0,0,0,.28)) drop-shadow(0 0 1px rgba(0,0,0,.12)); } .rip_frame > .rf_fiber.b img { filter: drop-shadow(0 2px 2px rgba(0,0,0,.26)) drop-shadow(0 0 1px rgba(0,0,0,.12)); } /* case hero */ .rip_frame.rf_hero { margin-top: 60px; } .rip_frame.rf_hero > .case_hero_img, .rip_frame.rf_hero > .case_hero_video { margin-top: 0; border-radius: 0; } .rip_frame.rf_hero .live_badge { top: calc(var(--th) + 2px); } /* photo pair */ .photo_pair.rp div { height: auto; overflow: visible; } .photo_pair.rp .rip_frame > .rf_media { height: 360px; overflow: hidden; } @media (max-width: 991.98px) { .photo_pair.rp .rip_frame > .rf_media { height: 260px; } } .rip_frame.rf_hero.rf_bot .live_badge { top: 24px; } /* ========================================================= LIVE STREAM PAGE ========================================================= */ .live_pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; margin-right: 6px; border: 1px solid rgba(17,16,19,.25); border-radius: 30px; font-family: var(--capsFont); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--colorBlack); transition: all .3s; } .live_pill i { width: 8px; height: 8px; border-radius: 50%; background: #9a999e; } .live_pill:hover, .live_pill.active { border-color: var(--colorPrimary); color: var(--colorPrimary); } .live_pill.is_live { background: var(--colorPrimary); border-color: var(--colorPrimary); color: #fff; } .live_pill.is_live i { background: #fff; animation: adblink 1.4s infinite; } #navbarNav .nav_live_m { display: none; } .main-menu-mobile .nav_live_m { display: block; } .lv_intro { padding-bottom: 60px !important; } .lv_stage { padding: 70px 0 60px; position: relative; } .lv_grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; } .lv_theater .lv_grid { grid-template-columns: 1fr; } .lv_player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); } .lv_video, .lv_embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; } .lv_video[hidden], .lv_embed[hidden], .lv_slate[hidden] { display: none; } .lv_slate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .lv_slate_bg { position: absolute; inset: 0; } .lv_slate_bg img { width: 100%; height: 100% !important; object-fit: cover; filter: grayscale(.4) brightness(.32) blur(2px); transform: scale(1.04); } .lv_slate_bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(163,18,47,.35), rgba(17,16,19,.75) 70%); } .lv_slate_inner { position: relative; z-index: 1; padding: 30px; max-width: 640px; } .lv_slate_logo { width: 220px !important; height: auto !important; margin: 0 auto 18px; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); } .lv_slate_kicker { font-family: var(--capsFont); text-transform: uppercase; letter-spacing: .24em; font-size: 13px; color: #f4b9a0; margin: 0 0 8px; } .lv_slate_title { color: #fff; font-size: 40px; font-weight: 600; margin: 0 0 14px; } .lv_slate_note { color: #d6d5da; font-size: 16px; margin: 0; } .lv_count { display: flex; gap: 12px; justify-content: center; margin: 6px 0 18px; } .lv_count[hidden] { display: none; } .lv_count div { min-width: 74px; padding: 10px 8px 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); } .lv_count b { display: block; font-family: var(--headingFont); font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .lv_count small { font-family: var(--capsFont); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a8a7ad; } .lv_onair { position: absolute; left: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--colorPrimary); color: #fff; padding: 6px 12px; font-family: var(--capsFont); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; pointer-events: none; } .lv_onair i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: adblink 1.4s infinite; } .lv_onair[hidden], .lv_unmute[hidden] { display: none; } .lv_unmute { position: absolute; right: 16px; top: 16px; z-index: 3; border: 0; background: rgba(17,16,19,.85); color: #fff; padding: 9px 14px; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; } .lv_toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; } .lv_tb_left, .lv_tb_right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lv_state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--capsFont); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #c9c8cd; } .lv_state i { width: 9px; height: 9px; border-radius: 50%; background: #6d6c72; } [data-state="live"] .lv_state i { background: #ff3b30; animation: adblink 1.4s infinite; } [data-state="soon"] .lv_state i, [data-state="wait"] .lv_state i { background: var(--colorFlame); } .lv_quality { display: inline-flex; align-items: center; gap: 8px; color: #a8a7ad; font-size: 13px; } .lv_quality[hidden] { display: none; } .lv_quality select { background: #1d1c21; color: #fff; border: 1px solid #38373d; padding: 4px 8px; font-size: 13px; } .lv_tool { background: transparent; border: 1px solid #38373d; color: #e9e8ec; padding: 8px 14px; font-size: 13px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; transition: all .25s; } .lv_tool:hover { border-color: var(--colorPrimary); background: var(--colorPrimary); color: #fff; } .lv_tool[hidden] { display: none; } .lv_tool_dark { color: var(--colorBlack); border-color: rgba(17,16,19,.25); white-space: nowrap; } .lv_side { display: grid; gap: 20px; } .lv_theater .lv_side { grid-template-columns: 1fr 1fr; } .lv_card { background: #1a191e; border: 1px solid #2c2b31; padding: 26px; } .lv_card_k { font-family: var(--capsFont); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--colorFlame); } .lv_card h2, .lv_card h3 { color: #fff; font-size: 24px; font-weight: 600; margin: 8px 0 12px; line-height: 1.25; } .lv_card h3 { font-size: 21px; } .lv_card p { color: #a8a7ad; font-size: 15px; margin: 0; } .lv_meta { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; } .lv_meta li { color: #e2e1e6; font-size: 15px; display: flex; gap: 10px; align-items: baseline; } .lv_meta i { color: var(--colorFlame); width: 16px; } .lv_card_cta { background: var(--colorPrimary); border-color: var(--colorPrimary); } .lv_card_cta .lv_card_k { color: #ffd9c9; } .lv_card_cta p { color: #f6dfe4; margin-bottom: 18px; } .lv_card_cta .ad_btn { background: #fff !important; border-color: #fff !important; color: var(--colorBlack) !important; } .lv_chat { height: 420px; border: 1px solid #2c2b31; background: #1a191e; } .lv_chat[hidden] { display: none; } .lv_chat iframe { width: 100%; height: 100%; border: 0; } .lv_rip { margin-top: -1px; } .lv_lede { font-size: 17px; color: #5d5c62; } .lv_sched { display: grid; gap: 14px; } .lv_empty { display: flex; gap: 22px; align-items: center; padding: 34px; border: 1px dashed rgba(17,16,19,.22); } .lv_empty > i { font-size: 40px; color: var(--colorPrimary); } .lv_empty h3 { font-size: 22px; margin: 0 0 6px; } .lv_empty p { margin: 0; color: #5d5c62; } .lv_item { display: grid; grid-template-columns: 84px 1fr auto; gap: 24px; align-items: center; padding: 22px 26px; background: #fff; border: 1px solid rgba(17,16,19,.1); box-shadow: 0 10px 30px rgba(17,16,19,.05); } .lv_date { text-align: center; border-right: 1px solid rgba(17,16,19,.12); padding-right: 20px; } .lv_date b { display: block; font-size: 38px; line-height: 1; color: var(--colorPrimary); font-family: var(--headingFont); } .lv_date span { font-family: var(--capsFont); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; } .lv_info h3 { font-size: 21px; margin: 0 0 4px; } .lv_info p { margin: 0; color: #5d5c62; font-size: 15px; } .lv_info .lv_desc { margin-top: 6px; } .lv_replays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .lv_replay { color: inherit; display: block; } .lv_rthumb { position: relative; aspect-ratio: 16/9; background: #111013; overflow: hidden; margin-bottom: 12px; } .lv_rthumb img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s; } .lv_replay:hover .lv_rthumb img { transform: scale(1.05); } .lv_rthumb i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: var(--colorPrimary); color: #fff; display: flex; align-items: center; justify-content: center; } .lv_replay h3 { font-size: 19px; margin: 0 0 2px; } .lv_replay p { color: #77767c; margin: 0; font-size: 14px; } .lv_help { display: grid; gap: 10px; } .lv_q { background: #fff; border: 1px solid rgba(17,16,19,.1); } .lv_q summary { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--headingFont); font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--colorBlack); } .lv_q summary::-webkit-details-marker { display: none; } .lv_q summary i { color: var(--colorPrimary); transition: transform .25s; } .lv_q[open] summary i { transform: rotate(45deg); } .lv_q p { padding: 0 22px 18px; margin: 0; color: #5d5c62; font-size: 16px; } .lv_caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(17,16,19,.12); border: 1px solid rgba(17,16,19,.12); } .lv_cap { background: #fff; padding: 30px 28px; } .lv_cap i { font-size: 28px; color: var(--colorPrimary); } .lv_cap h3 { font-size: 20px; margin: 16px 0 8px; } .lv_cap p { margin: 0; color: #5d5c62; font-size: 15px; } @media (max-width: 1199.98px) { .lv_grid { grid-template-columns: 1fr; } .lv_side { grid-template-columns: 1fr 1fr; } } @media (max-width: 991.98px) { .lv_caps, .lv_replays { grid-template-columns: 1fr 1fr; } .lv_slate_title { font-size: 30px; } } @media (max-width: 767.98px) { .lv_side, .lv_theater .lv_side { grid-template-columns: 1fr; } .lv_caps, .lv_replays { grid-template-columns: 1fr; } .lv_item { grid-template-columns: 64px 1fr; } .lv_item .lv_tool { grid-column: 1 / -1; justify-self: start; } .lv_slate_logo { width: 130px !important; margin-bottom: 8px; } .lv_slate_title { font-size: 21px; margin-bottom: 6px; } .lv_slate_note { font-size: 13px; } .lv_slate_kicker { font-size: 11px; margin-bottom: 4px; } .lv_count div { min-width: 54px; padding: 6px; } .lv_count b { font-size: 22px; } .lv_empty { flex-direction: column; align-items: flex-start; padding: 24px; } } @media (max-width: 1440px) and (min-width: 1200px) { .live_pill { padding: 0 10px; margin-right: 2px; } } .live_pill { margin-right: 16px; } @media (max-width: 1440px) and (min-width: 1200px) { .live_pill { margin-right: 12px; } } .lv_stage { padding-bottom: 30px; } @media (max-width: 767.98px) { .lv_stage { padding-top: 30px; } [data-theater] { display: none !important; } } @media (min-width: 1200px) and (max-width: 1299.98px) { .live_pill { font-size: 0; gap: 0; width: 30px; padding: 0; justify-content: center; margin-right: 8px; } } /* featured work card: squared top, torn bottom */ .work_card .wc_photo.wc_sq { -webkit-mask-size: 100% calc(100% - var(--rr) * 100cqi + 1px), 100% calc(var(--rr) * 100cqi); mask-size: 100% calc(100% - var(--rr) * 100cqi + 1px), 100% calc(var(--rr) * 100cqi); -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } .work_card .wc_photo.wc_sq .tag { top: 18px; } .work_card .wc_poster::before { top: calc(var(--ph) - 140px); } @media (max-width: 575.98px) { .work_card .wc_poster::before { top: calc(var(--ph) - 90px); } } /* About: community strip, evenly framed */ .community_strip { padding-top: 100px; } .community_strip .about_trio figure.pos_top img { object-position: center 18% !important; } @media (max-width: 575.98px) { .community_strip { padding-top: 70px; } } /* Testimonials: show the whole photo (sources are landscape) */ .testimonial .testimonial_item > .row { align-items: center; } .testimonial_img { height: auto !important; } .testimonial_img img { width: 100% !important; height: auto !important; aspect-ratio: auto; object-fit: contain !important; display: block; box-shadow: 0 24px 60px rgba(0,0,0,.35); } .testimonial_img::after { top: 50% !important; transform: translateY(-40%); height: 110% !important; } /* ========================================================= KNOWLEDGE BASE ========================================================= */ .kb_intro { padding-bottom: 50px !important; } .kb_crumbs { font-family: var(--capsFont); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #77767c; margin-bottom: 26px; display: flex; gap: 10px; flex-wrap: wrap; } .kb_crumbs a { color: var(--colorPrimary); } .kb_jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; align-items: center; } .kb_jump a { border: 1px solid rgba(17,16,19,.18); padding: 8px 16px; font-size: 14px; color: var(--colorBlack); transition: all .25s; } .kb_jump a:hover { border-color: var(--colorPrimary); background: var(--colorPrimary); color: #fff; } .kb_upd { margin-left: auto; font-family: var(--capsFont); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a898f; } .kb_prose h2 { font-size: 34px; margin: 6px 0 18px; } .kb_prose p { font-size: 18px; line-height: 1.75; color: #3d3c42; margin-bottom: 18px; } .kb_layer { font-family: var(--capsFont); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--colorPrimary); } .kb_cta { background: #111013; color: #c9c8cd; padding: 30px; position: sticky; top: 110px; } .kb_cta h3 { color: #fff; font-size: 24px; margin: 8px 0 10px; } .kb_cta p { color: #a8a7ad; font-size: 15px; margin-bottom: 20px; } .kb_cta .led_inline { display: inline-block; margin-top: 16px; color: #f4b9a0; } .kb_table_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .kb_table { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; } .kb_table th, .kb_table td { padding: 18px 20px; border-bottom: 1px solid rgba(17,16,19,.1); vertical-align: top; text-align: left; font-size: 15px; line-height: 1.6; } .kb_table thead th { font-family: var(--capsFont); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #77767c; font-weight: 400; border-bottom: 2px solid var(--colorBlack); } .kb_table tbody th { font-family: var(--headingFont); font-weight: 600; color: var(--colorBlack); width: 22%; } .kb_table tbody td:last-child { color: var(--colorBlack); } .kb_table tbody tr:hover { background: #faf9f7; } .kb_table2 tbody th { width: 26%; } .kb_table_dark { background: transparent; } .kb_table_dark th, .kb_table_dark td { border-bottom-color: #2c2b31; color: #c9c8cd; } .kb_table_dark thead th { border-bottom-color: #f4b9a0; color: #a8a7ad; } .kb_table_dark tbody th { color: #fff; } .kb_table_dark tbody td:last-child { color: #fff; } .kb_table_dark tbody tr:hover { background: #1a191e; } .kb_dark { position: relative; } .kb_dark_p { color: #a8a7ad; font-size: 16px; margin-top: 18px; } .kb_rip { margin-top: -1px; } .kb_deeps { display: grid; gap: 12px; } .kb_deep { background: #1a191e; border: 1px solid #2c2b31; } .kb_deep summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; align-items: center; color: #fff; font-family: var(--headingFont); font-size: 19px; font-weight: 600; } .kb_deep summary::-webkit-details-marker { display: none; } .kb_deep summary i { color: var(--colorFlame); transition: transform .25s; } .kb_deep[open] summary i { transform: rotate(45deg); } .kb_deep ul { margin: 0; padding: 0 24px 20px 44px; } .kb_deep li { color: #c9c8cd; font-size: 15.5px; line-height: 1.7; margin-bottom: 10px; } .kb_deep li::marker { color: var(--colorFlame); } .kb_deep a { color: #f4b9a0; text-decoration: underline; } .kb_check { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; } .kb_check li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(17,16,19,.1); font-size: 17px; color: var(--colorBlack); } .kb_check i { color: var(--colorPrimary); font-size: 18px; } .kb_minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kb_mini { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid rgba(17,16,19,.14); color: var(--colorBlack); font-family: var(--headingFont); font-weight: 600; font-size: 16px; transition: all .25s; } .kb_mini > i:first-child { color: var(--colorPrimary); font-size: 20px; width: 24px; } .kb_mini span { flex: 1; } .kb_mini > i:last-child { opacity: 0; transform: translateX(-6px); transition: all .25s; } .kb_mini:hover { border-color: var(--colorPrimary); color: var(--colorPrimary); } .kb_mini:hover > i:last-child { opacity: 1; transform: none; } .kb_mini_hub { background: #111013; color: #fff; border-color: #111013; } .kb_mini_hub > i:first-child { color: var(--colorFlame); } .kb_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .kb_card { display: flex; flex-direction: column; padding: 32px 30px; border: 1px solid rgba(17,16,19,.12); background: #fff; color: inherit; transition: all .3s; position: relative; } .kb_card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--colorPrimary); transition: width .4s; } .kb_card:hover { box-shadow: 0 24px 50px rgba(17,16,19,.1); transform: translateY(-3px); } .kb_card:hover::before { width: 100%; } .kb_card > i { font-size: 34px; color: var(--colorPrimary); } .kb_card_k { font-family: var(--capsFont); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8a898f; margin-top: 22px; } .kb_card h3 { font-size: 25px; margin: 6px 0 12px; } .kb_card p { font-size: 15.5px; color: #5d5c62; flex: 1; } .kb_card .more { margin-top: 18px; font-family: var(--headingFont); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; display: inline-flex; gap: 8px; align-items: center; color: var(--colorBlack); } .kb_card:hover .more { color: var(--colorPrimary); } .kb_gloss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; margin: 0; } .kb_term { padding: 16px 0; border-bottom: 1px solid rgba(17,16,19,.1); scroll-margin-top: 110px; } .kb_term dt { font-family: var(--headingFont); font-weight: 600; font-size: 17px; color: var(--colorBlack); } .kb_term dd { margin: 4px 0 0; color: #5d5c62; font-size: 15px; } .kb_sources { padding-left: 18px; } .kb_sources li { margin-bottom: 10px; font-size: 15.5px; } .kb_sources a { color: var(--colorBlack); text-decoration: underline; text-decoration-color: rgba(163,18,47,.4); } .kb_sources a:hover { color: var(--colorPrimary); } @media (max-width: 1199.98px) { .kb_minis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991.98px) { .kb_cards, .kb_gloss { grid-template-columns: 1fr 1fr; } .kb_cta { position: static; margin-top: 30px; } .kb_deeps { margin-top: 30px; } } @media (max-width: 575.98px) { .kb_cards, .kb_gloss, .kb_minis { grid-template-columns: 1fr; } .kb_upd { margin-left: 0; width: 100%; } .kb_prose p { font-size: 16px; } } .kb_trend { display: inline-block; margin-left: 8px; padding: 2px 7px 1px; background: var(--colorPrimary); color: #fff; font-family: var(--capsFont); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; vertical-align: 2px; font-weight: 400; } .lv_lede .kb_trend { margin-left: 2px; } /* ========================================================= VISUAL FLOW: chapter numbers, progress rail, tour bar ========================================================= */ .ch_no { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 7px; margin-right: 12px; border: 1px solid currentColor; border-radius: 22px; font-size: 11px; letter-spacing: .08em; color: var(--colorPrimary); vertical-align: 1px; } .dark .ch_no, .kb_dark .ch_no, .post_showcase .ch_no, .console_show .ch_no { color: var(--colorFlame); } .tour_rail { position: fixed; left: 22px; top: 50%; transform: translate(-12px, -50%); z-index: 50; display: flex; flex-direction: column; gap: 14px; padding: 6px 0; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; mix-blend-mode: normal; } .tour_rail.show { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } .tr_line { position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: rgba(140,138,145,.35); } .tr_line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--colorPrimary); transition: height .15s linear; } .tr_dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #9a999e; display: block; transition: all .25s; } .tr_dot em { position: absolute; left: 22px; top: 50%; transform: translate(-4px, -50%); white-space: nowrap; font-style: normal; font-family: var(--capsFont); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: #111013; color: #fff; padding: 5px 9px; opacity: 0; pointer-events: none; transition: all .2s; } .tr_dot:hover em, .tr_dot.on em { opacity: 1; transform: translate(0, -50%); } .tr_dot:not(:hover).on em { opacity: .0; } .tour_rail:hover .tr_dot.on em { opacity: 1; } .tr_dot.past { border-color: var(--colorPrimary); background: var(--colorPrimary); } .tr_dot.on { border-color: var(--colorPrimary); background: #fff; transform: scale(1.35); box-shadow: 0 0 0 4px rgba(163,18,47,.15); } .tr_dot.tr_cta { width: 16px; height: 16px; margin-left: -2px; border-color: var(--colorPrimary); background: var(--colorPrimary); box-shadow: 0 0 0 0 rgba(163,18,47,.6); animation: csPulse 2.4s infinite; } .tr_dot.tr_cta em { background: var(--colorPrimary); } @media (max-width: 1399.98px) { .tour_rail { display: none; } } .tour_bar { padding: 70px 0 60px; background: #fff; position: relative; } .tb_inner { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 40px; align-items: center; } .tb_k { font-family: var(--capsFont); font-size: 12px; letter-spacing: .18em; color: var(--colorPrimary); } .tb_head p { margin: 6px 0 0; font-size: 16px; color: #3d3c42; line-height: 1.5; } .tb_track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); } .tb_track::before, .tb_track::after { content: ""; position: absolute; top: 22px; left: 10%; height: 2px; } .tb_track::before { right: 10%; background: repeating-linear-gradient(90deg, rgba(17,16,19,.25) 0 6px, transparent 6px 12px); } .tb_track::after { width: calc(80% * var(--tb-pct) / 100); background: var(--colorPrimary); } .tb_node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--colorBlack); } .tb_dot { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid rgba(17,16,19,.25); font-size: 17px; color: #77767c; transition: all .25s; } .tb_node small { margin-top: 10px; font-family: var(--capsFont); font-size: 11px; letter-spacing: .14em; color: #8a898f; } .tb_node b { font-family: var(--headingFont); font-size: 15px; font-weight: 600; margin-top: 2px; } .tb_done .tb_dot { background: var(--colorPrimary); border-color: var(--colorPrimary); color: #fff; } .tb_here .tb_dot { border-color: var(--colorPrimary); color: var(--colorPrimary); box-shadow: 0 0 0 6px rgba(163,18,47,.12); transform: scale(1.1); } .tb_here b { color: var(--colorPrimary); } .tb_goal .tb_dot { background: #111013; border-color: #111013; color: #fff; } .tb_node:hover .tb_dot { border-color: var(--colorPrimary); color: var(--colorPrimary); } .tb_goal:hover .tb_dot, .tb_done:hover .tb_dot { color: #fff; background: var(--colorPrimary); } .tb_next { white-space: nowrap; } @media (max-width: 1199.98px) { .tb_inner { grid-template-columns: 1fr; gap: 26px; } .tb_next { justify-self: start; } } @media (max-width: 575.98px) { .tb_node b { font-size: 12px; } .tb_dot { width: 38px; height: 38px; font-size: 14px; } .tb_track::before, .tb_track::after { top: 18px; } .tb_node small { display: none; } } /* ---------- Home: interactive flypack ---------- */ .fp_lead { font-size: 17px; line-height: 1.7; color: #3d3c42; } .fp_wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } .fp_tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fp_tab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(17,16,19,.16); background: #fff; color: var(--colorBlack); font-family: var(--headingFont); font-weight: 600; font-size: 15px; cursor: pointer; text-align: left; transition: all .25s; } .fp_tab i { color: var(--colorPrimary); font-size: 17px; width: 20px; } .fp_tab span { flex: 1; } .fp_tab em { font-style: normal; font-family: var(--capsFont); font-size: 11px; color: #8a898f; } .fp_tab:hover { border-color: var(--colorPrimary); } .fp_tab.on { background: #111013; border-color: #111013; color: #fff; } .fp_tab.on i { color: var(--colorFlame); } .fp_tab.on em { color: #a8a7ad; } .fp_panels { margin-top: 18px; min-height: 230px; } .fp_panel { list-style: none; padding: 0; margin: 0; display: none; border-top: 2px solid var(--colorBlack); } .fp_panel.on { display: block; animation: fpIn .45s ease; } @keyframes fpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .fp_panel li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 14px 6px; border-bottom: 1px solid rgba(17,16,19,.12); cursor: default; transition: background .2s; } .fp_panel li b { font-family: var(--headingFont); color: var(--colorPrimary); font-size: 15px; padding-top: 2px; } .fp_panel li h4 { font-size: 17px; margin: 0 0 3px; } .fp_panel li p { font-size: 14.5px; color: #5d5c62; margin: 0; line-height: 1.5; } .fp_panel li.hot { background: rgba(163,18,47,.06); } .fp_stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; border-top: 1px solid rgba(17,16,19,.14); border-bottom: 1px solid rgba(17,16,19,.14); } .fp_stats div { padding: 16px 6px; text-align: center; border-right: 1px solid rgba(17,16,19,.14); } .fp_stats div:last-child { border-right: 0; } .fp_stats b { display: block; font-family: var(--headingFont); font-size: 30px; font-weight: 600; line-height: 1; color: var(--colorBlack); } .fp_stats small { display: block; margin-top: 6px; font-family: var(--capsFont); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #77767c; } .fp_ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .fp_right { position: sticky; top: 110px; } .fp_frame .fp_media { box-shadow: 0 30px 70px rgba(17,16,19,.25); } .fp_stage { position: relative; } .fp_img { display: block; width: 100%; height: auto; } .fp_dot { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: rgba(17,16,19,.55); color: #fff; font: 600 12px/26px var(--headingFont); padding: 0; cursor: pointer; transition: all .3s; z-index: 2; } .fp_stage.focus .fp_dot { opacity: .35; } .fp_stage.focus .fp_dot.in { opacity: 1; background: var(--colorPrimary); box-shadow: 0 0 0 0 rgba(163,18,47,.7); animation: csPulse 2.4s infinite; } .fp_stage .fp_dot.hot, .fp_dot:hover { opacity: 1; background: #fff; color: var(--colorPrimary); transform: translate(-50%, -50%) scale(1.25); animation: none; z-index: 3; } .fp_cap { margin-top: 14px; font-size: 13.5px; color: #77767c; display: flex; gap: 8px; align-items: center; } @media (max-width: 991.98px) { .fp_wrap { grid-template-columns: 1fr; gap: 34px; } .fp_right { position: static; order: -1; } } @media (max-width: 575.98px) { .fp_tabs { grid-template-columns: repeat(2, 1fr); } .fp_stats { grid-template-columns: repeat(2, 1fr); } .fp_stats div:nth-child(2) { border-right: 0; } .fp_dot { width: 24px; height: 24px; font-size: 10px; line-height: 20px; } } .fp_ctas .ad_btn { padding-left: 22px; padding-right: 22px; } .tour_bar { padding-top: 40px; } /* ========================================================= ABOUT HERO: crimson flyer with the origin photo ========================================================= */ .about_hero { position: relative; background: linear-gradient(180deg, #800012 0%, #a3122f 55%, #9c102b 100%); color: #fff; padding: 170px 0 0; overflow: hidden; } .ah_paper { position: absolute; inset: 0; background: url(../media/paper.jpg) center / 640px; mix-blend-mode: multiply; opacity: .38; pointer-events: none; } .about_hero::before { content: ""; position: absolute; right: -10%; top: -20%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(242,107,42,.28), rgba(242,107,42,0)); pointer-events: none; } .about_hero .container { position: relative; z-index: 2; } .ah_grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 60px; align-items: center; padding-bottom: 40px; } .about_hero .section_heading h5 { color: #ffd9c9 !important; } .about_hero .section_heading h5::before, .about_hero .section_heading h5::after { filter: invert(1) brightness(2); } .ah_title { font-family: var(--capsFont); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1.04; font-size: clamp(40px, 5.2vw, 82px); margin: 10px 0 26px; color: #fff; } .ah_title span { display: block; } .ah_title .ah_red { color: #111013; background: #f7f3ee; display: inline-block; padding: .02em .18em .06em; margin-top: .12em; transform: rotate(-1.2deg); box-shadow: 0 10px 30px rgba(0,0,0,.25); } .ah_lede { font-size: 18px; line-height: 1.75; color: #f6dfe4; max-width: 560px; } .ah_time { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.3); max-width: 560px; counter-reset: t; } .ah_time li { position: relative; padding: 18px 12px 0 0; } .ah_time li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); } .ah_time li:last-child::before { background: var(--colorFlame); animation: csPulse 2.4s infinite; } .ah_time b { display: block; font-family: var(--headingFont); font-size: 26px; font-weight: 600; color: #fff; } .ah_time span { font-family: var(--capsFont); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #ffd9c9; } .ah_print { position: relative; margin: 0; padding: 18px 18px 22px; background: #f7f3ee; transform: rotate(2deg); box-shadow: 0 40px 80px rgba(40,0,8,.45), 0 4px 10px rgba(0,0,0,.2); transition: transform .6s cubic-bezier(.2,.7,.2,1); } .ah_print:hover { transform: rotate(.5deg) scale(1.01); } .ah_frame .ah_media img { display: block; width: 100%; height: auto; filter: contrast(1.05) saturate(.95); } .ah_print figcaption { color: #3d3c42; font-size: 15px; line-height: 1.5; margin-top: 14px; padding: 0 4px; } .ah_k { display: block; font-family: var(--capsFont); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--colorPrimary); margin-bottom: 4px; } .ah_tape { position: absolute; z-index: 4; width: 120px; height: 30px; background: rgba(255,240,220,.72); box-shadow: 0 2px 6px rgba(0,0,0,.15); backdrop-filter: blur(1px); } .ah_tape.t1 { top: -12px; left: 34px; transform: rotate(-8deg); } .ah_tape.t2 { top: -10px; right: 30px; transform: rotate(6deg); } .ah_note { position: absolute; left: -46px; bottom: -34px; z-index: 5; background: #111013; color: #fff; padding: 16px 20px 14px; transform: rotate(-4deg); box-shadow: 0 20px 40px rgba(0,0,0,.35); } .ah_note .ah_k { color: var(--colorFlame); } .ah_note b { display: block; font-family: var(--capsFont); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 17px; line-height: 1.45; } .about_hero .ah_rip { margin-top: 40px; margin-bottom: -2px; } @media (max-width: 991.98px) { .about_hero { padding-top: 130px; } .ah_grid { grid-template-columns: 1fr; gap: 60px; } .ah_print { max-width: 560px; margin: 0 auto; transform: rotate(1.2deg); } .ah_note { left: auto; right: -8px; bottom: -40px; } } @media (max-width: 575.98px) { .about_hero { padding-top: 110px; } .ah_time b { font-size: 21px; } .ah_note { padding: 12px 14px; } .ah_note b { font-size: 14px; } .ah_tape { width: 84px; } } .about_hero h1.ah_title { font-size: clamp(38px, 5vw, 78px) !important; line-height: 1.04 !important; font-weight: 400 !important; letter-spacing: .04em !important; } .about_hero .ch_no { color: #fff; } .ah_note { left: auto; right: -34px; bottom: -44px; transform: rotate(3deg); } .ah_print figcaption { padding-right: 230px; } @media (max-width: 991.98px) { .ah_print figcaption { padding-right: 4px; padding-bottom: 46px; } .ah_note { right: -8px; } } .about_hero h1.ah_title span { font-size: inherit !important; font-family: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; font-weight: inherit !important; } .about_hero h1.ah_title .ah_red { font-size: .86em !important; } .about_hero h1.ah_title { font-size: clamp(36px, 4.1vw, 62px) !important; } .about_hero h1.ah_title .ah_red { font-size: .8em !important; white-space: nowrap; } @media (max-width: 575.98px) { .about_hero h1.ah_title .ah_red { font-size: .72em !important; } } /* ========================================================= HOME AS A PRODUCTION TIMELINE: scene slates + timecode HUD ========================================================= */ .slate { position: relative; background: transparent; margin: -1px 0; z-index: 3; } .slate_rip_t { margin-bottom: -1px; } .slate_rip_b { margin-top: -1px; } .slate_body { position: relative; background: #111013; color: #fff; padding: 46px 0 50px; overflow: hidden; } .slate_body::after { content: ""; position: absolute; inset: 0; background: url(../media/paper.jpg) center / 600px; mix-blend-mode: soft-light; opacity: .18; pointer-events: none; } .slate_clap { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(-55deg, #f7f3ee 0 22px, #111013 22px 44px); opacity: .9; transform-origin: left; } .slate_grid { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 44px; align-items: center; } .slate_no { font-family: var(--headingFont); font-weight: 700; font-size: clamp(90px, 11vw, 170px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); letter-spacing: -.02em; } .slate_k { font-family: var(--capsFont); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--colorFlame); display: inline-flex; gap: 10px; align-items: center; } .slate_txt h2 { color: #fff; font-family: var(--capsFont); font-weight: 400; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.08; margin: 10px 0 12px; } .slate_txt p { color: #b9b8be; font-size: 17px; line-height: 1.65; max-width: 620px; margin: 0; } .slate_meta { text-align: right; } .slate_tc { display: inline-flex; align-items: center; gap: 8px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); padding: 6px 12px; } .slate_tc i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: adblink 1.4s infinite; } .slate_steps { list-style: none; padding: 0; margin: 18px 0 0; display: flex; gap: 6px; justify-content: flex-end; } .slate_steps li { font-family: var(--capsFont); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6d6c72; padding: 8px 9px 7px; border-top: 3px solid #2c2b31; min-width: 62px; text-align: left; } .slate_steps li span { display: block; font-size: 10px; opacity: .8; } .slate_steps li.done { color: #a8a7ad; border-top-color: #7a0a20; } .slate_steps li.on { color: #fff; border-top-color: var(--colorPrimary); } /* reveal (only when JS is running) */ .sr-on .slate .slate_no, .sr-on .slate .slate_txt, .sr-on .slate .slate_meta { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); } .sr-on .slate .slate_txt { transition-delay: .12s; } .sr-on .slate .slate_meta { transition-delay: .24s; } .sr-on .slate .slate_clap { transform: scaleX(0); transition: transform 1s cubic-bezier(.7,0,.2,1); } .sr-on .slate.in .slate_no, .sr-on .slate.in .slate_txt, .sr-on .slate.in .slate_meta { opacity: 1; transform: none; } .sr-on .slate.in .slate_clap { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .sr-on .slate * { transition: none !important; opacity: 1 !important; transform: none !important; } } @media (max-width: 991.98px) { .slate_grid { grid-template-columns: auto 1fr; gap: 22px 28px; } .slate_meta { grid-column: 1 / -1; text-align: left; } .slate_steps { justify-content: flex-start; } } @media (max-width: 575.98px) { .slate_body { padding: 34px 0 38px; } .slate_grid { grid-template-columns: 1fr; } .slate_no { font-size: 84px; } .slate_steps li { min-width: 0; flex: 1; padding: 6px 4px; font-size: 9px; letter-spacing: .06em; } } /* timecode HUD (desktop) */ .tc_hud { position: fixed; left: 24px; bottom: 24px; z-index: 60; width: 300px; background: rgba(17,16,19,.92); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,0,0,.35); padding: 12px 14px 12px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .4s, transform .4s; } .tc_hud.show { opacity: 1; transform: none; pointer-events: auto; } .hud_row { display: flex; align-items: center; gap: 12px; font-size: 12px; } .hud_rec { display: inline-flex; align-items: center; gap: 6px; color: #ff6b5e; letter-spacing: .1em; } .hud_rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: adblink 1.4s infinite; } .hud_tc { font-size: 17px; letter-spacing: .04em; font-variant-numeric: tabular-nums; flex: 1; } .hud_spd { font-size: 11px; color: #a8a7ad; letter-spacing: .06em; min-width: 78px; text-align: right; } .tc_hud.play .hud_spd { color: #8ef0a8; } .tc_hud.rew .hud_spd { color: var(--colorFlame); } .hud_scene { margin-top: 6px; font-family: var(--capsFont); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #f4b9a0; } .hud_bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 10px; } .hud_bar span { --p: 0; position: relative; height: 18px; background: #2c2b31; overflow: hidden; } .hud_bar span::before { content: ""; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--colorPrimary); } .hud_bar b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 9px/1 var(--capsFont); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); } .hud_bar span.on b { color: #fff; } @media (max-width: 1199.98px) { .tc_hud { left: 12px; right: 12px; bottom: 64px; width: auto; padding: 8px 10px; } .hud_scene { display: none; } .hud_tc { font-size: 14px; } .hud_bar span { height: 14px; } } @media (max-width: 575.98px) { .hud_bar b { font-size: 7.5px; letter-spacing: .04em; } } .tc_hud.show { opacity: .72; } .tc_hud.show.play, .tc_hud.show.rew, .tc_hud.show:hover { opacity: 1; } @media (max-width: 1199.98px) { .tc_hud { top: 70px; bottom: auto; left: 0; right: 0; width: auto; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding: 6px 12px 7px; transform: translateY(-10px); } .tc_hud .hud_row:first-child { gap: 10px; } .tc_hud .hud_rec { font-size: 10px; } .tc_hud .hud_tc { font-size: 13px; } .tc_hud .hud_bar { margin-top: 5px; } .tc_hud .hud_bar span { height: 12px; } } @media (max-width: 575.98px) { .tc_hud .hud_spd { min-width: 0; font-size: 10px; } } /* crimson scene slates (punctuate dark and light sections alike) */ .slate_body { background: linear-gradient(180deg, #9c102b, #a3122f 60%, #8f0d27); } .slate_body::after { mix-blend-mode: multiply; opacity: .35; } .slate_no { -webkit-text-stroke: 1.5px rgba(255,255,255,.8); } .slate_k { color: #ffd9c9; } .slate_txt p { color: #f6dfe4; } .slate_tc { background: rgba(17,16,19,.35); border-color: rgba(255,255,255,.25); } .slate_tc i { background: #fff; } .slate_steps li { color: rgba(255,255,255,.5); border-top-color: rgba(255,255,255,.22); } .slate_steps li.done { color: #ffd9c9; border-top-color: rgba(255,255,255,.6); } .slate_steps li.on { color: #fff; border-top-color: #fff; } .slate_clap { background: repeating-linear-gradient(-55deg, #f7f3ee 0 22px, #111013 22px 44px); } /* ---------- Quick answers on lined notebook paper ---------- */ #answers .faq_list { position: relative; padding: 34px 34px 30px 74px; background-color: #f7f4ec; background-image: linear-gradient(90deg, transparent 54px, rgba(196,40,60,.55) 54px, rgba(196,40,60,.55) 56px, transparent 56px), repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(70,110,170,.28) 35px, rgba(70,110,170,.28) 36px), url(../media/paper.jpg); background-size: auto, auto, 480px 480px; background-position: 0 0, 0 18px, 0 0; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 24px 50px rgba(17,16,19,.12); transform: rotate(-.4deg); } #answers .faq_list::before { content: ""; position: absolute; left: 20px; top: 26px; bottom: 26px; width: 14px; background: radial-gradient(circle at 7px 7px, #fff 0 5px, rgba(0,0,0,.18) 5.5px 6.5px, transparent 7px) 0 0 / 14px 120px repeat-y; } #answers .faq_item { background: transparent !important; border-color: rgba(70,110,170,.0) !important; } #answers .faq_item summary { background: transparent; } @media (max-width: 575.98px) { #answers .faq_list { padding: 24px 16px 22px 46px; background-position: -20px 0, 0 18px, 0 0; } #answers .faq_list::before { left: 10px; } } /* ---------- Condensed counter with the step-show photo ---------- */ .counter_strip { padding: 70px 0 !important; } .cs2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 50px; align-items: center; } .cs2_photo { margin: 0; position: relative; transform: rotate(-1.5deg); background: #f7f3ee; padding: 12px 12px 16px; box-shadow: 0 24px 50px rgba(17,16,19,.22); } .cs2_photo img { display: block; width: 100%; height: 300px !important; object-fit: cover; object-position: 45% 40% !important; } .cs2_photo figcaption { font-size: 13.5px; color: #5d5c62; margin-top: 10px; } .cs2_stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--colorBlack); border-bottom: 1px solid rgba(17,16,19,.14); } .cs2_stats div { padding: 26px 14px 22px; border-right: 1px solid rgba(17,16,19,.12); } .cs2_stats div:last-child { border-right: 0; } .cs2_stats b { display: block; font-family: var(--headingFont); font-weight: 600; font-size: 56px; line-height: 1; color: var(--colorPrimary); } .cs2_stats span { display: block; margin-top: 10px; font-family: var(--capsFont); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #5d5c62; line-height: 1.5; } @media (max-width: 991.98px) { .cs2 { grid-template-columns: 1fr; gap: 34px; } .cs2_photo { max-width: 520px; } } @media (max-width: 575.98px) { .cs2_stats { grid-template-columns: 1fr 1fr; } .cs2_stats div:nth-child(2) { border-right: 0; } .cs2_stats div:nth-child(-n+2) { border-bottom: 1px solid rgba(17,16,19,.12); } .cs2_stats b { font-size: 44px; } .cs2_photo img { height: 230px !important; } } /* ---------- IMPACT case card as video ---------- */ .lp_video { position: relative; overflow: hidden; } .lp_video .loop_clip { display: block; width: 100%; height: 640px; object-fit: cover; } @media (max-width: 991.98px) { .lp_video .loop_clip { height: 480px; } } /* ---------- THE KIT: action chips ---------- */ .chip_grid .kit_chip { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.14); color: #fff; font-family: var(--headingFont); font-weight: 600; font-size: 15.5px; transition: all .25s; } .chip_grid .kit_chip > i:first-child { color: var(--colorFlame); font-size: 18px; width: 22px; } .chip_grid .kit_chip span { flex: 1; } .chip_grid .kit_chip .kit_go { opacity: .35; transform: translateX(-4px); transition: all .25s; } .chip_grid .kit_chip:hover { background: var(--colorPrimary); border-color: var(--colorPrimary); } .chip_grid .kit_chip:hover .kit_go { opacity: 1; transform: none; } .kit_ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .chip_grid:has(.kit_chip) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .chip_grid .kit_chip span { border: 0; padding: 0; font-size: inherit; display: block; } @media (max-width: 767.98px) { .chip_grid:has(.kit_chip) { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .chip_grid:has(.kit_chip) { grid-template-columns: 1fr; } } /* ---------- Home credentials ---------- */ .cred_home { background: #f6f3ee url(../media/paper.jpg) 0 0 / 480px 480px; } .ch_grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; } .ch_lede { font-size: 17px; line-height: 1.7; color: #3d3c42; margin: 18px 0 30px; max-width: 460px; } .ch_portrait { margin: 0; position: relative; max-width: 420px; } .ch_portrait img { display: block; width: 100%; height: 420px !important; object-fit: cover; object-position: 50% 25% !important; box-shadow: 0 30px 60px rgba(17,16,19,.25); } .ch_portrait figcaption { position: absolute; left: -14px; bottom: 22px; background: var(--colorPrimary); color: #fff; padding: 12px 16px; box-shadow: 0 14px 30px rgba(0,0,0,.25); } .ch_portrait figcaption b { display: block; font-family: var(--headingFont); font-size: 18px; } .ch_portrait figcaption span { font-family: var(--capsFont); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffd9c9; } .ch_badges { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ch_badge { position: relative; background: #fff; padding: 26px 26px 22px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 20px 44px rgba(17,16,19,.08); border-top: 4px solid var(--colorPrimary); } .ch_badge_dark { background: #111013; color: #c9c8cd; border-top-color: var(--colorFlame); } .ch_badge header { display: flex; justify-content: space-between; align-items: center; min-height: 46px; } .ch_badge header > i { font-size: 38px; color: var(--colorFlame); } .ch_mbe { height: 44px !important; width: auto !important; } .ch_status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--capsFont); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #1e8e3e; background: rgba(30,142,62,.1); padding: 5px 10px; border-radius: 20px; } .ch_badge_dark .ch_status { color: #8ef0a8; background: rgba(142,240,168,.12); } .ch_status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: adblink 1.8s infinite; } .ch_badge h3 { font-family: var(--headingFont); font-size: 46px; font-weight: 700; letter-spacing: .02em; margin: 18px 0 4px; color: var(--colorBlack); line-height: 1; } .ch_badge_dark h3 { color: #fff; } .ch_badge p { font-size: 14.5px; margin: 0 0 18px; color: #5d5c62; } .ch_badge_dark p { color: #a8a7ad; } .ch_badge dl { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(17,16,19,.1); } .ch_badge_dark dl { border-top-color: rgba(255,255,255,.12); } .ch_badge dl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(17,16,19,.08); } .ch_badge_dark dl div { border-bottom-color: rgba(255,255,255,.08); } .ch_badge dt { font-family: var(--capsFont); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: #8a898f; } .ch_badge dd { margin: 0; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; color: var(--colorBlack); } .ch_badge_dark dd { color: #fff; } .ch_codes { display: grid; grid-template-columns: 1fr 1.4fr 1fr; margin-top: 18px; background: #fff; box-shadow: 0 20px 44px rgba(17,16,19,.06); } .ch_codes > div { padding: 20px 22px; border-right: 1px solid rgba(17,16,19,.08); } .ch_codes > div:last-child { border-right: 0; } .ch_k { display: block; font-family: var(--capsFont); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--colorPrimary); } .ch_codes b { display: block; font-family: var(--headingFont); font-size: 21px; color: var(--colorBlack); margin: 6px 0 2px; } .ch_codes small { font-size: 13px; color: #77767c; } .ch_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; } .ch_link { font-family: var(--headingFont); font-weight: 600; color: var(--colorBlack); display: inline-flex; gap: 8px; align-items: center; border-bottom: 2px solid var(--colorPrimary); padding-bottom: 2px; } .ch_link:hover { color: var(--colorPrimary); } .cred_home::before, .cred_home::after { display: none !important; } @media (max-width: 1199.98px) { .ch_grid { grid-template-columns: 1fr; } .ch_portrait { max-width: 100%; display: grid; grid-template-columns: 220px 1fr; } .ch_portrait img { height: 260px !important; } .ch_portrait figcaption { position: static; align-self: end; margin-left: -20px; margin-bottom: 20px; } } @media (max-width: 767.98px) { .ch_badges, .ch_codes { grid-template-columns: 1fr; } .ch_codes > div { border-right: 0; border-bottom: 1px solid rgba(17,16,19,.08); } } @media (max-width: 480px) { .ch_portrait { grid-template-columns: 1fr; } .ch_portrait img { height: 300px !important; } .ch_portrait figcaption { margin: -40px 0 0 12px; } } .lp_video .loop_clip { object-position: center 30%; } .post_portrait img[src*="set_0652"] { object-position: 15% 80% !important; } .ch_logos, .cred_logos { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ch_logos .ch_mbe { height: 40px !important; } .cred_logos { margin-bottom: 24px; } .cred_logos img { margin-bottom: 0 !important; max-height: 58px; } .footer_badges { flex-wrap: wrap; } .ch_badge header { align-items: flex-start; gap: 10px; } .ch_logos { flex-wrap: nowrap; gap: 10px; } .ch_logos .ch_mbe { height: 34px !important; } .footer_badges { gap: 10px !important; } .footer_badges img { height: 52px !important; padding: 6px !important; } .footer_badges .srbe_badge { height: 52px; } /* ---------- Work cards: cover link + client site ---------- */ .work_card { position: relative; } .work_card .wc_cover { position: absolute; inset: 0; z-index: 6; } .work_card .wc_site { position: relative; z-index: 7; margin-top: 10px; font-size: 14px; color: #77767c; } .wc_ext { color: var(--colorPrimary); font-weight: 600; margin-right: 12px; text-decoration: underline; text-underline-offset: 3px; } .wc_ext i { font-size: 11px; } .wc_ext:hover { color: var(--colorBlack); } /* case page client strip */ .case_client { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; padding: 18px 22px; background: #f6f3ee; border-left: 4px solid var(--colorPrimary); } .case_client b { font-family: var(--headingFont); font-size: 19px; color: var(--colorBlack); margin-right: auto; } .case_client .ch_k { width: 100%; margin: 0; } .cc_btn { padding: 10px 18px !important; font-size: 13px !important; } .cc_btn i { font-size: 11px; margin-left: 4px; } /* ---------- Home: Who we are v2 ---------- */ .wwa_grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 70px; align-items: center; } .wwa_lede { font-size: 19px; line-height: 1.75; color: #3d3c42; margin: 22px 0 30px; } .wwa_pillars { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 2px solid var(--colorBlack); } .wwa_pillars li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(17,16,19,.12); } .wwa_pillars i { font-size: 26px; color: var(--colorPrimary); padding-top: 3px; } .wwa_pillars h3 { font-size: 19px; margin: 0 0 4px; } .wwa_pillars p { margin: 0; color: #5d5c62; font-size: 15.5px; } .wwa_ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .wwa_media { position: relative; min-height: 600px; } .wwa_main { position: absolute; right: 0; top: 0; width: 78%; height: 470px; margin: 0; overflow: hidden; box-shadow: 0 30px 70px rgba(17,16,19,.25); } .wwa_main img { width: 100%; height: 100% !important; object-fit: cover; object-position: 60% 30% !important; } .wwa_sub { position: absolute; left: 0; bottom: 0; width: 46%; height: 300px; margin: 0; overflow: hidden; border: 8px solid #fff; box-shadow: 0 24px 50px rgba(17,16,19,.25); z-index: 2; } .wwa_sub img { width: 100%; height: 100% !important; object-fit: cover; object-position: 30% 40% !important; } .wwa_quote { position: absolute; right: -10px; bottom: 34px; z-index: 3; width: 290px; margin: 0; background: var(--colorPrimary); color: #fff; padding: 18px 20px 16px; box-shadow: 0 20px 40px rgba(0,0,0,.25); transform: rotate(1.5deg); } .wwa_quote .stars { color: #ffd166; font-size: 12px; display: block; margin-bottom: 6px; } .wwa_quote p { color: #fff; font-size: 16px; line-height: 1.45; margin: 0 0 8px; font-family: var(--headingFont); } .wwa_quote cite { font-style: normal; font-family: var(--capsFont); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ffd9c9; } .wwa_proof { display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 0; margin-top: 70px; border-top: 1px solid rgba(17,16,19,.14); border-bottom: 1px solid rgba(17,16,19,.14); } .wwa_proof > div { padding: 22px 28px 20px 0; margin-right: 28px; border-right: 1px solid rgba(17,16,19,.12); } .wwa_proof > div:last-child { border-right: 0; margin-right: 0; } .wwa_proof b { display: block; font-family: var(--headingFont); font-size: 34px; line-height: 1; color: var(--colorBlack); } .wwa_proof b small { font-size: 20px; color: #f2a900; margin-left: 2px; } .wwa_proof span { display: block; margin-top: 6px; font-family: var(--capsFont); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #77767c; } .wwa_trust p { margin: 6px 0 0; font-size: 15px; color: #3d3c42; line-height: 1.6; } @media (max-width: 1199.98px) { .wwa_proof { grid-template-columns: repeat(4, 1fr); } .wwa_proof > div { margin-right: 0; padding: 18px 12px; } .wwa_trust { grid-column: 1 / -1; border-top: 1px solid rgba(17,16,19,.12); } } @media (max-width: 991.98px) { .wwa_grid { grid-template-columns: 1fr; gap: 50px; } .wwa_media { min-height: 520px; } } @media (max-width: 575.98px) { .wwa_media { min-height: 460px; } .wwa_main { width: 88%; height: 330px; } .wwa_sub { width: 52%; height: 200px; } .wwa_quote { position: relative; right: auto; bottom: auto; width: auto; margin-top: 480px; transform: none; } .wwa_media { min-height: 0; } .wwa_proof { grid-template-columns: 1fr 1fr; } .wwa_proof > div:nth-child(2) { border-right: 0; } } /* ---------- Home: Eight ways bento ---------- */ .ways_lede { font-size: 17px; line-height: 1.7; color: #3d3c42; margin-bottom: 10px; } .ways_grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 290px; gap: 14px; } .way { --mx: 50%; --my: 50%; position: relative; overflow: hidden; background: #111013; color: #fff; display: block; isolation: isolate; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; } .way_live-events { grid-column: span 2; grid-row: span 2; } .way_imag { grid-column: span 2; } .way_media { position: absolute; inset: 0; z-index: -2; } .way_media img, .way_media video { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: grayscale(.85) brightness(.45); transform: scale(1.04); transition: filter .7s, transform 1.2s cubic-bezier(.2,.7,.2,1); } .way::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,16,19,.05) 20%, rgba(17,16,19,.92) 100%); } .way::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(163,18,47,.55), transparent 60%); mix-blend-mode: screen; } .way:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(17,16,19,.35); color: #fff; } .way:hover::after { opacity: 1; } .way:hover .way_media img, .way:hover .way_media video { filter: grayscale(0) brightness(.7); transform: scale(1.1); } .way_no { position: absolute; top: 14px; left: 20px; font-family: var(--headingFont); font-weight: 700; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px rgba(255,255,255,.55); transition: -webkit-text-stroke-color .3s, color .3s; } .way_live-events .way_no { font-size: 130px; } .way:hover .way_no { color: rgba(163,18,47,.0); -webkit-text-stroke-color: #fff; } .way_body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; } .way_icon { font-size: 26px; color: var(--colorFlame); margin-bottom: 10px; display: block; } .way h3 { color: #fff; font-size: 21px; line-height: 1.2; margin: 0 0 6px; } .way_live-events h3 { font-size: 38px; } .way_imag h3 { font-size: 28px; } .way p { color: #c9c8cd; font-size: 14.5px; line-height: 1.55; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s, margin .4s; } .way_live-events p, .way_imag p { max-height: 200px; opacity: 1; } .way_live-events p { font-size: 17px; max-width: 520px; } .way:hover p, .way:focus-visible p { max-height: 160px; opacity: 1; margin-top: 4px; } .way_tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .way_tags span { font-family: var(--capsFont); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 4px 8px 3px; } .way_go { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; transition: all .35s; } .way:hover .way_go { background: var(--colorPrimary); border-color: var(--colorPrimary); transform: rotate(-45deg); } @media (hover: none) { .way p { max-height: 200px; opacity: 1; } .way_media img, .way_media video { filter: grayscale(.3) brightness(.55); } } @media (max-width: 1199.98px) { .ways_grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 270px; } .way_live-events { grid-column: span 2; grid-row: span 2; } .way_imag { grid-column: span 2; } } @media (max-width: 575.98px) { .ways_grid { grid-template-columns: 1fr; grid-auto-rows: 260px; } .way_live-events, .way_imag { grid-column: auto; grid-row: auto; } .way_live-events { grid-row: span 2; } .way_live-events h3 { font-size: 30px; } .way_live-events .way_no { font-size: 90px; } } @media (prefers-reduced-motion: reduce) { .way, .way * { transition: none !important; } } /* ========================================================= INNER-PAGE HEROES (family of the About hero, a different device each) ========================================================= */ .ih { position: relative; overflow: hidden; color: #fff; padding: 170px 0 0; background: linear-gradient(180deg, #800012 0%, #a3122f 55%, #9c102b 100%); } .ih_bg { position: absolute; inset: 0; pointer-events: none; background: url(../media/paper.jpg) center / 640px; mix-blend-mode: multiply; opacity: .38; } .ih .container { position: relative; z-index: 2; } .ih_grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 60px; align-items: center; padding-bottom: 50px; } .ih .section_heading h5 { color: #ffd9c9 !important; } .ih .section_heading h5::before, .ih .section_heading h5::after { filter: invert(1) brightness(2); } .ih .ch_no { color: #fff; } .ih h1.ih_title { font-family: var(--capsFont) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .04em !important; line-height: 1.06 !important; font-size: clamp(34px, 3.9vw, 60px) !important; margin: 10px 0 24px; color: #fff; } .ih h1.ih_title span { font: inherit !important; letter-spacing: inherit !important; } .ih .ih_strip { display: inline; color: #111013; background: #f7f3ee; padding: .02em .2em .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 10px 30px rgba(0,0,0,.22); line-height: 1.5; } .ih_lede p { font-size: 18px; line-height: 1.75; color: #f6dfe4; max-width: 560px; } .ih_lede .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .ih_lede .ad_btn:not(.ghost) { background: #fff !important; border-color: #fff !important; color: var(--colorBlack) !important; } .ih_lede .ad_btn.ghost { border-color: rgba(255,255,255,.7) !important; color: #fff !important; } .ih_lede .rv_mini, .ih_lede .response_promise p, .ih_lede .response_promise i { color: #fff !important; } .ih_rip { margin-top: 10px; margin-bottom: -2px; } .ih_media { position: relative; } .ih_media img { display: block; width: 100%; } .pi_rest { margin-top: 30px !important; } .ih .kb_crumbs { color: #ffd9c9; margin-bottom: 20px; } .ih .kb_crumbs a { color: #fff; } /* Services: charcoal, fanned contact prints */ .ih_svc { background: linear-gradient(180deg, #19171c, #111013); } .ih_svc .ih_bg { mix-blend-mode: soft-light; opacity: .22; } .ih_svc .ih_strip { background: var(--colorPrimary); color: #fff; } .ih_svc .section_heading h5 { color: var(--colorFlame) !important; } .ih_svc .ih_lede p { color: #c9c8cd; } .ih_svc .ih_lede .ad_btn:not(.ghost) { background: var(--colorPrimary) !important; border-color: var(--colorPrimary) !important; color: #fff !important; } .ih_fan { position: relative; height: 440px; } .ih_card { position: absolute; width: 56%; margin: 0; background: #f7f3ee; padding: 10px 10px 14px; box-shadow: 0 30px 60px rgba(0,0,0,.5); transition: transform .6s cubic-bezier(.2,.7,.2,1); } .ih_card .ih_ph img { height: 230px !important; object-fit: cover; } .ih_card figcaption { color: #3d3c42; font-size: 13px; margin-top: 8px; } .ih_card figcaption b { color: var(--colorPrimary); font-family: var(--capsFont); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; margin-right: 8px; } .ih_card.c0 { left: 0; top: 40px; transform: rotate(-7deg); } .ih_card.c1 { left: 22%; top: 0; transform: rotate(1deg); z-index: 2; } .ih_card.c2 { right: 0; top: 70px; transform: rotate(8deg); z-index: 3; } .ih_fan:hover .c0 { transform: rotate(-11deg) translateX(-16px); } .ih_fan:hover .c2 { transform: rotate(12deg) translateX(16px); } /* Work: film contact sheet */ .ih_sheet { position: relative; background: #111013; padding: 26px 18px 20px; transform: rotate(2deg); box-shadow: 0 40px 80px rgba(40,0,8,.5); } .ih_sheet::before, .ih_sheet::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle, #f7f3ee 0 3px, transparent 3.5px) 0 0 / 18px 12px repeat-x; opacity: .8; } .ih_sheet::before { top: 6px; } .ih_sheet::after { bottom: 6px; } .ih_strip_film { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ih_frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; outline: 1px solid rgba(255,255,255,.1); } .ih_frame img { height: 100% !important; object-fit: cover; filter: saturate(.9); transition: transform .8s, filter .4s; } .ih_frame span { position: absolute; left: 6px; bottom: 4px; font: 400 10px/1 var(--capsFont); letter-spacing: .12em; color: #f2a900; } .ih_frame:hover img { transform: scale(1.08); filter: saturate(1.15); } .ih_sheet_lbl { display: block; margin-top: 14px; font: 400 11px/1 var(--capsFont); letter-spacing: .2em; text-transform: uppercase; color: #ffd9c9; text-align: right; } /* Gear: paper with blueprint grid */ .ih_gear { background: #f1efe9; color: var(--colorBlack); } .ih_gear .ih_bg { background: linear-gradient(rgba(40,80,140,.10) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(40,80,140,.10) 1px, transparent 1px) 0 0 / 28px 28px, url(../media/paper.jpg) center / 480px; mix-blend-mode: normal; opacity: 1; } .ih_gear .section_heading h5 { color: var(--colorPrimary) !important; } .ih_gear .section_heading h5::before, .ih_gear .section_heading h5::after { filter: none; } .ih_gear h1.ih_title { color: var(--colorBlack); } .ih_gear .ih_strip { background: var(--colorPrimary); color: #fff; } .ih_gear .ih_lede p { color: #3d3c42; } .ih_gear .ch_no { color: var(--colorPrimary); } .ih_gear .ih_lede .ad_btn:not(.ghost) { background: var(--colorPrimary) !important; border-color: var(--colorPrimary) !important; color: #fff !important; } .ih_gear .ih_lede .ad_btn.ghost { border-color: var(--colorBlack) !important; color: var(--colorBlack) !important; } .ih_print { position: relative; margin: 0; padding: 16px 16px 20px; background: #fff; transform: rotate(-2deg); box-shadow: 0 30px 70px rgba(17,16,19,.25); } .ih_print figcaption { color: #3d3c42; font-size: 14px; margin-top: 12px; max-width: 60%; } .ih_print .ah_tape { top: -12px; left: 40%; } .ih_tag { position: absolute; right: -18px; bottom: -26px; background: #111013; color: #fff; padding: 14px 16px; display: grid; grid-template-columns: auto auto; gap: 2px 12px; align-items: baseline; transform: rotate(4deg); box-shadow: 0 20px 40px rgba(0,0,0,.3); } .ih_tag b { font-family: var(--headingFont); font-size: 22px; } .ih_tag small { font: 400 10.5px/1 var(--capsFont); letter-spacing: .12em; text-transform: uppercase; color: #a8a7ad; } /* LED: black with pixel dots */ .ih_led { background: #0b0a0d; } .ih_led .ih_bg { background: radial-gradient(circle, rgba(242,107,42,.22) 1px, transparent 1.6px) 0 0 / 9px 9px; mix-blend-mode: normal; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); } .ih_led .ih_strip { background: linear-gradient(90deg, #f26b2a, #a3122f); color: #fff; box-shadow: 0 0 40px rgba(242,107,42,.45); } .ih_led .ih_lede p { color: #c9c8cd; } .ih_led .ih_lede .ad_btn:not(.ghost) { background: var(--colorPrimary) !important; border-color: var(--colorPrimary) !important; color: #fff !important; } figure.ih_led { margin: 0; position: relative; background: none; } figure.ih_led .ih_ph { box-shadow: 0 0 80px rgba(242,107,42,.25), 0 30px 70px rgba(0,0,0,.6); } .ih_nits { position: absolute; left: -24px; bottom: 40px; background: var(--colorPrimary); padding: 14px 18px; box-shadow: 0 20px 40px rgba(0,0,0,.4); } .ih_nits b { display: block; font-family: var(--headingFont); font-size: 38px; line-height: 1; } .ih_nits span { font: 400 11px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: #ffd9c9; } .ih_dims { position: absolute; right: 0; top: -14px; font: 400 12px/1 "SFMono-Regular", Menlo, monospace; letter-spacing: .08em; background: #111013; border: 1px solid rgba(255,255,255,.2); padding: 7px 10px; } /* Contact: crimson to flame, call sheet */ .ih_contact { background: linear-gradient(135deg, #800012 0%, #a3122f 50%, #d94a22 120%); } .ih_callsheet { position: relative; background: #f7f3ee; color: var(--colorBlack); padding: 24px 26px 26px; transform: rotate(-1.5deg); box-shadow: 0 40px 80px rgba(40,0,8,.45); max-width: 520px; margin-left: auto; } .ih_callsheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-55deg, #111013 0 18px, #f7f3ee 18px 36px); } .cs_head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; border-bottom: 2px solid var(--colorBlack); padding-bottom: 8px; } .cs_no { font: 400 12px/1 "SFMono-Regular", Menlo, monospace; } .ih_callsheet dl { margin: 0; padding-right: 150px; } .ih_callsheet dl div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(17,16,19,.2); } .ih_callsheet dt { font: 400 11px/1.6 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: #8a898f; } .ih_callsheet dd { margin: 0; font-family: var(--headingFont); font-weight: 600; font-size: 15px; } .ih_callsheet dd a { color: var(--colorBlack); } .cs_pol { position: absolute; right: 22px; top: 62px; width: 130px; margin: 0; background: #fff; padding: 6px 6px 18px; transform: rotate(5deg); box-shadow: 0 12px 26px rgba(0,0,0,.25); } .cs_pol img { height: 140px !important; object-fit: cover; } .cs_stamp { position: absolute; right: 26px; bottom: 22px; border: 2px solid var(--colorPrimary); color: var(--colorPrimary); font: 400 12px/1.2 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; padding: 8px 10px; transform: rotate(-10deg); text-align: center; opacity: .85; } /* Live: monitor with ON AIR */ .ih_live { background: linear-gradient(180deg, #5c000f, #800012 60%, #6b0012); } .ih_live .ih_bg { background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px), url(../media/paper.jpg) center / 640px; mix-blend-mode: normal; opacity: 1; } .ih_monitor { max-width: 560px; margin-left: auto; } .mon_screen { position: relative; border: 14px solid #111013; border-radius: 6px; box-shadow: 0 40px 80px rgba(0,0,0,.5); overflow: hidden; aspect-ratio: 16 / 9; } .mon_screen img { height: 100% !important; object-fit: cover; filter: brightness(.8); } .mon_onair { position: absolute; left: 14px; top: 14px; display: inline-flex; gap: 8px; align-items: center; background: #ff3b30; color: #fff; font: 400 12px/1 var(--capsFont); letter-spacing: .2em; padding: 8px 12px; } .mon_onair i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: adblink 1.4s infinite; } .mon_tc { position: absolute; right: 14px; bottom: 12px; font: 400 13px/1 "SFMono-Regular", Menlo, monospace; background: rgba(0,0,0,.6); padding: 6px 8px; } .mon_base { width: 34%; height: 16px; margin: 0 auto; background: linear-gradient(#222, #111); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); } /* Knowledge base + guides: lined notebook */ .ih_kb, .ih_guide { background: #f7f4ec; color: var(--colorBlack); } .ih_kb .ih_bg, .ih_guide .ih_bg { background: linear-gradient(90deg, transparent 6%, rgba(196,40,60,.45) 6%, rgba(196,40,60,.45) calc(6% + 2px), transparent calc(6% + 2px)), repeating-linear-gradient(180deg, transparent 0 35px, rgba(70,110,170,.22) 35px 36px), url(../media/paper.jpg) center / 480px; mix-blend-mode: normal; opacity: 1; } .ih_kb h1.ih_title, .ih_guide h1.ih_title { color: var(--colorBlack); } .ih_kb .ih_strip, .ih_guide .ih_strip { background: var(--colorPrimary); color: #fff; } .ih_kb .section_heading h5, .ih_guide .section_heading h5 { color: var(--colorPrimary) !important; } .ih_kb .section_heading h5::before, .ih_kb .section_heading h5::after, .ih_guide .section_heading h5::before, .ih_guide .section_heading h5::after { filter: none; } .ih_kb .ih_lede p, .ih_guide .ih_lede p { color: #3d3c42; } .ih_kb .ch_no, .ih_guide .ch_no { color: var(--colorPrimary); } .ih_guide .kb_crumbs { color: #77767c; } .ih_guide .kb_crumbs a { color: var(--colorPrimary); } .ih_index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(-1.5deg); } .ih_index .ix { background: #fff; border-top: 4px solid var(--colorPrimary); padding: 14px 14px 16px; font: 400 11px/1 var(--capsFont); letter-spacing: .14em; color: #8a898f; box-shadow: 0 12px 28px rgba(17,16,19,.12); transition: transform .3s; } .ih_index .ix:nth-child(3n+2) { transform: translateY(14px); } .ih_index .ix:nth-child(even) { border-top-color: #111013; } .ih_index .ix b { display: block; margin-top: 8px; font: 600 15px/1.25 var(--headingFont); letter-spacing: 0; color: var(--colorBlack); } .ih_index .ix:hover { transform: translateY(-4px) rotate(-1deg); } .ih_guide .ih_media .ih_guide { } div.ih_guide { position: relative; background: #111013; color: #fff; padding: 34px 30px 30px; max-width: 420px; margin-left: auto; transform: rotate(2deg); box-shadow: 0 30px 60px rgba(17,16,19,.3); } div.ih_guide i { font-size: 64px; color: var(--colorFlame); } div.ih_guide span { display: block; margin-top: 18px; font: 400 11px/1 var(--capsFont); letter-spacing: .2em; text-transform: uppercase; color: #f4b9a0; } div.ih_guide b { display: block; margin: 8px 0; font-family: var(--capsFont); font-weight: 400; text-transform: uppercase; font-size: 28px; letter-spacing: .04em; line-height: 1.15; } div.ih_guide small { color: #a8a7ad; font-size: 13px; } /* Case studies: shorter band, client stamp, torn hero pulled up */ .ih_case { padding-top: 160px; } .ih_case .ih_grid { padding-bottom: 100px; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .ih_stamp { border: 2px solid rgba(255,255,255,.8); padding: 18px 20px; transform: rotate(-4deg); max-width: 300px; margin-left: auto; text-align: center; } .ih_stamp span { display: block; font: 400 11px/1 var(--capsFont); letter-spacing: .22em; text-transform: uppercase; color: #ffd9c9; } .ih_stamp b { display: block; margin: 10px 0 6px; font-family: var(--capsFont); font-weight: 400; text-transform: uppercase; font-size: 24px; letter-spacing: .06em; line-height: 1.15; } .ih_stamp small { font-size: 13px; color: #f6dfe4; } .pi_rest_case { margin-top: -150px !important; position: relative; z-index: 4; } .pi_rest_case .rf_hero, .pi_rest_case .case_hero_video { margin-top: 0 !important; } @media (max-width: 1199.98px) { .ih_fan { height: 380px; } .ih_card .ih_ph img { height: 190px !important; } } @media (max-width: 991.98px) { .ih { padding-top: 130px; } .ih_grid, .ih_case .ih_grid { grid-template-columns: 1fr; gap: 50px; } .ih_callsheet, .ih_monitor, div.ih_guide, .ih_stamp { margin-left: 0; } .ih_case .ih_media { display: none; } .pi_rest_case { margin-top: -110px !important; } } @media (max-width: 575.98px) { .ih { padding-top: 110px; } .ih_fan { height: 300px; } .ih_card { width: 64%; } .ih_card .ih_ph img { height: 150px !important; } .ih_strip_film { grid-template-columns: repeat(2, 1fr); } .ih_strip_film .ih_frame:nth-child(n+5) { display: none; } .ih_callsheet dl { padding-right: 0; } .cs_pol { display: none; } .cs_stamp { position: static; display: inline-block; margin-top: 14px; } .ih_index { grid-template-columns: repeat(2, 1fr); } .ih_index .ix:nth-child(n+7) { display: none; } .ih_tag { right: -6px; } .ih_nits { left: -6px; } .ih_print figcaption { max-width: 100%; padding-bottom: 50px; } } .ih_live .ih_bg { background: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px), url(../media/paper.jpg) center / 640px; mix-blend-mode: multiply; opacity: .45; } .ih_nits, .ih_dims { z-index: 5; } .ih_case h1.ih_title { font-size: clamp(30px, 3vw, 44px) !important; } .ih_led .ih_ph img { object-position: center 60%; } /* ===== Homepage hero v2: full-bleed reel ===== */ .banner_stage.hero_v2 { background: #111013 !important; min-height: min(100svh, 940px); padding: 150px 0 120px; display: flex; align-items: flex-end; color: #fff; } .hero_v2 .hv_video, .hero_v2 .hv_shade { position: absolute; inset: 0; z-index: 0; } .hero_v2 .hv_video video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); } .hero_v2 .hv_shade { z-index: 1; background: linear-gradient(90deg, rgba(17,16,19,.92) 0%, rgba(17,16,19,.62) 46%, rgba(17,16,19,.15) 100%), linear-gradient(0deg, rgba(128,0,18,.75) 0%, rgba(17,16,19,0) 42%), linear-gradient(180deg, rgba(17,16,19,.7) 0%, rgba(17,16,19,0) 30%); } .hero_v2 .hero_lights { z-index: 1; mix-blend-mode: screen; opacity: .8; } .hero_v2 .hero_lights .beam::before { background: linear-gradient(180deg, hsla(var(--h),90%,58%,.28), transparent 75%) !important; } .hero_v2 .hv_frame { position: absolute; inset: 104px 28px 70px; z-index: 2; pointer-events: none; } .hero_v2 .hv_frame i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255,255,255,.55); } .hero_v2 .hv_frame .tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; } .hero_v2 .hv_frame .tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; } .hero_v2 .hv_frame .bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; } .hero_v2 .hv_frame .br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; } .hero_v2 .hv_inner { position: relative; z-index: 3; width: 100%; } .hv_top { display: flex; justify-content: space-between; gap: 16px; font-family: var(--capsFont, "Didact Gothic"), sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: rgba(255,255,255,.8); margin-bottom: 34px; } .hv_rec { display: inline-flex; align-items: center; gap: 10px; } .hv_rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff2b3a; box-shadow: 0 0 0 4px rgba(255,43,58,.25); animation: hvRec 1.4s infinite; } @keyframes hvRec { 50% { opacity: .25; } } .hv_main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; } .hv_title { font-family: var(--headingFont, Jost), sans-serif; text-transform: uppercase; font-weight: 700; color: #fff; font-size: clamp(46px, 7.6vw, 118px); line-height: .95; letter-spacing: -.01em; margin: 0 0 26px; } .hv_title > span:first-child { display: block; } .hv_title .ih_strip { display: inline; color: #fff; background: var(--colorPrimary, #a3122f); padding: .02em .18em .08em; line-height: 1.22; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 18px 50px rgba(163,18,47,.45); } .hv_lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: rgba(255,255,255,.86); max-width: 560px; margin-bottom: 30px; } .hv_ctas { display: flex; flex-wrap: wrap; gap: 14px; } .hv_ctas .ad_btn.ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.7); color: #fff; cursor: pointer; } .hv_ctas .ad_btn.ghost:hover { background: #fff; color: #111013; } .hv_card { position: relative; background: rgba(17,16,19,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-left: 4px solid var(--colorPrimary, #a3122f); padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; } .hv_card .ch_k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #f26b2a; } .hv_card b { font-family: var(--headingFont, Jost), sans-serif; font-size: 22px; text-transform: uppercase; } .hv_card small { color: rgba(255,255,255,.7); font-size: 13px; } .hv_card a { margin-top: 10px; color: #fff; font-weight: 600; font-size: 14px; } .hv_card a:hover { color: #f26b2a; } .hv_proof { list-style: none; padding: 26px 0 0; margin: 46px 0 0; border-top: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .hv_proof li { display: flex; flex-direction: column; gap: 2px; } .hv_proof b { font-family: var(--headingFont, Jost), sans-serif; font-size: 24px; color: #fff; } .hv_proof b i { color: #f2b42a; font-size: 16px; } .hv_proof span { font-size: 13px; color: rgba(255,255,255,.7); } .hero_v2 .hv_tear { position: absolute; left: 0; bottom: -1px; width: 100%; height: auto; z-index: 4; } @media (max-width: 991.98px) { .banner_stage.hero_v2 { padding: 120px 0 90px; min-height: 0; } .hv_main { grid-template-columns: 1fr; gap: 28px; } .hv_card { max-width: 380px; } .hv_proof { grid-template-columns: repeat(2, 1fr); } .hero_v2 .hv_frame { inset: 90px 12px 50px; } .hv_top .hv_loc { display: none; } .hero_v2 .hv_shade { background: linear-gradient(180deg, rgba(17,16,19,.75) 0%, rgba(17,16,19,.7) 50%, rgba(128,0,18,.85) 100%); } } @media (prefers-reduced-motion: reduce) { .hv_rec i { animation: none; } } /* ===== More Proof: film reel ===== */ .proof_reel { background: #111013; color: #fff; padding: 120px 0 110px; position: relative; overflow: hidden; } .proof_reel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 85% 0%, rgba(163,18,47,.35), transparent 70%); pointer-events: none; } .proof_reel .section_heading h2 { color: #fff; } .proof_reel .section_heading h5 { color: #f26b2a; } .proof_reel .mb_40 { margin-bottom: 40px; } .pr_lede { color: rgba(255,255,255,.72); margin-bottom: 18px; } .pr_nav { display: flex; align-items: center; gap: 10px; } .pr_btn { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff; transition: .25s; } .pr_btn:hover { background: var(--colorPrimary, #a3122f); border-color: var(--colorPrimary, #a3122f); } .pr_nav .led_inline { margin-left: 12px; color: #fff; font-weight: 600; } .pr_nav .led_inline:hover { color: #f26b2a; } .pr_film { position: relative; background: #0a090b; padding: 34px 0; } .pr_film::before, .pr_film::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: radial-gradient(circle, transparent 0, transparent 0) ; background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.85) 14px 30px, transparent 30px 44px); -webkit-mask: linear-gradient(#000,#000); opacity: .16; } .pr_film::before { top: 10px; } .pr_film::after { bottom: 10px; } .pr_track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(16px, calc((100vw - 1290px) / 2 + 12px)); scrollbar-width: none; scroll-behavior: smooth; outline: none; } .pr_track::-webkit-scrollbar { display: none; } .pr_card { flex: 0 0 clamp(270px, 28vw, 380px); scroll-snap-align: start; position: relative; display: flex; flex-direction: column; color: #fff; background: #1b191d; padding: 0 0 22px; transition: transform .35s, background .35s; } .pr_card:hover { transform: translateY(-6px); background: #241f25; color: #fff; } .pr_card .rip_frame { margin-bottom: 18px; } .pr_card .pr_ph { aspect-ratio: 4 / 3; overflow: hidden; } .pr_card .pr_ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; filter: grayscale(.25); } .pr_card:hover .pr_ph img { transform: scale(1.06); filter: none; } .pr_card .rf_fiber { opacity: .25; } .pr_no { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--headingFont, Jost), sans-serif; font-weight: 700; font-size: 26px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); } .pr_no small { font-size: 13px; opacity: .7; margin-left: 2px; } .pr_tag, .pr_card h3, .pr_card p, .pr_go { padding: 0 22px; } .pr_tag { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #f26b2a; margin-bottom: 8px; } .pr_card h3 { font-family: var(--headingFont, Jost), sans-serif; text-transform: uppercase; font-size: 22px; color: #fff; margin: 0 0 10px; } .pr_card p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.7); margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pr_go { margin-top: auto; font-weight: 600; font-size: 14px; color: #fff; } .pr_card:hover .pr_go { color: #f26b2a; } @media (max-width: 767.98px) { .proof_reel { padding: 80px 0; } .pr_card { flex-basis: 82vw; } } /* hero v2 fixes */ .hero_v2 .hv_proof > div { display: flex; flex-direction: column; gap: 2px; } .hero_v2 h1.hv_title, .hero_v2 h1.hv_title span { font-size: clamp(44px, 6.3vw, 100px) !important; line-height: 1 !important; color: #fff !important; font-weight: 700 !important; letter-spacing: -.01em; text-transform: uppercase; } .hero_v2 h1.hv_title .ih_strip { line-height: 1.3 !important; } .hero_v2 .hv_ctas .ad_btn.ghost, .hero_v2 .hv_ctas .ad_btn.ghost * { color: #fff !important; } .hero_v2 .hv_ctas .ad_btn.ghost:hover, .hero_v2 .hv_ctas .ad_btn.ghost:hover * { color: #111013 !important; } .banner_stage.hero_v2 { padding-bottom: 170px; } .pr_track { scroll-padding-left: max(16px, calc((100vw - 1290px) / 2 + 12px)); } @media (max-width: 991.98px) { .banner_stage.hero_v2 { padding-bottom: 110px; } } /* ===== Gear page rental guide (avatar assistant) ===== */ .gear_guide { position: fixed; left: 22px; bottom: 22px; z-index: 990; display: flex; align-items: flex-end; gap: 12px; font-family: var(--bodyFont, inherit); pointer-events: none; transition: opacity .3s, transform .3s; } .gear_guide > * { pointer-events: auto; } .gear_guide.hide { opacity: 0; transform: translateY(20px); pointer-events: none; } .gear_guide.hide > * { pointer-events: none; } .gg_face { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 0; border: 3px solid #fff; background: #111013; box-shadow: 0 0 0 3px var(--colorPrimary, #a3122f), 0 14px 34px rgba(17,16,19,.35); cursor: pointer; flex: none; transition: transform .25s; } .gg_face:hover { transform: translateY(-3px); } .gg_face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .gg_dot { position: absolute; right: 1px; bottom: 3px; width: 14px; height: 14px; border-radius: 50%; background: #2fbf71; border: 2px solid #fff; } .gg_badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #f26b2a; color: #fff; font: 700 12px/22px var(--headingFont, Jost), sans-serif; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.25); } .gg_badge.cart { background: var(--colorPrimary, #a3122f); } .gear_guide.talking .gg_face::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(242,107,42,.75); animation: ggPulse 1s ease-out infinite; } @keyframes ggPulse { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.2); opacity: 0; } } .gg_panel { position: relative; width: min(340px, calc(100vw - 110px)); background: #fffdf9 url(../media/paper.jpg) center / 600px; color: #111013; border-radius: 4px 18px 18px 18px; box-shadow: 0 24px 60px rgba(17,16,19,.32); padding: 16px 16px 12px; border-top: 4px solid var(--colorPrimary, #a3122f); animation: ggIn .35s cubic-bezier(.2,.8,.2,1); } .gg_panel[hidden] { display: none; } @keyframes ggIn { from { opacity: 0; transform: translate(-10px, 10px) scale(.96); } to { opacity: 1; transform: none; } } .gg_head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .gg_head b { display: block; font: 700 17px/1.1 var(--headingFont, Jost), sans-serif; text-transform: uppercase; letter-spacing: .02em; } .gg_head small { font-size: 12px; color: #6b6870; } .gg_min { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(17,16,19,.07); color: #111013; flex: none; } .gg_min:hover { background: rgba(17,16,19,.15); } .gg_steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 12px; padding: 0; counter-reset: none; } .gg_steps li { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8a878f; padding-top: 6px; border-top: 3px solid rgba(17,16,19,.12); } .gg_steps li i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; background: rgba(17,16,19,.1); color: #6b6870; } .gg_steps li.done { color: #111013; border-color: #2fbf71; } .gg_steps li.done i { background: #2fbf71; color: #fff; } .gg_steps li.now { color: var(--colorPrimary, #a3122f); border-color: var(--colorPrimary, #a3122f); font-weight: 700; } .gg_steps li.now i { background: var(--colorPrimary, #a3122f); color: #fff; } .gg_msg { min-height: 44px; } .gg_text { margin: 0; font-size: 15px; line-height: 1.5; color: #111013; } .gg_typing { display: none; gap: 4px; padding: 10px 0; } .gg_typing.on { display: inline-flex; } .gg_typing i { width: 7px; height: 7px; border-radius: 50%; background: #a3122f; animation: ggDot 1s infinite; } .gg_typing i:nth-child(2) { animation-delay: .15s; } .gg_typing i:nth-child(3) { animation-delay: .3s; } @keyframes ggDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .gg_chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .gg_chip { border: 1.5px solid #111013; background: transparent; color: #111013; border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: left; transition: .2s; cursor: pointer; } .gg_chip:hover { background: #111013; color: #fff; } .gg_chip.primary { background: var(--colorPrimary, #a3122f); border-color: var(--colorPrimary, #a3122f); color: #fff; } .gg_chip.primary:hover { background: #800012; border-color: #800012; } .gg_chip.ghost { border-style: dashed; } .gg_cart { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; background: #111013; color: #fff; border-radius: 10px; font-size: 13px; } .gg_cart[hidden] { display: none; } .gg_cart_btn { border: 0; background: none; color: #f26b2a; font-weight: 700; font-size: 13px; white-space: nowrap; padding: 0; } .gg_fine { margin: 10px 0 0; font-size: 11px; color: #8a878f; } .gg_fine a { color: #111013; text-decoration: underline; } .gg_flash { outline: 3px solid #f26b2a; outline-offset: 6px; border-radius: 6px; transition: outline-color .4s; } @media (max-width: 991.98px) { .gear_guide { left: 12px; bottom: 66px; gap: 8px; } .gg_face { width: 54px; height: 54px; } .gg_panel { position: fixed; left: 12px; right: 12px; bottom: 132px; width: auto; } } @media print { .gear_guide { display: none !important; } } @media (prefers-reduced-motion: reduce) { .gg_panel, .gear_guide.talking .gg_face::after, .gg_typing i { animation: none !important; } } /* hero v2 declutter + single tear */ .hero_v2 .hero_lights { display: none !important; } .hero_v2 .hv_main { grid-template-columns: minmax(0, 860px); } .hero_v2 .hv_top { margin-bottom: 26px; } .hero_v2 .hv_shade { background: linear-gradient(90deg, rgba(17,16,19,.88) 0%, rgba(17,16,19,.55) 50%, rgba(17,16,19,.12) 100%), linear-gradient(0deg, rgba(17,16,19,.8) 0%, rgba(17,16,19,0) 45%); } .hv_trust { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 40px 0 0; font-size: 14px; color: rgba(255,255,255,.75); } .hv_trust span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #f26b2a; margin: 0 26px 3px -15px; vertical-align: middle; } .hv_trust i { color: #f2b42a; } .banner_stage.hero_v2 { padding-bottom: 150px; } .hero_v2 + .slate .slate_rip_t, .hero_v2 ~ .slate:first-of-type .slate_rip_t { position: absolute; left: 0; width: 100%; bottom: calc(100% - 2px); margin: 0; background: transparent !important; z-index: 4; } @media (max-width: 991.98px) { .banner_stage.hero_v2 { padding-bottom: 110px; } .hv_trust { margin-top: 28px; font-size: 13px; } } /* ===== Homepage LED wall: erected on pipe & drape (visualization) ===== */ .led_promo_inner:has(.led_scene) { grid-template-columns: 1fr; gap: 44px; } .led_promo_inner:has(.led_scene) .led_promo_text { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px 56px; align-items: start; order: 2; } .led_promo_inner:has(.led_scene) .led_promo_text > .led_new, .led_promo_inner:has(.led_scene) .led_promo_text > h2 { grid-column: 1; } .led_promo_inner:has(.led_scene) .led_promo_text > p { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; } .led_promo_inner:has(.led_scene) .led_promo_text > .led_specs { grid-column: 1; } .led_promo_inner:has(.led_scene) .led_promo_text > .d-flex { grid-column: 2; align-self: end; } .led_promo h2 span { color: #f26b2a; display: block; } .led_scene { order: 1; position: relative; height: auto !important; overflow: visible !important; display: block; } .led_scene img { transition: none; } .led_scene:hover img { transform: none; } .ls_room { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; border-radius: 4px; isolation: isolate; background: radial-gradient(120% 80% at 50% 0%, #1a1418 0%, #0a090b 55%, #050405 100%); box-shadow: 0 40px 90px rgba(0,0,0,.55); } .ls_drape, .ls_pipes, .ls_uplights { position: absolute; left: 3%; right: 3%; top: 9%; bottom: 25%; } .ls_drape { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.6) 100%), repeating-linear-gradient(90deg, #08070a 0 .9%, #19171c 1.5%, #26232a 1.75%, #141217 2.3%, #08070a 3%); } .ls_uplights { mix-blend-mode: screen; pointer-events: none; } .ls_uplights .ul { position: absolute; bottom: -6%; width: 15%; height: 96%; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 100%, var(--c) 0%, transparent 72%); opacity: .55; filter: blur(4px); animation: lsUl 7s ease-in-out infinite alternate; } .ls_uplights .ul1 { left: 4%; --c: rgba(226,40,72,.95); } .ls_uplights .ul2 { left: 15%; --c: rgba(242,107,42,.9); animation-delay: -2s; } .ls_uplights .ul3 { left: 26%; --c: rgba(226,40,72,.9); animation-delay: -4s; } .ls_uplights .ul4 { left: 37%; --c: rgba(242,150,60,.6); } .ls_uplights .ul5 { left: 63%; --c: rgba(242,150,60,.6); animation-delay: -1s; } .ls_uplights .ul6 { left: 74%; --c: rgba(226,40,72,.9); animation-delay: -3s; } .ls_uplights .ul7 { left: 85%; --c: rgba(242,107,42,.9); animation-delay: -5s; } .ls_uplights .ul8 { left: 96%; --c: rgba(226,40,72,.95); } @keyframes lsUl { from { opacity: .4; } to { opacity: .7; } } .ls_pipes i { position: absolute; background: linear-gradient(90deg, #2c2a30, #8d8a92 45%, #3a373e); } .ls_pipes .crossbar { left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(180deg, #4a474f, #a19ea6 45%, #2c2a30); } .ls_pipes .u { top: 0; bottom: -2%; width: 5px; margin-left: -2.5px; } .ls_pipes .u::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 34px; height: 6px; transform: translateX(-50%); background: #18161a; border-radius: 2px; } .ls_haze { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; } .ls_haze .hb { position: absolute; top: -10%; width: 9%; height: 85%; transform-origin: 50% 0; filter: blur(14px); background: linear-gradient(180deg, rgba(255,210,180,.22), rgba(255,140,90,0) 85%); animation: lsBeam 9s ease-in-out infinite alternate; } .ls_haze .hb1 { left: 14%; transform: rotate(-18deg); } .ls_haze .hb2 { left: 32%; transform: rotate(-6deg); animation-delay: -3s; } .ls_haze .hb3 { left: 60%; transform: rotate(8deg); animation-delay: -5s; } .ls_haze .hb4 { left: 78%; transform: rotate(19deg); animation-delay: -7s; } @keyframes lsBeam { from { opacity: .5; } to { opacity: 1; } } .ls_wall_wrap { position: absolute; left: 24%; width: 52%; top: 12.5%; z-index: 2; } .ls_glow { position: absolute; inset: -14% -10%; background: radial-gradient(closest-side, rgba(226,40,72,.55), rgba(242,107,42,.25) 55%, transparent 80%); filter: blur(30px); z-index: -1; animation: lsGlow 12s infinite; } @keyframes lsGlow { 0%, 30% { opacity: 1; } 34%, 63% { opacity: .75; } 67%, 100% { opacity: .55; } } .ls_wall { position: relative; aspect-ratio: 16 / 10; background: #050405; border: 3px solid #0d0c0f; box-shadow: 0 0 0 1px #2a272e, 0 24px 60px rgba(0,0,0,.7); overflow: hidden; } .ls_content, .ls_slide { position: absolute; inset: 0; } .ls_slide { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; opacity: 0; animation: lsSlide 12s infinite; } .ls_slide.s1 { animation-delay: 0s; background: radial-gradient(90% 90% at 30% 20%, #e2324f 0%, #a3122f 40%, #3d0612 100%); } .ls_slide.s2 { animation-delay: 4s; background: radial-gradient(70% 70% at 50% 45%, #2a1016 0%, #0a0709 75%); } .ls_slide.s3 { animation-delay: 8s; background: #000; } @keyframes lsSlide { 0% { opacity: 0; } 3%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } } .ls_slide .ls_k { font-family: var(--capsFont, "Didact Gothic"), sans-serif; font-size: clamp(8px, 1.1vw, 15px); letter-spacing: .35em; text-transform: uppercase; opacity: .85; } .ls_slide b { font-family: var(--headingFont, Jost), sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 5vw, 64px); line-height: 1; margin: .15em 0 .25em; text-shadow: 0 0 30px rgba(255,255,255,.35); } .ls_slide small { font-size: clamp(7px, .95vw, 13px); letter-spacing: .2em; text-transform: uppercase; opacity: .85; } .ls_slide.s2 img { width: 62%; height: auto; filter: drop-shadow(0 0 22px rgba(242,107,42,.45)); } .ls_slide.s2 small { margin-top: 4%; color: #f6c7b4; } .ls_slide.s3 video { width: 100%; height: 100%; object-fit: cover; } .ls_bug { position: absolute; right: 3%; top: 4%; width: 14%; } .ls_bug img { width: 100%; height: auto; } .ls_live { position: absolute; left: 3%; top: 5%; font: 700 clamp(6px, .8vw, 11px)/1 var(--headingFont, Jost), sans-serif; letter-spacing: .15em; background: #e2324f; padding: .45em .7em; display: inline-flex; gap: .45em; align-items: center; } .ls_live i { width: .6em; height: .6em; border-radius: 50%; background: #fff; } .ls_grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.55) 1px, transparent 1px) 0 0 / 10% 100%, linear-gradient(0deg, rgba(0,0,0,.55) 1px, transparent 1px) 0 0 / 100% 16.6667%, radial-gradient(circle, transparent 0 .6px, rgba(0,0,0,.28) .9px) 0 0 / 3px 3px; } .ls_sheen { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 35%); pointer-events: none; } .ls_stands { position: relative; height: 22px; } .ls_stands i { position: absolute; top: 0; width: 6px; height: 100%; background: linear-gradient(90deg, #17151a, #45424a, #17151a); } .ls_stands i:nth-child(1) { left: 12%; } .ls_stands i:nth-child(2) { left: 50%; } .ls_stands i:nth-child(3) { left: 88%; } .ls_stage { position: absolute; left: 12%; right: 12%; bottom: 20%; height: 7%; z-index: 2; background: linear-gradient(180deg, #1c1a1f 0%, #0c0b0e 30%, #060507 100%); border-top: 2px solid rgba(242,107,42,.35); box-shadow: 0 -10px 40px rgba(226,40,72,.18); } .ls_floor { position: absolute; left: 0; right: 0; bottom: 0; height: 21%; background: linear-gradient(180deg, #120d10, #050405); } .ls_floor::before { content: ""; position: absolute; left: 25%; right: 25%; top: 0; height: 70%; background: radial-gradient(50% 100% at 50% 0%, rgba(226,40,72,.35), transparent 75%); filter: blur(10px); } .ls_crowd { position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; z-index: 3; } .ls_loadin { position: absolute; left: -2%; bottom: -7%; width: 22%; margin: 0; z-index: 5; background: #fff; padding: 8px 8px 30px; transform: rotate(-5deg); box-shadow: 0 18px 40px rgba(0,0,0,.5); } .ls_loadin img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .ls_loadin figcaption { position: absolute; left: 10px; bottom: 7px; font-size: 12px; color: #111013; letter-spacing: .04em; } .ls_loadin figcaption b { color: var(--colorPrimary, #a3122f); margin-right: 4px; } .ls_time { position: absolute; right: 18px; top: 18px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; background: rgba(10,9,11,.75); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); color: #fff; padding: 8px 14px; font-size: 13px; letter-spacing: .05em; } .ls_time i { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 3px rgba(47,191,113,.25); } .ls_time b { font-family: var(--headingFont, Jost), sans-serif; } .ls_note { position: absolute; right: 14px; bottom: 10px; z-index: 5; font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .06em; } @media (max-width: 991.98px) { .led_promo_inner:has(.led_scene) .led_promo_text { grid-template-columns: 1fr; } .led_promo_inner:has(.led_scene) .led_promo_text > * { grid-column: 1 !important; grid-row: auto !important; } .ls_loadin { width: 30%; padding: 5px 5px 22px; bottom: -10%; } .ls_loadin figcaption { font-size: 10px; left: 6px; bottom: 5px; } .ls_time { right: 8px; top: 8px; font-size: 11px; padding: 5px 9px; } .ls_note { display: none; } .led_scene { margin-bottom: 28px; } } @media (prefers-reduced-motion: reduce) { .ls_slide { animation: none; } .ls_slide.s1 { opacity: 1; } .ls_uplights .ul, .ls_haze .hb, .ls_glow { animation: none; } } /* led scene fixes */ .ls_crowd path, .ls_crowd ellipse { stroke: none !important; } .ls_crowd path[stroke-linecap] { stroke: currentColor; } .ls_crowd { filter: drop-shadow(0 -2px 6px rgba(226,40,72,.25)); } .ls_wall_wrap { left: 28%; width: 44%; top: 14%; } .led_promo .ls_slide.s2 img { width: 62% !important; height: auto !important; max-width: 62% !important; object-fit: contain !important; } .led_promo .ls_bug img { width: 100% !important; height: auto !important; object-fit: contain !important; } .led_promo h2 span { display: block; color: #f26b2a; font-size: inherit !important; line-height: inherit; font-weight: inherit; letter-spacing: inherit; } .led_scene { margin-bottom: 40px; } .led_promo_inner:has(.led_scene) .led_promo_text { padding-top: 20px; } /* ===== Homepage closing CTA ===== */ .close_cta { position: relative; padding: 120px 0; background: #f7f3ee url(../media/paper.jpg) center / 900px; color: #111013; overflow: hidden; } .close_cta::before { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(163,18,47,.12), transparent 70%); pointer-events: none; } .cc_grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 64px; align-items: center; } .cc_k { display: inline-flex; align-items: center; gap: 10px; font-family: var(--capsFont, "Didact Gothic"), sans-serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--colorPrimary, #a3122f); } .cc_k i { width: 9px; height: 9px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47,191,113,.2); } h2.cc_title { font-family: var(--headingFont, Jost), sans-serif; text-transform: uppercase; font-weight: 700; font-size: clamp(40px, 5.2vw, 78px); line-height: 1.02; color: #111013; margin: 18px 0 22px; letter-spacing: -.01em; } h2.cc_title span { display: inline; color: #fff; background: var(--colorPrimary, #a3122f); padding: .02em .16em .06em; line-height: 1.3; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 14px 36px rgba(163,18,47,.3); } .cc_lede { font-size: 19px; line-height: 1.6; color: #3b383f; max-width: 640px; margin-bottom: 30px; } .cc_form { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 0; background: #fff; border: 2px solid #111013; box-shadow: 10px 10px 0 #111013; max-width: 760px; } .cc_form label { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; border-right: 1px solid rgba(17,16,19,.15); margin: 0; } .cc_form label span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #6b6870; } .cc_form input, .cc_form select { border: 0; padding: 4px 0; font-size: 17px; font-weight: 600; color: #111013; background: transparent; outline: none; width: 100%; height: auto; } .cc_form label:focus-within { background: #fbf4f1; } .cc_form .ad_btn { border-radius: 0; margin: 0; height: 100%; white-space: nowrap; padding-left: 28px; padding-right: 28px; } .cc_assure { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; font-weight: 600; } .cc_assure i { color: #2fbf71; margin-right: 6px; } .cc_call { margin: 16px 0 0; font-size: 15px; color: #5c5960; } .cc_call a { color: #111013; font-weight: 700; border-bottom: 2px solid var(--colorPrimary, #a3122f); margin-left: 6px; } .cc_side { display: flex; flex-direction: column; gap: 22px; } .cc_quote { margin: 0; background: #111013; color: #fff; padding: 28px 28px 24px; position: relative; transform: rotate(1.2deg); box-shadow: 0 24px 50px rgba(17,16,19,.25); } .cc_quote::before { content: "”"; position: absolute; right: 18px; top: -18px; font: 700 120px/1 Georgia, serif; color: var(--colorPrimary, #a3122f); } .cc_stars { color: #f2b42a; font-size: 14px; letter-spacing: 3px; margin-bottom: 12px; } .cc_quote blockquote { margin: 0 0 14px; font-size: 18px; line-height: 1.55; } .cc_quote figcaption { font-size: 13px; color: rgba(255,255,255,.65); } .cc_quote figcaption b { color: #fff; margin-right: 6px; } .cc_steps { list-style: none; padding: 0; margin: 0; counter-reset: none; } .cc_steps li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px dashed rgba(17,16,19,.25); } .cc_steps li:last-child { border-bottom: 0; } .cc_steps b { font: 700 22px/1 var(--headingFont, Jost), sans-serif; color: var(--colorPrimary, #a3122f); min-width: 34px; } .cc_steps h4 { font-size: 17px; margin: 0 0 3px; text-transform: uppercase; color: #111013; } .cc_steps p { margin: 0; font-size: 14px; color: #5c5960; line-height: 1.5; } @media (max-width: 991.98px) { .close_cta { padding: 80px 0; } .cc_grid { grid-template-columns: 1fr; gap: 44px; } .cc_form { grid-template-columns: 1fr; box-shadow: 6px 6px 0 #111013; } .cc_form label { border-right: 0; border-bottom: 1px solid rgba(17,16,19,.15); } .cc_form .ad_btn { justify-content: center; padding: 18px; } .cc_quote { transform: none; } } .close_cta h2.cc_title span { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit; text-transform: inherit; } .ls_crowd { filter: drop-shadow(0 -1px 3px rgba(226,40,72,.14)); } @media (max-width: 767.98px) { .led_scene { margin-left: -14px; margin-right: -14px; } .ls_room { aspect-ratio: 4 / 3.3; } .ls_wall_wrap { left: 14%; width: 72%; top: 16%; } .ls_drape, .ls_pipes, .ls_uplights { top: 11%; bottom: 27%; } .ls_stage { left: 6%; right: 6%; } .ls_crowd { height: 26%; } .ls_loadin { width: 34%; left: 2%; bottom: -12%; } } /* ===== Credentials: slim procurement strip ===== */ .cred_slim { padding: 56px 0 !important; background: #f7f3ee url(../media/paper.jpg) center / 900px; border-top: 1px solid rgba(17,16,19,.1); border-bottom: 1px solid rgba(17,16,19,.1); } .cs_row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) auto; gap: 36px; align-items: center; } .cs_id { display: flex; gap: 18px; align-items: center; } .cs_face { flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--colorPrimary, #a3122f); } .cs_face img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 20%; } .cs_k { font-family: var(--capsFont, "Didact Gothic"), sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--colorPrimary, #a3122f); } .cs_id h2 { font-size: 26px !important; line-height: 1.15; margin: 4px 0 4px; color: #111013; text-transform: none; } .cs_id p { margin: 0; font-size: 14px; color: #5c5960; } .cs_certs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(17,16,19,.15); background: rgba(255,255,255,.7); } .cs_certs li { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(17,16,19,.12); } .cs_certs li:last-child { border-right: 0; } .cs_tag { align-self: flex-start; height: 26px; display: inline-flex; align-items: center; padding: 0 8px; background: #111013; color: #fff; font: 700 11px/1 var(--headingFont, Jost), sans-serif; letter-spacing: .12em; margin-bottom: 4px; } .cs_tag.light { background: transparent; padding: 0; } .cs_tag.light img { height: 26px; width: auto; } .cs_certs b { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 14px; color: #111013; letter-spacing: .02em; } .cs_certs small { font-size: 12px; color: #6b6870; line-height: 1.35; } .cs_act { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .cs_act p { margin: 0; font-size: 13px; } .cs_act p a { color: #111013; font-weight: 600; border-bottom: 1px solid var(--colorPrimary, #a3122f); } @media (max-width: 1199.98px) { .cs_row { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 767.98px) { .cred_slim { padding: 40px 0 !important; } .cs_certs { grid-template-columns: 1fr 1fr; } .cs_certs li:nth-child(2) { border-right: 0; } .cs_certs li:nth-child(-n+2) { border-bottom: 1px solid rgba(17,16,19,.12); } .cs_id h2 { font-size: 22px !important; } } /* ===== Closing CTA: torn paper + brand ===== */ .close_cta.cc_torn { background: transparent; padding: 0; overflow: visible; position: relative; z-index: 2; } .close_cta.cc_torn::before { display: none; } .cc_torn .cc_rip_t { margin-bottom: -1px; position: relative; z-index: 1; } .cc_torn .cc_rip_b { margin-top: -1px; position: relative; z-index: 1; } .cc_band { position: relative; background: #9c102b; padding: 50px 0 60px; } .cc_band::before { content: ""; position: absolute; inset: 0; background: url(../media/paper.jpg) center / 700px; mix-blend-mode: multiply; opacity: .35; pointer-events: none; } .cc_band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 20%, rgba(242,107,42,.35), transparent 70%); pointer-events: none; } .cc_torn .cc_grid { position: relative; z-index: 2; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: 56px; } .cc_sheet_wrap { position: relative; transform: rotate(-.6deg); filter: drop-shadow(0 26px 40px rgba(40,0,8,.45)); } .cc_sheet { background: #f7f3ee url(../media/paper.jpg) center / 800px; padding: clamp(60px, 7vw, 92px) clamp(26px, 4vw, 56px) clamp(64px, 7vw, 96px); } .cc_tape { position: absolute; z-index: 5; top: -6px; left: 50%; width: 150px; height: 34px; transform: translateX(-50%) rotate(-3deg); background: rgba(244,232,210,.82); box-shadow: 0 2px 6px rgba(0,0,0,.15); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); } .cc_tape.small { width: 96px; height: 26px; top: -12px; left: 30%; transform: rotate(4deg); } .cc_torn .cc_side { color: #fff; gap: 26px; } .cc_stamp { align-self: flex-end; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px 10px; border: 3px solid rgba(255,255,255,.85); border-radius: 8px; transform: rotate(6deg); background: rgba(17,16,19,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); } .cc_stamp img { width: 150px !important; height: auto !important; } .cc_stamp span { font: 700 11px/1 var(--headingFont, Jost), sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #fff; } .cc_torn .cc_quote { transform: rotate(-1.5deg); } .cc_torn .cc_quote::before { color: #f26b2a; } .cc_torn .cc_steps li { border-bottom-color: rgba(255,255,255,.3); } .cc_torn .cc_steps b { color: #ffd1bd; } .cc_torn .cc_steps h4 { color: #fff; } .cc_torn .cc_steps p { color: rgba(255,255,255,.78); } @media (max-width: 991.98px) { .cc_torn .cc_grid { grid-template-columns: 1fr; gap: 40px; } .cc_sheet_wrap { transform: none; margin: 0 -6px; } .cc_stamp { align-self: center; } } .hero_v2 .hv_shade { background: linear-gradient(90deg, rgba(17,16,19,.88) 0%, rgba(17,16,19,.55) 50%, rgba(17,16,19,.12) 100%), linear-gradient(0deg, #111013 0%, rgba(17,16,19,.6) 18%, rgba(17,16,19,0) 45%); } .hero_v2 h1.hv_title, .hero_v2 h1.hv_title span { font-size: clamp(40px, 5.4vw, 88px) !important; } .hero_v2 + .led_promo { padding-top: 10px; } .hero_v2 h1.hv_title > span:first-child { font-size: clamp(22px, 2.6vw, 40px) !important; letter-spacing: .04em !important; color: rgba(255,255,255,.92) !important; margin-bottom: 14px; } .hero_v2 h1.hv_title .ih_strip { font-size: clamp(42px, 6.2vw, 100px) !important; } .cc_torn h2.cc_title { font-size: clamp(34px, 3.9vw, 60px); } /* ===== Contact page: production request pad on paper ===== */ .pi_rest_contact { background: #f3eee6 url(../media/paper.jpg) center / 900px; padding-bottom: 110px !important; position: relative; } .pi_rest_contact + .pb_120 { display: none; } .pi_rest_contact .row.mt_60 { margin-top: 0 !important; padding-top: 70px; } .pi_rest_contact #inquiry { position: relative; padding: 92px 42px 40px; transform: rotate(.35deg); background-color: #fbf8f1; background-image: radial-gradient(circle at 50% 50%, #f3eee6 0 5px, transparent 5.5px), linear-gradient(rgba(163,18,47,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(163,18,47,.07) 1px, transparent 1px), url(../media/paper.jpg); background-size: 22px 14px, 24px 24px, 24px 24px, 520px 520px; background-position: 0 6px, 0 0, 0 0, 0 0; background-repeat: repeat-x, repeat, repeat, repeat; box-shadow: 0 2px 0 #e7e0d3, 0 4px 0 #f6f1e7, 0 6px 0 #e2dacb, 0 30px 60px rgba(17,16,19,.16); } .pi_rest_contact #inquiry::before { content: "PRODUCTION REQUEST"; position: absolute; left: 42px; right: 42px; top: 34px; padding-bottom: 12px; font: 700 22px/1 var(--headingFont, Jost), sans-serif; letter-spacing: .08em; color: #111013; border-bottom: 3px solid #111013; } .pi_rest_contact #inquiry::after { content: "No. 2026 · Reply within 1 business day"; position: absolute; right: 42px; top: 40px; font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--colorPrimary, #a3122f); } .pi_rest_contact .tf__contact_form_imput label { font-family: var(--capsFont, "Didact Gothic"), sans-serif; font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; color: #6b6870 !important; margin-bottom: 2px; } .pi_rest_contact .tf__contact_form_imput input, .pi_rest_contact .tf__contact_form_imput select, .pi_rest_contact .tf__contact_form_imput textarea { background: transparent !important; border: 0 !important; border-bottom: 1.5px solid #111013 !important; border-radius: 0 !important; padding-left: 2px !important; padding-right: 2px !important; font-size: 17px; color: #111013; box-shadow: none !important; } .pi_rest_contact .tf__contact_form_imput textarea { border: 1.5px solid #111013 !important; background: rgba(255,255,255,.5) !important; padding: 12px !important; } .pi_rest_contact .tf__contact_form_imput input:focus, .pi_rest_contact .tf__contact_form_imput select:focus, .pi_rest_contact .tf__contact_form_imput textarea:focus { border-color: var(--colorPrimary, #a3122f) !important; background: rgba(163,18,47,.04) !important; } .pi_rest_contact .contact_portrait { transform: rotate(-2.5deg); background: #fff; padding: 10px 10px 42px; box-shadow: 0 20px 40px rgba(17,16,19,.2); position: relative; } .pi_rest_contact .contact_portrait::after { content: "Your producer · Aarius"; position: absolute; left: 14px; bottom: 12px; font: 600 13px/1 var(--headingFont, Jost), sans-serif; color: #111013; letter-spacing: .04em; } .pi_rest_contact .contact_portrait::before { content: ""; position: absolute; z-index: 2; top: -12px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(3deg); background: rgba(244,232,210,.85); box-shadow: 0 2px 5px rgba(0,0,0,.12); } .pi_rest_contact .contact_side { margin-top: 34px; background: #fffdf8; padding: 26px 24px; border-top: 5px solid var(--colorPrimary, #a3122f); box-shadow: 0 16px 34px rgba(17,16,19,.12); transform: rotate(.6deg); background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(70,110,170,.18) 31px 32px); background-position: 0 52px; } @media (max-width: 767.98px) { .pi_rest_contact #inquiry { padding: 96px 18px 28px; transform: none; } .pi_rest_contact #inquiry::before { left: 18px; right: 18px; font-size: 19px; } .pi_rest_contact #inquiry::after { left: 18px; right: auto; top: 70px; font-size: 10px; } .pi_rest_contact .row.mt_60 { padding-top: 40px; } } .pi_rest_contact .contact_side h4, .pi_rest_contact .contact_side a, .pi_rest_contact .contact_side span { color: #111013 !important; } .pi_rest_contact .contact_side a:hover { color: var(--colorPrimary, #a3122f) !important; } .pi_rest_contact .contact_side small { color: #6b6870 !important; } .pi_rest_contact .contact_side .sms_note, .pi_rest_contact .contact_side .sms_note * { color: #5c5960 !important; } .pi_rest_contact #inquiry::after { content: "Reply within 1 business day"; } /* ===== Contact: paper runs up into the torn hero edge ===== */ .pi_rest_contact { margin-top: 0 !important; } .ih_contact .ih_rip .rip_fill { background: #f3eee6 url(../media/paper.jpg) center bottom / 900px !important; } .ih_contact .ih_rip { margin-bottom: -3px; } /* ===== Tighter vertical rhythm site-wide (sections only; utilities elsewhere untouched) ===== */ section.pt_120 { padding-top: 88px !important; } section.pb_120 { padding-bottom: 88px !important; } section.pt_100 { padding-top: 72px !important; } section.pb_100 { padding-bottom: 72px !important; } section.pt_80 { padding-top: 60px !important; } section.pb_80 { padding-bottom: 60px !important; } section.pb_60 { padding-bottom: 44px !important; } footer.pt_120 { padding-top: 80px !important; } .proof_reel { padding: 84px 0 80px; } .led_promo { padding-bottom: 72px; } .cc_band { padding: 36px 0 44px; } .close_cta:not(.cc_torn) { padding: 84px 0; } .mb_50 { margin-bottom: 36px !important; } @media (max-width: 991.98px) { section.pt_120, section.pt_100 { padding-top: 64px !important; } section.pb_120, section.pb_100 { padding-bottom: 64px !important; } } @media (max-width: 575.98px) { section.xs_pt_70, section.xs_pt_80, section.pt_120, section.pt_100 { padding-top: 52px !important; } section.xs_pb_70, section.xs_pb_80, section.pb_120, section.pb_100 { padding-bottom: 52px !important; } section.xs_pt_60, section.pt_80 { padding-top: 44px !important; } section.xs_pb_60, section.pb_80 { padding-bottom: 44px !important; } footer.pt_120 { padding-top: 60px !important; } .proof_reel { padding: 56px 0; } .led_promo { padding-bottom: 52px; } } /* custom sections on the same rhythm */ .onset_strip { padding: 80px 0; } .reviews_section { padding: 84px 0; } .van_band { padding-bottom: 80px; } .community_strip { padding-top: 72px; padding-bottom: 72px; } .counter_strip { padding: 56px 0 !important; } .banner_stage.hero_v2 { padding-bottom: 110px; } /* same-background neighbours: don't stack two full paddings */ section.ways.pt_120, section#answers.pt_120 { padding-top: 32px !important; } #credentials + .reviews_section, .stand_section + .tech_specs { padding-top: 32px !important; } @media (max-width: 575.98px) { .onset_strip, .reviews_section { padding: 56px 0; } .van_band { padding-bottom: 56px; } .community_strip { padding: 52px 0; } section.ways, section#answers { padding-top: 20px !important; } } /* ===== Torn seams between homepage Deliver sections ===== */ .seam_t, .seam_b { position: relative; overflow: visible !important; } .proof_reel.seam_t { overflow-x: clip !important; overflow-y: visible !important; } .sec_rip { position: absolute !important; left: 0; width: 100%; z-index: 4; pointer-events: none; margin: 0 !important; } .sec_rip_t { bottom: calc(100% - 2px); } .sec_rip_b { top: calc(100% - 2px); } .sec_rip.paper_fill .rip_fill { background: #f3eee6 url(../media/paper.jpg) center bottom / 900px !important; } .reviews_section.seam_t { z-index: 2; } .proof_reel.seam_t { z-index: 3; } .proof_reel.seam_b + .cred_slim { padding-top: 84px !important; border-top: 0; } .latest_project + .reviews_section { margin-top: 0; } .sec_rip_t { transform: translateY(48%); } .sec_rip_b { transform: translateY(-48%); } .seam_t > .container, .seam_t > .pr_film { position: relative; z-index: 5; } .sec_rip.paper_fill .rip_fill { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; } .sec_rip_t { transform: none; overflow: hidden; } .sec_rip_b { transform: none; } .latest_project:has(+ .reviews_section.seam_t) { padding-bottom: 150px !important; } .reviews_section:has(+ .proof_reel.seam_t) { padding-bottom: 150px; } .proof_reel.seam_b + .cred_slim { padding-top: 140px !important; } @media (max-width: 767.98px) { .latest_project:has(+ .reviews_section.seam_t) { padding-bottom: 90px !important; } .reviews_section:has(+ .proof_reel.seam_t) { padding-bottom: 90px; } .proof_reel.seam_b + .cred_slim { padding-top: 80px !important; } } .proof_reel.seam_t::before { background: radial-gradient(55% 45% at 85% 40%, rgba(163,18,47,.3), transparent 70%); } /* procurement paper runs down behind the CTA's torn top edge */ .cred_slim { border-bottom: 0 !important; padding-bottom: 40px !important; } .cc_torn .cc_rip_t { background: #f7f3ee url(../media/paper.jpg) center top / 900px; } .cc_band::after { background: radial-gradient(55% 60% at 85% 65%, rgba(242,107,42,.3), transparent 70%); } .cc_band::before { display: none; } .cc_torn .cc_rip_t { margin-bottom: -4px; z-index: 3; } .cc_torn .cc_rip_t .rip_fill { inset: -1px 0 -4px; } .cc_torn .cc_rip_t { margin-bottom: 0; z-index: 1; } .cc_torn .cc_band { margin-top: -8px; z-index: 2; } .cc_torn .cc_band + .cc_rip_b, .cc_torn .cc_rip_b { margin-top: -8px; z-index: 1; } /* ===== Services: chapters, torn seams, sticky index ===== */ .pi_rest_svc { display: none; } .svc_nav { position: sticky; top: var(--hdr, 100px); z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(17,16,19,.08); box-shadow: 0 8px 24px rgba(17,16,19,.06); } .svc_nav_in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; } .svc_nav_in::-webkit-scrollbar { display: none; } .svc_nav a { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #5c5960; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .25s, color .25s; } .svc_nav a b { font: 700 11px/1 var(--headingFont, Jost), sans-serif; color: #a8a5ad; letter-spacing: .05em; } .svc_nav a i { color: var(--colorPrimary, #a3122f); font-size: 15px; } .svc_nav a:hover { background: rgba(163,18,47,.07); color: #111013; } .svc_nav a.on { background: #111013; color: #fff; } .svc_nav a.on b { color: #f26b2a; } .svc_nav a.on i { color: #fff; } .svc_nav_bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; } .svc_nav_bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a3122f, #f26b2a); transition: width .15s linear; } .svc_sec { position: relative; overflow: hidden; } .svc_light { background: #fff; } .svc_paper, .svc_paperbg { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; } .svc_dark { background: #111013 !important; } .svc_sec .svc_block { border-top: 0; padding: 84px 0 96px; scroll-margin-top: 170px; position: relative; z-index: 2; } .svc_bignum { position: absolute; z-index: 1; top: 30px; right: -1vw; font: 800 clamp(160px, 24vw, 380px)/.8 var(--headingFont, Jost), sans-serif; color: transparent; -webkit-text-stroke: 2px rgba(17,16,19,.07); letter-spacing: -.04em; pointer-events: none; user-select: none; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); } .svc_sec:nth-of-type(even) .svc_bignum { right: auto; left: -1vw; } .svc_dark .svc_bignum { -webkit-text-stroke-color: rgba(255,255,255,.07); } .svc_sec .num { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 12px; background: rgba(163,18,47,.08); border-radius: 999px; } .svc_dark .num { background: rgba(242,107,42,.14); color: #f6a57e; } .svc_sec h2 { text-transform: uppercase; font-size: clamp(36px, 4.2vw, 60px) !important; letter-spacing: -.01em; } .svc_strip { display: inline; color: #fff; background: var(--colorPrimary, #a3122f); padding: .02em .16em .06em; line-height: 1.32; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 12px 30px rgba(163,18,47,.25); } .svc_dark .svc_strip { background: linear-gradient(90deg, #a3122f, #f26b2a); } .svc_dark h2, .svc_dark .lead { color: #fff !important; } .svc_dark p.lead { color: #d6d5da !important; } .svc_dark .best_for b { color: #fff; } .svc_sec .best_for { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .svc_sec .best_for span { font-size: 13px; padding: 5px 11px; border: 1px solid rgba(17,16,19,.18); border-radius: 999px; background: rgba(255,255,255,.6); } .svc_dark .best_for span { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: #e9e8ec; } .svc_dark .led_inline, .svc_dark .svc_links a { color: #fff; } .svc_torn { height: auto !important; overflow: visible !important; position: relative; transform: rotate(var(--tilt, 1deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); } .svc_sec:nth-of-type(even) .svc_torn { --tilt: -1deg; } .svc_torn .svc_media { aspect-ratio: 4 / 3.3; overflow: hidden; } .svc_torn .svc_media img, .svc_torn .svc_media video { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .9s ease; } .svc_block:hover .svc_torn { transform: rotate(0deg) translateY(-4px); } .svc_block:hover .svc_torn .svc_media img, .svc_block:hover .svc_torn .svc_media video { transform: scale(1.05); } .svc_torn::after { content: ""; position: absolute; z-index: 3; top: -14px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%) rotate(-3deg); background: rgba(244,232,210,.82); box-shadow: 0 2px 6px rgba(0,0,0,.15); } .svc_dark .svc_torn .rf_fiber { opacity: .6; } .svc_seam { position: relative; z-index: 3; margin-top: -4.6vw; margin-bottom: -2px; pointer-events: none; } .svc_seam .rip { display: block; } .paper_fill .rip_fill { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; } .svc_seam + section { position: relative; } /* reveal on scroll */ .svc_sec .svc_block .col-lg-6, .svc_sec .svc_block .col-lg-5 { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .js_reveal .svc_sec:not(.in) .svc_block .col-lg-6 { opacity: 0; transform: translateY(28px); } .js_reveal .svc_sec:not(.in) .svc_block .col-lg-5 { opacity: 0; transform: translateY(46px); } .js_reveal .svc_sec:not(.in) .svc_bignum { transform: translateY(60px); } @media (max-width: 991.98px) { .svc_nav { top: var(--hdr, 70px); } .svc_nav a { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; } .svc_sec .svc_block { padding: 56px 0 72px; } .svc_torn { margin-top: 34px; } .svc_bignum { font-size: 42vw; top: 10px; } } @media (prefers-reduced-motion: reduce) { .js_reveal .svc_sec .svc_block .col-lg-6, .js_reveal .svc_sec .svc_block .col-lg-5 { opacity: 1 !important; transform: none !important; } } .svc_sec h2 .svc_strip { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; color: #fff !important; line-height: 1.3 !important; } .svc_seam + section { margin-top: -8px; z-index: 4; } .svc_seam .rip_fill { inset: -1px 0 -10px !important; } .svc_seam { z-index: 6; } .svc_seam .rip_shade { filter: none !important; } /* ===== Inner pages: chapter rhythm, torn seams, sticky index, reveals ===== */ .pfx_paper { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; } .pfx_seam { position: relative; z-index: 6; margin-top: -2.6vw; margin-bottom: -2px; pointer-events: none; } .pfx_seam .rip { display: block; } .pfx_seam .rip_shade { filter: none !important; } .pfx_seam .rip_fill { inset: -1px 0 -10px !important; } .pfx_after_seam { position: relative; margin-top: -8px; z-index: 4; } .pfx_nav { position: sticky; top: var(--hdr, 0px); z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(17,16,19,.08); box-shadow: 0 8px 24px rgba(17,16,19,.06); } .pfx_nav_in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; } .pfx_nav_in::-webkit-scrollbar { display: none; } .pfx_nav a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: #5c5960; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .25s, color .25s; } .pfx_nav a b { font: 700 11px/1 var(--headingFont, Jost), sans-serif; color: var(--colorPrimary, #a3122f); letter-spacing: .05em; } .pfx_nav a:hover { background: rgba(163,18,47,.07); color: #111013; } .pfx_nav a.on { background: #111013; color: #fff; } .pfx_nav a.on b { color: #f26b2a; } .pfx_bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; } .pfx_bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a3122f, #f26b2a); transition: width .15s linear; } .pfx_nav + section { scroll-margin-top: 140px; } body > section[id] { scroll-margin-top: 130px; } /* brand underline swipe under section headlines */ .pfx_rv.section_heading h2 { position: relative; } .pfx_js .pfx_rv.section_heading h2::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 86px; height: 5px; background: linear-gradient(90deg, #a3122f, #f26b2a); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) .25s; } .pfx_js .pfx_rv.pfx_in.section_heading h2::after { transform: scaleX(1); } .pfx_js .pfx_rv:not(.section_heading) { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); } .pfx_js .pfx_rv.pfx_in:not(.section_heading) { opacity: 1; transform: none; } /* white cards read better on paper */ .pfx_paper .faq_item, .pfx_paper [class*="_grid"] > div:not([class]) { background-color: rgba(255,255,255,.72); } @media print { .pfx_nav, .pfx_seam { display: none !important; } .pfx_js .pfx_rv { opacity: 1 !important; transform: none !important; } } .pfx_has_nav .kb_jump { display: none !important; } /* "How we run the show" on paper, torn top and bottom */ section.ways.ways_paper { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; padding-top: 72px !important; padding-bottom: 80px !important; z-index: 3; } .wwa:has(+ .ways_paper) { padding-bottom: 150px !important; } .ways_paper + #answers { padding-top: 130px !important; } .ways_paper .sec_rip_b { overflow: hidden; } @media (max-width: 767.98px) { section.ways.ways_paper { padding-top: 48px !important; padding-bottom: 56px !important; } .wwa:has(+ .ways_paper) { padding-bottom: 80px !important; } .ways_paper + #answers { padding-top: 70px !important; } } section.ways_paper + section#answers.pt_120 { padding-top: 140px !important; } @media (max-width: 767.98px) { section.ways_paper + section#answers.pt_120 { padding-top: 76px !important; } } /* seams carry the background of the section above, so there is no white gap above the tear */ .svc_seam.seam_from_light { background: #fff; } .svc_seam.seam_from_dark { background: #111013; } .svc_seam.seam_from_paper { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px; } /* LED page: the draped wall visualization */ .led_page_scene { margin: 10px 0 40px; } .led_page_scene .ls_slide.s2 img { width: 62% !important; height: auto !important; max-width: 62% !important; object-fit: contain !important; } .led_page_scene .ls_bug img { width: 100% !important; height: auto !important; object-fit: contain !important; } .led_page_scene .ls_loadin img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover !important; } @media (max-width: 767.98px) { .led_page_scene .led_scene { margin-left: -4px; margin-right: -4px; } } /* nine-way bento: TV and consulting take two columns so the grid stays full */ .ways_grid .way_television, .ways_grid .way_consulting { grid-column: span 2; } @media (max-width: 991.98px) { .ways_grid .way_television, .ways_grid .way_consulting { grid-column: auto; } } .ways_grid .way_photography { grid-column: span 2; } @media (max-width: 991.98px) { .ways_grid .way_photography { grid-column: auto; } } /* Contact form: plain paper, no grid */ .pi_rest_contact #inquiry { background-image: radial-gradient(circle at 50% 50%, #f3eee6 0 5px, transparent 5.5px), url(../media/paper.jpg) !important; background-size: 22px 14px, 520px 520px !important; background-position: 0 6px, 0 0 !important; background-repeat: repeat-x, repeat !important; } /* ===== Production Request form: nuance ===== */ .pr_prog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -6px 0 26px; } .pr_prog span { display: flex; flex-direction: column; gap: 6px; } .pr_prog i { height: 4px; border-radius: 2px; background: rgba(17,16,19,.12); position: relative; overflow: hidden; } .pr_prog i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #a3122f, #f26b2a); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); } .pr_prog span.done i::after { transform: scaleX(1); } .pr_prog em { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a878f; } .pr_prog span.done em { color: #111013; } .pr_sec { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; } .pr_sec:first-of-type { margin-top: 4px; } .pr_sec b { font: 700 13px/1 var(--headingFont, Jost), sans-serif; color: #fff; background: var(--colorPrimary, #a3122f); padding: 6px 8px; letter-spacing: .06em; transform: rotate(-2deg); } .pr_sec .pr_sec_t { font: 700 17px/1 var(--headingFont, Jost), sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #111013; white-space: nowrap; } .pr_sec .pr_sec_line { flex: 1; height: 0; border-top: 1.5px dashed rgba(17,16,19,.25); } .pr_sec small { font-size: 12px; color: #8a878f; font-style: italic; white-space: nowrap; } .pr_tick { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(17,16,19,.08); color: transparent; font-size: 11px; transition: .3s; flex: none; } .pr_sec.done .pr_tick { background: #2fbf71; color: #fff; transform: scale(1.08); } .pr_help { margin: 8px 0 0; font-size: 13px; color: #5c5960; min-height: 18px; } .pr_help.warn { color: var(--colorPrimary, #a3122f); font-weight: 600; } .pr_stamp { position: absolute; top: 74px; right: 40px; z-index: 3; border: 3px solid var(--colorPrimary, #a3122f); color: var(--colorPrimary, #a3122f); padding: 6px 12px 5px; border-radius: 6px; text-align: center; text-transform: uppercase; transform: rotate(-9deg) scale(1.6); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); mix-blend-mode: multiply; } .pr_stamp b { display: block; font: 800 22px/1 var(--headingFont, Jost), sans-serif; letter-spacing: .14em; } .pr_stamp span { font-size: 10px; letter-spacing: .12em; font-weight: 700; } .pr_stamp.on { opacity: .85; transform: rotate(-9deg) scale(1); } .pr_chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; } .pr_chips_k { font-size: 12px; color: #8a878f; margin-right: 2px; } .pr_chips button { border: 1.5px solid rgba(17,16,19,.25); background: rgba(255,255,255,.6); color: #3b383f; border-radius: 999px; padding: 5px 11px; font-size: 13px; transition: .2s; } .pr_chips button:hover { border-color: #111013; color: #111013; } .pr_chips button.on { background: #111013; border-color: #111013; color: #fff; } .pr_sig { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin: 26px 0 22px; } .pr_sig > div { border-bottom: 1.5px solid #111013; position: relative; min-height: 46px; display: flex; align-items: flex-end; } .pr_sig small { position: absolute; left: 0; bottom: -20px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a878f; } .pr_sig_name { font: italic 600 26px/1.1 Georgia, "Times New Roman", serif; color: #1d2a6b; padding: 0 4px 4px; transform: rotate(-2deg); transform-origin: left bottom; opacity: 0; transition: opacity .3s; } .pr_sig.signed .pr_sig_name { opacity: 1; } .pr_sig_date { font: 600 15px/1 ui-monospace, Menlo, monospace; color: #3b383f; padding: 0 2px 8px; } .pi_rest_contact #inquiry .ad_btn[type="submit"] { margin-top: 18px; } @media (max-width: 767.98px) { .pr_prog em { display: none; } .pr_sec small { display: none; } .pr_stamp { top: 112px; right: 14px; } .pr_sig { grid-template-columns: 1fr; gap: 34px; } } @media (prefers-reduced-motion: reduce) { .pr_stamp, .pr_prog i::after, .pr_tick { transition: none; } } .pr_sec { position: relative; } .pr_sec .pr_stamp { top: -18px; right: 150px; } @media (max-width: 767.98px) { .pr_sec .pr_stamp { top: -14px; right: 40px; } } .pr_sec .pr_stamp b { background: none; color: inherit; padding: 0; transform: none; font-size: 20px; } .pr_sec .pr_stamp { top: -40px; right: 130px; padding: 4px 10px 3px; } @media (max-width: 767.98px) { .pr_sec .pr_stamp { top: -44px; right: 4px; } .pr_sec .pr_stamp b { font-size: 16px; } } .pr_sig_name { font: 400 44px/1 "Allura", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive !important; color: #1d2a6b; padding: 0 6px 0; transform: rotate(-3deg); letter-spacing: .01em; } @media (max-width: 767.98px) { .pr_sig_name { font-size: 38px !important; } } @font-face { font-family: "Allura"; src: url(../fonts/allura.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ===== LED hero: the wall on stage, not boxes ===== */ .ih_led .ih_grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } .ih_led .ih_media { position: relative; } .ih_led_scene .led_scene { margin: 0 !important; } .ih_led_scene .ls_room { box-shadow: 0 0 90px rgba(242,107,42,.22), 0 40px 90px rgba(0,0,0,.6); } .ih_led_scene .ls_loadin { width: 26%; left: -4%; bottom: -10%; } .ih_led .ih_media .ih_nits { position: absolute; right: -10px; top: -22px; bottom: auto; z-index: 7; } .ih_led_scene .ls_note { font-size: 10px; } .led_page_scene.ih_led_scene .ls_slide.s2 img { width: 62% !important; height: auto !important; max-width: 62% !important; object-fit: contain !important; } .led_page_scene.ih_led_scene .ls_bug img { width: 100% !important; height: auto !important; } @media (max-width: 991.98px) { .ih_led .ih_grid { grid-template-columns: 1fr; } .ih_led .ih_media .ih_nits { right: 6px; top: -18px; } } /* ===== Homepage: torn edge from the van band into "How we run the show" ===== */ .fp_home.seam_t { position: relative; } /* ===== Contact: readable form ===== */ .pi_rest_contact #inquiry { background-color: #fffdf8 !important; background-image: radial-gradient(circle at 50% 50%, #f3eee6 0 5px, transparent 5.5px), linear-gradient(rgba(255,253,248,.82), rgba(255,253,248,.82)), url(../media/paper.jpg) !important; background-size: 22px 14px, auto, 520px 520px !important; background-repeat: repeat-x, repeat, repeat !important; } .pi_rest_contact .tf__contact_form_imput label { font-size: 12px !important; font-weight: 700; color: #3b383f !important; letter-spacing: .12em; } .pi_rest_contact .tf__contact_form_imput input, .pi_rest_contact .tf__contact_form_imput select { font-size: 18px !important; color: #111013 !important; border-bottom: 2px solid #3b383f !important; padding-top: 8px !important; padding-bottom: 8px !important; } .pi_rest_contact .tf__contact_form_imput input::placeholder, .pi_rest_contact .tf__contact_form_imput textarea::placeholder { color: #8a878f !important; opacity: 1; } .pi_rest_contact .tf__contact_form_imput textarea { font-size: 17px !important; color: #111013 !important; background: #fff !important; border: 2px solid #3b383f !important; line-height: 1.55; } .pi_rest_contact .tf__contact_form_imput { margin-bottom: 18px; } .pr_help { color: #3b383f; font-size: 14px; } .pr_prog em { color: #5c5960; } .pr_sec small { color: #5c5960; } .pi_rest_contact .form_note { color: #3b383f; } /* contact page tears into the footer */ .contact_tear { display: block; margin-top: -2px; position: relative; z-index: 2; background: #f3eee6 url(../media/paper.jpg) center / 900px; } .contact_tear .rip_shade { filter: none; } /* ===== Lined notebook paper behind every FAQ list ===== */ .faq_list, .lv_help { position: relative; padding: 34px 30px 28px 72px !important; background-color: #fbf8f0 !important; background-image: linear-gradient(90deg, transparent 52px, rgba(196,40,60,.5) 52px, rgba(196,40,60,.5) 54px, transparent 54px), repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(70,110,170,.25) 35px, rgba(70,110,170,.25) 36px), url(../media/paper.jpg) !important; background-size: auto, auto, 480px 480px !important; background-position: 0 0, 0 18px, 0 0 !important; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 22px 46px rgba(17,16,19,.12); transform: rotate(.3deg); border-radius: 2px; } .faq_list::before, .lv_help::before { content: ""; position: absolute; left: 18px; top: 24px; bottom: 24px; width: 14px; background: radial-gradient(circle at 7px 7px, #fff 0 5px, rgba(0,0,0,.18) 5.5px 6.5px, transparent 7px) 0 0 / 14px 120px repeat-y; } .faq_list .faq_item, .lv_help .lv_q, .faq_list details, .lv_help details { background: transparent !important; border-color: rgba(70,110,170,.0) !important; box-shadow: none !important; } .faq_list summary, .lv_help summary { background: transparent !important; color: #111013 !important; } .faq_list details p, .lv_help details p { color: #2c2a30 !important; } .dark .faq_list summary, .dark .lv_help summary { color: #111013 !important; } #answers .faq_list { transform: rotate(-.4deg); } @media (max-width: 575.98px) { .faq_list, .lv_help { padding: 24px 14px 20px 44px !important; background-position: -20px 0, 0 18px, 0 0 !important; } .faq_list::before, .lv_help::before { left: 9px; } } .contact_tear { background: #111013 !important; margin-bottom: -2px; } .contact_tear .rip_fill { background: #f3eee6 url(../media/paper.jpg) center top / 900px !important; inset: -6px 0 -1px !important; } .pi_rest_contact { padding-bottom: 60px !important; } .ih_led .ih_media .ih_nits { left: auto !important; width: auto !important; display: inline-flex; flex-direction: column; padding: 10px 16px; } .ih_led .ih_media .ih_nits { top: auto !important; bottom: -22px !important; right: -10px !important; } .ih_led_scene .ls_note { display: none; } .ih_led .ih_grid { padding-bottom: 80px; } /* FAQ notebooks on inner pages: a clean white brand sheet that stands off the paper background */ .faq_list:not(#answers .faq_list), .lv_help { background-color: #ffffff !important; background-image: linear-gradient(90deg, transparent 52px, rgba(163,18,47,.55) 52px, rgba(163,18,47,.55) 54px, transparent 54px), repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(163,18,47,.10) 35px, rgba(163,18,47,.10) 36px) !important; background-size: auto, auto !important; background-position: 0 0, 0 18px !important; border-top: 6px solid var(--colorPrimary, #a3122f); box-shadow: 0 2px 0 #efe9e0, 0 4px 0 #fff, 0 6px 0 #e6dfd3, 0 26px 50px rgba(17,16,19,.16) !important; } .faq_list:not(#answers .faq_list)::before, .lv_help::before { background: radial-gradient(circle at 7px 7px, #f3eee6 0 5px, rgba(163,18,47,.25) 5.5px 6.5px, transparent 7px) 0 0 / 14px 120px repeat-y !important; } .faq_list:not(#answers .faq_list) summary i, .lv_help summary i { color: var(--colorPrimary, #a3122f) !important; } @media (max-width: 575.98px) { .faq_list:not(#answers .faq_list), .lv_help { background-position: -20px 0, 0 18px !important; } } /* Homepage: keep "Book the crew" clear of the torn edge below */ .van_band:has(+ .fp_home.seam_t), .van_band { padding-bottom: 150px !important; } @media (max-width: 767.98px) { .van_band { padding-bottom: 90px !important; } } /* ===== Hero highlights: torn paper strips (slightly translucent) ===== */ .ih .ih_strip, .hero_v2 .hv_title .ih_strip, .about_hero .ah_title .ah_red { background: url(../media/strip_paper.svg) center / 100% 100% no-repeat !important; color: #111013 !important; box-shadow: none !important; border-radius: 0 !important; padding: .12em .32em .16em !important; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ih_svc .ih_strip, .ih_gear .ih_strip, .ih_kb .ih_strip, .ih_guide .ih_strip, .ih_legal .ih_strip, .hero_v2 .hv_title .ih_strip { background-image: url(../media/strip_red.svg) !important; color: #fff !important; } .ih_led .ih_strip { background-image: url(../media/strip_flame.svg) !important; color: #fff !important; filter: drop-shadow(0 0 24px rgba(242,107,42,.4)); } .about_hero .ah_title .ah_red { transform: rotate(-1.2deg); } /* ===== Legal pages ===== */ .ih_legal { background: linear-gradient(135deg, #800012 0%, #a3122f 55%, #b8292f 100%); color: #fff; } .ih_legal .ih_bg { background: url(../media/paper.jpg) center / 700px; mix-blend-mode: multiply; opacity: .35; } .ih_legal .section_heading h5 { color: #ffd9c9 !important; } .ih_legal .ih_title, .ih_legal .ih_title span { color: #fff; } .ih_legal .ih_strip { background-image: url(../media/strip_paper.svg) !important; color: #111013 !important; } .lg_head { max-width: 860px; padding-bottom: 70px; position: relative; z-index: 2; } .lg_meta { display: inline-flex; gap: 8px; align-items: center; margin: 6px 0 14px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.35); font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: #fff; } .lg_intro { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 640px; } .lg_body { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px; padding: 50px 0 90px; } .lg_grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; } .lg_toc { position: sticky; top: 110px; } .lg_toc_k { font-family: var(--capsFont, "Didact Gothic"), sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--colorPrimary, #a3122f); } .lg_toc ol { list-style: none; padding: 0; margin: 12px 0 22px; border-left: 2px solid rgba(17,16,19,.12); } .lg_toc li a { display: flex; gap: 10px; padding: 6px 12px; font-size: 14px; color: #3b383f; line-height: 1.35; margin-left: -2px; border-left: 2px solid transparent; } .lg_toc li a b { font: 700 11px/1.6 var(--headingFont, Jost), sans-serif; color: #a8a5ad; } .lg_toc li a:hover { color: #111013; border-left-color: var(--colorPrimary, #a3122f); } .lg_help { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border-top: 4px solid var(--colorPrimary, #a3122f); font-size: 14px; box-shadow: 0 12px 26px rgba(17,16,19,.08); } .lg_help a { color: #111013; } .lg_help i { color: var(--colorPrimary, #a3122f); width: 18px; } .lg_sheet { background: #fff; padding: 48px 56px; box-shadow: 0 2px 0 #efe9e0, 0 4px 0 #fff, 0 6px 0 #e6dfd3, 0 30px 60px rgba(17,16,19,.14); border-top: 6px solid var(--colorPrimary, #a3122f); } .lg_sheet .terms_item { padding: 22px 0; border-bottom: 1px dashed rgba(17,16,19,.15); scroll-margin-top: 110px; } .lg_sheet .terms_item:first-child { padding-top: 0; } .lg_sheet .terms_item h2, .lg_sheet .terms_item h3 { display: flex; gap: 12px; align-items: baseline; font-size: 21px !important; margin: 0 0 10px; color: #111013; } .lg_sheet .terms_item h2 span, .lg_sheet .terms_item h3 span { font: 700 12px/1 var(--headingFont, Jost), sans-serif; color: #fff; background: var(--colorPrimary, #a3122f); padding: 5px 7px; transform: rotate(-2deg); flex: none; } .lg_sheet p, .lg_sheet li { font-size: 16px; line-height: 1.7; color: #3b383f; } .lg_sheet ul { padding-left: 20px; margin: 8px 0 0; } .lg_sheet li { margin: 6px 0; list-style: disc; } .lg_sheet a { color: var(--colorPrimary, #a3122f); text-decoration: underline; } .lg_end { margin-top: 28px; font-size: 13px !important; color: #77767c !important; } .lg_tear { display: block; background: #111013; margin-top: -2px; margin-bottom: -2px; position: relative; z-index: 2; } .lg_tear .rip_fill { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; inset: -6px 0 -1px !important; } .lg_tear .rip_shade { filter: none; } .lg_rip .rip_fill { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; } @media (max-width: 991.98px) { .lg_grid { grid-template-columns: 1fr; } .lg_toc { position: static; } .lg_toc ol { columns: 2; } } @media (max-width: 575.98px) { .lg_sheet { padding: 28px 20px; } .lg_toc ol { columns: 1; } } /* hero strips: built from the same rip scans as the section tears */ .ih .ih_strip, .hero_v2 .hv_title .ih_strip, .about_hero .ah_title .ah_red { background: url(../media/strip_paper.webp) 0 50% / 170% 100% no-repeat !important; padding: .16em .36em .2em !important; filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)) !important; } .ih_svc .ih_strip, .ih_gear .ih_strip, .ih_kb .ih_strip, .ih_guide .ih_strip, .hero_v2 .hv_title .ih_strip { background-image: url(../media/strip_red.webp) !important; } .ih_legal .ih_strip { background-image: url(../media/strip_paper.webp) !important; } .ih_led .ih_strip { background-image: url(../media/strip_flame.webp) !important; filter: drop-shadow(0 0 22px rgba(242,107,42,.35)) drop-shadow(0 10px 16px rgba(0,0,0,.3)) !important; } /* each page tears from a different part of the strip */ .ih_work .ih_strip { background-position: 30% 50% !important; } .ih_contact .ih_strip { background-position: 70% 50% !important; } .ih_svc .ih_strip { background-position: 55% 50% !important; } .ih_gear .ih_strip { background-position: 90% 50% !important; } .ih_kb .ih_strip { background-position: 15% 50% !important; } .ih_guide .ih_strip { background-position: 75% 50% !important; } .ih_case .ih_strip { background-position: 45% 50% !important; } .ih_live .ih_strip { background-position: 100% 50% !important; } .ih_led .ih_strip { background-position: 40% 50% !important; } .hero_v2 .hv_title .ih_strip { background-position: 20% 50% !important; } .about_hero .ah_title .ah_red { background-position: 60% 50% !important; } /* ragged torn ends on each line of the strip */ .ih .ih_strip, .hero_v2 .hv_title .ih_strip, .about_hero .ah_title .ah_red { -webkit-mask: url(../media/strip_edge_l.svg) left center / 14px 100% no-repeat, linear-gradient(#000,#000) center / calc(100% - 26px) 100% no-repeat, url(../media/strip_edge_r.svg) right center / 14px 100% no-repeat; mask: url(../media/strip_edge_l.svg) left center / 14px 100% no-repeat, linear-gradient(#000,#000) center / calc(100% - 26px) 100% no-repeat, url(../media/strip_edge_r.svg) right center / 14px 100% no-repeat; } .sms_box { margin-top: 16px; padding: 18px 20px; background: #fbf4f1; border-left: 4px solid var(--colorPrimary, #a3122f); } .sms_box p { margin: 6px 0 !important; } /* consent / opt-in */ .consent_box { border: 1.5px dashed rgba(17,16,19,.25); padding: 16px 18px 12px; margin: 6px 0 22px; background: rgba(255,255,255,.55); } .consent_box legend { float: none; width: auto; padding: 0 8px; margin: 0 0 4px -8px; font: 700 13px/1 var(--headingFont, Jost), sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #111013; } .consent_box legend small { font-weight: 400; text-transform: none; letter-spacing: 0; color: #5c5960; } .consent { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; cursor: pointer; } .consent input { width: 18px !important; height: 18px !important; flex: none; margin-top: 3px; accent-color: var(--colorPrimary, #a3122f); border: 0 !important; padding: 0 !important; } .consent span { font-size: 13px; line-height: 1.5; color: #3b383f; } .consent span b { color: #111013; } .consent_links, .pi_rest_contact .form_note { font-size: 12.5px !important; line-height: 1.5; color: #5c5960 !important; } .consent_links a, .form_note a, .cc_priv a { color: var(--colorPrimary, #a3122f); text-decoration: underline; } .cc_priv { font-size: 12.5px; color: #5c5960; margin: 10px 0 0; } .cart_sms span { font-size: 12.5px; } /* ===================== Typeface: Didact Gothic across the site ===================== Didact Gothic ships in one weight (Regular 400). Rather than letting browsers fake bold (smeared, uneven strokes), weight is built deliberately: a hairline stroke for heft, tracking and case for rhythm, size and colour for hierarchy. */ @font-face { font-family: "Didact Gothic"; src: url(../fonts/didact-gothic-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Didact Gothic"; src: url(../fonts/didact-gothic-latin-ext.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --headingFont: "Didact Gothic", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; --paraFont: "Didact Gothic", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; --capsFont: "Didact Gothic", "Avenir Next", "Segoe UI", sans-serif; --bodyFont: var(--paraFont); } html body { font-family: var(--paraFont); font-synthesis-weight: none; font-synthesis: style; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body, p, li, input, select, textarea, button, a, span, td, th, dd, dt, label, summary, blockquote, figcaption, small, em { font-family: inherit; } h1, h2, h3, h4, h5, h6, .ad_btn, button, input, select, textarea { font-family: var(--headingFont) !important; } /* body copy: open, readable */ p, li, dd, .lead, .cc_lede, .hv_lede, .ih_lede p { letter-spacing: .005em; line-height: 1.7; } /* "Display" weight: big headlines get the strongest hairline stroke and slightly tighter tracking */ h1, .hv_title, .ih_title, .cc_title, .ah_title { -webkit-text-stroke: .022em currentColor; paint-order: stroke fill; letter-spacing: .01em; } h2, .slate_txt h2 { -webkit-text-stroke: .02em currentColor; paint-order: stroke fill; letter-spacing: .005em; } /* "Semibold": card titles, names, buttons, numbers */ h3, h4, .ad_btn, b, strong, th, summary, .way h3, .pr_card h3, .cs_id h2, .svc_nav a, .pfx_nav a, .gg_head b, .ls_slide b, [class*="_no"], .cs_stats b, .hv_proof b, .cc_steps b { -webkit-text-stroke: .014em currentColor; paint-order: stroke fill; } /* "Light" caps: kickers and labels stay airy, carried by tracking */ h5, .section_heading h5, .cc_k, .lg_toc_k, .cs_k, .pr_tag, .slate_k, label, legend { -webkit-text-stroke: 0; letter-spacing: .16em; } /* the script signature and icon fonts keep their own faces */ .pr_sig_name { font-family: "Allura", cursive !important; -webkit-text-stroke: 0 !important; } [class^="fa-"], [class*=" fa-"], .fa, .fal, .far, .fas, .fab, i[class*="fa-"] { -webkit-text-stroke: 0 !important; font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important; } .fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; } code, kbd, pre, .lg_meta, .pr_sig_date, .cc_form input[type="date"] { -webkit-text-stroke: 0; } /* ===================== Typeface system from the ADP contract template ===================== Display ........ Segoe UI Black (fallback: Noto Sans 900) Titles ......... Segoe UI Semibold (fallback: Noto Sans 600) Meta & labels .. Segoe UI Light/Semilight (fallback: Noto Sans 300) Body ........... Verdana (fallback: DejaVu Sans, its open-source twin) Segoe UI and Verdana are licensed system fonts, so they are used where installed (Windows, and Verdana on Mac); everyone else gets the closest open-licence match, self-hosted. */ @font-face { font-family: "ADP Sans"; src: local("Segoe UI"), local("SegoeUI"); font-weight: 400; } @font-face { font-family: "ADP Sans"; src: local("Segoe UI Light"), local("SegoeUI-Light"); font-weight: 300; } @font-face { font-family: "ADP Sans"; src: local("Segoe UI Semilight"), local("SegoeUI-Semilight"); font-weight: 350; } @font-face { font-family: "ADP Sans"; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"); font-weight: 600; } @font-face { font-family: "ADP Sans"; src: local("Segoe UI Bold"), local("SegoeUI-Bold"); font-weight: 700; } @font-face { font-family: "ADP Sans"; src: local("Segoe UI Black"), local("SegoeUI-Black"); font-weight: 900; } @font-face { font-family: "Noto Sans ADP"; src: url(../fonts/noto-sans-latin-var.woff2) format("woff2-variations"), url(../fonts/noto-sans-latin-var.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Verdana ADP"; src: local("Verdana"), url(../fonts/dejavu-sans.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Verdana ADP"; src: local("Verdana Bold"), local("Verdana-Bold"), url(../fonts/dejavu-sans-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; } :root { --displayFont: "Segoe UI Black", "ADP Sans", "Noto Sans ADP", "Segoe UI", system-ui, sans-serif; --headingFont: "ADP Sans", "Segoe UI", "Noto Sans ADP", system-ui, -apple-system, sans-serif; --capsFont: "ADP Sans", "Segoe UI", "Noto Sans ADP", system-ui, sans-serif; --paraFont: "Verdana ADP", Verdana, "DejaVu Sans", Geneva, sans-serif; --bodyFont: var(--paraFont); } html body { font-family: var(--paraFont); font-synthesis: none; font-size: 15px; } /* clear the single-weight workaround */ h1, h2, h3, h4, h5, h6, b, strong, th, summary, .ad_btn, .hv_title, .ih_title, .cc_title, .ah_title, [class*="_no"], .cs_stats b, .hv_proof b, .cc_steps b, .way h3, .pr_card h3, .cs_id h2, .svc_nav a, .pfx_nav a, .gg_head b, .ls_slide b, .slate_txt h2 { -webkit-text-stroke: 0 !important; } /* body copy: Verdana is wide and screen-tuned, so it runs a little smaller with generous leading */ p, li, dd, td, blockquote, .lead, .cc_lede, .hv_lede, .ih_lede p, .lg_sheet p, .lg_sheet li, .faq_list details p, .lv_help details p { font-family: var(--paraFont) !important; letter-spacing: 0; line-height: 1.72; } p.lead, .svc_block p.lead, .cc_lede, .hv_lede, .lg_intro { font-size: clamp(15px, 1.15vw, 17px) !important; } /* headings: Segoe Semibold for titles, Black for display */ h1, h2, h3, h4, h6, summary, .ad_btn, button, input, select, textarea, label, legend, th, .svc_nav a, .pfx_nav a { font-family: var(--headingFont) !important; } h2, h3 { font-weight: 600 !important; letter-spacing: -.01em; } h4, summary, .faq_list summary, .lv_help summary { font-weight: 600 !important; letter-spacing: -.005em; } b, strong { font-weight: 700; } h1, .hv_title, .ih_title, .cc_title, .ah_title, .banner_title, .slate_txt h2, .svc_sec h2, .led_promo h2, .proof_reel h2, .lg_head h1 { font-family: var(--displayFont) !important; font-weight: 900 !important; letter-spacing: -.015em !important; } .hv_title > span:first-child, .about_hero .ah_title span:not(.ah_red) { font-weight: 300 !important; letter-spacing: .02em !important; } .ih_strip, .ah_red, .svc_strip { font-family: var(--displayFont) !important; font-weight: 900 !important; } /* big hero numerals and stats: Black, tight */ .svc_bignum, .slate_no, .way_no, .pr_no, .cs_stats b, .hv_proof b, .led_specs b, .ch_codes b, .ls_slide b, .stat b, .counter b { font-family: var(--displayFont) !important; font-weight: 900 !important; letter-spacing: -.02em; } /* kickers, meta, labels: Segoe Light/Semilight caps with wide tracking (the contract's "Version" and footer line) */ h5, .section_heading h5, .cc_k, .lg_toc_k, .cs_k, .pr_tag, .slate_k, .hv_top, .lg_meta, .ah_k, .ch_k, .pr_prog em, .pr_sec small, .cc_form label span, .consent_box legend small, footer p, .legal_links a, .lg_end { font-family: var(--capsFont) !important; font-weight: 300 !important; } h5, .section_heading h5, .cc_k, .cs_k, .pr_tag, .slate_k, .lg_toc_k { letter-spacing: .2em !important; } .ad_btn { font-weight: 600 !important; letter-spacing: .06em; } label, .tf__contact_form_imput label { font-weight: 600 !important; } .lg_meta, .pr_sig_date, code, kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace !important; font-weight: 400 !important; } .pr_sig_name { font-family: "Allura", cursive !important; font-weight: 400 !important; } [class^="fa-"], [class*=" fa-"], i[class*="fa-"] { font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important; } i.fa-light, .fa-light, .fal { font-weight: 300 !important; } i.fa-regular, .fa-regular, .far { font-weight: 400 !important; } i.fa-solid, .fa-solid, .fas { font-weight: 900 !important; } .fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } .ih h1.ih_title, .ih h1.ih_title > span, .ih_legal .lg_head h1.ih_title span { font-family: var(--displayFont) !important; font-weight: 900 !important; letter-spacing: -.015em !important; } .ih h1.ih_title > span:first-child:not(.ih_strip) { font-weight: 300 !important; letter-spacing: .01em !important; } .ih h1.ih_title { line-height: 1.16 !important; } .ih h1.ih_title .ih_strip { line-height: 1.32 !important; } /* NHL rental credit */ .pkg_credit { display: inline-flex; align-items: center; gap: 8px; margin: -2px 0 12px; padding: 6px 10px; background: #111013; color: #fff !important; font: 600 12px/1.3 var(--headingFont) !important; letter-spacing: .02em; transform: rotate(-1deg); } .pkg_credit i { color: #f26b2a; } .gear_credit { margin-top: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px 30px; background: #111013 url(../media/paper.jpg) center / 600px; background-blend-mode: soft-light; color: #fff; border-left: 6px solid var(--colorPrimary, #a3122f); box-shadow: 0 24px 50px rgba(17,16,19,.2); } .gc_stamp { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border: 3px solid #f26b2a; border-radius: 50%; transform: rotate(-10deg); text-align: center; color: #f26b2a; } .gc_stamp b { font: 900 18px/1 var(--displayFont); text-transform: uppercase; letter-spacing: .08em; } .gc_stamp small { font: 600 11px/1.2 var(--headingFont); margin-top: 4px; letter-spacing: .04em; } .gc_k { font: 300 12px/1 var(--capsFont); letter-spacing: .2em; text-transform: uppercase; color: #f6a57e; } .gear_credit h3 { color: #fff; font-size: clamp(20px, 2vw, 26px) !important; margin: 8px 0 8px; } .gear_credit p { color: rgba(255,255,255,.78); font-size: 14px; margin: 0; } .gc_btn { white-space: nowrap; } .wwa_credit { margin-top: 8px !important; font-size: 13px !important; color: #3b383f; } .wwa_credit i { color: var(--colorPrimary, #a3122f); margin-right: 4px; } .wwa_credit a { color: #111013; font-weight: 700; border-bottom: 1.5px solid var(--colorPrimary, #a3122f); } @media (max-width: 991.98px) { .gear_credit { grid-template-columns: 1fr; text-align: left; } .gc_stamp { width: 92px; height: 92px; } } .gear_credit { grid-template-columns: 220px minmax(0, 1fr) auto; } .gc_video { position: relative; margin: 0; width: 220px; aspect-ratio: 9 / 16; transform: rotate(-2deg); background: #fff; padding: 8px 8px 30px; box-shadow: 0 20px 40px rgba(0,0,0,.45); } .gc_video video { width: 100%; height: 100%; object-fit: cover; display: block; } .gc_video .gc_stamp { position: absolute; right: -34px; bottom: -18px; width: 96px; height: 96px; background: rgba(17,16,19,.85); } .gc_note { font-size: 12px !important; color: rgba(255,255,255,.55) !important; margin-top: 10px !important; } @media (max-width: 991.98px) { .gear_credit { grid-template-columns: 1fr; } .gc_video { width: 200px; margin: 0 auto 10px; } } /* rental credit: torn top and bottom edges */ .gear_credit { position: relative; border-left: 0 !important; margin-top: 70px; margin-bottom: 40px; background: #111013 url(../media/paper.jpg) 0 0 / 600px; background-blend-mode: soft-light; } .gc_rip { position: absolute !important; left: 0; width: 100%; z-index: 1; pointer-events: none; } .gc_rip_t { bottom: calc(100% - 1px); } .gc_rip_b { top: calc(100% - 1px); } .gc_rip .rip_fill { background: #111013 url(../media/paper.jpg) 0 0 / 600px !important; background-blend-mode: soft-light !important; } .gear_credit > *:not(.gc_rip) { position: relative; z-index: 2; } .gear_credit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--colorPrimary, #a3122f); z-index: 2; } .gear_credit { margin-top: 140px !important; margin-bottom: 150px !important; box-shadow: none !important; background-attachment: scroll; } .gear_credit::before { display: none; } .gc_rip .rip_fill { inset: -1px 0 -3px !important; } .gc_rip_b .rip_fill { inset: -3px 0 -1px !important; } #packages { position: relative; z-index: 3; overflow: visible !important; padding-bottom: 20px !important; } @media (max-width: 767.98px) { .gear_credit { margin-top: 80px !important; margin-bottom: 80px !important; } } .gear_credit, .gc_rip .rip_fill { background: #1d1b1f !important; background-blend-mode: normal !important; } .gc_rip .rip_shade { filter: none !important; } /* ================= Photo galleries (galleries.html) ================= */ /* hero: prints on a light table */ .ih_lighttable { position: relative; height: 440px; } .gl_print { position: absolute; margin: 0; width: 54%; background: #fff; padding: 10px 10px 34px; box-shadow: 0 30px 60px rgba(30,0,6,.45); transition: transform .6s cubic-bezier(.2,.7,.2,1); } .gl_print img { height: 220px !important; object-fit: cover; } .gl_print figcaption { position: absolute; left: 12px; bottom: 9px; font: 400 11px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; color: var(--colorPrimary); } .gl_print.p0 { left: 0; top: 46px; transform: rotate(-6deg); } .gl_print.p1 { left: 24%; top: 0; transform: rotate(2deg); z-index: 2; } .gl_print.p2 { right: 0; top: 96px; transform: rotate(7deg); z-index: 3; } .ih_lighttable:hover .p0 { transform: rotate(-10deg) translateX(-14px); } .ih_lighttable:hover .p2 { transform: rotate(11deg) translateX(14px); } .gl_loupe { position: absolute; z-index: 5; right: 22%; bottom: 18px; width: 92px; height: 92px; border-radius: 50%; border: 7px solid #111013; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 60%); box-shadow: 0 18px 40px rgba(0,0,0,.45); display: grid; place-items: center; color: #111013; font-size: 26px; } .gl_loupe::after { content: ""; position: absolute; width: 16px; height: 62px; background: #111013; border-radius: 8px; right: -30px; bottom: -42px; transform: rotate(-45deg); } .gl_lt_lbl { position: absolute; left: 0; bottom: -6px; z-index: 6; background: #111013; color: #fff; font: 400 11px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; padding: 10px 14px; transform: rotate(-2deg); } .gl_lt_lbl i { color: var(--colorFlame); margin-right: 6px; } @media (max-width: 991.98px) { .ih_lighttable { height: 360px; margin-top: 10px; } .gl_print img { height: 170px !important; } .gl_loupe { width: 70px; height: 70px; font-size: 20px; } } @media (max-width: 575.98px) { .ih_lighttable { height: 290px; } .gl_print { width: 62%; } .gl_print img { height: 130px !important; } .gl_loupe { display: none; } } /* find-your-gallery card */ .gl_find_wrap { position: relative; z-index: 3; margin-top: -40px; } .gl_find { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: center; background: #fff url(../media/paper.jpg) center / 480px; padding: 30px 34px; box-shadow: 0 30px 70px rgba(17,16,19,.16); border-top: 5px solid var(--colorPrimary); } .gl_find h2 { font-size: 30px; margin: 2px 0 6px; } .gl_find p { margin: 0; color: #4a4950; } .gl_find_r { display: flex; flex-wrap: wrap; gap: 10px; } .gl_find_r input { flex: 1 1 260px; min-width: 0; height: 56px; border: 2px solid #111013; background: #fff; padding: 0 16px; font-size: 16px; color: #111013; } .gl_find_r input:focus { outline: 3px solid rgba(163,18,47,.25); border-color: var(--colorPrimary); } .gl_find_r .ad_btn { height: 56px; } .gl_find_msg { flex-basis: 100%; min-height: 1em; font-size: 14px; color: var(--colorPrimary) !important; } @media (max-width: 767.98px) { .gl_find { grid-template-columns: 1fr; padding: 24px 20px; gap: 16px; } .gl_find_wrap { margin-top: -20px; } .gl_find_r .ad_btn { width: 100%; justify-content: center; } } /* gallery index */ .gl_chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .gl_chip { border: 1.5px solid #111013; background: transparent; padding: 8px 16px; font: 400 12px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: #111013; cursor: pointer; transition: background .2s, color .2s; } .gl_chip.on, .gl_chip:hover { background: #111013; color: #fff; } .gl_cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 34px 28px; } .gl_card { display: block; color: #111013 !important; text-decoration: none; background: #fff; padding: 12px 12px 18px; box-shadow: 0 16px 40px rgba(17,16,19,.12); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; } .gl_card.c0 { transform: rotate(-.6deg); } .gl_card.c2 { transform: rotate(.6deg); } .gl_card:hover { transform: translateY(-6px) rotate(0); box-shadow: 0 30px 60px rgba(17,16,19,.2); } .gl_card_ph { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #1d1b1f; } .gl_card_ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; } .gl_card:hover .gl_card_ph img { transform: scale(1.05); } .gl_card_ph > i { position: absolute; inset: 0; display: grid; place-items: center; color: #55545a; font-size: 40px; } .gl_card_n { position: absolute; left: 0; bottom: 14px; background: var(--colorPrimary); color: #fff; font: 400 11px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; } .gl_card_n:empty { display: none; } .gl_card_t { display: block; padding: 16px 4px 0; } .gl_card_t small { display: block; font: 400 11px/1.3 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; color: var(--colorPrimary); } .gl_card_t b { display: block; font-family: var(--headingFont); font-size: 24px; line-height: 1.15; margin: 6px 0 4px; } .gl_card_t em { display: block; font-style: normal; color: #55545a; font-size: 14px; } .gl_card_go { display: inline-flex; gap: 8px; align-items: center; margin: 12px 4px 0; font: 400 12px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: #111013; border-bottom: 2px solid var(--colorPrimary); padding-bottom: 4px; } .gl_loading { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; padding: 60px 0; } .gl_loading i { width: 10px; height: 10px; background: var(--colorPrimary); animation: glpulse 1s infinite ease-in-out; } .gl_loading i:nth-child(2) { animation-delay: .15s; } .gl_loading i:nth-child(3) { animation-delay: .3s; } @keyframes glpulse { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } } .gl_empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: #55545a; } .gl_empty i { font-size: 34px; color: var(--colorPrimary); display: block; margin-bottom: 10px; } /* viewer */ body.gl_viewing .ih, body.gl_viewing .gl_find_wrap, body.gl_viewing [data-gal-index], body.gl_viewing #how, body.gl_viewing .cta_close { display: none !important; } .gl_view { background: #111013; color: #fff; min-height: 80vh; padding-bottom: 80px; } .gl_view_head { background: linear-gradient(180deg, #a3122f, #800012); padding: 140px 0 34px; margin-bottom: 30px; position: relative; } .gl_view_head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; background: #111013; clip-path: polygon(0 60%, 4% 20%, 9% 70%, 15% 30%, 22% 80%, 28% 35%, 35% 75%, 41% 25%, 48% 70%, 55% 30%, 61% 80%, 68% 40%, 75% 75%, 82% 25%, 88% 70%, 94% 35%, 100% 65%, 100% 100%, 0 100%); } .gl_back { display: inline-flex; gap: 8px; align-items: center; color: #ffd9c9 !important; font: 400 12px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; } .gl_back:hover { color: #fff !important; } .gl_vh_row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; } .gl_vh_t .ah_k { color: #ffd9c9; } .gl_vh_t h1 { color: #fff !important; font-family: var(--capsFont) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(32px, 4vw, 58px) !important; line-height: 1.05 !important; margin: 0 0 10px; } .gl_vh_meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: #f6dfe4; font-size: 15px; } .gl_vh_meta li + li::before { content: "·"; margin-right: 18px; color: #ffb3a1; } .gl_vh_tools { display: flex; flex-wrap: wrap; gap: 8px; } .gl_tool { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.45); color: #fff !important; padding: 10px 14px; font: 400 12px/1 var(--capsFont); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; } .gl_tool:hover, .gl_tool.on { background: #fff; color: #111013 !important; } .gl_tool b { background: #111013; color: #fff; padding: 3px 7px; font-weight: 400; min-width: 22px; text-align: center; } .gl_tool.on b, .gl_tool:hover b { background: var(--colorPrimary); } .gl_grid { columns: 3 300px; column-gap: 14px; } .gl_tile { position: relative; break-inside: avoid; margin: 0 0 14px; background: #1d1b1f; aspect-ratio: var(--r); overflow: hidden; } .gl_tile_open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .gl_tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s, opacity .4s; } .gl_tile:hover img { transform: scale(1.03); } .gl_tile.gl_err { display: none; } .gl_heart { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(17,16,19,.55); color: #fff; font-size: 17px; display: grid; place-items: center; opacity: 0; transition: opacity .2s, transform .2s, background .2s; cursor: pointer; } .gl_tile:hover .gl_heart, .gl_heart.on, .gl_heart:focus-visible { opacity: 1; } .gl_heart.on { background: var(--colorPrimary); } .gl_heart:active { transform: scale(.9); } @media (hover: none) { .gl_heart { opacity: 1; } } .gl_no { position: absolute; left: 10px; bottom: 8px; font: 400 10px/1 var(--capsFont); letter-spacing: .14em; color: #f2a900; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; } .gl_state { text-align: center; padding: 70px 20px; } .gl_state i { font-size: 40px; color: var(--colorFlame); } .gl_state h2 { color: #fff; margin: 14px 0 8px; } .gl_state p { color: #c9c8cd; margin-bottom: 22px; } .gl_view .gl_empty { color: #c9c8cd; } .gl_send { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 520px; margin: 20px auto 0; background: #fff; color: #111013; padding: 12px 12px 12px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.5); border-left: 5px solid var(--colorPrimary); } .gl_send b { font-family: var(--headingFont); font-size: 20px; color: var(--colorPrimary); } @media (max-width: 575.98px) { .gl_grid { columns: 2 150px; column-gap: 8px; } .gl_tile { margin-bottom: 8px; } .gl_view_head { padding-top: 110px; } .gl_tool { padding: 9px 11px; } } /* lightbox */ body.gl_lb_open { overflow: hidden; } .gl_lb { position: fixed; inset: 0; z-index: 10000; background: rgba(10,9,11,.97); display: grid; grid-template-rows: auto 1fr; } .gl_lb[hidden] { display: none; } .gl_lb_bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: #fff; } .gl_lb_n { font: 400 12px/1 var(--capsFont); letter-spacing: .16em; color: #c9c8cd; } .gl_lb_tools { display: flex; gap: 6px; } .gl_lb_tools button, .gl_lb_tools a { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: rgba(255,255,255,.08); color: #fff !important; font-size: 18px; cursor: pointer; } .gl_lb_tools button:hover, .gl_lb_tools a:hover { background: rgba(255,255,255,.2); } .gl_lb_tools [data-lb-fav].on { background: var(--colorPrimary); } .gl_lb_fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 70px 24px; min-height: 0; } .gl_lb_fig img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); transition: opacity .25s; } .gl_lb.loading .gl_lb_fig img { opacity: .35; } .gl_lb_fig figcaption { color: #c9c8cd; font-size: 14px; margin-top: 12px; min-height: 1em; text-align: center; } .gl_lb_nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 80px; border: 0; background: rgba(255,255,255,.06); color: #fff; font-size: 24px; cursor: pointer; } .gl_lb_nav:hover { background: var(--colorPrimary); } .gl_lb_nav.prev { left: 8px; } .gl_lb_nav.next { right: 8px; } @media (max-width: 767.98px) { .gl_lb_fig { padding: 0 8px 16px; } .gl_lb_nav { top: auto; bottom: 14px; transform: none; height: 48px; width: 48px; } } /* how it works */ .gl_lede { font-size: 17px; line-height: 1.7; } .gl_how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .gl_how_i { position: relative; background: #fff; padding: 26px 22px 24px; box-shadow: 0 14px 36px rgba(17,16,19,.08); } .gl_how_i span { position: absolute; right: 16px; top: 14px; font: 400 12px/1 var(--capsFont); letter-spacing: .14em; color: #b9b8bd; } .gl_how_i i { font-size: 30px; color: var(--colorPrimary); } .gl_how_i h3 { font-size: 20px; margin: 14px 0 8px; } .gl_how_i p { margin: 0; font-size: 15px; line-height: 1.6; } @media (max-width: 991.98px) { .gl_how { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .gl_how { grid-template-columns: 1fr; } } .gl_tool span { font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; } /* ================= Photography page (photography.html) ================= */ /* hero: camera viewfinder */ .ih_vf { position: relative; background: #0c0b0d; padding: 16px 16px 0; box-shadow: 0 40px 80px rgba(30,0,6,.5); transform: rotate(1.2deg); border-radius: 6px; } .vf_frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; } .vf_frame img { width: 100%; height: 100% !important; object-fit: cover; } .vf_c { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,.85); } .vf_c.tl { left: 12px; top: 12px; border-right: 0; border-bottom: 0; } .vf_c.tr { right: 12px; top: 12px; border-left: 0; border-bottom: 0; } .vf_c.bl { left: 12px; bottom: 12px; border-right: 0; border-top: 0; } .vf_c.br { right: 12px; bottom: 12px; border-left: 0; border-top: 0; } .vf_af { position: absolute; width: 34px; height: 24px; border: 1.5px solid rgba(255,255,255,.55); } .vf_af.a1 { left: 36%; top: 34%; } .vf_af.a2 { left: 49%; top: 30%; } .vf_af.a3 { left: 62%; top: 34%; } .vf_af.on { border-color: #ff3b30; box-shadow: 0 0 0 1px rgba(255,59,48,.4); animation: vfaf 2.4s infinite; } @keyframes vfaf { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .2; } 90% { opacity: 1; } } .vf_top { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font: 400 11px/1 var(--capsFont); letter-spacing: .16em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); } .vf_rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; margin-right: 8px; vertical-align: 1px; } .vf_bat { position: absolute; right: 48px; top: 15px; width: 24px; height: 11px; border: 1.5px solid #fff; border-radius: 2px; } .vf_bat i { position: absolute; inset: 1px 6px 1px 1px; background: #8ee08e; } .vf_bar { display: flex; justify-content: space-between; gap: 10px; padding: 12px 6px 14px; font: 400 13px/1 var(--capsFont); letter-spacing: .1em; color: #f2f2f2; } .vf_bar .vf_cnt { color: #f2a900; } @media (max-width: 575.98px) { .vf_bar { font-size: 10.5px; gap: 4px; } .vf_top { font-size: 9px; } .vf_bat { display: none; } } .ph_lede { font-size: 17px; line-height: 1.7; } .ph_specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } .ph_spec { background: #fff; padding: 12px 12px 22px; box-shadow: 0 16px 40px rgba(17,16,19,.1); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; } .ph_spec.c0 { transform: rotate(-.7deg); } .ph_spec.c2 { transform: rotate(.7deg); } .ph_spec:hover { transform: translateY(-6px) rotate(0); box-shadow: 0 28px 60px rgba(17,16,19,.18); } .ph_spec_img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1d1b1f; } .ph_spec_img img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .8s; } .ph_spec:hover .ph_spec_img img { transform: scale(1.05); } .ph_spec_no { position: absolute; left: 0; bottom: 14px; background: var(--colorPrimary); color: #fff; font: 400 11px/1 var(--capsFont); letter-spacing: .16em; padding: 8px 12px; } .ph_spec h3 { font-size: 22px; margin: 18px 6px 8px; } .ph_spec p { margin: 0 6px; font-size: 15px; line-height: 1.65; } @media (max-width: 991.98px) { .ph_specs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .ph_specs { grid-template-columns: 1fr; } } .ph_vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ph_vs_col { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); padding: 24px 22px; } .ph_vs_col.on { background: #fff; border-color: #fff; transform: rotate(1deg); box-shadow: 0 30px 60px rgba(0,0,0,.4); } .ph_vs_col .ah_k { color: #a8a7ad; margin-bottom: 14px; } .ph_vs_col.on .ah_k { color: var(--colorPrimary); } .ph_vs_col ul { list-style: none; margin: 0; padding: 0; } .ph_vs_col li { padding: 10px 0 10px 28px; position: relative; color: #c9c8cd; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; } .ph_vs_col li::before { content: "\00d7"; position: absolute; left: 4px; top: 7px; color: #77767c; font-size: 20px; } .ph_vs_col.on li { color: #111013; border-color: #eee; } .ph_vs_col.on li::before { content: "\2713"; color: var(--colorPrimary); font-size: 16px; top: 10px; } @media (max-width: 575.98px) { .ph_vs { grid-template-columns: 1fr; } } .ph_pkgs { grid-template-columns: repeat(4, 1fr) !important; } .ph_pkg { display: flex; flex-direction: column; } .ph_pkg .check_list { margin: 14px 0 20px; flex: 1; } .ph_pkg .check_list li { font-size: 14.5px; } .ph_pkg_len { display: inline-flex; gap: 8px; align-items: center; font: 400 12px/1 var(--capsFont); letter-spacing: .12em; text-transform: uppercase; color: var(--colorPrimary); margin-top: 4px; } .pkg_hot .ph_pkg_len { color: var(--colorPrimary); } @media (max-width: 1199.98px) { .ph_pkgs { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 575.98px) { .ph_pkgs { grid-template-columns: 1fr !important; } } .ph_adds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ph_add { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1.5px solid #e6e3dd; background: #fff; } .ph_add i { font-size: 24px; color: var(--colorPrimary); width: 30px; flex: none; margin-top: 2px; } .ph_add h4 { font-size: 17px; margin: 0 0 4px; } .ph_add p { margin: 0; font-size: 14.5px; line-height: 1.55; } @media (max-width: 991.98px) { .ph_adds { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .ph_adds { grid-template-columns: 1fr; } } .ph_steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; } .ph_steps li { position: relative; padding: 26px 24px 0 0; border-top: 3px solid #111013; } .ph_steps li::before { content: ""; position: absolute; left: 0; top: -9px; width: 15px; height: 15px; border-radius: 50%; background: var(--colorPrimary); box-shadow: 0 0 0 4px #fff; } .ph_steps span { font: 400 12px/1 var(--capsFont); letter-spacing: .16em; color: var(--colorPrimary); } .ph_steps h4 { font-size: 22px; margin: 8px 0 8px; } .ph_steps p { margin: 0; font-size: 15px; line-height: 1.6; } @media (max-width: 767.98px) { .ph_steps { grid-template-columns: 1fr 1fr; gap: 30px 0; } } @media (max-width: 479.98px) { .ph_steps { grid-template-columns: 1fr; } } .ph_dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; background: #fff; box-shadow: 0 16px 40px rgba(17,16,19,.08); } .ph_dl dt, .ph_dl dd { margin: 0; padding: 15px 20px; border-bottom: 1px solid #eee9e2; } .ph_dl dt { font: 400 12px/1.4 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: var(--colorPrimary); padding-top: 18px; } .ph_dl dd { font-size: 15.5px; color: #111013; } @media (max-width: 575.98px) { .ph_dl { grid-template-columns: 1fr; } .ph_dl dt { border-bottom: 0; padding-bottom: 0; } } .ph_kit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ph_kit_i { padding: 24px 22px; background: #111013; color: #fff; } .ph_kit_i i { font-size: 28px; color: var(--colorFlame); } .ph_kit_i h4 { color: #fff; font-size: 19px; margin: 14px 0 6px; } .ph_kit_i p { color: #c9c8cd; margin: 0; font-size: 14.5px; line-height: 1.6; } @media (max-width: 991.98px) { .ph_kit { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .ph_kit { grid-template-columns: 1fr; } } /* nav: fit eight items */ #navbarNav > ul { display: flex; flex-wrap: nowrap; white-space: nowrap; } #navbarNav > ul > li > a { padding-left: 16px !important; padding-right: 16px !important; } @media (max-width: 1399.98px) { #navbarNav > ul > li > a { padding-left: 11px !important; padding-right: 11px !important; font-size: 15px !important; } } /* ================= Kit builder (gear.html#kit-builder) ================= */ .kt_section { background: #f4f1ec url(../media/paper.jpg) center / 480px; } .kt_shell { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: #fff; box-shadow: 0 30px 80px rgba(17,16,19,.16); border-top: 5px solid var(--colorPrimary); position: relative; } .kt_stagewrap { position: relative; background: #111013; min-height: 420px; } .kt_svg { display: block; width: 100%; height: 100%; } .kt_tally { position: absolute; left: 16px; top: 16px; background: rgba(255,255,255,.96); padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transform: rotate(-2deg); } .kt_tally span { display: block; font: 400 10.5px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; color: var(--colorPrimary); } .kt_tally b { display: block; font-family: var(--headingFont); font-size: 26px; line-height: 1.1; color: #111013; transition: transform .3s; } .kt_tally small { font-size: 12px; color: #55545a; } .kt_demo { position: absolute; right: 14px; top: 16px; border: 0; background: var(--colorPrimary); color: #fff; padding: 11px 16px; font: 400 12px/1 var(--capsFont); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .kt_demo:hover { background: #fff; color: #111013; } .kt_demo i { margin-right: 6px; } .kt_demoing .kt_demo { opacity: .4; } /* scene states */ .kt_svg .kt_spk, .kt_svg .kt_fill, .kt_svg .kt_mixer, .kt_svg .kt_cables, .kt_svg .kt_disp, .kt_svg .kt_waves, .kt_svg .kt_crewg { opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1.2); transform-box: fill-box; transform-origin: 50% 100%; } .kt_svg .kt_spk, .kt_svg .kt_fill { transform: translateY(-40px); } .kt_svg.has_spk .kt_spk { opacity: 1; transform: none; } .kt_svg.big_spk .kt_spk .kt_col { height: 148px; y: 104px; } .kt_svg.has_fill .kt_fill { opacity: 1; transform: none; transition-delay: .25s; } .kt_svg .kt_mixer { transform: translateY(30px); } .kt_svg.has_mix .kt_mixer { opacity: 1; transform: none; } .kt_svg .kt_cab { fill: none; stroke: #f26b2a; stroke-width: 2; stroke-dasharray: 520; stroke-dashoffset: 520; opacity: .7; } .kt_svg.has_mix .kt_cables { opacity: 1; } .kt_svg.has_mix .kt_cab { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease .3s; } .kt_svg .kt_waves path { fill: none; stroke: #f7f3ee; stroke-width: 2; opacity: 0; } .kt_svg.playing.has_spk .kt_waves { opacity: 1; } .kt_svg.playing.has_spk .kt_waves path { animation: ktwave 1.6s infinite ease-out; } .kt_svg .kt_waves path:nth-child(2n) { animation-delay: .4s !important; } @keyframes ktwave { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } } .kt_svg[data-disp="tv"] .kt_d_tv, .kt_svg[data-disp="proj"] .kt_d_proj, .kt_svg[data-disp="led"] .kt_d_led { opacity: 1; transform: none; } .kt_svg .kt_disp { transform: translateY(40px) scaleY(.6); } .kt_svg.has_crew .kt_crewg { opacity: 1; } .kt_p { fill: #4a4650; opacity: 0; animation: ktpop .4s forwards; animation-delay: var(--d); } .kt_p rect { fill: #3a373e; } @keyframes ktpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .kt_mic { opacity: 0; animation: ktpop .45s forwards; animation-delay: var(--d); } .kt_svg .kt_spot { opacity: .6; } @media (prefers-reduced-motion: reduce) { .kt_svg *, .kt_p, .kt_mic { animation: none !important; transition: none !important; opacity: 1; } } /* panel */ .kt_panel { display: flex; flex-direction: column; padding: 26px 30px 24px; min-height: 420px; } .kt_steps { display: flex; gap: 4px; list-style: none; margin: 0 0 22px; padding: 0; counter-reset: k; } .kt_steps li { flex: 1; } .kt_steps button { width: 100%; border: 0; background: none; padding: 8px 0 0; border-top: 4px solid #e6e3dd; text-align: left; font: 400 10.5px/1.2 var(--capsFont); letter-spacing: .12em; text-transform: uppercase; color: #8a8990; cursor: pointer; } .kt_steps button span { display: none; } .kt_steps button:disabled { cursor: default; } .kt_steps li.done button { border-color: #111013; color: #111013; } .kt_steps li.on button { border-color: var(--colorPrimary); color: var(--colorPrimary); } .kt_body { flex: 1; } .kt_view { animation: ktin .4s cubic-bezier(.2,.7,.2,1); } @keyframes ktin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .kt_view h3 { font-size: 26px; margin: 0 0 6px; } .kt_lead { color: #4a4950; margin: 0 0 16px; font-size: 15.5px; } .kt_opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .kt_opt { position: relative; text-align: left; border: 1.5px solid #dcd8d1; background: #fff; padding: 14px 14px 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; } .kt_opt:hover { border-color: #111013; } .kt_opt.on { border-color: var(--colorPrimary); box-shadow: 0 0 0 2px var(--colorPrimary) inset; } .kt_opt b { display: block; font-family: var(--headingFont); font-size: 16px; color: #111013; } .kt_opt small { display: block; font-size: 13px; line-height: 1.45; color: #55545a; margin-top: 3px; } .kt_opt em { position: absolute; right: 8px; top: -9px; background: var(--colorPrimary); color: #fff; font: 400 9.5px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; font-style: normal; padding: 5px 7px; } .kt_tap { transform: scale(.97); box-shadow: 0 0 0 3px rgba(242,107,42,.5) !important; } .kt_chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .kt_chip { border: 1.5px solid #111013; background: #fff; padding: 7px 12px; font-size: 13px; cursor: pointer; } .kt_chip:hover { background: #111013; color: #fff; } .kt_count { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #eee9e2; } .kt_count b { display: block; font-size: 15px; } .kt_count small { color: #6a6970; font-size: 13px; } .kt_step { display: flex; align-items: center; border: 1.5px solid #111013; } .kt_step button { width: 38px; height: 38px; border: 0; background: #fff; font-size: 20px; cursor: pointer; } .kt_step button:disabled { opacity: .3; cursor: default; } .kt_step output { width: 34px; text-align: center; font-family: var(--headingFont); font-size: 18px; } .kt_list { list-style: none; margin: 14px 0 0; padding: 0; } .kt_list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid #eee9e2; animation: ktin .4s both; } .kt_q { font-family: var(--headingFont); color: var(--colorPrimary); font-size: 17px; } .kt_list b { display: block; font-size: 14.5px; line-height: 1.3; } .kt_list small { display: block; font-size: 12.5px; line-height: 1.45; color: #6a6970; margin-top: 2px; } .kt_r { font-family: var(--headingFont); font-size: 14.5px; white-space: nowrap; } .kt_r small { display: inline; font-size: 11px; color: #8a8990; } .kt_note { margin: 14px 0 0; font-size: 14px; color: #4a4950; } .kt_note i { color: var(--colorPrimary); margin-right: 6px; } .kt_toggle { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: #4a4950; cursor: pointer; } .kt_toggle input { margin-top: 3px; accent-color: var(--colorPrimary); } .kt_crew { margin-bottom: 4px; } .kt_final { max-height: 260px; overflow: auto; } .kt_sum { display: flex; justify-content: space-between; align-items: baseline; border-top: 3px solid #111013; padding-top: 10px; margin-top: 4px; } .kt_sum span { font: 400 12px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; } .kt_sum b { font-family: var(--headingFont); font-size: 28px; color: var(--colorPrimary); } .kt_fine { font-size: 12.5px; color: #6a6970; margin: 6px 0 12px; } .kt_cta { display: flex; flex-wrap: wrap; gap: 10px; } .kt_nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; } .kt_back { border: 0; background: none; font: 400 12px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: #111013; cursor: pointer; } .kt_next:disabled { opacity: .35; pointer-events: none; } .kt_pointer { position: absolute; left: 0; top: 0; z-index: 20; width: 26px; height: 26px; border-radius: 50%; background: rgba(242,107,42,.35); border: 2px solid #f26b2a; pointer-events: none; transition: transform .6s cubic-bezier(.3,.7,.2,1); box-shadow: 0 0 0 8px rgba(242,107,42,.15); } @media (max-width: 991.98px) { .kt_shell { grid-template-columns: 1fr; } .kt_stagewrap { min-height: 0; } .kt_panel { min-height: 0; padding: 22px 18px; } } @media (max-width: 575.98px) { .kt_opts { grid-template-columns: 1fr; } .kt_view h3 { font-size: 22px; } .kt_steps button { font-size: 9px; letter-spacing: .06em; } .kt_tally b { font-size: 20px; } .kt_demo { font-size: 10.5px; padding: 9px 12px; } } .kt_toggle { display: flex !important; align-items: flex-start; gap: 10px; width: 100%; margin: 14px 0 0 !important; text-transform: none !important; letter-spacing: 0 !important; } .kt_toggle input { width: 18px !important; height: 18px !important; flex: none; margin: 2px 0 0 !important; } .kt_toggle span { font-family: var(--paraFont) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #4a4950 !important; line-height: 1.5 !important; } @media (max-width: 767.98px) { .kt_demo { top: auto !important; bottom: 10px; right: 10px; } .kt_tally { left: 10px; top: 10px; padding: 7px 10px; } } .cart_drawer.svc_only .cd_end { display: none !important; } .cart_drawer.svc_only .cart_dates { grid-template-columns: 1fr !important; } .cart_notes { display: block; margin: 10px 0 4px; } .cart_notes span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #111013; } .cart_notes textarea { width: 100%; border: 1.5px solid #d9d5ce; padding: 10px 12px; font-size: 14px; resize: vertical; min-height: 64px; } .cart_notes textarea:focus { outline: none; border-color: var(--colorPrimary); } /* ================= Photography page v2: booking-first ================= */ .pfx_flash { position: fixed; inset: 0; background: #fff; pointer-events: none; opacity: 0; z-index: 99999; } .pfx_flash.go { animation: pfxflash .45s ease-out; } @keyframes pfxflash { 0% { opacity: 0; } 12% { opacity: .75; } 100% { opacity: 0; } } .rv { opacity: 0; transform: translateY(26px) rotateX(8deg); transition: opacity .7s ease calc(var(--i, 0) * 80ms), transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 80ms); } .rv.in { opacity: 1; transform: none; } [data-tilt], [data-tilt-deep] { transition: transform .35s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } } /* finder */ .pf_section { background: #f4f1ec url(../media/paper.jpg) center / 480px; } .pf_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; perspective: 1200px; } .pf_card { position: relative; text-align: left; border: 0; background: #fff; padding: 26px 22px 22px; box-shadow: 0 18px 44px rgba(17,16,19,.12); cursor: pointer; overflow: hidden; isolation: isolate; } .pf_card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(163,18,47,.14), transparent 60%); z-index: -1; transition: opacity .3s; opacity: 0; } .pf_card:hover::before, .pf_card.on::before { opacity: 1; } .pf_card.on { box-shadow: 0 0 0 3px var(--colorPrimary), 0 24px 60px rgba(163,18,47,.25); } .pf_ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #111013; color: #fff; font-size: 24px; margin-bottom: 18px; transform: translateZ(40px); transition: background .3s, transform .3s; } .pf_card:hover .pf_ic, .pf_card.on .pf_ic { background: var(--colorPrimary); transform: translateZ(40px) scale(1.08) rotate(-6deg); } .pf_card b { display: block; font-family: var(--headingFont); font-size: 21px; line-height: 1.2; color: #111013; } .pf_card small { display: block; font-size: 14px; color: #55545a; margin: 6px 0 16px; line-height: 1.5; } .pf_card em { font-style: normal; font: 400 12px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: var(--colorPrimary); } @media (max-width: 991.98px) { .pf_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479.98px) { .pf_grid { grid-template-columns: 1fr; } .pf_card { display: grid; grid-template-columns: 48px 1fr; gap: 0 14px; padding: 18px; } .pf_ic { width: 48px; height: 48px; font-size: 20px; margin: 0; grid-row: span 3; } .pf_card small { margin: 4px 0 8px; } } /* headshots (dark) */ .hs_section { position: relative; background: #121014; color: #e9e6ec; padding: 110px 0 110px; overflow: hidden; } .hs_glow { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(163,18,47,.35), transparent 60%); pointer-events: none; animation: hsglow 12s ease-in-out infinite alternate; } @keyframes hsglow { to { transform: translate(-12vw, 10vw) scale(1.1); } } .hs_section .section_heading h5 { color: var(--colorFlame) !important; } .hs_section .section_heading h5::before, .hs_section .section_heading h5::after { filter: invert(1) brightness(2); } .hs_section h2, .hs_section h3, .hs_section h4 { color: #fff !important; } .hs_lede { font-size: 17px; line-height: 1.7; color: #c9c5cf; } .ps_h { font-size: 24px; margin: 64px 0 22px; position: relative; padding-left: 18px; } .ps_h::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; background: var(--colorPrimary); } .hs_section .ps_h { color: #fff; } /* lab */ .hl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 46px; align-items: start; background: linear-gradient(160deg, #1d1a21, #141216); border: 1px solid rgba(255,255,255,.08); padding: 34px; box-shadow: 0 40px 90px rgba(0,0,0,.45); } .hl_stage { perspective: 1000px; } .hl_frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #8f8d93; box-shadow: 0 30px 70px rgba(0,0,0,.5); transform-style: preserve-3d; } .hl_bg { position: absolute; inset: 0; transition: background .6s; background: radial-gradient(circle at 50% 40%, #a7a5ab, #6d6b71 75%); } .hl_frame[data-bg="white"] .hl_bg { background: radial-gradient(circle at 50% 40%, #ffffff, #dcdad6 80%); } .hl_frame[data-bg="black"] .hl_bg { background: radial-gradient(circle at 50% 40%, #2a282d, #08080a 75%); } .hl_frame[data-bg="brand"] .hl_bg { background: radial-gradient(circle at 50% 40%, #c4223f, #6e0b1e 80%); } .hl_frame[data-bg="office"] .hl_bg { background: url(../media/sa_room.jpg) center / cover; filter: blur(7px) saturate(.85) brightness(.85); transform: scale(1.12); } .hl_bust { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 45%; } .hl_frame[data-crop="tight"] .hl_bust { transform: scale(1.45) translateY(6%); } .hl_frame[data-crop="classic"] .hl_bust { transform: scale(1.08) translateY(6%); } .hl_frame[data-crop="wide"] .hl_bust { transform: scale(.82) translateY(12%); } .hl_bust [data-hl-keyfill], .hl_bust [data-hl-cheek] { transition: opacity .5s; } .hl_light { position: absolute; inset: 0; pointer-events: none; transition: background .6s, opacity .6s; mix-blend-mode: soft-light; } .hl_frame[data-light="clean"] .hl_light { background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), transparent 60%); } .hl_frame[data-light="clean"] [data-hl-keyfill] { opacity: .25; } .hl_frame[data-light="clean"] [data-hl-cheek] { opacity: 0; } .hl_frame[data-light="classic"] .hl_light { background: linear-gradient(100deg, rgba(255,255,255,.35), transparent 45%, rgba(0,0,0,.45)); } .hl_frame[data-light="classic"] [data-hl-keyfill] { opacity: .9; } .hl_frame[data-light="classic"] [data-hl-cheek] { opacity: 1; } .hl_frame[data-light="dramatic"] .hl_light { background: linear-gradient(95deg, rgba(255,255,255,.4), transparent 35%, rgba(0,0,0,.8) 70%); mix-blend-mode: multiply; } .hl_frame[data-light="dramatic"] [data-hl-keyfill] { opacity: 1; filter: contrast(1.6); } .hl_frame[data-light="dramatic"] .hl_bg { filter: brightness(.55); } .hl_frame[data-light="dramatic"][data-bg="office"] .hl_bg { filter: blur(7px) brightness(.45); } .hl_flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .hl_flash.go { animation: pfxflash .4s ease-out; } .hl_tag { position: absolute; left: 12px; bottom: 12px; background: rgba(17,16,19,.82); color: #fff; font: 400 10.5px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; } .hl_uses { display: flex; gap: 18px; margin-top: 20px; align-items: flex-end; } .hl_uses figure { margin: 0; text-align: center; } .hl_uses figcaption { font: 400 10.5px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: #a8a4ae; margin-top: 8px; } .hl_mini { overflow: hidden; position: relative; background: #2a272d; } .hl_mini .hl_frame { position: absolute; inset: 0; aspect-ratio: auto; box-shadow: none; } .hl_mini .hl_tag, .hl_mini .hl_flash { display: none; } .hl_mini.round { width: 74px; height: 74px; border-radius: 50%; border: 3px solid #fff; } .hl_mini.card { width: 92px; height: 115px; border: 3px solid #fff; } .hl_mini.badge { width: 64px; height: 80px; border: 3px solid #fff; border-top-width: 14px; border-top-color: var(--colorPrimary); } .hl_controls { color: #ddd9e1; } .hl_k { display: inline-block; font: 400 11px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; color: var(--colorFlame); margin-bottom: 18px; } .hl_group { padding: 14px 0 16px; border-top: 1px solid rgba(255,255,255,.1); } .hl_group h4 { font-size: 15px !important; margin: 0 0 10px; letter-spacing: .02em; } .hl_sw { display: flex; gap: 10px; } .hl_sw button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: var(--c); background-size: cover; background-position: center; cursor: pointer; transition: transform .2s, box-shadow .2s; } .hl_sw button.on { box-shadow: 0 0 0 3px #121014, 0 0 0 5px var(--colorFlame); transform: scale(1.08); } .hl_seg { display: inline-flex; border: 1.5px solid rgba(255,255,255,.3); } .hl_seg button { border: 0; background: transparent; color: #ddd9e1; padding: 9px 14px; font-size: 13.5px; cursor: pointer; transition: background .2s, color .2s; } .hl_seg button + button { border-left: 1.5px solid rgba(255,255,255,.18); } .hl_seg button.on { background: #fff; color: #121014; } .hl_note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: #a8a4ae; min-height: 2.6em; } .hl_book { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } .hl_book b { display: block; color: #fff; font-family: var(--headingFont); font-size: 17px; } .hl_book small { display: block; color: #a8a4ae; font-size: 12.5px; line-height: 1.45; margin-top: 2px; } .hl_book .ad_btn { flex: none; white-space: nowrap; } .hl_fine { font-size: 12px; color: #86828d; margin: 10px 0 0; } @media (max-width: 991.98px) { .hl { grid-template-columns: 1fr; padding: 20px; gap: 26px; } .hl_frame { max-width: 420px; margin: 0 auto; } .hl_uses { justify-content: center; } } @media (max-width: 479.98px) { .hl_book { flex-direction: column; align-items: stretch; } .hl_seg button { padding: 8px 10px; font-size: 12.5px; } } /* service cards */ .ps_grid { display: grid; gap: 22px; perspective: 1400px; } .ps_grid.three { grid-template-columns: repeat(3, 1fr); } .ps_grid.two { grid-template-columns: repeat(2, 1fr); } .ps_card { position: relative; display: flex; flex-direction: column; background: #fff; color: #111013; padding: 26px 24px 22px; box-shadow: 0 18px 44px rgba(17,16,19,.14); border-top: 4px solid #111013; } .hs_section .ps_card { background: #1f1c23; color: #e9e6ec; border: 1px solid rgba(255,255,255,.1); border-top: 4px solid var(--colorPrimary); box-shadow: 0 30px 60px rgba(0,0,0,.4); } .ps_card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.12), transparent 55%); opacity: 0; transition: opacity .3s; } .ps_card:hover::after { opacity: 1; } .ps_card.ps_hot { animation: pshot 1.2s ease 3; box-shadow: 0 0 0 3px var(--colorFlame), 0 30px 70px rgba(242,107,42,.35); } @keyframes pshot { 50% { box-shadow: 0 0 0 7px rgba(242,107,42,.35), 0 30px 70px rgba(242,107,42,.35); } } .ps_badge { position: absolute; right: 16px; top: -12px; background: var(--colorFlame); color: #fff; font: 400 10px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; } .ps_top h3 { font-size: 22px; margin: 0 0 6px; color: inherit !important; } .ps_time { font: 400 11.5px/1 var(--capsFont); letter-spacing: .12em; text-transform: uppercase; color: var(--colorPrimary); } .hs_section .ps_time { color: var(--colorFlame); } .ps_short { font-size: 15px; line-height: 1.6; margin: 14px 0 12px; color: inherit; opacity: .85; } .ps_inc { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; } .ps_inc li { position: relative; padding: 7px 0 7px 24px; font-size: 14px; border-top: 1px solid rgba(127,127,127,.18); } .ps_inc li::before { content: "\2713"; position: absolute; left: 2px; top: 7px; color: var(--colorPrimary); font-weight: 700; } .hs_section .ps_inc li::before { color: var(--colorFlame); } .ps_buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 2px solid currentColor; border-color: rgba(127,127,127,.3); } .ps_price b { display: block; font-family: var(--headingFont); font-size: 28px; line-height: 1; } .ps_price small { font-size: 12px; opacity: .7; } .ps_add { padding: 14px 18px !important; white-space: nowrap; } .ps_add.in_cart { background: #1f8a4c !important; border-color: #1f8a4c !important; } @media (max-width: 991.98px) { .ps_grid.three { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .ps_grid.three, .ps_grid.two { grid-template-columns: 1fr; } } .ps_addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; } .ps_addons.four { grid-template-columns: repeat(2, 1fr); } .ps_addon { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: #fff; border: 1.5px solid #e4e0d9; color: #111013; } .hs_section .ps_addon { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #e9e6ec; } .ps_addon h4 { font-size: 16px; margin: 0 0 3px; color: inherit !important; } .ps_addon p { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .8; color: inherit; } .ps_addon_r { display: flex; align-items: center; gap: 12px; text-align: right; flex: none; } .ps_addon_r b { font-family: var(--headingFont); font-size: 18px; } .ps_addon_r small { display: block; font-size: 11px; opacity: .7; margin-top: -4px; } .ps_plus { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--colorPrimary); color: #fff; font-size: 16px; cursor: pointer; transition: transform .2s, background .2s; } .ps_plus:hover { transform: rotate(90deg) scale(1.08); } .ps_plus.in_cart { background: #1f8a4c; } @media (max-width: 767.98px) { .ps_addons, .ps_addons.four { grid-template-columns: 1fr; } } /* booking steps */ .hs_steps_wrap { margin-top: 90px; } .hs_steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: s; } .hs_steps li { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 22px 16px 18px; } .hs_steps li::after { content: ""; position: absolute; right: -15px; top: 40px; width: 16px; height: 2px; background: var(--colorFlame); } .hs_steps li:last-child::after { display: none; } .hs_n { font: 400 11px/1 var(--capsFont); letter-spacing: .16em; color: var(--colorFlame); } .hs_steps i { display: block; font-size: 26px; color: #fff; margin: 12px 0; } .hs_steps h4 { font-size: 16.5px; margin: 0 0 6px; } .hs_steps p { font-size: 13.5px; line-height: 1.55; color: #b6b2bc; margin: 0; } .hs_steps li:first-child { background: var(--colorPrimary); border-color: var(--colorPrimary); } .hs_steps li:first-child p { color: #ffe1e6; } .hs_steps li:first-child .hs_n { color: #fff; } @media (max-width: 1199.98px) { .hs_steps { grid-template-columns: repeat(3, 1fr); } .hs_steps li::after { display: none; } } @media (max-width: 575.98px) { .hs_steps { grid-template-columns: 1fr; } } /* wear + retouch */ .hs_two { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 80px; } .hw, .hr { background: #f4f1ec url(../media/paper.jpg) center / 480px; color: #111013; padding: 30px; box-shadow: 0 30px 70px rgba(0,0,0,.35); } .hw { transform: rotate(-.6deg); } .hr { transform: rotate(.6deg); } .hw h3, .hr h3 { color: #111013 !important; font-size: 26px; } .hw .section_heading h5, .hr .section_heading h5 { color: var(--colorPrimary) !important; } .hw .section_heading h5::before, .hw .section_heading h5::after, .hr .section_heading h5::before, .hr .section_heading h5::after { filter: none; } .hw_tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .hw_tab { border: 1.5px solid #111013; background: transparent; padding: 7px 12px; font-size: 13px; cursor: pointer; color: #111013; } .hw_tab.on { background: #111013; color: #fff; } .hw_panel { list-style: none; margin: 0; padding: 0; } .hw_panel li { position: relative; padding: 10px 0 10px 26px; border-top: 1px dashed rgba(17,16,19,.2); font-size: 14.5px; line-height: 1.55; } .hw_panel li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--colorPrimary); } .hr_cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .hr_k { display: inline-flex; gap: 8px; align-items: center; font: 400 12px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; } .hr_k.ok { color: #1f8a4c; } .hr_k.no { color: var(--colorPrimary); } .hr ul { list-style: none; margin: 0; padding: 0; } .hr li { padding: 8px 0; border-top: 1px dashed rgba(17,16,19,.2); font-size: 14px; line-height: 1.5; } @media (max-width: 991.98px) { .hs_two { grid-template-columns: 1fr; } .hw, .hr { transform: none; } } @media (max-width: 479.98px) { .hr_cols { grid-template-columns: 1fr; } .hw, .hr { padding: 22px 18px; } } /* team */ .ht { margin-top: 90px; } .ht_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ht_i { padding: 22px 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); } .ht_i i { font-size: 26px; color: var(--colorFlame); } .ht_i h4 { font-size: 17px; margin: 12px 0 6px; } .ht_i p { font-size: 14px; line-height: 1.6; color: #b6b2bc; margin: 0; } @media (max-width: 991.98px) { .ht_grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px) { .ht_grid { grid-template-columns: 1fr; } } /* lens lab */ .ll_section { background: #f4f1ec url(../media/paper.jpg) center / 480px; } .ll { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 34px; align-items: stretch; } .ll_view { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #111; box-shadow: 0 30px 70px rgba(17,16,19,.25); border: 10px solid #111013; } .ll_img, .ll_blur { position: absolute; inset: 0; background-size: cover; background-position: 52% 42%; transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .4s, opacity .4s; transform-origin: 52% 42%; } .ll_blur { -webkit-mask-image: radial-gradient(ellipse 18% 28% at 52% 40%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 18% 28% at 52% 40%, transparent 55%, #000 100%); } .ll_hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font: 400 13px/1 var(--capsFont); letter-spacing: .1em; color: #fff; } .ll_af { position: absolute; left: 52%; top: 40%; width: 56px; height: 40px; border: 2px solid #4cff7a; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0,0,0,.4); } .ll.live .ll_af { animation: llaf 1.2s ease 2; } @keyframes llaf { 0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .ll_side { display: flex; flex-direction: column; gap: 16px; } .ll_lens3d { position: relative; height: 92px; perspective: 600px; display: flex; align-items: center; justify-content: center; } .ll_lens3d i { position: absolute; width: calc(64px + var(--n, 0) * 0px); height: 64px; border-radius: 50%; border: 6px solid #2a272d; background: radial-gradient(circle at 40% 35%, #5a6680, #0d0f14 70%); transform: rotateY(64deg) translateZ(calc(var(--k) * 16px * var(--len, 1))); box-shadow: 0 0 0 2px #444; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .ll_lens3d i:nth-child(1) { --k: -2; } .ll_lens3d i:nth-child(2) { --k: -1.2; border-color: #a3122f; } .ll_lens3d i:nth-child(3) { --k: -.4; } .ll_lens3d i:nth-child(4) { --k: .4; } .ll_lens3d i:nth-child(5) { --k: 1.2; } .ll_lens3d i:nth-child(6) { --k: 2; border-color: #111; } .ll_lens3d b { position: absolute; width: calc(46px * var(--ap, .5)); height: calc(46px * var(--ap, .5)); min-width: 6px; min-height: 6px; border-radius: 50%; background: #fff3; box-shadow: 0 0 20px #8fb4ff; transition: all .4s; } .ll.live .ll_lens3d { animation: lensspin 6s ease-in-out infinite alternate; } @keyframes lensspin { from { transform: rotateY(-14deg); } to { transform: rotateY(14deg); } } .ll_tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ll_tab { border: 1.5px solid #111013; background: #fff; padding: 12px 8px; cursor: pointer; text-align: center; transition: background .2s, color .2s, transform .2s; } .ll_tab b { display: block; font-family: var(--headingFont); font-size: 26px; line-height: 1; color: inherit; } .ll_tab b small { font-size: 13px; margin-left: 2px; } .ll_tab span { display: block; font-size: 11.5px; margin-top: 6px; line-height: 1.3; } .ll_tab.on { background: #111013; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17,16,19,.25); } .ll_info h4 { font-size: 19px; margin: 4px 0 4px; } .ll_f { display: inline-block; font: 400 11px/1 var(--capsFont); letter-spacing: .14em; text-transform: uppercase; color: var(--colorPrimary); margin-bottom: 8px; } .ll_info p { font-size: 14.5px; line-height: 1.65; margin: 0; } .ll_ap span { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; } .ll_ap b { color: var(--colorPrimary); } .ll_ap input { width: 100%; accent-color: var(--colorPrimary); margin: 8px 0 2px; } .ll_ap small { display: flex; justify-content: space-between; font-size: 12px; color: #6a6970; } .ll_ap em { font-style: normal; } @media (max-width: 991.98px) { .ll { grid-template-columns: 1fr; } .ll_lens3d { display: none; } } .pg_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; perspective: 1200px; } .pg_i { background: #111013; color: #fff; padding: 24px 22px; } .pg_i i { font-size: 26px; color: var(--colorFlame); } .pg_i h4 { color: #fff !important; font-size: 18px; margin: 12px 0 6px; } .pg_i p { color: #c9c8cd; font-size: 14px; line-height: 1.6; margin: 0; } @media (max-width: 991.98px) { .pg_grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px) { .pg_grid { grid-template-columns: 1fr; } } /* events + brand */ .ev_section { background: #fff; } .br_section { background: #f4f1ec url(../media/paper.jpg) center / 480px; } .ev_wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 26px; align-items: start; } .ev_list { background: #111013; color: #e9e6ec; padding: 26px 24px; position: sticky; top: 110px; } .ev_list h4 { color: #fff !important; font-size: 18px; margin: 0 0 12px; } .ev_list .check_list li { color: #e9e6ec; font-size: 14px; } .ev_list p { font-size: 13.5px; color: #a8a4ae; margin: 14px 0 0; line-height: 1.55; } @media (max-width: 991.98px) { .ev_wrap { grid-template-columns: 1fr; } .ev_list { position: static; } } .pq_box { margin-top: 26px; padding: 22px; background: #111013; color: #e9e6ec; } .pq_box p { color: #c9c8cd; font-size: 15px; } /* booking bar */ .pb_bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 22px; padding: 10px 10px 10px 20px; background: rgba(17,16,19,.94); color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.45); backdrop-filter: blur(6px); border-left: 5px solid var(--colorPrimary); animation: pbin .5s cubic-bezier(.2,.8,.2,1); max-width: calc(100vw - 24px); } .pb_bar[hidden] { display: none; } @keyframes pbin { from { transform: translate(-50%, 120%); } } .pb_bar.has { border-left-color: #1f8a4c; } .pb_l { display: flex; align-items: center; gap: 10px; font-size: 14.5px; } .pb_l i { color: var(--colorFlame); font-size: 18px; } .pb_l b { color: #fff; } .pb_r { display: flex; align-items: center; gap: 8px; } .pb_r .ad_btn { padding: 12px 18px !important; white-space: nowrap; } .pb_sound { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer; } @media (max-width: 767.98px) { .pb_bar { bottom: 70px; gap: 10px; padding: 8px 8px 8px 12px; width: calc(100vw - 20px); justify-content: space-between; } .pb_l { font-size: 12.5px; } .pb_l i { display: none; } .pb_r .ad_btn { padding: 10px 12px !important; font-size: 12px !important; } } .pf_section { background: #fff !important; } .ph_seam { position: relative; line-height: 0; margin: -2px 0; z-index: 2; } .ph_seam.paper_bg { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px; } .ph_seam .rip_fill { inset: -1px 0 -3px !important; } .ll_section, .br_section { background: #ecebe8 url(../media/paper.jpg) 0 0 / 480px 480px !important; } .pb_l span { white-space: nowrap; } @media (max-width: 767.98px) { .pb_l span { white-space: normal; } } .ll_img, .ll_blur { background-position: 59% 46% !important; transform-origin: 59% 44% !important; } .ll_blur { -webkit-mask-image: radial-gradient(ellipse 16% 30% at 59% 48%, transparent 55%, #000 100%) !important; mask-image: radial-gradient(ellipse 16% 30% at 59% 48%, transparent 55%, #000 100%) !important; } .ll_af { left: 59% !important; top: 38% !important; width: 46px !important; height: 34px !important; } .cart_check span, .cart_notes span { letter-spacing: 0 !important; text-transform: none !important; font-family: var(--paraFont) !important; font-size: 13.5px !important; line-height: 1.5 !important; font-weight: 400 !important; } .cart_notes span { font-weight: 600 !important; } /* 3-D headshot studio */ .hl_canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; } .hl_3d .hl_bust, .hl_3d .hl_bg, .hl_3d .hl_light { display: none !important; } .hl_3d .hl_frame { background: #111; cursor: grab; } .hl_loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(17,16,19,.55); color: #fff; font: 400 11px/1 var(--capsFont); letter-spacing: .16em; text-transform: uppercase; z-index: 3; } .hl_loading i { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--colorFlame); animation: hlspin 1s linear infinite; } @keyframes hlspin { to { transform: rotate(360deg); } } .hl_mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hl_credit { font-size: 12px; color: #a8a4ae; margin: 14px 0 0; line-height: 1.5; } .hl_credit span { display: block; color: #77737d; font-size: 11px; } .hl_credit a { color: #a8a4ae; text-decoration: underline; } /* photography: torn edges sit inside the paper sections so the paper texture is continuous */ .ll_section, .br_section { position: relative; overflow: hidden; padding-top: 150px !important; padding-bottom: 150px !important; } .ph_edge { position: absolute !important; left: 0; right: 0; z-index: 3; } .ph_edge_t { top: -1px; } .ph_edge_b { bottom: -1px; } .ph_edge .rip_fill { inset: -2px 0 !important; } .ph_edge_t .rip_fill { inset: -3px 0 -1px !important; } .ph_edge_b .rip_fill { inset: -1px 0 -3px !important; } @media (max-width: 767.98px) { .ll_section, .br_section { padding-top: 90px !important; padding-bottom: 90px !important; } } .hl_3d .hl_frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, rgba(8,8,10,.55)); pointer-events: none; z-index: 1; } .hl_3d .hl_tag { z-index: 2; } .ll_section, .br_section { padding-top: calc(9vw + 50px) !important; padding-bottom: calc(9vw + 50px) !important; } @media (max-width: 767.98px) { .ll_section, .br_section { padding-top: calc(9vw + 40px) !important; padding-bottom: calc(9vw + 40px) !important; } } section.ll_section, section.br_section { padding-top: calc(9.2vw + 56px) !important; padding-bottom: calc(9.2vw + 56px) !important; } /* Hero torn-paper highlights: render as one box so the torn mask and paper texture stay intact when the line wraps (mobile) */ .ih .ih_strip, .hero_v2 .hv_title .ih_strip, .about_hero .ah_title .ah_red { display: inline-block !important; max-width: 100%; vertical-align: baseline; -webkit-box-decoration-break: slice !important; box-decoration-break: slice !important; padding: .04em .32em .1em !important; margin: .06em 0 .04em; line-height: 1.12 !important; text-wrap: balance; } .ih h1.ih_title .ih_strip, .hero_v2 h1.hv_title .ih_strip { line-height: 1.12 !important; } @media (max-width: 767.98px) { .ih h1.ih_title, .hero_v2 h1.hv_title { overflow-wrap: break-word; } .ih .ih_strip, .hero_v2 .hv_title .ih_strip, .about_hero .ah_title .ah_red { margin-top: .12em; background-size: cover !important; } .hero_v2 h1.hv_title .ih_strip { font-size: clamp(34px, 10.5vw, 54px) !important; } } @media (max-width: 767.98px) { .gear_guide.at_start:not(.open) { opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .3s, transform .3s; } } /* ================= Mobile menu: vertical, full list ================= */ .mobile_menu_content { width: min(88vw, 380px) !important; max-width: 100vw; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding: 24px 22px 30px !important; } html.mm_open, html.mm_open body { overflow: hidden !important; } .main-menu-mobile { width: 100%; margin-top: 26px; } .main-menu-mobile #mobileNav, .main-menu-mobile .navbar-nav { display: block !important; width: 100%; margin: 0 !important; } .main-menu-mobile #mobileNav > ul { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; white-space: normal !important; margin: 0; padding: 0; list-style: none; } .main-menu-mobile #mobileNav > ul > li { display: block !important; width: 100%; border-bottom: 1px solid #ece8e2; } .main-menu-mobile #mobileNav > ul > li > a { display: flex !important; align-items: center; justify-content: space-between; width: 100%; padding: 15px 2px !important; font-family: var(--headingFont) !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #111013 !important; } .main-menu-mobile #mobileNav > ul > li > a::after { content: "\2192"; font-size: 16px; color: #b9b5bd; transition: transform .2s, color .2s; } .main-menu-mobile #mobileNav > ul > li > a.active { color: var(--colorPrimary) !important; } .main-menu-mobile #mobileNav > ul > li > a.active::after, .main-menu-mobile #mobileNav > ul > li > a:active::after { color: var(--colorPrimary); transform: translateX(4px); } .main-menu-mobile .nav_live_m { display: block !important; } .mm_actions { display: grid; gap: 12px; margin-top: 24px; } .mm_actions .ad_btn { justify-content: center; width: 100%; } .mm_line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid #e4e0d9; color: #111013 !important; font-size: 15px; } .mm_line i { color: var(--colorPrimary); } /* ---------- phones: nothing floats over the photo studio, finder or lens lab ---------- */ @media (max-width: 991.98px) { .pb_bar { display: none !important; } /* its action moves into the bottom Call / Book bar */ .tf__scroll_btn { width: 44px !important; height: 44px !important; line-height: 44px !important; right: 12px !important; bottom: 66px !important; font-size: 16px !important; opacity: .9; } .tf__scroll_btn i, .tf__scroll_btn svg { font-size: 16px !important; } html.adm_lock .mobile_cta, html.mm_open .mobile_cta { display: none !important; } } .form_status.ok { color: #1f6b3d; } .form_status a { color: inherit; text-decoration: underline; } /* phones: the 3-D studio preview stays pinned just under the header while the visitor picks options */ @media (max-width: 991.98px) { .hl.hl_pin { overflow: visible; } section.hs_section { overflow: clip !important; } .hl.hl_pin .hl_stage { position: -webkit-sticky; position: sticky; top: 70px; z-index: 6; margin: -20px -20px 0; padding: 12px 20px 14px; background: #19171c; box-shadow: 0 14px 26px -8px rgba(0,0,0,.6); border-bottom: 1px solid rgba(255,255,255,.08); } .hl.hl_pin .hl_frame { height: min(33vh, 290px); height: min(33svh, 290px); width: auto; max-width: none; aspect-ratio: 4 / 5; margin: 0 auto; box-shadow: 0 16px 34px rgba(0,0,0,.5); } .hl.hl_pin .hl_tag { font-size: 10px; letter-spacing: .12em; padding: 6px 8px; left: 8px; right: 8px; bottom: 8px; } .hl.hl_pin .hl_controls .hl_uses { margin: 8px 0 18px; } .hl.hl_pin .hl_controls .hl_credit { font-size: 12px; margin: 0 0 16px; } } /* ---------- contact: "Stay in touch" options. Headline stays visible; fine print opens under "Details" ---------- */ .consent_box .consent { display: block; cursor: default; margin: 4px 0 2px; padding: 8px 0 6px; border-bottom: 1px solid rgba(17,16,19,.09); } .consent_box .consent:last-of-type { border-bottom: 0; } .consent_main { display: flex !important; gap: 12px; align-items: flex-start; margin: 0 !important; cursor: pointer; font-size: 14px !important; line-height: 1.45; color: #111013 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: inherit !important; } .consent_main input { width: 20px !important; height: 20px !important; flex: none; margin-top: 1px; accent-color: var(--colorPrimary, #a3122f); border: 0 !important; padding: 0 !important; } .consent_main b { font-weight: 700; color: #111013; } .consent_more { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 32px; padding: 6px 0; min-height: 32px; background: none !important; border: 0; color: var(--colorPrimary, #a3122f) !important; font: 600 12.5px/1 var(--headingFont, inherit); letter-spacing: .04em; cursor: pointer; } .consent_more i { font-size: 11px; transition: transform .25s ease; } .consent_more[aria-expanded="true"] i { transform: rotate(180deg); } .consent_more:focus-visible { outline: 2px solid var(--colorPrimary, #a3122f); outline-offset: 3px; border-radius: 3px; } .consent_detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease, visibility .3s; visibility: hidden; margin-left: 32px; } .consent_detail > div { overflow: hidden; min-height: 0; } .consent_detail p { margin: 2px 0 8px; font-size: 13px; line-height: 1.55; color: #3b383f; } .consent.open .consent_detail { grid-template-rows: 1fr; visibility: visible; } @media (prefers-reduced-motion: reduce) { .consent_detail, .consent_more i { transition: none; } }