/* ============================================================ RMARQJ.COM v5.1 — Hostinger-ready production build ============================================================ */ :root { --obsidian: #0D1117; --midnight: #1B2631; --slate: #334155; --ivory: #E6E8EB; --warm-white: #F7F5F0; --gold: #D4AF37; --gold-soft: rgba(212,175,55,.14); --gold-ink: #7D5E12; --green-ink: #1A7F37; --comment-light: #5B6672; --muted: #98A2B3; --ink: #111820; --syn-green: #7EE787; --syn-blue: #79C0FF; --syn-purple: #D2A8FF; --syn-orange: #FFA657; --syn-comment: #77828E; --font-display: "Inter", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; --font-editorial: "EB Garamond", Georgia, serif; --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --shadow-soft: 0 12px 40px rgba(13,17,23,.12); --shadow-deep: 0 24px 80px rgba(13,17,23,.3); --glow-gold: 0 0 0 1px rgba(212,175,55,.35), 0 8px 40px rgba(212,175,55,.12); --grad-dark: linear-gradient(150deg,#0D1117 0%,#141C26 50%,#1B2631 100%); --max-w: 1160px; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } ::selection { background: var(--gold); color: var(--obsidian); } body { font: 400 1.02rem/1.7 var(--font-body); color: var(--ink); background: var(--warm-white); -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: inherit; } img { max-width:100%; display:block; } .wrap { width:100%; max-width: var(--max-w); margin:0 auto; padding:0 28px; } /* scrollbar */ ::-webkit-scrollbar { width:10px; } ::-webkit-scrollbar-track { background: var(--obsidian); } ::-webkit-scrollbar-thumb { background: var(--slate); border-radius:5px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ---------- entrance animations ---------- */ /* .rise = pure CSS, used above the fold — works with JS disabled/broken */ @keyframes riseIn { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } } .rise { animation: riseIn .7s ease both; } .rise.d1 { animation-delay:.08s; } .rise.d2 { animation-delay:.16s; } .rise.d3 { animation-delay:.24s; } /* .reveal = scroll-triggered, below the fold only. Hidden ONLY when main.js has loaded (it adds .js to ) — JS failure = fully visible site. */ html.js .reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } html.js .reveal.in { opacity:1; transform:none; } .reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition:none !important; } html.js .reveal, .reveal { opacity:1 !important; transform:none !important; } } /* screen-reader-only utility */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- type ---------- */ .eyebrow { font: 500 .78rem/1.4 var(--font-mono); letter-spacing:.1em; text-transform: lowercase; color: var(--gold-ink); } .eyebrow .path { color: var(--comment-light); } .hero .eyebrow, .section--dark .eyebrow, .stats .eyebrow, .cta-band .eyebrow { color: var(--gold); } .hero .eyebrow .path, .section--dark .eyebrow .path, .cta-band .eyebrow .path { color: var(--syn-comment); } .display { font: 800 clamp(3rem,8.5vw,6.4rem)/.95 var(--font-display); letter-spacing:-.045em; } .display .dot { color: var(--gold); } h2.section-title { font: 800 clamp(1.8rem,4vw,2.8rem)/1.08 var(--font-display); letter-spacing:-.03em; margin:14px 0 18px; } h1.page-title { font: 800 clamp(2.4rem,6vw,4rem)/1.02 var(--font-display); letter-spacing:-.04em; margin:14px 0 18px; } .lede { font-size:1.15rem; color:var(--slate); max-width:58ch; } .editorial { font-family:var(--font-editorial); font-size:clamp(1.4rem,3vw,2rem); line-height:1.45; font-style:italic; } .mono { font-family:var(--font-mono); } /* ---------- buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border-radius:var(--r-md); font: 600 .82rem/1 var(--font-mono); letter-spacing:.05em; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:hover { transform:translateY(-2px); } .btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .btn--gold { background:var(--gold); color:var(--obsidian); } .btn--gold:hover { box-shadow: 0 10px 36px rgba(212,175,55,.35); } .btn--dark { background:var(--obsidian); color:var(--warm-white); } .btn--dark:hover { box-shadow: var(--shadow-soft); } .btn--ghost { border:1px solid rgba(247,245,240,.3); color:var(--warm-white); } .btn--ghost:hover { border-color:var(--gold); color:var(--gold); } /* ---------- header ---------- */ .site-header { position:sticky; top:0; z-index:50; background: rgba(13,17,23,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom:1px solid rgba(230,232,235,.08); } .site-header .wrap { display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:24px; } .brand img { height:26px; width:auto; } .nav { display:flex; gap:26px; align-items:center; } .nav a { color:var(--ivory); text-decoration:none; font: 400 .82rem/1 var(--font-mono); letter-spacing:.03em; text-transform:lowercase; padding:8px 2px; border-bottom:2px solid transparent; transition: color .15s ease; } .nav a:hover, .nav a[aria-current="page"] { color:var(--gold); border-bottom-color:var(--gold); } .nav a:focus-visible { outline:2px solid var(--gold); outline-offset:4px; } .status-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(126,231,135,.35); border-radius:var(--r-pill); padding:8px 15px; color:var(--syn-green); font: 500 .7rem/1 var(--font-mono); letter-spacing:.05em; text-transform:lowercase; text-decoration:none; white-space:nowrap; background: rgba(126,231,135,.06); } .status-pill::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--syn-green); animation:pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} } .nav-toggle { display:none; background:none; border:0; color:var(--ivory); font-size:1.6rem; cursor:pointer; } @media (max-width:860px) { .nav-toggle { display:block; } .nav { display:none; position:absolute; top:74px; left:0; right:0; background:var(--obsidian); flex-direction:column; align-items:flex-start; padding:18px 28px 26px; gap:4px; border-bottom:1px solid rgba(230,232,235,.1); } .nav.open { display:flex; } .nav a { display:block; width:100%; padding:12px 0; } .site-header .status-pill { display:none; } } /* ---------- hero ---------- */ .hero { background: var(--grad-dark); color: var(--warm-white); position:relative; overflow:hidden; } .hero::before { content:""; position:absolute; inset:0; background: url("../assets/patterns/topo-dark.webp?v=5.1.0") center/cover no-repeat; opacity:.32; pointer-events:none; } .hero::after { content:""; position:absolute; inset:auto 0 0 0; height:180px; background: linear-gradient(to top, rgba(13,17,23,.9), transparent); pointer-events:none; } .hero .wrap { position:relative; z-index:1; } .hero--home .wrap { min-height: calc(100vh - 74px); min-height: calc(100svh - 74px); display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,6vw,80px); align-items:center; padding-top:64px; padding-bottom:88px; } @media (max-width:960px) { .hero--home .wrap { grid-template-columns:1fr; padding-top:56px; padding-bottom:64px; min-height:0; } } .hero--page .wrap { padding: clamp(72px,11vw,130px) 28px; } .hero .display, .hero .page-title { color:var(--warm-white); margin:16px 0 22px; } .hero .lede { color:var(--ivory); } .hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:38px; } /* gold ascent line */ .ascent { position:absolute; left:50%; bottom:0; width:1px; height:110px; background: linear-gradient(to top, var(--gold), transparent); z-index:1; } /* ---------- terminal ---------- */ .terminal { background: rgba(13,17,23,.75); border:1px solid rgba(230,232,235,.12); border-radius: var(--r-md); box-shadow: var(--shadow-deep); backdrop-filter: blur(6px); overflow:hidden; } .term-bar { display:flex; align-items:center; gap:7px; padding:11px 16px; background: rgba(230,232,235,.05); border-bottom:1px solid rgba(230,232,235,.08); } .term-dot { width:11px; height:11px; border-radius:50%; } .term-dot--r { background:#FF5F57; } .term-dot--y { background:#FEBC2E; } .term-dot--g { background:#28C840; } .term-title { margin-left:8px; font:400 .72rem/1 var(--font-mono); color:var(--muted); letter-spacing:.03em; } .term-body { padding: clamp(20px,3vw,30px); font: 400 .88rem/1.85 var(--font-mono); color: var(--ivory); min-height: 220px; } .term-body .ln { display:block; white-space:pre-wrap; word-break:break-word; } .term-body .p::before { content:"$ "; color:var(--syn-purple); } .term-body .p { color:var(--warm-white); } .term-body .o { color:var(--muted); } .term-body .ok::before { content:"[ok] "; color:var(--syn-green); } .term-body .ok { color:var(--ivory); } .term-body .c { color:var(--syn-comment); } .term-body .hl { color:var(--syn-blue); } .cursor { display:inline-block; width:9px; height:1.15em; background:var(--gold); vertical-align:text-bottom; animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity:0; } } /* ---------- stats strip ---------- */ .stats { background: var(--obsidian); border-top:1px solid rgba(230,232,235,.07); border-bottom:1px solid rgba(230,232,235,.07); } .stats .wrap { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:0; } .stat { padding:34px 26px; border-left:1px solid rgba(230,232,235,.07); } .stat:first-child { border-left:0; } .stat b { display:block; font:600 clamp(1.6rem,3vw,2.2rem)/1 var(--font-mono); color:var(--gold); letter-spacing:-.02em; } .stat span { display:block; margin-top:8px; font:400 .78rem/1.5 var(--font-mono); color:var(--muted); text-transform:lowercase; } @media (max-width:640px){ .stat { border-left:0; border-top:1px solid rgba(230,232,235,.07); } .stat:first-child{border-top:0;} } /* ---------- sections ---------- */ .section { padding: clamp(72px,11vw,130px) 0; } .section--dark { background:var(--obsidian); color:var(--warm-white); } .section--dark .lede { color:var(--muted); } .section--ivory { background:var(--ivory); } .section-head { margin-bottom:8px; } /* ---------- cards ---------- */ .card-grid { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); margin-top:46px; } .card { background:#fff; border:1px solid rgba(17,24,32,.08); border-radius:var(--r-lg); box-shadow:var(--shadow-soft); padding: clamp(26px,4vw,40px); display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--ink); transition: transform .18s ease, box-shadow .18s ease; } a.card:hover { transform:translateY(-5px); box-shadow: var(--shadow-deep); } a.card:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .card h3 { font:700 1.3rem/1.2 var(--font-display); letter-spacing:-.015em; } .card p { color:var(--slate); font-size:.96rem; } .card .link { margin-top:auto; color:var(--gold-ink); font:500 .8rem/1 var(--font-mono); } .section--dark .card { background:var(--midnight); border-color:rgba(230,232,235,.08); color:var(--warm-white); } .section--dark .card p { color:var(--muted); } .section--dark .card .link { color:var(--gold); } /* ---------- terminal project cards ---------- */ a.terminal { display:block; text-decoration:none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.terminal:hover { transform:translateY(-5px); border-color:rgba(212,175,55,.5); box-shadow: var(--glow-gold), var(--shadow-deep); } a.terminal:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } a.terminal .term-body { min-height:0; } a.terminal h3 { font:600 1.12rem/1.3 var(--font-mono); color:var(--syn-blue); margin:8px 0 10px; } a.terminal .desc { font:400 .9rem/1.65 var(--font-body); color:var(--muted); } a.terminal .tag { display:inline-block; margin-top:16px; font:500 .74rem/1 var(--font-mono); color:var(--syn-green); } /* ---------- principles ---------- */ .principles { display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:48px; } .principle { position:relative; padding-top:22px; } .principle::before { content:""; position:absolute; top:0; left:0; width:34px; height:2px; background:var(--gold); } .principle img { width:42px; height:42px; margin-bottom:14px; } .principle h4 { font:700 1.02rem/1.2 var(--font-display); margin-bottom:7px; } .principle p { color:var(--muted); font-size:.9rem; } /* ---------- two-column / portrait ---------- */ .two-col { display:grid; gap:clamp(36px,6vw,80px); grid-template-columns:1.05fr .95fr; align-items:center; } @media (max-width:860px){ .two-col { grid-template-columns:1fr; } } .portrait-frame { position:relative; } .portrait-frame img { border-radius:var(--r-lg); box-shadow:var(--shadow-deep); position:relative; z-index:1; } .portrait-frame::after { content:""; position:absolute; inset:22px -22px -22px 22px; border:1px solid rgba(212,175,55,.5); border-radius:var(--r-lg); z-index:0; } /* ---------- timeline ---------- */ .timeline { list-style:none; margin-top:50px; position:relative; padding-left:34px; display:grid; gap:34px; } .timeline::before { content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background: linear-gradient(to bottom, var(--gold), rgba(212,175,55,.1)); } .timeline li { position:relative; } .timeline li::before { content:""; position:absolute; left:-34px; top:6px; width:13px; height:13px; border-radius:50%; background:var(--obsidian); border:2px solid var(--gold); } .timeline .yr { font:600 .78rem/1 var(--font-mono); color:var(--gold); letter-spacing:.06em; } .timeline h4 { font:700 1.1rem/1.3 var(--font-display); margin:6px 0 4px; } .timeline p { color:var(--muted); font-size:.92rem; max-width:52ch; } /* ---------- lists ---------- */ .detail-list { list-style:none; margin-top:28px; display:grid; gap:16px; } .detail-list li { padding-left:28px; position:relative; color:var(--slate); } .detail-list li::before { content:""; position:absolute; left:0; top:.6em; width:14px; height:2px; background:var(--gold); } .section--dark .detail-list li { color:var(--ivory); } .section--dark .detail-list li strong { color:var(--warm-white); } /* affiliations row */ .affil { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:26px; } .affil span { font:500 .8rem/1 var(--font-mono); color:var(--muted); letter-spacing:.04em; } .affil span::before { content:"◆ "; color:var(--gold); font-size:.6rem; vertical-align:2px; } /* ---------- blog ---------- */ .post-list { margin-top:46px; } .post-item { display:grid; grid-template-columns:120px 1fr auto; gap:26px; align-items:baseline; padding:28px 0; border-bottom:1px solid rgba(17,24,32,.1); text-decoration:none; color:var(--ink); } .post-item:hover h3 { color:var(--gold); } .post-item time { font:500 .74rem/1 var(--font-mono); letter-spacing:.05em; color:var(--comment-light); } .post-item h3 { font:700 1.2rem/1.35 var(--font-display); letter-spacing:-.01em; transition:color .15s ease; } .post-item .tag { font:500 .7rem/1 var(--font-mono); letter-spacing:.05em; color:var(--green-ink); text-transform:lowercase; } .post-item.soon { opacity:.55; cursor:default; } .post-item.soon:hover h3 { color:var(--ink); } .post-item.soon .tag { color:var(--syn-comment); } @media (max-width:640px){ .post-item { grid-template-columns:1fr; gap:6px; } } /* ---------- contact ---------- */ .contact-grid { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); margin-top:46px; } .contact-grid .card .link { word-break:break-all; } /* ---------- CTA band ---------- */ .cta-band { position:relative; overflow:hidden; background: var(--obsidian); color:var(--warm-white); } .cta-band::before { content:""; position:absolute; inset:0; background: url("../assets/images/hero.webp?v=5.1.0") center/cover no-repeat; opacity:.22; } .cta-band::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(13,17,23,.92) 30%, rgba(13,17,23,.55)); } .cta-band .wrap { position:relative; z-index:1; padding-top:clamp(80px,12vw,140px); padding-bottom:clamp(80px,12vw,140px); } .cta-band .editorial { color:var(--ivory); max-width:26ch; } /* ---------- footer ---------- */ .site-footer { background:var(--obsidian); color:var(--muted); padding:60px 0 44px; font-size:.88rem; } .site-footer .wrap { display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; } .site-footer img { height:22px; } .footer-nav { display:flex; gap:22px; flex-wrap:wrap; } .footer-nav a { color:var(--muted); text-decoration:none; font:400 .82rem/1 var(--font-mono); text-transform:lowercase; } .footer-nav a:hover { color:var(--gold); } .footer-line { width:100%; border:0; border-top:1px solid rgba(230,232,235,.08); margin:6px 0 0; } .footer-tagline { font-family:var(--font-editorial); font-style:italic; color:var(--ivory); font-size:1.05rem; } .footer-meta { font:400 .75rem/1.6 var(--font-mono); } .footer-meta .c { color:var(--syn-comment); } /* ---------- skip link ---------- */ .skip-link { position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--obsidian); padding:12px 20px; z-index:100; font-weight:600; text-decoration:none; } .skip-link:focus { left:0; } /* ---------- small-screen hardening ---------- */ @media (max-width:480px) { .wrap { padding-left:20px; padding-right:20px; } .site-header .wrap { gap:14px; } .brand img { max-width:190px; } .hero--page .wrap { padding-left:20px; padding-right:20px; } .hero-cta { flex-direction:column; align-items:stretch; } .hero-cta .btn { width:100%; } .term-body { padding:18px; font-size:.78rem; } .portrait-frame::after { inset:12px -10px -12px 10px; } .footer-nav { gap:16px; } }