@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Inter:wght@400;500;600;700&display=swap'); /* ========================================================================= Build a Box page styles. All rules are scoped under `.build-a-box` (the page's class) so this stylesheet can be loaded globally without affecting or conflicting with any other page's CSS. ========================================================================= */ .build-a-box { --ink: #211b17; --soft: #443831; --taupe: #7b6a5f; --muted: #9b887b; --cream: #fbf8f3; --paper: #fffdf8; --sand: #efe5dc; --rose: #efd8cf; --blush: #f5e4df; --sage: #d8ded0; --champagne: #ead8bd; --ivory: #fffaf0; --christmas: #7b2324; --evergreen: #183d2e; --gold: #c59a5f; --line: rgba(33, 27, 23, .12); --shadow: 0 24px 70px rgba(33, 27, 23, .10) } .build-a-box * { box-sizing: border-box } html:has(> body.build-a-box) { scroll-behavior: smooth } body.build-a-box { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased } .build-a-box a { color: inherit; text-decoration: none } .build-a-box button, .build-a-box input, .build-a-box select, .build-a-box textarea { font: inherit } .build-a-box button { cursor: pointer } .build-a-box .serif { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; letter-spacing: -.025em } .build-a-box .container { width: min(1320px, calc(100% - 72px)); margin: 0 auto } .build-a-box .eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); font-weight: 700 } .build-a-box .bb-header { background: rgba(251, 248, 243, .96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 80; backdrop-filter: blur(18px) } .build-a-box .bb-grid { min-height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px } .build-a-box .bb-left, .build-a-box .bb-right { display: flex; gap: 22px; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase } .build-a-box .bb-right { justify-content: flex-end } .build-a-box .bb-brand { text-align: center; line-height: 1 } .build-a-box .bb-brand-main { font-family: "Bodoni Moda", Georgia, serif; font-size: 33px; letter-spacing: .15em } .build-a-box .bb-brand-sub { margin-top: 9px; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--taupe) } .build-a-box .start-link { border: 1px solid var(--ink); background: var(--ink); color: var(--cream); padding: 11px 16px; letter-spacing: .14em; white-space: nowrap } .build-a-box .studio-subnav { height: 62px; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 34px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase } .build-a-box .studio-subnav a.active { border-bottom: 1px solid var(--ink); padding-bottom: 5px } .build-a-box .cart-pill { border: 1px solid var(--line); padding: 9px 12px; background: var(--cream) } .build-a-box .btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 13px 22px; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px } .build-a-box .btn.dark { background: var(--ink); color: var(--cream) } .build-a-box .btn.light { border-color: var(--cream); color: var(--cream) } .build-a-box .btn.small { padding: 10px 13px; font-size: 10px; min-height: 38px } .build-a-box .tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); font-weight: 700 } .build-a-box .page-hero { background: linear-gradient(120deg, #fffdf8, #f3e7dd); border-bottom: 1px solid var(--line); padding: 60px 0 } .build-a-box .page-hero-grid { display: grid; grid-template-columns: 1fr 390px; gap: 44px; align-items: center } .build-a-box .crumbs { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe) } .build-a-box .page-hero h1 { font-size: clamp(46px, 5vw, 78px); line-height: .94; margin: 14px 0 16px } .build-a-box .page-hero p { color: #5c5048; line-height: 1.78; max-width: 720px } .build-a-box .hero-card { background: #fffaf2; border: 1px solid var(--line); padding: 28px; box-shadow: var(--shadow) } .build-a-box .hero-card strong { display: block; font-family: "Bodoni Moda", serif; font-size: 30px; font-weight: 400; line-height: 1.05; margin-bottom: 12px } .build-a-box .footer { background: var(--ink); color: var(--cream); padding: 36px 0; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase } .build-a-box .toast { position: fixed; right: 24px; bottom: 24px; background: var(--ink); color: var(--cream); padding: 13px 16px; box-shadow: var(--shadow); z-index: 999; opacity: 0; transform: translateY(10px); transition: .22s } .build-a-box .toast.show { opacity: 1; transform: translateY(0) } @media(max-width:1100px) { .build-a-box .bb-left, .build-a-box .bb-right { display: none } .build-a-box .bb-grid { grid-template-columns: 1fr; justify-items: center } .build-a-box .studio-subnav { overflow: auto; justify-content: flex-start; padding: 0 24px } .build-a-box .page-hero-grid { grid-template-columns: 1fr } .build-a-box .container { width: min(100% - 40px, 1320px) } } .build-a-box .build-steps { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 158px; z-index: 40 } .build-a-box .stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 } .build-a-box .step-tab { padding: 18px 20px; border-left: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: var(--paper) } .build-a-box .step-tab:first-child { border-left: 0 } .build-a-box .step-num { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700 } .build-a-box .step-tab.active { background: #f6ece3 } .build-a-box .step-tab.active .step-num { background: var(--ink); color: var(--cream) } .build-a-box .step-label strong { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase } .build-a-box .step-label span { display: block; font-size: 12px; color: var(--taupe); margin-top: 2px } .build-a-box .builder { padding: 52px 0 76px } .build-a-box .builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start } .build-a-box .builder-main { display: flex; flex-direction: column; gap: 34px } .build-a-box .panel { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 30px } .build-a-box .panel-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px } .build-a-box .panel h2 { font-size: 42px; line-height: 1; margin: 0 } .build-a-box .panel-copy { color: #5c5048; line-height: 1.75; max-width: 740px } .build-a-box .packaging-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px } .build-a-box .package-card { border: 1px solid var(--line); background: #fffaf5; padding: 22px; display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; transition: .22s } .build-a-box .package-card.active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(33, 27, 23, .08); background: #fffdf9 } .build-a-box .package-visual { aspect-ratio: 1/1; border: 1px solid rgba(33, 27, 23, .12); background: var(--ivory); box-shadow: inset 0 0 0 14px rgba(255, 255, 255, .35) } .build-a-box .package-visual.large { background: var(--champagne) } .build-a-box .package-card h3 { font-size: 29px; line-height: 1; margin: 0 0 8px } .build-a-box .package-card p { font-size: 13px; line-height: 1.55; color: #5c5048; margin: 0 } .build-a-box .package-meta { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; margin-top: 10px; color: var(--taupe) } .build-a-box .color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px } .build-a-box .color-card { border: 1px solid var(--line); background: #fff; padding: 14px; display: flex; gap: 12px; align-items: center } .build-a-box .color-card.active { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(33, 27, 23, .08) } .build-a-box .swatch { width: 44px; height: 44px; border: 1px solid rgba(33, 27, 23, .14); border-radius: 50% } .build-a-box .swatch.ivory { background: var(--ivory) } .build-a-box .swatch.blush { background: var(--blush) } .build-a-box .swatch.sage { background: var(--sage) } .build-a-box .swatch.champagne { background: var(--champagne) } .build-a-box .color-card strong { font-size: 12px; letter-spacing: .11em; text-transform: uppercase } .build-a-box .market-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 } .build-a-box .chip { border: 1px solid var(--line); background: #fff; padding: 10px 13px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase } .build-a-box .chip.active { background: var(--ink); color: var(--cream) } .build-a-box .market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px } .build-a-box .market-card { background: #fffdf9; border: 1px solid var(--line); display: flex; flex-direction: column } .build-a-box .market-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #eee1d8 } .build-a-box .market-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1 } .build-a-box .market-card h4 { font-size: 15px; line-height: 1.25; margin: 0 } .build-a-box .market-card p { font-size: 12px; color: var(--taupe); line-height: 1.45; margin: 0 } .build-a-box .note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } .build-a-box .note-grid .full { grid-column: 1/-1 } .build-a-box .field label { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px; color: var(--taupe); font-weight: 700 } .build-a-box .field input, .build-a-box .field textarea, .build-a-box .field select { width: 100%; padding: 13px; border: 1px solid var(--line); background: #fff; color: var(--ink) } .build-a-box .field textarea { min-height: 110px; resize: vertical } .build-a-box .summary-card { position: sticky; top: 240px; background: var(--ink); color: var(--cream); padding: 26px; box-shadow: var(--shadow) } .build-a-box .summary-card h3 { font-size: 35px; line-height: 1; margin: 0 0 10px } .build-a-box .summary-muted { color: #d8c9bd; font-size: 13px; line-height: 1.65 } .build-a-box .summary-line { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 13px; margin-top: 13px } .build-a-box .summary-items { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px } .build-a-box .summary-items li { display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgba(255, 255, 255, .12); padding-bottom: 10px; font-size: 13px } .build-a-box .box-status { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); padding: 14px; margin-top: 18px } .build-a-box .status-bar { height: 7px; background: rgba(255, 255, 255, .16); margin-top: 10px; overflow: hidden } .build-a-box .status-fill { height: 100%; background: #ead2c8; width: 0% } .build-a-box .warning { display: none; background: #fff0e4; color: #4a2f21; border: 1px solid #e9b995; padding: 12px 14px; margin-top: 12px; font-size: 13px; line-height: 1.5 } .build-a-box .warning.show { display: block } .build-a-box .holiday-callout { margin-top: 34px; background: linear-gradient(135deg, var(--christmas), #4f1718 55%, var(--evergreen)); color: #fffdf8; border: 1px solid rgba(255, 255, 255, .16); display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: center; padding: 28px; box-shadow: var(--shadow) } .build-a-box .holiday-callout h2 { font-size: 42px; line-height: 1; margin: 10px 0 12px } .build-a-box .holiday-callout p { color: #f3e9df; line-height: 1.75 } .build-a-box .holiday-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px } .build-a-box .holiday-thumbs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid rgba(255, 255, 255, .22) } @media(max-width:1180px) { .build-a-box .builder-grid { grid-template-columns: 1fr } .build-a-box .summary-card { position: static } .build-a-box .market-grid { grid-template-columns: repeat(3, 1fr) } .build-a-box .build-steps { position: static } .build-a-box .holiday-callout { grid-template-columns: 1fr } .build-a-box .packaging-grid { grid-template-columns: 1fr } } @media(max-width:760px) { .build-a-box .stepper { grid-template-columns: 1fr 1fr } .build-a-box .panel { padding: 22px } .build-a-box .package-card { grid-template-columns: 90px 1fr } .build-a-box .color-grid, .build-a-box .market-grid, .build-a-box .note-grid { grid-template-columns: 1fr } .build-a-box .holiday-thumbs { grid-template-columns: repeat(2, 1fr) } .build-a-box .panel-head { flex-direction: column; align-items: flex-start } .build-a-box .page-hero h1 { font-size: 44px } } /* --- Final customer-facing polish --- */ body.build-a-box { background: linear-gradient(180deg, #fbf8f3 0%, #fffdf8 42%, #f8efe7 100%) } .build-a-box .collection-hero, .build-a-box .page-hero { position: relative; overflow: hidden } .build-a-box .collection-hero:after, .build-a-box .page-hero:after { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: rgba(234, 216, 189, .34); pointer-events: none } .build-a-box .gift-card, .build-a-box .hero-feature, .build-a-box .help-card, .build-a-box .feature-tile, .build-a-box .muslin-card, .build-a-box .checkout-form, .build-a-box .checkout-summary, .build-a-box .panel, .build-a-box .summary-card { border-color: rgba(33, 27, 23, .10) } .build-a-box .gift-body h3, .build-a-box .gift-body h4 { letter-spacing: -.03em } .build-a-box .gift-body p, .build-a-box .hero-feature-copy p, .build-a-box .feature-tile-copy p, .build-a-box .help-card p, .build-a-box .muslin-body p, .build-a-box .checkout-copy p { font-size: 14px } .build-a-box .card-actions .btn, .build-a-box .muslin-body .btn { width: 100% } .build-a-box .inside-list { background: linear-gradient(180deg, #fffaf4, #fbf3ec) } .build-a-box .checkout-section { border-top: 1px solid rgba(255, 255, 255, .10) } .build-a-box .checkout-form { box-shadow: 0 18px 50px rgba(0, 0, 0, .12) } .build-a-box .checkout-summary { border-radius: 0 } .build-a-box .checkout-note strong { color: #fffdf8 } .build-a-box .footer { background: #211b17; color: #efe3d8 } .build-a-box .studio-subnav a:hover, .build-a-box .bb-left a:hover, .build-a-box .bb-right a:hover { opacity: .72 } @media(max-width:760px) { .build-a-box .studio-subnav { gap: 18px } .build-a-box .bb-brand-main { font-size: 26px } .build-a-box .bb-brand-sub { letter-spacing: .22em } .build-a-box .collection-head h2, .build-a-box .category-head h3 { font-size: 34px } } /* --- Holiday image update with selected editorial artwork --- */ .build-a-box .holiday-callout .holiday-thumbs { grid-template-columns: repeat(6, 1fr) !important } .build-a-box .holiday-callout .holiday-thumbs img { aspect-ratio: 1/1; object-fit: cover } @media(max-width:760px) { .build-a-box .holiday-callout .holiday-thumbs { grid-template-columns: repeat(2, 1fr) !important } } /* .color-palette-video-naming-convention table { width: 100%; border-collapse: collapse; background: #fffdf8; border: 1px solid var(--line) } .color-palette-video-naming-convention td, .color-palette-video-naming-convention th { border-bottom: 1px solid var(--line); padding: 12px; text-align: left } .color-palette-video-naming-convention code { font-family: monospace; background: #f6eee4; padding: 4px 7px; border-radius: 7px } */