/* ========================================================================== PRINTON — Print-on-demand storefront style.css : design tokens, components, animation system -------------------------------------------------------------------------- 01 Tokens 09 Categories 17 Forms 02 Base 10 Customizer 18 Drawer / modal / toast 03 Buttons & links 11 Process & flows 19 Product details 04 Header & nav 12 Rails & art 20 Auth pages 05 Reveal system 13 Creators & stats 21 Dashboard 06 Hero 14 Testimonials 22 Charts & tables 07 Marquee 15 Promo & FAQ 23 Timelines & upload 08 Product cards 16 Footer 24 Utility pages, motion prefs ========================================================================== */ /* 01 TOKENS ---------------------------------------------------------------- */ :root { --paper: #F3F3EF; --surface: #FFFFFF; --surface-2: #E8E9E3; --ink: #1B1C33; --ink-soft: #5B5D72; --line: rgba(27, 28, 51, .12); --magenta: #E5007D; --magenta-deep: #B8005F; --cyan: #00A0DC; --yellow: #FFD23F; --green: #169A62; --orange: #F2711C; --tint-m: #FFD6EA; --tint-c: #CDEEFB; --tint-y: #FFE7A3; --tint-g: #D7F0E4; --shadow-sm: 0 2px 6px rgba(27, 28, 51, .06); --shadow-md: 0 14px 34px -14px rgba(27, 28, 51, .28); --shadow-lg: 0 30px 60px -24px rgba(27, 28, 51, .35); --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --ease: cubic-bezier(.22, .8, .24, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --dir: 1; /* flips to -1 in RTL for direction-aware motion */ --header-h: 76px; --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } /* 02 BASE ------------------------------------------------------------------ */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); font-size: 1rem; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.08; } ::selection { background: var(--magenta); color: #fff; } :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } .section { padding-block: clamp(64px, 9vw, 120px); position: relative; } .h-display { font-size: clamp(2.6rem, 6.6vw, 5.6rem); font-weight: 800; letter-spacing: -.035em; line-height: .98; } .h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 750; } .h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-soft); max-width: 58ch; } .muted { color: var(--ink-soft); } .surface { background: var(--surface); } .sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 52px); } .sec-head p { max-width: 46ch; } .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; transition: top .2s; } .skip-link:focus { top: 12px; } /* print vocabulary: halftone dots, crop marks, registration mark */ .halftone { background-image: radial-gradient(currentColor 1.4px, transparent 1.6px); background-size: 14px 14px; } .crop { position: relative; } .crop::before, .crop::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; border-color: var(--ink); opacity: .35; } .crop::before { top: -10px; inset-inline-start: -10px; border-top: 1.5px solid; border-inline-start: 1.5px solid; } .crop::after { bottom: -10px; inset-inline-end: -10px; border-bottom: 1.5px solid; border-inline-end: 1.5px solid; } .reg-mark { width: 28px; height: 28px; display: inline-block; } /* 03 BUTTONS & LINKS ---------------------------------------------------------- */ .btn { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-fill: var(--magenta); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .95em 1.6em; border-radius: 999px; font-weight: 650; font-size: .97rem; line-height: 1; background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid transparent; transition: color .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease), border-color .3s; cursor: pointer; white-space: nowrap; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill); transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform .45s var(--ease); } .btn:hover::before { transform: scaleX(1); } .btn:hover { box-shadow: var(--shadow-md); } .btn:active { transform: scale(.97); } .btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); flex: none; } .btn:hover .ic-move { transform: translateX(calc(4px * var(--dir))); } .btn-primary { --btn-bg: var(--magenta); --btn-fg: #fff; --btn-fill: var(--ink); } .btn-dark { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-fill: var(--magenta); } .btn-dark:hover { --btn-fg: #fff; } .btn-outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-fill: var(--ink); border-color: var(--ink); } .btn-outline:hover { --btn-fg: var(--paper); } .btn-light { --btn-bg: #fff; --btn-fg: #1B1C33; --btn-fill: var(--yellow); } .btn-sm { padding: .7em 1.15em; font-size: .88rem; } .btn-lg { padding: 1.1em 2em; font-size: 1.05rem; } .btn-block { width: 100%; } .btn[disabled], .btn.is-loading { pointer-events: none; opacity: .85; } .btn .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; } .link-u { position: relative; font-weight: 600; background: linear-gradient(currentColor, currentColor) no-repeat var(--bgpos, 0 100%) / 0 1.5px; transition: background-size .4s var(--ease); padding-bottom: 2px; } .link-u:hover { background-size: 100% 1.5px; } .icon-btn { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background-color .25s, transform .25s var(--ease), color .25s; } .icon-btn:hover { background: var(--surface-2); } .icon-btn:active { transform: scale(.9); } .icon-btn svg { width: 21px; height: 21px; } .count-badge { position: absolute; top: 3px; inset-inline-end: 1px; min-width: 19px; height: 19px; padding-inline: 5px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; line-height: 1; transform: scale(0); transition: transform .35s var(--ease-back); } .count-badge.has { transform: scale(1); } .count-badge.bump { animation: bump .5s var(--ease-back); } .icon-btn.shake svg { animation: cartShake .6s var(--ease); } /* 04 HEADER & NAV --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); transition: background-color .4s var(--ease), box-shadow .4s var(--ease), height .35s var(--ease), backdrop-filter .4s; } .site-header.is-scrolled { --header-h: 66px; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(27, 28, 51, .35); } .site-header.is-hidden { transform: translateY(-100%); } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.04em; color: var(--ink); } .logo-mark { position: relative; width: 34px; height: 30px; flex: none; } .logo-mark i { position: absolute; width: 18px; height: 18px; border-radius: 50%; mix-blend-mode: multiply; transition: transform .5s var(--ease-back); } .logo-mark i:nth-child(1) { background: var(--cyan); left: 4px; top: 2px; } .logo-mark i:nth-child(2) { background: var(--magenta); left: 12px; top: 2px; } .logo-mark i:nth-child(3) { background: var(--yellow); left: 8px; top: 10px; } .logo:hover .logo-mark i:nth-child(1) { transform: translate(-4px, -2px); } .logo:hover .logo-mark i:nth-child(2) { transform: translate(4px, -2px); } .logo:hover .logo-mark i:nth-child(3) { transform: translate(0, 4px); } .main-nav { display: flex; align-items: center; gap: 2px; } .nav-link { position: relative; padding: 10px 12px; font-weight: 600; font-size: .94rem; color: var(--ink); border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; transition: color .25s; } .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--magenta); border-radius: 2px; transform: scaleX(0); transform-origin: var(--origin-end, right); transition: transform .4s var(--ease); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: var(--origin-start, left); } .nav-link.is-active { color: var(--magenta); } .dd { position: relative; } .dd-toggle svg { width: 14px; height: 14px; transition: transform .3s var(--ease); } .dd.open .dd-toggle svg { transform: rotate(180deg); } .dd-menu { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 230px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top; transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .3s; z-index: 70; } .dd.open .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; } .dd-menu.end { inset-inline-start: auto; inset-inline-end: 0; } .dd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-weight: 550; font-size: .93rem; transition: background-color .2s, padding .25s var(--ease); } .dd-item:hover { background: var(--surface-2); padding-inline-start: 16px; } .dd-item svg { width: 18px; height: 18px; color: var(--magenta); } .hamburger { display: none; } .hamburger span { position: absolute; left: 12px; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), opacity .2s; } .hamburger span:nth-child(1) { top: 15px; } .hamburger span:nth-child(2) { top: 21px; } .hamburger span:nth-child(3) { top: 27px; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-nav { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(88vw, 380px); z-index: 90; background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; transform: translateX(calc(105% * var(--dir))); transition: transform .5s var(--ease); box-shadow: var(--shadow-lg); } .mobile-nav.open { transform: none; } .mobile-nav .m-link { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 6px; margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; border-bottom: 1px solid var(--line); background: none; border-inline: 0; border-top: 0; text-align: start; cursor: pointer; color: inherit; appearance: none; opacity: 0; transform: translateX(calc(24px * var(--dir))); transition: opacity .4s, transform .5s var(--ease), color .2s; } .mobile-nav.open .m-link { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + 120ms); } .mobile-nav .m-link.is-active { color: var(--magenta); } .m-group { display: flex; flex-direction: column; } .dd-chev { width: 20px; height: 20px; flex: none; transition: transform .3s var(--ease); } .m-dd-toggle[aria-expanded="true"] .dd-chev { transform: rotate(180deg); } .m-submenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .m-submenu.open { grid-template-rows: 1fr; } .m-submenu-inner { overflow: hidden; } .m-sublink { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 12px; padding-inline: 22px 6px; font-weight: 600; font-size: 1.05rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); transition: color .2s; } .m-sublink:hover, .m-sublink.is-active { color: var(--magenta); } .backdrop { position: fixed; inset: 0; background: rgba(15, 16, 32, .5); backdrop-filter: blur(3px); z-index: 80; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .backdrop.show { opacity: 1; visibility: visible; } body.lock { overflow: hidden; } .search-pop { position: relative; } .search-field { position: absolute; top: 50%; inset-inline-end: 44px; transform: translateY(-50%); width: 0; opacity: 0; transition: width .45s var(--ease), opacity .3s; overflow: hidden; } .search-pop.open .search-field { width: 230px; opacity: 1; } .search-field input { width: 100%; height: 42px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); padding-inline: 16px; color: var(--ink); } .search-field input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 16%, transparent); } @media (max-width: 1180px) { .main-nav { display: none; } .hamburger { display: inline-grid; } } /* 05 REVEAL SYSTEM ----------------------------------------------------------- */ [data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.1s var(--ease), filter .9s var(--ease); transition-delay: var(--delay, 0ms); will-change: opacity, transform; } [data-reveal="fade-up"] { transform: translateY(36px); } [data-reveal="fade-down"] { transform: translateY(-30px); } [data-reveal="fade-left"] { transform: translateX(calc(-48px * var(--dir))); } [data-reveal="fade-right"] { transform: translateX(calc(48px * var(--dir))); } [data-reveal="scale-in"] { transform: scale(.9); } [data-reveal="blur-in"] { filter: blur(10px); transform: translateY(14px); } [data-reveal="image-reveal"] { opacity: 1; clip-path: inset(0 0 100% 0 round var(--r-lg)); } [data-reveal="image-reveal-x"] { opacity: 1; clip-path: inset(0 calc(100% * (var(--dir) + 1) / 2) 0 calc(100% * (1 - var(--dir)) / 2) round var(--r-lg)); } [data-reveal].is-visible { opacity: 1; transform: none; filter: none; } [data-reveal^="image-reveal"].is-visible { clip-path: inset(0 0 0 0 round var(--r-lg)); } .no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; } /* split-line headline reveal */ .split-line { display: block; overflow: hidden; padding-bottom: .06em; } .split-line > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: var(--delay, 0ms); } .is-visible .split-line > span, .split-line.is-visible > span { transform: none; } /* 06 HERO -------------------------------------------------------------------- */ .hero { position: relative; padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(56px, 8vw, 110px); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } } /* registration: CMY plates start misaligned and snap into register */ .reg-title { color: var(--ink); text-shadow: 0 0 0 transparent; } .reg-title.run { animation: register 1.6s .35s var(--ease) both; } @keyframes register { 0% { text-shadow: -14px -6px 0 rgba(0, 160, 220, .85), 12px 4px 0 rgba(229, 0, 125, .85), 4px 12px 0 rgba(255, 210, 63, .9); letter-spacing: -.02em; } 55% { text-shadow: -4px -1px 0 rgba(0, 160, 220, .6), 3px 1px 0 rgba(229, 0, 125, .6), 1px 3px 0 rgba(255, 210, 63, .7); } 100% { text-shadow: 0 0 0 rgba(0, 160, 220, 0), 0 0 0 rgba(229, 0, 125, 0), 0 0 0 rgba(255, 210, 63, 0); letter-spacing: -.035em; } } .reg-title:hover { animation: misregister .5s var(--ease); } @keyframes misregister { 40% { text-shadow: -3px 0 0 rgba(0,160,220,.7), 3px 0 0 rgba(229,0,125,.7), 0 3px 0 rgba(255,210,63,.8); } } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-sm); } .hero-badge .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(22, 154, 98, .6); animation: pulse 2s infinite; margin-inline-start: 6px; } .hero-stage { position: relative; aspect-ratio: 1 / 1.02; max-width: 620px; width: 100%; margin-inline: auto; } .hero-blob { position: absolute; inset: 8% 6% 6% 8%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: var(--tint-m); animation: morph 14s ease-in-out infinite; } .hero-blob.b2 { inset: 22% 0 16% 30%; background: var(--tint-c); animation-duration: 18s; animation-direction: reverse; opacity: .8; } .hero-dots { position: absolute; width: 150px; height: 150px; color: var(--ink); opacity: .16; inset-block-start: 2%; inset-inline-start: 0; border-radius: 50%; } .hero-item { position: absolute; will-change: transform; } .hero-item img { width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(27, 28, 51, .22)); } .parallax-layer { transition: transform .6s var(--ease); } .hero-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-md); font-size: .85rem; font-weight: 600; white-space: nowrap; z-index: 3; } .hero-chip .chip-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; } .hero-chip small { display: block; font-weight: 500; color: var(--ink-soft); font-size: .76rem; } /* page-load choreography */ .load-seq > * { opacity: 0; transform: translateY(26px); } .loaded .load-seq > * { animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); } .pop-in { opacity: 0; transform: scale(.6) rotate(-6deg); } .loaded .pop-in { animation: popIn .9s var(--ease-back) forwards; animation-delay: var(--d, 600ms); } .slide-in { opacity: 0; transform: translateY(60px) rotate(var(--rot, 0deg)); } .loaded .slide-in { animation: slideIn 1.1s var(--ease) forwards; animation-delay: var(--d, 300ms); } .float-a { animation: floatA 6s ease-in-out infinite; } .float-b { animation: floatB 7.5s ease-in-out infinite; } .float-c { animation: floatC 9s ease-in-out infinite; } .spin-slow { animation: spin 22s linear infinite; } .trust-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .avatar-stack { display: flex; } .avatar-stack img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--paper); margin-inline-start: -12px; transition: transform .3s var(--ease-back); } .avatar-stack img:first-child { margin-inline-start: 0; } .avatar-stack:hover img { transform: translateY(-4px); } .avatar-stack:hover img:nth-child(2) { transition-delay: 40ms; } .avatar-stack:hover img:nth-child(3) { transition-delay: 80ms; } .stars { display: inline-flex; gap: 2px; color: #F5A623; } .stars svg { width: 15px; height: 15px; } /* 07 MARQUEE ----------------------------------------------------------------- */ .marquee { overflow: hidden; background: var(--ink); color: var(--paper); padding-block: 18px; transform: rotate(-1.5deg); margin-inline: -20px; position: relative; z-index: 2; } .marquee.alt { background: var(--magenta); color: #fff; transform: rotate(1.2deg); margin-top: -26px; } .marquee-track { display: flex; width: max-content; gap: 38px; animation: marquee 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.3rem, 2.6vw, 2rem); display: inline-flex; align-items: center; gap: 38px; white-space: nowrap; } .marquee-track span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); } .marquee.alt .marquee-track { animation-direction: reverse; } /* 08 PRODUCT CARDS ------------------------------------------------------------- */ .p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 26px); } .p-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: var(--surface); padding: 10px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .p-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .p-media { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 1 / 1; background: var(--surface-2); } .p-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .5s var(--ease); } .p-media .p-img-2 { opacity: 0; transform: scale(1.1); } .p-card:hover .p-img-1 { transform: scale(1.08); opacity: 0; } .p-card:hover .p-img-2 { opacity: 1; transform: scale(1.02); } .p-badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 5px 10px; border-radius: 8px; font-size: .74rem; font-weight: 700; background: var(--ink); color: #fff; } .p-badge.b-new { background: var(--cyan); } .p-badge.b-best { background: var(--yellow); color: #1B1C33; } .p-badge.b-trend { background: var(--magenta); } .p-actions { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; display: flex; flex-direction: column; gap: 8px; } .p-act { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1B1C33; box-shadow: var(--shadow-sm); transform: translateX(calc(56px * var(--dir))); opacity: 0; transition: transform .45s var(--ease), opacity .3s, background-color .25s, color .25s; } .p-act svg { width: 18px; height: 18px; } .p-act:hover { background: var(--ink); color: #fff; } .p-card:hover .p-act, .p-act:focus-visible, .p-act.is-active { transform: none; opacity: 1; } .p-card:hover .p-act:nth-child(2) { transition-delay: 60ms; } .wish-btn.is-active { color: var(--magenta); background: #fff; } .wish-btn.is-active svg { fill: currentColor; animation: heartPop .6s var(--ease-back); } .wish-btn { position: relative; } .wish-btn .burst { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--magenta); opacity: 0; pointer-events: none; } .wish-btn.burst-run .burst { animation: burst .6s var(--ease) forwards; } .p-quick { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; padding: 11px; border-radius: 12px; background: color-mix(in srgb, #1B1C33 88%, transparent); color: #fff; font-weight: 650; font-size: .88rem; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; gap: 8px; transform: translateY(130%); transition: transform .45s var(--ease), background-color .25s; } .p-quick svg { width: 17px; height: 17px; } .p-card:hover .p-quick, .p-quick:focus-visible { transform: none; } .p-quick:hover { background: var(--magenta); } .p-info { padding: 14px 6px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; transition: transform .45s var(--ease); } .p-card:hover .p-info { transform: translateY(-2px); } .p-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--ink-soft); } .p-name { font-family: var(--font-display); font-weight: 700; font-size: 1.07rem; line-height: 1.2; } .p-name a { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; transition: background-size .4s var(--ease); } .p-name a:hover { background-size: 100% 1.5px; } .p-creator { font-size: .82rem; color: var(--ink-soft); } .p-creator b { color: var(--ink); font-weight: 600; } .p-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; } .p-price { font-weight: 800; font-size: 1.12rem; font-family: var(--font-display); } .p-old { font-size: .85rem; color: var(--ink-soft); text-decoration: line-through; margin-inline-start: 6px; font-weight: 500; } .p-rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); } .p-rating svg { width: 14px; height: 14px; color: #F5A623; } .p-add { position: relative; overflow: hidden; height: 42px; min-width: 42px; padding-inline: 12px; border-radius: 999px; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: .85rem; transition: background-color .3s, min-width .4s var(--ease), transform .2s; } .p-add svg { width: 18px; height: 18px; flex: none; } .p-add .lbl { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--ease); } .p-card:hover .p-add .lbl, .p-add:focus-visible .lbl { max-width: 90px; } .p-add:hover { background: var(--magenta); color: #fff; } .p-add:active { transform: scale(.94); } .p-add.is-loading svg { animation: spin .7s linear infinite; } .p-add.is-done { background: var(--green); color: #fff; } .p-swatches { display: flex; gap: 5px; } .swatch-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line); box-shadow: inset 0 0 0 1.5px var(--surface); } .p-grid.is-list { grid-template-columns: 1fr; } .p-grid.is-list .p-card { flex-direction: row; gap: 18px; align-items: stretch; } .p-grid.is-list .p-media { width: min(220px, 38%); flex: none; } .p-grid.is-list .p-info { padding-block: 12px; } @media (max-width: 520px) { .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .p-card { padding: 7px; border-radius: 18px; } .p-name { font-size: .95rem; } .p-add .lbl { display: none; } .p-act { opacity: 1; transform: none; width: 34px; height: 34px; } .p-quick { display: none; } .p-meta .p-cat { display: none; } } /* filtering transitions */ .p-grid.is-leaving .p-card { opacity: 0; transform: scale(.94) translateY(10px); transition: opacity .25s, transform .3s var(--ease); } .p-card.enter { animation: cardIn .6s var(--ease) both; animation-delay: var(--delay, 0ms); } .empty-state { text-align: center; padding: 60px 20px; border: 2px dashed var(--line); border-radius: var(--r-lg); animation: rise .5s var(--ease); } /* tabs with sliding ink */ .tabs { position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; } .tab { position: relative; z-index: 1; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: color .3s; } .tab.is-active { color: var(--paper); } .tab:hover:not(.is-active) { color: var(--ink); } .tab-ink { position: absolute; z-index: 0; top: 5px; height: calc(100% - 10px); border-radius: 999px; background: var(--ink); transition: left .45s var(--ease), width .45s var(--ease); } /* 09 CATEGORIES --------------------------------------------------------------- */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); } @media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr; } } .cat-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; isolation: isolate; } .cat-card:nth-child(even) { margin-top: 40px; } @media (max-width: 1024px) { .cat-card:nth-child(even) { margin-top: 0; } } .cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); z-index: -2; } .cat-card:hover img { transform: scale(1.08) rotate(-1.5deg); } .cat-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(27, 28, 51, .85), rgba(27, 28, 51, 0) 45%); opacity: .6; transition: opacity .5s var(--ease); } .cat-card:hover .cat-overlay { opacity: 1; } .cat-body { position: absolute; left: 20px; right: 20px; bottom: 20px; color: #fff; display: flex; align-items: end; justify-content: space-between; gap: 12px; } .cat-title { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; transition: transform .5s var(--ease); } .cat-card:hover .cat-title { transform: translateY(-6px); } .cat-count { display: block; font-family: var(--font-body); font-size: .85rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease); letter-spacing: 0; } .cat-card:hover .cat-count { opacity: .85; transform: none; } .cat-arrow { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #1B1C33; display: grid; place-items: center; flex: none; transition: transform .5s var(--ease), background-color .3s; } .cat-arrow svg { width: 20px; height: 20px; transition: transform .5s var(--ease); } .cat-card:hover .cat-arrow { background: var(--yellow); transform: rotate(calc(-45deg * var(--dir))); } /* 10 CUSTOMIZER -------------------------------------------------------------- */ .cz { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; } @media (max-width: 960px) { .cz { grid-template-columns: 1fr; } } .cz-stage { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--tint-c); overflow: hidden; transition: background-color .6s var(--ease); } .cz-stage .halftone { position: absolute; inset: 0; color: var(--ink); opacity: .07; } .cz-product { position: absolute; inset: 6%; display: grid; place-items: center; opacity: 0; transform: scale(.85) rotate(-4deg); transition: opacity .45s var(--ease), transform .6s var(--ease-back); pointer-events: none; } .cz-product.is-active { opacity: 1; transform: none; } .cz-product svg { width: 100%; height: 100%; overflow: visible; } .cz-product .body { transition: fill .6s var(--ease); } .cz-print { transition: opacity .4s; } .cz-print image { transition: opacity .5s; } .cz-art-in { animation: artIn .8s var(--ease-back); transform-origin: center; transform-box: fill-box; } .cz-controls { display: grid; gap: 22px; } .cz-label { font-weight: 700; font-size: .92rem; margin-bottom: 10px; display: block; } .cz-swatches, .cz-arts { display: flex; flex-wrap: wrap; gap: 10px; } .cz-swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); transition: transform .3s var(--ease-back), box-shadow .3s; } .cz-swatch:hover { transform: scale(1.12); } .cz-swatch.is-active { box-shadow: 0 0 0 2.5px var(--magenta); transform: scale(1.08); } .cz-art { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; border: 2px solid transparent; transition: transform .3s var(--ease), border-color .3s; } .cz-art:hover { transform: translateY(-3px) rotate(-3deg); } .cz-art.is-active { border-color: var(--magenta); } .cz-art img { width: 100%; height: 100%; object-fit: cover; } .cz-upload { width: 64px; height: 64px; border-radius: 14px; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--ink-soft); transition: border-color .3s, color .3s, transform .3s; cursor: pointer; } .cz-upload:hover { border-color: var(--magenta); color: var(--magenta); transform: translateY(-3px); } .cz-upload svg { width: 22px; height: 22px; } .cz-price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; } .cz-tag { position: absolute; top: 18px; inset-inline-start: 18px; background: var(--surface); padding: 8px 12px; border-radius: 12px; font-weight: 650; font-size: .85rem; box-shadow: var(--shadow-sm); z-index: 2; } /* 11 PROCESS & FLOWS ----------------------------------------------------------- */ .steps-h { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 900px) { .steps-h { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .steps-h { grid-template-columns: 1fr; } } .steps-line { position: absolute; top: 34px; left: 8%; right: 8%; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; } .steps-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow)); transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform 2.2s var(--ease) .2s; } .is-visible .steps-line i, .steps-line.is-visible i { transform: scaleX(1); } @media (max-width: 900px) { .steps-line { display: none; } } .step-h { position: relative; text-align: start; } .step-num { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line); font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 20px; position: relative; z-index: 1; transition: background-color .4s, color .4s, transform .5s var(--ease-back), border-color .4s; } .step-h:hover .step-num { background: var(--magenta); color: #fff; transform: rotate(-8deg) scale(1.05); border-color: var(--magenta); } .step-num svg { width: 28px; height: 28px; } .step-h.is-visible .step-num { animation: popIn .8s var(--ease-back) both; animation-delay: var(--delay, 0ms); } .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } @media (max-width: 900px) { .flow { grid-template-columns: 1fr; gap: 14px; max-width: 420px; } } .flow-node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-inline: 8px; opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .6s var(--ease), transform .7s var(--ease-back); transition-delay: calc(var(--i) * 280ms); } .flow.is-visible .flow-node { opacity: 1; transform: none; } .flow-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-md); position: relative; z-index: 2; transition: transform .4s var(--ease-back); } .flow-node:hover .flow-ic { transform: translateY(-6px) rotate(6deg); } .flow-ic svg { width: 32px; height: 32px; } .flow-node::after { content: ""; position: absolute; top: 38px; inset-inline-start: calc(50% + 44px); width: calc(100% - 88px); height: 2px; background: repeating-linear-gradient(90deg, var(--ink-soft) 0 6px, transparent 6px 12px); opacity: .5; transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 280ms + 300ms); } .flow.is-visible .flow-node::after { transform: scaleX(1); } .flow-node:last-child::after { display: none; } @media (max-width: 900px) { .flow-node { flex-direction: row; text-align: start; } .flow-node::after { top: 78px; inset-inline-start: 38px; width: 2px; height: 14px; background: var(--ink-soft); } } .flow-node.is-pulse .flow-ic { animation: ring 1s var(--ease); } .flow-ic .money { position: absolute; top: -8px; inset-inline-end: -16px; font-weight: 800; font-size: .8rem; background: var(--green); color: #fff; padding: 3px 8px; border-radius: 999px; opacity: 0; } .flow-node.is-pulse .money { animation: moneyUp 1.4s var(--ease); } /* 12 RAILS & ART ------------------------------------------------------------- */ .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; scrollbar-width: none; cursor: grab; } .rail::-webkit-scrollbar { display: none; } .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .rail > * { scroll-snap-align: start; } .rail-btn { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; transition: background-color .3s, color .3s, transform .3s var(--ease); } .rail-btn:hover { background: var(--ink); color: var(--paper); } .rail-btn:active { transform: scale(.9); } .rail-btn svg { width: 20px; height: 20px; } .rail-progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 18px; } .rail-progress i { display: block; height: 100%; width: 100%; background: var(--magenta); transform: scaleX(.2); transform-origin: var(--origin-start, left); transition: transform .3s var(--ease); } .art-tile { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); transition: transform .5s var(--ease); } .art-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); pointer-events: none; } .art-tile:hover { transform: rotate(calc(-1.5deg * var(--dir))) translateY(-6px); } .art-tile:hover img { transform: scale(1.1); } .art-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); display: flex; justify-content: space-between; align-items: center; gap: 10px; transform: translateY(12px); opacity: .92; transition: transform .5s var(--ease), opacity .4s; } .art-tile:hover .art-cap { transform: none; opacity: 1; } .art-cap b { font-family: var(--font-display); font-size: 1rem; display: block; line-height: 1.2; } .art-cap small { color: var(--ink-soft); font-size: .78rem; } .art-likes { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .82rem; color: var(--magenta); } .art-likes svg { width: 15px; height: 15px; } /* 13 CREATORS & STATS ---------------------------------------------------------- */ .creator-card { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 14px 14px 20px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .creator-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .creator-cover { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; } .creator-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .creator-cover img:first-child { grid-row: span 2; } .creator-card:hover .creator-cover img { transform: scale(1.06); } .creator-card:hover .creator-cover img:nth-child(2) { transition-delay: 60ms; } .creator-card:hover .creator-cover img:nth-child(3) { transition-delay: 120ms; } .creator-avatar { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--surface); margin-top: -32px; margin-inline-start: 16px; position: relative; transition: transform .5s var(--ease-back); } .creator-card:hover .creator-avatar { transform: scale(1.1) rotate(-6deg); } .creator-stats { display: flex; gap: 18px; font-size: .82rem; color: var(--ink-soft); } .creator-stats b { display: block; color: var(--ink); font-size: 1.05rem; font-family: var(--font-display); } .follow-btn { transition: background-color .3s, color .3s, border-color .3s; } .follow-btn.is-following { background: var(--ink); color: var(--paper); } .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); color: var(--paper); } @media (max-width: 800px) { .stat-band { grid-template-columns: repeat(2, 1fr); } } .stat { padding: clamp(24px, 3vw, 40px); position: relative; } .stat + .stat { border-inline-start: 1px solid rgba(255, 255, 255, .1); } @media (max-width: 800px) { .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); } } .stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 3.8rem); letter-spacing: -.04em; line-height: 1; display: block; } .stat-num em { font-style: normal; color: var(--yellow); } .stat p { opacity: .72; margin-top: 8px; font-size: .95rem; } .stat .bar-grow { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); margin-top: 18px; overflow: hidden; } .stat .bar-grow i { display: block; height: 100%; width: var(--w, 70%); background: var(--c, var(--magenta)); transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform 1.8s var(--ease); } .is-visible .stat .bar-grow i { transform: scaleX(1); } .benefit { display: flex; gap: 16px; padding: 18px; border-radius: 20px; transition: background-color .35s; } .benefit:hover { background: var(--surface); } .benefit-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; transition: transform .45s var(--ease-back); } .benefit:hover .benefit-ic { transform: rotate(-10deg) scale(1.08); } .benefit-ic svg { width: 24px; height: 24px; } /* 14 TESTIMONIALS ------------------------------------------------------------ */ .t-slider { position: relative; overflow: hidden; } .t-track { display: flex; transition: transform .8s var(--ease); } .t-slide { flex: 0 0 100%; min-width: 0; } .t-card { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (max-width: 800px) { .t-card { grid-template-columns: 1fr; } } .t-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; max-width: 300px; } .t-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.2s var(--ease), clip-path 1s var(--ease); clip-path: inset(0 0 100% 0); } .t-slide.is-active .t-media img { transform: none; clip-path: inset(0 0 0 0); } .t-media .t-thumb { position: absolute; width: 44%; height: auto; aspect-ratio: 1; border: 3px solid var(--surface); bottom: 12px; inset-inline-end: 12px; border-radius: 14px; box-shadow: var(--shadow-md); transform: translateY(40px); opacity: 0; transition: all .8s var(--ease) .5s; clip-path: none; } .t-slide.is-active .t-media .t-thumb { transform: none; opacity: 1; } .t-quote { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -.02em; } .t-quote .w { display: inline-block; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(var(--wi) * 22ms + 250ms); } .t-slide.is-active .t-quote .w { opacity: 1; transform: none; } .t-mark { width: 54px; height: 54px; color: var(--magenta); margin-bottom: 14px; } .t-dots { display: flex; gap: 8px; } .t-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line); transition: width .45s var(--ease), background-color .3s; position: relative; overflow: hidden; } .t-dot.is-active { width: 42px; background: var(--surface-2); } .t-dot.is-active::after { content: ""; position: absolute; inset: 0; background: var(--magenta); transform-origin: var(--origin-start, left); animation: dotFill var(--auto, 6s) linear forwards; } .t-slider.paused .t-dot.is-active::after { animation-play-state: paused; } /* 15 PROMO & FAQ -------------------------------------------------------------- */ .promo { position: relative; overflow: hidden; border-radius: clamp(24px, 4vw, 44px); background: var(--magenta); color: #fff; padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 72px); isolation: isolate; } .promo .halftone { position: absolute; inset: 0; color: #fff; opacity: .12; z-index: -1; mask-image: linear-gradient(120deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000); } .promo-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 6rem); line-height: .95; letter-spacing: -.045em; max-width: 12ch; } .promo-float { position: absolute; z-index: -1; width: clamp(120px, 18vw, 240px); filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .25)); } .promo-shape { position: absolute; z-index: -1; border-radius: 50%; } @media (max-width: 760px) { .promo-float { opacity: .35; } } .promo .btn-light:hover { --btn-fg: #1B1C33; } .code-pill { display: inline-flex; align-items: center; gap: 10px; border: 2px dashed rgba(255, 255, 255, .7); padding: 10px 16px; border-radius: 14px; font-weight: 700; letter-spacing: .06em; transition: background-color .3s, transform .3s; cursor: pointer; } .code-pill:hover { background: rgba(255, 255, 255, .15); transform: translateY(-2px); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.25rem); text-align: start; transition: color .3s; } .faq-q:hover { color: var(--magenta); } .faq-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; position: relative; transition: background-color .35s, border-color .35s, transform .45s var(--ease); } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); transition: transform .45s var(--ease); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item.open .faq-icon { background: var(--magenta); border-color: var(--magenta); color: #fff; transform: rotate(180deg); } .faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .faq-a > div { overflow: hidden; } .faq-a p { padding-bottom: 22px; color: var(--ink-soft); max-width: 68ch; opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .5s var(--ease); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-item.open .faq-a p { opacity: 1; transform: none; transition-delay: .12s; } /* 16 FOOTER ----------------------------------------------------------------- */ .site-footer { background: var(--ink); color: #D8D9E6; padding-top: clamp(56px, 7vw, 96px); position: relative; overflow: hidden; } .site-footer .logo { color: #fff; } .site-footer h3 { color: #fff; font-size: 1rem; margin-bottom: 16px; font-weight: 700; } .foot-link { display: inline-block; padding-block: 5px; color: #B8BACB; transition: color .25s, transform .3s var(--ease); } .foot-link:hover { color: #fff; transform: translateX(calc(4px * var(--dir))); } .social { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: background-color .3s, transform .35s var(--ease-back), border-color .3s; } .social:hover { background: var(--magenta); border-color: var(--magenta); transform: translateY(-4px) rotate(-8deg); } .social svg { width: 18px; height: 18px; } .foot-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 17vw, 15rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14); white-space: nowrap; user-select: none; margin-top: 40px; transform: translateY(12%); } .foot-word span { display: inline-block; transition: color .5s, -webkit-text-stroke-color .5s, transform .5s var(--ease); } .foot-word span:hover { color: var(--magenta); -webkit-text-stroke-color: var(--magenta); transform: translateY(-8%); } .foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 22px; font-size: .88rem; color: #9A9CB2; position: relative; z-index: 1; background: var(--ink); } .back-top { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 50; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(20px) scale(.8); transition: opacity .4s, transform .45s var(--ease-back), background-color .3s; } .back-top.show { opacity: 1; transform: none; } .back-top:hover { background: var(--magenta); } .back-top svg { width: 20px; height: 20px; position: relative; z-index: 1; } .back-top .ring { position: absolute; inset: -4px; transform: rotate(-90deg); } .back-top .ring circle { fill: none; stroke: var(--magenta); stroke-width: 3; stroke-dasharray: 176; stroke-dashoffset: var(--off, 176); transition: stroke-dashoffset .15s linear; } /* 17 FORMS ------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 7px; position: relative; } .label { font-weight: 650; font-size: .9rem; } .input, .select, .textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; transition: border-color .25s, box-shadow .3s var(--ease), background-color .3s; } .textarea { min-height: 120px; resize: vertical; } .input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 75%, transparent); } .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 15%, transparent); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5D72' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 14px center; padding-inline-end: 42px; } .input-ic { position: relative; } .input-ic > svg { position: absolute; top: 50%; inset-inline-start: 15px; width: 19px; height: 19px; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; transition: color .25s; } .input-ic .input { padding-inline-start: 44px; } .input-ic:focus-within > svg { color: var(--magenta); } .pw-toggle { position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-soft); } .pw-toggle:hover { background: var(--surface-2); } .pw-toggle svg { width: 18px; height: 18px; } .field-error { font-size: .82rem; color: #D0203B; font-weight: 600; display: flex; gap: 6px; align-items: center; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s var(--ease), opacity .3s; } .field.has-error .field-error { max-height: 40px; opacity: 1; } .field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: #D0203B; animation: shakeX .4s; } .field.is-valid .input { border-color: var(--green); } .check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .92rem; } .check input { appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line); background: var(--surface); flex: none; display: grid; place-items: center; transition: background-color .25s, border-color .25s; cursor: pointer; margin-top: 1px; } .check input::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .3s var(--ease-back); margin-top: -3px; } .check input:checked { background: var(--magenta); border-color: var(--magenta); } .check input:checked::after { transform: rotate(-45deg) scale(1); } .toggle { position: relative; width: 50px; height: 28px; flex: none; } .toggle input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 1; margin: 0; } .toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); transition: background-color .3s; } .toggle span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease-back); } .toggle input:checked + span { background: var(--magenta); } .toggle input:checked + span::after { transform: translateX(calc(22px * var(--dir))); } .toggle input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; } input[type="range"].range { width: 100%; accent-color: var(--magenta); height: 6px; cursor: pointer; } .seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--surface-2); gap: 4px; } .seg button { padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: .88rem; transition: background-color .3s, color .3s, box-shadow .3s; } .seg button.is-active { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--magenta); } /* 18 DRAWER / MODAL / TOAST --------------------------------------------------- */ .drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 95; width: min(100vw, 440px); background: var(--surface); display: flex; flex-direction: column; transform: translateX(calc(105% * var(--dir))); transition: transform .55s var(--ease); box-shadow: var(--shadow-lg); } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); } .drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; } .drawer-foot { padding: 20px 22px; border-top: 1px solid var(--line); background: var(--surface); } .cart-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--line); align-items: center; animation: slideItem .5s var(--ease) both; animation-delay: var(--delay, 0ms); } .cart-item.removing { animation: removeItem .45s var(--ease) forwards; } .cart-item img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; } .cart-item h4 { font-size: .98rem; font-weight: 700; line-height: 1.2; } .qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; } .qty button { width: 34px; height: 34px; display: grid; place-items: center; transition: background-color .2s, color .2s; } .qty button:hover { background: var(--ink); color: var(--paper); } .qty button svg { width: 14px; height: 14px; } .qty output, .qty input { width: 34px; text-align: center; font-weight: 700; border: 0; background: transparent; color: var(--ink); } .qty .tick { animation: tick .35s var(--ease); display: inline-block; } .qty.lg button { width: 46px; height: 50px; } .qty.lg output { width: 44px; font-size: 1.05rem; } .cart-empty { text-align: center; padding: 60px 10px; } .cart-empty svg { width: 72px; height: 72px; margin: 0 auto 16px; color: var(--magenta); animation: floatA 4s ease-in-out infinite; } .free-ship { font-size: .85rem; margin-bottom: 14px; } .free-ship .bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 8px; } .free-ship .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); width: 100%; transform: scaleX(var(--p, 0)); transform-origin: var(--origin-start, left); transition: transform .6s var(--ease); } .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; } .modal.open { visibility: visible; } .modal .backdrop { z-index: 0; } .modal.open .backdrop { opacity: 1; visibility: visible; } .modal-panel { position: relative; z-index: 1; width: min(100%, 920px); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .35s var(--ease), transform .5s var(--ease); } .modal.open .modal-panel { opacity: 1; transform: none; } .modal-panel.sm { width: min(100%, 460px); } .modal-close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; background: var(--surface); } .modal-close:hover svg { transform: rotate(90deg); } .modal-close svg { transition: transform .4s var(--ease); } .qv-grid { display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 720px) { .qv-grid { grid-template-columns: 1fr; } } .qv-media { position: relative; aspect-ratio: 1; overflow: hidden; border-start-start-radius: var(--r-lg); border-end-start-radius: var(--r-lg); } @media (max-width: 720px) { .qv-media { border-radius: var(--r-lg) var(--r-lg) 0 0; } } .qv-media img { width: 100%; height: 100%; object-fit: cover; animation: zoomOut 1s var(--ease); } .toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); } .toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lg); font-weight: 600; font-size: .92rem; transform: translateY(30px) scale(.9); opacity: 0; transition: transform .5s var(--ease-back), opacity .35s; position: relative; overflow: hidden; } .toast.show { transform: none; opacity: 1; } .toast.hide { transform: translateY(20px) scale(.95); opacity: 0; } .toast img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } .toast-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; flex: none; } .toast-ic.err { background: #D0203B; } .toast-ic.info { background: var(--cyan); } .toast-ic svg { width: 17px; height: 17px; } .toast .toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--magenta); transform-origin: left; animation: toastBar var(--t, 3s) linear forwards; } .toast a { color: var(--yellow); text-decoration: underline; margin-inline-start: 6px; } .fly-img { position: fixed; z-index: 250; width: 80px; height: 80px; border-radius: 16px; object-fit: cover; pointer-events: none; box-shadow: var(--shadow-lg); } /* checkout */ .co-steps { display: flex; gap: 8px; align-items: center; margin-bottom: 24px; } .co-step { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .88rem; color: var(--ink-soft); transition: color .3s; } .co-step b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); transition: background-color .4s, color .4s, transform .4s var(--ease-back); font-size: .8rem; } .co-step.is-active { color: var(--ink); } .co-step.is-active b { background: var(--magenta); color: #fff; transform: scale(1.1); } .co-step.is-done b { background: var(--green); color: #fff; } .co-sep { flex: 1; height: 2px; background: var(--surface-2); position: relative; overflow: hidden; min-width: 16px; } .co-sep i { position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform .5s var(--ease); } .co-sep.is-done i { transform: scaleX(1); } .co-pane { display: none; } .co-pane.is-active { display: block; animation: paneIn .5s var(--ease); } .pay-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .3s, background-color .3s; } .pay-opt:has(input:checked) { border-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 6%, transparent); } .pay-opt input { accent-color: var(--magenta); width: 18px; height: 18px; } .card-preview { aspect-ratio: 1.6; max-width: 320px; border-radius: 18px; padding: 20px; color: #fff; background: linear-gradient(135deg, #1B1C33, #3A2A6B 60%, var(--magenta)); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-md); transition: transform .6s var(--ease); transform-style: preserve-3d; } .card-preview.flip { transform: rotateY(8deg) rotateX(4deg); } .success-check { width: 96px; height: 96px; margin: 0 auto; } .success-check circle { stroke-dasharray: 290; stroke-dashoffset: 290; animation: draw .8s var(--ease) forwards; } .success-check path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .5s var(--ease) .6s forwards; } .confetti { position: absolute; width: 8px; height: 14px; top: 30%; left: 50%; border-radius: 2px; animation: confetti 1.4s var(--ease) forwards; } /* 19 PAGE HERO / PRODUCT DETAILS ----------------------------------------------- */ .page-hero { position: relative; padding-block: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 64px); overflow: hidden; } .page-hero .h-display { font-size: clamp(2.4rem, 5.6vw, 4.6rem); } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-soft); margin-bottom: 16px; } .crumbs a:hover { color: var(--magenta); } .crumbs svg { width: 14px; height: 14px; } .ph-shape { position: absolute; border-radius: 50%; z-index: -1; } .filter-panel { background: var(--surface); border-radius: var(--r-lg); padding: 22px; position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 24px; } .filter-group h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; font-size: .88rem; transition: background-color .3s, color .3s, border-color .3s, transform .25s var(--ease); } .chip:hover { border-color: var(--ink); transform: translateY(-2px); } .chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .chip .n { font-size: .75rem; opacity: .6; } .cat-check { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; } .price-out { display: flex; justify-content: space-between; font-weight: 700; font-size: .9rem; margin-top: 8px; } @media (max-width: 1023px) { .filter-panel { position: fixed; inset-block: 0; inset-inline-start: 0; top: 0; width: min(88vw, 340px); z-index: 95; border-radius: 0; overflow-y: auto; transform: translateX(calc(-105% * var(--dir))); transition: transform .5s var(--ease); align-content: start; } .filter-panel.open { transform: none; } } .view-toggle button { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-soft); transition: background-color .25s, color .25s; } .view-toggle button.is-active { background: var(--ink); color: var(--paper); } .view-toggle svg { width: 18px; height: 18px; } .result-count { font-weight: 600; } .result-count b { display: inline-block; } .result-count b.tick { animation: tick .4s var(--ease); } .gallery { display: grid; grid-template-columns: 84px 1fr; gap: 14px; } @media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } .gallery-thumbs { order: 2; flex-direction: row !important; } } .gallery-thumbs { display: flex; flex-direction: column; gap: 10px; } .thumb { width: 84px; height: 84px; border-radius: 16px; overflow: hidden; border: 2px solid transparent; transition: border-color .3s, transform .3s var(--ease), opacity .3s; opacity: .7; } .thumb:hover { opacity: 1; transform: translateY(-2px); } .thumb.is-active { border-color: var(--magenta); opacity: 1; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery-main { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); cursor: zoom-in; } .gallery-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); } .gallery-main img.swap-in { animation: galleryIn .7s var(--ease); } .gallery-main.zooming img { transform: scale(1.9); } .gallery-nav { position: absolute; bottom: 16px; inset-inline-end: 16px; display: flex; gap: 8px; z-index: 2; } .gallery-nav button { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: background-color .3s, color .3s, transform .3s; } .gallery-nav button:hover { background: var(--ink); color: var(--paper); } .gallery-nav svg { width: 18px; height: 18px; } .opt-row { display: flex; flex-wrap: wrap; gap: 10px; } .opt { min-width: 52px; padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 650; font-size: .92rem; transition: border-color .25s, background-color .3s, color .3s, transform .3s var(--ease-back); background: var(--surface); } .opt:hover { border-color: var(--ink); } .opt.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.05); } .opt[disabled] { opacity: .4; text-decoration: line-through; pointer-events: none; } .color-opt { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); position: relative; transition: transform .35s var(--ease-back), box-shadow .3s; } .color-opt.is-active { box-shadow: 0 0 0 2.5px var(--magenta); transform: scale(1.1); } .color-opt.is-active::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); mix-blend-mode: difference; animation: popIn .4s var(--ease-back); } .opt-label { font-weight: 700; font-size: .95rem; margin-bottom: 10px; display: flex; justify-content: space-between; } .opt-label span { color: var(--ink-soft); font-weight: 500; } .opt-label .chosen { display: inline-block; animation: tick .35s var(--ease); } .info-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface); } .info-card svg { width: 24px; height: 24px; color: var(--magenta); flex: none; } .dtabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; } .dtab { padding: 14px 2px; font-weight: 700; color: var(--ink-soft); position: relative; white-space: nowrap; transition: color .3s; } .dtab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--magenta); transform: scaleX(0); transition: transform .4s var(--ease); border-radius: 3px; } .dtab.is-active { color: var(--ink); } .dtab.is-active::after { transform: scaleX(1); } .dpane { display: none; padding-top: 26px; } .dpane.is-active { display: block; animation: paneIn .5s var(--ease); } .review { padding: 20px; border-radius: 20px; background: var(--surface); } .rating-bar { display: grid; grid-template-columns: 34px 1fr 36px; gap: 10px; align-items: center; font-size: .85rem; } .rating-bar .t { height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; } .rating-bar .t i { display: block; height: 100%; background: #F5A623; width: var(--w); transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform 1.2s var(--ease); } .is-visible .rating-bar .t i { transform: scaleX(1); } .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .25); padding: 12px 16px; transform: translateY(110%); transition: transform .5s var(--ease); } .sticky-buy.show { transform: none; } /* vertical timeline (how to order) */ .vtl { position: relative; display: grid; gap: clamp(28px, 4vw, 56px); } .vtl-line { position: absolute; top: 0; bottom: 0; inset-inline-start: 35px; width: 3px; background: var(--line); border-radius: 3px; } .vtl-line i { position: absolute; inset: 0; background: linear-gradient(var(--cyan), var(--magenta), var(--yellow)); transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: 3px; } @media (min-width: 900px) { .vtl-line { inset-inline-start: 50%; margin-inline-start: -1.5px; } } .vtl-step { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 22px; align-items: start; } @media (min-width: 900px) { .vtl-step { grid-template-columns: 1fr 72px 1fr; gap: 40px; } .vtl-step .vtl-card { grid-column: 1; text-align: end; } .vtl-step .vtl-dot { grid-column: 2; grid-row: 1; } .vtl-step .vtl-visual { grid-column: 3; grid-row: 1; } .vtl-step:nth-child(odd of .vtl-step) .vtl-card { grid-column: 3; text-align: start; } .vtl-step:nth-child(odd of .vtl-step) .vtl-visual { grid-column: 1; } } .vtl-visual { display: none; } @media (min-width: 900px) { .vtl-visual { display: block; } } .vtl-dot { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; position: relative; z-index: 1; transition: background-color .5s, border-color .5s, color .5s, transform .6s var(--ease-back), box-shadow .5s; } .vtl-dot svg { width: 28px; height: 28px; } .vtl-step.is-active .vtl-dot { background: var(--magenta); border-color: var(--magenta); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 10px color-mix(in srgb, var(--magenta) 14%, transparent); } .vtl-step.is-done .vtl-dot { background: var(--ink); border-color: var(--ink); color: var(--paper); } .vtl-card { padding: 24px; border-radius: 24px; background: var(--surface); transition: transform .5s var(--ease), box-shadow .5s, opacity .5s; opacity: .55; } .vtl-step.is-active .vtl-card, .vtl-step.is-done .vtl-card { opacity: 1; } .vtl-step.is-active .vtl-card { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .vtl-visual img { width: 180px; border-radius: 24px; transform: rotate(-4deg) scale(.9); opacity: .4; transition: transform .7s var(--ease-back), opacity .6s; } .vtl-step:nth-child(odd of .vtl-step) .vtl-visual { display: flex; justify-content: flex-end; } .vtl-step.is-active .vtl-visual img { transform: rotate(3deg) scale(1); opacity: 1; } /* 20 AUTH ------------------------------------------------------------------- */ .auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h)); } @media (max-width: 960px) { .auth-wrap { grid-template-columns: 1fr; } .auth-visual { display: none; } } .auth-visual { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; } .auth-visual .halftone { position: absolute; inset: 0; color: #fff; opacity: .07; z-index: -1; } .auth-form { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px); } .auth-card { width: 100%; max-width: 460px; } .social-login { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); font-weight: 600; transition: border-color .25s, transform .25s var(--ease), background-color .25s; } .social-login:hover { border-color: var(--ink); transform: translateY(-2px); background: var(--surface); } .social-login svg { width: 20px; height: 20px; } .or-sep { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-size: .85rem; } .or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; } .pw-meter i { height: 5px; border-radius: 5px; background: var(--surface-2); transition: background-color .4s; } .pw-meter[data-s="1"] i:nth-child(-n+1) { background: #D0203B; } .pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--orange); } .pw-meter[data-s="3"] i:nth-child(-n+3) { background: var(--yellow); } .pw-meter[data-s="4"] i { background: var(--green); } /* 21 DASHBOARD -------------------------------------------------------------- */ .dash { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; } @media (max-width: 1023px) { .dash { grid-template-columns: 1fr; } } .dash-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--ink); color: #C9CADA; padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; z-index: 90; scrollbar-width: thin; } .dash-side .logo { color: #fff; padding: 6px 10px 20px; } @media (max-width: 1023px) { .dash-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 280px; transform: translateX(calc(-105% * var(--dir))); transition: transform .5s var(--ease); } .dash-side.open { transform: none; } } .side-label { font-size: .75rem; font-weight: 600; color: #7E8098; padding: 16px 12px 6px; } .side-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 550; font-size: .93rem; transition: background-color .3s, color .3s, padding .3s var(--ease); opacity: 0; transform: translateX(calc(-16px * var(--dir))); animation: sideIn .5s var(--ease) forwards; animation-delay: calc(var(--i) * 35ms + 80ms); } .side-link svg { width: 20px; height: 20px; flex: none; transition: transform .35s var(--ease-back); } .side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; } .side-link:hover svg { transform: scale(1.12) rotate(-6deg); } .side-link.is-active { background: var(--magenta); color: #fff; box-shadow: 0 10px 24px -12px var(--magenta); } .side-link .pill { margin-inline-start: auto; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: #1B1C33; } .side-promo { margin-top: auto; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; } .side-promo .progress { background: rgba(255, 255, 255, .12); } .dash-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 14px clamp(16px, 3vw, 32px); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .dash-search { flex: 1; max-width: 420px; } .dash-main { padding: clamp(16px, 3vw, 32px); min-width: 0; animation: pageIn .6s var(--ease); } body.is-leaving .dash-main, body.is-leaving main { opacity: 0; transform: translateY(10px); transition: opacity .22s, transform .22s; } .d-card { background: var(--surface); border-radius: 22px; padding: clamp(16px, 2vw, 24px); position: relative; transition: box-shadow .4s var(--ease), transform .4s var(--ease); min-width: 0; } .d-card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .d-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .d-card-head h2, .d-card-head h3 { font-size: 1.12rem; font-weight: 700; } .stat-card { overflow: hidden; } .stat-card .stat-top { display: flex; justify-content: space-between; align-items: start; } .stat-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; transition: transform .45s var(--ease-back); } .stat-card:hover .stat-ic { transform: rotate(-10deg) scale(1.1); } .stat-ic svg { width: 22px; height: 22px; } .stat-val { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -.03em; margin-top: 14px; line-height: 1.1; } .trend { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; } .trend svg { width: 13px; height: 13px; } .trend.up { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); } .trend.down { color: #D0203B; background: color-mix(in srgb, #D0203B 10%, transparent); } .stat-card .spark { position: absolute; bottom: 0; inset-inline-end: 0; width: 55%; height: 50px; opacity: .9; } .progress { height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: 8px; background: var(--c, var(--magenta)); width: var(--w, 50%); transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform 1.4s var(--ease); } .is-visible .progress > span, .progress.is-visible > span { transform: scaleX(1); } .view { display: none; } .view.is-active { display: block; animation: pageIn .5s var(--ease); } .notif-panel { width: min(92vw, 360px); padding: 8px; } .notif-item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; transition: background-color .25s; position: relative; animation: slideItem .45s var(--ease) both; animation-delay: var(--delay, 0ms); } .notif-item:hover { background: var(--surface-2); } .notif-item.unread::after { content: ""; position: absolute; top: 16px; inset-inline-end: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); } .notif-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; } .notif-ic svg { width: 18px; height: 18px; } .bell-ring svg { animation: bell 1s var(--ease) 1.2s 2; transform-origin: top center; } .avatar-btn img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--magenta); } /* 22 CHARTS & TABLES -------------------------------------------------------- */ .chart-svg { width: 100%; height: auto; display: block; overflow: visible; } .chart-svg .grid-l { stroke: var(--line); stroke-dasharray: 4 6; } .chart-svg .axis-t { fill: var(--ink-soft); font-size: 11px; font-family: var(--font-body); } .chart-svg .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 2s var(--ease); } .chart-svg .area { opacity: 0; transition: opacity 1.2s var(--ease) .8s; } .chart-svg.drawn .area { opacity: 1; } .chart-svg .pt { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s var(--ease-back); transition-delay: calc(var(--i) * 60ms + 1.2s); cursor: pointer; } .chart-svg.drawn .pt { transform: scale(1); } .chart-svg .pt:hover { transform: scale(1.6); transition-delay: 0s; } .chart-svg .bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease), opacity .3s; transition-delay: calc(var(--i) * 70ms); cursor: pointer; } .chart-svg.drawn .bar { transform: scaleY(1); } .chart-svg .bar:hover { opacity: .8; } .chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 10px; font-size: .8rem; font-weight: 600; white-space: nowrap; transform: translate(-50%, -120%); opacity: 0; transition: opacity .2s; z-index: 5; } .chart-tip.show { opacity: 1; } .donut circle.seg { fill: none; stroke-width: 22; transition: stroke-dasharray 1.4s var(--ease), stroke-width .3s; transform: rotate(-90deg); transform-origin: center; cursor: pointer; } .donut circle.seg:hover { stroke-width: 28; } .legend-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; } .table-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; } .d-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; min-width: 720px; } .d-table th { text-align: start; font-weight: 650; color: var(--ink-soft); font-size: .82rem; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } .d-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; transition: background-color .25s; } .d-table tbody tr { transition: transform .3s var(--ease); animation: rowIn .5s var(--ease) both; animation-delay: var(--delay, 0ms); } .d-table tbody tr:hover td { background: color-mix(in srgb, var(--magenta) 5%, var(--surface)); } .d-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--magenta); } .d-table tbody tr.removing { animation: rowOut .45s var(--ease) forwards; } .d-table tbody tr.clickable { cursor: pointer; } .t-prod { display: flex; align-items: center; gap: 12px; } .t-prod img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; transition: transform .35s var(--ease-back); } tr:hover .t-prod img { transform: scale(1.1) rotate(-4deg); } .t-prod b { font-weight: 650; display: block; line-height: 1.25; } .row-act { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--ink-soft); transition: background-color .25s, color .25s, transform .25s; } .row-act:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-2px); } .row-act.del:hover { color: #D0203B; background: color-mix(in srgb, #D0203B 10%, transparent); } .row-act svg { width: 17px; height: 17px; } .status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status.live::before { animation: pulse 1.8s infinite; box-shadow: 0 0 0 0 currentColor; } .st-new { color: #0077A8; background: color-mix(in srgb, var(--cyan) 14%, transparent); } .st-processing { color: #7A3FD1; background: color-mix(in srgb, #7A3FD1 12%, transparent); } .st-printing { color: var(--magenta-deep); background: color-mix(in srgb, var(--magenta) 12%, transparent); } .st-fulfilled { color: #8A6100; background: color-mix(in srgb, var(--yellow) 30%, transparent); } .st-shipped { color: #C45A00; background: color-mix(in srgb, var(--orange) 14%, transparent); } .st-delivered, .st-published { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); } .st-draft { color: var(--ink-soft); background: var(--surface-2); } .st-pending { color: #8A6100; background: color-mix(in srgb, var(--yellow) 30%, transparent); } .st-out { color: #D0203B; background: color-mix(in srgb, #D0203B 10%, transparent); } .st-flash { animation: statusFlash .8s var(--ease); } .pager { display: flex; gap: 6px; } .pager button { min-width: 38px; height: 38px; border-radius: 10px; font-weight: 650; transition: background-color .25s, color .25s; } .pager button.is-active { background: var(--ink); color: var(--paper); } .pager button:hover:not(.is-active) { background: var(--surface-2); } /* 23 TIMELINES & UPLOAD ------------------------------------------------------- */ .ftl { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding-top: 6px; } @media (max-width: 760px) { .ftl { grid-template-columns: 1fr; gap: 0; } } .ftl-track { position: absolute; top: 30px; left: calc(100% / 14); right: calc(100% / 14); height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .ftl-track i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); transform: scaleX(var(--p, 0)); transform-origin: var(--origin-start, left); transition: transform 1.4s var(--ease); } @media (max-width: 760px) { .ftl-track { top: 30px; bottom: 30px; left: 28px; right: auto; width: 4px; height: auto; } .ftl-track i { transform: scaleY(var(--p, 0)); transform-origin: top; background: linear-gradient(var(--cyan), var(--magenta)); } } .ftl-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; font-size: .82rem; } @media (max-width: 760px) { .ftl-step { flex-direction: row; text-align: start; padding-block: 8px; } } .ftl-dot { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 3px solid var(--surface-2); display: grid; place-items: center; color: var(--ink-soft); position: relative; z-index: 1; transition: background-color .5s, border-color .5s, color .5s, transform .5s var(--ease-back); transition-delay: calc(var(--i) * 160ms); flex: none; } .ftl-dot svg { width: 22px; height: 22px; } .ftl-step.is-done .ftl-dot { background: var(--ink); border-color: var(--ink); color: var(--paper); } .ftl-step.is-current .ftl-dot { background: var(--magenta); border-color: var(--magenta); color: #fff; transform: scale(1.12); animation: ring 2s infinite; animation-delay: 1.4s; } .ftl-step b { font-weight: 700; display: block; } .ftl-step small { color: var(--ink-soft); } .ftl-step.is-current b { color: var(--magenta); } .dz { position: relative; border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 24px; padding: clamp(28px, 4vw, 48px) 20px; text-align: center; background: var(--surface); transition: border-color .3s, background-color .3s, transform .3s var(--ease); cursor: pointer; overflow: hidden; isolation: isolate; } .dz:hover { border-color: var(--magenta); } .dz.is-drag { border-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 7%, var(--surface)); transform: scale(1.015); } .dz .dz-ic { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 16px; display: grid; place-items: center; background: var(--tint-m); color: var(--magenta); transition: transform .4s var(--ease-back); } .dz .dz-ic svg { width: 34px; height: 34px; } .dz:hover .dz-ic { transform: translateY(-4px); } .dz.is-drag .dz-ic { animation: bounceUp .8s var(--ease) infinite; } .dz .dz-halo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--magenta) 16%, transparent), transparent 40%); opacity: 0; transition: opacity .3s; } .dz.is-drag .dz-halo, .dz:hover .dz-halo { opacity: 1; } .dz-preview { display: none; grid-template-columns: 120px 1fr auto; gap: 18px; align-items: center; padding: 16px; border-radius: 20px; background: var(--surface); } .dz-preview.show { display: grid; animation: rise .6s var(--ease); } @media (max-width: 560px) { .dz-preview { grid-template-columns: 90px 1fr; } .dz-preview .rm { grid-column: 1 / -1; } } .dz-preview .pv { width: 120px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface-2) repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; } @media (max-width: 560px) { .dz-preview .pv { width: 90px; } } .dz-preview .pv img { width: 100%; height: 100%; object-fit: contain; animation: zoomOut .8s var(--ease); } .dz-meta > * { animation: rise .5s var(--ease) both; } .dz-meta > *:nth-child(2) { animation-delay: 80ms; } .dz-meta > *:nth-child(3) { animation-delay: 160ms; } .upload-bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 8px; } .upload-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); width: 100%; transform: scaleX(0); transform-origin: var(--origin-start, left); } .upload-bar.run i { animation: fillBar 1.2s var(--ease) forwards; } .prod-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: 18px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .3s, transform .3s var(--ease), background-color .3s; background: var(--surface); text-align: center; font-weight: 650; font-size: .88rem; } .prod-pick:hover { transform: translateY(-3px); } .prod-pick input { position: absolute; opacity: 0; pointer-events: none; } .prod-pick img { width: 70px; height: 70px; border-radius: 12px; transition: transform .4s var(--ease-back); } .prod-pick:has(input:checked) { border-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 6%, var(--surface)); } .prod-pick:has(input:checked) img { transform: scale(1.08) rotate(-4deg); } .prod-pick:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; } .prod-pick .tickmark { position: absolute; top: 8px; inset-inline-end: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--magenta); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--ease-back); } .prod-pick .tickmark svg { width: 13px; height: 13px; } .prod-pick:has(input:checked) .tickmark { transform: scale(1); } .mock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .mock-tile { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface-2); transition: opacity .4s, transform .5s var(--ease); } .mock-tile.off { opacity: .25; transform: scale(.95); filter: grayscale(1); } .mock-tile > svg { width: 100%; height: 100%; } .mock-tile .mock-art { transition: opacity .5s; } .mock-tile span { position: absolute; bottom: 8px; inset-inline-start: 8px; background: var(--surface); padding: 3px 8px; border-radius: 8px; font-size: .75rem; font-weight: 700; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 999px; background: var(--surface-2); font-size: .85rem; font-weight: 600; animation: popIn .35s var(--ease-back); } .tag-chip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; } .tag-chip button:hover { background: var(--magenta); color: #fff; } .tag-chip svg { width: 12px; height: 12px; } /* 24 UTILITY PAGES / KEYFRAMES / MOTION PREFS -------------------------------- */ .big-404 { font-family: var(--font-display); font-weight: 800; font-size: clamp(8rem, 30vw, 22rem); line-height: .8; letter-spacing: -.07em; display: flex; justify-content: center; } .big-404 span { display: inline-block; animation: wobble 5s ease-in-out infinite; } .big-404 span:nth-child(1) { color: var(--cyan); mix-blend-mode: multiply; } .big-404 span:nth-child(2) { color: var(--magenta); animation-delay: -1.5s; margin-inline: -.06em; } .big-404 span:nth-child(3) { color: var(--yellow); mix-blend-mode: multiply; animation-delay: -3s; } .count-box { background: var(--surface); border-radius: 22px; padding: 18px 10px; text-align: center; min-width: 84px; box-shadow: var(--shadow-sm); } .count-box b { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; display: block; line-height: 1; } .count-box b.flip { animation: flipNum .5s var(--ease); } .count-box small { color: var(--ink-soft); font-size: .8rem; font-weight: 600; } .page-enter main { animation: pageIn .6s var(--ease); } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes popIn { from { opacity: 0; transform: scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { opacity: 0; transform: translateY(60px) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--rot-end, 0deg)); } } @keyframes floatA { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } } @keyframes floatB { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 8px -10px; rotate: 3deg; } } @keyframes floatC { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: -8px -12px; rotate: -4deg; } 66% { translate: 6px -4px; rotate: 2deg; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes morph { 0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; transform: rotate(0); } 50% { border-radius: 58% 42% 45% 55% / 42% 56% 44% 58%; transform: rotate(8deg); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes marquee { to { transform: translateX(calc(-50% * var(--dir))); } } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } } @keyframes cartShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } } @keyframes heartPop { 0% { transform: scale(1); } 30% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes burst { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } } @keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes artIn { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } } @keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--magenta) 45%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } } @keyframes moneyUp { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: 1; transform: translateY(-4px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } } @keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes shakeX { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } @keyframes slideItem { from { opacity: 0; transform: translateX(calc(30px * var(--dir))); } to { opacity: 1; transform: none; } } @keyframes removeItem { to { opacity: 0; transform: translateX(calc(60px * var(--dir))); height: 0; padding: 0; margin: 0; } } @keyframes tick { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes zoomOut { from { transform: scale(1.15); opacity: .4; } to { transform: scale(1); opacity: 1; } } @keyframes toastBar { to { transform: scaleX(0); } } @keyframes paneIn { from { opacity: 0; transform: translateX(calc(20px * var(--dir))); } to { opacity: 1; transform: none; } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } } @keyframes galleryIn { from { clip-path: inset(0 0 0 100%); transform: scale(1.08); } to { clip-path: inset(0); transform: scale(1); } } @keyframes sideIn { to { opacity: 1; transform: none; } } @keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } } @keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes rowOut { to { opacity: 0; transform: translateX(calc(40px * var(--dir))); } } @keyframes statusFlash { 0% { transform: scale(1); } 40% { transform: scale(1.2); box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 18%, transparent); } 100% { transform: scale(1); } } @keyframes bounceUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes fillBar { to { transform: scaleX(1); } } @keyframes wobble { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4%) rotate(-3deg); } } @keyframes flipNum { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } } /* theme switch: smooth colour cross-fade, no flash */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), fill .5s, stroke .5s, box-shadow .5s !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal], .load-seq > *, .pop-in, .slide-in, .flow-node { opacity: 1 !important; transform: none !important; clip-path: none !important; } .marquee-track { animation: none !important; } } /* 25 LATE ADDITIONS: hidden attr, off-canvas visibility, drawer timeline, Home 2 ------------ */ [hidden] { display: none !important; } .drawer, .mobile-nav { visibility: hidden; transition: transform .55s var(--ease), visibility 0s linear .55s; } .drawer.open, .mobile-nav.open { visibility: visible; transition: transform .55s var(--ease), visibility 0s; } @media (max-width: 1023px) { .filter-panel { visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; } .filter-panel.open { visibility: visible; transition: transform .5s var(--ease), visibility 0s; } } @media (max-width: 1023px) { .dash-side { visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; } .dash-side.open { visibility: visible; transition: transform .5s var(--ease), visibility 0s; } } .drawer .ftl, .ftl.vertical { grid-template-columns: 1fr; gap: 0; } .drawer .ftl-track { top: 30px; bottom: 30px; left: auto; right: auto; inset-inline-start: 24px; width: 4px; height: auto; } .drawer .ftl-track i { transform: scaleY(var(--p, 0)); transform-origin: top; background: linear-gradient(var(--cyan), var(--magenta)); } .drawer .ftl-step { flex-direction: row; text-align: start; padding-block: 8px; } @media (max-width: 760px) { .ftl-track { left: auto; right: auto; inset-inline-start: 24px; } } .co-anim { animation: paneIn .45s var(--ease); } .chosen { animation: tick .35s var(--ease); display: inline-block; } /* Home 2 showcase */ .showcase { position: relative; border-radius: clamp(24px, 4vw, 44px); overflow: hidden; min-height: clamp(560px, 78vh, 760px); transition: background-color 1s var(--ease), background .9s var(--ease); isolation: isolate; } .showcase .halftone { position: absolute; inset: 0; color: #1B1C33; opacity: .08; z-index: -1; } .sc-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: clamp(28px, 5vw, 72px); pointer-events: none; } .sc-slide.is-active { pointer-events: auto; } @media (max-width: 860px) { .sc-slide { grid-template-columns: 1fr; align-content: start; padding-bottom: 120px; } } .sc-word { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 10vw, 8.6rem); line-height: .86; letter-spacing: -.055em; color: #1B1C33; } .sc-word span { display: block; overflow: hidden; } .sc-word span i { display: block; font-style: normal; transform: translateY(105%); transition: transform .9s var(--ease); } .sc-slide.is-active .sc-word span i { transform: none; transition-delay: calc(var(--k) * 90ms + 150ms); } .sc-copy { color: #1B1C33; } .sc-copy > *:not(.sc-word) { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .7s var(--ease); } .sc-slide.is-active .sc-copy > *:not(.sc-word) { opacity: 1; transform: none; transition-delay: .45s; } .sc-copy .muted { color: #3E405A; } .sc-visual { position: relative; height: 100%; min-height: 280px; display: grid; place-items: center; } .sc-visual img.main { width: min(100%, 460px); filter: drop-shadow(0 30px 30px rgba(27, 28, 51, .25)); opacity: 0; transform: translateY(40px) rotate(8deg) scale(.9); transition: opacity .7s, transform 1s var(--ease-back); } .sc-slide.is-active .sc-visual img.main { opacity: 1; transform: none; transition-delay: .2s; } .sc-visual img.side { position: absolute; width: 36%; filter: drop-shadow(0 20px 20px rgba(27, 28, 51, .2)); opacity: 0; transform: translateX(calc(60px * var(--dir))) rotate(-10deg); transition: opacity .7s, transform 1s var(--ease); inset-inline-end: 0; bottom: 6%; } .sc-slide.is-active .sc-visual img.side { opacity: 1; transform: rotate(-8deg); transition-delay: .5s; } .sc-ring { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(27, 28, 51, .25); animation: spin 40s linear infinite; } .sc-tabs { position: absolute; left: clamp(20px, 4vw, 72px); right: clamp(20px, 4vw, 72px); bottom: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; z-index: 3; } .sc-tab { text-align: start; color: #1B1C33; font-weight: 700; font-size: .92rem; padding-top: 12px; position: relative; opacity: .55; transition: opacity .3s; } .sc-tab::before, .sc-tab::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(27, 28, 51, .18); } .sc-tab::after { background: #1B1C33; transform: scaleX(0); transform-origin: var(--origin-start, left); } .sc-tab.is-active { opacity: 1; } .sc-tab.is-active::after { animation: dotFill var(--sc-dur, 5s) linear forwards; } .showcase.paused .sc-tab.is-active::after { animation-play-state: paused; } .sc-tab small { display: block; font-weight: 500; opacity: .7; } @media (max-width: 560px) { .sc-tab small { display: none; } .sc-tab { font-size: .8rem; } } html.dark .showcase .sc-word, html.dark .sc-copy, html.dark .sc-tab { color: #1B1C33; } .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: clamp(14px, 2vw, 22px); } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } } @media (max-width: 520px) { .bento { grid-template-columns: 1fr; } } .bento-tile { position: relative; overflow: hidden; border-radius: var(--r-lg); display: block; isolation: isolate; } .bento-tile.big { grid-column: span 2; grid-row: span 2; } .bento-tile.wide { grid-column: span 2; } @media (max-width: 520px) { .bento-tile.big, .bento-tile.wide { grid-column: auto; grid-row: auto; } } .bento-tile .bg { position: absolute; inset: -12% 0; z-index: -1; } .bento-tile .bg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .bento-tile:hover .bg img { transform: scale(1.07); } .bento-tile .cap { position: absolute; inset-inline-start: 20px; bottom: 20px; right: 20px; display: flex; justify-content: space-between; align-items: end; gap: 12px; } .bento-tile .cap h3 { background: var(--surface); padding: 10px 16px; border-radius: 14px; font-size: 1.15rem; transition: transform .5s var(--ease); } .bento-tile:hover .cap h3 { transform: translateY(-4px); } .bento-tile .cap .cat-arrow { transition: transform .5s var(--ease); } .bento-tile:hover .cap .cat-arrow { transform: rotate(calc(-45deg * var(--dir))); background: var(--yellow); } .rail.cards { grid-auto-columns: minmax(250px, 290px); } .split-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 860px) { .split-cta { grid-template-columns: 1fr; } } .split-cta a { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 52px); min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; transition: transform .5s var(--ease); } .split-cta a:hover { transform: translateY(-6px); } .split-cta a img { position: absolute; width: 52%; inset-inline-end: -4%; bottom: -8%; z-index: -1; transition: transform .8s var(--ease-back); filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .25)); } .split-cta a:hover img { transform: rotate(calc(-8deg * var(--dir))) scale(1.06) translateY(-10px); } .earn-card { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-lg); } .gift-card { position: relative; border-radius: var(--r-lg); padding: 22px; background: var(--surface); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; } .gift-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .gift-imgs { display: flex; justify-content: center; margin-bottom: 18px; height: 150px; position: relative; } .gift-imgs img { width: 46%; position: absolute; transition: transform .6s var(--ease-back); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .18)); } .gift-imgs img:nth-child(1) { transform: translateX(calc(-38% * var(--dir))) rotate(-8deg); } .gift-imgs img:nth-child(2) { transform: translateX(calc(38% * var(--dir))) rotate(8deg); } .gift-imgs img:nth-child(3) { transform: translateY(10%); z-index: 1; } .gift-card:hover .gift-imgs img:nth-child(1) { transform: translateX(calc(-62% * var(--dir))) rotate(-14deg); } .gift-card:hover .gift-imgs img:nth-child(2) { transform: translateX(calc(62% * var(--dir))) rotate(14deg); } .gift-card:hover .gift-imgs img:nth-child(3) { transform: translateY(0) scale(1.08); } .big-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -.03em; max-width: 26ch; margin-inline: auto; text-align: center; } .dash-side .logo-mark i, .site-footer .logo-mark i, .auth-visual .logo-mark i { mix-blend-mode: screen; } .stat-card { padding-bottom: 46px; } .stat-card .spark { height: 38px; opacity: .75; } .dash-side { padding-bottom: 16px; } .dash-side .side-link { padding-block: 9px; } .table-wrap { position: relative; } .gallery > * { min-width: 0; } @media (max-width: 640px) { .gallery-thumbs { overflow-x: auto; scrollbar-width: none; } .thumb { width: 68px; height: 68px; flex: none; } } @media (max-width: 640px) { .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { white-space: nowrap; } } /* 26 FIXES: sidebar card never squashed, Home 2 buttons clear of the tab bar */ .dash-side > * { flex-shrink: 0; } .side-promo { margin-top: 24px; } .showcase { min-height: clamp(640px, 84vh, 820px); } .sc-slide { padding-bottom: clamp(120px, 11vw, 150px); align-items: center; } .sc-tabs { bottom: clamp(24px, 3vw, 40px); } .sc-word { font-size: clamp(3.2rem, 8.4vw, 7.4rem); } @media (max-width: 860px) { .sc-slide { padding-bottom: 150px; } .sc-visual { min-height: 220px; } .sc-visual img.main { width: min(70%, 320px); } }