/* ═══════════════════════════════════════════════════ sunedaze-brand.css — Agent 6 (Sunedaze Social) ───────────────────────────────────────────────── Cohesive Caribbean-but-upscale visual language. Think Soho House Miami × Necker Island × Acanto Naples. Warm, confident, made-of-the-island-not-decorated-with-it. Loaded GLOBALLY from alongside the existing inline :root tokens — these tokens live in their own --sd-* namespace so they never collide with the Todo Culebra --c-* design language. ═══════════════════════════════════════════════════ */ /* Photography direction: - Always natural/ambient light (no flash) - People in mid-conversation, not posed - Wide shots with negative space at top (room for title overlay) - Color palette: warm sun tones + ocean blues, never over-saturated - Real Culebra/Vieques locations, never generic stock-tropical - Faces visible but candid, not direct-to-camera */ /* DM Serif Display for big titles. Inter inherited from existing --font-ui (DM Sans is loaded already; we also bring in Inter for the social UI which reads more "app" than the marketing surface). */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700;800;900&display=swap'); :root { /* ── Surfaces ── */ --sd-ink: #0a0e1a; /* near-black background */ --sd-paper: #f5ede0; /* warm off-white for surfaces */ --sd-sand: #e8d7b8; /* soft sand */ --sd-card: rgba(255,255,255,0.04); --sd-card-hover: rgba(255,255,255,0.08); --sd-border: rgba(240,236,228,0.12); --sd-overlay: rgba(10,14,26,0.85); /* ── Accent palette ── */ --sd-coral: #ff6b4a; /* energetic coral (accents, CTAs) */ --sd-coral-dim: #e0573a; --sd-aqua: #00b8a9; /* shallow-water teal */ --sd-deep: #1a4d6e; /* deep ocean */ --sd-sunset: #ff8c42; /* warm sunset orange */ /* ── Text ── */ --sd-text: #f0ece4; /* primary text on dark */ --sd-muted: rgba(240,236,228,0.6); --sd-faint: rgba(240,236,228,0.35); /* ── Type ── */ --sd-display: 'DM Serif Display', Georgia, serif; --sd-ui: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif; /* ── Spacing scale ── */ --sd-s1: 4px; --sd-s2: 8px; --sd-s3: 12px; --sd-s4: 16px; --sd-s5: 24px; --sd-s6: 32px; --sd-s7: 48px; /* ── Radii ── */ --sd-r1: 8px; --sd-r2: 12px; --sd-r3: 16px; --sd-r4: 24px; --sd-r-full: 999px; /* ── Shadows ── */ --sd-shadow-sm: 0 2px 8px rgba(0,0,0,0.18); --sd-shadow-md: 0 8px 28px rgba(0,0,0,0.32); --sd-shadow-lg: 0 22px 60px rgba(0,0,0,0.5); /* ── Motion ── */ --sd-ease: cubic-bezier(0.4, 0, 0.2, 1); --sd-fast: 180ms; --sd-med: 280ms; } /* ── Base utility classes (only used INSIDE Sunedaze panels; scoped via .sd- prefix so they never leak into the rest of the app) ── */ .sd-root { font-family: var(--sd-ui); color: var(--sd-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; } .sd-root * { box-sizing: border-box; } .sd-display { font-family: var(--sd-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; } .sd-tabular { font-variant-numeric: tabular-nums; } /* ── Buttons ── */ .sd-btn { appearance: none; border: none; cursor: pointer; font-family: var(--sd-ui); font-weight: 700; font-size: 14px; padding: 13px 18px; border-radius: var(--sd-r2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--sd-fast) var(--sd-ease), background var(--sd-fast) var(--sd-ease), opacity var(--sd-fast) var(--sd-ease); letter-spacing: 0.01em; } .sd-btn:focus-visible { outline: 2px solid var(--sd-coral); outline-offset: 2px; } .sd-btn:active { transform: scale(0.98); } .sd-btn-primary { background: var(--sd-coral); color: #fff; } .sd-btn-primary:hover { background: var(--sd-coral-dim); } .sd-btn-ghost { background: transparent; color: var(--sd-text); border: 1px solid var(--sd-border); } .sd-btn-ghost:hover { background: var(--sd-card-hover); } .sd-btn-cta { background: linear-gradient(135deg, var(--sd-coral), var(--sd-sunset)); color: #fff; padding: 16px 22px; font-size: 15px; box-shadow: 0 10px 28px rgba(255,107,74,0.32); } .sd-btn-cta:hover { filter: brightness(1.05); } .sd-btn-block { width: 100%; } /* ── Cards ── */ .sd-card { background: var(--sd-card); border: 1px solid var(--sd-border); border-radius: var(--sd-r3); overflow: hidden; transition: background var(--sd-fast) var(--sd-ease), transform var(--sd-fast) var(--sd-ease); } .sd-card-hover:hover { background: var(--sd-card-hover); } /* ── Pills / Chips ── */ .sd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--sd-r-full); background: rgba(255,255,255,0.10); color: var(--sd-text); backdrop-filter: blur(8px); } .sd-chip-coral { background: rgba(255,107,74,0.18); color: var(--sd-coral); } .sd-chip-aqua { background: rgba(0,184,169,0.18); color: var(--sd-aqua); } .sd-chip-sand { background: rgba(232,215,184,0.18); color: var(--sd-sand); } .sd-chip-glass { background: rgba(10,14,26,0.55); border: 1px solid rgba(255,255,255,0.18); } /* ── Overlay panel ── */ .sd-overlay { position: fixed; inset: 0; z-index: 9500; background: var(--sd-overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: sd-fade-in var(--sd-med) var(--sd-ease); } .sd-panel { background: var(--sd-ink); color: var(--sd-text); min-height: 100%; max-width: 720px; margin: 0 auto; position: relative; font-family: var(--sd-ui); } @keyframes sd-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sd-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Avatars + stacks ── */ .sd-avatar { border-radius: 50%; object-fit: cover; background: var(--sd-card); border: 2px solid var(--sd-ink); display: inline-block; } .sd-avatar-stack { display: inline-flex; } .sd-avatar-stack .sd-avatar { margin-left: -10px; } .sd-avatar-stack .sd-avatar:first-child { margin-left: 0; } /* ── Skeleton ── */ .sd-skel { background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%); background-size: 200% 100%; animation: sd-skel 1.4s ease infinite; border-radius: var(--sd-r1); } @keyframes sd-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Section headers ── */ .sd-section-h { font-family: var(--sd-display); font-size: 22px; line-height: 1.1; margin: 0 0 12px; padding: 0 18px; } .sd-section-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sd-muted); padding: 0 18px; margin-bottom: 6px; } /* ── Empty / loading states ── */ .sd-empty { text-align: center; padding: 32px 24px; color: var(--sd-muted); font-size: 14px; line-height: 1.5; } .sd-empty-title { font-family: var(--sd-display); font-size: 20px; color: var(--sd-text); margin-bottom: 8px; } /* ── Floating launch pill (FAB) ── */ .sd-launch-pill { position: fixed; right: 14px; z-index: 1700; background: linear-gradient(135deg, var(--sd-coral), var(--sd-sunset)); color: #fff; font-family: var(--sd-ui); font-weight: 800; font-size: 13px; padding: 12px 16px; border-radius: var(--sd-r-full); border: none; cursor: pointer; box-shadow: 0 14px 36px rgba(255,107,74,0.36); display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.02em; transition: transform var(--sd-fast) var(--sd-ease), box-shadow var(--sd-fast) var(--sd-ease); } .sd-launch-pill:hover { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(255,107,74,0.45); } .sd-launch-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ── Form fields ── */ .sd-input, .sd-textarea, .sd-select { width: 100%; background: var(--sd-card); border: 1px solid var(--sd-border); border-radius: var(--sd-r2); color: var(--sd-text); padding: 12px 14px; font-family: var(--sd-ui); font-size: 14px; transition: border-color var(--sd-fast) var(--sd-ease), background var(--sd-fast) var(--sd-ease); } .sd-input:focus, .sd-textarea:focus, .sd-select:focus { outline: none; border-color: var(--sd-coral); background: var(--sd-card-hover); } .sd-textarea { min-height: 100px; resize: vertical; line-height: 1.5; } .sd-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--sd-muted); margin-bottom: 6px; text-transform: uppercase; } /* ── Responsive ── */ @media (max-width: 480px) { .sd-section-h { font-size: 20px; padding: 0 14px; } .sd-section-eyebrow { padding: 0 14px; } }