@font-face { font-family: "A S Module3 Variable"; font-weight: undefined; font-style: normal; src: url("https://freight.cargo.site/m/R3182042173583760631055564139284/ASModule3VF.woff2") format("woff2"); } @font-face { font-family: "Antonio"; font-weight: 700; font-style: normal; src: url("https://freight.cargo.site/m/X3177234660748722765809485867796/Antonio-Bold.woff2") format("woff2"); } @font-face { font-family: "Sirca Display Trial"; font-weight: 400; font-style: normal; src: url("https://freight.cargo.site/m/E3174131487405796281077710711572/SircaDisplayTrial-Regular.woff") format("woff"); } @font-face { font-family: "Sirca Text Trial"; font-weight: 400; font-style: normal; src: url("https://freight.cargo.site/m/S3174130765842955093854889700116/SircaTextTrial-Regular.woff") format("woff"); } @font-face { font-family: "Sirca Text Trial"; font-weight: 500; font-style: normal; src: url("https://freight.cargo.site/m/E3174129078593061647937041591060/SircaTextTrial-SemiMedium.woff") format("woff"); } html { --mobile-scale: 1; --mobile-padding-offset: 0.68; } body { --swatch-1: rgba(0, 0, 0, 0.85); --swatch-2: rgba(0, 0, 0, 0.75); --swatch-3: rgba(0, 0, 0, 0.6); --swatch-4: rgba(0, 0, 0, 0.4); --swatch-5: rgba(0, 0, 0, 0.25); --swatch-7: #0000ff; --colorfilter-color: #0000ff; --colorfilter-color-opacity: 1; --colorfilter-mix: lighten; --colorfilter-grayscale: 1; background-color: #ffffff; --swatch-6: #000000; --swatch-8: #4056f4; --swatch-9: #f8f6f0; --swatch-10: #f8f6f0; } body.mobile { } a:active, .linked:active, .zoomable::part(media):active { opacity: 0.7; } .page a.active { color: #000000; text-decoration: underline; } sub { position: relative; vertical-align: baseline; top: 0.3em; } sup { position: relative; vertical-align: baseline; top: -0.4em; } .small-caps { font-variant: small-caps; text-transform: lowercase; } ol { margin: 0; padding: 0 0 0 2.5em; } ul { margin: 0; padding: 0 0 0 2.0em; } ul.lineated { margin: 0; padding: 0; list-style-type: none; margin: 0 0 0 3em; text-indent: -3em; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: rgba(127, 127, 127, 0.4); border: 0; height: 1px; display: block; } .content { border-style: solid; } bodycopy { font-size: 1.8rem; font-weight: 500; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile bodycopy { font-size: 1.70rem; } bodycopy a { color: #000000; text-decoration: none; } .mobile bodycopy a { } bodycopy a:hover { color: #4056f4; } .mobile bodycopy a:hover { color: #4056f4; } h1 { font-family: "Diatype Variable"; font-style: normal; font-weight: 500; margin: 0; font-size: 4.8rem; line-height: 1; color: #000000; letter-spacing: -0.004em; font-variation-settings: 'slnt' 0, 'MONO' 0; } h1 a { color: #000000; text-decoration: none; } h1 a:hover { color: #4056f4; } h2 { font-family: "Diatype Variable"; font-style: normal; font-weight: 500; margin: 0; color: #000000; font-size: 2.4rem; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; display: inline-block; } h2 a { color: #000000; text-decoration: none; } h2 a:hover { color: #4056f4; text-decoration: none; } .caption { font-size: 1.4rem; font-weight: 500; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1.1; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .caption a { color: #000000; text-decoration: none; } .caption a:hover { color: rgba(0, 0, 0, 0.85); text-decoration: underline; } media-item .caption { margin-top: .5em; } gallery-grid .caption, gallery-columnized .caption, gallery-justify .caption { margin-bottom: 2em; } [thumbnail-index] .caption { text-align: center; } [thumbnail-index] .caption .tags { margin-top: 0.25em; } .page { justify-content: flex-start; } .page-content { padding: 2rem; text-align: left; } .mobile [id] .page-layout { max-width: 100%; } .mobile [id] .page-content { } .page-layout { align-items: flex-start; max-width: 100%; } media-item::part(media) { border-radius: 0px; border: 0; padding: 0; border-color: rgba(0,0,0,.85); border-style: solid; } .quick-view { height: 100%; width: 100%; padding: 3rem; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; } .quick-view-background { } .quick-view .caption { color: #f8f6f0; padding: 20px 0; text-align: center; transition: 100ms opacity ease-in-out; position: absolute; bottom: 0; left: 0; right: 0; } .quick-view .caption-background { padding: 0.5rem 1rem; display: inline-block; background: rgba(0, 0, 0, 0.5); border-radius: .5rem; text-align: left; max-width: 50rem; } .mobile .quick-view { width: 100%; height: 100%; margin: 0; padding: 10px; } .mobile .quick-view .caption { padding: 10px 0; } .button-4 { --text-style: "button 4"; font-size: 1.15rem; font-weight: 500; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .button-4 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4 a:hover { } .button-4 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .mellow-minutes { --text-style: "Mellow Minutes"; font-size: 2.5rem; font-weight: 500; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile .mellow-minutes { font-size: 2.2rem; } .mellow-minutes a { color: #000000; text-decoration: none; } .mellow-minutes a:active { color: rgba(0, 0, 0, 0.85); text-decoration: underline; } .mellow-minutes a:hover { color: #4056f4; text-decoration: none; } .kuvateksti-hinnalla { --text-style: "Kuvateksti hinnalla"; font-size: 1.2rem; font-weight: 500; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile .kuvateksti-hinnalla { font-size: 2.2rem; } .kuvateksti-hinnalla a { color: #000000; text-decoration: none; } .kuvateksti-hinnalla a:hover { color: rgba(0, 0, 0, 0.85); text-decoration: underline; } .button-1 { --text-style: "button 1"; font-family: "Diatype Variable"; font-style: normal; font-weight: 500; margin: 0; font-size: 2.4rem; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #f8f6f0; background: #027aff; display: inline-block; border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.1rem; border-radius: 0.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; } .button-1 a { color: #f8f6f0; text-decoration: none; } .button-1 a:hover { } .button-1 a.active { color: #ffffff; text-decoration: none; } .mobile-pienempi-teksti { --text-style: "Mobile, pienempi teksti"; font-size: 1rem; font-weight: 500; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile .mobile-pienempi-teksti { font-size: 2.2rem; } .mobile-pienempi-teksti a { color: #000000; text-decoration: none; } .mobile-pienempi-teksti a:hover { } .shipping-infopolicy { --text-style: "Shipping info&policy"; font-size: 1.5rem; font-weight: 400; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile .shipping-infopolicy { font-size: 2.2rem; } .shipping-infopolicy a { color: #000000; text-decoration: none; } .shipping-infopolicy a:hover { } .button-4-1 { --text-style: "button 4-1"; font-size: 1.2rem; font-weight: 500; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .mobile .button-4-1 { font-size: 2.2rem; } .button-4-1 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-1 a:hover { } .button-4-1 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .big { --text-style: "Big"; font-size: 3rem; font-weight: 500; color: #000000; font-family: "Diatype Mono Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile .big { font-size: 2.2rem; } .big a { color: #000000; text-decoration: none; } .big a:hover { } .button-4-2 { --text-style: "button 4-2"; font-size: 1.8rem; font-weight: 500; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .mobile .button-4-2 { font-size: 2.2rem; } .button-4-2 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-2 a:hover { } .button-4-2 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-3 { --text-style: "button 4-3"; font-size: 1.8rem; font-weight: 500; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .mobile .button-4-3 { font-size: 2.2rem; color: #000000; } .button-4-3 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .mobile .button-4-3 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-3 a:hover { } .button-4-3 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-4 { --text-style: "button 4-4"; font-size: 1.8rem; font-weight: 500; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .mobile .button-4-4 { font-size: 2.2rem; color: #000000; } .button-4-4 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .mobile .button-4-4 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-4 a:hover { } .button-4-4 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-15 { --text-style: "button 15"; font-size: 1.8rem; font-weight: 500; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; background: rgba(0, 0, 0, 0.6); display: inline-block; padding: 1rem; padding-right: 1.2rem; padding-left: 1.2rem; padding-top: 0.9rem; padding-bottom: 0.9rem; } .mobile .button-15 { font-size: 0.50rem; color: #000000; } .button-15 a { color: #000000; text-decoration: underline; } .mobile .button-15 a { color: #ffffff; text-decoration: none; } .button-15 a:hover { } .button-15 a.active { color: #ffffff; text-decoration: none; } .mellow-minutes-nimi { --text-style: "Mellow Minutes, nimi"; font-size: 1.8rem; font-weight: 500; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile .mellow-minutes-nimi { font-size: 1.70rem; color: #000000; } .mellow-minutes-nimi a { color: #000000; text-decoration: none; } .mobile .mellow-minutes-nimi a { color: #000000; } .mellow-minutes-nimi a:hover { color: #4056f4 } .lg { --text-style: "lögö"; font-size: 1.8rem; color: #000000; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-weight: 1000; } .mobile .lg { font-size: 1.70rem; color: #000000; } .lg a { color: #000000; text-decoration: none; } .mobile .lg a { color: #000000; } .lg a:hover { } .button-4-5 { --text-style: "button 4-5"; font-size: 1.8rem; font-weight: 500; font-family: "Diatype Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .mobile .button-4-5 { font-size: 1.70rem; color: #000000; } .button-4-5 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .mobile .button-4-5 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-5 a:hover { } .button-4-5 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .links { --text-style: "Links"; font-family: "Diatype Variable"; font-style: normal; font-weight: 600; color: rgba(0, 0, 0, 0.85); font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em; font-variation-settings: 'slnt' 0, 'MONO' 0; display: inline-block; background: #ffffff; padding: 1rem; border-width: 0rem; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-right: 2rem; padding-left: 2rem; } .links a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .links a:hover { } .button-8 { --text-style: "button 8"; font-family: "Diatype Variable"; font-style: normal; font-weight: 500; margin: 0; font-size: 3.5rem; line-height: 1; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: rgba(0, 0, 0, 0.85); display: inline-block; border-width: 0.1rem; filter: drop-shadow(0rem 0rem 0rem rgba(0,0,0,0.85)); will-change: filter; border-radius: 0.0rem; padding: 1.0rem; border-color: rgba(0,0,0,0.85); border-style: solid; } .button-8 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-8 a:hover { } .button-8 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .mobile .quick-view .caption-background { max-width: 100vw; } ::part(slideshow-nav) { --button-size: 30px; --button-inset: 20px; --button-icon-color: rgba(255, 255, 255, 0.9); --button-icon-stroke-width: 1.5px; --button-icon-stroke-linecap: none; --button-background-color: rgba(87, 87, 87, 0.35); --button-background-radius: 50%; --button-active-opacity: 0.7; } gallery-slideshow::part(slideshow-nav) { --button-inset: 15px; } .quick-view::part(slideshow-nav) { } .wallpaper-slideshow::part(slideshow-nav) { } .mobile ::part(slideshow-nav) { --button-inset: 10px; } .mobile .quick-view::part(slideshow-nav) { --button-inset: 25px; } shop-product { font-size: 1.9rem; max-width: 21rem; font-family: "Diatype Variable"; font-style: normal; font-weight: 400; font-variation-settings: 'slnt' 0, 'MONO' 0; letter-spacing: 0em; margin-bottom: 1em; } shop-product::part(price) { color: rgba(0, 0, 0, 0.75); line-height: 1.1; margin-bottom: 0.5em; } shop-product::part(dropdown) { width: 100%; color: rgba(0, 0, 0, 0.85); border: 1px solid rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0); background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg); background-repeat: no-repeat; background-position: top 0em right .1em; line-height: 1.2; padding: 0.58em 2em 0.55em 0.9em; border-radius: 10em; margin-bottom: 0.5em; transition: background-color 0.3s ease; /* Smooth transition effect */ } shop-product::part(button):hover { background-color: #4056f4; color: #f8f6f0; } shop-product::part(button) { background: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0.85); border: 1px solid rgba(0, 0, 0, 0.2); text-align: left; line-height: normal; padding: 0.5em 1em; cursor: pointer; border-radius: 10em; } shop-product::part(button):active { opacity: .7; } audio-player { --text-color: rgba(0, 0, 0, 0.85); --text-padding: 0 1.2em 0 1.0em; --background-color: rgba(255, 255, 255, 0); --buffer-background-color: rgba(0, 0, 0, 0.03); --progress-background-color: rgba(0, 0, 0, 0.075); --border-lines: 1px solid rgba(0, 0, 0, 0.2); font-size: 1.2rem; width: 32rem; height: 2.75em; font-family: "Diatype Variable"; font-style: normal; font-weight: 400; font-variation-settings: 'slnt' 0, 'MONO' 0; line-height: normal; letter-spacing: 0em; margin-bottom: 0.5em; border-radius: 10em; } audio-player::part(button) { --icon-color: rgba(0, 0, 0, 0.85); --icon-size: 32%; --play-text: ''; --pause-text: ''; width: 3.15em; display: inline-flex; justify-content: center; cursor: pointer; } audio-player::part(play-icon) { padding-left: 0.6em; } audio-player::part(pause-icon) { padding-left: 0.4em; } audio-player::part(progress-indicator) { border-right: 1px solid rgba(0, 0, 0, 0); height: 100%; cursor: ew-resize; } audio-player::part(separator) { border-right: var(--border-lines); } body.mobile audio-player { max-width: 100%; } .mobile .content { } /* ===================================================== MELLOW MINUTES · TEXT STYLES (mockup v4) 1 rem ≈ 13 px desktop, ≈ 8.25 px mobile ===================================================== */ .mobile .title { font-size: 3.98rem; line-height: 1.28; } .mobile .highlight { font-size: 3.58rem; } .statement { --text-style: "Statement"; font-size: 3.08rem; font-weight: 700; color: #55554f; font-family: Antonio; font-style: normal; line-height: 1.1; letter-spacing: -0.015em; text-transform: uppercase; text-align: justify; text-align-last: center; display: block; } .mobile .statement { font-size: 2.42rem; text-align-last: left; } .statement a { color: #55554f; text-decoration: none; } .mobile .statement a { } .statement a:hover { color: #8c8c85; } .mobile .statement a:hover { color: #8c8c85; } .eventname { --text-style: "Eventname"; font-size: 3.08rem; font-weight: 700; color: #3a3a35; font-family: Antonio; font-style: normal; line-height: 1.1; letter-spacing: -0.015em; text-transform: uppercase; display: block; } .mobile .eventname { font-size: 3.88rem; } .eventname a { color: #3a3a35; text-decoration: none; } .mobile .eventname a { } .eventname a:hover { color: #8c8c85; } .mobile .eventname a:hover { color: #8c8c85; } .subheading { --text-style: "Subheading"; font-size: 1.85rem; font-weight: 700; color: #3a3a35; font-family: Antonio; font-style: normal; line-height: 1.1; letter-spacing: -0.015em; text-transform: uppercase; display: block; } .mobile .subheading { font-size: 2.42rem; } .subheading a { color: #3a3a35; text-decoration: none; } .mobile .subheading a { } .subheading a:hover { color: #8c8c85; } .mobile .subheading a:hover { color: #8c8c85; } .smallheading { --text-style: "Smallheading"; font-size: 1.54rem; font-weight: 700; color: #3a3a35; font-family: Antonio; font-style: normal; line-height: 1.1; letter-spacing: -0.015em; text-transform: uppercase; display: block; } .mobile .smallheading { font-size: 2.18rem; } .smallheading a { color: #3a3a35; text-decoration: none; } .mobile .smallheading a { } .smallheading a:hover { color: #8c8c85; } .mobile .smallheading a:hover { color: #8c8c85; } .body { --text-style: "Body"; font-size: 1.08rem; font-weight: 500; color: #3a3a35; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; line-height: 1.3; letter-spacing: 0; display: block; } .mobile .body { font-size: 1.70rem; } .body a { color: #3a3a35; text-decoration: none; } .mobile .body a { } .body a:hover { color: #8c8c85; } .mobile .body a:hover { color: #8c8c85; } .label { --text-style: "Label"; font-size: 0.92rem; font-weight: 400; color: #6f6f69; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; display: block; } .mobile .label { font-size: 1.45rem; } .label a { color: #6f6f69; text-decoration: none; } .mobile .label a { } .label a:hover { color: #3a3a35; } .mobile .label a:hover { color: #3a3a35; } .tag { --text-style: "Tag"; font-size: 0.92rem; font-weight: 400; color: #ffffff; background: #3a3a35; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.58em 0.83em; display: inline-block; } .mobile .tag { font-size: 1.21rem; padding: 0.4em 0.7em; } .tag a { color: #ffffff; text-decoration: none; } .mobile .tag a { } .tag a:hover { color: #c4c4be; } .mobile .tag a:hover { color: #c4c4be; } .mono { --text-style: "Mono"; font-size: 0.92rem; font-weight: 400; color: #3a3a35; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; line-height: 1.35; letter-spacing: 0; display: block; } .mobile .mono { font-size: 1.45rem; } .mono a { color: #3a3a35; text-decoration: none; } .mobile .mono a { } .mono a:hover { color: #8c8c85; } .mobile .mono a:hover { color: #8c8c85; } /* Old styles, kept until every page uses the new ones */ .display { --text-style: "Display"; font-size: 3.53rem; font-weight: 400; color: #3a3a35; font-family: "A S Module3 Variable"; font-style: normal; font-variation-settings: 'wdth' 30; -webkit-text-stroke: 0.2px currentColor; line-height: 1.17; letter-spacing: 0; text-transform: uppercase; display: block; } .mobile .display { font-size: 3.98rem; } .display a { color: #3a3a35; text-decoration: none; } .mobile .display a { } .display a:hover { color: #8c8c85; } .mobile .display a:hover { color: #8c8c85; } .heading { --text-style: "Heading"; font-size: 3.08rem; font-weight: 700; color: #3a3a35; font-family: Antonio; font-style: normal; line-height: 1.1; letter-spacing: -0.015em; text-transform: uppercase; display: block; } .mobile .heading { font-size: 3.88rem; } .heading a { color: #3a3a35; text-decoration: none; } .mobile .heading a { } .heading a:hover { color: #8c8c85; } .mobile .heading a:hover { color: #8c8c85; } .lead { --text-style: "Lead"; font-size: 2.15rem; font-weight: 500; color: #3a3a35; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; line-height: 1.1; letter-spacing: -0.01em; display: block; } .mobile .lead { font-size: 2.2rem; } .lead a { color: #3a3a35; text-decoration: none; } .mobile .lead a { } .lead a:hover { color: #8c8c85; } .mobile .lead a:hover { color: #8c8c85; } /* Duplicate style classes Cargo created (same look) */ .subheading-1 { font-family: Antonio; font-weight: 700; font-size: 1.85rem; line-height: 1.1; letter-spacing: -0.015em; text-transform: uppercase; color: #3a3a35; display: block; } .mobile .subheading-1 { font-size: 2.42rem; } .mono-1 { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 400; font-size: 0.92rem; line-height: 1.35; letter-spacing: 0; color: #3a3a35; display: block; } .mobile .mono-1 { font-size: 1.45rem; } /* ===================================================== MM GLOBAL ===================================================== */ bodycopy { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-variation-settings: normal; font-size: 1.08rem; font-weight: 500; line-height: 1.3; color: #3a3a35; } .mobile bodycopy { font-size: 1.70rem; } bodycopy a { color: #3a3a35; text-decoration: none; } bodycopy a:hover, .mobile bodycopy a:hover { color: #8c8c85; } a:hover { text-decoration: none !important; } .page a.active { color: inherit; text-decoration: none; } /* Page side margins: 32 px desktop, 20 px mobile */ .page-content { padding-left: 2.46rem !important; padding-right: 2.46rem !important; padding-top: 8rem !important; padding-bottom: 5.54rem !important; text-align: left; } .mobile .page-content { padding-left: 2.42rem !important; padding-right: 2.42rem !important; padding-top: 10.18rem !important; padding-bottom: 5.82rem !important; } /* Small helpers */ .mm-grey { color: #6f6f69 !important; } .mm-dim { color: #a9a9a3 !important; } .mm-ink { color: #3a3a35 !important; } .mm-sub { color: #8c8c85 !important; margin-top: 0.62rem; } .mobile .mm-sub { margin-top: 0.97rem; } .mm-line { border-top: 1px solid #e4e4e0; } .tag.mm-tag-outline { background: transparent; color: #3a3a35; box-shadow: inset 0 0 0 1px #3a3a35; } /* Every media-item inside MM layouts fills its box */ .mm-fill media-item, .mm-strip media-item, .mm-arc-imgs media-item, .mm-ab-hero media-item, .mm-ab-wide media-item, .mm-ab-imgs media-item, .mm-ev-img media-item, .mm-ww-img media-item, .mm-sh-card media-item { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; } .mm-fill media-item::part(media), .mm-strip media-item::part(media), .mm-arc-imgs media-item::part(media), .mm-ab-hero media-item::part(media), .mm-ab-wide media-item::part(media), .mm-ab-imgs media-item::part(media), .mm-ev-img media-item::part(media), .mm-ww-img media-item::part(media), .mm-sh-card media-item::part(media) { width: 100%; height: 100%; object-fit: cover; } /* Open/close sign on dropdowns */ details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } details[open] > summary .mm-pm { display: inline-block; transform: rotate(45deg); } /* Centred call-to-action box (About, Work with us) */ .mm-box { display: flex; flex-direction: column; align-items: center; text-align: center !important; gap: 1.85rem; padding: 5.54rem 2.46rem 6.15rem; border-top: 1px solid #e4e4e0; border-bottom: 1px solid #e4e4e0; } .mm-box .body { max-width: 32.3rem; } .mobile .mm-box { gap: 2.42rem; padding: 5.82rem 0 6.79rem; } /* Button: white on ink, 44 px high */ .mm-btn { display: inline-flex !important; align-items: center; min-height: 3.38rem; padding: 0 1.54rem; background: #3a3a35; color: #ffffff !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.08rem; font-weight: 500; text-decoration: none !important; } .mm-btn:hover { background: #6f6f69; color: #ffffff !important; } .mobile .mm-btn { min-height: 5.33rem; padding: 0 2.42rem; font-size: 1.70rem; } /* ===================================================== MM HEADER ===================================================== */ .page-content:has(.mm-nav) { padding-top: 0 !important; padding-bottom: 0 !important; } .page:has(.mm-nav) { mix-blend-mode: difference; } .page:has(.mm-nav-plain) { mix-blend-mode: normal !important; } .mm-nav { display: flex; justify-content: space-between; align-items: center; min-height: 4.92rem; background: none; box-shadow: none; clip-path: none; } .mm-nav-logo { flex: none; width: 4.6rem; } .mm-nav-logo media-item { display: block; width: 100%; max-width: 100%; filter: invert(1); } .mm-nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.31rem 2.15rem; filter: invert(1); } .mm-nav-links a, .page .mm-nav-links a.active { font-family: Antonio !important; font-weight: 700 !important; font-size: 1.08rem !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; color: #3a3a35 !important; text-decoration: none !important; } .mm-nav-links a:hover { opacity: 0.6; } .mm-nav-plain .mm-nav-links { filter: none; } .mm-nav-plain .mm-nav-logo media-item { filter: none; } /* Current page faded */ body:has(.mm-ab) .mm-nav-links a[href$="about"], body:has(.mm-sh) .mm-nav-links a[href$="shop"], body:has(.mm-pr) .mm-nav-links a[href$="shop"], body:has(.mm-arc) .mm-nav-links a[href$="archive"], body:has(.mm-ww) .mm-nav-links a[href$="work-with-us"] { opacity: 0.55; } .mobile .mm-nav { min-height: 7.27rem; } .mobile .mm-nav-logo { width: 6.2rem; } .mobile .mm-nav-links a, .mobile .page .mm-nav-links a.active { font-size: 1.70rem !important; } .mobile .mm-nav-links .heading { font-size: 1.70rem !important; letter-spacing: 0.02em !important; } /* ===================================================== MM MOBILE MENU ===================================================== */ .mobile .page-content:has(.mm-menu) { padding-top: 2.5rem !important; } .mm-menu { display: flex; flex-direction: column; margin-top: 0; min-height: calc(100dvh - 5rem); } .mm-menu .mm-nav-links a { color: #3a3a35 !important; } .mm-menu-links { margin-top: 5rem; } .mobile .mm-menu-links { display: flex !important; flex-direction: column; gap: 1.45rem; } .mobile .mm-menu-links .display, .mobile .mm-menu-links .title { font-size: 6rem !important; line-height: 1.1 !important; } .mm-menu-foot { display: flex; gap: 2.5rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid #e4e4e0; } .mm-menu .label { margin-top: 0; } .mobile .mm-nav-plain { margin-top: 0.2rem; } /* ===================================================== MM FOOTER Same on every page. 72 px (desktop) / 48 px (mobile) above it comes from the page's bottom padding. ===================================================== */ .page:has(.mm-footer), .page:has(.mm-footer) .page-layout, .page:has(.mm-footer) .page-content, .page:has(.mm-footer) bodycopy { background: #151513 !important; } .page-content:has(.mm-footer) { padding-top: 0 !important; padding-bottom: 0 !important; } .mobile .page:has(.mm-footer), .mobile .page:has(.mm-footer) .page-layout, .mobile .page:has(.mm-footer) .page-content { min-height: 0 !important; height: auto !important; } .mm-footer { container-type: inline-size; padding: 3.08rem 0 0; text-align: left !important; } .mm-footer, .mm-footer a, .mm-footer .body { color: #edede8 !important; } .mm-footer-top { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; row-gap: 2.46rem; align-items: start; } .mm-footer-logo { grid-column: 1 / span 2; width: 6.3rem; } .mm-footer-logo media-item { display: block; width: 100% !important; margin: 0 !important; filter: invert(1); } .mm-f-follow, .mm-f-info, .mm-f-contact { display: flex; flex-direction: column; gap: 0.38rem; } .mm-f-follow { grid-column: 7 / span 2; } .mm-f-info { grid-column: 9 / span 2; } .mm-f-contact { grid-column: 11 / span 2; overflow-wrap: anywhere; } .mm-footer .label { margin-bottom: 0.23rem; } .mm-footer .label, .mm-footer a.label, .mm-footer-copy, .mm-footer-copy a { color: #8c8c85 !important; } .mm-footer a:hover { color: #8c8c85 !important; } /* MELLOW wordmark: AS Module 3, width 0, fills the footer width */ .mm-footer-mark { display: block !important; width: 100%; height: auto !important; margin: 5.54rem 0 0 !important; padding: 0.1006em 0 0 !important; font-family: "A S Module3 Variable", Antonio, sans-serif !important; font-weight: 400 !important; font-synthesis: none; font-variation-settings: "wdth" 0 !important; -webkit-text-stroke: 0.2px currentColor; font-size: 30.77cqw !important; line-height: 1.0488 !important; letter-spacing: 0 !important; text-indent: -0.025em; text-transform: uppercase; text-align: left !important; white-space: nowrap; color: #edede8 !important; transform: none !important; } /* © row: 40 px from text to footer end, same as space above the top row */ .mm-footer-copy { display: flex !important; justify-content: space-between; align-items: baseline; position: static !important; margin-top: 0 !important; padding: 0.77rem 0 3.08rem !important; } .mobile .mm-footer { padding: 3.39rem 0 0 !important; } .mobile .mm-footer-logo, .mobile .mm-f-contact { display: none !important; } .mobile .mm-footer-top { display: flex !important; flex-wrap: nowrap; column-gap: 4.85rem !important; row-gap: 0 !important; } .mobile .mm-f-follow, .mobile .mm-f-info { gap: 1.21rem !important; } .mobile .mm-footer .label { margin-bottom: 0; } .mobile .mm-footer-mark { margin-top: 6.3rem !important; } .mobile .mm-footer-copy { padding: 1.21rem 0 3.39rem !important; } /* ===================================================== MM HOME ===================================================== */ .page:has(.mm-hero), .page-layout:has(.mm-hero), .page-content:has(.mm-hero), .page:has(.mm-hero) bodycopy { padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .page-content:has(.mm-hero) { padding-bottom: 5.54rem !important; } .mobile .page-content:has(.mm-hero) { padding-bottom: 5.82rem !important; } /* Hero: full screen, title left, text right, centred */ .mm-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; align-items: center; min-height: 100vh !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 2.46rem; padding-right: 2.46rem; } .mm-hero .title { grid-column: 1 / span 6; color: #ffffff; } .mm-hero .body { grid-column: 9 / -1; color: #ffffff; } .mobile .mm-hero { grid-template-columns: minmax(0, 1fr); align-content: end; row-gap: 1.45rem; padding: 0 2.42rem 2.42rem; } .mobile .mm-hero > * { grid-column: 1 / -1 !important; } .mobile .mm-hero .body { position: static !important; } /* Events */ .mm-events { padding-top: 7.38rem; } .mm-group { margin-top: 3.08rem; } .mm-group-head { display: flex; justify-content: space-between; align-items: center; gap: 1.85rem; margin-bottom: 0.62rem; } /* One event row: meta line, line, name */ .mm-row { display: block !important; padding: 1.23rem 0 1.54rem; color: #3a3a35 !important; text-decoration: none !important; } .mm-row-meta { display: flex !important; justify-content: space-between; align-items: baseline; gap: 1.85rem; padding-bottom: 0.77rem; } .mm-row-meta .mm-date { color: #3a3a35; } .mm-row-name { display: block; border-top: 1px solid #e4e4e0; padding-top: 0.38rem; } a.mm-row:hover .mm-row-name, .mm-row-name a:hover { color: #8c8c85 !important; } /* Dates dropdown (Pilates) */ .mm-dates { position: relative; } .mm-dates > summary { color: #3a3a35; } .mm-dates-list { position: absolute; right: 0; top: calc(100% + 0.46rem); z-index: 5; min-width: 13.8rem; padding: 0.46rem 0.77rem; background: #ffffff; border: 1px solid #3a3a35; text-align: right; } .mm-dates-list > * { display: block; padding: 0.31rem 0; border-top: 1px solid #e4e4e0; } .mm-dates-list > *:first-child { border-top: 0; } .mobile .mm-events { padding-top: 5.82rem; } .mobile .mm-group { margin-top: 3.88rem; } .mobile .mm-group-head { margin-bottom: 0.48rem; } .mobile .mm-row { padding: 1.7rem 0 2.91rem; } .mobile .mm-row-meta { padding-bottom: 1.21rem; } .mobile .mm-row-name { padding-top: 0.73rem; } .mobile .mm-dates-list { min-width: 19.4rem; padding: 0.73rem 1.21rem; } /* Cargo page index used as an event list (keeps working with tags) */ .mm-index media-item { width: 100% !important; padding: 1.23rem 0 1.54rem !important; margin: 0 !important; border-top: 0 !important; } .mm-index media-item::part(media), .mm-index media-item img, .mm-index media-item video { display: none !important; } .mm-index .caption { display: flex !important; flex-direction: column-reverse; text-align: left !important; padding: 0 !important; margin: 0 !important; } .mm-index .caption .page-title { display: block; border-top: 1px solid #e4e4e0; padding-top: 0.38rem !important; font-family: Antonio !important; font-weight: 700 !important; font-size: 3.08rem !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; text-transform: uppercase !important; color: #3a3a35 !important; -webkit-text-stroke: 0 !important; font-variation-settings: normal !important; } .mm-index .caption .tags { display: flex !important; align-items: baseline; gap: 0; padding-bottom: 0.77rem; margin: 0 !important; font-size: 0 !important; } .mm-index .caption .tags a { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 0.92rem !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #6f6f69 !important; text-decoration: none !important; } .mm-index .caption .tags a:nth-of-type(2) { color: #a9a9a3 !important; } .mm-index .caption .tags a:nth-of-type(2)::before { content: "\00a0·\00a0"; } .mm-index .caption .tags a:last-of-type { margin-left: auto; color: #3a3a35 !important; position: static !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 0.92rem !important; } .mm-index .caption .tags a:last-of-type::before { content: none; } .mm-index media-item:hover .page-title { color: #8c8c85 !important; } .mobile .mm-index media-item { padding: 1.7rem 0 2.91rem !important; } .mobile .mm-index .caption .page-title { font-size: 3.88rem !important; padding-top: 0.73rem !important; } .mobile .mm-index .caption .tags { padding-bottom: 1.21rem; } .mobile .mm-index .caption .tags a { font-size: 1.45rem !important; } /* Photo strip: scrolls sideways, runs to both page edges */ .mm-strip-wrap { padding-top: 12.31rem; } .mm-strip { display: flex !important; gap: 0.92rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -2.46rem; margin-right: -2.46rem; padding: 0 2.46rem; scroll-padding: 0 2.46rem; scrollbar-width: none; } .mm-strip::-webkit-scrollbar { display: none; } .mm-strip media-item { flex: 0 0 27.69rem; width: 27.69rem !important; height: 34.62rem !important; scroll-snap-align: start; } .mm-strip-link { display: inline-flex !important; gap: 0.62rem; margin-top: 0.92rem; } .mobile .mm-strip-wrap { padding-top: 5.82rem; } .mobile .mm-strip { gap: 0.97rem; margin-left: -2.42rem; margin-right: -2.42rem; padding: 0 2.42rem; scroll-padding: 0 2.42rem; } .mobile .mm-strip media-item { flex: 0 0 33.94rem; width: 33.94rem !important; height: 42.42rem !important; } .mobile .mm-strip-link { min-height: 5.33rem; align-items: center; margin-top: 0.48rem; } /* ===================================================== MM ABOUT ===================================================== */ .page-content:has(.mm-ab) { padding-top: 0 !important; } .mm-ab .body, .mm-ab p { text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; } /* Hero: image with title and text on top */ .mm-ab-hero { position: relative !important; height: 50rem; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; overflow: hidden !important; background: #2a2926; } .mm-ab-hero media-item { position: absolute !important; inset: 0 !important; } .mm-ab-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); pointer-events: none; } .mm-ab-hero-text { position: absolute; z-index: 2; left: 2.46rem; right: 2.46rem; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; align-items: center; } .mm-ab-hero-text .title { grid-column: 1 / span 6; color: #ffffff; } .mm-ab-hero-text .body { grid-column: 9 / -1; color: #ffffff; text-align: left; } /* "We are a community" */ .mm-ab-statement { display: flex; justify-content: center; padding-top: 7.38rem; } .mm-ab-statement .statement { max-width: 75.08rem; } /* Wide image */ .mm-ab-wide { margin-top: 7.38rem; aspect-ratio: 21 / 9; overflow: hidden; } /* Section title (Our story, Safer space): line under it on desktop */ .mm-ab-sec { padding-top: 7.38rem; } .mm-ab-sec-title { padding-bottom: 1.08rem; border-bottom: 1px solid #e4e4e0; } /* Our story rows: text left (4 cols), two images right */ .mm-ab-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; align-items: start; padding-top: 0.46rem; } .mm-ab-row + .mm-ab-row { padding-top: 3.69rem; } .mm-ab-text { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1.08rem; } .mm-ab-imgs { grid-column: 6 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0.92rem; } .mm-ab-imgs > * { aspect-ratio: 4 / 3; overflow: hidden; } /* Made in-house list: dropdown rows */ .mm-ab-list { margin-top: 0.46rem; border-bottom: 1px solid #e4e4e0; } .mm-ab-li { border-top: 1px solid #e4e4e0; } .mm-ab-li > summary { display: flex !important; align-items: center; gap: 0.92rem; min-height: 2.46rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92rem; font-weight: 400; line-height: 1.35; color: #3a3a35; } .mm-ab-li > summary > span:first-child { width: 2.15rem; color: #6f6f69; } .mm-ab-li > summary > span:nth-child(2) { flex: 1; } .mm-ab-li > summary .mm-pm { color: #6f6f69; } .mm-ab-li > .body, .mm-ab-li > p { margin: 0; padding: 0 0 0.92rem 3.08rem; color: #6f6f69; } /* Safer space */ .mm-ab-safer { padding-top: 4.92rem; } .mm-ab-safer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; align-items: start; padding-top: 0.46rem; } .mm-ab-safer-intro { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1.08rem; } .mm-ab-safer-intro .body { color: #6f6f69; } .mm-ab-prs { grid-column: 6 / -1; } .mm-ab-pr { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 0.92rem; align-items: start; padding: 0.62rem 0 1.38rem; border-top: 1px solid #e4e4e0; } .mm-ab-pr:first-child { padding-top: 0; border-top: 0; } .mm-ab-pr > :nth-child(1) { grid-column: 1 / span 1; } .mm-ab-pr > :nth-child(2) { grid-column: 2 / span 2; } .mm-ab-pr > :nth-child(3) { grid-column: 4 / span 5; color: #6f6f69; } /* Box before Safer space */ .mm-ab-cta { padding-top: 7.38rem; } /* Mobile About */ .mobile .mm-ab-hero { height: 67.88rem; } .mobile .mm-ab-hero-text { left: 2.42rem; right: 2.42rem; top: auto; bottom: 2.42rem; transform: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1.45rem; } .mobile .mm-ab-statement { padding-top: 4.85rem; } .mobile .mm-ab-statement .statement { max-width: none; } .mobile .mm-ab-wide { margin-top: 7.76rem; aspect-ratio: 4 / 3; } .mobile .mm-ab-sec { padding-top: 7.76rem; } .mobile .mm-ab-sec-title { padding-bottom: 0; border-bottom: 0; } .mobile .mm-ab-row, .mobile .mm-ab-safer-grid { display: flex; flex-direction: column; padding-top: 2.42rem; } .mobile .mm-ab-row + .mm-ab-row { padding-top: 4.85rem; } /* On mobile the line sits on top of each subheading */ .mobile .mm-ab-text .subheading, .mobile .mm-ab-safer-intro .subheading { border-top: 1px solid #e4e4e0; padding-top: 0.73rem; } .mobile .mm-ab-text, .mobile .mm-ab-safer-intro { gap: 1.7rem; } .mobile .mm-ab-imgs { width: 100%; column-gap: 0.97rem; margin-top: 3.39rem; } .mobile .mm-ab-imgs > * { aspect-ratio: 4 / 5; } /* Second image row shows one wide image on mobile */ .mobile .mm-ab-imgs.mm-one { grid-template-columns: minmax(0, 1fr); margin-top: 4.36rem; } .mobile .mm-ab-imgs.mm-one > * { aspect-ratio: 4 / 3; } .mobile .mm-ab-imgs.mm-one > *:nth-child(n+2) { display: none !important; } .mobile .mm-ab-list { margin-top: 0.24rem; } .mobile .mm-ab-li > summary { min-height: 4.36rem; font-size: 1.45rem; gap: 1.45rem; } .mobile .mm-ab-li > summary > span:first-child { width: 3.39rem; } .mobile .mm-ab-li > .body, .mobile .mm-ab-li > p { padding: 0 0 1.45rem 4.85rem; } .mobile .mm-ab-cta { padding-top: 3.88rem; } .mobile .mm-ab-safer { padding-top: 4.85rem; } .mobile .mm-ab-prs { width: 100%; margin-top: 4.85rem; } .mobile .mm-ab-pr { grid-template-columns: 4.36rem minmax(0, 1fr); column-gap: 0; row-gap: 0.97rem; padding: 0.97rem 0 2.18rem; border-top: 1px solid #e4e4e0; } .mobile .mm-ab-pr:first-child { padding-top: 0.97rem; border-top: 1px solid #e4e4e0; } .mobile .mm-ab-pr > :nth-child(1) { grid-column: 1; grid-row: 1; padding-top: 0.48rem; } .mobile .mm-ab-pr > :nth-child(2) { grid-column: 2; grid-row: 1; } .mobile .mm-ab-pr > :nth-child(3) { grid-column: 2; grid-row: 2; } /* ===================================================== MM ARCHIVE ===================================================== */ .mm-arc { display: flex; flex-direction: column; gap: 4.31rem; } .mm-arc-head { margin-bottom: -0.46rem; } .mm-arc-ev { display: flex; flex-direction: column; } .mm-arc-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; align-items: baseline; padding: 0.46rem 0 2.15rem; border-top: 1px solid #e4e4e0; } .mm-arc-meta > :nth-child(1) { grid-column: 1 / span 3; } .mm-arc-meta > :nth-child(2) { grid-column: 4 / span 3; color: #6f6f69; } .mm-arc-meta > :nth-child(3) { grid-column: 7 / span 4; color: #6f6f69; } .mm-arc-meta > :nth-child(4) { grid-column: 11 / span 2; color: #6f6f69; text-align: right; } /* Photos: fixed height, run to the right page edge */ .mm-arc-imgs { display: flex !important; gap: 0.92rem; height: 36.92rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -2.46rem; padding-right: 2.46rem; scrollbar-width: none; } .mm-arc-imgs::-webkit-scrollbar { display: none; } .mm-arc-imgs media-item { flex: 0 0 auto; width: 29.54rem !important; scroll-snap-align: start; } .mm-arc-imgs media-item:nth-child(4n+2) { width: 46.15rem !important; } .mm-arc-imgs media-item:nth-child(4n+4) { width: 36.92rem !important; } .mobile .mm-arc { gap: 5.82rem; } .mobile .mm-arc-head { margin-bottom: -0.97rem; } .mobile .mm-arc-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.45rem; row-gap: 0.97rem; padding: 0.73rem 0 2.42rem; } .mobile .mm-arc-meta > :nth-child(1) { grid-column: 1; grid-row: 1; } .mobile .mm-arc-meta > :nth-child(2) { grid-column: 2; grid-row: 1; white-space: nowrap; } .mobile .mm-arc-meta > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; } .mobile .mm-arc-meta > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; text-align: left; } .mobile .mm-arc-imgs { height: 43.64rem; gap: 0.97rem; margin-left: -2.42rem; margin-right: -2.42rem; padding: 0 2.42rem; scroll-padding: 0 2.42rem; } .mobile .mm-arc-imgs media-item { width: 34.91rem !important; } .mobile .mm-arc-imgs media-item:nth-child(4n+2) { width: 54.55rem !important; } .mobile .mm-arc-imgs media-item:nth-child(4n+4) { width: 43.64rem !important; } /* ===================================================== MM SHOP ===================================================== */ .mm-sh, .mm-sh * { text-align: left !important; } .mm-sh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; row-gap: 2.46rem; margin-top: 1.85rem; } .mm-sh-card { grid-column: span 3; display: flex; flex-direction: column; gap: 0.62rem; min-width: 0; } .mm-sh-card media-item { aspect-ratio: 4 / 5; height: auto !important; overflow: hidden; background: #f3f3f1; } .mm-sh-line { display: flex !important; justify-content: space-between; align-items: baseline; gap: 0.92rem; } .mm-sh-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mm-sh-grey { color: #6f6f69 !important; } .mobile .mm-sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.97rem; row-gap: 3.39rem; margin-top: 2.42rem; } .mobile .mm-sh-card { grid-column: span 1; gap: 0.73rem; } /* On mobile the price drops under the name */ .mobile .mm-sh-line { flex-direction: column; gap: 0.73rem; } /* ===================================================== MM EVENT + PRODUCT PAGES Image left (4:5, fills the screen height), info 459 px right ===================================================== */ .page-content:has(.mm-ev) { padding-top: 5.85rem !important; } .mm-ev { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 3.69rem; row-gap: 0.92rem; align-items: stretch; } .mm-ev-back { flex: 0 0 100%; justify-self: start; } .mm-ev-img { flex: 0 0 auto; height: calc(100vh - 9.4rem); width: calc((100vh - 9.4rem) * 0.8); max-width: 58%; overflow: hidden; } .mm-ev-info { flex: 0 0 35.31rem; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 3.08rem; } .mm-ev-title { margin-bottom: 1.85rem; } .mm-ev-price { display: flex !important; gap: 0.92rem; margin: -0.92rem 0 1.85rem; } /* Info rows: label left, value right */ .mm-ev-rows { border-bottom: 1px solid #e4e4e0; } .mm-ev-row { display: flex !important; justify-content: space-between; gap: 0.92rem; padding: 0.38rem 0; border-top: 1px solid #e4e4e0; } .mm-ev-row > :first-child { color: #6f6f69; flex: 0 0 auto; } .mm-ev-row > :last-child { text-align: right; } .mm-ev-desc + .mm-ev-desc { margin-top: 0.46rem; } /* Event details dropdown */ .mm-ev-details { margin-top: 1.54rem; border-top: 1px solid #e4e4e0; border-bottom: 1px solid #e4e4e0; } .mm-ev-details > summary { display: flex !important; justify-content: space-between; align-items: center; min-height: 3.08rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92rem; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: #3a3a35; } .mm-ev-details-body { display: flex; flex-direction: column; gap: 0.77rem; padding-bottom: 1.08rem; } /* Full-width button (Sign up, Buy ticket) */ .mm-ev-btn { display: flex !important; justify-content: space-between; align-items: center; min-height: 3.08rem; padding: 0 0.92rem; margin-top: 1.54rem; background: #3a3a35; color: #ffffff !important; text-decoration: none !important; } .mm-ev-btn:hover { background: #6f6f69; color: #ffffff !important; } .mm-ev-free { display: flex !important; align-items: center; min-height: 3.08rem; margin-top: 1.54rem; border-top: 1px solid #e4e4e0; border-bottom: 1px solid #e4e4e0; } .mm-ev-note { color: #6f6f69 !important; margin-top: 0.92rem; } /* Product: size select and buy button */ .mm-pr shop-product { display: block !important; width: 100% !important; margin-top: 1.54rem !important; font-size: 1.08rem !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .mm-pr shop-product::part(dropdown) { width: 100%; height: 3.08rem; margin: 0; padding: 0 0.92rem; border: 1px solid #c4c4be; border-radius: 0; background: #ffffff; color: #3a3a35; line-height: 3.08rem; } .mm-pr shop-product::part(button) { width: 100%; height: 3.08rem; margin-top: 0.62rem; padding: 0 0.92rem; border: 0; border-radius: 0; background: #3a3a35; color: #ffffff; text-align: left; } .mm-pr shop-product::part(button):hover { background: #6f6f69; color: #ffffff; } .mm-pr shop-product select { -webkit-appearance: none !important; appearance: none !important; display: block !important; width: 100% !important; height: 3.08rem !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 0.92rem !important; border: 1px solid #c4c4be !important; border-radius: 0 !important; background: #ffffff !important; color: #3a3a35 !important; font-family: inherit !important; font-size: 1.08rem !important; } .mm-pr shop-product button { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; height: 3.08rem !important; box-sizing: border-box !important; margin: 0.62rem 0 0 !important; padding: 0 0.92rem !important; border: 0 !important; border-radius: 0 !important; background: #3a3a35 !important; color: #ffffff !important; font-family: inherit !important; font-size: 1.08rem !important; text-align: left !important; } .mm-pr shop-product button:disabled, .mm-pr shop-product button[disabled] { background: #e4e4e0 !important; color: #6f6f69 !important; cursor: default !important; } .mm-pr-care { margin-top: 0.92rem; color: #6f6f69 !important; } .mm-pr-link { display: block !important; margin-top: 0.46rem !important; color: #6f6f69 !important; text-decoration: underline !important; text-underline-offset: 0.23rem; } /* Mobile: image on top, info below */ .mobile .page-content:has(.mm-ev) { padding-top: 7.27rem !important; } .mobile .mm-ev { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; } .mobile .mm-ev-back { display: flex !important; align-items: center; min-height: 5.33rem; } .mobile .mm-ev-img { width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 5; } .mobile .mm-ev-info { flex: none; display: block; margin-top: 4.36rem; } .mobile .mm-ev-title { margin-bottom: 2.42rem; } .mobile .mm-ev-price { margin: -1.21rem 0 2.42rem; } .mobile .mm-ev-row { padding: 0.61rem 0; gap: 1.45rem; } .mobile .mm-ev-bottom { margin-top: 3.88rem; } .mobile .mm-ev-details { margin-top: 2.42rem; } .mobile .mm-ev-details > summary { min-height: 5.33rem; font-size: 1.45rem; } .mobile .mm-ev-details-body { gap: 1.21rem; padding-bottom: 1.7rem; } .mobile .mm-ev-btn, .mobile .mm-ev-free { min-height: 5.33rem; margin-top: 3.88rem; padding: 0 1.45rem; } /* Mobile product: size and button smaller, centred, stacked */ .mobile .mm-pr shop-product { width: 26.67rem !important; margin: 3.88rem auto 0 !important; font-size: 1.58rem !important; } .mobile .mm-pr shop-product::part(dropdown), .mobile .mm-pr shop-product::part(button) { height: 4.36rem; line-height: 4.36rem; padding: 0 1.21rem; } .mobile .mm-pr shop-product::part(button) { margin-top: 0.97rem; text-align: center; } .mobile .mm-pr shop-product select, .mobile .mm-pr shop-product button { height: 4.36rem !important; padding: 0 1.21rem !important; font-size: 1.58rem !important; } .mobile .mm-pr shop-product button { margin-top: 0.97rem !important; justify-content: center !important; text-align: center !important; } .mobile .mm-pr-care { margin-top: 3.88rem; } /* ===================================================== MM WORK WITH US ===================================================== */ .mm-ww-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; row-gap: 4.31rem; margin-top: 1.85rem; } .mm-ww-col { grid-column: span 6; display: flex; flex-direction: column; gap: 0.92rem; } .mm-ww-img { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 0.92rem; } .mm-ww-col .body { max-width: 35.38rem; } .mm-ww-grey { color: #6f6f69 !important; } .mm-ww-cta { padding-top: 9.23rem; } .mobile .mm-ww-pair { display: flex; flex-direction: column; gap: 0; margin-top: 2.42rem; } .mobile .mm-ww-col { gap: 1.45rem; padding-bottom: 4.85rem; border-bottom: 1px solid #e4e4e0; } .mobile .mm-ww-col + .mm-ww-col { padding-top: 4.85rem; padding-bottom: 0; border-bottom: 0; } .mobile .mm-ww-img { margin-bottom: 1.45rem; } .mobile .mm-ww-cta { padding-top: 7.76rem; } /* ===================================================== MM SHIPPING AND RETURNS ===================================================== */ .mm-shp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; margin-top: 3.69rem; } .mm-shp-item { grid-column: span 6; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0.92rem; row-gap: 0.77rem; align-content: start; padding: 0.62rem 0 3.08rem; border-top: 1px solid #e4e4e0; } .mm-shp-item > :nth-child(1) { grid-column: 1 / span 1; } .mm-shp-item > :nth-child(n+2) { grid-column: 2 / span 4; } .mobile .mm-shp-grid { display: block; margin-top: 4.85rem; } .mobile .mm-shp-item { grid-template-columns: 4.36rem minmax(0, 1fr); column-gap: 0; row-gap: 0.97rem; padding: 0.73rem 0 3.39rem; } .mobile .mm-shp-item > :nth-child(1) { grid-column: 1; grid-row: 1; padding-top: 0.48rem; } .mobile .mm-shp-item > :nth-child(n+2) { grid-column: 2; } /* ===================================================== MM ORDER CONFIRMED ===================================================== */ .mm-oc { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0.92rem; text-align: left !important; } .mm-oc-title { grid-column: 1 / span 6; } .mm-oc-body { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 3.08rem; } .mm-oc .lead, .mm-oc .body, .mm-oc .label { display: block; } .mm-oc .lead { margin-bottom: 0.92rem; } .mm-oc-rows { border-bottom: 1px solid #e4e4e0; } .mm-oc-row { display: flex !important; justify-content: space-between; gap: 0.92rem; padding: 0.38rem 0; border-top: 1px solid #e4e4e0; } .mm-oc-row span:first-child { color: #6f6f69; flex: 0 0 auto; } .mm-oc-row span:last-child { text-align: right; } .mm-oc-sign { display: block; margin-top: 0.92rem; color: #6f6f69; } .mobile .mm-oc { display: flex !important; flex-direction: column; gap: 4.85rem; } .mobile .mm-oc-body { gap: 4.85rem; } .mobile .mm-oc .lead { margin-bottom: 1.45rem; } .mobile .mm-oc-row { padding: 0.61rem 0; gap: 1.45rem; } /* ===== MM FIX: FULL WIDTH + SAFER SPACE SPACING ===== */ .page-content > bodycopy { align-self: stretch; width: 100%; } .mm-ab-safer { padding-top: 7.38rem; } .mobile .mm-ab-safer { padding-top: 7.76rem; }/* ===== MM FIX: SIDEWAYS GALLERIES ===== */ .mm-strip, .mm-arc-imgs { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; } .mm-strip media-item, .mm-arc-imgs media-item { flex-shrink: 0 !important; overflow: hidden; } .mm-arc-imgs media-item { height: 36.92rem !important; } .mobile .mm-arc-imgs media-item { height: 43.64rem !important; } .mm-strip media-item { height: 34.62rem !important; } .mobile .mm-strip media-item { height: 42.42rem !important; }/* ===== MM FIX: PRODUCT BUY BOX ===== */ .mm-ev-bottom > .label { margin-bottom: 0.46rem; } .mm-pr shop-product { max-width: none !important; width: 100% !important; margin: 1.54rem 0 0 !important; } .mm-pr shop-product::part(dropdown), .mm-pr shop-product::part(button) { box-sizing: border-box; width: 100%; height: 3.08rem; margin: 0; padding: 0 0.92rem; border-radius: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.08rem; } .mm-pr shop-product::part(dropdown) { line-height: normal; border: 1px solid #c4c4be; background-color: #ffffff; background-position: right 0.92rem center; color: #3a3a35; } .mm-pr shop-product::part(button) { display: flex; align-items: center; line-height: 1; margin-top: 0.62rem; border: 0; background: #3a3a35; color: #ffffff; } .mm-pr shop-product::part(button):hover { background: #6f6f69; color: #ffffff; } .mm-pr shop-product::part(button):disabled { background: #e4e4e0; color: #6f6f69; cursor: default; } .mobile .mm-pr shop-product { width: 26.67rem !important; margin: 3.88rem auto 0 !important; } .mobile .mm-pr shop-product::part(dropdown), .mobile .mm-pr shop-product::part(button) { height: 4.36rem; padding: 0 1.21rem; font-size: 1.58rem; } .mobile .mm-pr shop-product::part(button) { margin-top: 0.97rem; justify-content: center; }/* ===== MM FIX: SIZING DROPDOWN ===== */ .mm-ev-bottom > .mm-ev-details:first-child { margin-top: 0; }/* ===== MM FIX: STACKED DROPDOWNS ===== */ .mm-ev-details + .mm-ev-details { margin-top: 0 !important; border-top: 0; }/* ===== MM FIX: MOBILE EVENT/PRODUCT SPACING ===== */ .mobile .mm-ev-bottom { margin-top: 5.82rem; } .mobile .mm-ev-bottom > .mm-ev-desc + .mm-ev-details { margin-top: 1.94rem; .mobile .title { font-size: 3.98rem; line-height: 1.28; } /* ===== MM FIX: SPACE BEFORE SHIPPING LINK ===== */ .mm-pr-link { margin-top: 1.54rem !important; } .mobile .mm-pr-link { margin-top: 2.42rem !important; }/* ===== MM FIX: SMALLER MOBILE LOGO ===== */ .mobile .mm-nav-logo { width: 4.6rem !important; }.title { --text-style: "Title"; font-size: 3.03rem; font-weight: 400; color: #3a3a35; font-family: "A S Module3 Variable"; font-style: normal; font-variation-settings: 'wdth' 30; -webkit-text-stroke: 0.2px currentColor; line-height: 1.28; letter-spacing: 0; text-transform: uppercase; display: block; } .mobile .title { font-size: 3.40rem; line-height: 1.28; } .title a { color: #3a3a35; text-decoration: none; } .mobile .title a { } .title a:hover { color: #8c8c85; } .mobile .title a:hover { color: #8c8c85; }.highlight { --text-style: "Highlight"; font-size: 3.53rem; font-weight: 400; color: #55554f; font-family: "A S Module3 Variable"; font-style: normal; font-variation-settings: 'wdth' 30; -webkit-text-stroke: 0.2px currentColor; line-height: 1.40; letter-spacing: 0; text-transform: uppercase; display: block; } .mobile .highlight { font-size: 2.98rem; } .highlight a { color: #55554f; text-decoration: none; } .mobile .highlight a { } .highlight a:hover { color: #8c8c85; } .mobile .highlight a:hover { color: #8c8c85; }} .mm-guard {} /* ===== MM FIX: TITLE + HIGHLIGHT BACKUP ===== */ .title { font-family: "A S Module3 Variable", Antonio, sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-variation-settings: 'wdth' 30 !important; -webkit-text-stroke: 0.2px currentColor; font-size: 3.03rem !important; line-height: 1.28 !important; letter-spacing: 0 !important; text-transform: uppercase !important; display: block; } .mobile .title { font-size: 3.40rem !important; } .highlight { font-family: "A S Module3 Variable", Antonio, sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-variation-settings: 'wdth' 30 !important; -webkit-text-stroke: 0.2px currentColor; font-size: 3.53rem !important; line-height: 1.40 !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: #55554f; display: block; } .mobile .highlight { font-size: 2.98rem !important; }/* ===== MM FIX: LOGO SIZE ===== */ .mm-nav-logo { width: 5.38rem !important; flex: none; } .mobile .mm-nav-logo { width: 4.85rem !important; } .mm-nav-logo media-item { width: 100% !important; max-width: 100% !important; }/* ===== MM FIX: SMALLER YEAR + TYPE ON MOBILE ARCHIVE ===== */ .mobile .mm-arc-meta > :nth-child(2) { font-size: 1.21rem !important; }} .mm-guard {} /* ===== MM FIX: SPACE BEFORE SHIPPING LINK (v2) ===== */ .mm-ev .mm-pr-link { display: block !important; margin-top: 1.54rem !important; } .mobile .mm-ev .mm-pr-link { margin-top: 2.42rem !important; }} .mm-guard {} /* ===== MM FIX: SHIPPING LINK INSIDE DROPDOWN ===== */ .mm-ev-details-body .mm-pr-link { display: block !important; margin-top: 0 !important; }} .mm-guard {} /* ===== MM FIX: FREE BOX JOINS THE DROPDOWN STACK ===== */ .mm-ev-details + .mm-ev-free { margin-top: 0 !important; border-top: 0 !important; }} .mm-guard {} /* ===== MM FIX: CART ICON IN HEADER ===== */ .mm-nav-links { align-items: center; } .mm-nav-links .mm-cart { display: inline-flex !important; align-items: center; gap: 0.15em; line-height: 1; } .mm-nav-links .mm-cart text-icon { font-size: 1.38rem; line-height: 1; } .mobile .mm-nav-links .mm-cart text-icon { font-size: 2.18rem; }} .mm-guard {} /* ===== MM FIX: CART ICON IN HEADER (v2) ===== */ .mm-nav-links { align-items: center !important; } .mm-nav-links .mm-cart { display: inline-flex !important; align-items: center; gap: 0.2em; line-height: 1 !important; height: 1.23rem; } .mm-nav-links .mm-cart text-icon { display: block !important; position: static !important; top: auto !important; vertical-align: middle !important; margin: 0 !important; width: 1.23rem !important; height: 1.23rem !important; font-size: 1.23rem !important; line-height: 1 !important; } .mm-nav-links .mm-cart text-icon svg { display: block; width: 100% !important; height: 100% !important; } .mobile .mm-nav-links .mm-cart, .mobile .mm-nav-links .mm-cart text-icon { width: auto; height: 1.94rem !important; } .mobile .mm-nav-links .mm-cart text-icon { width: 1.94rem !important; font-size: 1.94rem !important; }} .mm-guard {} /* ===== MM FIX: ARCHIVE MONO TEXTS RIGHT ON MOBILE ===== */ .mobile .mm-arc-meta > :nth-child(2), .mobile .mm-arc-meta > :nth-child(4) { justify-self: end !important; text-align: right !important; margin-right: 0 !important; padding-right: 0 !important; }} .mm-guard {} /* ===== MM FIX: ARCHIVE MOBILE META (v3) ===== */ .mm-arc-yt > span { display: inline; } .mobile .mm-arc-meta { display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 0 !important; row-gap: 0 !important; border-top: 0 !important; padding-top: 0 !important; } .mobile .mm-arc-meta > .mm-arc-yt { display: contents !important; } .mobile .mm-arc-year { order: 1; } .mobile .mm-arc-dot { order: 2; display: inline !important; } .mobile .mm-arc-type { order: 3; } .mobile .mm-arc-meta > :nth-child(4) { order: 4; margin-left: auto !important; padding-left: 0.97rem !important; text-align: right !important; } .mobile .mm-arc-meta > :nth-child(1) { order: 5; flex: 0 0 100%; margin-top: 0.97rem; padding-top: 0.73rem; border-top: 1px solid #e4e4e0; } .mobile .mm-arc-meta > :nth-child(3) { order: 6; flex: 0 0 100%; margin-top: 0.97rem; } .mobile .mm-arc-year, .mobile .mm-arc-dot, .mobile .mm-arc-type, .mobile .mm-arc-meta > :nth-child(4) { font-size: 1.21rem !important; color: #6f6f69 !important; }} .mm-guard {} /* ===== MM FIX: ARCHIVE MOBILE SUBTITLE + DOT SPACING ===== */ .mobile .mm-arc-head .mm-sub { font-size: 1.21rem !important; margin-top: 0.36rem !important; } .mobile .mm-arc-dot { padding: 0 0.5em; }} .mm-guard {} /* ===== MM FIX: HOME DATES ON ONE LINE ===== */ .mm-row-meta .mm-date { flex: none !important; white-space: nowrap !important; } .mm-row-meta > span:first-child { min-width: 0; }} .mm-guard {} /* ===== MM FIX: ABOUT LIST TEXT LEFT ON MOBILE ===== */ .mobile .mm-ab-li > .body, .mobile .mm-ab-li > p { padding-left: 0 !important; text-align: left !important; }} .mm-guard {} /* ===== MM FIX: ABOUT HERO VIDEO COVERS THE AREA (v2) ===== */ .mm-ab-hero media-item { position: absolute !important; inset: auto !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: max(100%, calc(50rem * 16 / 9)) !important; height: auto !important; max-width: none !important; } .mobile .mm-ab-hero media-item { width: max(100%, calc(67.88rem * 16 / 9)) !important; }} .mm-guard {} /* ===== MM FIX: SPACE BETWEEN LINE AND SAFER SPACE TABLE (DESKTOP) ===== */ @media (min-width: 768px) { .mm-ab-safer-grid { padding-top: 1.85rem !important; } }} .mm-guard {} /* ===== MM FIX: WHO WE ARE BLOCK (ABOUT) ===== */ .mm-ab-weare { display: flex !important; flex-direction: column; align-items: center; text-align: center !important; gap: 1.85rem; padding-top: 7.38rem; } .mm-ab-weare .highlight { max-width: 63rem; text-align: center !important; } .mm-ab-weare .body { max-width: 32.3rem; color: #6f6f69; text-align: center !important; text-align-last: center !important; } .mobile .mm-ab-weare { gap: 2.42rem; padding-top: 4.85rem; }} .mm-guard {} /* ===== MM FIX: WHO WE ARE MOBILE SPACING ===== */ .mobile .mm-ab-weare { padding-top: 9.7rem !important; padding-bottom: 1.94rem !important; }} .mm-guard {} /* ===== MM FIX: FOOTER LOGO WHITE ===== */ .mm-footer-logo media-item { filter: brightness(0) invert(1) !important; }} .mm-guard {} } .mm-guard {} /* ===== MM FIX: BACK TO TOP ARROW BOX (v2) ===== */ .mm-footer .mm-footer-copy { align-items: center !important; } .mm-footer .mm-footer-copy a.mm-top { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; flex: none !important; width: 3.38rem !important; height: 3.38rem !important; padding: 0 !important; border: 1px solid #8c8c85 !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 1.54rem !important; line-height: 1 !important; letter-spacing: 0 !important; color: #8c8c85 !important; text-decoration: none !important; } .mm-footer .mm-footer-copy a.mm-top:hover { border-color: #ededE8 !important; color: #ededE8 !important; } .mobile .mm-footer .mm-footer-copy a.mm-top { width: 3.88rem !important; height: 3.88rem !important; font-size: 1.94rem !important; }} .mm-guard {} /* ===== MM FIX: MOBILE FOOTER, MORE SPACE ABOVE ARROW ===== */ .mobile .mm-footer-copy { padding-top: 2.18rem !important; }} .mm-guard {} } .mm-guard {} /* ===== MM FIX: MORE SIDE PADDING IN BUTTONS ===== */ .mm-ev-btn { padding: 0 1.54rem !important; } .mobile .mm-ev-btn { padding: 0 2.42rem !important; }} .mm-guard {} /* ===== MM FIX: CART TEXT, ONLY ON SHOP AND PRODUCT PAGES ===== */ .mm-nav-links .mm-cart { display: none !important; } body:has(.mm-sh) .mm-nav-links .mm-cart, body:has(.mm-pr) .mm-nav-links .mm-cart { display: inline-flex !important; }} .mm-guard {} /* ===== MM FIX: DESKTOP HEADER LINK SIZE ===== */ .mm-nav .mm-nav-links a, .mm-nav .mm-nav-links a.heading, .page .mm-nav .mm-nav-links a.active { font-size: 1.38rem !important; letter-spacing: 0.02em !important; } .mm-nav .mm-nav-links { gap: 0.31rem 2.46rem !important; } .mobile .mm-nav .mm-nav-links a, .mobile .mm-nav .mm-nav-links a.heading { font-size: 1.70rem !important; }} .mm-guard {} /* ===== MM FIX: MORE SPACE BETWEEN EVENT GROUPS ===== */ .mm-group + .mm-group { margin-top: 4.92rem !important; } .mobile .mm-group + .mm-group { margin-top: 5.82rem !important; }} .mm-guard {} /* ===== MM FIX: HOME ROW INFO ON ONE LINE (MOBILE) ===== */ .mobile .mm-row-meta, .mobile .mm-row-meta .mm-date { font-size: 1.21rem !important; } .mobile .mm-row-meta > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }} .mm-guard {} /* ===== MM FIX: INACTIVE BUTTON (SIGN UP NOT OPEN YET) ===== */ .mm-ev-btn.mm-ev-btn-off, .mm-ev-btn.mm-ev-btn-off:hover { background: #e4e4e0 !important; color: #6f6f69 !important; cursor: default; pointer-events: none; }} .mm-guard {} /* ===== MM FIX: LIGHTER BODY TEXT ON MOBILE ===== */ .mobile .body { font-size: 1.58rem !important; font-weight: 400 !important; line-height: 1.4 !important; }} .mm-guard {} /* ===== MM FIX: TIGHTER WORD SPACING ===== */ .body, .mm-ab p { word-spacing: -0.04em; } .mm-ab .body, .mm-ab p { -webkit-hyphens: auto !important; hyphens: auto !important; hyphenate-limit-chars: 6 3 2; }} .mm-guard {} /* ===== MM FIX: SHOP GROUPS ===== */ .mm-sh-group { margin-top: 2.46rem; } .mm-sh-group + .mm-sh-group { margin-top: 5.54rem; } .mm-sh-group .mm-group-head { margin-bottom: 1.23rem; } .mobile .mm-sh-group { margin-top: 2.91rem; } .mobile .mm-sh-group + .mm-sh-group { margin-top: 5.82rem; } .mobile .mm-sh-group .mm-group-head { margin-bottom: 1.45rem; }} .mm-guard {} /* ===== MM FIX: SHOP NAMES WRAP ON MOBILE ===== */ .mobile .mm-sh-line { min-width: 0; width: 100%; } .mobile .mm-sh-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; min-width: 0; } .mobile .mm-sh-grid { column-gap: 1.45rem !important; }} .mm-guard {} /* ===== MM FIX: SOLD OUT CLOSER TO PRODUCT NAME ===== */ .mm-sh-card > .mm-sh-grey { margin-top: -0.31rem !important; } .mobile .mm-sh-card > .mm-sh-grey { margin-top: -0.48rem !important; }} .mm-guard {} /* ===== MM FIX: SOLD OUT HOVER ON SHOP IMAGES (v3) ===== */ .mm-sh .mm-sh-group + .mm-sh-group .mm-sh-card media-item { position: relative !important; } .mm-sh .mm-sh-group + .mm-sh-group .mm-sh-card media-item::after { content: "Sold out" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(21, 21, 19, 0.45) !important; color: #ffffff !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 1.15rem !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 0; transition: opacity 0.2s ease; pointer-events: none !important; } .mm-sh .mm-sh-group + .mm-sh-group .mm-sh-card:hover media-item::after { opacity: 1 !important; } /* Desktop: hide "Sold out" under the name, the hover shows it */ body:not(.mobile) .mm-sh .mm-sh-group + .mm-sh-group .mm-sh-card > .mm-sh-grey { display: none !important; } /* Mobile: no hover, keep the text under the name */ body.mobile .mm-sh .mm-sh-group + .mm-sh-group .mm-sh-card media-item::after { display: none !important; }} .mm-guard {} /* ===== MM FIX: SOLD OUT OVERLAY ALWAYS VISIBLE ON MOBILE ===== */ body.mobile .mm-sh .mm-sh-group + .mm-sh-group .mm-sh-card media-item::after { display: flex !important; opacity: 1 !important; font-size: 1.45rem !important; } body.mobile .mm-sh .mm-sh-group + .mm-sh-group .mm-sh-card > .mm-sh-grey { display: none !important; }} .mm-guard {} } .mm-guard {} /* ===== MM FIX: SHIPPING TEXTS A BIT LOWER FROM THE LINES ===== */ .mm-shp-item { padding-top: 0.92rem !important; } .mobile .mm-shp-item { padding-top: 1.21rem !important; }} .mm-guard {} /* ===== MM FIX: NO SOLD OUT OVERLAY OUTSIDE THE SOLD OUT GROUP ===== */ html body .mm-sh .mm-sh-group:not(.mm-sh-soldout) .mm-sh-card.mm-sh-card media-item::after { content: none !important; display: none !important; } html body .mm-sh .mm-sh-group:not(.mm-sh-soldout) .mm-sh-card.mm-sh-card > .mm-sh-grey.mm-sh-grey { display: block !important; }

Events

Ongoing

Run · Free · Until Nov 11Wed 18:00Base Training Wednesdays Strength · Spots available · From Nov 6Fri 17:00Fellow Arc

Upcoming2 events

Run · Full · Waitlist openNov 4Porridge Run Track · Sign up opens Nov 4multiple datesMidweek Minutes

Event Archive →

} .mm-guard {} /* ===== MM FIX: LOGO OPTICALLY ALIGNED WITH THE MENU ===== */ .mm-nav .mm-nav-logo { transform: translateY(0.23rem); } .mobile .mm-nav .mm-nav-logo { transform: translateY(0.24rem); }