open-web-inspector/examples/production-css-test/styles/main.css

The open source web element inspector - AI-controllable DOM inspection with live CSS editing, hover highlighting, and developer tools integration

/* Main CSS - Production-style @import architecture 
   This simulates the exact pattern we encountered on the real production website
   where main.css uses @import to load component-specific stylesheets
*/

/* External font imports (cross-origin) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lalezar&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap");

/* Component imports (local files) */
@import url("components/layout.css");
@import url("components/hero.css");
@import url("components/test-elements.css");
@import url("components/buttons.css");

/* Additional base styles that might be in main.css */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --text-color: #2d3748;
    --text-light: #718096;
    --bg-light: #f7fafc;
    --border-color: #e2e8f0;
    --shadow: 0 4px 12px rgba(0,0,0,0.1);
    --border-radius: 8px;
}

/* Global utility classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.hidden { display: none; }
.visible { display: block; }

/* CSS that might override component styles (testing specificity) */
.hero .hero__title {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.test-element {
    /* This should override the component style for specificity testing */
    box-shadow: var(--shadow);
}

/* Print styles (often found in main.css) */
@media print {
    body {
        background: white !important;
    }
    
    .hero {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}