/* RandomUnit futuristic multi-page theme */ :root { --bg-0: #07131f; --bg-1: #0b1f33; --bg-2: #102a44; --text: #e7f4ff; --muted: #8ab2cf; --line: rgba(87, 176, 255, 0.22); --neon: #54f6ff; --accent: #2eb7ff; --accent-2: #4affc2; --danger: #ff6f8f; --surface: rgba(6, 20, 33, 0.66); --surface-border: rgba(143, 225, 255, 0.25); --radius: 16px; --shadow: 0 20px 50px rgba(0, 0, 0, 0.45); --content-width: min(1120px, calc(100% - 2.4rem)); --spot-x: 50%; --spot-y: 40%; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; font-family: "Bahnschrift", "Segoe UI", "Trebuchet MS", Tahoma, sans-serif; color: var(--text); background: radial-gradient( 900px 700px at var(--spot-x) var(--spot-y), rgba(72, 183, 255, 0.18), rgba(7, 19, 31, 0.08) 52%, rgba(7, 19, 31, 0) 80% ), linear-gradient(140deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2)); background-attachment: fixed; line-height: 1.6; overflow-x: hidden; } body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } body::before { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.4; z-index: -3; } body::after { background: radial-gradient( circle at 25% 10%, rgba(125, 225, 255, 0.08), transparent 45% ); z-index: -2; } a { color: inherit; text-decoration: none; } @media (pointer: fine) { html { cursor: url("../img/cursor/cursor.cur"), auto; } } #cursor-fx-canvas { position: fixed; inset: 0; z-index: 15; pointer-events: none; } img { max-width: 100%; display: block; } /* Progressive-enhancement image fade-in: script.js adds "img-fade" to and "img-loaded" to each once it has actually finished loading, so images appear in one clean fade instead of painting in visibly row-by-row as bytes arrive. Scoped behind the "img-fade" class so images still show normally if JS never runs. */ html.img-fade img { opacity: 0; } html.img-fade img.img-loaded { opacity: 1; transition: opacity 320ms ease; } .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(118, 194, 255, 0.2); backdrop-filter: blur(8px); background: rgba(5, 14, 23, 0.72); } .nav-wrap { width: var(--content-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2.6rem; padding: 0.85rem 0; } .brand { display: inline-flex; align-items: center; gap: 0.85rem; font-family: "Consolas", "Lucida Console", monospace; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1.5rem; color: var(--neon); } .brand-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 18px rgba(84, 246, 255, 0.55); } .nav-links { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0; margin-left: auto; border: 1px solid rgba(92, 208, 255, 0.4); border-radius: 10px; background: rgba(9, 34, 56, 0.56); cursor: pointer; } .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--neon); transition: transform 220ms ease, opacity 220ms ease; } .nav-wrap.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-wrap.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav-wrap.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-special-link { display: inline-flex; align-items: center; gap: 0.55rem; margin-left: auto; padding: 0.45rem 0.95rem 0.45rem 0.45rem; border-radius: 999px; border: 1px solid rgba(196, 140, 255, 0.55); background: linear-gradient( 120deg, rgba(124, 92, 255, 0.32), rgba(255, 111, 220, 0.16) ); box-shadow: 0 0 16px rgba(168, 120, 255, 0.35); color: #f1e4ff; font-family: "Consolas", "Lucida Console", monospace; font-size: 0.86rem; letter-spacing: 0.03em; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .nav-special-link:hover, .nav-special-link:focus-visible, .nav-special-link.active { transform: translateY(-1px); box-shadow: 0 0 24px rgba(196, 140, 255, 0.6); border-color: rgba(224, 180, 255, 0.85); } .nav-special-link img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 10px rgba(216, 180, 255, 0.8); animation: pulse 2.4s infinite; } .nav-links a { padding: 0.55rem 0.85rem; border-radius: 9px; color: var(--muted); border: 1px solid transparent; transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 220ms ease; } .nav-links a:hover, .nav-links a:focus-visible, .nav-links a.active { color: var(--text); border-color: rgba(117, 207, 255, 0.5); background: rgba(19, 67, 102, 0.35); transform: translateY(-1px); } main { width: var(--content-width); margin: 0 auto; padding: 1.6rem 0 3.2rem; } main > section + section { margin-top: 1.4rem; } .hero { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; grid-template-areas: "intro featured" "services featured"; align-items: stretch; gap: 1.1rem; margin-top: 1.1rem; } .hero-intro { grid-area: intro; position: relative; --intro-photo-size: 104px; } .intro-photo { position: absolute; top: 1.2rem; right: 1.25rem; width: var(--intro-photo-size); height: var(--intro-photo-size); object-fit: cover; border-radius: 50%; border: 1px solid rgba(117, 207, 255, 0.35); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); filter: brightness(0.78); } .hero-intro h1 { padding-right: calc(var(--intro-photo-size) + 0.6rem); text-align: center; } .hero-intro h2 { margin-left: 0.5rem; padding-right: calc(var(--intro-photo-size) + 0.6rem); } .home-services { grid-area: services; } .hero-featured { grid-area: featured; position: relative; /* Pin to a definite (throwaway) height from the very first layout pass, before any JS runs, so this item's content — specifically the screenshot image, whose intrinsic size may or may not be known yet depending on cache timing — can never feed into CSS Grid's own content-based row-track sizing. Without this, whichever way that race resolves silently changes the left column's own box height too (via the shared row track), which the JS height-sync below then treats as ground truth. JS overwrites this immediately. */ height: 1px; min-height: 0; } .panel { background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: clip; } .panel-inner { padding: 1.2rem 1.25rem; } .hero h1 { margin: 0; font-family: "Consolas", "Lucida Console", monospace; font-size: clamp(1.7rem, 3.7vw, 3.2rem); line-height: 1.08; letter-spacing: 0.02em; } .hero p { color: #b8d8ef; font-size: clamp(1rem, 1.8vw, 1.15rem); margin: 1rem 0; } .glow-line { position: relative; height: 2px; margin: 1.05rem 0 1.25rem; background: linear-gradient( 90deg, transparent, rgba(95, 208, 255, 0.7), transparent ); overflow: hidden; } .glow-line::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(185, 250, 255, 0.8), transparent ); animation: flow 2.6s linear infinite; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.05rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1rem; border-radius: 10px; border: 1px solid rgba(92, 208, 255, 0.55); overflow-wrap: anywhere; text-align: center; transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } .btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(25, 152, 220, 0.25); } .btn.primary { background: linear-gradient( 120deg, rgba(31, 132, 200, 0.65), rgba(77, 255, 227, 0.35) ); } .btn.secondary { background: rgba(9, 34, 56, 0.56); } .featured-project { display: flex; flex-direction: column; gap: 0.9rem; height: 100%; min-height: 0; } .featured-intro::after { content: ""; display: table; clear: both; } .featured-project .badge { position: absolute; top: 1.2rem; right: 1.25rem; font-family: "Consolas", "Lucida Console", monospace; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); border: 1px solid rgba(74, 255, 194, 0.4); border-radius: 999px; padding: 0.3rem 0.7rem; background: rgba(6, 20, 33, 0.8); } .featured-logo { float: left; width: 56px; height: 56px; border-radius: 50%; margin: 0 0.85rem 0.5rem 0; box-shadow: 0 0 16px rgba(168, 120, 255, 0.55); } .featured-project h2 { margin: 0 0 0.5rem; font-family: "Consolas", "Lucida Console", monospace; font-size: clamp(1.2rem, 2.4vw, 1.5rem); } .featured-project p { margin: 0; color: #b8d8ef; } .featured-project .shot { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } .featured-project .shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; background: rgba(6, 20, 33, 0.6); border-radius: 12px; border: 1px solid var(--surface-border); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); } .hero-featured .panel-inner { height: 100%; min-height: 0; display: flex; } .hero-featured .featured-project { flex: 1; min-height: 0; } .section-title { margin: 2rem 0 0.9rem; font-size: clamp(1.25rem, 2.3vw, 2rem); font-family: "Consolas", "Lucida Console", monospace; letter-spacing: 0.02em; } .home-services .section-title { margin-top: 0; margin-left: 0.5rem; } .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; } .card { background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 14px; padding: 1rem; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .card:hover, .card:focus-visible { transform: translateY(-4px); border-color: rgba(147, 228, 255, 0.7); box-shadow: 0 14px 28px rgba(15, 84, 122, 0.3); } .website-card { display: block; } .website-shot { display: block; aspect-ratio: 8 / 5; margin: -1rem -1rem 0.85rem; border-radius: 14px 14px 0 0; overflow: clip; border-bottom: 1px solid rgba(130, 214, 255, 0.33); } .website-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; } .card p { margin: 0; color: #b7d7ec; } .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .service-card { display: block; background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 14px; padding: 1.1rem 1rem; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .service-card:hover, .service-card:focus-visible { transform: translateY(-4px); border-color: rgba(147, 228, 255, 0.7); box-shadow: 0 14px 28px rgba(15, 84, 122, 0.3); } .services-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .icon-wrap { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(19, 67, 102, 0.5); border: 1px solid rgba(117, 207, 255, 0.35); color: var(--neon); margin-bottom: 0.85rem; flex-shrink: 0; } .icon-wrap svg { width: 24px; height: 24px; } .tagline { display: block; font-family: "Consolas", "Lucida Console", monospace; font-size: 0.98rem; letter-spacing: 0.02em; color: var(--text); margin: 0 0 0.4rem; } .card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; } .card-head .icon-wrap, .card-head .tagline { margin-bottom: 0; } .service-card p { margin: 0; color: #b7d7ec; font-size: 0.92rem; } .feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .feature-card { background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 14px; padding: 1.1rem 1rem; } .feature-card p { margin: 0; color: #b7d7ec; font-size: 0.92rem; } .app-hero { text-align: center; padding: 1.8rem 0 1.6rem; } .app-hero img.app-icon { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 0 30px rgba(168, 120, 255, 0.55); margin: 0 auto 1rem; } .app-hero .pitch { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: #dfe9ff; max-width: 760px; margin: 0 auto; } .persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.85rem; } .persona-card { background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 14px; padding: 1rem; } .persona-card .top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .persona-card .emoji { font-size: 1.6rem; } .persona-card h3 { margin: 0; font-size: 1.02rem; } .persona-card p { margin: 0.4rem 0 0.6rem; color: #b7d7ec; font-size: 0.9rem; } .chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } .chip { font-size: 0.74rem; padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid rgba(126, 199, 255, 0.35); color: #cde9ff; } .screenshot-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; } .screenshot-gallery figure { margin: 0; background: rgba(7, 26, 43, 0.6); border: 1px solid var(--surface-border); border-radius: 14px; overflow: clip; } .screenshot-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; cursor: zoom-in; transition: transform 220ms ease; } .screenshot-gallery img:hover, .screenshot-gallery img:focus-visible { transform: scale(1.03); } .screenshot-gallery figcaption { padding: 0.6rem 0.75rem; font-size: 0.85rem; color: #9ec6e4; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; margin-top: 1rem; align-items: stretch; } .contact-card { background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 14px; padding: 1.1rem; text-align: center; display: flex; flex-direction: column; } .contact-card .icon-wrap { margin: 0 auto 0.85rem; } .contact-card h3 { margin: 0 0 0.4rem; } .contact-card p { margin: 0 0 0.9rem; color: #b7d7ec; font-size: 0.9rem; } .contact-card .btn { width: 100%; margin-top: auto; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-form { display: grid; gap: 0.9rem; max-width: 560px; margin: 1rem auto 0; position: relative; } .form-row { display: flex; flex-direction: column; gap: 0.35rem; } .form-row label { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .contact-form input, .contact-form textarea { background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 10px; padding: 0.65rem 0.8rem; color: var(--text); font-family: inherit; font-size: 0.95rem; resize: vertical; } .contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .contact-form .btn { justify-self: start; } .turnstile-frame { border: 2px solid #3a5477; border-radius: 10px; background-color: #071a2c; overflow: hidden; width: 100%; max-height: 53px; } .turnstile-frame .cf-turnstile { margin: -6px; } @media (max-width: 720px) { .turnstile-frame { max-height: 40px; } .turnstile-frame .cf-turnstile { margin: -12px; } } .hp-field { position: absolute; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none; } .form-status { min-height: 1.2em; margin: 0; font-size: 0.9rem; color: var(--accent-2); } .form-status.error { color: var(--danger); } .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2.4rem 1.2rem; background: rgba(4, 10, 18, 0.88); backdrop-filter: blur(4px); } .lightbox[hidden] { display: none; } .lightbox figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 0.7rem; } .lightbox img { max-width: 100%; max-height: 78vh; border-radius: 12px; border: 1px solid var(--surface-border); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); object-fit: contain; display: block; margin: 0 auto; } .lightbox figcaption { text-align: center; color: #cde9ff; font-size: 0.92rem; } .lightbox-close { position: fixed; top: 1.2rem; right: 1.4rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(126, 199, 255, 0.4); background: rgba(9, 34, 56, 0.85); color: var(--text); font-size: 1.1rem; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease; } .lightbox-close:hover, .lightbox-close:focus-visible { transform: scale(1.08); border-color: rgba(147, 228, 255, 0.7); } .script-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .script-card { cursor: pointer; display: flex; flex-direction: column; } .script-card .card-cta { margin-top: 0.7rem; font-family: "Consolas", "Lucida Console", monospace; font-size: 0.82rem; color: var(--accent-2); } .script-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; } .script-card-head .icon-wrap { margin-bottom: 0; } .script-card-head h3 { margin: 0; } /* A genuinely solo leftover card (odd total) stretches to fill its row instead of sitting half-width with an empty gap beside it. Works for any card count, not just the current total. */ .script-cards .script-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; } .app-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-card { cursor: pointer; display: flex; flex-direction: column; } /* A genuinely solo leftover card (odd total) stretches to fill its row instead of sitting half-width with an empty gap beside it. Works for any card count, not just the current total. */ .app-cards .app-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; } .app-card .card-cta { margin-top: 0.7rem; font-family: "Consolas", "Lucida Console", monospace; font-size: 0.82rem; color: var(--accent-2); } .app-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; } .app-icon { width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(130, 214, 255, 0.33); flex-shrink: 0; object-fit: cover; } .app-card-head h3 { margin: 0; } .detail-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2.4rem 1.2rem; background: rgba(4, 10, 18, 0.88); backdrop-filter: blur(4px); } .detail-modal[hidden] { display: none; } .modal-panel { position: relative; width: min(720px, 100%); max-height: 100%; overflow-y: auto; background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.6rem 1.8rem; scrollbar-width: thin; scrollbar-color: rgba(84, 246, 255, 0.5) rgba(6, 20, 33, 0.4); } .modal-panel::-webkit-scrollbar { width: 10px; } .modal-panel::-webkit-scrollbar-track { background: rgba(6, 20, 33, 0.4); border-radius: 10px; } .modal-panel::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(84, 246, 255, 0.65), rgba(46, 183, 255, 0.45) ); border-radius: 10px; border: 2px solid rgba(6, 20, 33, 0.4); } .modal-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, rgba(84, 246, 255, 0.85), rgba(46, 183, 255, 0.65) ); } .modal-panel h2 { margin: 0 0 0.6rem; padding-right: 2.4rem; font-family: "Consolas", "Lucida Console", monospace; font-size: clamp(1.2rem, 2.4vw, 1.5rem); } .modal-title-head { display: flex; align-items: center; gap: 0.9rem; } .modal-title-head .icon-wrap { margin-bottom: 0; flex-shrink: 0; } .modal-title-head h2 { margin: 0; } .modal-panel h3 { margin: 1.2rem 0 0.5rem; font-size: 1rem; } .modal-panel p { margin: 0.6rem 0; color: #b7d7ec; } .modal-panel code { font-family: "Consolas", "Lucida Console", monospace; color: var(--accent-2); } .code-block-wrap { position: relative; } .code-block { margin: 0.8rem 0; background: rgba(4, 14, 24, 0.85); border: 1px solid var(--surface-border); border-radius: 10px; padding: 0.9rem 4.2rem 0.9rem 1rem; overflow-x: auto; } .code-block code { font-family: "Consolas", "Lucida Console", monospace; font-size: 0.85rem; color: #cdeaff; white-space: pre; } .copy-code-btn { position: absolute; top: 0.7rem; right: 0.7rem; padding: 0.3rem 0.65rem; border-radius: 6px; border: 1px solid rgba(130, 214, 255, 0.35); background: rgba(9, 34, 56, 0.85); color: var(--muted); font-family: "Consolas", "Lucida Console", monospace; font-size: 0.72rem; cursor: pointer; transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease; } .copy-code-btn:hover, .copy-code-btn:focus-visible { color: var(--text); border-color: rgba(147, 228, 255, 0.7); } .copy-code-btn.copied { color: var(--accent-2); border-color: rgba(74, 255, 194, 0.5); } .method-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; } .method-tab { padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid rgba(130, 214, 255, 0.33); background: rgba(7, 26, 43, 0.6); color: var(--muted); font-family: "Consolas", "Lucida Console", monospace; font-size: 0.85rem; cursor: pointer; transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease; } .method-tab:hover, .method-tab:focus-visible { color: var(--text); border-color: rgba(147, 228, 255, 0.6); } .method-tab.active { color: var(--text); border-color: rgba(84, 246, 255, 0.7); background: rgba(19, 67, 102, 0.55); box-shadow: 0 0 14px rgba(84, 246, 255, 0.25); } .method-panel[hidden] { display: none; } .download-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.9rem 0; } .modal-disclaimer { margin-top: 1.1rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(255, 111, 143, 0.4); border-radius: 10px; background: rgba(255, 111, 143, 0.08); color: #ffd7de; font-size: 0.85rem; } .modal-notice { margin-top: 1.1rem; padding: 0.75rem 0.9rem; border: 1px solid rgba(46, 183, 255, 0.4); border-radius: 10px; background: rgba(46, 183, 255, 0.08); color: #cdeaff; font-size: 0.85rem; } /* App screenshot galleries can run to a dozen-plus images, so a fixed 2-column grid (rather than the 3-column .screenshot-gallery default used elsewhere) reads cleanly at any count; an odd one out spans the full width instead of leaving a half-empty row. */ .detail-modal .screenshot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-modal .screenshot-gallery figure:last-child:nth-child(2n + 1) { grid-column: 1 / -1; } .tool-list { display: grid; gap: 0.7rem; margin-top: 0.9rem; } .tool-item { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.85rem; border: 1px solid rgba(130, 214, 255, 0.25); border-radius: 12px; background: rgba(7, 26, 43, 0.5); } .tool-item .icon-wrap { margin-bottom: 0; } .tool-item h4 { margin: 0 0 0.3rem; font-size: 0.95rem; } .tool-item p { margin: 0; font-size: 0.85rem; } .list { margin: 0; padding: 0; list-style: none; } .list li { position: relative; padding-left: 1.1rem; margin: 0.45rem 0; color: #d0e9fb; } .list li::before { content: ">"; position: absolute; left: 0; color: var(--accent-2); } .about-hero-flex { display: flex; align-items: flex-start; gap: 1.4rem; flex-wrap: wrap; } .about-photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(117, 207, 255, 0.4); box-shadow: 0 0 30px rgba(84, 246, 255, 0.35); } .about-hero-text { flex: 1; min-width: 240px; } .about-meta-line { margin: 0.3rem 0 0; color: var(--muted); font-family: "Consolas", "Lucida Console", monospace; font-size: 0.9rem; } .about-hero-desc { margin-top: 1.1rem; } .timeline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1rem; } .timeline-card { display: flex; flex-direction: column; background: rgba(7, 26, 43, 0.6); border: 1px solid rgba(130, 214, 255, 0.28); border-radius: 14px; padding: 1.1rem 1rem 1.3rem; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .timeline-card.clickable { cursor: pointer; } .timeline-card.clickable:hover, .timeline-card.clickable:focus-visible { transform: translateY(-4px); border-color: rgba(147, 228, 255, 0.7); box-shadow: 0 14px 28px rgba(15, 84, 122, 0.3); } .timeline-excerpt { margin: 0.3rem 0 0.5rem; color: #b7d7ec; font-size: 0.86rem; } .read-more-hint { display: inline-block; margin: 0 0 0.6rem; color: var(--accent-2); font-family: "Consolas", "Lucida Console", monospace; font-size: 0.78rem; } .skills-block { margin-top: auto; padding-top: 0.5rem; } .skills-block h4 { margin: 0 0 0.4rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1rem; } .cert-card { position: relative; display: flex; flex-direction: column; background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 14px; padding: 1.1rem 1rem 2.6rem; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .cert-card.clickable { cursor: pointer; } .cert-card.clickable:hover, .cert-card.clickable:focus-visible { transform: translateY(-4px); border-color: rgba(147, 228, 255, 0.7); box-shadow: 0 14px 28px rgba(15, 84, 122, 0.3); } .cert-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; } .cert-logo-wrap { width: 50px; height: 50px; border-radius: 12px; background: rgba(19, 67, 102, 0.5); border: 1px solid rgba(117, 207, 255, 0.35); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .cert-logo-wrap img { width: 100%; height: 100%; object-fit: cover; } .cert-head h3 { margin: 0; font-size: 0.98rem; } .cert-org { margin: 0.15rem 0 0; color: var(--accent-2); font-size: 0.8rem; } .cert-dates { font-family: "Consolas", "Lucida Console", monospace; font-size: 0.76rem; color: var(--muted); margin: 0.3rem 0 0.5rem; } .cert-card p { margin: 0.3rem 0; color: #b7d7ec; font-size: 0.86rem; } .cert-grade { font-size: 0.84rem; color: #cdeaff; } .cert-desc { background: rgba(2, 11, 19, 0.7); border: 1px solid rgba(84, 246, 255, 0.12); border-radius: 10px; padding: 0.6rem 0.7rem; } .cert-card .chip-row { padding-right: 3.4rem; } /* Honor badge: rosette medal in the cert card's bottom-right corner — scalloped diamond-blue rim, a golden star face, and two golden ribbon tails, with a looping shine sweep across the medallion face. */ .cert-badge { position: absolute; right: 8px; bottom: 8px; width: 46px; aspect-ratio: 64 / 80; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 8px rgba(84, 246, 255, 0.4)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); } .cert-badge-svg { width: 100%; height: 100%; display: block; } .cert-badge-shine { position: absolute; top: 17.5%; left: 31%; width: 38%; height: 30%; border-radius: 50%; overflow: hidden; } .cert-badge-shine::before { content: ""; position: absolute; top: -30%; left: -60%; width: 60%; height: 220%; background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, 0.95), transparent ); transform: translateX(-40%); animation: badge-shine 3.6s ease-in-out infinite; } @keyframes badge-shine { 0%, 15% { transform: translateX(-40%); } 55%, 100% { transform: translateX(260%); } } /* Sized to an A4 portrait page (the certificate's actual proportions) so the whole single-page PDF fits without triggering the PDF viewer's own inner scrollbar — any overflow scrolls via .modal-panel instead, which is the only scrollbar this preview should ever show. */ .pdf-frame { display: block; position: relative; margin-top: 0.9rem; aspect-ratio: 1 / 1.4142; border-radius: 10px; overflow: hidden; border: 1px solid var(--surface-border); background: #0b1f33; transition: border-color 220ms ease; } .pdf-frame:hover, .pdf-frame:focus-visible { border-color: rgba(147, 228, 255, 0.7); } .pdf-frame iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; } .pdf-frame-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.9rem; background: linear-gradient(0deg, rgba(4, 10, 18, 0.88), transparent); color: var(--accent-2); font-family: "Consolas", "Lucida Console", monospace; font-size: 0.8rem; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 200ms ease; pointer-events: none; } .pdf-frame:hover .pdf-frame-hint, .pdf-frame:focus-visible .pdf-frame-hint { opacity: 1; transform: translateY(0); } .footer { width: var(--content-width); margin: 0 auto; padding: 0.5rem 0 2rem; color: #9ec6e4; font-size: 0.92rem; } .footer .footer-panel { display: block; border: 1px solid rgba(134, 205, 255, 0.26); background: rgba(8, 31, 50, 0.58); border-radius: 12px; padding: 0.9rem 1rem; text-align: center; } .footer-panel-link { color: var(--neon); font-weight: 600; border-color: rgba(84, 246, 255, 0.45); background: linear-gradient( 135deg, rgba(84, 246, 255, 0.16), rgba(46, 183, 255, 0.08) ); box-shadow: 0 0 22px rgba(84, 246, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .footer-panel-link:hover, .footer-panel-link:focus-visible { border-color: rgba(84, 246, 255, 0.8); background: linear-gradient( 135deg, rgba(84, 246, 255, 0.26), rgba(46, 183, 255, 0.14) ); box-shadow: 0 0 34px rgba(84, 246, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12); transform: translateY(-1px); } .reveal { opacity: 0; transform: translateY(18px); } .reveal.in { opacity: 1; transform: translateY(0); transition: opacity 460ms ease, transform 460ms ease; } .route-transition { position: fixed; inset: 0; pointer-events: none; z-index: 999; background: linear-gradient( 120deg, rgba(8, 28, 49, 0), rgba(26, 117, 176, 0), rgba(12, 163, 183, 0) ); opacity: 0; transition: opacity 300ms ease; } body.page-enter .route-transition { opacity: 0.85; } body.page-exit .route-transition { opacity: 1; transition-duration: 320ms; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes flow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .services-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cert-grid, .timeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .screenshot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-wrap { flex-wrap: wrap; align-items: center; gap: 0.9rem; } .nav-toggle { display: inline-flex; } .nav-links, .nav-special-link { display: none; width: 100%; } .nav-wrap.nav-open .nav-links { display: grid; } .nav-wrap.nav-open .nav-special-link { display: flex; } .nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.7rem; } .nav-links a { padding: 0.48rem 0.7rem; } .nav-special-link { margin-left: 0; justify-content: center; } } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; grid-template-areas: "intro" "services" "featured"; } .hero-featured { height: auto; min-height: 0; } .hero-featured .panel-inner { height: auto; } .featured-project .shot { flex: none; aspect-ratio: 16 / 10; } /* The status badge is absolutely positioned in the card's top-right corner, which works at desktop width but collides with the "ItsJustMe" title once the card narrows down to full mobile width. Pull it back into normal flow as its own line above the logo/title instead of just shrinking it, so it can never overlap regardless of title length. */ .featured-project .badge { position: static; display: table; margin: 0 0 0.6rem; font-size: 0.68rem; } .featured-project .cta-row .btn { width: 100%; } .cards { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; } .cert-grid, .timeline-grid { grid-template-columns: 1fr; } .about-photo { width: 96px; height: 96px; } .screenshot-gallery { grid-template-columns: 1fr; } .app-cards { grid-template-columns: 1fr; } .app-cards .app-card:last-child:nth-child(2n + 1) { grid-column: auto; } .script-cards { grid-template-columns: 1fr; } .script-cards .script-card:last-child:nth-child(2n + 1) { grid-column: auto; } .detail-modal .screenshot-gallery { grid-template-columns: 1fr; } .countdown-grid { gap: 0.5rem; } .countdown-value { font-size: clamp(1.3rem, 7vw, 2rem); } .guest-form .btn { width: 100%; } } /* Hernegrill page */ .countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; margin: 1.1rem 0; } .countdown-unit { background: rgba(7, 26, 43, 0.78); border: 1px solid var(--surface-border); border-radius: 12px; padding: 0.9rem 0.5rem; text-align: center; } .countdown-value { display: block; font-family: "Consolas", "Lucida Console", monospace; font-size: clamp(1.6rem, 5vw, 2.6rem); color: var(--accent-2); line-height: 1; } .countdown-label { display: block; margin-top: 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .countdown-complete { margin: 1rem 0 0; font-family: "Consolas", "Lucida Console", monospace; color: var(--accent-2); font-size: 1.1rem; } .guest-form { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1rem 0; } .guest-form input { flex: 1 1 220px; background: rgba(7, 26, 43, 0.78); border: 1px solid rgba(130, 214, 255, 0.33); border-radius: 10px; padding: 0.65rem 0.8rem; color: var(--text); font-family: inherit; font-size: 0.95rem; } .guest-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .guest-form input:disabled { opacity: 0.55; } .guest-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; } .guest-list li { background: rgba(74, 255, 194, 0.1); border: 1px solid rgba(74, 255, 194, 0.35); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9rem; color: var(--text); } .guest-list-empty { color: var(--muted); font-size: 0.9rem; margin: 1rem 0 0; } @media (pointer: fine) { a, button, [role="button"], .nav-toggle, .lightbox-close, .script-card, .copy-code-btn, .method-tab, .screenshot-gallery img { cursor: url("../img/cursor/cursor_clickable.cur"), pointer; } } @media (pointer: fine) { p, h1, h2, h3, h4, h5, h6, li, blockquote, label, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea { cursor: url("../img/cursor/cursor_textselect.cur"), text; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .reveal, .reveal.in { opacity: 1; transform: none; } }