/* ============================================================ THEME SYSTEM — All visual properties flow from these variables. To create a new theme, duplicate the [data-theme="default"] block, rename it, and change the values. Switch themes by setting data-theme on . ============================================================ */ /* ---------- DEFAULT THEME ---------- */ [data-theme="default"] { /* Surface */ --color-bg: #0a0a0a; --color-bg-alt: #111111; --color-bg-elevated: #1a1a1a; --color-surface-border: #222222; /* Text */ --color-text: #f0f0f0; --color-text-muted: #888888; --color-text-accent: #a8b5ff; /* Accent */ --color-accent: #6c7aff; --color-accent-hover: #8b96ff; --color-accent-subtle: rgba(108, 122, 255, 0.1); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Sizing */ --container-max: 1200px; --section-pad: 120px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; /* Transitions */ --transition-fast: 0.2s ease; --transition-med: 0.4s ease; --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Header */ --header-height: 72px; --header-bg: rgba(10, 10, 10, 0.85); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.4); } /* ---------- EXAMPLE LIGHT THEME (swap in to test) ---------- */ [data-theme="light"] { --color-bg: #ffffff; --color-bg-alt: #f5f5f5; --color-bg-elevated: #eaeaea; --color-surface-border: #dddddd; --color-text: #111111; --color-text-muted: #666666; --color-text-accent: #4a56c7; --color-accent: #4a56c7; --color-accent-hover: #5d6ae0; --color-accent-subtle: rgba(74, 86, 199, 0.08); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --container-max: 1200px; --section-pad: 120px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --transition-fast: 0.2s ease; --transition-med: 0.4s ease; --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1); --header-height: 72px; --header-bg: rgba(255, 255, 255, 0.9); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.1); } /* ---------- ECO PULSE — Organic Green Theme ---------- */ [data-theme="eco-pulse"] { --color-bg: #f6f9f2; --color-bg-alt: #edf3e5; --color-bg-elevated: #dfe9d4; --color-surface-border: #c5d6b3; --color-text: #1a2e0a; --color-text-muted: #5a7247; --color-text-accent: #2d8a3e; --color-accent: #2d8a3e; --color-accent-hover: #3aad4e; --color-accent-subtle: rgba(45, 138, 62, 0.08); --color-eco-warm: #b5890a; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --container-max: 1200px; --section-pad: 120px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --transition-fast: 0.2s ease; --transition-med: 0.4s ease; --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1); --header-height: 72px; --header-bg: rgba(246, 249, 242, 0.92); --shadow-sm: 0 1px 4px rgba(30, 60, 10, 0.06); --shadow-md: 0 6px 24px rgba(30, 60, 10, 0.1); } /* ---------- MURDER MYSTERY — Dark Crimson Noir ---------- */ [data-theme="murder-mystery"] { --color-bg: #0e0708; --color-bg-alt: #140a0c; --color-bg-elevated: #1c1012; --color-surface-border: #2e1a1e; --color-text: #e8dcd0; --color-text-muted: #8a7068; --color-text-accent: #c4364a; --color-accent: #c4364a; --color-accent-hover: #e04458; --color-accent-subtle: rgba(196, 54, 74, 0.08); --color-mm-gold: #c9a84c; --color-mm-gold-dim: rgba(201, 168, 76, 0.12); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --container-max: 1200px; --section-pad: 120px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --transition-fast: 0.2s ease; --transition-med: 0.4s ease; --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1); --header-height: 72px; --header-bg: rgba(14, 7, 8, 0.92); --shadow-sm: 0 1px 6px rgba(196, 54, 74, 0.1); --shadow-md: 0 4px 24px rgba(196, 54, 74, 0.15); } /* ---------- NEON NOIR — Cyberpunk Theme ---------- */ [data-theme="neon-noir"] { /* Surface — deep blue-blacks like wet asphalt at night */ --color-bg: #05050f; --color-bg-alt: #0a0a1a; --color-bg-elevated: #0f0f24; --color-surface-border: #1a1a3a; /* Text — cool white with pink tint */ --color-text: #e8e0f0; --color-text-muted: #6a6a8a; --color-text-accent: #ff2a6d; /* Accent — hot pink / magenta neon */ --color-accent: #ff2a6d; --color-accent-hover: #ff5a8a; --color-accent-subtle: rgba(255, 42, 109, 0.08); /* Secondary neon — electric cyan (used in theme-specific rules) */ --color-neon-cyan: #05d9e8; --color-neon-cyan-dim: rgba(5, 217, 232, 0.15); --color-neon-glow: rgba(255, 42, 109, 0.4); --color-neon-glow-cyan: rgba(5, 217, 232, 0.3); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Sizing — slightly more aggressive radius for that cut-corner cyber feel */ --container-max: 1200px; --section-pad: 120px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* Transitions */ --transition-fast: 0.2s ease; --transition-med: 0.4s ease; --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Header */ --header-height: 72px; --header-bg: rgba(5, 5, 15, 0.9); /* Shadows — neon glows instead of soft drops */ --shadow-sm: 0 0 8px rgba(255, 42, 109, 0.15); --shadow-md: 0 0 30px rgba(255, 42, 109, 0.2); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); font-size: 16px; } body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--transition-med), color var(--transition-med); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, textarea { font-family: inherit; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-height); background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-surface-border); transition: background var(--transition-med), border-color var(--transition-med); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; } .logo-mark { color: var(--color-accent); font-size: 1.3rem; transition: color var(--transition-fast); } .main-nav { display: flex; align-items: center; gap: 32px; } .nav-link { font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); transition: color var(--transition-fast); letter-spacing: 0.01em; } .nav-link:hover { color: var(--color-text); } .nav-link--cta { background: var(--color-accent); color: #fff !important; padding: 8px 20px; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); } .nav-link--cta:hover { background: var(--color-accent-hover); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: var(--transition-fast); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: var(--radius-sm); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; border: none; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--color-accent); color: #fff; } .btn--primary:hover { background: var(--color-accent-hover); box-shadow: 0 4px 24px rgba(108, 122, 255, 0.3); } .btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-surface-border); } .btn--ghost:hover { border-color: var(--color-text-muted); background: var(--color-accent-subtle); } .btn--full { width: 100%; } /* ============================================================ SECTIONS — shared ============================================================ */ .section { padding: var(--section-pad) 0; transition: background var(--transition-med); } .section-label { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 12px; } .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 48px; } /* ============================================================ HERO ============================================================ */ .hero { padding-top: calc(var(--header-height) + var(--section-pad)); min-height: 100vh; display: flex; align-items: center; } .hero-label { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin-bottom: 24px; } .hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 24px; } .hero-title em { font-style: normal; color: var(--color-accent); } .hero-sub { font-size: 1.125rem; color: var(--color-text-muted); max-width: 580px; line-height: 1.7; margin-bottom: 40px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* ============================================================ RIBBON ============================================================ */ .ribbon { background: var(--color-bg-alt); border-top: 1px solid var(--color-surface-border); border-bottom: 1px solid var(--color-surface-border); padding: 48px 0; transition: background var(--transition-med), border-color var(--transition-med); } .ribbon-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; } .stat { text-align: center; flex: 1; min-width: 140px; } .stat-value { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); } .stat-label { display: block; font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 4px; } /* ============================================================ SERVICES ============================================================ */ .services { background: var(--color-bg); } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .service-card { background: var(--color-bg-elevated); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); padding: 36px 32px; transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-med); } .service-card:hover { border-color: var(--color-accent); transform: translateY(-4px); } .service-icon { display: block; font-size: 1.75rem; margin-bottom: 16px; color: var(--color-accent); } .service-card h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; } .service-card p { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.65; } /* ============================================================ WORK / PORTFOLIO ============================================================ */ .work { background: var(--color-bg-alt); } .project-list { margin-top: 16px; } .project-item { display: block; border-bottom: 1px solid var(--color-surface-border); padding: 56px 0; transition: background var(--transition-fast); } .project-item:hover { background: var(--color-accent-subtle); } .project-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .project-client { display: block; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 8px; } .project-name { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.25; } .project-desc { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.65; margin-bottom: 16px; } .project-tags { font-size: 0.8125rem; color: var(--color-text-muted); letter-spacing: 0.02em; } .project-visual { display: flex; justify-content: flex-end; } .project-placeholder { width: 100%; max-width: 480px; aspect-ratio: 16 / 10; background: var(--color-bg-elevated); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); transition: background var(--transition-med), border-color var(--transition-med); } /* ============================================================ PARTNERS ============================================================ */ .partners { background: var(--color-bg); } .partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .partner-logo { display: flex; align-items: center; justify-content: center; height: 100px; background: var(--color-bg-elevated); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); font-weight: 600; font-size: 0.9375rem; color: var(--color-text-muted); letter-spacing: 0.01em; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-med); } .partner-logo:hover { border-color: var(--color-accent); color: var(--color-text); } /* ============================================================ ABOUT ============================================================ */ .about { background: var(--color-bg-alt); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .about-content p { font-size: 1rem; color: var(--color-text-muted); margin-bottom: 16px; line-height: 1.7; } .about-placeholder { width: 100%; aspect-ratio: 4 / 3; background: var(--color-bg-elevated); border: 1px solid var(--color-surface-border); border-radius: var(--radius-lg); transition: background var(--transition-med), border-color var(--transition-med); } /* ============================================================ CONTACT ============================================================ */ .contact { background: var(--color-bg); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact-info p { font-size: 1rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 32px; } .contact-details p { font-size: 0.9375rem; margin-bottom: 16px; } .contact-details strong { display: block; color: var(--color-text); font-weight: 600; margin-bottom: 2px; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .form-group input, .form-group textarea { background: var(--color-bg-elevated); border: 1px solid var(--color-surface-border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.9375rem; color: var(--color-text); outline: none; transition: border-color var(--transition-fast), background var(--transition-med); } .form-group input:focus, .form-group textarea:focus { border-color: var(--color-accent); } .form-group textarea { resize: vertical; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-surface-border); padding: 48px 0; transition: background var(--transition-med), border-color var(--transition-med); } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .footer-brand p { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 8px; } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 0.875rem; color: var(--color-text-muted); transition: color var(--transition-fast); } .footer-links a:hover { color: var(--color-text); } /* ============================================================ PAGE TRANSITION OVERLAY — for theme switch / link animations ============================================================ */ .page-transition { position: fixed; inset: 0; z-index: 9999; background: var(--color-accent); transform: scaleY(0); transform-origin: bottom; pointer-events: none; transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); } .page-transition.active { transform: scaleY(1); transform-origin: top; } .page-transition.exit { transform: scaleY(0); transform-origin: top; } /* ============================================================ SCROLL REVEAL ANIMATION ============================================================ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================================ NEON NOIR — Theme-specific overrides & effects These rules ONLY activate when [data-theme="neon-noir"] is set. This pattern shows how to layer theme-specific visuals on top of the base template without touching the base CSS. ============================================================ */ /* Scanline overlay on the entire page */ [data-theme="neon-noir"] body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(5, 5, 15, 0.03) 2px, rgba(5, 5, 15, 0.03) 4px ); mix-blend-mode: multiply; } /* Header — neon bottom border glow */ [data-theme="neon-noir"] .site-header { border-bottom: 1px solid var(--color-neon-cyan); box-shadow: 0 1px 20px var(--color-neon-glow-cyan); } /* Logo gets a neon cyan mark instead of accent */ [data-theme="neon-noir"] .logo-mark { color: var(--color-neon-cyan); text-shadow: 0 0 10px var(--color-neon-glow-cyan); } /* Nav CTA — clipped corner cyberpunk style */ [data-theme="neon-noir"] .nav-link--cta { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); background: var(--color-accent); box-shadow: 0 0 12px var(--color-neon-glow); } /* Hero — neon text glow on the accent word */ [data-theme="neon-noir"] .hero-title em { color: var(--color-neon-cyan); text-shadow: 0 0 10px var(--color-neon-glow-cyan), 0 0 40px var(--color-neon-glow-cyan); } /* Hero label gets a left-border accent bar */ [data-theme="neon-noir"] .hero-label { border-left: 3px solid var(--color-neon-cyan); padding-left: 12px; text-shadow: 0 0 8px var(--color-neon-glow); } /* Section labels — dual-color treatment */ [data-theme="neon-noir"] .section-label { color: var(--color-neon-cyan); text-shadow: 0 0 6px var(--color-neon-glow-cyan); } /* Section titles — subtle neon underline */ [data-theme="neon-noir"] .section-title { position: relative; display: inline-block; } [data-theme="neon-noir"] .section-title::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 60px; height: 2px; background: linear-gradient(90deg, var(--color-accent), var(--color-neon-cyan)); box-shadow: 0 0 10px var(--color-neon-glow); } /* Buttons — neon glow on primary */ [data-theme="neon-noir"] .btn--primary { box-shadow: 0 0 16px var(--color-neon-glow), inset 0 0 16px rgba(255, 42, 109, 0.1); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } [data-theme="neon-noir"] .btn--primary:hover { box-shadow: 0 0 30px var(--color-neon-glow), 0 0 60px rgba(255, 42, 109, 0.15); } [data-theme="neon-noir"] .btn--ghost { border-color: var(--color-neon-cyan); color: var(--color-neon-cyan); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } [data-theme="neon-noir"] .btn--ghost:hover { background: var(--color-neon-cyan-dim); border-color: var(--color-neon-cyan); box-shadow: 0 0 16px var(--color-neon-glow-cyan); } /* Stat values — alternating neon colors */ [data-theme="neon-noir"] .stat-value { color: var(--color-neon-cyan); text-shadow: 0 0 8px var(--color-neon-glow-cyan); } [data-theme="neon-noir"] .stat:nth-child(even) .stat-value { color: var(--color-accent); text-shadow: 0 0 8px var(--color-neon-glow); } /* Ribbon — gradient border glow */ [data-theme="neon-noir"] .ribbon { border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-neon-cyan); box-shadow: inset 0 1px 20px rgba(255, 42, 109, 0.05), inset 0 -1px 20px rgba(5, 217, 232, 0.05); } /* Service cards — neon border glow on hover */ [data-theme="neon-noir"] .service-card { border-color: var(--color-surface-border); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); } [data-theme="neon-noir"] .service-card:hover { border-color: var(--color-neon-cyan); box-shadow: 0 0 20px var(--color-neon-glow-cyan), inset 0 0 20px rgba(5, 217, 232, 0.03); } [data-theme="neon-noir"] .service-icon { color: var(--color-neon-cyan); text-shadow: 0 0 8px var(--color-neon-glow-cyan); } /* Project items — side neon accent bar on hover */ [data-theme="neon-noir"] .project-item { border-bottom-color: var(--color-surface-border); position: relative; } [data-theme="neon-noir"] .project-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--color-accent), var(--color-neon-cyan)); opacity: 0; transition: opacity var(--transition-fast); box-shadow: 0 0 12px var(--color-neon-glow); } [data-theme="neon-noir"] .project-item:hover::before { opacity: 1; } [data-theme="neon-noir"] .project-item:hover { background: rgba(255, 42, 109, 0.03); } /* Project placeholders — neon border glow */ [data-theme="neon-noir"] .project-placeholder { border-color: var(--color-surface-border); background: linear-gradient(135deg, rgba(255, 42, 109, 0.05) 0%, transparent 50%, rgba(5, 217, 232, 0.05) 100%), var(--color-bg-elevated); } [data-theme="neon-noir"] .project-item:hover .project-placeholder { border-color: var(--color-neon-cyan); box-shadow: 0 0 24px var(--color-neon-glow-cyan); } /* Project client name — cyan */ [data-theme="neon-noir"] .project-client { color: var(--color-neon-cyan); } /* Partner logos — alternate glow colors */ [data-theme="neon-noir"] .partner-logo { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); } [data-theme="neon-noir"] .partner-logo:hover { border-color: var(--color-neon-cyan); color: var(--color-neon-cyan); box-shadow: 0 0 16px var(--color-neon-glow-cyan); text-shadow: 0 0 6px var(--color-neon-glow-cyan); } /* About placeholder — gradient neon border */ [data-theme="neon-noir"] .about-placeholder { border: 1px solid transparent; background: linear-gradient(var(--color-bg-elevated), var(--color-bg-elevated)) padding-box, linear-gradient(135deg, var(--color-accent), var(--color-neon-cyan)) border-box; box-shadow: 0 0 30px rgba(255, 42, 109, 0.08), 0 0 30px rgba(5, 217, 232, 0.08); } /* Contact form inputs — neon focus glow */ [data-theme="neon-noir"] .form-group input, [data-theme="neon-noir"] .form-group textarea { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } [data-theme="neon-noir"] .form-group input:focus, [data-theme="neon-noir"] .form-group textarea:focus { border-color: var(--color-neon-cyan); box-shadow: 0 0 12px var(--color-neon-glow-cyan), inset 0 0 12px rgba(5, 217, 232, 0.05); } /* Contact form submit — full neon treatment */ [data-theme="neon-noir"] .contact-form .btn--primary { background: linear-gradient(135deg, var(--color-accent), #d4145a); } [data-theme="neon-noir"] .contact-form .btn--primary:hover { background: linear-gradient(135deg, var(--color-accent-hover), var(--color-accent)); } /* Footer — top border neon */ [data-theme="neon-noir"] .site-footer { border-top: 1px solid var(--color-accent); box-shadow: 0 -1px 20px var(--color-neon-glow); } /* Page transition overlay — gradient for neon noir */ [data-theme="neon-noir"] .page-transition { background: linear-gradient(135deg, var(--color-accent), var(--color-neon-cyan)); } /* ============================================================ ECO PULSE — Theme-specific overrides ============================================================ */ /* Soft leaf-vein texture overlay */ [data-theme="eco-pulse"] body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at 20% 50%, rgba(45, 138, 62, 0.03) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(181, 137, 10, 0.03) 0%, transparent 50%); } /* Hero em — warm amber contrast */ [data-theme="eco-pulse"] .hero-title em { color: var(--color-eco-warm); } /* Section labels — earthy warm accent */ [data-theme="eco-pulse"] .section-label { color: var(--color-eco-warm); } /* Stat values — alternate green / amber */ [data-theme="eco-pulse"] .stat-value { color: var(--color-accent); } [data-theme="eco-pulse"] .stat:nth-child(even) .stat-value { color: var(--color-eco-warm); } /* Service cards — organic soft shadow on hover */ [data-theme="eco-pulse"] .service-card:hover { box-shadow: 0 8px 32px rgba(45, 138, 62, 0.12); } /* Project client — warm gold */ [data-theme="eco-pulse"] .project-client { color: var(--color-eco-warm); } /* Buttons — softer pill shape via higher radius, leaf shadow */ [data-theme="eco-pulse"] .btn--primary:hover { box-shadow: 0 4px 24px rgba(45, 138, 62, 0.25); } [data-theme="eco-pulse"] .btn--ghost { border-color: var(--color-accent); color: var(--color-accent); } /* About placeholder — organic gradient */ [data-theme="eco-pulse"] .about-placeholder { background: linear-gradient(160deg, rgba(45, 138, 62, 0.08) 0%, var(--color-bg-elevated) 40%, rgba(181, 137, 10, 0.06) 100%); } /* Project placeholders — subtle green tint */ [data-theme="eco-pulse"] .project-placeholder { background: linear-gradient(135deg, rgba(45, 138, 62, 0.06) 0%, var(--color-bg-elevated) 100%); } /* Partner logos — warm hover */ [data-theme="eco-pulse"] .partner-logo:hover { border-color: var(--color-eco-warm); color: var(--color-eco-warm); } /* Page transition — green */ [data-theme="eco-pulse"] .page-transition { background: linear-gradient(135deg, var(--color-accent), var(--color-eco-warm)); } /* ============================================================ MURDER MYSTERY — Theme-specific overrides ============================================================ */ /* Film noir vignette overlay */ [data-theme="murder-mystery"] body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%); } /* Header — gold pinstripe bottom */ [data-theme="murder-mystery"] .site-header { border-bottom: 1px solid var(--color-mm-gold); box-shadow: 0 1px 12px var(--color-mm-gold-dim); } /* Logo — gold mark */ [data-theme="murder-mystery"] .logo-mark { color: var(--color-mm-gold); } /* Hero em — blood red emphasis */ [data-theme="murder-mystery"] .hero-title em { color: var(--color-accent); text-shadow: 0 0 30px rgba(196, 54, 74, 0.3); } /* Section labels — gold */ [data-theme="murder-mystery"] .section-label { color: var(--color-mm-gold); } /* Section titles — gold underline */ [data-theme="murder-mystery"] .section-title { position: relative; display: inline-block; } [data-theme="murder-mystery"] .section-title::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 50px; height: 1px; background: var(--color-mm-gold); } /* Stat values — gold numbers */ [data-theme="murder-mystery"] .stat-value { color: var(--color-mm-gold); } /* Ribbon — crimson top, gold bottom */ [data-theme="murder-mystery"] .ribbon { border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-mm-gold); } /* Service cards — crimson glow on hover */ [data-theme="murder-mystery"] .service-card:hover { border-color: var(--color-accent); box-shadow: 0 0 20px rgba(196, 54, 74, 0.12); } [data-theme="murder-mystery"] .service-icon { color: var(--color-mm-gold); } /* Buttons — sharp edges, blood red glow */ [data-theme="murder-mystery"] .btn--primary:hover { box-shadow: 0 4px 24px rgba(196, 54, 74, 0.3); } [data-theme="murder-mystery"] .btn--ghost { border-color: var(--color-mm-gold); color: var(--color-mm-gold); } [data-theme="murder-mystery"] .btn--ghost:hover { background: var(--color-mm-gold-dim); border-color: var(--color-mm-gold); } /* Project client — gold */ [data-theme="murder-mystery"] .project-client { color: var(--color-mm-gold); } /* Project items — red side bar on hover */ [data-theme="murder-mystery"] .project-item { position: relative; } [data-theme="murder-mystery"] .project-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--color-accent); opacity: 0; transition: opacity var(--transition-fast); } [data-theme="murder-mystery"] .project-item:hover::before { opacity: 1; } /* About placeholder — noir vignette */ [data-theme="murder-mystery"] .about-placeholder { background: radial-gradient(ellipse at center, var(--color-bg-elevated) 50%, rgba(196, 54, 74, 0.06) 100%); border-color: var(--color-mm-gold); } /* Partner logos — gold hover */ [data-theme="murder-mystery"] .partner-logo:hover { border-color: var(--color-mm-gold); color: var(--color-mm-gold); } /* Contact inputs — crimson focus */ [data-theme="murder-mystery"] .form-group input:focus, [data-theme="murder-mystery"] .form-group textarea:focus { border-color: var(--color-mm-gold); box-shadow: 0 0 8px var(--color-mm-gold-dim); } /* Footer — gold top border */ [data-theme="murder-mystery"] .site-footer { border-top: 1px solid var(--color-mm-gold); } /* Page transition — deep crimson */ [data-theme="murder-mystery"] .page-transition { background: linear-gradient(135deg, #1c1012, var(--color-accent)); } /* ============================================================ THEME SWITCHER — floating panel ============================================================ */ .theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .theme-switcher-toggle { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-surface-border); background: var(--color-bg-elevated); color: var(--color-text); font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); box-shadow: var(--shadow-md); } .theme-switcher-toggle:hover { border-color: var(--color-accent); transform: scale(1.08); } [data-theme="neon-noir"] .theme-switcher-toggle { box-shadow: 0 0 16px var(--color-neon-glow); border-color: var(--color-accent); } .theme-switcher-panel { display: none; flex-direction: column; gap: 6px; background: var(--color-bg-elevated); border: 1px solid var(--color-surface-border); border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-md); min-width: 160px; transition: background var(--transition-med), border-color var(--transition-med); } .theme-switcher-panel.open { display: flex; } [data-theme="neon-noir"] .theme-switcher-panel { border-color: var(--color-accent); box-shadow: 0 0 24px var(--color-neon-glow); } .theme-switcher-panel button { background: none; border: 1px solid transparent; color: var(--color-text-muted); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .theme-switcher-panel button:hover { background: var(--color-accent-subtle); color: var(--color-text); border-color: var(--color-surface-border); } .theme-switcher-panel button.active { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-subtle); font-weight: 600; } .theme-swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); flex-shrink: 0; } .theme-swatch--default { background: #6c7aff; } .theme-swatch--light { background: linear-gradient(135deg, #f5f5f5 50%, #4a56c7 50%); } .theme-swatch--neon-noir { background: linear-gradient(135deg, #ff2a6d 50%, #05d9e8 50%); } .theme-swatch--eco-pulse { background: linear-gradient(135deg, #2d8a3e 50%, #b5890a 50%); } .theme-swatch--murder-mystery { background: linear-gradient(135deg, #c4364a 50%, #c9a84c 50%); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { :root { --section-pad: 80px; } .main-nav { position: fixed; top: 0; right: 0; bottom: 0; width: 280px; background: var(--color-bg); flex-direction: column; padding: 100px 32px 32px; gap: 24px; transform: translateX(100%); transition: transform var(--transition-med); border-left: 1px solid var(--color-surface-border); z-index: 999; } .main-nav.open { transform: translateX(0); } .nav-toggle { display: flex; z-index: 1001; } .project-inner, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; } .project-visual { justify-content: flex-start; } } @media (max-width: 600px) { :root { --section-pad: 56px; } .services-grid { grid-template-columns: 1fr; } .partner-grid { grid-template-columns: repeat(2, 1fr); } .hero-title { font-size: clamp(2rem, 8vw, 3rem); } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } }