@font-face { font-family: Overused-Grotesk; src: url('../fonts/overusedgrotesk-medium.woff2') format("woff2"); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: Overused-Grotesk; src: url('../fonts/overusedgrotesk-semibold.woff2') format("woff2"); font-weight: 600; font-style: normal; font-display: block; } @font-face { font-family: Modicapro Ultra; /* woff2 (39KB) con otf de respaldo (74KB). display:block: mejor una fraccion de segundo sin texto que el flash de Arial->Modica que veia Joan en ordenadores sin cache (con la precarga del , la fuente suele llegar antes del primer pintado). */ src: url('../fonts/ModicaPro-Ultra.woff2') format("woff2"), url('../fonts/ModicaPro-Ultra.otf') format("opentype"); font-weight: 100 900; font-style: normal; font-display: block; } :root { --color--background-primary: white; --modica: "Modicapro Ultra", Arial, sans-serif; --color--primary: black; --font-family--font-secondary: Overused-Grotesk, Arial, sans-serif; --color--secondary: #737577; --color--border-mutted: #d4d6d8; --color--white: white; --black\: black; --color--error-background: #ffc5c5; --color--error: #751515; --color--form-placeholder: #a5a7a9; --color--success-background: #abe9a3; --color--success: #114c09; --color--background-mutted: #f3f4f5; } .w-layout-blockcontainer { max-width: 940px; margin-left: auto; margin-right: auto; display: block; } .w-layout-grid { grid-row-gap: 16px; grid-column-gap: 16px; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .w-commerce-commercecartwrapper { display: inline-block; position: relative; } .w-commerce-commercecartopenlink { color: #fff; cursor: pointer; appearance: none; background-color: #3898ec; border-width: 0; border-radius: 0; align-items: center; padding: 9px 15px; text-decoration: none; display: flex; } .w-commerce-commercecartopenlinkcount { color: #3898ec; text-align: center; background-color: #fff; border-radius: 9px; min-width: 18px; height: 18px; margin-left: 8px; padding-left: 6px; padding-right: 6px; font-size: 11px; font-weight: 700; line-height: 18px; display: inline-block; } .w-commerce-commercecartcontainerwrapper { z-index: 1001; background-color: #000c; position: fixed; inset: 0; } .w-commerce-commercecartcontainerwrapper--cartType-modal { flex-direction: column; justify-content: center; align-items: center; display: flex; } .w-commerce-commercecartcontainerwrapper--cartType-leftSidebar { flex-direction: row; justify-content: flex-start; align-items: stretch; display: flex; } .w-commerce-commercecartcontainerwrapper--cartType-rightSidebar { flex-direction: row; justify-content: flex-end; align-items: stretch; display: flex; } .w-commerce-commercecartcontainerwrapper--cartType-leftDropdown { background-color: #0000; position: absolute; inset: 100% auto auto 0; } .w-commerce-commercecartcontainerwrapper--cartType-rightDropdown { background-color: #0000; position: absolute; inset: 100% 0 auto auto; } .w-commerce-commercecartcontainer { background-color: #fff; flex-direction: column; width: 100%; min-width: 320px; max-width: 480px; display: flex; overflow: auto; box-shadow: 0 5px 25px #00000040; } .w-commerce-commercecartheader { border-bottom: 1px solid #e6e6e6; flex: none; justify-content: space-between; align-items: center; padding: 16px 24px; display: flex; position: relative; } .w-commerce-commercecartheading { margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; } .w-commerce-commercecartcloselink { width: 16px; height: 16px; } .w-commerce-commercecartformwrapper { flex-direction: column; flex: 1; display: flex; } .w-commerce-commercecartform { flex-direction: column; flex: 1; justify-content: flex-start; display: flex; } .w-commerce-commercecartlist { -webkit-overflow-scrolling: touch; flex: 1; padding: 12px 24px; overflow: auto; } .w-commerce-commercecartitem { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; display: flex; } .w-commerce-commercecartitemimage { width: 60px; height: 0%; } .w-commerce-commercecartiteminfo { flex-direction: column; flex: 1; margin-left: 16px; margin-right: 16px; display: flex; } .w-commerce-commercecartproductname { font-weight: 700; } .w-commerce-commercecartoptionlist { margin-bottom: 0; padding-left: 0; text-decoration: none; list-style-type: none; } .w-commerce-commercecartquantity { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 60px; height: 38px; margin-bottom: 10px; padding: 8px 6px 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecartquantity::placeholder { color: #999; } .w-commerce-commercecartquantity:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecartfooter { border-top: 1px solid #e6e6e6; flex-direction: column; flex: none; padding: 16px 24px 24px; display: flex; } .w-commerce-commercecartlineitem { flex: none; justify-content: space-between; align-items: baseline; margin-bottom: 16px; display: flex; } .w-commerce-commercecartordervalue { font-weight: 700; } .w-commerce-commercecartapplepaybutton { color: #fff; cursor: pointer; appearance: none; background-color: #000; border-width: 0; border-radius: 2px; align-items: center; height: 38px; min-height: 30px; margin-bottom: 8px; padding: 0; text-decoration: none; display: flex; } .w-commerce-commercecartapplepayicon { width: 100%; height: 50%; min-height: 20px; } .w-commerce-commercecartquickcheckoutbutton { color: #fff; cursor: pointer; appearance: none; background-color: #000; border-width: 0; border-radius: 2px; justify-content: center; align-items: center; height: 38px; margin-bottom: 8px; padding: 0 15px; text-decoration: none; display: flex; } .w-commerce-commercequickcheckoutgoogleicon, .w-commerce-commercequickcheckoutmicrosofticon { margin-right: 8px; display: block; } .w-commerce-commercecartcheckoutbutton { color: #fff; cursor: pointer; appearance: none; text-align: center; background-color: #3898ec; border-width: 0; border-radius: 2px; align-items: center; padding: 9px 15px; text-decoration: none; display: block; } .w-commerce-commercecartemptystate { flex: 1; justify-content: center; align-items: center; padding-top: 100px; padding-bottom: 100px; display: flex; } .w-commerce-commercecarterrorstate { background-color: #ffdede; flex: none; margin: 0 24px 24px; padding: 10px; } .w-commerce-commerceaddtocartform { margin: 0 0 15px; } .w-commerce-commerceaddtocartoptionpillgroup { margin-bottom: 10px; display: flex; } .w-commerce-commerceaddtocartoptionpill { color: #000; cursor: pointer; background-color: #fff; border: 1px solid #000; margin-right: 10px; padding: 8px 15px; } .w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-selected { color: #fff; background-color: #000; } .w-commerce-commerceaddtocartoptionpill.w--ecommerce-pill-disabled { color: #666; cursor: not-allowed; background-color: #e6e6e6; border-color: #e6e6e6; outline-style: none; } .w-commerce-commerceaddtocartquantityinput { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 60px; height: 38px; margin-bottom: 10px; padding: 8px 6px 8px 12px; line-height: 20px; display: block; } .w-commerce-commerceaddtocartquantityinput::placeholder { color: #999; } .w-commerce-commerceaddtocartquantityinput:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commerceaddtocartbutton { color: #fff; cursor: pointer; appearance: none; background-color: #3898ec; border-width: 0; border-radius: 0; align-items: center; padding: 9px 15px; text-decoration: none; display: flex; } .w-commerce-commerceaddtocartbutton.w--ecommerce-add-to-cart-disabled { color: #666; cursor: not-allowed; background-color: #e6e6e6; border-color: #e6e6e6; outline-style: none; } .w-commerce-commercebuynowbutton { color: #fff; cursor: pointer; appearance: none; background-color: #3898ec; border-width: 0; border-radius: 0; align-items: center; margin-top: 10px; padding: 9px 15px; text-decoration: none; display: inline-block; } .w-commerce-commercebuynowbutton.w--ecommerce-buy-now-disabled { color: #666; cursor: not-allowed; background-color: #e6e6e6; border-color: #e6e6e6; outline-style: none; } .w-commerce-commerceaddtocartoutofstock { background-color: #ddd; margin-top: 10px; padding: 10px; } .w-commerce-commerceaddtocarterror { background-color: #ffdede; margin-top: 10px; padding: 10px; } .w-commerce-commercecheckoutformcontainer { background-color: #f5f5f5; width: 100%; min-height: 100vh; padding: 20px; } .w-commerce-commercelayoutcontainer { justify-content: center; align-items: flex-start; display: flex; } .w-commerce-commercelayoutmain { flex: 0 800px; margin-right: 20px; } .w-commerce-commercecheckoutcustomerinfowrapper { margin-bottom: 20px; } .w-commerce-commercecheckoutblockheader { background-color: #fff; border: 1px solid #e6e6e6; justify-content: space-between; align-items: baseline; padding: 4px 20px; display: flex; } .w-commerce-commercecheckoutblockcontent { background-color: #fff; border-bottom: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; padding: 20px; } .w-commerce-commercecheckoutlabel { margin-bottom: 8px; } .w-commerce-commercecheckoutemailinput { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 0; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutemailinput::placeholder { color: #999; } .w-commerce-commercecheckoutemailinput:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutshippingaddresswrapper { margin-bottom: 20px; } .w-commerce-commercecheckoutshippingfullname { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutshippingfullname::placeholder { color: #999; } .w-commerce-commercecheckoutshippingfullname:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutshippingstreetaddress { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutshippingstreetaddress::placeholder { color: #999; } .w-commerce-commercecheckoutshippingstreetaddress:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutshippingstreetaddressoptional { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutshippingstreetaddressoptional::placeholder { color: #999; } .w-commerce-commercecheckoutshippingstreetaddressoptional:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutrow { margin-left: -8px; margin-right: -8px; display: flex; } .w-commerce-commercecheckoutcolumn { flex: 1; padding-left: 8px; padding-right: 8px; } .w-commerce-commercecheckoutshippingcity { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutshippingcity::placeholder { color: #999; } .w-commerce-commercecheckoutshippingcity:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutshippingstateprovince { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutshippingstateprovince::placeholder { color: #999; } .w-commerce-commercecheckoutshippingstateprovince:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutshippingzippostalcode { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutshippingzippostalcode::placeholder { color: #999; } .w-commerce-commercecheckoutshippingzippostalcode:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutshippingcountryselector { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 0; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutshippingcountryselector::placeholder { color: #999; } .w-commerce-commercecheckoutshippingcountryselector:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutshippingmethodswrapper { margin-bottom: 20px; } .w-commerce-commercecheckoutshippingmethodslist { border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .w-commerce-commercecheckoutshippingmethoditem { background-color: #fff; border-bottom: 1px solid #e6e6e6; flex-direction: row; align-items: baseline; margin-bottom: 0; padding: 16px; font-weight: 400; display: flex; } .w-commerce-commercecheckoutshippingmethoddescriptionblock { flex-direction: column; flex-grow: 1; margin-left: 12px; margin-right: 12px; display: flex; } .w-commerce-commerceboldtextblock { font-weight: 700; } .w-commerce-commercecheckoutshippingmethodsemptystate { text-align: center; background-color: #fff; border-bottom: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; padding: 64px 16px; } .w-commerce-commercecheckoutpaymentinfowrapper { margin-bottom: 20px; } .w-commerce-commercecheckoutcardnumber { appearance: none; cursor: text; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutcardnumber::placeholder { color: #999; } .w-commerce-commercecheckoutcardnumber:focus, .w-commerce-commercecheckoutcardnumber.-wfp-focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutcardexpirationdate { appearance: none; cursor: text; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutcardexpirationdate::placeholder { color: #999; } .w-commerce-commercecheckoutcardexpirationdate:focus, .w-commerce-commercecheckoutcardexpirationdate.-wfp-focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutcardsecuritycode { appearance: none; cursor: text; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutcardsecuritycode::placeholder { color: #999; } .w-commerce-commercecheckoutcardsecuritycode:focus, .w-commerce-commercecheckoutcardsecuritycode.-wfp-focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutbillingaddresstogglewrapper { flex-direction: row; display: flex; } .w-commerce-commercecheckoutbillingaddresstogglecheckbox { margin-top: 4px; } .w-commerce-commercecheckoutbillingaddresstogglelabel { margin-left: 8px; font-weight: 400; } .w-commerce-commercecheckoutbillingaddresswrapper { margin-top: 16px; margin-bottom: 20px; } .w-commerce-commercecheckoutbillingfullname { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutbillingfullname::placeholder { color: #999; } .w-commerce-commercecheckoutbillingfullname:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutbillingstreetaddress { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutbillingstreetaddress::placeholder { color: #999; } .w-commerce-commercecheckoutbillingstreetaddress:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutbillingstreetaddressoptional { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutbillingstreetaddressoptional::placeholder { color: #999; } .w-commerce-commercecheckoutbillingstreetaddressoptional:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutbillingcity { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutbillingcity::placeholder { color: #999; } .w-commerce-commercecheckoutbillingcity:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutbillingstateprovince { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutbillingstateprovince::placeholder { color: #999; } .w-commerce-commercecheckoutbillingstateprovince:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutbillingzippostalcode { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 16px; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutbillingzippostalcode::placeholder { color: #999; } .w-commerce-commercecheckoutbillingzippostalcode:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutbillingcountryselector { appearance: none; background-color: #fafafa; border: 1px solid #ddd; border-radius: 3px; width: 100%; height: 38px; margin-bottom: 0; padding: 8px 12px; line-height: 20px; display: block; } .w-commerce-commercecheckoutbillingcountryselector::placeholder { color: #999; } .w-commerce-commercecheckoutbillingcountryselector:focus { border-color: #3898ec; outline-style: none; } .w-commerce-commercecheckoutorderitemswrapper { margin-bottom: 20px; } .w-commerce-commercecheckoutsummaryblockheader { background-color: #fff; border: 1px solid #e6e6e6; justify-content: space-between; align-items: baseline; padding: 4px 20px; display: flex; } .w-commerce-commercecheckoutorderitemslist { margin-bottom: -20px; } .w-commerce-commercecheckoutorderitem { margin-bottom: 20px; display: flex; } .w-commerce-commercecheckoutorderitemdescriptionwrapper { flex-grow: 1; margin-left: 16px; margin-right: 16px; } .w-commerce-commercecheckoutorderitemquantitywrapper { white-space: pre-wrap; display: flex; } .w-commerce-commercecheckoutorderitemoptionlist { margin-bottom: 0; padding-left: 0; text-decoration: none; list-style-type: none; } .w-commerce-commercelayoutsidebar { flex: 0 0 320px; position: sticky; top: 20px; } .w-commerce-commercecheckoutordersummarywrapper { margin-bottom: 20px; } .w-commerce-commercecheckoutsummarylineitem, .w-commerce-commercecheckoutordersummaryextraitemslistitem { flex-direction: row; justify-content: space-between; margin-bottom: 8px; display: flex; } .w-commerce-commercecheckoutsummarytotal { font-weight: 700; } .w-commerce-commercecheckoutplaceorderbutton { color: #fff; cursor: pointer; appearance: none; text-align: center; background-color: #3898ec; border-width: 0; border-radius: 3px; align-items: center; margin-bottom: 20px; padding: 9px 15px; text-decoration: none; display: block; } .w-commerce-commercecheckouterrorstate { background-color: #ffdede; margin-top: 16px; margin-bottom: 16px; padding: 10px 16px; } .w-commerce-commercepaypalcheckoutformcontainer { background-color: #f5f5f5; width: 100%; min-height: 100vh; padding: 20px; } .w-commerce-commercecheckoutcustomerinfosummarywrapper { margin-bottom: 20px; } .w-commerce-commercecheckoutsummaryitem, .w-commerce-commercecheckoutsummarylabel { margin-bottom: 8px; } .w-commerce-commercecheckoutsummaryflexboxdiv { flex-direction: row; justify-content: flex-start; display: flex; } .w-commerce-commercecheckoutsummarytextspacingondiv { margin-right: .33em; } .w-commerce-commercecheckoutpaymentsummarywrapper { margin-bottom: 20px; } .w-commerce-commercepaypalcheckouterrorstate { background-color: #ffdede; margin-top: 16px; margin-bottom: 16px; padding: 10px 16px; } .w-commerce-commerceorderconfirmationcontainer { background-color: #f5f5f5; width: 100%; min-height: 100vh; padding: 20px; } .w-commerce-commercecheckoutshippingsummarywrapper { margin-bottom: 20px; } @media screen and (max-width: 991px) { .w-layout-blockcontainer { max-width: 728px; } } @media screen and (max-width: 767px) { .w-layout-blockcontainer { max-width: none; } .w-commerce-commercelayoutcontainer { flex-direction: column; align-items: stretch; } .w-commerce-commercelayoutmain { flex-basis: auto; margin-right: 0; } .w-commerce-commercelayoutsidebar { flex-basis: auto; } } @media screen and (max-width: 479px) { .w-commerce-commercecartcontainerwrapper--cartType-modal { flex-direction: row; justify-content: center; align-items: stretch; } .w-commerce-commercecartcontainerwrapper--cartType-leftDropdown, .w-commerce-commercecartcontainerwrapper--cartType-rightDropdown { flex-direction: row; justify-content: center; align-items: stretch; display: flex; position: fixed; inset: 0; } .w-commerce-commercecartquantity, .w-commerce-commerceaddtocartquantityinput, .w-commerce-commercecheckoutemailinput, .w-commerce-commercecheckoutshippingfullname, .w-commerce-commercecheckoutshippingstreetaddress, .w-commerce-commercecheckoutshippingstreetaddressoptional { font-size: 16px; } .w-commerce-commercecheckoutrow { flex-direction: column; } .w-commerce-commercecheckoutshippingcity, .w-commerce-commercecheckoutshippingstateprovince, .w-commerce-commercecheckoutshippingzippostalcode, .w-commerce-commercecheckoutshippingcountryselector, .w-commerce-commercecheckoutcardnumber, .w-commerce-commercecheckoutcardexpirationdate, .w-commerce-commercecheckoutcardsecuritycode, .w-commerce-commercecheckoutbillingfullname, .w-commerce-commercecheckoutbillingstreetaddress, .w-commerce-commercecheckoutbillingstreetaddressoptional, .w-commerce-commercecheckoutbillingcity, .w-commerce-commercecheckoutbillingstateprovince, .w-commerce-commercecheckoutbillingzippostalcode, .w-commerce-commercecheckoutbillingcountryselector { font-size: 16px; } } body { background-color: var(--color--background-primary); font-family: var(--modica); color: var(--color--primary); letter-spacing: -.01em; font-size: 1.125rem; font-weight: 500; line-height: 1.5; } h1 { font-family: var(--font-family--font-secondary); letter-spacing: -.0425em; margin-top: 0; margin-bottom: 2rem; font-size: 3.1rem; font-weight: 600; line-height: 1.2; } h2 { font-family: var(--font-family--font-secondary); letter-spacing: -.038em; margin-top: 0; margin-bottom: 2rem; font-size: 2.5rem; font-weight: 600; line-height: 1.2; } h3 { font-family: var(--font-family--font-secondary); letter-spacing: -.025em; margin-top: 0; margin-bottom: 2rem; font-size: 1.75rem; font-weight: 600; line-height: 1.25; } h4 { font-family: var(--font-family--font-secondary); letter-spacing: -.02em; margin-top: 0; margin-bottom: 2rem; font-size: 1.36rem; font-weight: 600; line-height: 1.35; } h5 { font-family: var(--font-family--font-secondary); letter-spacing: -.02em; margin-top: 0; margin-bottom: 2rem; font-size: 1.1rem; font-weight: 600; line-height: 1.35; } h6 { font-family: var(--font-family--font-secondary); letter-spacing: -.02em; margin-top: 0; margin-bottom: 2rem; font-size: .95rem; font-weight: 600; line-height: 1.35; } p { margin-bottom: 2rem; } a { color: var(--color--primary); text-decoration: underline; transition: color .2s linear; } a:hover { color: var(--color--secondary); } ul, ol { grid-column-gap: .65rem; grid-row-gap: .65rem; flex-direction: column; margin-top: 0; margin-bottom: 2rem; padding-left: 1.35em; display: flex; } li { width: 100%; } blockquote { border-left: 5px solid var(--color--border-mutted); margin-bottom: 2rem; padding: 1em; font-size: 1.25rem; line-height: 1.5; } figure { margin-bottom: 2rem; } figcaption { text-align: left; margin-top: .5rem; font-size: 1.125rem; } .page-wrapper { position: relative; } .section-hero { min-height: 100svh; color: var(--color--white); flex-direction: column; padding-top: 5.6rem; padding-bottom: 3.125rem; display: flex; position: relative; overflow: hidden; } .hero-image-wrapper { z-index: -1; width: 100%; height: 100%; position: absolute; inset: 0%; } .hero-image { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; } .menu-icon { justify-content: center; width: 32px; height: 2px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .navigation-menu { flex-wrap: wrap; flex: none; align-items: center; margin-left: auto; margin-right: -.625rem; padding-right: 0; display: flex; } .navigation-inner { flex-flow: row; justify-content: flex-start; max-width: 100%; min-height: 0; margin-left: 0; margin-right: 0; display: flex; } .logo { flex: none; align-items: center; display: flex; } .logo.home { opacity: .8; } .logo.home.w--current { margin-right: 0; } .menu-button { border: 1px solid var(--color--primary); border-radius: 5px; width: 52px; height: 52px; margin-left: auto; padding: 0; } .menu-button.w--open { background-color: #0000; } .menu-button.home { border-color: var(--color--white); } .menu-icon-top { background-color: var(--color--primary); width: 100%; height: 100%; position: absolute; inset: 0%; transform: translate(0, -8px); } .menu-icon-top.home { background-color: var(--color--white); } .menu-icon-bottom { border: 1px solid var(--color--primary); background-color: var(--color--white); width: 100%; height: 100%; position: absolute; inset: 0%; transform: translate(0, 8px); } .menu-icon-bottom.home { border-color: var(--color--white); } .menu-icon-middle { border: 1px solid var(--color--primary); background-color: var(--color--white); width: 100%; height: 100%; position: absolute; inset: 0%; } .menu-icon-middle.home { border-color: var(--color--white); } .navigation-link { font-family: var(--font-family--font-secondary); color: var(--color--primary); letter-spacing: .01em; text-transform: uppercase; flex: none; align-items: center; margin-left: .9375rem; padding: 1rem .625rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.25em; text-decoration: none; display: flex; position: static; overflow: hidden; } .navigation-link:hover { color: var(--color--primary); } .navigation-link.w--current { background-image: url('../images/dot_1.svg'); background-position: 95% 37%; background-repeat: no-repeat; background-size: auto; } .navigation-link.home { opacity: .8; color: var(--color--white); } .navigation-link.home.w--current { background-image: url('../images/dot-white.svg'); background-position: 95% 37%; } .navigation { z-index: 1; background-color: #0000; padding-top: 1rem; padding-bottom: 1rem; } .navigation.navigation-home { width: 100%; font-family: var(--font-family--font-secondary); color: var(--color--white); position: absolute; inset: 0% auto auto 0%; } .navigation-link-inner { position: relative; overflow: hidden; } .container-fluid { justify-content: space-between; min-width: 100%; margin-left: 0; margin-right: 0; /* Era 8.575rem / 2.975rem (137px / 48px) — casi el triple de aire a la izquierda que a la derecha, en todo el sitio y en todo ancho de escritorio. Se iguala a la media (92px) para que el contenido quede centrado de verdad. Solo afecta a >767px: las reglas de tablet/movil de mas abajo ya eran simetricas y no se tocan. */ padding-left: 5.75rem; padding-right: 5.75rem; } .navigation-link-text-hover { position: absolute; top: 100%; left: 0; } .navigation-icon-link-inner { grid-column-gap: .5rem; grid-row-gap: .5rem; display: flex; } .navigation-icon-image { flex: none; width: 1.375rem; } .navigation-icon-text { display: none; } .hero-content-top { opacity: .6; font-family: var(--modica); color: var(--color--white); mix-blend-mode: normal; position: relative; } .hero-title { font-family: var(--font-family--font-secondary); letter-spacing: -.0225em; text-transform: uppercase; margin-top: -.1em; margin-bottom: 0; font-size: 15.7vw; font-weight: 600; line-height: .8; } .hero-title:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { font-family: var(--modica); } .hero-heading { perspective: 1000px; perspective-origin: 50%; text-align: center; border: 1px solid #0000; padding-right: 0; display: block; position: relative; } .hero-heading.titulos { font-family: var(--font-family--font-secondary); } .hero-heading-front { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 50% 100%; } .hero-heading-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; inset: 0%; transform: translate(0%, 100%)rotateX(-90deg)rotateY(0)rotateZ(0); } .heading-rotation-wrapper { grid-column-gap: 2.7vw; grid-row-gap: 0vw; flex-wrap: wrap; place-content: flex-start space-around; align-items: flex-start; margin-left: -.6vw; margin-right: -.6vw; } .heading-rotation-delay { perspective: 1000px; perspective-origin: 50%; border: 1px solid #0000; position: relative; } .hero-caption-grid { grid-column-gap: 16px; grid-row-gap: 0px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; } .hero-caption { font-family: var(--font-family--font-secondary); letter-spacing: .01em; text-transform: uppercase; font-size: 1.0625rem; font-weight: 500; line-height: 1.25; display: block; } .hero-caption.hero-caption-divider { margin-left: .2em; margin-right: .2em; } .hero-caption-second { text-align: center; } .hero-caption-third { text-align: right; } .hero-caption-inner { grid-column-gap: .1rem; grid-row-gap: .1rem; justify-content: flex-end; align-items: center; display: flex; } .hero-caption-icon { width: 1.25rem; position: relative; top: .05em; } .section { font-family: var(--modica); padding-top: 12.5rem; } .section-dark + .section { padding-top: 0; } .container { max-width: 80vw; height: 100%; } .grid-12-columns { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .section-title { grid-column-gap: .75rem; grid-row-gap: .75rem; justify-content: space-between; align-items: flex-start; margin-bottom: 2.6rem; padding-bottom: .925rem; display: flex; position: relative; } .section-title.no-margin-bottom { margin-bottom: -1px; } .section-title-text { font-family: var(--font-family--font-secondary); letter-spacing: .01em; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 1.0625rem; font-weight: 500; line-height: .8; } .section-title-text.to-right { margin-left: auto; } .section-title-text.visible-on-mobile { display: none; } .marquee { font-family: var(--modica); display: flex; overflow: visible; } .marquee.reverse { justify-content: flex-end; } .marquee-track { flex-direction: row; flex: none; display: flex; } .marquee-track.gutter-large { grid-column-gap: 0rem; grid-row-gap: 0rem; } .marquee-item { flex: none; margin-right: 6.2vw; } .marquee-item.marquee-margin-large { margin-right: 10vw; } .marquee-item.margin-left { margin-left: 8.75vw; margin-right: 0; } .heading-small { font-family: var(--modica); letter-spacing: -.025em; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 4.4vw; font-weight: 600; line-height: .8; } .about-section-content { flex-flow: row; justify-content: flex-start; padding-right: 7%; display: flex; } .about-section-bottom { margin-top: auto; } .paragraph-large { font-family: var(--font-family--font-secondary); letter-spacing: -.019em; text-indent: 2.7867em; margin-bottom: 0; font-size: 1.69vw; font-weight: 500; line-height: 1.25; } .paragraph-large.no-text-indent { text-indent: 0; } .margin-bottom-medium { margin-bottom: 3rem; } .about-image-inner { padding-bottom: 150.716%; position: relative; } .image-cover { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; } .button { border: 1px solid var(--color--primary); font-family: var(--font-family--font-secondary); color: var(--color--primary); text-align: center; letter-spacing: .01em; text-transform: uppercase; border-radius: 5rem; font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; } .button:hover { color: var(--color--primary); } .button.white { background-color: var(--color--white); font-family: var(--font-family--font-secondary); border-style: none; } .button.white.small { font-weight: 500; line-height: .8; } .button-text-wrapper { position: relative; } .button-inner { grid-column-gap: .5rem; grid-row-gap: .5rem; align-items: center; display: flex; } .button-icon-front { width: 1.0625rem; } .button-icon-back { width: 1.0625rem; margin-left: -1.5625rem; } .button-container { flex-direction: column; justify-content: center; min-height: 2.875rem; padding: .25em 2em; display: flex; } .button-container.small { min-height: 1.75rem; padding: .4em 1em; } .overflow-hidden { overflow: hidden; } .button-text-back { position: absolute; inset: 0%; transform: translate(0, 100%); } /* La tilde de las mayusculas (CONÓCENOS) sobresale de una caja de linea estrecha (line-height 1 / .8 del boton): la copia trasera del rodillo la asomaba bajo el texto como una "mancha" bajo la O, en todos los tamaños. Con caja 1.25 la tilde cabe dentro: la trasera queda recortada entera en reposo y la delantera nunca pierde el acento. El alto del boton no cambia (lo fija el min-height de .button-container). */ .button-text-front, .button-text-back { line-height: 1.25; } .heading-rotation { perspective: 1000px; min-width: auto; min-height: auto; font-family: var(--modica); border: 1px solid #0000; position: relative; } .heading-rotation._2 { font-family: var(--modica); } .heading-rotation-front { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 50% 100%; font-family: var(--modica); overflow: visible; } .heading-rotation-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-origin: 50% 0; font-family: var(--modica); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; inset: 0%; overflow: visible; transform: translate(0%, 100%)rotateX(-90deg)rotateY(0)rotateZ(0); } .heading-large { font-family: var(--modica); letter-spacing: -.028em; text-transform: uppercase; margin-top: 0; margin-bottom: 0; margin-right: 0; font-size: 10vw; font-weight: 600; line-height: .8; } .align-right { text-align: right; } .align-center { text-align: center; } .mission-title-wrapper { z-index: 1; margin-left: 3.6%; } .paragraph { margin-bottom: 0; } .margin-bottom-small { margin-bottom: 2.36rem; } .position-relative { position: relative; } .service-item-grid { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: 2fr 4fr 4fr 2fr; } .divider-top { width: 100%; position: absolute; inset: 0% auto auto 0%; } .divider-mutted { border-top: 1px solid var(--color--border-mutted); transform-origin: 0%; height: 0; } .divider-bottom { width: 100%; position: absolute; inset: auto auto 0% 0%; } .margin-bottom-large { margin-bottom: 7.5rem; } .container-extra-small { max-width: 15.3125rem; } .container-extra-small.right { margin-left: auto; } .grid-3-columns { grid-column-gap: 1.875rem; grid-row-gap: 6.25rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .blog-link { color: var(--color--primary); text-decoration: none; display: block; } .blog-link:hover { color: var(--color--primary); } .blog-thumbnail { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 1000rem; margin-bottom: 1.7rem; padding-top: 65%; position: relative; overflow: hidden; transform: translate(0); } .blog-thumbnail-image { object-fit: cover; width: 100%; height: 100%; display: block; position: absolute; inset: 0% auto auto 0%; } .blog-item-title { font-family: var(--modica); color: var(--color--primary); letter-spacing: -.019em; margin-top: 0; margin-bottom: 1.5rem; font-size: 1.69vw; font-weight: 500; line-height: 1.32; } .blog-item-date { letter-spacing: .01em; text-transform: uppercase; font-size: 1.0625rem; line-height: 1; } .blog-item-intro { padding-right: .625rem; position: relative; } .blog-item-circle { background-color: var(--black\); opacity: 0; border-radius: 100%; width: .25rem; height: .25rem; margin-left: -.625rem; position: absolute; inset: 1rem auto auto 0%; } .empty-state-block { border: 1px solid var(--color--border-mutted); background-color: #0000; } .footer { background-color: var(--color--primary); color: var(--color--white); margin-top: 12.5rem; } .footer.w--current { margin-top: 0; } .footer-rows { grid-column-gap: 2rem; grid-row-gap: 0rem; flex-flow: column; grid-template-rows: auto auto auto; grid-template-columns: 1fr; justify-content: flex-start; min-height: auto; font-size: 1.125rem; line-height: 1.5; display: flex; } .footer-widget { letter-spacing: .01em; text-transform: uppercase; font-size: 1.375rem; line-height: 1.1; } .footer-links-wrapper { flex-direction: column; align-items: center; display: flex; } .footer-link { font-family: var(--font-family--font-secondary); color: var(--color--white); font-size: 1.375rem; font-weight: 500; line-height: 1.1; text-decoration: none; } .footer-link:hover { color: var(--color--white); } .footer-link-inner { position: relative; overflow: hidden; } .footer-link-front { grid-column-gap: .5rem; grid-row-gap: .5rem; align-items: center; display: flex; } .footer-link-icon { flex: none; width: 1.5rem; } .footer-link-icon-image { width: 100%; display: block; } .footer-link-back { grid-column-gap: .5rem; grid-row-gap: .5rem; align-items: center; display: flex; position: absolute; inset: 0% auto auto 0%; transform: translate(0, 100%); } .footer-credits { grid-column-gap: 1.625rem; grid-row-gap: .5rem; font-family: var(--font-family--font-secondary); flex-flow: wrap; justify-content: flex-start; align-items: flex-start; font-size: 1.1875rem; font-weight: 500; display: flex; } .footer-credits.to-right { justify-content: flex-end; align-items: flex-start; } .link-inverse { box-shadow: 0 1px 0 0 var(--color--white); color: var(--color--white); text-decoration: none; transition: box-shadow .1s linear; } .link-inverse:hover { box-shadow: 0 5px 0 0 var(--color--white); color: var(--color--white); } .full-width { width: 100%; } .divider { border-top: 1px solid var(--color--primary); transform-origin: 0%; height: 0; } .divider.white { border-top-color: var(--color--white); } .navigation-divider { width: 100%; position: absolute; inset: auto auto 0 0; } .page-title-wrapper { padding-top: 6.5vw; padding-bottom: 6.5vw; } .page-title-wrapper.no-padding-bottom { padding-bottom: 0; } .page-title { font-family: var(--modica); letter-spacing: -.022em; text-transform: uppercase; margin-top: -.7vw; margin-bottom: 0; font-size: 9vw; font-weight: 600; line-height: .8; } .team-image-wrapper { margin-bottom: 1.5rem; padding-top: 125.867%; position: relative; } .team-image { object-fit: cover; width: 100%; height: 100%; display: block; position: absolute; inset: 0%; } .team-links { grid-column-gap: .1875rem; grid-row-gap: .1875rem; flex-direction: column; align-items: flex-start; display: flex; position: absolute; top: 1.25rem; left: 1.25rem; } .team-link { background-color: var(--color--white); color: var(--color--primary); border-radius: 7rem; padding: .225em .5em .25em; font-size: 1rem; line-height: 1.1; text-decoration: none; } .team-link:hover { color: var(--color--primary); } .team-title { color: var(--color--primary); letter-spacing: -.019em; margin-top: 0; margin-bottom: .36rem; font-size: 1.69rem; font-weight: 500; line-height: 1.25; } .team-role { color: var(--color--primary); letter-spacing: .01em; text-transform: uppercase; font-size: 1.0625rem; line-height: 1.25; } .faq-grid { grid-column-gap: 1.875rem; grid-row-gap: 1.875rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; } .faq-item { border: 1px solid var(--color--primary); padding: 3.125vw; } .faq-number { font-family: var(--font-family--font-secondary); margin-bottom: 5rem; font-size: 10vw; font-weight: 600; line-height: .7; } .faq-title { letter-spacing: -.022em; margin-top: 0; margin-bottom: 1.5rem; font-size: 1.75vw; font-weight: 500; line-height: 1.3; } .faq-text { color: var(--color--primary); letter-spacing: -.01em; margin-bottom: 0; font-size: 1.125rem; line-height: 1.4; } .heading-medium { font-family: var(--modica); letter-spacing: -.0125em; text-transform: uppercase; margin-top: -.7vw; margin-bottom: 0; font-size: 6vw; font-weight: 600; line-height: .75; } .call-action-column-right { text-align: right; padding-top: .35rem; } .call-action-grid { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .link-large { box-shadow: 0 1px 0 0 var(--color--primary); letter-spacing: -.022em; word-break: break-all; font-size: 2.25vw; font-weight: 500; line-height: 1.2; text-decoration: none; transition: box-shadow .1s linear; } .link-large:hover { box-shadow: 0 5px 0 0 var(--color--primary); color: var(--color--primary); } .margin-bottom-extra-small { margin-bottom: .65rem; } .form-button { grid-column-gap: .35em; grid-row-gap: .35em; border: 1px solid var(--color--primary); background-color: var(--color--white); min-height: 5.125rem; font-family: var(--font-family--font-secondary); color: var(--color--primary); text-align: center; text-transform: uppercase; background-image: url('../images/spark-in-form-button.svg'), url('../images/spark-in-form-button.svg'); background-position: 86% 175%, 86%; background-repeat: no-repeat, no-repeat; background-size: 2.0625rem, 2.0625rem; background-attachment: scroll, scroll; border-radius: 15rem; flex: none; justify-content: center; align-items: center; padding: .25em 3.06em .25em 1.6em; font-size: 1.75rem; font-weight: 600; line-height: 1; transition: background-position .5s cubic-bezier(1, 0, 0, 1); display: inline-block; } .form-button:hover { background-position: 86%, 86% -75%; } .error-message { background-color: var(--color--error-background); color: var(--color--error); border-radius: 5px; margin-top: 1.5rem; padding: .75em 1.2em; font-size: 1.06rem; font-weight: 400; } .form-info { color: #757575; letter-spacing: -.025em; margin-bottom: 2.75rem; font-size: .875rem; font-weight: 400; } .form-info-icon { width: 1.2857em; margin-right: .25em; display: inline-block; } .form-info-link { color: var(--color--secondary); transition: color .2s; } .form-info-link:hover { color: var(--color--primary); } .form-footer { padding-top: .625rem; } .form-label { font-family: var(--font-family--font-secondary); margin-bottom: 1rem; font-size: 1.69vw; font-weight: 500; } .form-field { border: 1px solid var(--color--border-mutted); min-height: 5.125rem; font-family: var(--font-family--font-secondary); color: var(--color--primary); letter-spacing: -.01em; border-radius: .5rem; margin-bottom: 0; padding: 1rem 1.5rem; font-size: 1.69vw; font-weight: 500; line-height: 1.2; } .form-field:focus { border-color: var(--color--border-mutted); } .form-field::placeholder { color: var(--color--form-placeholder); } .form-field.multi-line { min-height: 10.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } .success-message { background-color: var(--color--success-background); color: var(--color--success); border-radius: 5px; padding: .75em 1.2em; font-size: 1.25rem; } .form-info-text { font-family: var(--font-family--font-secondary); color: var(--color--secondary); line-height: 1.6; display: inline; } .form-row { margin-bottom: 2.125rem; } .form-row.full-width { flex-flow: column; display: flex; } .form-button-wrapper { flex-flow: row; display: flex; } .top { opacity: 0; width: 0; height: 0; } .split-item { margin-top: -1px; padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: 1.38vw; font-weight: 500; text-decoration: none; display: block; position: relative; overflow: hidden; } .split-item:hover { color: #111; } .split-item-columns { grid-column-gap: .75rem; grid-row-gap: .75rem; justify-content: space-between; display: flex; } .split-item-values { grid-column-gap: .25em; grid-row-gap: 0em; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; display: flex; } .project-gallery { grid-column-gap: 1.875rem; grid-row-gap: 1.875rem; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; display: grid; } .progect-gallery-image { width: 100%; } .page-title-small { font-family: var(--font-family--font-secondary); letter-spacing: -.036em; text-transform: none; margin-top: 0; margin-bottom: 0; font-size: 7.8125vw; font-weight: 600; line-height: 1; } .rich-text-blog { margin-bottom: -2.25rem; font-size: 1.25rem; } .rich-text-blog p { margin-bottom: 2em; } .rich-text-blog h5 { margin-top: 0; margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.36; } .rich-text-blog h4 { margin-top: 0; margin-bottom: 2rem; font-size: 1.36rem; font-weight: 600; line-height: 1.35; } .rich-text-blog h1 { margin-top: 0; margin-bottom: 2rem; font-size: 3rem; font-weight: 600; line-height: 1.2; } .rich-text-blog img { border-radius: 5px; } .rich-text-blog h2 { margin-top: 0; margin-bottom: 2rem; font-size: 2.5rem; font-weight: 600; line-height: 1.2; } .rich-text-blog blockquote { margin-bottom: 2em; } .rich-text-blog h3 { margin-top: 0; margin-bottom: 2rem; font-size: 1.75rem; font-weight: 600; line-height: 1.25; } .rich-text-blog ul { grid-column-gap: .75rem; grid-row-gap: .75rem; flex-direction: column; margin-bottom: 2em; padding-left: 1.5em; } .rich-text-blog ol { grid-column-gap: .75rem; grid-row-gap: .75rem; flex-direction: column; margin-bottom: 2em; padding-left: 1.5em; overflow: visible; } .rich-text-blog h6 { margin-top: 0; margin-bottom: 2rem; font-size: .95rem; line-height: 1.36; } .rich-text-blog figure { margin-bottom: 2rem; } .container-small { max-width: 25.5rem; } .sub-section { padding-top: 6.25rem; padding-bottom: 6.25rem; position: relative; } .grid-12-columns-small { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .utility-page-wrap { flex-direction: column; justify-content: center; align-items: center; width: 100vw; max-width: 100%; height: 100vh; max-height: 100%; padding: 1.875rem 0; display: flex; } .utility-page-content { text-align: left; flex-direction: column; padding-left: 1.875rem; padding-right: 1.875rem; display: flex; } .utility-page-form { flex-direction: column; align-items: stretch; min-width: 25rem; display: flex; } .offcanvas { z-index: 1000; pointer-events: none; width: 100%; height: 100vh; display: none; position: absolute; inset: 0% auto auto 0%; } .sidebar { -webkit-backdrop-filter: blur(7rem); backdrop-filter: blur(7rem); pointer-events: auto; width: 50%; height: 100%; color: var(--color--white); background-color: #000c; flex-direction: row; padding: 3.125rem 1.875rem; display: flex; position: absolute; overflow: hidden; } .sidebar-title { font-family: var(--font-family--font-secondary); letter-spacing: 0; text-transform: uppercase; font-size: 7vw; font-weight: 600; line-height: .75; } .sidebar-title-row-one { display: block; } .sidebar-title-row-two { padding-left: 4.85vw; display: block; } .sidebar-title-row-three { padding-left: 2.15vw; display: block; } .sidebar-title-row-four { text-align: right; display: block; } .sidebar-text { text-align: center; max-width: 35rem; margin-top: auto; margin-left: auto; margin-right: auto; } .sidebar-inner { flex-direction: column; width: 100%; display: flex; } .sidebar-line { border-left: 1px solid var(--color--white); opacity: .25; width: 0; height: 200%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)rotate(15deg); } .block-quote { border-left-width: 1px; border-left-color: var(--color--primary); margin-bottom: 0; } .list-unordered, .list-ordered { margin-bottom: 0; padding-left: 1.46em; } .hero-image-mobile { object-fit: cover; width: 100%; height: 100%; display: none; position: absolute; inset: 0%; } .location { letter-spacing: 0; text-transform: uppercase; flex: 0 auto; align-items: center; margin-left: 2.25rem; margin-right: auto; padding-top: 1rem; padding-bottom: 1rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.25em; text-decoration: none; display: flex; position: static; overflow: hidden; } .location:hover { color: var(--color--primary); } .location.w--current { background-image: url('../images/dot.svg'); background-position: 96% 30%; background-repeat: no-repeat; background-size: auto; } .location.home { opacity: .8; color: var(--color--white); } .location.home.w--current { background-image: url('../images/dot-white.svg'); background-position: 95% 37%; } .location-icon { width: 1.5rem; margin-right: .375rem; } .hero-content-bottom { margin-top: auto; padding-top: 3.125rem; position: relative; } .hero-services-container { flex-flow: column; justify-content: flex-end; max-width: 15.8125rem; display: flex; } .hero-text-container { max-width: 23rem; margin-left: auto; } .caption { font-family: var(--font-family--font-secondary); letter-spacing: -.01em; margin-bottom: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.205; } .hero-caption-wrapper { grid-column-gap: .2em; grid-row-gap: .2em; margin-bottom: 1.7rem; display: flex; } .caption-icon { flex: none; position: relative; top: .1rem; } .hero-service-item { grid-column-gap: .5em; grid-row-gap: .5em; padding-top: .8125rem; padding-bottom: .8125rem; line-height: 1.2; display: flex; position: relative; } .hero-service-text { font-family: var(--font-family--font-secondary); letter-spacing: .01em; } .hero-service-number { font-family: var(--font-family--font-secondary); margin-left: auto; } .hero-services { letter-spacing: 0; text-transform: uppercase; font-size: 1.0625rem; } .opacity-80 { opacity: .8; } .paragraph-small { font-family: var(--font-family--font-secondary); letter-spacing: .01em; text-indent: 0; text-transform: uppercase; margin-bottom: 0; font-size: 1.0625rem; line-height: 1.2058; } .paragraph-small.no-text-indent { text-indent: 0; } .hero-text-wrapper { flex-flow: column; justify-content: flex-end; display: flex; } .hero-image-inner { z-index: -1; width: 100%; height: 100%; position: absolute; inset: 0%; } .heading-word-first { font-family: var(--modica); } .heading-word-second { text-align: right; } .has-title-vertical { grid-column-gap: 3.125vw; grid-row-gap: 3.125vw; width: 100%; min-height: 8.6rem; display: flex; } .title-vertical-wrapper { min-width: 1.85rem; position: relative; } .title-vertical { transform-origin: 0 0; white-space: nowrap; position: absolute; bottom: 0; left: 0; transform: translate(0, 100%)rotate(-90deg); } .number-vertical { transform-origin: 0 0; white-space: nowrap; position: absolute; top: 0; left: 0; transform: rotate(-90deg); } .number-vertical-inner { transform: translate(-100%); } .about-section-content-inner { flex-flow: column; width: 100%; display: flex; } .about-image-wrapper { margin-left: 3.6%; } .divider-vertical { z-index: 1; border-right: 1px solid var(--color--primary); transform-origin: 50% 0; width: 0; height: 100%; position: absolute; inset: 0% 0% auto auto; } .divider-vertical.white { border-right-color: var(--color--white); } .image-placeholder { background-color: var(--color--primary); transform-origin: 0%; width: 100%; height: 100%; position: absolute; inset: 0%; } .mission-heading-wrapper { grid-column-gap: .36rem; grid-row-gap: .36rem; flex-flow: row; justify-content: flex-start; margin-left: 0; margin-right: -.2vw; display: inline-flex; position: relative; } .mission-heading-wrapper.margin-left { margin-left: 16.7vw; } .mission-heading-number { font-family: var(--font-family--font-secondary); letter-spacing: .01em; text-transform: uppercase; padding-left: .25em; padding-right: .25em; font-size: 1.0625rem; line-height: 1; position: absolute; inset: .86vw 0% auto auto; transform: translate(100%); } .mission-heading-number.left { bottom: auto; left: 0%; right: auto; transform: translate(-100%); } .mission-image { padding-bottom: 155%; position: relative; } .mission-image-wrapper { margin-top: -14.5vw; } .mission-text { margin-top: 8vw; margin-left: 3.6%; } .text-block { font-family: var(--font-family--font-secondary); letter-spacing: .01em; } .split-section { height: 216vh; position: relative; } .split-background { background-color: var(--color--primary); transform-origin: 100%; width: 50%; height: 100%; position: absolute; inset: 0% 0% 0% auto; } .split-content { width: 50%; min-height: 100vh; color: var(--color--white); flex-flow: column; margin-top: -100vh; margin-left: auto; padding: 3.75vw; display: flex; position: sticky; top: 0; } .accordion-item { display: block; /* overflow was 'hidden' here, but it clipped the left ink of the heavy Modica titles (the first letter of VFX / COLOR / AI GEN... got cut in every browser at large sizes). The dropdown reveal is clipped by .accordion-content instead, so the item can stay visible. */ overflow: visible; } .accordion-content { overflow: hidden; } .accordion-toggle { grid-column-gap: .5625rem; grid-row-gap: .5625rem; color: var(--color--white); padding: 0; display: flex; } .accordion-toggle:focus-visible, .accordion-toggle[data-wf-focus-visible] { border: 1px solid var(--color--white); } .accordion-title { font-family: var(--modica); letter-spacing: -.025em; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 4.3vw; font-weight: 600; line-height: .8; } .accordion-icon { background-color: var(--color--white); border-radius: 100%; flex: none; justify-content: center; align-items: center; width: 1rem; height: 1rem; display: flex; position: relative; top: .7vw; } .accordion-plus { flex: none; justify-content: center; align-items: center; width: 50%; height: 50%; display: flex; position: relative; } .accordin-plus-line-v { background-color: var(--color--primary); width: 2px; height: 100%; } .accordin-plus-line-h { background-color: var(--color--primary); width: 100%; height: 2px; position: absolute; } .accordion-content { max-width: 100%; } .accordion-content.w--open { background-color: #0000; position: static; overflow: hidden; } .icons-list { font-size: 1.0625rem; } .icons-list-item { grid-column-gap: .36em; grid-row-gap: .36em; align-items: flex-start; display: flex; } .icons-list-image { flex: none; position: relative; top: .2rem; } .icons-list-text { font-family: var(--font-family--font-secondary); font-weight: 600; line-height: 1.2059; } .accordion-content-inner { margin-bottom: 2.36rem; padding-top: 2rem; } .split-content-bottom { margin-top: auto; } .split-image-wrapper { width: 50%; height: 100vh; position: sticky; inset: 0 auto auto; } .split-image { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; } .portfolio-tabs-menu { background-color: var(--color--primary); letter-spacing: .01em; text-transform: uppercase; border-radius: 7rem; justify-content: flex-end; max-width: 15.3125rem; min-height: 2.875rem; margin-top: -2.875rem; margin-left: auto; font-size: 1rem; font-weight: 600; line-height: 1; display: flex; } .portfolio-tab-link { width: 50%; color: var(--color--white); text-align: center; background-color: #0000; justify-content: center; align-items: center; transition-property: none; display: flex; } .portfolio-tab-link:hover { color: var(--color--white); } .portfolio-tab-link.w--current { background-color: #0000; justify-content: center; align-items: center; padding: .25rem; } .portfolio-tab-link.first { color: var(--color--primary); } .portfolio-tab-pane { padding-top: 7.5rem; } .portfolio-tab-pane.padding-smaller { padding-top: 4.375rem; } .portfolio-tab-active { padding: 3px; display: flex; position: absolute; inset: 0%; } .portfolio-tab-active-background { background-color: var(--color--white); border-radius: 7rem; width: 100%; } .portfolio-tab-text { position: relative; } .project-arrow { background-color: #fff; border-radius: 100%; justify-content: center; align-self: flex-start; align-items: center; width: 2.375rem; height: 2.375rem; display: flex; } .project-thumbnail { object-fit: cover; width: 100%; height: 100%; display: block; position: absolute; inset: 0%; } .project-content { flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 1.875rem; display: flex; position: absolute; } .project-title { font-family: var(--font-family--font-secondary); color: var(--color--white); letter-spacing: -.016em; margin-top: 0; margin-bottom: 0; font-size: 1.6rem; font-weight: 500; line-height: 1.2; } .project-arrow-inner { width: 1.5rem; position: relative; overflow: hidden; } .project-label { opacity: 1; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: var(--color--primary); background-color: #ffffffbf; border-radius: 100px; overflow: hidden; } .project-title-wrapper { margin-top: -.2rem; position: relative; overflow: hidden; } .project-content-footer { grid-column-gap: .4375rem; grid-row-gap: .4375rem; flex-wrap: wrap; align-content: flex-start; display: flex; } .project-arrow-back { position: absolute; inset: 0%; transform: translate(-100%, 100%); } .project-title-back { position: absolute; inset: 0%; transform: translate(0, 100%); } .project-content-header { grid-column-gap: .75rem; grid-row-gap: .75rem; justify-content: space-between; align-items: center; display: flex; } .project-arrow-image { width: 100%; display: block; } .project-label-text { font-family: var(--font-family--font-secondary); padding: .35em 1.00625em .55em; font-size: 1rem; line-height: 1; } .project-link { width: 100%; padding-bottom: 56.25%; display: block; position: relative; overflow: hidden; } .project-link.full-width { padding-bottom: 51.948%; } .projects-grid { grid-column-gap: 0.9375rem; grid-row-gap: 0.9375rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .grid-12-columns-fixed-gap { grid-column-gap: 1.875rem; grid-row-gap: 1.875rem; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .projects-list-link { text-decoration: none; display: block; position: relative; } .projects-list-link:hover { color: var(--color--primary); flex-flow: column; justify-content: center; display: flex; } .projects-list-text { font-family: var(--font-family--font-secondary); letter-spacing: -.02em; margin-top: -.06em; margin-bottom: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; } .projects-list { flex-flow: column; display: flex; } .projects-list-inner { z-index: 1; padding-top: 1.5rem; padding-bottom: 1.5rem; position: relative; } .projects-list-categories { display: flex; } .projects-list-comma { margin-right: .2em; } .projects-list-arrow { width: 1.5rem; height: 1.5rem; margin-left: auto; position: relative; top: .1rem; } .projects-list-arrow-black { width: 100%; position: absolute; inset: 0% auto auto 0%; } .projects-list-arrow-white { opacity: 0; width: 100%; position: absolute; inset: 0% auto auto 0%; } .projects-list-columns { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .projects-list-hover { background-color: var(--color--primary); transform-origin: 50% 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin-bottom: -1px; position: absolute; inset: 0%; transform: scale3d(1, 0, 1); } .portfolio-tab-inner { position: relative; } .projects-list-image-wrapper { width: 15%; height: 100%; position: absolute; inset: 0% auto 0% 0%; } .projects-list-image-inner { padding-top: 131.3%; position: sticky; top: 1.875rem; } .tabs-content { overflow: visible; } .projects-list-image { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; } .projects-list-image.opacity-zero { opacity: 0; } .projects-list-title { letter-spacing: -.02em; margin-top: -.06em; margin-bottom: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; } .section-with-background { background-color: var(--color--primary); min-height: 100vh; color: var(--color--white); flex-flow: column; justify-content: center; padding-top: 12.5rem; padding-bottom: 12.5rem; display: flex; position: relative; } .section-background { width: 100%; height: 100vh; position: sticky; top: 0; } .section-background-video { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; } .section-background-overlay { background-color: var(--color--primary); opacity: .7; pointer-events: none; width: 100%; height: 100%; position: absolute; inset: 0%; } .section-background-header { width: 100%; height: 100%; position: absolute; inset: 0% auto auto 0%; } .section-background-wrapper { width: 100%; height: 100%; position: absolute; inset: 0%; } .benefits-container { max-width: 70.25vw; } .benefits-grid { grid-column-gap: 10vw; grid-row-gap: 9.375rem; place-items: stretch center; } .benefits-placeholder { height: 0; } .benefits-item { background-color: var(--color--white); max-width: 23rem; color: var(--color--primary); flex-flow: row; display: flex; } .benefits-item.full-width { max-width: 100%; display: flex; } .benefits-header { grid-column-gap: 1.125rem; grid-row-gap: 1.125rem; align-items: center; padding: 2.5rem; display: flex; } .benefits-title { letter-spacing: -.02em; overflow-wrap: anywhere; margin-bottom: 0; font-size: 1.75rem; font-weight: 500; line-height: 1.1075; } .benefits-text { margin-bottom: 0; font-size: 1.125rem; line-height: 1.33333; } .benefits-content { flex-flow: column; flex: 1; padding: 5.5rem 2.5rem 2.5rem; display: flex; } .benefits-item-inner { flex-flow: column; width: 100%; margin: .5rem; padding-left: 1px; padding-right: 1px; display: flex; position: relative; } .benefits-divider-left { border-left: 1px solid var(--color--primary); width: 0; height: 100%; position: absolute; inset: 0% auto 0% 0%; } .benefits-divider-right { border-right: 1px solid var(--color--primary); border-left: 1px none var(--color--primary); width: 0; height: 100%; position: absolute; inset: 0% 0% 0% auto; } .benefits-icons { width: 4rem; } .section-background-header-inner { padding-top: 3.125rem; padding-bottom: 3.125rem; position: sticky; top: 0; } .section-header-interaction-triger { pointer-events: none; width: 100%; height: 100%; position: absolute; inset: 100vh auto auto 0%; } .section-header-text-wrapper { margin-top: .36vw; } .footer-row-top { min-height: 4vw; padding-top: 1rem; } .footer-row-middle { flex-flow: column; justify-content: center; align-items: stretch; display: flex; position: relative; } .footer-row-bottom { flex-flow: column; min-height: 4.3vw; padding-bottom: 1rem; display: flex; } .back-top-link { grid-column-gap: .5rem; grid-row-gap: .5rem; font-family: var(--font-family--font-secondary); align-items: center; margin-top: -.125rem; text-decoration: none; display: inline-flex; } .back-top-icon { background-color: #fff; border-radius: 100%; flex: none; justify-content: center; align-self: flex-start; align-items: center; width: 1.75rem; height: 1.75rem; display: flex; } .back-top-icon-inner { width: 1.25rem; position: relative; overflow: hidden; } .back-top-icon-front { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; } .back-top-icon-image { max-width: 1.5rem; display: block; } .back-top-icon-back { opacity: 0; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; inset: 0% auto auto 0%; transform: translate(0, 100%); } .back-top-text { color: #fff; text-decoration: none; } .margin-top-auto { margin-top: auto; } .grid-12-columns-extra-small { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .grid-12-columns-zero { grid-column-gap: 1.875vw; grid-row-gap: 0vw; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .footer-heading { width: auto; font-family: var(--modica); letter-spacing: -.0125em; text-transform: uppercase; margin-top: -.7vw; margin-bottom: 0; font-size: 6.5vw; font-weight: 600; line-height: .8; } .marquee-track-reverse { grid-column-gap: 0rem; grid-row-gap: 0rem; flex-direction: row; flex: none; display: flex; } .marquee-track-reverse.gutter-large { justify-content: flex-end; align-items: stretch; } .footer-circle-wrapper { pointer-events: none; justify-content: center; align-items: center; width: 100%; height: 95%; display: flex; position: absolute; inset: 0%; } .footer-circle-link { pointer-events: auto; justify-content: center; align-items: center; width: 9vw; height: 9vw; padding: .625rem; display: flex; position: relative; top: .5vw; } .footer-circle-backgound { background-color: var(--color--primary); border-radius: 100%; width: 100%; height: 100%; padding: 3px; position: absolute; inset: 0%; } .footer-circle-border { border: 1px solid var(--color--white); opacity: .3; border-radius: 100%; width: 100%; height: 100%; } .footer-circle-image { width: 100%; display: block; position: relative; } .footer-circle-icon-wrapper { width: 1.5rem; position: absolute; overflow: hidden; } .footer-circle-icon-back { position: absolute; top: 100%; left: -100%; } .overlapping-image { padding-top: 127.664%; position: relative; } .overlapping-image-one-wrapper { padding-right: 11.5vw; } .overlapping-image-two-wrapper { padding-left: 5.75vw; padding-right: 5.75vw; } .overlapping-image-three-wrapper { padding-left: 11.5vw; } .paragraph-extra-large { font-family: var(--font-family--font-secondary); letter-spacing: -.027em; margin-bottom: 0; font-size: 2.75vw; line-height: 1.25; } .image-parallax-wrapper { height: 50vw; position: relative; overflow: hidden; transform: translate(0); } .image-parallax-inner { object-fit: cover; width: 100%; min-height: 117%; position: absolute; top: 50%; left: 0%; } .image-parallax { object-fit: cover; width: 100%; height: 100%; display: block; position: absolute; transform: translate(0, -50%); } .section-bottom { flex-flow: column; justify-content: flex-end; display: flex; } .awards-list-columns { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .service-item-columns { grid-column-gap: 1.875vw; grid-row-gap: 1.875vw; grid-template-rows: auto; grid-template-columns: 1fr 25.3636%; } .service-item { background-color: var(--color--background-primary); padding-top: 2.8rem; padding-bottom: 9.375vw; position: relative; } .service-item.last { padding-bottom: 0; } .service-title { font-family: var(--modica); letter-spacing: -.022em; text-transform: uppercase; margin-top: -.7vw; margin-bottom: 0; font-size: 10vw; font-weight: 600; line-height: .8; } .service-image { padding-bottom: 145.429%; position: relative; } .services-content { flex-flow: column; display: flex; } .service-content-columns { grid-column-gap: 4vw; grid-row-gap: 4vw; grid-template-rows: auto; grid-template-columns: 1fr 28.079%; } .service-text { font-family: var(--font-family--font-secondary); letter-spacing: -.02em; margin-bottom: 0; font-size: 2.25vw; line-height: 1.17; } .service-tag { border: 1px solid var(--color--primary); font-family: var(--font-family--font-secondary); letter-spacing: .01em; text-transform: uppercase; border-radius: 7rem; padding: .3rem .75rem; font-size: 1.0625rem; line-height: 1.2; } .div-block { grid-column-gap: .3125rem; grid-row-gap: .3125rem; flex-flow: column; align-items: flex-start; display: flex; } .projects-rows { grid-column-gap: 1.875rem; grid-row-gap: 1.875rem; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-columns: 1fr; display: grid; } .page-title-medium { font-family: var(--modica); letter-spacing: -.022em; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-size: 8vw; font-weight: 600; line-height: .8; } .contact-section-content { flex-flow: row; justify-content: flex-start; display: flex; } .contact-section-content-inner { flex-flow: column; width: 100%; display: flex; } .contact-section-bottom { max-width: 100%; margin-top: auto; } .marquee-heading { font-family: var(--modica); letter-spacing: -.0125em; text-transform: uppercase; margin-top: -.7vw; margin-bottom: 0; font-size: 7vw; font-weight: 600; line-height: .8; } .contact-image-wrapper { margin-left: 3.6%; } .contact-image-inner { padding-bottom: 129.35%; position: relative; overflow: hidden; } .container-fixed { justify-content: space-between; max-width: 82rem; margin-left: auto; margin-right: auto; padding-left: 1.875rem; padding-right: 1.875rem; } .icon-link { grid-column-gap: .3rem; grid-row-gap: .3rem; align-items: flex-start; font-size: 1.125rem; line-height: 1.333; text-decoration: none; display: flex; } .icon-link:hover { color: var(--color--primary); } .icon-link-image { width: 1.25rem; position: relative; top: .125em; } .benefits-links { grid-column-gap: .3rem; grid-row-gap: .3rem; flex-flow: column; align-items: flex-start; margin-top: 1.5rem; display: flex; } .benefits-item-one, .benefits-item-two, .benefits-item-three { width: 100%; display: flex; } .benefits-3-columns { grid-column-gap: 1.875rem; grid-row-gap: 1.875rem; grid-template-rows: auto; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr) minmax(10px, 1fr); grid-auto-flow: row; } .hero-content-middle { color: var(--color--white); margin-top: auto; position: relative; } .hero-heading-wrapper { position: relative; overflow: hidden; } .hero-heading-one { mix-blend-mode: overlay; position: absolute; inset: 0%; } .hero-heading-two { opacity: .7; mix-blend-mode: overlay; position: absolute; inset: 0%; } .hero-heading-three { opacity: .5; position: relative; } .hero-work-slider { color: #fff; background-color: #0000; flex: 0 auto; width: 100%; height: 100%; font-size: 1rem; line-height: 1.375; } .hero-work-image { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0%; } .blog-wrapper { padding-top: 6.25rem; } .hero-caption-flex { flex-flow: wrap; display: flex; } .hero-caption-flex.flex-center { justify-content: center; } .project-overvew { margin-bottom: 1rem; } .hero-captions-wrapper { width: 100%; position: absolute; inset: auto auto 0% 0%; } .container-medium { justify-content: space-between; max-width: 52rem; margin-left: auto; margin-right: auto; padding-left: 1.875rem; padding-right: 1.875rem; } .services-items-wrapper { grid-column-gap: 9.375vw; grid-row-gap: 9.375vw; flex-flow: column; } .service-scroll-overlay { background-color: var(--color--background-primary); opacity: 0; pointer-events: none; margin-left: -1.875rem; margin-right: -1.875rem; position: absolute; inset: 0%; } .list { margin-bottom: 0; } .shop-wrapper { padding-top: 6.25rem; } .shop-link { color: var(--color--primary); text-decoration: none; display: block; } .shop-link:hover { color: var(--color--primary); } .shop-thumbnail { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin-bottom: 1.7rem; padding-top: 100%; position: relative; overflow: hidden; transform: translate(0); } .shop-thumbnail-image { object-fit: cover; width: 100%; height: 100%; display: block; position: absolute; inset: 0% auto auto 0%; } .shop-item-intro { padding-right: .625rem; position: relative; } .shop-item-circle { background-color: var(--black\); opacity: 0; border-radius: 100%; width: .25rem; height: .25rem; margin-left: -.625rem; position: absolute; inset: 1rem auto auto 0%; } .shop-item-title { font-family: var(--modica); color: var(--color--primary); letter-spacing: -.019em; margin-top: 0; margin-bottom: 1.5rem; font-size: 1.69vw; font-weight: 500; line-height: 1.32; } .shop-item-price { letter-spacing: .01em; text-transform: uppercase; font-size: 1.0625rem; line-height: 1; } .button-alt { border: 1px solid var(--color--primary); background-color: var(--color--white); min-height: 3.6rem; color: var(--color--primary); letter-spacing: .01em; text-transform: uppercase; border-radius: 7rem; justify-content: center; align-items: center; margin-top: 0; padding: .25em 2em; font-size: 1.125rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .2s, color .2s linear; display: flex; } .button-alt:hover, .button-alt.button-black { background-color: var(--color--primary); color: var(--color--white); } .button-alt.button-black:hover { background-color: var(--color--white); color: var(--color--primary); } .shop-buy-block { grid-column-gap: .6rem; grid-row-gap: .6rem; flex-flow: wrap; justify-content: flex-start; align-items: flex-start; display: flex; } .quantity-form-field { border-color: var(--color--border-mutted); background-color: var(--color--white); border-radius: 7rem; width: 5rem; height: 3.6rem; margin-bottom: 0; padding: .5rem .4rem .5rem .75rem; font-size: 1.125rem; } .shop-price { font-family: var(--font-family--font-secondary); letter-spacing: -.025em; text-transform: uppercase; margin-bottom: 0; font-size: 5.36vw; font-weight: 600; line-height: .8; } .no-margin-bottom { margin-bottom: 0; } .grid-2-columns { grid-column-gap: 1.875rem; grid-row-gap: 6.25rem; grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-auto-columns: 1fr; display: grid; } .checkout-form { background-color: #0000; padding: 0; } .content-wrapper { padding-top: 6.5vw; padding-bottom: 0; } .order-confirmation, .paypal-checkout-form { background-color: #0000; padding: 0; } .cart-wrapper { z-index: 10; position: fixed; top: 7rem; right: 1.875rem; } .remove-button { color: var(--color--error); font-size: 1rem; } .remove-button:hover { color: var(--color--error); } .cart-list { font-size: 1.1rem; line-height: 1.36; } .cart-quantity { border-color: var(--color--border-mutted); background-color: #0000; border-radius: 7rem; } .cart-footer { border-top-color: var(--color--border-mutted); } .cart-header { border-bottom-color: var(--color--border-mutted); } .cart-button { -webkit-backdrop-filter: blur(.36rem); backdrop-filter: blur(.36rem); background-color: #0000; border-style: solid; border-color: #000; border-radius: 100%; justify-content: center; align-items: center; width: 3.6rem; height: 3.6rem; padding: .2rem; transition: color .2s linear; position: relative; overflow: hidden; } .cart-button:hover { color: var(--color--white); } .cart-icon { opacity: .9; width: 1.5rem; } .cart-button-quantity { color: var(--color--success); margin-left: 0; font-size: .9rem; position: absolute; top: .2rem; right: .2rem; } .cart-button-background { border: 5px solid var(--color--success-background); background-color: var(--color--success); opacity: .85; border-radius: 100%; position: absolute; inset: 0%; } .cart-button-inner { position: relative; } .cart { z-index: 100; } .image { opacity: 1; color: var(--color--primary); -webkit-text-fill-color: inherit; mix-blend-mode: lighten; background-clip: border-box; border-radius: 0; } .hero-title-arcade { font-family: var(--font-family--font-secondary); letter-spacing: -.0225em; text-transform: uppercase; margin-top: -.1em; margin-bottom: 0; font-size: 15.7vw; font-weight: 600; line-height: .8; } .hero-title-arcade:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { font-family: var(--modica); margin-top: 0; } .text-block-2, .text-block-3, .text-block-4, .text-block-5, .text-block-6, .text-block-7, .text-block-8, .text-block-9, .text-block-10, .text-block-11 { font-family: var(--font-family--font-secondary); } .bold-text, .bold-text-2 { font-weight: 500; } @media screen and (max-width: 991px) { .navigation-menu { border-bottom: 1px solid var(--color--primary); background-color: var(--color--white); text-align: left; margin-left: 0; margin-right: 0; padding: .9375rem 1.25rem; display: block; } .navigation-menu.home { background-color: var(--color--primary); } .menu-button.home { opacity: .8; } .navigation-link { margin-left: 0; padding-top: .7rem; padding-bottom: .7rem; font-size: 1.25rem; } .navigation-link.w--current { display: inline-block; } .navigation-link.home { opacity: 100; color: var(--color--white); } .navigation-icon-text { display: block; } .hero-title { font-size: 15vw; } .hero-heading { perspective-origin: 50%; } .hero-heading.modica:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { margin-left: -47px; padding-left: 0; } .hero-caption-grid { grid-template-rows: auto auto; grid-template-columns: 1fr; } .hero-caption-first { text-align: center; } .hero-caption-second { display: none; } .hero-caption-third { text-align: center; } .hero-caption-inner { justify-content: center; } .container { max-width: 100%; padding-left: 1.875rem; padding-right: 1.875rem; } .grid-12-columns { grid-row-gap: 6.25rem; } .section-title-text.to-right.hidden-on-mobile { display: none; } .section-title-text.visible-on-mobile { display: block; } .heading-small { font-size: 7.6vw; } .about-section-content { padding-right: 0%; } .paragraph-large { text-indent: 0; font-size: 2.8vw; } .heading-rotation { perspective-origin: 50%; } .heading-large { margin-top: -.08em; font-size: 13vw; } .mission-title-wrapper { margin-left: 0%; position: relative; } .position-relative { position: relative; } .service-item-grid { grid-template-rows: auto auto; grid-template-columns: 1fr 5fr 2fr; } .margin-bottom-large { margin-bottom: 6rem; } .grid-3-columns { grid-column-gap: 1rem; grid-row-gap: 3.25rem; grid-template-columns: 1fr 1fr; } .blog-item-title { font-size: 2.8vw; } .blog-item-intro { padding-right: 0; } .footer-rows { min-height: 80vh; } .footer-widget, .footer-link { font-size: 1.2rem; } .footer-credits { text-align: center; justify-content: center; align-items: flex-start; font-size: 1.0625rem; } .footer-credits.to-right { justify-content: center; align-items: flex-start; } .page-title-wrapper { text-align: center; } .page-title { font-size: 12vw; } .team-image-wrapper { margin-bottom: 1.2rem; } .faq-grid { grid-row-gap: 1.875rem; grid-template-columns: 1fr 1fr; } .faq-number { font-size: 15vw; } .faq-title { font-size: 2.8vw; } .heading-medium { font-size: 10vw; } .call-action-column-right { text-align: left; } .call-action-grid { grid-row-gap: 3.125rem; } .link-large { font-size: 3.6vw; } .form-label { font-size: 2.8vw; } .form-field { letter-spacing: 0; font-size: 2.8vw; } .split-item { font-size: 2.36vw; } .page-title-small { font-size: 9vw; } .grid-12-columns-small { grid-row-gap: 3.125rem; } .location { padding-top: .9375rem; padding-bottom: .9375rem; } .location.w--current { display: inline-block; } .location.home { color: var(--color--white); } .has-title-vertical { grid-column-gap: 5vw; grid-row-gap: 5vw; } .about-image-wrapper { margin-left: 0%; } .mission-heading-wrapper { z-index: 1; } .mission-heading-number { top: .25vw; } .mission-text { margin-left: 0%; } .split-section { height: auto; } .split-background { display: none; } .split-content { background-color: var(--color--primary); width: 100%; min-height: 0; margin-top: 0; padding: 3.125rem 1.875rem; position: relative; } .accordion-title { font-size: 7.6vw; } .split-image-wrapper { width: 100%; height: auto; padding-top: 56.25%; position: relative; } .portfolio-tab-pane, .portfolio-tab-pane.padding-smaller { padding-top: 3.125rem; } .project-arrow { flex: none; width: 1.75rem; height: 1.75rem; } .project-content { padding: 1.25rem; } .project-title { font-size: 1.35rem; } .project-content-footer { grid-column-gap: .35rem; grid-row-gap: .35rem; } .project-label-text { padding-bottom: .4em; padding-left: .5em; padding-right: .5em; font-size: .9rem; font-weight: 400; } .projects-grid { grid-column-gap: 1rem; grid-row-gap: 1rem; } .grid-12-columns-fixed-gap { grid-column-gap: 1rem; grid-row-gap: 3.125rem; } .projects-list-text { font-size: 1.25rem; } .projects-list-columns { grid-row-gap: 1rem; } .projects-list-image-wrapper { width: 18%; display: none; } .projects-list-title { font-size: 1.25rem; } .benefits-container { max-width: 100%; } .benefits-grid { grid-column-gap: 1rem; grid-row-gap: 5rem; } .grid-12-columns-extra-small { grid-row-gap: .5rem; } .grid-12-columns-zero { grid-row-gap: 0rem; } .footer-heading { font-size: 16vw; } .footer-circle-link { width: 20vw; height: 20vw; padding: .5rem; } .paragraph-extra-large { font-size: 3.6vw; } .awards-list-columns { grid-row-gap: 1rem; } .service-item-columns { grid-column-gap: 5vw; grid-row-gap: 5vw; } .service-content-columns { grid-template-columns: 1fr; } .service-text { font-size: 3vw; } .div-block { flex-flow: wrap; } .projects-rows { grid-column-gap: 1rem; grid-row-gap: 1rem; } .page-title-medium { font-size: 12vw; } .contact-section-content { padding-right: 0%; } .contact-section-bottom { max-width: 80%; margin-left: auto; margin-right: auto; } .marquee-heading { font-size: 10vw; } .contact-image-wrapper { margin-left: 0%; } .benefits-3-columns { grid-column-gap: 1rem; grid-row-gap: 1rem; grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr); } .blog-wrapper { padding-top: 6rem; } .hero-caption-flex { justify-content: center; } .shop-wrapper { padding-top: 6rem; } .shop-item-intro { padding-right: 0; } .shop-item-title { font-size: 2.8vw; } .shop-price { font-size: 7.6vw; } .grid-2-columns { grid-column-gap: 1rem; grid-row-gap: 3.25rem; grid-template-columns: 1fr 1fr; } .hero-title-arcade { font-size: 15vw; } } @media screen and (max-width: 767px) { h1 { font-size: 2.5rem; } h2 { font-size: 2.15rem; } .logo { padding-left: 0; } .menu-button { flex-direction: row; justify-content: center; align-items: center; padding: 0; } .menu-icon-middle { padding-bottom: 0; padding-right: 0; } .navigation-link { margin-left: 0; font-size: 1.25rem; } .navigation-link.w--current { flex: 0 auto; display: inline-block; } .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; } .hero-title { font-size: 17vw; } .hero-heading.modica:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { margin-left: -26px; } .heading-rotation-wrapper { margin-top: 1vw; } .section { padding-top: 7.5rem; } .container { max-width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; } .heading-small { font-size: 9vw; } .paragraph-large { font-size: 4vw; } .service-item-grid { grid-row-gap: 1.25rem; grid-template-rows: auto auto auto; } .margin-bottom-large { margin-bottom: 4.25rem; } .grid-3-columns { grid-template-columns: 1fr; } .blog-item-title { font-size: 4.2vw; } .footer { margin-top: 7.5rem; } .footer-widget { text-align: center; } .page-title { font-size: 13.7vw; } .faq-grid { grid-template-columns: 1fr; } .faq-number { font-size: 18vw; } .faq-title { font-size: 4.2vw; } .link-large { font-size: 5.25vw; } .form-button { background-size: 1.7rem, 1.7rem; min-height: 4.25rem; font-size: 1.375rem; } .form-label { font-size: 4vw; } .form-field { min-height: 4.25rem; font-size: 4vw; } .form-field.multi-line { padding-top: 1.25rem; padding-bottom: 1.25rem; } .split-item { font-size: 3.6vw; } .project-gallery { grid-column-gap: 1.25rem; grid-row-gap: 1.25rem; } .rich-text-blog h5, .rich-text-blog h4 { margin-bottom: 1.5rem; } .rich-text-blog h1 { margin-bottom: 1.5rem; font-size: 2.5rem; } .rich-text-blog h2 { margin-bottom: 1.5rem; font-size: 2.15rem; } .rich-text-blog h3, .rich-text-blog h6 { margin-bottom: 1.5rem; } .utility-page-form { min-width: 100%; } .location.w--current { flex: 0 auto; display: inline-block; } .hero-services-container, .hero-text-container { max-width: 100%; } .split-content { padding-left: 1.25rem; padding-right: 1.25rem; } .accordion-title { font-size: 9vw; } .accordion-icon { top: 1vw; } .project-title { font-size: 1.25rem; } .projects-grid { grid-column-gap: 1.25rem; grid-row-gap: 1.25rem; } .section-with-background { padding-top: 7.5rem; padding-bottom: 7.5rem; } .section-background-header { position: relative; } .benefits-grid { grid-template-rows: auto; grid-template-columns: 1fr; } .benefits-placeholder { display: none; } .section-background-header-inner { padding-top: 0; } .back-top-icon { margin-top: .1rem; } .footer-heading { font-size: 18vw; } .paragraph-extra-large { font-size: 4.25vw; } .service-title { overflow-wrap: anywhere; font-size: 9.2vw; } .service-text { font-size: 3.6vw; } .projects-rows { grid-column-gap: 1.25rem; grid-row-gap: 1.25rem; } .contact-section-bottom { max-width: 100%; } .container-fixed { padding-left: 1.25rem; padding-right: 1.25rem; } .benefits-3-columns { grid-template-columns: minmax(10px, 1fr); } .blog-wrapper { padding-top: 4.25rem; } .container-medium { padding-left: 1.25rem; padding-right: 1.25rem; } .shop-wrapper { padding-top: 4.25rem; } .shop-item-title { font-size: 4.2vw; } .shop-price { font-size: 9vw; } .grid-2-columns { grid-template-columns: 1fr; } .cart-wrapper { top: auto; bottom: 1.25rem; right: 1.25rem; } .hero-title-arcade { font-size: 17vw; } } @media screen and (max-width: 479px) { h1 { font-size: 2rem; font-weight: 600; } h2 { font-size: 1.7rem; font-weight: 600; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1rem; } h6 { font-size: .9rem; } .section-hero { padding-bottom: 1.875rem; } .hero-image { display: none; } .navigation-menu { padding-left: .3125rem; padding-right: .3125rem; } .menu-button { width: 48px; height: 48px; } .navigation-link { padding-top: .625rem; padding-bottom: .625rem; } .navigation-link.home { font-size: 1.2rem; } .navigation { padding-top: .625rem; padding-bottom: .625rem; } .container-fluid { padding-left: .9375rem; padding-right: .9375rem; } .hero-content-top { opacity: .8; mix-blend-mode: normal; } .hero-title { margin-top: -.2em; font-size: 22.5vw; } .hero-title:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { font-size: 20vw; } .hero-heading.modica:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { margin-left: 0; position: relative; } .heading-rotation-wrapper { margin-top: 3vw; } .container { padding-left: .9375rem; padding-right: .9375rem; } .grid-12-columns { grid-row-gap: 4.85rem; } .section-title { margin-bottom: 1.5rem; } .marquee-item { margin-right: 16vw; } .marquee-item.margin-left { margin-left: 16vw; } .heading-small { font-size: 10vw; line-height: 1; } .paragraph-large { letter-spacing: -.01em; font-size: 5.5vw; } .paragraph-large.no-text-indent { letter-spacing: -.01em; } .margin-bottom-medium { margin-bottom: 2.75rem; } .heading-rotation._2 { margin-left: -9px; overflow: visible; } .heading-large { margin-top: 0; font-size: 13vw; } .container-extra-small.right { margin-left: 0; } .grid-3-columns { grid-row-gap: 2.75rem; } .blog-item-title { letter-spacing: -.01em; font-size: 1.35rem; } .page-title-wrapper { padding-top: 2.75rem; padding-bottom: 2.75rem; } .page-title { line-height: .9; } .team-image-wrapper { margin-bottom: 1rem; } .team-title { font-size: 1.5rem; } .faq-grid { grid-row-gap: 1.875rem; } .faq-item { padding: 2rem; } .faq-number { margin-bottom: 2.75rem; font-size: 30vw; } .faq-title { font-size: 1.5rem; } .heading-medium { font-size: 13.5vw; line-height: .9; } .call-action-grid { grid-row-gap: 2.75rem; } .link-large { font-size: 6vw; } .margin-bottom-extra-small { margin-bottom: 1rem; } .form-button { background-position: 87% 175%, 87%; background-size: 1.45rem, 1.45rem; min-height: 3.75rem; font-size: 1.15rem; } .form-label { margin-bottom: .75rem; font-size: 5.5vw; } .form-field { min-height: 3.75rem; padding-left: 1rem; padding-right: 1rem; font-size: 5.5vw; } .form-field.multi-line { min-height: 15rem; padding-top: 1.05rem; padding-bottom: 1.05rem; } .split-item { font-size: 5.25vw; } .project-gallery { grid-column-gap: 1rem; grid-row-gap: 1rem; } .page-title-small { letter-spacing: -.02em; font-size: 10vw; } .rich-text-blog h5 { font-size: 1rem; } .rich-text-blog h4 { font-size: 1.25rem; } .rich-text-blog h1 { font-size: 2rem; } .rich-text-blog h2 { font-size: 1.7rem; } .rich-text-blog h3 { font-size: 1.5rem; } .rich-text-blog h6 { font-size: .9rem; } .sub-section { padding-top: 2.75rem; padding-bottom: 2.75rem; } .grid-12-columns-small { grid-row-gap: 2.75rem; } .hero-image-mobile { display: block; } .location { padding-top: .625rem; padding-bottom: .625rem; display: none; } .heading-word-first, .heading-word-second { text-align: center; } .has-title-vertical { grid-column-gap: 5vw; grid-row-gap: 5vw; } .mission-heading-wrapper.margin-left { margin-left: 9vw; } .mission-heading-number { font-size: .75rem; } .mission-image-wrapper { margin-top: -18vw; } .mission-text { margin-top: 0; } .accordion-toggle { align-items: center; } .accordion-title { font-size: 9.7vw; /* near the original size; paired with tighter icon spacing below so the + on "COLOR GRADING" still fits */ line-height: 1; } /* give the + a little more room so the bigger title doesn't clip it */ .accordion-toggle { grid-column-gap: .35rem; column-gap: .35rem; } .split-content { padding-left: 1rem; padding-right: 1rem; } .accordion-icon { top: 0; } .portfolio-tabs-menu { max-width: 100%; margin-top: 4.85rem; margin-left: 0; } .portfolio-tabs-menu.no-margin-top { margin-top: 0; } .project-title { font-size: 1.6rem; } .projects-grid { grid-column-gap: .9375rem; grid-row-gap: .9375rem; grid-template-columns: 1fr; } .section-header-caption { display: none; } .grid-12-columns-fixed-gap { grid-row-gap: 2.75rem; } .projects-list-text { font-size: 1.06rem; } .projects-list-inner { padding-top: 1rem; padding-bottom: 1rem; } .projects-list-columns { grid-row-gap: .2rem; } .projects-list-title { font-size: 1.36rem; } .benefits-grid { grid-row-gap: 1rem; } .benefits-header { grid-column-gap: .8rem; grid-row-gap: .8rem; padding: 2rem; } .benefits-title { font-size: 1.56rem; } .benefits-content { padding: 4.5rem 2rem 2rem; } .benefits-icons { width: 3.36rem; } .footer-credits-item { width: 100%; } .grid-12-columns-extra-small { grid-row-gap: 2.75rem; } .grid-12-columns-zero { grid-row-gap: 0rem; } .footer-heading { font-size: 22vw; line-height: .9; } .footer-circle-link { width: 30vw; height: 30vw; } .paragraph-extra-large { letter-spacing: -.01em; font-size: 6.5vw; } .awards-list-columns { grid-row-gap: .2rem; } .service-item { padding-bottom: 2.8rem; } .service-content-columns { grid-column-gap: 8vw; grid-row-gap: 8vw; } .service-text { letter-spacing: -.01em; font-size: 5vw; } .service-tag { padding-left: .5rem; padding-right: .5rem; font-size: .8rem; } .projects-rows { grid-column-gap: .9375rem; grid-row-gap: .9375rem; grid-template-columns: 1fr; } .page-title-medium { font-size: 11vw; } .marquee-heading { font-size: 13.5vw; line-height: .9; } .container-fixed { padding-left: .9375rem; padding-right: .9375rem; } .icon-link-text { overflow-wrap: anywhere; } .benefits-3-columns { grid-row-gap: 2.75rem; } .hero-content-middle { opacity: .8; mix-blend-mode: normal; } .container-medium { padding-left: .9375rem; padding-right: .9375rem; } .services-items-wrapper { grid-column-gap: 2.8rem; grid-row-gap: 2.8rem; } .shop-item-title { letter-spacing: -.01em; font-size: 1.35rem; } .shop-buy-block { flex-flow: column; } .shop-price { font-size: 10vw; line-height: 1; } .grid-2-columns { grid-row-gap: 2.75rem; } .content-wrapper { padding-top: 2.75rem; padding-bottom: 2.75rem; } .checkuot-price, .checkout-product-title { font-size: 1rem; } .checkout-product-image { width: 48px; } .cart-wrapper { bottom: .9375rem; right: .9375rem; } .hero-title-arcade { margin-top: -.2em; font-size: 22.5vw; } .hero-title-arcade:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { font-size: 20vw; } .div-block-2:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { margin-left: 15px; } .div-block-3:where(.w-variant-7741d43d-39cf-ed7e-da7d-a3e784bd5b2f) { margin-left: -15px; } } #w-node-_9088d4d6-f3e9-54d3-a8dc-288cc427d93d-5d1d79c1 { grid-area: 1 / 1 / 2 / 6; } #w-node-_31dc2bf3-89af-ea53-0f27-bcd785d25c09-5d1d79c1 { order: -9999; grid-area: 1 / 6 / 2 / 13; } /* ── iPad vertical (768-991): la lista What-we-do y el parrafo iban pegados (columnas 1-5 y 6-12 adyacentes, sin canal). Se abre un canal de dos columnas entre ambos: lista a la izquierda (1-5), parrafo a la derecha (8-12). Peticion de Joan sobre el iPad 9.7" 5a gen. Solo esta franja: escritorio (>=992) y movil (<=767, donde la lista se oculta) no cambian. */ @media screen and (min-width: 768px) and (max-width: 991px) { #w-node-_31dc2bf3-89af-ea53-0f27-bcd785d25c09-5d1d79c1 { grid-area: 1 / 8 / 2 / 13; } /* Y ademas el bloque inferior usa mas ancho de pantalla que el resto de la pagina (92px de margen -> 44px SOLO aqui): la lista arranca mas a la izquierda y el parrafo muere mas a la derecha, como pidio Joan. El caption "What we do" y el boton acompañan a su columna. */ .hero-content-bottom .container-fluid { padding-left: 2.75rem; padding-right: 2.75rem; } /* Titulos de mision (WE IMAGINE / WE CRAFT / WE DELIVER y sus equivalentes ES): el template los subia a 13vw en tablet y cada frase rompia en dos lineas (Joan queria 3 lineas, una por frase). A 8.5vw caben todas con sus sangrias escalonadas, tambien las palabras largas del castellano (IMAGINAMOS/CONECTAMOS). Afecta igual a la About, que comparte estas clases y sufria el mismo corte. */ .heading-large { font-size: 8.5vw; } /* Footer: el letrero WELCOME TO ARCADE saltaba de 6.5vw (escritorio) a 16vw en tablet y se veia gigante; se devuelve a la proporcion de escritorio. Movil (<=767) conserva sus tamaños propios. */ .footer-heading { font-size: 6.5vw; } /* El grafismo circular (SAY HELLO / LET'S TALK): 20vw del template era enorme y 9vw (proporcion matematica de escritorio) a Joan le seguia pareciendo pequeño aqui. Referencia final suya: el circulo casi tan alto como las DOS lineas del letrero, un pelin menor -> 10vw (~77px sobre un bloque de ~80px a 768). */ .footer-circle-link { width: 9.6vw; height: 9.6vw; } /* Fila superior del footer: con el grid de escritorio los 3 enlaces sociales no cabian en sus 6 columnas y pisaban la flecha de BACK TO TOP. En flex con space-between: "Have a project" pegado al borde izquierdo, redes en el centro, BACK TO TOP pegado al derecho. */ .footer-row-top .grid-12-columns-small { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; } .footer-row-top .footer-widget { flex: 0 1 auto; min-width: 0; font-size: 1.05rem; } .footer-row-top .footer-link { font-size: 1.05rem; } /* La fila usa margenes reducidos (44px, como el bloque del hero) para que los extremos queden mas afuera y los tres bloques quepan con aire; a 92px por lado no cabian y se pisaban. */ .footer-row-top .container-fluid { padding-left: 2.75rem; padding-right: 2.75rem; } /* El primer bloque (Have a project in mind?) parte en dos lineas. */ .footer-row-top .footer-widget:first-child { max-width: 32%; } /* Tarjetas de proyecto (Work, home, relacionados): a esta anchura la tarjeta mide ~284px y el titulo fijo de 18px + pastillas de 14px se comian la imagen. En vw escalan con la propia tarjeta (~37vw): 13px de titulo y ~10px de pastilla a 768, creciendo hasta 991. */ .project-title { font-size: 1.7vw; } .project-label-text { font-size: 1.15vw; padding: .25em .6em .35em; } /* y el hueco entre pastillas mas justo: con 5 tags (Porsche BMECS) rompian a 2 filas; asi caben SIEMPRE en una (peticion de Joan) */ .project-content-footer { grid-column-gap: .3rem; grid-row-gap: .3rem; } /* El circulo del footer hereda el empujon de -4px pensado para el tamaño de escritorio; aqui lo deja un pelo alto respecto al letrero (mas visible en el iPad real que en WebKit de pruebas). El movil ya lo anula; misma receta. */ .footer-circle-link { top: -1px !important; /* afinado por Joan en su iPad: a 0 quedaba un pelo bajo */ } /* Video de la bailarina del hero de About: el bloque de tablet (<=991) lo estira a todo el ancho en fila propia y quedaba gigante. Se restaura la colocacion de escritorio/iPad Pro (columnas 9-13, 25% del ancho, junto al titulo), que es como lo aprobo Joan en el M1. */ #w-node-d07f532e-3dd2-2a0e-30f7-2d726216c378-5d1d79c4, #w-node-_96821498-2a79-02f6-2665-c52d0eb6be86-5d1d79c4 { grid-area: 1 / 9 / 2 / 13 !important; } /* ...y el TEXTO de Nuestra historia vuelve a sus columnas 1-8 de escritorio (el bloque tablet lo estiraba a todo el ancho y quedaba DEBAJO del video: textos cortados). Asi la composicion es la misma que en el iPad Pro: texto izquierda, bailarina derecha. */ #w-node-d07f532e-3dd2-2a0e-30f7-2d726216c360-5d1d79c4 { grid-area: 1 / 1 / 2 / 9 !important; } /* Contacto: el template centra los textos en <=991 y los pasos de WHAT HAPPENS NEXT quedaban despegados de su numero (el 1, con frase corta, era el mas evidente). Alineado a la izquierda como en movil y en escritorio. */ .contact-section-bottom, .contact-intro, .contact-block, .contact-next, .contact-steps li { text-align: left; } /* About: las lineas de PARTE / DE TU / EQUIPO (y PART / OF YOUR / TEAM) se intersecaban ligeramente a este ancho. Separacion minima ("muy muy poco", peticion de Joan) solo en esta franja y solo en la About. */ .page-about .mission-heading-wrapper { margin-top: .7vw !important; } .page-about .align-center:has(.mission-heading-wrapper):first-of-type .mission-heading-wrapper { margin-top: 0 !important; } } #w-node-e9c55fd0-b864-48b4-1b28-4a0c6ee16821-5d1d79c1 { grid-area: 1 / 1 / 2 / 10; } #w-node-_4475e34b-85ef-f35d-9fc1-e0078d17ed77-5d1d79c1, #w-node-_3a14c17e-ceaa-7263-e276-acdbd686a5a9-5d1d79c1 { grid-area: 1 / 9 / 2 / 13; } #w-node-_8dadec61-f5ef-0234-cca5-7f94cd792758-5d1d79c1 { grid-area: 1 / 1 / 2 / 4; } #w-node-fd3d29d7-3e7b-66f7-9f8c-0a11771be82d-5d1d79c1 { grid-area: 1 / 4 / 2 / 13; } #w-node-_73da1f69-ff22-3421-e650-2204fe45ca7a-5d1d79c1 { grid-area: 1 / 1 / 2 / 9; } #w-node-_4b4af935-4a1a-2e3e-ce89-60d5f29037c6-5d1d79c1 { grid-area: 1 / 9 / 2 / 13; } #w-node-_6d78e229-1e76-149b-c60b-4480c24a55b7-5d1d79c1 { grid-area: 1 / 1 / 2 / 9; } #w-node-_6d78e229-1e76-149b-c60b-4480c24a55ba-5d1d79c1 { grid-area: 1 / 9 / 2 / 13; } #w-node-_0e336d7d-67e7-622a-ca97-42b6a34eab98-5d1d79c1 { grid-area: 1 / 1 / 2 / 9; } #w-node-_0e336d7d-67e7-622a-ca97-42b6a34eab9b-5d1d79c1 { grid-area: 1 / 9 / 2 / 13; } #w-node-_89f49ef2-bb15-9724-52b9-a259d6c3d5ee-5d1d79c1 { grid-area: 1 / 1 / 2 / 9; } #w-node-_89f49ef2-bb15-9724-52b9-a259d6c3d5f1-5d1d79c1 { grid-area: 1 / 9 / 2 / 13; } #w-node-_6d54c821-5824-684d-6eeb-bbae7bf959c0-5d1d79c1 { grid-area: 1 / 1 / 2 / 9; } #w-node-_6d54c821-5824-684d-6eeb-bbae7bf959c3-5d1d79c1 { grid-area: 1 / 9 / 2 / 13; } #w-node-_060b0e3a-f00f-cf39-7c2e-c7ca372ce536-5d1d79c1 { grid-area: span 1 / span 8 / span 1 / span 8; } #w-node-de6bc513-30f5-8a7c-c4ca-d20ab4bc1142-5d1d79c1 { grid-area: span 1 / span 4 / span 1 / span 4; } #w-node-f97bc85d-e838-527b-0315-6d8cbc2c8354-5d1d79c1 { grid-area: 1 / 7 / 2 / 13; } #w-node-_90af0c01-7c3d-464b-d7c5-5dd6a3cc447d-5d1d79c1 { grid-area: 1 / 4 / 2 / 13; } #w-node-_3c38070b-d899-6e84-bf30-afbe58384d3d-5d1d79c1 { grid-area: 1 / 1 / 2 / 5; } #w-node-_439a597a-918a-1e49-0150-ed2afb7a31d7-5d1d79c1 { grid-area: 1 / 5 / 2 / 9; } #w-node-c0012f81-e538-5f62-2b44-7b26c5ce837c-5d1d79c1 { grid-area: 1 / 9 / 2 / 10; } #w-node-eab9f78e-895f-9b51-4b43-45fef929e5c8-5d1d79c1 { grid-area: 1 / 4 / 2 / 13; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff935-fadff930 { grid-area: span 1 / span 3 / span 1 / span 3; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff93b-fadff930, #w-node-_34c36820-a366-a1f9-5f60-8acdfadff93d-fadff930, #w-node-_34c36820-a366-a1f9-5f60-8acdfadff943-fadff930 { grid-area: span 1 / span 6 / span 1 / span 6; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff949-fadff930 { grid-area: span 1 / span 3 / span 1 / span 3; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff957-fadff930 { grid-area: 1 / 1 / 2 / 7; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff964-fadff930 { grid-area: 1 / 7 / 2 / 13; } #w-node-_01f436ee-f339-34c5-43b4-7c5b6af37dce-5d1d79c4, #w-node-_01f436ee-f339-34c5-43b4-7c5b6af37dd1-5d1d79c4, #w-node-_01f436ee-f339-34c5-43b4-7c5b6af37dd4-5d1d79c4 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_1bb424a9-629f-cc6a-1570-fb8cdd6fdd86-5d1d79c4 { grid-area: 1 / 1 / 2 / 7; } #w-node-_35bc999b-7cb5-26c5-ce7e-c053e5cffd09-5d1d79c4 { grid-area: 1 / 4 / 2 / 10; } #w-node-_165d160f-bb7d-22c8-6ce0-9bd15fc6f833-5d1d79c4 { grid-area: 1 / 7 / 2 / 13; } #w-node-_9da2251a-c24f-1790-d902-d6568d765c0e-5d1d79c4 { grid-area: 1 / 3 / 2 / 11; } #w-node-_4b0c9683-a5b9-f5d2-3303-8f48d22ab41f-5d1d79c4 { grid-area: span 1 / span 4 / span 1 / span 4; } #w-node-_1f2036c3-8f0d-cac5-1958-5c1f6d2769e1-5d1d79c4 { grid-area: span 1 / span 8 / span 1 / span 8; } #w-node-d07f532e-3dd2-2a0e-30f7-2d726216c360-5d1d79c4 { grid-area: 1 / 1 / 2 / 9; } #w-node-d07f532e-3dd2-2a0e-30f7-2d726216c378-5d1d79c4, #w-node-_96821498-2a79-02f6-2665-c52d0eb6be86-5d1d79c4 { grid-area: 1 / 9 / 2 / 13; } #w-node-_96821498-2a79-02f6-2665-c52d0eb6bea3-5d1d79c4 { grid-area: 1 / 1 / 2 / 4; } #w-node-_96821498-2a79-02f6-2665-c52d0eb6bea7-5d1d79c4 { grid-area: 1 / 9 / 2 / 13; } #w-node-c8ff6c5f-7d51-29c4-c499-8f79281dbede-5d1d79c4 { grid-area: 1 / 1 / 2 / 5; } #w-node-_7b0bfbc3-389b-0f3a-5610-a126b818bf19-5d1d79c4 { grid-area: 1 / 5 / 3 / 13; } #w-node-cf1519cf-9d58-4ae8-ad94-d6a20d06b76b-5d1d79c4 { grid-area: 1 / 1 / 2 / 6; } #w-node-cf1519cf-9d58-4ae8-ad94-d6a20d06b76d-5d1d79c4 { grid-area: 1 / 6 / 2 / 11; } #w-node-cf1519cf-9d58-4ae8-ad94-d6a20d06b776-5d1d79c4 { grid-area: 1 / 11 / 2 / 13; } #w-node-ba8838f5-9f90-343e-8df6-dffd548e3839-5d1d79c4 { grid-area: 1 / 1 / 2 / 6; } #w-node-ba8838f5-9f90-343e-8df6-dffd548e383c-5d1d79c4 { grid-area: 1 / 6 / 2 / 11; } #w-node-ba8838f5-9f90-343e-8df6-dffd548e383f-5d1d79c4 { grid-area: 1 / 11 / 2 / 13; } #w-node-_8638221b-8c01-743b-8e8f-20bfa45dedc5-5d1d79c4 { grid-area: 1 / 1 / 2 / 6; } #w-node-_8638221b-8c01-743b-8e8f-20bfa45dedc8-5d1d79c4 { grid-area: 1 / 6 / 2 / 11; } #w-node-_8638221b-8c01-743b-8e8f-20bfa45dedcb-5d1d79c4 { grid-area: 1 / 11 / 2 / 13; } #w-node-dc24cf3d-8e2f-58d9-4165-98f764ddff4d-5d1d79c4 { grid-area: 1 / 1 / 2 / 6; } #w-node-dc24cf3d-8e2f-58d9-4165-98f764ddff50-5d1d79c4 { grid-area: 1 / 6 / 2 / 11; } #w-node-dc24cf3d-8e2f-58d9-4165-98f764ddff53-5d1d79c4 { grid-area: 1 / 11 / 2 / 13; } #w-node-d9faf94a-f160-789f-fc0a-997431d61d2a-5d1d79c4 { grid-area: 1 / 1 / 2 / 6; } #w-node-d9faf94a-f160-789f-fc0a-997431d61d2d-5d1d79c4 { grid-area: 1 / 6 / 2 / 11; } #w-node-d9faf94a-f160-789f-fc0a-997431d61d30-5d1d79c4 { grid-area: 1 / 11 / 2 / 13; } #w-node-_6e14e02f-557c-106d-0e9c-527a31c85fe3-5d1d79c4 { grid-area: 1 / 1 / 2 / 6; } #w-node-_6e14e02f-557c-106d-0e9c-527a31c85fe6-5d1d79c4 { grid-area: 1 / 6 / 2 / 11; } #w-node-_6e14e02f-557c-106d-0e9c-527a31c85fe9-5d1d79c4 { grid-area: 1 / 11 / 2 / 13; } #w-node-_8543f976-3f7e-d913-0cd2-25fdc3e1b8c8-5d1d79c4 { grid-area: 1 / 1 / 2 / 6; } #w-node-_8543f976-3f7e-d913-0cd2-25fdc3e1b8cb-5d1d79c4 { grid-area: 1 / 6 / 2 / 11; } #w-node-_8543f976-3f7e-d913-0cd2-25fdc3e1b8ce-5d1d79c4 { grid-area: 1 / 11 / 2 / 13; } #w-node-ec1ef389-8615-3be2-6445-56ea6d24720d-5d1d79c4 { grid-area: 2 / 1 / 3 / 5; } #w-node-b6e9f34a-4c34-a2df-a5e0-4580aa8254bd-5d1d79c5, #w-node-b6e9f34a-4c34-a2df-a5e0-4580aa8254c0-5d1d79c5, #w-node-b6e9f34a-4c34-a2df-a5e0-4580aa8254c6-5d1d79c5 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_32be0b57-ca92-cdc0-5e13-bc062390b185-5d1d79c5 { grid-area: 1 / 1 / 2 / 8; } #w-node-c5df89cc-e235-b67d-d083-7a676d31fb65-5d1d79c5 { grid-area: 1 / 9 / 2 / 13; } #w-node-_8c4e6775-ad25-ea64-d567-c621502a23bd-5d1d79c6 { grid-area: 1 / 1 / 2 / 8; } #w-node-_9e089ed1-d02c-08e6-9d7e-b21dc9ca5ab0-5d1d79c6 { grid-area: 1 / 8 / 2 / 13; } #w-node-_32be0b57-ca92-cdc0-5e13-bc062390b185-5d1d79c6 { grid-area: 1 / 1 / 2 / 5; } #w-node-_79f73795-4871-5c40-9eb6-082300a1149c-5d1d79c6 { grid-area: 1 / 6 / 2 / 13; } #w-node-f628445d-e0b1-053d-aba0-97d2c872fcc2-5d1d79c6, #w-node-f628445d-e0b1-053d-aba0-97d2c872fcc6-5d1d79c6 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-bf3f248f-2aaa-69a1-240d-bd4814f138ca-5d1d79c6 { align-self: start; } #w-node-_5fdba41d-b2e6-21e6-7b33-5ea059cc0629-5d1d79c7, #w-node-_5fdba41d-b2e6-21e6-7b33-5ea059cc062c-5d1d79c7, #w-node-_5fdba41d-b2e6-21e6-7b33-5ea059cc062f-5d1d79c7 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-e662e320-912a-923e-2387-7002efffb020-5d1d79c7 { grid-area: span 1 / span 8 / span 1 / span 8; } #w-node-e662e320-912a-923e-2387-7002efffb023-5d1d79c7 { grid-area: span 1 / span 4 / span 1 / span 4; } #w-node-b032642b-f0f4-8151-6790-41a24741c9e9-5d1d79c7, #w-node-db091609-ea73-04df-9989-53f7afe5160d-5d1d79c8, #w-node-db091609-ea73-04df-9989-53f7afe51610-5d1d79c8, #w-node-db091609-ea73-04df-9989-53f7afe51613-5d1d79c8 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_7d1f0727-9656-4dd0-62bb-1b36a7f9b564-5d1d79c8 { grid-area: 1 / 1 / 2 / 6; } #w-node-_92d22be5-2723-ac84-9aa8-54dbf3fa380f-5d1d79c8 { grid-area: 1 / 7 / 2 / 13; } #w-node-e8401e0d-85d6-1644-6b59-2a0e6930e6f8-5d1d79c8 { grid-area: span 1 / span 8 / span 1 / span 8; } #w-node-e8401e0d-85d6-1644-6b59-2a0e6930e6fb-5d1d79c8 { grid-area: span 1 / span 4 / span 1 / span 4; } #w-node-_1f6a8228-4b28-02b7-8910-a602a2834377-5d1d79c9, #w-node-_1f6a8228-4b28-02b7-8910-a602a283437a-5d1d79c9, #w-node-_1f6a8228-4b28-02b7-8910-a602a2834380-5d1d79c9 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf7-5d1d79c9 { grid-area: 1 / 1 / 2 / 6; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf9-5d1d79c9 { grid-area: 1 / 7 / 2 / 13; } #w-node-ac4328f8-5728-b093-de56-78e1c0b36384-5d1d79c9 { grid-area: 1 / 1 / 2 / 6; } #w-node-ac4328f8-5728-b093-de56-78e1c0b36387-5d1d79c9 { grid-area: 1 / 7 / 2 / 13; } #w-node-_984aaf07-61d8-4ec4-d04d-00a860409a2f-5d1d79c9 { grid-area: 1 / 1 / 2 / 6; } #w-node-_984aaf07-61d8-4ec4-d04d-00a860409a32-5d1d79c9 { grid-area: 1 / 7 / 2 / 13; } #w-node-a60b60db-51b6-7f0f-447e-834ec820234b-5d1d79c9 { grid-area: 1 / 1 / 2 / 6; } #w-node-a60b60db-51b6-7f0f-447e-834ec820234e-5d1d79c9 { grid-area: 1 / 7 / 2 / 13; } #w-node-_09f00e7a-7709-42c9-5f97-a928a13dab3d-5d1d79c9 { grid-area: 1 / 1 / 2 / 6; } #w-node-_09f00e7a-7709-42c9-5f97-a928a13dab40-5d1d79c9 { grid-area: 1 / 7 / 2 / 13; } #w-node-d8eaa2b3-649a-8676-cea6-ead8898cc622-5d1d79c9 { grid-area: 1 / 1 / 2 / 6; } #w-node-d8eaa2b3-649a-8676-cea6-ead8898cc625-5d1d79c9 { grid-area: 1 / 7 / 2 / 13; } #w-node-_70e96bf6-0ed8-77ee-c770-a95d2d5cb20b-5d1d79ca, #w-node-_70e96bf6-0ed8-77ee-c770-a95d2d5cb20e-5d1d79ca, #w-node-_70e96bf6-0ed8-77ee-c770-a95d2d5cb214-5d1d79ca { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf7-5d1d79ca { grid-area: 1 / 1 / 2 / 6; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf9-5d1d79ca { grid-area: 1 / 7 / 2 / 13; } #w-node-a0471543-8251-0be2-0cf8-8c7f9be3a750-5d1d79ca { grid-area: 1 / 1 / 2 / 6; } #w-node-a0471543-8251-0be2-0cf8-8c7f9be3a753-5d1d79ca { grid-area: 1 / 7 / 2 / 13; } #w-node-_48cc5103-f6a5-8373-c412-d9d346adfc19-5d1d79ca { grid-area: 1 / 1 / 2 / 6; } #w-node-_48cc5103-f6a5-8373-c412-d9d346adfc1c-5d1d79ca { grid-area: 1 / 7 / 2 / 13; } #w-node-_9b97637f-c868-dbfe-5681-01f5eddbc707-5d1d79ca { grid-area: 1 / 1 / 2 / 6; } #w-node-_9b97637f-c868-dbfe-5681-01f5eddbc70a-5d1d79ca { grid-area: 1 / 7 / 2 / 13; } #w-node-_266f8ddc-f293-a264-5482-10ef7c3d069e-5d1d79cc, #w-node-_266f8ddc-f293-a264-5482-10ef7c3d06a1-5d1d79cc, #w-node-_266f8ddc-f293-a264-5482-10ef7c3d06a7-5d1d79cc, #w-node-_01f436ee-f339-34c5-43b4-7c5b6af37dce-5d1d79cd, #w-node-_01f436ee-f339-34c5-43b4-7c5b6af37dd1-5d1d79cd, #w-node-_01f436ee-f339-34c5-43b4-7c5b6af37dd4-5d1d79cd, #w-node-d1bd8c82-5abd-deb7-0e19-54275b16cdba-5d1d79cf, #w-node-d1bd8c82-5abd-deb7-0e19-54275b16cdbd-5d1d79cf, #w-node-d1bd8c82-5abd-deb7-0e19-54275b16cdc3-5d1d79cf { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf7-5d1d79cf { grid-area: 1 / 1 / 2 / 6; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf9-5d1d79cf { grid-area: 1 / 7 / 2 / 13; } #w-node-eb0be1f8-cff8-a700-0957-28bb812a159d-5d1d79d0, #w-node-eb0be1f8-cff8-a700-0957-28bb812a15a0-5d1d79d0, #w-node-eb0be1f8-cff8-a700-0957-28bb812a15a6-5d1d79d0 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_394b5615-9d71-11eb-2c79-d365130955c7-5d1d79d0 { grid-area: 1 / 1 / 2 / 7; } #w-node-_1bdc8bba-ecbd-175b-b22a-d412695e2018-5d1d79d0 { grid-area: 1 / 4 / 2 / 13; } #w-node-_1bdc8bba-ecbd-175b-b22a-d412695e2026-5d1d79d0 { grid-area: 1 / 1 / 2 / 5; } #w-node-_1bdc8bba-ecbd-175b-b22a-d412695e2028-5d1d79d0 { grid-area: 1 / 5 / 2 / 9; } #w-node-_1bdc8bba-ecbd-175b-b22a-d412695e2031-5d1d79d0 { grid-area: 1 / 9 / 2 / 10; } #w-node-_72742c05-2fa0-c1f9-3006-7a92080b43ca-5d1d79d0 { grid-area: 1 / 1 / 2 / 8; } #w-node-_72742c05-2fa0-c1f9-3006-7a92080b43cd-5d1d79d0 { grid-area: 1 / 9 / 2 / 13; } #w-node-b6e9f34a-4c34-a2df-a5e0-4580aa8254bd-5d1d79d1, #w-node-b6e9f34a-4c34-a2df-a5e0-4580aa8254c0-5d1d79d1, #w-node-b6e9f34a-4c34-a2df-a5e0-4580aa8254c6-5d1d79d1 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_32be0b57-ca92-cdc0-5e13-bc062390b185-5d1d79d1 { grid-area: 1 / 1 / 2 / 8; } #w-node-c5df89cc-e235-b67d-d083-7a676d31fb65-5d1d79d1 { grid-area: 1 / 9 / 2 / 13; } #w-node-_73fa79b6-d6cd-c1c3-b825-373a513a100c-5d1d79d2, #w-node-_73fa79b6-d6cd-c1c3-b825-373a513a100f-5d1d79d2, #w-node-_73fa79b6-d6cd-c1c3-b825-373a513a1015-5d1d79d2 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_73fa79b6-d6cd-c1c3-b825-373a513a1031-5d1d79d2 { grid-area: 1 / 1 / 2 / 8; } #w-node-_73fa79b6-d6cd-c1c3-b825-373a513a1034-5d1d79d2 { grid-area: 1 / 9 / 2 / 13; } #w-node-cccc2d93-5c59-c3a7-55c6-84367965a9d3-5d1d79d3, #w-node-cccc2d93-5c59-c3a7-55c6-84367965a9d6-5d1d79d3, #w-node-cccc2d93-5c59-c3a7-55c6-84367965a9d9-5d1d79d3 { grid-area: span 1 / span 1 / span 1 / span 1; } #w-node-_1d11612e-e0b2-a061-e717-efa1e5dd817a-5d1d79d3 { grid-area: span 1 / span 5 / span 1 / span 5; } #w-node-b2128127-c584-36f5-f6dc-e5ce258c0fc3-5d1d79d3 { grid-area: 1 / 7 / 2 / 13; } #w-node-d184b2c2-bacf-6520-31fe-96da52027acc-5d1d79d3 { grid-area: span 1 / span 8 / span 1 / span 8; } #w-node-d184b2c2-bacf-6520-31fe-96da52027acf-5d1d79d3 { grid-area: span 1 / span 4 / span 1 / span 4; } @media screen and (max-width: 991px) { #w-node-e9c55fd0-b864-48b4-1b28-4a0c6ee16821-5d1d79c1 { grid-column-end: 13; } #w-node-_4475e34b-85ef-f35d-9fc1-e0078d17ed77-5d1d79c1 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_3a14c17e-ceaa-7263-e276-acdbd686a5a9-5d1d79c1 { grid-column-start: 1; } #w-node-_8dadec61-f5ef-0234-cca5-7f94cd792758-5d1d79c1 { grid-area: 1 / 1 / 2 / 5; } #w-node-fd3d29d7-3e7b-66f7-9f8c-0a11771be82d-5d1d79c1 { grid-column-start: 6; } #w-node-_060b0e3a-f00f-cf39-7c2e-c7ca372ce536-5d1d79c1 { grid-column: span 12 / span 12; } #w-node-_90af0c01-7c3d-464b-d7c5-5dd6a3cc447d-5d1d79c1, #w-node-eab9f78e-895f-9b51-4b43-45fef929e5c8-5d1d79c1 { grid-column-start: 1; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff935-fadff930 { grid-column: span 3 / span 3; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff93b-fadff930 { grid-column: span 6 / span 6; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff93d-fadff930, #w-node-_34c36820-a366-a1f9-5f60-8acdfadff943-fadff930 { grid-column: span 12 / span 12; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff949-fadff930 { grid-column: span 3 / span 3; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff957-fadff930 { grid-column-end: 13; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff964-fadff930 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_9da2251a-c24f-1790-d902-d6568d765c0e-5d1d79c4 { grid-column: 2 / 12; } #w-node-d07f532e-3dd2-2a0e-30f7-2d726216c360-5d1d79c4 { grid-column-end: 13; } #w-node-d07f532e-3dd2-2a0e-30f7-2d726216c378-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_96821498-2a79-02f6-2665-c52d0eb6be86-5d1d79c4 { grid-column-start: 1; } #w-node-_96821498-2a79-02f6-2665-c52d0eb6bea3-5d1d79c4 { grid-area: 1 / 1 / 2 / 5; } #w-node-_96821498-2a79-02f6-2665-c52d0eb6bea7-5d1d79c4 { grid-column-start: 6; } #w-node-c8ff6c5f-7d51-29c4-c499-8f79281dbede-5d1d79c4 { grid-column-end: 13; } #w-node-_7b0bfbc3-389b-0f3a-5610-a126b818bf19-5d1d79c4 { grid-row-start: 2; grid-column-start: 1; } #w-node-ec1ef389-8615-3be2-6445-56ea6d24720d-5d1d79c4 { grid-row: 3 / 4; grid-column-end: 13; } #w-node-_32be0b57-ca92-cdc0-5e13-bc062390b185-5d1d79c5 { grid-column-end: 13; } #w-node-c5df89cc-e235-b67d-d083-7a676d31fb65-5d1d79c5 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_8c4e6775-ad25-ea64-d567-c621502a23bd-5d1d79c6 { grid-area: 1 / 1 / 2 / 13; } #w-node-_9e089ed1-d02c-08e6-9d7e-b21dc9ca5ab0-5d1d79c6 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_32be0b57-ca92-cdc0-5e13-bc062390b185-5d1d79c6 { grid-column-end: 13; } #w-node-_79f73795-4871-5c40-9eb6-082300a1149c-5d1d79c6 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-e662e320-912a-923e-2387-7002efffb020-5d1d79c7, #w-node-e662e320-912a-923e-2387-7002efffb023-5d1d79c7 { grid-column: span 12 / span 12; } #w-node-_7d1f0727-9656-4dd0-62bb-1b36a7f9b564-5d1d79c8 { grid-column-end: 13; } #w-node-_92d22be5-2723-ac84-9aa8-54dbf3fa380f-5d1d79c8 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-e8401e0d-85d6-1644-6b59-2a0e6930e6f8-5d1d79c8, #w-node-e8401e0d-85d6-1644-6b59-2a0e6930e6fb-5d1d79c8 { grid-column: span 12 / span 12; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf7-5d1d79c9 { grid-column-end: 13; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf9-5d1d79c9 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-ac4328f8-5728-b093-de56-78e1c0b36384-5d1d79c9 { grid-column-end: 13; } #w-node-ac4328f8-5728-b093-de56-78e1c0b36387-5d1d79c9 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_984aaf07-61d8-4ec4-d04d-00a860409a2f-5d1d79c9 { grid-column-end: 13; } #w-node-_984aaf07-61d8-4ec4-d04d-00a860409a32-5d1d79c9 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-a60b60db-51b6-7f0f-447e-834ec820234b-5d1d79c9 { grid-column-end: 13; } #w-node-a60b60db-51b6-7f0f-447e-834ec820234e-5d1d79c9 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_09f00e7a-7709-42c9-5f97-a928a13dab3d-5d1d79c9 { grid-column-end: 13; } #w-node-_09f00e7a-7709-42c9-5f97-a928a13dab40-5d1d79c9 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-d8eaa2b3-649a-8676-cea6-ead8898cc622-5d1d79c9 { grid-column-end: 13; } #w-node-d8eaa2b3-649a-8676-cea6-ead8898cc625-5d1d79c9 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf7-5d1d79ca { grid-column-end: 13; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf9-5d1d79ca { grid-row: 2 / 3; grid-column-start: 1; } #w-node-a0471543-8251-0be2-0cf8-8c7f9be3a750-5d1d79ca { grid-column-end: 13; } #w-node-a0471543-8251-0be2-0cf8-8c7f9be3a753-5d1d79ca { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_48cc5103-f6a5-8373-c412-d9d346adfc19-5d1d79ca { grid-column-end: 13; } #w-node-_48cc5103-f6a5-8373-c412-d9d346adfc1c-5d1d79ca { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_9b97637f-c868-dbfe-5681-01f5eddbc707-5d1d79ca { grid-column-end: 13; } #w-node-_9b97637f-c868-dbfe-5681-01f5eddbc70a-5d1d79ca { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf7-5d1d79cf { grid-column-end: 13; } #w-node-_6a955ea7-90d9-b583-ceae-25b3d5938cf9-5d1d79cf { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_1bdc8bba-ecbd-175b-b22a-d412695e2018-5d1d79d0 { grid-column-start: 1; } #w-node-_72742c05-2fa0-c1f9-3006-7a92080b43ca-5d1d79d0 { grid-column-end: 13; } #w-node-_72742c05-2fa0-c1f9-3006-7a92080b43cd-5d1d79d0 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_32be0b57-ca92-cdc0-5e13-bc062390b185-5d1d79d1 { grid-column-end: 13; } #w-node-c5df89cc-e235-b67d-d083-7a676d31fb65-5d1d79d1 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_73fa79b6-d6cd-c1c3-b825-373a513a1031-5d1d79d2 { grid-column-end: 13; } #w-node-_73fa79b6-d6cd-c1c3-b825-373a513a1034-5d1d79d2 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-d184b2c2-bacf-6520-31fe-96da52027acc-5d1d79d3, #w-node-d184b2c2-bacf-6520-31fe-96da52027acf-5d1d79d3 { grid-column: span 12 / span 12; } } @media screen and (max-width: 767px) { #w-node-_9088d4d6-f3e9-54d3-a8dc-288cc427d93d-5d1d79c1 { grid-column: 1 / 13; } #w-node-_31dc2bf3-89af-ea53-0f27-bcd785d25c09-5d1d79c1 { grid-area: 2 / 1 / 3 / 13; } #w-node-f97bc85d-e838-527b-0315-6d8cbc2c8354-5d1d79c1 { grid-column-start: 1; } #w-node-_34c36820-a366-a1f9-5f60-8acdfadff935-fadff930, #w-node-_34c36820-a366-a1f9-5f60-8acdfadff93b-fadff930, #w-node-_34c36820-a366-a1f9-5f60-8acdfadff93d-fadff930, #w-node-_34c36820-a366-a1f9-5f60-8acdfadff943-fadff930, #w-node-_34c36820-a366-a1f9-5f60-8acdfadff949-fadff930 { grid-column: span 12 / span 12; } #w-node-_9da2251a-c24f-1790-d902-d6568d765c0e-5d1d79c4 { grid-column: 1 / 13; } #w-node-_1d11612e-e0b2-a061-e717-efa1e5dd817a-5d1d79d3 { grid-area: 1 / 1 / 2 / 13; } #w-node-b2128127-c584-36f5-f6dc-e5ce258c0fc3-5d1d79d3 { grid-row: 2 / 3; grid-column-start: 1; } } @media screen and (max-width: 479px) { #w-node-_8dadec61-f5ef-0234-cca5-7f94cd792758-5d1d79c1 { grid-column-end: 4; } #w-node-fd3d29d7-3e7b-66f7-9f8c-0a11771be82d-5d1d79c1 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_73da1f69-ff22-3421-e650-2204fe45ca7a-5d1d79c1 { grid-column-end: 13; } #w-node-_4b4af935-4a1a-2e3e-ce89-60d5f29037c6-5d1d79c1 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_6d78e229-1e76-149b-c60b-4480c24a55b7-5d1d79c1 { grid-column-end: 13; } #w-node-_6d78e229-1e76-149b-c60b-4480c24a55ba-5d1d79c1 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-de6bc513-30f5-8a7c-c4ca-d20ab4bc1142-5d1d79c1 { grid-column: span 12 / span 12; } #w-node-_3c38070b-d899-6e84-bf30-afbe58384d3d-5d1d79c1 { grid-column-end: 9; } #w-node-_439a597a-918a-1e49-0150-ed2afb7a31d7-5d1d79c1 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_96821498-2a79-02f6-2665-c52d0eb6bea3-5d1d79c4 { grid-column-end: 4; } #w-node-_96821498-2a79-02f6-2665-c52d0eb6bea7-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-cf1519cf-9d58-4ae8-ad94-d6a20d06b76b-5d1d79c4 { grid-column-end: 9; } #w-node-cf1519cf-9d58-4ae8-ad94-d6a20d06b76d-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-ba8838f5-9f90-343e-8df6-dffd548e3839-5d1d79c4 { grid-column-end: 9; } #w-node-ba8838f5-9f90-343e-8df6-dffd548e383c-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_8638221b-8c01-743b-8e8f-20bfa45dedc5-5d1d79c4 { grid-column-end: 9; } #w-node-_8638221b-8c01-743b-8e8f-20bfa45dedc8-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-dc24cf3d-8e2f-58d9-4165-98f764ddff4d-5d1d79c4 { grid-column-end: 9; } #w-node-dc24cf3d-8e2f-58d9-4165-98f764ddff50-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-d9faf94a-f160-789f-fc0a-997431d61d2a-5d1d79c4 { grid-column-end: 9; } #w-node-d9faf94a-f160-789f-fc0a-997431d61d2d-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_6e14e02f-557c-106d-0e9c-527a31c85fe3-5d1d79c4 { grid-column-end: 9; } #w-node-_6e14e02f-557c-106d-0e9c-527a31c85fe6-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-_8543f976-3f7e-d913-0cd2-25fdc3e1b8c8-5d1d79c4 { grid-column-end: 9; } #w-node-_8543f976-3f7e-d913-0cd2-25fdc3e1b8cb-5d1d79c4 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-e662e320-912a-923e-2387-7002efffb023-5d1d79c7, #w-node-e8401e0d-85d6-1644-6b59-2a0e6930e6fb-5d1d79c8 { grid-column: span 12 / span 12; } #w-node-_1bdc8bba-ecbd-175b-b22a-d412695e2026-5d1d79d0 { grid-column-end: 9; } #w-node-_1bdc8bba-ecbd-175b-b22a-d412695e2028-5d1d79d0 { grid-row: 2 / 3; grid-column-start: 1; } #w-node-d184b2c2-bacf-6520-31fe-96da52027acf-5d1d79d3 { grid-column: span 12 / span 12; } } @font-face { font-family: 'Overused-Grotesk'; src: url('../fonts/overusedgrotesk-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: 'Overused-Grotesk'; src: url('../fonts/overusedgrotesk-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: block; } @font-face { font-family: 'Modicapro Ultra'; /* duplicado historico de la cara de arriba: se mantiene alineado con ella (woff2 + block) — con otf+swap ERA el causante real del flash Arial->Modica, porque esta declaracion gana por ir despues. */ src: url('../fonts/ModicaPro-Ultra.woff2') format('woff2'), url('../fonts/ModicaPro-Ultra.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: block; } /* ── Modica con metricas verticales NORMALIZADAS — solo para el letrero del footer. La fuente trae dos tablas contradictorias (hhea: ascent 1004 / typo: ascent 900, flag USE_TYPO_METRICS puesto) y cada plataforma elige una distinta: los Mac/iPad de Joan asientan los glifos ~0.05em mas ARRIBA que otros motores. Resultado historico: el circulo LET'S TALK calibrado aqui salia descentrado en sus pantallas (y viceversa). Los override fijan la tabla typo (la del diseñador y la de los dispositivos de Joan) para TODOS: mismo pintado en todas partes. Familia aparte a proposito: cero impacto fuera del letrero. */ @font-face { font-family: 'Modica Letrero'; src: url('../fonts/ModicaPro-Ultra.woff2') format('woff2'), url('../fonts/ModicaPro-Ultra.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: block; ascent-override: 90%; descent-override: 24%; line-gap-override: 5%; } /* Dark section override */ .section-dark { background-color: #000; color: #fff; position: relative; overflow: hidden; min-height: 100vh; padding-bottom: 12.5rem; } .section-dark .button { border-color: #fff; color: #fff; } .section-dark .button.white { color: var(--color--primary); } .section-dark .divider-vertical { border-right-color: #fff; } .section-dark .w-layout-blockcontainer, .section-dark .overflow-hidden { position: relative; z-index: 2; } .section-dark .divider { border-top-color: #fff; } .section-dark-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .section-dark-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 1; } /* Our Mission: bajar el label y los headings */ .section-dark .section-title { margin-top: 20px; } .section.section-dark > .overflow-hidden { margin-top: 25px; } /* Services: black background so the animation doesn't reveal white */ .section:has(.split-section), .split-section { background-color: var(--color--primary); } /* Services video: bias framing toward the sharper lower detail */ .split-image { object-position: calc(50% - 150px) 72%; } /* Footer social links: single centered row */ .footer-links-row { flex-direction: row; justify-content: center; align-items: center; gap: 2.5vw; } /* Contact page: three labelled contact blocks */ .contact-blocks { display: contents; } #w-node-_8c4e6775-ad25-ea64-d567-c621502a23bd-5d1d79c6 { grid-area: 1 / 1 / 2 / 13; } /* Hero photo removed — content now uses the full width */ .contact-section-content-inner { flex: 1 1 auto; max-width: 100%; width: 100% !important; min-width: 0; } .contact-email-us { margin-top: -90px; } .contact-email-us .marquee-heading { font-size: 3.2vw; } .contact-intro { grid-column: 1 / -1; max-width: 52vw; margin-bottom: calc(1rem + 65px); } .contact-intro .paragraph-large { text-indent: 0; } .contact-pano { width: 100%; margin-bottom: 4rem; } .contact-pano img { width: 100%; height: 38vh; object-fit: cover; display: block; } .contact-block { flex: 1 1 16rem; max-width: 22rem; display: flex; flex-direction: column; align-items: flex-start; } .contact-link.link-large div { white-space: nowrap; } .contact-block-label { opacity: 1; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; white-space: nowrap; margin-bottom: 0.5rem; } .contact-link.link-large { font-family: var(--font-family--font-secondary); font-weight: 400; font-size: 1.15rem; color: var(--color--primary); box-shadow: none; word-break: normal; margin-bottom: 0; } .contact-link.link-large:hover { color: #8a8a8a; } /* Restructured contact blocks: description line + arrow CTA */ .contact-block-desc { font-family: var(--font-family--font-secondary); font-size: 1.1rem; line-height: 1.45; color: #8a8a8a; margin-bottom: 1rem; } .contact-cta { display: flex; flex-flow: row wrap; align-items: baseline; gap: 0.4rem; font-family: var(--font-family--font-secondary); font-size: 1.05rem; } .contact-arrow { font-weight: 700; color: var(--color--primary); } .contact-dot { color: #8a8a8a; } /* keep "· phone" together so it wraps as one clean unit */ .contact-tel { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .contact-phone-icon { flex-shrink: 0; opacity: 0.75; } /* "What happens next" steps */ .contact-next { grid-column: 1 / span 2; margin-top: calc(1.5rem + 30px); } .contact-steps { counter-reset: step; list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; max-width: 34rem; } .contact-steps li { counter-increment: step; position: relative; padding-left: 2.6rem; font-family: var(--font-family--font-secondary); font-size: 1.05rem; color: var(--color--primary); } .contact-steps li::before { content: counter(step); position: absolute; left: 0; top: -0.05em; width: 1.7rem; height: 1.7rem; border: 1px solid var(--color--primary); border-radius: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } /* Location marker */ .contact-location { grid-column: 3; margin-top: calc(1.5rem + 50px); align-self: start; font-family: var(--font-family--font-secondary); font-size: 1.05rem; color: var(--color--primary); } /* Full-bleed background image for dark sections (Contact hero) */ .section-dark-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .section-dark .link-large { box-shadow: 0 1px 0 0 #fff; } /* Logo inverted (white PNG → black) for light-background pages */ .logo-dark { filter: invert(1); } /* About hero: give enough room so overflow-hidden doesn't clip the thick Modica Ultra glyphs on any side. Negative margin cancels the visual gap the padding creates between lines. */ .page-title-wrapper .overflow-hidden { padding: 1.5vw 0.5vw; margin: calc(-3.2vw + 5px) 0; } /* About hero: center title text like the home hero. Scoped with :not(.no-padding-bottom) so the Contact page wrapper (.page-title-wrapper.no-padding-bottom) stays left-aligned. */ .page-title-wrapper:not(.no-padding-bottom), .page-title { text-align: center; } /* Aqui vivia un ajuste fijo ("shift ABOUT 35px", luego 20px) heredado de la plantilla. Un valor fijo en px no puede encajar en todas las pantallas (el titulo escala con vw y el ajuste no), asi que se retiro. Con 0px las dos lineas quedan centradas GEOMETRICAMENTE perfectas en cualquier resolucion (medido en 1280-3440px). Pero en ingles hace falta ademas un ajuste OPTICO: dibujando las palabras con la fuente real y midiendo el centroide de tinta pixel a pixel, la mancha de ABOUT queda 0.12em a la izquierda de la de ARCADE (la T deja vacio abajo a la derecha; ARCADE concentra masa a la derecha). El ojo alinea manchas, no cajas, y por eso ABOUT "se ve" descentrado aunque no lo este. En castellano (SOBRE vs ARCADE) la misma medicion da 0.01em — nada — y por eso es/ se ve bien sin ajuste. Se corrige solo en ingles y en em, que escala con el propio titulo: vale igual para un 13", un 16" o un 27", sin ajustes por resolucion. (En movil <=768px sigue mandando el ajuste de 4px !important de mas abajo, tuneado aparte.) */ html[lang="en"] .page-about .page-title-wrapper .overflow-hidden:first-child .page-title { position: relative; left: .11em; } /* Portfolio hero: fix glyph clipping on SELECTED / WORK Padding on the inner wrapper (keeping overflow:hidden) gives room for thick Modica Ultra strokes. Negative margin-bottom on the first line cancels the extra gap the padding creates between SELECTED and WORK. */ .hero-heading-wrapper { padding: 1.5vw 0.5vw; } /* The two blend-overlay copies are absolutely positioned with inset:0, so the wrapper padding only shifts the main text. Apply the same padding to them so all three layers stay aligned (no ghost/double image). */ .hero-heading-one, .hero-heading-two { padding: 1.5vw 0.5vw; } .hero-content-middle .overflow-hidden:first-child { margin-bottom: -3vw; } /* Footer marquee: give Modica glyphs vertical room so the tops of round letters (C, O) aren't clipped. Horizontal stays clipped so words still enter/exit at the screen edges. */ .footer-row-middle .overflow-hidden { padding: 1vw 0; } /* Both tracks must start from the left and overflow to the right so the loop is always full. The reverse line used flex-end, which left an empty gap on the right as it scrolled. */ .marquee.reverse, .marquee-track-reverse.gutter-large { justify-content: flex-start; } /* Continuous edge-to-edge scroll. Items per track are identical, so translating a track by exactly half its width (-50%) lands the second half where the first half was → seamless infinite loop. "welcome to" scrolls left, "arcade" scrolls right (mirrored). */ @keyframes footer-marquee-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes footer-marquee-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .footer-row-middle .marquee-track { animation: footer-marquee-left 32s linear infinite; will-change: transform; } .footer-row-middle .marquee-track-reverse { animation: footer-marquee-right 32s linear infinite; will-change: transform; } /* ~2px more space between the "welcome to" and "arcade" lines. Adding it to the reverse line keeps the block symmetric, so the row-middle center (= where the circle is centered) stays the midpoint. */ .footer-row-middle .marquee.reverse { margin-top: 2px; } /* LET'S TALK badge: center it exactly between the two lines. The wrapper was only 95% tall and top-aligned, and the link had a 0.5vw downward nudge (which grew on wide screens). Make the wrapper fully cover row-middle and drop the nudge so it sits dead center. */ .footer-circle-wrapper { height: 100%; } .footer-heading { /* Metricas normalizadas (ver @font-face Modica Letrero): el letrero pinta identico en los Mac/iPad de Joan y en los motores de prueba. */ font-family: 'Modica Letrero', var(--modica); } .footer-circle-link { /* Calibrado por el OJO de Joan con el panel #circulo (jul-2026), no por sondas: Blink -8px a 1708 y 1728 => 0.7px - 0.5vw (su ojo prefiere el circulo ~2px por debajo del centro geometrico de los glifos — eso es la especificacion). */ top: calc(0.7px - 0.5vw); } /* WebKit va aparte: ignora los ascent/descent-override del @font-face del letrero y asienta los glifos con la tabla hhea (mas abajo que Blink). Eso cubre el Safari del Mac Y TODO el iPad — alli hasta Chrome lleva WebKit por debajo. Medido en la captura del iPad de Joan (circulo ~9px alto con el -0.56vw) y en el webkit de la sonda (~6-8px alto): con el centrado de caja a secas (top 0) ambos quedan a <2px. `font: -apple-system-body` solo lo entiende WebKit; se limita a >=992 para no tocar las calibraciones aprobadas del iPhone (top 1px) y de las tablets (<=991, top -1px). Calibrado por el OJO de Joan con el panel #circulo (jul-2026): -2px a 1366 (iPad H), -2px a 1728 (MacBook 16 Safari), -4px a 2560 (pantalla 27) => recta 0.7px - 0.18vw, residuo max 0.4px. El desfase con Blink (~0.32vw) coincide con la diferencia teorica de tablas de metricas de la fuente: la fisica y el ojo por fin cuadran. */ @supports (font: -apple-system-body) { @media (min-width: 992px) { .footer-circle-link { top: calc(0.7px - 0.18vw); } } } /* Vertically center the marquee block between the LET'S TALK button above and Licenses below. Licenses was pushed down inside a tall bottom row, leaving more space below ARCADE than above WELCOME TO. Shrinking that row + nudging the marquee down evens both gaps. */ .footer-row-middle { /* 0.65vw (antes 1vw): al quitar los enlaces de servicios del footer (ago-2026) la fila inferior encogio y el bloque del letrero quedo 5-7px bajo. Medido: respiros 19/14 a 1440 y 33/26 a 2560; con esto quedan parejos (±2px). */ margin-top: .65vw; } /* Contact page: more breathing room between the "Let's talk" title and the "We are open" intro paragraph (≥75px). */ .contact-section-content .contact-section-bottom { display: grid; grid-template-columns: repeat(3, minmax(22rem, auto)); justify-content: start; justify-items: start; column-gap: 1.5rem; margin-top: 55px; } /* ── Contact page: tablet & mobile responsive fixes ───────────────── */ /* Tablet (≤1199px — no ≤991). El grid de 3 columnas de escritorio exige minimo 1104px (3 x 22rem + huecos) y solo cabe de verdad a partir de ~1288px de viewport; a 1280 (portatil 13") roba 8px del padding derecho, invisible, y se deja como esta. Pero en un iPad Pro vertical (1024px de viewport) se salia 172px de pantalla: el tercer bloque (JOIN THE TEAM + careers@) quedaba cortado. De 992 a 1199 se usa el layout de 2 columnas de tablet, que ya funcionaba bien a 834. */ @media screen and (max-width: 1199px) { .contact-section-content .contact-section-bottom { grid-template-columns: repeat(2, minmax(16rem, 1fr)); margin-top: 40px; /* Con 2 columnas el tercer bloque (JOIN THE TEAM) salta de fila y sin esto quedaba pegado al telefono del bloque de arriba. */ row-gap: 2.5rem; } .contact-intro { max-width: 100%; margin-bottom: calc(1rem + 40px); } } /* Mobile landscape (≤767px): single column */ @media screen and (max-width: 767px) { .contact-section-content .contact-section-bottom { grid-template-columns: 1fr; column-gap: 0; margin-top: 28px; } .contact-next { grid-column: 1; margin-top: calc(1rem + 24px); } .contact-intro { max-width: 100%; margin-bottom: calc(1rem + 24px); } .contact-block { max-width: 100%; } .contact-email-us .marquee-heading { font-size: 9.6vw; } /* Left-align everything (inherited text-align:center broke the step numbers and crammed the blocks) and let the sections breathe */ .contact-section-bottom, .contact-intro, .contact-block, .contact-next { text-align: left; } .contact-section-content .contact-section-bottom { row-gap: 2rem; margin-top: 14px; } .contact-intro { margin-bottom: .75rem; /* pull NEW PROJECTS up so the 3 emails fit the first screen */ } .contact-intro .paragraph-large { font-size: 1.05rem; line-height: 1.6; } .contact-block-desc { font-size: .95rem; margin-bottom: .6rem; } .contact-link.link-large { font-size: 1rem; } .contact-cta { flex-direction: column; align-items: flex-start; gap: .35rem; } .contact-steps { gap: 1rem; /* Margen derecho propio: sin el, el paso mas largo llegaba justo al borde de la pantalla y parecia que se iba a cortar. */ padding-right: 1.6rem; } /* Los pasos se dejan partir. Antes iban con white-space:nowrap para que cada uno cupiera en una linea, pero el castellano es mas largo que el ingles y a 375px desbordaba la pagina 16px. Con la letra y la sangria un pelin mas ajustadas siguen cabiendo en una linea en casi todos los moviles, y cuando no caben parten en vez de cortarse. */ .contact-steps li { text-align: left; font-size: .94rem; line-height: 1.6; white-space: normal; /* El circulo mide 1.6rem, asi que la sangria es circulo + aire. Con 1.95rem el texto casi tocaba el numero; 2.45rem deja un hueco de 0.85rem (~13px) para que el numero respire. */ padding-left: 2.45rem; } .contact-steps li::before { width: 1.6rem; height: 1.6rem; font-size: .78rem; } } /* Mobile portrait (≤479px) */ @media screen and (max-width: 479px) { .contact-section-content .contact-section-bottom { margin-top: 20px; } .contact-block-label { font-size: 1.3rem; } .contact-email-us .marquee-heading { font-size: 11.2vw; } } /* ── Contact page: dark theme ─────────────────────────────────────── */ .page-contact-dark, .page-contact-dark .page-wrapper { background-color: #000; color: #fff; } /* En pantallas altas (iPad vertical: 1024x1366) la pagina de contacto cabe entera sin scroll y sobran ~280px, que quedaban DEBAJO del footer: el bloque de Instagram/LinkedIn/framerate + WELCOME TO ARCADE + legales parecia flotar a media pantalla (lo que se veia en Safari). Body en flex-columna; el margin-top:auto que ancla el footer abajo esta en la regla de separacion contenido-footer, mas adelante. */ .page-contact-dark { display: flex; flex-direction: column; } /* Navigation: white links & logo */ .page-contact-dark .navigation-link { color: #fff; opacity: .85; } .page-contact-dark .navigation-link:hover { opacity: 1; } .page-contact-dark .location, .page-contact-dark .location:hover, .page-contact-dark .text-block { color: #fff; opacity: .85; } .page-contact-dark .menu-button { border-color: #fff; } .page-contact-dark .menu-icon-top, .page-contact-dark .menu-icon-middle, .page-contact-dark .menu-icon-bottom { background-color: #fff; } /* Logo is a white PNG — remove the invert filter used on light pages */ .page-contact-dark .logo-dark { filter: none; } /* Globe icon: invert to white */ .page-contact-dark .location-icon { filter: invert(1); } /* Main contact content: white text */ .page-contact-dark .page-title-medium { color: #fff; font-size: 6vw; } @media screen and (max-width: 991px) { .page-contact-dark .page-title-medium { font-size: 10vw; } } @media screen and (max-width: 479px) { .page-contact-dark .page-title-medium { font-size: 12vw; } } .page-contact-dark .paragraph-large { color: #fff; } .page-contact-dark .contact-block-label { color: #fff; } .page-contact-dark .contact-link.link-large { color: #fff; box-shadow: 0 1px 0 0 rgba(255,255,255,0.4); } .page-contact-dark .contact-link.link-large:hover { color: #8a8a8a; box-shadow: none; } /* Gray descriptions — keep as-is (#8a8a8a already works on dark) */ /* What happens next */ .page-contact-dark .contact-steps li { color: #fff; } .page-contact-dark .contact-steps li::before { border-color: rgba(255,255,255,0.5); color: #fff; } /* Dividers */ .page-contact-dark .divider { border-top-color: rgba(255,255,255,0.15); } /* EMAIL US marquee: white text */ .page-contact-dark .contact-email-us .marquee-heading { color: #fff; font-size: 3.2vw; } /* Navigation mobile menu background */ .page-contact-dark .navigation-menu { background-color: #000; } /* Separacion contenido-footer. Antes era un margin-top fijo de 80px en el footer; ahora los 80px minimos los pone .section-top y el footer usa margin-top:auto (el body de contacto es flex-columna, ver mas arriba): en escritorio el auto vale 0 y el hueco es el mismo de siempre, pero en pantallas altas (iPad vertical) el auto crece y ancla el footer al borde inferior, en vez de dejar el hueco muerto por debajo. */ .page-contact-dark .section-top { margin-bottom: 80px; } .page-contact-dark .footer { margin-top: auto; } /* ── About page ───────────────────────────────────────────────────── */ /* NOTE: a previous override forced the 3 overlapping hero images static (opacity:1 / transform:none !important), which killed the Webflow IX2 scroll reveal. Removed so the original scroll-in animation plays again. */ /* Recognitions/Awards — hidden until we have awards to show. To re-enable: change display:none to display:block */ #awards-section { display: none; } .page-about .about-section-bottom { margin-top: 0; } .page-about .page-title { font-size: 6vw; } .page-about .page-title-wrapper .overflow-hidden:first-child { margin-bottom: 6px; } @media screen and (max-width: 991px) { .page-about .page-title { font-size: 10vw; } } @media screen and (max-width: 479px) { .page-about .page-title { font-size: 12vw; } } /* ═══ Arcade mobile unification (2026-06) ═══════════════════════════ Card sizes are decided once and apply everywhere a project card appears: home Selected Work, Work grid, and Related Projects. */ /* A logo matches the menu-button square (52px) wherever it appears, same size on every page (navbars + project page fixed logo) */ @media screen and (max-width: 991px) { .navigation .w-nav-brand img, .proj-logo-link img { height: 48px; width: auto; } } @media screen and (max-width: 479px) { .project-title { font-size: 1.2rem !important; } .project-label-text { font-size: .75rem !important; padding: .4em .9em .5em !important; } /* Footer: marquee graphic smaller, circle scaled to match and centered */ .footer-heading { font-size: 13vw; } .marquee-item { margin-right: 8vw; } .marquee-item.margin-left { margin-left: 8vw; } .footer-circle-link { /* 26vw superaba el bloque de dos lineas del letrero (138%); a 18vw queda un pelin menor que el bloque (~96%), la misma referencia visual que Joan fijo para el iPad. */ width: calc(18vw + 3px); /* +3px afinado a ojo por Joan en su iPhone */ height: calc(18vw + 3px); top: 1px; /* afinado a ojo por Joan en su iPhone (2px era un pelo bajo) */ } .footer-circle-wrapper { height: 100%; /* center precisely over the two marquee lines */ } /* Equal breathing room: BACK TO TOP ↕ marquee ↕ Licenses. Recalibrado ago-2026 tras quitar los enlaces de servicios del footer (la fila inferior perdio su pila y el respiro quedo 45/4): ~20px parejos por ambos lados. */ .footer-row-middle { margin-top: 19px; margin-bottom: 16px; } /* Mission numbers (001/002/003): 002 was overlapping WE CRAFT by 8px, 003 was 3px from the right edge (clipped on narrower phones) */ .mission-heading-number.left { transform: translate(calc(-100% - 14px)); } .mission-heading-wrapper.margin-left { margin-left: 0; /* WE DELIVER shifts left so 003 fits on screen */ } } /* Historia de esta regla, porque ya ha ido y venido: - Sin reserva, al aparecer/desaparecer la barra clasica el layout saltaba en horizontal entre paginas. - 'stable both-edges' (07/2026) centraba sobre caja simetrica (el titulo de About quedaba ~7px a la izquierda del centro del cristal en pantallas grandes con barra clasica)... pero reservaba un hueco tambien a la IZQUIERDA que el lienzo pintaba: primero franja blanca sobre los videos, luego franja negra sobre todo lo claro. - Veredicto de Joan (08/2026): "que todo sea a pantalla completa sin ver ese borde" — el borde pesa mas que los 7px. Reserva SOLO a la derecha (donde vive la barra): imagen a sangre hasta el cristal por la izquierda, sin saltos entre paginas, y lo centrado se centra en el area de contenido como cualquier web. En barras overlay (Mac con trackpad, moviles) nada de esto existe. Si un dia su ojo pesca un titulo descentrado en maquina de barra clasica: el ajuste fino es un empujon quirurgico SOLO a ese titulo, no volver a both-edges. */ html { scrollbar-gutter: stable; } /* Overscroll (rubber-band): NEGRO arriba y abajo. Antes era blanco arriba via degradado — pero scrollbar-gutter: both-edges reserva un hueco tambien a la IZQUIERDA en equipos con barras clasicas (Mac con raton y "mostrar barras siempre", Windows), y ese hueco pinta el fondo del html: franja BLANCA de ~10px sobre los videos (video de Joan, 08-2026, medida al pixel). Canvas negro = hueco invisible en una web negra, y el rebote superior negro le pega mas al diseño. */ html { background: #000; } /* Fix for the html-background gradient above: giving a background stops the body bg from propagating to the canvas, so body white was painting OVER negative z-index hero media (home video, work slider). Isolating the hero section keeps its z-index:-1 children inside it. */ .section-hero { isolation: isolate; } /* Safari-only: Webflow IX2's 3D heading flip stalls mid-rotation there, leaving the front copy edge-on and the back copy showing (text looks doubled). Disable the flip in Safari: front flat, back hidden. The @supports test matches Safari exclusively (-webkit-hyphens). */ @supports (-webkit-hyphens: none) { .hero-heading-front, .heading-rotation-front { transform: none !important; } .hero-heading-back, .heading-rotation-back { display: none !important; } } /* Safari-only: WebKit clips glyph ink that pokes left of the heading's own box (W/V/A tips in Modica get shaved). Give the ink room with left padding and pull the box back the same amount — net position unchanged, tips visible. */ @supports (-webkit-hyphens: none) { .heading-large, .hero-title, .hero-title-arcade, .page-title, .accordion-title, .footer-heading, .marquee-heading { padding-left: .08em !important; margin-left: -.08em !important; } } /* Desktop / laptop (≥1440px): bump the project title up a step so 1440 and 13"/16" MacBooks get the bigger title. iPad landscape (1024) and below keep the 1.6rem base; mobile keeps its own smaller size. Tags are unchanged. */ @media (min-width: 1440px) { .project-title { font-size: 1.85rem; } } /* 4K only (≥2600px): card sizes read small on a 4K panel. Threshold sits above 2560 so a 2560x1440 ("1440p") monitor keeps the normal sizes. */ @media (min-width: 2600px) { .project-title { font-size: 2.7rem; } .project-label-text { font-size: 1.4rem; } } /* 4K only (≥2600px): the navbar, hero copy and buttons are fixed-px sizes tuned for laptops (17px / 16px / 28px logo), so on a 4K panel they read tiny next to everything else. Scale them up to stay balanced. Threshold sits above 2560 so a "1440p" monitor is untouched. */ @media (min-width: 2600px) { /* Navbar — appears on every page */ .navigation-link-text, .navigation-link-text-hover { font-size: 26px; } .location .text-block { font-size: 26px; } /* The EN/ES language switch isn't wrapped in .navigation-link-text (it's a plain .lang-opt span), so it never got this bump and stayed tiny next to HOME/WORK/ABOUT/CONTACT at 4K. */ .lang-switch { font-size: 26px; } .navigation .logo img { height: 44px; width: auto; } .location-icon { width: 28px; height: 28px; } /* Buttons: View our works / View all projects / Let's talk … Scale .button itself (not just its text) so the em-based padding grows with it — otherwise the pill stays small and the label looks cramped. */ .button { font-size: 1.5rem; } .button-container { min-height: 4.3rem; } .button-container.small { min-height: 2.6rem; } /* "Have a project in mind?" above the footer Let's Talk button */ .text-block-2 { font-size: 2.05rem; } /* Small copy: hero intro, "Discover how we turn ideas…", accordion text */ .paragraph-small { font-size: 26px; } /* Home hero: "What we do" caption + the services list */ .caption { font-size: 26px; } .hero-service-text, .hero-service-number { font-size: 26px; } /* Their columns are fixed rem widths, so the bigger type wrapped ("CREATIVE DEVELOPMENT" broke in two) — widen them to match. */ .hero-services-container { max-width: 24rem; } .hero-text-container { max-width: 35rem; } /* Footer links + back to top (every page) — fixed 22px / 28px icon */ .footer-link { font-size: 2.05rem; } .back-top-text { font-size: 2.05rem; } .back-top-icon { width: 2.6rem; height: 2.6rem; } /* Contact page: the title and intro scale with vw but the labels, copy, emails and steps are fixed px, so they looked tiny beside them. */ .contact-block-label { font-size: 2.4rem; } .contact-block-desc { font-size: 1.65rem; } .contact-link.link-large { font-size: 1.75rem; } .contact-steps li { font-size: 1.6rem; padding-left: 3.9rem; } .contact-steps li::before { width: 2.55rem; height: 2.55rem; font-size: 1.3rem; } /* Those blocks are fixed rem widths too, so the bigger type wrapped — widen them to match. */ .contact-block { flex: 1 1 24rem; max-width: 33rem; } .contact-steps { max-width: 52rem; } /* Section titles — "About us (01)", "Our Mission (02)", "Services (03)", "work (04)" — plus the mission numbers, all fixed 17px. */ .section-title-text { font-size: 26px; } .mission-heading-number { font-size: 26px; } /* The vertical "About us" column is a fixed 1.85rem wide; the rotated text is taller now, so widen it to fit. */ .title-vertical-wrapper { min-width: 2.8rem; } /* Hairlines: a 1px rule disappears on a 4K panel — match the type. */ .divider { border-top-width: 2px; } .divider-vertical { border-right-width: 2px; } /* Hero meta line on Work/About: "Based in Barcelona, Spain", "©2025 — 2026" and "Scroll Down" + its arrow — all fixed 17px/20px. */ .hero-caption { font-size: 26px; } .hero-caption-icon { width: 30px; height: 30px; } } /* ── Selector de idioma EN / ES ────────────────────────────────────── Se muestran siempre los dos idiomas para que se lea como un conmutador; el activo va a opacidad plena y el otro atenuado. color:inherit hace que funcione igual en el menú claro y en el oscuro. */ .lang-switch { display: flex; align-items: center; gap: .28em; cursor: default; } .lang-switch .lang-opt { color: inherit; text-decoration: none; opacity: .4; transition: opacity .15s ease; } .lang-switch a.lang-opt:hover { opacity: 1; } .lang-switch .lang-opt.is-active { opacity: 1; } .lang-switch .lang-sep { opacity: .28; } /* ── Servicios en movil: desplegables a una sola columna ───────────── Los dos primeros (desarrollo, vfx) ya ocupaban las 12 columnas, pero el resto se partia en 1/9 + 9/13: la lista se quedaba en 112px y los textos se cortaban ("Look developmen...", "Color cinematogra..."). Se fuerza el ancho completo para que todos se apilen como los dos primeros. */ @media screen and (max-width: 767px) { .accordion-content-inner .w-layout-grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; /* sin esto el parrafo y la lista se quedan ambos en la fila 1 y se solapan */ } .accordion-content-inner .icons-list { margin-top: 1.25rem; } } /* ── About en movil: fuera el sangrado de tres
────────────────── El parrafo arranca con tres
que en escritorio lo bajan para alinearlo con la columna del titulo. Apilado en movil solo dejan un hueco enorme entre el titulo y el texto. */ @media screen and (max-width: 767px) { .page-about .about-section-bottom .paragraph-large > br:first-child, .page-about .about-section-bottom .paragraph-large > br:first-child + br, .page-about .about-section-bottom .paragraph-large > br:first-child + br + br { display: none; } } /* ── Numeros 001/002/003 de la mision en movil ─────────────────────── El numero va absolute y translate(100%), o sea fuera del borde derecho de la palabra. "CONECTAMOS" ocupaba 370px de los 360 disponibles, asi que el 003 se salia 12px de la pantalla. Se reduce el titular lo justo para dejarle sitio, igual en los tres para que la escalera siga siendo homogenea. */ @media screen and (max-width: 767px) { .mission-heading-wrapper .heading-large { font-size: 11.6vw; } } /* ── Escalera de la mision: adaptacion para el castellano ──────────── El ingles son dos palabras ("WE DELIVER") y puede repartirse entre lineas; el castellano es una sola ("CONECTAMOS") y no se puede partir, asi que con el sangrado original (16.7vw) la palabra mas el numero 003 se salian de pantalla entre 480 y 1440px. Se reduce solo el sangrado y se mantiene el cuerpo en 10vw, igual que el ingles, para que las dos versiones se vean del mismo tamano. Acotado por lang, asi el ingles no se toca. */ @media screen and (min-width: 480px) and (max-width: 1600px) { html[lang="es"] .mission-heading-wrapper.margin-left { margin-left: 5vw; } html[lang="es"] .mission-heading-wrapper .heading-large { font-size: 10vw; } } /* A 480px justo el 003 tambien se salia en ingles (13px). */ @media screen and (min-width: 480px) and (max-width: 600px) { .mission-heading-wrapper.margin-left { margin-left: 4vw; } .mission-heading-wrapper .heading-large { font-size: 10vw; } } /* ── "Parte de tu equipo" en movil: foto y titulares sin solape ────── La foto de la mision sube con un margin-top negativo para montarse sobre los titulares (buscado en escritorio). Apilado en movil eso hace que la palabra EQUIPO caiga encima de la foto roja. Se anula el margen negativo para que queden uno debajo del otro. */ @media screen and (max-width: 767px) { .page-about .mission-image-wrapper { margin-top: 1.5rem !important; } } /* ── "Part of your team": foto grande alineada con el titulo (escritorio) ── El original dejaba la foto a 3/12 columnas (pequena) y 152px por debajo del titulo, con un hueco enorme en el centro. Se ensancha a 5/12 y se sube para que su borde superior cuadre con el titulo, que NO se toca. -24vw mantiene la alineacion estable de 1440 a 4K (desfase <15px). */ @media screen and (min-width: 768px) { .page-about .mission-image-wrapper { grid-column: 1 / 6 !important; max-width: 88% !important; /* foto un pelin mas pequena */ margin-top: -24vw !important; } /* El parrafo escala con su columna (24.5vw), pero el coeficiente importa: con 1.25vw el texto ocupaba ~10 lineas y en iPad apaisado / portatiles se veia grande y desproporcionado frente a la foto; en 27"/4K en cambio el tope de 1.5rem lo dejaba en 24px -> ~7 lineas, el look compacto que Joan dio por bueno. Ese look capado equivale a 24px/2560 = 0.94vw, asi que se usa 0.94vw como coeficiente: la MISMA proporcion texto/foto en todas las pantallas de 1280 a 4K (en 2560+ el resultado es identico al de antes, pixel a pixel). El suelo de .75rem evita que baje de 12px en tablets pequeñas; el tope de 1.5rem mantiene el 4K como estaba. */ .page-about .mission-text .paragraph-small { font-size: clamp(.75rem, .94vw, 1.5rem) !important; line-height: 1.25 !important; } /* La foto y el parrafo estan en la misma fila del grid; se ancla el parrafo abajo para que su pie coincida con el de la foto (alineacion exacta a 2560/4K, ~26px por debajo a 1440). */ .page-about .mission-text { align-self: end !important; margin-top: 0 !important; } } /* ── Reborde negro fino en los bordes de la foto de la mision ──────── Reproducido: depende del navegador y del ancho sale una linea oscura de 1px en un borde u otro (Chromium: inferior/derecho a 1366, izquierdo a 2560; WebKit: izquierdo a 2560). La caja de la foto acaba con medidas fraccionarias (p.ej. 387.53x600.67) y eso provoca dos artefactos de subpixel: (1) al redondear el pintado del JPEG, Chromium mezcla el borde con negro transparente (texture bleed); (2) el panel negro del wipe de entrada (.image-placeholder) termina en scaleX(0) con origen en el borde izquierdo, y el antialiasing puede dejar un filo de <1px. Los pixeles del propio JPEG son claros (comprobado): el negro no viene del archivo. Arreglo: la imagen se agranda 1px por cada lado y la caja recorta con overflow:hidden — los bordes problematicos quedan fuera de lo visible y la imagen tapa ademas el filo del placeholder. Con object-fit:cover ese +1px no cambia el encuadre perceptible. */ .mission-image { overflow: hidden; } .mission-image .image-cover { inset: -1px; width: calc(100% + 2px); max-width: none; /* el img{max-width:100%} global caparia el +2px */ height: calc(100% + 2px); } /* ── "Part of your team" en movil: apilado vertical ────────────────── Segun la maqueta del cliente: titulo grande arriba alineado a la izquierda (empieza en el borde de la foto y ocupa su ancho), imagen a todo el ancho debajo, y el parrafo despues. El escritorio no se toca. */ @media screen and (max-width: 767px) { /* Titulo de mision: cada linea con su propia sangria, escalonada. Las posiciones las fijo Joan a mano sobre la maqueta real, y son distintas por idioma porque las palabras miden distinto. Los valores se midieron en px a 390px de ancho y se pasan a vw para que la composicion escale igual que la tipografia, que ya va en vw (12.5vw en castellano, 13.5vw en ingles). */ .page-about .align-center:has(.mission-heading-wrapper), .page-about .align-right:has(.mission-heading-wrapper) { display: flex !important; justify-content: flex-start !important; text-align: left !important; padding-right: 0 !important; } .page-about .mission-heading-wrapper { justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ingles — 19 / 49 / 177 px a 390px, compensando los margenes negativos encadenados de .heading-rotation (-9px) y del h1 (-3.9px). */ .page-about .align-center:has(.mission-heading-wrapper):first-of-type { padding-left: 4.421vw !important; } .page-about .align-right:has(.mission-heading-wrapper) { padding-left: 12.118vw !important; } .page-about .align-center:has(.mission-heading-wrapper):last-of-type { padding-left: 44.933vw !important; } /* Castellano — 17 / 99 / 151 px a 390px, con la misma compensacion. */ html[lang="es"] .page-about .align-center:has(.mission-heading-wrapper):first-of-type { padding-left: 3.908vw !important; } html[lang="es"] .page-about .align-right:has(.mission-heading-wrapper) { padding-left: 24.933vw !important; } html[lang="es"] .page-about .align-center:has(.mission-heading-wrapper):last-of-type { padding-left: 38.267vw !important; } /* Cuerpo moderado, proporcionado con "donde la imagen evoluciona" (antes iba a 18.5/21vw, el doble de grande, desproporcionado). */ .page-about .mission-heading-wrapper .heading-large { font-size: 13.5vw !important; } html[lang="es"] .page-about .mission-heading-wrapper .heading-large { font-size: 12.5vw !important; } /* El 002 iba a la izquierda de su linea; alineado a la izquierda se saldria de pantalla, asi que se lleva a la derecha como 001/003. */ .page-about .mission-heading-number.left { left: auto !important; right: 0% !important; transform: translate(100%) !important; } .page-about .mission-image-wrapper { grid-column: 1 / -1 !important; /* imagen a todo el ancho */ margin-top: 2rem !important; /* debajo del titulo, sin solape */ } } /* ── About en movil: interlineado igual que escritorio ─────────────── En movil habia reglas que aflojaban el line-height de estos titulos (page-title .9, heading-small 1), dejando mucho hueco entre lineas comparado con escritorio (.8). Se igualan a .8 en la About. */ @media screen and (max-width: 767px) { .page-about .page-title, .page-about .heading-small { line-height: 0.8 !important; } /* El titulo de mision son tres bloques sueltos, asi que su line-height es literalmente el hueco entre lineas y se veia mas suelto que el resto. A .75 el hueco de tinta baja de ~5.5px a ~3.8px. No se aprieta mas porque a .73 ya solo quedan 2px en castellano y a .68 se tocan, y el movil de Joan renderiza mas justo que el navegador de pruebas (paso lo mismo con el marquee del footer). */ .page-about .mission-heading-wrapper .heading-large { line-height: 0.73 !important; } /* Con line-height por debajo de 1 la caja de linea es mas corta que el glifo, y el .overflow-hidden que envuelve el bloque cortaba ~12px por abajo. No se notaba en TEAM, pero si en la cola de la Q de EQUIPO. Este aire devuelve el trozo recortado sin tocar el interlineado. */ .page-about .align-center:has(.mission-heading-wrapper):last-of-type { padding-bottom: 4.6vw !important; } } /* ── Hero About en movil: juntar las dos lineas ────────────────────── El hueco entre SOBRE y ARCADE venia del padding vertical de cada .overflow-hidden mas un margin-bottom de 6px en la primera. Se reducen para que las lineas queden juntas como en escritorio. OJO: no tocar el ancho de .overflow-hidden — tiene overflow:hidden para la animacion de entrada y al estrecharlo recorta la ultima letra (salia "SOBRI" / "ABOU"). */ @media screen and (max-width: 767px) { .page-about .page-title-wrapper .overflow-hidden { padding-top: 0 !important; padding-bottom: 0 !important; } .page-about .page-title-wrapper .overflow-hidden:first-child { margin-bottom: 6px !important; /* sin esto las dos lineas se pisan */ } } /* En tablet el cuerpo es mayor y 6px no basta: las lineas se solapaban. */ @media screen and (min-width: 480px) and (max-width: 767px) { .page-about .page-title-wrapper .overflow-hidden:first-child { margin-bottom: 2.6vw !important; } } /* ── Hero About en movil: centrado optico ──────────────────────────── Una regla anterior desplazaba la primera linea 20px a la derecha (".page-title-wrapper .overflow-hidden:first-child .page-title { left:20px }"), demasiado. Se anula en movil; en escritorio se respeta el diseno. Queda un desplazamiento pequeno a proposito: la segunda linea ("ARCADE") empieza por A, una diagonal que se estrecha hacia arriba, asi que su caja de tinta llega mas a la izquierda de lo que el ojo percibe como masa de la palabra. Centradas geometricamente (0px), la primera linea parece quedarse corta por la izquierda. Estos 4px lo compensan. Es puramente optico: si se quiere ajustar, es este numero y nada mas. */ @media screen and (max-width: 767px) { .page-about .page-title-wrapper .overflow-hidden:first-child .page-title { left: 4px !important; } /* Justo el aire minimo: a 6px se tocaban, a 10px quedaba suelto. */ .page-about .page-title-wrapper .overflow-hidden:first-child { margin-bottom: 8px !important; } } /* ── Footer "welcome to arcade" en movil ───────────────────────────── El interlineado se aflojaba a .9 en movil y las dos filas del marquee quedaban separadas frente a escritorio, donde casi se tocan. .73 es el valor bueno en pantalla real: filas juntas sin que las letras se rocen (.68 y .70 aun se superponian en el movil del cliente). */ @media screen and (max-width: 767px) { .footer-heading { line-height: 0.73 !important; } } /* ── Titulo de "Nuestra mision" en escritorio (solo castellano) ────── Joan pidio esta composicion sobre una maqueta a 1440: las lineas 1 y 3 arrancan alineadas entre si y la 2 se va a la derecha. Las posiciones van en calc(vw - 138px) para que aguanten de 1440 a 4K igual que la tipografia, que es 10vw. El 138px descuenta el padding fijo del .container-fluid, que en % haria derivar la composicion al crecer la pantalla. El ingles se queda con la composicion original. */ @media screen and (min-width: 768px) { html[lang="es"] .page-about .align-center:has(.mission-heading-wrapper), html[lang="es"] .page-about .align-right:has(.mission-heading-wrapper) { display: flex !important; justify-content: flex-start !important; text-align: left !important; padding-right: 0 !important; } html[lang="es"] .page-about .mission-heading-wrapper { justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } /* Con la sangria grande el ancho restante no da para "de tu" y rompia en dos lineas. Estos titulos van siempre en una linea. */ html[lang="es"] .page-about .mission-heading-wrapper .heading-large { white-space: nowrap !important; } /* Borde izquierdo del texto: PARTE 50vw, DE TU 69.4vw, EQUIPO 50vw */ html[lang="es"] .page-about .align-center:has(.mission-heading-wrapper):first-of-type { padding-left: calc(50vw - 138px) !important; } html[lang="es"] .page-about .align-right:has(.mission-heading-wrapper) { padding-left: calc(69.4vw - 138px) !important; } html[lang="es"] .page-about .align-center:has(.mission-heading-wrapper):last-of-type { padding-left: calc(50vw - 138px) !important; } } /* ── Interlineado del titulo de mision en escritorio ───────────────── Las tres lineas son bloques sueltos, asi que el line-height es literalmente el hueco entre ellas. Estaba en .8 y se veia suelto. Se iguala a .73, el mismo valor que ya usa el movil: al ser una proporcion da la misma densidad a 144px que a 48px. Ambos idiomas. */ @media screen and (min-width: 768px) { /* .71 es el ultimo escalon antes del roce: deja 3.5/2.5px de tinta en castellano y 2/2.5px en ingles, medido donde las lineas se solapan en horizontal. A .70 el segundo hueco baja a 0.5px y a .69 ya chocan. */ .page-about .mission-heading-wrapper .heading-large { line-height: 0.71 !important; } /* En ingles los contenedores son bloques y generaban su propio strut de linea (115.2px frente a los 107.1px del contenido): 8.1px de aire extra por linea que no venia del line-height del titulo. En castellano no pasaba porque los puse en flex. Anulando el strut los dos idiomas quedan igual de apretados. El numero recupera su interlineado. */ .page-about .align-center:has(.mission-heading-wrapper), .page-about .align-right:has(.mission-heading-wrapper) { line-height: 0 !important; } .page-about .mission-heading-number { line-height: normal !important; } /* Con el interlineado por debajo de 1 la caja de linea es mas corta que el glifo y el .overflow-hidden cortaba la cola de la Q de EQUIPO: solo la cola bajaba ~15.5px por debajo de la linea base y se perdia entera. En ingles no se notaba porque TEAM no tiene descendentes. */ .page-about .align-center:has(.mission-heading-wrapper):last-of-type { padding-bottom: 2.6vw !important; } } /* ── Hero de Work en movil: mismo interlineado que en escritorio ───── El titulo se veia mas suelto en movil que en ordenador, y no era cosa del margen: la plantilla afloja el .page-title a line-height .9 por debajo de 480px, mientras que en escritorio va a .8. Eso dejaba el paso entre lineas en 0.811 x el cuerpo frente a 0.722 en escritorio, un 12% mas suelto. Se iguala el line-height y se ajusta el margen para clavar la misma proporcion. */ @media screen and (max-width: 479px) { .hero-content-middle .hero-heading-wrapper .page-title { line-height: 0.8; } } /* El margen corrige el resto de la diferencia. Sirve igual para tablet, que ya tenia el line-height en .8 pero se quedaba en 0.749. */ @media screen and (max-width: 767px) { .hero-content-middle .overflow-hidden:first-child { margin-bottom: -3.37vw; } } /* ── Paginas legales (aviso legal / privacidad) ────────────────────── Documentos de lectura larga: columna estrecha, jerarquia clara y aire entre bloques. Reutilizan .heading-small y .paragraph-small del sitio. */ .legal-doc { max-width: 62ch; padding-bottom: 6rem; } .legal-doc h2.heading-small { /* .heading-small es tamano de display en este diseno y en un documento de lectura larga resultaba gritona. Se baja manteniendo la familia. */ font-size: 1.6rem; line-height: 1.1; margin-top: 3rem; margin-bottom: .85rem; } .legal-doc > p.paragraph-small:first-child { border-left: 2px solid var(--color--primary); padding-left: 1rem; margin-bottom: 2.5rem; } .legal-doc p.paragraph-small { margin-bottom: 1.1rem; line-height: 1.65; } .legal-doc ul.paragraph-small { margin: 0 0 1.4rem; padding-left: 1.2rem; line-height: 1.65; } .legal-doc ul.paragraph-small li { margin-bottom: .6rem; } .legal-doc code { font-size: .9em; padding: .1em .35em; border: 1px solid currentColor; border-radius: 3px; opacity: .8; } .legal-doc a { text-decoration: underline; text-underline-offset: .18em; } @media screen and (max-width: 767px) { .legal-doc { max-width: none; padding-bottom: 4rem; } .legal-doc h2.heading-small { margin-top: 2.2rem; } } /* ── Home hero: baja el titulo ARCADE unos px para despegarlo del menu. En 4K el menu es mas alto y quedaba mas pegado (15px vs 21px), asi que ahi se baja un poco mas para igualar la separacion. ── */ .hero-content-top { margin-top: 10px; } @media (min-width: 2600px) { .hero-content-top { margin-top: 33px; } } /* ── Home hero en pantallas bajas (13": ~800-900px de alto) ────────── Ahi el hero va justo de altura y el empujon de 10px del titulo ARCADE amontonaba la parte de arriba. Se deja el titulo en su sitio original. */ @media (min-width: 992px) and (max-height: 920px) { .hero-content-top { margin-top: 0; } } /* ── Home hero: baja 20px el bloque inferior (lista "What we do", parrafo y boton). Van anclados abajo con margin-top:auto, asi que se consigue restando 20px al padding inferior de la seccion. ── */ .section-hero { padding-bottom: 1.875rem; /* era 3.125rem (50px) -> 30px */ } @media (min-width: 2600px) { .section-hero { padding-bottom: 6.25rem; /* el valor real de 4K vive en el