{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* Import Neon Glow Font */ @font-face { font-family: 'Neon Glow'; src: url(https://assets.codepen.io/230569/NeonGlow-8VLz.ttf); } /* --- START: Revised Custom CSS --- */ :root { /* Brand Colors */ --color-black: #000000; --color-charcoal: #121212; --color-cool-gray: #2C2C2C; --color-white: #FFFFFF; --color-muted-gray: #B0B0B0; --color-pop: #00BFFF; /* Deep Sky Blue */ --color-pop-hover: #0099CC; /* Darker shade for hover */ /* Typography */ --font-heading: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; --font-button: 'Inter', sans-serif; --font-neon: 'Neon Glow', sans-serif; /* Keep variable definition */ /* Base Font Size */ --base-font-size: 18px; /* Font Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line Heights */ --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Letter Spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.03em; } /* Base Body Styles */ html { font-size: var(--base-font-size) !important; scroll-behavior: smooth; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { font-family: var(--font-body); background-color: var(--color-black); color: var(--color-white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: var(--lh-relaxed); font-weight: var(--fw-regular); padding: 2rem; /* Padding outside the main card */ margin: 0; } /* Main Card Styling */ .main-card { max-width: 800px; /* Keep max-width */ margin-left: auto; /* Center the card */ margin-right: auto; /* Center the card */ background-color: var(--color-charcoal); border-radius: 0.5rem; overflow: hidden; /* Keep content contained */ } /* --- START: Headline Fix with !important --- */ h1, h2, h3, .font-heading-style { font-family: var(--font-heading) !important; font-weight: var(--fw-bold) !important; color: var(--color-white) !important; text-align: center !important; line-height: var(--lh-tight) !important; letter-spacing: var(--tracking-wide) !important; text-transform: uppercase !important; margin-bottom: 0.5em !important; } h1 { font-size: 2.8rem !important; } h2 { font-size: 2.2rem !important; } h3 { font-size: 1.6rem !important; } @media (min-width: 640px) { h1 { font-size: 3.5rem !important; } h2 { font-size: 2.8rem !important; } h3 { font-size: 1.9rem !important; } } /* --- END: Headline Fix with !important --- */ /* Override heading alignment */ .section-title { text-align: left !important; margin-bottom: 1.5rem !important; } .subsection-title { text-align: left !important; margin-bottom: 0.75rem !important; font-size: 1.7rem !important; color: var(--color-muted-gray) !important; } /* Paragraphs */ p { color: var(--color-white); font-size: 1rem; line-height: var(--lh-relaxed); margin: 0; padding: 0; } .overview-box p, .screenshot-caption { margin-bottom: 1em; } .screenshot-caption { margin-top: 0.5rem; } header p { margin-bottom: 1rem; } /* Muted Text */ .text-muted, .result-label, .screenshot-caption { color: var(--color-muted-gray); } /* Buttons & Links */ .button-primary, .button-secondary, .button-tertiary { font-family: var(--font-button); font-weight: var(--fw-semibold); border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: all 0.3s ease; display: inline-block; text-align: center; line-height: var(--lh-normal); padding: 0.7em 1.5em; font-size: 0.88rem; letter-spacing: 0.05em; } .button-primary { background-color: var(--color-pop); color: var(--color-black); border: none; } .button-primary:hover { background-color: var(--color-pop-hover); color: var(--color-black) !important; } a { color: var(--color-pop); transition: color 0.3s ease; text-decoration: none; font-weight: var(--fw-medium); } a:hover { color: var(--color-pop-hover); } /* Result Cards - Neon Glow Border Only */ .result-card { --blur: 1.5rem; --box-blur: calc(0.4 * var(--blur)); --glow: var(--color-pop); background-color: var(--color-cool-gray); padding: 1.5rem 1rem; border-radius: 12px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; border: 4px solid var(--glow); color: var(--glow); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 var(--box-blur) var(--glow), 0 0 var(--box-blur) var(--glow); transition: box-shadow 0.3s ease; } .result-value { font-family: var(--font-heading) !important; font-size: 1.75rem !important; font-weight: var(--fw-bold) !important; color: var(--color-pop) !important; margin-bottom: 0.5rem !important; line-height: var(--lh-tight) !important; flex-shrink: 0; } .result-label { font-family: var(--font-body); font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4; color: var(--color-muted-gray); padding-top: 0.5rem; min-height: 2.8em; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-shadow: none; } /* Grid for Stats */ .stats-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 480px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Project Overview Box */ .overview-box { background-color: var(--color-cool-gray); border: 1px solid #4a4a4a; color: var(--color-white); padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; } .overview-box p { font-size: 1rem; line-height: var(--lh-relaxed); } /* Screenshot Styles */ .screenshot-container { background-color: var(--color-cool-gray); border-radius: 0.5rem; padding: 0.5rem; border: 1px solid #4a4a4a; width: 100%; min-height: 150px; /* Ensure container has some height even if image fails */ position: relative; /* Needed for absolute positioning if required */ } .portfolio-image { display: block; width: 100%; height: auto; border-radius: 0.375rem; cursor: pointer; transition: opacity 0.2s ease-in-out; } .portfolio-image:hover { opacity: 0.85; } /* NEW: Placeholder Text Style */ .placeholder-text { display: none; /* Hidden by default, shown by JS */ align-items: center; justify-content: center; min-height: 200px; /* Match old placeholder height */ color: var(--color-muted-gray); font-style: italic; text-align: center; padding: 1rem; border: 2px dashed var(--color-muted-gray); border-radius: 0.375rem; } .screenshot-caption { font-size: 0.85rem; text-align: center; margin-top: 0.75rem; } /* General Section Spacing */ section { margin-bottom: 3rem; } section:last-child { margin-bottom: 0; } /* Header Specific Styles */ header { padding: 1.5rem; border-bottom: 1px solid var(--color-cool-gray); text-align: center; } header h1 { margin-bottom: 0.5rem !important; } header p { color: var(--color-muted-gray); font-size: 1.1rem; max-width: 600px; margin-left: auto; margin-right: auto; } header a.button-primary { margin-top: 0.5rem; } /* Inner Padding for Content Area */ .content-padding { padding: 1.5rem; } @media (min-width: 640px) { .content-padding { padding: 2rem; } } /* Lightbox Styles */ #lightbox { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.85); cursor: pointer; align-items: center; justify-content: center; padding: 20px; } #lightbox-img { display: block; margin: auto; max-width: 90%; max-height: 90vh; border-radius: 5px; cursor: default; } #lightbox { animation: fadeIn 0.3s ease-in-out; } #lightbox-img { animation: zoomIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { transform: scale(0.8); opacity: 0;} to { transform: scale(1); opacity: 1;} }