/* Agora Marketplace — sibling brand to Appearance. Inherits all --ap-* tokens, adds Agora-specific --ag-* layer. Differentiator: editorial serif display + warm parchment alt-bg. */ @import url('appearance-tokens.css'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap'); :root { /* Agora ink — slightly warmer than --ap-fg, less harsh than pure black */ --ag-ink: #0E0D0C; --ag-ink-2: #2B2826; --ag-paper: #FAFAFA; /* clean off-white alt-bg (was warm parchment) */ --ag-paper-2: #F4F4F4; --ag-bone: #F8F8F8; /* clean near-white (was cream) */ --ag-line: #1A1A1A; /* hairline on light hero */ --ag-line-soft: rgba(14,13,12,0.12); /* Accent: keep --ap-red as the only saturated color, used as "commitment" */ --ag-red: var(--ap-red); /* Editorial serif display */ --ag-font-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif; --ag-font-sans: var(--ap-font-sans); --ag-font-mono: var(--ap-font-mono); /* Subtle gold-bronze for ornament — used sparingly (icon mark only) */ --ag-bronze: #8B6A3E; /* Layout */ --ag-shell-max: 1440px; --ag-nav-h: 64px; --ag-nav-sub-h: 44px; /* Surfaces & contrast pairs (used so dark theme can flip cleanly) */ --ag-surface: #FFFFFF; /* cards, popovers, search button */ --ag-surface-2: var(--ag-bone); /* secondary surface */ --ag-on-ink: #FFFFFF; /* text on --ag-ink fills */ --ag-header-bg: rgba(255,255,255,0.92); --ag-heart-bg: rgba(255,255,255,0.92); --ag-tile-wm: rgba(255,255,255,0.55); } /* ============================================================ DARK + PLUM THEME — charcoal with a subtle wine warmth. Activated by [data-theme="dark-plum"] on . Lifted off pure black (Apple-style) so the eye can rest; warm-cool neutrals carry the Appearance brand DNA, the slight wine tint is the only "plum" reference. STRATEGY: --ag-ink stays DARK in both themes (it's a *fill*). Body text + secondary text flip via --ap-fg / --ag-ink-2. Surfaces (cards, parchment) flip via --ag-surface / --ag-paper / --ag-bone. ============================================================ */ [data-theme="dark-plum"] { /* Page neutrals — elevated charcoal with a faint wine-warm undertone */ --ap-bg: #1A1719; --ap-bg-2: #221F22; --ap-bg-3: #2B282B; --ap-bg-4: #353136; --ap-fg: #F2EEF0; /* primary text color */ --ap-fg-2: #DDD8DB; --ap-fg-muted: #ADA6AC; --ap-fg-faint: #7B757A; --ap-border: #2D292E; --ap-border-strong: #F2EEF0; /* Agora layer — ink stays dark with a subtle wine tint */ --ag-ink: #0E0B10; --ag-ink-2: #DDD8DB; /* FLIPS — secondary text becomes light */ --ag-paper: #221E23; /* parchment moments → wine-charcoal */ --ag-paper-2: #2B262C; --ag-bone: #251F26; /* near-white surface → wine-charcoal */ --ag-line: #F2EEF0; --ag-line-soft: rgba(242,238,240,0.10); --ag-bronze: #C29F5F; /* Surface/contrast tokens flip */ --ag-surface: #221F23; --ag-surface-2: #2A262B; --ag-on-ink: #FBF9F5; /* stays light — it's text on --ag-ink */ --ag-header-bg: rgba(26,23,25,0.86); --ag-heart-bg: rgba(45,40,45,0.85); --ag-tile-wm: rgba(255,255,255,0.30); color-scheme: dark; } html { transition: background-color 240ms var(--ap-ease), color 240ms var(--ap-ease); } body { transition: background-color 240ms var(--ap-ease), color 240ms var(--ap-ease); } /* ----- BODY DEFAULTS ----- */ html, body { background: var(--ap-bg); color: var(--ap-fg); } body { font-family: var(--ag-font-sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } /* ----- AGORA TYPE ----- */ /* Reset Appearance's all-caps default on raw h1/h2/h3 — Agora uses serifs mixed-case. The Agora ag-h1/ag-h2/ag-h3 classes re-impose uppercase explicitly where wanted. */ h1, h2, h3, h4, h5, h6 { text-transform: none; letter-spacing: normal; font-weight: 400; font-family: var(--ag-font-sans); } /* Serif display — used for editorial moments only (hero, section openers) */ .ag-serif { font-family: var(--ag-font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.005em; line-height: 1.02; } .ag-serif-up { font-family: var(--ag-font-serif); font-weight: 500; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; } .ag-display { /* huge editorial serif */ font-family: var(--ag-font-serif); font-weight: 400; font-style: italic; font-size: clamp(64px, 9vw, 144px); line-height: 0.95; letter-spacing: -0.015em; } /* Tracked all-caps — inherited family feel from Appearance */ .ag-eyebrow { font-family: var(--ag-font-sans); font-size: 10px; letter-spacing: 0.20em; font-weight: 600; text-transform: uppercase; color: var(--ap-fg-muted); } .ag-eyebrow-ink { font-family: var(--ag-font-sans); font-size: 11px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; color: var(--ap-fg); } .ag-h1 { font-family: var(--ag-font-sans); font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; } .ag-h2 { font-family: var(--ag-font-sans); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .ag-h3 { font-family: var(--ag-font-sans); font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; } .ag-label { font-family: var(--ag-font-sans); font-size: 11px; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; } .ag-mono { font-family: var(--ag-font-mono); font-variant-numeric: tabular-nums; } .ag-num { font-family: var(--ag-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ----- BUTTONS ----- */ .ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; font-family: var(--ag-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--ag-ink); background: var(--ag-ink); color: var(--ag-on-ink); border-radius: 2px; cursor: pointer; transition: background var(--ap-dur) var(--ap-ease), color var(--ap-dur) var(--ap-ease), border-color var(--ap-dur) var(--ap-ease), transform var(--ap-dur-fast) var(--ap-ease); } .ag-btn:hover { filter: brightness(0.85); } .ag-btn:active { transform: scale(0.98); } .ag-btn--ghost { background: transparent; color: var(--ap-fg); border-color: var(--ap-border-strong); } .ag-btn--ghost:hover { background: var(--ag-ink); color: var(--ag-on-ink); border-color: var(--ag-ink); } .ag-btn--red { background: var(--ag-red); border-color: var(--ag-red); color: #fff; } .ag-btn--red:hover { background: var(--ap-red-deep); border-color: var(--ap-red-deep); } .ag-btn--sm { height: 32px; padding: 0 14px; font-size: 10px; } .ag-btn--lg { height: 52px; padding: 0 28px; font-size: 12px; } .ag-btn--block { width: 100%; } /* ----- LINKS ----- */ .ag-link { color: var(--ap-fg); text-decoration: none; cursor: pointer; } .ag-link:hover { color: var(--ag-red); } .ag-link-underline { border-bottom: 1px solid currentColor; padding-bottom: 1px; } /* ----- CHIPS / PILLS ----- */ .ag-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--ap-border); background: var(--ag-surface); color: var(--ap-fg); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: border-color var(--ap-dur) var(--ap-ease), background var(--ap-dur) var(--ap-ease); } .ag-chip:hover { border-color: var(--ag-ink); } .ag-chip--active { background: var(--ag-ink); color: var(--ag-on-ink); border-color: var(--ag-ink); } .ag-chip--ghost { background: transparent; } .ag-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; background: var(--ag-ink); color: var(--ag-on-ink); } .ag-tag--red { background: var(--ag-red); color: #fff; } .ag-tag--bone { background: var(--ag-bone); color: var(--ag-ink); border: 1px solid var(--ap-border); } .ag-tag--auth { background: var(--ag-surface); color: var(--ag-ink); border: 1px solid var(--ag-ink); } /* ----- CARDS ----- */ .ag-card { background: var(--ag-surface); border: 1px solid var(--ap-border); border-radius: 8px; overflow: hidden; transition: border-color var(--ap-dur) var(--ap-ease), transform var(--ap-dur) var(--ap-ease); } .ag-card:hover { border-color: var(--ag-ink); } .ag-card--flush { border: 0; border-radius: 0; } /* Product image tile — gradient-based placeholder */ .ag-tile { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--ag-bone); } .ag-tile--sq { aspect-ratio: 1 / 1; } .ag-tile__wm { /* faint brand wordmark over the tile */ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ag-font-serif); font-style: italic; font-size: 56px; line-height: 1; color: var(--ag-tile-wm); letter-spacing: -0.02em; user-select: none; mix-blend-mode: overlay; pointer-events: none; } .ag-tile__top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; z-index: 2; } .ag-tile__bot { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; } .ag-heart { width: 32px; height: 32px; border-radius: 9999px; background: var(--ag-heart-bg); border: 1px solid var(--ap-border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--ap-dur) var(--ap-ease); } .ag-heart:hover { background: var(--ag-surface); } .ag-heart--active svg { fill: var(--ag-red); stroke: var(--ag-red); } /* ----- INPUTS ----- */ .ag-input { height: 44px; padding: 0 14px; width: 100%; border: 1px solid var(--ap-border); background: var(--ag-surface); font-family: var(--ag-font-sans); font-size: 14px; color: var(--ap-fg); border-radius: 2px; outline: none; transition: border-color var(--ap-dur) var(--ap-ease); } .ag-input:focus { border-color: var(--ag-ink); } .ag-input::placeholder { color: var(--ap-fg-faint); } .ag-input--bare { border: 0; border-bottom: 1px solid var(--ap-border); padding-left: 0; border-radius: 0; } .ag-input--bare:focus { border-bottom-color: var(--ag-ink); } /* ----- DIVIDERS ----- */ .ag-rule { height: 1px; background: var(--ap-border); width: 100%; } .ag-rule--ink { background: var(--ag-ink); height: 1px; } .ag-rule--vert { width: 1px; background: var(--ap-border); align-self: stretch; } /* ----- BADGES ----- */ .ag-dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--ag-red); display: inline-block; } .ag-dot--ink { background: var(--ag-ink); } .ag-dot--ok { background: var(--ap-success); } /* ----- ROUTE LINE (intercontinental motif) ----- */ .ag-route { display: flex; align-items: center; gap: 10px; font-family: var(--ag-font-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ap-fg-muted); font-weight: 600; } .ag-route__dash { flex: 1; height: 1px; min-width: 24px; background-image: linear-gradient(to right, currentColor 50%, transparent 50%); background-size: 5px 1px; background-repeat: repeat-x; opacity: 0.5; } .ag-route__arrow::before { content: '→'; font-family: var(--ag-font-serif); font-style: italic; font-size: 13px; } /* ----- LOGO MARK ----- */ .ag-mark { /* Agora wordmark: serif italic "agora" with a slim circle dot */ font-family: var(--ag-font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: inherit; } /* ----- SHELL ----- */ .ag-shell { max-width: var(--ag-shell-max); margin: 0 auto; padding: 0 32px; } .ag-shell--wide { max-width: 1680px; } .ag-section { padding: 80px 0; } .ag-section--sm { padding: 56px 0; } .ag-section--lg { padding: 120px 0; } .ag-section--paper { background: var(--ag-paper); } .ag-section--ink { background: var(--ag-ink); color: var(--ag-bone); } /* Scrollbar-friendly subtle scroll for inner panes */ .ag-scroll { overflow-y: auto; } .ag-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .ag-scroll::-webkit-scrollbar-thumb { background: var(--ap-bg-4); border-radius: 9999px; } .ag-scroll::-webkit-scrollbar-track { background: transparent; } /* Animations */ @keyframes ag-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ag-fade-in { animation: ag-fade-in var(--ap-dur-slow) var(--ap-ease) both; } @keyframes ag-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .ag-skel { background: linear-gradient(90deg, var(--ap-bg-3) 0%, var(--ap-bg-2) 50%, var(--ap-bg-3) 100%); background-size: 400px 100%; animation: ag-shimmer 1.6s linear infinite; } /* utility */ .ag-flex { display: flex; } .ag-col { display: flex; flex-direction: column; } .ag-grow { flex: 1; } .ag-center { display: flex; align-items: center; justify-content: center; } .ag-between { display: flex; justify-content: space-between; align-items: center; } .ag-gap-1 { gap: 4px; } .ag-gap-2 { gap: 8px; } .ag-gap-3 { gap: 12px; } .ag-gap-4 { gap: 16px; } .ag-gap-6 { gap: 24px; } .ag-gap-8 { gap: 40px; } .ag-muted { color: var(--ap-fg-muted); } .ag-faint { color: var(--ap-fg-faint); } .ag-red { color: var(--ag-red); } .ag-ink { color: var(--ag-ink); } .ag-strike { text-decoration: line-through; color: var(--ap-fg-faint); } .ag-nowrap { white-space: nowrap; }