/** * ============================================================================ * Fredo Productions - Editorial Style Override * ============================================================================ * * Premium/editorial aesthetic with squared components. * Applied when [data-style="editorial"] is on */ [data-style="editorial"] { /* Muted color palette */ --color-primary: #c96a2c; --color-primary-dark: #a85520; --color-primary-light: #d4865a; --color-primary-rgb: 201, 106, 44; /* Minimal border radius */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 5px; --radius-full: 5px; } /* Buttons - Editorial Style */ [data-style="editorial"] .btn { border-radius: 5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--font-medium); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-style="editorial"] .btn-primary { background: var(--color-primary); border: 2px solid var(--color-primary); } [data-style="editorial"] .btn-primary:hover { background: transparent; color: var(--color-primary); } [data-style="editorial"] .btn-white { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); } [data-style="editorial"] .btn-white:hover { background: var(--color-white); color: var(--color-black); } /* Cards - Editorial Style */ [data-style="editorial"] .service-card, [data-style="editorial"] .card { border-radius: 5px; border: 1px solid var(--color-gray-200); box-shadow: none; transition: all 0.4s ease; } [data-style="editorial"] .service-card:hover, [data-style="editorial"] .card:hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); transform: none; } /* Service Showcase Images - Editorial Style */ [data-style="editorial"] .service-showcase-image { clip-path: none; border-radius: 5px; } [data-style="editorial"] .service-showcase-reverse .service-showcase-image { clip-path: none; } [data-style="editorial"] .service-showcase-image::after { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%); opacity: 1; } [data-style="editorial"] .service-showcase:hover .service-showcase-image::after { background: linear-gradient(180deg, transparent 40%, rgba(var(--color-primary-rgb),0.3) 100%); } /* Hero Section - Editorial Style */ [data-style="editorial"] .hero-title { letter-spacing: 0.02em; font-weight: var(--font-normal); } [data-style="editorial"] .hero-tagline { letter-spacing: 0.25em; font-size: var(--text-xs); } [data-style="editorial"] .hero-buttons { gap: var(--space-4); } /* Section Headings - Editorial Style */ [data-style="editorial"] .section-heading h1, [data-style="editorial"] .section-heading h2 { position: relative; display: inline-block; } [data-style="editorial"] .section-heading h1::after, [data-style="editorial"] .section-heading h2::after { content: ''; position: absolute; bottom: -0.5rem; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: var(--color-primary); } /* Navigation - Editorial Style */ [data-style="editorial"] .main-nav a { letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-xs); } [data-style="editorial"] .main-nav a::after { height: 1px; } /* Footer - Editorial Style */ [data-style="editorial"] .site-footer { border-top: 1px solid var(--color-gray-700); } [data-style="editorial"] .footer-heading { letter-spacing: 0.15em; text-transform: uppercase; font-size: var(--text-xs); } /* Form Inputs - Editorial Style */ [data-style="editorial"] input, [data-style="editorial"] textarea, [data-style="editorial"] select { border-radius: 5px; border: 1px solid var(--color-gray-300); transition: border-color 0.3s ease; } [data-style="editorial"] input:focus, [data-style="editorial"] textarea:focus, [data-style="editorial"] select:focus { border-color: var(--color-primary); box-shadow: none; outline: none; } /* Scroll Indicator - Editorial Style */ [data-style="editorial"] .scroll-indicator { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.65rem; } /* Why Choose Us / Feature Cards - Editorial Style */ [data-style="editorial"] .feature-card { border-radius: 5px; border: 1px solid var(--color-gray-200); } [data-style="editorial"] .feature-icon { border-radius: 5px; } /* Social Icons - Editorial Style */ [data-style="editorial"] .social-icon { border-radius: 5px; border: 1px solid currentColor; } /* Badge Links - Editorial Style */ [data-style="editorial"] .badge-link img { border-radius: 5px; } /* CTA Buttons in Footer - Editorial Style */ [data-style="editorial"] .footer-cta { border-radius: 5px; } /* Mobile Menu - Editorial Style */ @media (max-width: 768px) { [data-style="editorial"] .service-showcase-image { clip-path: none; } }