/* ============================================ GLOBAL SITE STYLES - NEUBRUTALISM DESIGN ============================================ */ /* Note: Neubrutalism design system is imported in HTML */ /* This ensures proper loading order and compatibility with servers */ body { font-family: var(--nb-font-primary); background-color: var(--nb-bg-light); color: var(--nb-text-primary); margin: 0; padding: 0; /* Comprehensive text overflow protection */ word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; /* Prevent horizontal overflow */ overflow-x: hidden; } /* Global overflow protection for all elements */ * { box-sizing: border-box; } /* Prevent long words and URLs from breaking layout */ p, li, td, th, div, span, a, h1, h2, h3, h4, h5, h6 { word-wrap: break-word; overflow-wrap: break-word; } /* Ensure all containers respect viewport width */ div, section, article, main, header, footer, nav { max-width: 100%; } /* Container - Neubrutalism style */ .container { width: 100%; max-width: 1400px; /* Aligned with nav-container */ margin: 0 auto; padding: 0 clamp(12px, 4vw, 24px); /* Fluid padding for all screens */ } /* Common utility classes - Neubrutalism */ .mb-12 { margin-bottom: var(--nb-space-16); } .mb-8 { margin-bottom: var(--nb-space-12); } .mb-6 { margin-bottom: var(--nb-space-8); } .mb-4 { margin-bottom: var(--nb-space-6); } .mb-2 { margin-bottom: var(--nb-space-3); } .mt-4 { margin-top: var(--nb-space-6); } .mt-2 { margin-top: var(--nb-space-3); } .mt-1 { margin-top: var(--nb-space-2); } .text-center { text-align: center; } /* Responsive typography with fluid scaling using clamp() */ .text-5xl { font-size: clamp(32px, 5vw, 48px); /* Was 48px fixed */ line-height: var(--nb-leading-tight); font-weight: var(--nb-font-bold); } .text-4xl { font-size: clamp(28px, 4.5vw, 36px); /* Was 36px fixed */ line-height: var(--nb-leading-tight); font-weight: var(--nb-font-bold); } .text-2xl { font-size: clamp(20px, 3.5vw, 24px); /* Was 24px fixed */ line-height: var(--nb-leading-normal); font-weight: var(--nb-font-bold); } .text-xl { font-size: clamp(18px, 2.5vw, 20px); /* Was 20px fixed */ line-height: var(--nb-leading-normal); } .text-lg { font-size: clamp(15px, 2vw, 16px); /* Was 16px fixed */ line-height: var(--nb-leading-relaxed); } .text-sm { font-size: clamp(13px, 1.75vw, 14px); /* Was 14px fixed */ line-height: var(--nb-leading-normal); } .font-bold { font-weight: var(--nb-font-bold); } .font-semibold { font-weight: var(--nb-font-semibold); } .px-4 { padding-left: var(--nb-space-4); padding-right: var(--nb-space-4); } .py-8 { padding-top: var(--nb-space-12); padding-bottom: var(--nb-space-12); } .py-2 { padding-top: var(--nb-space-2); padding-bottom: var(--nb-space-2); } /* Layout utilities */ .flex { display: flex; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .items-center { align-items: center; } .gap-4 { gap: var(--nb-space-4); } .gap-3 { gap: var(--nb-space-3); } /* NO ROUNDED CORNERS - Neubrutalism */ border-radius: 0 !important; } /* ============================================ DARK THEME - NEUBRUTALISM ============================================ */ [data-theme='dark'] body { background-color: var(--nb-bg-light) !important; } [data-theme='dark'] .container { background-color: transparent; } [data-theme='dark'] body>div:first-of-type, [data-theme='dark'] body>.container:first-of-type { background-color: var(--nb-bg-light) !important; } [data-theme='dark'] #language-switcher-container, [data-theme='dark'] #theme-switcher-container { background-color: transparent; } [data-theme='dark'] header.text-center { background-color: var(--nb-bg-light) !important; padding-top: var(--nb-space-4); padding-bottom: var(--nb-space-4); } [data-theme='dark'] .flex.justify-end, [data-theme='dark'] .flex.justify-between { background-color: transparent; } /* ============================================ COURSE CARDS - NEUBRUTALISM STYLE ============================================ */ .course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--nb-space-6); } .course-overview-card { background: var(--nb-bg-white); border: var(--nb-border-thick) solid var(--nb-border-dark); box-shadow: var(--nb-shadow-lg); padding: var(--nb-space-6); transition: all var(--nb-transition-normal); cursor: pointer; } .course-overview-card:hover { transform: translate(-2px, -2px); box-shadow: var(--nb-shadow-xl); } .course-overview-card h3 { color: var(--nb-comp); font-size: clamp(16px, 2.5vw, 20px); /* Responsive heading */ font-weight: var(--nb-font-bold); margin-bottom: var(--nb-space-2); text-transform: uppercase; overflow-wrap: break-word; word-wrap: break-word; } .course-overview-card h4 { color: var(--nb-text-primary); font-size: clamp(14px, 2vw, 16px); /* Responsive subheading */ font-weight: var(--nb-font-bold); margin-bottom: var(--nb-space-3); overflow-wrap: break-word; word-wrap: break-word; } .course-overview-card p { color: var(--nb-text-secondary); font-size: clamp(12px, 1.75vw, 14px); /* Responsive body text */ line-height: var(--nb-leading-relaxed); overflow-wrap: break-word; word-wrap: break-word; } .course-link { text-decoration: none; display: block; } /* Premium Badge - Neubrutalism */ .premium-badge { display: inline-flex; align-items: center; gap: var(--nb-space-1); padding: var(--nb-space-1) var(--nb-space-3); background: var(--nb-premium); color: var(--nb-text-primary); font-size: var(--nb-text-xs); font-weight: var(--nb-font-bold); border: var(--nb-border-normal) solid var(--nb-border-dark); box-shadow: var(--nb-shadow-sm); text-transform: uppercase; letter-spacing: 0.025em; } .premium-badge-icon { font-size: var(--nb-text-sm); } /* Premium lock overlay - Neubrutalism */ .premium-locked { position: relative; opacity: 0.7; } .premium-locked::after { content: '🔒'; position: absolute; top: var(--nb-space-2); right: var(--nb-space-2); font-size: var(--nb-text-xl); opacity: 0.6; } /* ============================================ BUTTONS - NEUBRUTALISM STYLE ============================================ */ /* Color utilities - Neubrutalism */ .bg-\[#e07a5f\] { background-color: var(--nb-comp); } .text-white { color: var(--nb-text-white); } .text-\[#e07a5f\] { color: var(--nb-comp); } .border { border-width: var(--nb-border-normal); } .border-\[#e07a5f\] { border-color: var(--nb-comp); } /* Transition */ .transition { transition: all var(--nb-transition-normal); } .duration-200 { transition-duration: var(--nb-transition-normal); } /* Button base styles - Neubrutalism */ button, input[type="button"], input[type="submit"] { font-family: var(--nb-font-primary) !important; font-size: var(--nb-text-base) !important; font-weight: var(--nb-font-bold) !important; line-height: 1 !important; margin: 0 !important; padding: 12px 24px !important; border: var(--nb-border-normal) solid var(--nb-border-dark) !important; background: var(--nb-bg-white) !important; color: var(--nb-text-primary) !important; cursor: pointer !important; text-decoration: none !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; outline: none !important; box-shadow: var(--nb-shadow-md) !important; transition: all var(--nb-transition-fast) !important; .rounded-md, .rounded-lg, .rounded-xl, .rounded-full { border-radius: 0 !important; } button:hover, input[type="button"]:hover, input[type="submit"]:hover { transform: translate(2px, 2px) !important; box-shadow: var(--nb-shadow-sm) !important; } button:active, input[type="button"]:active, input[type="submit"]:active { transform: translate(4px, 4px) !important; box-shadow: none !important; } /* Login button - Neubrutalism */ #login-btn { background-color: var(--nb-comp) !important; color: var(--nb-text-white) !important; border-color: var(--nb-border-dark) !important; } #login-btn:hover { transform: translate(2px, 2px) !important; box-shadow: var(--nb-shadow-sm) !important; } /* Upgrade button - Neubrutalism outline style */ button[onclick*="showStripeCheckoutModal"] { background-color: var(--nb-bg-white) !important; color: var(--nb-comp) !important; border-color: var(--nb-border-dark) !important; } button[onclick*="showStripeCheckoutModal"]:hover { background-color: var(--nb-bg-light) !important; } /* General cards - Neubrutalism (already defined above, this is for compatibility) */ .course-card { background-color: var(--nb-bg-white); border: var(--nb-border-thick) solid var(--nb-border-dark); box-shadow: var(--nb-shadow-lg); padding: var(--nb-space-6); margin-top: var(--nb-space-4); transition: all var(--nb-transition-normal); } .course-card:hover { transform: translate(-2px, -2px); box-shadow: var(--nb-shadow-xl); } /* Course Overview Cards - Neubrutalism (already defined above) */ /* Removed duplicate - using the Neubrutalism version defined earlier */ @media (min-width: 768px) { .course-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .course-grid { grid-template-columns: repeat(4, 1fr); } } /* ============================================ BADGES - NEUBRUTALISM STYLE ============================================ */ .notion-badge { display: inline-block; background-color: var(--nb-accent-yellow); color: var(--nb-text-primary); font-size: var(--nb-text-xs); font-weight: var(--nb-font-bold); padding: var(--nb-space-1) var(--nb-space-3); border: var(--nb-border-normal) solid var(--nb-border-dark); box-shadow: var(--nb-shadow-sm); margin-top: var(--nb-space-2); text-transform: uppercase; } .local-badge { display: inline-block; background-color: var(--nb-border-gray); color: var(--nb-text-white); font-size: var(--nb-text-xs); font-weight: var(--nb-font-bold); padding: var(--nb-space-1) var(--nb-space-3); border: var(--nb-border-normal) solid var(--nb-border-dark); box-shadow: var(--nb-shadow-sm); margin-top: var(--nb-space-2); text-transform: uppercase; } .external-link::after { content: " \2197"; /* ↗ */ font-size: var(--nb-text-sm); opacity: 0.7; } /* Premium badge - Neubrutalism (already defined above, this overrides duplicates) */ .premium-badge { display: inline-block; background: var(--nb-premium); color: var(--nb-text-primary); font-size: var(--nb-text-xs); font-weight: var(--nb-font-bold); padding: var(--nb-space-1) var(--nb-space-3); border: var(--nb-border-normal) solid var(--nb-border-dark); box-shadow: var(--nb-shadow-sm); margin-top: var(--nb-space-2); text-transform: uppercase; } /* ============================================ PREMIUM STYLES - NEUBRUTALISM ============================================ */ .premium-card { border: var(--nb-border-thick) solid var(--nb-border-dark); background: var(--nb-premium); position: relative; box-shadow: var(--nb-shadow-lg); transition: all var(--nb-transition-normal); } .premium-card:hover { transform: translate(-2px, -2px); box-shadow: var(--nb-shadow-xl); } .premium-card::before { content: '👑'; position: absolute; top: var(--nb-space-2); right: var(--nb-space-2); font-size: var(--nb-text-base); z-index: 5; } /* Premium button - Neubrutalism */ .premium-button { background: var(--nb-premium); color: var(--nb-text-primary); border: var(--nb-border-normal) solid var(--nb-border-dark); box-shadow: var(--nb-shadow-md); padding: 12px 24px; font-weight: var(--nb-font-bold); cursor: pointer; transition: all var(--nb-transition-fast); position: relative; text-transform: uppercase; } .premium-button:hover { transform: translate(2px, 2px); box-shadow: var(--nb-shadow-sm); } .premium-button:active { transform: translate(4px, 4px); box-shadow: none; } .premium-button::before { content: '👑'; margin-right: var(--nb-space-2); } /* Premium locked - Neubrutalism */ .premium-locked { position: relative; opacity: 0.6; pointer-events: none; } .premium-locked::before { content: "\1F512"; /* 🔒 */ position: absolute; top: var(--nb-space-2); right: var(--nb-space-2); background: var(--nb-bg-white); border: var(--nb-border-normal) solid var(--nb-border-dark); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--nb-text-sm); z-index: 10; } .premium-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1); border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .premium-overlay:hover { background: rgba(224, 122, 95, 0.1); } /* Back button */ .back-button { background-color: var(--nb-bg-white); color: var(--nb-text-primary); border: var(--nb-border-normal) solid var(--nb-comp); border-radius: 0; padding: 0.75rem 1.5rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; } .back-button:hover { background-color: var(--nb-comp); color: var(--nb-text-white); transform: translateY(-2px); } /* Tabs */ .tab-nav { background-color: var(--nb-bg-white); border: var(--nb-border-normal) solid var(--nb-border-dark); padding: 1rem; margin-bottom: 2rem; box-shadow: var(--nb-shadow-md); display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .tab-button { background-color: var(--nb-bg-light); color: var(--nb-text-primary); border: var(--nb-border-normal) solid transparent; padding: 0.75rem 1.5rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; text-decoration: none; flex: 0 0 auto; } .tab-button:hover { border-color: var(--nb-comp); transform: translateY(-2px); } .tab-button.active { background-color: var(--nb-comp); color: var(--nb-text-white); border-color: var(--nb-comp); } .tab-content-container { background-color: var(--nb-bg-white); border: var(--nb-border-normal) solid var(--nb-border-dark); padding: 2rem; box-shadow: var(--nb-shadow-md); } .tab-content-panel { display: none; } .tab-content-panel.active { display: block; } /* Notes options grid */ .notes-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 1.5rem; } .notes-option-card { background-color: var(--nb-bg-white); border-radius: 0; padding: 2rem; border: var(--nb-border-normal) solid transparent; transition: all 0.2s ease-in-out; text-decoration: none; color: inherit; } .notes-option-card:hover { border-color: var(--nb-comp); transform: translateY(-5px); box-shadow: var(--nb-shadow-lg); } /* ============================================ TABLE & CODE OVERFLOW HANDLING ============================================ */ /* Table wrapper for horizontal scroll on small screens */ .table-wrapper, .nb-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */ margin: var(--nb-space-4) 0; } /* Ensure tables inside wrappers don't shrink */ .table-wrapper>table, .nb-table-wrapper>.nb-table { min-width: 600px; /* Minimum table width before scroll kicks in */ } /* Code blocks - ensure overflow is handled */ pre, .nb-code-block, code { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Inline code - prevent overflow */ code, .nb-code-inline { word-break: break-all; /* Allow breaking in middle of long strings */ max-width: 100%; } /* ============================================ TEXT TRUNCATION WITH ELLIPSIS ============================================ */ /* Utility class for single-line text truncation */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Utility class for multi-line text truncation (2 lines) */ .text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Utility class for multi-line text truncation (3 lines) */ .text-truncate-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* ---- Mobile-specific safe fixes (won't affect desktop) ---- */ @media (max-width: 768px) { /* Prevent flex/grid children from overflowing */ * { min-width: 0; min-height: 0; } /* Media elements scale within container */ img, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* Navigation link truncation on mobile if needed */ .nav-links a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Course card titles - prevent overflow */ .course-overview-card h3, .course-overview-card h4 { max-width: 100%; } /* Reduce shadow sizes on mobile for Neubrutalism elements */ .course-overview-card, .course-card, .premium-card { box-shadow: 2px 2px 0 var(--nb-border-dark) !important; /* Reduced from 6px */ } .course-overview-card:hover, .course-card:hover, .premium-card:hover { box-shadow: 4px 4px 0 var(--nb-border-dark) !important; /* Reduced from 12px */ } /* Button shadows on mobile */ button, input[type="button"], input[type="submit"] { box-shadow: 2px 2px 0 var(--nb-border-dark) !important; /* Reduced from 4px */ } button:hover, input[type="button"]:hover, input[type="submit"]:hover { box-shadow: 1px 1px 0 var(--nb-border-dark) !important; /* Reduced from 2px */ } /* Premium badge - allow wrapping on very small screens */ .premium-badge { white-space: normal; text-align: center; } /* Course grid - single column on mobile */ .course-grid { grid-template-columns: 1fr !important; gap: var(--nb-space-4); } /* More breathable spacing and readable text line height already set globally */ /* Common full-screen sections: prefer dynamic viewport on mobile */ .full-screen, .min-h-screen, .min-h-100vh { min-height: 100svh; } /* Grids typically collapse to 1 column on phones */ .grid, .content-grid, .notes-options { gap: 1rem; } .content-grid { grid-template-columns: 1fr !important; } /* Tab navigation mobile fixes */ .tab-nav { flex-direction: row; gap: 0.5rem; padding: 0.75rem; } .tab-button { padding: 0.75rem 1rem; text-align: center; font-size: 0.9rem; min-height: 44px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } /* Tab content container mobile optimization */ .tab-content-container { padding: 1rem; } /* Buttons/controls stay tappable but not oversized */ button, .btn, a.button, input[type="submit"] { min-height: 44px; } /* Form controls in narrow screens should not overflow */ input[type="text"], input[type="number"], input[type="email"], select, textarea, .input-field { width: 100%; max-width: 100%; } /* Language switcher (if present) avoids notches and overlaps */ .language-switcher { top: auto; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); padding: 3px; } .language-switcher button { padding: 6px 10px; font-size: 12px; } }