/* Tiny Girl Gang - Contact page (production CSS for GHL + local) */ /* === shared/css/scrollbar.css === */ /* Tiny Girl Gang — sitewide scrollbar Lavender thumb on a soft/transparent track (matches category + sale rails). */ :root { --scrollbar-size: 8px; --scrollbar-thumb: #dca3ed; --scrollbar-thumb-hover: #c88de0; --scrollbar-track: transparent; } html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, var(--color-lavender, var(--tgg-lavender, #dca3ed))) var(--scrollbar-track, transparent); } *::-webkit-scrollbar { width: var(--scrollbar-size, 8px); height: var(--scrollbar-size, 8px); } *::-webkit-scrollbar-track { background: var(--scrollbar-track, transparent); } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb, var(--color-lavender, var(--tgg-lavender, #dca3ed))); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: var( --scrollbar-thumb-hover, var(--color-lavender-deep, #c88de0) ); } *::-webkit-scrollbar-corner { background: transparent; } /* === /shared/css/scrollbar.css === */ /* Built by deploy/ghl-contact/build.mjs - edit contact.page.css + shared CSS, then rebuild. */ /* === GHL bridge: page styles live on .page-contact (not ) === */ .page-contact { margin: 0; font-family: var(--font-body-contact, var(--font-sans, system-ui, sans-serif)); font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.6; color: var(--tgg-ink, var(--color-ink, #30123d)); background-color: var(--tgg-cream, var(--color-cream, #faf6ee)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .page-contact *, .page-contact *::before, .page-contact *::after { box-sizing: border-box; } .page-contact img, .page-contact svg { display: block; max-width: 100%; height: auto; } .page-contact a { color: inherit; } .page-contact ul, .page-contact ol { margin: 0; padding: 0; list-style: none; } .page-contact h1, .page-contact h2, .page-contact h3, .page-contact p { margin: 0; } .page-contact button { font: inherit; cursor: pointer; } /* === shared/css/styles.css === */ /* ========================================================================== Tiny Girl Gang MPLS — Phase 1 Static Styles ========================================================================== */ /* --- Design Tokens --- */ :root { --color-lavender: #dca3ed; --color-cream: #faf6ee; --color-purple: #4e0c6b; --color-orange: #f16a3a; --color-ink: #30123d; --color-white: #ffffff; --color-border: rgba(48, 18, 61, 0.18); --color-border-strong: rgba(48, 18, 61, 0.35); --color-overlay: rgba(30, 8, 40, 0.55); --color-lavender-soft: #e8c4f2; --color-lavender-deep: #c88de0; --color-lavender-card: #d9c0d8; --color-hero-script: #755080; --color-hero-orange: #dc6b50; --font-display: "Shrikhand", "Georgia", serif; --font-serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif; --font-sans: "DM Sans", "Segoe UI", system-ui, sans-serif; --font-script: "Allura", "Segoe Script", cursive; --container-max: 72rem; --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem); --space-sm: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); --space-md: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); --space-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem); --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem); --space-2xl: clamp(3rem, 2rem + 5vw, 6rem); --space-section: clamp(2rem, 1.65rem + 1.25vw, 2.75rem); --radius-sm: 2px; --radius-md: 4px; --border-thin: 1px solid var(--color-border-strong); --shadow-soft: 0 4px 24px rgba(48, 18, 61, 0.08); --transition: 180ms ease; --header-height: 5.75rem; --header-height-mobile: 4.25rem; --touch-min: 2.75rem; --bp-tablet: 800px; --bp-desktop-nav: 900px; /* Placeholder aspect ratios */ --ratio-hero: 16 / 9; --ratio-story: 4 / 5; --ratio-category: 1 / 1; --ratio-product: 3 / 4; --ratio-editorial: 21 / 9; --ratio-market: 16 / 10; --ratio-tote: 3 / 4; --ratio-offer: 4 / 3; --hero-card-ratio: 0.74; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.6; color: var(--color-ink); background-color: var(--color-cream); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin: 0; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .container { width: min(100% - 2rem, var(--container-max)); margin-inline: auto; } .section { padding-block: var(--space-section); } .section--compact-top { padding-top: clamp(1rem, 0.75rem + 1vw, 1.5rem); } .brand-intro.section { padding-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); } .script { font-family: var(--font-script); font-weight: 400; color: var(--color-orange); } /* --- Skip Link --- */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); z-index: 9999; padding: 0.75rem 1rem; background: var(--color-purple); color: var(--color-white); text-decoration: none; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-sm); } .skip-link:focus { top: var(--space-sm); } /* --- Focus --- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; } /* --- Placeholder System --- */ .placeholder { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; border: var(--border-thin); background: linear-gradient(145deg, var(--color-lavender-soft) 0%, var(--color-cream) 45%, var(--color-lavender) 100%); } .placeholder__label { position: relative; z-index: 1; padding: 0.2rem 0.45rem; font-family: var(--font-sans); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(78, 12, 107, 0.55); background: rgba(250, 246, 238, 0.65); border: 1px solid rgba(48, 18, 61, 0.12); border-radius: var(--radius-sm); } .editorial-brand-collage .placeholder__label { position: absolute; bottom: 0.5rem; right: 0.75rem; opacity: 0.45; background: rgba(48, 18, 61, 0.35); color: rgba(250, 246, 238, 0.7); border-color: transparent; } .hero-market-scene { width: 100%; height: 100%; min-height: clamp(12rem, 34vw, 18rem); aspect-ratio: auto; border: none; } .hero-market-scene .placeholder__label { position: absolute; bottom: 0.5rem; right: 0.75rem; opacity: 0.4; } .story-editorial-image { aspect-ratio: var(--ratio-story); } .category-vintage-found, .category-apparel-textiles, .category-handmade-goods, .category-jewelry-accessories, .category-crystals-curiosities { aspect-ratio: var(--ratio-category); } .category-vintage-found { background: linear-gradient(160deg, #e8d5c4 0%, var(--color-cream) 50%, var(--color-lavender-soft) 100%); } .category-apparel-textiles { background: linear-gradient(160deg, var(--color-lavender-soft) 0%, #f0e6d8 50%, var(--color-cream) 100%); } .category-handmade-goods { background: linear-gradient(160deg, #d4c4b0 0%, var(--color-cream) 50%, var(--color-lavender) 100%); } .category-jewelry-accessories { background: linear-gradient(160deg, var(--color-cream) 0%, var(--color-lavender-soft) 50%, #c9b8a8 100%); } .category-crystals-curiosities { background: linear-gradient(160deg, var(--color-lavender) 0%, var(--color-cream) 50%, var(--color-lavender-deep) 100%); } .product-one, .product-two, .product-three, .product-four, .sale-one, .sale-two, .sale-three { aspect-ratio: var(--ratio-product); } .sale-one { background: linear-gradient(180deg, #f0e4dc 0%, var(--color-lavender-soft) 100%); } .sale-two { background: linear-gradient(180deg, #f5d8e4 0%, var(--color-cream) 100%); } .sale-three { background: linear-gradient(180deg, #f8ebe0 0%, #e8d4c8 100%); } .offer-ritual-kit, .offer-tgg-closet { aspect-ratio: var(--ratio-offer); min-height: 100%; border: none; border-radius: 0; } .offer-ritual-kit { background: linear-gradient(145deg, #e8ddd0 0%, var(--color-cream) 45%, var(--color-lavender-soft) 100%); } .offer-tgg-closet { background: linear-gradient(145deg, var(--color-lavender-soft) 0%, #f0e6d8 50%, var(--color-cream) 100%); } .product-one { background: linear-gradient(180deg, #f5ebe0 0%, var(--color-lavender-soft) 100%); } .product-two { background: linear-gradient(180deg, #e8ddd0 0%, var(--color-cream) 100%); } .product-three { background: linear-gradient(180deg, var(--color-lavender-soft) 0%, #d4c8bc 100%); } .product-four { background: linear-gradient(180deg, #ddd0e8 0%, var(--color-lavender) 100%); } .editorial-brand-collage { aspect-ratio: auto; height: 100%; min-height: clamp(11rem, 28vw, 18rem); border: none; background: linear-gradient(180deg, #2a1038 0%, #4e0c6b 40%, #30123d 100%); } .market-booth-image { aspect-ratio: var(--ratio-market); } .decorative-tote-image { aspect-ratio: var(--ratio-tote); max-width: 8rem; border: none; background: linear-gradient(145deg, var(--color-purple) 0%, var(--color-lavender) 100%); opacity: 0.85; } .commissions-garment { aspect-ratio: 4 / 5; width: 100%; height: 100%; min-height: clamp(16rem, 52vw, 28rem); border: none; background: radial-gradient(ellipse at 30% 40%, rgba(220, 163, 237, 0.45) 0%, transparent 55%), radial-gradient(ellipse at 70% 65%, rgba(241, 106, 58, 0.12) 0%, transparent 50%), linear-gradient(160deg, #f3e8f0 0%, var(--color-cream) 42%, #e8c4d8 100%); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: var(--touch-min); padding: 0.75rem 1.5rem; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .btn--solid { color: var(--color-white); background-color: var(--color-purple); border: 2px solid var(--color-purple); } .btn--solid:hover { background-color: var(--color-ink); border-color: var(--color-ink); } .btn--solid::after { content: " \2192"; } .btn--solid:active { transform: translateY(1px); } .btn--outline { color: var(--color-purple); background-color: transparent; border: var(--border-thin); } .btn--outline:hover { background-color: rgba(220, 163, 237, 0.2); border-color: var(--color-purple); } .btn--outline:active { transform: translateY(1px); } .btn--text { padding-inline: 0; min-height: auto; color: var(--color-orange); text-decoration: underline; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; } .btn--text:hover { color: var(--color-purple); } .btn--text::after { content: " \2192"; } .btn--full { width: 100%; } .btn--submit { flex-shrink: 0; white-space: nowrap; } /* --- Icon Buttons --- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-min); min-height: var(--touch-min); padding: 0.5rem; color: var(--color-purple); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--transition), color var(--transition); } .icon-btn:hover { background-color: rgba(220, 163, 237, 0.25); } .icon-btn:active { transform: scale(0.97); } /* --- Announcement Bar --- */ .announcement-bar { background-color: var(--color-lavender); padding-block: 0.5rem; } .announcement-bar__text { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.5rem; padding-inline: 1rem; font-size: clamp(0.5625rem, 0.5rem + 0.35vw, 0.6875rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: var(--color-purple); line-height: 1.4; } .announcement-bar__sep { color: var(--color-orange); } .announcement-bar__star { color: var(--color-purple); font-size: 0.625rem; } .announcement-bar__star--end { display: none; } @media (min-width: 480px) { .announcement-bar__star--end { display: inline; } } /* --- Header --- */ .site-header { position: relative; z-index: 100; background-color: var(--color-cream); border-bottom: 1px solid var(--color-border); } .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-sm); min-height: var(--header-height-mobile); } .site-header__menu-toggle { grid-column: 1; justify-self: start; } .site-header__inner .logo { grid-column: 2; justify-self: center; } .site-header__actions { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: clamp(0.125rem, 0.25vw, 0.5rem); } .site-header__cart-mobile { display: inline-flex; } .site-nav--desktop { display: none; } .site-nav--left { justify-self: start; } .site-nav--right { margin-right: clamp(0.25rem, 0.5vw, 0.75rem); } .site-nav--right .site-nav__list { justify-content: flex-end; } .site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.5rem); } .site-nav__item--dropdown { position: relative; } .site-nav__dropdown-toggle { display: inline-flex; align-items: center; gap: 0.25rem; } .site-nav__dropdown-icon { flex-shrink: 0; transition: transform var(--transition); } .site-nav__item--dropdown.is-open .site-nav__dropdown-icon { transform: rotate(180deg); } .site-nav__dropdown { position: absolute; top: calc(100% + 0.35rem); left: 50%; z-index: 120; min-width: 13.5rem; padding: 0.35rem 0; background: var(--color-cream); border: var(--border-thin); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); transform: translateX(-50%); } .site-nav__dropdown::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.55rem; } .site-nav__dropdown-link { display: block; padding: 0.625rem 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--color-purple); white-space: nowrap; transition: background-color var(--transition), color var(--transition); } .site-nav__dropdown-link:hover, .site-nav__dropdown-link:focus-visible { background-color: rgba(220, 163, 237, 0.18); color: var(--color-orange); } .site-nav__link { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--color-purple); transition: color var(--transition); padding-block: 0.25rem; } .site-nav__link:hover { color: var(--color-orange); } .logo { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--color-purple); line-height: 1.1; } .logo__wordmark { font-family: var(--font-display); font-size: clamp(1.125rem, 0.95rem + 1vw, 1.75rem); letter-spacing: 0.02em; text-transform: lowercase; } .logo__location { font-family: var(--font-sans); font-size: clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem); font-weight: 700; letter-spacing: 0.28em; margin-top: 0.15rem; } .logo-compact .logo__wordmark { font-size: 1rem; } .site-header__utility { display: none; align-items: center; gap: 0.125rem; } @media (max-width: 899px) { .site-nav--desktop { display: none; } } /* Mobile nav */ .mobile-nav { position: fixed; inset: 0; z-index: 200; pointer-events: none; } .mobile-nav:not([hidden]) { pointer-events: auto; } .mobile-nav__panel { position: absolute; top: 0; left: 0; z-index: 2; width: min(100%, 22rem); height: 100%; padding: var(--space-md); background: var(--color-cream); border-right: var(--border-thin); box-shadow: var(--shadow-soft); transform: translateX(-100%); transition: transform var(--transition); overflow-y: auto; } .mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); } .mobile-nav__backdrop { position: absolute; inset: 0; z-index: 1; background: rgba(48, 18, 61, 0.4); opacity: 0; transition: opacity var(--transition); } .mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; } .mobile-nav__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); } .mobile-nav__list { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: var(--space-lg); } .mobile-nav__link { display: block; padding: 0.875rem 0.5rem; font-size: 1rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--color-purple); border-bottom: 1px solid var(--color-border); } .mobile-nav__link:hover { color: var(--color-orange); } .mobile-nav__utility { display: flex; flex-direction: column; gap: var(--space-sm); } @media (min-width: 900px) and (max-width: 1023px) { .site-nav__list { gap: clamp(0.5rem, 1vw, 0.875rem); } .site-nav__link, .site-nav__dropdown-link { font-size: 0.75rem; } } @media (min-width: 900px) { .site-header__inner { grid-template-columns: 1fr auto 1fr; min-height: var(--header-height); padding-block: 0.35rem; } .site-nav--desktop { display: block; } .site-nav--left { grid-column: 1; grid-row: 1; } .site-nav--right { display: block; } .site-header__menu-toggle, .site-header__cart-mobile { display: none; } .site-header__utility { display: flex; } .site-header__inner .logo { grid-column: 2; grid-row: 1; } .site-header__actions { grid-column: 3; grid-row: 1; } } /* --- Hero --- */ .hero { width: 100%; } .hero__stage { position: relative; display: flex; flex-direction: column; gap: 0; padding: 1rem; border-bottom: 1px solid var(--color-border); } .hero__visual { flex-shrink: 0; width: 100%; } .hero__visual .hero-market-scene { aspect-ratio: var(--ratio-hero); min-height: clamp(11rem, 32vw, 16rem); border: none; } .hero-card { position: relative; z-index: 2; flex: none; width: clamp(20.625rem, 29vw, 24.5rem); max-width: 24.5rem; height: auto; margin-inline: auto; aspect-ratio: var(--hero-card-ratio); display: block; background: transparent; color: var(--color-purple); isolation: isolate; overflow: visible; } .hero-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } .hero-card__panel-shape { fill: var(--color-lavender-card); stroke: none; } .hero-card__frame-line { fill: none; stroke: var(--color-purple); stroke-width: 1; vector-effect: non-scaling-stroke; } .hero-card__frame-inner { opacity: 0.68; } .hero-card__starburst { position: absolute; z-index: 2; top: clamp(1.75rem, 7.5%, 2.35rem); width: 0.8125rem; height: 0.8125rem; fill: var(--color-purple); pointer-events: none; } .hero-card__starburst--tl { left: clamp(1.75rem, 10.5%, 2.5rem); } .hero-card__starburst--tr { right: clamp(1.75rem, 10.5%, 2.5rem); } .hero-card__inner { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto 1fr; align-items: start; width: 100%; height: 100%; box-sizing: border-box; padding: clamp(2rem, 7.5%, 2.75rem) clamp(1.75rem, 8%, 2.25rem) clamp(2rem, 7.5%, 2.5rem); text-align: center; overflow: visible; } .hero-card__brand, .hero-card__message, .hero__actions { width: 100%; } .hero-card__brand { align-self: start; } .hero-card__message { display: grid; justify-items: center; gap: clamp(1.1rem, 2.5vh, 1.4rem); align-self: start; margin-top: clamp(0.8rem, 2vh, 1.1rem); } .hero__actions { display: flex; flex-direction: column; align-items: center; gap: clamp(1.35rem, 2.8vh, 1.65rem); align-self: end; margin: 0; } .hero__eyebrow { margin: 0 0 clamp(0.75rem, 1.6vh, 1rem); font-size: clamp(0.675rem, 0.7vw, 0.75rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-purple); } .hero__title { font-family: var(--font-serif); font-size: clamp(3rem, 4.1vw, 4.5rem); font-weight: 600; line-height: 0.88; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-purple); margin: 0 0 clamp(0.75rem, 1.5vh, 1rem); } .hero__title-line { display: block; margin: 0; } .hero__title-line + .hero__title-line { margin-top: -0.04em; } .hero__location { display: flex; align-items: center; justify-content: center; gap: clamp(0.65rem, 1.25vw, 0.9rem); margin: 0; font-size: clamp(0.75rem, 0.8vw, 0.875rem); font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-purple); } .hero__location-ornament { display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.3rem, 0.55vw, 0.42rem); min-width: 2.5rem; color: var(--color-hero-orange); font-size: 0; line-height: 1; letter-spacing: 0; } .hero__location-ornament > span { display: block; width: clamp(0.25rem, 0.3vw, 0.3rem); height: clamp(0.25rem, 0.3vw, 0.3rem); flex: 0 0 auto; border-radius: 50%; background-color: var(--color-hero-orange); overflow: hidden; font-size: 0; line-height: 0; color: transparent; } .hero__location-text { letter-spacing: 0.25em; } .hero__script { font-family: var(--font-script); font-size: clamp(1.9rem, 2.3vw, 2.35rem); font-weight: 400; color: var(--color-hero-script); margin: 0; line-height: 1; white-space: nowrap; } .hero__descriptor { display: flex; flex-direction: column; gap: 0.15rem; width: min(100%, 17rem); max-width: 17rem; margin: 0; font-size: clamp(0.875rem, 1vw, 1.05rem); font-weight: 600; line-height: 1.3; letter-spacing: 0.045em; text-transform: uppercase; color: var(--color-hero-orange); } .hero__descriptor-line { display: block; } .hero-card__inner .btn--hero { width: 84%; max-width: 84%; min-width: 0; padding: 0.75rem 0.9rem; font-size: clamp(0.75rem, 0.8vw, 0.8125rem); letter-spacing: 0.1em; } .hero-card__inner .btn--hero::after { content: none; } .hero-card__inner .btn__star { font-size: 0.6875rem; margin-left: 0.3rem; } .hero-card__inner .btn--hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: auto; padding: 0 0 0.15rem; font-size: clamp(0.775rem, 0.85vw, 0.875rem); font-weight: 600; letter-spacing: 0.065em; text-align: center; color: var(--color-purple); text-decoration: none; } .hero-card__inner .btn--hero-secondary::after { content: none; display: none; } .hero-card__inner .btn--hero-secondary > span:first-child { text-decoration: underline; text-decoration-color: var(--color-purple); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .hero-card__inner .btn--hero-secondary .btn__arrow { display: inline-block; color: var(--color-hero-orange); font-size: 1em; line-height: 1; text-decoration: none; } .hero-card__inner .btn--hero-secondary:hover { color: var(--color-ink); } .hero-card__inner .btn--hero-secondary:hover > span:first-child { text-decoration-color: var(--color-ink); } @media (max-width: 799px) { .hero__stage { padding: 1rem; } .hero__visual { margin-bottom: 1rem; } .hero-card { width: min(calc(100% - 0.5rem), clamp(18rem, 88vw, 24.5rem)); max-width: calc(100% - 2rem); margin-top: 0; aspect-ratio: var(--hero-card-ratio); height: auto; } .hero-card__inner { height: 100%; min-height: 22rem; } .hero__title { font-size: clamp(2.75rem, 12vw, 3.75rem); } .hero__script { font-size: clamp(1.65rem, 8vw, 2.1rem); white-space: nowrap; } .hero__descriptor { font-size: clamp(0.78rem, 3.5vw, 0.95rem); } } @media (min-width: 800px) { .hero__stage { position: relative; display: block; min-height: clamp(34rem, 58vh, 40rem); padding-block: clamp(1.5rem, 6vh, 2.5rem); } .hero__visual { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .hero__visual .hero-market-scene { width: 100%; height: 100%; min-height: 100%; aspect-ratio: auto; } .hero-card { position: absolute; left: clamp(2rem, 6.5vw, 6rem); top: 50%; transform: translateY(-50%); margin-inline: 0; } } /* --- Category Ticker --- */ .category-ticker { background-color: var(--color-lavender); border-block: 1px solid var(--color-border); padding-block: 0.875rem; } .category-ticker__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; padding-inline: 1rem; } .category-ticker__link { font-size: clamp(0.625rem, 0.55rem + 0.35vw, 0.75rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--color-purple); white-space: nowrap; transition: color var(--transition); } .category-ticker__link:hover { color: var(--color-orange); } .category-ticker__sep { color: var(--color-orange); font-size: 0.5rem; user-select: none; } /* --- Section Typography --- */ .section-heading { font-family: var(--font-serif); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-purple); margin-bottom: var(--space-xs); } .section-subheading { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: var(--space-md); line-height: 1.2; } .section-header { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); text-align: center; } .section-header__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-purple); } .section-header__star { color: var(--color-purple); font-size: 0.75rem; opacity: 0.7; } .section-header::before, .section-header::after { content: ""; flex: 1; max-width: 4rem; height: 1px; background: repeating-linear-gradient( 90deg, var(--color-purple) 0, var(--color-purple) 4px, transparent 4px, transparent 8px ); opacity: 0.35; } .section-header--compact { margin-bottom: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem); } .section-eyebrow { margin: 0 0 0.35rem; font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.6875rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; color: var(--color-purple); } .last-chance__header .section-eyebrow { text-align: left; } @media (min-width: 800px) { .section-eyebrow { text-align: center; } .last-chance__header .section-eyebrow { text-align: left; } } /* --- Brand Intro --- */ .brand-intro__grid { display: grid; gap: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem); align-items: center; } .brand-intro__frame { position: relative; max-width: clamp(18rem, 85%, 26rem); margin-inline: auto; } .brand-intro__frame .story-editorial-image { transform: rotate(-1.5deg); box-shadow: var(--shadow-soft); } .brand-intro__frame::before { content: ""; position: absolute; inset: -0.75rem -0.5rem 0.5rem 0.75rem; z-index: -1; background: var(--color-white); border: var(--border-thin); transform: rotate(2deg); } .brand-intro__star { position: absolute; top: -0.5rem; left: -0.25rem; font-size: 1.25rem; color: var(--color-purple); } .brand-intro__body { max-width: 32rem; margin-bottom: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.7; } @media (min-width: 800px) { .brand-intro__grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3rem); } .brand-intro__frame { max-width: min(100%, 28rem); margin-inline: 0 auto; } } /* --- Shop Categories --- */ .category-rail { width: 100%; max-width: 100%; padding-inline: 1rem 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-lavender) transparent; } .category-rail::-webkit-scrollbar { height: 4px; } .category-rail::-webkit-scrollbar-thumb { background: var(--color-lavender); border-radius: 2px; } .category-cards { display: flex; gap: var(--space-md); width: max-content; min-width: 0; padding-bottom: 0.5rem; } .category-card { display: flex; flex-direction: column; width: clamp(9.5rem, 38vw, 12rem); text-decoration: none; color: var(--color-purple); border: var(--border-thin); border-radius: var(--radius-sm); overflow: hidden; background-color: var(--color-cream); transition: transform var(--transition), box-shadow var(--transition); } .category-card:hover, .category-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-soft); } .category-card:active { transform: translateY(0); } .category-card__media { overflow: hidden; } .category-card__media .placeholder { border: none; border-radius: 0; } .category-card__footer { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.625rem 0.5rem; background-color: var(--color-cream); border-top: var(--border-thin); } .category-card__label { display: block; font-family: var(--font-serif); font-size: clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.3; } .category-card__arrow { opacity: 0; transition: opacity var(--transition); } .category-card:hover .category-card__arrow, .category-card:focus-visible .category-card__arrow { opacity: 1; } @media (min-width: 800px) { .category-rail { overflow: visible; padding-inline: 1rem; } .category-cards { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: var(--container-max); margin-inline: auto; gap: clamp(0.625rem, 0.5rem + 0.5vw, 1rem); padding-bottom: 0; } .category-card { width: auto; height: 100%; } } /* --- Custom Commissions --- */ .commissions.section { padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.75rem); } .commissions__panel { position: relative; isolation: isolate; padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); background-color: var(--color-cream); overflow: visible; } .commissions__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .commissions__frame-line { fill: none; stroke: var(--color-purple); stroke-width: 1.25; vector-effect: non-scaling-stroke; } .commissions__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.5rem, 1.25rem + 1.5vw, 2.75rem); align-items: center; } .commissions__visual { position: relative; min-width: 0; } .commissions__wash { position: absolute; inset: -8% -6% -10% -8%; z-index: 0; background: radial-gradient(ellipse at 40% 45%, rgba(220, 163, 237, 0.38) 0%, transparent 62%), radial-gradient(ellipse at 70% 70%, rgba(241, 180, 170, 0.28) 0%, transparent 55%); pointer-events: none; } .commissions__media { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(78, 12, 107, 0.18); } .commissions__overlay { position: absolute; inset: 0; z-index: 2; background: rgba(220, 163, 237, 0.55); transform-origin: left center; transition: opacity 0.9s ease, transform 1s ease; } .commissions__panel.is-revealed .commissions__overlay { opacity: 0; transform: scaleX(0); pointer-events: none; } .commissions__swatches { position: absolute; z-index: 3; left: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(0.75rem, 2vw, 1.25rem); display: flex; flex-direction: column; gap: 0.35rem; padding: 0.45rem; background: rgba(250, 246, 238, 0.92); border: 1px solid rgba(78, 12, 107, 0.2); box-shadow: var(--shadow-soft); } .commissions__swatch { display: block; width: clamp(1.75rem, 4vw, 2.25rem); height: clamp(1.1rem, 2.5vw, 1.35rem); border: 1px solid rgba(78, 12, 107, 0.15); transition: transform 0.35s ease; } .commissions__swatch--lavender { background: #c9a0d8; } .commissions__swatch--blush { background: #e8a8b8; } .commissions__swatch--peach { background: #f0c4a8; } @media (hover: hover) { .commissions__swatch:hover { transform: scale(1.08) rotate(-2deg); } } .commissions__content { position: relative; display: flex; flex-direction: column; gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem); min-width: 0; } .commissions__eyebrow { margin: 0; font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.6875rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-purple); } .commissions__headline-block { position: relative; padding-right: 0; } .commissions__title { margin: 0; font-family: var(--font-serif); font-size: clamp(2rem, 1.55rem + 2vw, 3.25rem); font-weight: 600; font-style: normal; line-height: 1.05; letter-spacing: 0.01em; color: var(--color-purple); } .commissions__title em { font-style: italic; font-weight: 500; } .commissions__accent { position: relative; top: auto; right: auto; display: inline-block; margin: 0.15rem 0 0; font-family: var(--font-script); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1; color: var(--color-orange); transform: rotate(-4deg); pointer-events: none; } .commissions__body { margin: 0; max-width: 34rem; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.7; color: var(--color-ink); } .commissions__steps { display: grid; gap: 0.65rem; margin: 0.25rem 0 0; padding: 0; list-style: none; } .commissions__step { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: 0.65rem 0.75rem; border: 1px solid transparent; border-radius: var(--radius-sm); transition: background-color var(--transition), border-color var(--transition), transform var(--transition); } @media (hover: hover) { .commissions__step:hover { background-color: rgba(220, 163, 237, 0.14); border-color: rgba(78, 12, 107, 0.18); transform: translateX(2px); } } .commissions__step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-purple); border: 1px solid var(--color-purple); border-radius: 50%; } .commissions__step-title { margin: 0 0 0.2rem; font-family: var(--font-sans); font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-purple); } .commissions__step-title::before { content: "✦ "; font-size: 0.65em; opacity: 0.7; } .commissions__step-text { margin: 0; font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); line-height: 1.55; color: var(--color-ink); } .commissions__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.35rem; } .commissions__cta { width: 100%; justify-content: center; } .commissions__cta--primary::after { content: none; display: none; } .commissions__cta--primary:hover { background-color: var(--color-ink); border-color: var(--color-ink); } .commissions__note { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; max-width: 28rem; margin-inline: auto; font-family: var(--font-serif); font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); font-style: italic; line-height: 1.45; text-align: center; color: var(--color-purple); } .commissions__note-star { font-style: normal; font-size: 0.7rem; opacity: 0.75; } [data-commissions-reveal], [data-commissions-step] { opacity: 0; transform: translateY(0.85rem); transition: opacity 0.7s ease, transform 0.7s ease; } .commissions__panel.is-revealed [data-commissions-reveal], .commissions__panel.is-revealed [data-commissions-step] { opacity: 1; transform: translateY(0); } .commissions__panel.is-revealed [data-commissions-reveal]:nth-of-type(1) { transition-delay: 0.08s; } .commissions__panel.is-revealed .commissions__headline-block { transition-delay: 0.16s; } .commissions__panel.is-revealed .commissions__body { transition-delay: 0.24s; } .commissions__panel.is-revealed .commissions__actions { transition-delay: 0.55s; } .commissions__panel.is-revealed .commissions__note { transition-delay: 0.65s; } .commissions__panel.is-revealed [data-commissions-step]:nth-child(1) { transition-delay: 0.32s; } .commissions__panel.is-revealed [data-commissions-step]:nth-child(2) { transition-delay: 0.4s; } .commissions__panel.is-revealed [data-commissions-step]:nth-child(3) { transition-delay: 0.48s; } .commissions__swatches { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.8s ease 0.35s, transform 0.8s ease 0.35s; } .commissions__panel.is-revealed .commissions__swatches { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .commissions__overlay, [data-commissions-reveal], [data-commissions-step], .commissions__swatches, .commissions__swatch, .commissions__step { transition: none !important; transform: none !important; opacity: 1 !important; } .commissions__overlay { opacity: 0 !important; } } @media (min-width: 800px) { .commissions__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.75rem, 1.5rem + 2vw, 3rem); } .commissions-garment { aspect-ratio: 4 / 5; min-height: clamp(22rem, 36vw, 30rem); } .commissions__headline-block { padding-right: clamp(4rem, 10vw, 7rem); } .commissions__accent { position: absolute; top: -0.55rem; right: clamp(0rem, 2vw, 1.5rem); margin: 0; transform: rotate(-6deg); } .commissions__actions { flex-direction: row; flex-wrap: wrap; align-items: center; } .commissions__cta { width: auto; } .commissions__cta--primary { min-width: 15rem; } .commissions__note { margin-inline: 0; align-items: flex-start; text-align: left; } } @media (min-width: 1024px) { .commissions__panel { padding: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem) clamp(1.75rem, 1.5rem + 2vw, 3rem); } .commissions__title { max-width: 18ch; } } /* --- Just Found --- */ .just-found.section { padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); } .just-found__support { max-width: 36rem; margin-inline: auto; margin-bottom: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); text-align: center; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); color: var(--color-ink); } .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 0.65rem + 0.5vw, 1rem); } .product-card { display: flex; flex-direction: column; text-decoration: none; color: var(--color-ink); border: var(--border-thin); border-radius: var(--radius-sm); overflow: hidden; background-color: var(--color-cream); transition: transform var(--transition), box-shadow var(--transition); } .product-card:hover, .product-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .product-card__media { position: relative; overflow: hidden; } .product-card__media .placeholder { border: none; border-radius: 0; } .product-card__badge { position: absolute; top: var(--space-xs); left: var(--space-xs); z-index: 2; padding: 0.2rem 0.45rem; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-purple); background: rgba(250, 246, 238, 0.92); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .product-card__footer { padding: 0.75rem 0.625rem 0.875rem; background-color: var(--color-cream); border-top: var(--border-thin); text-align: center; } .product-card__name { font-family: var(--font-serif); font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem); font-weight: 600; line-height: 1.3; color: var(--color-purple); margin-bottom: 0.25rem; } .product-card__price { font-size: 0.8125rem; font-weight: 500; color: var(--color-ink); } @media (min-width: 800px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem); } } /* --- The Last Chance Rack --- */ .last-chance.section { padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); } .last-chance__header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-bottom: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); } .last-chance__intro { width: 100%; } .last-chance__intro .section-header { justify-content: flex-start; text-align: left; } .last-chance__intro .section-header::before, .last-chance__intro .section-header::after { display: none; } .last-chance__support { max-width: 36rem; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.6; color: var(--color-ink); } .last-chance__cta { flex-shrink: 0; min-height: var(--touch-min); align-self: flex-start; } .last-chance__cta::after { content: none; display: none; } .sale-rail { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-lavender) transparent; } .sale-rail::-webkit-scrollbar { height: 4px; } .sale-rail::-webkit-scrollbar-thumb { background: var(--color-lavender); border-radius: 2px; } .sale-grid { display: flex; gap: clamp(0.75rem, 0.65rem + 0.5vw, 1rem); width: max-content; min-width: 0; padding-bottom: 0.35rem; list-style: none; margin: 0; padding-left: 0; } .sale-grid > li { flex: 0 0 clamp(9.5rem, 72vw, 14rem); max-width: 14rem; } .sale-grid .product-card { height: 100%; } .product-card__badge--sale { color: var(--color-white); background-color: var(--color-orange); border-color: var(--color-orange); } .product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem 0.5rem; } .product-card__price-original { font-size: 0.75rem; color: rgba(48, 18, 61, 0.55); } .product-card__price-original s { text-decoration-thickness: 1px; } .product-card__price-sale { font-size: 0.875rem; font-weight: 700; color: var(--color-orange); } @media (min-width: 768px) { .last-chance__header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); } .last-chance__cta { align-self: flex-end; margin-left: auto; } .sale-rail { overflow: visible; } .sale-grid { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; gap: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem); padding-bottom: 0; } .sale-grid > li { flex: none; max-width: none; } } @media (min-width: 1024px) { .sale-grid { grid-template-columns: repeat(3, 1fr); } } /* --- Membership Offers --- */ .membership-offers.section { padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); } .membership-offers__grid { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); } .offer-card { display: grid; grid-template-columns: 1fr; border: var(--border-thin); border-radius: var(--radius-sm); overflow: hidden; background-color: var(--color-cream); } .offer-card__content { display: flex; flex-direction: column; justify-content: center; gap: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem); padding: clamp(1.25rem, 1rem + 1vw, 2rem); } .offer-card__eyebrow { margin: 0; font-size: clamp(0.625rem, 0.58rem + 0.2vw, 0.6875rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-purple); } .offer-card__title { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem); font-weight: 600; line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-purple); } .offer-card__body { max-width: 28rem; font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); line-height: 1.65; color: var(--color-ink); } .offer-card__cta { align-self: flex-start; margin-top: clamp(0.35rem, 0.3rem + 0.25vw, 0.75rem); } .offer-card__media { position: relative; min-height: clamp(11rem, 38vw, 16rem); } .offer-card__media .placeholder { width: 100%; height: 100%; min-height: inherit; } .offer-card__seal { position: absolute; top: clamp(0.75rem, 2vw, 1.25rem); right: clamp(0.75rem, 2vw, 1.25rem); z-index: 2; display: flex; align-items: center; justify-content: center; width: clamp(4.25rem, 12vw, 5rem); height: clamp(4.25rem, 12vw, 5rem); padding: 0.5rem; font-family: var(--font-serif); font-size: clamp(0.5rem, 0.45rem + 0.15vw, 0.5625rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.25; color: var(--color-purple); background: var(--color-lavender); border: 2px solid var(--color-purple); border-radius: 50%; } @media (min-width: 800px) { .membership-offers__grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; } .offer-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(16rem, 22vw, 20rem); } .offer-card__media { min-height: auto; } .offer-card__content { padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); } } /* --- Editorial Statement --- */ .editorial-statement { position: relative; display: grid; align-items: stretch; min-height: clamp(11rem, 28vw, 16rem); overflow: hidden; } .editorial-statement__visual { grid-area: 1 / 1; min-height: inherit; } .editorial-statement__visual .editorial-brand-collage { width: 100%; height: 100%; min-height: clamp(11rem, 28vw, 16rem); } .editorial-statement__overlay { position: absolute; inset: 0; background: var(--color-overlay); } .editorial-statement__content { position: relative; z-index: 1; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem) 1rem; text-align: center; } .editorial-statement__quote { max-width: 28rem; font-family: var(--font-serif); font-size: clamp(1.125rem, 0.95rem + 1vw, 1.625rem); font-weight: 600; line-height: 1.35; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-white); } .editorial-statement__badge { display: none; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; padding: 0.75rem; font-family: var(--font-serif); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.25; color: var(--color-purple); background: var(--color-lavender); border: 2px solid var(--color-purple); border-radius: 50%; flex-shrink: 0; } @media (min-width: 800px) { .editorial-statement { min-height: clamp(13.75rem, 22vw, 18.75rem); } .editorial-statement__visual .editorial-brand-collage { min-height: clamp(13.75rem, 22vw, 18.75rem); } .editorial-statement__quote { max-width: 36rem; font-size: clamp(1.25rem, 1rem + 0.85vw, 1.75rem); } .editorial-statement__content { flex-direction: row; align-items: center; justify-content: center; gap: clamp(1.5rem, 2vw, 3rem); padding-inline: clamp(1rem, 3vw, 2rem); } .editorial-statement__badge { display: flex; } } @media (min-width: 1024px) { .editorial-statement { min-height: 18.75rem; } .editorial-statement__visual .editorial-brand-collage { min-height: 18.75rem; } } /* --- Meet Us IRL --- */ .meet-irl.section { padding-block: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); } .meet-irl__grid { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); align-items: center; } .meet-irl__body { max-width: 24rem; margin-bottom: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem); line-height: 1.65; } .meet-irl__photo .market-booth-image { aspect-ratio: var(--ratio-market); } .market-card { padding: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); background-color: var(--color-lavender); border: var(--border-thin); border-radius: var(--radius-sm); } .market-card__title { font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-purple); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-strong); } .market-card__details { display: grid; gap: 0.35rem; margin-bottom: var(--space-md); } .market-card__event { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--color-purple); } .market-card__date, .market-card__time { font-weight: 600; font-size: 0.9375rem; } .market-card__location { font-size: 0.9375rem; line-height: 1.5; } .market-card__link { display: inline-flex; align-items: center; min-height: var(--touch-min); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; color: var(--color-purple); } .market-card__link:hover { color: var(--color-orange); } .market-card__link::after { content: " \2192"; } @media (min-width: 800px) { .meet-irl__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.95fr); gap: clamp(1rem, 0.75rem + 1.25vw, 1.75rem); align-items: center; } .meet-irl .section-heading { font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem); } } /* --- Join the Gang --- */ .join-gang { background-color: var(--color-lavender); padding-block: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem); border-top: 1px solid var(--color-border); } .join-gang__grid { display: grid; gap: var(--space-lg); align-items: center; } .join-gang__star { display: block; margin-bottom: var(--space-xs); font-size: 1.5rem; color: var(--color-purple); } .join-gang__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-purple); margin-bottom: 0.375rem; } .join-gang__body { max-width: 22rem; line-height: 1.6; } .form-field__label { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-purple); } .form-field__row { display: flex; flex-direction: column; gap: var(--space-sm); } .form-field__input { width: 100%; min-height: var(--touch-min); padding: 0.75rem 1rem; font-family: var(--font-sans); font-size: 1rem; color: var(--color-ink); background: var(--color-white); border: var(--border-thin); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } .form-field__input::placeholder { color: rgba(48, 18, 61, 0.45); } .form-field__input:focus { border-color: var(--color-purple); box-shadow: 0 0 0 3px rgba(78, 12, 107, 0.15); } .form-field__input[aria-invalid="true"] { border-color: var(--color-orange); } .join-gang__status { margin: 0.4rem 0 0; min-height: 1.35em; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.35; color: var(--color-purple, var(--tgg-purple, #4e0c6b)); } .join-gang__status:not([data-state]), .join-gang__status[data-state=""] { min-height: 0; margin-top: 0; } .join-gang__status[data-state="success"], .join-gang__status[data-state="pending"] { color: var(--color-purple, var(--tgg-purple, #4e0c6b)); } .join-gang__status[data-state="error"] { color: var(--color-orange, var(--tgg-orange, #f16a3a)); } .join-gang__consent { margin-top: var(--space-sm); font-size: 0.75rem; line-height: 1.5; color: rgba(48, 18, 61, 0.75); max-width: 28rem; } .join-gang__deco { display: none; justify-content: flex-end; } @media (min-width: 480px) { .form-field__row { flex-direction: row; align-items: stretch; } .form-field__input { flex: 1; } } @media (min-width: 800px) { .join-gang__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr) auto; gap: clamp(1rem, 0.75rem + 1.5vw, 2rem); align-items: center; } .join-gang__deco { display: flex; } } /* --- Footer --- */ .site-footer { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); background-color: var(--color-cream); border-top: 1px solid var(--color-border); } .site-footer__inner { display: flex; flex-direction: column; gap: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem); text-align: center; } .site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-md); } .site-footer__links a { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--color-purple); min-height: var(--touch-min); display: inline-flex; align-items: center; } .site-footer__links a:hover { color: var(--color-orange); } .site-footer__instagram { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; color: var(--color-purple); } .site-footer__instagram:hover { color: var(--color-orange); } .site-footer__meta { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: rgba(48, 18, 61, 0.7); } @media (min-width: 800px) { .site-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; gap: clamp(0.75rem, 0.65rem + 0.5vw, 1rem); } .site-footer__links { justify-content: flex-start; } .site-footer__social { text-align: center; padding-inline: var(--space-md); border-inline: 1px solid var(--color-border); } .site-footer__meta { text-align: right; } } /* === shared/css/tokens-contact.css === */ /* Contact page typography + token extensions. Safe to adopt sitewide later without rebuilding Contact. */ :root { --tgg-lavender: #dca3ed; --tgg-cream: #faf6ee; --tgg-purple: #4e0c6b; --tgg-ink: #30123d; --tgg-orange: #f16a3a; --tgg-midnight: #1a0a24; --tgg-midnight-deep: #120616; --tgg-gold: #b8944a; --tgg-gold-soft: rgba(184, 148, 74, 0.55); --tgg-rose: #c46b5a; --tgg-error: #b33a2b; --tgg-success: #3d6b4f; --tgg-focus: #f16a3a; --font-display-contact: "Fraunces", "Cormorant Garamond", Georgia, serif; --font-body-contact: "Bricolage Grotesque", "DM Sans", "Segoe UI", system-ui, sans-serif; --font-script-contact: "Allura", "Segoe Script", cursive; --frame-corner-size: 24px; --frame-join-overlap: 2px; --paper: var(--tgg-cream); --paper-field: rgba(250, 246, 238, 0.72); --paper-field-border: rgba(141, 104, 145, 0.45); --postal-frame-stroke: #8d6891; --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } /* === pages/contact/contact.page.css === */ /* ========================================================================== Tiny Girl Gang — Contact page Vintage editorial meets nocturnal folk magic ========================================================================== */ .page-contact { font-family: var(--font-body-contact); background: var(--tgg-cream); color: var(--tgg-ink); } /* GHL custom-code rows inject ~10px side padding (#row-… .c-row), which insets the entire contact embed. Cancel that for full-bleed shells. */ .c-row:has(#tgg-contact-root), .c-row:has(.page-contact) { padding-left: 0 !important; padding-right: 0 !important; padding-inline: 0 !important; } .c-column:has(#tgg-contact-root), .c-column:has(.page-contact), .vertical.inner:has(#tgg-contact-root), .vertical.inner:has(.page-contact), .custom-code-container:has(#tgg-contact-root), .custom-code-container:has(.page-contact), .c-custom-code:has(#tgg-contact-root), .c-custom-code:has(.page-contact) { padding-left: 0 !important; padding-right: 0 !important; padding-inline: 0 !important; margin-inline: 0 !important; width: 100% !important; max-width: none !important; } #tgg-contact-root.page-contact, .page-contact { width: 100% !important; max-width: none !important; margin-inline: 0 !important; box-sizing: border-box; } .page-contact .site-header, .page-contact .announcement-bar { position: relative; z-index: 30; } /* --- Placeholders (branded, non-representational) --- */ .contact-placeholder { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(220, 163, 237, 0.25); } .contact-placeholder.is-dev-label::after { content: attr(data-label); position: absolute; inset: auto 0.5rem 0.5rem auto; z-index: 1; padding: 0.2rem 0.4rem; font-family: var(--font-body-contact); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250, 246, 238, 0.65); background: rgba(26, 10, 36, 0.45); pointer-events: none; } .page-contact.is-production .contact-placeholder.is-dev-label::after { display: none; } .contact-placeholder--texture { background: radial-gradient(ellipse at 30% 20%, rgba(220, 163, 237, 0.35) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(184, 148, 74, 0.12) 0%, transparent 45%), linear-gradient(160deg, #1a0a24 0%, #30123d 55%, #120616 100%); } .contact-placeholder--moons { background: repeating-linear-gradient( 90deg, rgba(220, 163, 237, 0.15) 0 12%, transparent 12% 14% ), linear-gradient(180deg, rgba(26, 10, 36, 0.2), rgba(78, 12, 107, 0.35)); } .contact-placeholder--main { aspect-ratio: 1.15 / 1; background: radial-gradient(circle at 55% 40%, rgba(220, 163, 237, 0.4) 0%, transparent 42%), radial-gradient(circle at 40% 70%, rgba(196, 107, 90, 0.2) 0%, transparent 40%), linear-gradient(145deg, #2a1440 0%, #1a0a24 50%, #3d1a55 100%); } .contact-placeholder--ornament { background: radial-gradient(circle at center, rgba(184, 148, 74, 0.35) 0%, transparent 60%), rgba(48, 18, 61, 0.4); } .contact-placeholder--faq { background: radial-gradient(circle, #f0d88a 0%, #dca3ed 45%, #4e0c6b 100%); } .contact-placeholder--shipping { background: radial-gradient(circle at 40% 40%, #faf6ee 0%, #9aa8d8 40%, #30123d 100%); } .contact-placeholder--wholesale { background: radial-gradient(ellipse at 50% 30%, #dca3ed 0%, #4e0c6b 55%, #1a0a24 100%); } .contact-placeholder--social-primary, .contact-placeholder--social-secondary { aspect-ratio: 4 / 5; background: linear-gradient(160deg, #2a1440, #1a0a24 50%, #4e0c6b); } .contact-placeholder--social-secondary { background: linear-gradient(160deg, #3d1a55, #30123d 40%, #c46b5a); } /* --- Hero --- */ .contact-hero { position: relative; z-index: 1; overflow: hidden; /* Match installed artwork (1825×862) so the full scene stays visible */ aspect-ratio: 1825 / 862; width: 100%; color: var(--tgg-cream); background-color: var(--tgg-midnight); } .contact-hero__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .contact-hero__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; } .contact-hero__content { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; max-width: none; height: 100%; margin: 0; box-sizing: border-box; padding: clamp(2.5rem, 5vw, 4rem) clamp(38%, 44vw, 52%) clamp(5.75rem, 9.5vw, 8.25rem) clamp(8vw, 9vw, 10vw); } .contact-hero__copy { width: clamp(24rem, 44vw, 34rem); min-width: 0; max-width: none; } .contact-hero__eyebrow { margin: 0 0 0.85rem; font-family: var(--font-body-contact); font-size: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgg-gold); } .contact-hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; font-family: var(--font-display-contact); font-size: clamp(4.15rem, 8.2vw, 6.75rem); font-weight: 700; line-height: 0.86; letter-spacing: -0.025em; color: var(--tgg-cream); } .contact-hero__title-main { display: block; } .contact-hero__title-line { display: flex; align-items: baseline; white-space: nowrap; padding-bottom: 0; line-height: 0.95; } .contact-hero__title-script { font-family: var(--font-script-contact); font-style: normal; font-weight: 400; font-size: 1.12em; line-height: 1; color: var(--tgg-cream); letter-spacing: -0.03em; } .contact-hero__title-accent-word { margin-left: 0.35em; font-family: var(--font-body-contact); font-style: normal; font-weight: 700; font-size: 0.92em; line-height: 1; color: var(--tgg-lavender); letter-spacing: -0.02em; } .contact-divider { pointer-events: none; user-select: none; overflow: hidden; } .contact-divider__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-user-drag: none; } .contact-divider--hero { width: min(13.5rem, 100%); height: 1rem; margin-block: 0.25rem 0.35rem; margin-inline: 0; } .contact-divider--hero .contact-divider__img { width: 140%; max-width: none; height: auto; margin-left: -20%; margin-top: -18%; object-fit: fill; } .contact-divider--help { width: min(11.5rem, 72%); height: 1rem; margin: 0 auto 0.5rem; } .contact-divider--help .contact-divider__img { width: 140%; max-width: none; height: auto; margin-left: -20%; margin-top: -18%; object-fit: fill; } .contact-divider--social { width: min(13.5rem, 78%); height: 1.05rem; margin: 0.4rem auto 0.5rem; } .contact-divider--social .contact-divider__img { width: 140%; max-width: none; height: auto; margin-left: -20%; margin-top: -18%; object-fit: fill; } .contact-hero__lead { margin: 0; max-width: 28rem; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); line-height: 1.55; color: rgba(250, 246, 238, 0.92); } /* --- Correspondence / form --- */ .contact-correspondence { --postal-frame-inset: clamp(12px, 1.3vw, 16px); position: relative; z-index: 20; min-height: 0; height: auto; /* Stronger hero overlap (~15–20px more at ~850px) without a seam */ margin-top: clamp(-4.5rem, -6.5vw, -3.5rem); padding-bottom: 28px; overflow-x: clip; background: transparent; } .contact-correspondence::before { content: ""; position: absolute; left: 0; right: 0; top: clamp(3.25rem, 5.5vw, 4.75rem); bottom: 0; z-index: 0; background-color: var(--paper); background-image: var(--paper-texture); background-size: 420px 420px; pointer-events: none; } .contact-correspondence::after { content: ""; position: absolute; left: 0; right: 0; top: clamp(3.25rem, 5.5vw, 4.75rem); bottom: 0; z-index: 0; pointer-events: none; background-image: var(--paper-texture); background-size: 420px 420px; opacity: 0.12; mix-blend-mode: multiply; } .contact-stage { position: relative; z-index: 1; width: min(100%, 1040px); margin-inline: auto; padding-inline: 12px; } .contact-correspondence__deco { display: none; pointer-events: none; user-select: none; } .contact-correspondence__deco-img { display: block; width: 100%; height: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; } .contact-card { position: relative; z-index: 2; box-sizing: border-box; isolation: isolate; overflow: visible; width: calc(100% - 24px); max-width: 100%; aspect-ratio: auto; margin-inline: auto; background: transparent; border: 0; border-radius: 0; } @media (min-width: 761px) { .contact-card { width: clamp(575px, 68vw, 1040px); aspect-ratio: auto; } } .contact-card__surface { --postal-surface-corner: 68px; position: absolute; inset: 0; z-index: 0; color: var(--paper); pointer-events: none; filter: drop-shadow(0 18px 40px rgba(48, 25, 40, 0.07)) drop-shadow(0 4px 12px rgba(48, 25, 40, 0.04)); } .contact-card__surface-fill { position: absolute; display: block; background-color: currentColor; background-image: var(--paper-texture); background-size: 420px 420px; background-blend-mode: multiply; } .contact-card__surface-fill--horizontal { inset: 0 var(--postal-surface-corner); } .contact-card__surface-fill--vertical { inset: var(--postal-surface-corner) 0; } .contact-card__surface-corner { position: absolute; width: var(--postal-surface-corner); height: var(--postal-surface-corner); background-color: var(--paper); background-image: var(--paper-texture); background-size: 420px 420px; background-blend-mode: multiply; clip-path: path( "M68 0 H29 V10 C29 19.5 19.5 29 10 29 H0 V68 H68 Z" ); -webkit-clip-path: path( "M68 0 H29 V10 C29 19.5 19.5 29 10 29 H0 V68 H68 Z" ); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath fill='black' d='M68 0 H29 V10 C29 19.5 19.5 29 10 29 H0 V68 H68 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 68'%3E%3Cpath fill='black' d='M68 0 H29 V10 C29 19.5 19.5 29 10 29 H0 V68 H68 Z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .contact-card__surface-corner svg { display: none; } .contact-card__surface-corner--tl { top: 0; left: 0; } .contact-card__surface-corner--tr { top: 0; right: 0; transform: rotate(90deg); } .contact-card__surface-corner--br { right: 0; bottom: 0; transform: rotate(180deg); } .contact-card__surface-corner--bl { bottom: 0; left: 0; transform: rotate(270deg); } /* Inset ornamental frame — cream paper margin sits outside this box */ .contact-card .ornate-card-frame { inset: var(--postal-frame-inset); z-index: 2; color: var(--postal-frame-stroke); opacity: 1; } .contact-card .ornate-card-frame__path { stroke: currentColor; stroke-opacity: 1; stroke-width: 1; } .contact-card__postal-mark { position: absolute; top: -2px; right: -1%; z-index: 4; display: block; width: clamp(118px, 34%, 152px); height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; transform-origin: 28% 50%; } @media (min-width: 761px) { .contact-card__postal-mark { top: -10px; right: -2%; width: clamp(185px, 30%, 245px); } } .contact-card__inner { position: relative; z-index: 3; box-sizing: border-box; display: flex; flex-direction: column; height: auto; min-height: 0; padding: 40px 0 32px; } @media (min-width: 761px) { .contact-card__inner { position: relative; inset: auto; height: auto; /* Content-driven height; ~40–52px below confirmation note */ padding: clamp(3.15rem, 4vw, 3.65rem) 0 clamp(2.55rem, 3.1vw, 3.25rem); } } .contact-card__title-divider { position: absolute; top: calc(var(--postal-frame-inset) + 0.85rem); left: 50%; z-index: 4; width: min(12rem, 62%); transform: translateX(-50%); opacity: 0.48; pointer-events: none; } @media (min-width: 761px) { .contact-card__title-divider { top: calc(var(--postal-frame-inset) + 1.35rem); width: min(15rem, 64%); } } .contact-card__title { flex: 0 0 auto; width: 85%; margin: 1.75rem auto 12px; font-family: var(--font-display-contact); font-size: clamp(1.75rem, 6.5vw, 2.2rem); font-weight: 600; line-height: 1; letter-spacing: 0.025em; text-transform: uppercase; text-align: center; color: var(--tgg-purple); } @media (min-width: 761px) { .contact-card__title { /* Centered in the full card width; padding owns vertical placement */ margin: 0.15rem auto 0.7rem; font-size: clamp(2.15rem, 3.1vw, 2.75rem); } } .contact-form { display: flex; flex-direction: column; gap: 14px; flex: 0 0 auto; width: 85%; min-height: 0; max-width: none; margin-inline: auto; } @media (min-width: 761px) { .contact-form { display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; gap: 9px; /* Keep first controls below the postal-mark occupied zone */ margin-top: 0.85rem; } } .contact-form__row { display: grid; grid-template-columns: 1fr; column-gap: 14px; row-gap: 14px; margin: 0; } @media (min-width: 761px) { .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .contact-field { display: flex; flex-direction: column; gap: 7px; min-height: 0; margin: 0; } .contact-form__row .contact-field { margin: 0; } .contact-field--order { overflow: hidden; max-height: 0; opacity: 0; margin: 0; pointer-events: none; visibility: hidden; transition: max-height 0.28s ease, opacity 0.22s ease, margin 0.22s ease, visibility 0s linear 0.22s; } .contact-field--order.is-open { max-height: 6rem; opacity: 1; margin: 0; pointer-events: auto; visibility: visible; transition: max-height 0.28s ease, opacity 0.22s ease, margin 0.22s ease, visibility 0s; } .page-contact.js-motion .contact-field--order.is-open, .page-contact .contact-field--order.is-open { opacity: 1 !important; transform: none !important; visibility: visible; } .contact-form > .contact-honeypot { grid-row: 1; grid-column: 1; width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; } .contact-form > .contact-form__row:nth-child(2) { grid-row: 1; } .contact-form > .contact-form__row:nth-child(3) { grid-row: 2; } .contact-form > .contact-field--order { grid-row: 3; } .contact-form > .contact-field:not(.contact-field--order) { grid-row: 4; min-height: 0; } .contact-form > .contact-form__actions { grid-row: 5; } .contact-form > .contact-field:not(.contact-field--order) .contact-field__textarea { flex: 0 0 auto; min-height: 120px; } @media (min-width: 761px) { .contact-form > .contact-field:not(.contact-field--order) .contact-field__textarea { flex: none; height: 92px; min-height: 88px; max-height: 160px; } } .contact-field__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tgg-purple); } .contact-field__optional { font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(48, 18, 61, 0.6); } .contact-field__input, .contact-field__select, .contact-field__textarea { box-sizing: border-box; width: 100%; min-height: 42px; padding: 0.6rem 0.75rem; font-family: var(--font-body-contact); font-size: 0.9375rem; color: var(--tgg-ink); background: var(--paper-field); border: 1px solid var(--paper-field-border); border-radius: 2px; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .contact-field__textarea { resize: vertical; } .contact-field__input:focus, .contact-field__select:focus, .contact-field__textarea:focus { outline: none; border-color: var(--tgg-purple); background: rgba(220, 163, 237, 0.12); box-shadow: 0 0 0 3px rgba(220, 163, 237, 0.35); } .contact-field.is-invalid .contact-field__input, .contact-field.is-invalid .contact-field__select, .contact-field.is-invalid .contact-field__textarea { border-color: var(--tgg-error); } .contact-field__error { margin: 0; font-size: 0.875rem; color: var(--tgg-error); } .contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .contact-form__actions { margin: 0; display: flex; flex-direction: column; gap: 13px; } .contact-form__submit { width: 100%; min-height: 44px; gap: 0.45rem; color: #fffaf1; background: linear-gradient(90deg, #4f0d68 0%, #641477 48%, #4f0d68 100%); border: 1px solid rgba(77, 12, 100, 0.55); border-radius: 0; } .contact-form__note { margin: 0; padding-top: 0; font-size: 0.8125rem; line-height: 1.5; text-align: center; color: rgba(48, 18, 61, 0.75); } .contact-form__submit:hover { background: linear-gradient(90deg, #5a1175 0%, #721887 48%, #5a1175 100%); border-color: rgba(77, 12, 100, 0.7); color: #fffaf1; } .contact-form__submit::after { content: none; display: none; } .contact-form__submit-arrow { display: inline-block; transition: transform 0.2s ease; } @media (hover: hover) { .contact-form__submit:hover .contact-form__submit-arrow { transform: translateX(3px); } } .contact-form__submit:active { transform: translateY(1px); } .contact-form__note { margin: 0; padding-top: 13px; font-size: 0.8125rem; line-height: 1.5; text-align: center; color: rgba(48, 18, 61, 0.75); } .contact-alert { margin-bottom: 1rem; padding: 0.85rem 1rem; font-size: 0.9375rem; line-height: 1.5; color: var(--tgg-ink); background: rgba(241, 106, 58, 0.12); border: 1px solid var(--tgg-orange); } .contact-success { padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem) 1rem; text-align: center; } .contact-success__stamp { margin: 0 auto 0.75rem; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--tgg-purple); border: 2px solid var(--tgg-purple); border-radius: 50%; transform: rotate(-6deg); } .contact-success__title { margin: 0 0 0.5rem; font-family: var(--font-display-contact); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); color: var(--tgg-purple); } .contact-success__body { margin: 0; font-size: 1rem; color: var(--tgg-ink); } /* --- Help --- */ .contact-help { background: var(--tgg-cream); padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); } .page-contact .contact-help__layout { width: 100%; max-width: none; margin: 0; padding-inline: 1rem; box-sizing: border-box; } .contact-help__header { max-width: 40rem; margin: 0 auto clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); padding-inline: 1rem; text-align: center; } .contact-help__title { margin: 0 0 0.75rem; font-family: var(--font-display-contact); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); font-weight: 600; line-height: 1.15; color: var(--tgg-purple); } .contact-help__title em { font-style: italic; font-weight: 500; color: var(--tgg-purple); } .contact-help__support { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tgg-ink); } .contact-help__grid { display: grid; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); margin: 0; padding: 0; list-style: none; } .help-card { --help-card-fill: #fdfbf7; position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(1.35rem, 1.1rem + 1vw, 1.85rem) clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem) clamp(1.25rem, 1rem + 0.8vw, 1.65rem); text-decoration: none; color: inherit; background: transparent; border: 0; border-radius: 0; isolation: isolate; overflow: visible; transition: transform 0.25s ease; } /* Cream fill clipped to the vintage-label outline (no bleed into notches) */ .help-card__surface { position: absolute; inset: 0; z-index: 0; color: var(--help-card-fill); pointer-events: none; filter: drop-shadow(0 10px 22px rgba(26, 10, 36, 0.06)); transition: color 0.25s ease, filter 0.25s ease; } .help-card__fill { position: absolute; background: currentColor; } .help-card__fill--mid { top: 24px; right: 0; bottom: 24px; left: 0; } .help-card__fill--top, .help-card__fill--bottom { left: 24px; right: 24px; height: 24px; } .help-card__fill--top { top: 0; } .help-card__fill--bottom { bottom: 0; } .help-card__fill-corner { position: absolute; width: 24px; height: 24px; color: inherit; } .help-card__fill-corner svg { display: block; width: 100%; height: 100%; overflow: visible; } .help-card__fill-corner path { fill: currentColor; stroke: none; } .help-card__fill-corner--tl { top: 0; left: 0; } .help-card__fill-corner--tr { top: 0; right: 0; transform: rotate(90deg); } .help-card__fill-corner--br { right: 0; bottom: 0; transform: rotate(180deg); } .help-card__fill-corner--bl { bottom: 0; left: 0; transform: rotate(270deg); } /* Vintage-label inward notches — one continuous SVG stroke (no edge/corner joins) */ .ornate-card-frame { position: absolute; inset: 0; z-index: 2; overflow: visible; color: #4e0c6b; pointer-events: none; } .ornate-card-frame__svg { display: block; width: 100%; height: 100%; overflow: visible; } .ornate-card-frame__path { fill: none; stroke: currentColor; stroke-opacity: 0.58; stroke-width: 1; stroke-linecap: square; stroke-linejoin: round; vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; } .help-card__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0; height: 100%; text-align: center; } @media (hover: hover) { .help-card:hover, .help-card:focus-visible { --help-card-fill: #f7eef8; transform: translateY(-4px); } .help-card:hover .help-card__surface, .help-card:focus-visible .help-card__surface { filter: drop-shadow(0 14px 28px rgba(26, 10, 36, 0.1)); } .help-card:hover .help-card__cta span, .help-card:focus-visible .help-card__cta span { transform: translateX(3px); } } .help-card__symbol { width: 3.25rem; height: 3.25rem; margin-bottom: 0.25rem; } /* FAQ + Wholesale single-asset icons — match Shipping visual weight */ .help-card__art { position: relative; isolation: isolate; width: clamp(7.5rem, 18vw, 10.5rem); aspect-ratio: 1; margin-inline: auto; margin-bottom: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem); flex: 0 0 auto; overflow: visible; pointer-events: none; } .help-card__art-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; transform-origin: center; transform: translate3d(0, 0, 0); } .faq-art__sun { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } .wholesale-art__moth { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } @media (hover: hover) and (pointer: fine) { .help-card--faq:hover .faq-art__sun { transform: translate3d(0, -1px, 0) rotate(2.5deg) scale(1.025); } .help-card--wholesale:hover .wholesale-art__moth { transform: translate3d(0, -5px, 0) rotate(1.25deg) scale(1.018); } } .help-card--faq:focus-within .faq-art__sun { transform: translate3d(0, -1px, 0) rotate(2.5deg) scale(1.025); } .help-card--wholesale:focus-within .wholesale-art__moth { transform: translate3d(0, -5px, 0) rotate(1.25deg) scale(1.018); } @media (prefers-reduced-motion: reduce) { .faq-art__sun, .wholesale-art__moth { transition: none !important; transform: none !important; will-change: auto; } } .help-card--shipping .shipping-art { align-self: center; margin-bottom: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem); } /* Layered Shipping + Returns icon — shared 1254 canvas, stacked in place */ .shipping-art { position: relative; isolation: isolate; width: clamp(7.5rem, 18vw, 10.5rem); aspect-ratio: 1; flex: 0 0 auto; overflow: visible; } .shipping-art__layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; transform: translate3d(0, 0, 0); } .shipping-art__moon { z-index: 1; } .shipping-art__cloud--right { z-index: 2; } .shipping-art__cloud--left { z-index: 3; } .shipping-art__moon, .shipping-art__cloud { transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } @media (hover: hover) and (pointer: fine) { .help-card--shipping:hover .shipping-art__cloud--left { transform: translate3d(-6px, 0, 0); } .help-card--shipping:hover .shipping-art__cloud--right { transform: translate3d(7px, -2px, 0); } .help-card--shipping:hover .shipping-art__moon { transform: rotate(-0.75deg); } } .help-card--shipping:focus-within .shipping-art__cloud--left { transform: translate3d(-6px, 0, 0); } .help-card--shipping:focus-within .shipping-art__cloud--right { transform: translate3d(7px, -2px, 0); } .help-card--shipping:focus-within .shipping-art__moon { transform: rotate(-0.75deg); } @media (prefers-reduced-motion: reduce) { .shipping-art__moon, .shipping-art__cloud { transition: none !important; transform: none !important; will-change: auto; } } .help-card__title { margin: 0 0 0.55rem; font-family: var(--font-display-contact); font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.4rem); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--tgg-purple); } .help-card__copy { margin: 0 0 1.15rem; max-width: 18.5rem; flex: 1; font-size: 0.9375rem; line-height: 1.55; text-align: center; color: var(--tgg-ink); } .help-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: auto; padding: 0.7rem 1.15rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgg-purple); background: transparent; border: 1px solid var(--tgg-purple); transition: background-color 0.25s ease, color 0.25s ease; } .help-card__cta span { display: inline-block; transition: transform 0.2s ease; } @media (hover: hover) { .help-card:hover .help-card__cta, .help-card:focus-visible .help-card__cta { background: rgba(220, 163, 237, 0.12); } } @media (min-width: 761px) { .contact-help.section { padding-top: 18px; padding-bottom: 28px; } .page-contact .contact-help__layout { padding-inline: 0; } .page-contact .contact-help__header { max-width: min(42rem, 100%); margin: 0 auto 1.35rem; padding-inline: clamp(1rem, 3vw, 2rem); } .contact-help__title { margin: 0 0 0.5rem; } .contact-help__support { margin: 0; } .page-contact .contact-help__grid { width: min( calc(100% - (2 * clamp(2rem, 8vw, 7rem))), 58rem ); max-width: none; margin-inline: auto; gap: clamp(1rem, 1.7vw, 1.4rem); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .contact-help__grid > li { display: flex; } .contact-help__grid > li:last-child { grid-column: auto; max-width: none; justify-self: stretch; width: 100%; } .help-card { min-height: 275px; height: 100%; padding: 1rem 0.9rem 0.9rem; } .help-card__art, .shipping-art { width: 6.35rem; margin-bottom: 0.35rem; } .help-card__title { margin-bottom: 0.25rem; font-size: 1.15rem; } .help-card__copy { margin-bottom: 0.45rem; flex: 0 1 auto; font-size: 0.84rem; line-height: 1.4; } .help-card__cta { margin-top: auto; padding: 0.5rem 0.9rem; } } /* --- Social --- */ .contact-social { position: relative; overflow: hidden; /* Editorial crop — shorter than full source artwork */ aspect-ratio: 3.7 / 1; width: 100%; padding: 0; color: var(--tgg-cream); background-color: #1a051d; } .contact-social__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .contact-social__bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 42% 42%; } .contact-social__content { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; max-width: none; height: 100%; margin: 0; box-sizing: border-box; /* Sit copy in the open sky between botanicals and polaroids */ padding: clamp(1.1rem, 2.4vw, 1.85rem) clamp(1rem, 28vw, 34%) clamp(1rem, 2.2vw, 1.75rem) clamp(10%, 14vw, 18%); } .page-contact .contact-social__content { padding-left: clamp(14vw, 16vw, 17vw); padding-right: clamp(26%, 30vw, 36%); } .contact-social__copy { width: min(100%, 42rem); margin: 0; text-align: left; } .contact-social__title { margin: 0; font-family: var(--font-display-contact); font-size: clamp(2.35rem, 4.4vw, 4.25rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; color: var(--tgg-cream); } .contact-social__title em { display: inline-block; font-family: var(--font-script-contact); font-style: normal; font-weight: 400; font-size: 1.12em; line-height: 1; color: var(--tgg-lavender); letter-spacing: 0.01em; } .contact-social__body { margin: 0 0 0.95rem; max-width: 24rem; font-size: clamp(0.8125rem, 0.75rem + 0.35vw, 1.0625rem); line-height: 1.5; color: rgba(250, 246, 238, 0.92); } .page-contact .contact-divider--social { margin-left: 0; margin-right: auto; } .contact-social__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.65rem 1.2rem; font-family: var(--font-body-contact); font-size: clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--tgg-cream); background: transparent; border: 1px solid rgba(250, 246, 238, 0.9); border-radius: 2px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .contact-social__cta:hover, .contact-social__cta:focus-visible { background: rgba(220, 163, 237, 0.16); border-color: var(--tgg-cream); color: var(--tgg-cream); } .contact-social__cta::after { content: none; display: none; } .page-contact .join-gang { position: relative; isolation: isolate; } .page-contact .join-gang__grid { width: min(100% - (2 * clamp(2.5rem, 10vw, 6rem)), 72rem); max-width: none; margin-inline: auto; box-sizing: border-box; } .page-contact .join-gang__panel { position: relative; } .page-contact .join-gang__frame { display: none; } .page-contact .join-gang__divider { display: none; } .page-contact .join-gang__title-line, .page-contact .join-gang__title-accent { display: inline; } .page-contact .join-gang__title-accent::before { content: "\00a0"; } .page-contact .join-gang__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .page-contact .join-gang__submit::after { content: none; display: none; } .page-contact .join-gang__submit-arrow { display: inline-block; transition: transform 0.2s ease; } .contact-newsletter-moon { display: none; width: clamp(6.5rem, 11vw, 9rem); height: auto; border: 0; border-radius: 0; background: none; opacity: 1; align-self: center; justify-self: end; } .contact-newsletter-moon__img { display: block; width: 100%; height: auto; mix-blend-mode: screen; } .page-contact .join-gang__consent { margin-top: 0.65rem; max-width: none; font-size: 0.75rem; line-height: 1.45; } .page-contact .join-gang__consent-toggle { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--tgg-purple); font: inherit; font-weight: 600; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .page-contact .join-gang__consent-toggle:hover, .page-contact .join-gang__consent-toggle:focus-visible { color: var(--tgg-ink); } .page-contact .join-gang__consent-detail { display: block; margin-top: 0.35rem; color: rgba(48, 18, 61, 0.78); } .page-contact .join-gang__consent-detail[hidden] { display: none; } .page-contact .site-footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; } .page-contact .site-footer__inner { width: min(100% - (2 * clamp(2rem, 6vw, 5rem)), 72rem); max-width: none; margin-inline: auto; box-sizing: border-box; } /* --- Hero entrances: CSS-first so they run on paint (GHL footer JS is late) --- */ @keyframes tgg-contact-enter-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .page-contact [data-hero-layer="artwork"] { animation: tgg-contact-enter-up 0.7s ease both; } .page-contact [data-hero-item="title-main"] { animation: tgg-contact-enter-up 0.7s ease 40ms both; } .page-contact [data-hero-item="title-accent"] { animation: tgg-contact-enter-up 0.7s ease 90ms both; } .page-contact [data-hero-item="divider"] { animation: tgg-contact-enter-up 0.65s ease 130ms both; } .page-contact [data-hero-item="lead"] { animation: tgg-contact-enter-up 0.7s ease 170ms both; } @media (prefers-reduced-motion: reduce) { .page-contact [data-hero-layer="artwork"], .page-contact [data-hero-item="title-main"], .page-contact [data-hero-item="title-accent"], .page-contact [data-hero-item="divider"], .page-contact [data-hero-item="lead"] { animation: none !important; opacity: 1 !important; transform: none !important; } } /* --- Motion-ready (applied only after JS init) --- */ /* Hero is CSS-animated above; do not re-hide it when JS boots. */ .page-contact.js-motion [data-form-item], .page-contact.js-motion .help-card, .page-contact.js-motion .contact-help__header, .page-contact.js-motion .contact-social__copy, .page-contact.js-motion .contact-divider--social, .page-contact.js-motion .join-gang__copy, .page-contact.js-motion .join-gang__form { opacity: 0; transform: translateY(12px); } .page-contact.js-motion .contact-card__postal-mark { opacity: 0; transform: rotate(6deg); } /* GHL late boot: keep below-fold content visible, animate with transform only. Do NOT set transition here — a pre-reveal transition animates into the offset, and transition:none would outrank .is-inview and kill entrances. */ .page-contact.js-motion.js-motion--late [data-form-item], .page-contact.js-motion.js-motion--late .help-card, .page-contact.js-motion.js-motion--late .contact-help__header, .page-contact.js-motion.js-motion--late .contact-social__copy, .page-contact.js-motion.js-motion--late .contact-divider--social, .page-contact.js-motion.js-motion--late .join-gang__copy, .page-contact.js-motion.js-motion--late .join-gang__form { opacity: 1; transform: translateY(14px); } .page-contact.js-motion.js-motion--late .contact-card__postal-mark { opacity: 1; transform: rotate(6deg); } .page-contact.js-motion.js-motion--late .join-gang__star, .page-contact.js-motion.js-motion--late .join-gang__divider-line, .page-contact.js-motion.js-motion--late .join-gang__deco { opacity: 1; } .page-contact.js-motion.is-reduced-motion [data-form-item], .page-contact.js-motion.is-reduced-motion .help-card, .page-contact.js-motion.is-reduced-motion .contact-help__header, .page-contact.js-motion.is-reduced-motion .contact-social__copy, .page-contact.js-motion.is-reduced-motion .contact-divider--social, .page-contact.js-motion.is-reduced-motion .join-gang__copy, .page-contact.js-motion.is-reduced-motion .join-gang__form, .page-contact.js-motion.is-reduced-motion .contact-card__postal-mark { opacity: 1 !important; transform: none !important; transition: none !important; } .page-contact .is-inview { opacity: 1 !important; transform: none !important; transition: opacity 0.7s ease, transform 0.7s ease; } .page-contact .contact-field--order:not(.is-open).is-inview, .page-contact .contact-field--order:not(.is-open) { opacity: 0 !important; transform: none !important; } .page-contact .contact-card__postal-mark.is-inview { opacity: 1 !important; transform: rotate(0deg) !important; } @media (min-width: 761px) { .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-correspondence__deco { display: block; position: absolute; z-index: 1; } .contact-correspondence__deco--left { left: max(-12vw, -210px); top: 8px; width: clamp(150px, 18vw, 200px); } .contact-correspondence__deco--right { right: max(-10vw, -185px); top: auto; bottom: 18px; width: clamp(140px, 16vw, 190px); } .contact-correspondence__deco--left .contact-correspondence__deco-img, .contact-correspondence__deco--right .contact-correspondence__deco-img { width: 100%; transform: none; } .page-contact .join-gang { padding-block: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem); } .page-contact .site-footer { padding-block: clamp(1.65rem, 1.35rem + 0.9vw, 2.35rem); } } @media (min-width: 900px) { .contact-correspondence__deco--left { left: -220px; top: 4px; width: clamp(175px, 19vw, 215px); } .contact-correspondence__deco--right { right: -195px; top: auto; bottom: 28px; width: clamp(160px, 17vw, 200px); } .page-contact .join-gang__deco.contact-newsletter-moon { display: flex; } } /* ========================================================================== Mobile composition pass (≤760px) Shared foundation + three intentional ranges: - Core: max-width 539px - Small phones: max-width 359px - Large phones / narrow tablets: 540–760px Desktop / tablet rules above 760px are untouched. ========================================================================== */ /* ========================================================================== Mobile composition (≤760px) — layered full-bleed hero & social Ranges for focal tweaks only: - ≤359px small phones - 360–539px core phones - 540–760px large phones / narrow tablets Desktop rules above 760px are untouched. ========================================================================== */ @media (max-width: 760px) { html:has(.page-contact), body:has(.page-contact) { overflow-x: clip; } .page-contact { /* Content inset only — section shells stay edge-to-edge */ --mobile-gutter: clamp(16px, 5vw, 22px); --mobile-section-space: clamp(36px, 10vw, 52px); --mobile-tight-space: clamp(18px, 5vw, 28px); --mobile-control-height: 48px; --mobile-postcard-overlap: clamp(-42px, -9vw, -30px); --mobile-newsletter-overlap: clamp(-18px, -4.5vw, -12px); width: 100%; max-width: 100%; overflow-x: clip; } /* Kill .container side shrink (header, etc.) */ .page-contact .container, .page-contact .site-header__inner.container { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--mobile-gutter); box-sizing: border-box; } /* --- Shared type / form usability --- */ .contact-field__input, .contact-field__select, .contact-field__textarea, .page-contact .form-field__input { font-size: 16px; } .contact-field__label { font-size: 0.75rem; line-height: 1.25; letter-spacing: 0.055em; } .contact-field { gap: 7px; } .contact-hero__lead, .contact-help__support, .contact-social__body, .page-contact .join-gang__body { font-size: 0.9375rem; line-height: 1.5; } .contact-form__note { font-size: 0.75rem; line-height: 1.45; margin-top: 0; padding-top: 0.85rem; } .page-contact .join-gang__consent, .page-contact .join-gang__consent a, .page-contact .join-gang__consent-toggle { font-size: 0.75rem; line-height: 1.4; } /* --- Hero: one layered full-bleed composition --- */ .page-contact .contact-hero { position: relative; display: grid; align-items: end; width: 100%; min-height: clamp(26rem, 112vw, 34rem); aspect-ratio: auto; overflow: hidden; background: var(--tgg-midnight); } .page-contact .contact-hero__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; overflow: hidden; pointer-events: none; } .page-contact .contact-hero__image { width: 100%; height: 100%; object-fit: cover; /* Keep envelope, hand, moth, moons mid-frame behind copy */ object-position: 58% 42%; } .page-contact .contact-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(24, 6, 31, 0) 0%, rgba(24, 6, 31, 0.04) 18%, rgba(24, 6, 31, 0.18) 36%, rgba(24, 6, 31, 0.48) 52%, rgba(24, 6, 31, 0.78) 66%, rgba(24, 6, 31, 0.94) 80%, var(--tgg-midnight) 92%, var(--tgg-midnight) 100% ); } .page-contact .contact-hero__content { position: relative; z-index: 2; width: 100%; height: auto; margin: 0; padding: clamp(1.25rem, 5vw, 1.75rem) var(--mobile-gutter) clamp(2.75rem, 10vw, 3.5rem); background: none; } .page-contact .contact-hero__copy { width: 100%; max-width: 22rem; margin: 0; } .page-contact .contact-hero__eyebrow { display: none; } .page-contact .contact-hero__title { font-size: clamp(3.05rem, 15.5vw, 4.35rem); line-height: 0.88; font-weight: 700; } .page-contact .contact-hero__title-line { display: flex; flex-wrap: nowrap; white-space: nowrap; } .page-contact .contact-divider--hero { width: min(17rem, 88%); height: 0.9rem; margin-block: 12px 14px; } .page-contact .contact-divider--help { width: min(12rem, 70%); height: 0.8rem; margin-block: 0 14px; } .page-contact .contact-divider--social { width: min(14rem, 78%); height: 0.85rem; margin-block: 12px 14px; } .page-contact .contact-hero__lead { max-width: 20.5rem; margin: 0; } /* --- Postcard: emerges from hero, content-driven --- */ .page-contact .contact-correspondence { overflow: clip; margin-top: var(--mobile-postcard-overlap); padding-bottom: clamp(28px, 7vw, 36px); } /* Quiet cream under the postcard — no shared grain with the card */ .page-contact .contact-correspondence::before { top: clamp(0.85rem, 3.5vw, 1.5rem); background-color: #f5efe5; background-image: none; } .page-contact .contact-correspondence::after { display: none; } .page-contact .contact-stage { position: relative; width: 100%; max-width: 100%; padding-inline: 0; box-sizing: border-box; } .page-contact .contact-card { position: relative; z-index: 2; width: 100%; max-width: 100%; margin-inline: 0; aspect-ratio: auto; } /* Paper grain stays inside the notched postcard silhouette */ .page-contact .contact-card__surface { filter: drop-shadow(0 16px 32px rgba(53, 24, 48, 0.12)) drop-shadow(0 4px 10px rgba(53, 24, 48, 0.07)); } .page-contact .contact-card__surface-fill, .page-contact .contact-card__surface-corner { background-color: #f8f2e8; background-image: var(--paper-texture); background-size: 240px 240px; background-blend-mode: multiply; opacity: 1; } .page-contact .contact-field__input, .page-contact .contact-field__select, .page-contact .contact-field__textarea { background-color: rgba(250, 246, 238, 0.94); background-image: none; } .page-contact .contact-card__inner { height: auto; min-height: 0; padding: clamp(2.15rem, 6vw, 2.55rem) var(--mobile-gutter) clamp(2.55rem, 7.5vw, 3.15rem); box-sizing: border-box; } .page-contact .contact-card__postal-mark { right: 0; width: clamp(100px, 30%, 132px); } .page-contact .contact-card__title { width: min(88%, 16rem); margin: 1.35rem auto 10px; font-size: clamp(1.55rem, 6.2vw, 1.95rem); } .page-contact .contact-form { width: 100%; max-width: 100%; gap: 16px; box-sizing: border-box; } .page-contact .contact-form__row { grid-template-columns: 1fr; row-gap: 16px; } .page-contact .contact-field__input, .page-contact .contact-field__select { min-height: var(--mobile-control-height); padding: 0.7rem 0.8rem; } .page-contact .contact-field__textarea, .page-contact .contact-form > .contact-field:not(.contact-field--order) .contact-field__textarea { flex: none; min-height: 120px; padding: 0.75rem 0.8rem; } .page-contact .contact-form__submit { min-height: var(--mobile-control-height); } .page-contact .contact-form__actions { display: flex; flex-direction: column; gap: 13px; } /* Flanking botanicals: hide completely on mobile */ .page-contact .contact-correspondence__deco, .page-contact .contact-correspondence__deco--left, .page-contact .contact-correspondence__deco--right { display: none !important; } /* --- Help: continues quiet cream chapter (grain reserved for postcard) --- */ .page-contact .contact-help { position: relative; padding-block: clamp(6px, 1.5vw, 10px) clamp(42px, 10vw, 54px); background-color: #f5efe5; background-image: none; border: 0; } .page-contact .contact-help::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48px; pointer-events: none; background: linear-gradient( 180deg, rgba(245, 239, 229, 0.9) 0%, rgba(245, 239, 229, 0) 100% ); } .page-contact .contact-help__layout { width: 100%; max-width: none; margin: 0; /* Section shell stays full-bleed; inset the tab cards + copy */ padding-inline: var(--mobile-gutter); box-sizing: border-box; } .page-contact .contact-help__header { max-width: 22rem; margin: 0 auto 22px; padding-inline: 0; box-sizing: border-box; text-align: center; } .page-contact .contact-help__title { margin: 0 0 0.55rem; font-size: clamp(1.55rem, 6.4vw, 2.05rem); line-height: 1.12; } .page-contact .contact-help__support { max-width: 18.5rem; margin: 0 auto; } .page-contact .contact-help__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; } .page-contact .contact-help__grid > li, .page-contact .contact-help__grid > li:last-child { width: 100%; max-width: none; } .page-contact .help-card { width: 100%; min-height: 108px; height: auto; padding: 0; } .page-contact .help-card__inner { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 24px; grid-template-areas: "art title arrow" "art copy arrow"; align-items: center; column-gap: 12px; row-gap: 5px; min-height: 108px; padding: 16px 14px; text-align: left; } .page-contact .help-card__art, .page-contact .help-card .shipping-art { grid-area: art; align-self: center; width: 60px; height: 60px; margin: 0; margin-bottom: 0; aspect-ratio: 1; } .page-contact .help-card__art-image, .page-contact .help-card .shipping-art__layer { width: 100%; height: 100%; object-fit: contain; } .page-contact .help-card__title { grid-area: title; align-self: end; margin: 0; font-size: 1.05rem; line-height: 1.15; text-align: left; } .page-contact .help-card__copy { grid-area: copy; align-self: start; margin: 0; font-size: 0.8125rem; line-height: 1.4; text-align: left; } .page-contact .help-card__cta { grid-area: arrow; align-self: center; justify-self: end; position: static; display: flex; align-items: center; justify-content: center; width: 24px; min-width: 24px; margin-top: 0; padding: 0; border: 0; background: transparent; font-size: 0; } .page-contact .help-card__cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .page-contact .help-card__cta span[aria-hidden="true"] { font-size: 1.2rem; } .page-contact .help-card__art-image, .page-contact .shipping-art__moon, .page-contact .shipping-art__cloud, .page-contact .help-card__cta span { transition: transform 180ms ease; } .page-contact .help-card:active .help-card__cta span, .page-contact .help-card:focus-visible .help-card__cta span { transform: translateX(3px); } .page-contact .help-card--faq:active .faq-art__sun, .page-contact .help-card--faq:focus-visible .faq-art__sun, .page-contact .help-card--faq.is-pressed .faq-art__sun { transform: rotate(5deg) scale(1.03); } .page-contact .help-card--wholesale:active .wholesale-art__moth, .page-contact .help-card--wholesale:focus-visible .wholesale-art__moth, .page-contact .help-card--wholesale.is-pressed .wholesale-art__moth { transform: translateY(-4px) rotate(-1deg); } .page-contact .help-card--shipping:active .shipping-art__cloud--left, .page-contact .help-card--shipping:focus-visible .shipping-art__cloud--left, .page-contact .help-card--shipping.is-pressed .shipping-art__cloud--left { transform: translateX(-4px); } .page-contact .help-card--shipping:active .shipping-art__cloud--right, .page-contact .help-card--shipping:focus-visible .shipping-art__cloud--right, .page-contact .help-card--shipping.is-pressed .shipping-art__cloud--right { transform: translateX(4px); } .page-contact .help-card--shipping:active .shipping-art__moon, .page-contact .help-card--shipping:focus-visible .shipping-art__moon, .page-contact .help-card--shipping.is-pressed .shipping-art__moon { transform: translateY(-3px); } /* --- Social: full-frame image + gradient (hero-matched treatment) --- */ .page-contact .contact-social { position: relative; isolation: isolate; display: grid; align-items: end; width: 100%; min-height: clamp(25rem, 108vw, 31rem); aspect-ratio: auto; overflow: hidden; background: #19011d; } .page-contact .contact-social__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; overflow: hidden; pointer-events: none; } .page-contact .contact-social__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 82% top; transform: scale(1.28); transform-origin: 82% top; } .page-contact .contact-social::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(25, 1, 29, 0.05) 0%, rgba(25, 1, 29, 0.16) 18%, rgba(25, 1, 29, 0.48) 36%, rgba(25, 1, 29, 0.82) 50%, rgba(25, 1, 29, 0.96) 62%, #19011d 76%, #19011d 100% ); } .page-contact .contact-social__content { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: none; height: auto; margin: 0; padding: clamp(1.25rem, 5vw, 1.75rem) var(--mobile-gutter) clamp(2.75rem, 10vw, 3.5rem); box-sizing: border-box; background: none; } .page-contact .contact-social__copy { width: 100%; max-width: 22rem; margin-inline: auto; text-align: center; } .page-contact .contact-social__title { font-size: clamp(2rem, 9.5vw, 2.65rem); } .page-contact .contact-social__body { max-width: 20rem; margin: 0 auto clamp(1.45rem, 5.5vw, 1.85rem); } .page-contact .contact-social__cta { width: 100%; max-width: 20rem; min-height: 48px; justify-content: center; margin-inline: auto; } /* --- Newsletter: overlaps social edge --- */ .page-contact .join-gang { position: relative; z-index: 3; height: auto; min-height: 0; aspect-ratio: auto; overflow: visible; margin-top: var(--mobile-newsletter-overlap); padding: 0; border-top: 0; background: transparent; } .page-contact .join-gang__panel { position: relative; overflow: hidden; margin-inline: 0; padding: 14px; background-color: #dca3ed; background-image: var(--paper-texture); background-size: 420px 420px; isolation: isolate; } .page-contact .join-gang__panel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( circle at 22% 24%, rgba(255, 248, 235, 0.07), transparent 38% ), radial-gradient( circle at 75% 76%, rgba(78, 12, 107, 0.04), transparent 44% ); mix-blend-mode: multiply; } .page-contact .join-gang__frame { display: block; inset: 12px; z-index: 1; color: rgba(78, 12, 107, 0.8); } .page-contact .join-gang__frame .ornate-card-frame__path { stroke-opacity: 0.82; stroke-width: 1.15; } .page-contact .join-gang__grid { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: none; height: auto; min-height: 0; aspect-ratio: auto; margin: 0; padding: clamp(26px, 7vw, 34px) clamp(22px, 6vw, 30px) clamp(22px, 5.5vw, 28px); box-sizing: border-box; } .page-contact .join-gang__star { position: absolute; top: 30px; left: 26px; z-index: 3; margin: 0; font-size: 1.15rem; line-height: 1; color: var(--tgg-purple); transform-origin: center; } .page-contact .join-gang__deco.contact-newsletter-moon { display: none; } .page-contact .join-gang__copy { padding-right: 0; padding-top: 0; } .page-contact .join-gang__title { position: relative; z-index: 2; width: 100%; max-width: none; margin: 38px 0 0; color: var(--tgg-purple); line-height: 0.86; text-align: left; text-transform: none; letter-spacing: 0; } .page-contact .join-gang__title-line { display: block; width: max-content; max-width: 100%; white-space: nowrap; font-family: var(--font-display-contact); font-size: clamp(2.35rem, 12vw, 3.2rem); font-style: normal; font-weight: 600; line-height: 0.92; letter-spacing: 0.015em; text-transform: uppercase; } .page-contact .join-gang__title-accent { display: block; width: max-content; max-width: 100%; margin-top: 2px; font-family: var(--font-display-contact); font-size: clamp(3rem, 15.5vw, 4.15rem); font-style: italic; font-weight: 400; line-height: 0.9; letter-spacing: -0.025em; text-transform: uppercase; } .page-contact .join-gang__title-accent::before { content: none; } .page-contact .join-gang__body { position: relative; z-index: 2; max-width: 21rem; margin: 14px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--tgg-ink); text-align: left; } .page-contact .join-gang__divider { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: 100%; margin: 18px 0 18px; color: var(--tgg-gold); } .page-contact .join-gang__divider-line { height: 1px; background: currentColor; opacity: 0.75; transform-origin: center; } .page-contact .join-gang__divider-star { font-size: 0.95rem; line-height: 1; } .page-contact .join-gang__form { position: relative; z-index: 2; width: 100%; margin: 0; } .page-contact .join-gang__status { font-size: 0.8125rem; } .page-contact .join-gang .form-field__row { display: grid; grid-template-columns: 1fr; flex-direction: column; gap: 10px; width: 100%; } .page-contact .join-gang .form-field__label { display: block; margin-bottom: 8px; font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgg-purple); } .page-contact .join-gang .form-field__input { box-sizing: border-box; width: 100%; min-height: var(--mobile-control-height); padding: 0.75rem 1rem; font-size: 16px; color: var(--tgg-ink); background: rgba(255, 252, 245, 0.96); border: 1px solid rgba(78, 12, 107, 0.8); border-radius: 1px; box-shadow: none; } .page-contact .join-gang .form-field__input::placeholder { color: rgba(78, 12, 107, 0.45); opacity: 1; } .page-contact .join-gang .form-field__input:focus { outline: 2px solid rgba(78, 12, 107, 0.72); outline-offset: 2px; box-shadow: none; } .page-contact .join-gang__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: var(--mobile-control-height); padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: #fffaf1; background: linear-gradient( 90deg, #4a0b61 0%, #642174 50%, #4a0b61 100% ); border: 1px solid rgba(184, 148, 74, 0.7); border-radius: 1px; box-shadow: none; } .page-contact .join-gang__submit::after { content: none; display: none; } .page-contact .join-gang__submit:hover, .page-contact .join-gang__submit:focus-visible { background: linear-gradient( 90deg, #55106d 0%, #742981 50%, #55106d 100% ); outline: 2px solid rgba(78, 12, 107, 0.72); outline-offset: 2px; } .page-contact .join-gang__submit:active { transform: translateY(1px); } .page-contact .join-gang__submit:hover .join-gang__submit-arrow, .page-contact .join-gang__submit:focus-visible .join-gang__submit-arrow { transform: translateX(3px); } .page-contact .join-gang__consent { position: relative; z-index: 2; margin: 12px 0 0; font-size: 0.75rem; line-height: 1.4; text-align: left; color: var(--tgg-purple); } .page-contact .join-gang__consent-toggle { display: inline-flex; align-items: center; min-height: 34px; font-size: 0.75rem; line-height: 1.4; color: var(--tgg-purple); text-decoration: underline; text-underline-offset: 2px; } .page-contact.js-motion .join-gang__star { opacity: 0; transform: scale(0.96); } .page-contact.js-motion .join-gang__deco.contact-newsletter-moon { opacity: 0; transform: rotate(-2deg); } .page-contact.js-motion .join-gang__divider-line { transform: scaleX(0); } .page-contact.js-motion .join-gang.is-inview .join-gang__star, .page-contact.js-motion .join-gang__star.is-inview { opacity: 1; transform: scale(1); transition: opacity 420ms ease, transform 420ms ease; } .page-contact.js-motion .join-gang.is-inview .join-gang__deco.contact-newsletter-moon, .page-contact.js-motion .join-gang__deco.contact-newsletter-moon.is-inview { opacity: 1; transform: rotate(0deg); transition: opacity 520ms ease, transform 520ms ease; } .page-contact.js-motion .join-gang.is-inview .join-gang__divider-line, .page-contact.js-motion .join-gang__divider.is-inview .join-gang__divider-line { transform: scaleX(1); transition: transform 520ms ease; } /* --- Footer --- */ .page-contact .site-footer { border-top: 0; padding-top: clamp(24px, 6vw, 32px); padding-bottom: calc( clamp(1.5rem, 5vw, 2rem) + env(safe-area-inset-bottom, 0px) ); background-color: var(--paper); background-image: var(--paper-texture); background-size: 420px 420px; } .page-contact .site-footer__inner { width: auto; max-width: none; margin-inline: 0; padding-inline: var(--mobile-gutter); gap: 0.85rem; box-sizing: border-box; } .page-contact .site-footer__nav { width: 100%; } .page-contact .site-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; width: 100%; justify-content: stretch; text-align: center; } .page-contact .site-footer__links a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 6px 4px; font-size: 0.75rem; line-height: 1.25; } .page-contact .site-header__menu-toggle, .page-contact .site-header__cart-mobile { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* -------------------------------------------------------------------------- Focal / sizing tweaks — small phones (≤359px) -------------------------------------------------------------------------- */ @media (max-width: 359px) { .page-contact { --mobile-gutter: 16px; --mobile-postcard-overlap: -30px; } .page-contact .contact-hero { min-height: clamp(24rem, 118vw, 30rem); } .page-contact .contact-hero__image { object-position: 54% 40%; } .page-contact .contact-hero__title { font-size: clamp(2.7rem, 15.5vw, 3.2rem); } .page-contact .contact-hero__title-line { letter-spacing: -0.01em; } .page-contact .contact-divider--hero { width: min(15rem, 92%); margin-block: 10px 12px; } .page-contact .contact-card__postal-mark { width: clamp(92px, 28%, 112px); } .page-contact .contact-card__title { width: min(90%, 14.5rem); font-size: 1.45rem; } .page-contact .contact-form { width: 100%; gap: 14px; } .page-contact .contact-help__title { font-size: clamp(1.4rem, 7vw, 1.7rem); } .page-contact .help-card__inner { grid-template-columns: 52px minmax(0, 1fr) 20px; min-height: 100px; padding: 14px 10px; } .page-contact .help-card__art, .page-contact .help-card .shipping-art { width: 48px; height: 48px; } .page-contact .help-card__title { font-size: 0.95rem; } .page-contact .help-card__copy { font-size: 0.75rem; } .page-contact .contact-social { min-height: clamp(23rem, 114vw, 28rem); } .page-contact .contact-social__bg { object-position: 88% top; transform: scale(1.36); transform-origin: 88% top; } .page-contact .contact-social__title { font-size: clamp(1.85rem, 10vw, 2.2rem); } .page-contact .contact-social__cta { max-width: none; } .page-contact .join-gang__grid { padding-inline: 18px; } .page-contact .join-gang__title { margin-top: 32px; } .page-contact .join-gang__title-line { font-size: 2.2rem; } .page-contact .join-gang__title-accent { font-size: 2.85rem; } .page-contact .join-gang__star { top: 26px; left: 20px; font-size: 1.05rem; } .page-contact .join-gang__body { margin-top: 12px; } .page-contact .join-gang__divider { margin: 14px 0 16px; } } /* -------------------------------------------------------------------------- Focal / sizing tweaks — core phones (360–539px) -------------------------------------------------------------------------- */ @media (min-width: 360px) and (max-width: 539px) { .page-contact { --mobile-postcard-overlap: clamp(-40px, -10vw, -30px); } .page-contact .contact-hero__image { object-position: 58% 42%; } .page-contact .contact-social__bg { object-position: 82% top; transform: scale(1.28); transform-origin: 82% top; } .page-contact .contact-hero__title { font-size: clamp(2.95rem, 16.2vw, 4.1rem); } .page-contact .help-card__inner { grid-template-columns: 58px minmax(0, 1fr) 22px; column-gap: 10px; padding: 15px 12px; } .page-contact .help-card__art, .page-contact .help-card .shipping-art { width: 54px; height: 54px; } .page-contact .help-card__title { font-size: 1rem; } } /* -------------------------------------------------------------------------- Focal / sizing tweaks — large phones (540–760px) -------------------------------------------------------------------------- */ @media (min-width: 540px) and (max-width: 760px) { .page-contact { --mobile-gutter: clamp(20px, 4vw, 28px); --mobile-postcard-overlap: clamp(-38px, -6vw, -28px); } .page-contact .contact-hero { min-height: clamp(28rem, 88vw, 36rem); } .page-contact .contact-hero__image { object-position: 52% 38%; } .page-contact .contact-hero__title { font-size: clamp(3.6rem, 9.5vw, 4.5rem); } .page-contact .contact-hero__copy { max-width: 26rem; } .page-contact .contact-card__inner { padding: clamp(2.35rem, 4.5vw, 2.75rem) var(--mobile-gutter) clamp(2.75rem, 5vw, 3.25rem); } .page-contact .contact-card__postal-mark { width: clamp(118px, 26%, 148px); } .page-contact .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } .page-contact .contact-form { width: 100%; } .page-contact .contact-help__header { max-width: 28rem; margin-bottom: 26px; } .page-contact .contact-help__title { font-size: clamp(1.85rem, 4.2vw, 2.25rem); } .page-contact .contact-help__support { max-width: 22rem; } .page-contact .help-card__inner { grid-template-columns: 68px minmax(0, 1fr) 28px; column-gap: 16px; min-height: 112px; padding: 18px 18px; } .page-contact .help-card__art, .page-contact .help-card .shipping-art { width: 64px; height: 64px; } .page-contact .help-card__title { font-size: 1.15rem; } .page-contact .contact-social { min-height: clamp(27rem, 78vw, 34rem); } .page-contact .contact-social__bg { object-position: 74% top; transform: scale(1.18); transform-origin: 74% top; } .page-contact .contact-social__copy { max-width: 26rem; } .page-contact .contact-social__title { font-size: clamp(2.35rem, 6vw, 2.9rem); } .page-contact .join-gang__panel { margin-inline: 0; padding: 16px; } .page-contact .join-gang__grid { padding: 36px clamp(28px, 5vw, 40px) 30px; } .page-contact .join-gang__title-line { font-size: clamp(2.7rem, 7vw, 3.35rem); } .page-contact .join-gang__title-accent { font-size: clamp(3.5rem, 9vw, 4.35rem); } } @media (prefers-reduced-motion: reduce) { .help-card, .contact-form__submit-arrow, .contact-field--order { transition: none !important; } .contact-hero__image, .contact-correspondence__deco, .help-card, .help-card__art-image, .shipping-art__moon, .shipping-art__cloud, .help-card__cta span, .contact-social__bg, .page-contact .join-gang__star, .page-contact .join-gang__deco.contact-newsletter-moon, .page-contact .join-gang__divider-line, .page-contact .join-gang__submit-arrow { animation: none !important; transition: none !important; transform: none !important; } .help-card--faq:active .faq-art__sun, .help-card--faq:focus-visible .faq-art__sun, .help-card--faq.is-pressed .faq-art__sun, .help-card--wholesale:active .wholesale-art__moth, .help-card--wholesale:focus-visible .wholesale-art__moth, .help-card--wholesale.is-pressed .wholesale-art__moth, .help-card--shipping:active .shipping-art__cloud--left, .help-card--shipping:focus-visible .shipping-art__cloud--left, .help-card--shipping.is-pressed .shipping-art__cloud--left, .help-card--shipping:active .shipping-art__cloud--right, .help-card--shipping:focus-visible .shipping-art__cloud--right, .help-card--shipping.is-pressed .shipping-art__cloud--right, .help-card--shipping:active .shipping-art__moon, .help-card--shipping:focus-visible .shipping-art__moon, .help-card--shipping.is-pressed .shipping-art__moon, .help-card:active .help-card__cta span, .help-card:focus-visible .help-card__cta span { transform: none !important; } } .site-footer__item { list-style: none; margin: 0; padding: 0; } .site-footer__item--nav + .site-footer__item--legal, .site-footer__item--legal + .site-footer__item--nav { margin-inline-start: 0.35rem; } .site-footer__links a.site-footer__link--legal { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; opacity: 0.62; } .site-footer__links a.site-footer__link--legal:hover, .site-footer__links a.site-footer__link--legal:focus-visible { opacity: 1; } .page-contact .site-footer__item { list-style: none; margin: 0; padding: 0; } .page-contact .site-footer__item--nav + .site-footer__item--legal, .page-contact .site-footer__item--legal + .site-footer__item--nav { margin-inline-start: 0.35rem; } .page-contact .site-footer__links a.site-footer__link--legal { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; opacity: 0.62; } .page-contact .site-footer__links a.site-footer__link--legal:hover, .page-contact .site-footer__links a.site-footer__link--legal:focus-visible { opacity: 1; } .site-footer__nav { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; } .site-footer__links--primary { gap: 0.45rem 1.35rem; } .site-footer__links--legal { gap: 0.25rem 1rem; } .site-footer__links--legal a, .site-footer__links a.site-footer__link--legal { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; opacity: 0.58; min-height: 2.25rem; } .site-footer__links--legal a:hover, .site-footer__links--legal a:focus-visible { opacity: 1; } @media (min-width: 800px) { .site-footer__nav { align-items: flex-start; } } .page-contact .site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; } .page-contact .site-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.4rem 1.25rem; margin: 0; padding: 0; list-style: none; } .page-contact .site-footer__links--legal { gap: 0.25rem 1rem; } .page-contact .site-footer__links--legal a, .page-contact .site-footer__links a.site-footer__link--legal { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; opacity: 0.65; min-height: 2.25rem; } .page-contact .site-footer__links--legal a:hover, .page-contact .site-footer__links--legal a:focus-visible, .page-contact .site-footer__links a.site-footer__link--legal:hover, .page-contact .site-footer__links a.site-footer__link--legal:focus-visible { opacity: 1; }