/* ========================================================================== Oishik Studio — Site Styles Dark theme only (relies on Bootstrap's data-bs-theme="dark", set on the element). Built primarily on Bootstrap 5 utility classes; custom rules below cover the parts Bootstrap has no utility for. ========================================================================== */ /* -------------------------------------------------------------- Variables */ :root { --site-max-width: 960px; --accent: #7dd3fc; /* accent color for links, icons, focus states */ --accent-soft: rgba(125, 211, 252, 0.12); --surface: #14171c; /* card / raised-surface background */ --surface-border: #262b33; } /* -------------------------------------------------------------- Base */ body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #0b0d10; } /* Constrain content width for comfortable reading on large screens, without introducing a new grid system. */ header .container, main > section.container, main > article.container, footer .container { max-width: var(--site-max-width); } /* Bootstrap's default container gutter (0.75rem per side) reads a bit tight on small screens; give a little more breathing room. */ @media (max-width: 575.98px) { header .container, main > section.container, main > article.container, footer .container { padding-left: 1.25rem; padding-right: 1.25rem; } } /* -------------------------------------------------------------- Header */ .site-header { background-color: #0b0d10; } .brand-mark { display: inline-block; width: 1.75rem; height: 1.75rem; } /* -------------------------------------------------------------- About */ .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; color: var(--accent); } /* -------------------------------------------------------------- Projects */ .project-card { background-color: var(--surface); border: 1px solid var(--surface-border); transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out; } .project-card:hover, .project-card:focus-within { border-color: var(--accent); transform: translateY(-2px); } .project-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background-color: var(--accent-soft); color: var(--accent); font-size: 1.1rem; } .project-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--accent); font-weight: 600; text-decoration: none; } .project-link:hover, .project-link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } /* -------------------------------------------------------------- Inline links */ .inline-link { color: var(--accent); text-decoration: none; } .inline-link:hover, .inline-link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } /* -------------------------------------------------------------- Footer */ .site-footer { background-color: #0b0d10; } .footer-icon-link { color: var(--bs-secondary-color); display: inline-flex; text-decoration: none; } .footer-icon-link:hover, .footer-icon-link:focus-visible { color: var(--accent); } /* -------------------------------------------------------------- Focus states */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }