/* theme-1.css — 8-bit Pastel Garden palette. Dual selector: [data-theme="theme-1"] on + body.theme-1 for compatibility. */ @font-face { font-family: 'PixelOperator'; src: url('./fonts/PixelOperator.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'PixelOperator'; src: url('./fonts/PixelOperator-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } :root { --t1-bg: #1a1a2e; --t1-bg-alt: #2d4a3e; --t1-surface: #3d6b5c; --t1-surface-alt: #4a3f6b; --t1-accent-1: #f4a7c3; /* daisy pink */ --t1-accent-2: #a8d8ea; /* cornflower blue */ --t1-accent-3: #f9e4b7; /* sunflower yellow */ --t1-accent-4: #b8e0b0; /* grass green */ --t1-accent-5: #c9b8e8; /* hyacinth lavender */ --t1-text: #fef9f0; --t1-text-muted: #d4c5e2; --t1-border: #f4a7c340; --t1-navbar-bg: #1a1a2eee; --t1-pixel-shadow: 3px 3px 0px #1a1a2e; --t1-pixel-shadow-pink: 3px 3px 0px #c4547a; } /* ── PixelOperator — override all font variables and hardcoded families ── */ body.theme-1 { --avenir: 'PixelOperator', monospace; --avenir-ok: 'PixelOperator', monospace; --instrument: 'PixelOperator', monospace; font-family: 'PixelOperator', monospace !important; } /* Clases con font-family hardcodeado (no usan variables CSS) */ body.theme-1 .heading-29, body.theme-1 .submit-button, body.theme-1 .divider-with-text-copy, body.theme-1 .nav-link-4-copy, body.theme-1 .paragraph-10, body.theme-1 .para-txt, body.theme-1 .subtext, body.theme-1 p, body.theme-1 h1, body.theme-1 h2, body.theme-1 h3, body.theme-1 h4, body.theme-1 h5, body.theme-1 h6, body.theme-1 a, body.theme-1 div, body.theme-1 span, body.theme-1 li, body.theme-1 label, body.theme-1 input, body.theme-1 textarea { font-family: 'PixelOperator', monospace !important; } /* ── Navbar — fondo y blur original, sin bordes extra ── */ /* Desktop nav links (.waves---nav-link) */ [data-theme="theme-1"] .waves---nav-link, body.theme-1 .waves---nav-link { color: var(--t1-text) !important; border-radius: 0 !important; font-family: 'PixelOperator', monospace !important; } [data-theme="theme-1"] .waves---nav-link.w--current, body.theme-1 .waves---nav-link.w--current { background-color: transparent !important; color: var(--t1-accent-1) !important; border-radius: 0 !important; font-weight: bold !important; } [data-theme="theme-1"] .waves---nav-link:hover, body.theme-1 .waves---nav-link:hover { background-color: rgba(244, 167, 195, 0.1) !important; border-radius: 0 !important; color: var(--t1-accent-3) !important; } /* Mobile nav links (.nav-link-4 / .nav-link-4-copy) */ [data-theme="theme-1"] .nav-link-4, [data-theme="theme-1"] .nav-link-4-copy, body.theme-1 .nav-link-4, body.theme-1 .nav-link-4-copy { color: var(--t1-text) !important; } [data-theme="theme-1"] .nav-link-4.w--current, [data-theme="theme-1"] .nav-link-4-copy.w--current, body.theme-1 .nav-link-4.w--current, body.theme-1 .nav-link-4-copy.w--current { color: var(--t1-accent-1) !important; background-color: transparent !important; border-radius: 0 !important; } [data-theme="theme-1"] .nav-link-4:hover, [data-theme="theme-1"] .nav-link-4-copy:hover, body.theme-1 .nav-link-4:hover, body.theme-1 .nav-link-4-copy:hover { color: var(--t1-accent-3) !important; } /* Language toggle & logo */ body.theme-1 .link-7-copy, body.theme-1 .link-8-copy { color: var(--t1-text) !important; font-family: 'PixelOperator', monospace !important; } body.theme-1 .link-7-copy.w--current, body.theme-1 .link-8-copy.w--current { color: var(--t1-accent-1) !important; text-decoration: none !important; } body.theme-1 .paragraph-33 { color: var(--t1-text-muted) !important; } /* ── Footer ─────────────────────────────────────────── */ [data-theme="theme-1"] .footer, body.theme-1 .footer { background-image: none !important; background-color: var(--t1-bg-alt) !important; border-top: 4px solid var(--t1-accent-1) !important; color: var(--t1-text) !important; } [data-theme="theme-1"] .text-block-32, body.theme-1 .text-block-32 { color: var(--t1-text-muted); } [data-theme="theme-1"] .footer-social-icon, body.theme-1 .footer-social-icon { color: var(--t1-text); } [data-theme="theme-1"] .footer-social-icon:hover, body.theme-1 .footer-social-icon:hover { color: var(--t1-accent-1); filter: drop-shadow(2px 2px 0px #c4547a); } /* ── Home ───────────────────────────────────────────── */ [data-theme="theme-1"] body.body-home, body.theme-1.body-home { background-color: var(--t1-bg) !important; background-image: none !important; } [data-theme="theme-1"] body.body-home #home-hero-section, body.theme-1.body-home #home-hero-section { background-image: url('/images/shared/bg-green.png') !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; } [data-theme="theme-1"] .hero-heading-h1, body.theme-1 .hero-heading-h1 { color: var(--t1-accent-1); } [data-theme="theme-1"] .home-heading-h2, body.theme-1 .home-heading-h2 { color: var(--t1-accent-3); text-shadow: var(--t1-pixel-shadow); } /* ── About Me ───────────────────────────────────────── */ [data-theme="theme-1"] body.body-about-me, body.theme-1.body-about-me { background-color: var(--t1-bg) !important; background-image: none !important; } [data-theme="theme-1"] .about-card-1, body.theme-1 .about-card-1 { background-color: var(--t1-surface) !important; border: 3px solid var(--t1-accent-4) !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #1a3d2e !important; } [data-theme="theme-1"] .about-card-2, body.theme-1 .about-card-2 { background-color: var(--t1-surface-alt) !important; border: 3px solid var(--t1-accent-5) !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #2d1f4a !important; } [data-theme="theme-1"] .about-card-3, body.theme-1 .about-card-3 { background-color: var(--t1-surface) !important; border: 3px solid var(--t1-accent-2) !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #1a3040 !important; } [data-theme="theme-1"] .about-card-5, body.theme-1 .about-card-5 { background-color: var(--t1-surface-alt) !important; border: 3px solid var(--t1-accent-1) !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #4a1a2e !important; } /* ── Pixel flower button ─────────────────────────────── */ [data-theme="theme-1"] .contact-submit-btn, body.theme-1 .contact-submit-btn { position: relative; background-color: var(--t1-accent-1) !important; color: #1a1a2e !important; border: none !important; border-radius: 0 !important; padding: 12px 32px 12px 48px !important; box-shadow: 4px 4px 0px #c4547a, inset -2px -2px 0px rgba(0, 0, 0, 0.15) !important; cursor: pointer; font-weight: bold !important; letter-spacing: 1px; } [data-theme="theme-1"] .contact-submit-btn::before, body.theme-1 .contact-submit-btn::before { content: "❋"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; animation: pixel-bounce 1s steps(2, end) infinite; } [data-theme="theme-1"] .contact-submit-btn:hover, body.theme-1 .contact-submit-btn:hover { background-color: var(--t1-accent-3) !important; color: #1a1a2e !important; transform: translate(2px, 2px); box-shadow: 2px 2px 0px #c4547a !important; } [data-theme="theme-1"] .contact-submit-btn:hover::before, body.theme-1 .contact-submit-btn:hover::before { content: "❋"; } /* Generic btn/button in about + portfolio sections */ [data-theme="theme-1"] body.body-about-me [class*="btn"]:not(.btn-icon), [data-theme="theme-1"] body.body-about-me [class*="button"], body.theme-1.body-about-me [class*="btn"]:not(.btn-icon), body.theme-1.body-about-me [class*="button"] { color: #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #1a3d2e !important; } [data-theme="theme-1"] body.body-about-me [class*="btn"]:not(.contact-submit-btn):not(.btn-icon)::before, body.theme-1.body-about-me [class*="btn"]:not(.contact-submit-btn):not(.btn-icon)::before { content: "❋"; margin-right: 8px; } [data-theme="theme-1"] body.body-2 [class*="btn"]:not(.btn-icon), [data-theme="theme-1"] body.body-2 [class*="button"], body.theme-1.body-2 [class*="btn"]:not(.btn-icon), body.theme-1.body-2 [class*="button"] { color: #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px var(--t1-bg) !important; } [data-theme="theme-1"] body.body-2 [class*="btn"]:not(.contact-submit-btn):not(.btn-icon)::before, body.theme-1.body-2 [class*="btn"]:not(.contact-submit-btn):not(.btn-icon)::before { content: "❋"; margin-right: 8px; } @keyframes pixel-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ── Portfolio ──────────────────────────────────────── */ [data-theme="theme-1"] body.body-2, body.theme-1.body-2 { background-color: var(--t1-bg) !important; background-image: none !important; } [data-theme="theme-1"] .portfolio-section, body.theme-1 .portfolio-section { color: var(--t1-text); } [data-theme="theme-1"] .title-card-portfolio, body.theme-1 .title-card-portfolio { color: var(--t1-accent-1); } [data-theme="theme-1"] .paragraph-card-portfolio, body.theme-1 .paragraph-card-portfolio { color: var(--t1-text-muted); } [data-theme="theme-1"] .title-name-portfolio-project, body.theme-1 .title-name-portfolio-project { color: var(--t1-text); } /* ── Hero button inner text ─────────────────────────── */ [data-theme="theme-1"] .text-button-blue, body.theme-1 .text-button-blue { color: #1a1a2e !important; } [data-theme="theme-1"] .text-button-blue-copy, body.theme-1 .text-button-blue-copy { color: #1a1a2e !important; } /* ── Hero buttons ───────────────────────────────────── */ [data-theme="theme-1"] .button-blue-big, body.theme-1 .button-blue-big { background-color: var(--t1-accent-2) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #1a1a2e !important; justify-content: center !important; gap: 10px !important; font-weight: bold !important; transition: none !important; } [data-theme="theme-1"] .button-blue-big::before, body.theme-1 .button-blue-big::before { content: "❋"; font-size: 16px; flex-shrink: 0; animation: pixel-bounce 0.8s steps(2, end) infinite; } [data-theme="theme-1"] .button-blue-big:hover, body.theme-1 .button-blue-big:hover { background-color: var(--t1-accent-3) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #1a1a2e !important; } [data-theme="theme-1"] .button-blue-big:hover::before, body.theme-1 .button-blue-big:hover::before { content: "❋"; } [data-theme="theme-1"] .button-white-big, body.theme-1 .button-white-big { background-color: var(--t1-accent-1) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #c4547a !important; justify-content: center !important; gap: 10px !important; font-weight: bold !important; transition: none !important; } [data-theme="theme-1"] .button-white-big::before, body.theme-1 .button-white-big::before { content: "❋"; font-size: 16px; flex-shrink: 0; animation: pixel-bounce 0.8s steps(2, end) infinite; animation-delay: 0.4s; } [data-theme="theme-1"] .button-white-big:hover, body.theme-1 .button-white-big:hover { background-color: var(--t1-accent-5) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #c4547a !important; } [data-theme="theme-1"] .button-white-big:hover::before, body.theme-1 .button-white-big:hover::before { content: "❋"; } /* ── Project card buttons (home + about + portfolio) ── */ body.theme-1.body-home .button-white-project-nico, body.theme-1.body-about-me .button-white-project-nico, body.theme-1.body-2 .button-white-project-nico { background-color: var(--t1-accent-4) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #1a3d2e !important; justify-content: center !important; gap: 8px !important; font-weight: bold !important; transition: none !important; } body.theme-1.body-home .button-white-project-nico::before, body.theme-1.body-about-me .button-white-project-nico::before, body.theme-1.body-2 .button-white-project-nico::before { content: "❋"; font-size: 14px; flex-shrink: 0; animation: pixel-bounce 0.8s steps(2, end) infinite; } body.theme-1.body-home .button-white-project-nico:hover, body.theme-1.body-about-me .button-white-project-nico:hover, body.theme-1.body-2 .button-white-project-nico:hover { background-color: var(--t1-accent-2) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #1a3d2e !important; } body.theme-1.body-home .button-white-project-nico:hover::before, body.theme-1.body-about-me .button-white-project-nico:hover::before, body.theme-1.body-2 .button-white-project-nico:hover::before { content: "❋"; } /* ── Home-only buttons ────────────────────────────── */ body.theme-1.body-home .button-pink { background-color: var(--t1-accent-1) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #c4547a !important; justify-content: center !important; gap: 8px !important; font-weight: bold !important; transition: none !important; } body.theme-1.body-home .button-pink::before { content: "❋"; font-size: 14px; flex-shrink: 0; animation: pixel-bounce 0.8s steps(2, end) infinite; animation-delay: 0.2s; } body.theme-1.body-home .button-pink:hover { background-color: var(--t1-accent-3) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #c4547a !important; } body.theme-1.body-home .button-pink:hover::before { content: "❋"; } body.theme-1.body-home .button-white-2 { background-color: var(--t1-accent-2) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #1a3040 !important; justify-content: center !important; gap: 8px !important; font-weight: bold !important; transition: none !important; } body.theme-1.body-home .button-white-2::before { content: "❋"; font-size: 14px; flex-shrink: 0; animation: pixel-bounce 0.8s steps(2, end) infinite; animation-delay: 0.6s; } body.theme-1.body-home .button-white-2:hover { background-color: var(--t1-accent-5) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #1a3040 !important; } body.theme-1.body-home .button-white-2:hover::before { content: "❋"; } /* let-s-collaborate — has arrow image inside, skip ::before */ body.theme-1.body-home .let-s-collaborate { background-color: var(--t1-accent-3) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #3d3400 !important; font-weight: bold !important; transition: none !important; } body.theme-1.body-home .let-s-collaborate:hover { background-color: var(--t1-accent-1) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #3d3400 !important; } /* c2a-button-copy — misma estructura en navbar y secciones CTA */ body.theme-1 .c2a-button-copy { display: flex !important; box-sizing: border-box !important; background-color: var(--t1-accent-2) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #1a1a2e !important; justify-content: flex-start !important; align-items: center !important; align-self: center !important; gap: 10px !important; font-family: 'PixelOperator', monospace !important; font-size: 15px !important; font-weight: bold !important; line-height: 1 !important; padding: 6px 6px 6px 16px !important; height: 48px !important; min-width: unset !important; width: auto !important; transition: none !important; } body.theme-1 .c2a-button-copy .text-block-5-copy { font-family: 'PixelOperator', monospace !important; color: #1a1a2e !important; font-size: 15px !important; line-height: 1 !important; white-space: nowrap; } body.theme-1 .c2a-button-copy .btn-icon { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: white !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; flex-shrink: 0 !important; } body.theme-1 .c2a-button-copy .btn-icon img { width: 13px !important; height: 13px !important; } body.theme-1 .c2a-button-copy::before { content: "❋"; font-size: 14px; flex-shrink: 0; animation: pixel-bounce 0.8s steps(2, end) infinite; } body.theme-1 .c2a-button-copy:hover { background-color: var(--t1-accent-3) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #1a1a2e !important; } body.theme-1 .c2a-button-copy:hover::before { content: "❋"; } body.theme-1 .c2a-button-copy:hover .btn-icon { background: var(--t1-accent-3) !important; } /* ── About-only buttons ───────────────────────────── */ body.theme-1.body-about-me .button-pink-secondary { background-color: var(--t1-accent-5) !important; color: #1a1a2e !important; border: 3px solid #1a1a2e !important; border-radius: 0 !important; box-shadow: 4px 4px 0px #2d1f4a !important; justify-content: center !important; gap: 8px !important; font-weight: bold !important; transition: none !important; } body.theme-1.body-about-me .button-pink-secondary::before { content: "❋"; font-size: 16px; flex-shrink: 0; animation: pixel-bounce 0.8s steps(2, end) infinite; animation-delay: 0.3s; } body.theme-1.body-about-me .button-pink-secondary:hover { background-color: var(--t1-accent-4) !important; transform: translate(3px, 3px); box-shadow: 1px 1px 0px #2d1f4a !important; } body.theme-1.body-about-me .button-pink-secondary:hover::before { content: "❋"; }