/* effects.css – BreezyOps theme extensions & visual effects */ /* Fluid root scaling */ html { font-size:clamp(17px, 1.15vw + 14px, 20px); scroll-behavior:smooth; } body { background:#0b0e17; color:#e4e6eb; } /* Dark heading palette adjustments */ h2,h3,h4,h5,h6 { color:#f2f4f8; } /* Fluid heading scale */ h2 { font-size:clamp(1.18rem, 0.9rem + 1.2vw, 1.4rem); line-height:1.22; } h3 { font-size:clamp(1.05rem, 0.85rem + 0.9vw, 1.225rem); line-height:1.24; } h4 { font-size:clamp(.95rem, 0.8rem + 0.6vw, 1.05rem); line-height:1.28; } h5 { font-size:clamp(.85rem, 0.75rem + 0.45vw, .875rem); line-height:1.3; font-weight:600; } h6 { font-size:clamp(.78rem, 0.7rem + 0.35vw, .7rem); line-height:1.35; font-weight:600; letter-spacing:.5px; text-transform:uppercase; } p,li { color:#d2d5dc; font-size:clamp(0.79rem, 0.29vw + 0.70rem, 0.84rem); line-height:1.58; } a, p, li { -webkit-font-smoothing:antialiased; } a { color:#7fb7ff; } a:hover { color:#a4ceff; } .intro-header.regular-hero { margin-bottom: 20px; } /* Hero enhancements / layering */ .intro-header { position:relative; overflow:hidden; background:linear-gradient(to bottom,#000 0%,#120a2b 70%,#1d0d44 100%); } .intro-header > * { position:relative; z-index:1; } .site-heading { text-shadow:1px 1px 2px rgba(0,0,0,.6); } /* Unified canvas positioning rules (removed per-animation header classes) */ .intro-header canvas.hero-sine, .intro-header canvas.hero-sine-gl, .intro-header canvas.hero-life { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; } .intro-header canvas.hero-life { pointer-events:none; } @media (prefers-reduced-motion: reduce) { .intro-header canvas.hero-sine { display:none; } .intro-header canvas.hero-life { display:none; } } /* Geo lines effect */ .intro-header.geo-lines { background:#060910; } .intro-header.geo-lines::before, .intro-header.geo-lines::after { content:""; position:absolute; inset:0; pointer-events:none; } .intro-header.geo-lines::before { background:repeating-linear-gradient(115deg, rgba(70,130,210,0.22) 0 2px, transparent 2px 68px), repeating-linear-gradient(205deg, rgba(150,90,230,0.18) 0 2px, transparent 2px 62px), radial-gradient(circle at 70% 35%, rgba(140,80,220,0.28), transparent 56%), radial-gradient(circle at 25% 65%, rgba(50,190,230,0.24), transparent 60%), repeating-linear-gradient( 90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 18px), repeating-linear-gradient( 0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 18px); mix-blend-mode:screen; animation:geoDrift 18s linear infinite; } .intro-header.geo-lines::after { background:radial-gradient(circle at 35% 40%, rgba(110,170,255,0.42), transparent 50%), radial-gradient(circle at 82% 72%, rgba(200,110,255,0.34), transparent 55%); filter:blur(26px) saturate(155%); opacity:.92; animation:geoPulse 11.5s ease-in-out infinite; } @keyframes geoDrift { 0% { transform:translate3d(0,0,0) scale(1);} 33% { transform:translate3d(-6%,2%,0) scale(1.035);} 66% { transform:translate3d(3%,-2%,0) scale(1.05);} 100% { transform:translate3d(0,0,0) scale(1);} } @keyframes geoPulse { 0%,100% { opacity:.70; transform:scale(1);} 50% { opacity:1; transform:scale(1.10);} } @media (prefers-reduced-motion: reduce) { .intro-header.geo-lines::before, .intro-header.geo-lines::after { animation:none; } } /* Game of Life specific overlay removed (no theming). */ /* Waves */ /* .intro-header.waves { background:#04060b; } .intro-header.waves::before, .intro-header.waves::after { content:""; position:absolute; inset:0; pointer-events:none; } .intro-header.waves::before { background:linear-gradient(115deg, rgba(40,90,160,0.35), transparent 70%), radial-gradient(circle at 85% 25%, rgba(130,60,210,0.28), transparent 60%), repeating-linear-gradient( to right, rgba(255,255,255,0.04) 0 2px, transparent 2px 130px); mix-blend-mode:screen; animation:wavesShift 26s linear infinite; } .intro-header.waves::after { background:repeating-linear-gradient(180deg, rgba(70,140,255,0.08) 0 4px, transparent 4px 120px), radial-gradient(circle at 25% 70%, rgba(40,200,170,0.22), transparent 65%); filter:blur(22px) saturate(145%); opacity:.9; animation:wavesPulse 14s ease-in-out infinite; } @keyframes wavesShift { 0% { transform:translate3d(0,0,0) scale(1);} 50% { transform:translate3d(-6%,1%,0) scale(1.03);} 100% { transform:translate3d(0,0,0) scale(1);} } @keyframes wavesPulse { 0%,100% { opacity:.7; transform:scale(1);} 50% { opacity:.95; transform:scale(1.07);} } @media (prefers-reduced-motion: reduce) { .intro-header.waves::before, .intro-header.waves::after { animation:none; } } */ /* Sine variant theming removed – unified background retained. */ /* Removed animation key class aliases (anim-sine / anim-life) – no theming layer. */ /* CTA Buttons */ .btn-cta { font-size:.92rem; line-height:1.15; font-weight:500; letter-spacing:.3px; padding:.76rem 1.20rem .72rem; border-width:1px; border-radius:.58rem; position:relative; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease; } .btn-cta:focus-visible { outline:2px solid #ffbf47; outline-offset:2px; } .btn-cta-primary { background:#2f6fc4; border:1px solid #5aa5ff; color:#fff; box-shadow:0 2px 5px -3px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset; } .btn-cta-primary:hover, .btn-cta-primary:focus { background:#2a63b1; border-color:#7bb8ff; box-shadow:0 3px 7px -3px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07) inset; text-decoration:none; } .btn-cta-primary:active { background:#25589d; border-color:#6aaef5; transform:translateY(1px); } .btn-cta-accent { background:#2d8a34; border:1px solid #3cc456; color:#fff; box-shadow:0 2px 5px -3px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset; } .btn-cta-accent:hover, .btn-cta-accent:focus { background:#26772c; border-color:#55e06e; box-shadow:0 3px 7px -3px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07) inset; text-decoration:none; } .btn-cta-accent:active { background:#216326; border-color:#49c960; transform:translateY(1px); } .btn-cta-subtle { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:#dfe9f5; } .btn-cta-subtle:hover, .btn-cta-subtle:focus { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.28); } .btn-cta-green { background:#28a545; border-color:#28a545; color:#fff; } .btn-cta-green:hover, .btn-cta-green:focus { background:#23943e; border-color:#1f7f35; color:#fff; } .btn-cta-green:active { background:#1f7f35; border-color:#1a6a2c; } .btn-cta-green:focus-visible { outline:2px solid #ffbf47; outline-offset:2px; } .btn-cta:link, .btn-cta:visited, .btn-cta-primary:visited, .btn-cta-accent:visited { color:#fff; } /* CTA Group / layout */ .cta-group { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; justify-content:flex-start; } .site-heading .cta-group { margin-left:0; } .cta-group a { margin:0 !important; } /* Navbar refinements (Bootstrap assumed) */ .navbar-brand, .navbar-nav .nav-link { font-family:'Open Sans','Helvetica Neue',Helvetica, Arial,sans-serif; font-size:0.85rem; } .navbar.bg-dark { background:rgba(6,20,37,0.38) !important; border-bottom:1px solid rgba(255,255,255,0.08); transition:background-color .35s ease; } .navbar.bg-dark.scrolled { background:rgba(6,20,37,0.85) !important; } .navbar { padding-top:.3rem; padding-bottom:.3rem; } .navbar-brand { padding-top:0; padding-bottom:0; line-height:1; display:flex; align-items:center; } .navbar-nav .nav-link { padding-top:.35rem; padding-bottom:.35rem; line-height:1.1; } .navbar-toggler { padding:.25rem .45rem; line-height:1; border-radius:.35rem; } .navbar-toggler-icon { width:1.15em; height:1.15em; background-size:1.15em 1.15em; } .navbar-dark .navbar-toggler-icon { filter:brightness(0.85); } @media (max-width: 991.98px) { .navbar-collapse { padding-top:.25rem; } .navbar-nav .nav-link { padding-left:.15rem; } } .navbar .breadcrumb { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } .breadcrumb-item { font-size: 0.85rem; } .navbar .breadcrumb .breadcrumb-item a { font-family: 'Open Sans','Helvetica Neue',Helvetica, Arial,sans-serif; color: rgba(255, 255, 255, 0.55); text-decoration: none; } .navbar .breadcrumb .breadcrumb-item a:hover { color: rgba(255, 255, 255, 0.75); } .navbar .breadcrumb .breadcrumb-item.active { color: rgba(255, 255, 255, 0.75); } /* Unified focus */ .btn:focus-visible, .nav-link:focus-visible, a:focus-visible { outline:2px solid #ffbf47; outline-offset:2px; } /* Utility spacing */ .stack-sm > * + * { margin-top:.75rem; } .stack-md > * + * { margin-top:1.25rem; } .stack-lg > * + * { margin-top:2rem; } /* Anchor offset */ #services { scroll-margin-top:95px; } .jump-anchor { display:block; height:0; width:100%; } /* News panel */ #news { font-size:.8rem; font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; line-height:1.25rem; background:#3a2f5d; color:#fff; border:1px solid #7f6cc7; opacity:0; transform:rotateY(-90deg); transition:all .5s cubic-bezier(.36,-0.64,.34,1.76); } #news a { color:#aaf; } #news.show { opacity:.92; transform:none; } @media (prefers-reduced-motion: reduce) { #news { transition:none; transform:none !important; } } /* Sidebar (folded from overrides + sidebar_enhanced) */ .bio-sidebar { padding:.75rem 0 .5rem 0; background:transparent; font-size:0.85rem; font-family:'IBM Plex Sans','Open Sans',Arial,sans-serif; } .bio-sidebar.sidebar-animate { padding-top:0 !important; } .bio-sidebar .sidebar-title { font-size:.72rem; letter-spacing:.02em; font-weight:500; margin:0 0 .55rem 0; opacity:.82; font-family:'Lora', Georgia, serif; text-transform:none; } .bio-sidebar .sidebar-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; counter-reset: sb; } .bio-sidebar .sidebar-item { display:flex; align-items:flex-start; gap:.5rem; line-height:1.2rem; position:relative; opacity:0; transform:translateY(6px); transition:transform .18s ease; } .bio-sidebar.sidebar-animate .sidebar-item { animation:sbFade .55s ease forwards; animation-delay:calc(0.04s * var(--i, 0)); } @keyframes sbFade { to { opacity:1; transform:translateY(0); } } .bio-sidebar .sidebar-item::after { content:""; position:absolute; left:0; right:0; bottom:-.3rem; height:1px; background:linear-gradient(to right, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); pointer-events:none; } .bio-sidebar .sidebar-item:last-child::after { display:none; } .bio-sidebar .sidebar-item .sidebar-link { display:flex; align-items:flex-start; gap:.5rem; flex-wrap:nowrap; flex:1 1 auto; position:relative; } .bio-sidebar .sidebar-item .sidebar-text { display:block; flex:1 1 auto; min-width:0; font-size:0.78rem; color:#9aa9b8; opacity:.88; font-weight:400; transition:color .18s ease, opacity .18s ease; } .bio-sidebar .sidebar-item a { text-decoration:none; color:#89a4ba; transition:color .18s ease; } .bio-sidebar .sidebar-item a:hover .sidebar-text, .bio-sidebar .sidebar-item a:focus .sidebar-text { color:#d9e2ea; opacity:1; } .bio-sidebar .sidebar-item a:hover .sidebar-text { text-decoration:none; } .bio-sidebar .sidebar-item .sidebar-badge { margin-left:auto; align-self:flex-start; line-height:1; white-space:nowrap; padding:2px 6px; font-size:.55rem; letter-spacing:.4px; } .bio-sidebar .sidebar-item .sidebar-text + .sidebar-badge { position:relative; top:2px; } :root { --sb-badge-bg:#0d385f; --sb-badge-bg-hover:#134971; --sb-badge-border:#1d5b86; --sb-badge-color:#55dcff; --sb-badge-color-hover:#9ceeff; } .bio-sidebar .sidebar-item .sidebar-badge { background:var(--sb-badge-bg); color:var(--sb-badge-color); border:1px solid var(--sb-badge-border); font-weight:500; backdrop-filter:blur(2px); transition:background-color .22s ease, color .22s ease, box-shadow .22s ease; box-shadow:0 0 0 1px rgba(255,255,255,0.03), 0 2px 4px -2px rgba(0,0,0,0.55); } .bio-sidebar .sidebar-item a:hover .sidebar-badge, .bio-sidebar .sidebar-item a:focus .sidebar-badge { background:var(--sb-badge-bg-hover); color:var(--sb-badge-color-hover); box-shadow:0 0 0 1px rgba(120,210,255,0.25), 0 3px 8px -3px rgba(0,0,0,0.6); } .bio-sidebar .sidebar-item:hover { transform:translateY(-1px); } /* Sidebar grouping */ .bio-sidebar .sidebar-group + .sidebar-group { margin-top:1.1rem; } .bio-sidebar .sidebar-group-title { margin:0 0 .55rem 0; padding:0; position:static; } /* Mobile variant */ .bio-sidebar[data-variant="mobile"] { padding-top:.25rem; } .bio-sidebar[data-variant="mobile"] .sidebar-title { display:none; } /* Mobile switch (merged from sidebar_enhanced.css sbx namespace) */ .sbx-mobile-switch { margin-bottom:.4rem; } .sbx-mobile-switch .sbx-switch-buttons { display:flex; gap:.45rem; flex-wrap:nowrap; align-items:stretch; } .sbx-switch-btn { background:rgba(55,85,125,0.30); color:#c3d9e7; font:500 .80rem/1.15 'Lora', Georgia, serif; letter-spacing:.01em; padding:.38rem .78rem .40rem; border:1px solid rgba(255,255,255,0.14); border-radius:18px; cursor:pointer; position:relative; transition:background-color .22s ease, color .22s ease, border-color .22s ease; } .sbx-switch-btn:hover, .sbx-switch-btn:focus { background:rgba(70,110,155,0.38); color:#e3eef6; outline:none; } .sbx-switch-btn[aria-selected="true"] { background:rgba(90,140,190,0.45); color:#f1f8fc; border-color:rgba(140,190,240,0.45); box-shadow:0 0 0 1px rgba(140,190,240,0.25), 0 3px 10px -4px rgba(0,0,0,0.55); } .sbx-switch-btn:focus-visible { outline:2px solid #ffbf47; outline-offset:2px; } .sbx-switch-panels { margin-top:.28rem; } .sbx-mobile-switch:not(.sbx-open) .sbx-switch-panels { margin-top:0; height:0; overflow:hidden; } .sbx-switch-panel { animation:sbxPanelFade .25s ease; } @keyframes sbxPanelFade { from { opacity:0; transform:translateY(3px);} to { opacity:1; transform:translateY(0);} } .sbx-switch-panel .bio-sidebar .sidebar-group-title { display:none; } .sbx-switch-panel .bio-sidebar { padding-top:.2rem; } @media (max-width:420px){ .sbx-switch-btn { font-size:.74rem; padding:.34rem .58rem .36rem; border-radius:16px; } .sbx-mobile-switch .sbx-switch-buttons { gap:.4rem; } } /* Reduced motion for sidebar animations */ @media (prefers-reduced-motion: reduce){ .bio-sidebar .sidebar-item { transition:none; } .sbx-switch-panel { animation:none; } } /* Hero layout alignment tweaks */ .site-heading-split .hero-lead { margin-bottom:0; } .site-heading-split .hero-split-row { align-items:stretch; } .site-heading-split .hero-split-cta { display:flex; flex-direction:column; justify-content:center; } .site-heading-split .cta-group { margin-top:0; display:flex; flex-wrap:wrap; gap:.85rem; } @media (min-width: 992px) { .site-heading-split .cta-group { justify-content:flex-end; } .intro-header.fullscreen-hero .site-heading-split .cta-group { justify-content:flex-start; } } @media (max-width: 991.98px) { .site-heading-split { padding:80px 0 50px !important; } .site-heading-split .hero-split-cta { margin-top:1.5rem; } } @media (max-width: 575.98px) { .site-heading-split .cta-group .btn { flex:1 1 auto; } } .intro-header.fullscreen-hero { padding-top:0; } .intro-header.fullscreen-hero .site-heading { padding-top:90px; } @media (max-width: 991.98px){ .intro-header.fullscreen-hero .site-heading { padding-top:95px; } } @media (max-width: 575.98px){ .intro-header.fullscreen-hero .site-heading { padding-top:100px; } } /* Print improvements */ @media print { a[href]::after { content:" (" attr(href) ")"; font-size:.75em; } } /* Footer social */ footer .footer-social { display:flex; justify-content:center; gap:.85rem; } footer .footer-github { font-size:1.55rem; color:#6fb3ff; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:color .22s ease, transform .22s ease; } footer .footer-github:hover, footer .footer-github:focus { color:#a6d7ff; text-decoration:none; transform:translateY(-2px); } footer .footer-github:focus-visible { outline:2px solid #ffbf47; outline-offset:3px; border-radius:6px; } footer .site-copyright { font-family:'IBM Plex Sans','Lora','Open Sans',Arial,sans-serif; font-size:14px; letter-spacing:.25px; color:#6fb3ff; opacity:.95; text-align:center; margin-top:.35rem; margin-bottom:0; }