/* ============================================================ style.css — Lord Grimbo Portfolio Custom styles layered on top of Bootstrap 5. Organized by: Tokens → Base → Layout → Components → Pages ============================================================ */ /* ------------------------------------------------------------ 1. THEME TOKENS Applied via [data-theme] on . JS toggles between "dark" and "light". Default is dark. ------------------------------------------------------------ */ [data-theme="dark"] { --color-bg: #2a1f3d; /* Purplish-gray page background */ --color-navbar: #1a1228; /* Deep purple-black navbar/footer */ --color-footer: #1a1228; --color-text: #f0e6ff; /* Soft white text */ --color-text-muted: #bea7cd; /* Muted secondary text */ --color-accent: #ff6ec7; /* Pink accent */ --color-accent-hover:#ff9dda; /* Lighter pink on hover */ --color-border: #4a3560; /* Subtle border color */ --color-card-bg: #3b2d52; /* Card/panel backgrounds */ --color-table-stripe:#352748; /* Alternating table row */ --color-modal-bg: #231838; /* Modal background */ --tile-image: url('.\\images\\bg-dark.jpg'); --toggle-icon: "\f5a8"; /* Bootstrap icon: sun */ } [data-theme="light"] { --color-bg: #ececec; /* Off-white page background */ --color-navbar: #131D30; /* Deep blue navbar/footer */ --color-footer: #131D30; --color-text: #1a2233; /* Black-blue text */ --color-text-muted: #4a6080; /* Muted secondary text */ --color-accent: #56B6E6; /* Deep blue accent */ --color-accent-hover:#A8B1DC; /* Darker blue on hover */ --color-border: #a6bedb; /* Subtle border color */ --color-card-bg: #e8eef5; /* Card/panel backgrounds */ --color-table-stripe:#dde6f0; /* Alternating table row */ --color-modal-bg: #e0e8f2; /* Modal background */ --tile-image: url('images/bg-light.jpg'); --toggle-icon: "\f497"; /* Bootstrap icon: moon */ } /* ------------------------------------------------------------ 2. BASE STYLES ------------------------------------------------------------ */ /* Import JetBrains Mono from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'JetBrains Mono', monospace; background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; margin: 0; padding: 0; /* Push content below the sticky navbar */ padding-top: 56px; /* Ensure footer sticks to bottom on short pages */ min-height: 100vh; display: flex; flex-direction: column; } /* Smooth theme transitions on key elements */ a, .navbar, .footer-bar, .card, .modal-content, table { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Links */ a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); text-decoration: underline; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--color-text); } /* ------------------------------------------------------------ 3. LAYOUT — Side Border Columns + Content Wrapper The page is structured as a three-column grid: [tile border] [content] [tile border] Borders are hidden on mobile (< 992px). ------------------------------------------------------------ */ /* Outer wrapper fills the viewport width */ #page-wrapper { display: flex; flex: 1; width: 100%; } /* Tileable side borders */ .side-border { flex: 0 0 120px; width: 120px; background-image: var(--tile-image); background-repeat: repeat; background-size: 120px auto; /* Subtle overlay tint for theme blending */ position: relative; overflow: hidden; } /* Hide side borders on smaller screens */ @media (max-width: 991.98px) { .side-border { display: none; } } /* The main content column */ #main-content { flex: 1; min-width: 0; /* Prevent flex overflow */ padding: 2rem 1.5rem; } /* ------------------------------------------------------------ 4. NAVBAR ------------------------------------------------------------ */ .navbar { background-color: var(--color-navbar) !important; border-bottom: 1px solid var(--color-accent); font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: 0.03em; } /* Brand — "Lord Grimbo" */ .navbar-brand { color: var(--color-accent) !important; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; } .navbar-brand:hover { color: var(--color-accent-hover) !important; text-decoration: none; } /* Nav links */ .navbar-nav .nav-link { color: #ffffff !important; font-size: 0.9rem; padding: 0.5rem 0.85rem; position: relative; transition: color 0.2s ease; } /* Accent underline on hover */ .navbar-nav .nav-link::after { content: ''; display: block; height: 2px; background-color: var(--color-accent); width: 0; transition: width 0.2s ease; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); } .navbar-nav .nav-link:hover { color: var(--color-accent) !important; } .navbar-nav .nav-link:hover::after { width: 70%; } /* Contact button — styled as a small accent button */ .btn-contact { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent) !important; border-radius: 2px; font-size: 0.85rem; padding: 0.3rem 0.8rem; font-family: 'JetBrains Mono', monospace; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease; } .btn-contact:hover { background-color: var(--color-accent); color: var(--color-navbar) !important; text-decoration: none; } /* Theme toggle button */ #theme-toggle { background: transparent; border: none; color: #ffffff; font-size: 1.2rem; padding: 0.3rem 0.6rem; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; line-height: 1; } #theme-toggle:hover { color: var(--color-accent); transform: rotate(15deg); } /* Hamburger toggler on mobile */ .navbar-toggler { border-color: var(--color-accent); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C110%2C199%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ------------------------------------------------------------ 5. FOOTER ------------------------------------------------------------ */ .footer-bar { background-color: var(--color-footer); border-top: 1px solid var(--color-accent); padding: 1rem 2rem; text-align: center; /* Stays at bottom of flex column */ margin-top: auto; width: 100%; } /* ASCII cat art */ .footer-cats { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--color-accent); line-height: 1.2; white-space: pre; display: inline-block; vertical-align: middle; user-select: none; } /* Back to top button */ .btn-top { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 700; padding: 0.4rem 1.2rem; border-radius: 2px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.08em; } .btn-top:hover { background-color: var(--color-accent); color: var(--color-navbar); } .footer-inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } /* ------------------------------------------------------------ 6. CONTACT MODAL ------------------------------------------------------------ */ .modal-content { background-color: var(--color-modal-bg); border: 1px solid var(--color-accent); border-radius: 4px; color: var(--color-text); font-family: 'JetBrains Mono', monospace; } .modal-header { border-bottom: 1px solid var(--color-border); padding: 1rem 1.5rem; } .modal-title { color: var(--color-accent); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.05em; text-transform: uppercase; } .modal-body { padding: 1.5rem; } .modal-footer { border-top: 1px solid var(--color-border); } /* Close button */ .btn-close { filter: invert(1); opacity: 0.7; } .btn-close:hover { opacity: 1; } /* Email display */ .contact-email { font-size: 1rem; font-weight: 700; color: var(--color-accent); letter-spacing: 0.03em; display: block; margin-bottom: 1.25rem; } /* Contact label */ .contact-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.4rem; } /* Social icon row */ .social-icons { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .social-icon-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-muted); font-size: 1.25rem; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; text-decoration: none; } .social-icon-link:hover { border-color: var(--color-accent); color: var(--color-accent); background-color: var(--color-card-bg); text-decoration: none; } /* ------------------------------------------------------------ 7. LANDING PAGE — Hero Section ------------------------------------------------------------ */ .hero-section { text-align: center; padding: 4rem 1rem 3rem; border-bottom: 1px solid var(--color-border); margin-bottom: 3rem; } .hero-section h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: 1.25rem; line-height: 1.15; } /* Accent the first word for visual punch */ .hero-section h1 .accent { color: var(--color-accent); } .hero-description { max-width: 640px; margin: 0 auto 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.75; } /* Blinking cursor effect on hero */ .hero-cursor::after { content: '_'; color: var(--color-accent); animation: blink 1.1s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ------------------------------------------------------------ 8. LANDING PAGE — Featured Projects Carousel ------------------------------------------------------------ */ .section-header { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-muted); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; } .section-header::after { content: ''; flex: 1; height: 1px; background-color: var(--color-border); } /* Carousel container */ #featured-carousel { margin-bottom: 3rem; } /* Individual carousel slide wrapper */ .carousel-slide-inner { padding: 0 0.5rem; } /* Dummy project card */ .project-card-dummy { background-color: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .project-card-dummy:hover { border-color: var(--color-accent); transform: translateY(-2px); } /* Gray placeholder image area */ .project-card-img { width: 100%; height: 180px; background-color: var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } .project-card-body { padding: 1rem; } .project-card-title { font-weight: 700; font-size: 0.95rem; color: var(--color-text); margin-bottom: 0.4rem; } .project-card-sub { font-size: 0.78rem; color: var(--color-text-muted); } /* Carousel controls */ .carousel-control-prev, .carousel-control-next { width: 40px; background-color: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 2px; opacity: 1; top: 50%; transform: translateY(-50%); height: 40px; position: absolute; transition: border-color 0.2s ease; } .carousel-control-prev { left: -50px; } .carousel-control-next { right: -50px; } .carousel-control-prev:hover, .carousel-control-next:hover { border-color: var(--color-accent); } .carousel-control-prev-icon, .carousel-control-next-icon { filter: none; background-size: 60%; } /* Carousel indicators */ .carousel-indicators [data-bs-target] { background-color: var(--color-border); width: 8px; height: 8px; border-radius: 50%; border: none; transition: background-color 0.2s ease; } .carousel-indicators .active { background-color: var(--color-accent); } /* Carousel wrapper with room for controls */ .carousel-outer { position: relative; padding: 0 60px; margin-bottom: 3rem; } @media (max-width: 575.98px) { .carousel-outer { padding: 0; } .carousel-control-prev, .carousel-control-next { display: none; } } /* ------------------------------------------------------------ 9. LANDING PAGE — Blog Posts Table ------------------------------------------------------------ */ .blog-table-section { margin-bottom: 3rem; } .blog-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .blog-table thead th { background-color: var(--color-card-bg); color: var(--color-accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.75rem 1rem; border-bottom: 2px solid var(--color-accent); font-weight: 700; white-space: nowrap; } .blog-table tbody tr { border-bottom: 1px solid var(--color-border); transition: background-color 0.15s ease; } .blog-table tbody tr:nth-child(even) { background-color: var(--color-table-stripe); } .blog-table tbody tr:hover { background-color: var(--color-card-bg); } .blog-table tbody td { padding: 0.7rem 1rem; color: var(--color-text); vertical-align: middle; } .blog-table tbody td a { color: var(--color-text); font-weight: 600; transition: color 0.2s ease; } .blog-table tbody td a:hover { color: var(--color-accent); text-decoration: none; } /* Tag badges */ .tag-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.5rem; border: 1px solid var(--color-accent); border-radius: 2px; color: var(--color-accent); margin-right: 0.3rem; letter-spacing: 0.05em; text-transform: uppercase; } .date-cell { color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; } /* ------------------------------------------------------------ 10. STUB PAGES (gallery, projects, blog) ------------------------------------------------------------ */ .stub-section { text-align: center; padding: 6rem 2rem; } .stub-section h2 { font-size: 1.5rem; color: var(--color-accent); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; } .stub-section p { color: var(--color-text-muted); font-size: 0.9rem; } /* ------------------------------------------------------------ 11. SCROLLBAR STYLING (webkit browsers) ------------------------------------------------------------ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }