/* ================================================================================ SECTION B – ADVANCED CSS THEORY & ARCHITECTURE ================================================================================ 1. SPECIFICITY HIERARCHY: - Inline styles: 1000 - IDs (#id): 100 - Classes, attributes, pseudo-classes (.class, [attr], :hover): 10 - Elements, pseudo-elements (div, ::before): 1 - !important: Overrides all, but should be used as a last resort in debt-heavy systems. - The "Layer" (@layer) allows us to define cascade precedence regardless of specificity. 2. STACKING CONTEXT: - Formed by the root element, fixed/sticky positioning, opacity < 1, transform, filter, will-change, or explicit z-index on positioned elements. - Child elements cannot be placed behind their parent's stacking context. - Properties like 'isolation: isolate' create a new stacking context. 3. POSITIONING TYPES: - static: Default, follows normal document flow. - relative: Offset from its normal position without affecting siblings. - absolute: Offset from the nearest positioned ancestor. - fixed: Offset relative to the viewport. - sticky: Hybrid of relative and fixed based on scroll position. 4. CASCADE & INHERITANCE: - The Cascade combines Origin (Author vs User Agent), Importance, Specificity, and Order of Appearance. - Inheritance allows properties like color/font-family to pass down the tree. - 'all: unset' or 'all: revert' can be used to control this. 5. BOX MODEL DEEP EXPLANATION: - Content: The actual content (text/images). - Padding: Space between content and border. - Border: Wraps content and padding. - Margin: Space outside the border. - box-sizing: border-box (padding/border inside width) vs content-box (outside). 6. LOGICAL PROPERTIES: - margin-inline vs margin-left/right. - margin-block vs margin-top/bottom. - Essential for Internationalization (RTL vs LTR support). 7. UNITS: - em: Relative to parent font-size. - rem: Relative to root element font-size. - vh/vw: Viewport height/width. - ch: Advance measure of the "0" glyph in the current font. - clamp(min, val, max): Fluid scaling without media queries. 8. RESET STRATEGY (Modern): - Using box-sizing: border-box globally. - Removing default margins. - Ensuring media (img, video) is responsive (max-width: 100%). - Inheriting fonts on input elements. 9. CSS CONTAINMENT: - 'contain': allows browsers to optimize rendering by isolating parts of the DOM. - 'layout', 'paint', 'size', 'content', 'strict'. 10. CUSTOM PROPERTIES (CSS Variables): - Scopeable, dynamic, and accessible via JavaScript. - Unlike Sass variables, they are part of the runtime CSSOM. 11. BEM METHODOLOGY: - Block: Independent component (.card). - Element: Part of a block (.card__image). - Modifier: Version of a block/element (.card--featured). 12. PREFERS-REDUCED-MOTION: - A media query that respects user OS settings to disable or simplify animations. 13. CONTAINER QUERIES: - @container (min-width: ...): Responsive design based on the parent's size, not the viewport. Requires 'container-type: inline-size'. 14. WILL-CHANGE & ISOLATION: - will-change: Hints to the browser to promote an element to its own layer for GPU acceleration. - isolation: isolate: Forces a new stacking context. 15. CRITICAL CSS: - The minimum set of CSS required to render the Above-the-Fold (ATF) content. - Normally inlined in the for performance. ================================================================================ DESIGN SYSTEM & TOKENS ================================================================================ */ :root { /* Color Palette - Premium HSL based */ --primary-h: 230; --primary-s: 60%; --primary-l: 50%; --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --primary-light: hsl(var(--primary-h), var(--primary-s), 95%); --primary-dark: hsl(var(--primary-h), var(--primary-s), 30%); --accent: hsl(15, 90%, 55%); --success: hsl(150, 60%, 45%); --warning: hsl(45, 90%, 50%); --danger: hsl(0, 80%, 60%); /* Neutral Scale */ --bg-main: hsl(220, 20%, 98%); --bg-surface: hsl(0, 0%, 100%); --text-main: hsl(220, 40%, 15%); --text-muted: hsl(220, 10%, 45%); --border: hsl(220, 15%, 90%); /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); /* Layout */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --container-width: 1200px; --section-spacing: clamp(4rem, 10vh, 8rem); } /* Dark Mode Overrides */ @media (prefers-color-scheme: dark) { :root { --bg-main: hsl(220, 30%, 5%); --bg-surface: hsl(220, 30%, 10%); --text-main: hsl(220, 20%, 95%); --text-muted: hsl(220, 10%, 75%); --border: hsl(220, 20%, 20%); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); } } /* Base Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Base for rem */ } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; line-height: 1.6; background-color: var(--bg-main); color: var(--text-main); overflow-x: hidden; } /* Fluid Typography */ h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; font-weight: 800; } h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; font-weight: 700; margin-bottom: 1rem; } h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; } p { margin-bottom: 1.5rem; color: var(--text-muted); } img, video { max-width: 100%; height: auto; display: block; } /* ================================================================================ LAYOUT CLASSES (Section C) ================================================================================ */ .container { width: min(var(--container-width), 100% - 3rem); margin-inline: auto; } .section { padding-block: var(--section-spacing); border-bottom: 1px solid var(--border); } .section-title { text-align: center; margin-bottom: 4rem; } /* 12-Column Grid Demo */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-bottom: 2rem; } .grid-12 div { background: var(--primary-light); color: var(--primary); padding: 1rem; text-align: center; border-radius: var(--radius-sm); font-weight: bold; border: 1px solid var(--primary); } /* Masonry Layout (CSS Grid based) */ .masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 10px; gap: 1rem; } .masonry-item { background: var(--bg-surface); border-radius: var(--radius-md); padding: 1rem; box-shadow: var(--shadow-sm); } .item-short { grid-row-end: span 15; } .item-tall { grid-row-end: span 25; } .item-medium { grid-row-end: span 20; } /* Sticky Sidebar Layout */ .with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; } @media (max-width: 768px) { .with-sidebar { grid-template-columns: 1fr; } } .sidebar { position: sticky; top: 2rem; height: fit-content; background: var(--bg-surface); padding: 2rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } /* Hero with Overlay */ .hero { position: relative; height: 80vh; display: grid; place-items: center; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop'); background-size: cover; background-position: center; color: white; text-align: center; padding: 2rem; } .hero h1 { color: white; margin-bottom: 1.5rem; } /* ================================================================================ COMPONENTS & EFFECTS (Section D & F) ================================================================================ */ /* Animated Border Button */ .btn-animated { position: relative; padding: 1rem 2rem; background: transparent; color: var(--primary); border: none; cursor: pointer; font-weight: 600; overflow: hidden; } .btn-animated::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--primary); transition: transform 0.3s; } .btn-animated:hover::before { transform: scale(1.05); } /* Loading Spinner */ .spinner { width: 50px; height: 50px; border: 5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 2rem auto; } @keyframes spin { to { transform: rotate(360deg); } } /* Glassmorphism */ .glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 2rem; border-radius: var(--radius-lg); color: var(--text-main); } /* Neumorphism */ .neu-card { background: var(--bg-main); box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.7); padding: 2rem; border-radius: var(--radius-lg); } @media (prefers-color-scheme: dark) { .neu-card { box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5), -8px -8px 16px rgba(255, 255, 255, 0.05); } } /* 3D Hover Card */ .card-3d { perspective: 1000px; width: 300px; height: 400px; } .card-3d-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .card-3d:hover .card-3d-inner { transform: rotateY(180deg); } .card-3d-front, .card-3d-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: grid; place-items: center; border-radius: var(--radius-md); font-weight: bold; } .card-3d-front { background: var(--primary); color: white; } .card-3d-back { background: var(--accent); color: white; transform: rotateY(180deg); } /* Skeleton Loading */ .skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--bg-surface) 50%, var(--border) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; height: 1rem; border-radius: var(--radius-sm); margin-bottom: 0.5rem; } @keyframes skeleton-loading { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ================================================================================ RESPONSIVE DESIGN (Section E) ================================================================================ */ /* Accessible Hamburger Menu */ .menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; background: none; border: none; z-index: 1000; } .menu-toggle span { width: 30px; height: 3px; background: var(--text-main); transition: 0.3s; } @media (max-width: 768px) { .menu-toggle { display: flex; } .nav-links { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--bg-surface); flex-direction: column; justify-content: center; align-items: center; gap: 2rem; } #menu-state:checked~.nav-links { display: flex; } } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Orientation Based Layout */ @media (orientation: landscape) and (max-height: 500px) { .hero { height: auto; padding-block: 4rem; } } /* ================================================================================ ACCESSIBILITY HELPERS ================================================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Focus Styles */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } /* Advanced Forms (Floating Label) */ .form-group { position: relative; margin-bottom: 2rem; } .form-input { width: 100%; padding: 1rem; border: 2px solid var(--border); background: transparent; border-radius: var(--radius-sm); color: var(--text-main); } .form-label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; transition: 0.3s; color: var(--text-muted); } .form-input:focus+.form-label, .form-input:not(:placeholder-shown)+.form-label { top: 0; background: var(--bg-surface); padding-inline: 0.5rem; font-size: 0.85rem; color: var(--primary); } /* ================================================================================ MASTER PROJECT STYLING (Section F) ================================================================================ */ /* Multi-level Dropdown (CSS Only) */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background: var(--bg-surface); min-width: 200px; box-shadow: var(--shadow-md); z-index: 10; } .dropdown:hover>.dropdown-content { display: block; } .sub-dropdown-content { display: none; position: absolute; left: 100%; top: 0; background: var(--bg-surface); min-width: 200px; } .dropdown-item:hover>.sub-dropdown-content { display: block; } /* Pricing Table */ .pricing-container { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; } .pricing-card { background: var(--bg-surface); padding: 3rem; border-radius: var(--radius-lg); border: 2px solid var(--border); transition: 0.3s; width: min(100%, 350px); } .pricing-card.featured { border-color: var(--primary); transform: scale(1.05); } /* Parallax (CSS Only) */ .parallax-container { height: 50vh; overflow-x: hidden; overflow-y: auto; perspective: 1px; } .parallax-group { position: relative; height: 100vh; transform-style: preserve-3d; } .parallax-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .parallax-back { transform: translateZ(-1px) scale(2); background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop'); background-size: cover; } .parallax-base { transform: translateZ(0); display: flex; align-items: center; justify-content: center; color: white; }