/** * Spacetime Component Themes * * Switch themes with: * Available: neo-brutalist, (more coming) */ /* ============================================================================= NEO-BRUTALIST THEME High contrast, sharp edges, bold shadows, mechanical feel ============================================================================= */ [data-theme="neo-brutalist"] { /* Colors: High contrast, no gradients */ --st-bg: #ffffff; --st-bg-surface: #f0f0f0; --st-bg-surface-hover: #e5e5e5; --st-text: #000000; --st-text-muted: #333333; --st-text-subtle: #555555; --st-accent: #ff0000; --st-accent-light: #ff3333; --st-accent-glow: transparent; --st-accent-gradient: #ff0000; --st-border: #000000; --st-border-accent: #ff0000; /* Sharp edges - zero radius everywhere */ --st-radius-sm: 0; --st-radius-md: 0; --st-radius-lg: 0; --st-radius-xl: 0; --st-radius-full: 0; /* Typography: Heavier, more industrial */ --st-font-sans: "Inter", "Helvetica Neue", "Arial Black", system-ui, sans-serif; } /* Hero overrides */ [data-theme="neo-brutalist"] .st-hero { background: var(--st-bg); } [data-theme="neo-brutalist"] .st-hero__badge { border: 2px solid var(--st-text); background: transparent; color: var(--st-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; } [data-theme="neo-brutalist"] .st-hero__title { text-transform: uppercase; letter-spacing: -0.02em; font-weight: 900; } [data-theme="neo-brutalist"] .st-hero__subtitle { font-weight: 500; max-width: 600px; } /* Card overrides - hard shadow style */ [data-theme="neo-brutalist"] .st-card { border: 3px solid var(--st-border); box-shadow: 6px 6px 0 var(--st-border); background: var(--st-bg); transition: box-shadow 0.1s linear, transform 0.1s linear; } [data-theme="neo-brutalist"] .st-card:hover { box-shadow: 8px 8px 0 var(--st-border); transform: translate(-2px, -2px); } [data-theme="neo-brutalist"] .st-card__title { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } [data-theme="neo-brutalist"] .st-card__icon { background: var(--st-accent); color: white; border: 2px solid var(--st-border); } /* CTA Button overrides */ [data-theme="neo-brutalist"] .st-cta { border: 3px solid var(--st-text); box-shadow: 4px 4px 0 var(--st-text); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; background: var(--st-accent); color: white; transition: box-shadow 0.1s linear, transform 0.1s linear; } [data-theme="neo-brutalist"] .st-cta:hover { box-shadow: 6px 6px 0 var(--st-text); transform: translate(-2px, -2px); } [data-theme="neo-brutalist"] .st-cta:active { box-shadow: 2px 2px 0 var(--st-text); transform: translate(2px, 2px); } [data-theme="neo-brutalist"] .st-cta[data-variant="secondary"], [data-theme="neo-brutalist"] .st-cta[data-variant="ghost"] { background: transparent; color: var(--st-text); } /* Section overrides */ [data-theme="neo-brutalist"] .st-section__tag { border: 2px solid var(--st-text); background: var(--st-accent); color: white; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } [data-theme="neo-brutalist"] .st-section__title { text-transform: uppercase; font-weight: 900; } /* Testimonial overrides */ [data-theme="neo-brutalist"] .st-testimonial { border: 3px solid var(--st-border); box-shadow: 6px 6px 0 var(--st-border); background: var(--st-bg); } [data-theme="neo-brutalist"] .st-testimonial__quote::before, [data-theme="neo-brutalist"] .st-testimonial__quote::after { color: var(--st-accent); font-weight: 900; } /* CTA Section overrides */ [data-theme="neo-brutalist"] .st-cta-section { background: var(--st-text); color: var(--st-bg); border-top: 4px solid var(--st-accent); border-bottom: 4px solid var(--st-accent); } [data-theme="neo-brutalist"] .st-cta-section__title { text-transform: uppercase; font-weight: 900; } [data-theme="neo-brutalist"] .st-cta-section .st-cta { background: var(--st-bg); color: var(--st-text); border-color: var(--st-bg); box-shadow: 4px 4px 0 var(--st-bg); } /* Nav overrides */ [data-theme="neo-brutalist"] .st-nav { border-bottom: 3px solid var(--st-border); background: var(--st-bg); } [data-theme="neo-brutalist"] .st-nav__logo a { font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; } /* Footer overrides */ [data-theme="neo-brutalist"] .st-footer { border-top: 3px solid var(--st-border); background: var(--st-bg); } /* Grid - add gap for hard shadow effect */ [data-theme="neo-brutalist"] .st-grid { gap: 2rem; } /* Code blocks if present */ [data-theme="neo-brutalist"] pre, [data-theme="neo-brutalist"] code { background: var(--st-text); color: var(--st-bg); border: 2px solid var(--st-border); } /* ============================================================================= ZEYSTUDIOS THEME Warm, contemplative, photography-first. Inspired by Zeyna Benbrahim's "Intimités Nomades" collection. Twilight gradients, terracotta earth, generous whitespace. Design should frame the photography, not compete. ============================================================================= */ [data-theme="zeystudios"] { /* Background Colors - Warm cream tones */ --st-bg: #FAF8F5; --st-bg-surface: #F5F0EA; --st-bg-surface-hover: #EDE5DB; --st-bg-dark: #1A1A1A; /* Text Colors - Warm charcoal */ --st-text: #2D2926; --st-text-muted: #6B5E54; --st-text-subtle: #9A8C7F; --st-text-light: #FAF8F5; /* Accent Colors - Terracotta warmth */ --st-accent: #C45C3E; --st-accent-light: #E8845F; --st-accent-dark: #8B3D2A; --st-accent-glow: rgba(196, 92, 62, 0.15); --st-accent-gradient: linear-gradient(135deg, #D4A373 0%, #D9A566 50%, #F5EBE0 100%); /* Twilight Gradient Colors - Signature desert sky */ --st-twilight-start: #2D1B4E; --st-twilight-mid-dark: #6B5B7A; --st-twilight-mid: #8B7394; --st-twilight-mid-light: #C4A5A8; --st-twilight-end: #D9A566; --st-twilight-gradient: linear-gradient(180deg, #6B5B7A 0%, #8B7394 35%, #C4A5A8 65%, #D9A566 100%); /* Cultural Accent Colors */ --st-terracotta: #C97B63; --st-ochre: #D4A373; --st-copper: #B87333; --st-vivid-red: #C84630; --st-fuchsia: #E94B9C; --st-turquoise: #5DBBAD; --st-moroccan-blue: #4A90A4; /* Border - Subtle, warm */ --st-border: rgba(45, 41, 38, 0.1); --st-border-accent: rgba(196, 92, 62, 0.3); /* Spacing - Generous, luxurious */ --st-space-xs: 0.5rem; --st-space-sm: 1rem; --st-space-md: 2rem; --st-space-lg: 4rem; --st-space-xl: 8rem; /* Border Radius - Soft, organic curves */ --st-radius-sm: 8px; --st-radius-md: 16px; --st-radius-lg: 24px; --st-radius-xl: 32px; --st-radius-full: 999px; /* Typography - Elegant serif + clean sans */ --st-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --st-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Shadows - Warm, subtle */ --st-shadow-sm: 0 2px 8px rgba(45, 41, 38, 0.06); --st-shadow-md: 0 8px 24px rgba(45, 41, 38, 0.1); --st-shadow-lg: 0 20px 60px rgba(45, 41, 38, 0.12); --st-shadow-hover: 0 24px 80px rgba(45, 41, 38, 0.15); /* Animation Timing - Slow, contemplative */ --st-duration-slow: 1200ms; --st-duration-medium: 600ms; --st-duration-fast: 300ms; --st-ease-contemplative: cubic-bezier(0.4, 0.0, 0.2, 1); --st-ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1); } /* Hero - Full bleed photography */ [data-theme="zeystudios"] .st-hero { background: var(--st-bg-dark); } [data-theme="zeystudios"] .st-hero__badge { background: rgba(250, 248, 245, 0.15); backdrop-filter: blur(10px); color: var(--st-text-light); border: 1px solid rgba(250, 248, 245, 0.2); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--st-radius-full); } [data-theme="zeystudios"] .st-hero__title { font-family: var(--st-font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--st-text-light); } [data-theme="zeystudios"] .st-hero__subtitle { font-family: var(--st-font-sans); font-weight: 400; color: rgba(250, 248, 245, 0.8); max-width: 500px; line-height: 1.6; } /* Card - Subtle elegance with lift on hover */ [data-theme="zeystudios"] .st-card { background: var(--st-bg); border: none; border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-sm); transition: transform var(--st-duration-fast) var(--st-ease-contemplative), box-shadow var(--st-duration-fast) var(--st-ease-contemplative); } [data-theme="zeystudios"] .st-card:hover { transform: translateY(-8px); box-shadow: var(--st-shadow-hover); } [data-theme="zeystudios"] .st-card__title { font-family: var(--st-font-display); font-weight: 500; color: var(--st-text); } [data-theme="zeystudios"] .st-card__icon { background: var(--st-accent-glow); color: var(--st-accent); border: none; border-radius: var(--st-radius-md); } /* CTA Button - Warm, inviting */ [data-theme="zeystudios"] .st-cta { background: var(--st-accent); color: white; border: none; border-radius: var(--st-radius-full); font-family: var(--st-font-sans); font-weight: 500; letter-spacing: 0.02em; padding: 1rem 2rem; box-shadow: var(--st-shadow-sm); transition: transform var(--st-duration-fast) var(--st-ease-contemplative), box-shadow var(--st-duration-fast) var(--st-ease-contemplative), background var(--st-duration-fast) var(--st-ease-contemplative); } [data-theme="zeystudios"] .st-cta:hover { background: var(--st-accent-light); transform: translateY(-2px); box-shadow: var(--st-shadow-md); } [data-theme="zeystudios"] .st-cta:active { transform: translateY(0); box-shadow: var(--st-shadow-sm); } [data-theme="zeystudios"] .st-cta[data-variant="secondary"] { background: transparent; color: var(--st-accent); border: 2px solid var(--st-accent); box-shadow: none; } [data-theme="zeystudios"] .st-cta[data-variant="secondary"]:hover { background: var(--st-accent-glow); } [data-theme="zeystudios"] .st-cta[data-variant="ghost"] { background: transparent; color: var(--st-text); box-shadow: none; } [data-theme="zeystudios"] .st-cta[data-variant="ghost"]:hover { background: var(--st-bg-surface); } /* Section - Generous spacing, elegant headers */ [data-theme="zeystudios"] .st-section { padding: var(--st-space-xl) var(--st-space-md); } [data-theme="zeystudios"] .st-section__tag { background: var(--st-accent-glow); color: var(--st-accent); border: none; border-radius: var(--st-radius-full); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; padding: 0.5rem 1rem; } [data-theme="zeystudios"] .st-section__title { font-family: var(--st-font-display); font-weight: 400; color: var(--st-text); letter-spacing: -0.02em; } [data-theme="zeystudios"] .st-section__desc { color: var(--st-text-muted); max-width: 600px; line-height: 1.7; } /* Testimonial - Warm, editorial feel */ [data-theme="zeystudios"] .st-testimonial { background: var(--st-bg); border: none; border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-sm); padding: var(--st-space-md); } [data-theme="zeystudios"] .st-testimonial__quote { font-family: var(--st-font-display); font-size: 1.25rem; font-style: italic; color: var(--st-text); line-height: 1.6; } [data-theme="zeystudios"] .st-testimonial__quote::before, [data-theme="zeystudios"] .st-testimonial__quote::after { color: var(--st-accent); opacity: 0.5; } [data-theme="zeystudios"] .st-testimonial__name { font-weight: 500; color: var(--st-text); } [data-theme="zeystudios"] .st-testimonial__role { color: var(--st-text-muted); } /* CTA Section - Twilight gradient background */ [data-theme="zeystudios"] .st-cta-section { background: var(--st-twilight-gradient); color: var(--st-text-light); border: none; padding: var(--st-space-xl) var(--st-space-md); } [data-theme="zeystudios"] .st-cta-section__title { font-family: var(--st-font-display); font-weight: 400; color: var(--st-text-light); } [data-theme="zeystudios"] .st-cta-section__subtitle { color: rgba(250, 248, 245, 0.8); } [data-theme="zeystudios"] .st-cta-section .st-cta { background: var(--st-text-light); color: var(--st-twilight-mid-dark); } [data-theme="zeystudios"] .st-cta-section .st-cta:hover { background: white; } /* Nav - Clean, minimal */ [data-theme="zeystudios"] .st-nav { background: rgba(250, 248, 245, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--st-border); } [data-theme="zeystudios"] .st-nav__logo a { font-family: var(--st-font-display); font-weight: 500; letter-spacing: 0.05em; color: var(--st-text); } [data-theme="zeystudios"] .st-nav__links a { color: var(--st-text-muted); font-weight: 400; transition: color var(--st-duration-fast) var(--st-ease-contemplative); } [data-theme="zeystudios"] .st-nav__links a:hover { color: var(--st-text); } /* Footer - Warm, minimal */ [data-theme="zeystudios"] .st-footer { background: var(--st-bg-surface); border-top: 1px solid var(--st-border); padding: var(--st-space-lg) var(--st-space-md); } [data-theme="zeystudios"] .st-footer__brand { font-family: var(--st-font-display); } [data-theme="zeystudios"] .st-footer__links a { color: var(--st-text-muted); } [data-theme="zeystudios"] .st-footer__links a:hover { color: var(--st-accent); } /* Grid - More generous gaps */ [data-theme="zeystudios"] .st-grid { gap: var(--st-space-md); } /* Marquee - Subtle */ [data-theme="zeystudios"] .st-marquee { background: var(--st-bg-surface); border-top: 1px solid var(--st-border); border-bottom: 1px solid var(--st-border); }