/* ========================================================================== assets/css/base.css ========================================================================== */ /* ========================================================================================================== MUUSHO — base.css FOUNDATION The design system every section builds on (catalog with copy-paste snippets: BUILD/COMPONENTS.md). 1 tokens 2 reset 3 typography 4 layout 5 components (.btn .chip .tag .card .kicker .section-head .sticker-ring .milk-divider .cowprint .cow-spot .icon .social-links .tricolor .modal) 6 header 7 mobile menu 8 footer 9 preloader 10 cursor 11 milk progress glass 12 reveal 13 shared DOM contracts 14 a11y helpers 15 reduced motion 16 print Rules: mobile-first, no horizontal overflow at any width, content is never hidden unless core.js runs. ========================================================================================================== */ /* ---------------------------------------------------------------------------------------------- 1. tokens */ :root { /* brand colour — sampled from the real logo and labels */ --milk: #FFFDF7; --cream: #FFF5E1; --cream-2: #FBE9C6; --ink: #181816; --ink-soft: #3A3833; --muted: #6B665C; --meadow: #55B031; /* logo green: fills & big shapes, NOT small text on light bg */ --meadow-300: #A8DC86; --meadow-700: #2E7A1A; /* text-safe green */ --meadow-900: #173F0D; --sun: #FBEB0C; /* fills / highlights only */ --sun-600: #F4C500; --barn: #D7262E; --apricot: #F28C28; --sky: #BDE6FA; --sky-600: #2B9ED8; --navy: #0F2D63; --tarragon: #3C7A2B; --burgundy: #7B1E2C; --am-red: #D90012; --am-blue: #0033A0; --am-orange: #F2A800; --glass-white: #FFFFFF; --milk-shade: #E4EDF2; /* blue-grey shading on milk surfaces */ /* product tints (showcase / cards) */ --tint-matsun: #FFF1DE; --tint-narine: #E3F4FD; --tint-strained: #FFF7CC; --tint-sour-cream: #FFE3DE; --tint-armenian-cream: #FFF4C9; --tint-tahn: #DCEBFF; --tint-meadow: #E9F6DF; /* semantic */ --bg: var(--milk); --text: var(--ink); --text-muted: var(--muted); --link: var(--meadow-700); --focus-ring: #1C5FD4; --line: rgb(24 24 22 / 0.12); --kicker-color: var(--meadow-700); /* type */ --font-display: 'Fredoka', 'Nunito', 'Noto Sans Armenian', ui-rounded, system-ui, sans-serif; --font-body: 'Nunito', 'Noto Sans Armenian', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-brand: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif; /* "MUUSHO" wordmark, counters */ --fw-display: 700; --fw-display-2: 600; --fw-btn: 600; --fs-hero: clamp(2.9rem, 7.2vw, 7.25rem); --fs-h2: clamp(2.3rem, 5.2vw, 4.75rem); --fs-h3: clamp(1.35rem, 2.2vw, 2rem); --fs-lead: clamp(1.08rem, 1.45vw, 1.35rem); --fs-statement: clamp(1.8rem, 3.6vw, 3.4rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-xs: 0.8125rem; --ls-display: -0.02em; /* space & layout */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 6rem; --gutter: clamp(16px, 4vw, 48px); --container: 1320px; --section-pad: clamp(88px, 12vw, 180px); --header-h: 64px; /* shape */ --r-s: 14px; --r-m: 24px; --r-l: 40px; --r-xl: 64px; --r-card: 32px; --r-pill: 999px; --bw: 3px; --bw-s: 2px; --outline: var(--bw) solid var(--ink); --shadow-sticker: 5px 5px 0 var(--ink); --shadow-sticker-s: 3px 3px 0 var(--ink); --shadow-sticker-l: 8px 8px 0 var(--ink); --shadow-soft: 0 24px 48px -24px rgb(24 24 22 / 0.35); --drop-product: drop-shadow(0 30px 40px rgb(24 24 22 / 0.22)); /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); --dur-fast: 0.18s; --dur: 0.35s; --dur-slow: 0.8s; /* z-index scale (SPEC §4) */ --z-landscape: 0; --z-content: 1; --z-raised: 2; --z-divider: 4; --z-flood: 5; --z-bottle: 6; --z-progress: 40; --z-header: 50; --z-menu: 60; --z-modal: 70; --z-cursor: 80; --z-preloader: 90; --z-skip: 100; /* patterns (generated, organic Holstein spots) */ --cow-ink-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%23181816' d='M159 113C156 119 134 122 121 119C109 117 91 101 83 99C75 96 77 101 73 102C68 104 60 111 55 110C50 109 47 101 41 97C36 93 31 91 24 87C18 82 5 75 3 69C1 63 9 56 13 52C17 47 24 45 28 41C33 37 34 27 40 25C46 23 58 25 64 30C71 34 76 46 80 52C83 58 81 61 85 63C89 66 94 64 103 67C112 71 131 75 140 83C149 90 162 107 159 113ZM459 113C456 119 434 122 421 119C409 117 391 101 383 99C375 96 377 101 373 102C368 104 360 111 355 110C350 109 347 101 341 97C336 93 331 91 324 87C318 82 305 75 303 69C301 63 309 56 313 52C317 47 324 45 328 41C333 37 334 27 340 25C346 23 358 25 364 30C371 34 376 46 380 52C383 58 381 61 385 63C389 66 394 64 403 67C412 71 431 75 440 83C449 90 462 107 459 113ZM264 30C261 36 250 41 246 46C242 50 243 52 240 55C237 58 234 60 230 62C227 63 223 61 219 63C215 64 213 69 208 71C204 73 196 76 192 75C188 74 187 69 184 66C182 63 179 60 176 57C174 54 169 50 168 45C168 41 172 35 176 32C180 29 187 26 193 26C199 26 206 30 209 32C213 34 212 39 215 37C219 36 224 25 232 21C240 16 258 10 263 11C269 13 267 24 264 30ZM264 330C261 336 250 341 246 346C242 350 243 352 240 355C237 358 234 360 230 362C227 363 223 361 219 363C215 364 213 369 208 371C204 373 196 376 192 375C188 374 187 369 184 366C182 363 179 360 176 357C174 354 169 350 168 345C168 341 172 335 176 332C180 329 187 326 193 326C199 326 206 330 209 332C213 334 212 339 215 337C219 336 224 325 232 321C240 316 258 310 263 311C269 313 267 324 264 330ZM-23 252C-27 256 -37 257 -45 255C-52 252 -60 238 -66 235C-73 231 -77 235 -83 233C-89 231 -101 229 -103 224C-105 218 -98 206 -96 200C-95 195 -89 196 -93 189C-97 182 -115 171 -120 160C-125 149 -129 130 -125 123C-121 117 -106 116 -97 120C-87 125 -75 139 -69 149C-63 158 -63 173 -60 178C-57 184 -58 181 -51 183C-45 184 -29 183 -22 188C-15 193 -11 204 -10 211C-9 218 -15 223 -17 230C-19 237 -18 248 -23 252ZM276 252C272 256 262 257 254 255C247 252 239 238 233 235C226 231 222 235 216 233C210 231 198 229 196 224C194 218 201 206 203 200C204 195 210 196 206 189C202 182 184 171 179 160C174 149 170 130 174 123C178 117 193 116 202 120C212 125 224 139 230 149C236 158 236 173 239 178C242 184 241 181 248 183C254 184 270 183 277 188C284 193 289 204 289 211C290 218 285 223 282 230C280 237 281 248 276 252ZM128 234C131 238 133 247 130 250C127 253 115 253 109 251C103 250 96 244 92 241C88 238 88 234 86 234C83 233 82 237 77 239C72 240 60 244 54 243C49 242 44 235 44 231C43 227 50 222 53 218C55 215 56 211 59 209C62 207 66 204 70 204C74 204 79 209 83 209C87 209 88 207 92 206C95 205 103 202 105 203C108 205 108 211 109 214C110 218 108 219 111 223C114 226 125 229 128 234ZM165 140C165 141 165 143 164 145C163 146 161 147 159 148C157 148 155 147 153 147C152 148 151 148 150 148C148 149 146 150 145 150C143 150 141 149 140 148C138 147 138 145 137 144C136 143 135 141 135 140C135 138 136 136 137 135C138 134 140 133 141 133C143 132 143 130 145 130C146 129 148 128 150 128C151 128 153 130 154 130C155 131 156 132 158 133C159 134 161 134 162 135C163 136 164 138 165 140ZM-0 102C0 104 -0 106 -0 108C-0 109 -0 111 -0 113C-0 114 -0 117 -2 118C-3 119 -6 120 -7 121C-9 121 -11 120 -12 121C-14 121 -15 123 -17 124C-19 124 -22 125 -24 125C-26 125 -28 123 -28 122C-29 120 -29 118 -29 116C-29 114 -27 112 -26 111C-25 109 -24 108 -23 107C-21 105 -21 104 -20 103C-18 101 -17 100 -15 99C-13 99 -11 98 -9 98C-8 98 -5 98 -4 99C-2 99 -1 101 -0 102ZM299 102C300 104 299 106 299 108C299 109 299 111 299 113C299 114 299 117 298 118C296 119 294 120 292 121C290 121 288 120 287 121C285 121 284 123 282 124C280 124 277 125 275 125C273 125 272 123 271 122C270 120 270 118 270 116C270 114 272 112 273 111C274 109 275 108 277 107C278 105 278 104 279 103C281 101 282 100 284 99C286 99 288 98 290 98C292 98 294 98 295 99C297 99 298 101 299 102ZM185 278C184 279 184 281 184 282C183 282 183 284 181 284C180 285 178 284 177 284C176 283 175 282 174 282C173 281 172 281 171 280C170 280 168 280 167 279C166 278 165 277 164 276C164 275 163 273 164 272C165 271 166 270 167 270C169 269 170 269 171 269C172 268 173 268 174 268C175 268 176 269 178 269C179 269 180 269 181 270C182 270 184 271 185 272C186 273 186 274 186 275C186 276 185 277 185 278Z'/%3E%3C/svg%3E"); --cow-milk-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%23FFFDF7' d='M159 113C156 119 134 122 121 119C109 117 91 101 83 99C75 96 77 101 73 102C68 104 60 111 55 110C50 109 47 101 41 97C36 93 31 91 24 87C18 82 5 75 3 69C1 63 9 56 13 52C17 47 24 45 28 41C33 37 34 27 40 25C46 23 58 25 64 30C71 34 76 46 80 52C83 58 81 61 85 63C89 66 94 64 103 67C112 71 131 75 140 83C149 90 162 107 159 113ZM459 113C456 119 434 122 421 119C409 117 391 101 383 99C375 96 377 101 373 102C368 104 360 111 355 110C350 109 347 101 341 97C336 93 331 91 324 87C318 82 305 75 303 69C301 63 309 56 313 52C317 47 324 45 328 41C333 37 334 27 340 25C346 23 358 25 364 30C371 34 376 46 380 52C383 58 381 61 385 63C389 66 394 64 403 67C412 71 431 75 440 83C449 90 462 107 459 113ZM264 30C261 36 250 41 246 46C242 50 243 52 240 55C237 58 234 60 230 62C227 63 223 61 219 63C215 64 213 69 208 71C204 73 196 76 192 75C188 74 187 69 184 66C182 63 179 60 176 57C174 54 169 50 168 45C168 41 172 35 176 32C180 29 187 26 193 26C199 26 206 30 209 32C213 34 212 39 215 37C219 36 224 25 232 21C240 16 258 10 263 11C269 13 267 24 264 30ZM264 330C261 336 250 341 246 346C242 350 243 352 240 355C237 358 234 360 230 362C227 363 223 361 219 363C215 364 213 369 208 371C204 373 196 376 192 375C188 374 187 369 184 366C182 363 179 360 176 357C174 354 169 350 168 345C168 341 172 335 176 332C180 329 187 326 193 326C199 326 206 330 209 332C213 334 212 339 215 337C219 336 224 325 232 321C240 316 258 310 263 311C269 313 267 324 264 330ZM-23 252C-27 256 -37 257 -45 255C-52 252 -60 238 -66 235C-73 231 -77 235 -83 233C-89 231 -101 229 -103 224C-105 218 -98 206 -96 200C-95 195 -89 196 -93 189C-97 182 -115 171 -120 160C-125 149 -129 130 -125 123C-121 117 -106 116 -97 120C-87 125 -75 139 -69 149C-63 158 -63 173 -60 178C-57 184 -58 181 -51 183C-45 184 -29 183 -22 188C-15 193 -11 204 -10 211C-9 218 -15 223 -17 230C-19 237 -18 248 -23 252ZM276 252C272 256 262 257 254 255C247 252 239 238 233 235C226 231 222 235 216 233C210 231 198 229 196 224C194 218 201 206 203 200C204 195 210 196 206 189C202 182 184 171 179 160C174 149 170 130 174 123C178 117 193 116 202 120C212 125 224 139 230 149C236 158 236 173 239 178C242 184 241 181 248 183C254 184 270 183 277 188C284 193 289 204 289 211C290 218 285 223 282 230C280 237 281 248 276 252ZM128 234C131 238 133 247 130 250C127 253 115 253 109 251C103 250 96 244 92 241C88 238 88 234 86 234C83 233 82 237 77 239C72 240 60 244 54 243C49 242 44 235 44 231C43 227 50 222 53 218C55 215 56 211 59 209C62 207 66 204 70 204C74 204 79 209 83 209C87 209 88 207 92 206C95 205 103 202 105 203C108 205 108 211 109 214C110 218 108 219 111 223C114 226 125 229 128 234ZM165 140C165 141 165 143 164 145C163 146 161 147 159 148C157 148 155 147 153 147C152 148 151 148 150 148C148 149 146 150 145 150C143 150 141 149 140 148C138 147 138 145 137 144C136 143 135 141 135 140C135 138 136 136 137 135C138 134 140 133 141 133C143 132 143 130 145 130C146 129 148 128 150 128C151 128 153 130 154 130C155 131 156 132 158 133C159 134 161 134 162 135C163 136 164 138 165 140ZM-0 102C0 104 -0 106 -0 108C-0 109 -0 111 -0 113C-0 114 -0 117 -2 118C-3 119 -6 120 -7 121C-9 121 -11 120 -12 121C-14 121 -15 123 -17 124C-19 124 -22 125 -24 125C-26 125 -28 123 -28 122C-29 120 -29 118 -29 116C-29 114 -27 112 -26 111C-25 109 -24 108 -23 107C-21 105 -21 104 -20 103C-18 101 -17 100 -15 99C-13 99 -11 98 -9 98C-8 98 -5 98 -4 99C-2 99 -1 101 -0 102ZM299 102C300 104 299 106 299 108C299 109 299 111 299 113C299 114 299 117 298 118C296 119 294 120 292 121C290 121 288 120 287 121C285 121 284 123 282 124C280 124 277 125 275 125C273 125 272 123 271 122C270 120 270 118 270 116C270 114 272 112 273 111C274 109 275 108 277 107C278 105 278 104 279 103C281 101 282 100 284 99C286 99 288 98 290 98C292 98 294 98 295 99C297 99 298 101 299 102ZM185 278C184 279 184 281 184 282C183 282 183 284 181 284C180 285 178 284 177 284C176 283 175 282 174 282C173 281 172 281 171 280C170 280 168 280 167 279C166 278 165 277 164 276C164 275 163 273 164 272C165 271 166 270 167 270C169 269 170 269 171 269C172 268 173 268 174 268C175 268 176 269 178 269C179 269 180 269 181 270C182 270 184 271 185 272C186 273 186 274 186 275C186 276 185 277 185 278Z'/%3E%3C/svg%3E"); --spot-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94 60.7C91.3 64.2 82 66.2 76.7 67.4C71.5 68.6 66.5 67.6 62.8 67.8C59 68 57 68 54.1 68.6C51.2 69.2 49.1 70.5 45.2 71.5C41.4 72.5 34.8 75.3 31 74.3C27.2 73.3 23.2 68.8 22.3 65.5C21.3 62.2 26.8 58 25.5 54.5C24.2 51 17.6 49.2 14.3 44.6C11.1 39.9 3.8 30 6 26.9C8.2 23.7 20.9 23.6 27.6 25.7C34.2 27.7 41.7 37 45.8 39.4C49.8 41.7 49 40.3 51.7 39.7C54.4 39 58 36 62.1 35.7C66.2 35.4 71.2 36 76.3 37.7C81.5 39.5 90 42.5 93 46.4C95.9 50.2 96.7 57.2 94 60.7Z'/%3E%3C/svg%3E"); --spot-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94 35.4C94.9 40.7 90.6 48.9 87.3 53.3C84.1 57.7 76.2 58.1 74.3 61.8C72.4 65.5 76.8 71.1 75.9 75.6C75.1 80.1 72.8 87.7 69.3 88.8C65.8 89.9 59.2 83.9 55.1 82.2C51 80.4 49.3 78.5 44.8 78.3C40.2 78.1 33.6 82 27.8 80.8C21.9 79.6 13.3 76.1 9.6 71.1C6 66.1 3.5 56.4 6 51.1C8.5 45.7 18.4 40.3 24.9 39C31.3 37.6 41.3 43.8 44.8 42.8C48.3 41.9 44.7 38.7 45.9 33.5C47.1 28.2 48.5 15.2 52.3 11.4C56 7.7 63.4 9.4 68.4 11.2C73.3 12.9 77.7 17.8 82 21.8C86.2 25.9 93.1 30.2 94 35.4Z'/%3E%3C/svg%3E"); --spot-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M87.3 69.1C85 71.6 82.8 74.4 79.5 75.3C76.1 76.1 70.9 74.5 67.1 74.2C63.4 73.9 60.5 73.9 57 73.5C53.4 73 48.4 73.5 45.7 71.4C43 69.4 42.9 64 41 61.2C39.1 58.4 39.4 57.9 34.1 54.6C28.8 51.4 13.8 46.7 9.1 41.7C4.4 36.8 1.9 26.7 6 24.7C10.1 22.7 26.4 27.3 33.7 29.8C41.1 32.4 46.5 38.7 50.2 40C53.9 41.3 53.2 38.6 55.7 37.8C58.3 37 61.3 35.3 65.5 35.3C69.6 35.3 75.9 35.6 80.6 37.7C85.4 39.8 91.9 44.2 94 48C96.1 51.7 94.3 56.8 93.2 60.3C92.1 63.9 89.5 66.6 87.3 69.1Z'/%3E%3C/svg%3E"); --spot-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M90.4 54.5C88.9 59.3 86.6 62.9 84.9 67.1C83.1 71.3 83 77.5 79.8 79.8C76.5 82.1 69.6 81.5 65.3 80.8C61.1 80 58.1 75.4 54.4 75.4C50.8 75.3 48.6 79 43.6 80.5C38.6 82.1 30.7 85.5 24.4 84.5C18.2 83.5 8.9 79.5 6 74.5C3.1 69.5 2.9 59.4 7 54.5C11.2 49.5 24.7 46.5 30.9 44.7C37 43 41.8 46.8 43.9 43.9C45.9 41 41.5 32.1 43.2 27.4C45 22.7 50.4 16.3 54.4 15.5C58.5 14.7 63.2 20.6 67.6 22.7C72.1 24.7 76.7 25.2 81.1 27.8C85.5 30.3 92.5 33.6 94 38.1C95.5 42.5 91.9 49.6 90.4 54.5Z'/%3E%3C/svg%3E"); --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3q5-4 10 0t10 0' fill='none' stroke='%2355B031' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); color-scheme: light; } @media (min-width: 761px) { :root { --header-h: 76px; } } /* ----------------------------------------------------------------------------------------------- 2. reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--milk); scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--meadow-700) var(--cream); -webkit-tap-highlight-color: transparent; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--milk); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; } a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; } p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote, label) { overflow-wrap: break-word; } table { border-collapse: collapse; } [hidden] { display: none !important; } ::selection { background: var(--sun); color: var(--ink); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--meadow); border: 3px solid var(--cream); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--meadow-700); } /* ------------------------------------------------------------------------------------------ 3. typography */ h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: var(--fw-display); line-height: 1.05; letter-spacing: var(--ls-display); text-wrap: balance; } h1, .h-hero { font-size: var(--fs-hero); line-height: 0.95; letter-spacing: var(--ls-display); font-weight: var(--fw-display); } h2, .h2, .section-title { font-size: var(--fs-h2); line-height: 1; font-weight: var(--fw-display); } h3, .h3 { font-size: var(--fs-h3); line-height: 1.12; font-weight: var(--fw-display-2); letter-spacing: -0.01em; } h4, .h4 { font-size: 1.15rem; line-height: 1.2; font-weight: var(--fw-display-2); letter-spacing: 0; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; } .statement { font-family: var(--font-display); font-size: var(--fs-statement); line-height: 1.16; font-weight: var(--fw-display-2); letter-spacing: -0.01em; text-wrap: pretty; } p { text-wrap: pretty; } small, .small { font-size: var(--fs-small); } .xs { font-size: var(--fs-xs); } .muted { color: var(--muted); } .text-green { color: var(--meadow-700); } .text-center { text-align: center; } strong, b { font-weight: 800; } /* inside display text = a sunny marker highlight (e.g. hero.title3 "made the old-school way") */ :where(h1, h2, h3, .display, .h-hero, .section-title, .statement) em { font-style: normal; background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.06em; } /* giant outlined words (ՄԱԾՈՒՆ, ԹԱՆ …) behind content */ .outline-text { font-family: var(--font-display); font-weight: 700; color: transparent; -webkit-text-stroke: var(--outline-stroke, 2px) var(--outline-color, currentColor); line-height: 0.85; letter-spacing: 0; user-select: none; pointer-events: none; } /* decorative Armenian words as printed on the labels (e.g. Մածուն): no negative tracking */ [lang="hy"] { letter-spacing: 0; } /* ---------------------------------------------------------------------------------------------- 4. layout */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { --container: 920px; } .container--wide { --container: 1560px; } .section { position: relative; padding-block: var(--section-pad); } .section--tight { padding-block: calc(var(--section-pad) * 0.6); } .section--flush-top { padding-top: 0; } .section--milk { background: var(--milk); } .section--cream { background: var(--cream); } .section--meadow { background: var(--meadow); --kicker-color: var(--ink); --focus-ring: var(--ink); } .section--navy, .on-dark { background: var(--navy); color: var(--milk); --kicker-color: var(--sun); --focus-ring: var(--sun); --line: rgb(255 253 247 / 0.18); } .section--navy .lead, .on-dark .lead { color: rgb(255 253 247 / 0.86); } .section--ink { background: var(--ink); color: var(--milk); --kicker-color: var(--sun); --focus-ring: var(--sun); } .section-head { display: grid; gap: clamp(12px, 1.6vw, 22px); max-width: 54rem; margin-bottom: clamp(36px, 5vw, 72px); justify-items: start; } .section-head--center { margin-inline: auto; text-align: center; justify-items: center; } .section-head--center .lead { margin-inline: auto; } .stack { display: flex; flex-direction: column; gap: var(--stack, 1rem); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, 0.75rem); } .grid { display: grid; gap: var(--grid-gap, clamp(16px, 2.4vw, 32px)); } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 280px)), 1fr)); } .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 761px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1081px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); } .flow > * + * { margin-top: var(--flow, 1em); } /* ------------------------------------------------------------------------------------------ 5. components */ /* .icon — */ .icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; fill: currentColor; overflow: visible; } .icon--lg { width: 1.5em; height: 1.5em; } .icon--xl { width: 2em; height: 2em; } /* .btn — pill, ink outline, hard sticker shadow; hover lifts, active presses */ .btn { --btn-bg: var(--milk); --btn-fg: var(--ink); --btn-shadow: var(--ink); --btn-border: var(--ink); --btn-lift: 2px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 48px; padding: 0.72em 1.45em; border: var(--bw) solid var(--btn-border); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-weight: var(--fw-btn); font-size: 1.0625rem; line-height: 1.12; letter-spacing: 0.01em; text-align: center; text-decoration: none; box-shadow: 5px 5px 0 var(--btn-shadow); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring), background-color 0.2s ease, color 0.2s ease; } .btn:hover { transform: translate(calc(var(--btn-lift) * -1), calc(var(--btn-lift) * -1)); box-shadow: 7px 7px 0 var(--btn-shadow); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--btn-shadow); transition-duration: 0.07s; } .btn:focus-visible { outline-offset: 4px; } .btn .icon { width: 1.15em; height: 1.15em; transition: transform 0.3s var(--ease-spring); } .btn:hover .icon--move { transform: translateX(3px); } .btn--green { --btn-bg: var(--meadow); } .btn--cream { --btn-bg: var(--cream); } .btn--sun { --btn-bg: var(--sun); } .btn--ink { --btn-bg: var(--ink); --btn-fg: var(--milk); --btn-shadow: var(--sun); } .btn--ghost { --btn-bg: transparent; box-shadow: none; } .btn--ghost:hover { background: rgb(24 24 22 / 0.06); box-shadow: none; } .btn--sm { min-height: 44px; padding: 0.5em 1.05em; font-size: 0.975rem; box-shadow: 4px 4px 0 var(--btn-shadow); } .btn--sm:hover { box-shadow: 5px 5px 0 var(--btn-shadow); } .btn--lg { min-height: 60px; padding: 0.9em 1.85em; font-size: clamp(1.1rem, 1.3vw, 1.25rem); } .btn--icon { width: 48px; min-height: 48px; height: 48px; padding: 0; flex: none; } .btn--icon .icon { width: 22px; height: 22px; } .btn--block { display: flex; width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--btn-shadow); } .on-dark .btn--ghost, .section--navy .btn--ghost { --btn-fg: var(--milk); --btn-border: var(--milk); } /* .chip — filters (aria-pressed) & sizes */ .chip { --chip-bg: var(--milk); --chip-fg: var(--ink); display: inline-flex; align-items: center; gap: 0.45em; min-height: 40px; padding: 0.42em 1.05em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--chip-bg); color: var(--chip-fg); font: var(--fw-btn) 0.95rem/1.1 var(--font-display); white-space: nowrap; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.18s var(--ease-spring), box-shadow 0.18s var(--ease-spring), background-color 0.2s ease, color 0.2s ease; } :is(button, a).chip { cursor: pointer; touch-action: manipulation; } :is(button, a).chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); --chip-bg: var(--cream); } :is(button, a).chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .chip[aria-pressed="true"], .chip.is-active { --chip-bg: var(--ink); --chip-fg: var(--milk); box-shadow: 3px 3px 0 var(--meadow); } .chip[aria-pressed="true"]:hover, .chip.is-active:hover { --chip-bg: var(--ink); box-shadow: 4px 4px 0 var(--meadow); } .chip__count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.35em; border-radius: var(--r-pill); background: var(--sun); color: var(--ink); font: 800 0.72rem/1 var(--font-body); } .chip--sm { min-height: 30px; padding: 0.28em 0.75em; font-size: 0.82rem; box-shadow: 2px 2px 0 var(--ink); } .chip--flat { box-shadow: none; } @media (pointer: coarse) { :is(button, a).chip { min-height: 44px; } } /* .tag — small badges */ .tag { --tag-bg: var(--meadow-300); --tag-fg: var(--ink); display: inline-flex; align-items: center; gap: 0.4em; padding: 0.36em 0.78em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--tag-bg); color: var(--tag-fg); font: 700 0.78rem/1.15 var(--font-body); letter-spacing: 0.02em; white-space: nowrap; } .tag .icon { width: 1.05em; height: 1.05em; } .tag--lg { font-size: 0.9rem; padding: 0.5em 1em; } .tag--sun { --tag-bg: var(--sun); } .tag--sky { --tag-bg: var(--sky); } .tag--cream { --tag-bg: var(--cream); } .tag--milk { --tag-bg: var(--milk); } .tag--ink { --tag-bg: var(--ink); --tag-fg: var(--milk); } .tag--barn { --tag-bg: var(--barn); --tag-fg: #fff; } .tag--navy { --tag-bg: var(--navy); --tag-fg: var(--milk); } .tag--apricot { --tag-bg: var(--apricot); } .tag--outline { --tag-bg: transparent; --tag-fg: currentColor; border-color: currentColor; } .tag--wrap { white-space: normal; } /* .card — 32 px radius, ink outline, sticker shadow, tinted variants */ .card { --card-bg: var(--milk); position: relative; isolation: isolate; background: var(--card-bg); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-sticker); padding: clamp(20px, 2.6vw, 34px); } .card--hover { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring); } .card--hover:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-sticker-l); } .card--flat { box-shadow: none; } .card--cream { --card-bg: var(--cream); } .card--sky { --card-bg: var(--tint-narine); } .card--sun { --card-bg: var(--tint-strained); } .card--peach { --card-bg: var(--tint-sour-cream); } .card--meadow { --card-bg: var(--tint-meadow); } .card--tahn { --card-bg: var(--tint-tahn); } .card--navy { --card-bg: var(--navy); color: var(--milk); } .card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: 1.1; } .card__text { color: var(--ink-soft); } .card--navy .card__text { color: rgb(255 253 247 / 0.85); } /* .kicker — small label above titles */ .kicker { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-display); font-weight: var(--fw-btn); font-size: clamp(0.8rem, 0.9vw, 0.94rem); line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kicker-color); } .kicker::before { content: ""; flex: none; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--kicker-dot, var(--sun)); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); } .kicker--pill { padding: 0.5em 1em 0.5em 0.75em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--milk); color: var(--ink); box-shadow: var(--shadow-sticker-s); } .kicker--light { --kicker-color: var(--sun); } .kicker--plain::before { display: none; } /* .sticker-ring — rotating circular-text badge (core.js fits the text to the circle in every language) */ .sticker-ring { --size: 132px; --ring-bg: var(--sun); --ring-fg: var(--ink); --ring-speed: 18s; position: relative; width: var(--size); height: var(--size); flex: none; display: grid; place-items: center; border-radius: 50%; border: var(--bw) solid var(--ink); background: var(--ring-bg); color: var(--ring-fg); box-shadow: var(--shadow-sticker); } .sticker-ring__text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: muusho-spin var(--ring-speed) linear infinite; } .sticker-ring__text text { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: currentColor; } .sticker-ring__center { position: relative; width: calc(var(--size) * 0.46); height: calc(var(--size) * 0.46); display: grid; place-items: center; border-radius: 50%; border: var(--bw) solid var(--ink); background: var(--milk); font: 700 0.85rem/1 var(--font-display); text-align: center; } .sticker-ring__center .icon { width: calc(var(--size) * 0.22); height: calc(var(--size) * 0.22); } .sticker-ring--green { --ring-bg: var(--meadow); } .sticker-ring--milk { --ring-bg: var(--milk); } .sticker-ring--reverse .sticker-ring__text { animation-direction: reverse; } /* .milk-divider — wavy milk edge between sections; core.js jiggles path[data-wave] with scroll velocity */ .milk-divider { position: absolute; left: 0; right: 0; z-index: var(--z-divider); height: var(--divider-h, clamp(34px, 5.5vw, 92px)); color: var(--divider-fill, var(--milk)); pointer-events: none; line-height: 0; } .milk-divider svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; } .milk-divider path { fill: currentColor; } .milk-divider--top { bottom: calc(100% - 1px); } .milk-divider--bottom { top: calc(100% - 1px); } .milk-divider--flip { transform: scaleX(-1); } .milk-divider--inset { position: relative; inset: auto; background: var(--divider-bg, transparent); } /* .cowprint — Holstein pattern fill; .cow-spot — a single decorative spot */ .cowprint { background-color: var(--cow-bg, var(--milk)); background-image: var(--cow-ink-img); background-size: var(--cow-size, 300px) var(--cow-size, 300px); background-position: var(--cow-pos, 0 0); } .cowprint--inverse { background-color: var(--cow-bg, var(--ink)); background-image: var(--cow-milk-img); } .cow-spot { display: block; width: var(--s, 72px); aspect-ratio: 1; color: var(--ink); background: currentColor; -webkit-mask: var(--spot-1) center / contain no-repeat; mask: var(--spot-1) center / contain no-repeat; pointer-events: none; } .cow-spot--2 { -webkit-mask-image: var(--spot-2); mask-image: var(--spot-2); } .cow-spot--3 { -webkit-mask-image: var(--spot-3); mask-image: var(--spot-3); } .cow-spot--4 { -webkit-mask-image: var(--spot-4); mask-image: var(--spot-4); } /* .social-links — round sticker icon buttons */ .social-links { display: flex; flex-wrap: wrap; gap: 12px; } .social-links a { display: grid; place-items: center; width: 48px; height: 48px; border: var(--bw-s) solid var(--ink); border-radius: 50%; background: var(--milk); color: var(--ink); box-shadow: var(--shadow-sticker-s); transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-spring), background-color 0.2s ease; } .social-links a:hover { transform: translate(-2px, -2px) rotate(-6deg); box-shadow: 5px 5px 0 var(--ink); background: var(--sun); } .social-links .icon { width: 22px; height: 22px; } /* .tricolor — thin Armenian tricolor stripe (sparingly) */ .tricolor { display: block; height: var(--tri-h, 6px); border-radius: var(--r-pill); background: linear-gradient(180deg, var(--am-red) 0 33.4%, var(--am-blue) 33.4% 66.7%, var(--am-orange) 66.7% 100%); } /* .modal — generic dialog shell for Muusho.modal.open(el) (sections style their own content) */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .modal.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s ease; } .modal__backdrop { position: absolute; inset: 0; background: rgb(24 24 22 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal__panel { position: relative; width: min(100%, 980px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--milk); border: var(--bw) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-sticker-l); transform: translateY(26px) scale(0.97); transition: transform 0.42s var(--ease-out); } .modal.is-open .modal__panel { transform: none; } .modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; } /* ------------------------------------------------------------------------------------------------ 6. header */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); padding-top: env(safe-area-inset-top, 0px); transition: transform 0.5s var(--ease-out); } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 245 225 / 0.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 rgb(24 24 22 / 0.1), 0 14px 30px -22px rgb(24 24 22 / 0.4); opacity: 0; transition: opacity 0.35s ease; } .site-header.is-scrolled::before { opacity: 1; } .site-header.is-hidden { transform: translateY(calc(-100% - 14px)); } .site-header__inner { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px); height: var(--header-h); } .site-header__logo { display: inline-flex; align-items: center; flex: none; border-radius: 12px; transition: transform 0.35s var(--ease-spring); } .site-header__logo img { height: 38px; width: auto; max-width: none; } .site-header__logo:hover { transform: rotate(-3deg) scale(1.04); } .site-nav { display: none; flex: 1 1 auto; justify-content: center; min-width: 0; } .site-nav__list { display: flex; align-items: center; gap: clamp(0px, 0.3vw, 6px); } .site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 6px clamp(7px, 0.85vw, 12px); border-radius: var(--r-pill); font: 600 clamp(0.92rem, 1vw, 1.02rem)/1.1 var(--font-display); white-space: nowrap; text-decoration: none; color: var(--ink); } .site-nav a::after { content: ""; position: absolute; left: clamp(7px, 0.85vw, 12px); right: clamp(7px, 0.85vw, 12px); bottom: 3px; height: 6px; background: var(--squiggle) repeat-x 0 0 / 20px 6px; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease-out); } .site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); } .site-header__actions { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); flex: none; margin-left: auto; } .site-header__cta { display: none; } .nav-toggle { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 48px; height: 48px; flex: none; border: var(--bw-s) solid var(--ink); border-radius: 50%; background: var(--sun); box-shadow: var(--shadow-sticker-s); transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring); } .nav-toggle:hover { transform: translate(-1px, -1px) rotate(-6deg); box-shadow: 4px 4px 0 var(--ink); } .nav-toggle__bar { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease-spring), width 0.3s var(--ease-spring); } .nav-toggle__bar:nth-child(2) { width: 13px; transform: translateX(-3.5px); } .nav-toggle:hover .nav-toggle__bar:nth-child(2) { width: 20px; transform: none; } html:not(.js) .nav-toggle { display: none; } @media (min-width: 641px) { .site-header__cta { display: inline-flex; } } @media (min-width: 761px) { .site-header__logo img { height: 46px; } } @media (min-width: 1081px) { .site-nav { display: flex; } .nav-toggle { display: none; } .site-header.is-tight .site-header__cta { display: none; } .site-header.is-compact .site-nav { display: none; } .site-header.is-compact .nav-toggle { display: inline-flex; } } /* ------------------------------------------------------------------------------------------- 7. mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); pointer-events: none; } .mobile-menu.is-open { pointer-events: auto; } .mobile-menu__sheet { position: absolute; inset: 0; transform: translateY(calc(-100% - 140px)); transition: transform 0.72s cubic-bezier(0.72, 0, 0.2, 1); } .mobile-menu.is-open .mobile-menu__sheet { transform: none; } .mobile-menu__panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--milk); padding-top: env(safe-area-inset-top, 0px); } .mobile-menu__wave { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: 120px; color: var(--milk); pointer-events: none; } .mobile-menu__wave svg { width: 100%; height: 100%; max-width: none; } .mobile-menu__wave path { fill: currentColor; } .mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); padding-inline: var(--gutter); flex: none; } .mobile-menu__logo img { height: 38px; width: auto; max-width: none; } .mobile-menu__nav { padding: clamp(8px, 2.4vh, 28px) var(--gutter) 0; } .mobile-menu__links { display: grid; gap: 0; } .mobile-menu__links li { opacity: 0; transform: translateY(32px); transition: opacity 0.3s ease, transform 0.5s var(--ease-out); border-bottom: 2px dashed rgb(24 24 22 / 0.12); } .mobile-menu.is-open .mobile-menu__links li { opacity: 1; transform: none; transition: opacity 0.5s ease calc(0.3s + var(--i, 0) * 0.055s), transform 0.8s var(--ease-out) calc(0.3s + var(--i, 0) * 0.055s); } .mobile-menu__links a { display: flex; align-items: baseline; gap: 14px; padding: clamp(7px, 1.25vh, 12px) 0; font: var(--fw-display) clamp(1.75rem, 7.6vw, 2.9rem)/1.08 var(--font-display); letter-spacing: var(--ls-display); text-decoration: none; color: var(--ink); transition: color 0.2s ease, transform 0.3s var(--ease-spring); } .mobile-menu__links a:hover, .mobile-menu__links a[aria-current] { color: var(--meadow-700); transform: translateX(6px); } .mobile-menu__num { font: 800 0.78rem/1 var(--font-body); letter-spacing: 0.08em; color: var(--meadow-700); min-width: 2.2ch; transform: translateY(-0.55em); } .mobile-menu__foot { display: grid; gap: 18px; justify-items: start; padding: clamp(18px, 3vh, 30px) var(--gutter) 18px; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.5s var(--ease-out); } .mobile-menu.is-open .mobile-menu__foot { opacity: 1; transform: none; transition: opacity 0.5s ease 0.62s, transform 0.8s var(--ease-out) 0.62s; } .mobile-menu__foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .mobile-menu__hills { margin-top: auto; flex: none; width: 100%; height: clamp(90px, 16vh, 150px); max-width: none; } /* ------------------------------------------------------------------------------------------------ 8. footer */ .site-footer { position: relative; z-index: 1; background: var(--meadow); color: var(--ink); --focus-ring: var(--ink); --divider-fill: var(--meadow); padding-top: clamp(40px, 5vw, 72px); overflow-x: clip; } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 28px; } @media (min-width: 600px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { /* phones: Explore + Follow side by side, brand and Contact full width */ .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .site-footer__brand, .site-footer__grid > .site-footer__col:last-child { grid-column: 1 / -1; } } @media (min-width: 1000px) { .site-footer__grid { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px); } } .site-footer__brand { display: grid; gap: 20px; justify-items: start; align-content: start; } .site-footer__logo { display: inline-block; border-radius: 16px; transform: rotate(-3deg); filter: drop-shadow(0 10px 14px rgb(24 24 22 / 0.22)); transition: transform 0.35s var(--ease-spring); } .site-footer__logo:hover { transform: rotate(1deg) scale(1.04); } .site-footer__logo img { height: clamp(56px, 6vw, 70px); width: auto; max-width: none; } .site-footer__tagline { font: var(--fw-display-2) clamp(1.15rem, 1.6vw, 1.4rem)/1.28 var(--font-display); max-width: 24ch; } .site-footer__heading { margin-bottom: 12px; font: 800 0.82rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--meadow-900); } .site-footer__links { display: grid; gap: 4px; } .site-footer__links a, .site-footer__links .site-footer__item { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; text-decoration: none; color: var(--ink); } .site-footer__links a:hover { text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 2px; } .site-footer__links .icon { width: 20px; height: 20px; } .site-footer__stage { position: relative; margin-top: clamp(36px, 6vw, 84px); padding-top: clamp(30px, 6vw, 90px); user-select: none; } .site-footer__ararat { position: absolute; left: 50%; bottom: 22%; width: min(1240px, 118%); height: auto; max-width: none; overflow: visible; transform: translateX(-50%); pointer-events: none; } .site-footer__wordmark-wrap { position: relative; display: grid; justify-items: center; font-family: var(--font-brand); font-weight: 700; font-size: min(23vw, 312px); line-height: 0.82; letter-spacing: -0.012em; white-space: nowrap; --wm-stroke: clamp(2px, 0.42vw, 5px); --wm-shadow: clamp(3px, 0.55vw, 8px); } .site-footer__wordmark, .site-footer__wordmark-shadow { grid-area: 1 / 1; padding-bottom: 0.05em; } /* hard sticker shadow = a plain ink copy of the word (much cheaper to paint than filter: drop-shadow) */ .site-footer__wordmark-shadow { color: var(--ink); -webkit-text-stroke: var(--wm-stroke) var(--ink); transform: translate(var(--wm-shadow), var(--wm-shadow)); } .site-footer__wordmark { position: relative; color: transparent; -webkit-text-stroke: var(--wm-stroke) var(--ink); background-color: var(--milk); background-image: var(--cow-ink-img); background-size: var(--cow-size-wm, clamp(150px, 20vw, 290px)) var(--cow-size-wm, clamp(150px, 20vw, 290px)); background-position: var(--cow-pos, 0 0); -webkit-background-clip: text; background-clip: text; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: clamp(20px, 3vw, 36px); padding-block: 22px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid rgb(24 24 22 / 0.2); font-size: var(--fs-small); font-weight: 700; } .site-footer__legal { display: grid; gap: 2px; } .site-footer__made { color: var(--meadow-900); font-weight: 600; } .site-footer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* --------------------------------------------------------------------------------------------- 9. preloader */ .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: grid; place-items: center; background: var(--cream); color: var(--ink); transition: transform 0.82s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.35s ease; will-change: transform; } html:not(.js) .preloader, html.reduced-motion .preloader { display: none; } /* fail-safe: if core.js never takes over, the preloader still disappears at 4.5 s */ html.js .preloader:not(.is-managed) { animation: muusho-preloader-failsafe 0.4s ease 4.5s forwards; } .preloader__inner { position: relative; display: grid; justify-items: center; gap: 14px; padding: 24px; transition: opacity 0.35s ease, transform 0.6s var(--ease-out); } .preloader__mark { position: relative; width: 105px; height: 110px; margin-bottom: 26px; } /* the turning rays sit exactly behind the logo's own sun (≈ 45 % / 32 % of the mark) */ .preloader__rays { position: absolute; left: 45%; top: 32%; width: 210px; height: 210px; max-width: none; translate: -50% -50%; color: var(--sun); opacity: 0.5; animation: muusho-spin 14s linear infinite; } .preloader__rays path { fill: currentColor; } .preloader__logo { position: relative; width: 105px; height: 110px; object-fit: contain; } .preloader__glass { width: 112px; height: auto; overflow: visible; transform: rotate(-4deg); } .preloader__drop { animation: muusho-drop-fall 0.9s cubic-bezier(0.5, 0, 0.9, 0.5) infinite; transform-box: fill-box; transform-origin: center; } .preloader__drop:nth-of-type(2) { animation-delay: 0.32s; } .preloader__drop:nth-of-type(3) { animation-delay: 0.6s; } .preloader__count { font: 700 2.5rem/1 var(--font-brand); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .preloader__caption { font: 700 0.95rem/1.3 var(--font-body); color: var(--muted); letter-spacing: 0.02em; } .preloader__flood { position: absolute; inset: 0; background: var(--milk); transform: translateY(calc(100% + 160px)); transition: transform 0.52s cubic-bezier(0.65, 0, 0.35, 1); } .preloader__flood-top { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: 140px; max-width: none; } .preloader__flood-top .back { fill: var(--milk-shade); } .preloader__flood-top .front { fill: var(--milk); } .preloader__flood-bottom { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 180px; max-width: none; } .preloader__flood-bottom path { fill: var(--milk); } .preloader.is-exiting .preloader__flood { transform: none; } .preloader.is-exiting .preloader__inner { opacity: 0; transform: translateY(-36px) scale(0.96); } .preloader.is-leaving { transform: translateY(calc(-100% - 200px)); } .preloader.is-quick-exit { transition: opacity 0.35s ease; } .preloader.is-quick-exit.is-leaving { transform: none; opacity: 0; } /* -------------------------------------------------------------------------------------------- 10. cursor */ .cursor { position: fixed; inset: 0; z-index: var(--z-cursor); display: none; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } html.has-cursor .cursor { display: block; } .cursor.is-visible { opacity: 1; } .cursor.is-text { opacity: 0; } html.has-cursor, html.has-cursor body, html.has-cursor :is(a, button, [role="button"], label, summary, select, [data-cursor], .chip) { cursor: none; } html.has-cursor :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, [contenteditable="true"]) { cursor: text; } .cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; } .cursor__drop { position: absolute; left: -10px; top: -1px; width: 20px; height: 26px; max-width: none; overflow: visible; transform: rotate(-32deg); transform-origin: 10px 1px; transition: transform 0.25s var(--ease-spring), opacity 0.2s ease; } .cursor__drop .fill { fill: var(--glass-white); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .cursor__drop .shine { fill: none; stroke: var(--milk-shade); stroke-width: 1.6; stroke-linecap: round; } .cursor__ring::before { content: ""; position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 1.5px rgb(255 253 247 / 0.55); opacity: 0.4; transition: transform 0.4s var(--ease-out), background-color 0.25s ease, opacity 0.25s ease; } .cursor.is-hover .cursor__ring::before { transform: scale(1.45); background: rgb(251 235 12 / 0.38); opacity: 1; } .cursor.has-label .cursor__ring::before { transform: scale(2.15); background: var(--ink); opacity: 1; } .cursor.is-down .cursor__ring::before { transform: scale(0.82); } .cursor.is-down.is-hover .cursor__ring::before { transform: scale(1.2); } .cursor.is-hover .cursor__drop { transform: rotate(-32deg) scale(0.75); } .cursor.has-label .cursor__drop { transform: rotate(-32deg) scale(0); opacity: 0; } .cursor__label { position: absolute; left: 0; top: 0; translate: -50% -50%; font: 700 0.72rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--milk); opacity: 0; transition: opacity 0.2s ease; } .cursor.has-label .cursor__label { opacity: 1; } /* --------------------------------------------------------------------------------- 11. milk progress glass */ .milk-progress { /* bottom-right corner, wide screens only: mid-right it sat on top of full-bleed section content */ position: fixed; right: clamp(10px, 1vw, 18px); bottom: clamp(72px, 10vh, 104px); /* clears the footer back-to-top button */ z-index: var(--z-progress); display: none; width: 26px; height: 42px; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } @media (min-width: 1200px) { .milk-progress { display: block; } } html.is-ready .milk-progress { opacity: 1; } html.menu-open .milk-progress, html.has-modal .milk-progress { opacity: 0; } .milk-progress svg { width: 100%; height: 100%; max-width: none; overflow: visible; } .milk-progress__glass { fill: rgb(255 255 255 / 0.5); } .milk-progress__milk { fill: var(--glass-white); } .milk-progress__milk-back { fill: var(--milk-shade); } .milk-progress__halo { fill: none; stroke: rgb(255 253 247 / 0.85); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; } .milk-progress__outline { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .milk-progress__shine { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; opacity: 0.9; } /* ------------------------------------------------------------------------------------------- 12. reveal */ /* hidden states exist only while core.js runs the reveal system (html.reveal-on) — never without JS */ html.reveal-on:not(.reduced-motion) :is([data-reveal], [data-reveal-item]):not(.reveal-done) { --rv: 0; opacity: var(--rv); } html.reveal-on:not(.reduced-motion) :is([data-reveal=""], [data-reveal="up"], [data-reveal-item=""], [data-reveal-item="up"]):not(.reveal-done) { translate: 0 calc((1 - var(--rv)) * var(--reveal-y, 44px)); } html.reveal-on:not(.reduced-motion) :is([data-reveal="left"], [data-reveal-item="left"]):not(.reveal-done) { translate: calc((var(--rv) - 1) * var(--reveal-x, 56px)) 0; } html.reveal-on:not(.reduced-motion) :is([data-reveal="right"], [data-reveal-item="right"]):not(.reveal-done) { translate: calc((1 - var(--rv)) * var(--reveal-x, 56px)) 0; } html.reveal-on:not(.reduced-motion) :is([data-reveal="scale"], [data-reveal-item="scale"]):not(.reveal-done) { scale: calc(0.84 + 0.16 * var(--rv)); } /* CSS-transition path (used when GSAP is unavailable) */ html.reveal-on:not(.reduced-motion) :is([data-reveal], [data-reveal-item]).is-revealed:not(.reveal-done) { --rv: 1; transition: opacity 0.8s var(--ease-out) var(--reveal-delay, 0s), translate 1.05s var(--ease-out) var(--reveal-delay, 0s), scale 0.85s var(--ease-spring) var(--reveal-delay, 0s); } /* ----------------------------------------------------------------------------------- 13. shared contracts */ [data-bottle-anchor] { touch-action: pan-y; } .bottle-fallback { transition: opacity 0.4s ease, visibility 0s linear 0.4s; } html.bottle-ready [data-bottle-anchor] .bottle-fallback { opacity: 0; visibility: hidden; } #bottle-canvas { position: fixed; left: 0; top: 0; z-index: var(--z-bottle); pointer-events: none; } #hero-landscape { background: linear-gradient(180deg, var(--sky) 0%, #E4F4FC 46%, var(--cream) 100%); } /* ------------------------------------------------------------------------------------------ 14. a11y */ .visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .skip-link { position: fixed; left: 16px; top: 12px; z-index: var(--z-skip); padding: 12px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--milk); font-weight: 800; text-decoration: none; box-shadow: 4px 4px 0 var(--sun); transform: translateY(calc(-100% - 24px)); transition: transform 0.25s var(--ease-out); } .skip-link:focus { transform: none; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } [tabindex="-1"]:focus { outline: none; } /* ------------------------------------------------------------------------------------------- keyframes */ @keyframes muusho-spin { to { transform: rotate(1turn); } } @keyframes muusho-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes muusho-drop-fall { 0% { transform: translateY(-14px) scale(0.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { transform: translateY(46px) scale(0.9); opacity: 0; } } @keyframes muusho-preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* ------------------------------------------------------------------------------------ 15. reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } html.reduced-motion :is(.sticker-ring__text, .preloader__rays) { animation: none; } html.reduced-motion .cursor { display: none !important; } /* ------------------------------------------------------------------------------------------------ 16. print */ @media print { :is(.preloader, .cursor, .milk-progress, .site-header, .mobile-menu, .milk-divider, .nav-toggle, .skip-link, #bottle-canvas) { display: none !important; } html, body { background: #fff !important; color: #000 !important; } html.reveal-on :is([data-reveal], [data-reveal-item]) { opacity: 1 !important; translate: none !important; scale: none !important; } .section { padding-block: 24px; break-inside: avoid-page; } .site-footer { background: #fff; } .site-footer__wordmark-wrap { font-size: 64px; } .site-footer__wordmark { color: #000; -webkit-text-stroke: 0; background: none; } .site-footer__wordmark-shadow { display: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; font-weight: 400; } } /* ========================================================================== assets/css/sections/hero.css ========================================================================== */ /* ========================================================================================================== MUUSHO — HERO (#hero) + THE POUR milk flood S1 .hero-pin is the element ScrollTrigger pins (hero.js). Layers inside it (z): 0 #hero-landscape · 1 .hero__veil / .hero__panel · 2 .hero__inner (copy + 3D anchor) · 4 .hero__edge / stream 5 .hero__scroll · 5 .milk-flood (the fixed #bottle-canvas, z 6, renders above all of it) Hidden/animated states are applied by hero.js only — without JS everything is a static, readable hero. ========================================================================================================== */ #hero.section { padding: 0; } .hero-pin { --stage-h: 0px; position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; background: var(--sky); } /* ------------------------------------------------------------------------------------ landscape fallback */ #hero .hero__landscape { position: absolute; inset: 0; z-index: 0; overflow: hidden; /* sky → cream + two green hills (shown until / unless MuushoLandscape mounts) */ background: radial-gradient(64% 30% at 16% 100%, #4CA42C 0 98.6%, transparent 99.4%), radial-gradient(72% 34% at 86% 104%, #5BB437 0 98.6%, transparent 99.4%), radial-gradient(120% 40% at 52% 110%, #86CD57 0 98.6%, transparent 99.4%), linear-gradient(180deg, #8FD0F2 0%, var(--sky) 34%, #E4F4FC 56%, var(--cream) 100%); } /* soft milk glow behind the copy so the text always reads on the busy landscape (desktop) */ .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(52% 64% at 22% 54%, rgb(255 253 247 / 0.8) 0%, rgb(255 253 247 / 0.56) 42%, rgb(255 253 247 / 0) 74%), linear-gradient(90deg, rgb(255 253 247 / 0.42) 0%, rgb(255 253 247 / 0) 50%); } /* phones: the copy sits on a milk panel with a wavy top */ .hero__panel { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--header-h) + var(--stage-h) - 6px); z-index: 1; background: var(--milk); pointer-events: none; } .hero__panel-wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: 34px; max-width: none; } .hero__panel-wave path { fill: var(--milk); } /* ------------------------------------------------------------------------------------------------ layout */ .hero__inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; column-gap: clamp(16px, 3vw, 48px); padding-top: calc(var(--header-h) + clamp(6px, 1.5vh, 18px)); padding-bottom: clamp(56px, 9svh, 96px); } .hero__copy { position: relative; max-width: 44rem; } .hero__eyebrow { max-width: 100%; font-size: clamp(0.74rem, 0.86vw, 0.86rem); letter-spacing: 0.1em; } .hero__title { margin: clamp(14px, 2.2vh, 26px) 0 clamp(14px, 2.4vh, 28px); font-size: clamp(2.35rem, 5.7vw, 6.3rem); line-height: 0.94; color: var(--ink); } .hero__line { display: block; overflow: hidden; /* mask for the intro (lines rise in) */ padding: 0.04em 0.06em 0.12em; margin: -0.04em -0.06em -0.12em; } .hero__line-in { display: inline-block; } .hero__title em { white-space: nowrap; } .hero__lead { max-width: 35ch; font-size: var(--fs-lead); line-height: 1.5; font-weight: 600; color: var(--ink-soft); text-wrap: pretty; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: clamp(20px, 3.4vh, 34px); } ul.hero__badges { /* ul.… beats base.css `ul[class] { margin: 0 }` */ display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px, 3vh, 30px); } .hero__badge { font-size: 0.8rem; padding: 0.42em 0.85em 0.42em 0.5em; box-shadow: 2px 2px 0 var(--ink); } .hero__check { width: 1.25em; height: 1.25em; flex: none; overflow: visible; } .hero__check circle { fill: var(--meadow); stroke: var(--ink); stroke-width: 1.6; } .hero__check path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ----------------------------------------------------------------------------------- bottle stage (3D) */ .hero__stage { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; container-type: inline-size; } .hero__bottle, .hero__deco { --bh: min(72svh, 700px); height: var(--bh); width: calc(var(--bh) * 0.56); } @supports (width: 1cqi) { .hero__bottle, .hero__deco { --bh: min(72svh, 700px, 158cqi); } } .hero__bottle { position: relative; grid-area: 1 / 1; display: grid; place-items: center; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .hero__fallback { height: 90%; width: auto; max-width: none; object-fit: contain; filter: var(--drop-product); pointer-events: none; transform-origin: 50% 50%; } .hero__deco { position: relative; grid-area: 1 / 1; pointer-events: none; } .hero__pop { position: relative; } .hero__ring { position: absolute; z-index: 1; left: calc(var(--bh) * -0.18); top: calc(var(--bh) * 0.1); } .hero__sticker { --size: clamp(92px, calc(var(--bh) * 0.2), 138px); --ring-speed: 22s; rotate: -10deg; } .hero__ring-center { width: 50%; height: 50%; } .hero__ring-center img { width: 72%; height: auto; max-width: none; } .hero__grade { position: absolute; z-index: 1; right: calc(var(--bh) * -0.2); bottom: calc(var(--bh) * 0.17); width: clamp(80px, calc(var(--bh) * 0.17), 120px); aspect-ratio: 1; } .hero__grade .hero__pop { width: 100%; height: 100%; display: grid; place-items: center; } .hero__grade-seal { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: 8deg; filter: drop-shadow(4px 4px 0 var(--ink)); } .hero__grade-back { fill: var(--meadow); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } .hero__grade-ring { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0.55; } .hero__grade-text { position: relative; max-width: 62%; rotate: 8deg; font: 700 clamp(0.9rem, calc(var(--bh) * 0.026), 1.2rem)/0.98 var(--font-display); letter-spacing: 0.01em; text-align: center; text-transform: uppercase; color: var(--ink); } .hero__hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(-38px, -4svh, -14px); width: max-content; max-width: 100%; margin-inline: auto; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 9px; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: rgb(255 253 247 / 0.9); box-shadow: var(--shadow-sticker-s); font: 700 0.8rem/1.2 var(--font-body); letter-spacing: 0.01em; color: var(--ink); pointer-events: none; } .hero__hint-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------------------------------------------- scroll cue */ .hero__scroll { position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(14px, 2.6vh, 28px); width: max-content; margin-inline: auto; display: grid; justify-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-m); color: var(--ink); text-decoration: none; font: 700 0.7rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; } .hero__scroll-pill { position: relative; display: block; width: 24px; height: 38px; border: 2.5px solid var(--ink); border-radius: var(--r-pill); background: var(--milk); box-shadow: 2px 2px 0 var(--ink); overflow: hidden; } .hero__scroll-drop { position: absolute; left: 50%; top: 6px; width: 8px; height: 11px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--meadow); border: 1.5px solid var(--ink); animation: hero-scroll-drop 1.9s var(--ease-in-out) infinite; } @keyframes hero-scroll-drop { 0% { transform: translateY(-2px) scale(0.7); opacity: 0; } 18% { opacity: 1; transform: translateY(0) scale(1); } 70% { transform: translateY(14px) scale(1); opacity: 1; } 100% { transform: translateY(18px) scale(0.6); opacity: 0; } } /* ------------------------------------------------------------------------------- static milk edge + stream */ .hero__edge { bottom: -1px; --divider-h: clamp(24px, 3.4vw, 54px); --divider-fill: var(--milk); } .hero__stream { position: absolute; left: 0; top: 0; z-index: 4; width: 14px; height: 0; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, var(--milk-shade) 0%, #FFFFFF 30%, var(--milk) 62%, #E9E4D8 100%); box-shadow: inset 0 0 0 1px rgb(24 24 22 / 0.08); opacity: 0; pointer-events: none; will-change: transform, height; } /* ------------------------------------------------------------------------------------------- milk flood */ .milk-flood { --crest-h: 150px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: var(--z-flood); pointer-events: none; visibility: hidden; transform: translate3d(0, calc(100% + 240px), 0); } .milk-flood.is-on { visibility: visible; will-change: transform; } .milk-flood__crest { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: var(--crest-h); max-width: none; overflow: visible; } .milk-flood__body { position: absolute; inset: 0; background: var(--milk); } .milk-flood__back { fill: var(--milk-shade); } .milk-flood__front { fill: url(#hero-milk-gloss); } .milk-flood__line { fill: none; stroke: rgb(24 24 22 / 0.16); stroke-width: 2; vector-effect: non-scaling-stroke; } .milk-flood__gloss { fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 70 220 60 46 140 300 380; opacity: 0.95; vector-effect: non-scaling-stroke; } .milk-flood__drops circle { fill: #FFFFFF; stroke: rgb(24 24 22 / 0.16); stroke-width: 1.5; vector-effect: non-scaling-stroke; } /* static modes (reduced motion / no GSAP): no pin, no pour, no flood */ .hero--static .milk-flood, .hero--static .hero__stream { display: none; } html.reduced-motion #hero .milk-flood, html.reduced-motion #hero .hero__stream { display: none; } html.reduced-motion .hero__scroll-drop { animation: none; } /* ------------------------------------------------------------------------------------------ large screens */ @media (min-width: 1680px) { .hero__copy { max-width: 48rem; } } /* --------------------------------------------------------------------- tablets & phones: bottle on top */ @media (max-width: 899px) { .hero-pin { --stage-h: clamp(210px, 41svh, 470px); min-height: 600px; } .hero__veil { display: none; } .hero__panel { display: block; } .hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--stage-h) auto; align-content: start; align-items: start; row-gap: 0; padding-top: var(--header-h); padding-bottom: 12px; } .hero__stage { order: -1; height: var(--stage-h); } .hero__bottle, .hero__deco { --bh: var(--stage-h); } .hero__copy { max-width: 40rem; padding-top: clamp(10px, 2.4svh, 26px); } .hero__title { margin: clamp(10px, 1.6svh, 16px) 0 clamp(10px, 1.6svh, 16px); font-size: clamp(2.2rem, 9.4vw, 4rem); } .hero__lead { max-width: 40ch; font-size: clamp(0.98rem, 3.9vw, 1.15rem); } .hero__ctas { margin-top: clamp(14px, 2.4svh, 22px); gap: 12px; } ul.hero__badges { margin-top: clamp(12px, 2svh, 18px); } .hero__ring { left: calc(var(--bh) * -0.34); top: calc(var(--bh) * 0.06); } .hero__sticker { --size: clamp(76px, calc(var(--bh) * 0.24), 118px); } .hero__grade { right: calc(var(--bh) * -0.34); bottom: calc(var(--bh) * 0.12); width: clamp(64px, calc(var(--bh) * 0.2), 104px); } .hero__grade-text { font-size: clamp(0.72rem, calc(var(--bh) * 0.032), 1.05rem); } .hero__hint { bottom: 2px; padding: 4px 11px 4px 7px; font-size: 0.72rem; box-shadow: 2px 2px 0 var(--ink); } .hero__hint-icon { width: 17px; height: 17px; } .hero__scroll { display: none; } } @media (max-width: 760px) { .hero__eyebrow { font-size: 0.68rem; letter-spacing: 0.08em; padding: 0.42em 0.85em 0.42em 0.6em; } .hero__ctas { flex-wrap: nowrap; gap: 10px; } .hero__ctas .btn--lg { min-height: 48px; padding: 0.62em 1em; font-size: 0.95rem; white-space: nowrap; } .hero__badge { font-size: 0.72rem; } /* phones: both CTAs on one row; the trust tags would fall below the pinned fold (they repeat in About) */ ul.hero__badges { display: none; } } /* small phones: keep everything above the fold */ @media (max-width: 760px) and (max-height: 760px) { .hero-pin { --stage-h: clamp(200px, 36svh, 300px); } .hero__title { font-size: clamp(2.05rem, 9vw, 2.6rem); } .hero__lead { font-size: 0.95rem; line-height: 1.45; } .hero__badges { display: none; } } @media (max-width: 760px) and (max-height: 700px) { .hero__eyebrow { display: none; } } @media (max-width: 380px) { .hero__ctas { gap: 10px; } .hero__ctas .btn--lg { padding-inline: 0.85em; font-size: 0.9rem; } } /* ========================================================================== assets/css/sections/marquee.css ========================================================================== */ /* ========================================================================================================== MUUSHO — MARQUEE (.marquee, data-section="marquee") S1 Two full-bleed tapes crossing at ±2.5° on the milk-white area right after the pour/flood: tape A meadow green with ink text (on top), tape B ink cow-print with milk text. marquee.js clones the groups for a seamless loop and moves the tracks with the scroll velocity. ========================================================================================================== */ #marquee.section { --tape-h: clamp(52px, 5.4vw, 86px); position: relative; z-index: 1; padding-block: clamp(30px, 5vw, 84px) clamp(22px, 4vw, 64px); background: var(--milk); overflow: hidden; overflow: clip; } .marquee__stage { position: relative; height: calc(var(--tape-h) + 6.5vw + 26px); min-height: calc(var(--tape-h) + 46px); } .marquee__tape { position: absolute; left: -8vw; right: -8vw; top: 50%; height: var(--tape-h); margin-top: calc(var(--tape-h) / -2); display: flex; align-items: center; overflow: hidden; border-block: var(--bw) solid var(--ink); } .marquee__tape--green { z-index: 2; rotate: -2.5deg; background: var(--meadow); color: var(--ink); box-shadow: 0 7px 0 -1px var(--ink), 0 22px 30px -18px rgb(24 24 22 / 0.45); } .marquee__tape--cow { z-index: 1; rotate: 2.5deg; background-color: var(--ink); background-image: var(--cow-milk-img); background-size: clamp(190px, 18vw, 280px) clamp(190px, 18vw, 280px); background-position: 0 38%; color: var(--milk); } .marquee__track { display: flex; flex: none; width: max-content; backface-visibility: hidden; } .marquee__tape.is-moving .marquee__track { will-change: transform; } .marquee__group { display: flex; flex: none; align-items: center; gap: clamp(16px, 1.9vw, 30px); padding-right: clamp(16px, 1.9vw, 30px); } .marquee__item { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.3vw, 2.15rem); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; } .marquee__tape--cow .marquee__item { /* milk letters keep an ink outline so they read on the milk spots too */ text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 3px 3px 0 var(--ink); } .marquee__icon { flex: none; width: clamp(18px, 1.8vw, 30px); height: clamp(18px, 1.8vw, 30px); overflow: visible; fill: currentColor; } .marquee__tape--green .marquee__icon--sun { color: var(--sun); stroke: var(--ink); stroke-width: 1.2px; } .marquee__tape--green .marquee__icon--drop { color: var(--milk); stroke: var(--ink); stroke-width: 1.2px; } .marquee__tape--green .marquee__icon--spot { color: var(--ink); } .marquee__tape--cow .marquee__icon--sun { color: var(--sun); } .marquee__tape--cow .marquee__icon--drop { color: var(--milk); } .marquee__tape--cow .marquee__icon--spot { color: var(--meadow); } @media (max-width: 760px) { #marquee.section { --tape-h: clamp(46px, 12vw, 56px); } .marquee__stage { height: calc(var(--tape-h) + 9vw + 22px); } .marquee__tape { left: -12vw; right: -12vw; } } /* Overlap the milk-white tail of the hero pour so there is no empty screen after the flood (html.has-pour is set by hero.js only when the pinned pour animation is running). */ html.has-pour #marquee.section { margin-top: -38vh; z-index: 7; } @media (max-width: 760px) { html.has-pour #marquee.section { margin-top: -30vh; } } /* ========================================================================== assets/css/sections/about.css ========================================================================== */ /* ========================================================================================================== MUUSHO — ABOUT / introduction (#about) S1 kicker + title · word-by-word statement (about.js sets --p 0→1) · photo collage with parallax + quote sticker · three pillar cards with inline-SVG icons · seven round quality badges (spring pop-in) · back layer of the milk wave into #products. ========================================================================================================== */ #about.section { position: relative; z-index: 1; background: var(--milk); padding-top: clamp(56px, 8vw, 128px); padding-bottom: calc(var(--section-pad) + clamp(24px, 4vw, 64px)); overflow: hidden; overflow: clip; } /* giant outlined Armenian word drifting behind the heading (decorative) */ .about__word { position: absolute; top: clamp(20px, 4vw, 70px); right: -4vw; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap; } .about__word .outline-text { display: block; font-size: clamp(5.5rem, 17vw, 17rem); --outline-color: rgb(24 24 22 / 0.075); --outline-stroke: clamp(1.5px, 0.18vw, 3px); } .about__inner { position: relative; z-index: 1; } /* -------------------------------------------------------------------------------------------- heading */ .about__head { max-width: 62rem; margin-bottom: clamp(22px, 3vw, 40px); } .about__title { max-width: 15ch; } /* ----------------------------------------------------------------------------- statement (word reveal) */ .about__statement { --p: 1; max-width: 21.5em; color: var(--ink); } .about__statement .word { --n: var(--words, 40); opacity: clamp(0.14, calc((var(--p) * (var(--n) + 4) - var(--wi, 0)) / 4), 1); transition: opacity 0.12s linear; } html.reduced-motion .about__statement .word { opacity: 1; transition: none; } /* ----------------------------------------------------------------------------------- collage + pillars */ .about__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 8vw, 96px); margin-top: clamp(56px, 8vw, 120px); } @media (min-width: 1000px) { .about__body { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: clamp(48px, 6vw, 104px); } } .about__collage { position: relative; width: min(100%, 640px); margin-inline: auto; aspect-ratio: 1 / 0.98; } .about__photo { position: absolute; overflow: hidden; border: var(--bw) solid var(--ink); border-radius: var(--r-l); background: var(--cream); box-shadow: var(--shadow-sticker-l); } .about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .about__photo--a { left: 0; top: 0; width: 78%; aspect-ratio: 1; rotate: -2.5deg; } .about__photo--b { right: 0; bottom: 0; width: 42%; aspect-ratio: 1124 / 1400; rotate: 4deg; border-radius: var(--r-m); } .about__photo--b img { object-position: 50% 62%; } .about__quote { position: absolute; left: -2%; bottom: 5%; z-index: 2; max-width: 58%; padding: 0.7em 1.05em 0.75em; border: var(--bw) solid var(--ink); border-radius: 26px; background: var(--sun); box-shadow: var(--shadow-sticker); font: 700 clamp(1.1rem, 1.85vw, 1.65rem)/1.08 var(--font-display); letter-spacing: -0.01em; color: var(--ink); rotate: -5deg; } .about__quote::after { /* the little speech-bubble tail */ content: ""; position: absolute; left: 22%; top: calc(100% - 8px); width: 20px; height: 20px; background: var(--sun); border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); border-bottom-right-radius: 5px; transform: rotate(45deg) skew(8deg, 8deg); } .about__spot { position: absolute; z-index: 0; pointer-events: none; } .about__spot--1 { --s: clamp(54px, 7vw, 92px); right: 6%; top: -4%; rotate: 18deg; } .about__spot--2 { --s: clamp(36px, 4.4vw, 58px); left: 44%; bottom: -6%; rotate: -24deg; } /* pillars */ .about__pillars { display: grid; gap: clamp(16px, 2vw, 24px); } .about__pillar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 1.8vw, 24px); padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.4vw, 32px); border-radius: var(--r-l); } .about__pillar-icon { display: grid; place-items: center; width: clamp(72px, 7.2vw, 104px); aspect-ratio: 1; border-radius: 50%; background: rgb(255 253 247 / 0.75); border: var(--bw-s) solid rgb(24 24 22 / 0.12); } .about__svg { width: 86%; height: auto; overflow: visible; } .about__pillar-title { font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.1; } .about__pillar-text { margin-top: 6px; color: var(--ink-soft); font-size: clamp(0.98rem, 1.05vw, 1.0625rem); line-height: 1.55; } /* idle icon life (only while on screen; about.js toggles .is-live) */ .about.is-live .about__steam path { animation: about-steam 2.6s ease-in-out infinite; } .about.is-live .about__steam path:nth-child(2) { animation-delay: 0.6s; } .about.is-live .about__heart { animation: about-beat 2.4s var(--ease-spring) infinite; transform-box: fill-box; transform-origin: 50% 60%; } .about.is-live .about__bubble { animation: about-rise 2.8s ease-in infinite; transform-box: fill-box; transform-origin: center; } .about.is-live .about__bubble:nth-child(2) { animation-delay: 0.9s; } .about.is-live .about__bubble:nth-child(3) { animation-delay: 1.7s; } .about.is-live .about__leaf { animation: about-sway 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 100%; } .about.is-live .about__sparkle { animation: about-twinkle 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes about-steam { 0%, 100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(-4px); opacity: 1; } } @keyframes about-beat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.12); } 80% { transform: scale(0.97); } 90% { transform: scale(1.06); } } @keyframes about-rise { 0% { transform: translateY(6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } } @keyframes about-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } } @keyframes about-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.72) rotate(20deg); } } /* ---------------------------------------------------------------------------------------- quality badges */ .about__goodness { margin-top: clamp(80px, 10vw, 150px); text-align: center; } .about__goodness-head { display: grid; justify-items: center; gap: 10px; } .about__goodness-title { font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: var(--fw-display); line-height: 1.05; } ul.about__badges { /* ul.… beats base.css `ul[class] { margin: 0 }` */ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2vw, 30px) clamp(10px, 1.6vw, 26px); margin-top: clamp(28px, 3.6vw, 48px); } .about__badge { --d: clamp(84px, 8.4vw, 124px); display: grid; justify-items: center; align-content: start; gap: 12px; width: calc(var(--d) + 26px); } .about__disc { position: relative; display: grid; place-items: center; width: var(--d); aspect-ratio: 1; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--badge-bg, var(--milk)); box-shadow: 4px 4px 0 var(--ink); transition: rotate 0.45s var(--ease-spring), scale 0.45s var(--ease-spring), box-shadow 0.3s var(--ease-spring); } .about__disc::before { /* stitched inner ring = "seal" */ content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgb(24 24 22 / 0.28); } .about__badge-icon { position: relative; width: 52%; height: auto; overflow: visible; } .about__badge-label { max-width: 100%; font: 700 clamp(0.82rem, 0.95vw, 0.98rem)/1.15 var(--font-display); letter-spacing: 0.005em; color: var(--ink); text-wrap: balance; } @media (hover: hover) { .about__badge:hover .about__disc { rotate: -10deg; scale: 1.06; box-shadow: 6px 6px 0 var(--ink); } } /* ------------------------------------------------------------------------- divider (back layer, cream-2) */ .about__divider { bottom: -1px; --divider-h: clamp(40px, 6.4vw, 104px); --divider-fill: var(--cream-2); } /* --------------------------------------------------------------------------------------------- phones */ @media (max-width: 760px) { .about__word { top: 8px; right: -10vw; } .about__statement { max-width: none; } .about__collage { width: min(100%, 460px); } .about__quote { left: 0; bottom: 3%; max-width: 64%; } .about__pillar { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; } .about__pillar-icon { width: 72px; } .about__badges { gap: 18px 8px; } .about__badge { --d: 72px; width: calc((100% - 3 * 8px) / 4); } .about__badge-label { font-size: 0.78rem; } } @media (max-width: 380px) { .about__badge { --d: 64px; } .about__badge-label { font-size: 0.74rem; } } @media (prefers-reduced-motion: reduce) { .about__disc { transition: none; } } /* ========================================================================== assets/css/sections/products.css ========================================================================== */ /* ========================================================================================================== MUUSHO — Products catalog (#products + #product-modal) assets/css/sections/products.css Filter chips · tidy bento grid of tinted sticker cards (3D tilt + shine) · accessible details dialog. Everything is scoped to .section--products / .product-card / .product-modal. Tokens come from base.css. ========================================================================================================== */ /* ------------------------------------------------------------------------------------------------ section */ .section--products { --pc-gap: clamp(16px, 1.8vw, 26px); background: var(--cream); padding-bottom: calc(var(--section-pad) * 0.82); } .products__wave { --divider-fill: var(--cream); --divider-h: clamp(30px, 5vw, 78px); } .products__wave--bottom { --divider-h: clamp(26px, 4.2vw, 66px); } /* drips hanging from the bottom wave (fixed pixel size: never stretched like the wave itself) */ .products__drip { position: absolute; left: var(--x, 50%); top: 22%; width: 26px; height: calc(46px * var(--h, 1)); margin-left: -13px; color: var(--cream); pointer-events: none; } .products__drip::before { /* stem + round bulb, merging into the wave above */ content: ""; position: absolute; inset: 0 3px 0 3px; background: currentColor; border-radius: 0 0 999px 999px; -webkit-mask: radial-gradient(circle at 50% calc(100% - 9px), #000 9px, transparent 9.5px), linear-gradient(#000, #000) 50% 0 / 11px calc(100% - 12px) no-repeat, radial-gradient(ellipse 13px 14px at 50% 0, #000 98%, transparent 100%); mask: radial-gradient(circle at 50% calc(100% - 9px), #000 9px, transparent 9.5px), linear-gradient(#000, #000) 50% 0 / 11px calc(100% - 12px) no-repeat, radial-gradient(ellipse 13px 14px at 50% 0, #000 98%, transparent 100%); } .products__droplet { position: absolute; left: 50%; top: 100%; width: 11px; height: 13px; margin-left: -5.5px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--cream); opacity: 0; animation: products-drop 3.8s cubic-bezier(0.55, 0, 0.85, 0.4) 1.2s infinite; } .products__drip:nth-of-type(4) .products__droplet { animation-delay: 2.9s; animation-duration: 4.6s; } @keyframes products-drop { 0%, 55% { transform: translateY(-14px) scale(0.5); opacity: 0; } 62% { transform: translateY(-6px) scale(1); opacity: 1; } 100% { transform: translateY(70px) scale(0.9); opacity: 0; } } /* ----------------------------------------------------------------------------------------------- heading */ .products__head { max-width: none; margin-bottom: clamp(30px, 4vw, 56px); } .products__head-main { display: grid; gap: clamp(12px, 1.6vw, 22px); justify-items: start; } .products__title { max-width: 13ch; } .products__lead { max-width: 36rem; } @media (min-width: 1000px) { .products__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; column-gap: clamp(40px, 6vw, 110px); } .products__lead { justify-self: end; padding-bottom: 0.35em; } } /* ------------------------------------------------------------------------------------------------ toolbar */ .products__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-bottom: clamp(26px, 3.2vw, 44px); } .products__filters { display: flex; flex-wrap: wrap; gap: 10px 12px; min-width: 0; } .products__chip { padding-inline: 1.15em; } .products__chip.is-pop { animation: products-pop 0.42s var(--ease-spring); } @keyframes products-pop { 0% { scale: 1; } 40% { scale: 1.09; } 100% { scale: 1; } } .products__count { display: inline-flex; align-items: center; gap: 0.55em; margin: 0; color: var(--ink-soft); font: 700 var(--fs-small)/1.2 var(--font-body); white-space: nowrap; } .products__count-n { display: inline-grid; place-items: center; min-width: 2.15em; height: 2.15em; padding: 0 0.45em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--sun); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 0.98rem/1 var(--font-display); font-variant-numeric: tabular-nums; } .products__count-n.is-tick { animation: products-tick 0.5s var(--ease-spring); } @keyframes products-tick { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-5px) rotate(-8deg); } 100% { transform: none; } } @media (max-width: 640px) { .products__toolbar { flex-direction: column; align-items: flex-start; } .products__filters { gap: 9px 9px; } } /* ---------------------------------------------------------------------------------------------------- grid */ .products__grid { --cols: 1; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--pc-gap); align-items: stretch; } @media (min-width: 521px) { .products__grid { --cols: 2; } } @media (min-width: 900px) { .products__grid { --cols: 3; } } @media (min-width: 1280px) { .products__grid { --cols: 4; } } .products__item { display: flex; min-width: 0; grid-column: var(--start, auto) / span var(--span, 1); } .products__item.is-leaving { pointer-events: none; z-index: 0; } /* entrance: hidden only while products.js is about to animate the cards in */ html.js .products__grid.is-armed > .products__item:not(.is-in) { opacity: 0; } /* noscript list */ .products__noscript { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; } .products__noscript li { padding: 18px 22px; border: var(--outline); border-radius: var(--r-m); background: var(--milk); } /* ---------------------------------------------------------------------------------------------------- card */ .product-card { --card-bg: var(--tint-matsun); --card-accent: var(--apricot); --media-r: 22px; position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 10px; overflow: hidden; background: var(--card-bg); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-card); box-shadow: 5px 5px 0 var(--ink); transform-origin: 50% 55%; transition: transform 0.5s var(--ease-out), box-shadow 0.35s var(--ease-out); -webkit-tap-highlight-color: transparent; } .product-card.is-tilt { transition: box-shadow 0.35s var(--ease-out); will-change: transform; } .product-card:is(:hover, .is-hover), .product-card:has(.product-card__cta:focus-visible) { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); } .product-card:has(.product-card__cta:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 5px; } .product-card:active { box-shadow: 3px 3px 0 var(--ink); } /* media */ .product-card__media { position: relative; z-index: 1; aspect-ratio: 1 / 1; overflow: hidden; border: var(--bw-s) solid var(--ink); border-radius: var(--media-r); background: color-mix(in srgb, var(--card-bg) 55%, #fff); flex: none; } @media (max-width: 520px) { .product-card__media { aspect-ratio: 4 / 3; } } .product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(1.001); transition: transform 1.1s var(--ease-out), opacity 0.5s ease; } .product-card__media.is-cutout .product-card__img { object-fit: contain; padding: 10% 14%; filter: drop-shadow(0 18px 18px rgb(24 24 22 / 0.2)); } .product-card:is(:hover, .is-hover) .product-card__img, .product-card:has(.product-card__cta:focus-visible) .product-card__img { transform: scale(1.075); } /* "New" sticker */ .product-card__new { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4em 0.85em 0.4em 0.62em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--sun); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 600 0.86rem/1 var(--font-display); letter-spacing: 0.02em; transform: rotate(-7deg); transition: transform 0.45s var(--ease-spring); } .product-card__new-star { width: 1.05em; height: 1.05em; color: var(--ink); flex: none; } .product-card:is(:hover, .is-hover) .product-card__new { transform: rotate(4deg) scale(1.08); } /* body */ .product-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 16px 8px 6px; } .product-card__cat, .product-card__desc { display: none; } .product-card__cat { font: var(--fw-btn) 0.8rem/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .product-card__name { font-family: var(--font-display); font-weight: var(--fw-display-2); font-size: clamp(1.2rem, 1.2vw + 0.55rem, 1.42rem); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; } .product-card__hy { display: inline-flex; align-items: center; gap: 0.5em; margin-top: -4px; font: 600 0.98rem/1.25 'Noto Sans Armenian', var(--font-body); color: var(--ink-soft); letter-spacing: 0.01em; } .product-card__hy::before { content: ""; flex: none; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--card-accent); border: 1.5px solid var(--ink); } .product-card__desc { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; display: none; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .products__item.is-bare .product-card__desc { display: -webkit-box; -webkit-line-clamp: 3; } /* qualities: a quiet meta line with tiny check marks */ .product-card__tags { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 700 0.8rem/1.3 var(--font-body); color: var(--ink-soft); } .product-card__tags:empty { display: none; } .product-card__tag { display: inline-flex; align-items: center; gap: 0.38em; } .product-card__tag::before { content: ""; flex: none; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--meadow-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; } /* sizes */ .product-card__sizes { display: flex; flex-wrap: wrap; gap: 6px; } .product-card__sizes:empty { display: none; } .product-card__size { display: inline-flex; align-items: baseline; gap: 0.34em; padding: 0.34em 0.72em; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: var(--milk); font: 600 0.78rem/1.15 var(--font-body); white-space: nowrap; } .product-card__size b { font-weight: 800; } /* foot + whole-card hit area */ .product-card__foot { display: flex; align-items: center; margin-top: auto; padding-top: 6px; } .product-card__cta { display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; padding: 0 6px 0 18px; border: 2.5px solid var(--ink); border-radius: var(--r-pill); background: var(--milk); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font: var(--fw-btn) 1rem/1 var(--font-display); letter-spacing: 0.01em; transition: background-color 0.3s ease, color 0.3s ease; } .product-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; } .product-card__cta:focus-visible { outline: none; } .product-card__cta-icon { display: grid; place-items: center; width: 32px; height: 32px; border: var(--bw-s) solid var(--ink); border-radius: 50%; background: var(--card-accent); transition: transform 0.45s var(--ease-spring); } .product-card__cta-icon .icon { width: 18px; height: 18px; color: var(--ink); } .product-card:is(:hover, .is-hover) .product-card__cta, .product-card:has(.product-card__cta:focus-visible) .product-card__cta { background: var(--ink); color: var(--milk); } .product-card:is(:hover, .is-hover) .product-card__cta-icon, .product-card:has(.product-card__cta:focus-visible) .product-card__cta-icon { transform: translateX(3px) rotate(-8deg); } .product-card .product-card__cta::after { border-radius: calc(var(--r-card) - 3px); } /* cow spots peeking from the corner (like the spots on the logo letters) */ .product-card__spot { position: absolute; z-index: 0; right: -18px; bottom: -22px; --s: 74px; transform: rotate(-16deg); transition: transform 0.7s var(--ease-spring); } .product-card__spot--sm { right: 50px; bottom: 16px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); -webkit-mask: none; mask: none; transform: none; } .product-card:is(:hover, .is-hover) .product-card__spot { transform: rotate(-6deg) scale(1.08); } .product-card:is(:hover, .is-hover) .product-card__spot--sm { transform: translate(-3px, -5px); } /* shine sweep + pointer glare */ .product-card__shine { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; pointer-events: none; } .product-card__shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%; background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.5) 42%, rgb(255 255 255 / 0.75) 50%, rgb(255 255 255 / 0.5) 58%, rgb(255 255 255 / 0) 100%); transform: translateX(-130%) skewX(-14deg); opacity: 0.9; } .product-card.is-shine .product-card__shine::before, .product-card:has(.product-card__cta:focus-visible) .product-card__shine::before { animation: products-shine 1.05s var(--ease-out) both; } @keyframes products-shine { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(380%) skewX(-14deg); } } .product-card__shine::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / 0.42), rgb(255 255 255 / 0) 46%); opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: soft-light; } .product-card.is-tilt .product-card__shine::after { opacity: 1; } /* wide (bento) card: photo left, story right */ @media (min-width: 521px) { .products__item.is-wide .product-card { flex-direction: row; align-items: stretch; } .products__item.is-wide .product-card__media { aspect-ratio: auto; flex: 0 0 51%; min-height: 330px; } .products__item.is-wide .product-card__body { padding: 14px 10px 6px 24px; gap: 12px; } .products__item.is-wide .product-card__cat { display: block; margin-top: 4px; } .products__item.is-wide .product-card__name { font-size: clamp(1.45rem, 1.4vw + 0.7rem, 2rem); line-height: 1.05; } .products__item.is-wide .product-card__desc { display: -webkit-box; } .products__item.is-wide .product-card__spot { --s: 110px; right: -26px; bottom: -34px; } } @media (min-width: 521px) and (max-width: 760px) { .products__item.is-wide .product-card__media { flex-basis: 46%; min-height: 300px; } .products__item.is-wide .product-card__desc { -webkit-line-clamp: 3; } } /* ===================================================================================================== modal */ .product-modal { --pm-bg: var(--tint-matsun); --pm-accent: var(--apricot); } .product-modal .product-modal__backdrop { background: rgb(24 24 22 / 0.5); } .product-modal .product-modal__panel { width: min(100%, 1140px); height: min(800px, calc(100dvh - 48px)); max-height: none; padding: 0; overflow: hidden; border-radius: var(--r-l); transform: translateY(34px) scale(0.955); transition: transform 0.6s var(--ease-out); } .product-modal.is-open .product-modal__panel { transform: none; } .product-modal__body { display: grid; grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr); height: 100%; min-height: 0; } /* close */ .product-modal__close { position: absolute; top: 16px; right: 16px; z-index: 6; display: grid; place-items: center; width: 48px; height: 48px; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--milk); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform 0.35s var(--ease-spring), background-color 0.2s ease, box-shadow 0.2s ease; } .product-modal__close .icon { width: 22px; height: 22px; } .product-modal__close:hover { background: var(--sun); transform: rotate(90deg); box-shadow: 4px 4px 0 var(--ink); } .product-modal__close:active { transform: rotate(90deg) translate(2px, -2px); box-shadow: 1px 1px 0 var(--ink); } /* media column */ .product-modal__media { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--pm-bg); border-right: var(--bw) solid var(--ink); } .product-modal__stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; container-type: size; } .product-modal__word { position: absolute; inset: 4% 4% 8%; display: grid; place-items: center; font-family: 'Noto Sans Armenian', var(--font-display); font-weight: 800; font-size: 7rem; font-size: min(calc(100cqw / (var(--chars, 6) * 0.66)), calc(64cqh / var(--lines, 1))); line-height: 0.95; text-align: center; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--pm-accent) 60%, transparent); overflow-wrap: normal; user-select: none; pointer-events: none; opacity: 0; transform: scale(1.08); transition: opacity 0.9s ease 0.15s, transform 1.4s var(--ease-out) 0.1s; } .product-modal.is-open .product-modal__word { opacity: 1; transform: none; } .product-modal__glow { position: absolute; left: 50%; top: 48%; width: 74%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.55) 55%, rgb(255 255 255 / 0) 100%); } .product-modal__spot { position: absolute; z-index: 0; pointer-events: none; } .product-modal__spot--a { --s: 120px; left: -34px; top: -30px; transform: rotate(18deg); } .product-modal__spot--b { --s: 64px; right: 26px; bottom: 22px; transform: rotate(-24deg); } .product-modal__shadow { position: absolute; left: 50%; bottom: 9%; width: 44%; height: 7%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(24 24 22 / 0.3), rgb(24 24 22 / 0)); animation: products-shadow 5.6s ease-in-out infinite; } .product-modal__float { position: absolute; inset: 9% 12% 13%; animation: products-bob 5.6s ease-in-out infinite; } .product-modal__pop { position: absolute; inset: 0; transform: translateY(26px) scale(0.84) rotate(-6deg); opacity: 0; transition: transform 0.85s var(--ease-spring) 0.08s, opacity 0.45s ease 0.08s; } .product-modal.is-open .product-modal__pop { transform: none; opacity: 1; } .product-modal__fig { position: absolute; inset: 0; } .product-modal__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 28px 26px rgb(24 24 22 / 0.24)); } /* lifestyle photo instead of a cut-out (e.g. products without a cut-out) */ .product-modal__stage.is-photo .product-modal__float { inset: 8% 9% 10%; } .product-modal__stage.is-photo .product-modal__img { object-fit: cover; border: var(--bw) solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink); filter: none; } .product-modal__stage.is-photo .product-modal__shadow { opacity: 0; } @keyframes products-bob { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-12px) rotate(0.8deg); } } @keyframes products-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.82); opacity: 0.7; } } /* sizes */ .product-modal__sizes-wrap { position: relative; z-index: 1; display: grid; gap: 10px; padding: 16px clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 28px); border-top: var(--bw-s) solid var(--ink); background: color-mix(in srgb, var(--pm-bg) 60%, #fff); } .product-modal__sizes-wrap[hidden] { display: none; } .product-modal__label { font: var(--fw-btn) 0.78rem/1.2 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .product-modal__sizes { display: flex; flex-wrap: wrap; gap: 8px 10px; } .product-modal__size { gap: 0.4em; font-size: 0.88rem; } .product-modal__size b { font-weight: 700; } .product-modal__size span { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; opacity: 0.85; } /* info column */ .product-modal__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(30px, 3.6vw, 52px) clamp(24px, 3.6vw, 52px) clamp(26px, 3vw, 40px); scrollbar-gutter: stable; } .product-modal__info > * { max-width: 100%; } .product-modal__cat { margin-right: 56px; } .product-modal__title { margin-top: -4px; margin-right: 44px; font-size: clamp(1.9rem, 2.6vw, 2.75rem); line-height: 1.02; } .product-modal__hy { display: inline-flex; align-items: center; gap: 0.5em; margin-top: -6px; font: 600 1.18rem/1.25 'Noto Sans Armenian', var(--font-body); color: var(--ink-soft); } .product-modal__hy::before { content: ""; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--pm-accent); border: 1.5px solid var(--ink); } .product-modal__tags { display: flex; flex-wrap: wrap; gap: 8px; } .product-modal__tags:empty { display: none; } .product-modal__desc { font-size: 1.0625rem; line-height: 1.62; color: var(--ink-soft); max-width: 60ch; } .product-modal__block { display: grid; gap: 6px; width: 100%; } .product-modal__h { display: inline-flex; align-items: center; gap: 0.5em; font: var(--fw-display-2) 1.08rem/1.2 var(--font-display); letter-spacing: 0; } .product-modal__h svg { width: 1.3em; height: 1.3em; padding: 0.18em; border-radius: 50%; background: var(--sun); border: 1.5px solid var(--ink); color: var(--ink); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; box-sizing: content-box; overflow: visible; } .product-modal__text { color: var(--ink-soft); line-height: 1.6; } /* nutrition label */ .product-modal__nut-card { margin-top: 4px; padding: 14px 18px 12px; border: var(--bw-s) solid var(--ink); border-radius: 18px; background: #fff; max-width: 440px; } .product-modal__serving { font: 700 0.86rem/1.3 var(--font-body); color: var(--ink-soft); padding-bottom: 8px; border-bottom: 7px solid var(--ink); } .product-modal__table { width: 100%; font-size: 0.93rem; } .product-modal__table th, .product-modal__table td { padding: 0.42em 0; border-bottom: 1px solid rgb(24 24 22 / 0.18); vertical-align: baseline; } .product-modal__table tr:last-child :is(th, td) { border-bottom: 0; } .product-modal__table th { text-align: left; font-weight: 700; } .product-modal__table td { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; } .product-modal__table tr.is-major :is(th, td) { font: 700 1.12rem/1.2 var(--font-display); border-bottom: 4px solid var(--ink); padding-block: 0.4em 0.5em; } .product-modal__table tr.is-sub th { padding-left: 1.1em; font-weight: 600; } .product-modal__table tr.is-sub2 th { padding-left: 2.2em; font-weight: 600; } /* foot */ .product-modal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; width: 100%; margin-top: auto; padding-top: 18px; border-top: 2px dashed rgb(24 24 22 / 0.2); } .product-modal__cold { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.95em 0.45em 0.55em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--sky); font: 800 0.86rem/1.1 var(--font-body); } .product-modal__cold svg { width: 1.35em; height: 1.35em; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* staggered entrance of the info column */ .product-modal__info > * { opacity: 0; translate: 0 14px; transition: opacity 0.5s ease, translate 0.7s var(--ease-out); } .product-modal.is-open .product-modal__info > * { opacity: 1; translate: none; } .product-modal.is-open .product-modal__info > :nth-child(1) { transition-delay: 0.12s; } .product-modal.is-open .product-modal__info > :nth-child(2) { transition-delay: 0.16s; } .product-modal.is-open .product-modal__info > :nth-child(3) { transition-delay: 0.2s; } .product-modal.is-open .product-modal__info > :nth-child(4) { transition-delay: 0.24s; } .product-modal.is-open .product-modal__info > :nth-child(5) { transition-delay: 0.28s; } .product-modal.is-open .product-modal__info > :nth-child(6) { transition-delay: 0.32s; } .product-modal.is-open .product-modal__info > :nth-child(7) { transition-delay: 0.36s; } .product-modal.is-open .product-modal__info > :nth-child(n + 8) { transition-delay: 0.4s; } /* phones: a full-height sheet that slides up */ @media (max-width: 760px) { .product-modal { padding: 0; place-items: end stretch; } .product-modal .product-modal__panel { width: 100%; height: calc(100dvh - 10px); border-radius: 28px 28px 0 0; border-bottom: 0; box-shadow: 0 -12px 40px -12px rgb(24 24 22 / 0.45); transform: translateY(102%); transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1); } .product-modal.is-open .product-modal__panel { transform: none; } .product-modal__body { display: block; overflow-y: auto; overscroll-behavior: contain; } .product-modal__media { border-right: 0; border-bottom: var(--bw) solid var(--ink); } .product-modal__stage { flex: none; height: min(46dvh, 420px); } .product-modal__info { overflow: visible; padding: 24px 20px 30px; gap: 14px; } .product-modal__close { top: 12px; right: 12px; } .product-modal__title { margin-right: 0; } .product-modal__foot { position: sticky; bottom: 0; margin-inline: -20px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--milk); border-top: var(--bw-s) solid var(--ink); } .product-modal__find { flex: 1 1 auto; } } /* scroll lock while the dialog is open (Lenis also stops; this covers native scrolling) */ html:has(#product-modal.is-open) { overflow: hidden; } /* ------------------------------------------------------------------------------------------ reduced motion */ @media (prefers-reduced-motion: reduce) { .products__droplet, .product-modal__float, .product-modal__shadow { animation: none; } .product-card, .product-card__img, .product-card__spot, .product-card__new { transition: none; } .product-card:is(:hover, .is-hover) .product-card__img { transform: none; } .product-card__shine { display: none; } } html.reduced-motion .products__droplet, html.reduced-motion .product-modal__float, html.reduced-motion .product-modal__shadow { animation: none; } /* ========================================================================== assets/css/sections/gallery.css ========================================================================== */ /* ========================================================================================================== MUUSHO — Gallery (#gallery) SECTION S3 Bento grid of Muusho's own Instagram / Facebook photos + 2 autoplay-when-visible video tiles, an accessible lightbox (.gallery__lightbox, moved to by gallery.js) and the follow buttons. Layout: explicit grid-template-areas per breakpoint (2 / 4 / 5 columns); tiles carry data-area="…". ========================================================================================================== */ .section--gallery { --gallery-gap: clamp(10px, 1.1vw, 16px); --gallery-radius: clamp(16px, 1.7vw, 24px); position: relative; background: var(--milk); overflow-x: clip; } .gallery__sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* ------------------------------------------------------------------------------------------------- head */ /* same rhythm as the Products head: kicker + title left, lead right (≥1000px) */ .gallery__head { max-width: none; margin-bottom: clamp(36px, 4.6vw, 68px); } .gallery__head-main { display: grid; gap: clamp(12px, 1.6vw, 22px); justify-items: start; } .gallery__title { max-width: 13ch; } .gallery__lead { max-width: 36rem; } @media (min-width: 1000px) { .gallery__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; column-gap: clamp(40px, 6vw, 110px); } .gallery__lead { justify-self: end; padding-bottom: 0.35em; } } /* rotating "Follow the herd" sticker slapped on the top-right corner of the photo wall */ .gallery__ring { --size: clamp(96px, 9.4vw, 142px); --ring-bg: var(--sun); --ring-speed: 22s; position: absolute; z-index: 3; top: calc(var(--size) * -0.46); right: calc(var(--size) * -0.16); rotate: -9deg; text-decoration: none; transition: rotate 0.5s var(--ease-spring), box-shadow 0.3s var(--ease-spring), translate 0.3s var(--ease-spring); } .gallery__ring .sticker-ring__text text { font-size: 17.5px; letter-spacing: 0.1em; } .gallery__ring .sticker-ring__center { width: 44%; height: 44%; background: var(--milk); } .gallery__ring .sticker-ring__center .icon { width: 50%; height: auto; aspect-ratio: 1 / 1; } .gallery__ring:hover { rotate: 6deg; translate: -2px -2px; box-shadow: var(--shadow-sticker-l); } /* ------------------------------------------------------------------------------------------------- grid */ .gallery__wall { position: relative; container-type: inline-size; } .gallery__grid { --cols: 2; --row-ratio: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: clamp(140px, 42vw, 260px); grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gallery-gap)) / var(--cols) * var(--row-ratio)); gap: var(--gallery-gap); grid-template-areas: "a a" "a a" "v1 b" "v1 b" "c d" "g g" "g g" "t v2" "t v2" "i j"; } .gallery__item { position: relative; min-width: 0; min-height: 0; --reveal-y: 56px; } .gallery__item[data-area="a"] { grid-area: a; } .gallery__item[data-area="v1"] { grid-area: v1; } .gallery__item[data-area="b"] { grid-area: b; } .gallery__item[data-area="c"] { grid-area: c; } .gallery__item[data-area="d"] { grid-area: d; } .gallery__item[data-area="e"] { grid-area: e; } .gallery__item[data-area="f"] { grid-area: f; } .gallery__item[data-area="g"] { grid-area: g; } .gallery__item[data-area="h"] { grid-area: h; } .gallery__item[data-area="t"] { grid-area: t; } .gallery__item[data-area="i"] { grid-area: i; } .gallery__item[data-area="v2"] { grid-area: v2; } .gallery__item[data-area="j"] { grid-area: j; } .gallery__item[data-area="k"] { grid-area: k; } .gallery__item[data-area="l"] { grid-area: l; } /* phones show a curated 10; the rest stay one swipe away in the lightbox */ .gallery__item:is([data-area="e"], [data-area="f"], [data-area="h"], [data-area="k"], [data-area="l"]) { display: none; } @media (min-width: 640px) { .gallery__grid { --cols: 4; grid-template-areas: "a a v1 b" "a a v1 b" "c d g g" "t e g g" "t f h v2" "i k k v2" "j k k l"; } .gallery__item:is([data-area="e"], [data-area="f"], [data-area="h"], [data-area="k"], [data-area="l"]) { display: block; } } @media (min-width: 1100px) { .gallery__grid { --cols: 5; grid-template-areas: "a a v1 b c" "a a v1 b d" "e f g g h" "t i g g v2" "t j k l v2"; } } /* ------------------------------------------------------------------------------------------------- tile */ .gallery__tile { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border: var(--bw-s) solid var(--ink); border-radius: var(--gallery-radius); background: var(--cream-2); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 var(--ink); -webkit-tap-highlight-color: transparent; transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-spring); } @media (min-width: 640px) { .gallery__tile { border-width: var(--bw); } } .gallery__media { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; } .gallery__img, .gallery__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); /* reveal: the photo settles from a gentle zoom while its tile rises in (--rv is tweened by core.js) */ scale: calc(1.16 - 0.16 * var(--rv, 1)); transition: transform 1.1s var(--ease-out), opacity 0.6s ease; } .gallery__video { opacity: 0; background: transparent; pointer-events: none; } .gallery__tile.is-playing .gallery__video { opacity: 1; } /* subtle inner sheen so every photo reads as a glossy sticker */ .gallery__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / 0) 55%, rgb(24 24 22 / 0.22) 100%); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .gallery__glyph { position: absolute; top: clamp(8px, 1vw, 14px); right: clamp(8px, 1vw, 14px); z-index: 2; display: grid; place-items: center; width: clamp(34px, 3vw, 42px); height: clamp(34px, 3vw, 42px); border: var(--bw-s) solid var(--ink); border-radius: 50%; background: var(--milk); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); opacity: 0; transform: scale(0.4) rotate(-40deg); transition: opacity 0.25s ease, transform 0.5s var(--ease-spring); pointer-events: none; } .gallery__glyph .icon { width: 54%; height: auto; aspect-ratio: 1 / 1; } .gallery__badge { position: absolute; left: clamp(8px, 1vw, 14px); bottom: clamp(8px, 1vw, 14px); z-index: 2; display: inline-flex; align-items: center; gap: 0.38em; padding: 0.38em 0.8em 0.38em 0.6em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--sun); color: var(--ink); font: 700 0.78rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); pointer-events: none; } .gallery__badge .icon { width: 1.05em; height: 1.05em; } .gallery__tile.is-playing .gallery__badge .icon { animation: gallery-pulse 1.6s ease-in-out infinite; } /* "+5" on the last phone tile: there is more inside the lightbox */ .gallery__more { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: inherit; background: rgb(24 24 22 / 0.5); color: var(--milk); font: 700 clamp(1.9rem, 9vw, 2.6rem)/1 var(--font-display); letter-spacing: -0.02em; text-shadow: 3px 3px 0 var(--ink); pointer-events: none; } @media (min-width: 640px) { .gallery__more { display: none !important; } } /* hover / focus: lift like a peeled sticker, photo zooms gently, Instagram glyph pops */ @media (hover: hover) and (pointer: fine) { .gallery__tile:hover { transform: translate(-4px, -4px); box-shadow: 7px 7px 0 var(--ink); z-index: 2; } .gallery__tile:hover :is(.gallery__img, .gallery__video) { transform: scale(1.065); } .gallery__tile:hover::after { opacity: 1; } .gallery__tile:hover .gallery__glyph { opacity: 1; transform: none; } } .gallery__tile:focus-visible { transform: translate(-4px, -4px); box-shadow: 7px 7px 0 var(--ink); outline-offset: 4px; z-index: 2; } .gallery__tile:focus-visible .gallery__glyph { opacity: 1; transform: none; } .gallery__tile:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); transition-duration: 0.08s; } /* ---------------------------------------------------------------------------------------------- actions */ .gallery__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; margin-top: clamp(40px, 5vw, 72px); } .gallery__btn .icon { width: 1.25em; height: 1.25em; } @media (max-width: 479px) { .gallery__actions { flex-direction: column; align-items: stretch; } .gallery__btn { width: 100%; } } /* ---------------------------------------------------------------------------------------------- phones */ @media (max-width: 639px) { .gallery__ring { --size: 84px; top: -58px; right: -6px; } } /* ============================================================================================ LIGHTBOX */ .gallery__lightbox { /* base .modal gives: fixed, inset 0, z-index modal, visibility/opacity toggling via .is-open */ display: block; padding: 0; opacity: 1; color: var(--milk); transition: visibility 0s linear 0.46s; -webkit-user-select: none; user-select: none; } .gallery__lightbox.is-open { opacity: 1; visibility: visible; transition: visibility 0s; } .gallery__lb-backdrop { position: absolute; inset: 0; background: rgb(24 24 22 / 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.42s ease; } .gallery__lightbox.is-open .gallery__lb-backdrop { opacity: 1; } .gallery__lb-bar { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + clamp(12px, 2vw, 22px)) var(--gutter) 0; pointer-events: none; } .gallery__lb-bar > * { pointer-events: auto; } .gallery__lb-count { display: inline-flex; align-items: baseline; gap: 0.35em; padding: 0.42em 0.95em; border: var(--bw-s) solid rgb(255 253 247 / 0.28); border-radius: var(--r-pill); font: 700 1.02rem/1 var(--font-brand); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--milk); } .gallery__lb-sep { opacity: 0.5; } .gallery__lb-btn { display: grid; place-items: center; width: 52px; height: 52px; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--milk); color: var(--ink); box-shadow: 4px 4px 0 var(--sun); transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring), background-color 0.2s ease, opacity 0.35s ease; touch-action: manipulation; } .gallery__lb-btn .icon { width: 24px; height: 24px; } .gallery__lb-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sun); background: var(--sun); } .gallery__lb-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sun); } .gallery__lb-btn:focus-visible { outline-color: var(--sun); outline-offset: 4px; } .gallery__lb-close:hover .icon { transform: rotate(90deg); } .gallery__lb-close .icon { transition: transform 0.4s var(--ease-spring); } .gallery__lb-nav { position: absolute; top: 50%; z-index: 3; translate: 0 -50%; } .gallery__lb-nav--prev { left: clamp(12px, 2.2vw, 32px); } .gallery__lb-nav--next { right: clamp(12px, 2.2vw, 32px); } /* chrome fades in after the photo has landed */ .gallery__lb-bar, .gallery__lb-nav { opacity: 0; transition: opacity 0.3s ease; } .gallery__lightbox.is-open :is(.gallery__lb-bar, .gallery__lb-nav) { opacity: 1; transition: opacity 0.45s ease 0.18s; } .gallery__lb-stage { position: absolute; inset: calc(env(safe-area-inset-top, 0px) + 84px) clamp(84px, 8vw, 128px) calc(env(safe-area-inset-bottom, 0px) + 28px); z-index: 2; touch-action: none; cursor: grab; } .gallery__lb-stage:active { cursor: grabbing; } html.has-cursor .gallery__lb-stage { cursor: none; } .gallery__lb-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin: 0; will-change: transform, opacity; } .gallery__lb-media { display: block; flex: none; object-fit: contain; width: auto; height: auto; max-width: 100%; max-height: calc(100% - var(--lb-caption-h, 4rem)); min-height: 0; border-radius: clamp(14px, 1.6vw, 22px); background: rgb(255 253 247 / 0.06); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 253 247 / 0.08); transform-origin: 50% 50%; -webkit-user-drag: none; } video.gallery__lb-media { background: #000; } .gallery__lb-caption { flex: none; max-width: min(62ch, 100%); min-height: 2.6em; padding-inline: 8px; color: rgb(255 253 247 / 0.86); font-size: var(--fs-small); line-height: 1.45; text-align: center; text-wrap: balance; transition: opacity 0.4s ease; } .gallery__lb-slide.is-morphing .gallery__lb-caption { opacity: 0; } @media (max-width: 760px) { .gallery__lb-slide { --lb-caption-h: 5.6rem; } .gallery__lb-stage { inset: calc(env(safe-area-inset-top, 0px) + 76px) 12px calc(env(safe-area-inset-bottom, 0px) + 100px); } .gallery__lb-nav { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); translate: none; } .gallery__lb-nav--prev { left: calc(50% - 68px); } .gallery__lb-nav--next { right: calc(50% - 68px); } .gallery__lb-btn { width: 50px; height: 50px; } } /* ------------------------------------------------------------------------------------- reduced motion */ html.reduced-motion .gallery__img, html.reduced-motion .gallery__video { scale: none; transition: none; } html.reduced-motion .gallery__tile, html.reduced-motion .gallery__tile:hover { transition: none; } html.reduced-motion .gallery__tile:hover :is(.gallery__img, .gallery__video) { transform: none; } html.reduced-motion .gallery__ring { transition: none; } html.reduced-motion .gallery__tile.is-playing .gallery__badge .icon { animation: none; } @keyframes gallery-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.78); } } @media print { .gallery__lightbox, .gallery__ring, .gallery__video, .gallery__glyph, .gallery__badge { display: none !important; } .gallery__grid { grid-auto-rows: 160px; } } /* ========================================================================== assets/css/sections/contact.css ========================================================================== */ /* ========================================================================================================== MUUSHO — Contact (#contact) SECTION S3 "Message us" card (Instagram / Facebook DMs — or the mailto form when config.contact.email is set), "Where to buy" card (stores from config.js + Instacart), wholesale card with the 32 lb pails, and the location line: a small illustrated LA skyline standing on the footer's green hills. ========================================================================================================== */ .section--contact { --contact-gap: clamp(18px, 2.2vw, 30px); position: relative; background: var(--cream); padding-bottom: 0; /* the skyline sits right on the footer's meadow wave */ overflow-x: clip; } .contact__wave { --divider-fill: var(--cream); } .contact__sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* ------------------------------------------------------------------------------------------------- head */ .contact__head { max-width: none; margin-bottom: clamp(36px, 4.6vw, 68px); } .contact__head-main { display: grid; gap: clamp(12px, 1.6vw, 22px); justify-items: start; } .contact__title { max-width: 12ch; } .contact__lead { max-width: 34rem; } @media (min-width: 1000px) { .contact__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; column-gap: clamp(40px, 6vw, 110px); } .contact__lead { justify-self: end; padding-bottom: 0.35em; } } /* ----------------------------------------------------------------------------------------------- layout */ .contact__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--contact-gap); align-items: stretch; } @media (min-width: 900px) { .contact__layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } .contact__card--wholesale { grid-column: 1 / -1; } } .contact__card { position: relative; isolation: isolate; min-width: 0; border: var(--bw) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-sticker); padding: clamp(22px, 3.2vw, 46px); color: var(--ink); } .contact__card-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.04; letter-spacing: var(--ls-display); text-wrap: balance; } .contact__card-text { margin-top: 14px; color: var(--ink-soft); max-width: 46ch; } /* ======================================================================================= message card */ .contact__card--message { --focus-ring: var(--ink); display: flex; flex-direction: column; background: var(--meadow); overflow: hidden; } .contact__spot { position: absolute; z-index: -1; color: var(--meadow-700); opacity: 0.55; } .contact__spot--1 { --s: clamp(150px, 16vw, 230px); top: -46px; right: -38px; rotate: 18deg; } .contact__spot--2 { --s: clamp(70px, 7vw, 104px); bottom: 74px; right: 22%; rotate: -24deg; opacity: 0.4; } .contact__dm-text { max-width: 22ch; font-family: var(--font-display); font-weight: var(--fw-display-2); font-size: clamp(1.45rem, 2.3vw, 2.05rem); line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; } /* base.css resets ul[class] margins (0,1,1) — the section prefix keeps these list spacings */ .section--contact .contact__dm-list { display: grid; gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(22px, 2.8vw, 36px); } .contact__dm-btn { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); min-height: 78px; padding: 11px 12px 11px 11px; border: var(--bw) solid var(--ink); border-radius: var(--r-pill); background: var(--milk); color: var(--ink); text-decoration: none; box-shadow: 5px 5px 0 var(--ink); touch-action: manipulation; transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-spring), background-color 0.25s ease; } .contact__dm-icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--milk); transition: transform 0.45s var(--ease-spring), background-color 0.25s ease, color 0.25s ease; } .contact__dm-icon .icon { width: 26px; height: 26px; } .contact__dm-copy { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; } .contact__dm-label { font-family: var(--font-display); font-weight: var(--fw-btn); font-size: clamp(1.1rem, 1.45vw, 1.32rem); line-height: 1.12; } .contact__dm-handle { font: 700 0.9rem/1.2 var(--font-body); color: var(--ink-soft); overflow-wrap: anywhere; } .contact__dm-go { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: var(--bw-s) solid var(--ink); border-radius: 50%; background: var(--sun); transition: transform 0.4s var(--ease-spring); } .contact__dm-go .icon { width: 22px; height: 22px; } .contact__dm-btn:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); background: var(--sun); } .contact__dm-btn:hover .contact__dm-icon { transform: rotate(-10deg) scale(1.06); } .contact__dm-btn:hover .contact__dm-go { transform: translateX(4px); background: var(--milk); } .contact__dm-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); transition-duration: 0.08s; } .contact__dm-btn:focus-visible { outline-offset: 5px; } /* direct lines (email / phone / WhatsApp) — only when configured */ .section--contact .contact__lines { display: grid; gap: 10px; margin-top: clamp(18px, 2vw, 26px); } .contact__line { display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--milk); color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-spring), background-color 0.2s ease; } .contact__line:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: var(--sun); } .contact__line-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--milk); } .contact__line-icon .icon { width: 20px; height: 20px; } .contact__line-copy { display: grid; min-width: 0; } .contact__line-label { font: 800 0.72rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .contact__line-value { font: 700 1rem/1.25 var(--font-body); overflow-wrap: anywhere; } .contact__follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: auto; padding-top: clamp(26px, 3vw, 40px); } .contact__card--message .contact__follow { border-top: 0; } .contact__dm + .contact__lines:not([hidden]) ~ .contact__follow, .contact__dm ~ .contact__follow { margin-top: auto; } .contact__follow::before { content: ""; flex: 1 0 100%; height: 0; margin-bottom: clamp(8px, 1vw, 14px); border-top: 2px dashed rgb(24 24 22 / 0.32); order: -1; } .contact__follow-label { font: 800 0.8rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; } .contact__social { gap: 12px; } .contact__social a { background: var(--milk); } /* the mailto form (shown instead of the DM buttons when config.contact.email is set) */ .contact__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; } @media (min-width: 560px) { .contact__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact__field--full { grid-column: 1 / -1; } } .contact__field { display: grid; gap: 7px; min-width: 0; } .contact__label { font: 800 0.8rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; } .contact__input { width: 100%; min-height: 54px; padding: 0.8em 1em; border: var(--bw-s) solid var(--ink); border-radius: 16px; background: var(--milk); color: var(--ink); font: 600 1rem/1.35 var(--font-body); box-shadow: 3px 3px 0 var(--ink); transition: box-shadow 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), border-color 0.2s ease; } .contact__input::placeholder { color: var(--muted); } .contact__input:hover { box-shadow: 4px 4px 0 var(--ink); } .contact__input:focus { outline: none; } .contact__input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 5px 5px 0 var(--ink); } .contact__input[aria-invalid="true"] { border-color: var(--barn); box-shadow: 3px 3px 0 var(--barn); } .contact__textarea { min-height: 150px; resize: vertical; } .contact__select { position: relative; display: block; } .contact__select select { appearance: none; -webkit-appearance: none; padding-right: 2.8em; cursor: pointer; } .contact__select::after { content: ""; position: absolute; right: 1.1em; top: 50%; width: 0.62em; height: 0.62em; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); translate: 0 -70%; rotate: 45deg; pointer-events: none; } .contact__form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; } .contact__status { font-weight: 800; } .contact__status:empty { display: none; } .contact__status.is-error, .contact__status.is-sent { padding: 0.55em 1em; border: var(--bw-s) solid var(--ink); border-radius: 14px; background: var(--milk); box-shadow: 3px 3px 0 var(--ink); } .contact__status.is-error { border-color: var(--barn); box-shadow: 3px 3px 0 var(--barn); } /* ========================================================================================= stores card */ .contact__card--stores { background: var(--milk); display: flex; flex-direction: column; } .contact__stores-kicker { margin-bottom: 14px; } .contact__stores { margin-top: clamp(20px, 2.4vw, 30px); } .contact__stores-title { font: 800 0.8rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .section--contact .contact__store-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .contact__store-list li { min-width: 0; max-width: 100%; } .contact__store { display: inline-flex; align-items: center; gap: 0.5em; max-width: 100%; min-height: 42px; padding: 0.45em 0.95em 0.45em 0.75em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--cream); color: var(--ink); font: 700 0.93rem/1.2 var(--font-body); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring), background-color 0.2s ease; } .contact__store .icon { width: 1.1em; height: 1.1em; flex: none; } .contact__store-name { min-width: 0; overflow-wrap: anywhere; } .contact__store--addr { border-radius: 22px; padding-block: 0.5em; } .contact__store-addr { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); } .contact__store-area { flex: none; padding: 0.2em 0.55em; border-radius: var(--r-pill); background: var(--meadow-300); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; } a.contact__store:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); background: var(--sun); } a.contact__store:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); } .contact__buy { margin-top: clamp(22px, 2.6vw, 32px); } .contact__ask { margin-top: auto; padding-top: clamp(20px, 2.4vw, 28px); color: var(--muted); font-size: var(--fs-small); max-width: 44ch; } .contact__buy + .contact__ask { margin-top: 0; } .contact__card--stores > .contact__ask { margin-top: auto; } /* ====================================================================================== wholesale card */ .contact__card--wholesale { --focus-ring: var(--sun); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; align-items: center; margin-top: clamp(64px, 7vw, 92px); /* room for the pails popping out of the card */ padding-top: clamp(150px, 30vw, 200px); background: var(--ink); color: var(--milk); box-shadow: 6px 6px 0 var(--meadow); } .contact__wholesale-print { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--cow-milk-img); background-size: 260px 260px; background-position: 30px -40px; opacity: 0.07; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, #000 70%); pointer-events: none; } .contact__wholesale-art { position: absolute; top: clamp(-84px, -9vw, -60px); left: 50%; width: clamp(220px, 46vw, 270px); height: clamp(210px, 44vw, 260px); translate: -50% 0; pointer-events: none; } .contact__pail { position: absolute; bottom: 0; width: auto; max-width: none; filter: drop-shadow(0 18px 18px rgb(0 0 0 / 0.45)); } .contact__pail--back { left: 0; height: 92%; rotate: -7deg; } .contact__pail--front { right: 0; height: 84%; rotate: 6deg; } .contact__wholesale-copy .contact__card-title { color: var(--milk); } .contact__wholesale-copy .contact__card-text { color: rgb(255 253 247 / 0.82); max-width: 52ch; } .contact__wholesale-cta { justify-self: start; --btn-shadow: var(--meadow); } @media (min-width: 900px) { .contact__card--wholesale { grid-template-columns: minmax(0, 1fr) auto; padding-top: clamp(30px, 3.2vw, 46px); padding-left: clamp(250px, 24vw, 330px); margin-top: clamp(40px, 4vw, 64px); } .contact__wholesale-art { top: auto; bottom: 10px; left: clamp(22px, 2.6vw, 40px); translate: none; width: clamp(200px, 19vw, 260px); height: clamp(220px, 21vw, 290px); } .contact__wholesale-cta { justify-self: end; } } /* ===================================================================== location: LA on the footer hills */ .contact__place { position: relative; display: grid; justify-items: center; margin-top: clamp(64px, 8vw, 120px); } .contact__place-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.62em 1.15em; border: var(--bw-s) solid var(--ink); border-radius: var(--r-pill); background: var(--milk); font: 700 clamp(0.8rem, 0.95vw, 0.92rem)/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: var(--shadow-sticker-s); rotate: -2deg; } .contact__place-label::before, .contact__place-label::after { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--meadow); border: 1.5px solid var(--ink); } .contact__skyline { width: clamp(320px, 46vw, 640px); height: auto; margin-top: clamp(-6px, -0.4vw, -2px); overflow: hidden; /* soften the hills where the drawing ends, so they melt into the cream instead of stopping in a hard edge */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); } .contact__fronds { transform-box: view-box; } .contact__place.is-live .contact__fronds { animation: contact-sway 5.6s var(--ease-in-out) infinite alternate; } .contact__place.is-live .contact__palm--2 .contact__fronds { animation-duration: 6.4s; animation-delay: -2s; } .contact__place.is-live .contact__palm--3 .contact__fronds { animation-duration: 4.8s; animation-delay: -1s; } .contact__place.is-live .contact__cloud--1 { animation: contact-drift 14s ease-in-out infinite alternate; } .contact__place.is-live .contact__cloud--2 { animation: contact-drift 18s ease-in-out infinite alternate-reverse; } @keyframes contact-sway { from { rotate: -4deg; } to { rotate: 4deg; } } @keyframes contact-drift { from { translate: -10px 0; } to { translate: 14px 0; } } /* ------------------------------------------------------------------------- magnetic (core sets --mx/--my) */ .section--contact [data-magnetic].is-magnet { translate: var(--mx, 0px) var(--my, 0px); } /* --------------------------------------------------------------------------------------------- phones */ @media (max-width: 559px) { .contact__dm-btn { min-height: 70px; gap: 12px; padding: 9px 10px 9px 9px; } .contact__dm-icon { width: 48px; height: 48px; } .contact__dm-go { width: 40px; height: 40px; } .contact__follow { justify-content: flex-start; } .contact__wholesale-cta { width: 100%; } } /* ------------------------------------------------------------------------------------- reduced motion */ html.reduced-motion .contact__place .contact__fronds, html.reduced-motion .contact__place .contact__cloud { animation: none !important; } html.reduced-motion :is(.contact__dm-btn, .contact__store, .contact__line, .contact__dm-icon, .contact__dm-go) { transition: none; } @media print { .contact__skyline, .contact__spot, .contact__wholesale-art, .contact__wholesale-print { display: none !important; } .contact__card { box-shadow: none; } .contact__card--message, .contact__card--wholesale { background: #fff; color: #000; } }