/* ========================================================================= Threadline.fashion — marketing site Built on the Threadline Design System (editorial-elegant, warm cream + cocoa + brass). Imports tokens from assets/colors_and_type.css. THEME MODEL - Each section carries a tone class: .tone-dark (editorial near-black) or .tone-cream (warm paper). The default layout is an editorial "mix". - The Tweaks panel sets data-theme on : "mix" | "dark" | "light". "dark" forces cream sections dark; "light" forces dark sections cream. - Body font swappable via data-font: "system" | "nunito" | "quicksand". ========================================================================= */ /* ---- Body font substitute stacks (SF Pro Rounded is Apple-only) ---- */ :root { --rounded-system: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --rounded-nunito: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; --rounded-quicksand: "Quicksand", ui-rounded, "SF Pro Rounded", system-ui, sans-serif; --font-body: var(--rounded-system); /* Editorial dark tone tokens */ --dark-bg: #100D0B; /* warm near-black */ --dark-bg-2: #1A1512; /* raised panel */ --dark-fg: #FAF7F2; /* cream text */ --dark-fg-2: #B7AB9C; /* warm secondary */ --dark-fg-3: #80756A; /* warm tertiary */ --dark-line: rgba(250, 247, 242, 0.12); --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); } html[data-font="nunito"] { --font-body: var(--rounded-nunito); } html[data-font="quicksand"] { --font-body: var(--rounded-quicksand); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg1); font-family: var(--font-body); font-size: 17px; line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-display); line-height: var(--lh-tight); } p { margin: 0; } ::selection { background: var(--brass); color: #1A1512; } /* ========================================================================= TONES ========================================================================= */ .tone-cream { --sec-bg: var(--cream); --sec-surface: #FFFFFF; --sec-fg: var(--ink-web); --sec-fg-2: var(--ink-web-2); --sec-fg-3: var(--ink-web-3); --sec-line: var(--hairline); --sec-eyebrow: var(--cocoa); --sec-accent: var(--brass-web); background: var(--sec-bg); color: var(--sec-fg); } .tone-dark { --sec-bg: var(--dark-bg); --sec-surface: var(--dark-bg-2); --sec-fg: var(--dark-fg); --sec-fg-2: var(--dark-fg-2); --sec-fg-3: var(--dark-fg-3); --sec-line: var(--dark-line); --sec-eyebrow: var(--brass); --sec-accent: var(--brass); background: var(--sec-bg); color: var(--sec-fg); } /* Theme overrides from Tweaks */ html[data-theme="dark"] .tone-cream { --sec-bg: var(--dark-bg); --sec-surface: var(--dark-bg-2); --sec-fg: var(--dark-fg); --sec-fg-2: var(--dark-fg-2); --sec-fg-3: var(--dark-fg-3); --sec-line: var(--dark-line); --sec-eyebrow: var(--brass); --sec-accent: var(--brass); } html[data-theme="light"] .tone-dark { --sec-bg: var(--cream); --sec-surface: #FFFFFF; --sec-fg: var(--ink-web); --sec-fg-2: var(--ink-web-2); --sec-fg-3: var(--ink-web-3); --sec-line: var(--hairline); --sec-eyebrow: var(--cocoa); --sec-accent: var(--brass-web); } section { background: var(--sec-bg); color: var(--sec-fg); } /* Headings follow the section's foreground token (overrides the design-system default of var(--fg1)), so they stay readable on dark sections and adapt to the Tweaks theme overrides. .it gradient spans keep their own color. */ .tone-cream h1, .tone-cream h2, .tone-cream h3, .tone-cream h4, .tone-dark h1, .tone-dark h2, .tone-dark h3, .tone-dark h4 { color: var(--sec-fg); } /* ========================================================================= LAYOUT PRIMITIVES ========================================================================= */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section-pad { padding-block: clamp(64px, 9vw, 128px); } .stack-sm > * + * { margin-top: 12px; } .stack > * + * { margin-top: 20px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--sec-eyebrow); } .eyebrow .glyph { color: var(--sec-accent); font-weight: 400; font-size: 13px; } .lead { font-size: clamp(17px, 1.5vw, 20px); line-height: var(--lh-normal); color: var(--sec-fg-2); max-width: 46ch; } .it { font-family: var(--font-display); font-style: italic; color: var(--sec-accent); } .section-head { max-width: 720px; } .section-head h2 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 16px; } .section-head p { margin-top: 18px; } /* ========================================================================= BUTTONS / CTAs ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 14px 24px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: opacity .15s ease, background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--cocoa); color: #fff; } .btn-primary:hover { background: var(--cocoa-deep); } .tone-dark .btn-primary, html[data-theme="dark"] .tone-cream .btn-primary { background: var(--brass); color: #1A1512; } .tone-dark .btn-primary:hover, html[data-theme="dark"] .tone-cream .btn-primary:hover { opacity: .9; background: var(--brass); } .btn-ghost { background: transparent; color: var(--sec-fg); border-color: var(--sec-line); } .btn-ghost:hover { background: var(--sec-surface); } /* App Store badge */ .appstore { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 18px; border-radius: 14px; background: #000; color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,.14); transition: transform .15s ease, opacity .15s ease; } .appstore:hover { transform: translateY(-2px); } .appstore svg { width: 26px; height: 26px; flex: none; } .appstore .as-small { display: block; font-size: 11px; letter-spacing: .02em; opacity: .85; line-height: 1.1; } .appstore .as-big { display: block; font-size: 19px; font-weight: 600; font-family: var(--font-body); line-height: 1.1; margin-top: 2px; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .beta-note { font-size: 13px; color: var(--sec-fg-3); display: inline-flex; align-items: center; gap: 7px; } .beta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage) 22%, transparent); } /* ========================================================================= NAV ========================================================================= */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: 72px; padding-inline: var(--gutter); color: var(--dark-fg); transition: background .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: color-mix(in srgb, var(--cream) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); color: var(--ink-web); border-bottom-color: var(--hairline); box-shadow: 0 1px 0 rgba(44,24,16,.03); } .nav-logo { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -.01em; } .nav-logo .mark { width: 30px; height: 30px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { font-size: 15px; font-weight: 500; padding: 9px 14px; border-radius: var(--radius-pill); color: inherit; opacity: .82; transition: opacity .15s ease, background .15s ease; } .nav-links a:hover { opacity: 1; background: color-mix(in srgb, currentColor 9%, transparent); } .nav-right { display: flex; align-items: center; gap: 14px; } .nav-cta { font-size: 15px; font-weight: 600; padding: 10px 20px; border-radius: var(--radius-pill); background: var(--brass); color: #1A1512; transition: transform .15s ease, opacity .15s ease; } .nav.scrolled .nav-cta { background: var(--cocoa); color: #fff; } .nav-cta:hover { transform: translateY(-1px); opacity: .92; } .nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: inherit; } .nav-burger svg { width: 26px; height: 26px; display: block; } .nav-burger .i-close { display: none; } /* When the menu is open, the nav blends into the dark overlay and the burger becomes a close ✕ */ .nav.menu-open, .nav.scrolled.menu-open { background: transparent; color: var(--dark-fg); border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav.menu-open .nav-burger .i-open { display: none; } .nav.menu-open .nav-burger .i-close { display: block; } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--dark-bg); color: var(--dark-fg); display: flex; flex-direction: column; justify-content: center; padding: 80px var(--gutter) 40px; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .mobile-menu.open { opacity: 1; visibility: visible; transform: none; } body.menu-open { overflow: hidden; } .mobile-menu a { font-family: var(--font-display); font-size: 34px; padding: 12px 0; border-bottom: 1px solid var(--dark-line); } .mobile-menu .btn { margin-top: 28px; align-self: flex-start; } /* ========================================================================= HERO ========================================================================= */ .hero { position: relative; overflow: hidden; padding-top: 132px; padding-bottom: clamp(64px, 9vw, 128px); } .hero::before { /* subtle brass glow */ content: ""; position: absolute; top: -10%; right: -8%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle, rgba(201,162,75,.16), transparent 62%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-copy { position: relative; z-index: 2; } .hero h1 { font-size: clamp(44px, 6.6vw, 86px); line-height: 1.02; margin-top: 22px; } .hero .lead { margin-top: 26px; font-size: clamp(18px, 1.7vw, 22px); max-width: 40ch; } .hero .cta-row { margin-top: 38px; } /* CTA + micro-line pulled below both hero columns, centered */ .hero-cta { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-cta .cta-row { margin-top: 0; justify-content: center; } .hero-mood { transition: opacity .7s ease; } /* mood eyebrow swap */ .mood-eyebrow { display: inline-flex; min-height: 18px; } /* Hero visual: phone + floating cards */ .hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; min-height: 560px; } .phone { position: relative; width: clamp(248px, 25vw, 320px); aspect-ratio: 320 / 660; border-radius: 46px; background: #000; padding: 11px; box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); } .phone::after { /* notch */ content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 34%; height: 26px; background: #000; border-radius: 0 0 16px 16px; z-index: 3; } .phone-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--cream); } .phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .float-card { position: absolute; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); border: 1px solid var(--hairline); padding: 12px; display: flex; align-items: center; gap: 11px; } .float-card img { width: 46px; height: 56px; object-fit: contain; } .float-card .fc-meta { font-family: var(--font-body); } .float-card .fc-eyebrow { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-web); font-weight: 700; } .float-card .fc-title { font-size: 14px; font-weight: 600; color: var(--ink-web); } .float-card .fc-sub { font-size: 12px; color: var(--ink-web-2); } .fc-1 { top: 8%; left: -6%; animation: floaty 6s ease-in-out infinite; } .fc-2 { bottom: 12%; right: -10%; animation: floaty 7s ease-in-out infinite .8s; } .fc-ivy { bottom: -2%; left: 2%; background: var(--dark-bg-2); border-color: var(--dark-line); animation: floaty 6.5s ease-in-out infinite .4s; } .fc-ivy .fc-title { color: var(--dark-fg); } .fc-ivy .fc-sub { color: var(--dark-fg-2); } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .fc-1,.fc-2,.fc-ivy { animation: none; } } .ivy-orb { width: 38px; height: 38px; border-radius: 50%; background: var(--ai-gradient); display: grid; place-items: center; color: #fff; font-size: 17px; flex: none; box-shadow: var(--shadow-ai); } /* ========================================================================= SOCIAL PROOF STRIP ========================================================================= */ .proof { border-top: 1px solid var(--sec-line); border-bottom: 1px solid var(--sec-line); } .proof .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; padding-block: 30px; } .proof-item { display: flex; flex-direction: column; gap: 4px; } .proof-num { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--sec-fg); } .proof-num .stars { color: var(--brass); } .proof-label { font-size: 13px; color: var(--sec-fg-3); letter-spacing: .02em; } .proof-divider { width: 1px; align-self: stretch; background: var(--sec-line); } /* ========================================================================= PROBLEM → SOLUTION ========================================================================= */ .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .problem-stat { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); line-height: 1.05; } .problem-stat .it { display: block; } .solution-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; } .solution-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; color: var(--sec-fg-2); } .solution-list .tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cocoa-bg); color: var(--cocoa); display: grid; place-items: center; margin-top: 1px; } html[data-theme="dark"] .solution-list .tick { background: rgba(201,162,75,.16); color: var(--brass); } /* ========================================================================= FEATURE CARDS ========================================================================= */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; } .feature-card { position: relative; background: var(--sec-surface); border: 1px solid var(--sec-line); border-radius: var(--radius-xl); padding: 30px; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; transition: transform .25s ease, box-shadow .25s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hero); } .feature-card.span-2 { grid-column: span 2; } .feature-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cocoa-bg); color: var(--cocoa); margin-bottom: 20px; } .feature-ico.ai { background: var(--ai-gradient); color: #fff; box-shadow: var(--shadow-ai); } html[data-theme="dark"] .feature-ico { background: rgba(255,255,255,.06); color: var(--brass); } .feature-ico svg { width: 24px; height: 24px; } .feature-card h3 { font-size: 24px; } .feature-card p { margin-top: 12px; color: var(--sec-fg-2); font-size: 16px; } .feature-tag { position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-web); background: var(--brass-faint); padding: 5px 11px; border-radius: var(--radius-pill); } html[data-theme="dark"] .feature-tag { background: rgba(201,162,75,.14); color: var(--brass); } /* closet mini-grid inside a feature card */ .closet-mini { margin-top: auto; padding-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; } .closet-mini .ci { height: clamp(72px, 7vw, 100px); background: var(--cream); border: 1px solid var(--sec-line); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 8px; min-width: 0; overflow: hidden; } html[data-theme="dark"] .closet-mini .ci { background: rgba(255,255,255,.04); } .closet-mini .ci img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* feature with big image side */ .feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .feature-split .fs-copy { padding: 40px clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; } .feature-split .fs-visual { background: var(--tint-butter); position: relative; min-height: 300px; display: grid; place-items: center; overflow: hidden; padding: 32px; } .feature-split .fs-visual .closet-mini { margin-top: 0; padding-top: 0; } .feature-split .fs-visual .ci { background: var(--surface); border-color: var(--hairline); box-shadow: var(--shadow-card); } html[data-theme="dark"] .feature-split .fs-visual .ci { background: var(--dark-bg-2); border-color: var(--dark-line); } html[data-theme="dark"] .feature-split .fs-visual { background: rgba(255,255,255,.03); } /* Pair advisor visual */ .pair { display: flex; align-items: center; gap: 8px; } .pair-item { width: 110px; height: 130px; background: #fff; border-radius: 14px; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; padding: 12px; box-shadow: var(--shadow-card); overflow: hidden; } .pair-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .pair-plus { width: 30px; height: 30px; border-radius: 50%; background: var(--ai-gradient); color: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: var(--shadow-ai); } /* ========================================================================= HOW IT WORKS ========================================================================= */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; } .step { position: relative; } .step-num { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--sec-accent); display: inline-flex; align-items: center; gap: 12px; } .step-num::before { content: ""; width: 34px; height: 1px; background: var(--sec-accent); opacity: .5; } .step h3 { font-size: 26px; margin-top: 16px; } .step p { margin-top: 12px; color: var(--sec-fg-2); } .step-visual { margin-top: 24px; aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--sec-surface); border: 1px solid var(--sec-line); overflow: hidden; display: grid; place-items: center; } /* ========================================================================= MEET IVY ========================================================================= */ .ivy { position: relative; overflow: hidden; } .ivy::before { content: ""; position: absolute; bottom: -20%; left: -5%; width: 50vw; height: 50vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle, rgba(184,107,74,.18), transparent 62%); pointer-events: none; } .ivy-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 90px); align-items: center; } .ivy-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: var(--radius-pill); background: var(--dark-bg-2); border: 1px solid var(--dark-line); } html[data-theme="light"] .ivy-badge { background: #fff; border-color: var(--hairline); } .ivy h2 { font-size: clamp(32px, 4.6vw, 56px); margin-top: 26px; } .ivy h2 .it { display: inline; } .ivy-chat { background: var(--sec-surface); border: 1px solid var(--sec-line); border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-modal); } .ivy-msg { display: flex; gap: 14px; align-items: flex-start; } .ivy-msg + .ivy-msg { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--sec-line); } .ivy-bubble { font-size: 16px; line-height: 1.55; color: var(--sec-fg); } .ivy-bubble .ai-attr { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; background: var(--ai-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .ivy-reason { margin-top: 10px; font-size: 14px; color: var(--sec-fg-2); } .ivy-flat { margin-top: 18px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; } .ivy-flat .fi { height: clamp(66px, 6.5vw, 104px); background: var(--cream); border-radius: 12px; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; padding: 10px; min-width: 0; overflow: hidden; } .ivy-flat .fi img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* ========================================================================= PRIVACY ========================================================================= */ .privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; } .privacy-card { background: var(--sec-surface); border: 1px solid var(--sec-line); border-radius: var(--radius-lg); padding: 28px; } .privacy-card .feature-ico { background: var(--sage-bg); color: var(--sage); } html[data-theme="dark"] .privacy-card .feature-ico { background: rgba(79,107,74,.2); color: #9cba96; } .privacy-card h3 { font-size: 20px; font-family: var(--font-body); font-weight: 600; letter-spacing: -.01em; } .privacy-card p { margin-top: 10px; color: var(--sec-fg-2); font-size: 15px; } /* ========================================================================= PRICING ========================================================================= */ .price-toggle { display: inline-flex; align-items: center; gap: 4px; background: var(--sec-surface); border: 1px solid var(--sec-line); border-radius: var(--radius-pill); padding: 4px; margin-top: 28px; } .price-toggle button { font-family: var(--font-body); font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--sec-fg-2); padding: 9px 18px; border-radius: var(--radius-pill); cursor: pointer; transition: all .2s ease; } .price-toggle button.active { background: var(--cocoa); color: #fff; } html[data-theme="dark"] .price-toggle button.active { background: var(--brass); color: #1A1512; } .price-save { font-size: 12px; color: var(--sage); font-weight: 700; margin-left: 8px; } .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; max-width: 880px; } .price-card { background: var(--sec-surface); border: 1px solid var(--sec-line); border-radius: var(--radius-xl); padding: 36px; display: flex; flex-direction: column; } .price-card.premium { border-color: var(--brass); position: relative; box-shadow: var(--shadow-hero); } .price-card.premium::before { content: "Most popular"; position: absolute; top: -12px; left: 36px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--ai-gradient); color: #fff; padding: 6px 14px; border-radius: var(--radius-pill); } .price-name { font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--sec-fg-2); } .price-amt { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1; margin-top: 16px; display: flex; align-items: baseline; gap: 6px; } .price-amt .per { font-family: var(--font-body); font-size: 16px; font-weight: 500; color: var(--sec-fg-3); letter-spacing: 0; } .price-desc { color: var(--sec-fg-2); margin-top: 12px; font-size: 15px; min-height: 44px; } .price-card .btn { margin-top: 24px; } .price-feats { list-style: none; margin: 26px 0 0; padding: 26px 0 0; border-top: 1px solid var(--sec-line); display: flex; flex-direction: column; gap: 14px; } .price-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--sec-fg-2); } .price-feats .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cocoa-bg); color: var(--cocoa); } .price-feats .tick.ai { background: var(--ai-gradient); color: #fff; } html[data-theme="dark"] .price-feats .tick { background: rgba(255,255,255,.07); color: var(--brass); } .price-feats .muted { color: var(--sec-fg-3); } .price-feats .muted .tick { background: transparent; color: var(--sec-fg-3); border: 1px solid var(--sec-line); } /* ========================================================================= FAQ ========================================================================= */ .faq-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .faq-list { border-top: 1px solid var(--sec-line); } .faq-item { border-bottom: 1px solid var(--sec-line); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 19px; color: var(--sec-fg); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .faq-q .chev { flex: none; width: 24px; height: 24px; transition: transform .3s ease; color: var(--sec-accent); } .faq-item.open .faq-q .chev { transform: rotate(45deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; } .faq-a-inner { padding-bottom: 24px; color: var(--sec-fg-2); font-size: 16px; max-width: 62ch; } /* ========================================================================= FINAL CTA ========================================================================= */ .final { position: relative; overflow: hidden; text-align: center; } .final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(201,162,75,.18), transparent 60%); pointer-events: none; } .final .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .final h2 { font-size: clamp(36px, 5.5vw, 68px); max-width: 16ch; } .final .lead { margin-top: 22px; text-align: center; } .final .cta-row { margin-top: 36px; justify-content: center; } .final-mark { width: 60px; height: 60px; margin-bottom: 28px; opacity: .92; } /* ========================================================================= FOOTER ========================================================================= */ .footer { padding-block: clamp(56px, 7vw, 88px) 40px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; } .footer-brand .nav-logo { font-size: 24px; } .footer-brand p { margin-top: 16px; color: var(--sec-fg-2); font-size: 15px; max-width: 30ch; } .footer-col h4 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sec-fg-3); } .footer-col ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; } .footer-col a { color: var(--sec-fg-2); font-size: 15px; transition: color .15s ease; } .footer-col a:hover { color: var(--sec-accent); } .news-form { display: flex; gap: 8px; margin-top: 16px; } .news-form input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 15px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--sec-line); background: var(--sec-surface); color: var(--sec-fg); } .news-form input::placeholder { color: var(--sec-fg-3); } .news-form input:focus { outline: none; border-color: var(--sec-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec-accent) 24%, transparent); } .news-form button { flex: none; } .news-ok { font-size: 14px; color: var(--sage); margin-top: 12px; } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sec-line); display: grid; place-items: center; color: var(--sec-fg-2); transition: all .15s ease; } .footer-social a:hover { color: var(--sec-accent); border-color: var(--sec-accent); } .footer-social svg { width: 18px; height: 18px; } .footer-bot { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--sec-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--sec-fg-3); } .footer-bot a { color: var(--sec-fg-3); } .footer-bot a:hover { color: var(--sec-accent); } /* ========================================================================= SCROLL REVEAL ========================================================================= */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================= AI FEATURE GRID (8 cards) ========================================================================= */ .ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; } .ai-card { position: relative; background: var(--sec-surface); border: 1px solid var(--sec-line); border-radius: var(--radius-xl); padding: 28px 26px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ai-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hero); } .ai-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--cocoa-bg); color: var(--cocoa); margin-bottom: 20px; } .ai-ico svg { width: 23px; height: 23px; } .ai-ico.ai { background: var(--ai-gradient); color: #fff; box-shadow: var(--shadow-ai); } .ai-ico.ico-blue { background: #E1ECF6; color: var(--c-blue); } .ai-ico.ico-rose { background: #F7E2E7; color: var(--c-rose); } .ai-ico.ico-sage { background: var(--sage-bg); color: var(--sage); } .ai-ico.ico-terra { background: #F8E2D7; color: var(--c-terra); } html[data-theme="dark"] .ai-ico.ico-blue { background: rgba(61,110,158,.20); color: #9cc0e2; } html[data-theme="dark"] .ai-ico.ico-rose { background: rgba(181,70,106,.20); color: #e09bb1; } html[data-theme="dark"] .ai-ico.ico-terra { background: rgba(168,69,47,.20); color: #e0a18f; } html[data-theme="dark"] .ai-ico.ico-sage { background: rgba(79,107,74,.22); color: #9cba96; } .ai-card h3 { font-size: 21px; } .ai-card p { margin-top: 10px; color: var(--sec-fg-2); font-size: 15px; } .ai-card p em { font-style: italic; font-family: var(--font-display); color: var(--sec-fg); } .ai-tag { position: absolute; top: 22px; right: 22px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--ai-gradient); padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-ai); } /* ========================================================================= FIT CHECK SPOTLIGHT ========================================================================= */ .fitcheck { position: relative; overflow: hidden; } .fitcheck::before { content: ""; position: absolute; top: -10%; right: -6%; width: 52vw; height: 52vw; max-width: 680px; max-height: 680px; background: radial-gradient(circle, rgba(184,107,74,.22), transparent 62%); pointer-events: none; } .fitcheck-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 90px); align-items: center; position: relative; z-index: 1; } .fitcheck-h { font-size: clamp(34px, 5vw, 60px); margin-top: 22px; } .fitcheck-visual { display: flex; justify-content: center; } .fitcheck-phone { position: relative; width: clamp(240px, 26vw, 320px); aspect-ratio: 320 / 660; background: #000; border-radius: 46px; padding: 11px; box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); } .fitcheck-screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--cream); } .fitcheck-badge { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: rgba(16,13,11,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--dark-fg); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.14); } /* hero microcopy under CTA */ .hero-micro { margin-top: 18px; font-size: 13.5px; color: var(--sec-fg-3); } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 980px) { .nav-links, .nav-right .nav-cta { display: none; } .nav-burger { display: inline-flex; } .hero-grid, .problem-grid, .ivy-grid, .feature-split { grid-template-columns: 1fr; } .hero-visual { min-height: 480px; margin-top: 12px; } .feature-grid { grid-template-columns: 1fr; } .ai-grid { grid-template-columns: repeat(2, 1fr); } .fitcheck-grid { grid-template-columns: 1fr; } .feature-card.span-2 { grid-column: auto; } .steps, .privacy-grid { grid-template-columns: 1fr; gap: 40px; } .price-grid { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; gap: 32px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } .ai-grid { grid-template-columns: 1fr; } .proof .wrap { gap: 22px; } .proof-divider { display: none; } .hero h1 { font-size: 13vw; } } /* ========================================================================= IMAGE-FORWARD: hero display case, lookbook gallery, garment plates Garment PNGs are transparent — drop-shadow renders a real garment shadow. ========================================================================= */ /* ---- Hero "today's look" display case ---- */ .hero-visual { display: block; min-height: 0; } .hero-case { position: relative; background: radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, var(--cream) 70%); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35); padding: clamp(20px, 2.4vw, 30px); overflow: hidden; } .case-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .case-bar .eyebrow { color: var(--cocoa); } .case-temp { font-size: 13px; font-weight: 600; color: var(--ink-web-2); display: inline-flex; align-items: center; gap: 6px; } .case-temp .sun { color: var(--brass-web); } .case-look { display: grid; grid-template-columns: 0.82fr 1fr; grid-template-rows: repeat(3, 1fr); gap: clamp(6px, 1.4vw, 14px); height: clamp(320px, 36vw, 450px); margin: clamp(12px, 2vw, 22px) 0; } .case-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; } .case-cell img { max-width: 84%; max-height: 84%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(20,18,16,.20)); } .case-cell.r1 img { transform: rotate(-3deg); } .case-cell.r2 img { transform: rotate(2deg); } .case-cell.r3 img { transform: rotate(2deg); } .case-cell.shoes img { max-height: 64%; } .case-reason { display: flex; align-items: flex-start; gap: 12px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 14px; line-height: 1.5; color: var(--ink-web-2); } .ivy-orb.sm { width: 28px; height: 28px; font-size: 13px; } /* Re-anchor hero float chips to the case */ .hero .fc-1 { top: 6%; right: -4%; left: auto; } .hero .fc-ivy { bottom: 8%; left: -5%; } /* ---- Lookbook gallery ---- */ .lookbook .section-head { max-width: 760px; } .look-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; } .look-plate { background: var(--sec-surface); border: 1px solid var(--sec-line); border-radius: var(--radius-xl); padding: 24px 20px 20px; display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease; } .look-plate:hover { transform: translateY(-6px); box-shadow: var(--shadow-hero); } .look-stage { height: clamp(240px, 24vw, 320px); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .look-stage img { max-height: 84%; max-width: 84%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(20,18,16,.16)); } html[data-theme="dark"] .look-stage img { filter: drop-shadow(0 20px 26px rgba(0,0,0,.55)); } .look-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: auto; } .look-cap .lc-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sec-fg-3); } .look-cap .lc-name { font-family: var(--font-display); font-size: 18px; color: var(--sec-fg); margin-top: 4px; } .look-cap .lc-ai { color: var(--brass-web); font-size: 14px; flex: none; margin-top: 2px; } html[data-theme="dark"] .look-cap .lc-ai { color: var(--brass); } /* ---- Bigger Pair Advisor + closet imagery ---- */ .pair-item { width: clamp(120px, 14vw, 150px); height: clamp(150px, 18vw, 184px); } /* ---- Meet Ivy: larger outfit flat-lay ---- */ .ivy-flat { gap: 14px; } .ivy-flat .fi { height: clamp(120px, 13vw, 168px); padding: 14px; } /* ---- App screenshot framed in step 3 ---- */ .step-phone { width: clamp(150px, 60%, 210px); aspect-ratio: 210 / 430; margin: 0 auto; background: #000; border-radius: 30px; padding: 7px; box-shadow: var(--shadow-modal); } .step-phone .ps { width: 100%; height: 100%; border-radius: 24px; overflow: hidden; background: var(--cream); } .step-phone .ps img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } @media (max-width: 980px) { .look-grid { grid-template-columns: repeat(2, 1fr); } .case-look { min-height: 240px; } .hero .fc-1, .hero .fc-ivy { display: none; } } @media (max-width: 560px) { .look-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .look-stage { height: 150px; } } /* ========================================================================= MAGAZINE EDITORIAL SYSTEM — running heads, numerals, drop caps, captions ========================================================================= */ /* Running head: N°01 — LABEL ———————————— */ .ed-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); } .ed-head .ed-no { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(16px, 1.6vw, 19px); color: var(--sec-accent); white-space: nowrap; } .ed-head .ed-lbl { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sec-fg-2); white-space: nowrap; } .ed-head .ed-rule { flex: 1; height: 1px; background: var(--sec-line); transform: translateY(-4px); } .ed-head .ed-glyph { color: var(--sec-accent); font-size: 14px; transform: translateY(-2px); } .section-head.bare { margin-top: 0; } .section-head h2 .it { display: inline; } /* Drop cap — magazine lede */ .dropcap::first-letter { font-family: var(--font-display); font-weight: 600; font-size: 3.3em; line-height: .76; float: left; padding: 8px 12px 0 0; color: var(--sec-accent); } /* Lookbook: auto-numbered plates + magazine caption */ .look-grid { counter-reset: look; } .look-plate { counter-increment: look; position: relative; } .look-cap .lc-eyebrow::before { content: counter(look, decimal-leading-zero) " · "; color: var(--sec-accent); } .look-cap .lc-name { font-style: normal; } .look-plate .lc-ai { font-size: 13px; } /* Big editorial step numerals */ .step-no { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(54px, 6vw, 84px); line-height: .9; color: var(--sec-accent); display: block; margin-bottom: 6px; } .step-rule { height: 1px; background: var(--sec-line); margin: 4px 0 18px; } /* Feature edit: subtle issue numerals */ .feature-grid { counter-reset: feat; } .feature-card { counter-increment: feat; } .feature-num { position: absolute; top: 26px; right: 28px; font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--sec-fg-3); opacity: .8; } .feature-card.span-2 .feature-num { right: 34px; } /* Editorial pull-quote */ .pullquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.18; letter-spacing: -.01em; color: var(--sec-fg); } .pullquote .it { color: var(--sec-accent); } .pull-attr { margin-top: 20px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sec-fg-3); } /* ========================================================================= COLOR LAYER — brighter, more interesting palette (grounded in the app: blue weather skies, the warm AI gradient, colorful garments) ========================================================================= */ :root { --tint-blue: #CEE0F2; --tint-blush: #F5D8DE; --tint-sage: #DBEAD1; --tint-butter: #F5E4B2; --tint-peach: #F7D8C6; --tint-lilac: #E4DDF1; --c-blue: #3D6E9E; /* weather blue, ink-strength */ --c-rose: #B5466A; --c-sageink: #466340; --c-terra: #A8452F; } /* Hero headline accent word → vibrant AI gradient */ .hero h1 .it { background: var(--ai-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hero display-case cells: soft tinted studio backdrops */ .case-cell { border-radius: 14px; padding: clamp(6px, 1.1vw, 14px); } .case-cell.r1 { background: var(--tint-blue); } .case-cell.r2 { background: var(--tint-peach); } .case-cell.r3 { background: var(--tint-butter); } .case-cell.tall { background: var(--tint-sage); grid-column: 2; grid-row: 1 / 4; } .case-cell.tall img { transform: none; } /* Lookbook: each garment on its own colored swatch */ .look-stage { border-radius: var(--radius-lg); padding: clamp(10px, 1.2vw, 16px); } .look-grid .look-plate:nth-child(8n+1) .look-stage { background: var(--tint-blush); } .look-grid .look-plate:nth-child(8n+2) .look-stage { background: var(--tint-blue); } .look-grid .look-plate:nth-child(8n+3) .look-stage { background: var(--tint-sage); } .look-grid .look-plate:nth-child(8n+4) .look-stage { background: var(--tint-butter); } .look-grid .look-plate:nth-child(8n+5) .look-stage { background: var(--tint-peach); } .look-grid .look-plate:nth-child(8n+6) .look-stage { background: var(--tint-lilac); } .look-grid .look-plate:nth-child(8n+7) .look-stage { background: var(--tint-blue); } .look-grid .look-plate:nth-child(8n+0) .look-stage { background: var(--tint-butter); } .look-stage img { filter: drop-shadow(0 16px 18px rgba(20,18,16,.14)); } html[data-theme="dark"] .look-stage img { filter: drop-shadow(0 16px 20px rgba(20,18,16,.22)); } /* How-it-works: carry the colored-swatch theme into the step visuals */ .steps .step:nth-child(1) .step-visual { background: var(--tint-blush); } .steps .step:nth-child(2) .step-visual { background: var(--tint-sage); } .steps .step:nth-child(3) .step-visual { background: var(--tint-butter); } .step-visual .closet-mini { margin-top: 0; padding-top: 0; align-content: center; } .step-visual .ci { height: clamp(104px, 12vw, 140px); background: var(--surface); border-color: var(--hairline); box-shadow: var(--shadow-card); } html[data-theme="dark"] .step-visual .ci { background: var(--dark-bg-2); border-color: var(--dark-line); } /* Color-coded feature icons */ .feature-ico.ico-blue { background: #E1ECF6; color: var(--c-blue); } .feature-ico.ico-rose { background: #F7E2E7; color: var(--c-rose); } .feature-ico.ico-sage { background: var(--sage-bg); color: var(--sage); } .feature-ico.ico-terra { background: #F8E2D7; color: var(--c-terra); } html[data-theme="dark"] .feature-ico.ico-blue { background: rgba(61,110,158,.20); color: #9cc0e2; } html[data-theme="dark"] .feature-ico.ico-rose { background: rgba(181,70,106,.20); color: #e09bb1; } html[data-theme="dark"] .feature-ico.ico-terra { background: rgba(168,69,47,.20); color: #e0a18f; } /* Color-coded running heads (magazine section colors) */ #problem .ed-no, #problem .ed-glyph { color: var(--c-rose); } #lookbook .ed-no, #lookbook .ed-glyph { color: var(--c-blue); } #features .ed-no, #features .ed-glyph { color: var(--c-terra); } #how .ed-no, #how .ed-glyph { color: var(--c-sageink); } #privacy .ed-no, #privacy .ed-glyph { color: var(--c-sageink); } #problem .pullquote .it { color: var(--c-rose); } /* Weather chip in the hero case → app's blue sky */ .case-temp { background: var(--tint-blue); color: var(--c-blue); padding: 5px 12px; border-radius: var(--radius-pill); } .case-temp .sun { color: var(--amber); } /* Brighter solution ticks + beta dot stays sage */ .solution-list .tick { background: #F7E2E7; color: var(--c-rose); } html[data-theme="dark"] .solution-list .tick { background: rgba(181,70,106,.20); color: #e09bb1; } /* Ivy as a magazine interview */ .ivy-kicker { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: var(--sec-accent); }