/* ============================================================ LAYOUT VARIANTS — independent of color theme. Stored as data-layout="marketplace" or "editorial" on . Each one reorganizes the homepage with its own palette + spacing + structural choices for client concept review. ============================================================ */ /* Layout switcher chip slightly de-emphasized vs theme switcher so the two pills don't fight. */ .scs-layout-switcher .scs-theme-switcher__btn { border-style: dashed; } .scs-layout-switcher .scs-theme-switcher__btn svg:first-of-type { color: var(--scs-color-gold-bright); } /* ================================================================ LAYOUT A — MARKETPLACE Concept: utilitarian trade-floor / StockX-style. Compact hero, real product GRID instead of carousel, search-first, electric cyan accents on deep navy, Inter sans throughout. ================================================================ */ [data-layout="marketplace"] { --scs-color-bg: #0A1428; --scs-color-bg-deep: #050A18; --scs-color-bg-warm: #0F1D38; --scs-color-surface: #122441; --scs-color-surface-raised: #1A2F52; --scs-color-gold: #06B6D4; --scs-color-gold-bright: #67E8F9; --scs-color-gold-deep: #0E7490; --scs-color-gold-soft: rgba(6, 182, 212, 0.7); --scs-color-gold-hairline: rgba(103, 232, 249, 0.28); --scs-color-gold-glow: rgba(103, 232, 249, 0.3); --scs-color-text: #F1F5F9; --scs-color-text-muted: #94A3B8; --scs-color-text-dim: #64748B; --scs-color-crimson: #F97316; --scs-font-sans: "Inter", system-ui, sans-serif; --scs-font-display: "Inter", "Barlow", sans-serif; --scs-font-serif: "Inter", sans-serif; --scs-radius-sm: 4px; --scs-radius-md: 6px; --scs-radius-lg: 8px; --scs-header-bg: rgba(5, 10, 24, 0.92); --scs-header-bg-scrolled: rgba(5, 10, 24, 0.99); --scs-body-font-size: 15.5px; --scs-line-height: 1.55; --scs-display-letter: 0.02em; --scs-nav-letter: 0.08em; --scs-border-width: 1px; } /* Hero — compact, no flourish, big readable headline. */ [data-layout="marketplace"] .scs-hero { min-height: 48vh; } [data-layout="marketplace"] .scs-hero__title { font-family: "Inter", sans-serif !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-size: clamp(2.4rem, 5vw, 4rem) !important; text-transform: none !important; } [data-layout="marketplace"] .scs-hero__tagline { font-weight: 500; } [data-layout="marketplace"] .scs-hero__actions { margin-top: var(--scs-space-3); } /* Buttons — solid cyan, sharp corners. */ [data-layout="marketplace"] .scs-button { background-color: var(--scs-color-gold); color: #04111F; border: 0; border-radius: 6px; font-weight: 700; letter-spacing: 0.04em; text-transform: none; padding: 12px 22px; } [data-layout="marketplace"] .scs-button:hover { background-color: var(--scs-color-gold-bright); transform: translateY(-1px); } [data-layout="marketplace"] .scs-button--ghost { background: transparent; color: var(--scs-color-gold-bright); border: 1px solid var(--scs-color-gold); } /* Section titles — flat sans, no neon-tube. */ [data-layout="marketplace"] .scs-section-head__title { font-family: "Inter", sans-serif !important; font-weight: 800 !important; font-size: clamp(1.4rem, 2.4vw, 2rem) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #FFFFFF !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; padding: 0 !important; } [data-layout="marketplace"] .scs-section-head__title::before, [data-layout="marketplace"] .scs-section-head__title::after { display: none !important; } [data-layout="marketplace"] .scs-section-head { text-align: left; } [data-layout="marketplace"] .scs-section { padding: var(--scs-space-4) 0; } /* Convert auto-scrolling carousel into a static GRID for both Drops and Rare. The track simply wraps; pause animation. */ [data-layout="marketplace"] .scs-carousel { mask: none; -webkit-mask: none; overflow: visible; padding: 0; } [data-layout="marketplace"] .scs-carousel__track { animation: none !important; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--scs-space-3); } @media (min-width: 720px) { [data-layout="marketplace"] .scs-carousel__track { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { [data-layout="marketplace"] .scs-carousel__track { grid-template-columns: repeat(5, 1fr); } } [data-layout="marketplace"] .scs-carousel__item { width: 100%; } [data-layout="marketplace"] .scs-carousel__frame { aspect-ratio: 4/5; border-radius: 6px; } /* Trust band — orange info bar style. */ [data-layout="marketplace"] .scs-trust { background: linear-gradient(90deg, rgba(6,182,212,0.06), rgba(249,115,22,0.04)); border-color: rgba(103, 232, 249, 0.2); } [data-layout="marketplace"] .scs-trust__item svg { color: var(--scs-color-gold-bright); } /* Category tiles — flat outlined, no atom. Hides orbits/nucleus. */ [data-layout="marketplace"] .scs-category-tile { background: var(--scs-color-surface); box-shadow: inset 0 0 0 1px var(--scs-color-gold-hairline); aspect-ratio: 5 / 2; } [data-layout="marketplace"] .scs-category-tile__orbit, [data-layout="marketplace"] .scs-category-tile__nucleus, [data-layout="marketplace"] .scs-category-tile::after { display: none !important; } [data-layout="marketplace"] .scs-category-tile__label { font-family: "Inter", sans-serif !important; font-weight: 700 !important; color: var(--scs-color-gold-bright) !important; background: transparent !important; -webkit-text-stroke: 0 !important; filter: none !important; animation: none !important; font-size: clamp(0.9rem, 1.6vw, 1.3rem) !important; } [data-layout="marketplace"] .scs-category-tile:hover { box-shadow: inset 0 0 0 1px var(--scs-color-gold), 0 8px 24px rgba(6, 182, 212, 0.18); } /* Sold ticker — slim, white-on-dark utilitarian bar. */ [data-layout="marketplace"] .scs-ticker { background: var(--scs-color-bg-deep); border-color: rgba(103, 232, 249, 0.22); padding: 6px 0; } [data-layout="marketplace"] .scs-ticker__label { background: var(--scs-color-gold); color: #04111F; border: 0; } /* Chips — square, outlined cyan. */ [data-layout="marketplace"] .scs-chip { border-radius: 4px; border: 1px solid var(--scs-color-gold-hairline); background: var(--scs-color-surface); color: var(--scs-color-text); font-weight: 600; text-transform: none; letter-spacing: 0; } [data-layout="marketplace"] .scs-chip:hover { background: var(--scs-color-gold); border-color: var(--scs-color-gold); color: #04111F; transform: none; } /* Hide more decorative sections in marketplace concept — keeps the page conversion-focused. */ [data-layout="marketplace"] .scs-showcase, [data-layout="marketplace"] .scs-rarity, [data-layout="marketplace"] .scs-own::before { display: none !important; } [data-layout="marketplace"] .scs-newsletter__panel { border-radius: 8px; border: 1px solid var(--scs-color-gold-hairline); } /* ================================================================ LAYOUT B — EDITORIAL Concept: cream magazine spread. Numbered chapter sections, serif typography, wider gutters, big quotes, slow reading pace. Ivory bg + burgundy accent + black text. ================================================================ */ [data-layout="editorial"] { --scs-color-bg: #F4EEE0; --scs-color-bg-deep: #E8E0CD; --scs-color-bg-warm: #FAF5E8; --scs-color-surface: #FFFFFF; --scs-color-surface-raised: #FFFFFF; --scs-color-gold: #7A1F1F; --scs-color-gold-bright: #A82F2F; --scs-color-gold-deep: #451212; --scs-color-gold-soft: rgba(122, 31, 31, 0.65); --scs-color-gold-hairline: rgba(28, 23, 18, 0.18); --scs-color-gold-glow: rgba(122, 31, 31, 0.16); --scs-color-text: #1B1410; --scs-color-text-muted: #5C4E40; --scs-color-text-dim: #8E7E6B; --scs-color-crimson: #7A1F1F; --scs-font-sans: "EB Garamond", Georgia, serif; --scs-font-display: "Playfair Display", "EB Garamond", serif; --scs-font-serif: "EB Garamond", Georgia, serif; --scs-radius-sm: 0; --scs-radius-md: 0; --scs-radius-lg: 0; --scs-header-bg: rgba(244, 238, 224, 0.96); --scs-header-bg-scrolled: rgba(232, 224, 205, 0.99); --scs-body-font-size: 18px; --scs-line-height: 1.78; --scs-display-letter: 0.01em; --scs-nav-letter: 0.18em; --scs-border-width: 1px; } /* Header — quieter, no backdrop blur (magazine doesn't need it). */ [data-layout="editorial"] .scs-site-header { border-bottom: 2px solid #1B1410; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-layout="editorial"] .scs-site-header__menubar { background: transparent; border-color: var(--scs-color-gold-hairline); } /* Hero — full-bleed editorial cover. */ [data-layout="editorial"] .scs-hero { min-height: 88vh; background-color: var(--scs-color-bg); } [data-layout="editorial"] .scs-hero__title { font-family: "Playfair Display", Georgia, serif !important; font-style: italic !important; font-weight: 700 !important; font-size: clamp(3rem, 9vw, 7rem) !important; letter-spacing: -0.02em !important; line-height: 1 !important; text-transform: none !important; color: #FFFFFF !important; text-shadow: 0 2px 24px rgba(0,0,0,0.7) !important; } [data-layout="editorial"] .scs-hero__tagline { font-style: italic; font-size: 1.3rem; letter-spacing: 0.02em; max-width: 36ch; } /* Section titles — large numbered chapters. The number sits as eyebrow above the title, both flush-left for editorial flow. */ [data-layout="editorial"] .scs-section-head { text-align: left; counter-increment: scs-chapter; } [data-layout="editorial"] .scs-home { counter-reset: scs-chapter; } [data-layout="editorial"] .scs-section-head__title { font-family: "Playfair Display", serif !important; font-style: italic !important; font-weight: 700 !important; font-size: clamp(2.2rem, 5vw, 3.6rem) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #1B1410 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; padding: 0 !important; display: block; position: relative; padding-top: 0.4em !important; } [data-layout="editorial"] .scs-section-head__title::before { content: "— Ch. " counter(scs-chapter, decimal-leading-zero); display: block; font-family: "EB Garamond", serif; font-style: normal; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--scs-color-gold); margin-bottom: 0.6em; background: none; position: static; width: auto; height: auto; } [data-layout="editorial"] .scs-section-head__title::after { display: none !important; } [data-layout="editorial"] .scs-section { padding: var(--scs-space-7) 0; border-top: 1px solid var(--scs-color-gold-hairline); } /* Body text — serif, generous leading. */ [data-layout="editorial"] body.scs-body { color: #1B1410; } [data-layout="editorial"] .scs-rarity__lead { font-family: "Playfair Display", serif !important; font-style: italic !important; font-size: clamp(1.4rem, 2.8vw, 2.2rem) !important; max-width: 24ch; margin: 0 auto; color: #1B1410 !important; line-height: 1.3 !important; } /* Buttons — bordered serif with letter-spacing. */ [data-layout="editorial"] .scs-button { background: transparent; color: #1B1410; border: 1px solid #1B1410; border-radius: 0; font-family: "EB Garamond", serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 14px 28px; } [data-layout="editorial"] .scs-button:hover { background: #1B1410; color: #F4EEE0; } [data-layout="editorial"] .scs-button--gold { background: var(--scs-color-gold); color: #FAF5E8; border-color: var(--scs-color-gold); } [data-layout="editorial"] .scs-button--gold:hover { background: #1B1410; border-color: #1B1410; } /* Carousels keep auto-scroll but on cream background — render product cards as polaroid frames with thin black border. */ [data-layout="editorial"] .scs-carousel { mask: none; -webkit-mask: none; } [data-layout="editorial"] .scs-carousel__frame { background: #FFFFFF; border: 1px solid #1B1410; box-shadow: 0 6px 18px rgba(0,0,0,0.18); border-radius: 0; } [data-layout="editorial"] .scs-carousel__title { color: #1B1410; font-style: italic; font-family: "Playfair Display", serif; } [data-layout="editorial"] .scs-carousel__price { color: #7A1F1F; font-family: "EB Garamond", serif; } /* Category tiles — simplified text-only with full-bleed serif label. */ [data-layout="editorial"] .scs-category-tile { background: #FFFFFF; box-shadow: inset 0 0 0 1px #1B1410; aspect-ratio: 5 / 3; } [data-layout="editorial"] .scs-category-tile__orbit, [data-layout="editorial"] .scs-category-tile__nucleus, [data-layout="editorial"] .scs-category-tile::after { display: none !important; } [data-layout="editorial"] .scs-category-tile__label { font-family: "Playfair Display", serif !important; font-style: italic !important; font-weight: 700 !important; color: #1B1410 !important; background: transparent !important; -webkit-text-stroke: 0 !important; filter: none !important; animation: none !important; font-size: clamp(1.2rem, 2vw, 1.7rem) !important; } [data-layout="editorial"] .scs-category-tile:hover { background: #1B1410; box-shadow: inset 0 0 0 1px #1B1410, 0 12px 28px rgba(0,0,0,0.25); } [data-layout="editorial"] .scs-category-tile:hover .scs-category-tile__label { color: #F4EEE0 !important; } /* Trust band — minimal serif row. */ [data-layout="editorial"] .scs-trust { background: var(--scs-color-bg-warm); border-color: var(--scs-color-gold-hairline); } [data-layout="editorial"] .scs-trust__item { font-family: "EB Garamond", serif; } [data-layout="editorial"] .scs-trust__item strong { color: #1B1410; font-family: "EB Garamond", serif; font-weight: 600; } [data-layout="editorial"] .scs-trust__item small { color: var(--scs-color-text-muted); } [data-layout="editorial"] .scs-trust__item svg { color: var(--scs-color-gold); } /* Sold ticker — italic typewriter feel. */ [data-layout="editorial"] .scs-ticker { background: var(--scs-color-bg); border-color: var(--scs-color-gold-hairline); } [data-layout="editorial"] .scs-ticker__label { background: #1B1410; color: #F4EEE0; border: 0; font-family: "EB Garamond", serif; } [data-layout="editorial"] .scs-ticker__name { color: #1B1410; font-family: "Playfair Display", serif; font-style: italic; } [data-layout="editorial"] .scs-ticker__city { color: var(--scs-color-text-muted); } /* Chips — typographic links instead of pills. */ [data-layout="editorial"] .scs-chips__row { gap: var(--scs-space-3); } [data-layout="editorial"] .scs-chip { background: transparent; color: #1B1410; border: 0; border-bottom: 1px solid var(--scs-color-gold-hairline); border-radius: 0; padding: 6px 4px; font-family: "EB Garamond", serif; font-style: italic; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: none; } [data-layout="editorial"] .scs-chip:hover { background: transparent; color: var(--scs-color-gold); border-bottom-color: var(--scs-color-gold); transform: none; } /* Showcase — flip the layout so card is on left, copy on right. */ [data-layout="editorial"] .scs-showcase__grid { grid-template-columns: 1fr 1fr; } [data-layout="editorial"] .scs-showcase__copy { order: 2; padding-left: var(--scs-space-4); } [data-layout="editorial"] .scs-showcase__card { order: 1; } [data-layout="editorial"] .scs-showcase__title { font-style: italic !important; } /* Partners — flush-left wordmark list, no boxes. */ [data-layout="editorial"] .scs-partners { background: transparent; border-color: var(--scs-color-gold-hairline); } [data-layout="editorial"] .scs-partners__row { justify-content: flex-start; } [data-layout="editorial"] .scs-partners__logo { font-family: "Playfair Display", serif !important; font-style: italic; letter-spacing: 0.06em; color: #1B1410 !important; border: 0 !important; background: transparent !important; font-size: 1.6rem; opacity: 0.6; } [data-layout="editorial"] .scs-partners__logo:hover { color: var(--scs-color-gold) !important; opacity: 1; } /* Upcoming Drops — newspaper-table style. */ [data-layout="editorial"] .scs-upcoming__grid { grid-template-columns: 1fr; gap: 0; } [data-layout="editorial"] .scs-upcoming__card { background: transparent; border: 0; border-top: 1px solid var(--scs-color-gold-hairline); border-radius: 0; padding: var(--scs-space-4) var(--scs-space-3); display: grid; grid-template-columns: 80px 1fr auto; gap: var(--scs-space-3); align-items: center; } [data-layout="editorial"] .scs-upcoming__card:last-child { border-bottom: 1px solid var(--scs-color-gold-hairline); } [data-layout="editorial"] .scs-upcoming__date { background: transparent; border: 0; padding: 0; } [data-layout="editorial"] .scs-upcoming__day { color: #1B1410; font-family: "Playfair Display", serif; } [data-layout="editorial"] .scs-upcoming__month { color: var(--scs-color-gold); } [data-layout="editorial"] .scs-upcoming__title { font-family: "Playfair Display", serif !important; font-style: italic; font-weight: 700; color: #1B1410 !important; font-size: 1.4rem !important; } [data-layout="editorial"] .scs-upcoming__note { color: var(--scs-color-text-muted); font-style: italic; } [data-layout="editorial"] .scs-upcoming__tag { position: static; background: #1B1410; color: #F4EEE0; border: 0; } [data-layout="editorial"] .scs-upcoming__countdown { border: 0; padding-top: 0; color: var(--scs-color-gold); font-family: "EB Garamond", serif; font-style: italic; } /* Testimonials — pull-quote treatment. */ [data-layout="editorial"] .scs-testimonials__card { background: transparent; border: 0; border-left: 4px solid var(--scs-color-gold); border-radius: 0; padding-left: var(--scs-space-4); } [data-layout="editorial"] .scs-testimonials__card::before { display: none; } [data-layout="editorial"] .scs-testimonials__quote { font-family: "Playfair Display", serif; font-size: 1.3rem !important; color: #1B1410; } [data-layout="editorial"] .scs-testimonials__cite strong { color: #1B1410; font-family: "EB Garamond", serif; font-style: italic; } /* Community columns — newspaper rule lines. */ [data-layout="editorial"] .scs-community__col { background: transparent; border: 0; border-right: 1px solid var(--scs-color-gold-hairline); border-radius: 0; padding: var(--scs-space-3) var(--scs-space-4) 0 0; } [data-layout="editorial"] .scs-community__col:last-child { border-right: 0; padding-right: 0; } [data-layout="editorial"] .scs-community__heading { font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; color: #1B1410 !important; border-bottom: 2px solid #1B1410; } [data-layout="editorial"] .scs-community__post-title { color: #1B1410 !important; font-family: "Playfair Display", serif; font-style: italic; } [data-layout="editorial"] .scs-community__map { filter: grayscale(100%) contrast(1.05); } /* Newsletter — manuscript card. */ [data-layout="editorial"] .scs-newsletter__panel { background: var(--scs-color-bg-warm); border: 1px solid #1B1410; border-radius: 0; box-shadow: 8px 8px 0 #1B1410; } [data-layout="editorial"] .scs-newsletter__title { font-style: italic !important; color: #1B1410 !important; } [data-layout="editorial"] .scs-newsletter__eyebrow { color: var(--scs-color-gold); } [data-layout="editorial"] .scs-newsletter__form input[type="email"] { background: #FFFFFF; border: 1px solid #1B1410; border-radius: 0; color: #1B1410; } /* Own the Rare — book endpaper. */ [data-layout="editorial"] .scs-own::before { display: none; } [data-layout="editorial"] .scs-own .scs-section-head__title { font-style: italic; color: #1B1410 !important; text-shadow: none !important; } [data-layout="editorial"] .scs-own__letter { text-shadow: none !important; } [data-layout="editorial"] .scs-own.is-visible .scs-own__letter { text-shadow: none !important; } [data-layout="editorial"] .scs-own__body { color: var(--scs-color-text-muted); font-style: italic; } /* Atom-tile per-theme orbit hides only when the layout overrides the tile look (already done above). */ /* Hide the ticker label dot pulse to fit editorial calm. */ [data-layout="editorial"] .scs-ticker__dot { animation: none; opacity: 0.6; background: var(--scs-color-gold); }